/* CA Scout Studio · Design System v1. Geometry stays in each screen stylesheet. */
:root {
  --color-bg:#0b1020; --color-shell:#111c2e; --color-shell-text:#e8f1f8;
  --color-surface:#fff; --color-surface-raised:#f4f8fa;
  --color-border:#cddde5; --color-divider:#e4edf1;
  --color-text:#193c4e; --color-text-muted:#536e7c;
  --color-primary:#16b4ce; --color-primary-hover:#1299b1;
  --color-primary-ink:#08667d; --color-primary-soft:#e0f5fa;
  --color-focus:#087e99;
  --color-success:#17684c; --color-success-soft:#e0f4eb;
  --color-warning:#825306; --color-warning-soft:#fff2d8;
  --color-danger:#ab3542; --color-danger-soft:#fcebee;
  --color-info:var(--color-primary-ink);
  /* Type colors encode attack type, not quality; line patterns remain distinct. */
  --color-type-hard:#0085a6; --color-type-soft:#7d35b2; --color-type-tip:#258032;
  --color-heat-1:#edf8fb; --color-heat-2:#d7eef4; --color-heat-3:#bce1eb;
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;
  --font-display:28px; --font-h2:20px; --font-h3:16px; --font-body:14px; --font-small:12px; --font-caption:11px; --font-metric:32px;
  --font-code:Consolas,'Courier New',monospace;
  --shadow-sm:0 2px 8px #071d3d0a; --shadow-md:0 12px 32px #071d3d20;
  --control-height:40px; --row-space:12px; --motion-fast:140ms;
}
/* Optional future density hook, no new UI state or setting. */
[data-density=compact]{--control-height:36px;--row-space:8px}
@media screen {
body{background:var(--color-bg)}
button,input,select,textarea{box-sizing:border-box}
button{border-radius:var(--radius-md);border-color:var(--color-border);color:var(--color-text);transition:background var(--motion-fast),border-color var(--motion-fast)}
button:hover:not(:disabled){background:var(--color-primary-soft);border-color:var(--color-primary)}
button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed}
button.primary,.primary{background:var(--color-primary);border-color:var(--color-primary);color:#062c39}
button.primary:hover:not(:disabled),.primary:hover{background:var(--color-primary-hover);color:#062c39}
button.secondary{background:var(--color-surface);color:var(--color-text)}
button.ghost,.text-button{background:transparent;color:var(--color-primary-ink)}
button.danger,.preset-actions button[data-action=delete]{color:var(--color-danger);border-color:var(--color-danger);background:var(--color-danger-soft)}
button.icon{min-width:var(--control-height);min-height:var(--control-height);padding:var(--space-2)}
button.small{font-size:var(--font-small);padding:var(--space-2) var(--space-3)}
button.large{min-height:48px;padding:var(--space-3) var(--space-5)}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);font-size:var(--font-body);min-width:0}
input:not([type=checkbox]):not([type=radio]):not([type=file]),select{height:var(--control-height)}
input[type=checkbox],input[type=radio],.list-options input{accent-color:var(--color-primary-ink)}
:where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
#appHeader{border-bottom:1px solid #2d4054;background:var(--color-shell)}
#appHeader .primary{color:#062c39;background:var(--color-primary)}
.panel,.card,.compare-card,.smart-filter-bar{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}
.panel-heading,.panel-header{padding:var(--space-4) var(--space-5);gap:var(--space-3)}
.panel-body{padding:var(--space-5)}.panel-footer{padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-divider)}
.panel-heading h2,.panel-header h2,.selected-action-court h2{font-size:var(--font-h3);color:var(--color-text)}
h1{font-size:var(--font-display);line-height:1.25}h2{line-height:1.3}h3{line-height:1.35}
.dashboard-title h1,.matchbar h1{color:var(--color-shell-text)}
.matchbar h1{font-size:clamp(20px,2vw,var(--font-display))}
.compare-heading h2,.directions-heading h2{font-size:var(--font-h2);color:var(--color-text)}
.eyebrow{font-size:var(--font-caption);letter-spacing:.09em}
code,td code,.direction-code-title strong,.direction-code-card>header strong{font-family:var(--font-code);font-variant-numeric:tabular-nums}
td code{color:var(--color-text-muted)}
.metrics strong,.compare-hero strong,.compare-metric strong,.direction-stat strong,.report-result{font-variant-numeric:tabular-nums;letter-spacing:-.025em}
.metrics>div{border-color:var(--color-primary);background:var(--color-surface-raised)}
.metrics strong{color:var(--color-text);font-size:var(--font-metric)}
.set-score,.count,.eval{border-radius:var(--radius-sm);font-variant-numeric:tabular-nums}
.eval{background:var(--color-surface-raised);color:var(--color-text)}
.eval.good{background:var(--color-success-soft);color:var(--color-success)}
.eval.bad{background:var(--color-danger-soft);color:var(--color-danger)}
/* Dense report geometry and print styles intentionally remain screen-owned. */
thead,.match-directory thead{background:var(--color-surface-raised)}
th{color:var(--color-text-muted);font-weight:650}
td{border-bottom-color:var(--color-divider);font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--color-surface-raised)}
tbody tr.active,tr[aria-selected=true]{background:var(--color-primary-soft);box-shadow:inset 3px 0 var(--color-primary)}
.numeric{text-align:right;font-variant-numeric:tabular-nums}
.workspace-nav,.view-nav>div{border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);padding:var(--space-1);gap:var(--space-1)}
.workspace-nav a,.view-nav button{border-radius:var(--radius-md);color:var(--color-text-muted);font-size:13px}
.workspace-nav a[aria-current=page],.view-nav button[aria-current=page],.compare-mode button[aria-pressed=true],.analysis-layout-bar button[aria-pressed=true]{background:var(--color-primary-soft);color:var(--color-primary-ink);box-shadow:inset 0 -2px var(--color-primary)}
.smart-filter-bar{background:var(--color-surface);padding:var(--space-4) var(--space-5)}
.smart-filter-bar label,.compare-filters label{color:var(--color-text-muted);font-size:var(--font-small)}
.smart-filter-chips button{border-radius:var(--radius-sm);background:var(--color-primary-soft);color:var(--color-primary-ink)}
.preset-list{background:var(--color-surface-raised);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}
.preset-card,.preset-dialog,.compare-empty,.compare-detail{border-radius:var(--radius-lg)}
.preset-card.is-active{border-color:var(--color-primary);box-shadow:inset 3px 0 var(--color-primary)}
.preset-dialog{background:var(--color-surface)}
#presetError,#videoError,#notice.error{color:var(--color-danger)}
#notice{color:var(--color-success);background:var(--color-success-soft);border-color:var(--color-success)}
#notice.error{background:var(--color-danger-soft);border-color:var(--color-danger)}
.empty-list,.compare-empty,.court-empty,.preset-empty{color:var(--color-text-muted);line-height:1.6}
.compare-card header{background:var(--color-surface-raised);border-bottom-color:var(--color-primary)}
.compare-card header h3{color:var(--color-text)}
.compare-metric,.compare-filters{border-color:var(--color-divider)}
.compare-detail{background:var(--color-surface-raised)}
.analysis-layout-bar{background:var(--color-shell);border-color:#2d4054;border-radius:var(--radius-lg)}
.transport{border-color:var(--color-divider)}
.transport button{font-variant-numeric:tabular-nums}
main>header{color:var(--color-shell-text)}
main>header a,main>nav a{color:#71d7e7}
#status{color:#a9dce6}
@media(max-width:600px){
 .panel-heading,.panel-header,.smart-filter-bar{padding:var(--space-4)}
 .panel-body{padding:var(--space-4)}
 h1{font-size:22px}
 .view-nav>div{max-width:100%;flex-wrap:wrap}
 .compare-panel,.card{padding:var(--space-4)}
}
}
@media(prefers-reduced-motion:reduce){button,a,summary{transition:none!important}}
@media screen {
.workspace-nav{display:flex;align-items:center;justify-content:flex-start;gap:var(--space-1);width:max-content;max-width:100%;margin:0 0 var(--space-5);overflow-x:auto;scrollbar-width:thin}
.workspace-nav a{display:inline-flex;align-items:center;gap:var(--space-2);padding:8px 12px;min-height:40px;text-decoration:none;font-size:13px;font-weight:650;white-space:nowrap;transition:background var(--motion-fast)}
.workspace-nav a span{font-size:10px;opacity:.75}.workspace-nav a:hover{background:var(--color-surface-raised)}
.collection-account{color:#b3c8d7;font-size:var(--font-small);margin-bottom:var(--space-3)}
.compare-modes [aria-pressed=true],.rotation-choices [aria-pressed=true]{box-shadow:inset 0 -2px var(--color-primary)}
@media(max-width:600px){.workspace-nav{width:100%;box-sizing:border-box}.workspace-nav a{padding-inline:10px;font-size:12px}}
}
@media screen {
.report-toolbar{color:var(--color-shell-text)}
.report-toolbar label,.report-toolbar>div span{color:#b4c6d5}
.report-paper{border-color:var(--color-border);border-radius:var(--radius-lg);color:var(--color-text);box-shadow:var(--shadow-sm)}
.report-result,.report-team-title{border-color:var(--color-primary)}
.report-table tfoot{background:var(--color-primary-soft)}
.report-table tbody tr:hover,.report-drill:hover{background:var(--color-primary-soft);color:var(--color-text)}
}
:root{--color-court:#deebec;--color-court-line:#638997;--color-court-grid:#a8c0c8;--color-code-header:#10435b}
@media screen {
.direction-selection{background:var(--color-primary-soft);border-color:var(--color-primary);color:var(--color-primary-ink)}
.directions-skills button[aria-pressed=true]{background:var(--color-primary-soft);color:var(--color-primary-ink);border-color:var(--color-primary);box-shadow:inset 0 -2px var(--color-primary)}
}
@media screen {
.panel a,.card a{color:var(--color-primary-ink)}
.card h2{font-size:var(--font-h2)}
.directions-revision{overflow-wrap:anywhere;min-width:0}
.collection-layout .video-stage{max-height:min(62svh,620px);overflow:hidden}
.collection-layout .video-stage video{object-fit:contain}
@media(max-width:600px){.workspace-nav{flex-wrap:wrap;overflow:visible}.workspace-nav a{flex:1 1 auto;justify-content:center}}
}
@media screen{.directions-revision{white-space:normal;max-width:40%;line-height:1.5}@media(max-width:650px){.directions-revision{max-width:100%}}}