/* Game Foundry Hub — shared interface tokens */
:root {
  --paper: #F6F7F4; --card: #FFFFFF; --ink: #20242B; --ink-soft: #3A3F47;
  --muted: #6A7069; --line: #E3E5DE; --line-strong: #C9CCC3;
  --eng: #2563A8; --eng-bg: #EDF3FA;
  --design: #6D4FC4; --design-bg: #F1EEFB;
  --art: #C24E2E; --art-bg: #FAEFEA;
  --product: #0E7A5F; --product-bg: #E9F4F0;
  --ok: #0E7A5F; --warn: #A3452D; --amber: #C9A227;
  --display: "Avenir Next", "Seravek", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
body { background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.5; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 18px 22px 50px; }
code { font-family: var(--mono); font-size: 0.85em; background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }

.top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.brand { display: flex; align-items: flex-end; gap: 12px; }
.brand-logo { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.kicker { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
h1 { font-family: var(--display); font-weight: 700; font-size: 1.7rem; margin: 0; line-height: 1.1; }
.top-actions { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pill-link { font-size: 0.8rem; font-weight: 700; color: var(--ink-soft); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--card); }
.pill-link:hover { border-color: var(--line-strong); background: var(--paper); }
.pill-link.primary-entry { border-color: var(--ink); color: var(--ink); }
.studio-tools-menu { position: relative; }
.studio-tools-menu summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: var(--card); color: var(--ink-soft); font-size: .8rem; font-weight: 700; }
.studio-tools-menu summary::-webkit-details-marker { display: none; }
.studio-tools-menu[open] summary { border-color: var(--ink); }
.studio-tools-menu nav { position: absolute; z-index: 30; right: 0; top: calc(100% + 7px); width: 220px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 9px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); box-shadow: 0 12px 30px rgba(32,36,43,.14); }
.studio-tools-menu nav a { padding: 7px 8px; border-radius: 6px; color: var(--ink-soft); text-decoration: none; font-size: .72rem; font-weight: 700; }
.studio-tools-menu nav a:hover { background: var(--paper); color: var(--ink); }
.server-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 0.8rem; color: var(--muted); }
.server-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.server-chip.ok .dot { background: var(--ok); }
.server-chip.bad .dot { background: var(--warn); }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; }

.hub-entry { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-bottom: 12px; padding: 16px; border-color: #c9d9ec; }
.hub-entry > div { grid-column: 1 / -1; }
.hub-entry h2,.publish-learn h2 { margin: 0; font: 700 1.22rem/1.2 var(--display); }
.hub-entry p,.publish-learn p { max-width: 85ch; margin: 6px 0 0; color: var(--muted); font-size: .78rem; }
.hub-entry .queue-key { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin-top: 4px; }
.queue-key span { padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; color: var(--ink-soft); font-size: .69rem; }
.queue-key b { display: block; margin-bottom: 1px; color: var(--ink); font: 700 .76rem/1.3 var(--display); }
.hub-entry > a,.publish-learn > a { display: grid; gap: 4px; padding: 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); text-decoration: none; }
.hub-entry > a:hover,.publish-learn > a:hover { border-color: var(--eng); }
.hub-entry > a strong,.publish-learn > a strong { font: 700 .84rem/1.2 var(--display); }
.hub-entry > a span,.publish-learn > a span { color: var(--muted); font-size: .68rem; line-height: 1.4; }
.hub-entry .operating-model-link { grid-column: 1 / -1; display: block; border: 0; padding: 4px 0 0; background: transparent; color: var(--eng); font-size: .75rem; font-weight: 700; }
.advanced-overview-disclosure { margin-bottom: 12px; }
.advanced-overview-disclosure > summary { cursor: pointer; padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-soft); font-size: .8rem; font-weight: 700; }
.advanced-overview-disclosure > summary span { margin-left: 7px; color: var(--muted); font: 500 .64rem var(--mono); }
.advanced-overview-disclosure[open] > summary { margin-bottom: 8px; border-color: var(--line-strong); }
.advanced-overview-content { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper) 80%, #fff); }
.studio-map-disclosure,.hub-status-disclosure,.prototype-cohort-disclosure { margin-bottom: 8px; }
.advanced-overview-content > :last-child { margin-bottom: 0; }
.studio-map-disclosure > summary,.hub-status-disclosure > summary,.prototype-cohort-disclosure > summary { cursor: pointer; padding: 10px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-soft); font-size: .8rem; font-weight: 700; }
.studio-map-disclosure > summary span,.hub-status-disclosure > summary span,.prototype-cohort-disclosure > summary span { margin-left: 7px; color: var(--muted); font: 500 .64rem var(--mono); }
.studio-map-disclosure[open] > summary,.hub-status-disclosure[open] > summary,.prototype-cohort-disclosure[open] > summary { margin-bottom: 8px; border-color: var(--line-strong); }
.studio-map-disclosure .factory-map3d { margin-bottom: 0; }
.hub-status-disclosure .hub { margin-bottom: 0; }
.prototype-cohort-disclosure .prototype-cohort { margin-bottom: 0; }

/* hub */
.hub { display: grid; grid-template-columns: 1.05fr 1.4fr 1.05fr; gap: 12px; margin-bottom: 12px; }
.hub-card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.hub-label { font-family: var(--mono); font-size: 0.65rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.score-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.score-row span { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font-size: 0.74rem; color: var(--muted); }
.score-row b { display: block; color: var(--ink); font-size: 1.15rem; line-height: 1; font-family: var(--display); }
.status-list { display: grid; gap: 6px; font-size: 0.78rem; color: var(--ink-soft); }
.status-list div { display: flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.mini-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--line-strong); }
.mini-dot.ok { background: var(--ok); }
.mini-dot.warn { background: var(--amber); }
.mini-dot.bad { background: var(--warn); }
.harness-card { position: relative; overflow: hidden; border-color: #c9d9ec; background: linear-gradient(125deg, #f8fbff 0%, var(--card) 58%); }
.harness-card::after { content: ''; position: absolute; width: 150px; height: 150px; right: -58px; top: -72px; border: 1px solid #c9d9ec; border-radius: 50%; box-shadow: 0 0 0 18px rgba(37, 99, 168, 0.035), 0 0 0 38px rgba(37, 99, 168, 0.025); pointer-events: none; }
.harness-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.harness-state { border-radius: 999px; padding: 2px 8px; font-family: var(--mono); font-size: 0.62rem; color: var(--ok); background: var(--product-bg); border: 1px solid #c3e1d7; white-space: nowrap; }
.harness-state.pending { color: #725c0c; background: #fbf5db; border-color: #dfcc85; }
.harness-state.rejected { color: var(--warn); background: var(--art-bg); border-color: #e5a790; }
.harness-state.recorded { color: var(--eng); background: var(--eng-bg); border-color: #c9d9ec; }
.harness-state.loading { color: var(--muted); background: var(--paper); border-color: var(--line); }
.harness-overview { position: relative; z-index: 1; display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; }
.harness-score { width: 76px; height: 76px; display: grid; place-content: center; border-radius: 50%; border: 1px solid #b9cee6; background: conic-gradient(var(--eng) var(--score-angle, 0deg), #dbe7f3 0); box-shadow: inset 0 0 0 7px var(--card); text-align: center; }
.harness-score b { display: block; color: var(--ink); font-family: var(--display); font-size: 1.05rem; line-height: 1; }
.harness-score span { display: block; margin-top: 3px; color: var(--muted); font-family: var(--mono); font-size: 0.53rem; letter-spacing: 0.07em; text-transform: uppercase; }
.harness-copy h2 { margin: 0 0 2px; font-family: var(--display); font-size: 1.08rem; line-height: 1.15; }
.harness-copy p { margin: 0; color: var(--ink-soft); font-size: 0.74rem; line-height: 1.4; }
.harness-run { display: block; margin-top: 3px; color: var(--muted); font-family: var(--mono); font-size: 0.6rem; overflow-wrap: anywhere; }
.harness-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 9px 0; }
.harness-metrics span { padding: 6px 7px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,0.75); color: var(--muted); font-size: 0.62rem; }
.harness-metrics b { display: block; color: var(--ink); font-family: var(--display); font-size: 0.84rem; }
.harness-radar { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 7px 8px; border-left: 3px solid var(--design); border-radius: 6px; background: var(--design-bg); color: var(--ink-soft); font-size: 0.64rem; }
.harness-radar .radar-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--design); box-shadow: 0 0 0 4px rgba(109, 79, 196, 0.12); }
.harness-radar strong { display: block; color: var(--design); font-family: var(--mono); font-size: 0.62rem; overflow-wrap: anywhere; }
.harness-radar time { color: var(--muted); white-space: nowrap; }
.harness-boundary { margin: 7px 0; color: var(--muted); font-size: 0.62rem; line-height: 1.35; }
.harness-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.harness-actions .btn.small { padding: 4px 9px; font-size: 0.69rem; text-decoration: none; }
.harness-loading, .harness-empty { color: var(--muted); font-size: 0.76rem; }
.hub-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.surface-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.surface-grid a { text-decoration: none; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px 9px; font-size: 0.78rem; font-weight: 700; }
.surface-grid a:hover { border-color: var(--line-strong); background: var(--card); }

/* finite Three.js prototype certification cohort */
.prototype-cohort { margin-bottom: 12px; padding: 16px; border-color: #b8cce3; background: var(--card); }
.prototype-cohort-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.prototype-cohort-head .kicker { margin-bottom: 5px; color: var(--eng); }
.prototype-cohort h2 { margin: 0; font: 700 1.22rem/1.2 var(--display); }
.prototype-cohort-count { flex: 0 0 auto; border: 1px solid #b8cce3; padding: 4px 9px; background: var(--eng-bg); color: var(--eng); font: 700 0.66rem/1.3 var(--mono); }
.prototype-cohort-boundary { max-width: 88ch; margin: 7px 0 13px; color: var(--muted); font-size: 0.74rem; }
.prototype-cohort-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.prototype-candidate { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-top: 4px solid var(--warn); background: var(--paper); }
.prototype-candidate[data-status="ready"] { border-top-color: var(--ok); }
.prototype-candidate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px 11px 9px; border-bottom: 1px solid var(--line); background: var(--card); }
.prototype-candidate-head h3 { margin: 3px 0 0; font: 700 1rem/1.15 var(--display); overflow-wrap: anywhere; }
.prototype-candidate-stage { color: var(--eng); font: 700 0.58rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.prototype-candidate-status { max-width: 130px; padding: 3px 6px; border: 1px solid #e5a790; background: var(--art-bg); color: var(--warn); font: 700 0.58rem/1.25 var(--mono); text-align: right; text-transform: uppercase; }
.prototype-candidate[data-status="ready"] .prototype-candidate-status { border-color: #b9d9cf; background: var(--product-bg); color: var(--ok); }
.prototype-artifact { display: grid; gap: 4px; padding: 10px 11px; border-bottom: 1px solid var(--line-strong); background: var(--eng-bg); }
.prototype-artifact > span { color: var(--eng); font: 700 0.58rem/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.prototype-artifact code { display: block; width: 100%; border: 0; padding: 0; background: transparent; color: var(--ink-soft); font-size: 0.62rem; overflow-wrap: anywhere; word-break: break-word; }
.prototype-artifact .prototype-digest { color: var(--eng); }
.prototype-evidence { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.prototype-evidence li { display: grid; grid-template-columns: 8px 1fr; gap: 8px; min-width: 0; padding: 8px 11px; border-bottom: 1px solid var(--line); background: var(--card); }
.prototype-evidence li[data-group="release"] { border-top: 2px solid #b8cce3; }
.prototype-evidence li[data-group="human-play"], .prototype-evidence li[data-group="human-decision"] { background: #fffdf5; }
.prototype-evidence li[data-group="human-play"] { border-top: 2px solid #dfcc85; }
.prototype-evidence-state { width: 8px; height: 8px; margin-top: 3px; border: 1px solid var(--line-strong); background: var(--line-strong); }
.prototype-evidence .clean .prototype-evidence-state { border-color: var(--ok); background: var(--ok); }
.prototype-evidence .warning .prototype-evidence-state { border-color: var(--amber); background: var(--amber); }
.prototype-evidence .blocked .prototype-evidence-state { border-color: var(--warn); background: var(--warn); }
.prototype-evidence strong { display: block; color: var(--ink-soft); font: 700 0.65rem/1.25 var(--mono); overflow-wrap: anywhere; }
.prototype-evidence p { margin: 2px 0 0; color: var(--muted); font-size: 0.64rem; line-height: 1.38; overflow-wrap: anywhere; }
.prototype-candidate-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding: 10px 11px; background: var(--card); }
.prototype-candidate-actions .btn { text-decoration: none; }
.prototype-artifact-open { border-color: #b8cce3; color: var(--eng); }
.prototype-cohort-empty { grid-column: 1 / -1; padding: 16px; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 0.78rem; }

/* operator approval inbox */
.approval-inbox { padding: 16px; margin-bottom: 12px; border-color: #d9cfac; background: linear-gradient(140deg, #fffdf5, var(--card) 52%); }
.approval-inbox-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.approval-inbox-head .kicker { margin-bottom: 5px; color: #725c0c; }
.approval-inbox h2 { margin: 0; font: 700 1.22rem/1.2 var(--display); }
.approval-count { flex: 0 0 auto; border: 1px solid #dfcc85; border-radius: 999px; padding: 4px 9px; background: #fbf5db; color: #725c0c; font: 700 0.66rem/1.3 var(--mono); }
.approval-boundary { max-width: 82ch; margin: 7px 0 12px; color: var(--muted); font-size: 0.74rem; }
.approval-pattern { margin: -4px 0 12px; padding: 7px 9px; border-left: 3px solid var(--warn); border-radius: 5px; background: var(--art-bg); color: var(--ink-soft); font-size: .7rem; }
.approval-items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.approval-item { display: flex; flex-direction: column; min-width: 0; min-height: 188px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,0.86); }
.approval-item[data-urgency="0"], .approval-item[data-urgency="1"] { border-color: #e5a790; box-shadow: inset 3px 0 0 var(--warn); }
.approval-item[data-urgency="2"], .approval-item[data-urgency="3"], .approval-item[data-urgency="4"], .approval-item[data-urgency="5"] { border-color: #dfcc85; box-shadow: inset 3px 0 0 var(--amber); }
.approval-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.approval-rank { color: var(--muted); font: 700 0.62rem/1 var(--mono); }
.approval-stage { border: 1px solid var(--line); border-radius: 999px; padding: 2px 7px; background: var(--paper); color: var(--ink-soft); font: 700 0.58rem/1.3 var(--mono); text-transform: uppercase; }
.approval-item h3 { margin: 8px 0 3px; font: 700 0.9rem/1.2 var(--display); overflow-wrap: anywhere; }
.approval-item p { margin: 0 0 8px; color: var(--muted); font-size: 0.69rem; line-height: 1.4; }
.approval-evidence { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.approval-evidence span { border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px; background: var(--paper); color: var(--muted); font: 700 0.56rem/1.35 var(--mono); }
.approval-evidence .blocked { border-color: #efcfc3; background: var(--art-bg); color: var(--warn); }
.approval-evidence .warning { border-color: #dfcc85; background: #fbf5db; color: #725c0c; }
.approval-evidence .clean { border-color: #c3e1d7; background: var(--product-bg); color: var(--ok); }
.approval-open { align-self: flex-start; margin-top: 9px; text-decoration: none; }
.approval-empty { grid-column: 1 / -1; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--muted); font-size: 0.78rem; }
.approval-more { margin-top: 10px; }
.games-strip { padding: 12px 14px; margin-bottom: 12px; }
.strip-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; }
.hub-games { display: grid; grid-template-columns: repeat(6, minmax(145px, 1fr)); gap: 8px; }
.hub-game { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--paper); cursor: pointer; min-height: 124px; display: flex; flex-direction: column; gap: 5px; }
.hub-game:hover { border-color: var(--line-strong); }
.hub-game.sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); background: var(--card); }
.hub-game-top { display: flex; justify-content: space-between; gap: 6px; align-items: flex-start; }
.hub-game strong { font-family: var(--display); font-size: 0.85rem; line-height: 1.15; }
.hub-game p { margin: 0; color: var(--muted); font-size: 0.68rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.status-pill { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; padding: 2px 7px; font-size: 0.62rem; font-family: var(--mono); white-space: nowrap; border: 1px solid var(--line); color: var(--muted); background: var(--card); }
.status-pill.playable { color: var(--eng); background: var(--eng-bg); border-color: #c9d9ec; }
.status-pill.approved { color: var(--ok); background: var(--product-bg); border-color: #c3e1d7; }
.status-pill.blocked { color: var(--warn); background: var(--art-bg); border-color: #efcfc3; }
.status-pill.review { color: var(--amber); background: #fbf5db; border-color: #ead99d; }
.game-flags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.game-flags span { font-size: 0.65rem; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 6px; }
.game-flags .failed-validation, .gcard .failed-validation { color: var(--warn); background: var(--art-bg); border-color: #efcfc3; font-weight: 750; }
.validation-alert { margin: 10px 0; padding: 10px 12px; border: 1px solid #e5a790; border-left: 4px solid var(--warn); border-radius: 7px; background: var(--art-bg); color: #6d2d1d; font-size: 0.78rem; line-height: 1.45; }
.validation-alert span { color: var(--muted); }
.game-flags .portal-pill { font-weight: 750; letter-spacing: 0.015em; }
.game-flags .portal-pill.live { color: var(--product); background: var(--product-bg); border-color: #b8d9ce; }
.game-flags .portal-pill.update, .game-flags .portal-pill.pending { color: #725c0c; background: #fbf5db; border-color: #dfcc85; }
.game-flags .portal-pill.blocked { color: var(--warn); background: var(--art-bg); border-color: #efcfc3; }
.game-flags .portal-pill.off { color: var(--muted); background: #f1f2ef; border-color: var(--line); }
.hub-game .btn.small { padding: 4px 9px; font-size: 0.72rem; }

/* composer */
.composer { padding: 12px 16px; margin-bottom: 18px; display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(260px, 1.6fr) auto; gap: 8px; align-items: end; }
.composer-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 0; flex-wrap: wrap; }
.composer-foot { display: contents; }
.composer-note { align-self: center; grid-column: 1 / 3; min-height: 1.2em; font-size: 0.82rem; color: var(--product); }
#queueBtn { grid-column: 3; grid-row: 2 / 4; align-self: stretch; }
.composer-title { font-family: var(--display); font-weight: 700; font-size: 1rem; }
.composer-hint { font-size: 0.78rem; color: var(--muted); }
.ti, .ta { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font-family: var(--body); font-size: 0.9rem; color: var(--ink); padding: 8px 10px; margin-bottom: 8px; resize: vertical; }
.ti:focus, .ta:focus { outline: 2px solid var(--eng); outline-offset: -1px; }

.publish-learn { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin: 0 0 18px; padding: 16px; border-color: #b9d9cf; }
.publish-learn > div { grid-column: 1 / -1; }

.btn { font-family: var(--body); font-size: 0.88rem; font-weight: 600; border-radius: 8px; padding: 9px 18px; cursor: pointer; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft); }
.btn:hover { background: var(--paper); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn.primary:hover { background: #343a44; }
.btn.approve { background: var(--product); border-color: var(--product); color: #fff; }
.btn.reject { background: transparent; border-color: var(--warn); color: var(--warn); }
.btn.small { padding: 5px 12px; font-size: 0.78rem; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* layout */
.grid { display: grid; grid-template-columns: 290px 1fr; gap: 18px; align-items: start; }
.empty { padding: 40px; text-align: center; color: var(--muted); font-size: 0.92rem; }

/* rail */
.rail { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.gcard { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; cursor: pointer; }
.gcard:hover { border-color: var(--line-strong); }
.gcard.sel { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.gcard .t { font-family: var(--display); font-weight: 700; font-size: 0.98rem; }
.gcard .o { font-size: 0.78rem; color: var(--muted); margin: 2px 0 8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dots { display: flex; gap: 6px; align-items: center; }
.sdot { width: 22px; height: 6px; border-radius: 3px; background: var(--line); }
.sdot.generated { background: var(--amber); }
.sdot.approved { background: var(--ok); }
.sdot.rejected { background: var(--warn); }
.sdot.conflict { background: var(--warn); }
.sdot.invalid { background: var(--warn); }
.dots .lbl { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); margin-left: 4px; text-transform: uppercase; letter-spacing: 0.06em; }

/* detail */
.detail { min-width: 0; }
.detail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.detail-head h2 { font-family: var(--display); font-size: 1.35rem; margin: 0; }
.tabs { display: flex; gap: 6px; }
.tab { font-family: var(--body); font-size: 0.84rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }
.tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab .st { font-family: var(--mono); font-size: 0.62rem; margin-left: 6px; }
.tab .st.approved { color: #7BD8B7; }
.tab .st.generated { color: var(--amber); }
.tab .st.conflict { color: #ffb26b; }
.tab .st.invalid { color: #ff8e8e; }
.tab:not(.on) .st.approved { color: var(--ok); }

/* public portal control — a quiet operator strip, separate from human stage gates */
.portal-control { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 78px; margin: 0 0 12px; padding: 12px 14px 12px 16px; overflow: hidden; background: linear-gradient(105deg, var(--eng-bg) 0, var(--card) 47%); border: 1px solid #c9d9ec; border-left: 3px solid var(--eng); border-radius: 8px; }
.portal-control::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 34%; opacity: 0.34; pointer-events: none; background-image: linear-gradient(90deg, transparent 95%, var(--line) 95%), linear-gradient(0deg, transparent 95%, var(--line) 95%); background-size: 13px 13px; mask-image: linear-gradient(90deg, transparent, #000); }
.portal-control.live { background: linear-gradient(105deg, var(--product-bg) 0, var(--card) 47%); border-color: #b8d9ce; border-left-color: var(--product); }
.portal-control.failed, .portal-control.blocked { background: linear-gradient(105deg, var(--art-bg) 0, var(--card) 47%); border-color: #efcfc3; border-left-color: var(--warn); }
.portal-control-copy, .portal-control-actions { position: relative; z-index: 1; }
.portal-control-copy { min-width: 220px; }
.portal-kicker { display: block; margin-bottom: 2px; color: var(--muted); font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.11em; text-transform: uppercase; }
.portal-control-copy strong { display: block; font-family: var(--display); font-size: 0.94rem; line-height: 1.2; }
.portal-status { max-width: 62ch; margin: 3px 0 0; color: var(--ink-soft); font-size: 0.74rem; line-height: 1.35; }
.portal-status.live { color: var(--product); }
.portal-status.update { color: #725c0c; }
.portal-status.failed, .portal-status.blocked { color: var(--warn); }
.portal-operation-error { max-width: 62ch; margin: 5px 0 0; color: var(--warn); font-size: 0.72rem; font-weight: 700; line-height: 1.35; }
.portal-operation-error[hidden] { display: none; }
.portal-control-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.portal-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 5px 9px 5px 7px; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(255,255,255,0.9); color: var(--ink-soft); font-size: 0.78rem; font-weight: 700; user-select: none; }
.portal-switch:hover { border-color: var(--eng); }
.portal-switch-input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.portal-switch-track { display: inline-flex; align-items: center; width: 31px; height: 18px; padding: 2px; border: 1px solid var(--line-strong); border-radius: 999px; background: #d8dbd4; transition: background 140ms ease, border-color 140ms ease; }
.portal-switch-track span { width: 12px; height: 12px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 2px rgba(32,36,43,0.26); transform: translateX(0); transition: transform 140ms ease; }
.portal-switch-input:checked + .portal-switch-track { background: var(--product); border-color: var(--product); }
.portal-switch-input:checked + .portal-switch-track span { transform: translateX(13px); }
.portal-switch-input:focus-visible + .portal-switch-track { outline: 3px solid rgba(37,99,168,0.35); outline-offset: 3px; }
.portal-switch:has(.portal-switch-input:disabled) { cursor: not-allowed; opacity: 0.62; border-style: dashed; }
.portal-switch:has(.portal-switch-input:disabled):hover { border-color: var(--line-strong); }
.portal-refresh { color: #725c0c; border-color: #c9a227; background: #fffdf5; }
.portal-open { text-decoration: none; color: var(--product); border-color: #b8d9ce; background: var(--product-bg); }
.portal-refresh:focus-visible, .portal-open:focus-visible { outline: 3px solid rgba(37,99,168,0.35); outline-offset: 2px; }

.panel { padding: 18px; }
.game-assets { margin: 12px 0; padding: 14px 16px; }
.game-assets-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.game-assets-head strong { display: block; margin-top: 3px; font: 750 .98rem/1.15 var(--display); }
.game-assets-head > span { color: var(--muted); font: 650 .64rem/1.3 var(--mono); }
.game-asset-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(130px,1fr)); gap: 8px; }
.game-asset { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); text-decoration: none; }
.game-asset:hover { border-color: var(--eng); }
.game-asset img { display: block; width: 100%; height: 104px; object-fit: cover; background: var(--ink); }
.game-asset > span { display: grid; gap: 2px; padding: 7px 8px; }
.game-asset b { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.game-asset small { color: var(--muted); font: .58rem/1.3 var(--mono); }
.ingredient-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ingredient-links a { display: grid; gap: 1px; min-width: 130px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink-soft); text-decoration: none; }
.ingredient-links a:hover { border-color: var(--eng); }
.ingredient-links b { max-width: 220px; overflow: hidden; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.ingredient-links span { color: var(--muted); font: .56rem/1.3 var(--mono); text-transform: uppercase; }
.asset-provenance { margin: 9px 0 0; color: var(--muted); font-size: .66rem; line-height: 1.5; }
.asset-provenance a { color: var(--eng); }
.await { padding: 26px 18px; text-align: center; color: var(--muted); font-size: 0.9rem; border: 1px dashed var(--line-strong); border-radius: 10px; background: var(--paper); }
.await b { color: var(--ink-soft); }
.await code { background: var(--card); }

/* one-pager */
.op-hook { font-family: var(--display); font-size: 1.12rem; font-weight: 600; margin: 0 0 4px; }
.op-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.mchip { font-size: 0.75rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; color: var(--ink-soft); }
.mchip b { font-weight: 600; }
.op-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.mini { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 11px 13px; font-size: 0.84rem; color: var(--ink-soft); }
.mini .h { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 5px; }
.mini ul { margin: 0; padding-left: 16px; }
.mini li { margin-bottom: 4px; }
.brief-quote { font-size: 0.86rem; color: var(--muted); border-left: 3px solid var(--line-strong); padding: 4px 12px; margin: 0 0 14px; }

/* spec */
.spec-beat { background: var(--design-bg); color: var(--design); border-radius: 8px; padding: 11px 14px; font-size: 0.9rem; font-weight: 500; margin-bottom: 14px; }
.sys { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; font-size: 0.86rem; }
.sys .n { font-weight: 700; font-family: var(--display); margin-bottom: 2px; }
.sys .r { color: var(--ink-soft); }
table.tp { width: 100%; border-collapse: collapse; font-size: 0.8rem; margin: 8px 0 14px; }
table.tp th { font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line-strong); }
table.tp td { padding: 7px 8px; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: top; }
table.tp td.id { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.h3 { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 16px 0 8px; }

/* prototype */
.proto { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 16px; align-items: start; }
.stagebox { background: #14171C; border-radius: 12px; padding: 10px; }
.stagebox iframe { width: 100%; aspect-ratio: 9 / 15; border: 0; border-radius: 8px; background: #14171C; display: block; }
.stage-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.version-workflow { margin-top: 12px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 13px; background: linear-gradient(145deg, var(--card), var(--paper)); box-shadow: inset 3px 0 0 var(--design); }
.version-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.version-head strong { display: block; margin-top: 2px; font-family: var(--display); font-size: 0.95rem; }
.version-kicker { font-family: var(--mono); font-size: 0.61rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--design); }
.version-lineage { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 3px 7px; font-family: var(--mono); font-size: 0.61rem; color: var(--muted); background: var(--card); }
.version-workflow p { margin: 8px 0; color: var(--ink-soft); font-size: 0.76rem; line-height: 1.5; }
.version-callout { margin-top: 9px; border-left: 2px solid var(--product); padding: 6px 8px; background: color-mix(in srgb, var(--product) 8%, transparent); color: var(--ink-soft); font-size: 0.71rem; line-height: 1.45; }
.version-callout.decision { border-left-color: var(--design); background: var(--design-bg); }
.version-callout.legacy { border-left-color: var(--amber); background: #fbf5db; }
.version-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 9px 0 0; }
.version-meta div { min-width: 0; }
.version-meta dt { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.version-meta dd { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.73rem; white-space: nowrap; }
.version-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.version-form label { display: grid; gap: 4px; font-family: var(--mono); font-size: 0.59rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.version-form .wide { grid-column: 1 / -1; }
.version-form input, .version-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 7px; padding: 7px 8px; background: var(--card); color: var(--ink); font: 0.75rem/1.35 var(--body); letter-spacing: normal; text-transform: none; resize: vertical; }
.version-form input:focus, .version-form textarea:focus { outline: 2px solid color-mix(in srgb, var(--design) 35%, transparent); border-color: var(--design); }
.version-form-heading { display: grid; gap: 2px; margin-top: 3px; padding-top: 9px; border-top: 1px solid var(--line); }
.version-form-heading b { color: var(--design); font: 700 0.64rem/1.25 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.version-form-heading span { color: var(--ink-soft); font-size: 0.71rem; line-height: 1.4; }
.version-experiment { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 0; }
.version-experiment div { min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.version-experiment dt { color: var(--design); font: 700 0.58rem/1.3 var(--mono); letter-spacing: 0.07em; text-transform: uppercase; }
.version-experiment dd { margin: 3px 0 0; color: var(--ink-soft); font-size: 0.71rem; line-height: 1.4; white-space: pre-wrap; }
.version-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.version-status { color: var(--warn); font-size: 0.69rem; line-height: 1.35; }
.version-error { margin-top: 6px; color: var(--warn); font-size: 0.75rem; line-height: 1.45; }
.telepanel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.telestats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tstat { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.tstat .v { font-family: var(--display); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.tstat .k { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--mono); }
.telefeed { background: var(--ink); color: #C9CEC5; border-radius: 8px; padding: 10px 12px; font-family: var(--mono); font-size: 0.7rem; line-height: 1.7; height: 220px; overflow-y: auto; }
.telefeed .ev-t { color: #6E7580; margin-right: 8px; }
.telefeed .ev-decision { color: #8FB8E8; }
.telefeed .ev-fail { color: #E89A8F; }
.telefeed .ev-score, .telefeed .ev-level_up { color: #7BD8B7; }
.telefeed .ev-near_miss { color: #E8CD8F; }
.tagbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tagbtn { font-size: 0.82rem; border: 1px solid var(--line-strong); background: var(--card); border-radius: 999px; padding: 6px 13px; cursor: pointer; }
.tagbtn:hover { background: var(--paper); }
.tagbtn.hit { background: var(--design-bg); border-color: var(--design); color: var(--design); }

/* spec pitch */
.pitchbox { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pitchbox iframe { width: 100%; height: 560px; border: 0; display: block; background: var(--paper); }
.specdetail { margin-top: 4px; }
.specdetail .body { padding-top: 10px; }

/* gate bar — a compact playtest scorecard, not a generic approval footer */
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.gatebar { display: grid; grid-template-columns: minmax(190px,.65fr) minmax(260px,1.35fr); gap: 12px 16px; align-items: end; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(145deg, #fffdf7 0%, var(--card) 55%, #f7f3e8 100%); box-shadow: inset 4px 0 0 var(--amber); }
.gatebar.playtest-first { box-shadow: inset 4px 0 0 var(--design); }
.gatebar textarea,.gatebar select { width: 100%; border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 11px; color: var(--ink); background: rgba(255,255,255,.84); font: 0.82rem/1.4 var(--body); }
.gatebar textarea { resize: vertical; min-height: 54px; }
.gatebar textarea:focus,.gatebar select:focus { outline: 2px solid color-mix(in srgb, var(--design) 42%, transparent); outline-offset: 2px; border-color: var(--design); }
.gate-state { font-size: 0.82rem; font-weight: 600; }
.gate-state.approved { color: var(--ok); grid-column: 1 / -1; }
.gate-state.rejected { color: var(--warn); }
.gate-state.conflict { color: var(--warn); flex-basis: 100%; }
.gate-state.invalid { color: var(--warn); flex-basis: 100%; }
.gate-state.rejected,.gate-state.conflict,.gate-state.invalid,.gate-action-error { grid-column: 1 / -1; }
.gate-action-error { color: var(--warn); font-size: 0.82rem; font-weight: 600; }
.gate-kicker { display: block; color: var(--muted); font: 700 0.58rem/1.2 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.team-signoff { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(190px,.65fr) minmax(260px,1.35fr); gap: 16px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.team-signoff-copy strong { display: block; margin: 4px 0 2px; color: var(--ink); font: 750 .93rem/1.15 var(--display); }
.team-signoff-copy small { display: block; max-width: 62ch; color: var(--muted); font-size: .68rem; line-height: 1.4; }
.signoff-roles { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; }
.signoff-role { display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.72); color: var(--muted); font: 700 .61rem/1.2 var(--mono); text-transform: uppercase; }
.signoff-role b { display: inline-grid; place-items: center; width: 17px; height: 17px; border: 1px solid currentColor; border-radius: 50%; }
.signoff-role.approved { border-color: #b9d9cf; background: var(--product-bg); color: var(--ok); }
.signoff-role.rejected { border-color: #edc8bc; background: var(--art-bg); color: var(--warn); }
.gate-reviewer-field,.gate-note-field { display: grid; gap: 6px; align-self: stretch; }
.gate-reviewer-field>span,.gate-note-field>span { color: var(--ink-soft); font: 700 .64rem/1.2 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.gate-reviewer-field { padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: 8px; background: rgba(255,255,255,.72); }
.gate-reviewer-field strong { color: var(--ink); font: 750 .82rem/1.2 var(--body); }
.gate-reviewer-field small { color: var(--muted); font-size: .68rem; line-height: 1.35; }
.gate-reviewer-field.verified { border-color: #b9d9cf; background: var(--product-bg); }
.gate-reviewer-field.blocked { border-color: #edc8bc; background: var(--art-bg); }
.playtest-signal { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(190px,.65fr) minmax(260px,1.35fr); gap: 12px 16px; padding: 14px; border: 1px solid #ddd0a5; border-radius: 9px; background: rgba(255,250,231,.78); }
.playtest-signal-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.playtest-signal-head strong { display: block; margin-top: 4px; font: 750 1rem/1.1 var(--display); }
.signal-hint { color: #725c0c; font: 700 .58rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.star-rating,.keyword-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.star-rating legend,.keyword-field legend { margin-bottom: 8px; color: var(--ink-soft); font: 700 .64rem/1.2 var(--mono); text-transform: uppercase; }
.star-rating legend span,.keyword-field legend span { color: var(--muted); font-weight: 500; }
.star-picker { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 3px; }
.star-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.star-picker label { color: #d6cdb5; cursor: pointer; font-size: 1.75rem; line-height: 1; transition: color .12s ease, transform .12s ease; }
.star-picker label:hover,.star-picker label:hover~label,.star-picker input:checked~label { color: #d98221; transform: translateY(-1px); }
.star-picker input:focus-visible+label { outline: 2px solid var(--design); outline-offset: 3px; border-radius: 2px; }
.gate-keywords { display: flex; flex-wrap: wrap; gap: 6px; }
.gate-keyword { position: relative; min-height: 30px; display: inline-flex; align-items: center; padding: 5px 9px; border: 1px solid #d8ceb1; border-radius: 999px; background: rgba(255,255,255,.68); color: var(--muted); cursor: pointer; font: 700 .61rem/1.2 var(--mono); }
.gate-keyword input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gate-keyword:hover,.gate-keyword.selected { border-color: var(--design); background: var(--design-bg); color: var(--design); }
.gate-keyword:has(input:focus-visible) { outline: 2px solid var(--design); outline-offset: 2px; }
.gate-form-error { grid-column: 1 / -1; min-height: 0; margin: 0; color: var(--warn); font-size: .74rem; font-weight: 650; }
.gate-form-error:empty { display: none; }
.gate-actions { display: flex; justify-content: flex-end; gap: 8px; align-self: end; }
.gate-actions .btn { min-height: 39px; }

.studio-comment { margin: 12px 0; padding: 14px 16px; border-left: 4px solid var(--design); }
.studio-comment-head { display: flex; justify-content: space-between; align-items: end; gap: 12px; }
.studio-comment-head strong { display: block; margin-top: 4px; font: 750 .94rem/1.15 var(--display); }
.studio-comment-intents { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 8px; }
.studio-comment-intents button { border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 8px; background: var(--paper); color: var(--design); cursor: pointer; font: 700 .61rem/1.2 var(--mono); }
.studio-comment-intents button:hover,.studio-comment-intents button:focus-visible { border-color: var(--design); background: var(--design-bg); }
.studio-comment-compose { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: stretch; }
.studio-comment-compose textarea { width: 100%; min-height: 54px; resize: vertical; border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 11px; background: rgba(255,255,255,.84); color: var(--ink); font: .82rem/1.4 var(--body); }
.studio-comment-compose textarea:focus { outline: 2px solid color-mix(in srgb, var(--design) 42%, transparent); outline-offset: 2px; border-color: var(--design); }
.studio-comment-status { min-height: 1.2em; margin: 7px 0 0; color: var(--muted); font-size: .7rem; }
.studio-comment-status.error { color: var(--warn); font-weight: 650; }

.foot { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--muted); max-width: 88ch; line-height: 1.7; }

@media (max-width: 900px) {
  .top { align-items: flex-start; flex-direction: column; }
  .top-actions { justify-content: flex-start; }
  .hub-entry,.publish-learn { grid-template-columns: 1fr; }
  .hub-entry > div,.hub-entry .operating-model-link,.publish-learn > div { grid-column: 1; }
  .hub-entry .queue-key { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .hub { grid-template-columns: 1fr; }
  .hub-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .approval-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prototype-cohort-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid { grid-template-columns: 1fr; }
  .gatebar,.team-signoff,.playtest-signal { grid-template-columns: 1fr; }
  .team-signoff,.playtest-signal-head { grid-column: 1; }
  .signoff-roles { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rail { flex-direction: row; overflow-x: auto; }
  .gcard { min-width: 220px; }
  .tabs { max-width: 100%; overflow-x: auto; padding-bottom: 3px; }
  .proto { grid-template-columns: 1fr; }
  .op-grid { grid-template-columns: 1fr; }
  .composer { grid-template-columns: 1fr; }
  .composer-head, .composer-note, #queueBtn { grid-column: 1; grid-row: auto; }
  #queueBtn { min-height: 44px; }
  .portal-control { align-items: flex-start; flex-direction: column; }
  .portal-control-actions { width: 100%; justify-content: flex-start; }
  .studio-comment-head { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .version-form, .version-meta, .version-experiment { grid-template-columns: 1fr; }
  .version-form .wide { grid-column: auto; }
  .wrap { padding: 16px 12px 44px; }
  h1 { font-size: 1.35rem; }
  .score-row { grid-template-columns: 1fr; }
  .harness-overview { grid-template-columns: 62px 1fr; }
  .harness-score { width: 62px; height: 62px; }
  .harness-metrics { grid-template-columns: 1fr; }
  .harness-radar { grid-template-columns: auto 1fr; }
  .harness-radar time { grid-column: 2; }
  .hub-games { grid-template-columns: 1fr; }
  .approval-inbox-head { flex-direction: column; gap: 8px; }
  .prototype-cohort-head { flex-direction: column; gap: 8px; }
  .prototype-cohort-items { grid-template-columns: 1fr; }
  .prototype-candidate-actions { display: grid; grid-template-columns: 1fr; }
  .prototype-candidate-actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .approval-items { grid-template-columns: 1fr; }
  .approval-item { min-height: 0; }
  .approval-open, .approval-more { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .surface-grid { grid-template-columns: 1fr; }
  .hub-entry .queue-key { grid-template-columns: 1fr; }
  .top-actions { width: 100%; }
  .pill-link.primary-entry { flex: 1 1 auto; text-align: center; }
  .studio-tools-menu nav { position: fixed; left: 12px; right: 12px; top: 92px; width: auto; }
  .composer-foot .btn { width: 100%; }
  .portal-control-actions { display: grid; grid-template-columns: 1fr; }
  .portal-switch, .portal-control-actions .btn { width: 100%; justify-content: center; min-height: 44px; }
  .studio-comment-compose { grid-template-columns: 1fr; }
  .studio-comment-compose .btn { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-switch-track, .portal-switch-track span { transition: none; }
}