*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh}
.page-header h1{font-family:var(--font-display);font-size:1.6rem;display:flex;align-items:center;gap:.5rem}
.page-header p{color:var(--text-muted);font-size:.88rem;margin-top:.3rem}
.tool-body{max-width:760px; }

.filter-group{margin-bottom:1.25rem}
.filter-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin-bottom:.4rem;display:flex;align-items:center;gap:.35rem}
/* M268: gear moved off the page header (looked like a site-wide admin
   control there) to sit beside the Level filter it actually configures. */
.filter-label-with-action{justify-content:space-between}
.filter-label-text{display:flex;align-items:center;gap:.35rem}
.pill.active{border-color:var(--teal);color:var(--teal-text);background:var(--teal-soft)}
#categorySelect{width:100%;background:var(--surface);border:1.5px solid var(--border);color:var(--text);border-radius:var(--radius);padding:.5rem .65rem;font-size:.85rem;font-family:var(--font-body);cursor:pointer}

.passage-card{overflow:hidden;margin-bottom:1.25rem;}
.passage-img-wrap{height:180px;overflow:hidden;position:relative;background:var(--surface-2)}
.passage-img{width:100%;height:100%;object-fit:cover;display:block}
.passage-img-credit{position:absolute;bottom:0;right:0;padding:.15rem .4rem;font-size:.75rem;color:#fff;background:rgba(0,0,0,.75)}
.passage-body-pad{padding:1.75rem}
.passage-counter{display:flex;align-items:center;gap:.35rem;width:fit-content;margin-left:auto;margin-bottom:.65rem;font-size:.72rem;font-weight:600;color:var(--text-dim);background:var(--surface-2);border:1px solid var(--border);border-radius:99px;padding:.2rem .7rem}
.passage-title{font-family:var(--font-display);font-size:1.3rem;font-weight:700;margin-bottom:.75rem}
.passage-text{font-size:1rem;line-height:1.75;color:var(--text);margin-bottom:.5rem;white-space:pre-wrap}
.passage-meta{font-size:.72rem;color:var(--text-dim);margin-bottom:.75rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* Accent-character toolbar (M233) — same rule every other page with one
   (writing.css/journal.css/dictee.css) duplicates rather than sharing via
   shared.css; this page just never got its own copy, which is why it fell
   back to unstyled default <button> layout (no flex-wrap) and looked
   "super contracted" on narrow viewports. */
.accent-bar{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.5rem}
.accent-btn{padding:.3rem .65rem;font-size:.88rem;font-weight:600;color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s;font-family:var(--font-body)}
.accent-btn:hover{background:var(--teal);color:var(--teal-ink);border-color:var(--teal)}
.accent-btn:active{transform:scale(0.92)}

/* Read-and-listen (M58) */
.listen-btn{background:transparent;border:1.5px solid var(--teal);color:var(--teal-text);border-radius:99px;padding:.25rem .75rem;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:.3rem}
.listen-btn:hover{background:var(--teal-soft)}
.listen-btn.playing{border-color:var(--red);color:var(--red)}
.gloss-hint{font-size:.7rem;color:var(--text-dim)}

.question-block{margin-top:1.25rem;padding-top:1.25rem;border-top:1px solid var(--border)}
.question-block.retrying{background:var(--accent-soft);border-radius:var(--radius);padding:.75rem;margin-top:1.25rem}
.question-text{font-weight:600;margin-bottom:.6rem}
.choice-label{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:var(--radius);border:1.5px solid var(--border);margin-bottom:.4rem;cursor:pointer;font-size:.9rem;transition:border-color .15s}
.choice-label:hover{border-color:var(--teal)}
.choice-label input{accent-color:var(--teal)}
.choice-label.reveal-correct{border-color:var(--green);background:var(--green-soft)}
.choice-label.reveal-wrong{border-color:var(--red);background:var(--red-soft)}
.choice-explanation{font-size:.8rem;color:var(--text-muted);margin:.35rem 0 0 .2rem;font-style:italic}
.short-answer-input{width:100%;background:var(--surface-2);border:1.5px solid var(--border);color:var(--text);border-radius:var(--radius);padding:.6rem .75rem;font-size:.9rem;font-family:var(--font-body);resize:vertical;margin-bottom:.4rem;transition:border-color .15s}
.short-answer-input:focus{outline:none;border-color:var(--teal)}
.short-answer-input:disabled{opacity:.75}
.short-answer-feedback{font-size:.85rem;padding:.5rem .7rem;border-radius:var(--radius);margin-top:.3rem}
.short-answer-feedback.correct{background:var(--green-soft);color:var(--green)}
.short-answer-feedback.wrong{background:var(--red-soft);color:var(--red)}

.submit-btn{width:100%;margin-top:1.5rem;padding:.85rem;border-radius:var(--radius);border:none;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.95rem;cursor:pointer}
.submit-btn:disabled{opacity:.4;cursor:default}
.next-btn{width:100%;margin-top:.75rem;padding:.85rem;border-radius:var(--radius);border:1.5px solid var(--border);background:transparent;color:var(--text);font-weight:700;font-size:.95rem;cursor:pointer}
.result-score{font-family:var(--font-display);font-size:2rem;font-weight:800;text-align:center;margin-top:1.5rem}
.result-score.great{color:var(--green)}
.result-score.ok{color:var(--accent-text)}
.result-score.low{color:var(--red)}

/* Timed Skim & Scan (M62) */
.mode-tabs{display:flex;gap:.5rem;margin-bottom:1.25rem;padding:.4rem;}
.mode-tab{flex:1;padding:.55rem;text-align:center;border-radius:10px;cursor:pointer;font-size:.85rem;font-weight:600;transition:all .2s;color:var(--text-muted)}
.mode-tab.active{background:var(--accent);color:var(--accent-ink)}
/* M225: Skim & Scan's answering phase — passage hidden, this note takes its place */
.passage-hidden-note{font-size:.85rem;color:var(--text-muted);background:var(--surface-2);border:1px dashed var(--border);border-radius:var(--radius);padding:.6rem .9rem;margin-bottom:.75rem;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}

/* M227: prominent Skim & Scan timer — digital MM:SS + depleting progress bar,
   shared by both phases, replacing the old tiny inline span. */
.skim-timer-bar-wrap{margin-bottom:1rem}
.skim-timer-digital{font-family:var(--font-display);font-size:1.8rem;font-weight:700;color:var(--accent-text);text-align:center;margin-bottom:.4rem;font-variant-numeric:tabular-nums}
.skim-timer-digital.skim-timer-low{color:var(--red)}
.skim-timer-track{height:10px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.skim-timer-fill{height:100%;width:100%;background:var(--accent);border-radius:99px;transition:width .25s linear,background-color .3s}
.skim-timer-fill.skim-timer-warn{background:var(--warning)}
.skim-timer-fill.skim-timer-low{background:var(--red)}

/* M227: settings gear — same settings-btn/settings-panel/settings-row/switch/
   settings-select pattern tool-6-conversation-coach.html already established,
   reused verbatim (structure + class names) rather than reinvented. */
.settings-btn{background:var(--surface-2);border:1.5px solid var(--border);color:var(--text);border-radius:10px;padding:.5rem .7rem;font-size:1.05rem;cursor:pointer;transition:border-color .2s;flex-shrink:0}
.settings-btn:hover{border-color:var(--teal)}
/* M268: small text-level trigger for the Level filter's inline gear, as
   opposed to the boxy header-style .settings-btn other pages use. */
.settings-btn-inline{background:transparent;border:none;color:var(--text-dim);cursor:pointer;font-size:.85rem;line-height:1;padding:.15rem .3rem;border-radius:6px;transition:color .2s}
.settings-btn-inline:hover{color:var(--teal-text)}
.settings-panel{display:none;max-width:820px;margin:.75rem auto 0;padding:1.25rem 1.5rem;}
.settings-panel.open{display:block}
.settings-panel h4{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:1rem}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--border)}
.settings-row:last-of-type{border-bottom:none}
.settings-row label{font-size:.85rem}
.settings-row .settings-sub{font-size:.72rem;color:var(--text-dim);margin-top:.15rem}
.settings-control{display:flex;align-items:center;gap:.5rem}
.settings-select{background:var(--surface-2);border:1.5px solid var(--border);color:var(--text);border-radius:8px;padding:.4rem .65rem;font-size:.82rem;font-family:var(--font-body);cursor:pointer}
.switch{position:relative;display:inline-block;width:40px;height:22px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch-slider{position:absolute;cursor:pointer;inset:0;background:var(--surface-2);border:1.5px solid var(--border);border-radius:99px;transition:.2s}
.switch-slider:before{content:"";position:absolute;height:14px;width:14px;left:3px;top:2px;background:var(--text-muted);border-radius:50%;transition:.2s}
.switch input:checked + .switch-slider{background:var(--teal);border-color:var(--teal)}
.switch input:checked + .switch-slider:before{transform:translateX(16px);background:#0d1117}

/* Cloze / gap-fill (M63) — inline input at the blank's position */
.cloze-input{width:9rem;background:var(--surface-2);border:1.5px solid var(--border);color:var(--text);border-radius:var(--radius);padding:.3rem .5rem;font-size:.95rem;font-family:var(--font-body);margin:0 .2rem}
.cloze-input:focus{outline:none;border-color:var(--teal)}
.cloze-input:disabled{opacity:.75}

/* Story Arcs (M69, M262) — narrative framing over disconnected content.
   M262 made this a top-level section (reusing .mode-tabs/.mode-tab for the
   Passages/Story Arcs toggle itself — see #readingSectionTabs in
   reading.html), not a disclosure panel squeezed above the passage
   browser — so it gets the whole content area: a real grid, not a
   width-capped scroll row, and cards can be as tall as they need since
   nothing else is competing for space while this section is active. */
.arcs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.1rem;margin-bottom:1.25rem}
.arc-card-lg{padding:1.3rem 1.4rem;display:flex;flex-direction:column;}
.arc-title-lg{font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin-bottom:.5rem}
.arc-desc-lg{font-size:.85rem;line-height:1.5;color:var(--text-muted);margin-bottom:1.1rem}
/* Level stepper — replaces M261's small pill row now that there's room for
   a proper one: any step opens that exact chapter directly (same
   direct-access rationale as M261), completed ones get a checkmark badge. */
.arc-level-steps{display:flex;align-items:flex-start;margin-bottom:1rem}
.arc-level-step{display:flex;flex-direction:column;align-items:center;gap:.3rem;background:none;border:none;cursor:pointer;padding:0}
.arc-level-step-badge{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);background:var(--surface-2);color:var(--text-dim);display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;transition:all .15s}
.arc-level-step:hover .arc-level-step-badge{border-color:var(--purple);color:var(--purple)}
.arc-level-step.done .arc-level-step-badge{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.arc-level-step-label{font-size:.62rem;color:var(--text-dim);font-weight:600}
.arc-level-connector{flex:1;height:2px;background:var(--border);margin:16px .2rem 0}
.arc-progress-lg{font-size:.76rem;color:var(--text-dim);margin-bottom:1rem}
.arc-btn-lg{width:100%;padding:.7rem .9rem;border-radius:var(--radius);border:1.5px solid var(--purple);background:transparent;color:var(--purple);font-weight:600;font-size:.85rem;cursor:pointer;text-align:center;margin-top:auto}
.arc-btn-lg:hover{background:var(--purple-soft)}
.arc-back-link{background:none;border:none;color:var(--purple);font-weight:600;font-size:.85rem;cursor:pointer;padding:.5rem 0;margin-bottom:.5rem;text-align:left}
.arc-back-link:hover{text-decoration:underline}
.arcs-list .empty-state{flex:1 1 auto}

/* ── Admin-only passage generator (hidden unless Nav.userRole === 'admin') ── */
.admin-gen{background:var(--surface);border:1.5px dashed var(--accent);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1.25rem;display:none}
.admin-gen.show{display:block}
.admin-gen h3{font-size:.85rem;color:var(--accent-text);margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem}
.admin-gen-row{display:flex;gap:.6rem;margin-bottom:.6rem;flex-wrap:wrap}
.admin-gen-row select, .admin-gen-row input{flex:1;min-width:140px;background:var(--surface-2);border:1.5px solid var(--border);color:var(--text);border-radius:var(--radius);padding:.5rem .65rem;font-size:.85rem}
.admin-gen-btn{padding:.55rem 1.1rem;border-radius:var(--radius);border:none;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.85rem;cursor:pointer}
.admin-gen-btn:disabled{opacity:.5;cursor:default}
.admin-gen-status{font-size:.78rem;color:var(--text-muted);margin-top:.5rem}

/* Mobile touch-target (M190) — page-unique, not duplicated elsewhere. */
@media (max-width: 768px) {
  .listen-btn { min-height: 44px; }
}

/* ══ The article treatment (M362) ═══════════════════════════════════════════
   Reading looked like a quiz with some text above it. It now reads as a
   publication, because the format is doing pedagogical work rather than
   decoration: a newspaper column signals "read this for meaning", a form
   signals "extract the answer". Learners skim a form and read a column, and
   skimming is exactly the habit that makes comprehension scores plateau.

   Everything below is built from the same design tokens as the rest of the app
   (--surface/--border/--accent/--text-*), so all five themes and the admin
   design settings come along for free. Nothing here hardcodes a colour that
   would break in light mode.

   MEASURE IS THE WHOLE POINT. Body text is capped at 64 characters, which is
   the range typography research keeps landing on for sustained reading and is
   far narrower than the card was. A B2 passage at full container width was
   ~110 characters per line - long enough that the eye loses the line return,
   which costs a non-native reader more than a native one.

   Deliberately NOT multi-column: print columns work because a page is fixed
   and the eye travels a short distance back to the top. A scrolling column
   that breaks mid-viewport makes the reader hunt, and it fails completely on
   the phone-width screens most of this traffic arrives on. */

/* ── Masthead ─────────────────────────────────────────────────────────────── */
.rd-masthead {
    text-align: center;
    border-bottom: 3px double var(--border);
    padding-bottom: .7rem;
    margin-bottom: 1.25rem;
}
.rd-nameplate {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 5vw, 2.3rem);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.1;
}
.rd-masthead-rail {
    display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap;
    margin-top: .35rem;
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--text-dim);
}
.rd-masthead-rail span:not(:last-child)::after { content: ' ·'; margin-left: .6rem; }

/* ── The article ──────────────────────────────────────────────────────────── */
.passage-card.rd-article { background: var(--surface); }
.rd-article .passage-body-pad { padding: 1.5rem clamp(1rem, 5vw, 2.5rem) 2rem; }

.rd-kicker {
    font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent-text); margin-bottom: .5rem;
}
.rd-article .passage-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4.5vw, 2.15rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.01em;
    margin: 0 0 .6rem;
    max-width: 22ch;
}
/* The standfirst: one line saying what this is, in the paper's voice rather
   than the app's. It uses the level and category the passage already carries,
   so it needs no new authored content. */
.rd-deck {
    font-size: 1.02rem; line-height: 1.55; color: var(--text-muted);
    font-style: italic; margin-bottom: .9rem; max-width: 52ch;
}
.rd-byline {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-dim);
    padding-bottom: .8rem; margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--border);
}
.rd-byline-sep { opacity: .5; }

/* ── Figure ───────────────────────────────────────────────────────────────── */
.rd-article .passage-img-wrap { height: auto; aspect-ratio: 16 / 7; max-width: 100%; }
.rd-caption {
    font-size: .75rem; line-height: 1.5; color: var(--text-dim);
    padding: .45rem clamp(1rem, 5vw, 2.5rem) 0;
    border-left: 2px solid var(--accent); margin-left: clamp(1rem, 5vw, 2.5rem);
    padding-left: .6rem;
}

/* ── Body ─────────────────────────────────────────────────────────────────── */
.rd-article .passage-text { max-width: 64ch; margin-bottom: 1rem; white-space: normal; }
/* A serif body is the format signal that actually matters. The headline face
   alone still reads as a card with a fancy title; it is the COLUMN that says
   "read this", and on screen a serif at this measure and leading is what
   carries that. Falls back through the platform serifs rather than loading
   another webfont for one block of text. */
.rd-p {
    /* NOT Playfair. Playfair is a DISPLAY face - high stroke contrast, tight
       spacing, built to be seen large - and setting body copy in it is the
       classic way to make a page look typeset and read badly. It stays on the
       nameplate, the headline and the drop cap, where it belongs. The body
       uses platform text serifs, which are designed for exactly this and cost
       no extra webfont. */
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
    font-size: 1.09rem;
    line-height: 1.78;
    margin: 0 0 1.05rem;
    letter-spacing: .002em;
}
/* A drop cap is the one piece of pure typographic signalling here, and it earns
   its place: it marks where the article starts, which a card with a title and a
   paragraph does not do at all. */
.rd-p.rd-lede::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 3.1rem;
    line-height: .82;
    font-weight: 800;
    padding: .12em .09em 0 0;
    color: var(--accent-text);
}
/* The first few words in small caps, the way a paper eases you in. Kept subtle
   so it never competes with the drop cap. */
.rd-p.rd-lede { text-indent: 0; }

.rd-article .passage-meta {
    border-top: 1px solid var(--border);
    padding-top: .9rem; margin-top: .4rem;
}

/* ── Index: article cards instead of a list ───────────────────────────────── */
.rd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.1rem; }
.rd-card {display: flex;flex-direction: column;overflow: hidden;cursor: pointer;transition: border-color .15s, transform .15s;}
.rd-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.rd-card-kicker { font-size: .64rem; letter-spacing: .15em; text-transform: uppercase; color: var(--accent-text); }
.rd-card-body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.rd-card-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; line-height: 1.3; }
.rd-card-dek { font-size: .82rem; line-height: 1.5; color: var(--text-muted); flex: 1; }
.rd-card-foot { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }

/* ── Story Arcs as a series ───────────────────────────────────────────────── */
.arc-card-lg { position: relative; }
.arc-series-flag {
    font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
    color: var(--accent-text); font-weight: 700; margin-bottom: .35rem;
}

/* ── Paywall hero (M571) ──────────────────────────────────────────────────── */
.rd-hero{margin-bottom:1.1rem}
.arcs-grid>.rd-hero{grid-column:1/-1;margin-bottom:0}
.rd-hero-badge{display:inline-block;font-size:.66rem;letter-spacing:.14em;font-weight:700;color:var(--accent-text);margin-bottom:.35rem}
.rd-hero-title{font-family:var(--font-display);font-size:1.2rem;font-weight:700;line-height:1.25;margin-bottom:.35rem}
.rd-hero-desc{font-size:.86rem;line-height:1.5;color:var(--text-muted);margin-bottom:.7rem}
.rd-hero-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.85rem}
.rd-hero-cta{padding:.65rem 1.4rem;border-radius:var(--radius);border:none;background:var(--accent);color:var(--accent-ink);font-weight:700;font-size:.92rem;cursor:pointer}
.rd-locked-details{margin-top:.8rem}
.rd-locked-list{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.rd-locked-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);font-weight:700;padding:.3rem 0}
.rd-locked-label::-webkit-details-marker{display:none}
.rd-locked-label::before{content:"▸";transition:transform .15s}
.rd-locked-details[open] .rd-locked-label::before{transform:rotate(90deg)}
.rd-locked-label b{background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:0 .5rem;letter-spacing:0}
.rd-locked-item{display:inline-flex;align-items:center;gap:.35rem;max-width:100%;background:var(--surface);border:1px dashed var(--border);border-radius:99px;padding:.25rem .7rem;font-size:.78rem;color:var(--text-muted);cursor:pointer;font-family:var(--font-body)}
.rd-locked-item span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arc-card-lg.is-locked{opacity:.92}
.arc-level-step.is-locked{cursor:pointer;opacity:.7}
.arc-level-step.is-locked .arc-level-step-badge{border-style:dashed}
.rd-locked-card{padding:1.4rem 1.25rem}
.rd-locked-card .rd-hero{margin:1rem 0 0}

/* ── Phone ────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .rd-hero{padding:.8rem .9rem;margin-bottom:.8rem}
    .rd-hero-title{font-size:1.02rem}
    .rd-hero-desc{font-size:.8rem;margin-bottom:.55rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .rd-hero-chips{display:none}
    .rd-hero-cta{width:100%;padding:.6rem 1rem}
    .rd-p { font-size: 1rem; line-height: 1.75; }
    .rd-p.rd-lede::first-letter { font-size: 2.6rem; }
    .rd-article .passage-title { max-width: none; }
    .rd-caption { margin-left: 1rem; }
}
/* M642: inline cloze gaps sit inside running text — no 44px box on phones */
@media (max-width:767px){input.cloze-input{min-height:0}}