/* THE SIGN MODE. Same dark workspace language as the hoodie's, fewer controls. One stylesheet for
   both hosts: the Discord Studio links it from index.html, the website links the synced copy. */
.sg { --panel: #1a1b1f; --panel-2: #26282d; --ground: #101114; --ink: #f2f2f2; --dim: #b8b5ad;
  --accent: #FEC710; --accent-ink: #17130a; --warn: #ffb020; --danger: #F26D6D;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  background: var(--ground); color: var(--ink);
  /* A BOUND, not just a floor. `.sg-controls` has overflow-y:auto, but an auto-scroller only
     scrolls when its container's height is capped: with min-height alone the grid row grew to
     the controls' natural height and pushed the preview below the fold. */
  height: min(780px, calc(100vh - 72px)); min-height: 520px; }
.sg-left { position: relative; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.sg-stage { flex: 1; min-height: 0; position: relative; }
.sg-stage canvas { display: block; width: 100%; height: 100%; }
.sg-verdict { margin: 0; padding: 12px 18px; font-size: .9rem; color: var(--dim); border-top: 1px solid #000; }
.sg-verdict[data-tier="passed"] { color: var(--ink); }
.sg-verdict[data-tier="review"] { color: var(--warn); }
.sg-verdict[data-tier="blocked"] { color: var(--danger); }

.sg-right { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--panel); }
.sg-controls { padding: 20px; overflow-y: auto; flex: 1; min-height: 0; }
.sg-controls h2 { margin: 0 0 14px; font-size: 1.15rem; }
.sg-controls h3 { margin: 22px 0 8px; font-size: .8rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dim); }

.sg-field { display: grid; gap: 5px; margin: 0 0 10px; min-width: 0; }
.sg-field > span { font-size: .84rem; color: var(--dim); }
.sg-field input[type="text"], .sg-field select { width: 100%; min-height: 44px; padding: 0 12px;
  border-radius: 10px; border: 2px solid var(--panel-2); background: var(--ground);
  color: var(--ink); font: inherit; }
.sg-field input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 44px; }
.sg-note { margin: 2px 0 0; font-size: .82rem; color: var(--dim); }

.sg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sg-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: 2px solid var(--panel-2); border-radius: 12px; background: var(--panel-2);
  color: var(--ink); font: inherit; cursor: pointer; }
.sg-chip[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.sg-chip[disabled] { opacity: .45; cursor: not-allowed; }
.sg-chip i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.4); flex: none;
  /* the colour arrives as a custom property set through the CSSOM: the Studio's CSP has no unsafe-inline */
  background: var(--sw, transparent); }
.sg-linebtns { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.sg-err:empty { margin: 0; }
.sg-err { margin: 0 20px; color: var(--danger); font-size: .86rem; }

.sg-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 20px; border-top: 1px solid #000; background: var(--ground); }
.sg-price strong { font-size: 1.3rem; display: block; }
.sg-price span { font-size: .8rem; color: var(--dim); }
.sg-buy { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 800; }
.sg-buy[disabled] { opacity: .5; cursor: not-allowed; }
/* Ordering closed (the Studio today): the bar says so instead of showing a button that can only fail. */
.sg-closed { margin: 0; font-size: .84rem; color: var(--dim); max-width: 34ch; text-align: right; }

.sg :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Inside the Studio shell the mode sits in the main column under the mode picker, so the bound
   is the shell's viewport rather than the page's, and the corners match the hoodie card. The
   stacking context lifts the price bar above the shell's fixed floor scrim (the hoodie card does
   the same): measured 2026-09-14, without it the price and the verdict painted dimmed. */
.main .sg { position: relative; z-index: 1; isolation: isolate; height: min(780px, calc(100dvh - 200px)); border-radius: 18px; overflow: hidden; }

@media (max-width: 900px) {
  /* stacked, so the page scrolls instead of the panel */
  .sg { grid-template-columns: minmax(0, 1fr); height: auto; }
  .sg-stage { min-height: 320px; height: 55vh; }
  .sg-closed { text-align: left; max-width: none; }
  /* the Studio bound below is for the two-pane layout; stacked, the shell scrolls the whole mode */
  .main .sg { height: auto; }
}


/* Export (ships dark: built only when the page switches it on, see signs-export.js) */
.sg-export { margin-top: 6px; }
.sg-export .sg-note { margin: 0 0 10px; }
.sg-export[aria-busy="true"] .sg-export-btn { cursor: progress; }
.sg-export-note { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2);
  font-size: .88rem; }
.sg-export-note p { margin: 0; }
.sg-signin { display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 0 18px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 800;
  text-decoration: none; }
.sg-export-status { margin: 10px 0 0; font-size: .84rem; color: var(--dim); }
.sg-export-status:empty { margin: 0; }
.sg-export-status[data-tier="review"] { color: var(--warn); }
.sg-export-status[data-tier="blocked"] { color: var(--danger); }