:root {
  /* Aligned with the original Document Studio / Legal Desk system
     (gtcx.capital studio-tokens-legora: white canvas, forest green, Inter). */
  color-scheme: light;
  --paper: #fefefc;
  --paper-raised: #f5f5f4;
  --white: #ffffff;
  --ink: #0a0a0a;
  --muted: #525252;
  --subtle: #6b6b6b;
  --line: rgba(10, 10, 10, 0.08);
  --line-strong: rgba(10, 10, 10, 0.14);
  --accent: #1d3d2f;
  --accent-deep: #005032;
  --accent-soft: #ebf5ed;
  --row-select: rgba(189, 209, 235, 0.45);
  --hover-ground: #ececea;
  --chip-bg: #f0f0ee;
  --warning: #9a6700;
  --warning-soft: #f7efdb;
  --danger: #b42318;
  --danger-soft: #fde8e6;
  --success: #1a6b45;
  --radius: 6px;
  --font: "Inter", "Helvetica Neue", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
html, body { min-width: 1180px; height: 100%; }
body { margin: 0; overflow: hidden; background: var(--paper); color: var(--ink); font: 13px/1.5 var(--font); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { outline-offset: 2px; }
button { color: inherit; }
a { color: inherit; }

.studio-header {
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper-raised);
}
.studio-header__lead { min-width: 0; display: flex; align-items: center; gap: 12px; }
.studio-header__divider { width: 1px; height: 22px; background: var(--line-strong); }
.live-site-link { color: var(--muted); font-size: 12px; text-decoration: none; white-space: nowrap; }
.live-site-link:hover { color: var(--accent); text-decoration: underline; }
.project-switch { max-width: 240px; height: 32px; border: 1px solid transparent; border-radius: var(--radius); padding: 0 26px 0 8px; background: transparent; color: var(--ink); font-weight: 600; font-size: 13px; cursor: pointer; }
.project-switch:hover, .project-switch:focus-visible { border-color: var(--line-strong); background: var(--white); }

.studio-brand { display: inline-flex; align-items: center; gap: 12px; width: max-content; text-decoration: none; }
.studio-brand__logo { height: 22px; width: auto; display: block; }
.studio-brand__product { color: var(--muted); font-size: 12px; }
.studio-header__actions { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.status-chip { border: 1px solid rgba(26, 107, 69, 0.25); border-radius: 999px; padding: 4px 9px; background: var(--accent-soft); color: var(--success); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.quiet-button, .primary-button { min-height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 5px 10px; background: transparent; color: var(--ink); text-decoration: none; cursor: pointer; }
.quiet-button:hover { background: var(--white); }
.primary-button { border-color: var(--ink); background: var(--ink); color: var(--white); }

.studio-toolbar { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--white); }
.studio-toolbar__meta { min-width: 0; display: flex; align-items: center; gap: 14px; }
.mode-tabs { display: flex; align-items: center; gap: 2px; }
.mode-tab { height: 29px; border: 0; border-radius: var(--radius); padding: 0 10px; background: transparent; color: var(--muted); cursor: pointer; }
.mode-tab:hover:not(:disabled), .mode-tab.is-active { background: var(--paper); color: var(--ink); }
.mode-tab:disabled { opacity: .42; cursor: not-allowed; }
.studio-summary { overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 12px; white-space: nowrap; }
.search-control { width: 270px; flex-shrink: 0; }
.search-control input { width: 100%; height: 29px; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 9px; background: var(--paper-raised); }

.studio-workspace { height: calc(100vh - 98px); display: grid; grid-template-columns: 250px minmax(600px, 1fr) 330px; overflow: hidden; }
.studio-navigator, .studio-inspector { min-width: 0; height: 100%; overflow: auto; background: var(--paper-raised); scrollbar-color: var(--line-strong) transparent; }
.studio-navigator { border-right: 1px solid var(--line-strong); }
.studio-inspector { border-left: 1px solid var(--line-strong); }
.nav-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--paper-raised); }
.nav-tab { flex: 1; height: 34px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; cursor: pointer; }
.nav-tab:hover { color: var(--ink); }
.nav-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.navigator-heading, .assignment-heading { position: sticky; z-index: 3; top: 0; min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--line); background: rgba(245, 245, 244, 0.96); backdrop-filter: blur(8px); }
.navigator-heading > div { min-width: 0; display: grid; gap: 2px; }
.navigator-heading strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.navigator-heading > span, .assignment-heading { color: var(--muted); font-size: 11px; }
.eyebrow { color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.page-list { padding: 5px; }
.page-button { width: 100%; min-height: 48px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; border: 0; border-radius: var(--radius); padding: 7px 8px; background: transparent; text-align: left; cursor: pointer; }
.page-button:hover { background: var(--hover-ground); }
.page-button.is-active { background: var(--row-select); box-shadow: inset 0 0 0 1px var(--line-strong); }
.page-button strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; }
.page-button small { grid-column: 1 / -1; color: var(--muted); font: 10px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.page-count { min-width: 22px; height: 20px; display: grid; place-items: center; border-radius: var(--radius); background: var(--chip-bg); color: var(--muted); font-size: 11px; }
.assignment-heading { position: static; min-height: 38px; border-bottom: 1px solid var(--line); text-transform: uppercase; letter-spacing: .04em; }
.assignment-heading__tools { display: flex; align-items: center; gap: 7px; }
.filter-chip { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; background: var(--white); color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
.filter-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.filter-chip.is-selected { border-color: var(--ink); background: var(--ink); color: var(--white); }
.assignment-list { padding: 5px 5px 24px; }
.section-label { margin: 10px 7px 4px; color: var(--subtle); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.assignment-button { width: 100%; min-height: 54px; display: grid; grid-template-columns: 46px minmax(0, 1fr) 25px; align-items: center; gap: 7px; border: 0; border-radius: var(--radius); padding: 5px; background: transparent; text-align: left; cursor: pointer; }
.assignment-button:hover { background: var(--hover-ground); }
.assignment-button.is-active { background: var(--row-select); box-shadow: inset 0 0 0 1px var(--line-strong); }
.assignment-thumb { width: 46px; height: 38px; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; background: var(--paper); }
.assignment-thumb img, .assignment-thumb video { width: 100%; height: 100%; display: block; object-fit: cover; }
.assignment-copy { min-width: 0; display: grid; gap: 2px; }
.assignment-copy strong, .assignment-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assignment-copy strong { font-size: 12px; font-weight: 500; }
.assignment-copy small { color: var(--muted); font-size: 11px; }
.assignment-score { color: var(--muted); font-size: 12px; text-align: right; }

.studio-stage { min-width: 0; height: 100%; display: grid; grid-template-rows: 49px minmax(0, 1fr) 92px; overflow: hidden; background: var(--paper); }
.stage-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--paper-raised); }
.stage-breadcrumb { min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--muted); white-space: nowrap; }
.stage-breadcrumb strong, .stage-breadcrumb span { overflow: hidden; text-overflow: ellipsis; }
.stage-breadcrumb strong { color: var(--ink); font-weight: 500; }
.stage-controls, .segmented-control, .viewport-control { display: flex; align-items: center; gap: 3px; }
.stage-controls { flex-shrink: 0; }
.segmented-control, .viewport-control { border: 1px solid var(--line); border-radius: var(--radius); padding: 2px; background: var(--white); }
.segmented-control button, .viewport-control button { height: 26px; border: 0; border-radius: 2px; padding: 0 9px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.segmented-control button.is-selected, .viewport-control button.is-selected { background: var(--ink); color: var(--white); }
.stage-canvas { min-height: 0; display: grid; place-items: center; overflow: auto; padding: 18px; background-color: #f0f0ee; background-image: linear-gradient(45deg, rgb(255 255 255 / 22%) 25%, transparent 25%), linear-gradient(-45deg, rgb(255 255 255 / 22%) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgb(255 255 255 / 22%) 75%), linear-gradient(-45deg, transparent 75%, rgb(255 255 255 / 22%) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.media-frame { width: min(100%, 1120px); aspect-ratio: 16 / 10; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--line-strong); background: #151615; box-shadow: 0 18px 50px rgb(33 31 27 / 18%); transition: width 180ms ease; }
.media-frame[data-viewport="phone"] { width: 300px; aspect-ratio: 9 / 16; }
.media-frame[data-viewport="tablet"] { width: 560px; aspect-ratio: 4 / 3; }
.media-frame[data-viewport="laptop"] { width: 820px; }
.media-frame img, .media-frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
.media-frame video { background: #0f1010; }
.media-empty { display: grid; place-items: center; width: 100%; height: 100%; padding: 30px; color: #c5c3bd; text-align: center; background: repeating-linear-gradient(-45deg, #191a19, #191a19 10px, #20211f 10px, #20211f 20px); }
.context-card { width: min(720px, 90%); border: 1px solid var(--line-strong); padding: 22px; background: var(--white); color: var(--ink); }
.context-card h2 { margin: 0 0 7px; font-size: 18px; }
.context-card p { margin: 0 0 16px; color: var(--muted); }
.choice-strip { min-width: 0; display: flex; align-items: center; gap: 6px; overflow-x: auto; padding: 8px 10px; border-top: 1px solid var(--line-strong); background: var(--paper-raised); }
.choice-button { min-width: 180px; height: 72px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 5px; background: var(--white); text-align: left; cursor: pointer; }
.choice-button:hover, .choice-button.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice-preview { width: 72px; height: 60px; overflow: hidden; background: var(--ink); }
.choice-preview img, .choice-preview video { width: 100%; height: 100%; object-fit: cover; }
.choice-copy { min-width: 0; display: grid; gap: 3px; }
.choice-copy strong, .choice-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-copy strong { font-size: 12px; font-weight: 500; }
.choice-copy small { color: var(--muted); font-size: 11px; }

body[data-review-mode="copy"] :is(.stage-controls, .choice-strip, .media-frame, .semantic-role, .finding-list, .metadata-grid, .score-panel, .decision-panel, #overall-score, #remediation-panel) { display: none; }
.copy-sheet { display: none; }
body[data-review-mode="copy"] .copy-sheet { display: block; width: min(100%, 780px); max-height: 100%; overflow: auto; border: 1px solid var(--line-strong); padding: 26px 30px; background: var(--white); box-shadow: 0 18px 50px rgb(33 31 27 / 12%); }
.copy-block { padding: 9px 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.copy-block:last-child { border-bottom: 0; }
.copy-block:hover { background: var(--paper-raised); }
.copy-block.is-active { background: var(--row-select); }
.copy-block .finding { margin-top: 6px; }
.copy-kind { display: inline-block; color: var(--subtle); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.copy-block-text { margin-top: 4px; font-size: 13px; }
.copy-block.kind-title .copy-block-text { font-size: 13px; font-weight: 500; }
.copy-block.kind-meta-description .copy-block-text { color: var(--muted); }
.copy-block.kind-h1 .copy-block-text { font-size: 17px; font-weight: 600; }
.copy-block.kind-h2 .copy-block-text { font-size: 14px; font-weight: 600; }
.copy-block.kind-h3 .copy-block-text, .copy-block.kind-h4 .copy-block-text { font-size: 12px; font-weight: 600; }
.copy-block.kind-li .copy-block-text { padding-left: 12px; }
.copy-empty { padding: 22px; color: var(--muted); font-size: 12px; text-align: center; }
.copy-row { width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 7px; border: 0; border-radius: var(--radius); padding: 6px 8px; background: transparent; text-align: left; cursor: pointer; }
.copy-row:hover { background: var(--hover-ground); }
.copy-row.is-active { background: var(--row-select); box-shadow: inset 0 0 0 1px var(--line-strong); }
.copy-row-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.copy-flag { color: var(--danger); font-size: 10px; }
.copy-decision-state { color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.copy-summary { display: none; }
body[data-review-mode="copy"] .copy-summary { display: block; padding: 0 12px 4px; }
.term-panel { margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line-strong); }
.term-panel h2 { margin: 0 0 5px; font-size: 13px; }
.term-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12px; }
.term-row:first-of-type { border-top: 0; }
.term-state { flex-shrink: 0; font-size: 11px; }
.term-state.ok { color: var(--success); }
.term-state.bad { color: var(--danger); }
.term-none { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.copy-detail { display: flex; align-items: baseline; gap: 8px; }
.copy-detail-id { color: var(--muted); font: 10px var(--mono); }
.copy-detail-text { margin: 5px 0 8px; font-size: 12px; }
.remediation-panel { display: grid; gap: 6px; justify-items: start; margin: 9px 12px 0; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 10px; background: var(--white); }
.remediation-panel p { margin: 0; font-size: 12px; }
.remediation-panel .remediation-meta { color: var(--muted); font-size: 11px; }
.governed-tag { margin-left: 6px; color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .05em; }

.studio-inspector { padding-bottom: 28px; }
.inspector-heading { position: sticky; z-index: 3; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 11px 12px; border-bottom: 1px solid var(--line); background: rgba(245, 245, 244, 0.96); backdrop-filter: blur(8px); }
.inspector-heading h1 { max-width: 220px; margin: 3px 0 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.inspector-heading > strong { font-size: 22px; font-weight: 500; }
.score-empty { display: inline-block; border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; background: var(--chip-bg); color: var(--muted); font-size: 11px; font-weight: 450; }
.inspector-heading small { color: var(--muted); font-size: 11px; }
.semantic-role { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.finding-list { display: grid; gap: 5px; padding: 8px 12px 0; }
.finding { border: 1px solid rgba(154, 103, 0, 0.25); border-radius: var(--radius); padding: 8px 10px; background: var(--warning-soft); color: #7a5200; font-size: 12px; }
.metadata-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 9px 12px 0; border: 1px solid var(--line); background: var(--line); }
.metadata-grid > div { min-width: 0; display: grid; gap: 3px; padding: 7px; background: var(--white); }
.metadata-grid span { color: var(--muted); font: 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.metadata-grid strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.score-panel, .decision-panel { margin: 13px 12px 0; padding-top: 11px; border-top: 1px solid var(--line-strong); }
.score-panel h2, .decision-panel h2 { margin: 0; font-size: 13px; }
.score-panel > p { margin: 3px 0 9px; color: var(--muted); font-size: 12px; }
.score-row { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 5px; padding: 7px 0; border-top: 1px solid var(--line); }
.score-label { font-size: 12px; }
.score-row output { color: var(--muted); text-align: right; }
.score-buttons { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
.score-button { aspect-ratio: 1; border: 1px solid var(--line); border-radius: 2px; padding: 0; background: var(--white); color: var(--muted); font-size: 11px; cursor: pointer; }
.score-button:hover, .score-button.is-selected { border-color: var(--accent); background: var(--accent); color: var(--white); }
.decision-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; margin-top: 7px; }
.decision-options button { display: grid; gap: 2px; justify-items: start; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; background: var(--white); color: var(--muted); text-align: left; cursor: pointer; }
.decision-options button strong { font-size: 13px; font-weight: 500; color: var(--ink); }
.decision-options button small { font-size: 11px; }
.decision-panel--lead { margin-top: 0; padding: 11px 12px 13px; border-top: 0; border-bottom: 1px solid var(--line-strong); }
.decision-options button:hover, .decision-options button.is-selected { border-color: var(--ink); color: var(--ink); }
.decision-options button[data-disposition="retain"].is-selected { border-color: var(--success); background: var(--accent-soft); color: var(--success); }
.decision-options button[data-disposition="replace"].is-selected, .decision-options button[data-disposition="retire"].is-selected { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); }
.comment-control { display: grid; gap: 5px; margin-top: 9px; color: var(--muted); font-size: 12px; }
.comment-control textarea { min-height: 68px; resize: vertical; border: 1px solid var(--line); border-radius: var(--radius); padding: 7px; background: var(--white); color: var(--ink); }
.save-button { width: 100%; min-height: 34px; margin-top: 7px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--white); cursor: pointer; }
.save-button:hover { background: var(--accent-deep); }
.save-state { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.toast { position: fixed; z-index: 50; right: 16px; bottom: 16px; max-width: 360px; border: 1px solid var(--ink); border-radius: var(--radius); padding: 9px 12px; background: var(--ink); color: var(--white); box-shadow: 0 12px 32px rgb(0 0 0 / 25%); }

@media (max-width: 1320px) {
  .studio-workspace { grid-template-columns: 220px minmax(520px, 1fr) 300px; }
  .studio-header { grid-template-columns: minmax(230px, 1fr) auto minmax(340px, 1fr); }
}