/* WalledCare Learn — editorial styles.
   Tokens are copied verbatim from app/static/home.html, which mirrors
   console/src/app.css (single source of truth: minivision/DESIGN.md).
   Day is the default; :root[data-theme="night"] is applied pre-paint by the
   inline script in base.html. */

:root{
  --r-sm:4px; --r-md:8px; --r-lg:12px;
  --sans:"Geist",system-ui,sans-serif; --mono:"Geist Mono",ui-monospace,monospace;
  --brand:#2BD4A8; --on-brand:#04130f;
}
:root,:root[data-theme="day"]{
  color-scheme:light;
  --bg:#F3F6F8; --surface:#FFFFFF; --surface2:#EAEEF2; --border:#D7DEE4;
  --text:#0F141A; --muted:#5B6770; --text-soft:#3C4650;
  --side-bg:#FFFFFF; --brand-ink:#0B7A62; --logo-chip:transparent;
  /* Two washes derived from the one brand colour — no second brand hue.
     --hero-wash is what a hero with no photograph is made of; --tint-bg is the
     ground under the honesty box. Both are defined here on the bare :root so
     the Day palette is complete before any night block touches it. */
  --hero-wash:rgba(43,212,168,.20); --tint-bg:rgba(43,212,168,.05);
}
:root[data-theme="night"]{
  color-scheme:dark;
  --bg:#0C0F12; --surface:#14191E; --surface2:#1B222A; --border:#28313A;
  --text:#E6EBEF; --muted:#8B97A0; --text-soft:#C7D0D7;
  --side-bg:#0F141A; --brand-ink:#5FE3C2; --logo-chip:#FFFFFF;
  --hero-wash:rgba(43,212,168,.13); --tint-bg:rgba(43,212,168,.07);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--text);
     line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;
     min-height:100vh;display:flex;flex-direction:column}
/* A short page (the 404, an empty hub) otherwise leaves the footer floating with
   the page background showing beneath it. */
main{flex:1 0 auto}
a{color:inherit}
::selection{background:rgba(43,212,168,.25)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3,h4{line-height:1.22;letter-spacing:-.01em}
img{max-width:100%;height:auto}
.muted{color:var(--muted)}

.btn{display:inline-block;font-weight:600;border-radius:var(--r-md);padding:10px 18px;
     cursor:pointer;border:1px solid transparent;font-size:14px;text-decoration:none}
.btn-primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--muted)}

/* ---- header (same recipe as home.html) ---- */
.topbar{position:sticky;top:0;z-index:50;background:var(--side-bg);border-bottom:1px solid var(--border)}
.topbar .in{display:flex;align-items:center;gap:12px;min-height:54px;padding:6px 24px;
            max-width:1120px;margin:0 auto}
.brand{display:flex;align-items:center;gap:9px;flex:none;font-weight:700;
       letter-spacing:-.02em;font-size:16px;text-decoration:none}
.brand .mark{width:26px;height:26px;border-radius:6px;object-fit:contain;
             background:var(--logo-chip);padding:1px;flex:none}
.brand small{display:block;font-weight:500;font-size:10px;color:var(--muted);
             margin-top:-3px;letter-spacing:.06em;text-transform:uppercase}
.mainnav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;justify-content:flex-end}
.nav{padding:7px 10px;border-radius:var(--r-md);color:var(--muted);font-weight:500;
     font-size:14px;white-space:nowrap;text-decoration:none}
.nav:hover{color:var(--text)}
.nav.on{color:var(--brand-ink);background:rgba(43,212,168,.12)}
@media(max-width:900px){
  .mainnav{overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}
  .topbar .in{gap:8px}
}
@media(max-width:560px){.brand small{display:none}}

.draftbar{background:#F5C542;color:#20180a;font-family:var(--mono);font-size:12.5px;
          padding:9px 24px;text-align:center;border-bottom:1px solid var(--border)}
.draftbar code{background:rgba(0,0,0,.12);border-radius:3px;padding:1px 4px}

/* ---- article shell ----
   Every page kind now opens on the hero band, so the prose column starts below
   it and carries only the argument. The rhythm down the page is: the answer,
   then the evidence, then alternating text and figures, then the honesty box,
   then the next step. Section spacing is deliberately larger than a blog's —
   the blocks are meant to read as separate screens, not as one scroll. */
main{padding:0 0 8px}
.prose{max-width:760px;padding-top:40px;padding-bottom:64px}
.prose h1{font-size:clamp(26px,4vw,36px);letter-spacing:-.02em;margin:6px 0 14px}
.prose h2{font-size:clamp(20px,2.6vw,24px);margin:34px 0 10px;padding-top:6px}
.prose h3{font-size:17.5px;margin:24px 0 8px}
.prose h4{font-size:15.5px;margin:18px 0 6px;color:var(--text-soft)}
.prose p{margin:0 0 14px;color:var(--text-soft)}
.prose ul,.prose ol{margin:0 0 16px 22px}
.prose li{margin:0 0 7px;color:var(--text-soft)}
.prose a{color:var(--brand-ink);text-decoration:underline;text-underline-offset:2px}
.prose a:hover{text-decoration-thickness:2px}
/* …except the CTA's buttons, which are buttons. */
.prose a.btn{text-decoration:none}
.prose a.btn-primary{color:var(--on-brand)}
.prose a.btn-ghost{color:var(--text)}
.prose hr{border:none;border-top:1px solid var(--border);margin:28px 0}
.prose blockquote{border-left:3px solid var(--brand);background:var(--surface);
  padding:12px 16px;margin:0 0 16px;border-radius:0 var(--r-md) var(--r-md) 0}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--surface2);
            border-radius:var(--r-sm);padding:1px 5px}
.prose pre{background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-md);padding:14px 16px;overflow-x:auto;margin:0 0 16px}
.prose pre code{background:none;padding:0}

.crumbs{font-size:13px;color:var(--muted);margin-bottom:6px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--text)}
.crumbs .sep{margin:0 7px;opacity:.55}

/* The page record — published, last reviewed, author, reviewer, next review.
   It is an E-E-A-T signal and the dates have to stay visible, but it is
   apparatus: it belongs at the foot with the sources, not between a worried
   reader and the first sentence. The byline in the hero carries the two facts
   a reader actually checks (how fresh, and by whom). */
.pagemeta{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);
  font-size:12px;color:var(--muted);border-top:1px solid var(--border);
  padding:16px 0 0;margin:44px 0 0}

.byline{font-family:var(--mono);font-size:12px;line-height:1.7;color:var(--muted);
  margin:18px 0 0;max-width:70ch}
.byline .sep{margin:0 8px;opacity:.5}
.byline time{color:var(--text-soft)}

/* The publisher disclosure. It stays above the fold on every comparison,
   category and vendor page — that is the point of it — but as a quiet note
   with one brand hairline, not a card competing with the headline. */
.disclosure{border-left:2px solid var(--brand);padding:1px 0 1px 12px;
  font-size:12.5px;line-height:1.6;color:var(--muted);margin:14px 0 0;max-width:64ch}
.disclosure a{color:var(--brand-ink)}

/* The opening answer: the rest of the plain answer whose first sentences are
   already in the hero. It is prose set larger, not a card — a bordered box here
   would be a second thing on the first screen fighting the deck. */
.answer{margin:0 0 44px;max-width:66ch}
.answer p{color:var(--text);font-size:18px;line-height:1.6;margin-bottom:14px}
.answer p:last-child{margin-bottom:0}
.answer strong{color:var(--brand-ink)}

.keyfacts{background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px 22px;margin:34px 0 0}
.keyfacts h2{font-size:14px;font-family:var(--mono);letter-spacing:.08em;
  text-transform:uppercase;color:var(--brand-ink);margin:0 0 12px;padding-top:0}
.keyfacts > :last-child{margin-bottom:0}
.keyfacts h2::before{display:none}
.keyfacts li{font-size:14.5px}

/* The honesty box — the same block, in the same place in the argument, as
   "What it isn't" on home.html: after the claims, before the next step. The
   heading is whatever the author wrote; the template never renames a limit. */
.limits{background:var(--tint-bg);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px 22px;margin:44px 0 0}
.limits h2{font-size:17.5px;margin:0 0 10px;padding-top:0;color:var(--text)}
.limits h2::before{display:none}
.limits h3{font-size:15.5px;margin:16px 0 6px}
.limits p,.limits li{color:var(--text-soft);font-size:15px}
.limits > :last-child{margin-bottom:0}

.fits{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px 22px;margin:44px 0 0}
.fits h2{font-size:19px;margin:0 0 10px;padding-top:0}
.fits h2::before{display:none}
.fits > :last-child{margin-bottom:0}

.sources{margin-top:44px;border-top:1px solid var(--border)}
.sources h2::before{display:none}
.sources li{font-size:14px;word-break:break-word}
.sources p{font-size:14px;word-break:break-word}

/* FAQ — same pattern as home.html */
.faq{margin-top:44px}
.faq h2::before{display:none}
.faq details{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:2px 18px;margin-bottom:10px}
.faq summary{font-weight:600;padding:13px 0;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brand-ink);font-size:18px}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);padding-bottom:6px;font-size:15px}

/* CTA — the closing next step. */
.cta{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:24px 26px;margin:44px 0 0}
.cta h2{font-size:19px;margin:0 0 8px;padding-top:0}
.cta h2::before{display:none}
.cta p{color:var(--muted);font-size:14.5px}
.cta p:last-child{margin:14px 0 0;display:flex;gap:10px;flex-wrap:wrap}

/* tables */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 18px}
table.cmp{width:100%;border-collapse:separate;border-spacing:0;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;font-size:14px}
table.cmp th,table.cmp td{padding:11px 13px;text-align:left;
  border-bottom:1px solid var(--border);vertical-align:top}
table.cmp thead th{background:var(--surface2);font-weight:600;white-space:nowrap}
table.cmp tr:last-child td,table.cmp tr:last-child th{border-bottom:none}
table.vendorfacts th{background:var(--surface2);width:34%;white-space:normal}
.vendorbox{margin-top:44px}
.vendorbox h2::before{display:none}
.unknown{color:var(--muted);font-style:italic}
@media(max-width:600px){table.cmp{min-width:520px}}

/* listings */
.listing{margin-top:44px}
.listing h2::before{display:none}
.listing .count{font-family:var(--mono);font-size:13px;color:var(--muted);
  background:var(--surface2);border-radius:var(--r-sm);padding:2px 7px;
  vertical-align:middle;margin-left:6px}
ul.cards{list-style:none;margin:16px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:720px){ul.cards{grid-template-columns:1fr}}
ul.cards li{margin:0}
ul.cards a{display:block;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:18px;height:100%;text-decoration:none}
ul.cards a:hover{border-color:var(--brand)}
ul.cards h3{font-size:16px;margin:0 0 6px;color:var(--text)}
ul.cards p{font-size:13.5px;color:var(--muted);margin:0 0 10px}
ul.cards .more{font-family:var(--mono);font-size:12px;color:var(--brand-ink)}
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  background:#F5C542;color:#20180a;border-radius:var(--r-sm);padding:2px 6px;margin-left:8px;
  vertical-align:middle;font-weight:600}

/* ---- hero band (every page kind) ----
   The first screen, and the only thing on it: the photograph when one has been
   staged, a headline naming the reader's concern, one or two sentences of plain
   answer, one clear next step. The byline and the disclosure follow as quiet
   lines. Nothing else is allowed in — the page record, the cross-links and the
   scaffolding sections that used to sit here now live further down or at the
   foot. */
.learnhero{background:var(--side-bg);border-bottom:1px solid var(--border);
  padding:44px 0 40px}
.learnhero .heroin{display:grid;gap:28px 40px;align-items:center}
.learnhero.withmedia .heroin{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
.learnhero .herotext{min-width:0}
.learnhero h1{font-size:clamp(28px,4.6vw,40px);max-width:22ch;margin:12px 0 14px}
.learnhero .crumbs{margin-bottom:10px}
.learnhero .lede{max-width:56ch;font-size:18px}

/* No photograph is the normal state today: 37 of them are still to be staged.
   A hero with none must look deliberate rather than empty, so it drops the
   second column entirely and becomes a tinted panel — one soft wash of the one
   brand colour, falling away from the top corner, over the same flat surface
   the header sits on. It is sized by the words, so there is no blank band and
   no stretched empty box waiting for a file. */
.learnhero:not(.withmedia){padding:56px 0 52px;
  background-image:radial-gradient(90% 130% at 96% -10%,
                                   var(--hero-wash), transparent 64%)}
/* The band runs the full width, but its words sit on the same 760px measure as
   the article below, so the headline and the first paragraph of the answer
   share one left edge instead of stepping sideways at the fold. */
.learnhero:not(.withmedia) .heroin{max-width:760px}
.learnhero:not(.withmedia) .herotext{max-width:74ch}
.learnhero:not(.withmedia) h1{font-size:clamp(30px,5.2vw,44px);max-width:24ch}
.learnhero:not(.withmedia) .lede{max-width:64ch}

/* The deck under an H1: one or two sentences, never a paragraph of body copy. */
.lede{font-size:17.5px;line-height:1.55;color:var(--text-soft);max-width:62ch;
  margin:0 0 6px}
.prose .lede{margin:0 0 16px}

/* One clear next step, and at most one quiet second. */
.herocta{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}

@media(max-width:860px){
  .learnhero.withmedia .heroin{grid-template-columns:1fr}
  .learnhero{padding:34px 0 30px}
  .learnhero:not(.withmedia){padding:38px 0 34px}
}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-ink);
  background:rgba(43,212,168,.12);border-radius:var(--r-sm);padding:4px 9px}

/* ---- photographs ----
   Every image the generator emits is inside a <figure>. The aspect-ratio is
   declared in CSS rather than left to the file, so the page reserves the space
   before the bytes arrive and nothing below it jumps when they do. Photographs
   are staged at 16:9 (see app/static/img/learn/README.md); object-fit keeps a
   file that is not exactly 16:9 filling the frame instead of letterboxing.
   A figure is min-width:0 so it can never push its grid column wider than the
   container. */
figure{margin:24px 0;max-width:100%;min-width:0}
/* Inside the band the figure IS the column, so it carries no margin of its
   own; as a lead figure inside an article it is a block in the flow and does. */
.learnhero figure.hero-media{margin:0}
figure img,figure .imgmissing{
  display:block;width:100%;height:auto;aspect-ratio:16/9;
  border-radius:var(--r-lg);border:1px solid var(--border);
  background:var(--surface2)}
figure img{object-fit:cover}
figcaption{margin-top:9px;font-size:13.5px;line-height:1.5;color:var(--muted);
  max-width:62ch}
figcaption a{color:var(--brand-ink)}
.prose figure.fig{margin:38px 0}
.prose figure.hero-media{margin:4px 0 24px}

/* Alternating text and figure, with real air between them.
   On a wide screen a body photograph steps out of the 760px text column to a
   1000px measure, so the page reads as text, picture, text rather than as one
   narrow ribbon of both. The caption stays at reading width under it. The
   break-out only starts at 1080px, where 1000px plus the page gutters always
   fits — the figure can never push the page sideways. */
@media(min-width:1080px){
  /* Only a figure standing on its own in the body breaks out. One inside a
     card — the honesty box, "Where WalledCare fits" — stays in its card. */
  .prose .bodytext > figure.fig{width:1000px;margin-left:50%;
    transform:translateX(-50%);margin-top:48px;margin-bottom:48px}
  .prose .bodytext > figure.fig figcaption{max-width:62ch}
}

/* ---- rhythm inside the body ----
   A body section gets a screenful of air above it and a short brand rule to
   mark where it starts, so a long editorial page still has the beat of a
   landing page. The structural blocks (key facts, listings, honesty box, FAQ,
   fits, CTA, sources) opt out: each of those is already a card. */
.bodytext h2{margin-top:52px;padding-top:0}
.bodytext h2::before{content:"";display:block;width:28px;height:2px;
  background:var(--brand);border-radius:2px;margin:0 0 14px;opacity:.85}
.bodytext > :first-child{margin-top:0}

/* Preview-only stand-in for a photograph that has not been taken yet
   (LEARN_IMAGE_PLACEHOLDERS=1). A shipping build omits the figure entirely,
   so this never reaches the live site — and it is never an <img>, so there is
   no broken-image icon either way. */
figure .imgmissing{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:7px;padding:18px;text-align:center;
  border-style:dashed;color:var(--muted)}
.imgmissing span{font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase}
.imgmissing code{font-family:var(--mono);font-size:12px;line-height:1.45;
  word-break:break-all;max-width:100%;color:var(--text-soft)}

/* footer */
footer{background:var(--side-bg);border-top:1px solid var(--border);padding:38px 0 26px;margin-top:20px}
.foot-cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:26px;
  border-bottom:1px solid var(--border);padding-bottom:22px;margin-bottom:18px}
@media(max-width:720px){.foot-cols{grid-template-columns:1fr}}
.foot-cols b{display:block;font-size:14px;margin-bottom:8px}
.foot-cols p{font-size:13.5px;margin:0 0 8px;max-width:46ch}
.foot-cols ul{list-style:none}
.foot-cols li{margin:0 0 6px;font-size:13.5px}
.foot-cols a{color:var(--muted);text-decoration:none}
.foot-cols a:hover{color:var(--text)}
.foot-cols p a{color:var(--brand-ink);text-decoration:underline}
.fineprint{color:var(--muted);font-size:12.5px;font-family:var(--mono);
  line-height:1.6;max-width:100ch}

/* A link whose target this build did not produce (an article still in draft).
   build_learn.py downgrades the anchor to this span so the page never ships a
   404 link; it reads as ordinary muted text with a "not yet published" hint. */
.unbuilt{color:var(--muted);border-bottom:1px dotted var(--border);cursor:default}