/* Styling for templates/_edition_state.html -- the "nothing published yet"
 * and "next edition is scheduled" states on the four product pages.
 *
 * External rather than added to each page's inline <style>, for the same
 * CSP reason as homepage.css: `style-src 'self'` covers a file in both the
 * enforced and the stricter report-only policy (fa2536d), so four pages
 * gain shared styling without growing the inline inventory tfc-70 has to
 * clear. It also means one copy instead of four near-copies -- the exact
 * drift _chips.html and _image_credit.html were extracted to stop.
 *
 * The shipped empty state was centred grey text on white: it read as an
 * error page. This one is built out of the publication's own parts -- navy
 * rule, mono eyebrow, serif headline, yellow underline -- because on
 * /ctrl-shift it IS the page, not a corner of one.
 *
 * Left-aligned, not centred. Centred text at this length is hard to read
 * and reads as a system message; left-aligned with a measure limit reads
 * as editorial.
 *
 * TYPE COMES FROM THE SCALE (2026-08-16). Every rule below takes one of
 * the eight roles on :root in base.html; this file declares no
 * font-family and no literal font size. Two things changed visibly:
 * .es-body and .es-teaser-sum were IBM Plex Serif LIGHT (300), which is
 * the thin-serif-at-small-size failure behind review_notes 150/151/161,
 * and both now sit at 400 and start at 17px on a phone rather than 15px.
 * See docs/DESIGN-SYSTEM.md.
 */

/* THE BOX IS THE CARD COMPONENT (2026-08-16). `.es` is listed in
   components.css's base and in `--stream-a`, `--editorial` and
   `--rail`, so the #fffafa ground, the hairline, the 4px radius, the
   6px navy rail and the fluid padding are all declared once for every
   card on the site. What stays here is the measure and the gap, which
   are about where this panel sits rather than about what it is. */
.es{margin:0 0 26px;max-width:760px}
/* Warm ground for the Stream B products (Ctrl+Shift, The Feature),
   applied by the page rather than guessed here -- the cool/warm split
   is a deliberate editorial signal, not a per-component default.
   `.es--warm` is now `.card--stream-b`'s legacy name, so the pair is a
   named VARIANT of the card and the two temperatures cannot be merged
   by a future consolidation without failing a test. */
.es-logo{height:52px;width:auto;display:block;margin:0 0 16px}
.es-lbl{font:var(--type-label);letter-spacing:.12em;text-transform:uppercase;
  /* #5A5F70: 5.74:1 on the warm tint, 6.15:1 on the cool one. --silver
     (2.62:1) and --muted (4.46:1 on warm) both fail AA on these grounds. */
  color:var(--color-text-caption);margin:0 0 10px}
/* On /ctrl-shift this IS the page's headline, not a corner of one, so it
   takes the headline role rather than subhead. */
.es-head{font:var(--type-headline);
  letter-spacing:-.3px;color:var(--navy);margin:0 0 12px;max-width:20ch}
.es-body{font:var(--type-lead);color:#3a3a38;margin:0;max-width:56ch}

/* The approved-but-unpublished piece. Inset with a yellow rule so it reads
   as a preview of something else rather than as this page's own lead --
   the reader must not think they are looking at a published story. */
.es-teaser{border-left:3px solid var(--yellow);padding-left:clamp(14px,2vw,20px);margin:22px 0 4px}
/* aspect-ratio FOR THE SAME REASON .pp-sechero HAS IT (2026-08-23). This
   image also carries a `.imgcredit` line directly beneath it -- see the
   `.es-teaser .imgcredit` rule below -- and a ceiling with no height means
   the box is `auto`, i.e. nothing at all until the picture's bytes land.
   The credit is therefore laid out against a one-line-tall image and then
   pushed down when it arrives. Same defect, same one-property fix, same
   1200/630 platform hero spec; max-height:300px is untouched and still
   decides the height at tablet and desktop widths. Fixed here rather than
   left for later because it is the identical bug on the identical macro,
   and the upcoming-edition teaser is a state /daily itself renders. */
.es-img{display:block;width:100%;aspect-ratio:1200/630;max-height:300px;
  object-fit:cover;border-radius:3px;margin:0 0 10px}
/* MARGIN ONLY (review_notes 145). font-size:11px and line-height:1.4 were
   restated here, byte-identical to base.html's shared rule, and were
   removed -- that is the duplication note 102 forbids.
   #5A5F70 WENT THE SAME WAY ON 2026-08-23, and for the same reason rather
   than a new one: base.html now draws the credit as a filled chip, so the
   ground this colour was measured against (the teaser's pale panel) is no
   longer what the text sits on. The value is unchanged and now lives once,
   in base.html, measured at 5.72:1 against the chip's var(--sunk).
   Size, family, line-height, style and colour are base.html's. */
.es-teaser .imgcredit{margin:0 0 14px}
.es-kicker{font:var(--type-label);letter-spacing:.14em;text-transform:uppercase;
  color:var(--color-text-caption);margin:0 0 7px}
.es-teaser-head{font:var(--type-subhead);color:var(--navy);margin:0 0 9px;max-width:24ch}
.es-teaser-sum{font:var(--type-lead);color:#3a3a38;margin:0;max-width:56ch}

.es-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:24px 0 0}
/* .es-btn IS THE SHARED BUTTON (components.css lists it in the base and
   in the `secondary` and `--lg` selector groups): yellow ground, navy ink,
   12.6:1, 15px, 48px tall. Everything it used to declare here -- the box,
   the size, the weight, the radius, the focus ring -- is declared once
   there now, for every button on the site.

   WHAT STAYS IS ONE DOCUMENTED DEVIATION. Every other secondary button
   fades on hover; this one INVERTS to navy-on-yellow. That is deliberate
   and predates the component: it is the only button on a pale editorial
   panel where the reader is being asked to opt IN to something that has
   not happened yet, and the inversion is what makes it read as a
   commitment rather than a link. A variant may override a state; what it
   may not do is restate the component. */
.es-btn:hover{background:var(--navy);color:var(--yellow);border-color:var(--navy)}
/* min-height so the layout does not jump when the server's reply is
   swapped in, and so an empty status line reserves its own space. */
.es-status{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--color-text-caption);margin:0;
  min-height:1.2em;flex:1 1 220px}

.es-links{display:flex;flex-wrap:wrap;gap:18px;margin:26px 0 0;padding-top:18px;
  border-top:1px solid var(--line)}
.es-go{font:var(--type-label);letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);text-decoration:none;border-bottom:2px solid var(--yellow);padding-bottom:3px}
.es-go:hover{border-bottom-color:var(--navy)}
.es-go:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

@media(max-width:640px){
  /* The button goes full width; the status line drops beneath it rather
     than being squeezed into a two-word column. Everything else is
     clamp()ed and needs no breakpoint. */
  .es-cta{gap:10px}
  .es-btn{width:100%;text-align:center}
  .es-status{flex:1 1 100%}
}