/* =====================================================================
   PROMPT CURRENT AFFAIRS ARCHIVE
   Palette from the brief. Yellow is rationed: one per screen.
   Green is used ONLY for a correct quiz answer, because red is the brand.
   ================================================================== */

:root {
  --red:        #B22430;
  --red-dark:   #8E1B24;
  --yellow:     #F6C445;
  --cream:      #FDF6E9;
  --ink:        #1D1A19;
  --line:       #EADFC9;
  --muted:      #6B5E55;
  --placeholder:#F7EEDC;
  --edge:       #D2BC8E;
  --amber:      #9A6A06;
  --green:      #1C7A4B;
  --green-dark: #145C39;
  --white:      #FFFFFF;

  --mod-kerala:        #B22430;
  --mod-other_states:  #8E1B24;
  --mod-national:      #1D1A19;
  --mod-international: #A5691B;

  --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Fraunces', Georgia, serif;
  --mal: 'Noto Sans Malayalam', 'Manjari', sans-serif;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(29,26,25,.05), 0 8px 24px rgba(29,26,25,.06);
  --maxw: 1160px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
}

/* Malayalam pages get the Malayalam font and a little more line height,
   because the script stacks taller than Latin. */
html[lang="ml"] body { font-family: var(--mal); line-height: 1.85; }
html[lang="ml"] h1, html[lang="ml"] h2, html[lang="ml"] h3 { font-family: var(--mal); }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-dark); text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.6rem); }
h3 { font-size: 1.1rem; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.tiny  { font-size: .78rem; }
.center { text-align: center; }
.mt0 { margin-top: 0 } .mb0 { margin-bottom: 0 }

/* ---------- Header ------------------------------------------------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 40;
}
.header-inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 62px; max-width: var(--maxw); margin: 0 auto; padding: 0 20px;
}
.wordmark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 19px;
  color: var(--ink); white-space: nowrap; text-decoration: none; line-height: 1;
}
.wordmark .mark { width: 30px; height: 30px; flex: 0 0 30px; display: block; }
.wordmark .wm-text span { color: var(--red); }
.wordmark:hover { text-decoration: none; }

/* On a narrow phone the full name wraps to three lines and pushes the menu
   about. The mark carries the identity on its own at that width, so the
   second half of the name steps aside and the first word stays. */
@media (max-width: 420px) {
  .wordmark { font-size: 17px; gap: 8px; }
  .wordmark .mark { width: 26px; height: 26px; flex: 0 0 26px; }
  .wordmark .wm-text span { display: none; }
}

/* The footer sits on ink, where the red half of the name goes muddy. */
.site-footer .wordmark .wm-text span { color: var(--yellow); }

.nav { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.nav a { color: var(--ink); font-size: .93rem; font-weight: 500; }
.nav a.active { color: var(--red); }
.nav a:hover { color: var(--red); text-decoration: none; }

/* The language toggle -- the two languages are never mixed on a page. */
.lang-toggle {
  border: 1.5px solid var(--edge); background: var(--placeholder);
  color: var(--ink); border-radius: 999px; padding: 5px 15px;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  font-family: var(--sans);
}
html[lang="en"] .lang-toggle { font-family: var(--mal); }
.lang-toggle:hover { border-color: var(--red); color: var(--red); text-decoration: none; }

.burger { display: none; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--ink); }

@media (max-width: 860px) {
  .burger { display: block; margin-left: auto; order: 3; }
  .nav {
    display: none; order: 4; width: 100%; flex-direction: column;
    align-items: flex-start; gap: 4px; padding: 10px 0 16px; margin-left: 0;
  }
  .nav.open { display: flex; }
  .header-inner { flex-wrap: wrap; }
  .lang-toggle { order: 2; margin-left: auto; }
}

/* ---------- Banner -------------------------------------------------- */
.banner {
  background: var(--ink); color: var(--cream);
  padding: 10px 0; font-size: .875rem;
}
.banner b { color: var(--yellow); }

/* ---------- Layout -------------------------------------------------- */
.page { padding: 28px 0 60px; }
.cols { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; }
@media (max-width: 960px) { .cols { grid-template-columns: 1fr; } }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow);
}
.card + .card { margin-top: 18px; }

/* ---------- Buttons ------------------------------------------------- */
.btn {
  display: inline-block; border: 0; border-radius: 8px; cursor: pointer;
  padding: 11px 20px; font-size: .95rem; font-weight: 600;
  font-family: inherit; text-align: center; line-height: 1.3;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; text-decoration: none; }
/* The one action you most want clicked on a screen. Use once per page. */
.btn-accent { background: var(--yellow); color: var(--ink); }
.btn-accent:hover { background: #e8b52f; color: var(--ink); text-decoration: none; }
.btn-ghost { background: transparent; border: 1.5px solid var(--edge); color: var(--ink); }
.btn-ghost:hover { border-color: var(--red); color: var(--red); text-decoration: none; }
.btn-sm { padding: 7px 14px; font-size: .85rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- Module strip and tags ----------------------------------- */
.mod-strip { height: 5px; border-radius: 3px 3px 0 0; }
.mod-kerala        { background: var(--mod-kerala); }
.mod-other_states  { background: var(--mod-other_states); }
.mod-national      { background: var(--mod-national); }
.mod-international { background: var(--mod-international); }

.tag {
  display: inline-block; background: var(--placeholder); border: 1px solid var(--edge);
  color: var(--red-dark); border-radius: 999px; padding: 2px 11px;
  font-size: .75rem; font-weight: 600; margin: 0 5px 5px 0;
  font-family: var(--sans);
}
.tag-module { color: #fff; border: 0; }
.tag-plain { color: var(--muted); background: transparent; border-color: var(--line); }

/* A theme chip. Same shape as a module tag, but it is a link -- the whole
   point of a theme is that you can follow it to everything else on that
   field. Slightly lighter than a module tag so the section a story was filed
   under still reads as the primary label. */
.tag-theme {
  color: #fff; border: 0; text-decoration: none; opacity: .88;
  transition: opacity .12s ease;
}
.tag-theme:hover, .tag-theme:focus { opacity: 1; text-decoration: none; }

/* ---------- The Subjects page --------------------------------------- */
.themes-head { max-width: 720px; margin-bottom: 26px; }
.themes-head h1 { margin-bottom: 8px; }
.themes-sub { margin: 34px 0 14px; font-size: 1.05rem; }

.theme-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.theme-card {
  display: flex; align-items: stretch; gap: 0;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  text-decoration: none; color: inherit;
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.theme-card:hover, .theme-card:focus {
  text-decoration: none; transform: translateY(-2px);
  border-color: var(--theme); box-shadow: 0 4px 16px rgba(29, 26, 25, .12);
}

/* The colour is the field's own, carried as a bar rather than a full wash --
   twelve saturated blocks side by side would fight each other. */
.theme-card-bar { flex: none; width: 6px; background: var(--theme); }

.theme-card-body { flex: 1; padding: 14px 4px 14px 14px; min-width: 0; }
.theme-card-name {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: 1rem; line-height: 1.3; color: var(--ink);
}
.theme-card-count {
  display: block; margin-top: 4px; font-family: var(--sans);
  font-size: .8rem; color: var(--muted);
}
.theme-card-count strong { color: var(--theme); font-size: 1.05rem; }

.theme-card-go {
  flex: none; display: flex; align-items: center; padding: 0 14px;
  color: var(--line); font-size: 1.1rem; transition: color .14s ease;
}
.theme-card:hover .theme-card-go, .theme-card:focus .theme-card-go { color: var(--theme); }

/* Fields with nothing in them yet: present, but not given equal weight. */
.theme-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.theme-chip {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  border: 1px dashed var(--line); background: transparent;
  color: var(--muted); text-decoration: none;
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  transition: color .12s ease, border-color .12s ease;
}
.theme-chip:hover, .theme-chip:focus {
  text-decoration: none; color: var(--theme); border-color: var(--theme);
}

/* ---------- Side actions that follow the reader --------------------- */
/* A title and nothing else. These are on screen the whole way down the page,
   and a sentence that is always visible stops being read. */
.side-action {
  display: block; text-align: center; margin-bottom: 12px;
  padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--white);
  color: var(--ink); text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: .92rem;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.side-action:hover, .side-action:focus {
  text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(29, 26, 25, .14);
}
.side-action-primary {
  background: var(--red-dark); border-color: var(--red-dark); color: #fff;
}
.side-action-primary:hover, .side-action-primary:focus { color: #fff; }

/* ---------- The slot: four boxes, then a band ------------------------ */
/* Five equal cards never sat right. Four fitted across and the fifth
   orphaned onto a second row, leaving a hole three columns wide; and each
   card ran to its own length, so a twenty-item section towered over a
   seven-item one and the row ended ragged.

   The four geographic sections now share ONE grid row. Grid stretches its
   items to the tallest by default, and each box shows the same number of
   items whatever the section holds, so they end together for content
   reasons as well as layout ones. Country Focus -- one country, read in
   depth -- gets a band of its own beneath. */

.row4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }

.bx {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.bx > header, .band > header {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; color: #fff;
}
.bx > header h3, .band > header h3 {
  margin: 0; font-size: 1rem; color: #fff; line-height: 1.3;
}
.bx > header h3 em, .band > header h3 em {
  font-style: normal; font-weight: 400; opacity: .85; font-size: .86rem;
}
.bx > header > span, .band > header > span {
  margin-left: auto; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; opacity: .9; white-space: nowrap;
}

/* space-between is what makes the LAST item sit flush with the bottom of
   every box, not just the tallest one. */
.bx-body {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-start;
  gap: 10px; padding: 12px; margin: 0; list-style: none;
}
/* The body packs from the top; the BOX still stretches to the row's height, so
   every "Read all N items" button lines up along one line. Distributing the
   items instead (space-between) looked right when the sections held similar
   numbers and broke the moment they did not: three items spread down a
   twelve-item box left two gaps the size of a card each. Equal frames, not
   equal spacing. */
.bx-all {
  display: block; margin: 0 12px 12px; text-align: center;
  border: 1px solid var(--line); border-radius: 8px; padding: 9px;
  font-size: .84rem; font-weight: 600; background: #FEFBF4; color: var(--ink);
}
.bx-all:hover { text-decoration: none; background: var(--white); border-color: var(--edge); }

/* ---------- The band: one colour bar, four columns ------------------- */
.band {
  margin-top: 20px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.band > header { padding: 16px 20px; }
.band > header h3 { font-size: 1.16rem; }
.band-cols {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; padding: 14px; margin: 0; list-style: none;
}
.band .bx-all { margin: 0 14px 14px; }

/* ---------- Jump buttons -------------------------------------------- */
/* Desktop shows all five sections at once, so there is nothing to jump to.
   On a phone they become five full-width blocks one under another, and
   reaching Country Focus meant scrolling past forty items. */
.jump { display: none; }

html { scroll-behavior: smooth; }
.row4 > .bx, .band { scroll-margin-top: 14px; }

@media (max-width: 900px) {
  .row4 { grid-template-columns: repeat(2, 1fr); }
  .band-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .row4 { grid-template-columns: 1fr; gap: 14px; }
  .band-cols { grid-template-columns: 1fr; }

  /* One tap to any section. Sticky, because the reader wants it again after
     reading a section, not only at the top of the page. */
  .jump {
    display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px;
    margin: 0 -16px 14px; position: sticky;
    /* Sticks BELOW the site header, which is itself sticky at top 0. Both at
       zero and they simply cover each other. --hdr is measured at runtime
       because the header wraps to two lines on a narrow phone; the fallback
       is there for the moment before that script runs. */
    top: var(--hdr, 56px);
    /* Above the floating edge tabs (z 60). The bar is the thing being
       reached for; a tab that covers the last button defeats the point. */
    z-index: 70;
    background: rgba(253, 246, 233, .96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--line);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .jump::-webkit-scrollbar { display: none; }
  .jump a {
    display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
    padding: 8px 14px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--white);
    font-family: var(--sans); font-size: .82rem; font-weight: 600;
    color: var(--ink); text-decoration: none; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(29, 26, 25, .06);
  }
  .jump a .dot { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
  .jump a em {
    font-style: normal; font-size: .72rem; font-weight: 700;
    color: var(--muted); background: #F4EBD8; padding: 1px 7px; border-radius: 999px;
  }
  .jump a:active { transform: scale(.97); }

  /* Room for the sticky bar when a jump lands on a section. */
  .row4 > .bx, .band { scroll-margin-top: calc(var(--hdr, 56px) + 62px); }
}

/* ---------- Edge tabs ------------------------------------------------ */
/* Build the test and Archive, pinned to the left and right edges and centred
   vertically. They are position:fixed, so they occupy no space in the layout:
   the feed keeps the full width and Other States sits beside the other three
   sections instead of below a gutter that existed only to hold two buttons.

   The text runs vertically because a horizontal pill at the edge of a phone
   would sit on top of the words it is meant to sit beside. Malayalam has no
   vertical form, so the browser rotates the line as a whole, which is what is
   wanted here -- a rotated line of ordinary text, not stacked letters. */
.edge-tab {
  position: fixed; top: 50%; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 18px 9px;
  border: 1px solid var(--line);
  background: var(--white); color: var(--ink);
  text-decoration: none;
  font-family: var(--sans); font-weight: 700; font-size: .84rem;
  letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 3px 16px rgba(29, 26, 25, .16);
  transition: transform .14s ease, box-shadow .14s ease;
}
.edge-tab > span { writing-mode: vertical-rl; }

.edge-tab-left {
  left: 0; transform: translateY(-50%);
  border-left: 0; border-radius: 0 var(--radius) var(--radius) 0;
}
.edge-tab-right {
  right: 0; transform: translateY(-50%);
  border-right: 0; border-radius: var(--radius) 0 0 var(--radius);
  background: var(--red-dark); border-color: var(--red-dark); color: #fff;
}
/* Left tab reads bottom-to-top, right tab top-to-bottom, so each runs away
   from the edge it is attached to and both are read by tilting the same way. */
.edge-tab-left > span { transform: rotate(180deg); }

.edge-tab-left:hover, .edge-tab-left:focus { transform: translateY(-50%) translateX(2px); }
.edge-tab-right:hover, .edge-tab-right:focus { transform: translateY(-50%) translateX(-2px); }
.edge-tab:hover, .edge-tab:focus {
  text-decoration: none; box-shadow: 0 5px 20px rgba(29, 26, 25, .22);
}
.edge-tab-right:hover, .edge-tab-right:focus { color: #fff; }

/* Narrower on a phone, where every millimetre of width is the reader's --
   and pushed below centre, so they clear the section jump bar at the top of
   the feed rather than sitting on top of its last button. */
@media (max-width: 620px) {
  .edge-tab { padding: 14px 6px; font-size: .76rem; top: 62%; }
}

/* Someone who has asked for less motion should not be nudged by a hover. */
@media (prefers-reduced-motion: reduce) {
  .edge-tab { transition: none; }
  .edge-tab-left:hover, .edge-tab-left:focus,
  .edge-tab-right:hover, .edge-tab-right:focus { transform: translateY(-50%); }
}

/* ---------- Slot rows ----------------------------------------------- */
.slot-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 26px 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--line);
}
.slot-head h2 { margin: 0; }
.slot-time { color: var(--muted); font-size: .85rem; }

.module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }

.mod-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column;
}
.mod-card .thumb {
  aspect-ratio: 16/9; background: var(--placeholder); background-size: cover;
  background-position: center; border-bottom: 1px solid var(--line);
}
.mod-card .body { padding: 15px 16px 17px; flex: 1; display: flex; flex-direction: column; }
.mod-card h3 { font-size: 1rem; margin-bottom: 6px; }
.mod-card .spacer { flex: 1; }

/* ---------- The title list inside a module card ---------------------- */
/* Each headline is its own bordered block. Without a border the rows ran
   together and the date and chips of one read as part of the next. */
.mod-list { list-style: none; margin: 10px 0 0; padding: 0; }

.mod-list-item {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 9px; background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.mod-list-item:last-child { margin-bottom: 0; }
.mod-list-item:hover { border-color: var(--edge); box-shadow: 0 1px 6px rgba(29,26,25,.06); }

.mod-list-link {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: .95rem; line-height: 1.4; color: var(--ink); text-decoration: none;
}
.mod-list-link:hover, .mod-list-link:focus { color: var(--red-dark); text-decoration: underline; }

.mod-list-meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 7px;
}
.dateline {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
}
.tag-mini { font-size: .66rem; padding: 1px 8px; margin: 0; }

/* Background reading is not news, and must not be mistaken for it. */
.kind-badge {
  display: inline-block; font-family: var(--sans); font-size: .66rem;
  font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--gold-dark, #8a6d1f); background: rgba(165,105,27,.12);
  border: 1px solid rgba(165,105,27,.35); border-radius: 999px; padding: 1px 9px;
}

.item-title-link { color: inherit; text-decoration: none; }
.item-title-link:hover, .item-title-link:focus { text-decoration: underline; }

/* A section with three items must not be stretched to match one with eight.
   align-items: start lets every card end where its content ends. */
.module-grid { align-items: start; }
.mod-card { height: auto; align-self: start; }
.mod-card .spacer { flex: none; height: 4px; }

/* ---------- A designed card where there is no photograph ------------- */
/*
   Two things were wrong with the first attempt and a screenshot caught both.
   It used color-mix(), which this browser does not support, so the whole
   gradient silently evaluated to nothing and the block rendered as bare page
   colour. And it kept the 16/9 ratio meant for a photograph, so on a wide card
   it reserved four hundred pixels for an image that does not exist.
   It is now a slim banner in the section colour, built from rgba overlays
   that work everywhere.
*/
.mod-card .thumb-designed {   /* must out-specify ".mod-card .thumb", whose
                                  background shorthand was winning and paint-
                                  ing the banner in the page colour */
  aspect-ratio: auto; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; background-color: var(--mod);
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(0deg,   rgba(0,0,0,.18)      0%, rgba(0,0,0,0)      70%);
  border-bottom: 0;
}
.mod-card .thumb-mod {
  color: #fff; font-family: var(--serif); font-weight: 700;
  font-size: 1.02rem; line-height: 1.15; letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.mod-card .thumb-date {
  color: rgba(255,255,255,.92); font-family: var(--sans);
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; text-shadow: 0 1px 2px rgba(0,0,0,.28);
}

/* A real photograph keeps its proportions but is not allowed to dominate a
   card whose content is a list of headlines. */
.mod-card .thumb { max-height: 210px; }

/* ---------- Day headings (the home page now carries a week) ---------- */
.day-head {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 34px 0 6px; padding-bottom: 6px;
  border-bottom: 3px solid var(--red-dark);
}
.day-head-first { margin-top: 4px; }
.day-head h2 { margin: 0; font-size: 1.35rem; }
.day-date { color: var(--muted); font-family: var(--sans); font-size: .82rem; }

/* ---------- The side column follows the reader down the page --------- */
/*
   Sticky, not fixed. A fixed panel floats over the text and has to be
   dismissed; a sticky one simply stops scrolling once it reaches the top and
   releases at the end of the column, so it never covers anything and never
   needs a close button.

   Below 961px the layout is a single column and the panel sits under the
   feed, where sticking it would mean a box permanently covering a fifth of a
   phone screen. So it is only sticky where there is a column for it to sit in.
*/
@media (min-width: 961px) {   /* matches the .cols breakpoint above */
  .cols > .side {
    position: sticky; top: 16px; align-self: start;
    max-height: calc(100vh - 32px); overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* ---------- Share ---------------------------------------------------- */
/* Icons only. A row of wordmarks competed with the headline above it. */
.share { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 9px; }

.share-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--muted); cursor: pointer;
  text-decoration: none; line-height: 0;
  transition: background .12s ease, color .12s ease, border-color .12s ease,
              transform .12s ease;
}
.share-btn svg { flex: none; }
.share-btn:hover, .share-btn:focus {
  color: #fff; text-decoration: none; transform: translateY(-1px);
}
.share-wa:hover,   .share-wa:focus   { background: #25D366; border-color: #25D366; }
.share-tg:hover,   .share-tg:focus   { background: #229ED9; border-color: #229ED9; }
.share-fb:hover,   .share-fb:focus   { background: #1877F2; border-color: #1877F2; }
.share-more:hover, .share-more:focus { background: var(--ink); border-color: var(--ink); }

.share-copied { background: #2E7D52; border-color: #2E7D52; color: #fff; }

/* ---------- Item ---------------------------------------------------- */
.item { border-bottom: 1px solid var(--line); padding: 26px 0; }
.item:first-child { padding-top: 6px; }
.item:last-child { border-bottom: 0; }
.item h3 { font-size: 1.22rem; margin-bottom: 10px; }
.item-lead { width: 100%; border-radius: 8px; margin-bottom: 14px; display: block; }
.item-body { margin: 0 0 12px; }

.keydata {
  background: var(--placeholder); border: 1px solid var(--edge);
  border-radius: 8px; padding: 11px 14px; margin: 0 0 12px;
  display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .9rem;
}
.keydata .kd-label { color: var(--muted); }
.keydata .kd-value { font-weight: 600; }

.why {
  border-left: 3px solid var(--yellow); background: #fffbf0;
  padding: 9px 14px; margin: 0 0 12px; font-size: .93rem; color: var(--amber);
}
.item-meta { color: var(--muted); font-size: .8rem; display: flex; flex-wrap: wrap; gap: 5px 14px; }

/* ---------- Quiz ---------------------------------------------------- */
.quiz { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-top: 16px; }
.quiz-head { font-family: var(--display); font-weight: 700; font-size: 1.02rem; margin-bottom: 4px; }
.quiz-progress { color: var(--muted); font-size: .8rem; margin-bottom: 12px; }
.quiz-stem { font-weight: 600; margin-bottom: 12px; }

.opt-btn {
  display: block; width: 100%; text-align: left; background: var(--white);
  border: 1.5px solid var(--line); border-radius: 8px; padding: 11px 14px;
  margin-bottom: 8px; cursor: pointer; font-family: inherit; font-size: .95rem;
  color: var(--ink); line-height: 1.5;
}
.opt-btn:hover:not(:disabled) { border-color: var(--red); background: #fff8f8; }
.opt-btn:disabled { cursor: default; }
.opt-btn .letter {
  display: inline-block; width: 22px; height: 22px; line-height: 21px; text-align: center;
  border: 1.5px solid var(--edge); border-radius: 50%; font-size: .75rem;
  font-weight: 700; margin-right: 9px; font-family: var(--sans);
}
/* Green only ever means "this answer is right". */
.opt-btn.correct { border-color: var(--green); background: #f0f8f4; color: var(--green-dark); }
.opt-btn.correct .letter { border-color: var(--green); background: var(--green); color: #fff; }
.opt-btn.wrong { border-color: var(--red); background: #fdf3f3; }
.opt-btn.wrong .letter { border-color: var(--red); background: var(--red); color: #fff; }

.quiz-feedback { margin-top: 10px; padding: 11px 14px; border-radius: 8px; font-size: .9rem; }
.quiz-feedback.ok  { background: #f0f8f4; color: var(--green-dark); border: 1px solid #cce7d9; }
.quiz-feedback.no  { background: #fdf3f3; color: var(--red-dark); border: 1px solid #f2d5d7; }
.quiz-score { font-family: var(--display); font-size: 1.3rem; font-weight: 700; }

/* ---------- Sidebar ------------------------------------------------- */
.side h4 {
  font-family: var(--sans); font-size: .78rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--muted); margin: 0 0 10px; font-weight: 700;
}
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.side-list li:last-child { border-bottom: 0; }

.fact {
  border-left: 3px solid var(--red); padding: 4px 0 4px 11px; margin-bottom: 13px;
}
.fact .fact-label { font-size: .78rem; color: var(--muted); }
.fact .fact-value { font-weight: 600; }
.fact .fact-since { font-size: .74rem; color: var(--muted); }
.fact.changed { border-left-color: var(--yellow); }

/* ---------- Archive calendar ---------------------------------------- */
.cal { width: 100%; border-collapse: collapse; background: var(--white); }
.cal th {
  font-family: var(--sans); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); padding: 8px 0; font-weight: 700;
}
.cal td { border: 1px solid var(--line); height: 78px; vertical-align: top; padding: 0; width: 14.28%; }
.cal td.empty { background: #fbf6ec; }
.cal a.day { display: block; height: 100%; padding: 7px 9px; color: var(--ink); }
.cal a.day:hover { background: var(--placeholder); text-decoration: none; }
.cal .dnum { font-weight: 600; font-size: .95rem; }
.cal .dcount { font-size: .72rem; color: var(--red); font-weight: 600; margin-top: 3px; }
.cal td.none .dnum { color: #c4b8ad; }
.cal td.today { outline: 2px solid var(--yellow); outline-offset: -2px; }

.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }

@media (max-width: 620px) {
  .cal td { height: 56px; }
  .cal .dnum { font-size: .82rem; }
  .cal .dcount { font-size: .65rem; }
}

/* ---------- Filters / chips ----------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip {
  border: 1.5px solid var(--edge); background: var(--white); color: var(--ink);
  border-radius: 999px; padding: 7px 15px; font-size: .86rem; cursor: pointer;
  font-family: inherit; font-weight: 500;
}
.chip:hover { border-color: var(--red); text-decoration: none; color: var(--red); }
.chip.on { background: var(--red); border-color: var(--red); color: #fff; }
.chip.on:hover { color: #fff; background: var(--red-dark); }

/* ---------- Forms --------------------------------------------------- */
label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=date], input[type=number], input[type=url], select, textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-family: inherit; font-size: .95rem;
  background: var(--white); color: var(--ink);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--red); outline-offset: -1px; border-color: var(--red); }
.field { margin-bottom: 15px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
@media (max-width: 700px) { .row2, .row3 { grid-template-columns: 1fr; } }
.hint { font-size: .78rem; color: var(--muted); margin-top: 4px; font-weight: 400; }

/* ---------- Messages ------------------------------------------------ */
.msg { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .92rem; }
.msg.ok   { background: #f0f8f4; border: 1px solid #cce7d9; color: var(--green-dark); }
.msg.err  { background: #fdf3f3; border: 1px solid #f2d5d7; color: var(--red-dark); }
.msg.warn { background: #fffbf0; border: 1px solid var(--edge); color: var(--amber); }

/* ---------- Pricing ------------------------------------------------- */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.price-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; box-shadow: var(--shadow); }
.price-card.featured { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.price-card.featured h3 { color: var(--yellow); }
.price-card.featured .muted { color: #b9aca2; }
.price-card .amount { font-family: var(--display); font-size: 2.1rem; font-weight: 700; line-height: 1; margin: 6px 0 2px; }
.price-card ul { list-style: none; padding: 0; margin: 16px 0 22px; font-size: .92rem; }
.price-card li { padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.06); }
.price-card.featured li { border-bottom-color: rgba(255,255,255,.1); }

/* ---------- Footer -------------------------------------------------- */
.site-footer {
  background: var(--ink); color: #b9aca2; padding: 34px 0; margin-top: 50px; font-size: .88rem;
}
.site-footer a { color: var(--cream); }
.site-footer .wordmark { color: var(--cream); font-size: 17px; }

/* ---------- Admin --------------------------------------------------- */
.admin-body { background: #f4efe4; }
.admin-bar { background: var(--ink); color: var(--cream); padding: 0; position: sticky; top: 0; z-index: 50; }
.admin-bar .header-inner { min-height: 54px; }
.admin-bar a { color: var(--cream); font-size: .9rem; }
.admin-bar a.active { color: var(--yellow); }
.admin-bar .wordmark { color: var(--cream); font-size: 16px; }
.admin-bar .wordmark span { color: var(--yellow); }

.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 17px 19px; }
.stat .n { font-family: var(--display); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.stat .l { color: var(--muted); font-size: .8rem; margin-top: 5px; }
.stat.warn { border-left: 4px solid var(--yellow); }
.stat.bad  { border-left: 4px solid var(--red); }

table.data { width: 100%; border-collapse: collapse; background: var(--white); font-size: .9rem; }
table.data th {
  text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--line);
  font-family: var(--sans); font-size: .76rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
table.data td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data tr:hover td { background: #fdfaf4; }

.pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; font-family: var(--sans); }
.pill.draft     { background: #eee8dc; color: var(--muted); }
.pill.verified  { background: #e7f2eb; color: var(--green-dark); }
.pill.scheduled { background: #fff3d4; color: var(--amber); }
.pill.published { background: #e7f2eb; color: var(--green-dark); }
.pill.needs_review, .pill.withdrawn { background: #fbe4e6; color: var(--red-dark); }

.slot-builder { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .slot-builder { grid-template-columns: 1fr; } }
.drop-zone { min-height: 90px; border: 2px dashed var(--edge); border-radius: 8px; padding: 10px; background: #fdfaf4; }
.drop-zone.over { border-color: var(--red); background: #fff6f6; }
.drag-item {
  background: var(--white); border: 1px solid var(--line); border-radius: 7px;
  padding: 9px 12px; margin-bottom: 7px; cursor: grab; font-size: .88rem;
}
.drag-item:active { cursor: grabbing; }
.drag-item.notready { border-left: 4px solid var(--red); }
.drag-item.ready    { border-left: 4px solid var(--green); }

.ml-flag { font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 999px; font-family: var(--sans); }
.ml-flag.ok   { background: #e7f2eb; color: var(--green-dark); }
.ml-flag.miss { background: #fbe4e6; color: var(--red-dark); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; background: var(--yellow); padding: 8px 14px; border-radius: 6px; z-index: 100; }

@media print {
  .site-header, .site-footer, .quiz, .banner, .no-print { display: none !important; }
  body { background: #fff; }
}

/* ---------------------------------------------------------------------------
   See more, and the per-slot test button.

   .more is a <details>: the hidden titles are in the page whether it is open
   or shut, so Ctrl+F finds them and a search engine indexes them. Closed, it
   costs one line, which is what keeps the four boxes ending level.
   --------------------------------------------------------------------------- */
.more { border-top: 1px solid var(--line); margin-top: 6px; }
.more > summary {
  cursor: pointer; list-style: none; padding: 9px 14px;
  font-size: .82rem; font-weight: 600; color: var(--muted);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: " \25BE"; }
.more[open] > summary::after { content: " \25B4"; }
.more > summary:hover { color: var(--ink); background: rgba(0,0,0,.03); }
.more > .mod-list { padding-top: 0; }

.slot-test {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 22px 0 6px; padding-top: 18px; border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------------------
   In plain words.

   An abbreviation nobody expands, or an institution nobody places, turns a
   fact into a string of sounds to memorise. This sits between the item and
   its questions, where someone who did not follow a word is standing.
   --------------------------------------------------------------------------- */
.terms {
  background: #FBF4E6; border-left: 3px solid var(--gold, #F6C445);
  padding: 12px 16px; margin: 18px 0; border-radius: 0 8px 8px 0;
}
.terms h4 { margin: 0 0 8px; font-size: .82rem; letter-spacing: .04em;
            text-transform: uppercase; color: #8A7A58; }
.terms p  { margin: 0 0 7px; font-size: .92rem; line-height: 1.55; }
.terms p:last-child { margin-bottom: 0; }
.terms .exp { color: var(--muted); font-size: .86rem; }

/* ---------------------------------------------------------------------------
   The PDF pool, the basket, and the custom builder.
   --------------------------------------------------------------------------- */
.pool-head { display:flex; justify-content:space-between; align-items:flex-end;
             gap:16px; flex-wrap:wrap; }
.pool-actions { display:flex; gap:10px; align-items:center; }

.pool { display:grid; gap:18px; margin-top:22px;
        grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); }
.pdfcard { background:#fff; border:1px solid var(--line); border-radius:10px;
           overflow:hidden; display:flex; flex-direction:column; }
.pdfcard > header { display:flex; justify-content:space-between; align-items:center;
                    padding:8px 13px; color:#FDF6E9; }
.pdfcard .kindlabel { font-weight:700; font-size:.82rem; letter-spacing:.04em;
                      text-transform:uppercase; }
.pdfcard .issue { font-size:.72rem; opacity:.82; letter-spacing:.06em; }
.pdfbody { padding:13px 14px 6px; flex:1; }
.pdfbody h3 { font-size:1rem; margin:0 0 6px; line-height:1.35; }
.pdffoot { display:flex; justify-content:space-between; align-items:center;
           padding:10px 14px 13px; border-top:1px solid var(--line); }
.price { font-weight:700; color:var(--red-dark, #8E1B24); }

.cartrow { display:flex; justify-content:space-between; gap:16px;
           padding:12px 0; border-bottom:1px solid var(--line); }
.cartrow .ct { font-weight:600; line-height:1.4; }
.cartend { display:flex; align-items:center; gap:14px; white-space:nowrap; }
.linkbtn { background:none; border:0; padding:0; color:var(--muted);
           text-decoration:underline; cursor:pointer; font:inherit; font-size:.85rem; }
.linkbtn:hover { color:var(--red-dark, #8E1B24); }

.totals { margin-top:16px; }
.totals > div { display:flex; justify-content:space-between; padding:5px 0; }
.totals .disc { color:#2F6B3A; }
.totals .grand { border-top:2px solid var(--line); margin-top:6px; padding-top:10px;
                 font-size:1.12rem; }
.nudge { background:#FBF4E6; border-left:3px solid var(--gold, #F6C445);
         padding:10px 14px; margin:14px 0 0; font-size:.9rem; border-radius:0 8px 8px 0; }
.cartfoot { display:flex; justify-content:space-between; align-items:center;
            gap:16px; flex-wrap:wrap; margin-top:20px; }

@media (max-width: 560px) {
  .pool { grid-template-columns:1fr; }
  .pool-head { align-items:flex-start; }
}

/* The allowance line above the pool: what is left this month, before anyone
   clicks a Download that would have been refused. */
.allowbar {
  margin-top: 18px; padding: 10px 15px; border-radius: 8px;
  background: #FBF4E6; border-left: 3px solid var(--gold, #F6C445);
  font-size: .9rem;
}
.allowbar a { margin-left: 8px; }

/* The plan comparison. A table, because a table is what a reader wants when
   comparing three columns of numbers -- cards look nicer and make you hold
   three things in your head at once. */
.plantable { margin-top: 18px; overflow-x: auto; }
.plantable table { border-collapse: collapse; width: 100%; min-width: 520px; background: #fff;
                   border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.plantable th, .plantable td { padding: 12px 14px; text-align: center;
                               border-bottom: 1px solid var(--line); }
.plantable thead th { background: #FBF4E6; font-size: .92rem; line-height: 1.35; }
.plantable thead th span { display: block; font-weight: 400; }
.plantable tbody th[scope=row] { text-align: left; font-weight: 600; font-size: .92rem; }
.plantable tr:last-child th, .plantable tr:last-child td { border-bottom: 0; }
.plantable .yours { background: #FFF8E8; }
.plantable thead .yours { box-shadow: inset 0 -3px 0 var(--gold, #F6C445); }

/* ---------------------------------------------------------------------------
   THE TWO COMMUNITY BUTTONS

   In the header beside the language switch, so they survive the burger on a
   phone. Each keeps its own platform colour: these are the only two coloured
   things in the header, which is the point -- a reader scanning the page finds
   them without being told.
   --------------------------------------------------------------------------- */
.community { display: flex; gap: 7px; align-items: center; }
/* Icon only, at every width. With the words beside them the two buttons cost
   44px and the navigation broke onto a second line at 1280 -- measured, not
   guessed. The icons are recognised without words; the words are on the cards
   further down the page and in every PDF. */
.cbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: #fff; text-decoration: none; flex: none;
}
.cbtn svg { width: 16px; height: 16px; flex: none; }
.cbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cbtn:hover { text-decoration: none; filter: brightness(1.07); }
.cbtn-wa { background: #25D366; }
.cbtn-tg { background: #229ED9; }

/* ---------------------------------------------------------------------------
   THE HOUSE PROMOS THAT FILL THE GAPS

   The four section boxes in a row stretch to one height, and a box whose
   headlines happen to be short used to end in a tall patch of empty white.
   The promo takes that space instead: flex:1 makes it absorb exactly what is
   left over, so in a short box it is a full banner and in a tall one it is a
   thin strip. Nothing is pushed anywhere and the boxes still end level.
   --------------------------------------------------------------------------- */
.bx-promo { display: flex; flex-direction: column; gap: 10px;
            flex: 1 1 auto; min-height: 76px; margin: 10px 14px 0; }
.bx-promo .promo[hidden] { display: none; }
/* Only while site.js is counting how many cards fit. */
.bx-promo.is-measuring .promo { flex: 0 0 auto; }
.promo {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 11px 13px; border-radius: 10px;
  background: var(--sand, #F7EEDC); border: 1px solid var(--edge, #E6DAC6);
}
.promo .pt { font-size: 13px; font-weight: 700; color: var(--ink, #1D1A19); line-height: 1.3; }
.promo .pb { font-size: 12px; color: var(--muted, #6B5E55); line-height: 1.45; }
.promo .pa {
  align-self: flex-start; margin-top: 2px;
  font-size: 12px; font-weight: 700; color: #fff; text-decoration: none;
  background: var(--brand, #B22430); padding: 6px 12px; border-radius: 999px;
}
.promo .pa:hover { text-decoration: none; filter: brightness(1.08); }
.promo-row { display: flex; gap: 7px; flex-wrap: wrap; }
.promo-row .pa.wa { background: #25D366; }
.promo-row .pa.tg { background: #229ED9; }

/* The space beside "Today's feed", which was empty on anything wider than a
   tablet. The join bar sits there, above the day's PDF button. */
.feed-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.joinbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 13px; border-radius: 999px;
  background: var(--sand, #F7EEDC); border: 1px solid var(--edge, #E6DAC6);
}
.joinbar-t { font-size: 13px; font-weight: 700; color: var(--ink, #1D1A19); }
.joinbar-b { display: flex; gap: 7px; }
.joinbar .pa {
  font-size: 12px; font-weight: 700; color: #fff; text-decoration: none;
  padding: 6px 12px; border-radius: 999px;
}
.joinbar .pa.wa { background: #25D366; }
.joinbar .pa.tg { background: #229ED9; }
.joinbar .pa:hover { text-decoration: none; filter: brightness(1.08); }
@media (max-width: 700px) {
  .feed-side { align-items: stretch; width: 100%; }
  .joinbar { justify-content: space-between; }
}

/* The PDF card when it is filling a gap between the sections rather than
   sitting in the pool. Same component, narrower column: it stretches to take
   whatever height is left over, exactly as the house cards do. */
.bx-promo .pdfcard-sm { flex: 1; display: flex; flex-direction: column; }
.bx-promo .pdfcard-sm .pdfbody { padding: 11px 12px 4px; }
.bx-promo .pdfcard-sm .pdfbody h3 { font-size: .93rem; }
.bx-promo .pdfcard-sm .pdffoot { padding: 9px 12px 11px; flex-wrap: wrap; gap: 8px; }
.bx-promo .pdfcard-sm > header { padding: 8px 12px; }

/* EARLIER DAYS
   The feed carries three days; this is how a reader reaches the month behind
   it, three days at a time. Each link is a date range, not a page number, so
   you can see where it goes before you press it. Pills wrap on a phone and
   stay a comfortable tap target. */
.daypager {
  /* Centred, and directly under the feed. It is the one thing a reader who
     has reached the bottom is looking for, so it sits in the middle of the
     column where the eye already is, not flush left where it reads as a
     footnote. The max-width keeps the pills as one tight group on a wide
     screen instead of a thin line stretched across the page. */
  /* Squared off with the column, not floating in the middle of the window:
     its left and right edges line up with the yellow Build the test button
     above it and with every card on the page. The links inside stay centred,
     which is what makes them the thing you look at. */
  margin: 34px 0 0 0;
  padding: 24px 20px 22px 20px;
  /* White on the page's cream, not cream on cream: the sand fill it had first
     was the same colour as the page behind it, so the panel vanished and the
     links read as text floating in a gap. A card is what makes it look like
     something to press. */
  background: #fff;
  border: 1px solid #EADFC9;
  border-radius: 14px;
  text-align: center;
}
.daypager h4 { margin: 0 0 14px 0; font-size: 1.05rem; }
.daypager ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.daypager li { margin: 0; }
.daypager a,
.daypager .is-here {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}
.daypager a {
  background: var(--sand, #FDF6E9);
  border: 1px solid #EADFC9;
  color: #8E1B24;
  font-weight: 600;
}
.daypager a:hover { border-color: #B22430; background: #FBEFD8; }
.daypager .is-here {
  background: #B22430;
  border: 1px solid #B22430;
  color: #fff;
  font-weight: 600;
}
.daypager-archive {
  margin: 16px 0 0 0;
  font-size: 0.9rem;
  color: #6B5E55;
}
.daypager-archive a { color: #8E1B24; font-weight: 600; }

/* =====================================================================
   PROMPT DAILY 10, THE LEAGUE AND THE PROGRESS PAGES
   Small server-drawn charts (app/lib/viz.php) and the cards around them.
   ================================================================== */
.d10-hero { background: var(--ink); color: var(--cream); border-radius: var(--radius); padding: 22px 22px 20px; margin: 18px 0 6px; }
.d10-hero h2 { color: var(--cream); margin: 0 0 4px; font-size: 1.5rem; }
.d10-hero p { margin: 0 0 12px; color: #E9DFCB; }
.d10-hero .d10-tag { display: inline-block; background: var(--yellow); color: var(--ink); font-weight: 700; border-radius: 999px; padding: 3px 12px; font-size: .85rem; margin-bottom: 10px; }
.d10-hero .d10-points { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; padding: 0; margin: 0 0 14px; font-size: .9rem; color: #E9DFCB; }
.d10-hero .d10-points li::before { content: "✓ "; color: var(--yellow); }
.d10-hero .btn-ghost { color: var(--cream); border-color: #6B5E55; }

.d10-sessions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0; }
@media (max-width: 760px) { .d10-sessions { grid-template-columns: 1fr; } }
.d10-session { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.d10-session h3 { margin: 0; font-size: 1.15rem; }
.d10-session .d10-time { font-size: .85rem; color: var(--muted); }
.d10-session .d10-state { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.d10-state.live { color: var(--green-dark); }
.d10-state.done { color: var(--amber); }
.d10-state.soon { color: var(--muted); }
.d10-session .btn { margin-top: auto; text-align: center; }

.viz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 12px 0; }
.viz-tile { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.viz-tile b { display: block; font-family: var(--display); font-size: 1.6rem; line-height: 1.1; }
.viz-tile span { font-size: .8rem; color: var(--muted); }

.viz-ring { margin: 0; text-align: center; width: 120px; }
.viz-ring svg { width: 100%; height: auto; display: block; }
.viz-ring-track { fill: none; stroke: var(--line); stroke-width: 9; }
.viz-ring-fill { fill: none; stroke-width: 9; stroke-linecap: round; }
.viz-ring-num { font: 700 17px var(--sans); fill: var(--ink); }
.viz-ring figcaption { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.viz-rings { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-around; }

.viz-bars { display: flex; flex-direction: column; gap: 8px; }
.viz-bar-row { display: grid; grid-template-columns: minmax(90px, 34%) 1fr 64px; gap: 10px; align-items: center; font-size: .88rem; }
.viz-bar-track { background: var(--placeholder); border-radius: 999px; height: 10px; overflow: hidden; }
.viz-bar-fill { display: block; height: 100%; border-radius: 999px; }
.viz-bar-val { text-align: right; font-variant-numeric: tabular-nums; }
.viz-bar-val small { color: var(--muted); }

.viz-line { margin: 0; }
.viz-line svg { width: 100%; height: 120px; display: block; }
.viz-line-path { fill: none; stroke: var(--red); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.viz-line-dot { fill: var(--red); }
.viz-line-mid { stroke: var(--line); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.viz-line figcaption { font-size: .8rem; margin-top: 4px; }

.viz-days { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0; margin: 10px 0; }
.viz-days li { border-radius: 8px; padding: 8px 4px; text-align: center; border: 1.5px solid var(--line); background: var(--white); font-size: .72rem; }
.viz-days li b { display: block; font-size: 1.05rem; }
.viz-days li span, .viz-days li em { display: block; font-style: normal; color: var(--muted); }
.viz-days li.done { background: #E6F2EA; border-color: var(--green); }
.viz-days li.today { border-color: var(--yellow); }
.viz-days li.missed { background: #F9E9E9; border-color: #E2B4B4; }
@media (max-width: 480px) { .viz-days { grid-template-columns: repeat(4, 1fr); } }

.league-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.league-table { width: 100%; border-collapse: collapse; font-size: .92rem; background: var(--white); border-radius: var(--radius); overflow: hidden; }
.league-table th, .league-table td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.league-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: var(--placeholder); }
.league-table td.num, .league-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.league-table tr.me td { background: #FFF6DA; font-weight: 600; }
.league-table .up { color: var(--green-dark); }
.league-table .down { color: var(--red); }
.league-scroll { overflow-x: auto; }

.refer-link { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.refer-link input { flex: 1 1 260px; padding: 9px 11px; border: 1.5px solid var(--edge); border-radius: 8px; font: inherit; background: var(--white); }
.milestones { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 8px; }
.milestones li { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 8px; background: var(--white); border: 1px solid var(--line); }
.milestones li b { min-width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--placeholder); }
.milestones li.reached b { background: var(--green); color: #fff; }

.area-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.review-src { font-size: .82rem; margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; }

/* The menu gained a Daily 10 link. Keep every link on one line, and tighten
   the spacing on mid-width screens (and for the longer Malayalam labels) so the
   whole menu still fits beside the wordmark instead of running off the edge. */
.nav a { white-space: nowrap; }
@media (min-width: 861px) and (max-width: 1300px) {
  .nav { gap: 14px; }
  .nav a { font-size: .87rem; }
  html[lang="ml"] .nav { gap: 11px; }
  html[lang="ml"] .nav a { font-size: .82rem; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .wordmark .wm-text span { display: none; }
}
/* When the menu still cannot fit -- long Malayalam labels, a signed-in reader,
   a laptop-width window -- it wraps onto a second line under the wordmark
   rather than pushing the page sideways. */
@media (min-width: 861px) {
  .header-inner { flex-wrap: wrap; row-gap: 4px; }
  .nav { flex-wrap: wrap; justify-content: flex-end; row-gap: 2px; }
}

/* =========================================================================
   THE APP (installed from the browser)
   ========================================================================= */

/* The bottom tab bar exists on every page but only shows inside the
   installed app, where there is no browser back button or address bar. */
.app-tabs { display: none; }
@media (display-mode: standalone), (display-mode: window-controls-overlay) {
  @media (max-width: 860px) {
    .app-tabs {
      display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
      background: var(--white); border-top: 1px solid var(--line);
      padding: 4px max(4px, env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) max(4px, env(safe-area-inset-left));
      box-shadow: 0 -4px 16px rgba(29,26,25,.06);
    }
    .app-tabs a {
      flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
      padding: 6px 2px; min-height: 52px; justify-content: center;
      color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; border-radius: 8px;
    }
    .app-tabs a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .app-tabs a svg { width: 22px; height: 22px; }
    .app-tabs a.on { color: var(--red); background: rgba(178,36,48,.07); }
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
    .pa-net { bottom: calc(76px + env(safe-area-inset-bottom)); }
    #pa-toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
  }
  /* No "install" invitations inside the app itself. */
  [data-install], .app-installed-note { display: none !important; }
  .site-header { padding-top: env(safe-area-inset-top); }
}

/* Connection chip: offline / sending / waiting / all sent. */
.pa-net {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 70; max-width: calc(100vw - 32px);
  padding: 6px 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--ink); color: var(--cream); box-shadow: var(--shadow);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pa-net[hidden] { display: none; }
.pa-net::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; background: var(--muted); vertical-align: 1px; }
.pa-net.offline::before { background: #E46A5A; }
.pa-net.syncing::before, .pa-net.pending::before { background: var(--yellow); }
.pa-net.synced::before { background: #3FBF7F; }
.pa-net.failed { background: var(--red); }

/* Toast. */
#pa-toast {
  position: fixed; left: 16px; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 80;
  margin: 0 auto; max-width: 520px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px; background: var(--ink); color: var(--cream);
  box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 14px;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s;
}
#pa-toast.on { opacity: 1; transform: none; pointer-events: auto; }
#pa-toast span { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
#pa-toast button {
  border: 0; border-radius: 8px; padding: 8px 12px; min-height: 40px; cursor: pointer;
  background: var(--yellow); color: var(--ink); font: inherit; font-weight: 700;
}
@media (prefers-reduced-motion: reduce) { #pa-toast { transition: none; } }

/* The iPhone install steps. */
.pa-sheet { position: fixed; inset: 0; z-index: 90; background: rgba(29,26,25,.45); display: flex; align-items: flex-end; justify-content: center; padding: 16px; }
.pa-sheet[hidden] { display: none; }
.pa-sheet-box { background: var(--white); border-radius: 16px; padding: 20px; width: 100%; max-width: 440px; margin-bottom: env(safe-area-inset-bottom); }
.pa-sheet-box h3 { margin: 0 0 10px; }
.pa-sheet-box ol { margin: 0 0 16px; padding-left: 20px; line-height: 1.6; }

/* The /app page. */
.app-hero { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.app-hero img { border-radius: 18px; flex: none; box-shadow: var(--shadow); }
.app-feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 14px 0; }
.app-feats .card { margin: 0; }
.app-check { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.app-check input { width: 20px; height: 20px; flex: none; }
[data-install] { min-height: 48px; }

/* =========================================================================
   NOTHING SPILLS SIDEWAYS ON A PHONE
   Three places used to scroll left-right inside the page on a phone. Each
   now fits the screen instead.
   ========================================================================= */

/* The section jump bar: the buttons wrap onto a second line. */
@media (max-width: 620px) {
  .jump { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
}

/* The plan comparison: the row's name sits on its own line, with the three
   plans side by side under it -- words never have to break mid-letter. */
@media (max-width: 560px) {
  .plantable { overflow-x: visible; }
  .plantable table { min-width: 0; display: block; font-size: .85rem; }
  .plantable thead, .plantable tbody { display: block; }
  .plantable tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plantable thead th:first-child { display: none; }
  .plantable th, .plantable td { padding: 9px 6px; overflow-wrap: break-word; }
  .plantable thead th { font-size: .8rem; }
  .plantable tbody th[scope=row] {
    grid-column: 1 / -1; padding: 8px 12px 4px; border-bottom: 0;
    background: #FDF9F1; font-size: .82rem; color: var(--muted);
  }
}

/* The League: each row becomes a small card --
     rank | name                    | marks
          | 3 quizzes · 4:10 · ▲ 2                 */
@media (max-width: 480px) {
  .league-scroll { overflow-x: visible; }
  .league-table thead { display: none; }
  .league-table, .league-table tbody { display: block; }
  .league-table tr {
    display: grid; grid-template-columns: 30px auto auto 1fr auto;
    column-gap: 12px; row-gap: 2px; align-items: baseline;
    padding: 10px 12px; border-bottom: 1px solid var(--line);
  }
  .league-table tr.me { background: #FFF6DA; }
  .league-table td { border: 0; padding: 0; background: none !important; text-align: left !important; min-width: 0; }
  .league-table td:nth-child(1) { grid-column: 1; grid-row: 1 / 3; font-weight: 700; color: var(--muted); }
  .league-table td:nth-child(2) { grid-column: 2 / 5; grid-row: 1; overflow-wrap: anywhere; }
  .league-table td:nth-child(3) { grid-column: 5; grid-row: 1; text-align: right !important; white-space: nowrap; }
  .league-table td:nth-child(4), .league-table td:nth-child(5), .league-table td:nth-child(6) { grid-row: 2; font-size: .8rem; color: var(--muted); white-space: nowrap; }
  .league-table td:nth-child(4) { grid-column: 2; }
  .league-table td:nth-child(5) { grid-column: 3; }
  .league-table td:nth-child(6) { grid-column: 4; }
  .league-table td[data-l]::before { content: attr(data-l) ' '; }
  .league-table td[colspan] { grid-column: 1 / -1; grid-row: auto; }
}

/* .btn sets display, which would otherwise override "hidden" on the
   Install button and show it in browsers that cannot install. */
[data-install][hidden] { display: none !important; }