/* News views — the news page (home, board tabs), article; also landing, question, ask, me, search, whose classes
   other views still use (owned by the news front-end slice).
   docs/design/visual-language.md: hierarchy from type and surface brightness, not borders; one accent; blue = yes/up,
   orange = no/down, always with an arrow or a sign. Every class here is prefixed `n-`. */

/* ================================================================== shared */
.n-h2 { font-size: var(--fs-h2); font-weight: 650; letter-spacing: -0.022em; line-height: 1.2; }
.n-section { margin-top: 44px; min-width: 0; }
.n-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; min-width: 0; }
.n-section-head-col { flex-direction: column; align-items: flex-start; gap: 6px; }
.n-lede { color: var(--ink-2); max-width: 62ch; }
.n-sub { font-size: var(--fs-cap); font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:lang(zh) .n-sub, .n-sub:lang(zh) { text-transform: none; letter-spacing: 0.04em; }
.n-sub-n { font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.n-kicker { font-size: var(--fs-cap); font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; }
:lang(zh) .n-kicker, .n-kicker:lang(zh) { text-transform: none; letter-spacing: 0.04em; }
.n-sep { color: var(--ink-4); }
.n-back { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; color: var(--ink-3); font-size: var(--fs-small); font-weight: 550; margin: 4px 0 18px -4px; padding: 4px 8px 4px 4px; border-radius: 999px; }
.n-back:hover { color: var(--ink); background: var(--wash); }
.n-back svg { width: 16px; height: 16px; }
.n-main { gap: 0; }
.n-list-card { padding: 4px 22px; }
.n-list-card > * + * { box-shadow: inset 0 0.5px 0 var(--hair-2); }
.n-empty-big { padding: 56px 24px; }
.n-empty-big h2 { font-size: var(--fs-lead); color: var(--ink); margin-bottom: 6px; }
.n-empty-big svg { width: 28px; height: 28px; margin-bottom: 12px; }
.n-error p { margin: 0; }
.n-dot-crit { background: var(--crit); }
.n-ask-err:empty { display: none; }
.n-ask-err { color: var(--crit); font-size: var(--fs-small); margin: 0; }
.n-ext { display: inline-flex; margin-left: 5px; color: var(--ink-4); vertical-align: -1px; }
.n-ext svg { width: 12px; height: 12px; }
.n-chev { color: var(--ink-4); width: 16px; height: 16px; margin-top: 3px; }

/* ================================================================== the ask box */
.n-ask { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.n-ask-box {
  display: flex; align-items: flex-end; gap: 10px; background: var(--s1); border-radius: 24px; padding: 12px 12px 12px 22px;
  box-shadow: inset 0 0 0 0.5px var(--hair-2), 0 1px 2px rgba(0, 0, 0, 0.06), 0 12px 32px -18px rgba(0, 0, 0, 0.35);
  transition: box-shadow var(--t-1) var(--ease);
}
.n-ask-box:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-wash), 0 12px 32px -18px rgba(0, 0, 0, 0.35); }
.n-ask-input {
  flex: 1; min-width: 0; border: 0; background: transparent; resize: none; outline: none; padding: 8px 0; margin: 0;
  font-size: 18px; line-height: 1.45; min-height: 42px; max-height: 220px; color: var(--ink);
}
.n-ask-input:focus-visible { outline: none; }
.n-ask-input::placeholder { color: var(--ink-3); opacity: 0.85; }
.n-ask-send {
  width: 42px; height: 42px; flex: none; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; transition: background var(--t-1), transform var(--t-1) var(--ease), opacity var(--t-1);
}
.n-ask-send svg { width: 20px; height: 20px; stroke-width: 2.2; }
.n-ask-send:hover:not([disabled]) { filter: brightness(1.08); }
.n-ask-send:active:not([disabled]) { transform: scale(0.94); }
.n-ask-send[disabled] { background: var(--wash-2); color: var(--ink-4); cursor: default; }
.n-ask.is-busy .n-ask-send svg { animation: n-bob 0.9s var(--ease) infinite alternate; }
@keyframes n-bob { to { transform: translateY(-3px); } }
.n-ask-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px; font-size: var(--fs-cap); color: var(--ink-3); min-height: 18px; flex-wrap: wrap; }
.n-ask-lang { display: inline-flex; align-items: center; gap: 7px; }
.n-ask-lang-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); display: inline-block; flex: none; }
.n-ask-keys { color: var(--ink-3); }
@media (hover: none) { .n-ask-keys { display: none; } }
.n-ask-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.n-ask-chips:empty { display: none; }
.n-ask-chips-label { font-size: var(--fs-cap); color: var(--ink-3); font-weight: 600; margin-right: 2px; }
.n-ask-chip { max-width: 100%; }
.n-ask-chip span { overflow: hidden; text-overflow: ellipsis; }
.n-ask-chip svg { color: var(--accent-ink); }
.n-ask-compact .n-ask-box { border-radius: 18px; padding: 6px 6px 6px 16px; align-items: center; box-shadow: inset 0 0 0 0.5px var(--hair-2), 0 1px 2px rgba(0, 0, 0, 0.05); }
.card .n-ask-compact .n-ask-box { background: var(--s2); box-shadow: inset 0 0 0 0.5px var(--hair-2); }
.n-ask-compact .n-ask-box:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-wash); }
.n-ask-compact .n-ask-input { font-size: 15px; min-height: 36px; padding: 7px 0; }
.n-ask-compact .n-ask-send { width: 34px; height: 34px; }
.n-ask-compact .n-ask-send svg { width: 17px; height: 17px; }
.n-ask-compact .n-ask-meta { padding: 0 4px; }

@media (max-width: 900px) {

}
@media (max-width: 520px) {

}

/* ================================================================== the news page (home.js; topic.js is a tab of it) */
.n-news { padding-top: clamp(16px, 3.2vh, 36px); }
.n-mast { display: flex; align-items: flex-end; justify-content: space-between; gap: 4px 24px; flex-wrap: wrap; padding: 0 0 18px; min-width: 0; }
.n-mast-main { min-width: 0; }
.n-mast-date { font-size: var(--fs-small); font-weight: 600; color: var(--ink-3); }
.n-mast-title { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; letter-spacing: -0.032em; font-weight: 700; margin-top: 4px; }
:lang(zh) .n-mast-title { letter-spacing: 0.01em; font-weight: 650; }
.n-mast-upd { display: inline-flex; align-items: center; gap: 9px; min-height: 24px; padding-bottom: 6px; font-size: var(--fs-small); color: var(--ink-3); }
.n-mast-upd .dot { width: 6px; height: 6px; box-shadow: 0 0 0 3px var(--ok-wash); }

/* the tab row: All and the eight boards; scrolls sideways on narrow screens, fading at the gutters */
.n-tabs-wrap { position: relative; margin: 0 calc(-1 * var(--gutter)); }
.n-tabs-wrap::after { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0; height: 1px; background: var(--hair-2); transform: scaleY(0.5); transform-origin: bottom; }
.n-tabs {
  position: relative; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  padding: 4px var(--gutter) 14px; scroll-padding-inline: var(--gutter);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
}
.n-tabs::-webkit-scrollbar { display: none; }
.n-tab {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 600; white-space: nowrap;
  transition: background var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.n-tab:hover { background: var(--wash); color: var(--ink); }
.n-tab:active { background: var(--wash-2); }
.n-tab[aria-selected="true"] { background: var(--ink); color: var(--canvas); }
.n-tab:focus-visible { border-radius: 999px; }
/* the selected tab's pill (home.js tabPill): one shape under the row that stretches toward the new tab and settles to
   its width; the selected tab itself goes clear, and while it moves the labels change colour as it passes under them */
.n-tab-pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--ink); pointer-events: none; transform-origin: 50% 50%; transition: none; }
.n-tab-pill[hidden] { display: none; }
.n-tabs.has-pill .n-tab { position: relative; z-index: 1; }
.n-tabs.has-pill .n-tab[aria-selected="true"] { background: transparent; }
.n-tabs.is-moving .n-tab, .n-tabs.is-moving .n-tab-n {
  transition: background var(--t-1) var(--ease), color calc(var(--pill-ms) * 0.4) var(--ease) calc(var(--pill-ms) * 0.25);
}
.n-tab-n { font-size: 12.5px; font-weight: 550; color: var(--ink-3); }
.n-tab[aria-selected="true"] .n-tab-n { color: color-mix(in srgb, var(--canvas) 66%, var(--ink)); }

/* two columns that start level: each opens with a header row of the same fixed height */
.n-panel { outline: none; min-width: 0; }
.n-cols { margin-top: 28px; }
.n-col { min-width: 0; }
.n-colhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 30px; margin: 0 0 14px; min-width: 0; }
.n-colhead-t { font-size: 19px; font-weight: 650; letter-spacing: -0.018em; line-height: 1.2; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-colhead-aside { flex: none; font-size: var(--fs-small); color: var(--ink-3); white-space: nowrap; }

/* a board's tab: its name and blurb above both columns */
.n-board { display: flex; align-items: flex-start; gap: 16px; margin-top: 28px; min-width: 0; min-height: 52px; }
.n-board-icon { width: 52px; height: 52px; border-radius: 16px; background: var(--s1); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.n-board-icon svg { width: 24px; height: 24px; }
.n-board-text { flex: 1; min-width: 0; }
.n-board-name { font-size: 24px; font-weight: 650; letter-spacing: -0.024em; line-height: 1.2; }
:lang(zh) .n-board-name { letter-spacing: 0.01em; }
.n-board-blurb { color: var(--ink-2); font-size: 15px; line-height: 1.5; margin-top: 3px; max-width: 68ch; }
.n-board-count { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-size: var(--fs-small); color: var(--ink-3); }
.n-board-skel { flex: 1; max-width: 420px; padding-top: 4px; }
.n-more { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 0 0; }
.n-more-err { color: var(--crit); font-size: var(--fs-small); }

/* story cards */
.n-lead-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.n-story {
  --bg: var(--s1);
  display: flex; flex-direction: column; gap: 12px; min-width: 0; background: var(--bg); border-radius: var(--r-card);
  padding: 20px 22px 18px; transition: background var(--t-1) var(--ease);
}
.n-story:hover { --bg: var(--s2); }
.n-story:focus-visible, .n-tsec-head:focus-visible { border-radius: var(--r-card); }
.n-story-body { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
.n-story-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.n-story-title { font-size: 18px; line-height: 1.32; font-weight: 650; letter-spacing: -0.016em; text-wrap: pretty; overflow-wrap: anywhere; }
:lang(zh).n-story-title { letter-spacing: 0; font-weight: 600; line-height: 1.45; }
.n-story-lead { grid-column: 1 / -1; padding: 0; gap: 0; overflow: hidden; }
.n-story-lead:not(.has-pic) { background: radial-gradient(140% 120% at 100% 0%, var(--accent-wash) 0%, transparent 46%), var(--bg); }
.n-story-in { display: flex; flex-direction: column; gap: 14px; padding: 28px 32px 24px; min-width: 0; }
.n-story-lead.has-pic .n-story-in { padding-top: 20px; }
.n-story-lead .n-story-title { font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); line-height: 1.14; letter-spacing: -0.02em; font-weight: 600; max-width: 30ch; }
:lang(zh).n-story-lead .n-story-title { letter-spacing: 0; line-height: 1.32; }
.n-story-tr { color: var(--ink-2); font-size: 14.5px; line-height: 1.45; display: flex; gap: 8px; align-items: baseline; }
.n-tr-tag { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 650; color: var(--accent-ink); background: var(--accent-wash); border-radius: 6px; padding: 1px 6px; transform: translateY(-1px); }
.n-tr-tag svg { width: 11px; height: 11px; }
.n-story-snippet { color: var(--ink-2); font-size: 14.5px; line-height: 1.55; overflow-wrap: anywhere; }
.n-story-lead .n-story-snippet { font-size: 16.5px; max-width: 64ch; }
.n-skel-card { min-height: 170px; }
.n-skel-card.n-story-lead { min-height: 220px; }
.n-meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-cap); color: var(--ink-3); flex-wrap: wrap; line-height: 1.3; }
.n-pub { color: var(--ink-2); font-weight: 650; }
.n-tag { color: var(--ink-3); }
/* in cards and rows the meta stays on one line: the publisher, then the topic, give way first */
.n-story .n-meta, .n-row .n-meta { flex-wrap: nowrap; }
.n-story .n-meta .n-pub, .n-row .n-meta .n-pub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.n-story .n-meta time, .n-row .n-meta time, .n-meta .n-sep { flex: none; white-space: nowrap; }
.n-story .n-tagwrap, .n-row .n-tagwrap { min-width: 0; flex: 0 100 auto; overflow: hidden; }
.n-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-foot { margin-top: auto; padding-top: 2px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: var(--fs-cap); color: var(--ink-3); }
.n-foot-item { display: inline-flex; align-items: center; gap: 6px; }
.n-foot-item svg { width: 13px; height: 13px; }
.n-foot-pd { color: var(--accent-ink); }
.n-stack { display: inline-flex; padding-left: 4px; }
.n-stack i { width: 12px; height: 12px; border-radius: 999px; background: var(--ink-4); opacity: 0.85; margin-left: -4px; box-shadow: 0 0 0 2px var(--bg, var(--s1)); }
.n-stack i:nth-child(2) { background: var(--ink-3); }
.n-stack i:nth-child(3) { background: var(--ink-2); }
.n-stack i:nth-child(4) { background: var(--accent); opacity: 1; }
.n-lead-grid + .n-list-card { margin-top: 14px; }
.n-tagwrap { display: inline-flex; gap: 6px; white-space: nowrap; }

/* source marks: the publisher's icon on a light tile (icons are drawn for light backgrounds), else its initial */
.n-src {
  display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 5px; overflow: hidden;
  background: #fff; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.n-src img { width: 100%; height: 100%; object-fit: contain; display: block; }
.n-meta .n-src, .n-meta .host-badge { width: 20px; height: 20px; border-radius: 6px; font-size: 10.5px; }
.n-art-eyebrow .n-src, .n-art-eyebrow .host-badge { width: 24px; height: 24px; border-radius: 7px; font-size: 11px; }

/* feed pictures: the box keeps its shape while loading (no layout shift) and is removed when the picture fails */
.n-pic { position: relative; display: block; flex: none; overflow: hidden; background: var(--s3); }
.n-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity var(--t-2) var(--ease), transform 700ms var(--ease); }
.n-pic.is-in img { opacity: 1; }
.n-pic-lead { width: 100%; aspect-ratio: 16 / 9; max-height: min(58vh, 470px); }
.n-story-lead:hover .n-pic-lead img { transform: scale(1.012); }
.n-pic-card { width: 112px; aspect-ratio: 4 / 3; border-radius: 12px; margin-top: 3px; }
.n-lead-grid > .n-story:not(.n-story-lead) { container-type: inline-size; }
@container (max-width: 320px) { .n-pic-card { width: 80px; border-radius: 10px; } .n-story-body { gap: 12px; } }
.n-pic-row { width: 104px; aspect-ratio: 4 / 3; border-radius: 10px; margin-top: 3px; }
.n-tsec .n-pic-row { width: 68px; border-radius: 9px; }

/* compact rows (board lists, coverage, search) */
.n-row { display: flex; gap: 16px; align-items: flex-start; padding: 15px 0; min-width: 0; }
.n-row-main { flex: 1; min-width: 0; }
.n-row-title { font-size: 15.5px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; overflow-wrap: anywhere; transition: color var(--t-1); }
:lang(zh).n-row-title { letter-spacing: 0; line-height: 1.5; }
.n-row:hover .n-row-title { color: var(--accent-ink); }
.n-row:focus-visible { border-radius: 10px; }
.n-row-tr { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.n-row-snippet { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; overflow-wrap: anywhere; }
.n-row-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; min-width: 0; }
.n-row-n { font-size: var(--fs-cap); color: var(--ink-3); flex: none; }

/* board sections on All */
.n-tsecs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.n-tsec { background: var(--s1); border-radius: var(--r-card); padding: 16px 20px 6px; min-width: 0; }
.n-tsec-head { display: flex; align-items: center; gap: 11px; padding: 2px 0 8px; min-width: 0; }
.n-tsec-head h3 { font-size: 16px; font-weight: 650; letter-spacing: -0.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-tsec-n { font-size: var(--fs-cap); color: var(--ink-3); white-space: nowrap; }
.n-tsec-more { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-small); color: var(--ink-3); font-weight: 550; flex: none; }
.n-tsec-more svg { width: 14px; height: 14px; transition: transform var(--t-1) var(--ease); }
.n-tsec-head:hover .n-tsec-more { color: var(--accent-ink); }
.n-tsec-head:hover .n-tsec-more svg { transform: translateX(2px); }
.n-tsec-list > * + * { box-shadow: inset 0 0.5px 0 var(--hair-2); }
.n-tsec .n-row { padding: 13px 0; gap: 14px; }
.n-tsec .n-row-title { font-size: 15px; }
.n-ticon { width: 32px; height: 32px; border-radius: 10px; background: var(--s3); color: var(--ink-2); display: grid; place-items: center; flex: none; }
.n-ticon svg { width: 16px; height: 16px; }

/* the rail: published analyses */
.n-rail-sec { min-width: 0; }
.n-rail-card { padding-bottom: 8px; }
.n-rail-sec .n-rail-card { padding: 2px 18px; }
.n-rail-title { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.012em; margin-bottom: 6px; }
.n-rail-body { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.55; }
.n-rail-empty { color: var(--ink-3); font-size: var(--fs-small); padding: 6px 0 12px; }
.n-rail-none { padding: 16px 0 14px; }
.n-rail-none .n-rail-empty { padding: 0; color: var(--ink-2); font-weight: 550; }
.n-rail-hint { margin-top: 4px; font-size: var(--fs-cap); color: var(--ink-3); line-height: 1.5; }
.n-rail-sec [aria-busy="true"] { padding: 12px 0; }
.n-qlist > * + * { box-shadow: inset 0 0.5px 0 var(--hair-2); }
.n-qrow { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; min-width: 0; }
.n-qrow:focus-visible { border-radius: 10px; }
.n-qrow-main { flex: 1; min-width: 0; }
.n-qrow-text { font-weight: 600; font-size: 14.5px; line-height: 1.42; letter-spacing: -0.008em; overflow-wrap: anywhere; transition: color var(--t-1); }
.n-qrow:hover .n-qrow-text { color: var(--accent-ink); }
.n-qrow-verdict { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin-top: 4px; overflow-wrap: anywhere; }
.n-qrow-own { color: var(--ink-3); font-weight: 600; }
.n-qrow-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; font-size: var(--fs-cap); color: var(--ink-3); }
.n-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink-2); }
.n-ring { position: relative; display: inline-grid; place-items: center; flex: none; }
.n-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.n-ring-track { fill: none; stroke: var(--wash-2); stroke-width: 3; }
.n-ring-arc { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.n-ring b { position: relative; font-size: 13px; font-weight: 700; letter-spacing: -0.02em; }
.n-provider-card { overflow: hidden; background: radial-gradient(120% 100% at 100% 0%, var(--accent-wash) 0%, transparent 55%), var(--s1); }
.n-provider-art { margin: -4px 0 10px; }
.n-provider-art svg { width: 120px; height: 48px; }
.n-glyph-bar { stroke: var(--ink-4); stroke-width: 6; stroke-linecap: round; }
.n-glyph-bar:nth-child(4) { stroke: var(--accent); }
.n-glyph-dot { fill: var(--accent); }
.n-provider-btn { margin-top: 14px; }

/* ================================================================== article */
.n-article-page { overflow-anchor: none; } /* article.js keeps the reader's place itself while the note arrives */
.n-slot { display: flow-root; } /* a repainted part's own margins count in its height, so the page can follow it */
.n-art-top { display: flex; align-items: center; min-height: 32px; margin: 2px 0 14px; min-width: 0; }
.n-art-top .n-back { margin: 0 0 0 -4px; }
.n-back-skel { width: 96px; height: 28px; border-radius: 999px; background: var(--wash); }
.n-article { min-width: 0; max-width: 760px; }
.n-art-skel { padding-top: 8px; }
.n-art-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: var(--fs-small); color: var(--ink-3); }
.n-topic-pill { height: 24px; padding: 0 10px; }
.n-topic-pill:hover { background: var(--wash-2); color: var(--ink); }
.n-art-title { font-family: var(--serif); font-size: clamp(30px, 4.4vw, 46px); line-height: 1.1; letter-spacing: -0.022em; font-weight: 600; margin-top: 16px; text-wrap: balance; overflow-wrap: anywhere; }
:lang(zh).n-art-title { letter-spacing: 0; line-height: 1.28; }
.n-art-tr { margin-top: 14px; font-size: 19px; line-height: 1.45; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.n-art-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 26px 0 30px; }
.n-open { max-width: 100%; }
.n-open svg { width: 16px; height: 16px; }
.n-art-host { overflow-wrap: anywhere; }
.n-hero { margin: 0 0 30px; }
.n-pic-hero { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-card); }
.n-hero-cap { margin-top: 10px; font-size: var(--fs-cap); color: var(--ink-3); }

.n-note {
  position: relative; border-radius: var(--r-card); padding: 26px 28px 24px; min-width: 0;
  background: linear-gradient(180deg, var(--accent-wash) 0%, transparent 140px), var(--s1);
}
.n-note-quiet { background: var(--s1); }
.n-note-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.n-note-wait { display: flex; align-items: center; gap: 10px; color: var(--ink-2); margin-bottom: 4px; }
.n-note-retry { margin-top: 12px; }
.n-points { display: flex; flex-direction: column; gap: 12px; }
.n-points li { position: relative; padding-left: 24px; font-size: 17px; line-height: 1.55; letter-spacing: -0.006em; }
.n-points li::before { content: ""; position: absolute; left: 3px; top: 0.62em; width: 8px; height: 8px; border-radius: 3px; background: var(--accent); transform: rotate(45deg) scale(0.8); }
.n-why { margin-top: 20px; padding-top: 18px; box-shadow: inset 0 0.5px 0 var(--hair-2); }
.n-note-sub { font-size: var(--fs-cap); font-weight: 650; color: var(--accent-ink); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; }
:lang(zh) .n-note-sub { text-transform: none; letter-spacing: 0.04em; }
.n-why-text { font-size: 17px; line-height: 1.55; font-weight: 550; color: var(--ink); }
.n-note-basis { margin-top: 16px; display: flex; gap: 7px; align-items: flex-start; font-size: var(--fs-cap); color: var(--ink-3); }
.n-note-basis svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.n-note-research {
  display: inline-flex; align-items: center; gap: 6px; margin: 18px 0 0 -8px; padding: 6px 10px 6px 8px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--accent-ink); transition: background var(--t-1) var(--ease);
}
.n-note-research:hover { background: var(--accent-wash); }
.n-note-research svg { width: 15px; height: 15px; transition: transform var(--t-1) var(--ease); }
.n-note-research:hover svg { transform: translateX(2px); }
.n-note-research:focus-visible { border-radius: 999px; }

.n-body { margin-top: 34px; }
.n-body-text p { font-family: var(--serif); font-size: 18px; line-height: 1.72; margin: 0 0 1.05em; color: var(--ink); overflow-wrap: anywhere; }
.n-body-text:lang(zh) p { font-family: var(--font); line-height: 1.85; }
.n-excerpt { margin: 0; padding: 18px 22px; border-radius: 18px; background: var(--wash); font-family: var(--serif); font-size: 17.5px; line-height: 1.6; color: var(--ink-2); overflow-wrap: anywhere; }
.n-excerpt:lang(zh) { font-family: var(--font); }
.n-body-note { margin-top: 12px; display: flex; gap: 7px; align-items: flex-start; font-size: var(--fs-small); color: var(--ink-3); }
.n-body-note svg { width: 14px; height: 14px; flex: none; margin-top: 3px; }
.n-block { margin-top: 36px; min-width: 0; }

.n-impact { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; min-width: 0; }
.n-impact-main { flex: 1; min-width: 0; }
.n-impact-topic { display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 15px; flex-wrap: wrap; }
.n-impact-dir { font-size: var(--fs-cap); font-weight: 650; color: var(--ink-3); }
.n-impact-up { color: var(--yes-ink); }
.n-impact-down { color: var(--no-ink); }
.n-impact-why { color: var(--ink-2); font-size: 14.5px; margin-top: 3px; }
.n-impact:hover .n-impact-topic { color: var(--accent-ink); }
.n-dir { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.n-dir svg { width: 18px; height: 18px; stroke-width: 2; }
.n-dir-up { background: var(--yes-wash); color: var(--yes-ink); }
.n-dir-down { background: var(--no-wash); color: var(--no-ink); }
.n-dir-mixed, .n-dir-unclear { background: var(--wash-2); color: var(--ink-2); }

.n-mkt { display: flex; gap: 16px; align-items: center; padding: 16px 0; min-width: 0; }
.n-mkt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.n-venue { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--s3); color: var(--ink-2); font-size: 11px; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap; }
.n-mkt-title { font-size: 15px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.n-mkt:hover .n-mkt-title { color: var(--accent-ink); }
.n-mkt-p { flex: none; width: 92px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 6px; }
.n-mkt-num { font-size: 22px; font-weight: 650; letter-spacing: -0.03em; }
.n-mkt-yes { font-size: 11px; font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.n-pbar { grid-column: 1 / -1; display: block; height: 4px; border-radius: 999px; background: var(--wash-2); overflow: hidden; margin-top: 6px; }
.n-pbar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

/* ================================================================== question page */
.n-q { max-width: 860px; }
.n-q-skel { padding-top: 28px; }
/* on a phone the story the question came from takes its own line: the "·" never starts the next one */
@media (max-width: 720px) {
  .n-q-eyebrow .n-scope { flex: 1 1 100%; min-width: 0; }
  .n-q-eyebrow .n-q-sep { display: none; }
}
.n-q-head { padding-bottom: 26px; }
.n-q-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink-3); }
.n-scope { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-width: 0; font-weight: 600; color: var(--ink-2); }
a.n-scope:hover { color: var(--accent-ink); }
.n-scope svg { width: 15px; height: 15px; flex: none; }
.n-scope-icon { width: 22px; height: 22px; border-radius: 7px; background: var(--s3); display: grid; place-items: center; flex: none; }
.n-scope-icon svg { width: 12px; height: 12px; }
.n-scope-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.n-q-title { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -0.03em; font-weight: 700; margin-top: 14px; overflow-wrap: anywhere; }
:lang(zh).n-q-title { letter-spacing: 0; line-height: 1.3; font-weight: 650; }
.n-q-lang { margin-top: 10px; display: inline-flex; align-items: center; gap: 7px; }

.n-steps { background: var(--s1); border-radius: var(--r-card); padding: 24px 26px; }
.n-steps-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.n-steps-list { display: flex; flex-direction: column; }
.n-step { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 0; color: var(--ink-3); font-size: 15.5px; }
.n-step + .n-step::before { content: ""; position: absolute; left: 10px; top: -9px; height: 18px; width: 2px; border-radius: 2px; background: var(--wash-2); }
.n-step-done + .n-step::before { background: var(--accent); opacity: 0.6; }
.n-step-dot { width: 22px; height: 22px; flex: none; border-radius: 999px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.n-step-dot svg { width: 13px; height: 13px; stroke-width: 2.4; }
.n-step-done { color: var(--ink-2); }
.n-step-done .n-step-dot { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.n-step-running { color: var(--ink); font-weight: 600; }
.n-step-running .n-step-dot { box-shadow: inset 0 0 0 2px var(--accent); }
.n-step-running .n-step-dot::after { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); animation: pulse 1.2s var(--ease) infinite; }
.n-step-now { font-size: var(--fs-cap); color: var(--accent-ink); font-weight: 650; margin-left: auto; }
.n-steps-ghost { margin: 20px 0 14px; opacity: 0.7; }
.n-grading .n-note-wait { margin-bottom: 14px; }
.n-failed { padding: 16px 18px; align-items: center; flex-wrap: wrap; }
.n-failed p { margin-top: 2px; }

/* the report */
.n-report { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.n-report-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.n-model { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.n-verdict { font-size: clamp(22px, 2.6vw, 27px); line-height: 1.32; font-weight: 650; letter-spacing: -0.022em; text-wrap: pretty; overflow-wrap: anywhere; }
.n-verdict:lang(zh), :lang(zh) > .n-verdict { letter-spacing: 0; line-height: 1.5; font-weight: 600; }
.n-summary { font-size: 16.5px; line-height: 1.65; color: var(--ink-2); max-width: 70ch; overflow-wrap: anywhere; }
.n-call {
  background: var(--s1); border-radius: 26px; padding: 24px 26px 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.n-call-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.n-call-date { font-size: var(--fs-small); color: var(--ink-3); font-weight: 550; }
.n-call-statement { font-size: 17px; line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.n-call-figure { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-top: 2px; }
.n-bignum { font-size: clamp(56px, 8vw, 76px); line-height: 0.9; font-weight: 650; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.n-bignum small { font-size: 0.42em; font-weight: 600; color: var(--ink-3); letter-spacing: -0.01em; margin-left: 2px; }
.n-call-word { display: flex; flex-direction: column; gap: 2px; padding-bottom: 4px; }
.n-call-word strong { font-size: 20px; font-weight: 650; letter-spacing: -0.015em; }
.n-call-word span { font-size: var(--fs-small); color: var(--ink-3); }
/* where the number was never measured: an untested model, a subject the backtests left out */
.n-call-word .n-caution { display: inline-flex; align-items: flex-start; gap: 5px; margin-top: 3px; color: var(--warn-ink); font-weight: 550; line-height: 1.4; }
.n-call-word .n-caution span { color: inherit; }
.n-caution svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.n-meter { padding-top: 6px; }
.n-meter-track { position: relative; height: 8px; border-radius: 999px; background: var(--wash-2); }
.n-meter-mid { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--ink-4); opacity: 0.6; }
.n-meter-band { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: color-mix(in srgb, var(--accent) 38%, transparent); min-width: 4px; }
.n-meter-mark { position: absolute; top: 50%; width: 6px; height: 22px; border-radius: 3px; background: var(--ink); transform: translate(-50%, -50%); box-shadow: 0 0 0 3px var(--s1); }
.n-meter-mkt { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 999px; transform: translate(-50%, -50%); background: var(--s1); box-shadow: inset 0 0 0 2.5px var(--ink-3); }
.n-meter-scale { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.n-call-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; box-shadow: inset 0 0.5px 0 var(--hair-2); }
.n-anchor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--fs-small); min-width: 0; }
.n-anchor-label { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); font-weight: 550; }
.n-anchor-label svg { width: 14px; height: 14px; }
.n-anchor-mkt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 5px 10px 5px 5px; border-radius: 12px; background: var(--wash); }
.n-anchor-mkt:hover { background: var(--wash-2); }
.n-anchor-mkt svg { width: 12px; height: 12px; color: var(--ink-4); flex: none; }
.n-anchor-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-weight: 550; }
.n-anchor-p { font-weight: 700; }
.n-gap { color: var(--ink-2); font-weight: 600; }
.n-conf-row { display: flex; align-items: center; gap: 10px; }
.n-conf { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-small); font-weight: 600; }
.n-conf-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 13px; }
.n-conf-bars i { width: 4px; border-radius: 1.5px; background: var(--wash-2); }
.n-conf-bars i.on { background: var(--ink-2); }
.n-call-compact { padding: 18px 20px; gap: 10px; }
.n-call-compact .n-bignum { font-size: 48px; }
.n-call-compact .n-call-statement { font-size: 15.5px; }

.n-rblock { min-width: 0; }
.n-drivers { display: flex; flex-direction: column; background: var(--s1); border-radius: var(--r-card); padding: 4px 22px; }
.n-driver { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; min-width: 0; }
.n-driver + .n-driver { box-shadow: inset 0 0.5px 0 var(--hair-2); }
.n-driver-main { flex: 1; min-width: 0; }
.n-driver-main p { font-size: 15.5px; line-height: 1.5; overflow-wrap: anywhere; }
.n-sign { width: 26px; height: 26px; border-radius: 9px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 17px; line-height: 1; margin-top: -1px; font-variant-numeric: tabular-nums; }
.n-sign-yes { background: var(--yes-wash); color: var(--yes-ink); }
.n-sign-no { background: var(--no-wash); color: var(--no-ink); }
.n-wdots { display: inline-flex; gap: 3px; padding-top: 8px; flex: none; }
.n-wdots i { width: 6px; height: 6px; border-radius: 999px; background: var(--wash-2); }
.n-wdots i.on { background: var(--ink-2); }
.n-refs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.n-ref { border: 0; height: 22px; min-width: 30px; padding: 0 7px; border-radius: 7px; background: var(--wash-2); color: var(--ink-2); font: 600 11px var(--mono); display: inline-grid; place-items: center; transition: background var(--t-1), color var(--t-1); }
button.n-ref:hover { background: var(--accent-wash); color: var(--accent-ink); }
.n-ref-static { flex: none; margin-top: 1px; }
.n-evidence { display: flex; flex-direction: column; background: var(--s1); border-radius: var(--r-card); padding: 4px 22px; }
.n-ev { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-radius: 12px; transition: background var(--t-2) var(--ease); min-width: 0; }
.n-ev + .n-ev { box-shadow: inset 0 0.5px 0 var(--hair-2); }
.n-ev.is-flash { animation: n-flash 1.6s var(--ease); }
@keyframes n-flash { 0%, 30% { background: var(--accent-wash); } 100% { background: transparent; } }
.n-ev-main { flex: 1; min-width: 0; }
.n-ev-title { display: inline-flex; align-items: flex-start; gap: 7px; font-weight: 600; font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; }
.n-ev-title > svg { width: 14px; height: 14px; color: var(--ink-3); flex: none; margin-top: 3px; }
a.n-ev-title:hover { color: var(--accent-ink); }
.n-ev-title .n-ext-i { width: 11px; height: 11px; color: var(--ink-4); }
.n-ev-note { color: var(--ink-3); font-size: 13.5px; margin-top: 3px; }
.n-rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.n-rgrid .n-rblock { background: var(--s1); border-radius: var(--r-card); padding: 20px 22px; }
.n-bullets { display: flex; flex-direction: column; gap: 10px; }
.n-bullets li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.n-bullets svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; margin-top: 3px; }
.n-ungrounded { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-cap); color: var(--ink-3); line-height: 1.5; }
.n-ungrounded svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.n-report-compact { gap: 16px; }
.n-report-compact .n-verdict { font-size: 19px; }
.n-report-compact .n-summary { font-size: 15px; }

/* data gaps */
.n-needs { margin-top: 48px; }
.n-needs-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.n-need { background: var(--s1); border-radius: var(--r-card); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; container-type: inline-size; }
/* one header for every gap: category · place · price on one row (the place gives way with an ellipsis); a narrow card
   puts the place on its own row under them */
.n-need-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "cat region price"; align-items: center; column-gap: 12px; row-gap: 4px; font-size: var(--fs-small); color: var(--ink-3); }
.n-need-cat { grid-area: cat; display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--accent-ink); white-space: nowrap; }
.n-need-cat svg, .n-need-region svg { width: 15px; height: 15px; flex: none; }
.n-need-region { grid-area: region; display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.n-need-region > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.n-need-price { grid-area: price; justify-self: end; font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; white-space: nowrap; }
@container (max-width: 360px) {
  .n-need-top { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "cat price" "region region"; }
}
.n-need-title { font-size: 19px; font-weight: 650; line-height: 1.32; letter-spacing: -0.018em; overflow-wrap: anywhere; }
.n-need-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 14.5px; line-height: 1.5; }
.n-need-dl dt { color: var(--ink-3); font-size: var(--fs-small); font-weight: 600; padding-top: 1px; }
.n-need-dl dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.n-need-fields { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.n-need-fields-label { font-size: var(--fs-small); color: var(--ink-3); font-weight: 600; margin-right: 4px; }
.n-field-chip { display: inline-flex; align-items: flex-start; gap: 5px; min-height: 26px; padding: 4px 10px; border-radius: 13px; background: var(--wash); font-size: 12.5px; line-height: 1.4; color: var(--ink-2); max-width: 100%; overflow-wrap: anywhere; }
.n-field-chip svg { margin-top: 2px; }
.n-field-chip svg { width: 12px; height: 12px; color: var(--ink-3); }
.n-need-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-small); color: var(--ink-2); }
.n-need-facts span { display: inline-flex; align-items: center; gap: 6px; }
.n-need-facts svg { width: 14px; height: 14px; color: var(--ink-3); }
.n-need-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.n-need-blocked { background: var(--s1); }
.n-need-blocked .n-need-title, .n-need-blocked .n-need-dl { opacity: 0.75; }
.n-need-safety { align-items: flex-start; }
.n-flags { display: inline-flex; flex-wrap: wrap; gap: 5px; vertical-align: middle; }
.n-safety-note { margin-top: 6px; }
@media (min-width: 900px) { .n-needs-grid:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.n-jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.n-data { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; min-width: 0; }
.n-data-main { flex: 1; min-width: 0; }
.n-data-from { display: flex; min-width: 0; white-space: nowrap; }
.n-data-who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.n-data-when { flex: none; white-space: pre; }
.n-data-title { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.n-data-reason { font-size: 14px; color: var(--ink-2); margin-top: 6px; }
.n-grade { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.n-final-sub { margin-top: 32px; }
.n-final .n-report { margin-top: 0; }
.n-final-failed { align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.n-final-failed p + p { margin-top: 2px; }
.n-final .n-grading + .mk-compare { margin-top: 20px; }

/* posting */
.n-publish { padding: 20px 22px; }
.n-publish-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.n-publish-icon { width: 40px; height: 40px; border-radius: 13px; background: var(--accent-wash); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.n-publish-icon svg { width: 19px; height: 19px; }
.n-publish-title { font-weight: 650; font-size: 16px; }
.n-publish-lede { color: var(--ink-2); font-size: var(--fs-small); margin-top: 2px; }
.n-public-details { margin-top: 16px; }
.n-public-details summary { cursor: pointer; font-size: var(--fs-small); color: var(--ink-2); font-weight: 600; padding: 6px 0; border-radius: 8px; }
.n-public-details[open] summary { margin-bottom: 12px; }
.n-pub-sheet { display: flex; flex-direction: column; gap: 14px; }
.n-pub-sheet .n-sub { margin: 6px 0 -4px; }
.n-pub-preview { background: var(--s2); border-radius: 20px; padding: 18px 18px; }
.n-pub-preview .n-call { background: var(--s1); }
.n-pub-preview .n-drivers { background: var(--s1); }
.n-public-q { font-weight: 650; font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.n-public-preview { gap: 14px; }
.n-public-preview .n-verdict { font-size: 19px; }
.n-public-preview .n-summary { font-size: 14.5px; }
.n-public-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.n-public-ask { max-width: 640px; }
.n-targets { display: flex; flex-direction: column; gap: 8px; }
.n-target { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--s2); cursor: pointer; transition: background var(--t-1), box-shadow var(--t-1); min-width: 0; }
.n-target.is-on { box-shadow: inset 0 0 0 1.5px var(--accent); background: var(--accent-wash); }
.n-target input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 1px 0 0; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--ink-4); flex: none; display: grid; place-items: center; }
.n-target input:checked { box-shadow: inset 0 0 0 6px var(--accent); }
.n-target input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.n-target-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.n-target-text strong { font-weight: 600; font-size: 14.5px; }
.n-target-sub { font-size: var(--fs-small); color: var(--ink-2); overflow-wrap: anywhere; }
.n-pub-select { margin-top: 4px; max-width: 320px; }

/* ================================================================== me and search */
.n-me .page-head { align-items: flex-end; }
.n-seg-n { margin-left: 6px; color: var(--ink-3); font-weight: 600; }
.n-my-list .n-qrow { padding: 16px 0; }
.n-profile-row { display: flex; gap: 8px; margin-top: 4px; }
.n-profile-row .field { min-width: 0; }
.n-search { display: flex; align-items: center; gap: 10px; background: var(--s1); border-radius: 20px; padding: 8px 8px 8px 18px; box-shadow: inset 0 0 0 0.5px var(--hair-2); }
.n-search:focus-within { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-wash); }
.n-search-icon { width: 20px; height: 20px; color: var(--ink-3); }
.n-search-input::placeholder { color: var(--ink-3); opacity: 0.85; }
.n-search-input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 18px; padding: 8px 0; outline: none; }
.n-search-input:focus-visible { outline: none; }
.n-search-input::-webkit-search-cancel-button { filter: grayscale(1); }
.n-search-hint { color: var(--ink-3); margin-top: 18px; }
.n-search-results .n-section:first-child { margin-top: 32px; }
.n-search-results > .card, .n-search-results > .empty { margin-top: 24px; }

/* ================================================================== responsive */
@media (max-width: 1080px) {
  .n-article { max-width: none; }
}
@media (max-width: 760px) {
  .n-lead-grid, .n-tsecs { grid-template-columns: minmax(0, 1fr); }
  .n-lead-grid { gap: 12px; }
  .n-story { padding: 18px 18px 16px; }
  .n-story-lead { padding: 0; }
  .n-story-in { padding: 20px 20px 18px; }
  .n-story-lead.has-pic .n-story-in { padding-top: 16px; }
  .n-story-title { font-size: 17px; }
  .n-pic-card { width: 88px; border-radius: 10px; }
  .n-pic-row { width: 84px; border-radius: 9px; }
  .n-row { gap: 14px; }
  .n-tsec { padding: 16px 18px 4px; }
  .n-list-card { padding: 2px 18px; }
  .n-mast { padding-bottom: 14px; }
  .n-mast-upd { padding-bottom: 4px; }
  .n-cols, .n-board { margin-top: 22px; }
  .n-board { gap: 14px; }
  .n-board-icon { width: 44px; height: 44px; border-radius: 14px; }
  .n-board-icon svg { width: 21px; height: 21px; }
  .n-board-name { font-size: 21px; }
  .n-board-blurb { font-size: 14.5px; }
  .n-hero { margin-bottom: 26px; }
  .n-pic-hero { border-radius: 18px; }
  .n-ask-box { padding: 8px 8px 8px 18px; border-radius: 22px; }
  .n-ask-input { font-size: 16px; }
  .n-note { padding: 22px 20px 20px; }
  .n-points li { font-size: 16px; }
  .n-why-text { font-size: 16px; }
  .n-art-tr { font-size: 17px; }
  .n-open { width: 100%; height: auto; min-height: 46px; padding: 10px 18px; white-space: normal; text-align: center; }
  .n-call { padding: 20px 18px 18px; border-radius: 22px; }
  .n-drivers, .n-evidence { padding: 2px 16px; }
  .n-need { padding: 18px 18px; }
  .n-need-dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .n-need-dl dd { margin-bottom: 8px; }
  .n-need-actions .btn { flex: 1; }
  .n-steps { padding: 20px 18px; }
  .n-mkt-p { width: 76px; }
  .n-mkt-num { font-size: 19px; }
  .n-publish-row .btn { width: 100%; }
  .n-search-input { font-size: 16px; }
  .n-me .page-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 420px) {
  .n-story .n-tagwrap, .n-row .n-tagwrap { display: none; }
  .n-pic-card { width: 76px; }
  .n-pic-row { width: 72px; }
  .n-tab { padding: 0 13px; }
}
@media (prefers-reduced-motion: reduce) {

  .n-story-lead:hover .n-pic-lead img, .n-note-research:hover svg, .n-tsec-head:hover .n-tsec-more svg { transform: none; }
  .n-ev.is-flash { animation: none; background: var(--accent-wash); }
}