/* TheCodexes shared design standard v1.0 — 19 October 2026 */
:root {
  --cx-theme: #0b4a3d;
  --cx-theme-rgb: 11,74,61;
  --cx-canvas: #f8f6f0;
  --cx-paper: #fffdf8;
  --cx-ink: #183b33;
  --cx-muted: #53685e;
  --cx-line: #d5dfd9;
  --cx-tint: #edf4ef;
  --cx-warning: #785719;
  --cx-danger: #993c32;
  --cx-ui: Manrope, Arial, sans-serif;
  --cx-display: 'Instrument Serif', Georgia, serif;
  --cx-reading: Lora, Georgia, serif;
  --cx-space-1: 4px;
  --cx-space-2: 8px;
  --cx-space-3: 12px;
  --cx-space-4: 16px;
  --cx-space-5: 24px;
  --cx-space-6: 32px;
  --cx-radius-control: 10px;
  --cx-radius-panel: 16px;
  --cx-radius-dialog: 22px;
  --cx-relief: -4px 6px 16px rgba(var(--cx-theme-rgb),.12);
  --cx-relief-raised: -6px 10px 24px rgba(var(--cx-theme-rgb),.19);
  --cx-hit: 44px;
  --cx-motion: 160ms;
  --cx-ease: cubic-bezier(.2,.8,.2,1);
  --cx-grid-size: 64px;
  --cx-footer-height: calc(32px + env(safe-area-inset-bottom,0px));
}
:root[data-cx-track="step1"], [data-cx-track="step1"] {
  --cx-theme:#0c2a4c; --cx-theme-rgb:12,42,76; --cx-tint:#edf1f6;
}
:root[data-theme="dark"] {
  --cx-canvas:#101b18; --cx-paper:#162720; --cx-ink:#edf4ee;
  --cx-muted:#b8cbc0; --cx-line:#3d5549; --cx-tint:#213e31;
}
@media (prefers-color-scheme:dark) {
  :root[data-theme="system"] {
    --cx-canvas:#101b18; --cx-paper:#162720; --cx-ink:#edf4ee;
    --cx-muted:#b8cbc0; --cx-line:#3d5549; --cx-tint:#213e31;
  }
}
@media (prefers-reduced-motion:reduce) { :root {--cx-motion:0ms} }

/* Stage two: spacious browse surfaces, quiet teaching hierarchy, existing media geometry. */
/* The Step 1 viewer must sit above the fixed shared header and footer. */
body.cx-study-standard[data-codex-family="step1"] #mb{z-index:1000}
html[data-codex-track=step1]{--cx-theme:#0c2a4c;--cx-theme-rgb:12,42,76;--cx-tint:#edf1f6}
body.cx-study-standard{--codex-surface:var(--cx-paper);--codex-relief:var(--cx-relief);background-color:var(--cx-canvas);background-image:linear-gradient(#f8f6f0b8,#f8f6f0b8),url('/assets/codex-hex.svg');background-size:auto,36.95px 64px}
body.cx-study-standard :is(.bar,.topbar){padding-inline:clamp(16px,3vw,48px);gap:20px}
body.cx-study-standard .brand .codex-wordmark{font:500 20px/1.2 var(--cx-ui);letter-spacing:-.6px;white-space:nowrap}
body.cx-study-standard .brand .plate-brand-name{font:500 20px/1.2 var(--cx-ui);letter-spacing:-.6px;white-space:nowrap}
body.cx-study-standard .brand .codex-brand-core{font-weight:800}
body.cx-study-standard .brand small{font-size:11px;letter-spacing:.06em}
body.cx-study-standard .bar>nav{gap:12px}
body.cx-study-standard :is(.codex-home,.codex-site-menu>summary){border-radius:var(--cx-radius-control);box-shadow:none}
body.cx-study-standard .codex-site-menu nav a{min-height:44px;display:flex;align-items:center}
body.cx-study-standard .codex-frame-foot{font-size:12px}
.cx-library-intro{max-width:1248px;margin:32px auto 24px;padding-inline:24px}
.cx-library-intro h1,body.cx-study-standard #try>.fc-h2{font:400 clamp(36px,4vw,52px)/1.1 var(--cx-display);margin:8px 0 12px;color:var(--cx-ink)}
.cx-eyebrow{font:700 11px/1.5 var(--cx-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--cx-theme);margin:0}
.cx-intro-copy{font:400 16px/1.65 var(--cx-ui);color:var(--cx-muted);margin:0}
.cx-library-about{margin-top:12px;color:var(--cx-muted);font:500 13px/1.6 var(--cx-ui)}
.cx-library-about>summary{cursor:pointer;min-height:44px;align-content:center;width:fit-content;padding:6px 0;color:var(--cx-theme)}
.cx-about-content,.cx-flash-about[open]>.fc-hero{padding:24px;border:1px solid var(--cx-line);border-radius:var(--cx-radius-panel);background:var(--cx-paper);margin-block:12px}
body.cx-study-standard .cx-library-about .hero{margin:0;padding:0;border:0;background:none}
body.cx-study-standard .cx-library-about :is(.hero-in,.hero>.wrap){display:block;padding:0;max-width:none}
body.cx-study-standard .cx-library-about .hero h1{font-size:30px;margin:0 0 16px}
body.cx-study-standard .cx-library-about .hero .stats{max-width:700px;margin-top:24px}
body.cx-study-standard #lib{padding-top:0;padding-bottom:32px;max-width:1248px}
body.cx-study-standard .codex-library-search{display:block!important;margin:0 0 18px;max-width:780px;position:relative}
body.cx-study-standard .codex-library-search label{display:block;font:600 13px/1.5 var(--cx-ui);margin-bottom:8px;color:var(--cx-ink)}
body.cx-study-standard .codex-library-search input{width:100%;min-height:52px;font-size:16px;border:1.5px solid #8d9f95;border-radius:10px;background:var(--cx-paper);padding:12px 44px 12px 16px;transition:border-color .15s,box-shadow .15s}
body.cx-study-standard .codex-library-search input:focus{border-color:var(--cx-theme);box-shadow:0 0 0 3px rgba(var(--cx-theme-rgb),.14);outline:none}
.codex-search-box-wrap{position:relative;display:block;width:100%}
.codex-search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:32px;height:32px;min-height:32px!important;border-radius:8px;border:0;background:transparent;color:var(--cx-muted);font:700 14px/1 var(--cx-ui);cursor:pointer;display:grid;place-items:center}
.codex-search-clear:hover{background:var(--cx-tint);color:var(--cx-ink)}
.codex-search-clear[hidden]{display:none!important}
.codex-search-suggestions{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:85;background:var(--cx-paper);border:1.5px solid var(--cx-theme);border-left-width:3px;border-bottom-width:3px;border-radius:14px;box-shadow:var(--cx-relief-raised);max-height:min(440px,68vh);overflow-y:auto;overscroll-behavior:contain;padding:6px}
.codex-search-suggestions[hidden]{display:none!important}
.codex-sug-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px 6px;border-bottom:1px solid var(--cx-line);margin-bottom:4px;font:700 10.5px/1.3 var(--cx-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--cx-theme)}
.codex-sug-hint{font:600 10px/1.2 var(--cx-ui);letter-spacing:0;text-transform:none;color:var(--cx-muted)}
.codex-sug-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;transition:background .12s}
.codex-sug-item:hover,.codex-sug-item.is-active{background:var(--cx-tint)}
.codex-sug-mod{flex:0 0 auto;font:700 10px/1.2 var(--cx-ui);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--cx-theme);color:#fff;white-space:nowrap}
.codex-sug-main{flex:1 1 auto;min-width:0}
.codex-sug-title{font:700 14px/1.32 var(--cx-ui);color:var(--cx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.codex-sug-syn{font:500 12.5px/1.3 var(--cx-ui);color:var(--cx-muted)}
.codex-sug-sub{font:400 12.5px/1.38 var(--cx-reading);color:var(--cx-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.codex-sug-mark{background:#d7efe5;color:var(--cx-theme);font-weight:800;padding:0 2px;border-radius:3px}
.codex-sug-sys{flex:0 0 auto;font:600 11px/1.2 var(--cx-ui);color:var(--cx-muted);background:var(--cx-canvas);border:1px solid var(--cx-line);padding:3px 7px;border-radius:99px;white-space:nowrap}
.codex-sug-open{flex:0 0 auto;min-height:30px!important;padding:4px 9px!important;border-radius:99px!important;border:1px solid var(--cx-theme)!important;background:var(--cx-paper)!important;color:var(--cx-theme)!important;font:700 11px/1 var(--cx-ui)!important;cursor:pointer;white-space:nowrap}
.codex-sug-open:hover{background:var(--cx-theme)!important;color:#fff!important}
.codex-sug-empty{padding:14px 12px;font:500 13.5px/1.45 var(--cx-ui);color:var(--cx-muted);text-align:center}
.codex-search-try{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:9px}
.codex-try-lbl{font:700 11px/1.3 var(--cx-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--cx-muted);margin-right:2px}
.codex-try-chip{min-height:28px!important;padding:4px 10px!important;border-radius:99px!important;border:1px solid var(--cx-line)!important;background:var(--cx-paper)!important;color:var(--cx-theme)!important;font:600 12px/1.2 var(--cx-ui)!important;cursor:pointer;transition:border-color .14s,background .14s}
.codex-try-chip:hover{border-color:var(--cx-theme)!important;background:var(--cx-tint)!important}
@media(max-width:640px){.codex-sug-sys,.codex-sug-hint{display:none}}
body.cx-study-standard #lib>.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-bottom:24px;position:static;padding:8px 0 0;border-bottom:0;background:transparent}
body.cx-study-standard #lib>.rule{display:none}
.cx-library-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0}
.cx-library-actions #count{font:500 12px/1.5 var(--cx-ui);margin-left:8px}
.cx-library-filters{flex-basis:100%;border-bottom:1px solid var(--cx-line);margin:0 0 12px;padding-bottom:12px}
.cx-library-filters>summary{width:fit-content;cursor:pointer;min-height:44px;align-content:center;font:700 13px/1.5 var(--cx-ui);padding:10px 0;color:var(--cx-theme)}
body.cx-study-standard .cx-library-filters .filters{display:flex;flex-wrap:wrap;gap:16px;padding:16px 0 8px;margin:0}
body.cx-study-standard .cx-library-filters :is(.seg,.chips){margin:8px 0 0;gap:8px}
body.cx-study-standard .cx-library-filters .codex-filter-field{flex:1 1 160px;max-width:300px}
body.cx-study-standard .cx-library-actions :is(.quiz-toggle,.toggle,.random-btn){min-height:44px;margin:0;font:600 13px var(--cx-ui);background:var(--cx-paper);border:1px solid var(--cx-line);border-radius:10px;padding:10px 14px;color:var(--cx-theme)}
body.cx-study-standard :is(.grid,.tiles){gap:24px}
body.cx-study-standard :is(.card,.tile,.asset-card,.study-card,.fc-ch){border-radius:var(--cx-radius-panel);box-shadow:var(--cx-relief);border-right:1px solid var(--cx-line);border-left:2px solid var(--cx-theme);background:var(--cx-paper)}
body.cx-study-standard :is(.tile-body,.card-body){padding:20px}
body.cx-study-standard .tile-media img{object-fit:contain}
body.cx-study-standard .index-hero{padding-block:32px 24px}
body.cx-study-standard .index-hero h1{font-size:clamp(36px,4vw,52px)}
body.cx-study-standard .study-column{gap:20px}
body.cx-study-standard .study-column :is(.study-card,.takeaway){padding:24px;border-radius:16px}
body.cx-study-standard[data-codex-family] .study-column>section{border-left:2px solid var(--cx-theme);border-right:1px solid var(--cx-line);box-shadow:var(--cx-relief)}
body.cx-study-standard .study-column .study-link{box-shadow:none;border-right:0}
body.cx-study-standard #detail .info{background:var(--cx-paper);scroll-padding:24px}
body.cx-study-standard #detail .info :is(.exam,.look,.warn,.study-links,.lic){box-shadow:none;border-right:0;border-radius:12px}
body.cx-study-standard #detail .strip{background:#112b29;gap:10px;align-items:center}
body.cx-study-standard #detail .viewer-tools .navarrow{display:none}
.cx-image-position{color:#e8f2ee;font:600 11px/1.4 var(--cx-ui);padding:0 4px;white-space:nowrap;flex:none}
body.cx-study-standard :is(.fc-wrap,.fc-hero .in){max-width:1120px}
body.cx-study-standard #try{padding-top:32px}
body.cx-study-standard .fc-sub{max-width:65ch;font-size:16px;line-height:1.65}
body.cx-study-standard .fc-launch{grid-template-columns:1fr;padding:28px;border-left:2px solid var(--cx-theme);border-right:1px solid var(--cx-line);box-shadow:var(--cx-relief)}
body.cx-study-standard .fc-launch p{max-width:68ch}
body.cx-study-standard .fc-launch .fc-cta{gap:12px;margin-top:24px}
body.cx-study-standard .cx-flash-about{margin-bottom:32px}
body.cx-study-standard .fc-hero{padding:24px 0;background:transparent}
body.cx-study-standard .fc-hero h1{font-size:36px}
body.cx-study-standard .fc-study-shell{border-radius:22px;box-shadow:var(--cx-relief-raised)}
body.cx-study-standard .fc-study-top{background:var(--cx-paper)}
body.cx-study-standard :is(.fc-lbl,.fc-kicker,.fc-side h4){font:700 11px/1.5 var(--cx-ui);letter-spacing:.07em}
body.cx-study-standard .fc-card{background-color:var(--cx-paper);border:1px solid var(--cx-line);border-left:2px solid var(--cx-theme);box-shadow:var(--cx-relief);border-radius:16px;padding:28px 32px}
body.cx-study-standard .fc-card .fc-back :is(.fc-box,.fc-why){box-shadow:none;border:0;border-radius:0;border-bottom:1px solid var(--cx-line);background:transparent;padding:20px 0;margin:0;line-height:1.7}
body.cx-study-standard .fc-card .fc-back .fc-ans{background:var(--cx-tint);border-radius:12px;padding:20px;margin:0 0 4px}
body.cx-study-standard .fc-card .fc-back .fc-watch{color:var(--cx-ink)}
body.cx-study-standard .fc-watch .fc-lbl{color:var(--cx-warning)}
body.cx-study-standard .fc-card .fc-link{box-shadow:none;border-right:1px solid var(--cx-line);border-radius:10px}
body.cx-study-standard .fc-rate button{border-radius:10px;box-shadow:none}
body.cx-study-standard[data-codex-family] :is(.fc-card,.fc-card:focus-within,.asset,.fc-tile,.fc-tile:focus-visible){border-right:1px solid var(--cx-line);box-shadow:var(--cx-relief)}
body.cx-study-standard[data-codex-family] .fc-tile{box-shadow:none;border-radius:10px}
body.cx-study-standard .asset-info,body.cx-study-standard .asset-info details{border-right:0;box-shadow:none}
body.cx-study-standard #detail .info>:is(.exam,.look,.watch,.note,.related,.companions,.credit){border:1px solid var(--cx-line);border-left:2px solid var(--cx-theme);border-radius:12px;box-shadow:var(--cx-relief);padding:20px}
body.cx-study-standard #detail .info .companions :is(a,.comp-link,.comp){box-shadow:none;border-right:1px solid var(--cx-line)}
body.cx-study-standard #detail .viewer>.note{border-right:1px solid #dfd6bd;border-left:2px solid var(--cx-warning);box-shadow:none}
body.cx-study-standard .md .side :is(.box,.sec,.sc){border-right:1px solid var(--cx-line);border-left:2px solid var(--cx-theme);box-shadow:var(--cx-relief)}
@media(min-width:1001px) and (min-height:601px){
 body.cx-study-standard dialog#detail{height:calc(100svh - 32px);max-height:calc(100svh - 32px)}
 body.cx-study-standard #detail .dgrid{height:100%;max-height:100%;grid-template-rows:minmax(0,1fr);align-items:stretch}
 body.cx-study-standard #detail .viewer{height:100%;min-height:0}
 body.cx-study-standard #detail .stage{height:auto;min-height:0;flex:1 1 0}
 body.cx-study-standard #detail .info{height:100%;align-self:stretch}
 body.cx-study-standard #detail .viewer-tools{flex-wrap:nowrap;gap:12px;padding:12px 16px}
 body.cx-study-standard #detail .viewer-tools>.codex-plate-nav{flex:1 1 auto;flex-wrap:nowrap;justify-content:flex-end;padding:0;border:0;gap:12px}
 body.cx-study-standard #detail .viewer-tools .codex-touch-hint{display:none}
 body.cx-study-standard #detail .viewer-tools .navarrow{display:none}
}
@media(max-width:700px){
 body.cx-study-standard :is(.bar,.topbar){gap:12px;padding-inline:16px}
 body.cx-study-standard .bar>nav{gap:8px;justify-content:flex-start}
 body.cx-study-standard .brand small{display:none}
 body.cx-study-standard .bar .codex-home{padding-inline:10px;font-size:12px}
 .cx-library-intro{margin-top:24px;padding-inline:18px;margin-bottom:16px}
 .cx-library-intro h1{font-size:38px}
 .cx-intro-copy{font-size:15px}
 .cx-library-actions{gap:8px}.cx-library-actions #count{flex-basis:100%;margin:0}
 body.cx-study-standard .cx-library-filters .codex-filter-field{max-width:none;flex-basis:calc(50% - 16px)}
 body.cx-study-standard :is(.grid,.tiles){gap:20px}
 body.cx-study-standard .fc-launch{padding:22px}
 body.cx-study-standard .fc-card{padding:22px 20px}
 body.cx-study-standard .fc-study-shell{border-radius:0}
 body.cx-study-standard .fc-study-actions{padding-inline:16px}
 .cx-about-content{padding:18px}
}
@media(orientation:landscape) and (max-height:600px){
 body.cx-study-standard .fc-card{padding:18px 24px}
 body.cx-study-standard .fc-study-shell{border-radius:0}
 .cx-image-position{font-size:10px}
}
@media(prefers-reduced-motion:reduce){body.cx-study-standard *{scroll-behavior:auto!important}}
@media(max-width:360px){body.cx-study-standard[data-codex-family]>header .codex-home,body.cx-study-standard[data-codex-family] .top nav .codex-home{display:none!important}}