/* ════════════════════════════════════════════════════════════════════
   VYAN — Brand Studio (page-unique layout)
   The creative engine: assets, forges, the linter, the deck, tokens.
   Colors: var(--token) only. Canvas hex lives in studio.js (exempt).
   ════════════════════════════════════════════════════════════════════ */

/* ── Shell: sticky section rail + document column ───────────────── */
.studio-shell { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 64px; align-items: start; }
.studio-rail { position: sticky; top: 88px; }
.studio-rail .rail-cap {
  font-family: var(--mono); font-size: 9px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--plat-faint);
  padding-bottom: 10px; border-bottom: 1px solid var(--line-hi);
}
.studio-rail a {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--plat-faint);
  padding: 10px 0; border-bottom: 1px solid var(--line);
  transition: color var(--m-fast) var(--ease);
}
.studio-rail a .no { font-size: 9px; }
.studio-rail a:hover { color: var(--platinum); }
.studio-rail a[aria-current="true"] { color: var(--platinum); }
.studio-rail a[aria-current="true"] .no { color: var(--ember); }
.studio-main > .doc-section { scroll-margin-top: 76px; }
.studio-main > .doc-section:first-child { padding-top: 8px; border-top: none; }
@media (max-width: 920px) {
  .studio-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .studio-rail { position: static; display: flex; flex-wrap: wrap; column-gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
  .studio-rail .rail-cap { display: none; }
  .studio-rail a { border-bottom: none; padding: 6px 0; }
  .studio-main > .doc-section:first-child { padding-top: 56px; }
}

/* ── Shared: small mono action button (copy / download) ─────────── */
.act-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--plat-dim);
  background: none; border: 1px solid var(--line-hi); border-radius: var(--r-chip);
  padding: 7px 11px; cursor: pointer; white-space: nowrap;
  transition: color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease);
}
.act-btn:hover { color: var(--platinum); border-color: var(--plat-faint); }

/* ── 01 · Asset library ─────────────────────────────────────────── */
.asset-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.asset-filters .tag { background: none; cursor: pointer; transition: color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease); }
.asset-filters .tag:hover { color: var(--platinum); }
.asset-filters .tag[aria-pressed="true"] { color: var(--platinum); border-color: var(--plat-faint); }

.asset-group { margin-top: 40px; }
.asset-group:first-child { margin-top: 0; }
.asset-group .ag-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--plat-faint);
  padding-bottom: 9px; border-bottom: 1px solid var(--line-hi);
}
.asset-row {
  display: grid; grid-template-columns: 128px minmax(0, 1fr) auto; gap: 22px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.swatch {
  width: 128px; height: 60px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: var(--r-chip);
  padding: 8px 12px;
}
.swatch.dark { background: var(--obsidian); }
.swatch.light { background: var(--platinum); }
.swatch img { max-width: 100%; max-height: 44px; width: auto; height: auto; }
.asset-id .file { display: block; font-family: var(--mono); font-size: 11.5px; color: var(--plat-dim); word-break: break-all; }
.asset-id .meta { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--plat-faint); margin-top: 4px; }
.asset-acts { display: flex; gap: 8px; }
@media (max-width: 640px) {
  .asset-row { grid-template-columns: 96px minmax(0, 1fr); row-gap: 10px; }
  .swatch { width: 96px; height: 48px; }
  .asset-acts { grid-column: 1 / -1; }
}

/* ── 02 / 03 · Forges ───────────────────────────────────────────── */
.forge-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }
.forge-form .span2 { grid-column: 1 / -1; }
@media (max-width: 480px) { .forge-form { grid-template-columns: 1fr; } }
.check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--plat-dim); padding-top: 24px; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--ember); cursor: pointer; }
.forge-actions { display: flex; align-items: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }

.canvas-frame { display: flex; align-items: center; justify-content: center; background: var(--obsidian); padding: 0; }
.canvas-frame canvas { display: block; max-width: 100%; max-height: 64vh; width: auto; height: auto; }
#ogCanvas { width: 100%; }

.picker-row { display: flex; flex-wrap: wrap; gap: 8px; }
.picker-row .tag { background: none; cursor: pointer; transition: color var(--m-fast) var(--ease), border-color var(--m-fast) var(--ease); }
.picker-row .tag:hover { color: var(--platinum); }
.picker-row .tag[aria-pressed="true"] { color: var(--platinum); border-color: var(--plat-faint); }
.picker-block { margin-bottom: 20px; }
.tmpl-fields[hidden] { display: none; }

/* ── 04 · Voice linter ──────────────────────────────────────────── */
.lint-input textarea { min-height: 172px; resize: vertical; line-height: 1.6; }
.lint-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.lint-verdict {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--plat-faint);
  margin-top: 40px; padding-bottom: 12px; border-bottom: 1px solid var(--line-hi);
}
.lint-verdict .v-pass { color: var(--green); }
.lint-verdict .v-fail { color: var(--amber); }
.lint-row {
  display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 18px;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.lint-sev { font-family: var(--mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase; padding-top: 3px; }
.lint-sev.critical { color: var(--red); }
.lint-sev.major { color: var(--amber); }
.lint-sev.minor { color: var(--plat-faint); }
.lint-msg { font-size: 13.5px; }
.lint-ex { font-family: var(--mono); font-size: 11px; color: var(--plat-faint); margin-top: 6px; word-break: break-word; }
.lint-fix { font-size: 12.5px; color: var(--plat-dim); margin-top: 6px; }
.lint-fix b { color: var(--platinum); font-weight: 600; }
@media (max-width: 480px) { .lint-row { grid-template-columns: 1fr; gap: 6px; } }

/* ── 05 · Copy deck ─────────────────────────────────────────────── */
.vt .wrong { color: var(--plat-faint); }
.vt .right-cell { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; }
.tmpl-row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 24px; align-items: start;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.tmpl-name { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--plat-faint); padding-top: 3px; }
.tmpl-name .wc { display: block; margin-top: 6px; }
.tmpl-text { font-size: 14px; color: var(--plat-dim); max-width: 62ch; line-height: 1.6; }
.tmpl-text .ph { font-family: var(--mono); font-size: 12.5px; color: var(--platinum); }
@media (max-width: 640px) {
  .tmpl-row { grid-template-columns: 1fr; gap: 8px; }
  .tmpl-row .act-btn { justify-self: start; }
}

/* ── 06 · Tokens ────────────────────────────────────────────────── */
.token-rows { border-top: 1px solid var(--line); }
.token-row {
  display: grid; grid-template-columns: 72px 168px 104px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 11px 0; cursor: pointer; color: inherit; font: inherit;
  transition: background var(--m-fast) var(--ease);
}
.token-row:hover { background: var(--graphite-2); }
.tk-swatch { width: 56px; height: 26px; border: 1px solid var(--line); border-radius: 2px; background: var(--sw); }
.tk-name { font-size: 13.5px; font-weight: 600; }
.tk-hex { font-family: var(--mono); font-size: 11px; color: var(--plat-dim); }
.tk-var { font-family: var(--mono); font-size: 11px; color: var(--plat-faint); }
.tk-copy { font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--plat-faint); white-space: nowrap; }
.token-row:hover .tk-copy, .token-row:focus-visible .tk-copy { color: var(--platinum); }
@media (max-width: 640px) {
  .token-row { grid-template-columns: 48px minmax(0, 1fr) auto; }
  .tk-hex { display: none; }
  .tk-var { grid-column: 2; }
}

.grad-strip { height: 46px; border: 1px solid var(--line); border-radius: 2px; }
.grad-strip.ember { background: var(--grad-ember-deep); }
.grad-strip.plat { background: var(--grad-plat); }

.type-spec { padding: 24px 0; border-bottom: 1px solid var(--line); display: grid; gap: 12px; }
.type-spec .ann { font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--plat-faint); }
.type-spec .sp-disp { font-family: var(--disp); font-size: clamp(26px, 4vw, 44px); letter-spacing: .22em; }
.type-spec .sp-inter { display: grid; gap: 6px; }

/* ── Toast ──────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 300;
  transform: translate(-50%, 8px);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--platinum);
  background: var(--graphite); border: 1px solid var(--line-hi); border-radius: var(--r-chip);
  padding: 10px 16px; max-width: 84vw;
  opacity: 0; pointer-events: none;
  transition: opacity var(--m-base) var(--ease), transform var(--m-base) var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }