/* TheCodexes.com · Step 2 CK FlashCards · focus-mode page stylesheet (28 Oct 2026)
   One stylesheet for this page. It consolidates, in their original cascade order, the rules this page
   still used from /styles.css (tokens, base), flashcards/fc.css (page + player), codex-brand-system.css
   (two-tone product names), codex-ios.css (safe areas, touch scrolling) and codex-flashcards-ux.css
   (deck search, player actions). Rules for the retired header, product frame, bottom bar, other product
   families and the overrides from codex-consistency/codex-study-standard are resolved into the final
   values below instead of being shipped. The shared study shell CSS loads after this file.
   Type: Instrument Serif for headings, Inter for everything else. All text >= 13px. */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-latin-var_10_28_2026.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-latin-400_10_28_2026.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- tokens (from /styles.css, renamed) ---------- */
:root{
  --fc-theme:#0b4a3d;--fc-theme-d:#08382e;--fc-ink:#162b27;--fc-muted:#55675f;--fc-paper:#f8f6f0;--fc-sheet:#fffdf8;
  --fc-rule:#dfe4dc;--fc-rule-2:#c3cdc6;--fc-tint:#e9f4ef;--fc-amber:#7d4f0c;--fc-amber-bg:#fbf5e6;--fc-red:#9c2b23;
  --fc-relief:-4px 4px 0 rgba(22,43,39,.10);
  --fc-ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;--fc-serif:"Instrument Serif",Georgia,serif;
  --fc-gut:clamp(16px,4vw,48px);
  /* legacy names still read by inline markup generated in fc.js */
  --ink:var(--fc-ink);--slate:var(--fc-muted);--emerald:var(--fc-theme);--display:var(--fc-serif);--sans:var(--fc-ui);--serif:var(--fc-ui);
  --codex-brand-color:#0b4a3d;
  /* codex-ios.css */
  --codex-viewport-height:100vh;--codex-safe-bottom:env(safe-area-inset-bottom,0px)}
@supports(height:100dvh){:root{--codex-viewport-height:100dvh}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--fc-paper);color:var(--fc-ink);font:400 16px/1.6 var(--fc-ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--fc-theme);outline-offset:3px}
::selection{background:#c9f2e4;color:var(--fc-ink)}
.codex-skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 14px;border:1px solid var(--fc-rule-2);border-radius:10px;background:#fff;color:var(--fc-ink);font-size:14px;font-weight:600}
.codex-skip:focus{left:16px;top:calc(var(--tcx-head,0px) + 8px)}

/* ---------- brand (codex-brand-system.css) ---------- */
.codex-wordmark{white-space:nowrap;color:inherit}
.codex-wordmark .codex-brand-core,.cw-walk{color:var(--fc-theme);font-weight:700}
.cw-chart{color:inherit;font-weight:inherit}
.fc-btn.em .codex-brand-core,.fc-btn.em .cw-walk{color:#c9f2e4}
.fc-card .wm .codex-brand-core,.fc-card .wm .cw-walk{color:inherit;font-weight:inherit}
@media print{.codex-brand-core,.cw-walk{print-color-adjust:exact;-webkit-print-color-adjust:exact}}

/* ---------- landing ---------- */
.fc-page{max-width:1180px;margin:0 auto;padding:0 var(--fc-gut)}
.fc-intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,5vw,72px);align-items:end;padding:clamp(40px,6vw,72px) 0 clamp(36px,5vw,56px)}
.fc-intro h1{font:400 clamp(44px,4.6vw,60px)/1 var(--fc-serif);letter-spacing:-.01em;margin:0 0 18px;color:var(--fc-ink)}
.fc-lede{font-size:18px;line-height:1.55;color:var(--fc-muted);max-width:33em;margin:0 0 26px}
.fc-cta{display:flex;flex-wrap:wrap;gap:12px}
.fc-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border:1px solid transparent;border-radius:10px;font:600 15px/1.2 var(--fc-ui);text-decoration:none;cursor:pointer;transition:background-color .15s,border-color .15s,color .15s}
.fc-btn.em{background:var(--fc-theme);color:#fff}
.fc-btn.em:hover{background:var(--fc-theme-d)}
.fc-btn.line{background:var(--fc-sheet);color:var(--fc-theme);border-color:var(--fc-rule-2)}
.fc-btn.line:hover{border-color:var(--fc-theme)}
.fc-btn:disabled{opacity:.55;cursor:not-allowed}
.fc-count{display:inline-block;min-width:26px;padding:1px 8px;border-radius:999px;background:var(--fc-tint);color:var(--fc-theme);font-size:14px;text-align:center;font-variant-numeric:tabular-nums}
.fc-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--fc-rule)}
.fc-stats>div{padding:14px 0 16px;border-bottom:1px solid var(--fc-rule)}
.fc-stats>div:nth-child(even){padding-left:22px;border-left:1px solid var(--fc-rule)}
.fc-stats dt{font-size:14px;color:var(--fc-muted)}
.fc-stats dd{margin:2px 0 0;font:400 40px/1.05 var(--fc-serif);color:var(--fc-ink);font-variant-numeric:tabular-nums}

.fc-sec{padding:clamp(40px,6vw,64px) 0;border-top:1px solid var(--fc-rule)}
.fc-h2{font:400 clamp(34px,4vw,46px)/1.06 var(--fc-serif);color:var(--fc-ink);margin:0 0 8px}
.fc-sub{font-size:16px;line-height:1.6;color:var(--fc-muted);margin:0 0 24px;max-width:44em}

/* deck search (codex-flashcards-ux.css) */
.fc-deck-search{margin:0 0 24px;max-width:640px}
.fc-deck-search>label{display:block;font:600 14px/1.4 var(--fc-ui);color:var(--fc-ink);margin:0 0 8px}
.fc-deck-search>div{display:flex;align-items:center;gap:10px}
.fc-deck-search input{flex:1;min-width:0;min-height:48px;padding:10px 14px;border:1px solid #8b9d91;border-radius:10px;background:#fff;color:var(--fc-ink);font:400 16px var(--fc-ui)}
.fc-deck-search button{min-height:48px;padding:8px 16px;border:1px solid var(--fc-rule-2);border-radius:10px;background:var(--fc-sheet);color:var(--fc-theme);font:600 14px var(--fc-ui);cursor:pointer}
.fc-deck-search button[hidden]{display:none!important}
.fc-deck-search>p{font-size:14px;line-height:1.55;color:var(--fc-muted);margin:8px 0 0;min-height:1.55em}
.fc-topic-matches{font-size:14px;font-weight:600;color:var(--fc-theme);margin:10px 0 0}
.fc-deck-empty{grid-column:1/-1;padding:24px;border:1px solid var(--fc-rule);border-radius:14px;background:var(--fc-sheet)}
.fc-deck-empty h3{font:400 28px/1.2 var(--fc-serif);margin:0 0 8px}
.fc-deck-empty p{font-size:15px;margin:0;color:var(--fc-muted)}

/* chapter grid */
.fc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.fc-ch{background:var(--fc-sheet);border:1px solid var(--fc-rule);border-radius:14px;padding:18px 18px 16px;cursor:pointer;text-align:left;color:inherit;transition:border-color .15s}
.fc-ch:hover{border-color:var(--fc-theme)}
.fc-ch .n{font-size:13px;font-weight:600;color:var(--fc-theme)}
.fc-ch h3{font:600 17px/1.35 var(--fc-ui);margin:4px 0 10px;color:var(--fc-ink)}
.fc-ch .meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px;color:var(--fc-muted)}
.fc-ch .meta b{color:var(--fc-ink);font-weight:600;font-variant-numeric:tabular-nums}
.fc-lock{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:14px;font-weight:600;color:var(--fc-muted)}
.fc-lock svg{width:15px;height:15px;flex:none}
.fc-ch.open-ch{grid-column:1/-1;cursor:default;border-color:var(--fc-theme);box-shadow:var(--fc-relief)}
.fc-tl{margin-top:14px;border-top:1px solid var(--fc-rule);display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 24px}
.fc-tl>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--fc-rule);font-size:15px}
.fc-tl a{color:var(--fc-ink);text-decoration:none}
.fc-tl a:hover{text-decoration:underline}
.fc-tl>div>span{color:var(--fc-muted);white-space:nowrap;font-size:14px;font-variant-numeric:tabular-nums}
.fc-tl>div.hl{background:var(--fc-amber-bg)}
.fc-ch-unlock{margin-top:16px;display:flex;gap:10px;flex-wrap:wrap}

/* premium */
.fc-prem{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,4vw,56px);align-items:start}
.fc-feat ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:14px;font-size:16px;line-height:1.55}
.fc-feat li{position:relative;padding-left:30px}
.fc-feat li::before{content:"";position:absolute;left:4px;top:6px;width:7px;height:12px;border:solid var(--fc-theme);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fc-feat b{font-weight:600}
.fc-buy{background:var(--fc-sheet);border:1.5px solid var(--fc-theme);border-radius:14px;padding:28px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--fc-relief)}
.fc-buy h3{font:400 34px/1.08 var(--fc-serif);margin:0;color:var(--fc-ink)}
.fc-buy p{margin:0;color:var(--fc-muted)}
.fc-buy .fine{font-size:13px;line-height:1.55;color:var(--fc-muted)}

/* ---------- player (#studyModal) ---------- */
.fc-reviewing{overflow:hidden}
.fc-study-modal[hidden]{display:none!important}
.fc-study-modal{position:fixed;inset:0;z-index:70;background:rgba(11,30,25,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.fc-study-shell{width:min(980px,100%);height:min(860px,calc(var(--codex-viewport-height) - 48px));display:flex;flex-direction:column;background:var(--fc-paper);border-radius:20px;overflow:hidden}
.fc-study-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px 12px 24px;background:var(--fc-sheet);border-bottom:1px solid var(--fc-rule)}
.fc-study-top h2{font:400 26px/1.1 var(--fc-serif);margin:0;color:var(--fc-ink)}
.fc-study-top-right{display:flex;align-items:center;gap:16px}
.fc-session-line{font-size:13px;color:var(--fc-muted);text-align:right;font-variant-numeric:tabular-nums}
.fc-study-close{width:44px;height:44px;flex:none;display:grid;place-items:center;border:1px solid var(--fc-rule-2);border-radius:10px;background:var(--fc-sheet);color:var(--fc-ink);cursor:pointer}
.fc-study-close svg{width:18px;height:18px}
.fc-study-close:hover{border-color:var(--fc-theme)}
.fc-study-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding:16px;padding:16px 24px 24px}

.fc-review-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.fc-filter-toggle,.fc-tool-btn,.fc-help>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--fc-rule-2);border-radius:10px;background:var(--fc-sheet);color:var(--fc-ink);font:600 14px/1.2 var(--fc-ui);cursor:pointer;white-space:nowrap}
.fc-filter-toggle:hover,.fc-tool-btn:hover,.fc-help>summary:hover{border-color:var(--fc-theme)}
.fc-filter-toggle svg{width:16px;height:16px;flex:none;transition:transform .15s}
.fc-filter-toggle[aria-expanded="true"]{border-color:var(--fc-theme)}
.fc-filter-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.fc-filter-summary{font-weight:400;color:var(--fc-muted);overflow:hidden;text-overflow:ellipsis;max-width:280px}
.fc-card-tools{position:relative;margin-left:auto;display:flex;align-items:center;gap:8px}
.fc-tool-btn svg{width:16px;height:16px;flex:none}
#saveCard[aria-pressed="true"]{background:var(--fc-tint);border-color:var(--fc-theme);color:var(--fc-theme)}
#saveCard[hidden]{display:none}
.fc-help{position:static}
.fc-help>summary{list-style:none}
.fc-help>summary::-webkit-details-marker{display:none}
.fc-help[open]>summary{border-color:var(--fc-theme)}
.fc-help-pop{position:absolute;right:0;top:calc(100% + 6px);z-index:5;width:min(300px,calc(100vw - 32px));padding:14px 16px;background:var(--fc-sheet);border:1px solid var(--fc-rule);border-radius:14px;box-shadow:var(--fc-relief);font-size:14px;color:var(--fc-ink)}
.fc-keys{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center;margin:0}
.fc-keys dt{margin:0}.fc-keys dd{margin:0}
.fc-keys kbd{display:inline-block;min-width:30px;padding:1px 7px;border:1px solid var(--fc-rule-2);border-bottom-width:2px;border-radius:6px;background:#fff;font:600 13px/1.5 var(--fc-ui);text-align:center}
.fc-help-pop .fc-device-note{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--fc-rule);font-size:13px;color:var(--fc-muted)}

.fc-progress-row{display:flex;align-items:center;gap:12px;margin:0 0 14px}
#cardPosition{flex:none;font-size:14px;color:var(--fc-muted);font-variant-numeric:tabular-nums}
.fc-prog{flex:1;height:4px;background:#e3e7df;border-radius:99px;overflow:hidden}
.fc-prog i{display:block;height:100%;width:0;background:var(--fc-theme);transition:width .3s ease}

.fc-player{display:block}
.fc-side{display:none;margin:0 0 16px;padding:16px;background:var(--fc-sheet);border:1px solid var(--fc-rule);border-radius:14px}
.fc-study-scroll.filters-open .fc-side{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 16px;align-items:end}
.fc-field label{display:block;margin:0 0 6px;font:600 14px/1.3 var(--fc-ui);color:var(--fc-ink)}
.fc-side select{width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--fc-rule-2);border-radius:10px;background:#fff;color:var(--fc-ink);font:400 15px var(--fc-ui)}
.fc-side-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.fc-side-foot .fc-btn{min-height:44px;padding:8px 16px;font-size:14px}
.fc-small{font-size:14px;color:var(--fc-muted);font-variant-numeric:tabular-nums}
.fc-side-foot .fc-small{margin-left:auto}

.fc-card-wrap{min-width:0}
.fc-card{position:relative;min-height:320px;padding:28px 32px 30px;background:var(--fc-sheet);border:1px solid var(--fc-rule);border-radius:14px;box-shadow:var(--fc-relief);overflow:hidden;-webkit-user-select:none;user-select:none}
/* Protection watermark: present, about 3% ink, never texturing the reading area. */
.fc-card .wm{position:absolute;inset:-50%;pointer-events:none;opacity:.03;font:500 14px/3.6 var(--fc-ui);letter-spacing:.06em;color:var(--fc-ink);transform:rotate(-24deg);white-space:pre;overflow:hidden}
.fc-topic{margin:0 0 12px;font-size:14px;font-weight:500;line-height:1.45;color:var(--fc-muted)}
.fc-q{max-width:62ch;margin:0;font:400 21px/1.6 var(--fc-ui);color:var(--fc-ink)}
.fc-q:focus{outline:0}
.fc-q:focus-visible,.fc-ans h3:focus-visible{outline:2px solid var(--fc-theme);outline-offset:4px}
.fc-ans h3:focus{outline:0}
.fc-back{display:none;margin-top:24px;padding-top:20px;border-top:1px solid var(--fc-rule)}
.fc-card.open .fc-back{display:block;animation:fcin .2s ease}
@keyframes fcin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fc-lbl{margin:0 0 6px;font:600 14px/1.4 var(--fc-ui);color:var(--fc-muted)}
.fc-box{border-radius:12px;padding:14px 16px;margin:0 0 16px}
.fc-ans{background:var(--fc-tint)}
.fc-ans .fc-lbl{color:var(--fc-theme)}
.fc-ans .a{font:600 19px/1.5 var(--fc-ui);color:var(--fc-ink)}
.fc-why{max-width:68ch;margin:0 0 16px;font-size:16px;line-height:1.65}
.fc-watch{background:var(--fc-amber-bg);font-size:16px;line-height:1.6}
.fc-watch .fc-lbl{color:var(--fc-amber)}
.fc-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:8px}
.fc-tile{display:block;padding:12px 14px;background:#fff;border:1px solid var(--fc-rule);border-radius:12px;color:var(--fc-ink);text-decoration:none;font-size:14px;line-height:1.45}
.fc-tile:hover{border-color:var(--fc-theme)}
.fc-tile b{display:block;margin-bottom:2px;font-weight:600}
.fc-tile span{color:var(--fc-muted)}
.fc-tile.go b{color:var(--fc-theme)}
.fc-lic{margin-top:16px;font-size:13px;color:var(--fc-muted)}
.fc-kicker{margin:0 0 6px;font-size:14px;font-weight:600;color:var(--fc-theme)}
.fc-end{text-align:center;padding:36px 8px}
.fc-end h3{font:400 36px/1.1 var(--fc-serif);margin:4px 0 6px;color:var(--fc-ink)}

.fc-study-actions{flex:none;padding:12px 24px calc(14px + var(--codex-safe-bottom));background:var(--fc-sheet);border-top:1px solid var(--fc-rule)}
.fc-action-hint{margin:0 0 8px;text-align:center;font-size:13px;color:var(--fc-muted)}
.fc-front-actions[hidden],.fc-rate[hidden]{display:none!important}
.fc-reveal{width:100%;min-height:52px}
.fc-key-hint{font-weight:400;opacity:.85}
.fc-rate{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fc-rate button{display:grid;place-items:center;gap:2px;min-height:58px;padding:8px 4px;border:1px solid var(--fc-rule-2);border-radius:10px;background:#fff;font:600 15px/1.2 var(--fc-ui);cursor:pointer;transition:border-color .15s}
.fc-rate button small{font:500 13px/1.2 var(--fc-ui);color:var(--fc-muted)}
.fc-rate .r1{color:var(--fc-red)}.fc-rate .r2{color:var(--fc-amber)}.fc-rate .r3,.fc-rate .r4{color:var(--fc-theme)}
.fc-rate button:hover{border-color:currentColor}
.fc-rate button:focus-visible,.fc-study-close:focus-visible,.fc-tool-btn:focus-visible,.fc-filter-toggle:focus-visible,.fc-help>summary:focus-visible{outline:3px solid var(--fc-theme);outline-offset:2px}

/* ---------- licence dialog + toast ---------- */
.fc-modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(11,30,25,.55)}
.fc-modal.on{display:flex}
.fc-dlg{width:100%;max-width:440px;padding:24px;background:var(--fc-sheet);border-radius:14px;box-shadow:var(--fc-relief)}
.fc-dlg h3{font:400 30px/1.1 var(--fc-serif);margin:0 0 6px;color:var(--fc-ink)}
.fc-dlg input{width:100%;min-height:48px;margin:6px 0 10px;padding:12px 14px;border:1px solid var(--fc-rule-2);border-radius:10px;background:#fff;font:400 16px var(--fc-ui)}
.fc-dlg .err{min-height:20px;color:#b3261e;font-size:14px}
.fc-dlg-actions{display:flex;gap:10px}
.fc-toast{position:fixed;left:50%;bottom:22px;z-index:90;transform:translateX(-50%);padding:10px 16px;border-radius:10px;background:var(--fc-ink);color:#fff;font:600 14px var(--fc-ui);opacity:0;transition:opacity .2s;pointer-events:none}
.fc-toast.on{opacity:1}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .fc-intro,.fc-prem{grid-template-columns:1fr}
  .fc-intro{align-items:start}
  .fc-study-scroll.filters-open .fc-side{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fc-filter-summary{max-width:160px}
}
@media (max-width:600px),(orientation:landscape) and (max-height:600px){
  .fc-study-modal{padding:0}
  .fc-study-shell{width:100%;height:var(--codex-viewport-height);max-height:none;border-radius:0}
  .fc-study-top{padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left))}
  .fc-study-top h2{font-size:23px}
  .fc-session-line{display:none}
  .fc-study-scroll{padding:12px 16px 20px}
  .fc-filter-summary{display:none}
  .fc-card{min-height:260px;padding:20px 18px 22px}
  .fc-study-actions{padding:10px 16px calc(12px + var(--codex-safe-bottom))}
  .fc-rate{gap:6px}
  .fc-rate button{min-height:54px;font-size:14px}
}
@media (max-width:600px){
  .fc-intro h1{font-size:46px}
  .fc-lede{font-size:17px}
  .fc-cta .fc-btn{flex:1 1 auto}
  .fc-stats dd{font-size:34px}
  .fc-tl{grid-template-columns:minmax(0,1fr)}
  .fc-tl>div{display:block}
  .fc-tl a{display:block;min-height:32px;line-height:1.5}
  .fc-tl>div>span{display:block}
  .fc-q{font-size:18px;line-height:1.65}
  .fc-tiles{grid-template-columns:1fr}
  .fc-long{display:none}
  .fc-study-scroll.filters-open .fc-side{grid-template-columns:1fr 1fr;gap:12px}
  .fc-side>.fc-field:first-child{grid-column:1/-1}
  .fc-side-foot .fc-small{margin-left:0;flex-basis:100%}
  .fc-buy{padding:22px 20px}
}
@media (max-width:380px){
  .fc-study-scroll.filters-open .fc-side{grid-template-columns:1fr}
  .fc-filter-toggle,.fc-tool-btn,.fc-help>summary{padding:8px 11px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.fc-btn,.fc-rate button,.fc-filter-toggle svg,.fc-prog i{transition:none}.fc-card.open .fc-back{animation:none}}
@media print{body{display:none!important}}