/* ============================ WRITING SAMPLES TAKEOVERS ============================
       The samples hub (/writing/samples) and the single-sample reader
       (/writing/samples/<id>) are full-page takeovers, but nothing was hiding the
       homepage underneath them — so both opened on the marketing hero with the
       real page ~45,000px further down. Same rule the practice arena and the
       toolkit already use. */
    body.wsamples-hub-mode > section:not(#writing-samples-hub),
    body.wsamples-hub-mode > #home,
    body.wsread-mode > section:not(#writing-sample-reader),
    body.wsread-mode > #home{ display:none !important; }

    /* The hub's own chrome. The sample CARDS were styled, but the shell around
       them (back link, hero, stat row, filter pills, grid) never was — invisible
       while the page rendered below the whole homepage. Tokens + shapes are the
       ones the toolkit hub uses, so the two writing pages read as one family. */
    .wsamples-hub{ position:relative; max-width:1180px; margin:0 auto; padding:30px 24px 90px; }

    .wsamples-back{
      display:inline-block; font-size:13px; font-weight:600; text-decoration:none;
      color:var(--muted); padding:6px 12px; border-radius:99px;
      border:1px solid transparent; transition:.18s;
    }
    .wsamples-back:hover{
      color:var(--text); background:var(--chip-bg); border-color:var(--card-border);
    }

    .wsamples-hero{ margin:16px 0 26px; }
    .wsamples-hero .eyebrow{
      font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
      color:var(--violet); margin:0 0 8px;
    }
    .wsamples-hero h2{
      font-family:'Bricolage Grotesque', 'Hanken Grotesk', 'Native Emoji', sans-serif;
      font-weight:800; font-size:clamp(30px,5.2vw,48px); line-height:1.04;
      letter-spacing:-.02em; margin:0 0 10px; color:var(--text);
    }
    .wsamples-hero .sub{
      color:var(--muted); font-size:15.5px; line-height:1.6; max-width:62ch; margin:0;
    }

    .wsamples-stats{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
    .wss-stat{
      display:inline-flex; align-items:baseline; gap:6px;
      padding:7px 14px; border-radius:99px; font-size:13px; color:var(--muted);
      background:var(--chip-bg); border:1px solid var(--card-border);
    }
    .wss-stat b{ font-size:15px; font-weight:800; color:var(--text); }
    .wss-stat-t1 b{ color:var(--cyan); }
    .wss-stat-t2 b{ color:var(--lime); }

    .wsamples-filters{ display:flex; flex-direction:column; gap:10px; margin:26px 0 14px; }
    .wsamples-filter-group{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
    .wsamples-filter-group.wsf-cat-hidden{ display:none; }
    .wsamples-filter-label{
      font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
      color:var(--muted); margin-right:4px; min-width:64px;
    }
    .wsamples-filter-group button{
      padding:7px 15px; border-radius:99px; cursor:pointer; font:inherit;
      font-size:13px; font-weight:700; color:var(--muted);
      background:var(--chip-bg); border:1px solid var(--card-border); transition:.16s;
    }
    .wsamples-filter-group button:hover{ color:var(--text); border-color:var(--card-border-hi); }
    .wsamples-filter-group button.active{
      /* --bg is the light PAGE colour, so in light theme this was near-white on
         #65a30d = 3.09:1. --on-lime is the accent's designated ink. */
      color:var(--on-lime); background:var(--lime); border-color:var(--lime);
    }

    .wsamples-count{ font-size:13px; color:var(--muted); margin-bottom:16px; }

    .wsamples-grid{
      display:grid; gap:18px;
      grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    }

    @media (max-width:640px){
      .wsamples-hub{ padding:22px 16px 70px; }
      .wsamples-filter-label{ min-width:100%; margin-bottom:-2px; }
      .wsamples-grid{ grid-template-columns:1fr; gap:14px; }
    }

    /* ---------------------------- SAMPLES READING VIEW ----------------------------
       Same writing-mode shell, but readable styling (not exam-strict) and a back link. */
    body.writing-mode.samples-view{
      background:#f4f1e8; overflow:auto;
    }
    body.writing-mode.samples-view .writing-section{ height:auto; min-height:100vh; min-height:100dvh; }
    .samples-reading{
      max-width:780px; margin:0 auto; padding:32px 24px 60px;
    }
    .samples-reading-back{
      display:inline-flex; align-items:center; gap:6px;
      padding:8px 14px; border-radius:8px;
      background:#fff; border:1px solid #b0b0a0; color:#1f4f8f;
      text-decoration:none; font-weight:600; font-size:13.5px;
      transition:background .12s;
    }
    .samples-reading-back:hover{ background:#fff8e0; }
    .samples-reading-header{
      margin:18px 0 22px; padding-bottom:16px; border-bottom:2px solid #b0b0a0;
    }
    .samples-reading-header h2{
      font-family:'Bricolage Grotesque', 'Verdana', 'Native Emoji', sans-serif;
      font-size:28px; color:#111; letter-spacing:-.5px;
    }
    .samples-original-task{
      background:#fff; border:1px solid #b0b0a0; border-radius:6px;
      padding:18px 22px; margin-bottom:24px;
    }
    .samples-original-task .task-label{
      font-size:12px; font-weight:800; letter-spacing:.7px;
      color:#1f4f8f; text-transform:uppercase; margin-bottom:8px;
    }
    .samples-original-task .task-title{ font-weight:700; color:#111; margin-bottom:8px; font-size:15px; }
    .samples-original-task .prompt{
      font-size:15px; line-height:1.75; color:#111; white-space:pre-wrap;
    }
    .samples-original-task img{
      max-width:100%; border:1px solid #b0b0a0; margin-top:14px; display:block; height:auto;
    }
    .sample-reading-card{
      background:#fff; border:1px solid #b0b0a0; border-radius:6px;
      padding:22px 26px; margin-bottom:14px;
    }
    .sample-reading-band{
      display:inline-block; font-family:'Bricolage Grotesque', 'Verdana', 'Native Emoji', sans-serif;
      font-size:13px; font-weight:800; padding:5px 13px; border-radius:99px;
      background:linear-gradient(135deg, #6ee7b7, #34d399); color:#14080d;
      margin-bottom:14px; letter-spacing:.4px;
    }
    .sample-reading-band.plus{ background:linear-gradient(135deg, #fbbf24, #f59e0b); }
    .sample-reading-essay{
      font-size:15px; line-height:1.85; color:#111;
      white-space:pre-wrap;
    }
    .sample-reading-notes{
      margin-top:18px; padding:14px 18px;
      background:#f0f6ff; border-left:4px solid #1f4f8f;
      font-size:14px; color:#333; line-height:1.65;
    }


    /* ========================================================================
       THE SAMPLE READER  (/writing/samples/<id>)
       The takeover class `wsread-mode` was defined at the top of this file, but
       the reader's own thirty-seven classes never had a single rule — so every
       "Read sample →" on the samples wall opened a page of raw stacked text
       with a full-bleed chart and no typography at all. Rendered by
       openWritingSample() in js/modules/writing/06-writing-samples.js.
       ====================================================================== */
    .wsread{ max-width:820px; margin:0 auto; padding:26px 20px 80px; }
    .wsread-back{
      display:inline-block; margin-bottom:22px; font-size:13px; font-weight:650;
      color:var(--muted); text-decoration:none; transition:color .18s;
    }
    .wsread-back:hover{ color:var(--text); }
    .wsread-loading{ padding:60px 0; text-align:center; color:var(--muted); font-size:14px; }

    .wsread-article{ display:block; }
    /* Sections arrive in sequence rather than all at once. `both` holds the
       from-state, so nothing is ever stranded invisible if the run never fires. */
    .wsread-in{ animation:wsreadIn .5s cubic-bezier(.22,.85,.3,1) both; }
    .wsread-prompt-block.wsread-in{ animation-delay:.07s; }
    @keyframes wsreadIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }

    /* ---- header ---- */
    .wsread-header{ padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid var(--hairline); }
    .wsread-crumbs{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
    .wsread-crumb-task, .wsread-crumb-cat{
      font-size:10.5px; font-weight:800; letter-spacing:.06em; padding:4px 10px; border-radius:999px;
    }
    .wsread-crumb-task{
      color:#bfe3ff; background:color-mix(in srgb,#4aa3ff 20%,transparent);
      border:1px solid color-mix(in srgb,#4aa3ff 38%,transparent);
    }
    .wsread-crumb-task.t2{
      color:#e2d5ff; background:color-mix(in srgb,var(--violet) 24%,transparent);
      border-color:color-mix(in srgb,var(--violet) 44%,transparent);
    }
    .wsread-crumb-cat{
      color:var(--muted); background:var(--chip-bg); border:1px solid var(--hairline);
    }
    .wsread-header h1{
      font-family:'Bricolage Grotesque','Native Emoji',sans-serif; font-weight:800;
      font-size:clamp(24px,3.2vw,36px); line-height:1.15; letter-spacing:-1px;
      text-align:left; margin:0;
    }
    .wsread-meta{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:16px; }
    .wsread-band{
      display:inline-flex; align-items:baseline; gap:5px; padding:5px 12px; border-radius:999px;
      background:color-mix(in srgb,var(--lime) 15%,transparent);
      border:1px solid color-mix(in srgb,var(--lime) 40%,transparent);
    }
    .wsread-band-n{ font-size:16px; font-weight:800; color:var(--lime); font-variant-numeric:tabular-nums; }
    .wsread-band-l{ font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
    .wsread-meta-i{ font-size:12.5px; color:var(--muted); }

    /* ---- shared section shape ---- */
    .wsread-eyebrow{
      font-size:10.5px; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
      color:var(--muted); margin-bottom:12px;
    }
    .wsread-prompt-block, .wsread-essay-block,
    .wsread-plan-block, .wsread-analysis-block, .wsread-notes-block,
    .wsread-lexis-block{ margin-bottom:30px; }

    /* ---- the task ---- */
    .wsread-chart-wrap{
      border-radius:14px; overflow:hidden; background:#fff; margin-bottom:14px;
      border:1px solid var(--hairline);
    }
    /* contain, never cover: a cropped chart is a different question. */
    .wsread-chart{ display:block; width:100%; height:auto; max-height:460px; object-fit:contain; }
    .wsread-prompt{
      font-size:14.5px; line-height:1.7; color:var(--muted);
      padding:14px 16px; border-radius:12px;
      background:var(--card-bg-soft); border:1px solid var(--card-border);
    }
    .wsread-prompt-t2 .wsread-prompt{ font-size:15.5px; color:var(--text); }

    /* ---- the essay: the thing you came to read ---- */
    .wsread-essay{ font-size:16.5px; line-height:1.95; }
    .wsread-essay p + p{ margin-top:17px; }

    /* ---- how it was planned ---- */
    .wsread-plan-block .wsread-plan{ display:grid; gap:10px; }
    .wsread-plan-step{
      display:flex; gap:12px; align-items:flex-start;
      padding:13px 15px; border-radius:13px;
      background:var(--card-bg-soft); border:1px solid var(--card-border);
    }
    .wsread-plan-n{
      flex:none; width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
      font-size:11.5px; font-weight:800; color:var(--on-lime);
      background:linear-gradient(140deg,var(--lime),color-mix(in srgb,var(--lime) 55%,var(--cyan)));
    }
    .wsread-plan-head{ display:block; font-size:13.5px; font-weight:750; }
    .wsread-plan-body{ display:block; font-size:13px; color:var(--muted); line-height:1.6; margin-top:4px; }
    .wsread-plan-chain{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
    .wsread-plan-arrow{ color:var(--muted); opacity:.5; font-weight:800; }

    /* ---- why it scores ---- */
    .wsread-analysis{ display:grid; gap:11px; }
    .wsread-criterion{
      padding:14px 16px; border-radius:13px;
      background:var(--card-bg-soft); border:1px solid var(--card-border);
    }
    .wsread-crit-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .wsread-crit-name{ font-size:13.5px; font-weight:750; }
    .wsread-crit-band{
      flex:none; font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px;
      color:var(--lime); background:color-mix(in srgb,var(--lime) 13%,transparent);
      border:1px solid color-mix(in srgb,var(--lime) 32%,transparent);
      font-variant-numeric:tabular-nums;
    }
    .wsread-crit-notes{ list-style:none; margin-top:9px; display:grid; gap:6px; }
    /* the <li>s carry no class of their own — style them alongside .wsread-crit-note
       or every per-criterion bullet renders as flat, bulletless body text. */
    .wsread-crit-note, .wsread-crit-notes li{
      position:relative; padding-left:18px; font-size:13px; color:var(--muted); line-height:1.6;
    }
    .wsread-crit-note::before, .wsread-crit-notes li::before{
      content:'·'; position:absolute; left:6px; color:var(--lime); font-weight:800;
    }
    .wsread-notes{ font-size:14px; line-height:1.75; color:var(--muted); }

    /* ---- language breakdown: the phrases worth stealing ---- */
    .wsread-lexis{ display:grid; gap:10px; }
    .wsread-lex{
      display:flex; gap:12px; align-items:flex-start;
      padding:13px 15px; border-radius:13px;
      background:var(--card-bg-soft); border:1px solid var(--card-border);
    }
    /* min-width:0 — without it a long phrase refuses to wrap inside the flex row */
    .wsread-lex-body{ display:grid; gap:4px; min-width:0; flex:1; }
    .wsread-lex-n{
      flex:none;
      width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
      font-size:11.5px; font-weight:800; color:var(--on-lime);
      background:linear-gradient(140deg,var(--cyan),color-mix(in srgb,var(--cyan) 55%,var(--lime)));
      font-variant-numeric:tabular-nums;
    }
    .wsread-lex-phrase{ font-size:14px; font-weight:750; line-height:1.45; }
    .wsread-lex-def{ font-size:13px; color:var(--muted); line-height:1.6; }
    .wsread-lex-ex{
      position:relative; margin-top:3px; padding-left:11px;
      font-size:13px; font-style:italic; line-height:1.6;
      color:color-mix(in srgb,var(--text) 78%,transparent);
    }
    .wsread-lex-ex::before{
      content:''; position:absolute; left:0; top:.32em; bottom:.32em; width:2px; border-radius:2px;
      background:color-mix(in srgb,var(--cyan) 55%,transparent);
    }

    @media (max-width: 720px){
      .wsread{ padding:18px 14px 60px; }
      .wsread-essay{ font-size:15.5px; line-height:1.85; }
      .wsread-crit-head{ flex-wrap:wrap; }
      .wsread-lex{ gap:10px; padding:12px 13px; }
    }
    @media (prefers-reduced-motion: reduce){
      .wsread-in{ animation:none !important; }
      .wsread-back{ transition:none !important; }
    }