/* ===========================================================================
   Peptide Carl — polish layer
   Dark mode, plus the interaction furniture a directory this size needs.
   Loaded after styles.css so it can override without touching the original.
   ======================================================================== */

/* ---------------------------------------------------------------- dark mode
   The site is token-driven (137 var() uses), so the palette is a swap.
   The catch: .topbar/.capture/.ft/.disclaim/.side-carl/.stackcard are ALREADY
   dark bands with light text on the light site. Left alone they dissolve into
   a dark body, so each gets an elevated surface + border below. -------- */
:root{
  --surface-raised:#fffdf7;
  --shadow-col:rgba(27,32,23,.13);
  --yt-bg:#0e120b;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14180f; --paper-2:#1a1f14; --card:#1c2118;
    --ink:#eef3ea;   --ink-2:#c4cdb8;   --ink-3:#8f9982;
    --line:#2c3324;  --line-2:#3c4632;
    /* lightened so they pass contrast as TEXT on a dark ground */
    --moss:#5aa87a; --ochre:#d9a04e; --clay:#d98a6a;
    --sky:#7fb0c9;  --plum:#bb8fa9;
    /* kept deep: these stay as BACKGROUNDS carrying white text */
    --moss-ink:#2f6b47;
    --shadow-sm:2px 2px 0 rgba(0,0,0,.45);
    --shadow-md:4px 4px 0 rgba(0,0,0,.5);
    --shadow-lg:7px 7px 0 rgba(0,0,0,.55);
    --pop:4px 4px 0 #000; --pop-sm:3px 3px 0 #000;
    --surface-raised:#20261a;
    --shadow-col:rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#14180f; --paper-2:#1a1f14; --card:#1c2118;
  --ink:#eef3ea;   --ink-2:#c4cdb8;   --ink-3:#8f9982;
  --line:#2c3324;  --line-2:#3c4632;
  --moss:#5aa87a; --ochre:#d9a04e; --clay:#d98a6a;
  --sky:#7fb0c9;  --plum:#bb8fa9;
  --moss-ink:#2f6b47;
  --shadow-sm:2px 2px 0 rgba(0,0,0,.45);
  --shadow-md:4px 4px 0 rgba(0,0,0,.5);
  --shadow-lg:7px 7px 0 rgba(0,0,0,.55);
  --pop:4px 4px 0 #000; --pop-sm:3px 3px 0 #000;
  --surface-raised:#20261a;
  --shadow-col:rgba(0,0,0,.5);
  color-scheme:dark;
}

/* the already-dark bands: raise them off the body so they stay legible */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .topbar,
  :root:not([data-theme="light"]) .capture,
  :root:not([data-theme="light"]) .stackcard,
  :root:not([data-theme="light"]) .side-carl,
  :root:not([data-theme="light"]) footer.ft,
  :root:not([data-theme="light"]) .disclaim{
    background:var(--surface-raised);
    border-color:var(--line-2);
  }
  :root:not([data-theme="light"]) .ft-bottom{border-top-color:var(--line-2)}
  :root:not([data-theme="light"]) .callout.warn{background:#2a2114;border-color:#5c4520;color:var(--ink)}
  :root:not([data-theme="light"]) .capture input{background:#12160e;color:var(--ink);border-color:var(--line-2)}
  :root:not([data-theme="light"]) img[src*="carl-"]{filter:brightness(.94)}
}
:root[data-theme="dark"] .topbar,
:root[data-theme="dark"] .capture,
:root[data-theme="dark"] .stackcard,
:root[data-theme="dark"] .side-carl,
:root[data-theme="dark"] footer.ft,
:root[data-theme="dark"] .disclaim{
  background:var(--surface-raised);
  border-color:var(--line-2);
}
:root[data-theme="dark"] .ft-bottom{border-top-color:var(--line-2)}
:root[data-theme="dark"] .callout.warn{background:#2a2114;border-color:#5c4520;color:var(--ink)}
:root[data-theme="dark"] .capture input{background:#12160e;color:var(--ink);border-color:var(--line-2)}
:root[data-theme="dark"] img[src*="carl-"]{filter:brightness(.94)}

/* 1 — theme toggle ------------------------------------------------------- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex:0 0 38px;padding:0;
  border:var(--bd);border-radius:11px;background:var(--card);
  color:var(--ink);cursor:pointer;line-height:1;
  transition:transform .12s ease,box-shadow .12s ease,background .2s ease;
}
.theme-toggle:hover{transform:translate(-1px,-1px);box-shadow:var(--pop-sm)}
.theme-toggle:active{transform:translate(0,0);box-shadow:none}
.theme-toggle svg{width:18px;height:18px;display:block}
.theme-toggle .i-sun{display:none}
[data-theme="dark"] .theme-toggle .i-sun{display:block}
[data-theme="dark"] .theme-toggle .i-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
}

/* 2 — cookie / storage notice ------------------------------------------- */
.ck-note{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:80;
  max-width:560px;margin:0 auto;display:none;gap:12px;align-items:center;
  background:var(--card);border:var(--bd-ink);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:13px 15px;
}
.ck-note.show{display:flex;animation:ck-up .32s cubic-bezier(.2,.8,.3,1) both}
@keyframes ck-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ck-note p{margin:0;font-size:.85rem;line-height:1.5;color:var(--ink-2)}
.ck-note button{
  flex:0 0 auto;border:var(--bd-ink);background:var(--moss-ink);color:#fff;
  border-radius:9px;padding:8px 14px;font:600 .82rem/1 var(--sans);cursor:pointer;
}
.ck-note button:hover{transform:translate(-1px,-1px)}

/* 4 — back to top -------------------------------------------------------- */
.to-top{
  position:fixed;right:18px;bottom:84px;z-index:70;
  width:44px;height:44px;border-radius:50%;
  border:var(--bd-ink);background:var(--card);color:var(--ink);
  display:grid;place-items:center;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;
  box-shadow:var(--shadow-md);
}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--moss-ink);color:#fff}

/* 5 — mobile menu -------------------------------------------------------- */
.nav-burger{
  display:none;width:40px;height:38px;flex:0 0 40px;padding:0;
  border:var(--bd);border-radius:11px;background:var(--card);
  color:var(--ink);cursor:pointer;
}
.nav-burger span{display:block;width:17px;height:2px;margin:3px auto;background:currentColor;
  border-radius:2px;transition:transform .22s ease,opacity .18s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:820px){
  .nav-burger{display:block}
  .nav-in{flex-wrap:wrap;row-gap:10px}
  .nav-links{
    display:none;order:9;flex-basis:100%;width:100%;
    flex-direction:column;align-items:stretch;gap:2px;
    padding:8px 0 4px;border-top:1px solid var(--line);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:11px 6px;border-radius:9px;font-size:.95rem}
  .nav-links a:hover{background:var(--paper-2)}
}

/* 6 — reveal on scroll --------------------------------------------------- */
.reveal{opacity:0;transform:translateY(14px)}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.3,1)}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal.in{opacity:1;transform:none;transition:none}
  .ck-note.show{animation:none}
}
.sk{background:linear-gradient(90deg,var(--paper-2) 25%,var(--line) 37%,var(--paper-2) 63%);
  background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:8px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}

/* 8 — scroll progress ---------------------------------------------------- */
.sprog{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--moss),var(--gold));
  transition:width .08s linear;pointer-events:none}

/* 9 — copy buttons ------------------------------------------------------- */
.copy-btn{
  border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);
  border-radius:7px;padding:3px 9px;font:600 .72rem/1.5 var(--sans);
  cursor:pointer;white-space:nowrap;transition:background .15s,color .15s;
}
.copy-btn:hover{background:var(--moss-ink);color:#fff;border-color:var(--moss-ink)}
.copy-btn.done{background:var(--moss-ink);color:#fff;border-color:var(--moss-ink)}
.dtable td{position:relative}
.dtable tr .copy-btn{opacity:0;transition:opacity .15s}
.dtable tr:hover .copy-btn,.dtable tr:focus-within .copy-btn{opacity:1}
@media (hover:none){.dtable tr .copy-btn{opacity:1}}

/* 12 — skip link --------------------------------------------------------- */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--moss-ink);color:#fff;padding:11px 18px;
  border-radius:0 0 10px 0;font:600 .9rem/1 var(--sans);text-decoration:none;
}
.skip-link:focus{left:0}

/* focus visibility, sitewide */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--gold);outline-offset:2px;border-radius:4px;
}

/* 15/16 — form states ---------------------------------------------------- */
.fmsg{display:none;margin-top:9px;padding:9px 12px;border-radius:9px;
  font:500 .84rem/1.45 var(--sans);border:1px solid transparent}
.fmsg.show{display:block}
.fmsg.ok{background:rgba(47,107,71,.16);border-color:#3f8a5c;color:#d7f0e0}
.fmsg.err{background:rgba(176,81,47,.16);border-color:#c26a48;color:#f6ddd0}
.is-loading{position:relative;color:transparent !important;pointer-events:none}
.is-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:spin .6s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
input[aria-invalid="true"]{border-color:var(--clay) !important;box-shadow:0 0 0 3px rgba(176,81,47,.18)}

/* 17 — modal ------------------------------------------------------------- */
.pc-back{position:fixed;inset:0;z-index:150;background:rgba(12,15,10,.6);
  display:none;place-items:center;padding:20px;backdrop-filter:blur(2px)}
.pc-back.show{display:grid}
.pc-modal{background:var(--card);border:var(--bd-ink);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);max-width:430px;width:100%;padding:22px 22px 18px;
  animation:md-in .24s cubic-bezier(.2,.8,.3,1) both}
@keyframes md-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.pc-modal h4{margin:0 0 8px;font:700 1.16rem/1.25 var(--serif);color:var(--ink)}
.pc-modal p{margin:0 0 16px;font-size:.9rem;line-height:1.6;color:var(--ink-2)}
.pc-row{display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.pc-row button{border-radius:10px;padding:9px 16px;font:600 .85rem/1 var(--sans);cursor:pointer;border:var(--bd-ink)}
.pc-ok{background:var(--moss-ink);color:#fff}
.pc-no{background:var(--card);color:var(--ink)}

/* 18 — last updated ------------------------------------------------------ */
.lastup{font-size:.78rem;color:var(--ink-3);margin:14px 0 0;letter-spacing:.01em}

/* video embed ------------------------------------------------------------ */
.ytwrap{position:relative;width:100%;aspect-ratio:16/9;margin:16px 0 10px;
  border:var(--bd);border-radius:var(--r);overflow:hidden;background:var(--yt-bg)}
.ytwrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.vidcred{font-size:.8rem;color:var(--ink-3);margin:0 0 24px;line-height:1.55}

/* 20 — floating contact -------------------------------------------------- */
.fab{
  position:fixed;right:18px;bottom:22px;z-index:70;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--moss-ink);color:#fff;text-decoration:none;
  border:var(--bd-ink);border-radius:99px;padding:11px 17px;
  font:700 .84rem/1 var(--sans);box-shadow:var(--shadow-md);
  transition:transform .15s ease,box-shadow .15s ease;
}
.fab:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg);color:#fff}
.fab svg{width:16px;height:16px}
@media (max-width:520px){.fab .fab-t{display:none}.fab{padding:13px;border-radius:50%}}

/* 10 — print ------------------------------------------------------------- */
@media print{
  @page{margin:16mm}
  html,body{background:#fff !important;color:#000 !important;font-size:11.5pt}
  .topbar,.nav,.fab,.to-top,.sprog,.ck-note,.pc-back,.capture,.theme-toggle,
  .nav-burger,.copy-btn,.ytwrap,.vidcred,.side-carl,.skip-link{display:none !important}
  a{color:#000 !important;text-decoration:none}
  /* a printed page loses its links unless the URL comes with it */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
  .reveal{opacity:1 !important;transform:none !important}
  h1,h2,h3{page-break-after:avoid;break-after:avoid}
  table,figure,.faq,.callout{page-break-inside:avoid;break-inside:avoid}
  details{display:block !important}
  details>div{display:block !important}
  footer.ft{background:#fff !important;color:#000 !important;border-top:1pt solid #999}
  .ft a,.ft h5,.ft .blurb,.ft .brand{color:#000 !important}
}

/* ===========================================================================
   Readability & rhythm
   Measured on the live pages before changing anything:
     - prose ran 800px at 16px = ~93 characters per line (comfortable is 60–80)
     - h2 carried margin-top:0, so every section collided with the paragraph
       above it and the page read as one undifferentiated slab
   ======================================================================== */
@media (min-width:901px){
  .guide-body{
    grid-template-columns:minmax(0,690px) 320px;
    gap:56px;
    justify-content:space-between;
  }
}

article.prose > p{font-size:16.5px;line-height:1.78;margin-bottom:1.05em}
article.prose li{line-height:1.72;margin-bottom:.5em}
article.prose ul,article.prose ol{margin-bottom:1.25em}

/* section separation — the single biggest legibility win on these pages */
article.prose h2{margin-top:2em;margin-bottom:.5em;scroll-margin-top:88px}
article.prose h2:first-child{margin-top:0}
article.prose h3{margin-top:1.5em;scroll-margin-top:88px}
article.prose > table,article.prose .dtable{margin:1.1em 0 1.6em}
article.prose .callout{margin:1.4em 0}

/* tables must never push the page sideways on a phone */
.dtable{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (min-width:641px){.dtable{display:table}}

/* the sidebar Carl card was 21% image and 79% empty box */
.guide-carl img{width:100%;height:auto;max-width:190px;display:block;margin:0 auto}

@media (max-width:900px){
  article.prose > p{font-size:16px}
  article.prose h2{margin-top:1.7em}
}

/* ---------------------------------------------------------------- contrast
   Measured with a WCAG walk over every text node, compositing translucent
   layers down to the page background. These are the groups that failed. */
:root{--on-light:#14180f}

@media (prefers-color-scheme: dark){

  /* Tokens that are TEXT in one place and BACKGROUND in another. Lightening
     --moss/--ink for dark-mode text silently broke every component that used
     them as a surface, so those get pinned back to a deep value here. */
  :root:not([data-theme="light"]) .btn-primary{background:var(--moss-ink);color:#fff}
  :root:not([data-theme="light"]) .btn-gold{color:var(--on-light)}
  :root:not([data-theme="light"]) .sec-num{color:var(--on-light)}
  :root:not([data-theme="light"]) .capture .kicker{color:var(--on-light)}
  :root:not([data-theme="light"]) .chip.active{background:#20261a;color:var(--gold)}
  :root:not([data-theme="light"]) .chip{border-color:var(--line-2)}
  :root:not([data-theme="light"]) .eyebrow{color:#14301f}
  /* .tag paints a per-category colour via --cc, and the mid-tone categories
     (ochre, clay) cannot carry light text. Darkening the plate uniformly fixes
     all seven without needing a per-category override. */
  :root:not([data-theme="light"]) .tag{box-shadow:inset 0 0 0 999px rgba(0,0,0,.30)}
  :root:not([data-theme="light"]) .ft-bottom span,:root:not([data-theme="light"]) .ft .blurb{color:#a4ae96}
  :root:not([data-theme="light"]) .lastup{color:#a4ae96}
}


  /* Tokens that are TEXT in one place and BACKGROUND in another. Lightening
     --moss/--ink for dark-mode text silently broke every component that used
     them as a surface, so those get pinned back to a deep value here. */
  :root[data-theme="dark"] .btn-primary{background:var(--moss-ink);color:#fff}
  :root[data-theme="dark"] .btn-gold{color:var(--on-light)}
  :root[data-theme="dark"] .sec-num{color:var(--on-light)}
  :root[data-theme="dark"] .capture .kicker{color:var(--on-light)}
  :root[data-theme="dark"] .chip.active{background:#20261a;color:var(--gold)}
  :root[data-theme="dark"] .chip{border-color:var(--line-2)}
  :root[data-theme="dark"] .eyebrow{color:#14301f}
  /* .tag paints a per-category colour via --cc, and the mid-tone categories
     (ochre, clay) cannot carry light text. Darkening the plate uniformly fixes
     all seven without needing a per-category override. */
  :root[data-theme="dark"] .tag{box-shadow:inset 0 0 0 999px rgba(0,0,0,.30)}
  :root[data-theme="dark"] .ft-bottom span,:root[data-theme="dark"] .ft .blurb{color:#a4ae96}
  :root[data-theme="dark"] .lastup{color:#a4ae96}


/* --------------------------------------------------------- contrast, part 2
   Remaining WCAG failures found by the audit, in both themes. */

/* .tag paints a per-category colour from --cc and failed in BOTH themes for
   opposite reasons: dark ink on plum (2.39) in light, light ink on ochre
   (2.99) in dark. One rule fixes all seven categories — darken the plate and
   always use white text, so the tag no longer depends on the theme at all. */
.tag{background:color-mix(in srgb, var(--cc) 74%, #000) !important;color:#fff !important}
@supports not (background: color-mix(in srgb, red 50%, #000)){
  .tag{background:var(--cc) !important;box-shadow:inset 0 0 0 999px rgba(0,0,0,.28)}
}

/* --ink-3 was #7a806c — 4.02 against the card and 3.53 against paper, so the
   49 .alias lines and the last-reviewed stamp all sat under 4.5. */
:root{--ink-3:#626857}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ink-3:#8f9982}}
:root[data-theme="dark"]{--ink-3:#8f9982}

/* .capture small sits on solid moss and read 3.9 */
.capture small{color:#dfe8d6}

/* ------------------------------------------------------------------ mobile
   Measured at 375px before writing any of this, and every value only ever
   RAISES the rendered size — a blanket floor written from source would have
   shrunk elements an earlier pass had already lifted. */
@media (max-width:640px){
  .tag{font-size:11.5px}
  .kicker{font-size:11.5px}
  .count{font-size:11.5px}
  .topbar{font-size:12px;line-height:1.5}
  .brand small{font-size:10.5px}

  /* Google's mobile-usability threshold is a 48px target; these were 38–40. */
  .theme-toggle{width:44px;height:44px;flex-basis:44px}
  .nav-burger{width:44px;height:44px;flex-basis:44px}
  .nav-links a{min-height:44px;display:flex;align-items:center}
  .ft a{min-height:40px;display:flex;align-items:center}
  .chip{padding:11px 16px}

  /* the FAB and back-to-top must not stack on top of each other */
  .to-top{bottom:92px;right:14px}
  .fab{right:14px;bottom:22px}
}

/* Last two, both marginal: .wikimeta read 4.49 against --paper-2 (it needs
   4.5) and .side-carl p read 4.25 on its dark band. */
.wikimeta{color:#5c624f}          /* light mode: 4.49 -> 4.95 on --paper-2 */
.side-carl p{color:#e2e9db}
/* ...and back to a light value in dark mode, or it is dark-on-dark (2.65). */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .wikimeta{color:#b8c2ab}}
:root[data-theme="dark"] .wikimeta{color:#b8c2ab}

/* ------------------------------------------------- tool-page contrast */
@media (prefers-color-scheme: dark){

  /* Same dual-role trap as .btn-primary, on the tool pages: these paint
     var(--moss) as a SURFACE and put white text on it, so the lightened
     text-mode --moss destroys them. Pin the surface back to the deep value. */
  :root:not([data-theme="light"]) .coa .ck{background:var(--moss-ink);color:#fff}
  :root:not([data-theme="light"]) .upill.active{background:var(--moss-ink);border-color:var(--moss-ink);color:#fff}
  :root:not([data-theme="light"]) .active{border-color:var(--moss-ink)}
  /* var(--ink) as a background — --ink is light in dark mode */
  :root:not([data-theme="light"]) .seg button.on{background:#20261a;color:var(--gold)}
  /* category colour used as TEXT on a dark card: the raw --cc hexes are deep */
  :root:not([data-theme="light"]) .scomp .go{color:var(--gold)}
  /* calculator's cream gradient panel keeps its light background in dark mode,
     so its text must stay dark rather than following --ink */
  :root:not([data-theme="light"]) .duration .dl{color:#8a5716}
  :root:not([data-theme="light"]) .duration .big,:root:not([data-theme="light"]) .duration b,:root:not([data-theme="light"]) .duration span,:root:not([data-theme="light"]) .duration div{color:#1b2017}
  :root:not([data-theme="light"]) .hi .rl{color:#d3e2d7}
}


  /* Same dual-role trap as .btn-primary, on the tool pages: these paint
     var(--moss) as a SURFACE and put white text on it, so the lightened
     text-mode --moss destroys them. Pin the surface back to the deep value. */
  :root[data-theme="dark"] .coa .ck{background:var(--moss-ink);color:#fff}
  :root[data-theme="dark"] .upill.active{background:var(--moss-ink);border-color:var(--moss-ink);color:#fff}
  :root[data-theme="dark"] .active{border-color:var(--moss-ink)}
  /* var(--ink) as a background — --ink is light in dark mode */
  :root[data-theme="dark"] .seg button.on{background:#20261a;color:var(--gold)}
  /* category colour used as TEXT on a dark card: the raw --cc hexes are deep */
  :root[data-theme="dark"] .scomp .go{color:var(--gold)}
  /* calculator's cream gradient panel keeps its light background in dark mode,
     so its text must stay dark rather than following --ink */
  :root[data-theme="dark"] .duration .dl{color:#8a5716}
  :root[data-theme="dark"] .duration .big,:root[data-theme="dark"] .duration b,:root[data-theme="dark"] .duration span,:root[data-theme="dark"] .duration div{color:#1b2017}
  :root[data-theme="dark"] .hi .rl{color:#d3e2d7}


.duration .dl{color:#8a5716}
.hi .rl{color:#d3e2d7}

/* --------------------------------------------------------- last contrast pass
   Two roots behind every remaining failure on the tool pages:
     --ink-3 was still marginal in light mode (.rl 3.90, .ol 3.68, .pick span 4.49)
     --ochre as TEXT on cream never passes (.duration .dl 2.73, .vs .x 2.92) */
:root{--ink-3:#5a604e}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ink-3:#8f9982}}
:root[data-theme="dark"]{--ink-3:#8f9982}

.duration .dl,.vs .x{color:#8a5716}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .vs .x{color:var(--ochre)}
}
:root[data-theme="dark"] .vs .x{color:var(--ochre)}

/* ------------------------------------------------------------- fieldnotes
   fieldnotes.html renders an A4 document preview (.page is 210x297mm). A
   printable document should look like paper in either theme, so it opts out
   of the dark palette entirely rather than inverting into a grey sheet. */
.page{
  --paper:#f4eede; --paper-2:#ece2cd; --card:#fffdf7;
  --ink:#1b2017;   --ink-2:#454e3c;   --ink-3:#5a604e;
  --line:#e2d7bf;  --line-2:#cdbf9e;
  --moss:#2f6b47;  --ochre:#c07d24;   --clay:#b0512f;
  --sky:#3a6d84;   --plum:#7a4a6b;
  background:var(--paper);
  color:var(--ink);
  color-scheme:light;
}

/* ------------------------------------------- hardcoded light panels */
@media (prefers-color-scheme: dark){

  /* Panels painted a hardcoded LIGHT colour stay light in dark mode, but their
     text tokens flip — so the text has to be pinned dark to match the panel. */
  :root:not([data-theme="light"]) .factbar,:root:not([data-theme="light"]) .factbar *{color:#3d4636}
  :root:not([data-theme="light"]) .factbar select,:root:not([data-theme="light"]) .factbar input{background:#fff;color:#1b2017;border-color:#b9cbd3}
  :root:not([data-theme="light"]) .duration,:root:not([data-theme="light"]) .duration *,
  :root:not([data-theme="light"]) .dur-out,:root:not([data-theme="light"]) .dur-out *,
  :root:not([data-theme="light"]) .duration .sub,:root:not([data-theme="light"]) .duration .sub *{color:#1b2017}
  :root:not([data-theme="light"]) .duration .dl{color:#8a5716}
  :root:not([data-theme="light"]) .dur-out .big{color:#2f6b47}
}


  /* Panels painted a hardcoded LIGHT colour stay light in dark mode, but their
     text tokens flip — so the text has to be pinned dark to match the panel. */
  :root[data-theme="dark"] .factbar,:root[data-theme="dark"] .factbar *{color:#3d4636}
  :root[data-theme="dark"] .factbar select,:root[data-theme="dark"] .factbar input{background:#fff;color:#1b2017;border-color:#b9cbd3}
  :root[data-theme="dark"] .duration,:root[data-theme="dark"] .duration *,
  :root[data-theme="dark"] .dur-out,:root[data-theme="dark"] .dur-out *,
  :root[data-theme="dark"] .duration .sub,:root[data-theme="dark"] .duration .sub *{color:#1b2017}
  :root[data-theme="dark"] .duration .dl{color:#8a5716}
  :root[data-theme="dark"] .dur-out .big{color:#2f6b47}


/* These two sit inside page-local <style> blocks that load after this file,
   so they win on source order at equal specificity. !important is the honest
   tool here rather than an escalating specificity war. */
.duration, .duration *{color:#1b2017 !important}
.duration .dl{color:#8a5716 !important}
.dur-out .big{color:#2f6b47 !important}
.ob.hi .ov, .ob.hi .ov *{color:#eaf4f9 !important}
.ob.hi .ol{color:#e4eff5 !important}