/* ==========================================================================
   rep. functional: the Markup language at work (v0, started on the calendar; app.css is the reading layer)

   Markup is set for reading: big type, air, sheets laid on a desk. A tool is used, not read. The functional layer keeps
   Markup's materials (warm paper, navy type, one green, Creato and mono, square corners with round keys, the four
   laws) and changes how they're spent:

   1. The work is the page. A working view fills the window: one bar of controls, one sheet. The page never scrolls;
      the sheet does. No page title or explainer where the view already says what it is.
   2. One bar, fixed slots. The bar is as tall as the index's top row, so it lines up with the logo. Its keys are all
      32px, on one line: where you are on the left (Today, the arrows, the title); on the right who's here, what's
      shown, how, and what to do, always in that order, so nothing moves when the view changes.
   3. Readable first. Running text 14px, items 12.5px, mono labels 11px, nothing smaller. Words come in three
      strengths only: --f-ink, --f-ink-2 (.74) and --f-ink-3 (.6, the floor for anything meant to be read: 5:1 on the
      sheet). Fainter than that means disabled.
   4. Shadow outside, hairlines inside. A sheet lifts off the desk once; inside it rules divide, never boxes in boxes.
   5. A 4px grid: 4 inside a thing, 8 between things, 16 to 20 round a sheet.
   6. Colour has one job each. Green is a person (you, today, the time to act); red pen is an error; a kind's hue says
      which kind, and its words stay ink.
   7. Rules have rank. A rule the full width of the sheet divides its regions (a column's head, a list's own bar), and
      nothing else. Items sit inside their list, inset from the sheet's edge: rounded where they're pointed at (a person
      acts there), with a faint hairline between them that starts where their words start. Groups inside a list are
      told apart by a heading and space, never by a rule.
   ========================================================================== */
:root {
  --f-ink: #070c1e;              /* Markup's navy, written out: --mk-navy is set on .mk-root, under :root, so it can't be borrowed here */
  --f-ink-2: rgb(7 12 30 / .74);
  --f-ink-3: rgb(7 12 30 / .6);
  --f-ink-off: rgb(7 12 30 / .36);
  --f-rule: rgb(7 12 30 / .09);
  --f-rule-2: rgb(7 12 30 / .16);
  --f-hover: rgb(7 12 30 / .045);
  --f-press: rgb(7 12 30 / .08);
  --f-ctl: 32px;
  --f-bar: var(--top);
  --f-gut: 20px;
  --f-shadow: 0 0 0 1px rgb(7 12 30 / .07), 0 1px 2px rgb(7 12 30 / .05), 0 12px 32px -18px rgb(7 12 30 / .22);
}

/* ---------------------------------------------------------------- pieces */
.f-label { display: block; font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--f-ink-3); }

/* the bar: two groups, the right one anchored right */
.f-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: var(--f-bar); }
.f-bar-l, .f-bar-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.f-bar-r { margin-left: auto; }
.f-bar .btn--sm { height: var(--f-ctl); }
.f-bar .btn--bare { padding: 0 10px; border-radius: 999px; transition: background-color 120ms; }
.f-bar .btn--bare:hover { background: var(--f-hover); }
.f-bar .btn--bare:active { background: var(--f-press); }
.btn--icon, .btn--sm.btn--icon { width: var(--f-ctl); padding: 0; }

/* the segmented key: one 32px pill, its options 28px inside it */
.f-bar .seg { flex: none; height: var(--f-ctl); align-items: center; margin: 0; padding: 2px; box-shadow: inset 0 0 0 1px var(--f-rule-2); }
.f-bar .seg a { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; font: 600 13px/1 var(--font-body); letter-spacing: -.005em; color: var(--f-ink-2); }
.f-bar .seg a:hover { color: var(--f-ink); background: var(--f-hover); }
.f-bar .seg a[aria-current] { color: var(--mk-sheet); background: var(--mk-navy); }

/* lists: items inside their list, not across the sheet (law 7). --f-inset is where an item's words start, so the
   hairline between two items starts there too; it steps aside for the item that's pointed at. */
.f-list { list-style: none; margin: 0; padding: 0 8px; display: grid; }
.f-item { --f-inset: 12px; position: relative; display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 6px;
  background: none; font: inherit; color: var(--f-ink); text-align: left; cursor: pointer; transition: background-color 120ms; }
.f-item:hover { background: var(--f-hover); }
.f-item:active { background: var(--f-press); }
.f-item:focus-visible { outline: 2px solid var(--mk-green); outline-offset: -2px; }
.f-list > li + li > .f-item::before, .f-list > .f-item + .f-item::before { content: ""; position: absolute; top: 0; left: var(--f-inset); right: 12px; height: 1px; background: var(--f-rule); transition: opacity 120ms; pointer-events: none; }
.f-list > li:hover > .f-item::before, .f-list > li:hover + li > .f-item::before, .f-list > .f-item:hover::before, .f-list > .f-item:hover + .f-item::before { opacity: 0; }
/* a group in a list: its heading, then its items; space above says where it starts */
.f-group + .f-group { margin-top: 8px; }
.f-group-h { display: flex; align-items: baseline; gap: 8px; margin: 0; padding: 18px 20px 6px; font-size: 13.5px; font-weight: 800; letter-spacing: -.02em; color: var(--f-ink); }
.f-group-h > span { font: 500 11px/1 var(--font-mono); letter-spacing: .04em; color: var(--f-ink-3); }
.f-group-h > .f-label { font: inherit; font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; }

/* the sheet, and the status line along its foot */
.f-sheet { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--mk-sheet); box-shadow: var(--f-shadow); }
.f-status { flex: none; display: block; margin: 0; padding: 8px 14px; border-top: 1px solid var(--f-rule); font-size: 12.5px; line-height: 16px; color: var(--f-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 160ms var(--ease-out); }

/* ---------------------------------------------------------------- the calendar
   A bar, then one sheet: the view, and a status line under it that names a date's pitch window while it's pointed at.
   On a wide screen the member's own calendar fits the window and only the view scrolls; the rep. team sees it as one
   section of a member's page, and a phone scrolls the page, so there it flows. */
.cal--full { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.cal--full .cal-bar { margin: 0; padding: 0 0 12px; }
.cal-title { margin: 0 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.035em; line-height: 1; white-space: nowrap; }
.cal-arrows { gap: 4px; }
.cal-acts { display: inline-flex; align-items: center; gap: 8px; }
.cal-acts .addmenu > .btn { height: var(--f-ctl); padding: 0 14px 0 12px; font-size: 13px; gap: 6px; }
.cal-acts .addmenu > .btn .ico, .cal-acts .btn .ico { width: 16px; height: 16px; }
.cal-here { margin: 0; min-height: 0; gap: 8px; }
.cal-here:empty { display: none; }
.cal-here .meta { font: 500 12.5px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--f-ink-2); white-space: nowrap; }
.cal-inbox svg { width: 16px; height: 16px; }
.cal-key-n { min-width: 18px; height: 18px; font-size: 11px; line-height: 18px; }
.cal-win.is-on { color: var(--f-ink); }
.cal-win.is-on b { box-shadow: inset 0 -5px 0 rgb(59 194 76 / .35); }
.cal-body { min-height: 0; min-width: 0; }
/* the bar's labels where it's narrow: Settings keeps its icon */
@container win (max-width: 1500px) { .cal-here .meta { display: none; } }
@container win (max-width: 1400px) { .cal-acts [data-label] > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .cal-acts [data-label] { width: var(--f-ctl); padding: 0; } }

@media (min-width: 901px) {
  .win-scroll:has(> main > .view--fit) { overflow-y: hidden; }
  main:has(> .view--fit) { box-sizing: border-box; max-width: none; height: 100%; display: flex; flex-direction: column; padding: 0 var(--f-gut) var(--f-gut); }
  .view--fit { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .view--fit > .cal--full { flex: 1; min-height: 0; }
  .view--fit .cal-bar { flex: none; padding: 0; margin-bottom: 4px; }
  .view--fit .cal-sheet { flex: 1; min-height: 0; }
  .view--fit .cal-body { flex: 1; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(7 12 30 / .2) transparent; }
  /* the views that scroll themselves: the month's weeks, the board's columns, the timeline both ways */
  .view--fit .cal-body:has(> .cflow, > .wk-board, > .tlx) { overflow: hidden; }
  .view--fit .cflow { container-type: size; max-height: none; height: 100%; min-height: 0; border: 0; }
  .view--fit .cgrid--flow .cday { min-height: max(104px, calc((100cqh - 33px) / 5)); }
  .view--fit .cgrid--week { height: 100%; grid-template-rows: auto minmax(0, 1fr); }
  .view--fit .cgrid--week .cday { min-height: 0; overflow-y: auto; scrollbar-width: none; }
  .view--fit .wk-board { height: 100%; box-sizing: border-box; }
  .view--fit .wk-col { max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
  .view--fit .tlx { height: 100%; overflow: auto; }
}
/* a wrapped bar (narrow windows): two rows, the second starting at the left */
@container win (max-width: 1000px) { .cal--full .cal-bar { padding: 8px 0 12px; } .cal--full .f-bar-r { margin-left: 0; flex-wrap: wrap; } }

/* ---- month and week: one grid of hairlines, the sheet's edge is its border */
.cal-sheet .cgrid { border: 0; }
.cal-sheet .cgrid .dow { display: flex; align-items: center; gap: 6px; height: 32px; box-sizing: border-box; padding: 0 10px; border-right: 1px solid var(--f-rule); border-bottom: 1px solid var(--f-rule-2);
  font: 500 11px/1 var(--font-mono); letter-spacing: .1em; color: var(--f-ink-3); background: var(--mk-sheet); }
.cal-sheet .cgrid > :nth-child(7n) { border-right: 0; }
.cal-sheet .cday { gap: 2px; padding: 4px 4px 14px; border-right: 1px solid var(--f-rule); border-bottom: 1px solid var(--f-rule); }
.cal-sheet .cday--m1 { background: color-mix(in srgb, var(--mk-paper) 75%, var(--mk-sheet)); }
.cal-sheet .cday--first { box-shadow: inset 2px 0 0 var(--mk-navy); }
/* the day's number: a 24px key; past days in the lighter ink; today in navy, with the period */
.cal-sheet .cday .dn { display: inline-flex; align-items: center; height: 24px; min-width: 24px; box-sizing: border-box; padding: 0 6px; border-radius: 2px; font: 700 13px/1 var(--font-body); letter-spacing: -.01em; color: var(--f-ink); }
.cal-sheet .cday--past .dn { color: var(--f-ink-3); font-weight: 600; }
.cal-sheet .cday--today .dn, .cal-sheet .cgrid--week .dow.is-today b { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.cal-sheet .cday--today .dn::after, .cal-sheet .cgrid--week .dow.is-today b::after { content: ""; flex: none; width: 4px; height: 4px; margin: 0 0 -6px 2px; border-radius: 50%; background: var(--mk-green); }
.cal-sheet .cday a.dn:hover { background: var(--f-hover); }
.cal-sheet .cday--today a.dn:hover { background: var(--mk-navy); }
.cal-sheet .cday .cmo { margin-right: 6px; font: 600 11px/1 var(--font-mono); letter-spacing: .1em; color: var(--f-ink); }
/* what's on a day: 22px chips, words in ink at item size */
.cal-sheet .cday .ev { min-height: 22px; box-sizing: border-box; padding-top: 3px; padding-bottom: 3px; border-radius: 2px; font-size: 12.5px; line-height: 16px; }
.cal-sheet .cday .ev--note { min-height: 0; padding-top: 1px; padding-bottom: 1px; font-size: 13px; line-height: 16px; }
.cal-sheet .ev .ev-st { font-size: 11px; font-weight: 600; letter-spacing: 0; color: var(--f-ink-3); }
.cal-sheet .ev--own .ev-st { color: rgb(252 251 248 / .72); }
.cal-sheet .ev-n { font-size: 11px; color: var(--f-ink-3); }
.cal-sheet .cday .ev--more { min-height: 20px; padding: 2px 8px; font-size: 12px; font-weight: 700; color: var(--f-ink-2); }
.cal-sheet .cday .ev--more:hover { background: var(--f-hover); filter: none; }
.cal-sheet .ev--done { color: var(--f-ink-3); }
.cal-sheet .ev--maybe { color: var(--f-ink-2); }
/* the pitch window's band: under the chips, in the room the day keeps for it */
.cal-sheet .cday::after { bottom: 4px; height: 4px; }
.cal-sheet .cflow-end { padding: 16px 0 20px; border-top: 1px solid var(--f-rule); }
/* the week: each day's header carries its number at a size you can find */
.cal-sheet .cgrid--week .dow { height: 44px; }
.cal-sheet .cgrid--week .dow b { display: inline-flex; align-items: center; height: 26px; min-width: 26px; box-sizing: border-box; padding: 0 6px; margin: 0; border-radius: 2px; font: 800 17px/1 var(--font-body); letter-spacing: -.02em; color: var(--f-ink); }
.cal-sheet .cgrid--week .dow.is-past b { color: var(--f-ink-3); font-weight: 700; }
.cal-sheet .cgrid--week .cday { padding: 6px; gap: 4px; }
.cal-sheet .cgrid--week .ev { white-space: normal; }

/* ---- the day: what's on it beside what it's the run-up to */
.cal-sheet .cone { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 0; padding: 0; background: none; box-shadow: none; align-items: start; min-height: 100%; }
.cal-sheet .cone-col { display: grid; gap: 12px; align-content: start; padding: 18px 20px 24px; min-width: 0; }
.cal-sheet .cone-col + .cone-col { box-shadow: inset 1px 0 0 var(--f-rule); align-self: stretch; }
.cal-sheet .cone-list { gap: 0; margin: 0 -12px; }
.cal-sheet .cone-row { position: relative; padding: 10px 12px; border-radius: 6px; box-shadow: none; transition: background-color 120ms; }
.cal-sheet .cone-row:hover { background: var(--f-hover); }
.cal-sheet .cone-row + .cone-row::before { content: ""; position: absolute; top: 0; left: 42px; right: 12px; height: 1px; background: var(--f-rule); transition: opacity 120ms; }
.cal-sheet .cone-row:hover::before, .cal-sheet .cone-row:hover + .cone-row::before { opacity: 0; }
.cal-sheet .cone-row b { font-size: 14.5px; }
.cal-sheet .cone-row .meta { font-size: 11px; color: var(--f-ink-3); }
.cal-sheet .cone-win { margin: 0; gap: 10px; }
.cal-sheet .runup { gap: 8px; padding: 12px 14px; border-radius: 2px; }
.cal-sheet .runup-to b { font-size: 15px; }
.cal-sheet .runup-what { font-size: 13.5px; }

/* an empty view: the words, no box */
.cal-sheet .cone-empty { gap: 4px; padding: 4px 0; border-radius: 0; box-shadow: none; outline: 0; }
.cal-sheet .cone-empty b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.cal-sheet .cone-empty span { font-size: 14px; color: var(--f-ink-2); }
.cal-sheet .wk-g ~ .cone-empty, .cal-sheet [data-rows] > .cone-empty, .cal-sheet .tlx-body > .cone-empty { padding: 20px 16px; }

/* ---- the year: twelve months as a grid of hairlines */
.cal-sheet .cyear { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.cal-sheet .cmini { padding: 14px 18px 16px; box-shadow: inset -1px -1px 0 var(--f-rule); }
.cal-sheet .cmini-h { margin-bottom: 8px; font-size: 15px; }
.cal-sheet .cmini-g { gap: 1px; }
.cal-sheet .cmini-w { font: 500 10.5px/1 var(--font-mono); color: var(--f-ink-3); padding-bottom: 6px; }
.cal-sheet .cmini-d { aspect-ratio: auto; height: 28px; border-radius: 2px; font-size: 12.5px; color: var(--f-ink-2); }
.cal-sheet .cmini-d:hover { background: var(--f-hover); }
.cal-sheet .cmini-d.has { color: var(--f-ink); }
.cal-sheet .cmini-d.has::after { bottom: 2px; }
.cal-sheet .cmini-d.is-today { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; font-weight: 700; }
@container win (max-width: 1080px) { .cal-sheet .cyear { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container win (max-width: 720px) { .cal-sheet .cyear { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cal-sheet .cmini { padding: 12px; } }

/* ---- the list: its filters as the sheet's own bar, then the groups, each heading pinned while its rows pass */
.cal-sheet .wk-filters { position: sticky; top: 0; z-index: 3; gap: 6px; margin: 0; padding: 10px 12px; background: var(--mk-sheet); box-shadow: inset 0 -1px 0 var(--f-rule); }
.cal-sheet .wk-f { height: 28px; padding: 0 10px; border-radius: 999px; font: 600 12.5px/1 var(--font-body); box-shadow: inset 0 0 0 1px var(--f-rule-2); }
.cal-sheet .wk-f:hover { background: var(--f-hover); }
.cal-sheet .wk-f .meta { font-size: 11px; letter-spacing: 0; color: var(--f-ink-3); }
.cal-sheet .wk-f[aria-pressed="false"] { color: var(--f-ink-3); text-decoration-color: var(--f-ink-off); }
.cal-sheet .wk-q { flex: 0 1 280px; margin: 0 0 0 auto; }
.cal-sheet .wk-q .in { height: 32px; }
.cal-sheet .wk-g { margin: 0; }
.cal-sheet .wk-g + .wk-g { margin-top: 8px; }
/* a group's heading stays while its rows pass, on the sheet's own paper: a heading and space, no rule */
.cal-sheet .wk-gh { position: sticky; top: 52px; z-index: 2; margin: 0; padding: 16px 20px 6px; background: var(--mk-sheet); font-size: 13.5px; box-shadow: none; }
.cal-sheet .wk-g--overdue .wk-gh { box-shadow: none; }
.cal-sheet .wk-gh .meta { font-size: 11px; color: var(--f-ink-3); }
.cal-sheet .wk-rows { padding: 0 8px 4px; }
.cal-sheet .wk-row { --f-inset: 132px; position: relative; grid-template-columns: 104px minmax(0, 1fr) 120px minmax(110px, 180px) 24px 40px; gap: 16px; padding: 9px 12px; border: 0; border-radius: 6px; transition: background-color 120ms; }
.cal-sheet .wk-row:hover { background: var(--f-hover); }
.cal-sheet .wk-rows > li + li > .wk-row::before { content: ""; position: absolute; top: 0; left: var(--f-inset); right: 12px; height: 1px; background: var(--f-rule); transition: opacity 120ms; pointer-events: none; }
.cal-sheet .wk-rows > li:hover > .wk-row::before, .cal-sheet .wk-rows > li:hover + li > .wk-row::before { opacity: 0; }
.cal-sheet .wk-t b { font-size: 14px; }
.cal-sheet .wk-t .meta, .cal-sheet .wk-when .meta { font-size: 10.5px; color: var(--f-ink-3); }
.cal-sheet .wk-st { font-size: 13px; color: var(--f-ink-2); }
.cal-sheet .wk-type { min-width: 0; padding: 4px 6px; font-size: 10px; line-height: 1; }
.cal-sheet .wk-n { font-size: 11px; color: var(--f-ink-3); }
@container win (max-width: 760px) { .cal-sheet .wk-row { grid-template-columns: auto minmax(0, 1fr) auto; } .cal-sheet .wk-gh { top: 0; position: static; } .cal-sheet .wk-filters { position: static; } }

/* ---- the board: a lane per kind, each scrolling on its own */
.cal-sheet .wk-board { grid-auto-columns: minmax(248px, 1fr); gap: 0; padding: 0; overflow-x: auto; align-items: stretch; }
.cal-sheet .wk-col { gap: 8px; padding: 0 12px 12px; border-radius: 0; background: none; box-shadow: inset -1px 0 0 var(--f-rule); min-height: 0; }
.cal-sheet .wk-col:nth-child(even) { background: color-mix(in srgb, var(--mk-paper) 60%, var(--mk-sheet)); }
.cal-sheet .wk-colh { position: sticky; top: 0; z-index: 1; margin: 0 -12px 2px; padding: 14px 12px 10px; background: inherit; font-size: 14px; box-shadow: inset 0 -1px 0 var(--f-rule-2); }
.cal-sheet .wk-col:nth-child(even) .wk-colh { background: color-mix(in srgb, var(--mk-paper) 60%, var(--mk-sheet)); }
.cal-sheet .wk-col:nth-child(odd) .wk-colh { background: var(--mk-sheet); }
.cal-sheet .wk-colh .meta { font-size: 11px; color: var(--f-ink-3); }
.cal-sheet .wk-card { gap: 6px; padding: 10px 12px; border-radius: 2px; background: var(--mk-sheet); box-shadow: 0 0 0 1px var(--f-rule-2), 0 1px 2px rgb(7 12 30 / .06); }
.cal-sheet .wk-card:hover { box-shadow: 0 0 0 1px rgb(7 12 30 / .3), 0 4px 10px -4px rgb(7 12 30 / .18); }
.cal-sheet .wk-card b { font-size: 13.5px; line-height: 1.3; }
.cal-sheet .wk-card .meta { font-size: 10.5px; line-height: 1.4; color: var(--f-ink-3); }
.cal-sheet .wk-card .wk-st { font-size: 12.5px; }
.cal-sheet .wk-none { padding: 4px 0; font-size: 13px; color: var(--f-ink-3); }

/* ---- the timeline: one scroll both ways, the months and the names pinned */
.cal-sheet .tlx { border: 0; padding-bottom: 0; }
.cal-sheet .tlx-head { height: 44px; box-shadow: inset 0 -1px 0 var(--f-rule-2); }
.cal-sheet .tlx-l { padding: 0 12px 0 14px; box-shadow: inset -1px 0 0 var(--f-rule); }
.cal-sheet .tlx-head .tlx-l { z-index: 4; }
.cal-sheet .tlx-l b { font-size: 13px; }
.cal-sheet .tlx-m { top: 7px; font-size: 13px; }
.cal-sheet .tlx-w { bottom: 6px; font: 500 10.5px/1 var(--font-mono); color: var(--f-ink-3); }
.cal-sheet .tlx-gh .tlx-l { font-size: 13px; }
.cal-sheet .tlx-gh .meta { font-size: 11px; color: var(--f-ink-3); }
.cal-sheet .tlx-lab { font-size: 12px; color: var(--f-ink-2); }
.cal-sheet .tlx-grid { background: var(--f-rule); }
.cal-sheet .tlx-row:hover .tlx-l, .cal-sheet .tlx-row:hover .tlx-track { background: var(--f-hover); }
.cal-sheet .tlx-row:hover .tlx-l { background: color-mix(in srgb, var(--mk-navy) 4.5%, var(--mk-sheet)); }

/* ---- the key's menu and the Add menu: items at body size */
.keydd-list .cal-key-t { font-size: 13.5px; }
.keydd-list .cal-key-all { font-size: 11px; color: var(--f-ink-2); }
.addmenu-list small { color: var(--f-ink-2); }

/* ---- the view, as a dropdown: the current view's name on the key, the views in a menu with their letters */
.viewdd { position: relative; }
.viewdd-b { gap: 8px; min-width: 104px; justify-content: space-between; padding: 0 12px 0 14px; }
.viewdd-b svg { width: 12px; height: 12px; transition: transform 160ms var(--ease-out); }
.viewdd-b[aria-expanded="true"] svg { transform: rotate(180deg); }
.viewdd-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 200px; padding: 6px; display: grid; gap: 1px; background: var(--mk-sheet); box-shadow: var(--mk-shadow2), inset 0 0 0 1px rgb(7 12 30 / .08); }
.viewdd-list[hidden] { display: none; }
.viewdd-list a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 8px; border-radius: 2px; font-size: 13.5px; font-weight: 600; color: var(--f-ink); text-decoration: none; }
.viewdd-list a:hover, .viewdd-list a:focus-visible { background: var(--f-hover); outline: 0; }
.viewdd-list kbd { margin-left: auto; min-width: 20px; padding: 3px 5px; box-sizing: border-box; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--f-rule-2); font: 500 11px/1 var(--font-mono); color: var(--f-ink-3); text-align: center; }
.viewdd-tick { flex: none; width: 14px; height: 14px; }
.viewdd-list a[aria-current] .viewdd-tick { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.2l3 3L11.5 4' fill='none' stroke='%23070c1e' stroke-width='1.9'/%3E%3C/svg%3E") center/14px no-repeat; }
.cal-sheet .cgrid--week .cday .dn { display: none; }
/* a phone's month: each thing on a day is a bar in its kind's colour (the day opens to read them) */
@media (max-width: 700px) {
  .cal-sheet .cday { min-height: 72px; padding: 4px 3px 10px; }
  .cal-sheet .cday .ev, .cal-sheet .cday .ev--note, .cal-sheet .cday .ev--more { min-height: 0; height: 5px; padding: 0; font-size: 0; line-height: 0; transform: none; }
  .cal-sheet .cday .ev::before, .cal-sheet .cday .ev-n, .cal-sheet .cday .ev-st { display: none; }
  .cal-sheet .cday .ev--note { background: var(--signal-700); }
  .cal-sheet .cday .ev--more { background: var(--f-rule-2); }
  .cal-sheet .cgrid .dow { padding: 0 4px; font-size: 10px; letter-spacing: .04em; }
  .cal-sheet .cday .dn { height: 22px; min-width: 22px; padding: 0 4px; font-size: 12.5px; }
}

/* ---------------------------------------------------------------- a working page: the bar, then one sheet
   Any view can be one: .f-page with .f-bar and .f-sheet inside, and view--fit on the view so it fills the window. */
.f-page { display: flex; flex-direction: column; gap: 0; }
.f-page > .f-bar { padding-bottom: 12px; }
@media (min-width: 901px) {
  .view--fit > .f-page { flex: 1; min-height: 0; }
  .view--fit > .f-page > .f-bar { flex: none; padding-bottom: 0; margin-bottom: 4px; }
  .view--fit > .f-page > .f-sheet { flex: 1; min-height: 0; }
}

/* ---------------------------------------------------------------- For you (foryou.js)
   Two columns on one sheet, each scrolling on its own: what's waiting on them, and what was said to them. */
.fy-sum { margin-left: 6px; font-size: 13px; color: var(--f-ink-2); white-space: nowrap; }
.fy-sheet { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.fy-col { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 0 20px; }
.fy-col + .fy-col { border-left: 1px solid var(--f-rule-2); }
.fy-h { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; min-height: 48px; box-sizing: border-box; margin: 0; padding: 0 20px; background: var(--mk-sheet); box-shadow: inset 0 -1px 0 var(--f-rule-2); }
.fy-h .f-label, h4.f-label, figcaption.f-label { font: 700 14px/1.25 var(--font-body); letter-spacing: -.015em; text-transform: none; color: var(--f-ink); }
.fy-n { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--mk-navy); color: var(--mk-sheet); font: 600 11px/20px var(--font-body); text-align: center; }
.fy-all { margin-left: auto; }
.fy-row { --f-inset: 100px; }
.fy-note { --f-inset: 52px; }
.fy-note:has(.fy-hand) { --f-inset: 12px; }
.fy-row .wk-type { flex: none; width: 76px; min-width: 0; padding: 4px 6px; font-size: 10px; line-height: 1; }
.fy-row > svg { flex: none; width: 16px; height: 16px; color: var(--f-ink-3); opacity: 0; transition: opacity 120ms; }
.fy-row:hover > svg { opacity: 1; }
.fy-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.fy-t b { font-size: 14px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fy-m { font-size: 12.5px; line-height: 1.35; color: var(--f-ink-3); }
.fy-b { font-size: 13px; line-height: 1.4; color: var(--f-ink-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.fy-row.is-hot .fy-m { color: var(--f-ink); font-weight: 600; }
/* a mention not yet read: the green dot of someone who wrote to them */
.fy-note { align-items: flex-start; }
.fy-note .fy-t b { white-space: normal; font-weight: 600; }
.fy-note.is-new .fy-t b { font-weight: 800; }
.fy-note.is-new .fy-t b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--mk-green); }
.fy-note .fy-hand { display: block; font-size: 15px; line-height: 1.3; margin-bottom: 4px; }
.fy-note:has(.fy-hand) { display: grid; gap: 2px; }
.fy-feed { padding-top: 6px; }
.fy-empty { display: grid; gap: 4px; padding: 20px; }
.fy-empty b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.fy-empty span { font-size: 14px; color: var(--f-ink-2); max-width: 46ch; }
@container win (max-width: 820px) {
  .fy-sheet { grid-template-columns: minmax(0, 1fr); }
  .fy-col { overflow: visible; }
  .fy-col + .fy-col { border-left: 0; box-shadow: inset 0 1px 0 var(--f-rule-2); }
  .fy-sum { display: none; }
}
@media (max-width: 900px) { .fy-col { overflow: visible; } .fy-h { position: static; } }

/* ---------------------------------------------------------------- the Newsroom, as a front page (newsroom.js)
   One sheet set like a paper: the rank decides the size. The lead (photo, big headline) beside a column of the next
   two; then a row of columns between column rules; then the rest in brief. Rules here are the paper's own: a heavy
   one under the masthead and between its sections, hairlines between columns. Each piece's headline is its link and
   covers the piece; Ansar's reason and the story key sit above it, so they stay their own. */
.np-head { margin-bottom: 0; padding-bottom: 22px; box-shadow: none; border-bottom: 3px double var(--mk-navy); }
.np { padding: 0 32px; background: var(--mk-sheet); box-shadow: var(--f-shadow); }
.np-front { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); padding: 28px 0; border-bottom: 1.5px solid var(--mk-navy); }
.np-front > .np-p--lead { padding-right: 32px; }
.np-side { display: grid; align-content: start; padding-left: 32px; box-shadow: inset 1px 0 0 var(--f-rule-2); }
.np-side .np-p + .np-p { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--f-rule-2); }
.np-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 28px; padding: 28px 0; border-bottom: 1.5px solid var(--mk-navy); }
.np-cols > .np-p { padding: 0 24px; box-shadow: inset 1px 0 0 var(--f-rule-2); }
.np-cols > .np-p:nth-child(3n + 1) { padding-left: 0; box-shadow: none; }
.np-cols > .np-p:nth-child(3n) { padding-right: 0; }
.np-briefs { padding: 22px 0 28px; }
.np-sec { margin: 0 0 14px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-mono); }
.np-brief-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.np-brief-g > .np-p { padding: 12px 0; border-top: 1px solid var(--f-rule); }
/* On social: topics that are mostly posts, in one row that scrolls sideways when there are more than fit. Each piece
   says where it's being posted and how far it went instead of naming outlets. */
.np-social { padding: 22px 0 28px; border-bottom: 1.5px solid var(--mk-navy); }
.np-social .np-sec { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.np-sec-n { font: 500 12px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: none; color: var(--f-ink-3); }
.np-social-g { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, calc((100% - 72px) / 4)); gap: 24px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 6px; }
.np-social-g > .np-p { scroll-snap-align: start; padding-top: 14px; border-top: 3px solid var(--mk-green); }
.np-p--post .np-h { font-size: 17px; }
.np-p--post .np-dek { font-size: 14px; line-height: 1.45; -webkit-line-clamp: 3; }
.np-by--post { white-space: normal; }

/* a piece */
.np-p { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--f-ink); }
.np-p.is-quiet { opacity: .7; }
.np-kick { display: flex; align-items: baseline; gap: 10px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--f-ink-3); }
.np-st { font-weight: 600; color: var(--f-ink); }
.np-st--rising::before { content: "↑ "; }
.np-h { margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: 1.12; text-wrap: balance; }
.np-h a { color: inherit; text-decoration: none; }
.np-h a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.np-p:hover .np-h a { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.np-h a:focus-visible { outline: 0; }
.np-p:has(.np-h a:focus-visible) { outline: 2px solid var(--mk-green); outline-offset: 6px; }
.np-p--lead .np-h { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.04; letter-spacing: -.045em; }
.np-p--side .np-h { font-size: 21px; }
.np-p--col .np-h { font-size: 18.5px; }
.np-p--brief .np-h { font-size: 15px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.np-dek { margin: 0; color: var(--f-ink-2); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.np-p--lead .np-dek { font-size: 17px; line-height: 1.5; -webkit-line-clamp: 5; }
.np-p--side .np-dek { font-size: 14.5px; line-height: 1.45; -webkit-line-clamp: 3; }
.np-p--col .np-dek { font-size: 14px; line-height: 1.45; -webkit-line-clamp: 3; }
.np-img { margin: 0 0 6px; overflow: hidden; background: var(--mk-paper); }
.np-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.np-img--lead { aspect-ratio: 16 / 8; margin-bottom: 10px; }
.np-img--col { aspect-ratio: 16 / 9; }
.np-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 4px; }
.np-by { min-width: 0; font-size: 12px; color: var(--f-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-story { position: relative; z-index: 2; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 7px; border: 0; border-radius: 999px; background: none;
  box-shadow: inset 0 0 0 1px var(--f-rule-2); font: 700 12.5px/1 var(--font-body); color: var(--f-ink); cursor: pointer; transition: background-color 120ms, box-shadow 120ms; }
.np-story svg { width: 14px; height: 14px; }
.np-story:hover { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.np-p--brief .np-story { height: 24px; font-size: 12px; }

/* Ansar's reason: one line, the whole of it laid over the piece when it's pointed at (nothing under it moves) */
.np-why { position: relative; z-index: 2; font-size: 13px; line-height: 18px; color: var(--f-ink-2); outline: 0; }
.np-why-l, .np-why-full { display: flex; gap: 7px; align-items: flex-start; }
.np-why-l > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-why .ico { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--mk-navy); }
.np-why-full { position: absolute; z-index: 3; left: -12px; right: -12px; top: -9px; padding: 9px 12px 11px; background: var(--mk-sheet); border-radius: 6px; box-shadow: var(--mk-shadow2), 0 0 0 1px var(--f-rule);
  color: var(--f-ink); opacity: 0; transform: translateY(-2px); pointer-events: none; transition: opacity 140ms var(--ease-out), transform 160ms var(--ease-out); }
.np-why:hover .np-why-full, .np-why:focus-visible .np-why-full, .np-why:focus .np-why-full { opacity: 1; transform: none; pointer-events: auto; }
.np-why-full b { font-weight: 800; }

/* the topic page's reason, with the same mark */
.nr-why svg { color: var(--mk-navy); width: 17px; height: 17px; }
/* a story from the news: what it answers, over every step */
.aflow-for--news { background: color-mix(in srgb, var(--mk-navy) 5%, var(--mk-sheet)); box-shadow: inset 3px 0 0 var(--mk-navy); }
.aflow-for--news .meta-line { font-size: 13.5px; line-height: 1.45; color: var(--f-ink-2); }

@container win (max-width: 1000px) {
  .np-front { grid-template-columns: minmax(0, 1fr); }
  .np-front > .np-p--lead { padding-right: 0; }
  .np-side { margin-top: 24px; padding: 20px 0 0; box-shadow: inset 0 1px 0 var(--f-rule-2); }
  .np-cols, .np-brief-g { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-cols > .np-p, .np-cols > .np-p:nth-child(3n + 1), .np-cols > .np-p:nth-child(3n) { padding: 0 20px; box-shadow: inset 1px 0 0 var(--f-rule-2); }
  .np-cols > .np-p:nth-child(2n + 1) { padding-left: 0; box-shadow: none; }
  .np-cols > .np-p:nth-child(2n) { padding-right: 0; }
}
@container win (max-width: 640px) {
  .np { padding: 0 16px; }
  .np-cols, .np-brief-g { grid-template-columns: minmax(0, 1fr); }
  .np-cols > .np-p, .np-cols > .np-p:nth-child(n) { padding: 0; box-shadow: none; }
  .np-cols > .np-p + .np-p { padding-top: 20px; border-top: 1px solid var(--f-rule-2); }
  .np-cols { row-gap: 20px; }
}
/* a column's photo: a thumbnail beside its kicker and headline, so the row's headlines line up whether or not they
   have one; the lead's photo, wide and not too tall */
.np-p--col { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 8px; align-content: start; }
.np-p--col > * { grid-column: 1 / -1; }
.np-p--col > .np-kick { grid-column: 1; grid-row: 1; }
.np-p--col > .np-h { grid-column: 1; grid-row: 2; }
.np-p--col > .np-img { grid-column: 2; grid-row: 1 / span 2; width: 88px; aspect-ratio: 1; margin: 0; border-radius: 2px; }
.np-p--col > .np-foot { margin-top: 2px; }
.np-img--lead { aspect-ratio: auto; height: clamp(220px, 24vw, 340px); }
.np-why:hover, .np-why:focus, .np-why:focus-visible { z-index: 4; }
/* a topic's picture: wide over what's happening, with its credit under it in the small type */
.t-pic { margin: 0 0 6px; }
.t-pic img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--mk-paper); }
.t-pic figcaption { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--f-ink-3); }
.t-pic figcaption a { color: var(--f-ink-2); font-weight: 600; text-decoration: underline; text-decoration-color: var(--f-rule-2); text-underline-offset: 3px; }
.t-pic figcaption a:hover { text-decoration-color: var(--mk-green); }

/* ---------------------------------------------------------------- Coverage and Monitor (covtab.js, monitor.js, scanbar.js)
   Two working views on one scan. The bar carries the scan line and Run now; the sheet has a main column (numbers, the
   chart, the list) and a side column (what needs attention, coverage earned on their own), each scrolling on its own.
   Tone has one colour each, validated for colour-blind separation (blue for positive, grey for neutral, amber for mixed,
   red for negative), and is always said in words beside its dot. */
:root { --tone-positive: #2a78d6; --tone-neutral: #9a978f; --tone-mixed: #e3a33a; --tone-negative: #d6453d; --tone-unread: rgb(7 12 30 / .14); }
.f-select { height: var(--f-ctl); padding: 0 28px 0 10px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--f-rule-2); background: var(--mk-sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23070c1e' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 11px center;
  appearance: none; font: 600 13px/1 var(--font-body); color: var(--f-ink); cursor: pointer; }
.f-select:hover { box-shadow: inset 0 0 0 1px var(--f-ink-off); }
.f-select:focus-visible { outline: 2px solid var(--mk-green); outline-offset: 1px; }
.f-seg { display: inline-flex; height: 28px; padding: 2px; margin: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--f-rule-2); }
.f-seg a { display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; font: 600 12.5px/1 var(--font-body); color: var(--f-ink-2); text-decoration: none; }
.f-seg a:hover { color: var(--f-ink); background: var(--f-hover); }
.f-seg a[aria-current] { color: var(--mk-sheet); background: var(--mk-navy); }

/* the scan line */
.scan { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.scan-t { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; color: var(--f-ink-2); white-space: nowrap; max-width: 46ch; }
.scan-t > [data-scan-l] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Ansar's mark while a scan runs, playing what it's doing (live.js proof marks); in on the first step, out when it's done */
.scan-m { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; }
.scan-m[hidden] { display: none; }
.scan.is-running .scan-m { animation: scan-mark-in 420ms cubic-bezier(.34,1.56,.64,1) backwards; }
.scan.is-running .scan-t { color: var(--f-ink); font-weight: 600; }
.scan.is-running [data-scan-l] { animation: scan-say 360ms var(--ease-out) backwards; }
@keyframes scan-mark-in { from { opacity: 0; transform: scale(.4) rotate(-20deg); } }
@keyframes scan-say { from { opacity: 0; transform: translateY(3px); } }
/* Run now, and while it runs, a bar that fills as the scan goes: stage by stage, and source by source as it searches */
.scan-b { position: relative; overflow: hidden; isolation: isolate; min-width: 104px; justify-content: center; }
.scan-b > :not(.scan-bar) { position: relative; z-index: 1; }
.scan-bar { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scan-bar i { display: block; width: 0; height: 100%; background: color-mix(in srgb, var(--mk-green) 30%, transparent); box-shadow: inset -2px 0 0 var(--mk-green); }
.scan-b[aria-busy] { opacity: 1; cursor: progress; color: var(--f-ink); }
.scan-b[aria-busy] .scan-bar i { background-image: repeating-linear-gradient(115deg, transparent 0 8px, rgb(255 255 255 / .35) 8px 14px); background-size: 28px 100%; animation: scan-stripes 900ms linear infinite; }
.scan-b[aria-busy] > svg { animation: scan-loupe 1.4s cubic-bezier(.65,0,.35,1) infinite alternate; }
@keyframes scan-stripes { to { background-position: 28px 0; } }
@keyframes scan-loupe { from { transform: translateX(-2px) rotate(-8deg); } to { transform: translateX(2px) rotate(8deg); } }
.scan.is-done .scan-bar i { background: color-mix(in srgb, var(--mk-green) 42%, transparent); animation: none; transition: width 400ms ease-out, opacity 600ms 900ms; opacity: 0; }
.scan.is-done .scan-b > svg { animation: none; }
@media (prefers-reduced-motion: reduce) { .scan-m, .scan [data-scan-l], .scan-b > svg, .scan-bar i { animation: none !important; } }

/* the sheet: main and side, each its own scroll */
.mon-sheet, .cv-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.mon-main, .mon-side, .cv-main, .cv-side { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 20px; }
.mon-side, .cv-side { border-left: 1px solid var(--f-rule-2); }
.mon-side .fy-h + *, .cv-side .fy-h + * { margin-top: 4px; }
.mon-side .hint, .cv-side .hint { padding: 0 20px; }
.mon-org { font-weight: 600; color: var(--f-ink-3); }

/* the numbers */
.mon-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); box-shadow: inset 0 -1px 0 var(--f-rule); }
.mon-stats > div { display: grid; align-content: start; gap: 4px; padding: 16px 20px; min-width: 0; }
.mon-stats > div + div { box-shadow: inset 1px 0 0 var(--f-rule); }
.mon-stats b { font-size: 28px; font-weight: 800; letter-spacing: -.04em; line-height: 1; color: var(--f-ink); font-variant-numeric: tabular-nums; }
.mon-d { font-size: 12.5px; color: var(--f-ink-3); }
.mon-d.is-up { color: var(--f-ink); }
.mon-split-bar { display: flex; gap: 2px; height: 10px; margin: 9px 0 4px; }
.mon-split-bar i { border-radius: 2px; min-width: 3px; }

/* the chart */
.mon-chart { margin: 0; padding: 16px 20px 12px; box-shadow: inset 0 -1px 0 var(--f-rule); }
.mon-plot { position: relative; margin-top: 10px; }
.mon-plot svg { display: block; width: 100%; height: auto; max-height: 180px; overflow: visible; }
.mon-plot text { font: 500 10.5px var(--font-mono); fill: var(--f-ink-3); }
.mon-base { stroke: var(--f-rule-2); stroke-width: 1; }
.mon-hit { fill: transparent; }
.mon-bar:hover .mon-hit { fill: var(--f-hover); }
.mon-seg { stroke: var(--mk-sheet); stroke-width: 1; }
.mon-seg--positive { fill: var(--tone-positive); background: var(--tone-positive); }
.mon-seg--neutral { fill: var(--tone-neutral); background: var(--tone-neutral); }
.mon-seg--mixed { fill: var(--tone-mixed); background: var(--tone-mixed); }
.mon-seg--negative { fill: var(--tone-negative); background: var(--tone-negative); }
.mon-seg--unread { fill: var(--tone-unread); background: var(--tone-unread); }
.mon-tip { position: absolute; top: -6px; width: 220px; padding: 7px 9px; border-radius: 6px; background: var(--mk-navy); color: var(--mk-sheet); font-size: 12px; line-height: 1.35; pointer-events: none; z-index: 3; }
.mon-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 8px 0 0; font-size: 12.5px; color: var(--f-ink-2); font-variant-numeric: tabular-nums; }
.tone { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; vertical-align: 0; }
.tone--positive { background: var(--tone-positive); } .tone--neutral { background: var(--tone-neutral); } .tone--mixed { background: var(--tone-mixed); } .tone--negative { background: var(--tone-negative); }
.mon-found { display: flex; gap: 10px; margin: 0; padding: 14px 20px; font-size: 13.5px; line-height: 1.45; color: var(--f-ink-2); box-shadow: inset 0 -1px 0 var(--f-rule); }
.mon-found svg { flex: none; width: 18px; height: 18px; color: var(--mk-navy); }
.mon-found b { color: var(--f-ink); }
.cv-side .mon-found { box-shadow: none; }
.mon-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 14px 20px 0; }
.mon-open { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--f-ink-2); }
.mon-src { margin-top: 16px; }

/* a mention, a clip, a story */
.mn-row, .cv-clip, .mn-own { --f-inset: 100px; align-items: flex-start; }
.mn-k { flex: none; width: 76px; padding: 4px 6px; box-sizing: border-box; border-radius: 4px; background: rgb(7 12 30 / .06); font: 600 10px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--f-ink-2); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.mn-k--online, .mn-k--print { background: rgb(7 12 30 / .06); }
.mn-k--social { background: rgb(42 120 214 / .1); color: #184f95; }
.mn-k--video, .mn-k--broadcast { background: rgb(227 163 58 / .16); color: #7a4f08; }
.mn-k--podcast { background: rgb(59 194 76 / .14); color: #1d6b28; }
.mn-t { display: grid; gap: 3px; min-width: 0; flex: 1; }
.mn-t > b { font-size: 14px; font-weight: 700; line-height: 1.32; color: var(--f-ink); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mn-m { font-size: 12.5px; line-height: 1.4; color: var(--f-ink-3); }
.mn-clip { font-weight: 700; color: var(--f-ink); }
.mn-row > svg, .cv-clip > svg, .cv-s > svg, .mn-own > svg { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--f-ink-3); opacity: 0; transition: opacity 120ms; }
.mn-row:hover > svg, .cv-clip:hover > svg, .cv-s:hover > svg, .mn-own:hover > svg { opacity: 1; }
.mn-row.is-new .mn-t > b::before, .cv-clip.is-new .mn-t > b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--mk-green); }
.mn-row.is-done { opacity: .6; }
.mn-att { display: grid; gap: 3px; text-align: left; }
.mn-att b { font-size: 13.5px; font-weight: 700; line-height: 1.32; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.mn-flag { font: 600 10.5px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--tone-negative); margin: 0; }
.cv-story { padding: 4px 0 10px; }
.cv-list > li + li { box-shadow: inset 0 1px 0 var(--f-rule); }
.cv-s { --f-inset: 12px; }
.cv-path { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 12px 6px; padding: 0; counter-reset: s; }
.cv-path li { position: relative; padding: 4px 10px 4px 22px; border-radius: 999px; font-size: 12px; color: var(--f-ink-3); box-shadow: inset 0 0 0 1px var(--f-rule); }
.cv-path li::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--f-ink-off); }
.cv-path li.is-on { color: var(--f-ink); box-shadow: inset 0 0 0 1px var(--f-rule-2); }
.cv-path li.is-on::before { background: var(--mk-green); box-shadow: none; }
.cv-watch { display: flex; align-items: center; gap: 6px; margin: 2px 12px 4px; font-size: 12.5px; color: var(--f-ink-2); }
.cv-watch svg { width: 14px; height: 14px; }
.cv-clips { padding: 0; margin: 0 0 0 12px; }
.cv-clips .cv-clip { padding-top: 7px; padding-bottom: 7px; }
.cv-more { display: inline-block; margin: 2px 0 0 112px; font-size: 12.5px; }

/* one mention, in the side panel */
.mn-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.mn-facts > span { padding: 4px 9px; border-radius: 999px; font-size: 12.5px; color: var(--f-ink-2); box-shadow: inset 0 0 0 1px var(--f-rule-2); }
.mm-list { list-style: none; margin: 6px 0 14px; padding: 0; display: grid; gap: 2px; }
.mm { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--f-rule); }
.mm-at { font: 600 12px/1.6 var(--font-mono); color: var(--f-ink); font-variant-numeric: tabular-nums; }
.mm-b { display: grid; gap: 4px; min-width: 0; }
.mm-k { font-size: 12px; color: var(--f-ink-3); }
.mm q { font-size: 14.5px; line-height: 1.45; color: var(--f-ink); quotes: "“" "”"; }
.mm-go { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; }
.mm-go svg { width: 12px; height: 12px; }
.mn-ex { margin: 6px 0 14px; padding: 10px 14px; border-left: 2px solid var(--f-rule-2); font-size: 14px; line-height: 1.5; color: var(--f-ink-2); }
.mn-act { display: grid; gap: 8px; margin: 16px 0 8px; padding: 14px 0; box-shadow: inset 0 1px 0 var(--f-rule), inset 0 -1px 0 var(--f-rule); }
.mn-who { display: flex; align-items: center; gap: 10px; }

@container win (max-width: 1100px) { .scan-t { max-width: 26ch; } }
@container win (max-width: 900px) {
  /* One column: the two parts stack at their own heights and the sheet scrolls as one. Without this the window's
     height is split into two equal rows and a long list runs under the side column. */
  .mon-sheet, .cv-sheet { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: max-content; align-content: start; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .mon-main, .mon-side, .cv-main, .cv-side { overflow: visible; }
  .mon-side, .cv-side { border-left: 0; box-shadow: inset 0 1px 0 var(--f-rule-2); }
  .mon-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mon-stats > div:nth-child(3) { box-shadow: inset 0 1px 0 var(--f-rule); }
  .mon-stats > div:nth-child(4) { box-shadow: inset 1px 0 0 var(--f-rule), inset 0 1px 0 var(--f-rule); }
}
@media (max-width: 700px) {
  .scan-t { max-width: 100%; white-space: normal; }
  .mn-row, .cv-clip, .mn-own { --f-inset: 12px; flex-wrap: wrap; }
  .mn-k { width: auto; }
  .cv-more { margin-left: 12px; }
}
/* Ansar's read of a mention: what it says, why it matters, what to do. In the panel, and one line in Needs attention. */
.mn-ansar { display: flex; gap: 12px; margin: 4px 0 12px; padding: 14px 16px; border-radius: 8px; background: rgb(7 12 30 / .035); box-shadow: inset 2px 0 0 var(--mk-green); }
.mn-ansar > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--mk-navy); }
.mn-ansar > div { display: grid; gap: 6px; min-width: 0; }
.mn-ansar p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--f-ink-2); }
.mn-ansar .mn-sum { color: var(--f-ink); font-weight: 600; }
.mn-ansar .mn-next b { color: var(--f-ink); }
.mn-why { display: flex; gap: 6px; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--f-ink-2); }
.mn-why > svg { flex: none; width: 13px; height: 13px; margin-top: 2px; color: var(--mk-navy); }
.mn-why > span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* The app is light only. tokens.css gives :root a dark colour scheme for its midnight theme, which made form controls
   the browser draws itself (a comment box) dark. */
.mk-root { color-scheme: light; }
.cm-box textarea { box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 6px; background: var(--mk-sheet); color: var(--f-ink); box-shadow: inset 0 0 0 1px var(--f-rule-2); font-size: 14px; line-height: 1.5; outline: 0; }
.cm-box textarea::placeholder { color: var(--f-ink-off); }
.cm-box textarea:focus { box-shadow: inset 0 0 0 1px var(--f-ink-3), inset 0 -2px 0 var(--mk-green); }
a.f-item { color: inherit; text-decoration: none; }
a.f-item:hover .mn-t > b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* Coverage and Monitor on a phone: the bar stacks (title and period, then the scan line, then its keys). */
@media (max-width: 700px) {
  .mon .f-bar-l, .cv .f-bar-l, .mon .f-bar-r, .cv .f-bar-r { flex-wrap: wrap; min-width: 0; }
  .mon .f-bar-r, .cv .f-bar-r { margin-left: 0; width: 100%; }
  .mon .cal-title, .cv .cal-title { min-width: 0; white-space: normal; }
  .mon-org { display: block; font-size: 15px; }
  .scan { flex-wrap: wrap; width: 100%; gap: 6px 10px; }
  .scan-t { flex: 1 1 100%; max-width: none; white-space: normal; }
}
.mn-k--ai { background: rgb(7 12 30 / .85); color: var(--mk-sheet); }
/* A mention's kind: the platform's mark (or rep.'s icon for news, podcasts, AI answers) and its name, in ink. */
.mn-k { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; width: 96px; padding: 4px 7px; text-align: left; background: transparent; box-shadow: inset 0 0 0 1px var(--f-rule); color: var(--f-ink-2); }
.mn-k > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.mn-k .pf-i, .mn-k .ico { flex: none; width: 13px; height: 13px; color: var(--f-ink); }
.mn-k--online, .mn-k--print, .mn-k--social, .mn-k--video, .mn-k--broadcast, .mn-k--podcast { background: transparent; color: var(--f-ink-2); }
.mn-k--ai { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.mn-k--ai .ico { color: var(--mk-sheet); }
.mn-row, .cv-clip, .mn-own { --f-inset: 120px; }
.cv-more { margin-left: 132px; }
.mn-eye { display: inline-flex; align-items: center; gap: 7px; }
.mn-eye .pf-i, .mn-eye .ico { width: 14px; height: 14px; color: var(--f-ink); }
@media (max-width: 700px) { .mn-row, .cv-clip, .mn-own { --f-inset: 12px; } .mn-k { width: auto; } .cv-more { margin-left: 12px; } }
/* The kind of a mention is its mark alone: a small square tile (its name is for screen readers and the tooltip). */
.mn-k { justify-content: center; gap: 0; width: 28px; height: 28px; padding: 0; margin-top: 0; border-radius: 6px; }
.mn-k .pf-i, .mn-k .ico { width: 14px; height: 14px; }
.mn-row, .cv-clip, .mn-own { --f-inset: 52px; }
.mn-row .mn-t, .cv-clip .mn-t, .mn-own .mn-t { padding-top: 1px; }
.cv-more { margin-left: 64px; }
@media (max-width: 700px) { .mn-k { width: 28px; } .mn-row, .cv-clip, .mn-own { flex-wrap: nowrap; --f-inset: 52px; } .cv-more { margin-left: 64px; } }
/* Coverage and Monitor's bar: one row where it fits. Wrapped (a narrow window), the second row starts at the left and
   the bar keeps its breathing room from the tabs above. */
.mon > .f-bar, .cv > .f-bar { flex-wrap: wrap; }
.mon .f-bar-l, .cv .f-bar-l { min-width: 0; }
.mon .cal-title, .cv .cal-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@container win (max-width: 1100px) {
  .mon > .f-bar, .cv > .f-bar { padding: 10px 0 12px; }
  .mon .f-bar-r, .cv .f-bar-r { margin-left: 0; flex-wrap: wrap; }
}
/* staff on a member's Coverage or Monitor: the way back to the member's page */
.f-back { flex: none; margin-left: -6px; }
/* the back arrow is one of the bar's keys: 32px, like the rest */
.f-bar .f-back { width: var(--f-ctl); height: var(--f-ctl); min-height: 0; padding: 0; }
.f-bar .f-back .ico { width: 16px; height: 16px; }
.mon-org a { color: inherit; text-decoration: none; }
.mon-org a:hover { color: var(--f-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* The title clips for its ellipsis, so its line has room for descenders (the g of Coverage). */
.mon .cal-title, .cv .cal-title { line-height: 1.3; padding-bottom: 1px; }

/* ---------------------------------------------------------------- a member's page, for rep.'s team (members.js)
   A compact head and a row of tabs over the tab. Calendar, Coverage and Monitor fill the window (the tab is the sheet,
   and only it scrolls); Overview and Info are sheets in two columns that scroll as a page. */
.mp { display: flex; flex-direction: column; min-width: 0; }
.mp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 0 10px; }
.mp-id { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.mp-id > .btn { flex: none; margin-left: -6px; }
.mp-id > div { min-width: 0; }
.mp-name { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.04em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-meta { margin: 2px 0 0; font-size: 13px; color: var(--f-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-acts { display: flex; align-items: center; gap: 8px; }
.mp-acts .btn--sm { height: var(--f-ctl); }
.mp-tabs { display: flex; gap: 4px; margin: 0 0 12px; box-shadow: inset 0 -1px 0 var(--f-rule-2); overflow-x: auto; scrollbar-width: none; }
.mp-tabs a { position: relative; padding: 9px 12px 11px; font: 600 14px/1 var(--font-body); color: var(--f-ink-3); text-decoration: none; white-space: nowrap; }
.mp-tabs a:hover { color: var(--f-ink); }
.mp-tabs a[aria-current] { color: var(--f-ink); }
.mp-tabs a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 0; height: 2px; border-radius: 2px; background: var(--mk-navy); }
.mp-body { min-width: 0; }
/* the tabs that fill the window: their own bar sits right under the tabs */
.mp--fit .mp-tabs { margin-bottom: 0; }
.mp--fit .mp-body > .f-page > .f-bar, .mp--fit .mp-body > .cal--full > .cal-bar { min-height: 52px; }
@media (min-width: 901px) {
  .view--fit > .mp { flex: 1; min-height: 0; }
  .view--fit > .mp > .mp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .mp-body.view--fit > .cal--full { flex: 1; min-height: 0; }
}
/* Overview and Info */
.mp-over, .mp-info { display: grid; gap: 12px; padding-bottom: 24px; }
.mp-info { grid-template-columns: minmax(0, 1fr); align-items: start; }
.mp-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.mp-col { display: grid; gap: 12px; min-width: 0; }
.mp-sheet { padding-bottom: 8px; }
.mp-sheet .fy-h { position: static; }
.mp-sheet .fy-h .mon-d { margin-left: 4px; }
.mp-sheet > .f-list { padding-top: 4px; }
.mp-pad { padding: 16px 20px; }
.mp-p { margin: 0; padding: 12px 20px 4px; font-size: 14px; line-height: 1.5; color: var(--f-ink-2); }
.mp-kv { padding: 14px 20px 6px; font-size: 14px; }
.mp-person { cursor: default; }
.mp-person:hover { background: transparent; }
.mp-person .mn-t b { white-space: normal; }
.mp-ledger { overflow-x: auto; padding: 4px 12px 4px; }
.mp-ledger .tbl { font-size: 13px; }
.mp-over .mon-stats a { color: inherit; }
@container win (max-width: 1000px) {
  .mp-grid, .mp-info { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .mp-name { font-size: 22px; white-space: normal; }
  .mp-meta { white-space: normal; }
}
/* Info: one column of sections (what they're about, their news searches, watching them), each with a header that says
   what it is, in plain type; the links at the top jump to them. */
.ix-nav { display: flex; flex-wrap: wrap; gap: 4px; position: sticky; top: 0; z-index: 3; padding: 6px 0; background: var(--f-page, var(--mk-paper)); }
.ix-nav a { padding: 5px 11px; border-radius: 999px; font: 600 12.5px/1.2 var(--font-body); color: var(--f-ink-2); text-decoration: none; box-shadow: inset 0 0 0 1px var(--f-rule-2); background: var(--mk-sheet); }
.ix-nav a:hover { color: var(--f-ink); box-shadow: inset 0 0 0 1px var(--f-ink-3); }
.ix-sheet { margin: 0; padding: 0; box-shadow: var(--f-shadow); container-type: inline-size; }
.mp-info .mctx { margin: 0; padding: 0; background: var(--mk-sheet); }
.ix-sec { scroll-margin-top: 48px; padding: 20px 22px 22px; }
.ix-sec + .ix-sec { border-top: 1px solid var(--f-rule-2); }
.ix-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 16px; }
.ix-h > div { flex: 1 1 320px; min-width: 0; }
.ix-h h3 { margin: 0; font: 800 18px/1.2 var(--font-body); letter-spacing: -.03em; color: var(--f-ink); }
.ix-h p { margin: 5px 0 0; max-width: 72ch; font-size: 13.5px; line-height: 1.5; color: var(--f-ink-2); }
.ix-h .actions { flex: none; }
.ix-empty { margin: 0; font-size: 14px; color: var(--f-ink-2); }
.ix-note { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--f-ink-3); }
.ix-d { display: block; font-size: 12.5px; line-height: 1.45; color: var(--f-ink-3); }
/* What they're about: a row per kind, its tags beside it */
.ix-groups { display: grid; margin: 0; }
.ix-groups > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--f-rule); }
.ix-groups > div:first-child { border-top: 0; padding-top: 0; }
.ix-groups dt { padding-top: 5px; font: 700 13px/1.3 var(--font-body); color: var(--f-ink); }
.ix-groups dd { margin: 0; min-width: 0; }
.ix-groups .mctx-tags { margin: 0; }
.mctx-w { font-size: 11.5px; color: var(--f-ink-3); }
@container (max-width: 560px) { .ix-groups > div { grid-template-columns: minmax(0, 1fr); } .ix-groups dt { padding-top: 0; } }
/* Their news searches */
.ix-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.ix-rows > li { display: grid; gap: 3px; padding: 11px 0; border-top: 1px solid var(--f-rule); }
.ix-rows > li:first-child { border-top: 0; padding-top: 0; }
.ix-row-t { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ix-row-t b { font-size: 14px; line-height: 1.35; }
.ix-rows .actions { gap: 2px; margin-left: -8px; }
.ix-by { flex: none; padding: 1px 7px; border-radius: 999px; font: 600 11px/1.5 var(--font-body); color: var(--f-ink-2); background: color-mix(in srgb, var(--mk-green) 16%, transparent); }
.ix-by.is-staff { background: none; box-shadow: inset 0 0 0 1px var(--f-ink-3); }
/* Watching them: cards */
.ix-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.ix-card { display: grid; gap: 12px; padding: 14px 16px 16px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--f-rule-2); min-width: 0; }
.ix-card header h4 { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 14.5px/1.25 var(--font-body); letter-spacing: -.02em; color: var(--f-ink); }
.ix-card header p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--f-ink-3); }
.ix-c { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--f-hover); font: 600 11px/20px var(--font-body); text-align: center; color: var(--f-ink-2); }
.ix-g { display: grid; gap: 4px; }
.ix-gl { font: 700 12px/1.3 var(--font-body); color: var(--f-ink-2); }
.ix-rec { margin: 0; font-size: 14px; font-weight: 600; }
.ix-notes { list-style: none; margin: 0; padding: 0; display: grid; }
.ix-n { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 8px; padding: 7px 0; border-top: 1px solid var(--f-rule); }
.ix-n:first-child { border-top: 0; padding-top: 2px; }
.ix-n-b { display: grid; gap: 2px; min-width: 0; }
.ix-n-t { display: flex; align-items: baseline; gap: 6px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.ix-n-t b { font-weight: 700; }
.ix-n-t a { font-weight: 700; color: var(--f-ink); text-decoration: underline; text-decoration-color: var(--f-rule-2); text-underline-offset: 3px; }
.ix-n-t a:hover { text-decoration-color: var(--mk-green); }
.ix-n-t .tone { flex: none; align-self: center; }
.ix-body { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--f-ink-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.ix-n .ix-by { margin-top: 2px; }
.ix-x { width: 24px; height: 24px; margin-top: -1px; opacity: 0; transition: opacity 120ms; }
.ix-x .ico { width: 12px; height: 12px; }
.ix-n:hover .ix-x, .ix-x:focus-visible { opacity: 1; }
@media (hover: none) { .ix-x { opacity: .7; } }
.ix-yield { display: block; width: 120px; height: 4px; margin: 3px 0 1px; border-radius: 2px; background: var(--f-hover); overflow: hidden; }
.ix-yield i { display: block; height: 100%; background: var(--mk-green); }
.ix-more { margin-top: 16px; border-top: 1px solid var(--f-rule-2); padding-top: 12px; }
.ix-more summary { cursor: pointer; font: 700 13.5px/1.3 var(--font-body); color: var(--f-ink-2); }
.ix-more summary:hover { color: var(--f-ink); }
.ix-more .mp-kv { padding: 12px 0 4px; }
/* Monitor: the narratives Ansar keeps (what's being said), each a filter for the mentions in it. */
.mn-nar-i { display: grid; gap: 3px; text-align: left; }
.mn-nar-i b { font-size: 13.5px; font-weight: 700; line-height: 1.32; }
.mn-nar-b { font-size: 12.5px; line-height: 1.4; color: var(--f-ink-2, var(--f-ink-3)); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.mn-nar-i.is-on { background: var(--f-hover, rgb(7 12 30 / .05)); box-shadow: inset 2px 0 0 var(--f-ink); }
.mn-nar { font-weight: 600; color: var(--f-ink-2, var(--f-ink)); }
.mon-thread { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 12px 8px; padding: 8px 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--f-rule); }
.mon-thread > span { display: grid; gap: 2px; }
.mon-thread b { font-size: 14px; }
/* A section header in a side column starts the section below it: space and a rule above, so it doesn't read as the
   end of the one before. */
.mon-side > .fy-h:not(:first-child), .cv-side > .fy-h:not(:first-child) { margin-top: 20px; box-shadow: inset 0 1px 0 var(--f-rule-2), inset 0 -1px 0 var(--f-rule-2); }
/* Coverage: Add coverage (a link Ansar reads, or a segment logged by hand), and taking back what they logged. */
.cv-add { display: grid; gap: 16px; }
.cv-add .hint { margin: 0; }
.cv-add small { margin-left: 4px; font-weight: 400; color: var(--f-ink-3); }
.cv-reading { display: flex; align-items: center; gap: 12px; padding: 18px 2px; font-size: 14.5px; font-weight: 600; color: var(--f-ink); }
.cv-reading[hidden] { display: none; }
.cv-reading .ans-st { width: 26px; height: 26px; }
.cv-cl { position: relative; }
.cv-x { position: absolute; z-index: 1; top: 8px; right: 8px; width: 26px; height: 26px; opacity: 0; transition: opacity 120ms; background: var(--mk-sheet); }
.cv-x .ico { width: 13px; height: 13px; }
.cv-cl:hover .cv-x, .cv-x:focus-visible { opacity: 1; }
@media (hover: none) { .cv-x { opacity: 1; } }

/* rep.'s Coverage desk: every member's clips for a period, each with who counted it, and actions on hover */
.dk-list { padding: 4px 8px 8px; }
.dk-clip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 4px 12px; padding: 11px 12px; border-radius: 6px; }
.dk-clip + .dk-clip { box-shadow: inset 0 1px 0 var(--f-rule); }
.dk-clip:hover { background: var(--f-hover); }
.dk-clip > .mn-k { width: 30px; padding: 5px 0; display: grid; place-items: center; }
.dk-b { display: grid; gap: 3px; min-width: 0; }
.dk-t { font-size: 14px; font-weight: 700; line-height: 1.32; color: var(--f-ink); text-decoration: none; overflow-wrap: anywhere; }
a.dk-t:hover { text-decoration: underline; text-decoration-color: var(--mk-green); text-underline-offset: 3px; }
.dk-b .mn-m a { color: var(--f-ink-2); text-decoration: underline; text-decoration-color: var(--f-rule-2); text-underline-offset: 2px; }
.dk-b .mn-m a:hover { color: var(--f-ink); text-decoration-color: var(--mk-green); }
.dk-org { font-weight: 600; }
.dk-ansar { display: inline-flex; align-items: center; gap: 4px; }
.dk-ansar .ico { width: 12px; height: 12px; }
.dk-why { display: flex; gap: 6px; align-items: baseline; font-size: 12.5px; line-height: 1.45; color: var(--f-ink-2); }
.dk-a { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; opacity: 0; transition: opacity 120ms; }
.dk-clip:hover .dk-a, .dk-a:focus-within { opacity: 1; }
@media (hover: none) { .dk-a { opacity: 1; } }
.mon-filter .hint { font-size: 12.5px; color: var(--f-ink-3); }
.dk-m.is-on { background: var(--f-hover); box-shadow: inset 2px 0 0 var(--f-ink); }
.dk-n { flex: none; font: 700 13px/1 var(--font-body); color: var(--f-ink-2); }
.dk-p { margin: 0; padding: 8px 20px 0; font-size: 13px; line-height: 1.5; color: var(--f-ink-2); }
.dk-p a { color: var(--f-ink); font-weight: 600; }
.dk-sheet { padding: 8px 12px 16px; }
.dk-lede { padding: 8px 8px 12px; max-width: 80ch; }
@container win (max-width: 760px) { .dk-clip { grid-template-columns: auto minmax(0, 1fr); } .dk-a { grid-column: 2; justify-content: flex-start; opacity: 1; margin-left: -8px; } }
/* The desk's bar: its filters sized to what they say (a long member name doesn't push the actions onto a line of their own) */
.dk > .f-bar { flex-wrap: nowrap; }
.dk .f-bar-l { flex: 1 1 auto; min-width: 0; }
.dk .f-bar-l .f-select { max-width: 220px; text-overflow: ellipsis; }
.dk .f-bar-r { flex: none; }
@container win (max-width: 620px) { .dk > .f-bar { flex-wrap: wrap; } }

/* rep.'s Newsfeed: the filters and search in the bar, the topics as rows (state, title, summary, who it touches, the
   last seven days), and members' Newsrooms and the list's changes beside them */
.nf .f-bar-l { flex: 1 1 auto; min-width: 0; flex-wrap: wrap; }
.nf .f-seg a { gap: 6px; }
.nf-n { font: 600 11px/1 var(--font-body); color: var(--f-ink-3); }
.nf .f-seg a[aria-current] .nf-n { color: rgb(252 251 248 / .7); }
.nf-find { position: relative; display: inline-flex; align-items: center; flex: 0 1 260px; min-width: 160px; }
.nf-find > .ico { position: absolute; left: 10px; width: 14px; height: 14px; color: var(--f-ink-3); pointer-events: none; }
.nf-find input { width: 100%; height: 30px; padding: 0 28px 0 30px; border-radius: 999px; font-size: 13px; }
.nf-find kbd { position: absolute; right: 9px; font: 500 11px/1 var(--font-mono); color: var(--f-ink-3); }
.nf-as .f-select { max-width: 220px; text-overflow: ellipsis; }
.nf-line { margin: 0; padding: 14px 20px 6px; font-size: 13px; line-height: 1.5; color: var(--f-ink-2); }
.nf-line a { color: var(--f-ink); font-weight: 600; }
.nf-found { padding-top: 0; font-weight: 600; color: var(--f-ink); }
.nf-list { padding: 4px 8px 12px; }
.nf-list > li + li { box-shadow: inset 0 1px 0 var(--f-rule); }
.nf-row { align-items: flex-start; gap: 18px; padding: 12px; text-decoration: none; color: inherit; }
.nf-b { display: grid; gap: 4px; min-width: 0; flex: 1; }
.nf-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.nf-t { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--f-ink); }
.nf-row:hover .nf-t { text-decoration: underline; text-decoration-color: var(--mk-green); text-underline-offset: 3px; }
.nf-st { flex: none; padding: 2px 7px; border-radius: 999px; font: 700 10.5px/1.4 var(--font-body); color: var(--f-ink-2); background: var(--f-hover); position: relative; top: -1px; }
.nf-st--rising, .nf-st--new { color: #1d6b28; background: rgb(59 194 76 / .14); }
.nf-st--pinned { color: var(--mk-sheet); background: var(--mk-navy); }
.nf-st--quiet { color: var(--f-ink-3); background: none; box-shadow: inset 0 0 0 1px var(--f-rule-2); }
.nf-sum { font-size: 13px; line-height: 1.45; color: var(--f-ink-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.nf-hit { font-size: 12.5px; color: var(--f-ink-2); font-style: italic; }
.nf-who { color: var(--f-ink-2); font-weight: 600; }
.nf-who .pdot { margin-right: 5px; }
.nf-days { flex: none; display: grid; justify-items: end; gap: 3px; width: 92px; }
.nf-days .tbars { width: 100%; height: 26px; gap: 3px; margin: 0; padding: 0; }
.nf-today { font-size: 11.5px; color: var(--f-ink-3); white-space: nowrap; }
.nf-m { text-align: left; }
.nf-log { list-style: none; margin: 0; padding: 4px 20px 12px; display: grid; gap: 10px; }
.nf-log li { display: grid; gap: 2px; font-size: 13px; line-height: 1.45; color: var(--f-ink-2); }
.nf-log a { color: var(--f-ink); text-decoration: none; }
.nf-log a:hover { text-decoration: underline; }
.nf-list mark { background: color-mix(in srgb, var(--mk-green) 30%, transparent); color: inherit; }
@container win (max-width: 760px) { .nf-days { display: none; } .nf .f-bar { flex-wrap: wrap; } }
.nf-b > .mn-m { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nf-b > .mn-m .nf-who { font-weight: 500; }

/* rep.'s Newsfeed as a front page (the members' Newsroom layout), inside one sheet with its masthead: the date, whose
   news it is (everyone's, or one member's), and how fresh it is. Under it, members' Newsrooms and the list's changes. */
.nf-sheet { padding: 0 32px 8px; container-type: inline-size; }
.nf-sheet .np { padding: 0; background: none; box-shadow: none; }
.nf-mast { display: grid; gap: 4px; padding: 24px 0 18px; border-bottom: 3px double var(--mk-navy); }
.nf-date { font: 600 12.5px/1.2 var(--font-body); color: var(--f-ink-3); }
.nf-name { margin: 0; font: 800 clamp(26px, 4cqi, 40px)/1.05 var(--font-body); letter-spacing: -.045em; color: var(--f-ink); }
.nf-mast .nf-line { padding: 4px 0 0; max-width: 80ch; }
.nf-mast .nf-found { padding-top: 2px; }
.nf-wk { flex: none; width: 70px; }
.nf-wk .tbars { width: 100%; height: 18px; gap: 2px; margin: 0; padding: 0; }
.np-foot .np-by { min-width: 0; }
.np-st--pinned { color: var(--mk-sheet); background: var(--mk-navy); }
.nf-np .nf-hit { margin: 0; font-size: 12.5px; font-style: italic; color: var(--f-ink-2); }
.nf-np mark { background: color-mix(in srgb, var(--mk-green) 30%, transparent); color: inherit; }
.nf-np .fy-empty { padding: 28px 0; }
.nf-desk { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px; margin-top: 12px; align-items: start; }
.nf-desk-s { padding-bottom: 12px; }
.nf-desk-s .fy-h { position: static; }
.nf-ms { list-style: none; margin: 0; padding: 12px 20px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.nf-mb { display: inline-flex; align-items: center; gap: 7px; padding: 5px 6px 5px 11px; border: 0; border-radius: 999px; font: 600 12.5px/1.2 var(--font-body); color: var(--f-ink); background: none; box-shadow: inset 0 0 0 1px var(--f-rule-2); cursor: pointer; }
.nf-mb span { min-width: 18px; padding: 1px 6px; border-radius: 9px; background: var(--f-hover); font-size: 11px; text-align: center; color: var(--f-ink-2); }
.nf-mb:hover { box-shadow: inset 0 0 0 1px var(--f-ink-3); }
.nf-mb.is-on { color: var(--mk-sheet); background: var(--mk-navy); box-shadow: none; }
.nf-mb.is-on span { background: rgb(252 251 248 / .18); color: var(--mk-sheet); }
@container win (max-width: 900px) { .nf-desk { grid-template-columns: minmax(0, 1fr); } }
@container (max-width: 640px) { .nf-sheet { padding: 0 18px 8px; } }
/* The Newsfeed's bar on one line where it fits: the search and the member picker give way first */
.nf > .f-bar { flex-wrap: nowrap; }
.nf > .f-bar > .f-bar-l { flex: 1 1 0; flex-wrap: nowrap; }
.nf > .f-bar > .f-bar-r { flex: none; }
.nf-find { flex: 1 1 220px; max-width: 280px; min-width: 120px; }
.nf-as .f-select { max-width: 190px; }
@container win (max-width: 1080px) { .nf > .f-bar, .nf > .f-bar > .f-bar-l { flex-wrap: wrap; } .nf > .f-bar > .f-bar-l { flex-basis: 100%; } }

/* A topic, for rep.'s team: read like an article, its sources down the side */
.nf-crumb { font: 600 13px/1 var(--font-body); color: var(--f-ink-2); }
.nt { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); padding: 26px 0 24px; }
.nt-main { display: grid; gap: 14px; align-content: start; min-width: 0; padding-right: 32px; }
.nt-h { margin: 0; font: 800 clamp(26px, 3.6cqi, 40px)/1.06 var(--font-body); letter-spacing: -.045em; color: var(--f-ink); text-wrap: balance; }
.nt-pic { margin: 4px 0 0; }
.nt-pic figcaption { margin-top: 6px; font-size: 12px; color: var(--f-ink-3); }
.nt-pic figcaption a { color: inherit; }
.nt-by { display: flex; align-items: center; gap: 7px; margin: 4px 0 0; font: 600 12.5px/1.3 var(--font-body); color: var(--f-ink-2); }
.nt-by .ico { width: 15px; height: 15px; }
.nt-sum { margin: 0; font-size: 17px; line-height: 1.6; color: var(--f-ink); max-width: 68ch; }
.nt-points { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--f-ink); max-width: 68ch; }
.nt-sec { display: grid; gap: 10px; padding-top: 18px; margin-top: 6px; border-top: 1px solid var(--f-rule-2); }
.nt-sec h3 { margin: 0; font: 800 15px/1.25 var(--font-body); letter-spacing: -.02em; color: var(--f-ink); }
.nt-axis { font-size: 11.5px; margin-top: -4px; color: var(--f-ink-3); max-width: 420px; }
.nt-touch, .nt-angles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nt-touch li { display: flex; gap: 8px; align-items: baseline; font-size: 14px; line-height: 1.5; color: var(--f-ink-2); }
.nt-touch b { color: var(--f-ink); }
.nt-angles li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--f-rule); }
.nt-angles li:first-child { border-top: 0; padding-top: 0; }
.nt-ak { align-self: start; padding: 2px 8px; border-radius: 999px; font: 700 11px/1.5 var(--font-body); text-align: center; color: var(--f-ink-2); background: var(--f-hover); }
.nt-angles b { display: block; font-size: 14px; color: var(--f-ink); }
.nt-at { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; color: var(--f-ink-2); }
.nt-log { padding: 0; }
.nt-src { min-width: 0; padding-left: 28px; border-left: 1px solid var(--f-rule-2); }
.nt-srch { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font: 800 15px/1.25 var(--font-body); letter-spacing: -.02em; color: var(--f-ink); }
.nt-srch span { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--mk-navy); color: var(--mk-sheet); font: 600 11px/20px var(--font-body); text-align: center; }
.nt-srch em { margin-left: auto; font: 500 12px/1 var(--font-body); font-style: normal; color: var(--f-ink-3); }
.nt-src .src-n { font: 600 12px/1.4 var(--font-body); color: var(--f-ink-3); }
.nt-src .src-h { font-size: 14px; color: var(--f-ink); }
.nt-src .src-leave { font-size: 11.5px; }
.nt-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--f-ink-3); }
@container (max-width: 760px) { .nt { grid-template-columns: minmax(0, 1fr); } .nt-main { padding-right: 0; } .nt-src { padding: 22px 0 0; margin-top: 22px; border-left: 0; border-top: 1.5px solid var(--mk-navy); } }

/* Saved searches: the searches down the left, the chosen one's details and articles beside them */
.ss-sheet { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); min-height: 60vh; container-type: inline-size; }
.ss-nav { padding: 16px 12px 20px; border-right: 1px solid var(--f-rule-2); min-width: 0; }
.ss-lede { margin: 0 8px 12px; font-size: 12.5px; line-height: 1.5; color: var(--f-ink-3); }
.ss-h { display: flex; align-items: center; gap: 8px; margin: 18px 8px 6px; font: 800 13.5px/1.2 var(--font-body); color: var(--f-ink); }
.ss-h span { min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--f-hover); font: 600 11px/18px var(--font-body); text-align: center; color: var(--f-ink-2); }
.ss-none { margin: 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--f-ink-3); }
.ss-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.ss-i { position: relative; display: grid; gap: 2px; width: 100%; padding: 8px 40px 8px 10px; border: 0; border-radius: 6px; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.ss-i:hover { background: var(--f-hover); }
.ss-i.is-on { background: var(--f-press, rgb(7 12 30 / .08)); box-shadow: inset 2px 0 0 var(--f-ink); }
.ss-i b { font-size: 13.5px; line-height: 1.3; color: var(--f-ink); }
.ss-i span { font-size: 12px; line-height: 1.35; color: var(--f-ink-3); }
.ss-i.is-paused b { color: var(--f-ink-3); }
.ss-n { position: absolute; right: 10px; top: 10px; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--mk-green); color: var(--mk-navy); font: 700 11px/18px var(--font-body); font-style: normal; text-align: center; }
.ss-main { min-width: 0; padding: 18px 22px 24px; }
.ss-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--f-rule-2); }
.ss-head > div { display: grid; gap: 4px; flex: 1 1 320px; min-width: 0; }
.ss-head h3 { margin: 0; font: 800 18px/1.2 var(--font-body); letter-spacing: -.03em; color: var(--f-ink); }
.ss-q { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--f-ink); }
.ss-err { margin: 0; font-size: 13px; color: var(--tone-negative, #b3261e); }
.ss-items { list-style: none; margin: 0; padding: 0; display: grid; }
.ss-a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--f-rule); }
.ss-a-b { display: grid; gap: 4px; min-width: 0; }
.ss-a .hl { font-size: 15px; font-weight: 700; line-height: 1.32; color: var(--f-ink); text-decoration: none; }
.ss-a .hl:hover { text-decoration: underline; text-decoration-color: var(--mk-green); text-underline-offset: 3px; }
.ss-a.is-read .hl { color: var(--f-ink-2); font-weight: 600; }
.ss-a .snip { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--f-ink-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.ss-a .note { display: flex; gap: 6px; align-items: baseline; margin: 0; font-size: 13px; line-height: 1.45; color: var(--f-ink); }
.ss-a .acts { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0 -8px; opacity: .55; transition: opacity 120ms; }
.ss-a:hover .acts, .ss-a .acts:focus-within { opacity: 1; }
.ss-a img { width: 120px; height: 80px; object-fit: cover; border-radius: 4px; background: var(--f-hover); }
.ss-more { margin-top: 14px; }
@container (max-width: 700px) { .ss-sheet { grid-template-columns: minmax(0, 1fr); } .ss-nav { border-right: 0; border-bottom: 1px solid var(--f-rule-2); } .ss-a img { width: 84px; height: 60px; } }
.ss-i b { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* The Newsfeed's search: a pill like the dropdowns beside it, the "/" shortcut drawn as a key, a green ring when typing */
.nf-find { flex: 1 1 240px; max-width: 320px; min-width: 140px; }
.nf-find input.in { width: 100%; height: var(--f-ctl); margin: 0; padding: 0 34px 0 32px; border: 0; border-radius: 999px; background: var(--mk-sheet); box-shadow: inset 0 0 0 1px var(--f-rule-2);
  font: 500 13px/1 var(--font-body); color: var(--f-ink); transition: box-shadow 120ms; -webkit-appearance: none; appearance: none; }
.nf-find input.in::placeholder { color: var(--f-ink-3); opacity: 1; }
.nf-find input.in:hover { box-shadow: inset 0 0 0 1px var(--f-ink-off, var(--f-ink-3)); }
.nf-find input.in:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--f-ink), 0 0 0 3px color-mix(in srgb, var(--mk-green) 35%, transparent); }
.nf-find input.in::-webkit-search-cancel-button { -webkit-appearance: none; }
.nf-find > .ico { left: 12px; width: 14px; height: 14px; color: var(--f-ink-2); }
.nf-find kbd { right: 9px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 4px; background: var(--f-hover); box-shadow: inset 0 -1px 0 var(--f-rule-2);
  font: 600 11px/1 var(--font-body); color: var(--f-ink-2); transition: opacity 120ms; }
.nf-find:focus-within kbd, .nf-find:has(input:not(:placeholder-shown)) kbd { opacity: 0; }
/* The Coverage desk's six months (pitches outlined, coverage solid) and what replies said */
.dk-six { margin: 0; padding: 14px 20px 6px; border-bottom: 1px solid var(--f-rule); }
.dk-six figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dk-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--f-ink-3); }
.dk-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--mk-navy); }
.dk-key i.is-out { background: none; box-shadow: inset 0 0 0 1.5px var(--mk-navy); }
.dk-key i + * { margin-right: 8px; }
.dk-six-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.dk-mo { display: grid; justify-items: center; gap: 4px; }
.dk-mo-n { font: 600 11.5px/1 var(--font-body); color: var(--f-ink-2); }
.dk-mo-b { display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: 100%; height: 72px; border-bottom: 1px solid var(--f-rule-2); }
.dk-mo-b i { width: 14px; min-height: 1px; border-radius: 2px 2px 0 0; background: var(--mk-navy); }
.dk-mo-b i.is-out { background: none; box-shadow: inset 0 0 0 1.5px var(--mk-navy); }
.dk-mo-l { font-size: 11.5px; color: var(--f-ink-3); }
.dk-said { list-style: none; margin: 0; padding: 8px 20px 4px; display: grid; gap: 7px; }
.dk-said li { display: grid; grid-template-columns: 104px minmax(0, 1fr) 24px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--f-ink-2); }
.dk-said i { height: 6px; border-radius: 3px; background: var(--mk-navy); }
.dk-said b { font-weight: 700; color: var(--f-ink); text-align: right; }
.dk-six figcaption .f-label { font: 700 13.5px/1.25 var(--font-body); letter-spacing: -.01em; text-transform: none; color: var(--f-ink); }

/* A member's monthly report: the month in the bar, a masthead, Ansar's paragraph as the lead, the numbers, then the
   coverage beside what was said and what they sent */
.mr-nav { display: inline-flex; align-items: center; gap: 2px; }
.mr-m { min-width: 128px; text-align: center; font: 700 14px/1 var(--font-body); color: var(--f-ink); }
.mr-nav .is-off { opacity: .3; pointer-events: none; }
.mr-sheet { padding: 0 32px 24px; container-type: inline-size; }
.mr-mast { display: grid; gap: 4px; padding: 24px 0 16px; border-bottom: 3px double var(--mk-navy); }
.mr-org { margin: 2px 0 0; font: 600 14px/1.3 var(--font-body); color: var(--f-ink-2); }
.mr-sum { display: grid; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--f-rule-2); }
.mr-sum-h { display: inline-flex; align-items: center; gap: 7px; font: 700 13px/1.2 var(--font-body); color: var(--f-ink-2); }
.mr-sum-h .ico { width: 15px; height: 15px; }
.mr-sum-p { margin: 0; max-width: 72ch; font-size: 17px; line-height: 1.6; color: var(--f-ink); }
.mr-sum-p.soft { font-size: 14px; color: var(--f-ink-3); }
.mr-stats { margin: 0 -32px; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--f-rule-2); }
.mr-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0; padding-top: 4px; }
.mr-cols > .mr-sec { padding-right: 28px; }
.mr-side { display: grid; align-content: start; padding-left: 28px; border-left: 1px solid var(--f-rule-2); }
.mr-sec { padding-top: 18px; min-width: 0; }
.mr-side .mr-sec + .mr-sec { margin-top: 10px; border-top: 1px solid var(--f-rule-2); }
.mr-h { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 800 15px/1.25 var(--font-body); letter-spacing: -.02em; color: var(--f-ink); }
.mr-h span { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--f-hover); font: 600 11px/20px var(--font-body); text-align: center; color: var(--f-ink-2); }
.mr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.mr-list > li { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--f-rule); }
.mr-list > li:first-child { border-top: 0; padding-top: 2px; }
.mr-nt { display: flex; align-items: baseline; gap: 6px; font-size: 14px; line-height: 1.35; color: var(--f-ink); }
.mr-nt .tone { flex: none; align-self: center; }
.mr-nb { font-size: 13px; line-height: 1.45; color: var(--f-ink-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.mr-none { margin: 0; font-size: 14px; color: var(--f-ink-2); }
.mr-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--f-ink-3); }
@container (max-width: 820px) { .mr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mr-cols { grid-template-columns: minmax(0, 1fr); } .mr-cols > .mr-sec { padding-right: 0; } .mr-side { padding-left: 0; border-left: 0; margin-top: 12px; border-top: 1.5px solid var(--mk-navy); } }
@container (max-width: 560px) { .mr-sheet { padding: 0 18px 20px; } .mr-stats { margin: 0 -18px; } }

/* The monthly report as a PDF (Export PDF prints a copy of it, alone at the top of the page): nothing else on the
   page, colours kept, and a section never split across pages. */
#print-root { display: none; }
@media print {
  @page { size: letter; margin: 14mm 14mm 16mm; }
  body.is-printing-report { background: #fff !important; }
  body.is-printing-report > *:not(#print-root) { display: none !important; }
  body.is-printing-report > #print-root { display: block; }
  #print-root .mr-sheet { padding: 0; box-shadow: none; background: #fff; container-type: normal; }
  #print-root .mr-stats { margin: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  #print-root .mr-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  #print-root, #print-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  #print-root .mr-sec, #print-root .mr-list > li, #print-root .mon-stats > div, #print-root .mr-sum { break-inside: avoid; }
  #print-root a { color: inherit; text-decoration: none; }
}
.mr-foot { margin: 22px 0 0; padding-top: 10px; border-top: 1px solid var(--f-rule-2); font-size: 11px; color: var(--f-ink-3); }
.mr-brand { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--f-rule-2); }
.mr-brand img { display: block; width: 96px; height: auto; }
.mr-brand span { font: 600 12px/1.3 var(--font-body); color: var(--f-ink-2); text-align: right; }
/* The monthly report filling the window: its sheet scrolls, not the page */
@media (min-width: 901px) { .view--fit > .mr > .mr-sheet { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } }
/* The report's month arrows: the bar's keys are all 32px, like the calendar's */
.mr-nav .btn--icon { width: var(--f-ctl); height: var(--f-ctl); min-height: 0; padding: 0; }
.mr-nav .btn--icon .ico { width: 16px; height: 16px; }

/* The wire, for rep.'s team: releases as rows (cover, state, headline, member, summary, topics, reach), what to do
   with each on the right */
.wr-who { max-width: 220px; text-overflow: ellipsis; }
.wr-list { list-style: none; margin: 0; padding: 4px 8px 12px; display: grid; }
.wr { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px; border-radius: 6px; }
.wr + .wr { box-shadow: inset 0 1px 0 var(--f-rule); }
.wr:hover { background: var(--f-hover); }
.wr-cover { width: 96px; height: 64px; object-fit: cover; border-radius: 4px; background: var(--f-hover); }
.wr-cover--none { display: grid; place-items: center; color: var(--f-ink-3); box-shadow: inset 0 0 0 1px var(--f-rule); background: none; }
.wr-cover--none .ico { width: 18px; height: 18px; }
.wr-b { display: grid; gap: 4px; min-width: 0; }
.wr-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.wr-t { font-size: 14.5px; font-weight: 700; line-height: 1.32; color: var(--f-ink); }
.wr-st { flex: none; padding: 2px 7px; border-radius: 999px; font: 700 10.5px/1.4 var(--font-body); position: relative; top: -1px; color: var(--f-ink-2); background: var(--f-hover); }
.wr-st--published { color: #1d6b28; background: rgb(59 194 76 / .14); }
.wr-st--pending { color: #7a4f08; background: rgb(227 163 58 / .18); }
.wr-st--returned { color: #9a2a22; background: rgb(214 69 61 / .12); }
.wr-st--withdrawn { color: var(--f-ink-3); background: none; box-shadow: inset 0 0 0 1px var(--f-rule-2); }
.wr-b .mn-m a { color: var(--f-ink-2); text-decoration: underline; text-decoration-color: var(--f-rule-2); text-underline-offset: 2px; }
.wr-b .mn-m a:hover { color: var(--f-ink); text-decoration-color: var(--mk-green); }
.wr-sum { margin: 0; font-size: 13px; line-height: 1.45; color: var(--f-ink-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.wr-note { margin: 2px 0 0; padding: 6px 10px; border-radius: 4px; font-size: 13px; line-height: 1.45; color: var(--f-ink); background: rgb(214 69 61 / .07); }
.wr-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.wr-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.wr-tags span { padding: 1px 7px; border-radius: 999px; font-size: 11.5px; line-height: 1.6; color: var(--f-ink-2); box-shadow: inset 0 0 0 1px var(--f-rule-2); }
.wr-a { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; }
.wr-m { text-align: left; }
.wr-m.is-on { background: var(--f-hover); box-shadow: inset 2px 0 0 var(--f-ink); }
@container win (max-width: 820px) { .wr { grid-template-columns: 64px minmax(0, 1fr); } .wr-cover { width: 64px; height: 44px; } .wr-a { grid-column: 2; justify-content: flex-start; margin-left: -8px; } }
/* A wire release's own page (release.js): a pitch-like document, with its details and media under the text */
.wr-st--draft { color: var(--f-ink-2); background: none; box-shadow: inset 0 0 0 1px var(--f-rule-2); }
.rl-state { display: inline-flex; align-items: center; gap: 10px; }
.rl-hint { margin: -6px 0 0; }
.rl-sum { display: block; width: 100%; border: 0; background: none; padding: 0; resize: none; overflow: hidden; field-sizing: content; font: inherit; font-size: 17px; line-height: 1.45; color: var(--f-ink-2); outline: 0; }
.rl-sum:focus { box-shadow: inset 0 -2px 0 var(--mk-green); }
.rl-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px 20px; padding-top: 14px; border-top: 1px solid var(--f-rule); }
.rl-more .rl-wide { grid-column: 1 / -1; }
.rl-media { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--f-rule); }
.rl .pitch-acts [data-publish], .rl .pitch-acts [data-down] { margin-left: auto; }
/* A field Ansar just changed flashes once, so the change is seen where it landed */
.rl .is-new { animation: rl-landed 1.4s ease-out; }
@keyframes rl-landed { from { background: rgb(59 194 76 / .18); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .rl .is-new { animation: none; } }
/* A release's topics: library entities as chips, and a picker that finds them by name */
.rl-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 4px 0; border-bottom: 1px solid var(--f-rule-2); }
.rl-topics:focus-within { border-bottom-color: var(--mk-green); }
.rl-chips { display: contents; }
.rl-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 999px; font-size: 13px; line-height: 1.5; color: var(--f-ink); box-shadow: inset 0 0 0 1px var(--f-rule-2); background: var(--f-paper, #fff); }
.rl-chip button { display: grid; place-items: center; width: 20px; height: 20px; border: 0; border-radius: 50%; background: none; color: var(--f-ink-3); cursor: pointer; }
.rl-chip button:hover { color: var(--f-ink); background: var(--f-hover); }
.rl-chip .ico { width: 12px; height: 12px; }
.rl-tin { flex: 1 1 160px; min-width: 120px; border: 0; background: none; padding: 4px 2px; font: inherit; font-size: 14px; color: var(--f-ink); outline: 0; }
.rl-more .f { position: relative; }
.rl-pick { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 4px; max-height: 280px; overflow-y: auto; padding: 4px; border-radius: 8px; background: var(--f-paper, #fff); box-shadow: 0 0 0 1px var(--f-rule), 0 10px 28px rgb(7 12 30 / .14); }
.rl-opt { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 10px; border: 0; border-radius: 5px; background: none; text-align: left; font: inherit; font-size: 14px; color: var(--f-ink); cursor: pointer; }
.rl-opt small { font-size: 12px; color: var(--f-ink-3); }
.rl-opt.on, .rl-opt:hover { background: var(--f-hover); }
.rl-none { margin: 0; padding: 8px 10px; font-size: 13px; color: var(--f-ink-2); }

/* ---------------------------------------------------------------- the document pages (story, pitch, wire release)
   One frame for all three, like a word processor: the bar (where it is, its state, what to do with it), the toolbar,
   the document as a page on a grey canvas, and the details column beside it. docpage.js builds it. */
.dp-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); overflow: hidden; }
.dp-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dp-tb { flex: none; position: relative; z-index: 3; border-bottom: 1px solid var(--f-rule-2); background: var(--mk-sheet); }
.dp-canvas { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; background: rgb(7 12 30 / .04); padding: 28px 24px 64px; }
.dp-paper { box-sizing: border-box; max-width: 800px; min-height: calc(100% - 8px); margin: 0 auto; padding: 52px 72px 80px; background: #fff; box-shadow: 0 0 0 1px rgb(7 12 30 / .06), 0 1px 3px rgb(7 12 30 / .08), 0 18px 40px -28px rgb(7 12 30 / .35); }
.dp-kick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 14px; font-size: 13px; color: var(--f-ink-3); }
.dp-kick a { color: inherit; text-decoration: underline; text-decoration-color: var(--f-rule-2); text-underline-offset: 3px; }
.dp-kick a:hover { color: var(--f-ink); text-decoration-color: var(--mk-green); }
.dp-title { display: block; width: 100%; box-sizing: border-box; border: 0; background: none; padding: 0; resize: none; overflow: hidden; field-sizing: content; font: inherit; font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; color: var(--f-ink); outline: 0; }
.dp-title::placeholder, .dp-dek::placeholder { color: var(--f-ink-off); }
.dp-dek { display: block; width: 100%; box-sizing: border-box; margin-top: 10px; border: 0; background: none; padding: 0; resize: none; overflow: hidden; field-sizing: content; font: inherit; font-size: 18px; line-height: 1.5; color: var(--f-ink-2); outline: 0; }
.dp-title:focus, .dp-dek:focus { box-shadow: 0 2px 0 -0px var(--mk-green); }
.dp-count { display: block; margin-top: 4px; font-size: 11.5px; color: var(--f-ink-3); text-align: right; }
.dp-count.is-over { color: var(--mk-flare); font-weight: 700; }
.dp-rule { height: 1px; margin: 26px 0 22px; background: var(--f-rule); }
.dp-paper .doc-body { min-height: 360px; padding: 0; font-size: 16.5px; line-height: 1.7; color: var(--f-ink); }
.dp-paper .doc-body > * + * { margin-top: 12px; }
.dp-paper .doc-body p, .dp-paper .doc-body h2, .dp-paper .doc-body h3 { padding-left: 0; }
.dp-paper .doc-body h2 { margin-top: 28px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; text-transform: none; color: var(--f-ink); padding-top: 0; }
.dp-paper .doc-body h3 { margin-top: 22px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; text-transform: none; color: var(--f-ink); padding-top: 0; }
.dp-paper .doc-body > h2:first-child, .dp-paper .doc-body > h3:first-child { margin-top: 0; }
.dp-paper .doc-body ul, .dp-paper .doc-body ol { padding-left: 26px; }
.dp-paper .doc-body li + li { margin-top: 4px; }
.dp-paper .doc-body li::marker { color: var(--f-ink-3); }
.dp-paper .doc-body blockquote { margin: 14px 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--f-rule-2); color: var(--f-ink-2); }
.dp-paper .doc-body a { color: #1f5fb8; text-decoration: underline; text-underline-offset: 2px; }
.dp-paper .doc-body strong { font-weight: 750; }
.dp-paper .doc-body .dfig { margin: 18px 0; }
.dp-side { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border-left: 1px solid var(--f-rule-2); padding-bottom: 24px; }
.dp-sec { padding: 0 0 16px; border-bottom: 1px solid var(--f-rule); }
.dp-sec > .fy-h { position: static; box-shadow: none; min-height: 44px; }
.dp-sec > .fy-h .btn { margin-left: auto; }
.dp-b { display: grid; gap: 10px; padding: 0 20px; font-size: 13.5px; line-height: 1.5; color: var(--f-ink-2); }
.dp-b > p { margin: 0; }
.dp-b .f > span { font-size: 12.5px; font-weight: 600; color: var(--f-ink-2); }
.dp-b .f input, .dp-b .f select, .dp-b .f textarea { font-size: 14px; }
.dp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.dp-list > li { display: grid; gap: 2px; padding: 8px 10px; margin: 0 -10px; border-radius: 6px; }
.dp-list > li:hover { background: var(--f-hover); }
.dp-list b, .dp-list a b { color: var(--f-ink); font-weight: 650; }
.dp-list .mn-m { font-size: 12.5px; color: var(--f-ink-3); }
.dp-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-state { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.dp-saved { font-size: 12.5px; color: var(--f-ink-3); white-space: nowrap; }
.dp-saved.is-off { color: var(--mk-flare); font-weight: 700; }
.dp-crumb { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13.5px; color: var(--f-ink-3); }
.dp-crumb a { color: var(--f-ink-2); }
.dp-crumb a:hover { color: var(--f-ink); }
.dp-crumb b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 32ch; color: var(--f-ink); font-weight: 650; }
@media (max-width: 1100px) {
  .dp-sheet { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .dp-main { min-height: 70vh; }
  .dp-side { border-left: 0; border-top: 1px solid var(--f-rule-2); overflow: visible; }
}
@media (max-width: 720px) { .dp-canvas { padding: 0; } .dp-paper { padding: 28px 20px 48px; box-shadow: none; } }

/* The toolbar */
.tb { display: flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; }
.tb-k { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--f-ink-2); font: 600 15px/1 var(--font-body); cursor: pointer; transition: background-color 100ms; }
.tb-k b { font-weight: 800; } .tb-k i { font-family: Georgia, serif; font-size: 16px; } .tb-k u, .tb-k s { font-weight: 600; }
.tb-at { font-weight: 700; font-size: 15px; }
.tb-k:hover:not(:disabled) { background: var(--f-hover); color: var(--f-ink); }
.tb-k[aria-pressed="true"] { background: rgb(31 95 184 / .12); color: #1f5fb8; }
.tb-k:disabled { color: var(--f-ink-off); cursor: default; }
.tb-k:focus-visible, .tb-style select:focus-visible { outline: 2px solid var(--f-ink); outline-offset: 1px; }
.tb-sep { flex: none; width: 1px; height: 20px; margin: 0 6px; background: var(--f-rule-2); }
.tb-style select { height: 32px; padding: 0 28px 0 10px; border: 0; border-radius: 6px; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23070c1e' stroke-opacity='.6' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center; appearance: none; font: 500 13.5px/1 var(--font-body); color: var(--f-ink); cursor: pointer; min-width: 128px; }
.tb-style select:hover { background-color: var(--f-hover); }
.tb-link { position: fixed; z-index: 60; display: flex; gap: 6px; align-items: center; width: 330px; box-sizing: border-box; padding: 8px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--f-rule-2), 0 12px 32px rgb(7 12 30 / .18); }
.tb-link input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--f-rule-2); border-radius: 6px; font: inherit; font-size: 14px; outline: 0; }
.tb-link input:focus { border-color: var(--f-ink); }
.dp-b .f { position: relative; }
.dp-side .rl-media { padding-top: 0; border-top: 0; }
.dp-side .wslot { max-width: none; }
.dp-side .drop { padding: 12px 14px; }
/* The page's margins shrink with the room it has, and the toolbar wraps rather than hiding keys */
.dp-canvas { container-type: inline-size; }
.dp-paper { padding: 48px clamp(24px, 8cqw, 72px) 80px; }
@container (max-width: 560px) { .dp-paper { padding-top: 32px; } }
.dp-tb .tb { flex-wrap: wrap; overflow: visible; padding: 4px 10px; row-gap: 2px; }
/* The pitch page: an email being written */
.pt-head { display: grid; gap: 0; margin-bottom: 18px; border-top: 1px solid var(--f-rule); }
.pt-to, .pt-subj { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 46px; padding: 6px 0; border-bottom: 1px solid var(--f-rule); }
.pt-subj { flex-wrap: nowrap; align-items: baseline; }
.pt-l { flex: none; width: 64px; font-size: 13px; font-weight: 600; color: var(--f-ink-3); }
.pt-subject { flex: 1; min-width: 0; font-size: 20px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.pt-subj .dp-count { flex: none; margin: 0 0 0 8px; }
.pt-tabs { margin: 0 0 6px; border-bottom: 1px solid var(--f-rule); }
.pt-vsubj { margin: 8px 0; }
.pt-hint { margin: 6px 0 18px; font-size: 13px; }
.pt-story { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; padding: 10px 12px; border-radius: 6px; background: var(--f-hover); font-size: 13px; line-height: 1.55; color: var(--f-ink-2); scrollbar-width: thin; }
.pt-story p { margin: 0; }
.pt-sh { margin-top: 6px; font-size: 12.5px; color: var(--f-ink); }
/* The story page's column, and its pieces' editor */
.dp-open { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--f-ink); }
.dp-open:hover b { text-decoration: underline; text-decoration-color: var(--mk-green); text-underline-offset: 3px; }
.dp-b .ck { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--f-ink); }
.dp-fold summary { cursor: pointer; font-weight: 600; color: var(--f-ink); }
.dp-fold .intake { display: grid; gap: 10px; margin-top: 10px; }
.dp-member-g { display: grid; gap: 12px; }
.dp-member-g > div > p { margin: 2px 0 0; }
.dp-member .meta { display: block; }
.dp-side .person-row .row-top { display: grid; gap: 6px; }
.dp-side .person-row .actions { display: flex; flex-wrap: wrap; gap: 4px; }
.dp-side .person-row select { flex: 1; min-width: 0; }
.dp-side .rows { margin: 0; }
.dp-side .refs { display: flex; flex-wrap: wrap; gap: 6px; }
.dp-side .mgrid, .dp-side .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dp-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.dp-pick-i { display: grid; gap: 6px; padding: 6px; border: 0; border-radius: 8px; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 12.5px; color: var(--f-ink-2); }
.dp-pick-i:hover { background: var(--f-hover); }
.dp-pick-i img, .dp-pick-i video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 5px; background: var(--f-hover); }
.dp-piece { display: flex; flex-direction: column; height: min(72vh, 820px); margin: -4px -4px 0; border: 1px solid var(--f-rule-2); border-radius: 6px; overflow: hidden; }
.dp-piece .dp-canvas { padding: 20px 16px 40px; }
.dp-paper--piece { padding: 36px clamp(20px, 7cqw, 56px) 56px; }
.dp-member .eyebrow { display: block; font: 600 12.5px/1.3 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--f-ink-3); }
.dp-member p { font-size: 13.5px; color: var(--f-ink); }
.dp-side .empty { padding: 0; margin: 0; box-shadow: none; background: none; text-align: left; font-size: 13px; color: var(--f-ink-3); }
.dp-side .empty b { display: inline; font-size: 13px; font-weight: 600; color: var(--f-ink-2); }
.dp-side .empty b::after { content: none; }
/* The details column, folded away: the page takes the whole width */
.dp.is-folded .dp-sheet { grid-template-columns: minmax(0, 1fr); }
.dp.is-folded .dp-side { display: none; }
.dp-fold-k { width: var(--f-ctl); padding: 0; justify-content: center; }
.dp-fold-k .ico { width: 18px; height: 18px; transform: scaleX(-1); }
.dp-fold-k[aria-expanded="true"] { background: var(--f-hover); }
/* A YouTube video in a document */
.dfig--yt .dfig-yt { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 4px; overflow: hidden; }
.dfig--yt .dfig-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.dp-paper .dfig img, .dp-paper .dfig video { display: block; width: 100%; height: auto; border-radius: 4px; }

/* ---------------------------------------------------------------- label and value rows (any page's facts) */
.f-kv { display: grid; grid-template-columns: minmax(116px, max-content) minmax(0, 1fr); gap: 0; margin: 0; padding: 0 20px; }
.f-kv dt { padding-right: 20px !important; }
.f-kv dt, .f-kv dd { margin: 0; padding: 8px 0; box-shadow: inset 0 -1px 0 var(--f-rule); }
.f-kv dt:last-of-type, .f-kv dd:last-of-type { box-shadow: none; }
.f-kv dt { font: 500 11px/18px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--f-ink-3); }
.f-kv dd { font-size: 13.5px; line-height: 18px; color: var(--f-ink); overflow-wrap: anywhere; }
.f-kv dd a { color: inherit; text-decoration: underline; text-decoration-color: var(--f-rule-2); text-underline-offset: 3px; }
.f-kv dd a:hover { text-decoration-color: var(--mk-green); }

/* ---------------------------------------------------------------- Spokespeople (member.js people)
   The list on the left, the one chosen on the right. */
.ppl-sheet { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
.ppl-sheet--none { display: block; }
.ppl-col, .ppl-one { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.ppl-col { display: flex; flex-direction: column; border-right: 1px solid var(--f-rule-2); padding-bottom: 12px; }
.ppl-list { padding-top: 6px; }
.ppl-row { --f-inset: 56px; color: var(--f-ink); text-decoration: none; }
.ppl-row .avatar { border-radius: 50%; }
.ppl-row.is-on { background: var(--f-press); }
.ppl-row.is-on::before, .ppl-list > li:has(.is-on) + li > .f-item::before { opacity: 0; }
.ppl-row .fy-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppl-team { flex: none; padding: 3px 7px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--f-rule-2); font: 500 10.5px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--f-ink-3); }
.ppl-you { font-weight: 500; color: var(--f-ink-3); }
.ppl-mate { cursor: default; }
.ppl-mate:hover, .ppl-mate:active { background: none; }
.ppl-mate .avatar { opacity: .55; }
.ppl-mate .btn { flex: none; }
.ppl-gh { position: static; margin-top: 10px; box-shadow: inset 0 1px 0 var(--f-rule), inset 0 -1px 0 var(--f-rule-2); }
.ppl-gs { font-size: 12.5px; color: var(--f-ink-3); }
.ppl-none { margin: 0; padding: 14px 20px; font-size: 13.5px; color: var(--f-ink-3); }
.ppl-acts { display: flex; gap: 4px; }
.ppl-foot { margin: auto 0 0; padding: 16px 20px 4px; font-size: 12.5px; color: var(--f-ink-3); }
.ppl-one { padding: 0 0 32px; }
.ppl-one > * { max-width: 760px; }
.ppl-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 16px; padding: 24px 28px 20px; box-shadow: inset 0 -1px 0 var(--f-rule); }
.ppl-h .avatar--lg { width: 56px; height: 56px; border-radius: 50%; font-size: 22px; }
.ppl-ht { display: grid; gap: 4px; min-width: 0; }
.ppl-name { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; color: var(--f-ink); }
.ppl-name span { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--f-ink-3); }
.ppl-sub { margin: 0; font-size: 14px; color: var(--f-ink-2); }
.ppl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ppl-note { margin: 16px 28px 0; padding: 10px 14px; border-radius: 6px; background: rgb(227 163 58 / .12); font-size: 13px; line-height: 1.45; color: var(--f-ink-2); }
.ppl-sec { padding: 18px 28px 0; }
.ppl-sec > .f-label { margin: 0 0 8px; }
.ppl-sec > p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--f-ink); white-space: pre-line; max-width: 64ch; }
.ppl-sec > .f-kv { padding: 0; }
.ppl-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ppl-tags .pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--f-rule-2); background: none; font: 500 12.5px/1 var(--font-body); color: var(--f-ink); }
.ppl-empty { max-width: 560px; padding: 32px 28px; gap: 10px; }
.ppl-empty > div { margin-top: 6px; }
@media (max-width: 900px) {
  .ppl-sheet { grid-template-columns: minmax(0, 1fr); }
  .ppl-col { border-right: 0; border-bottom: 1px solid var(--f-rule-2); }
  .ppl-col, .ppl-one { overflow: visible; }
  .ppl-h { padding: 20px; } .ppl-sec { padding: 16px 20px 0; } .ppl-note { margin: 14px 20px 0; }
}
@media (max-width: 520px) { .ppl-h { grid-template-columns: auto minmax(0, 1fr); } .ppl-h > .ppl-acts { grid-column: 1 / -1; justify-self: start; } }

/* ---------------------------------------------------------------- Billing (billing.js)
   The numbers across the top, the plan and its invoices under them; extras and how paying works beside. */
.bl-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.bl-main, .bl-side { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 24px; }
.bl-side { border-left: 1px solid var(--f-rule-2); }
.bl-alert { margin: 0; padding: 12px 20px; background: rgb(214 69 48 / .08); box-shadow: inset 0 -1px 0 rgb(214 69 48 / .2); font-size: 13.5px; line-height: 1.45; color: var(--f-ink); }
.bl-alert b { color: var(--mk-flare); }
.bl .mon-stats b.bl-date { font-size: 22px; letter-spacing: -.03em; line-height: 28px; }
.bl-of { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--f-ink-3); }
.bl-h { position: static; margin-top: 8px; box-shadow: none; }
.bl-kv { margin: 0 0 4px; }
.bl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 20px 0; }
.bl-acts .f-select { max-width: 240px; }
.bl-quiet { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--f-ink-3); }
.bl-pad { padding: 8px 20px 4px; }
.bl-panel { margin: 16px 20px 4px; padding: 14px 16px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--f-rule-2); font-size: 14px; line-height: 1.5; color: var(--f-ink-2); }
.bl-panel p { margin: 0; }
.bl-panel b { color: var(--f-ink); }
/* invoices: one row each, in columns */
.bl-inv-h, .bl-inv { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1.6fr) 84px 108px 76px; align-items: center; gap: 12px; }
.bl-inv-h { padding: 6px 20px 4px; }
.bl-inv-h .f-label { font-size: 10.5px; }
.bl-invs { padding-bottom: 8px; }
.bl-inv { --f-inset: 12px; text-align: left; background: none; font: inherit; color: var(--f-ink); cursor: pointer; }
.bl-inv .fy-t b { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.bl-for { min-width: 0; font-size: 13px; line-height: 1.35; color: var(--f-ink-2); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.bl-inv .num, .bl-inv-h .num { text-align: right; font-variant-numeric: tabular-nums; }
.bl-inv .num { display: grid; gap: 2px; font-size: 13.5px; }
.bl-reg { color: var(--f-ink-3); }
.bl-reg s { text-decoration-color: var(--f-ink-off); }
.bl-saved { font-size: 11.5px; font-weight: 600; color: #1d6b28; }
.bl-inv .chip { font-size: 11px; }
/* the side: extras */
.bl-box + .bl-box { box-shadow: inset 0 1px 0 var(--f-rule); }
.bl-box > .fy-h { position: static; box-shadow: none; }
.bl-price { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--f-ink-2); white-space: nowrap; }
.bl-b { display: grid; gap: 10px; padding: 0 20px 18px; font-size: 13.5px; line-height: 1.5; color: var(--f-ink-2); }
.bl-b p { margin: 0; }
.bl-buy { display: flex; align-items: center; gap: 8px; }
.bl-qty input { width: 64px; height: var(--f-ctl); box-sizing: border-box; text-align: center; }
/* choosing a plan, inside the sheet (the chooser is shared with the apply and join pages; only here is it set this way) */
.bl #plan > .sec { padding: 4px 20px 8px; }
.bl #plan .sec-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 48px; padding: 8px 0 0; box-shadow: none; }
.bl #plan .sec-h .h3 { font: 700 14px/1.25 var(--font-body); letter-spacing: -.015em; }
.bl #plan .flow-chips button { min-height: var(--f-ctl); padding: 0 12px; font-size: 13px; box-shadow: inset 0 0 0 1px var(--f-rule-2); }
.bl #plan .flow-chips button[aria-pressed=true] { box-shadow: none; }
.bl #plan .flow-chips { gap: 4px; }
.bl #plan .flow-chips button > span { display: none; }
.bl #plan .check { gap: 8px; font-size: 12.5px; font-weight: 500; line-height: 1.35; color: var(--f-ink-2); }
.bl #plan .check input { width: 16px; height: 16px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--f-ink-off); }
.bl #plan .check input:checked { background-size: 18px; }
.bl #plan .cards--plans { margin-top: 12px !important; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.bl #plan .cards--plans .card { min-height: 0; padding: 18px 18px 16px; gap: 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--f-rule-2); background: var(--mk-sheet); }
.bl #plan .cards--plans .card--on { box-shadow: inset 0 0 0 1.5px var(--f-ink), inset 0 -3px 0 var(--mk-green); }
.bl #plan .cards--plans .card-flag { min-height: 0; margin: 0; font-size: 10.5px; }
.bl #plan .cards--plans .card-flag:empty { display: none; }
.bl #plan .card-name { font-size: 18px; }
.bl #plan .cards--plans .card b[style] { font-size: 24px !important; }
.bl #plan .cards--plans .bullets { gap: 6px; margin: 2px 0 8px; font-size: 13px; line-height: 1.4; color: var(--f-ink-2); }
.bl #plan .cards--plans .card .btn { height: var(--f-ctl); min-height: 0; font-size: 13px; }
.bl #plan .hint { margin: 12px 0 0; font-size: 12.5px; color: var(--f-ink-3); }
@media (max-width: 1100px) {
  .bl-inv-h { display: none; }
  .bl-inv { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "n paid st" "for for for"; row-gap: 4px; }
  .bl-inv > .fy-t { grid-area: n; } .bl-inv > .bl-for { grid-area: for; } .bl-inv > .bl-reg { display: none; } .bl-inv > .num:not(.bl-reg) { grid-area: paid; } .bl-inv > span:last-child { grid-area: st; }
}
@media (max-width: 900px) {
  .bl-sheet { grid-template-columns: minmax(0, 1fr); }
  .bl-main, .bl-side { overflow: visible; }
  .bl-side { border-left: 0; box-shadow: inset 0 1px 0 var(--f-rule-2); }
  .bl .mon-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- Crisis (crisis.js)
   A member: what rep. is handling now, the button, and their cover beside it. The desk: incidents, waiting first, and
   each incident's page. Red pen (flare) is for what's waiting on a person, only. */
.cr-sheet, .cr-one { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.cr-main, .cr-side { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 28px; }
.cr-side { border-left: 1px solid var(--f-rule-2); }
.cr-cover { display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; font-size: 13px; color: var(--f-ink-2); white-space: nowrap; }
.cr-cover::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--f-ink-off); }
.cr-cover--ok::before { background: var(--mk-green); }
.cr-cover--wait::before { background: #e3a33a; }
.cr-cover--used::before, .cr-cover--none::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--f-ink-off); }
/* what rep. is handling now */
.cr-now { display: grid; gap: 10px; padding: 16px 20px 0; }
.cr-live { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 16px 18px; border-radius: 8px; background: rgb(255 91 58 / .07); box-shadow: inset 0 0 0 1px rgb(255 91 58 / .3); }
.cr-live--responding { background: rgb(59 194 76 / .08); box-shadow: inset 0 0 0 1px rgb(59 194 76 / .35); }
.cr-live-t { display: grid; gap: 4px; min-width: 0; }
.cr-live-t > b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; color: var(--f-ink); }
.cr-live-t > span { font-size: 13.5px; line-height: 1.45; color: var(--f-ink-2); }
.cr-live-q { margin: 6px 0 0; padding-left: 12px; box-shadow: inset 2px 0 0 var(--f-rule-2); font-size: 13.5px; line-height: 1.5; color: var(--f-ink); }
.cr-live-m { font-size: 12.5px; color: var(--f-ink-3); }
.cr-pulse { position: relative; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--mk-flare); }
.cr-live--responding .cr-pulse { background: var(--mk-green); }
.cr-pulse::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; box-shadow: 0 0 0 2px currentColor; color: rgb(255 91 58 / .5); animation: cr-pulse 1.8s var(--ease-out, ease-out) infinite; }
.cr-live--responding .cr-pulse::after { color: rgb(59 194 76 / .5); }
@keyframes cr-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cr-pulse::after { animation: none; opacity: .6; } }
/* the button */
.cr-form { max-width: 720px; padding: 22px 24px 8px; }
.cr-form-h h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; color: var(--f-ink); }
.cr-form-h p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--f-ink-2); max-width: 60ch; }
.cr-qs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.cr-q { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.cr-n { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.25px var(--f-rule-2); font: 600 12px/1 var(--font-body); color: var(--f-ink-2); }
.cr-q:focus-within .cr-n { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.cr-ql { display: grid; gap: 6px; min-width: 0; }
.cr-ql > span, .cr-tel > span { font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--f-ink); }
.cr-form textarea, .cr-form input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--f-rule-2); background: #fff; font: inherit; font-size: 14.5px; line-height: 1.5; color: var(--f-ink); resize: vertical; outline: 0; }
.cr-form textarea:focus, .cr-form input:focus { box-shadow: inset 0 0 0 1.5px var(--f-ink); }
.cr-form [aria-invalid="true"], .cr-form :user-invalid { box-shadow: inset 0 0 0 1.5px var(--mk-flare); }
.cr-send { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 20px 0 0 38px; padding: 16px 0 12px; border-top: 1px solid var(--f-rule); }
.cr-tel { display: grid; gap: 6px; flex: 1 1 240px; max-width: 320px; }
.cr-go { height: 44px; padding: 0 22px; font-size: 15px; font-weight: 700; }
.cr-go .ico { width: 18px; height: 18px; }
.cr-form--off { padding-bottom: 20px; }
.cr-form[hidden] { display: none; }
.cr-again { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 20px; font-size: 13.5px; color: var(--f-ink-2); }
/* beside it */
.cr-box + .cr-box { box-shadow: inset 0 1px 0 var(--f-rule); }
.cr-box > .fy-h { position: static; box-shadow: none; }
.cr-box > .fy-h .btn { margin-left: auto; }
.cr-b { margin: 0; padding: 0 20px 16px; font-size: 13.5px; line-height: 1.5; color: var(--f-ink-2); }
.cr-b b { color: var(--f-ink); }
.cr-quiet { color: var(--f-ink-3); }
.cr-warn { color: var(--mk-flare); font-weight: 600; }
.cr-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 20px 12px; box-shadow: inset 0 0 0 1px var(--f-rule); border-radius: 6px; }
.cr-nums > div { display: grid; gap: 3px; padding: 12px 14px; }
.cr-nums > div + div { box-shadow: inset 1px 0 0 var(--f-rule); }
.cr-nums b { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--f-ink); font-variant-numeric: tabular-nums; }
.cr-nums small { font-size: 14px; font-weight: 600; color: var(--f-ink-3); letter-spacing: 0; }
.cr-nums span { font-size: 12px; line-height: 1.35; color: var(--f-ink-3); }
.cr-steps { list-style: none; margin: 0; padding: 0 20px 16px; display: grid; gap: 10px; counter-reset: s; }
.cr-steps li { position: relative; display: grid; gap: 2px; padding-left: 28px; counter-increment: s; }
.cr-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgb(7 12 30 / .07); font: 600 11px/1 var(--font-body); color: var(--f-ink-2); }
.cr-steps b { font-size: 13.5px; color: var(--f-ink); }
.cr-steps span { font-size: 12.5px; line-height: 1.4; color: var(--f-ink-3); }
.cr-past { padding-bottom: 8px; }
.cr-pi { align-items: flex-start; cursor: default; }
.cr-pi:hover, .cr-pi:active { background: none; }
.cr-pi .fy-t b { white-space: normal; font-weight: 650; font-size: 13.5px; }
.cr-sum { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--f-ink-2); }
/* the desk's list */
.cr-desk { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 20px; }
.cr-alarm { color: var(--mk-flare); font-weight: 700; }
.cr-list { padding-bottom: 4px; }
.cr-row { --f-inset: 40px; align-items: flex-start; color: var(--f-ink); text-decoration: none; }
.cr-dot { flex: none; width: 10px; height: 10px; margin: 5px 4px 0 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--f-ink-off); }
.cr-row--open .cr-dot { background: var(--mk-flare); box-shadow: 0 0 0 4px rgb(255 91 58 / .15); }
.cr-row--responding .cr-dot { background: var(--mk-green); box-shadow: none; }
.cr-row .fy-t b { font-size: 14px; }
.cr-what { font-size: 13.5px; line-height: 1.45; color: var(--f-ink-2); }
.cr-row--open .fy-m { color: var(--mk-flare); font-weight: 600; }
.cr-row-r { flex: none; display: grid; justify-items: end; gap: 6px; }
.cr-h { font-size: 12.5px; font-weight: 600; color: var(--f-ink-2); font-variant-numeric: tabular-nums; }
.cr-row > svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--f-ink-3); opacity: 0; transition: opacity 120ms; }
.cr-row:hover > svg { opacity: 1; }
.cr-none { margin: 0; padding: 4px 20px 12px; font-size: 13.5px; color: var(--f-ink-3); }
/* an incident */
.cr-org { color: inherit; text-decoration: none; }
.cr-org:hover { text-decoration: underline; text-decoration-color: var(--mk-green); text-underline-offset: 4px; }
.cr-call { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 16px 20px 4px; padding: 14px 16px; border-radius: 8px; background: rgb(255 91 58 / .07); box-shadow: inset 0 0 0 1px rgb(255 91 58 / .3); }
.cr-call .cr-pulse { margin-top: 0; }
.cr-call > div { display: grid; gap: 2px; min-width: 0; }
.cr-call b { font-size: 15px; font-weight: 800; color: var(--f-ink); }
.cr-call span { font-size: 13px; line-height: 1.4; color: var(--f-ink-2); }
.cr-call .btn { white-space: nowrap; }
.cr-h3 { position: static; margin-top: 8px; box-shadow: none; }
.cr-h3 .btn { margin-left: auto; }
.cr-told { padding: 0 20px 8px; }
.cr-said { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--f-ink); white-space: pre-line; max-width: 68ch; }
.cr-told .f-kv { padding: 0; }
.cr-back { margin: 10px 0 0; font-size: 13.5px; color: var(--f-ink-2); }
.cr-rec { display: grid; gap: 8px; padding: 0 20px; }
.cr-rec textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--f-rule-2); background: #fff; font: inherit; font-size: 14px; line-height: 1.55; resize: vertical; outline: 0; }
.cr-rec textarea:focus { box-shadow: inset 0 0 0 1.5px var(--f-ink); }
.cr-h3 .dp-saved { margin-left: auto; font-weight: 500; }
.cr-meter { height: 6px; margin: 0 20px 14px; border-radius: 3px; background: rgb(7 12 30 / .08); overflow: hidden; }
.cr-meter i { display: block; height: 100%; background: var(--mk-navy); border-radius: 3px; }
.cr-meter.is-over i { background: var(--mk-flare); }
.cr-hours .f-item { cursor: default; align-items: flex-start; --f-inset: 64px; }
.cr-hours .f-item:hover { background: none; }
.cr-hn { flex: none; width: 40px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cr-hours .fy-t > span:first-child { font-size: 13.5px; color: var(--f-ink); }
.cr-paged { list-style: none; margin: 0; padding: 0 20px 16px; display: grid; gap: 6px; }
.cr-paged li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; font-size: 12.5px; color: var(--f-ink-2); }
.cr-paged li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--f-ink); }
.cr-ch { font: 500 10.5px/18px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--f-ink-3); }
.cr-fail { color: var(--mk-flare); font-weight: 700; }
@media (max-width: 900px) {
  .cr-sheet, .cr-one { grid-template-columns: minmax(0, 1fr); }
  .cr-main, .cr-side { overflow: visible; }
  .cr-side { border-left: 0; box-shadow: inset 0 1px 0 var(--f-rule-2); }
  .cr-form { padding: 18px 16px 8px; }
  .cr-send { margin-left: 0; }
  .cr-call { grid-template-columns: auto minmax(0, 1fr); } .cr-call .btn { grid-column: 1 / -1; justify-self: start; }
}
/* The incident's bar keeps one line: the member's name gives way, the keys don't */
.cr .f-bar { flex-wrap: nowrap; }
.cr .f-bar-l { flex: 1; min-width: 0; }
.cr .f-bar-r { flex: none; }
.cr .f-bar-l .cal-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; }
.cr .f-bar-l .chip { flex: none; }
.cr .f-bar-l .fy-sum { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 700px) { .cr .f-bar { flex-wrap: wrap; } .cr .f-bar-l .fy-sum { display: none; } }
/* A story written for a crisis says so, and goes back to the incident */
.dp-kick .dp-crisis { display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; padding: 3px 9px 3px 7px; border-radius: 999px; background: rgb(255 91 58 / .08); color: #b23a1f; font-weight: 600; text-decoration: none; }
.dp-kick .dp-crisis:hover { background: rgb(255 91 58 / .14); color: #8f2c14; }
.dp-crisis .ico { width: 14px; height: 14px; }

/* How a crisis is paid for: the member's choice as they press the button, and what the desk sees */
.cr-terms { display: grid; gap: 14px; }
.cr-terms > p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--f-ink-2); }
.cr-terms > p b { color: var(--f-ink); }
.cr-opts { display: grid; gap: 8px; }
.cr-opt { position: relative; display: block; cursor: pointer; }
.cr-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cr-opt-b { display: grid; gap: 4px; padding: 14px 16px 14px 44px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--f-rule-2); background: #fff; transition: box-shadow 120ms, background-color 120ms; }
.cr-opt-b::before { content: ""; position: absolute; left: 16px; top: 17px; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--f-ink-off); background: #fff; }
.cr-opt:hover .cr-opt-b { box-shadow: inset 0 0 0 1px var(--f-ink-off); }
.cr-opt input:checked + .cr-opt-b { box-shadow: inset 0 0 0 2px var(--f-ink); }
.cr-opt input:checked + .cr-opt-b::before { box-shadow: inset 0 0 0 5px var(--f-ink); }
.cr-opt input:focus-visible + .cr-opt-b { outline: 2px solid var(--mk-green); outline-offset: 2px; }
.cr-opt-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.cr-opt-h b { font-size: 15px; font-weight: 750; letter-spacing: -.01em; color: var(--f-ink); }
.cr-opt-h span { font-size: 14px; font-weight: 700; color: var(--f-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cr-opt-t { font-size: 13px; line-height: 1.45; color: var(--f-ink-2); }
.cr-pay { margin: 0; font-size: 12.5px !important; color: var(--f-ink-3) !important; }
.cr-bill { display: grid; gap: 3px; margin: 0 20px 12px; padding: 12px 14px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--f-rule-2); }
.cr-bill b { font-size: 14px; color: var(--f-ink); }
.cr-bill span { font-size: 12.5px; line-height: 1.45; color: var(--f-ink-2); }
.cr-bill-s { color: var(--f-ink) !important; font-weight: 600; }
.cr-bill--pending { background: rgb(227 163 58 / .1); box-shadow: inset 0 0 0 1px rgb(227 163 58 / .4); }
.cr-bill--failed { background: rgb(255 91 58 / .07); box-shadow: inset 0 0 0 1px rgb(255 91 58 / .35); }
.cr-bill--failed .cr-bill-s { color: var(--mk-flare) !important; }
.cr-bill--charged, .cr-bill--invoiced, .cr-bill--added { background: rgb(59 194 76 / .07); box-shadow: inset 0 0 0 1px rgb(59 194 76 / .3); }