/* Brand site: Studio ("Cut your own"). Prefix .st-. Tokens only; Fixel only. */
@layer marta.components {
  .st-body { --st-nav: 64px; }
  .st { display: block; }
  .st-app { position: relative; }

  /* Head */
  .st-head { padding: 1rem var(--mb-gutter) .5rem; }
  .st-title { font: 900 clamp(2.2rem, 1.4rem + 3vw, 3.6rem)/.9 var(--mb-font-display); letter-spacing: var(--mb-track-tight); margin: 0 0 .35rem; }
  .st-lede { margin: 0; color: var(--mb-ink-soft); font-size: var(--mb-step--1); max-width: 46ch; }

  /* Stage: a tailor's cutting mat */
  .st-stage { position: relative; display: grid; place-items: center; align-content: center; gap: .6rem; padding: 1.25rem;
    background:
      linear-gradient(90deg, var(--mb-line) 1px, transparent 1px) 0 0 / 24px 24px,
      linear-gradient(var(--mb-line) 1px, transparent 1px) 0 0 / 24px 24px,
      var(--mb-blush);
    border-radius: var(--mb-radius-lg); margin-inline: var(--mb-gutter); overflow: hidden; }
  .st-stage::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 14px;
    background: repeating-linear-gradient(90deg, var(--mb-plum) 0 1.5px, transparent 1.5px 24px) 0 0 / 100% 14px,
      repeating-linear-gradient(90deg, var(--mb-plum) 0 1px, transparent 1px 6px) 0 0 / 100% 6px; opacity: .35; }
  .st-canvas { width: 300px; height: 375px; box-shadow: var(--mb-shadow-lift); border-radius: 4px; overflow: hidden; background: #fff;
    transition: width var(--mb-dur-3) var(--mb-ease-silk), height var(--mb-dur-3) var(--mb-ease-silk); }
  .st-canvas svg { display: block; width: 100%; height: 100%; }
  .st-meta { margin: 0; font: 600 .8rem/1.2 var(--mb-font-text); color: var(--mb-ink-soft); text-align: center; }

  /* Panel */
  .st-panel { background: var(--mb-surface); display: flex; flex-direction: column; min-height: 0; }
  .st-tabs { flex: none; padding-inline: .5rem; }
  .st-tabs .mb-tab { padding: .9rem .75rem; font-size: .92rem; min-height: 44px; }
  .st-panes { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 1rem 1.1rem 1.25rem; }
  .st-pane { display: grid; gap: 1.1rem; }
  .st-pane[hidden] { display: none; }
  .st-set { border: 0; padding: 0; margin: 0; display: grid; gap: .55rem; }
  .st-set legend, .st-legend { font: 800 .95rem/1.2 var(--mb-font-display); padding: 0; margin-bottom: .55rem; display: flex; justify-content: space-between; width: 100%; }
  .st-legend output { font: 600 .9rem/1 var(--mb-font-text); color: var(--mb-accent); }
  .st-chip small { font-weight: 500; opacity: .7; margin-left: .2em; }
  .st-gap { margin-top: .4rem; }
  .st-ico { width: 1.6em; height: 1.2em; flex: none; }
  .st-ico path { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

  /* Layout cards */
  .st-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .st-tpl { display: grid; gap: .25rem; text-align: left; padding: .5rem .5rem .7rem; border: 2px solid transparent; border-radius: var(--mb-radius);
    background: var(--mb-blush); color: var(--mb-ink); font: inherit; cursor: pointer;
    transition: border-color var(--mb-dur-2), transform var(--mb-dur-2) var(--mb-ease-spring), border-radius var(--mb-dur-4) var(--mb-ease-silk); }
  .st-tpl:hover { transform: translateY(-2px); border-radius: var(--mb-radius-lg) var(--mb-radius-lg) var(--mb-radius) var(--mb-radius); }
  .st-tpl[aria-pressed="true"] { border-color: var(--mb-thread); background: var(--mb-surface); box-shadow: var(--mb-shadow); }
  .st-tpl__thumb { display: grid; place-items: center; height: 104px; border-radius: 10px; overflow: hidden; }
  .st-tpl__thumb svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; display: block; border-radius: 3px; box-shadow: 0 4px 14px -8px rgba(58,18,48,.5); }
  .st-tpl__name { font: 800 .92rem/1.15 var(--mb-font-display); }
  .st-tpl__hint { font-size: .76rem; line-height: 1.3; color: var(--mb-ink-soft); }

  /* Fields */
  .st-field { position: relative; }
  .st-field textarea { resize: vertical; min-height: 3.2rem; }
  .st-count { justify-self: end; font-size: .75rem !important; }
  .st-note { font-size: .8rem; color: var(--mb-ink-soft); margin: 0; }

  /* Colour fields */
  .st-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: .5rem; }
  .st-swatch { display: grid; gap: .2rem; justify-items: start; padding: .6rem .7rem; min-height: 72px; border-radius: 14px 14px 14px 4px; border: 2px solid var(--mb-line);
    background: var(--sw); color: var(--sw-ink); font: 700 .82rem/1.1 var(--mb-font-text); cursor: pointer; transition: transform var(--mb-dur-2) var(--mb-ease-spring), border-radius var(--mb-dur-3) var(--mb-ease-silk); }
  .st-swatch span { font: 900 1.4rem/1 var(--mb-font-display); letter-spacing: -.04em; }
  .st-swatch:hover { transform: translateY(-2px) rotate(-1deg); }
  .st-swatch[aria-pressed="true"] { border-color: var(--mb-thread); box-shadow: 0 0 0 3px var(--mb-surface), 0 0 0 5px var(--mb-thread); border-radius: var(--mb-arch); }

  .st-togs { display: grid; gap: .7rem; }
  .st-tog { min-height: 44px; }

  /* Warnings: the guardrails */
  .st-warn { margin-top: 1.1rem; font-size: .86rem; }
  .st-warn ul { margin: 0; padding: .8rem 1rem .8rem 2rem; background: var(--mb-butter); border-radius: var(--mb-radius); color: #4A3A00; }
  .st-warn li + li { margin-top: .35rem; }
  .st-ok { margin: 0; padding: .7rem 1rem; border-radius: var(--mb-radius); background: var(--mb-mint); color: #0E5A45; font-weight: 600; }

  /* Export bar */
  .st-export { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
    border-top: 1.5px dashed var(--mb-line); background: var(--mb-surface); }
  .st-export .mb-btn { min-height: 44px; box-shadow: none; }
  .st-export .mb-btn[aria-busy="true"] { opacity: .6; cursor: progress; }
  .st-export__label { display: inline-flex; align-items: center; gap: .35em; min-height: 44px; padding: 0 .7em; border: 0; border-radius: var(--mb-radius-pill); background: var(--mb-butter); color: #4A3A00; font: 700 .85rem/1 var(--mb-font-text); cursor: pointer; }
  .st-export__label[hidden] { display: none; }
  .st-badge { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; border-radius: 99px; background: var(--mb-acid); color: var(--mb-plum); font-size: .75rem; }
  .st-reset { margin-left: auto; min-height: 44px; border: 0; background: none; color: var(--mb-ink-soft); font: 600 .85rem/1 var(--mb-font-text); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }

  /* Grip (mobile only) */
  .st-grip { display: none; }

  /* Rules under the tool */
  .st-rules { padding-block: clamp(3rem, 7vw, 5.5rem); }
  .st-rules h2 { font-size: var(--mb-step-3); max-width: 18ch; }
  .st-rules__list { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 0; }
  .st-rules__list div { border-top: 3px solid var(--mb-plum); padding-top: .9rem; }
  .st-rules__list div:first-child { border-top-color: var(--mb-thread); }
  .st-rules__list dt { font: 800 var(--mb-step-1)/1.15 var(--mb-font-display); margin-bottom: .4rem; }
  .st-rules__list dd { margin: 0; color: var(--mb-ink-soft); }

  /* ---------- desktop: side panel ---------- */
  @media (min-width: 900px) {
    .st-app { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); grid-template-rows: auto minmax(0, 1fr);
      height: calc(100svh - var(--st-nav)); min-height: 620px; }
    .st-head { grid-column: 1; grid-row: 1; display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; padding-top: .9rem; }
    .st-head .st-title { margin: 0; }
    .st-stage { grid-column: 1; grid-row: 2; margin: 0 0 1rem var(--mb-gutter); margin-right: 1rem; }
    .st-panel { grid-column: 2; grid-row: 1 / 3; border-left: 1.5px solid var(--mb-line); }
    .st-tabs { padding-top: .5rem; }
  }

  /* ---------- mobile: bottom sheet ---------- */
  @media (max-width: 899px) {
    .st { padding-bottom: 170px; }
    .st-head { padding-top: .6rem; }
    .st-title { font-size: 2rem; }
    .st-lede { display: none; }
    .st-stage { height: calc(100svh - var(--st-nav) - 3.4rem - 168px); min-height: 300px; padding: 1rem .75rem .6rem; border-radius: var(--mb-radius); margin-inline: 12px; }
    .st-panel { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; max-height: 64svh; border-radius: 24px 24px 0 0;
      box-shadow: 0 -18px 50px -24px rgba(58, 18, 48, .55); transition: max-height var(--mb-dur-3) var(--mb-ease-silk); }
    .st-grip { display: flex; align-items: center; justify-content: center; gap: .6rem; flex: none; width: 100%; min-height: 44px; border: 0; background: none;
      font: 700 .85rem/1 var(--mb-font-text); color: var(--mb-ink-soft); cursor: pointer; padding: .5rem 0 0; }
    .st-grip i { width: 42px; height: 5px; border-radius: 5px; background: var(--mb-line); }
    .st-grip[aria-expanded="true"] i { background: var(--mb-thread); }
    .st-panes { display: none; }
    .st-panel.is-open .st-panes { display: block; }
    .st-tabs { justify-content: space-between; }
    .st-tabs .mb-tab { padding: .7rem .5rem; font-size: .86rem; }
    .st-export { gap: .35rem; padding-inline: .75rem; }
    .st-export .mb-btn { padding-inline: .9em; }
    .st-export .mb-btn--ghost#st-copy { font-size: 0; padding-inline: .8em; }
    .st-export .mb-btn--ghost#st-copy::before { content: "Link"; font-size: .9rem; }
    .st-reset { display: none; }
    .st-tpl__thumb { height: 92px; }
  }
}