/* news.css V1.3 - 2026-10-05, Nolan (Karl's walk NW-03). Emoji reactions; the Change my vote link. */
/* news.css V1.2 - 2026-10-05, Nolan (Karl's walk NW-04). The Morning Skate question card (.h-nw__ask). */
/* news.css V1.1 - 2026-10-05, Nolan (Karl's walk NW-02/06 + globals). The look-alike controls are gone for the globals (.h-detail__back, .h-topicon, .h-btn family, .h-seg, .h-switch, .h-input, .h-label): .h-nw__cb, .h-nw__btn*, .h-nw__menu, .h-nw__fb, .h-nw__seg2, .h-nw__in, .h-nw__lb, .h-nw__tg, .h-nw__swl retired. The area line is a real 44 px control with the name and Change (NW-02). Rows and cards give their words the free width (.h-nw__grow) so a trailing chevron pins to the right edge and the icons centre (NW-06). */
/* news.css V1.0 - 2026-10-05, Harmony. The member News front page, four story readers, Morning Skate, Following and Share a story (Sloane's approved Broadsheet playground, app fonts only). Tokens only. */
/* ============================================================================
   NEWS - its own editorial feel, not a reskinned Guides library. Public Sans
   at 800 for headlines and 17 px / 1.62 for the article body; Impact (the
   display face) for the masthead, section titles, brief numbers and the drop
   cap. Warm off-white ink over the page is the body text token; no serif.

   Same full-screen layer rules as Guides (above both navs, below sheets) and
   the same centred readable column at tablet and laptop widths.
   ========================================================================== */

/* --- the layer ---------------------------------------------------------- */
.h-nw {
  position: absolute; inset: 0; z-index: 46; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); container: h365nw / inline-size;
  opacity: 0; transform: translateY(8px); transition: opacity var(--t-fast), transform var(--t-fast);
}
.h-nw.is-open { opacity: 1; transform: none; }
.h-nw--front { z-index: 46; }
.h-nw--story { z-index: 47; }
.h-nw__head {
  flex: none; position: relative; display: flex; align-items: center; gap: var(--sp-2); z-index: 4;
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--sp-4) 12px;
  border-bottom: 1px solid var(--line); background: var(--panel);
}
/* Over the photo essay's cover the head is a scrim, page colour fading to clear, so the global top-bar icons
   (which have no plate of their own) read against any photo. The round back brings its own plate. */
.h-nw__head--over { position: absolute; left: 0; right: 0; top: 0; border: 0; background: linear-gradient(180deg, var(--bg), transparent); }
.h-nw__mast { flex: 1; min-width: 0; }
.h-nw__mast small { display: block; font-size: var(--fs-xs); font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.h-nw__mast h2 {
  margin: 1px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.05; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h-nw__prog { position: absolute; left: 0; bottom: -1px; height: 2px; background: var(--green); width: 0; }
.h-nw__flex { flex: 1; }
.h-nw__scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.h-nw__col { width: 100%; margin: 0 auto; padding: var(--sp-4) var(--sp-5) calc(28px + env(safe-area-inset-bottom, 0px)); }
.h-nw__ic { flex: none; }
.h-nw__foot { flex: none; padding: 12px var(--sp-4) calc(20px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--panel); display: flex; gap: 10px; }
/* NW-06: the words of a row or card take the free width, so whatever trails (a chevron, Change, a switch, a tick)
   sits on the right edge at every width, never floating after the text. */
.h-nw__grow { flex: 1; min-width: 0; }

/* --- shared ------------------------------------------------------------- */
.h-nw__hl { font-family: var(--font-body); font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.h-nw__sl { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sec, var(--muted)); }
.h-nw__ph { position: relative; display: block; overflow: hidden; background: var(--panel2); }
.h-nw__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.h-nw__sample { position: absolute; left: 8px; bottom: 6px; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.h-nw__cred { position: absolute; right: 8px; bottom: 6px; font-size: 9.5px; color: var(--ink); opacity: .85; }
.h-nw__sart { position: absolute; inset: 0; background: var(--panel2); }
.h-nw__sart::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, var(--sec, var(--muted)), transparent 55%); opacity: .25; }
.h-nw__src { position: absolute; left: 10px; top: 9px; padding: 3px 7px; border-radius: var(--r-sm); background: var(--ink); color: var(--bg); font-size: 10.5px; font-weight: 900; }
.h-nw__sn { position: absolute; left: 10px; bottom: 8px; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--sec, var(--muted)); }
.h-nw__time { font-size: 11.5px; color: var(--muted); }
.h-nw__time--pad { display: block; margin-top: 10px; }
.h-nw__dn { color: var(--green); font-weight: 800; font-size: 12px; }
.h-nw__muted { color: var(--muted); }
.h-nw a.h-btn { text-decoration: none; }
.h-nw__labh { margin: 24px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.h-nw__labh--first { margin-top: 0; }
.h-nw__note { font-size: 12.5px; color: var(--warn); margin: 10px 0 0; }
.h-nw__empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 30px 10px; margin-top: 14px; border-radius: var(--r-xl); border: 1px dashed var(--line2); }
.h-nw__empty p { margin: 0; font-size: 13px; color: var(--muted); }
.h-nw__fc { width: 22px; height: 22px; border-radius: var(--r-pill); flex: none; display: grid; place-items: center; background: var(--panel2); border: 1px solid var(--line2); font-size: 9px; font-weight: 800; color: var(--ink); }

/* --- front page --------------------------------------------------------- */
.h-nw__scores {
  display: flex; align-items: center; width: calc(100% + 2 * var(--sp-5)); margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)) 0; padding: 9px var(--sp-5);
  border: 0; border-bottom: 1px solid var(--line); background: var(--panel); font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-align: left; cursor: pointer;
}
.h-nw__scores span { padding-right: 12px; margin-right: 12px; border-right: 1px solid var(--line2); }
.h-nw__scores span:last-of-type { border: 0; }
.h-nw__scores b { color: var(--ink); }
.h-nw__k { color: var(--muted); font-size: 10.5px; letter-spacing: .1em; font-weight: 800; }
.h-nw__todayrow { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.h-nw__todayrow h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 27px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.h-nw__date { display: block; margin: 4px 0 0; }
/* NW-02: the area line is a control you can find, not faint text: a full-width 44 px row with the pin, the area
   by name and the word Change on the right edge (the Partners area line's words, at a tappable size). */
.h-nw__area {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 10px; padding: 10px 12px;
  border-radius: var(--r-md); border: 1px solid var(--line2); background: var(--panel); color: var(--ink);
  font: 600 13.5px/1.35 var(--font-body); text-align: left; cursor: pointer;
}
.h-nw__area > .h-nw__ic { color: var(--green); }
.h-nw__area b { font-weight: 800; }
.h-nw__areago { flex: none; color: var(--green); font-weight: 800; }
.h-nw__lead { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; }
.h-nw__leadph { height: 230px; margin: 14px calc(-1 * var(--sp-5)) 0; }
.h-nw__lead h3 { margin: 10px 0 6px; font-size: 28px; line-height: 1.08; }
.h-nw__lead p { margin: 0; font: 400 15.5px/1.45 var(--font-body); color: var(--muted); }
.h-nw__by { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 12px; color: var(--muted); }
.h-nw__brief { display: block; width: 100%; text-align: left; margin-top: 18px; padding: 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); color: inherit; cursor: pointer; }
.h-nw__brief h4 { margin: 0 0 8px; display: flex; justify-content: space-between; align-items: baseline; font: 800 18px var(--font-body); letter-spacing: -.01em; }
.h-nw__brief h4 small { font: 700 11.5px var(--font-body); color: var(--muted); }
.h-nw__brief ol { margin: 0; padding-left: 18px; }
.h-nw__brief li { margin: 6px 0; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.h-nw__foll { display: flex; gap: 8px; align-items: center; width: 100%; padding: 10px 12px; border-radius: var(--r-md); border: 1px dashed var(--line2); background: none; margin-top: 12px; font-size: 12.5px; color: var(--muted); text-align: left; cursor: pointer; }
.h-nw__foll b { flex: none; color: var(--green); }
.h-nw__sechd { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 4px; padding-top: 12px; border-top: 2px solid var(--line2); }
.h-nw__sechd b { font: 800 18px var(--font-body); letter-spacing: -.01em; }
.h-nw__sechd small { font-size: 12px; color: var(--muted); font-weight: 700; }
.h-nw__row { display: grid; grid-template-columns: 1fr 96px; gap: 12px; width: 100%; text-align: left; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; cursor: pointer; }
.h-nw__row .h-nw__ph { height: 72px; border-radius: var(--r-sm); }
.h-nw__row h5 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 4px 0 4px; font-size: 17px; line-height: 1.2; }
.h-nw__ty { display: inline-flex; gap: 4px; align-items: center; font-size: 10.5px; font-weight: 800; color: var(--muted); margin-left: 6px; }
.h-nw__share { display: flex; gap: 12px; align-items: center; width: 100%; margin-top: 18px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--panel); text-align: left; color: inherit; cursor: pointer; }
/* NW-06 (Karl's "floating icon"): the words are one block that takes the free width, so the chevron is pinned to the
   card's right edge and the send icon and the chevron centre on both lines, not on the title. */
.h-nw__share > .h-nw__grow { display: flex; flex-direction: column; gap: 2px; }
.h-nw__share > .h-nw__ic { align-self: center; }
.h-nw__share > .h-nw__ic:last-child { color: var(--muted); }
.h-nw__share b { display: block; font: 800 16px var(--font-body); letter-spacing: -.01em; }
.h-nw__share small { color: var(--muted); font-size: 12px; }
.h-nw__end { text-align: center; padding: 18px 0 4px; font-size: 12px; color: var(--muted); }

/* --- story -------------------------------------------------------------- */
.h-nw__hero { height: 240px; margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)) 0; }
.h-nw__shead h1, .h-nw__fulltx h1, .h-nw__linkpg h1 { margin: 8px 0 8px; font-size: 30px; line-height: 1.08; }
.h-nw__shead { display: block; margin-top: 14px; }
.h-nw__opinion { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: var(--r-sm); border: 1px solid var(--gold); color: var(--gold); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.h-nw__dek { font: 400 15.5px/1.4 var(--font-body); color: var(--muted); margin: 0; }
.h-nw__meta { display: flex; gap: 10px; align-items: center; margin: 14px 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.h-nw__meta .h-nw__fc { width: 32px; height: 32px; font-size: 12px; }
.h-nw__meta b { color: var(--ink); display: block; }
.h-nw__meta small { display: block; }
.h-nw__meta em { display: block; font-style: normal; }
.h-nw__meta-acts { margin-left: auto; }
.h-nw__body { --fs: 18px; }
.h-nw__p { font: 400 calc(var(--fs) - 1px) / 1.62 var(--font-body); color: var(--ink); margin: 0 0 16px; }
.h-nw__drop::first-letter { float: left; font: 400 3em/.8 var(--font-display); padding: 6px 8px 0 0; color: var(--green); }
.h-nw__subhead { margin: 22px 0 10px; font: 800 19px/1.25 var(--font-body); letter-spacing: -.01em; }
.h-nw__pq { margin: 22px 0; padding: 6px 0 6px 16px; border-left: 3px solid var(--green); font: italic 700 20px/1.35 var(--font-body); color: var(--ink); }
.h-nw__pq small { display: block; font: 700 12px var(--font-body); color: var(--muted); margin-top: 8px; font-style: normal; }
.h-nw__img { margin: 6px 0 18px; }
.h-nw__img .h-nw__ph { height: 200px; border-radius: var(--r-md); }
.h-nw__img figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; }
.h-nw__yt { position: relative; height: 200px; border-radius: var(--r-md); overflow: hidden; margin: 6px 0 6px; background: var(--panel2); }
.h-nw__ytbtn { position: absolute; inset: 0; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; }
.h-nw__ytbtn .h-nw__ph { position: absolute; inset: 0; }
.h-nw__dim { opacity: .55; }
.h-nw__pl { position: absolute; inset: 0; display: grid; place-items: center; }
.h-nw__pl span { width: 64px; height: 46px; border-radius: var(--r-md); background: var(--ink); color: var(--bg); display: grid; place-items: center; }
.h-nw__ytcap { position: absolute; left: 10px; right: 10px; bottom: 8px; font-size: 12px; font-weight: 700; color: var(--ink); text-align: left; pointer-events: none; }
.h-nw__yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.h-nw__cap2 { font-size: 12px; color: var(--muted); margin: 0 0 18px; }
.h-nw__lc { display: grid; grid-template-columns: 96px 1fr; width: 100%; text-align: left; border: 1px solid var(--line2); border-radius: var(--r-md); overflow: hidden; margin: 0 0 18px; background: var(--panel); padding: 0; color: inherit; text-decoration: none; }
.h-nw__lc .h-nw__ph { min-height: 96px; }
.h-nw__lctx { padding: 10px 12px; }
.h-nw__lc b { display: block; font: 800 15px/1.25 var(--font-body); margin: 3px 0 4px; }
.h-nw__lc small { font-size: 11.5px; color: var(--muted); }
.h-nw__lcsum { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.h-nw__lnk { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 800; color: var(--info); }
.h-nw__social { padding: 12px 14px; border: 1px solid var(--line2); border-radius: var(--r-md); margin: 0 0 18px; background: var(--panel); font-size: 13px; }
.h-nw__social p { margin: 6px 0 10px; color: var(--muted); }
.h-nw__box { margin: 14px 0 18px; padding: 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.h-nw__ax { padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.h-nw__ax:first-child { border: 0; padding-top: 0; }
.h-nw__ax b { display: block; font-size: 11px; letter-spacing: .12em; color: var(--gold); margin-bottom: 2px; }
.h-nw__cmp { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line2); border-radius: var(--r-md); overflow: hidden; margin: 6px 0 18px; }
.h-nw__cmp > div { padding: 12px; }
.h-nw__cmp > div + div { border-left: 1px solid var(--line2); }
.h-nw__cmp small { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.h-nw__cmp b { display: block; font: 800 16px var(--font-body); margin: 6px 0 2px; }
.h-nw__cmp span { font-size: 12px; color: var(--muted); }
.h-nw__card { padding: 14px; border: 1px solid var(--line2); border-radius: var(--r-md); margin: 6px 0 18px; background: var(--panel); }
.h-nw__cardtitle { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted); margin-bottom: 6px; }
.h-nw__stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--green); }
.h-nw__stat span { display: block; font-size: 14px; margin-top: 4px; }
.h-nw__stat small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.h-nw__scoreline { display: flex; gap: 8px; align-items: baseline; font: 800 22px var(--font-body); }
.h-nw__score small { display: block; font-size: 12px; color: var(--muted); margin-top: 4px; }
.h-nw__tradegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.h-nw__tradegrid b { display: block; font: 800 16px var(--font-body); }
.h-nw__tradegrid small { display: block; font-size: 10.5px; letter-spacing: .1em; color: var(--muted); }
.h-nw__tradegrid p { margin: 4px 0 0; font-size: 13px; }
.h-nw__charity { padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--gold); margin: 6px 0 18px; background: var(--panel); }
.h-nw__charity > b { display: block; font: 800 18px var(--font-body); margin-top: 4px; }
.h-nw__pb { height: 8px; border-radius: var(--r-pill); background: var(--panel2); margin: 10px 0 6px; overflow: hidden; }
.h-nw__pb i { display: block; height: 100%; background: var(--gold); }
.h-nw__charity-acts { display: flex; gap: 8px; margin-top: 10px; align-items: center; flex-wrap: wrap; }
.h-nw__dropoff { font-size: 12.5px; color: var(--muted); }
.h-nw__poll, .h-nw__triv { padding: 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); margin: 6px 0 18px; }
.h-nw__poll small, .h-nw__triv > small { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--green); }
.h-nw__triv > small { color: var(--purple); }
.h-nw__poll h5 { margin: 6px 0 10px; font: 800 17px/1.3 var(--font-body); }
.h-nw__triv .h-trivia { margin: 8px 0 0; padding: 0; border: 0; box-shadow: none; background: none; }
.h-nw__triv .h-trivia__h { display: none; }
.h-nw__opt { position: relative; display: flex; align-items: center; width: 100%; height: 42px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: none; margin-top: 6px; padding: 0 12px; font-size: 14px; overflow: hidden; text-align: left; color: var(--ink); cursor: pointer; }
.h-nw__opt i { position: absolute; inset: 0 auto 0 0; background: var(--green); opacity: .14; }
.h-nw__opt span, .h-nw__opt b { position: relative; }
.h-nw__opt span { flex: 1; }
.h-nw__opt.is-mine { border-color: var(--green); }
.h-nw__opt:disabled { cursor: default; }
.h-nw__live { padding: 10px 0 10px 12px; border-left: 3px solid var(--line2); margin: 0 0 14px; }
.h-nw__live.is-key { border-color: var(--green); }
.h-nw__livetime { font-size: 12px; font-weight: 800; color: var(--muted); margin-right: 8px; }
.h-nw__keytag { font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--green); }
.h-nw__live p { margin: 4px 0; font-size: 15px; line-height: 1.5; }
.h-nw__live small { color: var(--muted); font-size: 12px; }
.h-nw__corr { padding: 10px 12px; border-radius: var(--r-md); background: var(--panel2); font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.h-nw__corr b { color: var(--ink); }
.h-nw__credits { display: block; margin-top: 4px; }
.h-nw__of { font-weight: 700; }
.h-nw__trade .h-nw__cardtitle { margin-bottom: 10px; }
.h-nw__photo { background: var(--bg); }
.h-nw__scoresheet { padding-top: 4px; }
.h-nw__sources { font-size: 12px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; line-height: 1.5; }
.h-nw__react { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
/* A reaction is a toggle and the global button has no pressed state: the member's own reaction is outlined in green. */
.h-nw__react .h-btn[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.h-nw__rel { display: grid; grid-template-columns: 1fr 80px; gap: 10px; width: 100%; text-align: left; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; cursor: pointer; }
.h-nw__rel .h-nw__ph { height: 60px; border-radius: var(--r-sm); }
.h-nw__rel b { display: block; font: 800 15px/1.25 var(--font-body); margin-top: 3px; }
.h-nw__full { position: relative; height: 560px; margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-5)) 0; }
.h-nw__fullph { position: absolute; inset: 0; }
.h-nw__full::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, var(--bg)); pointer-events: none; }
.h-nw__fulltx { position: absolute; left: var(--sp-5); right: var(--sp-5); bottom: 18px; z-index: 1; }
.h-nw__fulltx h1 { font-size: 36px; line-height: 1.02; margin: 8px 0 10px; }
.h-nw__italic { margin: 0; font: italic 400 15.5px/1.4 var(--font-body); color: var(--muted); }
.h-nw__gal { position: relative; margin: 20px calc(-1 * var(--sp-5)) 0; }
.h-nw__galcell { height: 250px; }
.h-nw__galbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px var(--sp-5); font-size: 12px; color: var(--muted); }
.h-nw__nv { position: absolute; top: 105px; width: 38px; height: 38px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--panel); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.h-nw__nv--l { left: 10px; }
.h-nw__nv--r { right: 10px; }
.h-nw__linkpg { padding: 16px; border-radius: var(--r-xl); border: 1px solid var(--line2); background: var(--panel); margin-top: 6px; }
.h-nw__linkpg .h-nw__ph { height: 170px; border-radius: var(--r-md); margin-bottom: 10px; }
.h-nw__linkpg h1 { font-size: 24px; line-height: 1.15; }
.h-nw__linksum { font: 400 17px/1.5 var(--font-body); color: var(--ink); margin: 12px 0 10px; }
.h-nw__html { margin-top: 14px; }

/* --- Morning Skate, Following, Share a story ----------------------------- */
.h-nw__bh { padding: 18px 16px; border-radius: var(--r-xl); background: var(--panel); border: 1px solid var(--green); }
.h-nw__bh small { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: var(--green); }
.h-nw__bh h1 { margin: 8px 0 4px; font: 800 30px/1.05 var(--font-body); letter-spacing: -.015em; }
.h-nw__bi { display: grid; grid-template-columns: 28px 1fr; gap: 10px; width: 100%; text-align: left; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; cursor: pointer; }
.h-nw__bi b { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--green); }
.h-nw__bi h5 { margin: 0 0 4px; font-size: 17px; line-height: 1.25; }
.h-nw__bi p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.h-nw__done { text-align: center; padding: 18px 10px; margin-top: 14px; border-radius: var(--r-lg); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.h-nw__done--sent { margin-top: 30px; }
.h-nw__done b { display: block; font: 800 20px var(--font-body); margin: 6px 0 4px; }
.h-nw__sw { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 12px; border-radius: var(--r-md); border: 0; background: var(--panel); font-size: 13px; text-align: left; color: inherit; cursor: pointer; }
.h-nw__areac { padding: 14px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.h-nw__areac b { display: block; font: 800 17px var(--font-body); }
.h-nw__fr { display: flex; gap: 10px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.h-nw__fr small { display: block; color: var(--muted); font-size: 12px; }
.h-nw__intro { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.h-nw__f { margin-top: 12px; }
.h-nw__send { margin-top: 18px; }
.h-nw__up { display: flex; gap: 10px; align-items: center; width: 100%; padding: 14px; border-radius: var(--r-md); border: 1px dashed var(--line2); background: none; color: var(--muted); font-size: 13px; margin-top: 12px; text-align: left; cursor: pointer; }
.h-nw__ck { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; margin-top: 12px; font-size: 13px; line-height: 1.4; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
.h-nw__bx { width: 22px; height: 22px; border-radius: var(--r-sm); border: 1.5px solid var(--line2); flex: none; display: grid; place-items: center; color: var(--on-green); }
.h-nw__ck.is-on .h-nw__bx { background: var(--green); border-color: var(--green); }

/* --- sheets (opened through H365UI.open) --------------------------------- */
.h-nw__sheet { display: block; }
.h-nw__o2 { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: 700 14.5px var(--font-body); color: var(--ink); cursor: pointer; }
.h-nw__o2:last-of-type { border: 0; }
.h-nw__o2 small { display: block; font: 600 12px var(--font-body); color: var(--muted); }
.h-nw__d { width: 10px; height: 10px; border-radius: var(--r-pill); flex: none; background: var(--sec, var(--ink)); }
.h-nw__ck2 { margin-left: auto; color: var(--green); display: inline-flex; }
.h-nw__sr { display: grid; grid-template-columns: 1fr auto; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.h-nw__sr b { color: var(--ink); }
/* Aa is the global `.h-seg`; only the stacked "Aa / Small" inside each option is News's. */
.h-nw__aa button > span { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.h-nw__aax { font-family: var(--font-body); font-weight: 700; }
.h-nw__aa small { font: 700 11px var(--font-body); margin-top: 2px; }

/* --- tablet and laptop: the centred readable column ---------------------- */
@container h365nw (min-width: 640px) {
  .h-nw.h-nw .h-nw__col { max-width: 720px; padding-inline: var(--sp-6); }
  .h-nw.h-nw .h-nw__scores { width: 100%; margin: 0 0 var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); }
  .h-nw.h-nw .h-nw__leadph { height: 320px; margin: 14px 0 0; border-radius: var(--r-lg); }
  .h-nw.h-nw .h-nw__hero { height: 340px; margin: 0; border-radius: var(--r-lg); }
  .h-nw.h-nw .h-nw__full { height: 480px; margin: 0; border-radius: var(--r-lg); overflow: hidden; }
  .h-nw.h-nw .h-nw__gal { margin-inline: 0; }
  .h-nw.h-nw .h-nw__galcell { height: 360px; border-radius: var(--r-lg); }
  .h-nw.h-nw .h-nw__img .h-nw__ph, .h-nw__yt { height: 300px; }
  .h-nw.h-nw .h-nw__head--over { padding-inline: calc((100cqw - 720px) / 2 + var(--sp-4)); }
}

@media (prefers-reduced-motion: reduce) {
  .h-nw { transition: none; transform: none; }
  .h-nw__tg, .h-nw__tg::after { transition: none; }
}

/* NW-04 (Karl, 2026-10-05): The Morning Skate as a question. Icon + words on top, the answers under them, all one card. */
.h-nw__ask { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; align-items: start; margin: 14px 0; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--line2); background: var(--panel); }
.h-nw__ask > .h-nw__ic { margin-top: 2px; color: var(--green); }
.h-nw__ask b { display: block; font-size: 14.5px; color: var(--ink); }
.h-nw__ask small { display: block; margin-top: 2px; }
.h-nw__askb { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; }

/* NW-03 (Karl, 2026-10-05): reactions as real emoji, and the Change my vote link. */
.h-nw__emo { font-size: 16px; line-height: 1; }
.h-nw__linkb { padding: 0; border: 0; background: none; font: inherit; font-weight: 800; color: var(--green); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }