/* Shared controls: compact shadcn-inspired visual tokens, native semantics.
   Native select keeps keyboard navigation and mobile OS pickers as fallback. */
:root { --control-height:36px; --control-radius:7px; --control-ring:color-mix(in oklch,var(--primary) 28%,transparent); }
.shell { margin-left:0!important; }
.topbar { left:0!important; }
.header-brand { width:auto!important; flex-basis:auto!important; border-right:0!important; padding-right:20px!important; }
main#main { margin-left:0!important; width:100%; max-width:1600px; margin-right:auto; padding:24px 28px; }
.comparison-workspace { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--card); box-shadow:var(--shadow); }
.comparison-controls { padding:18px 20px 12px; }
.comparison-filters,.brand-selectors { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.brand-selectors { margin-top:16px; padding-top:16px; border-top:1px solid var(--border); }
.comparison-workspace .filter-field { display:flex; flex-direction:column; min-width:0; color:var(--muted); font-size:11px; }
.comparison-workspace select,.comparison-workspace input { width:100%; min-width:0; }
.reference-selector>span { color:var(--green); }
.reference-selector select { border-color:color-mix(in srgb,var(--primary) 45%,var(--border)); }
.comparison-help,.comparison-summary { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:11px; color:var(--muted); }
.comparison-help { margin-top:10px; font-size:10px; }
.comparison-summary { padding:12px 20px; border-block:1px solid var(--border); background:var(--surface-muted); }
.comparison-summary .text-button { margin-left:10px; }
.comparison-scroll { overflow:auto; max-width:100%; max-height:68vh; overscroll-behavior:contain; }
.comparison-scroll-tools { padding:6px 14px; display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:10px; border-bottom:1px solid var(--border); }
.comparison-scroll-tools[hidden] { display:none; }
.comparison-scroll-tools>div { display:flex; gap:4px; }
.comparison-scroll-tools button { border:1px solid var(--border); background:var(--card); font-size:19px; }
.comparison-table { table-layout:fixed; min-width:calc(185px + var(--brand-count)*220px); }
.comparison-table th,.comparison-table td { padding:15px 18px; min-width:0; font-size:12px; overflow-wrap:anywhere; }
.comparison-table th:first-child,.comparison-table td:first-child { width:185px; position:sticky; left:0; z-index:1; background:var(--card); border-right:1px solid var(--border); font-size:11px; }
.comparison-table thead th { background:var(--surface-muted); vertical-align:middle; position:sticky; top:0; z-index:2; }
.comparison-table thead th:first-child { z-index:3; }
.comparison-table thead .reference-column { background:var(--surface-muted); }
.comparison-table thead th:first-child { background:var(--surface-muted); }
.comparison-table tbody th { font-weight:500; }
.comparison-table .reference-column { background:color-mix(in srgb,var(--primary) 5%,var(--card)); }
.comparison-table .brand-cell { gap:10px; }
.comparison-table .brand-cell>div { min-width:0; }
.comparison-table .monogram { width:38px; height:38px; flex-shrink:0; }
.comparison-table .brand-name { display:block; font-size:13px; color:var(--foreground); line-height:1.5; }
.comparison-table .brand-role { font-size:8px; letter-spacing:.08em; margin:0 0 5px; }
.comparison-table .brand-cell .text-button { font-size:10px; margin-top:4px; }
.comparison-table .metric-number { font-size:16px; color:var(--foreground); }
.comparison-table small { font-size:10px; }
.comparison-table .platform-links { flex-wrap:wrap; }
.comparison-footnote { padding:14px 20px; font-size:11px; line-height:1.7; color:var(--muted); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.sync-coverage { margin:12px 0; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.sync-coverage>div { display:flex; justify-content:space-between; padding:9px 12px; border-bottom:1px solid var(--border); font-size:12px; }
.sync-coverage>div:last-child { border-bottom:0; }
.account-warning { padding:9px; border:1px solid var(--border); border-radius:7px; color:var(--muted); font-size:11px; line-height:1.6; }
@media(min-width:1600px) { main#main { margin-left:auto!important; } }
@media(max-width:900px) { .comparison-filters,.brand-selectors { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
 main#main { padding:18px 12px; }
 .comparison-controls { padding:14px 12px 10px; }
 .comparison-filters,.brand-selectors { gap:10px; }
 .comparison-help,.comparison-summary { flex-wrap:wrap; }
 .comparison-summary { padding:10px 12px; gap:4px; }
 .comparison-table { min-width:calc(140px + var(--brand-count)*205px); }
 .comparison-table th:first-child { width:140px; }
 .comparison-table th,.comparison-table td { padding:13px 12px; }
 .comparison-footnote { padding:12px; }
 .topbar .header-brand { padding-right:6px!important; }
}
button,input,select,textarea { font-family:var(--font); }
:is(input:not([type=checkbox]):not([type=hidden]):not([type=file]),select,textarea) {
  border:1px solid var(--border); border-radius:var(--control-radius);
  background:var(--card); color:var(--foreground); font-size:12px;
  box-shadow:0 1px 2px #00000006; transition:border-color .15s,box-shadow .15s;
}
:is(input:not([type=checkbox]):not([type=hidden]):not([type=file]),select) { min-height:var(--control-height); padding:8px 11px; }
textarea { padding:10px 12px; line-height:1.6; resize:vertical; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:.8; }
:is(input,select,textarea):hover:not(:disabled) { border-color:color-mix(in oklch,var(--muted) 45%,var(--border)); }
:is(input,select,textarea):focus-visible { outline:0; border-color:var(--primary); box-shadow:0 0 0 3px var(--control-ring); }
:is(button,a,summary):focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
:is(input,select,textarea,button):disabled { opacity:.5; cursor:not-allowed; }
select { cursor:pointer; }
select option { background:var(--card); color:var(--foreground); padding:8px 10px; }
.filter-field { gap:7px; font-weight:500; }
.filter-field .filter-select { height:var(--control-height); font-size:12px; border-radius:var(--control-radius); }
.search-field input { padding-left:34px!important; }
.button { min-height:var(--control-height); padding:8px 12px; border-radius:var(--control-radius); font-size:12px; font-weight:550; line-height:18px; box-shadow:0 1px 2px #00000008; }
.button.secondary { border:1px solid var(--border); background:var(--card); color:var(--foreground); }
.button.secondary:hover { background:var(--secondary); border-color:var(--border); }
.button.primary { background:var(--primary); color:var(--card); border-color:var(--primary); }
.dark .button.primary { color:oklch(.17 .03 155); }
.button.ghost { box-shadow:none; }
.icon-button { width:32px; height:32px; border-radius:6px; }
.text-button { border-radius:4px; font-weight:500; }
input[type=checkbox] { width:15px; height:15px; border-radius:4px; accent-color:var(--primary); flex-shrink:0; }
.theme-toggle { position:relative; flex-shrink:0; width:36px; height:36px; padding:0; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--foreground); box-shadow:0 1px 2px #00000008; cursor:pointer; }
.theme-toggle:hover { background:var(--secondary); }
.theme-toggle svg { position:absolute; inset:0; margin:auto; width:18px; height:18px; transition:opacity 180ms ease,transform 220ms ease; pointer-events:none; }
.theme-toggle .theme-sun { opacity:1; transform:rotate(0deg) scale(1); }
.theme-toggle .theme-moon { opacity:0; transform:rotate(-65deg) scale(.65); }
.dark .theme-toggle .theme-sun { opacity:0; transform:rotate(65deg) scale(.65); }
.dark .theme-toggle .theme-moon { opacity:1; transform:rotate(0deg) scale(1); }
/* Animate palette changes only during an explicit toggle, never initial paint. */
html.theme-changing :is(body,.topbar,.sidebar,main,section,article,dialog,button,input,select,textarea,.brand-card,.stat-card,.filters,.footer,.table-wrap,th,td) { transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease; }
@media (prefers-reduced-motion:reduce) {
  html.theme-changing *, .theme-toggle svg { transition:none!important; }
}
@media (pointer:coarse) { .theme-toggle { width:44px; height:44px; } }
.workspace-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#compare-count { min-width:19px; padding:0 4px; border-radius:4px; background:var(--secondary); color:var(--green); font-size:10px; }
.advanced-fields { grid-template-columns:repeat(5,minmax(0,1fr)); }
.workspace-dialog { width:1100px; max-width:calc(100vw - 32px); }
.workspace-dialog>.dialog-top { position:sticky; top:0; background:var(--card); padding:16px 20px; margin:0; border-bottom:1px solid var(--border); z-index:2; }
.workspace-dialog .dialog-top h2 { font-size:17px; }
#workspace-dialog-content { padding:20px; }
.workspace-dialog .compare-content { padding:0; border:0; box-shadow:none; }
.comparison-scope { max-width:310px; margin:14px 0; }
.data-explanation { padding:11px 13px; margin:12px 0; border:1px solid var(--border); border-radius:8px; background:var(--surface-muted); color:var(--muted); font-size:11px; line-height:1.7; }
.coverage-note { margin:0 16px 14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.comparison-table .metric-missing { display:block; white-space:normal; line-height:1.6; }
.card-numbers .metric-missing { font-size:10px; line-height:1.5; display:block; }
/* Modern browsers render the select popup using the same component palette. */
@supports (appearance:base-select) {
  select,select::picker(select) { appearance:base-select; }
  select { display:flex; align-items:center; gap:8px; }
  select::picker-icon { color:var(--muted); width:12px; margin-left:auto; }
  select::picker(select) { background:var(--card); color:var(--foreground); border:1px solid var(--border); padding:5px; border-radius:8px; box-shadow:0 8px 24px #0003; margin-top:5px; max-height:280px; }
  select option { padding:8px 10px; border-radius:4px; font-size:12px; cursor:pointer; min-height:32px; }
  select option:hover,select option:focus { background:var(--secondary); color:var(--foreground); outline:0; }
  select option:checked { background:var(--secondary); color:var(--green); font-weight:550; }
  select option::checkmark { color:var(--primary); }
}
@media(max-width:1000px) { .page-heading { align-items:flex-start; flex-direction:column; } .advanced-fields { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:760px) {
  .workspace-actions { gap:6px; width:100%; }
  .workspace-actions .button { padding:7px 10px; font-size:11px; min-height:36px; }
  .advanced-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workspace-dialog { max-width:calc(100vw - 20px); }
  .workspace-dialog>.dialog-top { padding:12px; gap:8px; }
  #workspace-dialog-content { padding:14px; }
  .workspace-dialog .dialog-top h2 { font-size:15px; }
}