/* ═══ DENSITY — Asaf, 27 Sep 2026: "do the same for the reading website" ═════
   The same pass Writing got: every page a step tighter on the computer AND the
   phone — padding, gaps and sizes come down, nothing else changes (no colour,
   no font, no wording). Linked LAST in base.html so the cascade settles it.

   Why a separate sheet: tokens.css, components.css, main.css, brand.css,
   account_corner.css and profile_gap.css are core copies that sync_core.sh
   overwrites, so nothing may be edited there. Reading's own sheets (home.css,
   practice.css, news.css) are loaded per page BEFORE this one, which is why
   every rule here carries a body class: it out-ranks a bare class in those
   sheets, and wins the ties by coming last.

   Front pages (landing, sign in, register) decline the skin (no br-skin on
   <body>), so `body:not(.br-skin)` is exactly "the front pages". Everything
   behind the sign-in is `body.br-skin`.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── The front pages ───────────────────────────────────────────────────────── */
/* The hero carried ~400px of padding at 1440 (120 + 80 above the words,
   112 + 96 below). A step down, kept fluid for narrow screens. */
body:not(.br-skin) .hero { padding: clamp(2rem, 5vw, 3rem) 0 clamp(1.6rem, 4vw, 2.5rem); }
body:not(.br-skin) .hero-inner,
body:not(.br-skin) .landing-hero .hero-inner { padding: clamp(1rem, 3vw, 1.5rem) 20px clamp(1.6rem, 4vw, 2.5rem); }
body:not(.br-skin) .hero h1 { margin: .3em auto .3em; }
body:not(.br-skin) .hero .lead { margin-bottom: 1.3rem; }
body:not(.br-skin) .hero-cta { margin: 1.1rem 0 .7rem; }
body:not(.br-skin) .hero .logo-plate { margin-bottom: 1.1rem; padding: 10px 16px 8px; }
body:not(.br-skin) .hero .logo-plate img { height: 72px; }
/* The sections under the hero: 88px of head and foot room each at 1440. */
body:not(.br-skin) .section { padding: clamp(1.75rem, 4.5vw, 3rem) 0; }
body:not(.br-skin) .feature-grid { gap: 1rem; }
body:not(.br-skin) .feature { padding: 1.2rem 1.2rem 1.1rem; }
body:not(.br-skin) .how-wrap h2 { margin: .6rem 0 1.2rem; }
body:not(.br-skin) .steps { gap: .8rem; margin-bottom: 1.4rem; }

/* Sign in, register, forgot, reset, change password — the one form card. */
body .auth-card { padding: 24px 22px; }
body .auth-title { margin-bottom: 4px; }
body .auth-sub { margin-bottom: 1rem; }
body .auth-form { gap: .8rem; }

/* The footer, every page (the safe-area inset stays). */
body .site-foot { margin-top: 2.5rem; padding: 24px 0 calc(20px + env(safe-area-inset-bottom)); }

/* ── The signed-in home (library.html + home.css) ──────────────────────────── */
body.br-skin .home-top { padding: 12px 0 4px; }
/* 27 Sep, later — Asaf, of the Writing home, then "do the same for the reading
   website": "the text sizes should be bigger". Every size on the home a step
   UP from the tight pass; the spacing stays tight. (Width: the home is already
   1140px, the width the Writing home was widened to.) */
body.br-skin .home-greet h1 { margin-bottom: 4px; font-size: clamp(1.6rem, 3vw, 2rem); }
body.br-skin .home-today { margin-bottom: 10px; font-size: 1.05rem; }
body.br-skin .home-tab > .br-tablet-tab { font-size: .84rem; }
body.br-skin .home-cards { gap: 16px 12px; }
body.br-skin .home-tab { padding: 12px; gap: 6px; }
body.br-skin .bandcard .n { font-size: 2.6rem; margin: 2px 0 6px; }
body.br-skin .bandcard .band-ev { font-size: 1rem; line-height: 1.5; }
body.br-skin .band-how { padding-top: 4px; font-size: .98rem; }
body.br-skin .band-how summary { font-size: .98rem; }
body.br-skin .why-line, body.br-skin .today-card-meta, body.br-skin .today-card-note { font-size: .98rem; }
body.br-skin .today-card-title { font-size: 1.5rem; }
body.br-skin .today-card-btn { padding-top: 4px; font-size: 1.02rem; }
body.br-skin .weak-types .skill-row { padding: 3px 4px; font-size: 1rem; }
body.br-skin .weak-types .skill-row .skill-score { font-size: .98rem; }
body.br-skin .weak-types #weak-more { font-size: .98rem; }
body.br-skin .home-top + .library-section { padding-top: 10px; }
body.br-skin .library-section { padding-bottom: 48px; }
body.br-skin .filter-row { gap: .75rem; margin-bottom: 1rem; }
body.br-skin .library-section .chip-filter { font-size: .98rem; }
body.br-skin .library-section .type-filter select { font-size: 1rem; }
/* The 40 passage cards: 25.6px of padding each and a 20px gap, 279px tall on
   a phone — the one thing that made the home 13,000px long there. */
body.br-skin .library-section .pgrid { gap: 14px; }
body.br-skin .library-section .pcard { padding: 16px 16px 14px; gap: 8px; }
body.br-skin .library-section .pcard-title { font-size: 1.35rem; }
body.br-skin .library-section .pcard-badges { gap: 4px; }
body.br-skin .library-section .type-badge { padding: .12rem .45rem; font-size: .84rem; }
body.br-skin .library-section .pcard .chip { font-size: .88rem; }
body.br-skin .library-section .diff-chip { font-size: .84rem; }
body.br-skin .library-section .pcard-foot { padding-top: 8px; }
/* Each stays on ONE line. With the bigger type, "5 questions · 10 min" and the
   "Best 0/5" badge each broke in two on a done passage; if the row is still too
   narrow, the badge and Retry drop under the meta line instead. */
body.br-skin .library-section .pcard-meta { font-size: .92rem; white-space: nowrap; }
body.br-skin .library-section .pcard-best { font-size: .86rem; white-space: nowrap; }
body.br-skin .library-section .pcard-foot { flex-wrap: wrap; row-gap: 6px; }
body.br-skin .library-section .pcard .btn-sm { font-size: .92rem; }
body.br-skin .library-section .grid-empty { padding: 24px 0; }

/* ── BayRen News (news.css) ────────────────────────────────────────────────── */
body.br-skin .news-top { padding: 20px 0 8px; }
body.br-skin .news-h1 { margin: 8px 0 6px; }
body.br-skin .news-list { padding: 8px 0 40px; }
body.br-skin .news-note { margin-bottom: 12px; padding: .5rem .8rem; }
body.br-skin .news-cards { gap: 12px; }
body.br-skin .news-card { padding: 14px 16px; }
body.br-skin .news-h2 { margin: 24px 0 8px; }
body.br-skin .news-story { padding: 16px 0 40px; }
body.br-skin .news-back { margin-bottom: 12px; }
body.br-skin .news-story-head { margin-bottom: 12px; }
body.br-skin .news-story-title { margin: 8px 0 6px; }
body.br-skin .news-pair { padding: 12px 0; gap: 20px; }
body.br-skin .news-source { margin-top: 16px; }

/* ── The exam room (practice.css): the two panes' inner air only. The reading
   text sizes ride --reading-scale (A−/A+) and are not touched. ─────────────── */
body.br-skin .passage-inner { padding: 1.4em 1.6em 2.4em; }
body.br-skin .passage-title { margin-bottom: 1rem; }
body.br-skin .passage-para { margin-bottom: .9em; }
body.br-skin .questions-inner { padding: 1.1em 1em 0; }
body.br-skin .qg { padding: 1em 1.1em 1.1em; margin-bottom: .9em; }
body.br-skin .qg-instruction { margin-bottom: .8rem; }
body.br-skin .qg-primer { margin-bottom: .8rem; }
body.br-skin .qg-primer-summary { padding: .4rem .7rem; }
body.br-skin .q-block { margin-bottom: .9rem; }
body.br-skin .q-stem { margin-bottom: .5rem; }
body.br-skin .q-options { gap: .4rem; }
body.br-skin .option-card { padding: .5rem .75rem; }
/* The results view. */
body.br-skin .results-inner { padding: 1rem 1.2rem 3rem; }
body.br-skin .results-topbar { margin-bottom: .7rem; }
body.br-skin .score-hero { gap: 1.2rem; padding: 1.2rem 1.4rem; margin-bottom: 1rem; }
body.br-skin .review-row { padding: .9rem 1.1rem; margin-bottom: .8rem; }
body.br-skin .review-head { margin: -.9rem -1.1rem .7rem; padding: .55rem 1.1rem; }
body.br-skin .answer-line { margin-bottom: .7rem; }
body.br-skin .next-card { padding: .9rem 1.1rem; margin-top: 1.2rem; }
body.br-skin .results-actions { margin-top: 1.2rem; }
@media (min-width: 1100px) {
  body.br-skin .results-inner { padding: 1rem 1.6rem 3rem; }
}

/* ── Phones ────────────────────────────────────────────────────────────────── */
@media (max-width: 719px) {
  body.br-skin .home-top { padding: 10px 0 2px; }
  body.br-skin .home-greet h1 { font-size: 1.55rem; margin-bottom: 4px; }
  body.br-skin .home-today { margin-bottom: 8px; }
  body.br-skin .home-cards { gap: 12px; }
  body.br-skin .home-tab { padding: 10px; gap: 4px; }
  body.br-skin .bandcard .n { font-size: 2.2rem; }
  body.br-skin .today-card-title { font-size: 1.35rem; }
  body.br-skin .library-section .pgrid { gap: 10px; }
  body.br-skin .library-section .pcard { padding: 12px 12px 10px; gap: 6px; }
  body.br-skin .library-section .pcard-title { font-size: 1.25rem; }
}
@media (max-width: 600px) {
  body .auth-card { padding: 18px 14px; }
  body.br-skin .news-top { padding: 14px 0 6px; }
  body.br-skin .news-story { padding: 12px 0 32px; }
  body.br-skin .news-card { padding: 12px 14px; }
  body.br-skin .passage-inner { padding: 1.1em 1em 2em; }
  body.br-skin .questions-inner { padding: .9em .7em 0; }
  body.br-skin .qg { padding: .9em .8em 1em; }
  body.br-skin .score-hero { padding: 1rem .9rem; gap: .8rem; }
  body.br-skin .results-inner { padding: .8rem .8rem 2.5rem; }
}