/* ============================================================
   news.css - CycleCalcs News: the hub, the topic pages and the story.

   A READING PAGE FIRST. A story is one column at a reading measure
   (about 68 characters), set a little larger than the tools, with the
   drawings on the brand's navy "space window" panel in every theme, the
   way the homepage's tonight card is. Everything is built on the site's
   tokens, so the light, dark and night themes need almost nothing here;
   night mode turns the navy panels red-dark like the homepage's.

   The peer-review label is the one colored element above the headline,
   on purpose: amber for a preprint, green for peer-reviewed, neutral for
   everything else.
   ============================================================ */

.news-page { max-width: 46rem; margin: 0 auto; padding-bottom: 48px; }
.nw-hub { max-width: 60rem; }

/* ---------- labels ---------- */
.nw-kicker, .nw-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; }
.nw-topic, .nw-card-topic {
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
}
.nw-badge {
  display: inline-block; font-size: .74rem; font-weight: 700; line-height: 1.3; padding: 2px 8px;
  border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--surface);
}
.nw-badge--peer { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 8%, var(--bg)); }
.nw-badge--preprint { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); background: var(--warn-soft); }

/* ---------- the story's head ---------- */
.nw-head { margin: 22px 0 18px; }
.nw-article h1, .nw-hub-head h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.45rem); line-height: 1.15; letter-spacing: -.025em; margin: 0 0 12px; }
.nw-dek { font-size: 1.16rem; line-height: 1.5; color: var(--muted); margin: 0 0 14px; }
.nw-byline { font-size: .9rem; color: var(--muted); margin: 0; }
.nw-byline a { color: var(--text); font-weight: 700; }

.nw-alert {
  margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: .95rem;
  background: var(--surface); border-left: 4px solid var(--accent);
}
.nw-alert--preprint { background: var(--warn-soft); border-left-color: var(--warn); }
.nw-alert--retracted { background: var(--bad-soft); border-left-color: var(--bad); }

/* ---------- the short version ---------- */
.nw-keys {
  margin: 0 0 24px; padding: 16px 18px 6px; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
}
.nw-keys h2 { font-size: .8rem; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.nw-keys ul { margin: 0 0 10px; padding-left: 1.15em; }
.nw-keys li { margin: 0 0 6px; font-weight: 600; line-height: 1.45; }

/* ---------- figures ---------- */
.nw-fig { margin: 26px 0; }
.nw-fig img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--surface-2); }
.nw-drawing {
  display: block; background: #0E1430; border-radius: var(--radius); padding: clamp(10px, 2.5vw, 22px); line-height: 0;
}
.nw-drawing svg { display: block; width: 100%; height: auto; }
.nw-fig figcaption { font-size: .86rem; line-height: 1.45; color: var(--muted); margin-top: 8px; }
.nw-credit { font-size: .8rem; letter-spacing: .01em; }
.nw-cap + .nw-credit::before { content: ""; }

/* ---------- the story ---------- */
/* A story's paragraphs are the article's direct children (pages.mjs says
   why); the standards page keeps them in .nw-body. */
.nw-body, .nw-article > p, .nw-article > ul { font-size: 1.08rem; line-height: 1.7; }
.nw-body p, .nw-article > p { margin: 0 0 1.05em; }
.nw-body h2, .nw-article > h2 { font-size: 1.32rem; margin: 1.7em 0 .55em; letter-spacing: -.01em; }
.nw-body ul, .nw-article > ul { padding-left: 1.2em; margin: 0 0 1.05em; }
.nw-body li, .nw-article > ul li { margin-bottom: .4em; }
.nw-body a, .nw-article > p a, .nw-article > ul a, .nw-keys a, .nw-observe a:not(.btn) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* ---------- by the numbers ---------- */
.nw-numbers, .nw-observe, .nw-tools, .nw-sources, .nw-corrections { margin: 34px 0 0; }
.nw-numbers h2, .nw-observe h2, .nw-tools h2, .nw-sources h2, .nw-corrections h2, .nw-more h2, .nw-wire h2 {
  font-size: 1.1rem; margin: 0 0 12px; padding-top: 14px; border-top: 2px solid var(--text);
}
.nw-numbers dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr)); gap: 10px; }
.nw-numbers dl > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; }
.nw-numbers dt { font-size: .82rem; color: var(--muted); font-weight: 600; margin-bottom: 4px; }
.nw-numbers dd { margin: 0; }
.nw-val { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.nw-note { font-size: .85rem; color: var(--muted); }
.nw-ref { font-size: .78rem; font-weight: 700; vertical-align: super; line-height: 0; }

/* ---------- see it yourself: the space window ---------- */
.nw-observe { background: #0E1430; color: #E7EAF6; border-radius: var(--radius); padding: 4px 20px 18px; }
.nw-observe h2 { color: #FFFFFF; border-top-color: #F5B301; }
.nw-observe p { color: #CBD1EA; }
.nw-observe a:not(.btn) { color: #A5B4FC; }
.nw-computed { margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 8px; }
.nw-computed > div { background: #151C3F; border: 1px solid #2A3354; border-radius: var(--radius-sm); padding: 10px 12px; }
.nw-computed dt { font-size: .78rem; color: #A9B1D6; font-weight: 600; }
.nw-computed dd { margin: 2px 0 0; font-weight: 800; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.nw-method { font-size: .8rem; color: #A9B1D6; margin-bottom: 0; }
.nw-observe .btn { background: #F5B301; color: #0E1430; }
.nw-observe .btn:hover { background: #FFC83D; text-decoration: none; }

/* ---------- tools ---------- */
.nw-tools ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 10px; }
.nw-tools a { display: flex; flex-direction: column; gap: 3px; height: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.nw-tools a:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }
.nw-tool-name { font-weight: 800; color: var(--text); }
.nw-tool-why { font-size: .88rem; color: var(--muted); }

/* ---------- sources, corrections, how it was made ---------- */
.nw-sources ol { margin: 0; padding-left: 1.4em; font-size: .93rem; }
.nw-sources li { margin-bottom: 8px; overflow-wrap: anywhere; }
.nw-src-kind { font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.nw-credits { font-size: .86rem; color: var(--muted); margin-top: 10px; }
.nw-corrections ul { margin: 0; padding-left: 1.2em; font-size: .95rem; }
.nw-how { margin-top: 34px; padding: 14px 16px; border-radius: var(--radius-sm); background: var(--surface); font-size: .9rem; color: var(--muted); }
.nw-how p:last-child { margin-bottom: 0; }
.nw-how strong { color: var(--text); }

/* ---------- cards: more news ---------- */
.nw-more { max-width: 60rem; margin: 10px auto 48px; }
.nw-cards { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 14px; }
.nw-card a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); background: var(--bg); }
.nw-card a:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow); }
.nw-card .nw-card-meta { margin: 0; }
.nw-card-h { font-weight: 800; font-size: 1.05rem; line-height: 1.3; }
.nw-card-dek { font-size: .92rem; color: var(--muted); line-height: 1.45; margin: 0; }
.nw-card time, .nw-lead time { font-size: .8rem; color: var(--muted); margin-top: auto; }

/* ---------- the hub ---------- */
.nw-hub-head { margin: 22px 0 14px; max-width: 46rem; }
.nw-hub-links { font-size: .92rem; margin: 0; }
.nw-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.nw-topics a {
  font-size: .86rem; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--text); background: var(--bg);
}
.nw-topics a:hover { border-color: var(--accent); text-decoration: none; }
.nw-topics a[aria-current="page"] { background: var(--text); color: var(--bg); border-color: var(--text); }

.nw-lead { margin: 0 0 30px; }
.nw-lead-link {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 0; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--bg);
}
.nw-lead-link:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow); }
.nw-lead-media { display: flex; align-items: center; justify-content: center; background: #0E1430; min-height: 220px; }
.nw-lead-media.nw-drawing { border-radius: 0; }
.nw-lead-media img { width: 100%; height: 100%; object-fit: cover; }
.nw-lead-text { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; }
.nw-lead-h { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); font-weight: 800; line-height: 1.2; letter-spacing: -.015em; }
.nw-lead .nw-card-dek { font-size: 1rem; }
.nw-lead-link:not(:has(.nw-lead-media)) { grid-template-columns: 1fr; }

.nw-wire { margin: 0 0 30px; }
.nw-rows { list-style: none; margin: 0 0 24px; padding: 0; }
.nw-row { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.nw-row:first-child { padding-top: 4px; }
.nw-row > time { font-size: .82rem; font-weight: 700; color: var(--muted); padding-top: 2px; font-variant-numeric: tabular-nums; }
.nw-row .nw-card-meta { margin-bottom: 4px; }
.nw-row-h { display: block; font-size: 1.12rem; font-weight: 800; line-height: 1.3; color: var(--text); margin-bottom: 4px; }
.nw-row-h:hover { color: var(--accent); }
.nw-empty { padding: 18px; border: 1px dashed var(--border); border-radius: var(--radius); color: var(--muted); }

.nw-promise { margin: 8px 0 0; padding: 18px 20px 8px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); }
.nw-promise h2 { font-size: 1rem; margin: 0 0 10px; }
.nw-promise ul { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 10px 18px; font-size: .92rem; color: var(--muted); }
.nw-promise strong { display: block; color: var(--text); }

.nw-standards .nw-body h2:first-child { margin-top: .6em; }

@media (max-width: 720px) {
  .nw-lead-link { grid-template-columns: 1fr; }
  .nw-lead-media { min-height: 0; }
  .nw-lead-text { padding: 16px 16px 18px; }
  .nw-row { grid-template-columns: 1fr; gap: 2px; }
  .nw-body, .nw-article > p, .nw-article > ul { font-size: 1.04rem; }
  .nw-observe { padding: 2px 14px 14px; }
}

/* Night mode: the navy windows go dark red like the rest of the page. */
:root[data-theme="night"] .nw-drawing, :root[data-theme="night"] .nw-lead-media,
:root[data-theme="night"] .nw-observe { background: var(--surface); color: var(--text); }
:root[data-theme="night"] .nw-observe h2, :root[data-theme="night"] .nw-computed dd { color: var(--text); }
:root[data-theme="night"] .nw-observe p, :root[data-theme="night"] .nw-computed dt, :root[data-theme="night"] .nw-method { color: var(--muted); }
:root[data-theme="night"] .nw-computed > div { background: var(--surface-2); border-color: var(--border); }
:root[data-theme="night"] .nw-observe .btn { background: var(--accent); color: var(--on-accent); }

/* A figure inside the navy window keeps its caption readable on navy. */
.nw-observe .nw-fig figcaption { color: #A9B1D6; }