/* ============================================================================
   شروحات (Shorohat) — Arabic, right to left
   ----------------------------------------------------------------------------
   Design brief: simple, no unusual colours, images carry the interest.

   So: white surfaces, a faintly tinted page, thin grey borders, and one
   restrained teal used only for links and primary buttons. No accent bars, no
   offset shadows, no background pattern, no gradients.

   RTL is done with logical properties throughout -- margin-inline-start,
   padding-inline, inset-inline, border-inline-start. There is deliberately not a
   single `left:` or `right:` in the layout, so direction is decided once by the
   `dir` attribute and every component follows. Physical properties would each
   need their own RTL override, which is how mirrored layouts end up subtly wrong.
   ========================================================================= */

/* These tokens are the real palette. `site.brand` in the config feeds only the mark and
   the favicon, so changing a colour there and not here leaves the logo one colour and
   every link another. The two are kept in step by hand; if they ever disagree, this file
   is what the visitor sees. */
:root {
  --ink: #14181c;
  --ink-2: #454e55;
  --ink-3: #75808a;
  --paper: #ffffff;
  --surface: #f5f8f8;
  --surface-2: #eaf0f0;
  --line: #dde5e5;
  --line-2: #c7d3d3;

  /* Teal, deliberately far from the sister site's violet. Both sites cover the same
     game, so a neighbouring hue would make them read as one operation with two front
     ends and devalue both. It is also not #2563eb -- Tailwind's blue-600 is the single
     most used accent on the web and the reason a clean layout still reads as a template
     somebody dropped content into.
     Contrast on white: 5.5:1 for --accent, 7.6:1 for --accent-dark, both AA for body text.
     --highlight is orange and is NOT AA on white: mark and small details only, never text. */
  --accent: #0f766e;
  --accent-dark: #115e59;
  --accent-wash: #f0fdfa;
  --highlight: #f97316;
  --ok: #157347;
  --warn-bg: #fff8e6;
  --warn-line: #e0b400;

  --radius: 10px;
  --radius-sm: 6px;

  --font: "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;

  --wrap: 1180px;
  --gap: 20px;
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font: 16px/1.8 var(--font);
}

img { max-width: 100%; display: block; }
a { color: var(--accent); }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4 { line-height: 1.35; }

.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute;
  inset-inline-start: -9999px;
  top: 0;
  background: var(--paper);
  padding: 10px 16px;
  z-index: 200;
}
.skip:focus { inset-inline-start: 0; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ header */

.site-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 60;
}

.head-row { display: flex; align-items: center; gap: 14px; min-height: 62px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
}

/* The mark is an inline SVG now, so this is a frame around it and nothing more. It used
   to be the logo itself -- a bare accent-coloured square, which is the placeholder every
   unfinished site ships with. */
.brand-mark {
  width: 32px; height: 32px;
  flex: 0 0 auto;
  display: block;
}

.brand-mark svg { width: 100%; height: 100%; display: block; }

.brand-text { font-size: 19px; font-weight: 700; }

.main-nav {
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
  flex-wrap: wrap;
}

.main-nav a {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-2);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
}

.main-nav a:hover { background: var(--surface); color: var(--ink); }
.main-nav a[aria-current="page"] { background: var(--accent-wash); color: var(--accent-dark); font-weight: 600; }

.icon-btn {
  width: 38px; height: 38px;
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink-2);
  flex: 0 0 auto;
  padding: 0;
}

.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--surface); color: var(--ink); }
.nav-toggle { display: none; }

.search-bar { display: none; padding-bottom: 14px; }
.search-bar.is-open { display: block; }

.search-bar input,
.search-page input {
  width: 100%;
  font: 16px var(--font);
  padding: 11px 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: inherit;
}

.search-bar input:focus,
.search-page input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* -------------------------------------------------------------------- cards */

.chip {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-dark);
  text-decoration: none;
  align-self: flex-start;
}

.chip.is-quiet { background: var(--surface-2); color: var(--ink-2); }

.meta {
  font-size: 13px;
  color: var(--ink-3);
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(276px, 1fr));
  gap: var(--gap);
}

.card,
.lead-card,
.mini {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.card:hover,
.lead-card:hover,
.mini:hover {
  border-color: var(--line-2);
  box-shadow: 0 2px 10px rgba(26, 29, 33, .07);
}

.card { display: flex; flex-direction: column; }

/* Covers are authored 16:9, so the ratio is declared and the image fills it
   without cropping.

   Only where the width is the known side. In .card and .lead-card the image spans the
   full card width, so the ratio derives its height -- which is the intended direction.
   .mini is the exception and is corrected below. */
.card .shot,
.lead-card .shot,
.mini .shot { aspect-ratio: 16 / 9; background: var(--surface-2); }
.card .shot img,
.lead-card .shot img,
.mini .shot img { width: 100%; height: 100%; object-fit: cover; }

.card .body {
  padding: 15px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.card h3 { font-size: 17px; margin: 0; }
.card p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

.lead-card { display: block; }
.lead-card .body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.lead-card h2 { font-size: clamp(21px, 2.4vw, 27px); margin: 0; }
.lead-card p { margin: 0; color: var(--ink-2); font-size: 15.5px; }

.mini { display: grid; grid-template-columns: 132px 1fr; gap: 0; align-items: stretch; }

/* The image column takes its width from the track and its height from the row.
   
   `aspect-ratio` has to be switched off here, and this is the one place in the file where
   it is actively wrong. The row is as tall as the wrapped title, and `align-items:
   stretch` makes that height definite -- so the ratio computed the *width* from it:
   122px tall x 16/9 = 217px, inside a 132px track. The image grew 85px sideways over the
   text column, and because the body is later in the DOM the title and the chip painted on
   top of it. Two symptoms, one cause.
   
   With the ratio off, both sides are definite (track width, row height) and object-fit on
   the img does the cropping. */
.mini .shot {
  aspect-ratio: auto;
  height: 100%;
  border-inline-end: 1px solid var(--line);
}

/* A grid item's default `min-width: auto` refuses to shrink below its longest word, which
   would push this track wider than its share and overflow the card the same way. These
   titles are long and contain Latin runs like "Blox Fruits" that do not break. */
.mini-body {
  min-width: 0;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  justify-content: center;
}

.mini h3 { font-size: 15.5px; margin: 0; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------- hero */

.hero { padding: 26px 0 6px; }

.hero-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--gap);
  align-items: start;
}

.hero-side { display: grid; gap: 12px; }

/* The lead card and the ad under it are one grid cell, so the ad sits below the big
   article in both layouts: under it in the wide column on desktop, and directly under
   it on mobile where the grid collapses to a single column. Placing the ad as its own
   grid child instead would drop it into the second column on desktop. */
.hero-lead { display: grid; gap: 12px; align-content: start; }

/* ------------------------------------------------- start here (categories) */

/* Sits on the tinted page rather than on a white card, so the strip reads as a band
   separating the lead story from the article grids instead of as another row of cards. */
.start-strip {
  padding: 26px 0 4px;
}

.start-title { font-size: 19px; margin: 0 0 4px; }

.start-lede {
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 15px;
  max-width: 62ch;
}

/* auto-fit, not auto-fill: with four panels and a wide viewport auto-fill leaves an empty
   phantom track and the row looks unbalanced. 210px is the width at which the longest
   category blurb still wraps to three lines rather than four. */
.start-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

/* The inline-start border is the one piece of accent colour in the block. Logical, not
   `border-left`, so it lands on the correct side under `dir="rtl"` without an override. */
.start-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}

.start-card:hover {
  border-color: var(--line-2);
  border-inline-start-color: var(--accent-dark);
  box-shadow: 0 2px 10px rgba(20, 24, 28, .07);
}

.start-card h3 { margin: 0; font-size: 16.5px; }

/* The blurb carries the weight here, so it is not truncated. A clamped explanation is
   worse than none: it invites a click without answering what the section contains. */
.start-card p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.65;
}

/* Pushed to the bottom so the counts line up across panels whose blurbs differ in
   length -- ragged badges made the row look broken. */
.start-count {
  margin-block-start: auto;
  padding-block-start: 6px;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 600;
}

/* ------------------------------------------------------------ section head */

.sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 36px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.sec-head h2 { font-size: 19px; margin: 0; }
.sec-head .more { font-size: 14px; font-weight: 600; text-decoration: none; }
.sec-head .more:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ layout */

.page-body { padding: 24px 0 56px; }

/* 336px, not 300: the sidebar ad unit accepts 336x280, and a 300px column would
   force that size to be dropped for no reason other than 36 pixels. */
.with-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: 30px;
  align-items: start;
}

.rail { display: grid; gap: 18px; position: sticky; top: 80px; }

.rail-box {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.rail-box h2 {
  font-size: 15px;
  margin: 0;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.rail-box ol { margin: 0; padding: 10px 16px 14px; padding-inline-start: 34px; }
.rail-box li { margin: 10px 0; font-size: 14.5px; }
.rail-box a { text-decoration: none; color: var(--ink); }
.rail-box a:hover { color: var(--accent-dark); text-decoration: underline; }

/* ----------------------------------------------------------------- article */

.article-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px 30px;
}

.crumbs {
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* The trailing item is the current page, so it is not a link and should not read
   as one. */
.crumbs > span:last-child {
  color: var(--ink-2);
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crumb-sep { color: var(--line-2); }

.article-head h1 {
  font-size: clamp(24px, 3.2vw, 34px);
  margin: 12px 0 12px;
}

.lede { font-size: 17px; color: var(--ink-2); margin: 0 0 14px; }

.article-head .meta { margin: 0 0 22px; }

.cover {
  margin: 0 0 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.cover img { width: 100%; height: auto; }
.cover figcaption {
  font-size: 13px;
  color: var(--ink-3);
  padding: 9px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.prose { font-size: 16.5px; }
.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: 21px; margin-top: 1.8em; }
.prose h3 { font-size: 18px; margin-top: 1.5em; }
.prose ul, .prose ol { padding-inline-start: 26px; }
.prose li + li { margin-top: 6px; }
.prose a { text-decoration: underline; text-underline-offset: 3px; }

.prose code {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 14.5px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  direction: ltr;
  display: inline-block;
}

.prose blockquote {
  margin: 1.6em 0;
  padding: 14px 18px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border-inline-start: 3px solid var(--accent);
}

.prose blockquote p { margin: 0; }

.spec-table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  background: var(--paper);
}

.spec-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.spec-table th,
.spec-table td {
  padding: 11px 14px;
  text-align: start;
  border-bottom: 1px solid var(--line);
}
.spec-table th { background: var(--surface); font-weight: 600; font-size: 14px; }
.spec-table tr:last-child td { border-bottom: 0; }

/* Codes are Latin strings inside Arabic prose: forced LTR so the characters do
   not reorder, which would make a code unusable. */
.code-cell { direction: ltr; text-align: start; font-family: "SFMono-Regular", Consolas, monospace; }

/* --------------------------------------------------------------- ad slots */

.ad-slot {
  --ad-h: 280px;
  --ad-h-mobile: 280px;
  display: block;
  margin: 26px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* Height reserved before the ad loads, so the page does not shift. Layout
     stability is also what keeps a slot viewable, which is what CPM is priced
     against. */
  min-height: calc(var(--ad-h) + 24px);
}

.ad-label {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  padding: 6px 10px 0;
}

.ad-body { min-height: var(--ad-h); display: grid; place-items: center; }

.ad-slot.is-placeholder { background: var(--surface); border-style: dashed; }
.ad-placeholder-label { font-size: 13px; color: var(--ink-3); }

/* A slot the exchange did not fill. Set by app.js from GPT's slotRenderEnded event.
   Without this the reserved height stays behind as a bordered empty box with an
   "advertisement" label on it, which reads as a broken layout rather than as no ad. */
.ad-slot[data-ad-empty] { display: none; }

.ad-slot.is-sticky { position: sticky; top: 80px; }
.ad-slot.is-mobile-only { display: none; }

/* A 300x600 has no mobile form worth bidding on, so it is dropped rather than
   squeezed into a shape no advertiser buys. */
.ad-slot.is-desktop-only { display: block; }

/* The anchor rules used to be here: a fixed bar pinned to the bottom, its own close
   button, body padding to keep it off the footer, and a rule that hid it near a download
   control.

   Gone with the slot. An anchor is a Google web format and Ad Manager renders it itself,
   as a codeless ad unit, outside the page's flow and sized to the creative that wins.
   Wrapping it in one of these boxes capped it to the box's width, which is what made it
   small, and fixed it to the bottom regardless of how the unit was configured. There is
   nothing left for this stylesheet to say about it.

   Nothing here styles the codeless anchor either: it renders in Google's own container,
   which this page does not own and must not restyle. */

/* The slot box tracks the creative that won. app.js narrows --ad-h once the size is
   known, so a 90-tall leaderboard stops sitting in a box reserved for 250. */
.ad-slot[data-ad-size] { transition: min-height .15s ease; }

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: 600 16px var(--font);
  text-decoration: none;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background .15s ease;
}

.btn:hover { background: var(--accent-dark); color: #fff; }
.btn.is-wide { width: 100%; }
.btn.is-ghost { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.btn.is-ghost:hover { background: var(--surface); color: var(--ink); }

.btn[aria-disabled="true"] {
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: not-allowed;
  pointer-events: none;
}

/* -------------------------------------------------------- call to action */

/* Separated from any ad above it by a labelled divider and enforced clearance.
   The placement policy prohibits ads that could be mistaken for a download link,
   so the real control sits in its own panel and looks like nothing else. */
.dl-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 40px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}

.dl-sep::before, .dl-sep::after { content: ""; height: 1px; background: var(--line); flex: 1; }

.dl-panel {
  margin-top: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 22px;
}

.dl-panel h2 { font-size: 19px; margin: 0 0 6px; }
.dl-panel .dl-note { margin: 0 0 16px; font-size: 15px; color: var(--ink-2); }

.dl-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.dl-facts div {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.dl-facts dt { font-size: 12px; color: var(--ink-3); margin: 0; }
.dl-facts dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; }

.dl-clear { height: 120px; }

/* ------------------------------------------------------ step (interstitial) */

.step-wrap { max-width: 720px; margin-inline: auto; }

.steps { display: flex; gap: 8px; margin-bottom: 22px; }

.step-pip {
  flex: 1;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  color: var(--ink-3);
  text-align: center;
}

.step-pip.is-done { background: var(--accent-wash); color: var(--accent-dark); border-color: var(--accent-wash); }
.step-pip.is-now { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }

.step-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
}

.step-card h1 { font-size: clamp(21px, 2.8vw, 27px); margin: 0 0 10px; }

.countdown-row { display: flex; align-items: center; gap: 16px; margin: 18px 0; }

/* The UA rule for [hidden] is display:none, but the author rule above sets display and
   wins on specificity, so the row would render regardless. Needed because the article
   panel ships its counter hidden and reveals it when the button is pressed -- without this
   the counter would sit there at its starting number on a page with no script running. */
.countdown-row[hidden] { display: none; }

.countdown {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  min-width: 56px;
  text-align: center;
}

.countdown-row p { margin: 0; font-size: 15px; color: var(--ink-2); }

.step-back { margin: 18px 0 0; font-size: 14.5px; }
.step-back a { text-decoration: none; }
.step-back a::before { content: "\2039\00a0"; }
.step-back a:hover { text-decoration: underline; }

/* The destination URL is Latin text inside an Arabic page: forced LTR so it reads
   correctly and can be checked before it is followed. */
.dest {
  direction: ltr;
  text-align: start;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 13.5px;
  word-break: break-all;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--ink-2);
}

.notice {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  padding: 13px 15px;
  font-size: 14.5px;
  margin: 18px 0 0;
}

/* --------------------------------------------------------------- comments */

.comments { margin-top: 34px; }

.comment-count {
  display: inline-block;
  min-width: 24px;
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  vertical-align: 2px;
}

.comment-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; }

.comment {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
}

/* The anchor a #comment-N link lands on. Without the offset the targeted comment sits
   flush against the top edge of the viewport with no context above it. */
.comment { scroll-margin-top: 20px; }

.comment-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.comment-who { font-weight: 600; font-size: 15px; }
.comment-head time { font-size: 13px; color: var(--ink-3); }

.comment-text { font-size: 15.5px; color: var(--ink-2); }
.comment-text p { margin: 0; }
.comment-text p + p { margin-top: 0.8em; }

.comment-empty {
  color: var(--ink-2);
  background: var(--surface);
  border: 1px dashed var(--line-2);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 0 0 26px;
  font-size: 15px;
}

.comment-form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px 22px;
}

.comment-form h3 { font-size: 17px; margin: 0 0 16px; }

.cf-field { display: block; margin-bottom: 14px; }
.cf-field > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }

.cf-field input,
.cf-field textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 15.5px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}

.cf-field textarea { resize: vertical; min-height: 108px; line-height: 1.7; }

.cf-field input:focus-visible,
.cf-field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* The honeypot. Moved out of view rather than hidden with `display:none`, because a
   script that reads computed styles skips a field it can see is hidden. Off-canvas in
   the inline direction so it cannot widen the page in either writing direction, and
   sized to nothing so it cannot be reached by pointer either. */
.cf-trap {
  position: absolute;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.cf-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.cf-actions .btn { flex: 0 0 auto; }
.cf-note { margin: 0; font-size: 13.5px; color: var(--ink-3); flex: 1 1 240px; }

.cf-msg { margin-top: 14px; font-size: 14.5px; }
.cf-msg:empty { display: none; }

.cf-msg.is-ok {
  background: var(--accent-wash);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--ink);
}

.cf-msg.is-err {
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  color: var(--ink);
}

/* The receipt page a no-JavaScript submit lands on. */
.comment-result { max-width: 620px; margin-inline: auto; text-align: center; }
.comment-result .lede { margin-inline: auto; max-width: 44ch; }
.comment-result.is-error h1 { color: var(--ink); }

/* ------------------------------------------------------------------ footer */

.site-foot {
  background: var(--paper);
  border-top: 1px solid var(--line);
  padding: 32px 0 24px;
  margin-top: 36px;
}

.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 28px; }
.foot-brand { font-size: 17px; margin: 0 0 10px; }
.foot-grid h3 { font-size: 15px; margin: 0 0 12px; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin: 8px 0; font-size: 14.5px; }
.foot-grid a { text-decoration: none; color: var(--ink-2); }
.foot-grid a:hover { color: var(--accent-dark); text-decoration: underline; }
.foot-blurb { font-size: 14.5px; color: var(--ink-2); margin: 0 0 10px; }

.foot-base {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ pager */

.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 34px 0 0; flex-wrap: wrap; }

.pager a, .pager span {
  border: 1px solid var(--line-2);
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 9px 15px;
  text-decoration: none;
  font-size: 14.5px;
  color: var(--ink);
}

.pager a:hover { background: var(--surface); }
.pager .is-current { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.pager .is-off { color: var(--ink-3); background: var(--surface); }

/* ----------------------------------------------------------------- search */

.search-page { max-width: 760px; }
.search-results { display: grid; gap: 12px; margin-top: 20px; }

.search-hit {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
  text-decoration: none;
  color: inherit;
}

.search-hit:hover { border-color: var(--line-2); }
.search-hit .chip { margin-bottom: 8px; }
.search-hit h3 { font-size: 16.5px; margin: 0 0 5px; }
.search-hit p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.search-none { color: var(--ink-2); }

/* ------------------------------------------------------------------ 404 */

.not-found { text-align: center; padding: 60px 0; }
.not-found .meta { justify-content: center; }
.not-found h1 { font-size: clamp(28px, 5vw, 46px); margin: 12px 0 14px; }
.not-found .lede { margin-inline: auto; max-width: 46ch; }
.not-found p:last-child { margin-top: 24px; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .with-rail { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .ad-slot.is-sticky,
  .ad-slot.is-desktop-only { display: none; }
}

@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .head-row { flex-wrap: wrap; }
  .main-nav { display: none; width: 100%; margin: 0; }
  .main-nav.is-open { display: grid; padding-bottom: 12px; }
  .nav-toggle { display: grid; margin-inline-start: auto; }
  .article-card { padding: 20px; }
  .ad-slot.is-mobile-only { display: block; }
  .dl-clear { height: 90px; }

  /* In-article slots break out of the card's padding on a phone.
     ----------------------------------------------------------------------------
     Not cosmetic. app.js caps the sizes it offers at the measured width of the box the
     slot sits in, so the card's 20px of inner padding was setting a price on inventory:
     on a 360px screen -- the commonest Android width there is -- the box measured 286px,
     and every fixed size was dropped. The slot could offer `fluid` and nothing else, which
     is a native-only format with a fraction of the demand a banner has. That is one
     format on the device most readers arrive with.

     Cancelling the padding takes the box to 328px, which fits 300x250, 320x100 and 320x50.
     The ad still sits inside the card's border; it just stops being indented by text
     padding it never needed. Text wants a reading margin. A banner does not. */
  .article-card .ad-slot {
    margin-inline: -20px;
  }
}

@media (max-width: 560px) {
  .mini { grid-template-columns: 108px 1fr; }
  .step-card, .dl-panel { padding: 17px; }
  .countdown { font-size: 34px; }
  .comment-form { padding: 16px; }
  /* Full-width button: at this width the note wraps under it anyway, and a narrow
     button beside wrapped text reads as an afterthought. */
  .cf-actions .btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

@media print {
  .ad-slot, .site-head, .site-foot, .rail, .dl-panel, .skip,
  .comment-form { display: none !important; }
}

/* ---------------------------------------------------- overlay ad container
   Holder for AdsKeeper formats that draw themselves over the page: the
   click-triggered interstitial, exit pop-up, and in-site notification.

   These get no reserved box, unlike .ad-slot. An interstitial does not occupy a
   position in the document flow -- the widget positions itself -- so reserving
   space for one would leave a visible empty gap in the article for something
   that renders somewhere else entirely.

   Zero-sized rather than display:none, because a container the browser has
   collapsed entirely is one the widget script cannot measure or attach to. The
   widget's own markup escapes this box through overflow:visible. */
.ad-overlay {
  position: relative;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}