/* chrome.css — shared site chrome for calculateddegens.com.
   Loaded by every static page (guard: site_scrub §3ab+). Features are
   inert unless chrome.js builds them on pages that carry their anchors:
   skip link + focus ring + reduced motion (everywhere), reading progress
   + "On this page" TOC (lessons / research dives), sitewide search,
   mobile tab bar, glossary definition cards (lessons / research). */

/* --- accessibility chrome (idea #72) --- */
.cd-skip{position:absolute;top:-80px;left:16px;z-index:400;background:#B39A6A;color:#141310;
  padding:12px 18px;font:600 14px/1.3 Instrument,Arial,sans-serif;letter-spacing:.02em;
  text-decoration:none;border-radius:2px}
.cd-skip:focus{top:12px}
:focus-visible{outline:2px solid #B39A6A;outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* --- reading progress (idea #68) --- */
.cd-progress{position:fixed;top:0;left:0;height:3px;width:0;background:#B39A6A;
  z-index:390;pointer-events:none}
@media print{.cd-progress,.cd-toc{display:none}}

/* --- "On this page" TOC (idea #68): top block, fixed rail on wide screens --- */
.cd-toc{border:1px solid rgba(179,154,106,.55);background:rgba(179,154,106,.07);
  padding:10px 22px 12px;margin:0 0 34px;border-radius:3px}
.cd-toc-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;min-height:44px;background:none;border:0;padding:6px 0;cursor:pointer;
  font:700 11px/1.3 Instrument,Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:#77603B;text-align:left}
.cd-toc-toggle .cd-toc-chev{font-size:14px;letter-spacing:0;transition:transform .2s cubic-bezier(.19,.61,.22,1)}
.cd-toc.cd-closed .cd-toc-chev{transform:rotate(-90deg)}
.cd-toc-list{list-style:none;margin:6px 0 6px;padding:0;columns:2;column-gap:38px}
.cd-toc.cd-closed .cd-toc-list{display:none}
.cd-toc-list li{break-inside:avoid;margin:0;padding:5px 0 5px 12px;
  border-left:2px solid transparent;font-size:14.5px;line-height:1.45}
.cd-toc-list a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:28px}
.cd-toc-list a:hover{color:#77603B;text-decoration:underline;text-underline-offset:4px}
.cd-toc-list li.cd-active{border-left-color:#B39A6A}
.cd-toc-list li.cd-active a{color:#77603B;font-weight:600}
@media (max-width:700px){.cd-toc-list{columns:1}}
body.cd-rail .cd-toc{position:fixed;top:104px;left:max(14px,calc(50% - 690px));width:210px;
  max-height:calc(100vh - 140px);overflow:auto;margin:0;z-index:60;background:rgba(251,246,233,.97)}
body.cd-rail .cd-toc-list{columns:1}
body.cd-rail .cd-toc-toggle{cursor:default}

/* --- sitewide search (idea #69) --- */
.cd-search-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;
  background:none;border:0;cursor:pointer;color:inherit;font:600 13px/1.2 Instrument,Arial,sans-serif;
  letter-spacing:.08em;text-transform:uppercase}
.cd-search-btn svg{flex:none}
.cd-search-btn:hover{color:#B39A6A}
.cd-search{position:fixed;inset:0;z-index:500;display:none}
.cd-search.cd-open{display:block}
.cd-search-backdrop{position:absolute;inset:0;background:rgba(10,10,12,.72)}
.cd-search-card{position:relative;max-width:660px;margin:9vh auto 0;background:#141417;color:#F4F0E7;
  border:1px solid rgba(179,154,106,.6);border-radius:4px;padding:20px 22px 14px;
  max-height:82vh;display:flex;flex-direction:column}
.cd-search-card label{font:700 11px/1.3 Instrument,Arial,sans-serif;letter-spacing:.18em;
  text-transform:uppercase;color:#B39A6A;display:block;margin-bottom:10px}
.cd-search-input{width:100%;background:#0C0C0E;border:1px solid rgba(244,240,231,.25);color:#F4F0E7;
  font:400 17px/1.4 Instrument,Arial,sans-serif;padding:13px 14px;border-radius:2px;min-height:48px}
.cd-search-input:focus{border-color:#B39A6A;outline:2px solid #B39A6A;outline-offset:1px}
.cd-search-results{overflow:auto;margin-top:8px}
.cd-search-group{font:700 10.5px/1.3 Instrument,Arial,sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:#A9A69C;margin:14px 0 4px}
.cd-search-results a{display:flex;align-items:center;min-height:44px;padding:8px 10px;color:#F4F0E7;
  text-decoration:none;font-size:15px;border-left:2px solid transparent}
.cd-search-results a:hover,.cd-search-results a.cd-current{background:rgba(179,154,106,.12);
  border-left-color:#B39A6A;text-decoration:none}
.cd-search-empty{color:#A9A69C;font-size:14.5px;padding:14px 10px}
.cd-search-hint{color:#A9A69C;font-size:12px;margin:10px 0 4px}
@media (max-width:700px){.cd-search-card{margin:0;max-height:100dvh;height:100dvh;border:0;border-radius:0}}

/* --- mobile bottom tab bar (idea #71): small screens only --- */
.cd-tabbar{display:none}
@media (max-width:700px){
  .cd-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:55;
    background:rgba(13,13,16,.97);border-top:1px solid rgba(179,154,106,.45);
    padding-bottom:env(safe-area-inset-bottom)}
  .cd-tabbar a{flex:1;display:flex;align-items:center;justify-content:center;min-height:56px;
    color:#A9A69C;text-decoration:none;font:600 11px/1.2 Instrument,Arial,sans-serif;
    letter-spacing:.14em;text-transform:uppercase;border-top:2px solid transparent;margin-top:-1px}
  .cd-tabbar a[aria-current="page"]{color:#B39A6A;border-top-color:#B39A6A}
  body.cd-tabbed{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}
@media print{.cd-tabbar,.cd-search{display:none}}

/* --- glossary definition cards (idea #70, pilot: lessons + research) --- */
.cd-term{border-bottom:1px dotted #77603B;cursor:pointer;color:inherit;white-space:nowrap}
.cd-term:hover,.cd-term:focus-visible{color:#77603B;border-bottom-style:solid}
.cd-card{position:fixed;z-index:450;width:min(340px,calc(100vw - 24px));background:#FFFDF6;
  color:#252723;border:1px solid rgba(179,154,106,.75);border-radius:3px;
  box-shadow:0 10px 34px rgba(38,32,18,.22);padding:16px 18px 10px;display:none}
.cd-card.cd-open{display:block}
.cd-card .cd-card-name{font-family:Editorial,Georgia,serif;font-size:21px;line-height:1.15;
  margin:0 30px 8px 0;color:#252723}
.cd-card .cd-card-def{font-size:14.5px;line-height:1.55;color:#3D3A31;margin:0 0 8px}
.cd-card .cd-card-link{display:inline-flex;align-items:center;min-height:44px;color:#77603B;
  font-size:13.5px;font-weight:600;text-decoration:none}
.cd-card .cd-card-link:hover{text-decoration:underline;text-underline-offset:4px}
.cd-card .cd-card-close{position:absolute;top:6px;right:6px;width:44px;height:44px;background:none;
  border:0;cursor:pointer;color:#77603B;font-size:19px;line-height:1}
@media print{.cd-card{display:none}}

/* --- behaviour-triggered subscribe bar (idea #76) ---
   Fixed overlay (no layout space reserved → zero CLS by construction),
   z 54: under the search overlay and definition cards, and native
   <dialog> elements ride the top layer above it. On phones it rests
   directly above the 56px tab bar (+ safe-area), never over it. */
.cd-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cd-subbar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:54;
  width:min(700px,calc(100% - 20px));display:flex;align-items:center;gap:14px;
  background:#141417;color:#F4F0E7;border:1px solid rgba(179,154,106,.65);border-radius:4px;
  padding:10px 12px 10px 18px;box-shadow:0 12px 34px rgba(10,8,4,.35)}
.cd-subbar-txt{margin:0;font-size:14px;line-height:1.45;flex:1;min-width:0}
.cd-subbar-txt strong{color:#B39A6A;font-weight:650}
.cd-subbar-form{display:flex;gap:8px;flex:none}
.cd-subbar-form input{background:#0C0C0E;border:1px solid rgba(244,240,231,.28);color:#F4F0E7;
  font:400 14.5px/1.3 Instrument,Arial,sans-serif;padding:10px 12px;border-radius:2px;
  min-height:44px;width:190px}
.cd-subbar-form input:focus{border-color:#B39A6A;outline:2px solid #B39A6A;outline-offset:1px}
.cd-subbar-form button{background:#B39A6A;border:1px solid #B39A6A;color:#171208;cursor:pointer;
  font:650 14px/1.2 Instrument,Arial,sans-serif;padding:10px 16px;border-radius:2px;min-height:44px}
.cd-subbar-form button:hover{background:#D9BE8C}
.cd-subbar-x{flex:none;width:44px;height:44px;background:none;border:0;cursor:pointer;
  color:#A9A69C;font-size:20px;line-height:1;padding:0}
.cd-subbar-x:hover{color:#F4F0E7}
@media (max-width:700px){
  .cd-subbar{bottom:calc(58px + env(safe-area-inset-bottom));flex-wrap:wrap;gap:8px;padding:12px 12px 12px 16px}
  .cd-subbar-txt{flex:1 1 calc(100% - 56px)}
  .cd-subbar-form{flex:1 1 100%}
  .cd-subbar-form input{flex:1;width:auto}
}
@media (prefers-reduced-motion: no-preference){
  .cd-subbar{opacity:0;transform:translate(-50%,14px);transition:opacity .38s cubic-bezier(.19,.61,.22,1),transform .38s cubic-bezier(.19,.61,.22,1)}
  .cd-subbar.cd-on{opacity:1;transform:translate(-50%,0)}
}
@media print{.cd-subbar{display:none}}

/* Partner label (site improvement #100, 2026-11-08): marks paid/partner placements at the point of the click */
.partner-tag{display:inline-block;vertical-align:middle;margin-left:7px;padding:1px 7px;border:1px solid #B39A6A;border-radius:999px;font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#B39A6A}

/* "Did you mean …?" email-typo suggestion (site improvement #113, 2026-11-11):
   offered under every Beehiiv subscribe form via chrome.js; the reader
   accepts the correction with the button — it is never auto-substituted */
.cd-mailfix{margin:10px 0 0;font-size:14.5px;line-height:1.5}
.cd-mailfix-btn{background:#B39A6A;border:1px solid #B39A6A;color:#171208;cursor:pointer;
  font:650 13.5px/1.2 Instrument,Arial,sans-serif;padding:8px 14px;border-radius:2px;min-height:36px;margin-left:6px}
.cd-mailfix-btn:hover{background:#D9BE8C}