/* =================================================================
   NEWS PAGE — Token-based design matching Eh homepage aesthetic
   ================================================================= */

/* ── Page layout ── */
.section.news-page { padding: 0 0 2rem; border-bottom: none; }
.news-page .container {
    max-width: 1264px;
}

.news-page .page-shell__inner {
    gap: 0;
}

.news-page .scope-tabs {
    margin: 0 0 24px;
}

.news-page .rss-link {
    margin-left: auto;
    font-size: 0;
}

.news-filterbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: -12px 0 18px;
}

.news-filterbar__row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.news-filterbar__label {
    flex: 0 0 auto;
    font: 700 11px/1 var(--font-body, system-ui);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.news-filterbar__scroll {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.news-filterbar__scroll::-webkit-scrollbar { display: none; }

.news-filter-pill {
    --tc: var(--muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--hairline, var(--border));
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
    flex: 0 0 auto;
    font: 650 12px/1 var(--font-body, system-ui);
    letter-spacing: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.news-filter-pill:hover {
    background: var(--surface-hover);
    border-color: var(--muted);
    color: var(--text);
    text-decoration: none;
}

.news-filter-pill--active {
    border-color: color-mix(in srgb, var(--tc) 42%, var(--hairline, var(--border)));
    background: color-mix(in srgb, var(--tc) 8%, var(--surface));
}

.news-filter-pill--all.news-filter-pill--active {
    --tc: var(--red);
    color: var(--red);
}

.news-filter-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--tc);
    flex: 0 0 auto;
}

.news-filter-pill--all .news-filter-pill__dot { display: none; }

.news-filter-pill__remove {
    color: var(--muted);
    font-weight: 800;
    line-height: 1;
}

/* ── Page title — Druk Heavy ── */
.news-page__title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 900;
    line-height: 1.15;
    color: var(--text);
    margin: 1rem 0 1rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── Scope section headings ── */
.news-scope-section {
    margin-bottom: 1.1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--hairline, var(--border));
}
.news-scope-section:last-child {
    border-bottom: 0;
}
.news-scope-section__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    margin: 0 0 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hairline, var(--border));
}
.news-scope-section__heading-label {
    color: var(--red);
}
.news-scope-section__heading-count {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
}
html[data-theme="dark"] .news-scope-section__heading {
    border-bottom-color: var(--hairline, var(--border));
    color: var(--text);
}
html[data-theme="dark"] .news-scope-section__heading-label {
    color: var(--red);
}
html[data-theme="dark"] .news-scope-section__heading-count {
    color: var(--muted);
}

/* ── Articles (rev 6 — unified surface, no horizontal dividers) ──
   The card itself is the rounded surface with soft shadow; inner zones
   (__top, __chips, __community) own their own padding. No interior
   border, no left red bar, no border-bottom dividers. */
.news-article {
    /* Card body surface = --surface (#F2F2F2 light). Commzone uses
       --surface-2 (#F1F1F4 light) for separation. Tokens cascade in
       both light + dark per ehlocal.css. */
    background: var(--surface);
    border: 1px solid var(--hairline, #E6E6E6);
    border-radius: 14px;
    overflow: hidden;
    /* Override legacy `ehlocal.css:.news-article { padding: 1rem 0 }`
       which leaks white space above the gradient and below the
       commzone — and `border-bottom: 1px solid #f0f0f0` from the same
       rule. The outer `border` above supplies the card hairline. */
    padding: 0;
    box-shadow: var(--card-shadow);
    margin-bottom: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}
.news-article:hover {
    transform: translateY(-1px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--hairline, #E6E6E6);
}
/* Dark-mode bg already supplied by --surface token. */

/* ── Lead article ── */
/* Lead card sits above the events teaser + 3-up grid; proto leaves
   20px breathing room below the hero so the next section reads as a
   distinct block (proto: `.lead { margin-bottom: 20px }`). */
.news-article--lead { margin-bottom: 20px; }
.news-article--lead .news-article__image { margin: 0; }
.news-article--lead .news-article__image img {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
    border-radius: 0;
    transition: transform 0.3s ease;
}
.news-article--lead .news-article__image:hover img { transform: scale(1.02); }
.news-article--lead .news-article__title {
    font-family: var(--font-headline);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.25;
    color: var(--text);
    margin: 0 0 6px;
    letter-spacing: 0;
}
.news-article--lead .news-article__summary {
    font-size: 13px;
    line-height: 1.4;
    color: var(--muted);
    margin: 0 0 4px;
    max-width: 680px;
}

/* Text-only lead — no left bar in rev 6. */
.news-article--text-only {
    /* intentionally empty: no left red bar, no border. */
}

/* Gradient media surface + topic glyph fallback for image-less cards
   (G1s integration audit fix). Non-lead grid cards use the same fixed
   16:9 media box as image-backed cards; lead keeps a taller hero crop.
   With-thumb (legacy compact list) keeps its 120px square thumb area. */
.news-article__media {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--surface-hover);
    overflow: hidden;
    display: grid;
    place-items: center;
}
.news-article--with-thumb .news-article__media {
    aspect-ratio: auto;
    width: 120px;
    min-height: 100%;
    display: grid;
    place-items: center;
}
.news-article--with-thumb .news-article__topic-glyph {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}
.news-article--with-thumb .news-article__topic-glyph svg { width: 20px; height: 20px; }
/* Lead media — full-width 16:10 hero panel stacked above the body.
   The legacy 2-col grid layout was retired in the audit fix. */
.news-article--lead .news-article__media {
    aspect-ratio: 16 / 10;
    max-height: 360px;
    width: 100%;
}
.news-article:not(.news-article--lead):not(.news-article--with-thumb) .news-article__thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--surface-hover);
    overflow: hidden;
}
.news-article:not(.news-article--lead):not(.news-article--with-thumb) .news-article__thumb-link {
    display: block;
    width: 100%;
    height: 100%;
}
.news-article:not(.news-article--lead):not(.news-article--with-thumb) .news-article__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.news-article__media-link {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}
.news-article__topic-glyph {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    display: grid;
    place-items: center;
    backdrop-filter: blur(6px);
    z-index: 1;
}
.news-article__topic-glyph svg { width: 26px; height: 26px; }
.news-article--with-thumb .news-article__topic-glyph {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}
.news-article--with-thumb .news-article__topic-glyph svg { width: 18px; height: 18px; }

/* Topic-tinted radial gradients — proto match. Light hot-spot at upper-left
   that falls off to a near-black terminal stop at lower-right, giving each
   card real depth and personality without becoming a solid colour-block. A
   dark linear overlay sits on top so the topic-glyph chip and media-badge
   read clearly against any tint. (G1s match — image-less proto cards.) */
.news-article__media--gradient {
  background-blend-mode: normal;
}
.news-article__media--community  { background: radial-gradient(140% 110% at 8% -8%, #E45757 0%, #B23030 35%, #6B1818 70%, #240606 100%); }
.news-article__media--civic      { background: radial-gradient(140% 110% at 8% -8%, #5A8DFF 0%, #2F5BD8 35%, #163A99 70%, #07194D 100%); }
.news-article__media--business   { background: radial-gradient(140% 110% at 8% -8%, #E6C36A 0%, #A37A1F 35%, #62420A 70%, #1F1402 100%); }
.news-article__media--environment{ background: radial-gradient(140% 110% at 8% -8%, #4FB87A 0%, #2D9C5A 35%, #155F33 70%, #06200E 100%); }
.news-article__media--transit    { background: radial-gradient(140% 110% at 8% -8%, #34D2B6 0%, #0F8F7A 35%, #0A5C50 70%, #03241F 100%); }
.news-article__media--sport      { background: radial-gradient(140% 110% at 8% -8%, #C19EEE 0%, #6B3FA0 35%, #3F1F73 70%, #170A2C 100%); }
.news-article__media--sports     { background: radial-gradient(140% 110% at 8% -8%, #8BEA72 0%, #2F9D28 35%, #176315 70%, #062407 100%); }
.news-article__media--lifestyle  { background: radial-gradient(140% 110% at 8% -8%, #FFC58A 0%, #E08A2B 35%, #8C4F0F 70%, #2D1602 100%); }
.news-article__media--culture    { background: radial-gradient(140% 110% at 8% -8%, #C49AE6 0%, #A23BC4 35%, #5B1E73 70%, #1F0A2E 100%); }
.news-article__media--health     { background: radial-gradient(140% 110% at 8% -8%, #6FCDF5 0%, #3BA2E1 35%, #1F5C8C 70%, #08233B 100%); }
.news-article__media--emergency  { background: radial-gradient(140% 110% at 8% -8%, #FF7676 0%, #E63838 35%, #8C1818 70%, #240505 100%); }
.news-article__media--crime      { background: radial-gradient(140% 110% at 8% -8%, #5C84A8 0%, #1A3852 35%, #0F2236 70%, #050C14 100%); }
.news-article__media--news       { background: radial-gradient(140% 110% at 8% -8%, #9A9A9A 0%, #555 35%, #2E2E2E 70%, #0A0A0A 100%); }
/* (Vignette overlay removed — proto's gradient stops are deep enough on
   their own, and the ::after pseudo broke the parent's overflow clip in
   some renderers, leaving the media corners un-rounded.) */
.news-article__media--gradient { position: relative; }

/* ── Regular articles ── */
.news-article__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text);
    margin: 0 0 0.2rem;
}
.news-article__title a {
    color: inherit;
    text-decoration: none;
    position: relative;
    transition: color 0.15s;
}
.news-article__title a::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -0.25rem;
    right: -0.25rem;
    transform: translateY(-50%);
    min-height: 44px;
}
.news-article__title a:hover { color: var(--red); }
.news-article__title a:visited { color: var(--muted); }

/* Article meta */
.news-article__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}
.news-article__source {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--red);
}
.news-article__date {
    font-size: 12px;
    color: var(--dim);
}

/* Article summary */
.news-article__summary {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0 0 0.2rem;
}
.news-article:not(.news-article--lead) .news-article__summary {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Article with thumbnail (legacy class — kept for any external markup
       that still applies it; the layout is now driven by parent
       container instead). Thumb-left, body-right, edge-to-edge. ── */
.news-article--with-thumb {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0;
    align-items: stretch;
}
.news-article--with-thumb .news-article__thumb { min-height: 100%; }
.news-article--with-thumb .news-article__thumb img {
    width: 120px;
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* Feed composition primitives.
   These are shared by the Today scope panel and the dedicated News page:
   lead card, 3-up secondary cards, then compact rows. Page-specific files
   should decide spacing around the feed, not redefine the card anatomy. */
.news-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.news-grid-secondary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

@media (max-width: 1079px) {
    .news-grid-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .news-grid-secondary {
        grid-template-columns: 1fr;
    }
}

/* Compact list — proto rebuild (2026-04-30). Items 5+ render with the
   row macro (`.news-row`) instead of forcing card anatomy into a
   horizontal layout, so share/save/Discussion live inside the body and
   the disc-strip band can break across the full article width. */
.news-compact-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
}

.news-feed-overflow[hidden] {
    display: none !important;
}

.news-scope-panel__desktop .news-grid-secondary + .news-compact-list {
    margin-top: 16px;
}

/* Inline teaser used inside feed compositions when the local scope wants
   to surface the next event without breaking the news rhythm. */
.events-teaser {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--card-shadow);
    font-size: 13px;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.15s;
}
.events-teaser:hover {
    border-color: var(--red);
    background-color: var(--surface-hover);
}
.events-teaser__icon {
    color: var(--red);
    flex-shrink: 0;
}
.events-teaser__next {
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.events-teaser__date {
    font-size: 12px;
    color: var(--dim);
    white-space: nowrap;
}
.events-teaser__more {
    font-size: 12px;
    font-weight: 600;
    color: var(--red);
    white-space: nowrap;
}

@media (max-width: 1079px) {
    .events-teaser--mobile {
        display: flex;
        margin: 0;
    }
}
.news-article__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    /* Body grows to fill the card column so chip-pair can sit at the
       bottom of the publisher zone via `margin-top: auto`. Without
       `flex: 1 1 auto`, body collapses to natural content height and
       `margin-top: auto` has no slack to consume. (G1s slice 4.) */
    flex: 1 1 auto;
    min-height: 0;
}

/* ── Article actions (legacy block removed in rev 6 redesign) ──
   The action row now lives inside .news-article__community and uses
   .news-icon-btn / .news-icon-text + .news-discussion-btn primitives. */
.news-article__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* ── News discussion detail ── */
.news-discussion-page { padding: 1.25rem 0 2rem; }
.news-discussion-page .container {
    max-width: 980px;
}
.news-discussion-page__inner {
    gap: 0;
}
.news-discussion__back-link {
    align-self: flex-start;
    justify-self: start;
    width: auto;
    margin: 0 0 8px;
    min-height: 0;
}
.news-discussion {
    max-width: 900px;
}
.news-discussion__story-row {
    cursor: default;
}
.news-discussion__story-row:hover {
    transform: none;
    box-shadow: var(--card-shadow);
}
.news-discussion__story-body {
    min-height: 112px;
}
.news-discussion__source-row {
    flex-wrap: wrap;
}
.news-discussion__source-row .news-source {
    color: var(--eh-red, #FF0000);
    font: inherit;
    letter-spacing: inherit;
    margin-bottom: 0;
}
.news-discussion__appears-in {
    color: var(--muted);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}
.news-discussion__title {
    margin: 0;
    font-size: clamp(1.15rem, 2vw, 1.42rem);
    line-height: 1.18;
    letter-spacing: 0;
    color: var(--text);
    -webkit-line-clamp: 3;
}
.news-discussion__title a,
.news-discussion__title a:visited {
    color: var(--text);
    -webkit-text-fill-color: var(--text);
    text-decoration: none;
}
.news-discussion__title a:hover {
    color: var(--red);
    -webkit-text-fill-color: var(--red);
}
html[data-theme="dark"] .news-discussion__title a,
html[data-theme="dark"] .news-discussion__title a:visited {
    color: #E8E8E8;
    -webkit-text-fill-color: #E8E8E8;
}
html[data-theme="dark"] .news-discussion__title a:hover {
    color: var(--red);
    -webkit-text-fill-color: var(--red);
}
.news-discussion__summary {
    color: var(--text-secondary, #444);
    -webkit-line-clamp: 2;
}
.news-discussion__story-actions {
    align-items: flex-end;
}
/* ── Load more / View all ── */
.news-scope-section__more {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    position: relative;
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    text-decoration: none;
    padding: 0.45rem 0;
    transition: color 0.15s;
}
.news-scope-section__more::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -0.5rem;
    right: -0.5rem;
    transform: translateY(-50%);
    min-height: 44px;
}
.news-scope-section__more:hover { color: var(--red); text-decoration: underline; }

.news-load-more {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    width: auto;
    padding: 0.45rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--red);
    cursor: pointer;
    text-align: left;
    transition: color 0.15s;
    margin-top: 0.4rem;
}
.news-load-more:hover {
    color: var(--red);
    text-decoration: underline;
}
.news-load-more__count {
    font-weight: 600;
    color: var(--muted);
    font-size: 12px;
}

.news-page .news-feed {
    gap: 16px;
}

.news-page .news-article--lead {
    margin-bottom: 0;
}

.news-page .news-article--lead .news-article__image {
    aspect-ratio: 16 / 9;
    max-height: 420px;
    overflow: hidden;
}

.news-page .news-article--lead .news-article__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-page .news-compact-list {
    gap: 10px;
}

.news-page .news-scope-section__more {
    margin-top: 0.8rem;
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .news-page__title { font-size: 1.35rem; }
    .news-scope-section__heading { font-size: 12px; gap: 8px; }
    .news-scope-section__heading-count { font-size: 11px; }
    .news-article__source { font-size: 11px; }
    .news-article__date { font-size: 12px; }
    .news-article__summary { font-size: 13px; }
    .news-article--lead .news-article__title { font-size: 1.05rem; }
    .news-article--lead .news-article__summary { font-size: 13px; }
    .news-article__title { font-size: 15px; }
    .news-article--with-thumb { grid-template-columns: 96px 1fr; }
    .news-article--with-thumb .news-article__thumb img { width: 96px; }
    .news-scope-section__more { font-size: 0.93rem; }
    .news-discussion__story-row { --news-row-thumb: 96px; }
    .news-discussion__story-body { min-height: 96px; padding: 10px 12px; }
    .news-discussion__source-row { gap: 6px; margin-bottom: 4px; }
    .news-discussion__title { font-size: 16px; -webkit-line-clamp: 3; }
    .news-discussion__summary { font-size: 12.5px; -webkit-line-clamp: 2; }
    .news-discussion__story-actions { align-items: center; gap: 6px; }
    .disc-section { border-radius: 12px; }
    .disc-section__head { align-items: flex-start; flex-direction: column; gap: 8px; padding: 14px; }
    .disc-section__filter { gap: 6px; padding: 12px 14px; }
    .disc-section__sort { width: 100%; margin-left: 0; }
    .compose-stub { margin: 12px 14px; }
    .compose-stub__body { width: 100%; align-items: flex-start; flex-direction: column; }
    .disc-thread { padding: 0 14px 14px; }
    .disc-comment { gap: 8px; padding: 10px; }
    .disc-comment__time { width: 100%; margin-left: 0; }
    .disc-thread--replies { margin-left: 14px; padding-left: 10px; }
}

/* ── Loading state during HTMX tab switch ── */
#news-content { transition: opacity 0.15s ease; }
.news-content--loading { opacity: 0.45; pointer-events: none; }

/* ---------- Chips (topic + sentiment) — proto pattern (G1s match) ----------
   Topic chip: white surface + hairline border + colored DOT (no icon).
   Sentiment chip: per-sentiment outlined tone with leading glyph.
   Both pills are small, light, and read as filter affordances rather
   than colour-blocks. */

.tchip,
.schip {
  --tc: #888;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font: 600 11.5px/1 var(--font-body, system-ui);
  letter-spacing: 0;
  text-transform: none;
  border: 1px solid var(--hairline, #E6E6E6);
  background: #F2F2F2;
  color: var(--text, #111);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
  white-space: nowrap;
}
[data-theme="dark"] .tchip,
html[data-theme="dark"] .tchip,
[data-theme="dark"] .schip,
html[data-theme="dark"] .schip {
  background: var(--surface, #1A1A1A);
}
a.tchip,
a.schip { cursor: pointer; }
.tchip:hover,
.schip:hover {
  background: var(--surface-hover, #E8E8E8);
  border-color: var(--muted, #888);
  color: var(--text, #111);
  transform: translateY(-1px);
}
.tchip__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--tc);
  flex: 0 0 auto;
}
.schip__glyph {
  font-size: 11px;
  line-height: 1;
  flex: 0 0 auto;
}
.schip__label,
.tchip__label { line-height: 1; }
/* Per-sentiment tones — match proto's exact RGB rotation. */
.schip--good-news        { color: #1F7A3A; border-color: rgba(31,122,58,0.32); background: rgba(31,122,58,0.06); }
.schip--good-news:hover  { background: rgba(31,122,58,0.14); border-color: rgba(31,122,58,0.55); color: #135525; }
.schip--optimistic       { color: #C97A00; border-color: rgba(201,122,0,0.32); background: rgba(201,122,0,0.06); }
.schip--optimistic:hover { background: rgba(201,122,0,0.14); border-color: rgba(201,122,0,0.55); color: #8B5400; }
.schip--concerning       { color: #B23030; border-color: rgba(178,48,48,0.32); background: rgba(178,48,48,0.06); }
.schip--concerning:hover { background: rgba(178,48,48,0.14); border-color: rgba(178,48,48,0.55); color: #861919; }
.schip--heavy            { color: #1A3852; border-color: rgba(26,56,82,0.32); background: rgba(26,56,82,0.06); }
.schip--heavy:hover      { background: rgba(26,56,82,0.14); border-color: rgba(26,56,82,0.55); color: #0F2236; }
.schip--celebration      { color: #C2185B; border-color: rgba(194,24,91,0.32); background: rgba(194,24,91,0.06); }
.schip--celebration:hover{ background: rgba(194,24,91,0.14); border-color: rgba(194,24,91,0.55); color: #850F3F; }
.schip--sadness          { color: #4A5C7A; border-color: rgba(74,92,122,0.32); background: rgba(74,92,122,0.06); }
.schip--sadness:hover    { background: rgba(74,92,122,0.14); border-color: rgba(74,92,122,0.55); color: #2B3A55; }
/* Neutral schip rules retired — neutral does not render, per
   "absence is the signal" design choice in `sentiment_chip` macro. */

.story-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; margin: 0; align-items: center; }
.story-chips--lg .tchip,
.story-chips--lg .schip { padding: 5px 12px; font-size: 12.5px; }

.news-why-btn {
  background: transparent;
  border: none;
  color: var(--fg-2, #6B6B6B);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.news-why-btn:hover,
.news-why-btn[aria-expanded="true"] {
  background: var(--surface-hover, #E8E8E8);
  color: var(--text, #0B0B0B);
}
.news-why-btn svg {
  width: 14px;
  height: 14px;
}

/* ---------- Disc-strip (rev 6 — neutral surface, hairline border) ---------- */

.disc-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--surface, white);
  color: var(--fg, #111);
  text-decoration: none;
  font-size: 12.5px;
  border: 1px solid var(--hairline, #E6E6E6);
  width: 100%;
  min-width: 0;
  transition: background 120ms ease;
}
.disc-strip:hover {
  background: color-mix(in srgb, var(--eh-red, #FF0000) 6%, var(--surface, white));
}
.disc-strip--compact { padding: 4px 8px; font-size: 12px; }
.disc-strip--compact .disc-strip__avatar { width: 20px; height: 20px; font-size: 9px; }
.disc-strip--empty {
  background: color-mix(in srgb, #888 6%, var(--surface, white));
  border-color: color-mix(in srgb, #888 12%, var(--surface, white));
  color: var(--fg-2, #555);
  font-style: italic;
}
.disc-strip__avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--eh-red, #FF0000);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 10px/1 var(--font-body, system-ui);
  text-transform: uppercase;
  flex-shrink: 0;
}
/* Deterministic avatar colors — cycle by first-letter index of the
   commenter's name (matches proto's `ava-c1` … `ava-c7`). */
.disc-strip__avatar.ava-c1 { background: #B23030; }
.disc-strip__avatar.ava-c2 { background: #2F6BFF; }
.disc-strip__avatar.ava-c3 { background: #2E9655; }
.disc-strip__avatar.ava-c4 { background: #E08A2B; }
.disc-strip__avatar.ava-c5 { background: #6B3FA0; }
.disc-strip__avatar.ava-c6 { background: #0F8F7A; }
.disc-strip__avatar.ava-c7 { background: #C2185B; }
.disc-strip__preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.disc-strip__name { font-weight: 700; margin-right: 4px; }
.disc-strip__sep { color: var(--fg-2, #777); margin: 0 4px; }
.disc-strip__snippet {
  color: var(--fg-1, #222);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  /* Italic snippet across all contexts (hero, 3-up grid, row). The
     comment text is a quote — italic carries that voice consistently
     so hero matches the rest of the cards. */
  font-style: italic;
  /* Optical baseline tweak — snippet sat 1px above its neighbours
     (avatar + name) because it's an italic glyph with a different
     x-height; nudge it down 1px so the row baselines line up. */
  position: relative;
  top: 1px;
}
.disc-strip__counts {
  display: inline-flex;
  gap: 10px;
  flex-shrink: 0;
  font: 600 11px/1 var(--font-body, system-ui);
  color: var(--fg-2, #555);
}
.disc-strip__count { display: inline-flex; align-items: center; gap: 3px; }
.disc-strip__count--likes { color: var(--eh-pink, #FF2E62); }

/* ---------- City pill ---------- */

/* City pill — proto pattern. Solid red bg + white text by default
   (commenter's portal city). The `--canada` variant (no city set —
   commenter is from elsewhere in Canada) gets a subtle white
   surface + warm muted text + a leading star icon (no emoji). */
.city-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border-radius: 3px;
  font: 700 9px/1.4 var(--font-body, system-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--eh-red, #FF0000);
  color: #fff;
  vertical-align: 1px;
  flex-shrink: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.city-pill--mine {
  background: var(--eh-red, #FF0000);
  color: #fff;
}
.city-pill--canada {
  background: #F2F2F2;
  color: #C97A00;
  border: 1px solid rgba(201, 122, 0, 0.28);
}
.city-pill--canada svg {
  width: 10px;
  height: 10px;
  color: #E0A024;
  fill: #E0A024;
  stroke: #E0A024;
}

/* ---------- Discussion thread region (Phase 1 IA) ---------- */

.disc-section {
  max-width: 900px;
  margin-top: 18px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--hairline, var(--border));
  border-radius: 14px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.disc-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0;
  padding: 16px 18px 13px;
  border-bottom: 1px solid var(--hairline, var(--border));
}
.disc-section__head h2 {
  margin: 0;
  font: 800 18px/1.15 var(--font-body, system-ui);
  letter-spacing: 0;
}
.disc-section__counts { display: inline-flex; gap: 12px; color: var(--muted); font: 600 12px/1 var(--font-body, system-ui); align-items: center; }
.disc-section__counts > span { display: inline-flex; align-items: center; gap: 4px; }
.disc-section__likes { color: var(--eh-pink, #FF2E62); }

.disc-section__filter {
  gap: 6px;
  align-items: center;
  margin-bottom: 0;
  padding: 12px 18px;
  border-bottom: 1px solid var(--hairline, var(--border));
}
.disc-section__sort { margin-left: auto; font: 500 12px/1 var(--font-body, system-ui); color: var(--muted); }

/* Compose stub */
.compose-stub {
  display: flex; gap: 10px; align-items: center;
  padding: 12px; margin: 14px 18px;
  background: var(--surface-2); border-radius: 10px; border: 1px solid var(--hairline, var(--border));
}
.compose-stub__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--border, #ddd); color: var(--muted, #888);
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 14px/1 var(--font-body, system-ui);
  flex-shrink: 0;
}
.compose-stub__body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.compose-stub__placeholder { color: var(--muted, #999); font: 500 14px/1.3 var(--font-body, system-ui); }
.compose-stub__button { flex: 0 0 auto; }
.disc-section__readonly {
  margin: 14px 18px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
}
.compose-form {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.compose-form__input {
  flex: 1;
  min-width: 0;
  resize: vertical;
  min-height: 42px;
  max-height: 120px;
  border: 1px solid var(--hairline, var(--border));
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--surface);
  color: var(--text);
  font: 500 14px/1.35 var(--font-body, system-ui);
}
.compose-form__input:focus {
  outline: 2px solid color-mix(in srgb, var(--red) 28%, transparent);
  outline-offset: 1px;
  border-color: color-mix(in srgb, var(--red) 36%, var(--border));
}
.reply-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.reply-form .compose-form__input {
  min-height: 36px;
  padding: 8px 10px;
  font-size: 13px;
}

/* Comments */
.disc-thread { list-style: none; padding: 0 18px 18px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.disc-thread--replies { margin-left: 28px; padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--eh-red, #FF0000) 30%, var(--surface, white)); margin-top: 8px; }
.disc-thread__empty { padding: 24px; text-align: center; color: var(--muted); font-style: italic; }

.disc-comment { display: flex; gap: 10px; padding: 12px; background: var(--surface-2); border-radius: 10px; border: 1px solid var(--hairline, var(--border)); }
.disc-comment--mine { border-color: color-mix(in srgb, var(--eh-red, #FF0000) 28%, var(--surface, white)); }
.disc-comment__avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--eh-red, #FF0000); color: white;
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 13px/1 var(--font-body, system-ui);
  flex-shrink: 0;
}
.disc-comment__body { flex: 1; min-width: 0; }
.disc-comment__author-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.disc-comment__name { font: 700 13px/1 var(--font-body, system-ui); }
.disc-comment__time { color: var(--muted); font: 500 11px/1 var(--font-body, system-ui); margin-left: auto; }
.disc-comment__text { font: 500 14px/1.45 var(--font-body, system-ui); margin: 0 0 6px; color: var(--text); }
.disc-comment__actions { display: flex; gap: 12px; color: var(--muted); }
.disc-comment__action {
  background: none; border: none; color: var(--muted);
  font: 600 12px/1 var(--font-body, system-ui);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 0; cursor: pointer;
}
.disc-comment__action:hover,
.disc-comment__action[aria-pressed="true"] {
  color: var(--eh-pink, #FF2E62);
}
.disc-comment__action svg {
  width: 13px;
  height: 13px;
}

/* Why-this-matters trigger + popover */
.news-discussion__why-trigger.news-icon-btn { color: var(--fg-2, #6B6B6B); }
.news-discussion__why-trigger.news-icon-btn:hover { color: var(--text, #0B0B0B); }
.why-popover {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surface); border: 1px solid var(--hairline, var(--border)); border-radius: 14px; padding: 20px; max-width: 420px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  z-index: 110;
}
.why-popover[hidden] { display: none; }
.why-popover h3 { margin: 0 0 0.5rem; font-size: 16px; }
.why-popover p { margin: 0 0 0.75rem; line-height: 1.5; color: var(--muted); }

/* Compose-stub modal */
.modal-scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 110;
}
.modal-scrim[hidden] { display: none; }
.modal { background: var(--surface); border: 1px solid var(--hairline, var(--border)); border-radius: 14px; padding: 28px; max-width: 380px; box-shadow: 0 20px 60px rgba(0,0,0,0.18); }
.modal h2 { margin: 0 0 0.5rem; font-size: 18px; }
.modal p { margin: 0 0 1rem; line-height: 1.5; color: var(--muted); }

/* Defensive: hide any stragglers from the legacy discussion-page markup. */
.news-discussion__tags,
.news-discussion-tag,
.news-discussion-poll,
.news-discussion-comments { display: none; }

/* =================================================================
   R3 — News card primitives: source row, headline, Discussion button
   ================================================================= */

/* Source row: red, uppercase, letter-spaced link. Same treatment for
   external / licensed / owned — only the destination changes. */
.news-source {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eh-red, #FF0000);
  text-decoration: none;
  margin-bottom: 8px;
}
.news-source:hover { text-decoration: underline; text-underline-offset: 3px; }

/* External-link indicator inside the headline anchor (arrow-up-right). */
.news-headline__ext {
  width: 12px;
  height: 12px;
  display: inline-block;
  vertical-align: -1px;
  margin-left: 2px;
  color: var(--fg-2);
}
.news-headline__ext svg { width: 12px; height: 12px; }
.news-headline--lead .news-headline__ext,
.news-headline--lead .news-headline__ext svg {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
}

/* Discussion CTA — proto's `.disc-btn`. Solid red pill, padding 7 14 7 12,
   font 700 12.5px, gap 6, subtle inset bottom shadow for a button feel. */
.news-discussion-btn {
  background: var(--eh-red, #FF0000);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 7px 14px 7px 12px;
  font: 700 12.5px/1 var(--font-body, system-ui);
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0,0,0,0.08), inset 0 -1px 0 rgba(0,0,0,0.18);
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
}
.news-discussion-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 0, 0, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}
.news-discussion-btn:active { transform: translateY(0); }
.news-discussion-btn svg { width: 13px; height: 13px; }
.news-discussion-btn__label { line-height: 1; }

/* Ghost variant — outlined, used when the thread has no comments yet. */
.news-discussion-btn--ghost {
  background: transparent;
  color: var(--eh-red, #FF0000);
  border: 1px solid var(--eh-red, #FF0000);
  box-shadow: none;
}
.news-discussion-btn--ghost:hover {
  background: color-mix(in srgb, var(--eh-red, #FF0000) 8%, transparent);
  color: var(--eh-red, #FF0000);
  box-shadow: none;
}

/* =================================================================
   R4/rev6 — card revamp: top zone, community footer, action row
   ================================================================= */

/* Media badge — absolute upper-left chip on .news-article__media,
   .news-article__image, or .news-article__thumb. Dark translucent
   surface, white uppercase Inter 700 caps. Owned cards switch to
   solid red. (G1s match — proto media-badge.) */
.news-article__image,
.news-article__thumb {
  position: relative;
}
.news-article__media-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font: 700 11px/1 var(--font-body, system-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-article__media-badge--owned {
  background: var(--eh-red, #FF0000);
}
.news-media-credit {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  display: block;
  max-width: calc(100% - 16px);
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
  font: 600 10px/1.15 var(--font-body, system-ui);
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
.news-media-credit--compact {
  left: 4px;
  right: 4px;
  bottom: 4px;
  max-width: calc(100% - 8px);
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 8.5px;
  line-height: 1.1;
}
/* (Compact-list rows now use `.news-row` so this override is obsolete.) */

/* Source row — proto pattern: red uppercase publisher · grey time. Sits
   above the headline, owns its own line. Replaces the standalone
   .news-source margin-bottom and the old `<time>` in the action row. */
.news-article__source-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font: 700 12px/1 var(--font-body, system-ui);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--eh-red, #FF0000);
  min-width: 0;
}
.news-article__source-row .news-source {
  margin-bottom: 0;
  font: inherit;
  letter-spacing: inherit;
  color: var(--eh-red, #FF0000);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-article__source-sep {
  color: var(--border, #DADADA);
  flex: 0 0 auto;
}
.news-article__source-row .news-article__time {
  color: var(--fg-2, #6B6B6B);
  font: 600 12px/1 var(--font-body, system-ui);
  letter-spacing: 0.08em;
  margin: 0;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Top zone: source row, headline, summary. Vertical rhythm is unified
   with rows — 12px top padding on the body, 12px bottom padding on the
   final body chunk (chips). Same vertical breathing in cards + rows. */
.news-article__top {
  padding: 12px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--surface);
}
.news-article--lead .news-article__top {
  padding: 22px 24px 0;
  gap: 8px;
}
.news-article--with-thumb .news-article__top {
  padding: 12px 14px 0;
  flex: 1 1 auto;
}

/* Headline — proto explicit sizing. 20px for non-lead, 28px for lead. */
.news-article .news-headline {
  font-family: var(--font-body, system-ui);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--text, #111);
  margin: 0;
  text-transform: none;
}
.news-article .news-headline a { color: inherit; }
.news-article .news-headline a:hover { color: var(--eh-red, #FF0000); }
.news-article--lead .news-headline,
.news-article .news-headline--lead {
  font-weight: 800;
  font-size: 28px;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

/* Summary — proto explicit sizing. 14px line 1.55, 2-line clamp. */
.news-article .news-article__summary {
  color: var(--text-secondary, #555);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-article--lead .news-article__summary {
  font-size: 15.5px;
}

/* Chips row — proto match: small gap, sits at the bottom of the body
   via margin-top: auto so spacing is identical across all 3 grid cards. */
.news-article__chips {
  margin: 0;
  margin-top: auto;
  padding: 10px 18px 12px;
  background: var(--surface);
}
/* Lead chip row carries share/save on the right — chip pair on left,
   icon buttons pinned right via space-between. Non-lead cards keep
   chips as a simple inline-flex group (no `--with-actions` modifier). */
.news-article__chips--with-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.news-article__chips-list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}
.news-article__chips-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

/* Lead-card disc-counts (inline variant) — sits left in the action row
   next to the Discussion CTA. Slightly larger than the in-disc-strip
   counts since it reads as the primary engagement signal. */
.disc-strip__counts--inline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--muted, #777);
  font: 700 13px/1 var(--font-body, system-ui);
}
.disc-strip__counts--inline .disc-strip__count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.disc-strip__counts--inline svg { width: 14px; height: 14px; }
.disc-strip__counts--inline .disc-strip__count--likes { color: var(--eh-pink, #FF2E62); }
.news-article__actions-spacer { flex: 1 1 auto; }

/* Lead disc-strip name → city-pill spacing. The avatar/name/city pill
   sit closer than the proto's lead pattern; bump the city-pill's left
   margin so the commenter handle has room to breathe before the
   location chip starts. Applies only to lead so 3-up + compact rows
   keep their tighter rhythm. */
.news-article--lead .disc-strip__name .city-pill {
  margin-left: 6px;
}
/* Hero strips out the "·" separator between city-pill and snippet —
   the italic snippet reads as its own quote without needing a divider. */
.news-article--lead .disc-strip__sep {
  display: none;
}
/* Dark-mode bg already supplied by --surface token. */

/* Community zone — proto's `.commzone`. Cooler-grey surface that
   contrasts the body's --surface (#F2F2F2 light). Tokens supply both
   light (#F1F1F4) and dark (#1B1B1D) values via ehlocal.css. */
.news-article__community {
  background: var(--surface-2);
  border-top: 1px solid var(--hairline, #E6E6E6);
  padding: 12px 16px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px;
  align-items: center;
}
.news-article--lead .news-article__community {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  padding: 14px 22px;
}
.news-article--with-thumb .news-article__community {
  padding: 10px 14px;
}

/* Action row — proto pattern. Share/Save anchored at the LEFT, Discussion
   CTA pushed to the RIGHT via space-between. Inside grid-3 cards the
   action row sits below the disc-strip on its own grid row (commzone is
   1-column); the row stretches the full commzone width so the visible
   gap between Save and Discussion reads exactly like the proto. */
.news-article__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.news-article__actions-left {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* Icon-only Share/Save — proto's ghost-btn (32×32 icon button). Lead
   and non-lead share the same treatment for visual consistency across
   all card variants. The text label is intentionally dropped; the
   `.news-bookmark__label` element stays in markup (with `hidden`)
   purely as a JS hook for ehlocal.js's saved-icon flip. */
/* Unified share/save button — identical sizing, color, and hover
   across hero, card commzone, and row contexts (per "icons should be
   treated the same in card and row"). 28×28 box, 14×14 SVG, 6px
   radius, strict zero-padding centering, and a single neutral grey
   hover state for both share and save. */
.news-icon-btn {
  background: transparent;
  border: none;
  color: var(--fg-2, #6B6B6B);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s, color .12s;
  font-size: 0;
  padding: 0;
  margin: 0;
  line-height: 0;
}
.news-icon-btn svg { width: 14px; height: 14px; display: block; }
.news-icon-btn:hover,
.news-icon-btn--save:hover {
  background: var(--surface-hover, #E8E8E8);
  color: var(--text, #0B0B0B);
}
.news-icon-btn[aria-pressed="true"] { color: var(--fg, #111); }
.news-bookmark__label[hidden] { display: none; }

/* Disc-strip inside the community footer is flat — no nested card-on-card
   border + bg. The community zone itself provides the surface. */
.news-article__community .disc-strip {
  margin: 0;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.news-article__community .disc-strip:hover {
  background: transparent;
}

/* ── Specificity overrides for legacy .news-share / .news-bookmark ──
   Both home.css and ehlocal.css define visual rules for those classes
   (border, padding, font, color) that load AFTER news.css and would
   beat the .news-icon-btn base visuals on shared properties. The
   classes still exist as JS hooks (used by ehlocal.js updateButtonState
   + share toast wiring), so we don't remove them — we neutralize their
   legacy visuals when scoped inside the community zone and let the
   icon-btn rules paint instead. */
.news-article__community .news-share,
.news-article__community .news-bookmark {
  border: none;
  background: transparent;
  font: inherit;
  white-space: nowrap;
  padding: 0;
}
/* Card commzone share/save inherit the unified `.news-icon-btn`
   sizing + hover from above — no per-context overrides. */
.news-article__community .news-icon-btn:hover,
.news-article__community .news-icon-btn--save:hover,
.news-row__bottom .news-icon-btn:hover,
.news-row__bottom .news-icon-btn--save:hover {
  background: var(--surface-hover, #E8E8E8);
  color: var(--text, #0B0B0B);
  border-color: transparent;
}
html[data-theme="dark"] .news-article__community .news-icon-btn:hover,
html[data-theme="dark"] .news-article__community .news-icon-btn--save:hover,
html[data-theme="dark"] .news-row__bottom .news-icon-btn:hover,
html[data-theme="dark"] .news-row__bottom .news-icon-btn--save:hover {
  background: var(--surface-hover, #252525);
  color: var(--text, #F2F2F2);
  border-color: transparent;
}

/* Disc-strip in 3-up grid cards — proto's `grid-3 .disc-strip` layout.
   Avatar + name on row 1; italic snippet spans both columns on row 2.
   Counts hide (the disc-btn carries the join-discussion CTA). */
.news-grid-secondary > .news-article .news-article__community .disc-strip {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-areas:
    "ava who"
    "snippet snippet";
  column-gap: 8px;
  row-gap: 6px;
  align-items: center;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.news-grid-secondary > .news-article .news-article__community .disc-strip__avatar {
  grid-area: ava;
}
.news-grid-secondary > .news-article .news-article__community .disc-strip__name {
  grid-area: who;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-grid-secondary > .news-article .news-article__community .disc-strip__sep {
  display: none;
}
.news-grid-secondary > .news-article .news-article__community .disc-strip__snippet {
  grid-area: snippet;
  font-style: italic;
  color: var(--fg-2, #6B6B6B);
  font-size: 12.5px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  max-width: 100%;
  display: block;
}
.news-grid-secondary > .news-article .news-article__community .disc-strip__counts {
  display: none;
}

/* =================================================================
   SCOPE PANEL DUAL LAYOUT (G1s integration, slice 6)
   The scope panel ships TWO renderings of each story — desktop cards
   and mobile rows — with CSS gating which one is visible at the 1080px
   breakpoint. Template-driven so the `<article class="news-row">`
   markup is real on mobile per the mockup contract; no card→row CSS
   adapter is in play.
   ================================================================= */
@media (min-width: 1080px) {
  .news-scope-panel__mobile { display: none; }
}
@media (max-width: 1079px) {
  .news-scope-panel__desktop { display: none; }
  /* Flex/gap only inside the mobile media query so the desktop hide
     rule above isn't overridden by an unguarded `display: flex`
     declaration further down the cascade. (Codex review fix, slice 6.) */
  .news-scope-panel__mobile {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

/* =================================================================
   NEWS ROW — sister to .news-article for the row layout (G1s slice 5).
   Used by `_news_row.html`. Replaces the card pattern below the 1080px
   breakpoint and inside the stacked feed at any width. Layout:
     [96px thumb][body[metaline / headline / summary / chips / bottom]]
     [optional disc-strip band, full-width below body, comments >= 2]
   ================================================================= */
.news-row {
  --news-row-thumb: 112px;
  display: grid;
  grid-template-columns: var(--news-row-thumb) 1fr;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--hairline, #E6E6E6);
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  box-shadow: var(--card-shadow);
  margin-bottom: 0;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}
/* Dark-mode bg already supplied by --surface token. */
.news-row:hover {
  transform: translateY(-1px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--hairline, #E6E6E6);
}
.news-row--has-discstrip {
  grid-template-columns: var(--news-row-thumb) 1fr;
  grid-template-rows: minmax(112px, auto) auto;
}
.news-row--has-discstrip .news-row__media { grid-row: 1 / 2; grid-column: 1 / 2; }
.news-row--has-discstrip .news-row__body  { grid-row: 1 / 2; grid-column: 2 / 3; }

.news-row__media {
  position: relative;
  background: var(--surface-hover, #f5f5f5);
  overflow: hidden;
  width: var(--news-row-thumb);
  min-height: var(--news-row-thumb);
  height: 100%;
  align-self: stretch;
}
.news-row__media-link,
.news-row__media a {
  display: block;
  width: 100%;
  height: 100%;
}
.news-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-row__media--gradient { display: grid; place-items: center; }
.news-row__topic-glyph {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.news-row__topic-glyph svg { width: 18px; height: 18px; }
/* Topic-tinted gradient backgrounds — applied to the media element
   itself (the gradient surface), not the glyph chip. Matches deeper
   palette used on `.news-article__media--*`. */
.news-row__media--community  { background: radial-gradient(140% 110% at 8% -8%, #E45757 0%, #B23030 35%, #6B1818 70%, #240606 100%); }
.news-row__media--civic      { background: radial-gradient(140% 110% at 8% -8%, #5A8DFF 0%, #2F5BD8 35%, #163A99 70%, #07194D 100%); }
.news-row__media--business   { background: radial-gradient(140% 110% at 8% -8%, #E6C36A 0%, #A37A1F 35%, #62420A 70%, #1F1402 100%); }
.news-row__media--environment{ background: radial-gradient(140% 110% at 8% -8%, #4FB87A 0%, #2D9C5A 35%, #155F33 70%, #06200E 100%); }
.news-row__media--transit    { background: radial-gradient(140% 110% at 8% -8%, #34D2B6 0%, #0F8F7A 35%, #0A5C50 70%, #03241F 100%); }
.news-row__media--sport      { background: radial-gradient(140% 110% at 8% -8%, #C19EEE 0%, #6B3FA0 35%, #3F1F73 70%, #170A2C 100%); }
.news-row__media--sports     { background: radial-gradient(140% 110% at 8% -8%, #8BEA72 0%, #2F9D28 35%, #176315 70%, #062407 100%); }
.news-row__media--lifestyle  { background: radial-gradient(140% 110% at 8% -8%, #FFC58A 0%, #E08A2B 35%, #8C4F0F 70%, #2D1602 100%); }
.news-row__media--culture    { background: radial-gradient(140% 110% at 8% -8%, #C49AE6 0%, #A23BC4 35%, #5B1E73 70%, #1F0A2E 100%); }
.news-row__media--health     { background: radial-gradient(140% 110% at 8% -8%, #6FCDF5 0%, #3BA2E1 35%, #1F5C8C 70%, #08233B 100%); }
.news-row__media--emergency  { background: radial-gradient(140% 110% at 8% -8%, #FF7676 0%, #E63838 35%, #8C1818 70%, #240505 100%); }
.news-row__media--crime      { background: radial-gradient(140% 110% at 8% -8%, #5C84A8 0%, #1A3852 35%, #0F2236 70%, #050C14 100%); }
.news-row__media--news       { background: radial-gradient(140% 110% at 8% -8%, #9A9A9A 0%, #555 35%, #2E2E2E 70%, #0A0A0A 100%); }

.news-row__body {
  display: flex;
  flex-direction: column;
  /* Unified vertical rhythm — 12px top + 12px bottom matches card
     body (.news-article__top + .news-article__chips both at 12px).
     Horizontal stays at 14px (rows are tighter horizontally). */
  padding: 12px 14px;
  min-width: 0;
  gap: 0;
  background: var(--surface);
  justify-content: space-between;
}
/* Dark-mode bg already supplied by --surface token. */
.news-row__top {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.news-row__metaline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  /* Proto sets `margin-bottom: 4px`; bumped to 5px so the metaline
     gets one extra pixel of breathing room above the headline. */
  margin-bottom: 5px;
  font: 700 11px/1 var(--font-body, system-ui);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--eh-red, #FF0000);
}
.news-row__src {
  color: var(--eh-red, #FF0000);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.news-row__src:hover { text-decoration: underline; text-underline-offset: 3px; }
.news-row__src,
.news-row__sep,
.news-row__time {
  font: 700 11px/1 var(--font-body, system-ui);
  letter-spacing: 0.10em;
}
.news-row__sep { color: var(--border, #ddd); }
.news-row__time {
  color: var(--muted, #888);
  white-space: nowrap;
}
.news-row .news-headline {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.18;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-row .news-headline a { color: inherit; text-decoration: none; }
.news-row .news-headline a:hover { color: var(--eh-red, #FF0000); }
.news-row__summary {
  margin: 4px 0 0;
  color: var(--text-secondary, #444);
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news-row__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  /* Float chips to the bottom of the body — proto pattern. The `__top`
     group sits naturally at top, chips push to bottom via `auto`, and
     `__bottom` (action row) follows directly under the chips. */
  margin-top: auto;
  padding-top: 8px;
}
/* Bottom action row sits inside body — share/save anchored at the LEFT,
   Discussion CTA at the RIGHT via space-between. Mirrors proto's
   `.row__bottom { display: flex; gap: 4 }` pattern with the right-side
   block pulled to the right edge by `margin-left: auto`. Both groups
   stay inside the body cell. */
.news-row__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  width: 100%;
}
.news-row__bottom-left {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--muted, #888);
}
/* Row share/save inherit unified `.news-icon-btn` sizing — no
   per-context overrides needed (base rule supplies 28×28/14×14 with
   strict centering and the same neutral hover). */
/* Row Discussion CTA — same height as the card disc-btn (27px) per
   user spec. Padding + font match the base .news-discussion-btn rule
   above, so we drop the previous `.disc-btn--sm` shrink. */
.news-row__bottom .news-discussion-btn {
  padding: 7px 14px 7px 12px;
  font: 700 12.5px/1 var(--font-body, system-ui);
  letter-spacing: 0.01em;
  gap: 6px;
}
.news-row__bottom .news-discussion-btn svg { width: 13px; height: 13px; }

/* Disc-strip band — full width below body, only when comments >= 2.
   Cool-grey surface (#F1F1F4) matches commzone, distinct from body
   #F2F2F2. Proto's `.row__discstrip` is a 2-column grid (disc-strip |
   optional auto) with align-items center; same layout here. */
.news-row__discstrip {
  grid-row: 2 / 3;
  grid-column: 1 / -1;
  background: var(--surface-2);
  border-top: 1px solid var(--hairline, #E6E6E6);
  padding: 8px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.news-row__discstrip .disc-strip {
  font-size: 12.5px;
  border: 0;
  background: transparent;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.news-row__discstrip .disc-strip__name {
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.news-row__discstrip .disc-strip__sep { color: var(--border, #DADADA); margin: 0 2px; }
.news-row__discstrip .disc-strip__snippet {
  color: var(--muted, #888);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.news-row__discstrip .disc-strip__counts {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted, #888);
  font: 600 11.5px/1 var(--font-body, system-ui);
  flex-shrink: 0;
}
/* Dark-mode bg already supplied by --surface-2 token. */

/* Mobile (<1080px) — disc-strip collapses to AVATAR ONLY (G1s slice 5):
   commenter name, city pill, snippet, and counts all hide so the strip
   is a tight glyph signal that "people are talking about this." */
@media (max-width: 1079px) {
  .news-row { --news-row-thumb: 96px; }
  .news-row--has-discstrip {
    grid-template-rows: minmax(96px, auto) auto;
  }
  .news-row__discstrip { padding: 6px 12px; }
  /* Tighten vertical rhythm on mobile rows — chips and bottom action
     row sit closer to the headline so each row consumes less height
     in the feed. Desktop spacing stays as-is. */
  .news-row__body { padding: 10px 14px 8px; }
  .news-row__chips { padding-top: 4px; gap: 4px; }
  .news-row__bottom { margin-top: 4px; }
  /* Mobile: keep the snippet (ellipsised) AND the comment/like icon
     counts visible so the strip still signals "people are commenting".
     Hide only commenter name + city-pill + sep to keep the row compact. */
  .news-row__discstrip .disc-strip__name,
  .news-row__discstrip .disc-strip__sep,
  .news-row__discstrip .city-pill {
    display: none;
  }
  .news-row__discstrip .disc-strip__snippet {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
  }
  .news-row__discstrip .disc-strip__counts {
    display: inline-flex;
    flex: 0 0 auto;
  }
}
@media (max-width: 640px) {
  .news-row__metaline .news-source { max-width: 110px; }
  .news-row .news-headline { font-size: 17px; }
}

/* =================================================================
   COMPACT WX-ROW + TIDE-ROW (G1s integration, slice 3)
   Mobile/tablet only (<1080px). Sit inside the news feed between top
   stories so weather + tides are visible above the fold without the
   full sidebar. Hidden on desktop where the sidebar widgets show the
   complete data.
   ================================================================= */
.wx-row,
.tide-row {
  display: none;
}
@media (max-width: 1079px) {
  .wx-row,
  .tide-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    /* Margin removed — the parent `.news-scope-panel__mobile` supplies
       a 10px flex gap between siblings; an additional 10px margin
       here was double-spacing rows that had a wx-row or tide-row
       above them. */
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--hairline, #E6E6E6);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    color: var(--text);
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  }
  .wx-row:hover,
  .tide-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.08);
    border-color: var(--muted);
    color: var(--text);
  }

  .wx-row__icon {
    font-size: 28px;
    line-height: 1;
    flex: 0 0 auto;
  }
  .wx-row__temp {
    font-family: var(--font-display, 'Druk Wide Bold', 'Anton', sans-serif);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: 0.005em;
    color: var(--text);
    line-height: 1;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: flex-start;
  }
  .wx-row__temp-num { color: var(--eh-red, #FF0000); }
  .wx-row__temp sup {
    font-size: 0.55em;
    vertical-align: top;
    line-height: 1;
    margin-top: 2px;
  }
  .wx-row__desc {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .wx-row__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--eh-red, #FF0000);
  }
  .wx-row__label .live-pill {
    font-size: 9px;
    font-weight: 700;
    background: var(--eh-red, #FF0000);
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: 0.05em;
  }
  .wx-row__detail {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .wx-row__cta,
  .tide-row__cta {
    flex: 0 0 auto;
    color: var(--eh-red, #FF0000);
    display: inline-flex;
    align-items: center;
  }
  .wx-row__cta svg,
  .tide-row__cta svg { width: 14px; height: 14px; }

  .tide-row__label {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .tide-row__title {
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--eh-red, #FF0000);
  }
  .tide-row__station {
    font-size: 11px;
    color: var(--muted);
  }
  .tide-row__chips {
    flex: 1 1 auto;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
  }
  .tide-row__chips::-webkit-scrollbar { display: none; }
  .tide-mini {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--surface-2, #F1F1F4);
    border: 1px solid var(--hairline, #E6E6E6);
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    line-height: 1;
  }
  .tide-mini--next {
    background: color-mix(in srgb, var(--eh-red, #FF0000) 6%, var(--surface, white));
    border-color: color-mix(in srgb, var(--eh-red, #FF0000) 32%, var(--surface, white));
  }
  .tide-mini__time { font-variant-numeric: tabular-nums; }
  .tide-mini__type {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 3px;
  }
  .tide-mini__type--high { background: rgba(34,197,94,0.16); color: #1F7A3A; }
  .tide-mini__type--low  { background: rgba(59,130,246,0.16); color: #1E5BC2; }
}
@media (max-width: 520px) {
  /* Drop verbose detail at very narrow widths so the rows stay tight.
     `.tide-mini__type` (HIGH/LOW pill) STAYS visible — the high/low
     signal is the whole point of the tide chip and was being hidden
     here. Only the station name and wx detail subtitle drop. */
  .wx-row__detail { font-size: 11px; }
  .tide-row__station { display: none; }
  .tide-mini { padding: 4px 9px; font-size: 11.5px; }
}