/* Ported from design/project/*.dc.html: the same palette object as custom properties.
   Light is the default; [data-theme=dark] is deep navy, not black. --brand is the white-label
   token, overridden per tenant by /brand.css (loaded after this file). No inline styles anywhere:
   the CSP forbids them. */
:root {
  --bg: #eaf2f8;
  --card: #f9fcfe;
  --ink: #1d2c3d;
  --muted: #47586b;
  --rule: #cfe0ec;
  --rule-strong: #8aa6c0;
  --band: #052961;
  --band-ink: #ffffff;
  --accent: #0f5a9a;
  --chip: #e3eef7;
  --btn-border: #0f5a9a;
  --focus: #2b9cd5;
  --cyan: #5bf5ff;
  --brand: #0f5a9a;
  --on-brand: #ffffff;
  --ok: #1f6f43;
  --ok-bg: #e2f3e9;
  --warn: #7a4d00;
  --warn-bg: #fdf0d5;
  --bad: #a1262b;
  --bad-bg: #fbe3e4;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg: #0d2240;
  --card: #132e54;
  --ink: #eaf2f8;
  --muted: #a9bdd3;
  --rule: #2a4c78;
  --rule-strong: #5b7fa8;
  --band: #071a36;
  --band-ink: #eaf2f8;
  --accent: #5bb8ea;
  --chip: #1b3a66;
  --btn-border: #5bb8ea;
  --ok: #8fe0b0;
  --ok-bg: #143d2e;
  --warn: #f5cf7a;
  --warn-bg: #3d3214;
  --bad: #ffb3b6;
  --bad-bg: #4a1c24;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
}
a { color: var(--accent); }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.skip { position: absolute; left: -999px; top: 8px; }
.skip:focus { left: 8px; z-index: 10; background: var(--card); padding: 8px 12px; }

/* --- band (header) --- */
.band {
  background: var(--band); color: var(--band-ink);
  padding: 12px 24px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--band-ink); text-decoration: none; }
.brand:hover { color: var(--band-ink); }
.brand-mark { width: 28px; height: 28px; flex: 0 0 auto; display: block; }
/* The Overscan mark (E1, Geoff 2026-10-14): a ring around a glowing safe-area frame and a centre
   dot. Tenant-coloured: --brand tile and ring, --cyan line and nodes, --focus glow, so a
   white-label tenant gets the shape in its own colours. Glow = layered strokes (no filter). */
.brand-mark .bm-tile { fill: var(--brand); }
.brand-mark .bm-ring { fill: none; stroke: var(--focus); stroke-width: 2.5; opacity: .55; }
.brand-mark path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark .bm-glow { stroke: var(--focus); stroke-width: 4; opacity: .3; }
.brand-mark .bm-glow-wide { stroke-width: 6.5; opacity: .16; }
.brand-mark .bm-halo { fill: var(--focus); opacity: .25; }
.brand-mark .bm-frame { stroke: var(--cyan); stroke-width: 2.4; }
.brand-mark .bm-node { fill: var(--cyan); }
.brand-logo { height: 28px; width: auto; flex: 0 0 auto; }
.legal { max-width: 72rem; margin: 32px auto 24px; padding: 0 16px; font-size: 12px; color: var(--muted, #667); }
.brand-name { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.nav a {
  min-height: 44px; display: flex; align-items: center; padding: 0 14px;
  color: var(--band-ink); text-decoration: none; border-radius: 22px;
}
.nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.14); font-weight: 600; }
.nav a:hover { background: rgba(255, 255, 255, 0.08); }
.nav form { margin: 0 0 0 8px; }
.pill-ghost {
  min-height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--band-ink);
  background: transparent; color: var(--band-ink); font: inherit; cursor: pointer;
}
.digest-switch { display: flex; gap: 8px; align-items: center; margin: 0; }
.digest-switch select {
  min-height: 44px; border-radius: 22px; padding: 0 12px; font: inherit;
  background: transparent; color: var(--band-ink); border: 1px solid var(--band-ink);
}
.digest-switch option { color: #1d2c3d; }
.dev-banner {
  background: var(--bad-bg); color: var(--bad); text-align: center; padding: 6px 16px;
  font-weight: 600; font-size: 14px;
}

/* --- page frame --- */
.page {
  max-width: 1120px; margin: 0 auto; padding: 40px 16px 64px;
  display: flex; flex-direction: column; gap: 32px;
}
.page.narrow { max-width: 860px; gap: 28px; }
.page.read { max-width: 760px; }
.intro { display: flex; flex-direction: column; gap: 8px; }
h1, .h1 { margin: 0; font-family: var(--serif); font-size: 36px; line-height: 42px; font-weight: 600; }
h2 { margin: 0; font-size: 18px; font-weight: 600; }
.lede { margin: 0; color: var(--muted); font-size: 16px; line-height: 24px; max-width: 640px; }
.muted { color: var(--muted); }
.small { font-size: 13px; line-height: 20px; }
.hint { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }

.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 16px;
  padding: 24px; display: flex; flex-direction: column; gap: 16px;
}
.section { display: flex; flex-direction: column; gap: 10px; }
.row-between {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap;
}

/* --- controls --- */
label.field { font-size: 14px; font-weight: 600; }
textarea, input[type="text"], input[type="time"], input[type="url"] {
  min-height: 44px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--rule-strong);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; width: 100%;
}
input[type="time"] { padding: 0 14px; max-width: 220px; }
textarea { resize: vertical; line-height: 22px; }
textarea.mono { font-family: var(--mono); font-size: 14px; }
/* The brief grows with its text, so no line hides under the bottom edge on a phone (a fixed
   rows=6 box clipped its last line at phone width). field-sizing where supported; app.js sizes
   it elsewhere. 26px = 2 x 12px padding + 2 x 1px border (border-box). */
textarea.autosize {
  field-sizing: content; min-height: calc(6 * 22px + 26px); max-height: 75vh;
  overflow-y: auto; padding-bottom: 14px;
}
.inline-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.btn {
  min-height: 44px; padding: 0 20px; border-radius: 8px; border: 1px solid var(--btn-border);
  background: var(--brand); color: var(--on-brand); font: inherit; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.btn:hover { color: var(--on-brand); filter: brightness(1.08); }
.btn.big { min-height: 48px; padding: 0 24px; font-size: 16px; }
.btn.quiet {
  background: transparent; color: var(--ink); border-color: var(--rule-strong); font-weight: 500;
}
.btn.quiet:hover { color: var(--ink); background: var(--chip); }
.btn.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* toggle pill (include / exclude) */
.toggle {
  min-height: 44px; min-width: 104px; padding: 0 14px; border-radius: 22px; font: inherit;
  font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--ink);
}
.toggle[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--btn-border); }

/* segmented choices: real radio / checkbox inputs, styled as pills */
.choices { display: flex; gap: 8px; flex-wrap: wrap; border: 0; margin: 0; padding: 0; min-width: 0; }
.choices legend { padding: 0; margin-bottom: 8px; font-size: 14px; font-weight: 600; }
.choice { position: relative; display: inline-flex; }
.choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border-radius: 22px;
  border: 1px solid var(--rule-strong); background: transparent; color: var(--ink);
  font-size: 14px; font-weight: 600;
}
.choice.day span { border-radius: 10px; min-width: 52px; justify-content: center; padding: 0 10px; font-size: 13px; }
.choice input:checked + span { background: var(--brand); color: var(--on-brand); border-color: var(--btn-border); }
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

.checklist {
  background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 8px 16px;
  display: flex; flex-direction: column;
}
.checklist label {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px;
  border-bottom: 1px solid var(--rule); cursor: pointer; font-size: 15px;
}
.checklist label:last-child { border-bottom: 0; }
.checklist input { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; }
.checklist .later { opacity: 0.55; cursor: default; }
.checklist .later input { cursor: default; }

/* --- chips and badges --- */
.chip {
  min-width: 76px; text-align: center; padding: 4px 10px; border-radius: 6px; background: var(--chip);
  color: var(--accent); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.tag {
  padding: 2px 10px; border-radius: 6px; border: 1px solid var(--accent); color: var(--accent);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.tag.probation { white-space: normal; overflow-wrap: anywhere; } /* a sentence: wraps on a phone */
.tag.later { border: 0; background: var(--chip); color: var(--muted); margin-left: auto; }
.badge {
  padding: 2px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.idle { background: var(--chip); color: var(--muted); }
.badge.queued, .badge.running { background: var(--chip); color: var(--accent); border-color: var(--accent); }
.badge.empty { background: transparent; color: var(--muted); border: 1px dashed var(--rule-strong); }
.badge.degraded { background: var(--warn-bg); color: var(--warn); }
.badge.failed { background: var(--bad-bg); color: var(--bad); border-color: var(--bad); }

/* --- source rows --- */
.list { display: flex; flex-direction: column; gap: 10px; list-style: none; margin: 0; padding: 0; }
.src {
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 16px;
  display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap;
}
.src.off { opacity: 0.6; }
.src-main { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.src-name { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.src-detail {
  font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.src-err { font-size: 13px; color: var(--bad); overflow-wrap: anywhere; }
.src-raw { font-size: 12px; color: var(--muted, inherit); margin-top: 2px; }
.src-raw summary { cursor: pointer; }
.src-raw code { font-family: var(--mono); overflow-wrap: anywhere; }
.src form { margin: 0; }
.src-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.capture-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.capture {
  border: 1px solid var(--rule); border-radius: 12px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.capture strong { font-size: 14px; }
.mono-accent { font-family: var(--mono); font-size: 13px; color: var(--accent); overflow-wrap: anywhere; }
.bookmarklet {
  align-self: flex-start; min-height: 44px; display: flex; align-items: center; padding: 0 14px;
  border-radius: 8px; border: 1px dashed var(--accent); color: var(--accent); text-decoration: none;
  font-size: 14px; font-weight: 600;
}

.notice {
  border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 20px;
  background: var(--chip); border: 1px solid var(--rule);
}
.notice.ok { background: var(--ok-bg); color: var(--ok); border-color: transparent; }
.notice.bad { background: var(--bad-bg); color: var(--bad); border-color: transparent; }
.notice.warn { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.notice ul { margin: 6px 0 0; padding-left: 20px; }
.notice code { font-family: var(--mono); overflow-wrap: anywhere; }
.tip { background: var(--chip); border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; }
.tip strong { font-size: 14px; color: var(--accent); }
.tip p { margin: 4px 0 0; font-size: 14px; line-height: 20px; }
.savebar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 8px; border-top: 1px solid var(--rule); }

/* --- history --- */
.history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.history li { border-bottom: 1px solid var(--rule); padding: 8px 0; font-size: 14px; }
.history dl { margin: 4px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; }
.history dt { color: var(--muted); }
.history dd { margin: 0; overflow-wrap: anywhere; }

/* --- issues list --- */
.runs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.run {
  background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--rule-strong);
  border-radius: 12px; padding: 12px 16px; display: flex; gap: 8px 16px; align-items: center; flex-wrap: wrap;
}
.run.ok { border-left-color: var(--ok); }
.run.empty { border-left-style: dashed; }
.run.degraded { border-left-color: var(--warn); }
.run.failed { border-left-color: var(--bad); background: var(--bad-bg); }
.run.queued, .run.running { border-left-color: var(--accent); }
.run-main { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.run-title { font-weight: 600; }
.run a.run-title { text-decoration: none; color: var(--ink); min-height: 44px; display: flex; align-items: center; }
.run a.run-title:hover { color: var(--accent); text-decoration: underline; }

/* --- issue (reading view) --- */
.masthead {
  text-align: center; display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px;
  border-bottom: 2px solid var(--rule);
}
/* The masthead sits on the page, not the band: the band's ghost pill was white on white. */
.masthead .masthead-action { align-self: center; margin-top: 4px; }
.masthead .title { font-family: var(--serif); font-size: 34px; font-weight: 600; letter-spacing: 0.2px; }
.headline { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 30px; font-weight: 600; text-align: center; }
.theme { display: flex; flex-direction: column; gap: 12px; }
.theme h2 { font-family: var(--serif); font-size: 26px; line-height: 32px; }
.sowhat { background: var(--chip); border-radius: 10px; padding: 14px 16px; margin: 0; font-size: 14px; line-height: 21px; }
.sowhat b { color: var(--accent); }
.items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
/* one line per item: [Update] linked headline, source name */
.items li.line {
  padding: 10px 4px; border-bottom: 1px solid var(--rule); min-height: 44px; line-height: 24px;
}
.items a.it-title { color: var(--ink); text-decoration: none; display: inline-block; padding: 0 0 2px; }
.items a.it-title:hover { color: var(--accent); text-decoration: underline; }
.it-title { font-size: 16px; font-weight: 500; overflow-wrap: anywhere; }
.it-src { font-size: 13px; color: var(--accent); margin-left: 6px; white-space: nowrap; }
.tag.update, .tag.reversal, .tag.new { font-size: 11px; padding: 1px 7px; margin-right: 4px; vertical-align: 2px; }
.tag.warn { font-size: 11px; padding: 1px 7px; margin-right: 4px; vertical-align: 2px; border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.it-why, .it-following { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.block { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; border-top: 1px solid var(--rule); }
.block h2 { font-size: 20px; }
.issue-footer { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--rule); }

.inline-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; margin-top: 8px; }
.inline-field input[type="number"] {
  width: 5.5em; min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--rule-strong);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 16px;
}
.page-inner { display: flex; flex-direction: column; gap: 32px; }
.narrow .page-inner { gap: 28px; }

@media (max-width: 600px) {
  .band { padding: 12px 16px; }
  h1, .h1 { font-size: 30px; line-height: 36px; }
  .page { padding-top: 28px; }
  .card { padding: 18px 16px; }
  .nav form { margin-left: 0; }
  textarea.autosize { min-height: calc(9 * 22px + 26px); }
}

/* issue formats: tldr summary under a bold linked headline; read-time tag */
.it-time { font-weight: 400; opacity: .75; white-space: nowrap; }
.line.tldr { margin-bottom: 14px; }
.it-summary { margin: 4px 0 0; }

/* M5: review frame, recipients, public pages */
.preview { width: 100%; min-height: 70vh; border: 1px solid var(--rule); border-radius: 8px; background: #ffffff; }
.recipient { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.public { padding-top: 48px; }
/* R8: "When it arrives" on /m/, an hour and a city-named time zone (growth.reader_choice) */
.manage-when { display: flex; flex-direction: column; gap: 10px; }
.manage-when .field-title { margin: 0; font-size: 14px; font-weight: 600; }
.manage-time { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.manage-pair { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.manage-time select {
  min-height: 44px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--rule-strong);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 16px; max-width: 100%;
}
.eyebrow { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin: 0 0 8px; }
/* M7 patterns: "building" trends with a weekly sparkline (bar height classes: CSP has no inline
   styles), and the cited advisory paragraph. */
.patterns .trend { margin-bottom: 14px; }
.patterns .refs { margin: 6px 0 0; padding-left: 20px; font-size: 14px; line-height: 21px; }
.patterns h3 { font-family: var(--serif); font-size: 19px; margin: 8px 0 0; }
.patterns-note { margin: 16px 0; }
.spark { display: inline-flex; align-items: flex-end; gap: 2px; height: 18px; margin: 0 6px; vertical-align: middle; }
.spark .bar { width: 6px; background: var(--accent); border-radius: 1px; }
.spark .bar.l0 { height: 2px; opacity: .3; }
.spark .bar.l1 { height: 4px; } .spark .bar.l2 { height: 6px; } .spark .bar.l3 { height: 8px; }
.spark .bar.l4 { height: 10px; } .spark .bar.l5 { height: 12px; } .spark .bar.l6 { height: 14px; }
.spark .bar.l7 { height: 16px; } .spark .bar.l8 { height: 18px; }

/* --- M11 weekly letter workspace --- */
.lt-links { font-size: 14px; margin: 4px 0 0; }
.lt-counters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.lt-counter { background: var(--card); border: 1px solid var(--rule); border-left: 6px solid var(--rule-strong); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; }
.lt-counter b { font-size: 26px; line-height: 30px; }
.lt-counter span { font-size: 13px; color: var(--muted); }
.lt-counter.ok { border-left-color: var(--ok); }
.lt-counter.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.lt-counter.bad { border-left-color: var(--bad); background: var(--bad-bg); }
.lt-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0; }
.lt-row form { margin: 0; }
.lt-grow { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lt-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.lt-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.lt-section { border-top: 2px solid var(--brand); }
.lt-section.lt-empty { opacity: .8; }
.lt-meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.lt-rules { font-size: 14px; }
.lt-rules dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0 0; }
.lt-rules dt { color: var(--muted); }
.lt-rules dd { margin: 0; }
.lt-para { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.lt-state { margin: 0; }
.lt-sents { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.lt-sents li { line-height: 20px; }
.lt-sent { margin-right: 6px; }
.lt-cite { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; border-radius: 6px; font-size: 12px; background: var(--chip); color: var(--accent); margin-right: 4px; }
.lt-cite.human { border: 1px solid var(--accent); }
.lt-cite .inline-form { margin: 0; }
.lt-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; min-width: 24px; min-height: 24px; }
.lt-link select { max-width: 260px; }
.lt-add label { font-size: 14px; color: var(--muted); }
.lt-h3 { font-size: 15px; margin: 6px 0 0; }
.lt-tray { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lt-tray li { border: 1px solid var(--rule); border-radius: 10px; padding: 8px 12px; display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.lt-tray li.pinned { border-color: var(--ok); }
.lt-tray li.dropped { opacity: .55; }
.lt-tray a { font-weight: 500; overflow-wrap: anywhere; }
.lt-diff { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 12px; font-family: var(--mono); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.lt-diff .lt-add { background: var(--ok-bg); color: var(--ok); display: block; }
.lt-diff .lt-del { background: var(--bad-bg); color: var(--bad); display: block; text-decoration: line-through; }
.lt-diff .lt-hunk { color: var(--muted); display: block; }
.lt-diff .lt-ctx { display: block; }
.lt-row select, .lt-link select, .lt-fields select {
  min-height: 44px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--rule-strong);
  background: var(--bg); color: var(--ink); font: inherit; font-size: 14px;
}

/* M11 completion: set review across segments, readers' lines, library forms */
.page.wide { max-width: 1400px; }
.lt-set { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.lt-set-col { min-width: 0; }
.lt-set-frame { min-height: 60vh; }
.lt-variant { border-top: 1px solid var(--rule); padding: 8px 0; }
.lt-variant p { margin: 4px 0; }
.lt-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.lt-table caption { text-align: left; color: var(--muted); font-size: 13px; padding-bottom: 6px; }
.lt-table th, .lt-table td { border-bottom: 1px solid var(--rule); padding: 6px 8px; text-align: left; }
.lt-table tr.bad td { background: var(--bad-bg); }
.lt-form label { display: block; margin: 8px 0; }
.lt-form input[type=text], .lt-form input[type=url], .lt-form input[type=date], .lt-form textarea, .lt-form select { width: 100%; }

/* M14: the public blog page and the post preview. */
.blog .prose, .post-preview { line-height: 1.6; }
.blog .prose h2, .post-preview h2 { margin-top: 28px; color: var(--brand-heading, inherit); }
.blog .prose a, .post-preview a { color: var(--brand-link, inherit); }
.blog .prose ul, .post-preview ul { padding-left: 20px; }
.blog .prose li, .post-preview li { margin: 6px 0; }
.blog-list li { margin: 12px 0; }
.blog-signup { border-left: 3px solid var(--brand); padding-left: 16px; margin: 32px 0; }
.post-preview { border: 1px solid var(--rule); border-radius: 8px; padding: 16px 20px; }
form textarea#post-body, form input#post-title, form input#post-desc { width: 100%; }

/* M13: the sign-up honeypot field, out of sight for people, still in the form for scripts. */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pause-banner { background: var(--warn-bg); color: var(--warn); padding: 0.6rem 1rem; text-align: center; }

/* --- M15: the share panel on the brief page, "not your address" on public pages --- */
.share-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.share-row input[type="text"] { flex: 1 1 260px; min-width: 0; min-height: 44px; font-family: var(--mono, monospace); }
.share-count b { color: var(--accent); }
.not-yours { margin-top: 24px; }

/* Issue media (Listen and watch): everything fits the screen on a phone (390px), 2026-10-12. */
.media-item { margin: 0 0 18px; min-width: 0; }
.media-item .media-label { display: block; margin-bottom: 6px; }
.media-item audio, .media-item video, .media-item img { display: block; width: 100%; max-width: 100%; }
.media-item video, .media-item img { height: auto; border-radius: 8px; border: 1px solid var(--rule); }
.media-item video { aspect-ratio: 16 / 9; background: #000; object-fit: contain; }
.media-item .media-zoom { display: block; cursor: zoom-in; }
.media-item .media-zoom + .small { display: block; margin-top: 4px; }
.inquiry-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Where an issue has got to, and "Waiting for you" (web.issue_state, 2026-10-15) */
.state-lines { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.state-line { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; min-width: 0; }
.state-line .badge { white-space: normal; overflow-wrap: anywhere; line-height: 18px; }
.state-link { min-height: 44px; display: inline-flex; align-items: center; font-size: 14px; }
.state-form { margin: 0; }
.waiting { margin-bottom: 24px; }
.waiting-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.waiting-item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.waiting-title { font-weight: 600; color: var(--ink); text-decoration: none; min-height: 44px;
  display: flex; align-items: center; overflow-wrap: anywhere; }
.waiting-title:hover { color: var(--accent); text-decoration: underline; }

/* A slow button at work (app.js data-busy): its words say what and how long, plus a small spinner */
.btn.busy { white-space: normal; text-align: left; gap: 10px; cursor: progress; }
.btn.busy[disabled] { opacity: 0.85; cursor: progress; }
.btn.busy::before {
  content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.busy::before { animation-duration: 2.4s; } }