/* Shared Commons chrome. Explicit tokens, never colour inversion: media and study cues retain their colours. */
/* A page that draws its own switch and owns its tokens (<html data-appearance-control="page">, e.g. the Lab app)
   is left alone: it gets the preference in html[data-appearance] and none of the rules below. */
html[data-appearance]:not([data-appearance-control=page]){
  --ui-font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ui-radius:.75rem;--ui-control-radius:.5rem;
  --bg:var(--surface-0);--surface:var(--surface-2);--subtle:var(--surface-1);--hover:var(--surface-3);

  --border-strong:var(--edge-strong);--on-accent:var(--accent-dark);
  --accent-hover:#cce9d7;--accent-soft:#203d32;--focus:#e3c27a;
  --danger:#f1b8a5;--danger-bg:#3b2623;--warn:#f0c27a;--warn-soft:#352f20;
  --info:#a9c7e8;--signal:#e3c27a;--signal-ink:#1d1606;
  --shadow:0 .125rem .5rem #0002;--shadow-lg:0 .75rem 2rem #0004;
  color-scheme:dark;
}
html[data-appearance=light]:not([data-appearance-control=page]){
  --surface-0:#f5f6f2;--surface-1:#edf2ed;--surface-2:#fff;--surface-3:#e1eae3;--surface-4:#fff;
  --edge:#cad6cc;--edge-strong:#7c9285;--accent-dark:#fff;
  --bg:#f5f6f2;--surface:#fff;--subtle:#edf2ed;--hover:#e1eae3;
  --text:#1c3029;--text-strong:#11251e;--muted:#4f665b;--faint:#576c62;
  --line:#cad6cc;--border-strong:#7c9285;--accent:#2b6650;--on-accent:#fff;
  --accent-hover:#20543f;--accent-soft:#e0eee4;--focus:#885c13;
  --danger:#9c392a;--danger-bg:#fbedE8;--warn:#805210;--warn-soft:#fff4dc;
  --info:#2d5f91;--signal:#885c13;--signal-ink:#fff;
  --shadow:0 .125rem .5rem #173d2110;--shadow-lg:0 .75rem 2rem #173d2120;
  color-scheme:light;
}
html[data-appearance]:not([data-appearance-control=page]){
  /* Aliases shared by React, the legacy shell, forms and session runner. */
  --panel:var(--surface);--paper:var(--surface);--base:var(--bg);--field:var(--subtle);
  --panel-soft:var(--subtle);--panel-2:var(--hover);--border:var(--line);--line-soft:var(--line);
  --ink:var(--text);--ink-2:var(--muted);--ink-3:var(--faint);--text-2:var(--muted);--text-3:var(--faint);
  --accent-text:var(--on-accent);--green:var(--accent);--mint:var(--accent);
  --chip:var(--accent-soft);--chip-text:var(--text);--flag:var(--warn);--flag-bg:var(--warn-soft);

  --radius:var(--ui-radius);
  --scroll-track:var(--bg);--scroll-thumb:var(--line);--scroll-thumb-hover:var(--muted);
  --sans:var(--ui-font);--serif:var(--ui-font);
  background:var(--bg);color:var(--text);font-family:var(--ui-font);
}
html[data-appearance]:not([data-appearance-control=page]) body{background:var(--bg);color:var(--text);font-family:var(--ui-font)}
html[data-appearance]:not([data-appearance-control=page]) :is(h1,h2,h3,h4){font-family:var(--ui-font);color:var(--text-strong)}
html[data-appearance]:not([data-appearance-control=page]) a{color:var(--accent)}
html[data-appearance]:not([data-appearance-control=page]) :is(.muted,.eyebrow,.fine,.small,.note,.edition,.studio small){color:var(--muted)}
html[data-appearance]:not([data-appearance-control=page]) :is(button,input,select,textarea,.btn){font-family:var(--ui-font);border-color:var(--border-strong);border-radius:var(--ui-control-radius)}
html[data-appearance]:not([data-appearance-control=page]) :is(input:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea){background:var(--field);color:var(--text)}
html[data-appearance]:not([data-appearance-control=page]) :is(input,textarea)::placeholder{color:var(--muted);opacity:1}
html[data-appearance]:not([data-appearance-control=page]) :is(button,.btn){background:var(--surface);color:var(--text)}
html[data-appearance]:not([data-appearance-control=page]) :is(button,.btn):hover:not(:disabled){background:var(--hover)}
html[data-appearance]:not([data-appearance-control=page]) :is(.primary,.btn-primary,.button-link,.ps-primary-link,.ps-primary,button[type=submit],.india #save){background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
html[data-appearance]:not([data-appearance-control=page]) :is(.primary,.btn-primary,.button-link,.ps-primary-link,.ps-primary,button[type=submit]):hover:not(:disabled){background:var(--accent-hover);color:var(--on-accent)}
html[data-appearance]:not([data-appearance-control=page]) :is(.secondary,.btn-ghost,button.link,.text-button){background:transparent;color:var(--accent)}
html[data-appearance]:not([data-appearance-control=page]) :is(.card,.panel,.pd-card,.voice,.metric,.checkin-view .cv-panel,dialog,.notice,.session-voice-card){background:var(--surface);color:var(--text);border-color:var(--line);border-radius:var(--ui-radius)}
html[data-appearance]:not([data-appearance-control=page]) :is(.appbar,.capture-bar){background:var(--surface);color:var(--text);border-color:var(--line)}
html[data-appearance]:not([data-appearance-control=page]) :is(.modules button[aria-pressed=true],.voice[data-assigned=true],.rank-number,.steps [aria-current] span,.tabs .btn[aria-pressed=true],.badge-accent){background:var(--accent-soft);color:var(--text);border-color:var(--accent)}
html[data-appearance]:not([data-appearance-control=page]) :is(.error,.cv-error){background:var(--danger-bg);color:var(--danger);border-color:var(--danger)}
html[data-appearance]:not([data-appearance-control=page]) :is(.danger,.capture-bar .link){color:var(--danger)}
html[data-appearance]:not([data-appearance-control=page]) :is(.badge-warn,.flag){background:var(--warn-soft);color:var(--warn)}
html[data-appearance]:not([data-appearance-control=page]) :is(.india,.india .small,.india summary){color:var(--text)}
html[data-appearance]:not([data-appearance-control=page]) :is(a,button,input,select,textarea,summary):focus-visible{outline:.1875rem solid var(--focus);outline-offset:.1875rem}
/* The switch: a dimmed island at the right edge, in the Lab island's language (docs/design/appearance.md;
   docs/design/lab-interface-rules.md R7, R11, R12). It floats over the page and reserves no space, so no page
   shifts. Vertically centred, so it stays clear of top app bars and of bottom recording controls
   (session and capture bars); below full-screen players (z-index 40) and the top layer (dialogs).
   Id-scoped and reset, so a page's own button rules never restyle it. */
html[data-appearance]:not([data-appearance-control=page]) #commons-appearance{position:fixed;top:max(.5rem,env(safe-area-inset-top));right:max(.5rem,env(safe-area-inset-right));z-index:30;transform:none;display:grid;justify-items:center;margin:0;padding:.25rem;border:0;border-radius:.625rem;background:color-mix(in srgb,var(--surface-4) 92%,transparent);box-shadow:var(--drop-3),0 0 0 1px var(--edge);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:.4;transition:opacity .15s ease;font:400 .8125rem/1.45 var(--ui-font);color:var(--text)}
html[data-appearance]:not([data-appearance-control=page]) #commons-appearance:is(:hover,:focus-within){opacity:1}
html[data-appearance]:not([data-appearance-control=page]) #commons-appearance .commons-island__mode{all:unset;box-sizing:border-box;display:grid;place-items:center;width:2rem;height:2rem;border-radius:.375rem;cursor:pointer;color:var(--signal);background:transparent}
html[data-appearance]:not([data-appearance-control=page]) #commons-appearance .commons-island__mode[data-next=dark]{color:var(--family-sequence)}
html[data-appearance]:not([data-appearance-control=page]) #commons-appearance .commons-island__mode:hover{background:var(--surface-3)}
html[data-appearance]:not([data-appearance-control=page]) #commons-appearance .commons-island__mode:focus-visible{outline:.1875rem solid var(--focus);outline-offset:.125rem}
html[data-appearance]:not([data-appearance-control=page]) #commons-appearance .commons-island__mode svg{display:block;transition:transform .2s ease}
html[data-appearance]:not([data-appearance-control=page]) #commons-appearance .commons-island__mode:hover svg{transform:rotate(-15deg) scale(1.08)}
/* Its hover card opens to the left, beside the island: after a short hover, at once on keyboard focus;
   Escape closes it (appearance.mjs). */
html[data-appearance]:not([data-appearance-control=page]) #commons-appearance .commons-island__card{position:absolute;top:50%;right:calc(100% + .5rem);transform:translateY(-50%);display:grid;gap:.125rem;width:max-content;max-width:min(16rem,calc(100vw - 4rem));padding:.5rem .625rem;border-radius:.5rem;background:var(--surface-4);color:var(--muted);box-shadow:var(--drop-3),0 0 0 1px var(--edge);text-align:left;white-space:normal;visibility:hidden;opacity:0;transition:opacity .12s ease,visibility 0s linear .12s}
html[data-appearance]:not([data-appearance-control=page]) #commons-appearance .commons-island__card strong{color:var(--text-strong);font-weight:600}
html[data-appearance]:not([data-appearance-control=page]) #commons-appearance:hover .commons-island__card{visibility:visible;opacity:1;transition-delay:.25s}
html[data-appearance]:not([data-appearance-control=page]) #commons-appearance .commons-island__mode:focus-visible+.commons-island__card{visibility:visible;opacity:1;transition-delay:0s}
html[data-appearance]:not([data-appearance-control=page]) #commons-appearance[data-card=closed] .commons-island__mode+.commons-island__card{visibility:hidden;opacity:0;transition:none}
/* Compact phones: a slimmer island hugging the edge, so it covers as little of the page as it can. */
@media (max-width:40rem){html[data-appearance]:not([data-appearance-control=page]) #commons-appearance{right:max(.25rem,env(safe-area-inset-right));padding:.125rem;border-radius:.5rem}html[data-appearance]:not([data-appearance-control=page]) #commons-appearance .commons-island__mode{width:1.75rem;height:1.75rem}}
@media (prefers-reduced-motion:reduce){html[data-appearance]:not([data-appearance-control=page]) #commons-appearance :is(*,svg){transition:none!important}html[data-appearance]:not([data-appearance-control=page]) #commons-appearance{transition:none}}
@media print{html[data-appearance]:not([data-appearance-control=page]) #commons-appearance{display:none!important}}
/* On phones the corner island would sit on a page header's last control: give the top bar a gutter for it. */
@media (max-width:40rem){html[data-appearance]:not([data-appearance-control=page]) :is(body>header,.appbar){padding-right:max(2.75rem,calc(env(safe-area-inset-right) + 2.5rem))}}
/* Legacy administration pages share the same quiet surfaces and readable labels. */
html[data-appearance]:not([data-appearance-control=page]) body>header{background:var(--bg);border-color:var(--line)}
html[data-appearance]:not([data-appearance-control=page]) :is(th,td,section,footer,.row,.result,.boundary){border-color:var(--line)}
html[data-appearance]:not([data-appearance-control=page]) :is(th,.card-foot,.dialog-head,.detail-head){background:var(--subtle);color:var(--text)}
html[data-appearance]:not([data-appearance-control=page]) :is(.studio .voice .play,.studio .rank-number){background:var(--accent-soft);color:var(--text)}
html[data-appearance]:not([data-appearance-control=page]) .studio .modules small{color:var(--muted)}
html[data-appearance]:not([data-appearance-control=page]) .india .notice{background:var(--warn-soft);color:var(--text)}
html[data-appearance]:not([data-appearance-control=page]) .india :is(button.active,#status,summary,.eyebrow){color:var(--accent)}
html[data-appearance]:not([data-appearance-control=page]) :is(input,button,select,textarea){accent-color:var(--accent)}