/* ===========================================================================
   News — the wire page.

   Loaded from the `styles` block of templates/news/news.html, so it reaches
   /news and nothing else. The wire *item* itself is styled by custom.css
   (`.eg-wire-*`), because templates/news/_wire_item.html is shared with the
   public landing page and the dashboard card, and wire.css styles what
   static/js/wire.js builds. Neither of those is touched here: this file is the
   /news page around them — its two-column layout, its filter bar, and the
   handful of places where the shell's quieter palette should win over the
   public page's.

   Nothing here is smaller than 12px (PLAN.md section 3).
   =========================================================================== */

.wire-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--eg-3);
    flex-wrap: wrap;
    margin-bottom: var(--eg-4);
    padding-bottom: var(--eg-3);
    border-bottom: 1px solid var(--eg-line);
}
.wire-tools { display: flex; gap: var(--eg-2); flex-wrap: wrap; }
.wire-count { display: block; font-size: 12px; color: var(--eg-muted); }
.wire-state { display: block; }

/* The badge wire.js drives. Hidden until the script reveals it, so a reader
   with no JavaScript is told nothing rather than told "live" forever. */
.wire-state .eg-wire-live[hidden] { display: none; }

.wire-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--eg-5);
    align-items: start;
}

/* The panel on this page is the page, so it loses the card chrome and the
   scrolling box it needs on the landing page and the dashboard. A feed that
   scrolls inside a 15rem window on the page dedicated to it is the design of a
   widget, not of a section. */
.wire-main .eg-wire {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
}
/* One surface with hairlines between the headlines, rather than the scrolling
   card the landing page and the dashboard need. */
.wire-main .eg-wire-list {
    max-height: none;
    overflow: visible;
    border: 1px solid var(--eg-line);
    border-radius: var(--eg-radius);
    background: var(--eg-surface);
}

/* The time to the left of the headline, as the design preview reads it.
   Done here rather than in templates/news/_wire_item.html: that partial is
   also the landing page's and the dashboard card's, where the narrow column
   has no room for a gutter. A two-column grid moves the one element without
   changing the markup the three pages share — and `.eg-wire-meta` is last in
   source order, so a screen reader still hears the headline first. */
.wire-main .eg-wire-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    column-gap: var(--eg-4);
    padding: var(--eg-4);
    border-bottom: 1px solid var(--eg-line);
}
.wire-main .eg-wire-item:last-child { border-bottom: 0; }
.wire-main .eg-wire-item > * { grid-column: 2; }
.wire-main .eg-wire-meta {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
    padding-left: 0;
    color: var(--eg-muted);
}
.wire-main .eg-wire-text { font-size: 15px; line-height: 1.5; }

/* A headline the wire published as one unbroken token — a raw URL, which is
   how a third of this wire's posts end — has nothing a browser may break on,
   and `.eg-wire-line` is a flex row whose items do not shrink below their
   content by default. Measured at 390px before this rule: the row ran 408px
   past its own width and took the whole page 395px sideways with it.
   `anywhere` breaks only when it has to and keeps every character on screen,
   which `hidden` or an ellipsis would not.

   Scoped to /news. The same partial renders on the public landing page and in
   the dashboard card, where `.eg-wire-text` comes from custom.css — that file
   belongs to S07 and the fix there is the same two declarations. See the
   handoff. */
.wire-main .eg-wire-line { min-width: 0; }
.wire-main .eg-wire-text,
.wire-main .eg-wire-credit,
.wire-main .eg-wire-sublines li,
.wire-main .eg-wire-link > a,
.wire-main .eg-wire-link .dek {
    min-width: 0;
    overflow-wrap: anywhere;
}
/* custom.css sizes the wire item for the public landing page, where 0.7rem
   is in key with the rest of that page. Inside the shell the floor is 12px —
   PLAN section 3, and the rule S02's browser check enforces on every page. */
.wire-main .eg-wire-meta,
.wire-main .eg-wire-meta time,
.wire-main .eg-wire-credit,
.wire-main .eg-wire-nums .n,
.wire-main .eg-wire-link .src,
.wire-main .eg-wire-move { font-size: 12px; }

/* The same floor for the chrome static/js/wire.js builds. wire.css is loaded
   from the body (it travels with the script), so it comes after this file and
   wins a specificity tie — these selectors carry one class more, which is why
   they are written with `.wire-main` rather than on their own. */
.wire-main .eg-wire-live,
.wire-main .eg-wire-status,
.wire-main .eg-wire-status-at,
.wire-main .eg-wire-retry,
.wire-main .eg-wire-reload,
.wire-main .eg-wire-gap { font-size: 12px; }

/* The state badge sits on the status line wire.js inserts above the list,
   right-aligned, so "live" and "refreshed at" read as one statement rather
   than as two floating in different places. */
.wire-main .eg-wire-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 18px;
    margin-bottom: calc(var(--eg-1) * -1);
}

.wire-main .eg-wire-empty {
    padding: var(--eg-6) var(--eg-4);
    text-align: center;
    color: var(--eg-muted);
    font-size: 13px;
    border: 1px dashed var(--eg-line-2);
    border-radius: var(--eg-radius);
    background: var(--eg-surface);
}

/* An item the reader's filter excludes. Set by static/js/wire.js on rows that
   arrive from a poll, so the selection survives a refresh. Display rather than
   visibility: a hidden row must not leave a gap in the stream. */
.wire-main .eg-wire-item[data-filtered-out] { display: none; }

.wire-side { display: flex; flex-direction: column; gap: var(--eg-4); }
.wire-side .eyebrow {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--eg-accent);
    font-weight: 600;
}
.wire-side h2 {
    font-family: var(--eg-serif);
    font-size: 23px;
    font-weight: 400;
    letter-spacing: -.01em;
    margin: var(--eg-3) 0;
}
.wire-side p { font-size: 13px; color: var(--eg-muted); margin: 0 0 var(--eg-3); }
.wire-side .text-link { font-size: 13px; font-weight: 600; color: var(--eg-accent); text-decoration: none; }
.wire-side .text-link:hover { text-decoration: underline; }
.wire-callout { background: var(--eg-accent-soft); border-color: var(--eg-accent-line); }
.wire-callout h2 { color: var(--eg-ink); }
.wire-next .section-head { margin-bottom: var(--eg-2); }

@media (max-width: 960px) {
    .wire-grid { grid-template-columns: minmax(0, 1fr); }
    /* The two side panels follow the stream on a narrow screen rather than
       preceding it: the feed is what the page is for. */
    .wire-side { flex-direction: row; flex-wrap: wrap; }
    .wire-side > * { flex: 1 1 260px; }
}
@media (max-width: 680px) {
    .wire-filters { flex-direction: column; align-items: flex-start; }
    .wire-side { flex-direction: column; }
    /* `flex: 1 1 260px` above is a *width* basis for the side-by-side row at
       960px. In a column it becomes a height, so both cards were forced to
       260px however short their text. Back to content height. */
    .wire-side > * { flex: 0 0 auto; }
    /* No gutter at phone width: the time goes back above the headline rather
       than squeezing the sentence into what is left. */
    .wire-main .eg-wire-item { display: block; padding: var(--eg-3); }
    .wire-main .eg-wire-meta { margin-top: var(--eg-2); }
}