/**
 * Bond Priori — Newspaper Edition · Component stylesheet
 * Companion to newspaper-tokens.css. Replaces glassmorphism.css, sidebar.css, header.css,
 * and the card styles in components.css / dashboard.css once a page is migrated.
 *
 * Naming: short utility-ish classes (.lbl, .hl, .board …) exactly as used in design/newspaper/reference/*.html.
 * Everything is square (radius 0) except flags, buttons, avatars and the "now" tag (pill).
 * No shadows, no gradients, no blur: rules do the separating.
 */

/* ===== 0. Page root ===== */
/* Paint the document itself — pages shorter than the viewport must never show
   the browser's default white below the .bp wrapper, in either edition. */
html, body { background: var(--bp-paper); }
/* Edge-to-edge (viewport-fit=cover): paper extends behind the Android nav bar / iOS home
 * indicator; this keeps content clear of the gesture area while the bar shows paper. */
body { padding-bottom: env(safe-area-inset-bottom, 0px); }
.bp { background: var(--bp-paper); color: var(--bp-ink); font-family: var(--bp-font-text); min-height: 100vh; }
.bp [hidden] { display: none !important; }
.bp *, .bp *::before, .bp *::after { box-sizing: border-box; }
.bp a { color: var(--bp-copper-ink); text-decoration: none; }
.bp a:hover { color: var(--bp-ink); text-decoration: underline; }
.bp a:focus-visible, .bp button:focus-visible, .bp input:focus-visible, .bp textarea:focus-visible,
.bp [tabindex]:focus-visible { outline: 2px solid var(--bp-copper-ink); outline-offset: 2px; }

/* ===== 1. Type ===== */
.lbl    { font-family: var(--bp-font-label); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-ink-muted); }
.kicker { font-family: var(--bp-font-label); font-size: 12px; line-height: 16px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--bp-copper-ink); }
.sec    { font-family: var(--bp-font-label); font-size: 15px; line-height: 20px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-ink); margin: 0; }
.byline { font-family: var(--bp-font-label); font-size: 13px; line-height: 18px; font-weight: 700; color: var(--bp-ink); }
.cap    { font-family: var(--bp-font-label); font-size: 13px; line-height: 18px; color: var(--bp-ink-muted); }
.data   { font-family: var(--bp-font-label); font-size: 15px; line-height: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--bp-ink); }
.hl     { font-family: var(--bp-font-display); font-weight: var(--bp-headline-weight); letter-spacing: -.02em; color: var(--bp-ink); margin: 0; text-wrap: balance; }
.deck   { font-family: var(--bp-font-text); font-size: 20px; line-height: 27px; color: var(--bp-ink); margin: 0; }
.body   { font-family: var(--bp-font-text); font-size: 17px; line-height: 26px; color: var(--bp-ink); margin: 0; }
.body p { margin: 0; text-indent: 1.4em; }
.body p:first-child { text-indent: 0; }
.body-sm { font-family: var(--bp-font-text); font-size: 15px; line-height: 22px; color: var(--bp-ink); margin: 0; }
.fig    { font-family: var(--bp-font-display); font-size: 44px; line-height: 44px; font-weight: var(--bp-headline-weight); letter-spacing: -.03em; color: var(--bp-ink); }
.bp-np  { font-family: var(--bp-font-nameplate) !important; font-weight: var(--bp-nameplate-weight) !important; letter-spacing: var(--bp-nameplate-tracking) !important; }

/* ===== 2. Page frame ===== */
.bp-page    { max-width: var(--bp-page-max); margin: 0 auto; padding: 0 var(--bp-gutter) 48px;
              /* Safe areas: notch / Dynamic Island in landscape, Android 15 edge-to-edge. iOS status bar is `default` (opaque), so inset-top is 0 there. */
              padding-top: env(safe-area-inset-top, 0px);
              padding-left: max(var(--bp-gutter), env(safe-area-inset-left, 0px));
              padding-right: max(var(--bp-gutter), env(safe-area-inset-right, 0px)); }
.bp-shell   { display: flex; flex-wrap: wrap; align-items: stretch; }      /* sidebar + content row */
.bp-content { flex: 999 1 560px; min-width: 0; padding-left: var(--bp-column-gap); }
.bp-grid    { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--bp-column-gap); row-gap: 32px; margin-top: 32px; }
.bp-main    { grid-column: span 8; display: flex; flex-direction: column; gap: 36px; }
.bp-aside   { grid-column: span 4; display: flex; flex-direction: column; gap: 32px; }
.bp-ruled   { border-right: var(--bp-stroke-hair) solid var(--bp-rule); padding-right: var(--bp-column-gap); }
.bp-cols    { column-count: 2; column-gap: 24px; column-rule: 1px solid var(--bp-rule); }
.bp-split   { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.bp-figs    { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.show-sm    { display: none !important; }

/* Folio (issue line + utilities) · Masthead · Running head */
.bp-folio    { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px 0; border-bottom: 1px solid var(--bp-rule); flex-wrap: wrap; }
.bp-masthead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 32px; padding: 28px 0 18px; border-bottom: 4px solid var(--bp-rule-strong); }
.bp-nameplate{ font-size: 84px; line-height: 84px; display: flex; align-items: center; gap: 14px; }
.bp-head     { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 14px 0 12px; border-bottom: 4px solid var(--bp-rule-strong); }

/* Section head: 2px rule on top, title + optional meta */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; border-top: 2px solid var(--bp-rule-strong); padding-top: 8px; margin-bottom: 8px; }

/* ===== 3. Controls ===== */
.btn { font-family: var(--bp-font-label); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: .01em; border-radius: var(--bp-radius-pill); padding: 10px 18px; border: 2px solid var(--bp-ink); background: transparent; color: var(--bp-ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-decoration: none; }
.btn.primary { background: var(--bp-copper); border-color: var(--bp-copper); color: var(--bp-on-copper); }
.btn.primary:hover { background: #E8706E; border-color: #E8706E; text-decoration: none; color: var(--bp-on-copper); }
.btn.quiet:hover { background: var(--bp-paper-tint); text-decoration: none; color: var(--bp-ink); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Day / Night segmented toggle */
.seg { display: inline-flex; border: 1.5px solid var(--bp-ink); border-radius: var(--bp-radius-pill); overflow: hidden; }
.seg button { font-family: var(--bp-font-label); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 0 12px; min-height: 32px; background: transparent; border: 0; color: var(--bp-ink); cursor: pointer; }
.seg button.on, .seg button[aria-pressed="true"] { background: var(--bp-ink); color: var(--bp-paper); }

/* Tabs (feed filters, 7/30/90 days, composer types) */
.tabs { display: flex; gap: 18px; overflow-x: auto; }
.tabs a, .tabs button { font-family: var(--bp-font-label); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bp-ink-muted); background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 12px 0; cursor: pointer; white-space: nowrap; text-decoration: none; }
.tabs .on, .tabs [aria-selected="true"] { color: var(--bp-ink); border-bottom-color: var(--bp-ink); }

/* Post actions (like, comment, favorite) */
.act { font-family: var(--bp-font-label); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; color: var(--bp-ink-muted); background: transparent; border: 0; padding: 8px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.act:hover, .act.on { color: var(--bp-copper-ink); }

/* Status flags: a word + a mark + a colour, never colour alone */
.flag { font-family: var(--bp-font-label); font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--bp-radius-pill); padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.flag.go    { border: 1.5px solid var(--bp-go); color: var(--bp-ink); }
.flag.go::before    { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bp-go); }
.flag.hold  { background: var(--bp-highlight); color: var(--bp-ink); }
.flag.hold::before  { content: ""; width: 3px; height: 9px; border-left: 2px solid var(--bp-ink); border-right: 2px solid var(--bp-ink); }
.flag.alert { background: var(--bp-alert); color: var(--bp-on-alert); }
.flag.alert::before { content: ""; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--bp-on-alert); }

/* Live dot */
.live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--bp-copper); animation: bp-pulse var(--bp-pulse) ease-in-out infinite; }
@keyframes bp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Inputs: ruled, not boxed */
input.field, .field input, textarea.field, .field textarea { font-family: var(--bp-font-text); font-size: 17px; line-height: 24px; color: var(--bp-ink); background: transparent; border: 0; border-bottom: 1px solid var(--bp-ink); border-radius: 0; padding: 8px 0; outline: none; min-height: 44px; width: 100%; }
input.field::placeholder, .field input::placeholder, textarea.field::placeholder, .field textarea::placeholder { color: var(--bp-ink-muted); }
textarea.field, .field textarea { resize: vertical; min-height: 88px; line-height: 26px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.invalid input { border-bottom-color: var(--bp-alert); }
.field input:focus-visible { outline-offset: 4px; }

/* Error notice (forms) */
.err { display: flex; gap: 10px; align-items: flex-start; border: 2px solid var(--bp-alert); padding: 10px 14px; font-family: var(--bp-font-text); font-size: 15px; line-height: 22px; color: var(--bp-ink); }
.err::before { content: ""; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid var(--bp-alert); margin-top: 5px; flex: 0 0 auto; }

/* ===== 4. Editorial blocks ===== */
/* Board = any table */
.board { width: 100%; border-collapse: collapse; }
.board th { text-align: left; padding: 8px 10px 8px 0; border-bottom: 2px solid var(--bp-rule-strong); }
.board td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--bp-rule); vertical-align: top; }
.board tr.now td { background: var(--bp-highlight); }

/* Ticker */
.ticker { display: flex; align-items: stretch; margin-top: 16px; background: var(--bp-ticker); overflow: hidden; }
.ticker-label { background: var(--bp-ticker-label); color: var(--bp-ticker-label-ink); font-family: var(--bp-font-label); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 10px 14px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ticker-viewport { overflow: hidden; display: flex; align-items: center; padding: 0 16px; flex: 1; }
.ticker-track { display: flex; gap: 48px; white-space: nowrap; font-family: var(--bp-font-label); font-size: 13px; font-weight: 500; color: var(--bp-ink); animation: bp-tick var(--bp-ticker-loop) linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes bp-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Shaded box (Today's moods, Correspondent, Right now) */
.box-tint { background: var(--bp-paper-tint); border-top: 4px solid var(--bp-rule-strong); padding: 16px; display: flex; flex-direction: column; gap: 14px; }
/* Boxed notice (Question of the day, Partnership, Pinned, File a story) */
.box-rule { border: 2px solid var(--bp-rule-strong); padding: 20px; display: flex; flex-direction: column; gap: 12px; }

/* Progress rule (badges) */
.meter { height: 6px; background: var(--bp-paper-tint); }
.meter > span { display: block; height: 6px; background: var(--bp-copper); }

/* Chat transcript */
.daterule { display: flex; align-items: center; gap: 12px; }
.daterule::before, .daterule::after { content: ""; flex: 1; height: 1px; background: var(--bp-rule); }
.msg { display: flex; flex-direction: column; gap: 4px; max-width: 72%; }
.msg.me { align-self: flex-end; text-align: right; align-items: flex-end; }
.msg .who { font-family: var(--bp-font-label); font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-copper-ink); }
.msg.me .who { color: var(--bp-ink-muted); }
.msg p { margin: 0; font-family: var(--bp-font-text); font-size: 17px; line-height: 26px; color: var(--bp-ink); }
.msg.me p { font-weight: 500; }

/* Mood tiles */
.bp-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--bp-rule); border-left: 1px solid var(--bp-rule); }
.tile { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; min-height: 96px; background: transparent; cursor: pointer; text-align: left; font-family: var(--bp-font-display); font-size: 19px; line-height: 23px; font-weight: 700; color: var(--bp-ink); border: 0; border-right: 1px solid var(--bp-rule); border-bottom: 1px solid var(--bp-rule); }
.tile:hover { background: var(--bp-paper-tint); }
.tile[aria-pressed="true"], .tile.on { background: var(--bp-highlight); box-shadow: inset 0 0 0 2px var(--bp-ink); }
.tile .dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--bp-ink); }

/* Pull quote */
.quote { margin: 0; font-family: var(--bp-font-text); font-style: italic; font-size: 27px; line-height: 33px; font-weight: 500; color: var(--bp-ink); }
.quote .mark { color: var(--bp-copper); font-family: var(--bp-font-display); font-size: 44px; line-height: 0; vertical-align: -14px; margin-right: 4px; }

/* Avatar */
.avatar { border-radius: 50%; border: 2px solid var(--bp-ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--bp-font-label); font-weight: 800; }

/* ===== 5. Sidebar (collapsible section index) ===== */
.sb { flex: 0 0 var(--bp-sidebar-w); width: var(--bp-sidebar-w); border-right: 1px solid var(--bp-rule); padding: 20px 20px 32px 0; display: flex; flex-direction: column; gap: 20px; font-family: var(--bp-font-label); color: var(--bp-ink); transition: width var(--bp-sidebar-ease), flex-basis var(--bp-sidebar-ease), padding var(--bp-sidebar-ease); }
.sb.is-collapsed { flex-basis: var(--bp-sidebar-w-collapsed); width: var(--bp-sidebar-w-collapsed); padding-right: 12px; }
.sb-title, .sb-grp-title { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bp-ink-muted); }
.sb-grp { display: flex; flex-direction: column; }
.sb-grp-title { padding: 14px 0 4px; }
.sb a { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--bp-ink); padding: 9px 0 9px 14px; border-bottom: 1px solid var(--bp-rule); display: flex; align-items: center; gap: 10px; position: relative; min-height: 40px; text-decoration: none; }
.sb a:hover { background: var(--bp-paper-tint); text-decoration: none; color: var(--bp-ink); }
.sb a svg { width: 18px; height: 18px; flex: 0 0 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sb a .sb-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb a .sb-n { font-variant-numeric: tabular-nums; color: var(--bp-ink-muted); font-weight: 500; font-size: 12px; }
.sb a.on { font-weight: 800; color: var(--bp-copper-ink); }
.sb a.on::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; background: var(--bp-copper); }
.sb.is-collapsed .sb-title, .sb.is-collapsed .sb-grp-title, .sb.is-collapsed .sb-label, .sb.is-collapsed .sb-user-text, .sb.is-collapsed .sb-settings-label { display: none; }
.sb.is-collapsed a { justify-content: center; padding: 11px 0 11px 8px; gap: 0; }
.sb.is-collapsed a .sb-n { position: absolute; top: 4px; right: 2px; font-size: 10px; line-height: 12px; font-weight: 700; color: var(--bp-copper-ink); }
.sb.is-collapsed .sb-grp + .sb-grp { margin-top: 10px; padding-top: 6px; border-top: 2px solid var(--bp-rule-strong); }
.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; border-top: 2px solid var(--bp-rule-strong); padding-top: 14px; }
.sb-user { display: flex; align-items: center; gap: 10px; color: var(--bp-ink); text-decoration: none; min-height: 44px; }
.sb-avatar { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--bp-ink); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: 0 0 36px; }
.sb-user-text { display: flex; flex-direction: column; }
.sb-user-name { font-size: 13px; line-height: 18px; font-weight: 700; }
.sb-user-status { font-size: 12px; line-height: 16px; color: var(--bp-ink-muted); }
.sb-settings { display: flex; align-items: center; gap: 10px; color: var(--bp-ink); text-decoration: none; min-height: 40px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sb-settings svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.sb.is-collapsed .sb-user, .sb.is-collapsed .sb-settings { justify-content: center; padding-left: 8px; }
.sb-toggle { width: 36px; height: 36px; border-radius: var(--bp-radius-pill); border: 1.5px solid var(--bp-ink); background: transparent; color: var(--bp-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; align-self: flex-end; padding: 0; }
.sb-toggle:hover { background: var(--bp-paper-tint); }
.sb-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sb.is-collapsed .sb-toggle { align-self: center; margin-left: 8px; }

/* ===== 6. Motion preferences ===== */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; white-space: normal; flex-wrap: wrap; gap: 16px; }
  .live { animation: none; }
  .sb { transition: none; }
}

/* ===== 7. Phone (≤720px): one column, sidebar becomes a horizontal strip ===== */
@media (max-width: 720px) {
  /* !important because the reference pages (and the prototype) carry layout inline; drop it once layout lives in classes */
  .bp-page { padding-left: max(16px, env(safe-area-inset-left, 0px)) !important; padding-right: max(16px, env(safe-area-inset-right, 0px)) !important; padding-top: 0 !important; }   /* top inset moves onto the pinned .sb strip below */
  .bp-grid { grid-template-columns: minmax(0, 1fr) !important; }   /* minmax(0,…) so wide tables scroll inside instead of widening the page */
  .bp-main, .bp-aside { grid-column: 1 / -1 !important; min-width: 0; }
  .bp-ruled { border-right: 0 !important; padding-right: 0 !important; }
  .bp-cols { column-count: 1 !important; }
  .bp-figs { grid-template-columns: 1fr 1fr !important; }
  .bp-split { grid-template-columns: 1fr !important; }
  .bp-nameplate { font-size: 44px !important; line-height: 44px !important; }
  .bp-head { grid-template-columns: 1fr !important; text-align: center; }
  /* Masthead: nameplate spans the top row; the mood ears print as a two-up row beneath (V63 — they used to be hidden) */
  .bp-masthead { grid-template-columns: 1fr 1fr !important; text-align: center; }
  .bp-masthead-center { grid-column: 1 / -1; grid-row: 1; }
  .bp-ears { grid-row: 2; align-items: center !important; text-align: center; border-top: 1px solid var(--bp-rule); padding-top: 10px; margin-top: 6px; }
  .bp-ears .hl-md { font-size: 20px !important; line-height: 24px !important; }
  .bp-ears-right { border-left: 1px solid var(--bp-rule); }
  .bp-folio .hide-sm, .bp-head .hide-sm, .lg-folio .hide-sm { display: none !important; }
  .lg-page { padding-left: max(16px, env(safe-area-inset-left, 0px)) !important; padding-right: max(16px, env(safe-area-inset-right, 0px)) !important; }   /* login page bands */
  .bp-folio .show-sm { display: inline-flex !important; }
  .bp-content { padding-left: 0 !important; }
  .bp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .msg { max-width: 88%; }

  .sb, .sb.is-collapsed { flex: 0 0 calc(100% + max(16px, env(safe-area-inset-left, 0px)) + max(16px, env(safe-area-inset-right, 0px))); width: auto; min-width: 0; max-width: none; border-right: 0; padding: 0; border-bottom: 1px solid var(--bp-rule); gap: 0;
    /* Pinned section strip: sticks under the status bar; full-bleed (cancels the page gutter); carries the top safe-area inset so paper, not content, sits behind a notch/status bar when the OS draws edge-to-edge. */
    position: sticky; top: 0; z-index: 30; background: var(--bp-paper);
    margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px)));
    padding-top: env(safe-area-inset-top, 0px); }
  .sb nav { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .sb nav { display: flex; overflow-x: auto; min-width: 0; gap: 20px; padding: 0 16px; -webkit-overflow-scrolling: touch; }
  .sb-grp { flex-direction: row; gap: 20px; }
  .sb .sb-title, .sb .sb-grp-title, .sb .sb-foot { display: none; }
  .sb a, .sb.is-collapsed a { border-bottom: 3px solid transparent; padding: 12px 0; white-space: nowrap; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; min-height: 44px; justify-content: flex-start; gap: 6px; }
  .sb a:hover { background: transparent; }
  .sb a svg { display: none; }
  .sb a.on { border-bottom-color: var(--bp-copper); }
  .sb a.on::before { display: none; }
  .sb.is-collapsed .sb-label { display: inline; }
  .sb.is-collapsed a .sb-n { position: static; font-size: 12px; font-weight: 500; color: var(--bp-ink-muted); }
  .sb.is-collapsed .sb-grp + .sb-grp { margin: 0; padding: 0; border-top: 0; }
}

/* ===== 8. App additions (not in the design kit) ===== */

/* Headline sizes (HANDOFF §2 type scale) — pages add these instead of inline font-size */
.hl-xl { font-size: 52px; line-height: 54px; letter-spacing: -.035em; }
.hl-lg { font-size: 36px; line-height: 39px; letter-spacing: -.03em; }
.hl-md { font-size: 25px; line-height: 28px; }
.hl-sm { font-size: 19px; line-height: 23px; }

/* Heart mark (nameplate, favicon colour) — tokenised, never hard-code the hex */
.heart { fill: var(--bp-copper); }

/* Label row with a trailing link (e.g. Password · Forgot?) */
.field-row { display: flex; justify-content: space-between; align-items: baseline; }

/* Login band (login.html / register.html) — base rules for the .lg-* classes
   the 720px media block above already handles; desktop values from reference/login.html */
.lg-wrap  { min-height: 100vh; display: flex; flex-direction: column; }
.lg-page  { padding-left: max(var(--bp-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--bp-gutter), env(safe-area-inset-right, 0px)); }
.lg-folio { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); padding-bottom: 10px; border-bottom: 1px solid var(--bp-rule); flex-wrap: wrap; }
.lg-main  { flex: 1; display: flex; flex-direction: column; align-items: center; padding-top: 56px; padding-bottom: 48px; }
.lg-col   { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 20px; }
.lg-masthead { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.lg-np    { font-size: 64px; line-height: 66px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.lg-tagline { letter-spacing: .2em; }
.lg-dateline { width: 100%; border-top: 4px solid var(--bp-rule-strong); border-bottom: 1px solid var(--bp-rule); padding: 8px 0; display: flex; justify-content: space-between; gap: 12px; }
.lg-box   { border: 2px solid var(--bp-rule-strong); padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.lg-box-head { display: flex; flex-direction: column; gap: 6px; }
.lg-center { text-align: center; }
.lg-foot  { border-top: 4px solid var(--bp-rule-strong); padding-top: 14px; padding-bottom: 20px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lg-links { display: flex; flex-wrap: wrap; gap: 18px; }   /* wraps on phones; unwrapped it widened the page by 36px */
.lg-links a { color: var(--bp-ink); }
.btn.wide { width: 100%; justify-content: center; }

/* ===== 9. Front page (index.html) ===== */
.link-copper { color: var(--bp-copper-ink); }
.kicker-ink { color: var(--bp-ink); }
.bp-row-between { display: flex; justify-content: space-between; align-items: baseline; }
.bp-folio-issue { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bp-folio-utils { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.bp-notices { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--bp-copper-ink); }
.bp-folio-user { display: inline-flex; align-items: center; gap: 10px; color: var(--bp-ink); min-height: 44px; }
.bp-folio-avatar { width: 32px; height: 32px; font-size: 12px; }
.bp-masthead-center { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bp-ears { display: flex; flex-direction: column; gap: 4px; }
.bp-ears-right { text-align: right; align-items: flex-end; }
.ticker-live { background: var(--bp-ticker-label-ink); }
.bp-lead { display: flex; flex-direction: column; gap: 14px; }
.bp-lead-meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bp-lead-meta .link-copper { margin-left: auto; }
.bp-lead figure { margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; }
.bp-lead-photo { width: 100%; max-height: 420px; object-fit: cover; display: block; }
/* Lead + counterpart: one post from each partner, newest first, hairline between */
.bp-leadpair { display: flex; flex-direction: column; gap: 22px; }
.bp-lead-2 { border-top: var(--bp-stroke-hair) solid var(--bp-rule); padding-top: 22px; gap: 12px; }
.bp-lead-2 figure { max-width: 420px; }          /* secondary cut, not a second lead photo */
.bp-lead-2 .bp-lead-photo { max-height: 260px; }
.bp-wire { display: grid; grid-template-columns: 96px 1fr; }
.bp-wire .data, .bp-wire .body-sm { padding: 10px 0; border-bottom: 1px solid var(--bp-rule); }
.bp-wire .data { color: var(--bp-ink-muted); }
/* Wire rows link to the item itself (V73) — ink until hovered, then copper */
.bp-wire-link { color: inherit; text-decoration: none; display: block; }
.bp-wire-link:hover, .bp-wire-link:focus-visible { color: var(--bp-copper-ink); text-decoration: underline; }

/* Deep-link arrival mark + the "finding it" strip (V73) */
.bp-linked { border-left: var(--bp-stroke-mid) solid var(--bp-copper); background: var(--bp-paper-tint); padding-left: 12px; }
tr.bp-linked { border-left: 0; }
tr.bp-linked td { background: var(--bp-paper-tint); }
tr.bp-linked td:first-child { border-left: var(--bp-stroke-mid) solid var(--bp-copper); }
.np-finding { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
              background: var(--bp-paper); color: var(--bp-ink); border: 2px solid var(--bp-ink); padding: 10px 14px; max-width: calc(100vw - 32px); }
.bp-scroll-x { overflow-x: auto; }
.bp-board-min { min-width: 520px; }
.bp-src { margin: 8px 0 0; }
.bp-badges { display: flex; flex-direction: column; gap: 12px; }
.bp-badges-body { display: flex; flex-direction: column; gap: 12px; }
.bp-meter-row { display: flex; flex-direction: column; gap: 6px; }
.bp-meter-head { display: flex; justify-content: space-between; }
.bp-desk { display: flex; flex-wrap: wrap; gap: 10px; }
.bp-count-pill { background: var(--bp-copper); color: var(--bp-on-copper); border-radius: var(--bp-radius-pill); padding: 3px 8px; margin-left: 2px; }
.bp-brief { display: flex; flex-direction: column; }
.bp-brief p { padding: 10px 0; border-bottom: 1px solid var(--bp-rule); margin: 0; }
.bp-letters { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; border-top: 2px solid var(--bp-rule-strong); }
.bp-notice { padding: 14px 16px; gap: 6px; }
.bp-colophon { margin-top: 64px; border-top: 4px solid var(--bp-rule-strong); padding-top: 16px; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bp-colophon-left { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.bp-question { font-size: 25px; line-height: 30px; font-weight: 600; font-style: italic; }

/* Today's moods box internals */
.bp-moods-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bp-moods-col { display: flex; flex-direction: column; gap: 4px; }
.bp-moods-col + .bp-moods-col { border-left: 1px solid var(--bp-rule); padding-left: 16px; }
.bp-mood-fig { font-size: 36px; line-height: 38px; }
.bp-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; border-top: 1px solid var(--bp-rule); padding-top: 12px; margin-top: 14px; }
.bp-strip-day { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.bp-strip-dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--bp-ink); }
/* Mood weather glyphs (np-glyphs.js) — stroked in currentColor so they flip with the edition */
.g-mood { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.g-mood.sm { width: 16px; height: 16px; stroke-width: 1.8; vertical-align: -3px; margin-right: 5px; }
.g-mood.lg { width: 30px; height: 30px; margin-right: 8px; vertical-align: -3px; }
.bp-ear-mood { display: inline-flex; align-items: center; gap: 8px; }
/* Front-page sections (V62 digest kit, rearranged V66): dates band, letters rows, briefs strip */
.bp-dates-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; align-items: start; }
.bp-dates-band .bp-dig-day { font-size: 40px; line-height: 42px; min-width: 64px; }
.bp-briefs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; align-items: start; }
.bp-brief-sec { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--bp-rule); color: var(--bp-ink); min-width: 0; }
.bp-brief-sec:hover { text-decoration: none; background: var(--bp-paper-tint); }
.bp-brief-sec:hover .bp-brief-hl { text-decoration: underline; }
.bp-brief-hl { font-family: var(--bp-font-display); font-weight: 700; font-size: 16px; line-height: 20px; color: var(--bp-ink); }
.bp-dig-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--bp-rule); color: var(--bp-ink); }
.bp-dig-item:hover { text-decoration: none; background: var(--bp-paper-tint); }
.bp-dig-item:hover .bp-dig-hl { text-decoration: underline; }
.bp-dig-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bp-dig-hl { font-family: var(--bp-font-display); font-weight: 700; font-size: 17px; line-height: 21px; color: var(--bp-ink); }
.bp-thumb { width: 64px; height: 64px; object-fit: cover; flex: none; border: 1px solid var(--bp-rule); display: block; }
.bp-dig-day { font-family: var(--bp-font-display); font-weight: 900; font-size: 30px; line-height: 32px; min-width: 52px; text-align: center; flex: none; }
.bp-dig-empty { padding: 10px 0; border-top: 1px solid var(--bp-rule); }
.bp-dig .meter { margin-top: 2px; }
/* Uniform truncation for digest copy */
.clamp-1, .clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }
@media (max-width: 720px) {
  .bp-dates-band, .bp-briefs { grid-template-columns: 1fr; }
}
.bp-strip-cap { font-size: 11px; }
.bp-fig-col { display: flex; flex-direction: column; gap: 4px; }

/* Skeletons — paper-tint bars, square, opacity pulse (HANDOFF §8) */
.bp .skeleton { background: var(--bp-paper-tint); border-radius: 0; animation: bp-skel 1.2s ease-in-out infinite; }
.skeleton-line { height: 14px; width: 100%; }
.skeleton-line--medium { width: 75%; }
.skeleton-line--short { width: 50%; }
@keyframes bp-skel { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .bp .skeleton { animation: none; } }

/* ===== 10. Section pages (running head + shared blocks) ===== */
.bp-head-np { color: var(--bp-ink); display: inline-flex; align-items: center; gap: 8px; }
.bp-head-np:hover { text-decoration: none; color: var(--bp-ink); }
.bp-head-center { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.bp-head-right { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.tabs-ruled { border-bottom: 1px solid var(--bp-rule); }
.bp-cond-fields { display: flex; flex-direction: column; gap: 12px; }
.bp-load-more { display: flex; justify-content: center; padding: 24px 0 0; }
.bp-editors-note { background: var(--bp-paper-tint); padding: 16px; display: flex; flex-direction: column; gap: 8px; }

/* Modal: newspaper panel over a dimmed page (calendar, memories, goals …) */
.bp-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(31, 18, 16, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.bp-modal-panel { background: var(--bp-paper); border: 2px solid var(--bp-rule-strong); padding: 24px; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.bp-modal-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--bp-rule); padding-top: 16px; flex-wrap: wrap; }
.bp-modal-foot-right { display: flex; gap: 10px; margin-left: auto; }
/* Notices panel rows (np-shell folio notices) */
.np-notices-panel { min-height: 0; }
.np-notice-list { display: flex; flex-direction: column; }
.np-notice-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; min-height: 44px; border-top: 1px solid var(--bp-rule); color: var(--bp-ink); }
.np-notice-list a:first-child { border-top: 0; }
.np-notice-list a:hover { text-decoration: none; }
.np-notice-list a:hover .body-sm { text-decoration: underline; }
.np-notice-list a .lbl { color: var(--bp-copper-ink); white-space: nowrap; }
.bp-check { display: flex; align-items: center; gap: 8px; cursor: pointer; min-height: 44px; }
.bp-check input { width: 16px; height: 16px; accent-color: var(--bp-copper); }
.bp-select { font-family: var(--bp-font-text); font-size: 17px; color: var(--bp-ink); background: transparent; border: 0; border-bottom: 1px solid var(--bp-ink); border-radius: 0; padding: 8px 0; min-height: 44px; width: 100%; }
.bp-select option { color: #1F1210; background: #F5EBE6; }
.btn-compact { padding: 6px 14px; min-height: 36px; font-size: 13px; }

/* Success variant of the .err notice: go-green rule, no alarm */
.err.ok { border-color: var(--bp-go); }
.err.ok::before { border-bottom-color: var(--bp-go); }
.bp-form-section { display: flex; flex-direction: column; gap: 16px; }

/* From the archive (front page): latest memory summary */
.bp-archive-body { display: flex; flex-direction: column; gap: 10px; }
.bp-archive-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

/* ===== 11. The changelog (login block + The Print Shop panel) ===== */
/* .bp-cl-block = the login page's "Latest edition" section; .bp-cl = the entry list, both places */
.bp-cl-block { display: flex; flex-direction: column; }
.bp-cl-block > .act { align-self: stretch; border-top: var(--bp-stroke-hair) solid var(--bp-rule); }
.bp-cl { display: flex; flex-direction: column; }
.bp-cl-entry { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: var(--bp-stroke-hair) solid var(--bp-rule); }
.bp-cl-entry:first-child { border-top: 0; padding-top: 2px; }
.bp-cl-entry-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bp-cl-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bp-cl-change { display: flex; gap: 10px; align-items: flex-start; }
.bp-cl-change .flag { flex: none; margin-top: 3px; }
.bp-cl-panel { min-height: 0; }   /* .bp's 100vh min-height would otherwise stretch the panel */

/* Change categories: a word + a CSS-drawn mark, same discipline as the status flags (§3) */
.flag.cl-new, .flag.cl-improved, .flag.cl-fixed { border: var(--bp-stroke-hair) solid var(--bp-rule-strong); color: var(--bp-ink); }
.flag.cl-new::before      { content: ""; width: 7px; height: 7px; background: var(--bp-copper); }
.flag.cl-improved::before { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid var(--bp-ink); }
.flag.cl-fixed::before    { content: ""; width: 9px; height: 0; border-top: var(--bp-stroke-mid) solid var(--bp-ink); }

/* ===== 12. The Daybooks (front-page two-up band) ===== */
/* A column per partner: theirs quotes their latest entry, yours nudges or stands. */
.bp-daybooks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-items: start; }
.bp-dbk-col { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: var(--bp-stroke-hair) solid var(--bp-rule); min-width: 0; }
.bp-dbk-col-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bp-dbk-col-q { color: var(--bp-ink-muted); }
.bp-dbk-col-quote { margin: 2px 0 4px; }
.bp-dbk-col .act { margin-top: auto; padding-top: 8px; }

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