/* Themis theme layer. Loaded last.
   1. Dark palette tokens (warm neutral charcoal, sage used only as an accent).
   2. Page finish: tonal depth and a near-invisible grain in both themes.
   3. Theme transition (View Transitions, with a fallback and reduced motion).
   4. Dark fixes for components that had no dark rules.
   6. Glass: a slight frosted-glass touch on the floating chrome, over the grain.
   Contrast (WCAG 2.2): text 14:1, secondary 9:1, tertiary 6.6:1, accents 9:1,
   input borders 3.3:1 on cards. Disabled text sits near 3.5:1 on purpose. */

html[data-theme=dark]{
  color-scheme:dark;
  --d-bg:#161513;--d-sunken:#12110f;--d-surface:#1d1c1a;--d-raised:#22221f;--d-overlay:#272624;--d-hover:rgba(255,255,255,.055);--d-hover-strong:rgba(255,255,255,.085);--d-eyebrow:#a0b09b;
  --d-line:rgba(255,255,255,.085);--d-line2:rgba(255,255,255,.13);--d-input:rgba(255,255,255,.36);
  --d-text:#eceae6;--d-text-soft:#eceae6;--d-text2:#c5c3ba;--d-text3:#9a9890;--d-disabled:#6f6d68;
  --d-accent:#aacb9f;--d-accent-strong:#bedbb5;--d-accent-fill:#95b88a;--d-accent-fill-hover:#a0c395;--d-on-accent:#161d14;
  --d-accent-soft:#263124;--d-selected:#272f26;--d-accent-line:#556a4e;--d-accent-mid:#3c4e36;
  --d-danger:#e69688;--d-danger-soft:#36201c;--d-warn:#e6c68a;--d-warn-soft:#2e2716;
  --d-shadow:0 1px 2px rgba(0,0,0,.35),0 10px 30px -12px rgba(0,0,0,.55);
}
html{color-scheme:light}

/* ---------- 2. Page finish ----------
   Grain tiles are balanced around each background (measured: the average colour does not move).
   Dark page: grain 2.9 levels plus slow tonal clouds and an edge vignette. Dark surfaces: 1.9 levels plus a soft top sheen.
   Light page: 1.7 levels of paper grain. Light cards stay clean. */
:root{--tex-page:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' seed='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0' result='m'/%3E%3CfeColorMatrix in='m' values='0 0 0 0 1.000  0 0 0 0 1.000  0 0 0 0 1.000  4 0 0 0 -2.000' result='w'/%3E%3CfeColorMatrix in='m' values='0 0 0 0 0.788  0 0 0 0 0.808  0 0 0 0 0.761  -2 0 0 0 1.000' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='w'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.3'/%3E%3C/svg%3E")}
html[data-theme=dark]{--tex-page:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' seed='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0' result='m'/%3E%3CfeColorMatrix in='m' values='0 0 0 0 0.180  0 0 0 0 0.180  0 0 0 0 0.157  4 0 0 0 -2.000' result='w'/%3E%3CfeColorMatrix in='m' values='0 0 0 0 0.000  0 0 0 0 0.000  0 0 0 0 0.000  -5 0 0 0 2.500' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='w'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.3'/%3E%3C/svg%3E");--tex-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' seed='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0' result='m'/%3E%3CfeColorMatrix in='m' values='0 0 0 0 0.224  0 0 0 0 0.224  0 0 0 0 0.200  3 0 0 0 -1.500' result='w'/%3E%3CfeColorMatrix in='m' values='0 0 0 0 0.000  0 0 0 0 0.000  0 0 0 0 0.000  -4 0 0 0 2.000' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='w'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.2'/%3E%3C/svg%3E");--tex-cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0032' numOctaves='3' seed='11' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='saturate' values='0' result='m'/%3E%3CfeColorMatrix in='m' values='0 0 0 0 0.165  0 0 0 0 0.165  0 0 0 0 0.141  2 0 0 0 -1.000' result='w'/%3E%3CfeColorMatrix in='m' values='0 0 0 0 0.000  0 0 0 0 0.000  0 0 0 0 0.000  -2 0 0 0 1.000' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='w'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.5'/%3E%3C/svg%3E")}
html:has(body.themis-workspace){background-image:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 60%);background-repeat:no-repeat;background-attachment:fixed}
body.themis-workspace{background-color:transparent!important;background-image:var(--tex-page);background-repeat:repeat}
html[data-theme=dark]:has(body.themis-workspace){background-color:var(--d-bg);background-image:radial-gradient(110% 60% at 50% -10%,rgba(236,232,214,.05) 0%,rgba(236,232,214,0) 62%),radial-gradient(140% 120% at 50% 40%,rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%);background-repeat:no-repeat;background-attachment:fixed}
html[data-theme=dark] body.themis-workspace{background-color:transparent!important;background-image:var(--tex-page),var(--tex-cloud)!important;background-repeat:repeat!important;background-attachment:scroll!important}
html[data-theme=dark] :is(#detail,#rail .debt-phase:not(.debt-locked),details#configuration,.setup,#view_precedents .lib-group,.prec-panel,#themisGuide,.search-results,.profile-menu,.dd-preview,.workspace-dialog,dialog.intake-dialog,.route-store-dialog){background-image:linear-gradient(180deg,rgba(255,255,255,.05) 0,rgba(255,255,255,0) 1px),linear-gradient(180deg,rgba(255,255,255,.022) 0,rgba(255,255,255,0) 120px),var(--tex-card)!important;background-repeat:no-repeat,no-repeat,repeat!important}
@media print{body.themis-workspace,html:has(body.themis-workspace){background-image:none!important}}

/* ---------- 3. Theme transition ----------
   Dusk: darkness gathers around the switch and spreads across the page on a wide, eased edge
   while the light page dims slightly; the dark page settles in. Dawn reverses it: the dark
   dissolves outward, warming as it goes, to reveal the light. Any click, key or scroll
   during the transition skips to the end, so the page is never held up. */
@property --vt-r{syntax:'<length>';inherits:true;initial-value:0px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-dusk{--vt-dur:1.35s}html.vt-dawn{--vt-dur:1.2s}
html.vt-dusk::view-transition-new(root){z-index:2;-webkit-mask-image:radial-gradient(circle at var(--vt-x,90%) var(--vt-y,4%),#000 calc(var(--vt-r) - var(--vt-f)),rgba(0,0,0,.93) calc(var(--vt-r) - var(--vt-f)*.8),rgba(0,0,0,.74) calc(var(--vt-r) - var(--vt-f)*.58),rgba(0,0,0,.44) calc(var(--vt-r) - var(--vt-f)*.36),rgba(0,0,0,.15) calc(var(--vt-r) - var(--vt-f)*.16),transparent var(--vt-r));mask-image:radial-gradient(circle at var(--vt-x,90%) var(--vt-y,4%),#000 calc(var(--vt-r) - var(--vt-f)),rgba(0,0,0,.93) calc(var(--vt-r) - var(--vt-f)*.8),rgba(0,0,0,.74) calc(var(--vt-r) - var(--vt-f)*.58),rgba(0,0,0,.44) calc(var(--vt-r) - var(--vt-f)*.36),rgba(0,0,0,.15) calc(var(--vt-r) - var(--vt-f)*.16),transparent var(--vt-r));animation:vt-spread var(--vt-dur) cubic-bezier(.45,.05,.25,1) both,vt-settle var(--vt-dur) cubic-bezier(.3,0,.2,1) both}
html.vt-dusk::view-transition-old(root){z-index:1;animation:vt-dim var(--vt-dur) cubic-bezier(.4,0,.3,1) both}
html.vt-dawn::view-transition-old(root){z-index:2;-webkit-mask-image:radial-gradient(circle at var(--vt-x,90%) var(--vt-y,4%),transparent calc(var(--vt-r) - var(--vt-f)),rgba(0,0,0,.07) calc(var(--vt-r) - var(--vt-f)*.8),rgba(0,0,0,.26) calc(var(--vt-r) - var(--vt-f)*.58),rgba(0,0,0,.56) calc(var(--vt-r) - var(--vt-f)*.36),rgba(0,0,0,.85) calc(var(--vt-r) - var(--vt-f)*.16),#000 var(--vt-r));mask-image:radial-gradient(circle at var(--vt-x,90%) var(--vt-y,4%),transparent calc(var(--vt-r) - var(--vt-f)),rgba(0,0,0,.07) calc(var(--vt-r) - var(--vt-f)*.8),rgba(0,0,0,.26) calc(var(--vt-r) - var(--vt-f)*.58),rgba(0,0,0,.56) calc(var(--vt-r) - var(--vt-f)*.36),rgba(0,0,0,.85) calc(var(--vt-r) - var(--vt-f)*.16),#000 var(--vt-r));animation:vt-spread var(--vt-dur) cubic-bezier(.45,.05,.25,1) both,vt-warm var(--vt-dur) ease-in both}
html.vt-dawn::view-transition-new(root){z-index:1;animation:vt-wake var(--vt-dur) cubic-bezier(.3,0,.2,1) both}
@keyframes vt-spread{from{--vt-r:calc(var(--vt-f,40vmax)*.42)}to{--vt-r:var(--vt-max,200vmax)}}
@keyframes vt-dim{from{filter:none}to{filter:brightness(.84) saturate(.82)}}
@keyframes vt-settle{from{filter:brightness(1.07)}to{filter:none}}
@keyframes vt-warm{from{filter:none}to{filter:brightness(1.14) saturate(1.05)}}
@keyframes vt-wake{from{filter:brightness(.93) saturate(.9)}to{filter:none}}
html.vt-calm::view-transition-old(root){animation:vt-out .24s ease both}
html.vt-calm::view-transition-new(root){animation:vt-in .24s ease both}
@keyframes vt-out{to{opacity:0}}@keyframes vt-in{from{opacity:0}}
html.theme-fade,html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{transition:background-color .9s cubic-bezier(.4,0,.2,1),color .9s cubic-bezier(.4,0,.2,1),border-color .9s cubic-bezier(.4,0,.2,1),fill .9s ease,stroke .9s ease,box-shadow .9s ease,outline-color .9s ease!important}
html[data-theme] .theme-toggle .knob{transition:transform .6s cubic-bezier(.5,.1,.2,1.15)}
html[data-theme] .theme-toggle .knob>.tt-icon{transition:opacity .45s ease .12s,transform .6s cubic-bezier(.5,.1,.2,1.15)}
.theme-toggle .knob{transition:transform .6s cubic-bezier(.5,.1,.2,1.15)}
.theme-toggle .knob>.tt-icon{transition:opacity .45s ease .12s,transform .6s cubic-bezier(.5,.1,.2,1.15)}
@media (prefers-reduced-motion:reduce){.theme-toggle .knob,.theme-toggle .knob>.tt-icon{transition:none}}

/* ---------- 4. Dark fixes ---------- */
html[data-theme=dark] ::selection{background:#3c4e36;color:var(--d-text)}
html[data-theme=dark] :is(button,a,input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--d-accent);outline-offset:2px}
html[data-theme=dark] :is(button,input,select,textarea):disabled{color:var(--d-disabled)}
html[data-theme=dark] input::placeholder,html[data-theme=dark] textarea::placeholder{color:var(--d-text3);opacity:1}
html[data-theme=dark] *{scrollbar-color:#45443f transparent}

/* Brand, header, tabs */
html[data-theme=dark] .workspace-brand span>span,html[data-theme=dark] .madeby b{color:var(--d-accent)}
html[data-theme=dark] .workspace-audience button:not(.active):not([aria-pressed=true]){color:var(--d-text3)}
html[data-theme=dark] .workspace-toolbar nav .tab-soon{background:var(--d-raised);color:var(--d-text3)}
html[data-theme=dark] .tabs button.active,html[data-theme=dark] nav>button.active{background:var(--d-accent-fill);color:var(--d-on-accent)}
html[data-theme=dark] .workspace-toolbar nav>button.active,html[data-theme=dark] nav[aria-label=Workspace]>button.active{background:transparent;color:var(--d-text);border-bottom-color:var(--d-accent)!important}

/* Case details and setup */
html[data-theme=dark] :is(summary,.setup-toggle)>span{color:var(--d-text2)}
html[data-theme=dark] .setup-note{color:var(--d-text3)}
html[data-theme=dark] .rail-matter .context-label,html[data-theme=dark] .eyebrow{color:var(--d-accent)}
html[data-theme=dark] .themis-workspace .detail-top .eyebrow{color:var(--d-text3)}

/* Reader tools, tabs, navigation */
html[data-theme=dark] .tg-reader-tools button{background:var(--d-raised)!important;border-color:var(--d-line2)!important;color:var(--d-text2)!important}
html[data-theme=dark] .tg-reader-tools button span{color:inherit!important}
html[data-theme=dark] .tg-reader-tools button:hover{background:var(--d-hover)!important;color:var(--d-text)!important}
html[data-theme=dark] .tg-reader-tools .tg-mark{background:transparent}
html[data-theme=dark] .reader-navigation .next-step{background:var(--d-accent-fill)!important;border-color:var(--d-accent-fill)!important;color:var(--d-on-accent)!important}
html[data-theme=dark] .reader-navigation .next-step:hover{background:var(--d-accent-fill-hover)!important}
html[data-theme=dark] .reader-navigation .next-step:disabled{background:var(--d-raised)!important;border-color:var(--d-line)!important;color:var(--d-disabled)!important}

/* Documents tab */
html[data-theme=dark] .dd-intro,html[data-theme=dark] .dd-purpose{color:var(--d-text2)}
html[data-theme=dark] .dd-name{color:var(--d-text)}
html[data-theme=dark] .dd-meta{color:var(--d-text3)}
html[data-theme=dark] .dd-no{border-color:var(--d-line2);color:var(--d-text3)}
html[data-theme=dark] .dd-item details[open] .dd-no{background:var(--d-accent-soft);border-color:var(--d-accent-line);color:var(--d-accent)}
html[data-theme=dark] .dd-item details[open] .dd-name{color:var(--d-accent-strong)}
html[data-theme=dark] .dd-preview small{color:var(--d-text3)}
html[data-theme=dark] .dd-sheet{background:#1a1917;color:#e2e0d9;border:1px solid rgba(255,255,255,.1);box-shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -8px rgba(0,0,0,.6)}
html[data-theme=dark] .dd-outline-block i{background:var(--d-line2)}
html[data-theme=dark] .video-caption strong{color:var(--d-text)}
html[data-theme=dark] .video-caption span{color:var(--d-text3)}
html[data-theme=dark] .reader-panel video{background:var(--d-sunken)}

/* Search */
html[data-theme=dark] .themis-workspace .search-results,html[data-theme=dark] .search-results{background:var(--d-overlay);border-color:var(--d-line2);box-shadow:0 24px 60px -12px rgba(0,0,0,.65)}

/* Intake dialog */
html[data-theme=dark] #workspaceDialogTitle{color:var(--d-text)}
html[data-theme=dark] #intakeDescription,html[data-theme=dark] .intake-dialog small{color:var(--d-text3)}
html[data-theme=dark] .intake-dialog strong,html[data-theme=dark] .intake-dialog .intake-choice{color:var(--d-text)}
html[data-theme=dark] .intake-topline>span{color:var(--d-text3)}
html[data-theme=dark] #intakeBack,html[data-theme=dark] .intake-browse{color:var(--d-accent)}
html[data-theme=dark] .intake-progress{background:var(--d-line)}
html[data-theme=dark] .intake-progress i{background:var(--d-accent)}
html[data-theme=dark] .intake-search input,html[data-theme=dark] #intakeSearch{background:var(--d-sunken);border-color:var(--d-input);color:var(--d-text)}
html[data-theme=dark] .intake-dialog .intake-choice{background:transparent;border-bottom-color:var(--d-line)}
html[data-theme=dark] .intake-dialog .intake-choice:hover{background:var(--d-hover)}

/* Workspace */
html[data-theme=dark] .wsx-btn.primary{background:var(--d-accent-fill);border-color:var(--d-accent-fill);color:var(--d-on-accent)}
html[data-theme=dark] .wsx-btn.primary:hover{background:var(--d-accent-fill-hover);border-color:var(--d-accent-fill-hover)}
html[data-theme=dark] .wsx-add input,html[data-theme=dark] .wsx-add select{background:var(--d-sunken);border-color:var(--d-input);color:var(--d-text)}
html[data-theme=dark] .profile-head small,html[data-theme=dark] .profile-menu small{color:var(--d-text3)}

/* Ask Themis dock */
html[data-theme=dark] .journey-workspace #wakeThemis{background:var(--d-accent-mid)!important;border-color:#4b6044!important;color:var(--d-text)!important;box-shadow:0 8px 28px -8px rgba(0,0,0,.7)}
html[data-theme=dark] .journey-workspace #wakeThemis:hover{background:#445a3e!important}
html[data-theme=dark] .journey-workspace #wakeThemis .tg-mark{background:#dcdbd4}

@media (prefers-reduced-motion:reduce){html.theme-fade,html.theme-fade *{transition:none!important}}

/* Reader variables: some reader rules fall back to light-theme greens when these are unset */
html[data-theme=dark] #detail,html[data-theme=dark] .dd-preview{--spine-ink:var(--d-text);--spine-muted:var(--d-text3)}
html[data-theme=dark] #reader-panel-documents .dd-intro{color:var(--d-text2)!important}
html[data-theme=dark] #reader-panel-documents .dd-purpose{color:var(--d-text2)}
html[data-theme=dark] .dd-intro strong{color:var(--d-text)}
html[data-theme=dark] .dd-sheet .dd-outline-ref{color:var(--d-text3)}
html[data-theme=dark] .dd-sheet :is(h1,h2,h3,h4,p,b,strong,span){color:#e2e0d9}
html[data-theme=dark] body.debt-focus .rail-matter .context-label,html[data-theme=dark] .themis-workspace .context-label{color:var(--d-accent)!important}
html[data-theme=dark] .themis-workspace .footer .madeby{color:var(--d-text3)}
html[data-theme=dark] .themis-workspace .footer .madeby b{color:var(--d-accent)}

/* Controlled accent: selection and active states only */
html[data-theme=dark] body.debt-focus #rail li.step.selected,html[data-theme=dark] #rail li.step.selected{background:var(--d-selected)!important}
html[data-theme=dark] body.debt-focus .debt-option:has(input:checked){background:var(--d-selected)}
html[data-theme=dark] #view_precedents .lib-item.is-on{background:var(--d-selected)}
html[data-theme=dark] #view_precedents .lib-item.is-on .lib-item-title{color:var(--d-accent-strong)}
html[data-theme=dark] .workspace-audience button.selected,html[data-theme=dark] .workspace-audience button[aria-pressed=true]{background:var(--d-accent-mid);color:var(--d-text)}
html[data-theme=dark] .reader-tabs button[aria-selected=true]{color:var(--d-text)}
html[data-theme=dark] .reader-tabs button[aria-selected=true]::after,html[data-theme=dark] .reader-tabs button[aria-selected=true]{border-bottom-color:var(--d-accent)}

/* Labels still using light colours */
html[data-theme=dark] details#configuration>summary,html[data-theme=dark] .configuration>summary{color:var(--d-text2)}
html[data-theme=dark] #detail .reader-meta span{background:var(--d-hover);color:var(--d-text2)}

/* Fill the viewport so the page finish never ends above the fold */
body.themis-workspace{min-height:100vh}

/* Light borders and buttons without dark rules */
html[data-theme=dark] #detail details.disclaimer,html[data-theme=dark] .video-transcript{border-top-color:var(--d-line)}
html[data-theme=dark] .dd-preview{border-color:var(--d-line2);background:var(--d-overlay)}
html[data-theme=dark] .dd-preview header{border-bottom-color:var(--d-line)}
html[data-theme=dark] .profile-head{border-bottom-color:var(--d-line)}
html[data-theme=dark] .wsx-btn:not(.primary){background:var(--d-raised);border-color:var(--d-line2);color:var(--d-text2)}
html[data-theme=dark] .wsx-btn:not(.primary):hover{background:var(--d-hover);color:var(--d-text)}
html[data-theme=dark] .wsx-btn:disabled{background:transparent;border-color:var(--d-line);color:var(--d-disabled)}

/* Dialogs, forms and sheets */
html[data-theme=dark] .route-store-form label{color:var(--d-text2)}
html[data-theme=dark] :is(.route-store-form,.route-store-inline) :is(input,textarea,select),html[data-theme=dark] #flagText,html[data-theme=dark] #flagKind{background:var(--d-sunken);border-color:var(--d-input);color:var(--d-text)}
html[data-theme=dark] :is(.route-store-form,.route-store-inline) :is(input,textarea):focus{outline-color:var(--d-accent)}
html[data-theme=dark] .route-store-primary{border-color:var(--d-accent-fill);background:var(--d-accent-fill);color:var(--d-on-accent)}
html[data-theme=dark] .route-store-primary:hover{background:var(--d-accent-fill-hover);border-color:var(--d-accent-fill-hover)}
html[data-theme=dark] .route-store-cancel,html[data-theme=dark] .route-store-tools button{border-color:var(--d-line2);background:var(--d-raised);color:var(--d-text2)}
html[data-theme=dark] .route-store-cancel:hover,html[data-theme=dark] .route-store-tools button:hover{background:var(--d-hover);color:var(--d-text)}
html[data-theme=dark] .wsx-sheet{background:#1a1917;border-color:rgba(255,255,255,.1);color:#e2e0d9;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
html[data-theme=dark] .wsx-sheet,html[data-theme=dark] .wsx-sheet *{color:#e2e0d9!important}
html[data-theme=dark] .scrim,html[data-theme=dark] .detail-open .scrim,html[data-theme=dark] body.modal-open .scrim,html[data-theme=dark] .themis-workspace.detail-open #scrim{background:rgba(6,6,5,.62)}

/* Reader extras and the general route */
html[data-theme=dark] .themis-workspace .detail .close-detail{background:var(--d-hover);color:var(--d-text2)}
html[data-theme=dark] .themis-workspace .detail .close-detail:hover{background:var(--d-hover);color:var(--d-text)}
html[data-theme=dark] #readerReview{color:var(--d-warn)}
html[data-theme=dark] .journey-actions li>span{background:var(--d-raised);color:var(--d-text2)}
html[data-theme=dark] .journey-actions,html[data-theme=dark] .outcomes-disclosure{border-top-color:var(--d-line)}
html[data-theme=dark] .route-choice-indicator{border-color:var(--d-input)}
html[data-theme=dark] .route-choice-options button[aria-pressed=true] .route-choice-indicator{border-color:var(--d-accent);background:var(--d-surface)}
html[data-theme=dark] .spine-branch-symbol{color:var(--d-warn)}
html[data-theme=dark] .route-period .urgent{border-top-color:var(--d-line)}
html[data-theme=dark] .urgent{background:var(--d-danger-soft);border-color:#5a3a33}
html[data-theme=dark] .debt-rows dl>div,html[data-theme=dark] body.debt-focus .debt-chronology dl>div{border-left-color:var(--d-line2)}
html[data-theme=dark] .area-banner .area-badge,html[data-theme=dark] .ws-soon .area-badge{background:var(--d-accent-mid);color:var(--d-text)}
html[data-theme=dark] body.debt-focus .debt-option:hover:not(:has(input:checked)){background:var(--d-hover)}

/* Containers that take focus only programmatically (tabindex=-1) need no ring */
[tabindex="-1"]:focus{outline:none}

/* Chrome and headings join the page finish */
.route-main .route-heading{background-image:var(--tex-page)}
html[data-theme=dark] .route-main .route-heading,html[data-theme=dark] body.debt-focus .route-main .route-heading{background-color:var(--d-bg)!important;background-image:var(--tex-page)!important}
html[data-theme=dark] :is(.masthead,.workspace-toolbar){background-image:var(--tex-card)}

/* ---------- 5. Hierarchy and accent (third pass) ----------
   Three text levels, as in Claude's interface: main #eceae6, secondary #c5c3ba, muted #9a9890.
   Sage has four jobs only: primary actions, selection indicators, focus rings and the brand mark.
   Links read as text with a quiet sage underline and brighten on hover. */
html[data-theme=dark] .eyebrow,html[data-theme=dark] .wsx-eyebrow,html[data-theme=dark] .context-label,html[data-theme=dark] body.debt-focus .rail-matter .context-label,html[data-theme=dark] .themis-workspace .context-label,html[data-theme=dark] .debt-choice-kicker,html[data-theme=dark] .dialog-eyebrow{color:var(--d-eyebrow)!important}
html[data-theme=dark] .themis-workspace .detail-top .eyebrow{color:var(--d-text3)!important}
html[data-theme=dark] :is(.debt-choice-summary button,.debt-choice-help,.wsx-link,.debt-lib-link,.debt-source-link,.debt-source-bridge,#intakeBack,.intake-browse,.madeby b){color:var(--d-text2)!important;text-decoration-color:var(--d-accent-line)!important}
html[data-theme=dark] :is(.debt-choice-summary button,.debt-choice-help,.wsx-link,.debt-lib-link,.debt-source-link,.debt-source-bridge,#intakeBack,.intake-browse):hover{color:var(--d-text)!important;text-decoration-color:var(--d-accent)!important}
html[data-theme=dark] .prec-collections button[aria-selected=true] span{background:var(--d-hover-strong);color:var(--d-text2)}
html[data-theme=dark] #view_precedents .lib-item.is-on{background:var(--d-selected);box-shadow:inset 2px 0 0 var(--d-accent)}
html[data-theme=dark] #view_precedents .lib-item.is-on .lib-item-title{color:var(--d-text)!important}
html[data-theme=dark] #view_precedents .lib-item:hover:not(.is-on){background:var(--d-hover)}
html[data-theme=dark] .debt-locked .phase-toggle strong,html[data-theme=dark] .phase-collapsed.debt-locked .phase-toggle strong{color:var(--d-text3)!important}
html[data-theme=dark] .debt-locked .phase-toggle small{color:var(--d-disabled)!important}
html[data-theme=dark] .stage-summary{color:var(--d-text3)}
html[data-theme=dark] .reader-tabs button{color:var(--d-text3)}
html[data-theme=dark] .reader-tabs button:hover{color:var(--d-text2)}
html[data-theme=dark] .reader-tabs button[aria-selected=true]{color:var(--d-text)}
html[data-theme=dark] :is(#reader-panel-understand,#reader-panel-documents) :is(li,dd,p){color:var(--d-text)}
html[data-theme=dark] #reader-panel-understand ol li::marker,html[data-theme=dark] :is(.debt-reader-actions) li::before{color:var(--d-text3)}
html[data-theme=dark] .detail-summary{color:var(--d-text2)!important}
html[data-theme=dark] :is(.debt-choice-done,.wsx-btn,.route-store-primary,.next-step):disabled{opacity:1!important;background:var(--d-raised)!important;border-color:rgba(255,255,255,.085)!important;color:var(--d-disabled)!important;box-shadow:none!important;cursor:not-allowed}
html[data-theme=dark] #themisGuide,html[data-theme=dark] .journey-workspace #themisGuide{border-color:rgba(255,255,255,.13)!important}
html[data-theme=dark] #detail .prec-sheet{border-color:rgba(255,255,255,.1);box-shadow:none}
html[data-theme=dark] :is(.wsx-sheet,.dd-sheet) hr{border-color:rgba(255,255,255,.16)}
/* Search dropdown: the common questions block follows the dark surfaces */
html[data-theme=dark] .themis-workspace .search-results .ask-block{margin:8px;background:var(--d-raised);border-color:rgba(255,255,255,.085)}
html[data-theme=dark] .search-results .ask-head{color:var(--d-eyebrow);letter-spacing:.1em;font-weight:600}
html[data-theme=dark] .search-results .ask b{color:var(--d-text)}
html[data-theme=dark] .search-results .ask-steps button{background:transparent;border-color:rgba(255,255,255,.13);color:var(--d-text2)}
html[data-theme=dark] .search-results .ask-steps button:hover{background:var(--d-hover-strong);border-color:rgba(255,255,255,.2);color:var(--d-text)}

/* ---------- 6. Glass ----------
   The floating chrome — masthead, the Ask Themis dock, panels, dialogs and
   popovers — sits a little above the page, so it gets a touch of the same
   frosted glass Apple uses for chrome in that position: light blur, a little
   extra saturation, a slightly translucent surface. The grain and card
   texture are untouched (only background-color changes, never background),
   the effect stays light on purpose, and everything falls back to the
   existing solid surfaces where backdrop-filter isn't supported. */
:is(.themis-workspace .masthead,#wakeThemis,#themisActivity,#themisGuide,.themis-workspace .workspace-dialog,.journey-workspace .workspace-dialog.intake-dialog,.profile-menu,.themis-workspace .search-results,.dd-preview){backdrop-filter:blur(20px) saturate(1.4)!important;-webkit-backdrop-filter:blur(20px) saturate(1.4)!important}
.themis-workspace .masthead{background-color:#f8fbf3e0!important}
#wakeThemis,#themisActivity{background-color:#173d2de3!important}
#themisGuide{background-color:color-mix(in srgb,var(--tg-bg) 94%,transparent)!important;backdrop-filter:blur(16px) saturate(1.25)!important;-webkit-backdrop-filter:blur(16px) saturate(1.25)!important}
.themis-workspace .workspace-dialog{background-color:#fafcf6e6!important}
.journey-workspace .workspace-dialog.intake-dialog{background-color:#fafcf7e6!important}
.profile-menu{background-color:#fefff9e8!important}
.themis-workspace .search-results{background-color:#fbfdf7e6!important}
.dd-preview{background-color:color-mix(in srgb,var(--spine-surface,#fbfcf8) 90%,transparent)!important}

html[data-theme=dark] .themis-workspace .masthead{background-color:#1d1c1ae0!important}
html[data-theme=dark] .journey-workspace #wakeThemis{background-color:color-mix(in srgb,var(--d-accent-mid) 88%,transparent)!important}
html[data-theme=dark] #themisGuide{background-color:color-mix(in srgb,var(--tg-bg) 94%,transparent)!important}
html[data-theme=dark] .themis-workspace .workspace-dialog{background-color:#272624e6!important}
html[data-theme=dark] .profile-menu{background-color:#1d1c1ae6!important}
html[data-theme=dark] .search-results{background-color:color-mix(in srgb,var(--d-overlay) 90%,transparent)!important}
html[data-theme=dark] .dd-preview{background-color:color-mix(in srgb,var(--d-overlay) 90%,transparent)!important}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 :is(.themis-workspace .masthead,#wakeThemis,#themisActivity,#themisGuide,.themis-workspace .workspace-dialog,.journey-workspace .workspace-dialog.intake-dialog,.profile-menu,.themis-workspace .search-results,.dd-preview){backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 .themis-workspace .masthead{background-color:#f8fbf3!important}
 #wakeThemis,#themisActivity{background-color:#173d2d!important}
 #themisGuide{background-color:var(--tg-bg)!important}
 .themis-workspace .workspace-dialog{background-color:#fafcf6!important}
 .journey-workspace .workspace-dialog.intake-dialog{background-color:#fafcf7!important}
 .profile-menu{background-color:#fefff9!important}
 .themis-workspace .search-results{background-color:#fbfdf7!important}
 .dd-preview{background-color:var(--spine-surface,#fbfcf8)!important}
 html[data-theme=dark] .themis-workspace .masthead{background-color:#1d1c1a!important}
 html[data-theme=dark] .journey-workspace #wakeThemis{background-color:var(--d-accent-mid)!important}
 html[data-theme=dark] #themisGuide{background-color:var(--tg-bg)!important}
 html[data-theme=dark] .themis-workspace .workspace-dialog{background-color:#272624!important}
 html[data-theme=dark] .profile-menu{background-color:#1d1c1a!important}
 html[data-theme=dark] .search-results{background-color:var(--d-overlay)!important}
 html[data-theme=dark] .dd-preview{background-color:var(--d-overlay)!important}
}

/* ---------- 7. Contrast (light theme) ----------
   Quiet labels in the light theme sat between 2.2:1 and 4.5:1. These keep the same muted green family
   but reach WCAG 1.4.3 (4.5:1) on the page, cards and tinted panels. Disabled phase buttons are exempt and stay soft. */
html:not([data-theme=dark]) :is(.context-label,.profile-head small,.open-mark,.debt-flag,#matterSubtitle,.key-hint,.footer-links button,.madeby,.madeby b,.reader-navigation span,.tg-message-label,.search-category,.search-results .result small,.reader-meta span,.stage-summary,#tgContext){color:#596e50!important}
html:not([data-theme=dark]) :is(.dialog-eyebrow,.configuration summary span,.workspace-audience button){color:#4f6b3f!important}
html:not([data-theme=dark]) .workspace-audience button:is(.selected,[aria-pressed=true]){color:#294b30!important}
html:not([data-theme=dark]) .reader-navigation .next-step:not(:disabled){background:#4f6b3f!important;border-color:#4f6b3f!important;color:#fff!important}
html:not([data-theme=dark]) .reader-navigation .next-step:not(:disabled):hover{background:#3f5a31!important}
/* Precedents was hidden on phones by an old rule that hid the last tab */
.workspace-toolbar nav button[data-view="precedents"]{display:block!important}
/* Keep the floating Ask Themis button from covering the end of the route on phones */
@media(max-width:820px){.themis-workspace #rail{padding-bottom:88px}}
/* Search: a note when everyday words were translated into a step search */
.search-results .search-note{margin:0;padding:6px 16px 10px;font-size:12.5px;color:#596e50}
html[data-theme=dark] .search-results .search-note{color:var(--d-text3)}
.search-results .empty .text-link{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* Intake: the Continue button stays in view instead of sitting below the fold */
.intake-dialog .intake-continue{position:sticky;bottom:-2px;z-index:2;box-shadow:0 -14px 18px -6px #fafcf7}
html[data-theme=dark] .intake-dialog .intake-continue{box-shadow:0 -14px 18px -6px #272624}