/* rep. AI on the v7 "Markup" design language (tokens.css, markup.css, the ink engine in /js/ink).
   The four laws: type is square and still; every curve is ink; green is a person; red pen is for errors.
   Surfaces are paper: the desk (--mk-paper) with sheets on it (--mk-sheet), fibre on both, shadows from the desk light.
   Corners are square everywhere except where a person acts: the period, and the keys (buttons, toggles), which are
   fully round. Rules separate things, never boxes. */
:root {
  --w: 1280px; --pad: clamp(16px, 3.4vw, 40px); --side: 228px; --side-folded: 64px; --ans: 400px; --bar: 60px; --top: 56px;
  --line: var(--mk-rule); --soft: rgb(7 12 30 / .64); --faint: rgb(7 12 30 / .45); --wash: rgb(7 12 30 / .04);
}
html { background: var(--mk-paper); color-scheme: light; -webkit-text-size-adjust: 100%; }
body { background: var(--mk-fibre), var(--mk-paper); margin: 0; min-height: 100vh; font-family: var(--font-display); color: var(--mk-navy); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
button, input, textarea, select { font: inherit; color: inherit; }
a, button, label, select, summary, [data-go], .go, input[type=checkbox], input[type=radio] { cursor: var(--mk-nib); }
:focus-visible { outline: 2px solid var(--mk-green); outline-offset: 3px; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow, .mono { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { display: block; color: rgb(7 12 30 / .5); }
.soft { color: var(--soft); }
.nw { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
/* The period: every headline ends on the green dot (the text "." stays in the markup for readers and copy). */
.dot { display: inline-block; width: .2em; height: .2em; margin-left: .05em; border-radius: 50%; background: var(--mk-green); color: transparent; font-size: inherit; line-height: 0; overflow: hidden; vertical-align: baseline; user-select: none; }
.ico { width: 20px; height: 20px; flex: none; overflow: visible; color: inherit; }
svg.ico .mk-p { stroke: currentColor; stroke-width: 1.9px; }
.btn--sm .ico { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- the shell: the index, Ansar, then the windows */
/* One frame the height of the screen, three columns. The index and Ansar's column change width by animating the grid,
   so nothing inside them reflows: the index's icons never move as it folds (its labels are clipped and fade), and
   Ansar's panel keeps its width as the column opens round it. Only the windows column scrolls. */
.shell { --side-w: var(--side); --ans-w: 0px; display: grid; grid-template-columns: var(--side-w) var(--ans-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  height: 100vh; height: 100dvh; overflow: hidden; transition: grid-template-columns 380ms var(--ease-out); }
.shell.is-folded { --side-w: var(--side-folded); }
.shell.has-ans.ans-on { --ans-w: var(--ans); }
.shell.is-resizing { transition: none; cursor: col-resize; user-select: none; }
html.is-locked { overflow: hidden; }
.side { grid-column: 1; grid-row: 1; position: relative; z-index: 30; display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--mk-fibre), var(--mk-sheet); box-shadow: inset -1px 0 0 var(--mk-rule); }
.ansar { grid-column: 2; grid-row: 1; position: relative; z-index: 20; min-width: 0; overflow: hidden; background: var(--mk-sheet); box-shadow: inset -1px 0 0 var(--mk-rule); }
.ans-in { position: relative; display: flex; flex-direction: column; width: var(--ans); height: 100%; transition: opacity 260ms var(--ease-out), transform 380ms var(--ease-out); }
.shell:not(.ans-on) .ans-in { opacity: 0; transform: translateX(-28px); }
.ans-grip { position: absolute; z-index: 6; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; }
.ansar .ans-x { display: none; }
.win { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.win-scroll { container: win / inline-size; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgb(7 12 30 / .18) transparent; }

.side-top { position: relative; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: var(--top); padding: 0 12px 0 20px; }
.brand { position: relative; display: flex; align-items: center; height: 32px; text-decoration: none; }
.brand img { display: block; height: auto; transition: opacity 220ms var(--ease-out); }
.brand-logo { width: 54px; }
.brand .brand-icon { position: absolute; left: 1px; top: 1px; width: 30px; opacity: 0; }
/* square icon buttons: fold, sign out, Ansar's own */
.side-btn { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgb(7 12 30 / .5); transition: color 160ms, background-color 160ms, opacity 220ms var(--ease-out); }
.side-btn:hover { color: var(--mk-navy); background: rgb(7 12 30 / .05); }
.side-btn:active { background: rgb(7 12 30 / .09); }
.side-btn .ico { width: 18px; height: 18px; }
.side-ans, .side-toggle { display: none; }
.side-menu { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.nav { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 4px 10px 12px; scrollbar-width: none; }
.nav .grp { display: grid; gap: 2px; padding: 8px 0; }
.nav .grp + .grp { box-shadow: inset 0 1px 0 var(--mk-rule2); }
/* one row: the icon in a fixed slot, then the label and its count or shortcut */
.nav-i { box-sizing: border-box; position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; height: 38px; padding: 0 12px; border: 0; background: none; color: rgb(7 12 30 / .6); text-align: left; text-decoration: none; white-space: nowrap;
  font: 600 14.5px/1 var(--font-display); letter-spacing: -.01em; overflow: hidden; transition: color 160ms, background-color 160ms, width 380ms var(--ease-out); }
.nav-i:hover { color: var(--mk-navy); }
.nav-i[aria-current], .nav-i[aria-pressed=true] { color: var(--mk-navy); font-weight: 700; }
.nav-i .ico { width: 20px; height: 20px; }
.nav-l { justify-self: start; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; transition: opacity 200ms var(--ease-out); }
.nav-i kbd { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: rgb(7 12 30 / .38); transition: opacity 200ms var(--ease-out); }
/* the accent stroke of an icon is green where the person is: the page they're on, Ansar when it's open, the current tab */
svg.ico .mk-p.ac { transition: stroke 240ms var(--ease-out); }
/* Ansar's period is green wherever its mark is drawn */
svg.ico .mk-p.dot { stroke: var(--mk-green); }
.nav-i[aria-current] svg.ico .ac, .nav-i[aria-pressed=true] svg.ico .ac, .wtab.is-here svg.ico .ac, .ctx--on svg.ico .ac { stroke: var(--mk-green); }
/* Ansar open: its row is set as a pressed key */
#ansToggle[aria-pressed=true] { background: rgb(7 12 30 / .05); }
/* counters: tabular, with the green dot of something new */
.badge { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--mk-navy); transition: opacity 200ms var(--ease-out); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mk-green); }
.side-live { display: grid; gap: 2px; padding: 0 10px 10px; }
.side-live .grp-h { padding: 0 12px 6px; }
.grp-h { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgb(7 12 30 / .42); white-space: nowrap; transition: opacity 200ms var(--ease-out); }
.live-p { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 12px; padding: 5px 12px; font-size: 12.5px; line-height: 1.3; text-decoration: none; color: rgb(7 12 30 / .75); white-space: nowrap; animation: rise-in 360ms var(--ease-out) backwards; }
.live-p span { overflow: hidden; text-overflow: ellipsis; transition: opacity 200ms var(--ease-out); }
.live-p .avatar { margin-left: 1px; }
.live-p:hover { color: var(--mk-navy); }
.who { flex: none; display: flex; align-items: center; gap: 2px; padding: 8px 10px 12px; box-shadow: inset 0 1px 0 var(--mk-rule); }
.who .who-me { flex: 1; min-width: 0; grid-template-columns: 24px minmax(0, 1fr); height: 46px; padding: 0 10px; }
.who-me .nav-l { display: grid; gap: 3px; line-height: 1.15; }
.who b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.who small { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: rgb(7 12 30 / .5); overflow: hidden; text-overflow: ellipsis; }
.avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; background: var(--mk-navy); color: var(--mk-sheet); font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar--sm { width: 24px; height: 24px; font-size: 11px; }
.avatar--lg { width: 44px; height: 44px; font-size: 18px; }
main { max-width: var(--w); margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--pad) 112px; outline: 0; }

/* folded to its icons: the labels fade as the column narrows past them; the logo gives way to the mark, which shows
   the unfold button when pointed at */
@media (min-width: 901px) {
  .shell.is-folded .nav-i { width: calc(var(--side-folded) - 20px); }
  .shell.is-folded .nav-l, .shell.is-folded .nav-i kbd, .shell.is-folded .grp-h, .shell.is-folded .live-p span { opacity: 0; }
  .shell.is-folded .brand-logo { opacity: 0; }
  .shell.is-folded .brand .brand-icon { opacity: 1; }
  .shell.is-folded .side-top { padding-left: 17px; }
  .shell.is-folded .side-fold { position: absolute; left: 15px; top: 11px; opacity: 0; }
  .shell.is-folded .side-top:hover .side-fold, .shell.is-folded .side-fold:focus-visible { opacity: 1; background: var(--mk-sheet); }
  .shell.is-folded .side-top:hover .brand-icon { opacity: 0; }
  .shell.is-folded .nav .badge { position: absolute; left: 31px; top: 8px; gap: 0; font-size: 0; }
  .shell.is-folded .side-live .grp-h { height: 0; padding: 0; overflow: hidden; }
  .shell.is-folded .who { flex-direction: column; align-items: stretch; }
  .shell.is-folded .who .side-btn { margin-left: 5px; }
}
/* the label slip (app.js): navy, mono, beside what it names */
.tip { position: fixed; z-index: 90; left: 0; top: 0; padding: 6px 9px; background: var(--mk-navy); color: var(--mk-sheet); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)); transition: opacity 140ms var(--ease-out), transform 220ms var(--ease-out); }
.tip.is-on { opacity: 1; transform: none; }

/* tablets: the index folds by default and Ansar slides out over the windows from under it */
@media (max-width: 1100px) {
  .shell.has-ans.ans-on { --ans-w: 0px; }
  .ansar { position: fixed; z-index: 25; top: 0; bottom: 0; left: var(--side-w); width: min(var(--ans), calc(100vw - var(--side-w) - 24px)); box-shadow: var(--mk-shadow2);
    transform: translateX(-100%); visibility: hidden; transition: transform 440ms var(--ease-out), left 380ms var(--ease-out), visibility 0s 440ms; }
  .shell.ans-on .ansar { transform: none; visibility: visible; transition: transform 440ms var(--ease-out), left 380ms var(--ease-out); }
  .ans-in { width: 100%; }
  .shell:not(.ans-on) .ans-in { opacity: 1; transform: none; }
  .ans-grip { display: none; }
  .ansar .ans-x { display: grid; }
}
.scrim { position: fixed; inset: 0; z-index: 24; background: rgb(226 222 212 / .62); animation: veil-in 300ms var(--ease-out); }

/* phones: a bar on top (the mark, Ansar, Menu); the index opens as a full sheet below it, Ansar as a sheet from below */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--bar) minmax(0, 1fr); transition: none; }
  .side { grid-column: 1; grid-row: 1; overflow: visible; box-shadow: inset 0 -1px 0 var(--mk-rule); }
  .win { grid-column: 1; grid-row: 2; }
  .side-top { height: var(--bar); padding: 0 12px 0 16px; }
  .brand-logo { width: 50px; }
  .side-fold { display: none; }
  .side-ans { display: grid; margin-left: auto; width: 40px; height: 40px; color: var(--mk-navy); }
  .side-ans[aria-pressed=true] { background: rgb(7 12 30 / .07); }
  .side-ans[aria-pressed=true] svg .ac { stroke: var(--mk-green); }
  .side-toggle { position: relative; display: block; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--mk-navy); }
  .side-toggle i { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--mk-sheet); transition: transform 280ms var(--mk-hand); }
  .side-toggle i:first-child { top: 16px; } .side-toggle i:last-child { top: 22px; right: 16px; }
  .side.is-open .side-toggle i:first-child { transform: translateY(3px) rotate(45deg); }
  .side.is-open .side-toggle i:last-child { right: 12px; transform: translateY(-3px) rotate(-45deg); }
  .side-menu { position: fixed; inset: var(--bar) 0 0 0; z-index: 40; overflow-y: auto; background: var(--mk-fibre), var(--mk-paper);
    opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out), visibility 0s 320ms; }
  .side.is-open .side-menu { opacity: 1; visibility: visible; transform: none; transition: opacity 220ms var(--ease-out), transform 320ms var(--ease-out); }
  .nav { flex: none; overflow: visible; padding: 8px var(--pad) 12px; }
  .nav .grp { padding: 10px 0; gap: 0; }
  #ansToggle { display: none; }
  .nav-i { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 14px; height: auto; padding: 12px 0; font-weight: 800; font-size: clamp(24px, 7vw, 30px); letter-spacing: -.045em; line-height: 1.05; color: var(--mk-navy); }
  .nav-i:hover, .nav-i:active { background: none; }
  .nav-i .ico { width: 26px; height: 26px; }
  .nav-i kbd { display: none; }
  .nav .badge { font-size: 14px; }
  .side-live { padding: 0 var(--pad) 12px; } .side-live .grp-h, .live-p { padding-left: 0; padding-right: 0; }
  .who { padding: 14px var(--pad) calc(24px + env(safe-area-inset-bottom, 0px)); }
  .who .who-me { padding: 0; height: 52px; font-size: 16px; }
  .who-me b { font-size: 16px; letter-spacing: -.02em; }
  .ansar { position: fixed; inset: var(--bar) 0 0 0; z-index: 35; width: auto; box-shadow: none; transform: translateY(100%); visibility: hidden;
    transition: transform 460ms var(--ease-out), visibility 0s 460ms; }
  .shell.ans-on .ansar { transform: none; visibility: visible; transition: transform 460ms var(--ease-out); }
  .scrim { display: none; }
  main { padding-top: 26px; }
}

/* ---------------------------------------------------------------- page type */
/* The page head: eyebrow, title and lede down the left; the page's actions in the top right, on the title's line; a thin
   printed rule underneath. The left block is unwrapped (display: contents) so the actions can sit on the title's row. */
.head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; row-gap: 10px; align-items: start; margin-bottom: 30px; padding-bottom: 26px; box-shadow: inset 0 -1px 0 var(--mk-rule); }
.head > div:first-child { display: contents; }
.head > div:first-child > * { grid-column: 1; min-width: 0; max-width: 820px; }
.head > :not(:first-child) { grid-column: 2; grid-row: 2; align-self: center; justify-self: end; justify-content: flex-end; }
.head:not(:has(> div:first-child > .eyebrow:first-child)) > :not(:first-child) { grid-row: 1; }
/* phones and narrow tablets: the actions go under the title block, left-aligned */
@container win (max-width: 640px) {
  .head { grid-template-columns: minmax(0, 1fr); padding-bottom: 22px; }
  .head > :not(:first-child), .head:not(:has(> div:first-child > .eyebrow:first-child)) > :not(:first-child) { grid-column: 1; grid-row: auto; justify-self: start; justify-content: flex-start; margin-top: 6px; }
}
.h1 { font-size: clamp(34px, 5vw, 58px); font-weight: 800; letter-spacing: -.055em; line-height: 1; max-width: 18ch; }
.lede { font-size: clamp(16px, 1.4vw, 18.5px); font-weight: 500; letter-spacing: -.015em; line-height: 1.42; color: var(--mk-ink2); max-width: 54ch; }
.h1--long { font-size: clamp(30px, 3.8vw, 46px); letter-spacing: -.05em; line-height: 1.04; max-width: 26ch; }
.h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; }
.h3 { font-size: 18px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.h4 { font-size: 15px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.h4 .hint { font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sec { display: grid; gap: 14px; align-content: start; min-width: 0; }
.sec + .sec { margin-top: 40px; }
.sec-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; padding-bottom: 10px; box-shadow: inset 0 -1px 0 var(--mk-navy); }
.back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; text-decoration: none; color: rgb(7 12 30 / .6); }
.back .ico { width: 18px; height: 18px; transition: transform 260ms var(--mk-hand); }
.back:hover { color: var(--mk-navy); }
.back:hover .ico { transform: translateX(-5px); }
.prose { white-space: pre-wrap; font-size: 15.5px; line-height: 1.6; color: var(--mk-ink2); }
.prose--read { font-size: 17px; line-height: 1.7; max-width: 66ch; }

/* ---------------------------------------------------------------- buttons: the typeset block */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--mk-navy); box-shadow: inset 0 0 0 1.25px var(--mk-navy);
  font: 700 14.5px/1 var(--font-display); letter-spacing: -.01em; text-decoration: none; white-space: nowrap; transition: transform 90ms var(--mk-hand), background-color 160ms, color 160ms, box-shadow 160ms; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn--go, .btn--ok { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.btn--go:active:not(:disabled), .btn--ok:active:not(:disabled) { background: #1a2036; }
.btn--l { height: 50px; padding: 0 28px; font-size: 16.5px; letter-spacing: -.02em; }
.btn--sm { height: 32px; padding: 0 14px; font-size: 13px; gap: 6px; }
.btn--bare { box-shadow: none; padding-left: 4px; padding-right: 4px; }
.btn--sm.btn--bare { padding: 0 4px; }
.btn--warn { color: var(--mk-flare); box-shadow: inset 0 0 0 1.25px var(--mk-flare); }
.btn--warn.btn--go, .btn--danger { background: var(--mk-flare); color: var(--mk-sheet); box-shadow: none; }
.btn:disabled { background: transparent; color: rgb(7 12 30 / .3); box-shadow: inset 0 0 0 1.25px rgb(7 12 30 / .15); cursor: not-allowed; }
.btn--bare:disabled { box-shadow: none; }
/* busy: the label fades and a pen line runs under it */
.btn.is-busy { pointer-events: none; color: rgb(7 12 30 / .45); }
.btn--go.is-busy, .btn--ok.is-busy { color: rgb(252 251 248 / .55); background: var(--mk-navy); }
.btn.is-busy::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 7px; height: 2px; background: var(--mk-green); transform-origin: left; animation: pen-run 1000ms var(--mk-hand) infinite; }
@keyframes pen-run { 0% { transform: scaleX(0); } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.link { padding: 0; border: 0; background: none; color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgb(7 12 30 / .35); text-underline-offset: 4px; }
.link:hover { text-decoration-color: var(--mk-green); }
/* on navy: paper buttons, ghost outlines */
.on-navy .btn, .ask .btn { color: var(--mk-sheet); box-shadow: inset 0 0 0 1.25px rgb(252 251 248 / .6); }
.on-navy .btn--go, .ask .btn--go { background: var(--mk-sheet); color: var(--mk-navy); box-shadow: none; }

/* ---------------------------------------------------------------- chips: status badges, mono and square */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 7px 3px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; color: rgb(7 12 30 / .62); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .18); white-space: nowrap; vertical-align: 1px; }
.chip--ink { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.chip--line { color: var(--mk-navy); box-shadow: inset 0 0 0 1px var(--mk-navy); }
.chip--ok, .chip--okline { color: var(--mk-navy); font-weight: 700; box-shadow: inset 0 0 0 1px rgb(7 12 30 / .25); }
.chip--ok::before, .chip--okline::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mk-green); }
.chip--okline { font-weight: 500; }
.chip--warn { color: var(--mk-flare); box-shadow: inset 0 0 0 1px rgb(255 91 58 / .55); }
/* draft / waiting: the lab's dashed box */
.chip--wait, .chip--draft { box-shadow: none; color: rgb(7 12 30 / .62); background:
  linear-gradient(90deg, rgb(7 12 30 / .4) 50%, transparent 0) top / 5px 1px repeat-x, linear-gradient(90deg, rgb(7 12 30 / .4) 50%, transparent 0) bottom / 5px 1px repeat-x,
  linear-gradient(rgb(7 12 30 / .4) 50%, transparent 0) left / 1px 5px repeat-y, linear-gradient(rgb(7 12 30 / .4) 50%, transparent 0) right / 1px 5px repeat-y; }
.ai { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px 0 4px; border-radius: 9px; background: rgb(59 194 76 / .1); font: 600 10.5px/1 var(--font-display); letter-spacing: 0; color: var(--mk-navy); vertical-align: 1px; white-space: nowrap; }
.ai .amark { flex: none; }
.route { display: inline-block; font-weight: 700; padding: 0 2px; }
.route--pitch { box-shadow: inset 0 -.42em 0 rgb(59 194 76 / .45); }
.route--develop { box-shadow: inset 0 -.42em 0 rgb(7 12 30 / .12); }
.route--channels { box-shadow: inset 0 -1.5px 0 var(--mk-navy); }
.route--hold { color: var(--soft); }
.tags { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--mk-ink2); }
.tag::before { content: "#"; color: rgb(7 12 30 / .35); margin-right: 1px; }
.key { display: inline-block; width: 8px; height: 8px; margin: 0 5px 0 10px; vertical-align: 0; }
.key--anthropic, .s-anthropic { background: var(--mk-navy); }
.key--exa, .s-exa { background: rgb(7 12 30 / .28); }

/* ---------------------------------------------------------------- forms: the ruled line */
.form { display: grid; gap: 22px; }
.f { position: relative; display: grid; gap: 4px; min-width: 0; }
.f > span { font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; color: var(--mk-navy); }
.f > small, .hint { color: rgb(7 12 30 / .55); font-size: 13px; line-height: 1.45; }
.f input:not([type=checkbox]):not([type=radio]), .f select, .in {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 0 8px; border: 0; border-radius: 0; background: transparent; font-weight: 500; font-size: 16.5px; line-height: 1.4; letter-spacing: -.01em; color: var(--mk-navy); box-shadow: inset 0 -1px 0 rgb(7 12 30 / .22); outline: 0; }
.f input::placeholder, .f textarea::placeholder, .in::placeholder { color: rgb(7 12 30 / .3); }
.f input:focus, .f select:focus, .in:focus { box-shadow: inset 0 -2px 0 var(--mk-green); }
.f input:disabled, .f select:disabled, .f textarea:disabled, .in:disabled { color: rgb(7 12 30 / .45); box-shadow: none; background: linear-gradient(90deg, rgb(7 12 30 / .3) 50%, transparent 0) bottom left / 5px 1px repeat-x; }
.f select, select.in { appearance: none; -webkit-appearance: none; padding-right: 26px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.8 9.1 12.1 15.2 18.3 8.9' fill='none' stroke='%23070c1e' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center / 16px no-repeat; font-weight: 600; }
/* multi-line: the proof box, a sheet with the label in its corner when it's the field's only label */
.f textarea, textarea.in { width: 100%; box-sizing: border-box; min-height: 96px; padding: 12px 14px; border: 0; border-radius: 0; background: var(--mk-fibre), var(--mk-sheet); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .2); font-weight: 500; font-size: 15.5px; line-height: 1.6; letter-spacing: -.005em; color: var(--mk-navy); resize: vertical; outline: 0; }
.f textarea:focus, textarea.in:focus { box-shadow: inset 0 0 0 1px var(--mk-navy), inset 0 -2px 0 var(--mk-green); }
.f--big input:not([type=checkbox]) { font-size: clamp(22px, 2.4vw, 28px) !important; font-weight: 800 !important; letter-spacing: -.04em !important; min-height: 50px; }
.f--doc textarea { min-height: 380px; font-size: 16px; line-height: 1.7; padding: 18px 20px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px 24px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 20px 24px; }
/* checkboxes: an 18px square, ticked */
.check { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: -.01em; }
.check input { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border-radius: 0; background: transparent; box-shadow: inset 0 0 0 1.25px var(--mk-navy); transition: box-shadow 160ms; }
.check input:hover { box-shadow: inset 0 0 0 1.25px var(--mk-navy), inset 0 0 0 9px rgb(7 12 30 / .04); }
.check input:checked { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.6 12.8 9.7 17.6 20.4 5.4' fill='none' stroke='%233bc24c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 55% 40% / 22px no-repeat; }
.check input:disabled { box-shadow: inset 0 0 0 1.25px rgb(7 12 30 / .18); }
.check input:disabled + * { color: rgb(7 12 30 / .35); }
.checks { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.err { color: var(--mk-flare); font-size: 14px; font-weight: 600; }
.copy { display: flex; gap: 10px; align-items: end; }
.copy input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px !important; }

/* ---------------------------------------------------------------- tabs: printed, the current one inked */
.tabs { display: flex; flex-wrap: wrap; gap: 0 22px; margin-bottom: 24px; box-shadow: inset 0 -1px 0 var(--mk-rule); }
.tabs a, .tabs button { padding: 10px 0 12px; border: 0; background: none; font-weight: 700; font-size: 15px; letter-spacing: -.015em; color: rgb(7 12 30 / .5); text-decoration: none; }
.tabs a:hover, .tabs button:hover, .tabs [aria-current], .tabs [aria-selected=true] { color: var(--mk-navy); }
@media (max-width: 560px) { .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); padding: 0 var(--pad); } .tabs::-webkit-scrollbar { display: none; } .tabs a, .tabs button { white-space: nowrap; } }
.bar { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: end; margin-bottom: 18px; }
.bar .f { min-width: 160px; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 16px; }

/* ---------------------------------------------------------------- tables and ruled lists */
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl-wrap { overflow-x: auto; }
.tbl th { text-align: left; padding: 0 14px 10px 0; box-shadow: inset 0 -1px 0 var(--mk-navy); font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgb(7 12 30 / .5); white-space: nowrap; }
.tbl td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--mk-rule2); vertical-align: top; }
.tbl td b { font-weight: 700; letter-spacing: -.01em; }
.tbl td .meta { display: block; margin-top: 3px; }
.tbl tr.go:hover td b:first-child, .rows > li.go:hover b:first-of-type, .card.go:hover h3 { text-decoration: underline; text-decoration-color: var(--mk-green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl th.num { text-align: right; }
.share { display: block; height: 3px; margin-top: 6px; background: var(--mk-rule2); }
.share i { display: block; height: 100%; background: var(--mk-navy); }
/* phones: every row becomes a small ledger entry, labelled from data-l */
@media (max-width: 720px) {
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; }
  .tbl thead { display: none; }
  .tbl tr { padding: 12px 0; border-bottom: 1px solid var(--mk-rule); }
  .tbl td { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; border: 0; text-align: left !important; }
  .tbl td:first-child { display: block; padding-bottom: 6px; font-size: 16px; }
  .tbl td[data-l]::before { content: attr(data-l); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgb(7 12 30 / .45); padding-top: 3px; }
  .tbl td:first-child::before { display: none; }
  .tbl td:empty { display: none; }
  .tbl .share { display: none; }
}
.rows { list-style: none; margin: 0; padding: 0; display: grid; }
.rows > li { display: grid; gap: 4px; padding: 13px 0; border-bottom: 1px solid var(--mk-rule2); }
.rows b { font-weight: 700; letter-spacing: -.01em; }
.row-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgb(7 12 30 / .48); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 14.5px; margin: 0; }
.kv dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgb(7 12 30 / .45); padding-top: 4px; }
.kv dd { margin: 0; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 560px) { .kv { grid-template-columns: 1fr; gap: 2px; } .kv dd { margin-bottom: 8px; } }

/* ---------------------------------------------------------------- moving between pages */
/* a pen line across the top of the desk while a page loads; it runs most of the way, then finishes when the page is in */
.progress { position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 2px; background: var(--mk-green); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
.progress.is-running { opacity: 1; animation: pen-across 1600ms var(--mk-hand) forwards; }
.progress.is-done { animation: pen-finish 380ms var(--mk-hand) forwards; }
@keyframes pen-across { from { transform: scaleX(0); } to { transform: scaleX(.86); } }
@keyframes pen-finish { 0% { opacity: 1; transform: scaleX(.86); } 55% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
.mk-sw { display: inline; }

/* ---------------------------------------------------------------- empty and loading */
.empty { display: grid; gap: 8px; justify-items: start; padding: 26px 26px 24px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow); color: var(--mk-ink2); font-size: 15px; max-width: 640px; }
.empty b { color: var(--mk-navy); font-size: 24px; font-weight: 800; letter-spacing: -.045em; line-height: 1.1; }
.empty b::after { content: ""; display: inline-block; width: .2em; height: .2em; margin-left: .05em; border-radius: 50%; background: var(--mk-green); }
/* inside a section the page is already a sheet's worth of structure: the empty note is just type */
.sec .empty, .panel .empty, .dlg-b .empty, .maker .empty { padding: 14px 0 6px; background: none; box-shadow: none; font-size: 14px; }
.sec .empty b, .panel .empty b, .dlg-b .empty b, .maker .empty b { font-size: 18px; letter-spacing: -.035em; }
.loading { display: grid; gap: 12px; padding: 8px 0 40px; color: transparent; font-size: 0; max-width: 560px; }
.loading::before, .loading::after { content: ""; display: block; height: 12px; background: rgb(7 12 30 / .08); animation: galley 1.4s ease-in-out infinite alternate; }
.loading::before { width: 34%; height: 9px; background: rgb(7 12 30 / .1); box-shadow: 0 26px 0 4px rgb(7 12 30 / .12); margin-bottom: 40px; }
.loading::after { width: 92%; box-shadow: 0 22px 0 rgb(7 12 30 / .08), 0 44px 0 rgb(7 12 30 / .06); }
@keyframes galley { from { opacity: .55; } to { opacity: 1; } }

/* ---------------------------------------------------------------- layout */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 48px; align-items: start; }
.split--wide { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.split--side { grid-template-columns: 280px minmax(0, 1fr); gap: 36px; }
@container win (max-width: 960px) { .split, .split--wide, .split--side { grid-template-columns: 1fr; gap: 36px; } }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px 48px; align-items: start; }
.cols--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.panel { position: relative; padding: 22px 24px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow); display: grid; gap: 14px; align-content: start; min-width: 0; }
.panel--line { background: none; box-shadow: inset 0 1px 0 var(--mk-navy); padding: 16px 0 0; }
.panel--wash { box-shadow: var(--mk-shadow); }
.panel--navy { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.panel--navy .eyebrow, .panel--navy .meta { color: rgb(252 251 248 / .5); }
.panel--navy .prose, .panel--navy p { color: rgb(252 251 248 / .78); }
@media (max-width: 560px) { .panel { padding: 18px 16px; } }
/* stats: one treatment per page: the big number on a printed rule */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 26px 28px; margin-bottom: 40px; }
.stats > * { display: grid; gap: 6px; align-content: start; padding-top: 12px; border-top: 1px solid var(--mk-rule); text-decoration: none; }
.stats b { font-size: clamp(36px, 4.2vw, 54px); font-weight: 800; letter-spacing: -.06em; line-height: .95; font-variant-numeric: tabular-nums; padding-bottom: 4px; }
.stats span { font-size: 13.5px; line-height: 1.4; color: var(--mk-ink2); }
.stats a:hover b { text-decoration: underline; text-decoration-color: var(--mk-green); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.stats--5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.stats--5 b { font-size: clamp(30px, 3vw, 44px); }
@media (max-width: 560px) { .stats { grid-template-columns: 1fr 1fr; gap: 20px 18px; } }

/* ---------------------------------------------------------------- cards: sheets on the desk */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.cards--plans { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.cards--plans .card { display: flex; flex-direction: column; gap: 14px; min-height: 380px; padding: 28px 26px 24px; }
.cards--plans .card .bullets { gap: 10px; margin: 6px 0 18px; }
.cards--plans .card > .btn:last-child { margin-top: auto; }
/* Every plan card keeps room for the flag ("Your choice"), so the names and prices line up across the row. */
.cards--plans .card-flag { min-height: 2.6em; margin-bottom: -10px; }
.cards--plans .card-inv { display: block; margin-top: 4px; }
.card { position: relative; display: grid; gap: 8px; align-content: start; padding: 20px 22px 18px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow); min-width: 0; transition: transform 250ms var(--mk-hand), box-shadow 250ms var(--mk-hand); }
.card--on { box-shadow: var(--mk-shadow), inset 0 0 0 1.5px var(--mk-navy), inset 0 -4px 0 var(--mk-green); }
.card.go:hover { transform: translateY(-3px); box-shadow: var(--mk-shadow2); }
.card h3 { font-size: 19px; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; padding-right: 64px; }
.card .role { font-size: 14px; color: var(--mk-ink2); }
.card .why { font-size: 14px; padding-top: 8px; border-top: 1px solid var(--mk-rule2); color: var(--mk-ink2); }
.card.is-pick { box-shadow: var(--mk-shadow2), inset 0 -3px 0 var(--mk-navy); }
.card .fit { position: absolute; top: 16px; right: 16px; }

/* ---------------------------------------------------------------- rep. AI: the ask box (a navy surface) and streaming */
.ask { display: grid; gap: 12px; padding: 20px 22px; background: var(--mk-navy); color: var(--mk-sheet); margin-bottom: 26px; }
.ask label { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgb(252 251 248 / .5); }
.ask form { display: flex; gap: 10px; align-items: end; }
.ask input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: transparent; color: var(--mk-sheet); font-weight: 600; font-size: 18px; letter-spacing: -.015em; outline: 0; box-shadow: inset 0 -1.25px 0 rgb(252 251 248 / .4); }
.ask input:focus { box-shadow: inset 0 -2px 0 var(--mk-green); }
.ask input::placeholder { color: rgb(252 251 248 / .38); }
.ask .eg { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.ask .eg button { padding: 5px 10px; border: 0; background: none; box-shadow: inset 0 0 0 1px rgb(252 251 248 / .22); color: rgb(252 251 248 / .75); font-size: 13px; }
.ask .eg button:hover { box-shadow: inset 0 0 0 1px rgb(252 251 248 / .7); color: var(--mk-sheet); }
@media (max-width: 560px) { .ask form { flex-direction: column; align-items: stretch; } }
.think { font-size: 13.5px; color: var(--soft); font-style: italic; min-height: 1.4em; }
.think::before { content: "rep. AI · "; font-style: normal; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mk-navy); }
.shortlist { display: grid; gap: 14px; margin-bottom: 30px; }
.shortlist .understood { font-size: 15.5px; }
.shortlist .gaps { font-size: 14px; color: var(--mk-ink2); padding: 10px 0 10px 14px; box-shadow: inset 2px 0 0 var(--mk-navy); }
.fit-strong { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.fit-good { box-shadow: inset 0 0 0 1px var(--mk-navy); color: var(--mk-navy); }

/* scores (triage, story review) */
.scores { display: grid; gap: 12px; }
.score { display: grid; grid-template-columns: 130px 64px 1fr; gap: 12px; align-items: baseline; font-size: 14px; }
.score b { font-weight: 700; }
.score p { color: var(--mk-ink2); }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 13px; height: 8px; box-shadow: inset 0 0 0 1px rgb(7 12 30 / .25); }
.pips i.on { background: var(--mk-navy); box-shadow: none; }
@media (max-width: 640px) { .score { grid-template-columns: 1fr auto; } .score p { grid-column: 1 / -1; } }
.routes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.routes button { display: grid; gap: 3px; padding: 12px; border: 0; background: var(--mk-fibre), var(--mk-sheet); box-shadow: inset 0 0 0 1px var(--mk-rule); text-align: left; }
.routes button b { font-size: 15px; letter-spacing: -.01em; }
.routes button small { font-size: 12.5px; color: var(--soft); }
.routes button.is-ai { box-shadow: inset 0 0 0 1.25px var(--mk-navy); }
.routes button[aria-pressed="true"] { box-shadow: inset 0 0 0 1.25px var(--mk-navy), inset 0 -4px 0 var(--mk-green); }
@media (max-width: 640px) { .routes { grid-template-columns: 1fr 1fr; } }
.done { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0 12px 16px; box-shadow: inset 3px 0 0 var(--mk-green); font-size: 14.5px; }
.done small { display: block; color: var(--soft); }

/* ---------------------------------------------------------------- feed */
.feed { list-style: none; margin: 0; padding: 0; display: grid; }
.feed li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; padding: 16px 0; border-bottom: 1px solid var(--mk-rule2); }
.feed li.is-read { opacity: .6; }
.feed li > div { display: grid; gap: 5px; min-width: 0; }
.feed a.hl { font-size: 18px; font-weight: 800; letter-spacing: -.025em; line-height: 1.22; text-decoration: none; }
.feed a.hl:hover { text-decoration: underline; text-decoration-color: var(--mk-green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.feed .snip { font-size: 14.5px; color: var(--mk-ink2); }
.feed .note { font-size: 13.5px; color: var(--mk-navy); }
.feed img { width: 112px; height: 76px; object-fit: cover; background: var(--wash); }
.feed .acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 560px) { .feed img { width: 76px; height: 56px; } }
.qlist { list-style: none; margin: 0; padding: 0; display: grid; }
.qlist li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 11px 0 11px 12px; border-bottom: 1px solid var(--mk-rule2); font-size: 13px; color: var(--soft); }
.qlist li b { color: var(--mk-navy); font-size: 14.5px; letter-spacing: -.01em; }
.qlist li > span { grid-column: 1; }
.qlist li i { grid-column: 2; grid-row: 1; font-style: normal; }
.qlist li[aria-current] { box-shadow: inset 2.5px 0 0 var(--mk-green); }
.qlist li:hover b { text-decoration: underline; text-decoration-color: var(--mk-green); text-underline-offset: 3px; }

/* charts (reports, usage): navy bars on a printed rule */
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; align-items: end; height: 170px; padding-top: 10px; box-shadow: inset 0 -1px 0 var(--mk-navy); }
.bars > div { display: grid; gap: 5px; align-content: end; justify-items: center; height: 100%; }
.bars .pair { display: flex; gap: 4px; align-items: flex-end; height: 124px; }
.bars i { display: block; width: 20px; background: var(--mk-navy); min-height: 2px; }
.bars i.out { background: none; box-shadow: inset 0 0 0 1.25px var(--mk-navy); }
.bars span { font-family: var(--font-mono); font-size: 9.5px; color: var(--faint); }
.bars b { font-size: 12px; font-variant-numeric: tabular-nums; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr) 2fr auto; gap: 12px; align-items: center; font-size: 14px; padding: 5px 0; }
.hbar i { display: block; height: 7px; background: var(--mk-navy); }
/* Credits: spent solid, held hatched, what's left open. */
.meter { display: flex; width: 100%; min-width: 80px; height: 7px; box-shadow: inset 0 0 0 1px rgb(7 12 30 / .25); }
.meter i { display: block; height: 100%; background: var(--mk-navy); }
.meter i.held { background: repeating-linear-gradient(135deg, var(--mk-navy) 0 1.5px, transparent 1.5px 4px); }
.credit-line { display: grid; gap: 6px; min-width: 120px; }
.credit-line small { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; color: rgb(7 12 30 / .55); white-space: nowrap; }
.ledger td.amt { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; white-space: nowrap; }
.ledger td.amt.minus { color: rgb(7 12 30 / .55); font-weight: 500; }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 140px; box-shadow: inset 0 -1px 0 var(--mk-navy); }
.spark > div { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 3px; }
.spark .stack { display: flex; flex-direction: column-reverse; width: 100%; min-height: 1px; }
.spark .stack i { display: block; min-height: 0; }
.spark-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em; color: var(--faint); }

/* ---------------------------------------------------------------- dialogs: a sheet slid up from the bottom of the desk */
dialog { width: min(600px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); margin: auto auto 16px; padding: 0; border: 0; background: var(--mk-fibre), var(--mk-sheet); color: var(--mk-navy); box-shadow: var(--mk-shadow2); }
dialog.wide { width: min(1040px, calc(100vw - 24px)); }
dialog[open] { animation: sheet-in 460ms var(--mk-hand); }
dialog::backdrop { background: rgb(226 222 212 / .78); animation: veil-in 240ms ease-out; }
@keyframes sheet-in { from { transform: translateY(105%); } }
@keyframes veil-in { from { opacity: 0; } }
.dlg { position: relative; display: grid; grid-template-rows: auto 1fr auto; max-height: inherit; }
.dlg-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 26px 26px 6px; }
.dlg-h h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.05em; line-height: 1.02; }
.dlg-h h2::after { content: ""; display: inline-block; width: .2em; height: .2em; margin-left: .05em; border-radius: 50%; background: var(--mk-green); }
.dlg-x { display: grid; place-items: center; flex: none; width: 36px; height: 36px; margin: -4px -8px 0 0; border: 0; background: none; color: rgb(7 12 30 / .55); }
.dlg-x:hover { color: var(--mk-navy); }
.dlg-b { padding: 18px 26px 22px; overflow: auto; display: grid; gap: 18px; align-content: start; overscroll-behavior: contain; }
.dlg-f { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 16px 26px 22px; box-shadow: inset 0 1px 0 var(--mk-rule2); }
@media (max-width: 560px) {
  dialog, dialog.wide { width: 100vw; max-height: calc(100dvh - 12px); margin: auto 0 0; }
  .dlg-h { padding: 22px 18px 4px; } .dlg-b { padding: 16px 18px 20px; } .dlg-f { padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
  .dlg-f .btn { flex: 1; }
}
/* toasts: a paper slip, bottom right; errors are set in red pen and wait to be dismissed */
.toast { position: fixed; z-index: 80; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); width: min(340px, calc(100vw - 32px)); box-sizing: border-box; padding: 14px 18px 16px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow2); color: var(--mk-navy); font-weight: 700; font-size: 15.5px; letter-spacing: -.015em; line-height: 1.35; animation: slip-in 320ms var(--mk-hand); }
.toast::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: 7px; height: 2px; background: var(--mk-green); transform-origin: left; animation: slip-time var(--t, 3200ms) linear forwards; }
.toast.is-bad { color: var(--mk-flare); padding-right: 44px; }
.toast.is-bad::after { display: none; }
.toast button { position: absolute; right: 8px; top: 8px; width: 30px; height: 30px; border: 0; background: none; color: rgb(7 12 30 / .5); display: grid; place-items: center; }
@keyframes slip-in { from { transform: translateY(120%); } }
@keyframes slip-time { to { transform: scaleX(0); } }
@media (max-width: 560px) { .toast { left: 16px; right: 16px; width: auto; } }

/* ---------------------------------------------------------------- notices: a printed line across the top of the desk */
.notice { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 10px var(--pad); box-shadow: inset 0 -1px 0 var(--mk-rule); font-size: 13.5px; color: var(--mk-ink2); }
.notice b { color: var(--mk-navy); font-weight: 700; }
.notice code { font-family: var(--font-mono); font-size: 11.5px; }
p.notice { box-shadow: inset 3px 0 0 var(--mk-navy); padding: 10px 0 10px 16px; }

/* ---------------------------------------------------------------- sign-in */
.gate { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(440px, 1fr); background: var(--mk-fibre), var(--mk-sheet); }
.gate-brand { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; padding: clamp(28px, 4vw, 56px); background: var(--mk-fibre), var(--mk-navy); color: var(--mk-sheet); overflow: hidden; }
.gate-logo { align-self: flex-start; }
.gate-logo img { display: block; width: 84px; }
.gate-pitch { display: grid; gap: 18px; max-width: 34rem; }
.gate-line { font-size: clamp(44px, 5.4vw, 76px); font-weight: 800; letter-spacing: -.055em; line-height: .98; }
.gate-end { white-space: nowrap; }
.gate-sub { max-width: 40ch; font-size: clamp(16px, 1.3vw, 18px); font-weight: 500; line-height: 1.45; letter-spacing: -.01em; color: rgb(252 251 248 / .68); }
.gate-main { display: grid; grid-template-columns: minmax(0, 380px); justify-content: center; align-content: center; padding: 48px clamp(24px, 5vw, 64px); }
.gate-card { display: grid; gap: 28px; }
.gate-card .h1 { font-size: clamp(40px, 4vw, 52px); }
.gate-card .form { gap: 20px; }
.gate-card .f input:not([type=checkbox]):not([type=radio]) { min-height: 48px; font-size: 17px; }
.gate-actions { display: grid; gap: 16px; justify-items: center; padding-top: 4px; }
.gate-actions .btn--go { width: 100%; }
.gate-actions .btn--bare { font-size: 14.5px; color: var(--mk-ink2); }
.gate-foot { padding-top: 22px; border-top: 1px solid var(--mk-rule); font-size: 14px; line-height: 1.6; color: var(--mk-ink2); }
.gate-foot a { font-weight: 700; color: var(--mk-navy); text-decoration-color: var(--mk-green); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.btn--google { width: 100%; gap: 12px; }
.btn--google img { width: 18px; height: 18px; }
.gate-or { display: flex; align-items: center; gap: 12px; margin: -8px 0; color: rgb(7 12 30 / .45); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; }
.gate-or::before, .gate-or::after { content: ""; flex: 1; border-top: 1px solid var(--mk-rule); }
@media (max-width: 900px) {
  .gate { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .gate-brand { gap: 28px; padding: 20px 16px 30px; }
  .gate-logo img { width: 64px; }
  .gate-pitch { gap: 16px; }
  .gate-line { font-size: clamp(34px, 9vw, 48px); }
  .gate-sub { font-size: 15px; }
  .gate-main { align-content: start; padding: 32px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
}
.setup { max-width: 760px; margin: 0 auto; padding: 56px var(--pad); display: grid; gap: 20px; }
.setup code { font-family: var(--font-mono); font-size: 13px; background: var(--wash); padding: 1px 5px; }

/* ---------------------------------------------------------------- the story and pitch makers */
.maker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 40px; align-items: start; }
@container win (max-width: 960px) { .maker { grid-template-columns: 1fr; } }
.maker-rail { display: grid; gap: 30px; min-width: 0; }
.maker-rail .score { grid-template-columns: 1fr auto; gap: 4px 12px; }
.maker-rail .score p { grid-column: 1 / -1; font-size: 13.5px; }
.steps { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 26px; counter-reset: step; }
.steps a { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; color: rgb(7 12 30 / .5); text-decoration: none; }
.steps a::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 28px; height: 28px; font-size: 14px; font-weight: 800; box-shadow: inset 0 0 0 1.25px rgb(7 12 30 / .2); }
.steps a.is-done { color: var(--mk-navy); }
.steps a.is-done::before { content: "✓"; color: var(--mk-green); box-shadow: inset 0 0 0 1.25px var(--mk-navy); }
.steps a[aria-current] { color: var(--mk-navy); }
.steps a[aria-current]::before { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.pieces { display: grid; gap: 12px; }
.piece { display: grid; gap: 10px; padding: 18px 20px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow); }
.piece-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.piece-h h3 { font-size: 19px; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; }
.piece-body { white-space: pre-wrap; font-size: 15.5px; line-height: 1.65; color: var(--mk-ink2); max-height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.piece.is-open .piece-body { max-height: none; -webkit-mask-image: none; mask-image: none; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.checklist li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.45; color: var(--mk-ink2); }
.checklist li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 9px; height: 9px; box-shadow: inset 0 0 0 1.25px var(--mk-flare); }
.checklist--ok li::before { box-shadow: inset 0 0 0 1.25px var(--mk-navy); }
.bullets { margin: 0; padding: 0 0 0 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; color: var(--mk-ink2); }
.bullets li::marker { color: rgb(7 12 30 / .4); }
.kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.kinds button { display: grid; gap: 4px; padding: 14px 14px 12px; border: 0; background: var(--mk-fibre), var(--mk-sheet); box-shadow: inset 0 0 0 1px var(--mk-rule); text-align: left; transition: box-shadow 160ms; }
.kinds button:hover { box-shadow: inset 0 0 0 1.25px var(--mk-navy); }
.kinds button b { font-size: 15px; letter-spacing: -.015em; }
.kinds button small { font-size: 12.5px; line-height: 1.4; color: var(--soft); }
@media (max-width: 560px) { .kinds { grid-template-columns: 1fr 1fr; gap: 6px; } .kinds button { padding: 12px; } .kinds button small { display: none; } }
.kinds button.is-on { box-shadow: inset 0 0 0 1.25px var(--mk-navy), inset 0 -4px 0 var(--mk-green); }
.readiness { display: flex; align-items: baseline; gap: 10px; }
.readiness b { font-size: 34px; font-weight: 800; letter-spacing: -.06em; line-height: 1; }
.angles { display: grid; gap: 10px; }
.angle { display: grid; gap: 6px; padding: 14px 0 14px 16px; box-shadow: inset 2px 0 0 rgb(7 12 30 / .18); }
.angle b { font-size: 16px; letter-spacing: -.02em; line-height: 1.25; }
.angle p { font-size: 14px; color: var(--mk-ink2); }
.angle small { font-size: 13px; line-height: 1.45; color: var(--soft); }
.picklist { list-style: none; margin: 0; padding: 0; display: grid; }
.picklist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--mk-rule2); }
.picklist li b { font-size: 15.5px; letter-spacing: -.015em; }
.picklist li span { grid-column: 1; font-size: 13px; color: var(--soft); }
.picklist li .btn { grid-column: 2; grid-row: 1 / span 2; }
.counter { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--faint); }
.counter.is-over { color: var(--mk-flare); }
.mail { display: grid; gap: 0; background: var(--mk-fibre), #fff; box-shadow: var(--mk-shadow); }
.mail dl { display: grid; grid-template-columns: 72px 1fr; margin: 0; padding: 14px 18px; gap: 6px 10px; font-size: 13.5px; box-shadow: inset 0 -1px 0 var(--mk-rule2); }
.mail dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
.mail dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mail pre { margin: 0; padding: 18px; white-space: pre-wrap; font-family: var(--font-display); font-size: 15px; line-height: 1.6; color: var(--mk-ink2); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.compare > div { display: grid; gap: 6px; align-content: start; }
.compare pre { margin: 0; padding: 14px; max-height: 46vh; overflow: auto; white-space: pre-wrap; font-family: var(--font-display); font-size: 14.5px; line-height: 1.6; background: var(--wash); color: var(--mk-ink2); }
@container win (max-width: 640px) { .compare { grid-template-columns: 1fr; } }
.tools { display: flex; flex-wrap: wrap; gap: 6px; }
.live { white-space: pre-wrap; font-size: 15.5px; line-height: 1.65; color: var(--mk-ink2); min-height: 120px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---- Prompts ---- */
.pr-list { gap: 10px; }
.pr-g + .pr-g, .pr-list .meta + .pr-g { margin-top: 14px; }
.pr-g[hidden], .prompts .qlist li[hidden] { display: none; }
.prompts .qlist li { cursor: var(--mk-nib); }
.pe { gap: 12px; }
.pe-what { font-size: 15.5px; font-weight: 500; line-height: 1.5; color: var(--mk-ink2); max-width: 66ch; }
.pe textarea.pe-text { min-height: 220px; overflow: hidden; resize: none; font-size: 15px; line-height: 1.65; padding: 16px 18px; }
.pe-uses { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pe-uses .meta { margin-right: 2px; }
.pe-uses .meta:not(:first-child) { margin-left: 10px; }
.pe-uses a.chip { text-decoration: none; }
.pe-add { border: 0; background: none; }
.pe-add:hover { color: var(--mk-navy); box-shadow: inset 0 0 0 1px var(--mk-navy); }
.pe-lost { flex-basis: 100%; margin-top: 4px; font-size: 13.5px; }
.pe-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 6px; }
.pe-def { margin-top: 18px; }
.pe-def summary { font-weight: 700; font-size: 14.5px; padding: 6px 0; }
.pe-def .prose { padding: 14px 0 4px; max-width: 72ch; }
.prompts > #pe { margin-top: 0; }
.prompts > #pe .sec { margin-top: 32px; }
@container win (max-width: 960px) { .prompts > #pe { order: -1; } }

/* ---- Newsfeed topics ---- */
.tstrip { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin: -8px 0 18px; }
.tcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: 22px; }
.tcard { display: flex; flex-direction: column; gap: 11px; padding: 20px 22px 16px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow); color: var(--mk-navy); text-decoration: none; transition: box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
.tcard:hover { box-shadow: var(--mk-shadow2); transform: translateY(-1px); }
.tcard--quiet { opacity: .62; }
.tc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tc-title { font-size: 20px; font-weight: 700; letter-spacing: -.035em; line-height: 1.14; }
.tcard:hover .tc-title { text-decoration: underline; text-decoration-thickness: 1.25px; text-underline-offset: 4px; }
.tc-sum { font-size: 14px; font-weight: 500; line-height: 1.48; color: var(--mk-ink2); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tbars { display: flex; align-items: flex-end; gap: 5px; height: 32px; margin-top: auto; padding-top: 4px; }
.tbars i { flex: 1; min-height: 2px; background: rgb(7 12 30 / .3); }
.tbars i.is-today { background: var(--mk-navy); }
.tbars i.is-none { height: 1px !important; background: rgb(7 12 30 / .22); }
.tbars--wide { height: 44px; max-width: 420px; margin-top: 8px; }
.tc-axis { display: flex; justify-content: space-between; font-size: 8.5px; margin-top: -5px; }
.tbars--wide + .tc-axis { max-width: 420px; }
.tc-foot { display: flex; align-items: baseline; min-height: 20px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--mk-rule2); }
.tc-who { display: inline-flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; }
.pdot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--mk-green); }
.tlog { margin-top: 44px; max-width: 820px; }
.tlog .rows a { color: inherit; text-decoration: none; }
.tlog .rows a:hover b { text-decoration: underline; }

@container win (min-width: 961px) { .topic { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); } }
.t-sum { font-size: 19px; font-weight: 500; line-height: 1.55; max-width: 62ch; }
.cite { display: inline-block; min-width: 16px; margin-left: 3px; padding: 0 3px; font-family: var(--font-mono); font-size: 9.5px; line-height: 15px; text-align: center; vertical-align: 5px; color: var(--mk-navy); text-decoration: none; box-shadow: inset 0 0 0 1px rgb(7 12 30 / .3); }
.cite:hover { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.t-points { margin: 4px 0 0; padding: 0 0 0 18px; display: grid; gap: 8px; font-size: 15px; line-height: 1.5; color: var(--mk-ink2); max-width: 64ch; }
.t-do { gap: 12px; }
.t-touch { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.t-touch li { display: flex; gap: 10px; align-items: baseline; font-size: 14.5px; line-height: 1.45; }
.t-angle { grid-template-columns: 90px minmax(0, 1fr); gap: 4px 16px; }
.t-angle > span:last-child { display: grid; gap: 4px; font-size: 14.5px; line-height: 1.45; }
.t-angle .tc-who { margin-top: 2px; }
.srcs { list-style: none; margin: 0; padding: 0; display: grid; }
.srcs li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 32px; gap: 8px; padding: 13px 0; border-bottom: 1px solid var(--mk-rule2); transition: background var(--t-base) var(--ease-out); }
.srcs li.is-hl { background: rgb(7 12 30 / .05); }
.rows > li { transition: background 600ms var(--ease-out); }
.rows > li.is-hl { background: rgb(7 12 30 / .05); }
.src-n { font-family: var(--font-mono); font-size: 10px; color: rgb(7 12 30 / .55); padding-top: 2px; }
.src-b { display: grid; gap: 4px; min-width: 0; }
.src-h { font-size: 14.5px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; color: var(--mk-navy); text-decoration: none; overflow-wrap: anywhere; }
.src-h:hover { text-decoration: underline; }
.src-leave { font-size: 9px; }
.src-x { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: rgb(7 12 30 / .45); }
.src-x:hover { color: var(--mk-navy); }
.src-x .ico { width: 15px; height: 15px; }
.t-src .hint { padding-top: 12px; }
@container win (max-width: 640px) { .t-sum { font-size: 17px; } .t-angle { grid-template-columns: 1fr; } }

/* ---- Submitting a story ---- */
.sub-form { gap: 18px; }
.sp { position: relative; display: grid; gap: 10px; padding: 22px 24px 20px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow); }
.sp-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 12px; }
.sp-n { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: rgb(7 12 30 / .5); }
.sp-q { font-size: 19px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.sp .hint { margin-top: -4px; }
.sp textarea.sp-text { min-height: 64px; overflow: hidden; resize: none; font-size: 16px; line-height: 1.6; }
.sp-title { width: 100%; box-sizing: border-box; border: 0; background: transparent; padding: 4px 0 8px; font: 800 clamp(22px, 2.6vw, 30px) / 1.15 var(--font-display); letter-spacing: -.045em; color: var(--mk-navy); box-shadow: inset 0 -1.25px 0 rgb(7 12 30 / .25); outline: 0; }
.sp-title:focus { box-shadow: inset 0 -2px 0 var(--mk-green); }
.sp-title::placeholder { color: rgb(7 12 30 / .28); }
.sp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 8px; }
.sp-tools > .meta:last-child { margin-left: auto; }
.pe-add[aria-pressed=true] { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.sp-date { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 4px 0 6px; }
.sp-date label { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.sp-date input.in { width: 190px; height: 36px; padding: 0 10px; box-sizing: border-box; font-size: 14.5px; font-weight: 600; background: var(--mk-sheet); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .25); }
.sp-date input.in:focus { box-shadow: inset 0 0 0 1px var(--mk-navy), inset 0 -2px 0 var(--mk-green); }
.sp-date .btn--sm { height: 36px; }
.person { flex-basis: 100%; display: grid; gap: 12px; margin-top: 6px; padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--mk-rule); }
.langs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.langs-other { width: 120px; height: 28px; font-size: 13px; }
.sub-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 6px; }
.sub-side { position: sticky; top: 24px; }
.sub-read { gap: 14px; }
.crit { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.crit li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; padding: 7px 0; }
.crit-box { width: 16px; height: 16px; margin-top: 2px; box-shadow: inset 0 0 0 1.25px rgb(7 12 30 / .35); }
.crit li.is-ok .crit-box { box-shadow: inset 0 0 0 1.25px var(--mk-navy); }
.crit b { display: block; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; color: rgb(7 12 30 / .62); }
.crit li.is-ok b { color: var(--mk-navy); font-weight: 700; }
.crit small { display: block; font-size: 12.5px; line-height: 1.4; color: rgb(7 12 30 / .55); }
.crit small:empty { display: none; }
.sub-ai { display: grid; gap: 10px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--mk-rule); }
.sub-said { display: grid; gap: 8px; padding-top: 4px; }
.sub-said p { font-size: 14.5px; line-height: 1.5; }
@container win (max-width: 960px) { .sub-side { position: static; } }
@media (max-width: 720px) { .sp { padding: 18px 16px; } .sp-q { font-size: 17px; } }

/* rep. AI's suggestion, under the part it's for: the editor's version, with a margin note in the hand */
.sugg { display: grid; gap: 10px; }
.sugg-card { display: grid; gap: 10px; margin-top: 4px; padding: 16px 18px; box-shadow: inset 3px 0 0 var(--mk-navy), inset 0 0 0 1px var(--mk-rule); }
.sugg-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.sugg .mk-note { white-space: normal; font-size: 15px; }
.sugg textarea.sugg-text { min-height: 60px; overflow: hidden; resize: none; font-size: 15.5px; line-height: 1.6; background: transparent; }
.sugg-ok, .sugg-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.sugg-done .ico { width: 16px; height: 16px; color: var(--mk-green); }
.sugg-asks ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; color: var(--mk-ink2); }
.sugg-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: 8px; padding: 12px 16px; box-shadow: inset 3px 0 0 var(--mk-navy), inset 0 0 0 1px var(--mk-rule); }
.sugg-line > span:first-child { display: grid; gap: 4px; }
.sugg-line b { font-size: 17px; letter-spacing: -.02em; }

/* photos and video */
.drop { display: flex; align-items: center; gap: 14px; padding: 16px 18px; box-shadow: inset 0 0 0 1.25px rgb(7 12 30 / .3); background: repeating-linear-gradient(-45deg, transparent 0 9px, rgb(7 12 30 / .025) 9px 10px); transition: box-shadow var(--t-fast); }
.drop:hover, .drop.is-over { box-shadow: inset 0 0 0 1.5px var(--mk-navy); }
.drop .ico { width: 22px; height: 22px; transform: rotate(180deg); }
.drop b { display: block; font-size: 15px; }
.drop small { display: block; font-size: 12.5px; color: rgb(7 12 30 / .55); }
.mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; }
.mgrid:empty { display: none; }
.mtile { position: relative; margin: 0; display: grid; gap: 6px; align-content: start; min-width: 0; }
.mtile-v { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: rgb(7 12 30 / .06); }
.mtile-v img, .mtile-v video { width: 100%; height: 100%; object-fit: cover; display: block; }
.mtile-play { position: absolute; left: 8px; bottom: 8px; display: grid; place-items: center; width: 28px; height: 28px; background: var(--mk-navy); color: var(--mk-sheet); }
.mtile-play .ico { width: 15px; height: 15px; }
.mtile figcaption { display: grid; gap: 2px; min-width: 0; }
.mtile-n { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtile-x { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: var(--mk-sheet); color: var(--mk-navy); box-shadow: var(--mk-shadow); }
.mtile-x .ico { width: 14px; height: 14px; }
.mtile.is-up { padding: 14px 12px; box-shadow: inset 0 0 0 1px var(--mk-rule); }
.mtile-bar { height: 2px; background: rgb(7 12 30 / .1); }
.mtile-bar i { display: block; height: 100%; width: 0; background: var(--mk-green); transition: width 200ms linear; }
.crit-box { display: grid; place-items: center; }
.crit-box .ico { width: 20px; height: 20px; margin: -4px -3px 0 0; color: var(--mk-green); }

/* ---- Fields that suggest (pick.js) ---- */
.pick-list { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: 2px 0 0; padding: 4px 0; list-style: none; max-height: 264px; overflow-y: auto; background: var(--mk-sheet); box-shadow: var(--mk-shadow2), inset 0 0 0 1px var(--mk-rule); }
.pick-list li { padding: 9px 14px; font-size: 14.5px; font-weight: 500; color: var(--mk-ink2); cursor: var(--mk-nib); }
.pick-list li b { font-weight: 800; color: var(--mk-navy); }
.pick-list li:hover, .pick-list li[aria-selected=true] { background: rgb(7 12 30 / .05); color: var(--mk-navy); }
.tagf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; padding: 4px 0 6px; box-shadow: inset 0 -1.25px 0 rgb(7 12 30 / .25); cursor: text; }
.tagf:focus-within { box-shadow: inset 0 -2px 0 var(--mk-green); }
.tagf-chips { display: contents; }
.tagf-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; background: var(--mk-navy); color: var(--mk-sheet); font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.tagf-chip button { width: 22px; height: 22px; padding: 0; border: 0; background: none; color: inherit; font-size: 16px; line-height: 1; opacity: .7; }
.tagf-chip button:hover { opacity: 1; }
.tagf-in { flex: 1; min-width: 140px; height: 30px; padding: 0 2px; border: 0; background: transparent; font-size: 15.5px; font-weight: 500; color: var(--mk-navy); outline: 0; }
.tagf-in::placeholder { color: rgb(7 12 30 / .3); }
.tagf-quick { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
.pick-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.f + .pick-chips { margin-top: -6px; }
.pick-chip { position: relative; display: inline-flex; }
.pick-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; }
.pick-chip span { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1.25px rgb(7 12 30 / .3); }
.pick-chip input:checked + span { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.pick-chip input:focus-visible + span { outline: 2px solid var(--mk-green); outline-offset: 2px; }
.f .tagf input.tagf-in:not([type=checkbox]) { height: 30px; padding: 0 2px; background: none; box-shadow: none; }
.dlg-h h2.no-dot::after { display: none; } /* a title that ends in its own ? or ! keeps it */

/* ---- CSV import: matching columns to rep.'s fields ---- */
.imap td { vertical-align: top; }
.imap td:first-child { white-space: nowrap; }
.imap-s { display: grid; gap: 2px; max-width: 300px; font-size: 12.5px; color: var(--mk-ink2); }
.imap-s span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imap select.in { min-width: 190px; height: 34px; font-size: 14px; }
.imap tr.is-off td:not(:nth-child(3)) { opacity: .55; }
.imap-cover { display: grid; gap: 8px; }
.imap-cover p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.imap-cover .meta { margin-right: 4px; }

/* ---- Media contacts: one column of cards, with lists and outlets as pills ---- */
.pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px; }
.pills > .meta { margin-right: 4px; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border: 0; background: transparent; box-shadow: inset 0 0 0 1.25px rgb(7 12 30 / .25); color: var(--mk-navy); font-size: 14px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; }
.pill i { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: rgb(7 12 30 / .55); }
.pill:hover { box-shadow: inset 0 0 0 1.25px var(--mk-navy); }
.pill[aria-current], .pill[aria-pressed=true] { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.pill[aria-current] i, .pill[aria-pressed=true] i { color: rgb(252 251 248 / .65); }
.pill--add { color: rgb(7 12 30 / .62); box-shadow: none; text-decoration: underline; text-decoration-color: rgb(7 12 30 / .3); text-underline-offset: 4px; }
.pill[hidden] { display: none; }
.ct-lists { padding-bottom: 18px; box-shadow: inset 0 -1px 0 var(--mk-rule2); }
.ct-listacts { display: inline-flex; gap: 4px; margin-left: auto; }
.ct-outlets { margin-top: -4px; }
.ct-ofilter { width: 180px; height: 32px; font-size: 14px; }
.ct-sel { position: sticky; top: 8px; z-index: 5; padding: 10px 14px; background: var(--mk-sheet); box-shadow: var(--mk-shadow); align-items: center; }
.ct-count { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.ccards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.ccard { gap: 6px; padding-top: 18px; }
.ccard h3 { padding-right: 34px; font-size: 18px; }
.ccard .role b { font-weight: 700; color: var(--mk-navy); }
.ccard-pick { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 30px; height: 30px; }
.ccard-pick input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; box-shadow: inset 0 0 0 1.25px rgb(7 12 30 / .4); background: var(--mk-sheet); }
.ccard-pick input:checked { background: var(--mk-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.6 9.8 17.2 19.4 6.4' fill='none' stroke='%23fcfbf8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; box-shadow: none; }
.ccard-outlet { justify-self: start; max-width: calc(100% - 34px); padding: 0; border: 0; background: none; text-align: left; font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--mk-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard-outlet span { color: rgb(7 12 30 / .55); }
.ccard-outlet:hover { text-decoration: underline; text-underline-offset: 3px; }
.ccard-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--mk-rule2); }
@media (max-width: 720px) {
  .ct-listacts { margin-left: 0; }
  .pill { height: 36px; }
  /* On a phone the pills are one row you swipe along; all the outlets wrap once they're opened up. */
  .ct-lists, .ct-outlets:not(.is-all) { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding-inline: 16px; scrollbar-width: none; }
  .ct-lists::-webkit-scrollbar, .ct-outlets::-webkit-scrollbar { display: none; }
  .ct-lists > *, .ct-outlets > * { flex: none; }
}

/* ---------------------------------------------------------------- newsfeed search */
.tbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; margin-bottom: 24px; box-shadow: inset 0 -1px 0 var(--mk-rule); }
.tbar .tabs { margin: 0; box-shadow: none; }
.tfind { position: relative; display: flex; align-items: center; flex: 0 1 340px; min-width: 0; margin-bottom: 8px; }
.tfind .ico { position: absolute; left: 11px; width: 17px; height: 17px; color: rgb(7 12 30 / .45); pointer-events: none; }
.tfind .in { width: 100%; padding-left: 36px; padding-right: 34px; }
.tfind kbd { position: absolute; right: 10px; padding: 1px 6px; box-shadow: inset 0 0 0 1px var(--mk-rule); font-size: 10px; pointer-events: none; }
.tfind .in:focus ~ kbd, .tfind .in:not(:placeholder-shown) ~ kbd { display: none; }
.tfound { margin: -12px 0 16px; }
.tcard mark, .tc-hit mark { background: rgb(59 194 76 / .22); color: inherit; padding: 0 1px; }
.tc-hit { display: grid; gap: 2px; padding: 8px 10px; background: rgb(7 12 30 / .035); font-size: 13.5px; line-height: 1.4; color: rgb(7 12 30 / .75); }
.tnone { grid-column: 1 / -1; display: grid; gap: 6px; justify-items: start; padding: 28px 0; max-width: 60ch; }
.tnone span:not(.actions) { color: var(--soft); }
@media (max-width: 720px) { .tfind { flex: 1 1 100%; } }

/* ---------------------------------------------------------------- documents (docs/editor.js) */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 0 7px 0 6px; margin: 0 1px; background: var(--mk-sheet); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .18); font-size: .88em; font-weight: 700; line-height: 1.6; white-space: nowrap; color: var(--mk-navy); text-decoration: none; vertical-align: 1px; cursor: pointer; }
.pill::before { content: ""; flex: none; width: 7px; height: 7px; }
/* A record's pill sits inside a line of text: no taller than the line, whatever height the filter-button .pill above
   (and its phone size) would give it. */
.pill[class*=" p-"], .pill[class^="p-"] { height: auto; line-height: 1.45; }
.p-spokesperson::before { border-radius: 50%; background: var(--mk-green); }
.p-contact::before { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--mk-navy); }
.p-member::before { background: var(--mk-navy); }
.p-topic::before { content: "#"; width: auto; height: auto; font-family: var(--font-mono); font-size: 11px; color: #1d7f2c; }
.p-source::before { content: "↗"; width: auto; height: auto; font-size: 11px; color: rgb(7 12 30 / .7); }
.p-story::before { width: 9px; height: 7px; box-shadow: inset 0 0 0 1.5px var(--mk-green); }
.p-pitch::before { content: "→"; width: auto; height: auto; font-size: 11px; color: rgb(7 12 30 / .7); }
.p-piece::before { width: 7px; height: 9px; box-shadow: inset 0 0 0 1.5px rgb(7 12 30 / .7); }
.pill--sugg { box-shadow: inset 0 0 0 1.5px var(--mk-green); background: rgb(59 194 76 / .08); }

.doc { position: relative; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow); padding: 34px 44px 40px 30px; }
.doc-body { outline: 0; font-size: 17px; line-height: 1.7; color: var(--mk-navy); min-height: 240px; }
.doc-body > * + * { margin-top: 14px; }
.doc-body p, .doc-body h2, .doc-body h3 { position: relative; margin-bottom: 0; padding-left: 19px; }
.doc-body > :first-child { margin-top: 0; }
.doc-body h2 { font-size: 22px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2; padding-top: 6px; }
.doc-body h3 { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgb(7 12 30 / .62); padding-top: 8px; }
.doc-body ul, .doc-body ol { margin: 0; padding-left: 40px; }
.doc-body li p { padding-left: 0; }
.doc-body .by::before { content: ""; position: absolute; left: 0; top: .25em; bottom: .25em; width: 3px; background: var(--by); }
.doc-body li .by::before { left: -40px; }
.has-sugg .doc-body p.is-editor-empty:first-child::before { content: none; }
.doc-body p.is-editor-empty:first-child::before { content: attr(data-placeholder); color: rgb(7 12 30 / .38); pointer-events: none; float: left; height: 0; }
.doc-body strong { font-weight: 800; }
.collaboration-cursor__caret { position: relative; margin: 0 -1px; border-left: 2px solid; border-right: 0; word-break: normal; pointer-events: none; }
.collaboration-cursor__label { position: absolute; left: -2px; top: -1.45em; padding: 0 5px; font-size: 10.5px; font-weight: 700; line-height: 1.5; color: #fff; white-space: nowrap; user-select: none; pointer-events: none; }
.doc-status { font-size: 12.5px; color: rgb(7 12 30 / .62); }
.doc-status.is-off { color: var(--mk-flare); font-weight: 700; }
.mpick { position: absolute; z-index: 60; width: min(340px, calc(100vw - 16px)); max-height: 320px; overflow: auto; background: var(--mk-sheet); box-shadow: var(--mk-shadow2); display: grid; padding: 4px 0; }
.mpick-i { appearance: none; border: 0; background: none; font: inherit; text-align: left; display: grid; gap: 2px; padding: 7px 12px; cursor: pointer; }
.mpick-i small { font-size: 12px; color: rgb(7 12 30 / .62); }
.mpick-i.on, .mpick-i:hover { background: rgb(7 12 30 / .05); }
.mpick-none { margin: 0; padding: 10px 12px; font-size: 13px; color: rgb(7 12 30 / .62); }

/* ---------------------------------------------------------------- the workspace (workspace.js) */
.avatar--xs { width: 18px; height: 18px; font-size: 9px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the windows' tab bar: each open record as a pill with its icon and title. Pills share the bar, narrowing (titles cut
   short) down to a readable minimum before the bar scrolls. The current one is filled navy. */
.tabbar { flex: none; position: relative; z-index: 5; display: flex; align-items: center; gap: 12px; height: var(--top); padding-right: 12px; background: var(--mk-sheet); box-shadow: inset 0 -1px 0 var(--mk-rule); }
.wtabs { position: relative; flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; height: 100%; padding: 0 12px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.wtabs::-webkit-scrollbar { display: none; }
.wtabs:not(:has(.wtab))::before { content: "Stories, pitches and people you open stay here."; padding-left: 4px; font-size: 12.5px; color: rgb(7 12 30 / .42); white-space: nowrap; animation: veil-in 400ms var(--ease-out); }
.wtab { position: relative; flex: 1 1 0; display: flex; align-items: center; min-width: 108px; max-width: 220px; height: 34px; overflow: hidden; border-radius: 999px; color: rgb(7 12 30 / .7); box-shadow: inset 0 0 0 1px var(--mk-rule);
  transition: color 160ms, background-color 200ms, box-shadow 200ms, max-width 260ms var(--ease-out), min-width 260ms var(--ease-out), opacity 200ms, margin 260ms var(--ease-out); }
.wtab a { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; height: 100%; padding: 0 2px 0 12px; color: inherit; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.wtab a .ico { width: 15px; height: 15px; }
.wtab-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtab-x { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-right: 6px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; opacity: 0; transition: opacity 160ms, background-color 160ms; }
.wtab-x .ico { width: 11px; height: 11px; }
.wtab:hover .wtab-x, .wtab.is-here .wtab-x, .wtab-x:focus-visible { opacity: .7; }
.wtab-x:hover { opacity: 1 !important; background: rgb(7 12 30 / .08); }
.wtab:hover { color: var(--mk-navy); background: rgb(7 12 30 / .04); }
.wtab.is-here { color: var(--mk-sheet); background: var(--mk-navy); box-shadow: none; }
.wtab.is-here .wtab-x:hover { background: rgb(252 251 248 / .16); }
.wtab.is-here svg.ico .ac { stroke: var(--mk-green); }
.wtab.is-new { animation: tab-in 320ms var(--ease-out); }
.wtab.is-going { min-width: 0; margin-left: -6px; opacity: 0; pointer-events: none; }
@keyframes tab-in { from { opacity: 0; transform: translateY(4px) scale(.94); } }
.presence { flex: none; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgb(7 12 30 / .7); }
.presence > * { animation: veil-in 300ms var(--ease-out); }
.pres { display: flex; } .pres .avatar + .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--mk-sheet); }
.find-r { list-style: none; margin: 10px 0 0; padding: 0; display: grid; max-height: 50vh; overflow: auto; }
.find-r a, .find-b { display: grid; gap: 2px; padding: 8px 10px; text-decoration: none; color: var(--mk-navy); appearance: none; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; width: 100%; transition: background-color 120ms; }
.find-r a.on, .find-r a:hover, .find-b:hover { background: rgb(7 12 30 / .05); }
.find-r small, .find-b small { font-size: 12px; color: rgb(7 12 30 / .62); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mk-green); }
/* a new page settles in: its parts rise a few pixels into place, one after another */
.view.is-new > * { animation: rise-in 440ms var(--ease-out) backwards; }
.view.is-new > :nth-child(2) { animation-delay: 50ms; } .view.is-new > :nth-child(3) { animation-delay: 90ms; } .view.is-new > :nth-child(4) { animation-delay: 120ms; } .view.is-new > :nth-child(n+5) { animation-delay: 150ms; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } }
.place-tabs { margin-bottom: 26px; }
.tabs--sm a { font-size: 13px; }
.in--sm { width: auto; padding: 4px 24px 4px 8px; font-size: 12.5px; }

/* home */
.ocards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.ocard { display: grid; gap: 6px; align-content: start; padding: 14px 16px; background: var(--mk-sheet); box-shadow: inset 0 0 0 1px var(--mk-rule); text-decoration: none; color: var(--mk-navy); }
.ocard b { font-size: 15px; line-height: 1.3; }
.ocard.is-live { box-shadow: inset 0 0 0 1px var(--mk-rule), inset 0 3px 0 var(--mk-green); }
.ocard-live { display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 700; color: #a3431a; }
.trows { list-style: none; margin: 0; padding: 0; display: grid; }
.trow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--mk-rule2); font-size: 14px; }
.trow a { color: inherit; text-decoration: none; }

/* the desk: one board, read left to right. Lanes keep a readable width and the board scrolls sideways when the
   windows column is narrow (snapping lane by lane on a phone), rather than squeezing five lanes into the space. */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--pad)); padding: 0 var(--pad) 12px; scroll-padding-inline: var(--pad); scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: rgb(7 12 30 / .18) transparent; }
.bcol { display: grid; gap: 8px; align-content: start; min-width: 0; scroll-snap-align: start; }
.bcol-h { display: flex; justify-content: space-between; align-items: center; padding: 8px 0 6px; box-shadow: inset 0 2px 0 var(--mk-navy); font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgb(7 12 30 / .6); }
.bcol-h .badge { font-family: var(--font-display); letter-spacing: 0; }
.bcol-none { padding: 14px 2px; font-size: 12.5px; line-height: 1.45; color: rgb(7 12 30 / .45); box-shadow: inset 0 -1px 0 var(--mk-rule2); }
.queue { list-style: none; margin: 0; padding: 0; display: grid; }
.qi { display: grid; gap: 4px; padding: 12px 0 13px; box-shadow: inset 0 -1px 0 var(--mk-rule2); transition: opacity .3s; }
.qi.is-done { opacity: .35; }
.qi-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; }
.qi-clock { flex: none; font-size: 11.5px; color: rgb(7 12 30 / .55); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qi-clock.is-due { color: var(--mk-flare); font-weight: 700; }
.qi-t { font-weight: 800; font-size: 15px; line-height: 1.3; color: var(--mk-navy); text-decoration: none; }
.qi-s { font-size: 13px; color: rgb(7 12 30 / .66); }
.qi .actions { padding-top: 6px; }
.bcard, .bcol .qi { display: grid; gap: 6px; padding: 11px 12px 11px 14px; background: var(--mk-sheet); box-shadow: inset 3px 0 0 var(--k, transparent), inset 0 0 0 1px var(--mk-rule); text-decoration: none; color: var(--mk-navy);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out), opacity 300ms; }
.bcard:hover { transform: translateY(-2px); box-shadow: inset 3px 0 0 var(--k, transparent), inset 0 0 0 1px rgb(7 12 30 / .18), var(--mk-shadow); }
.bcard b { font-size: 13.5px; line-height: 1.3; }
.bcard .chip { justify-self: start; }
.card-rows { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 5px 8px; margin: 2px 0 0; padding-top: 8px; box-shadow: inset 0 1px 0 var(--mk-rule2); font-size: 12px; }
.card-rows dt { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: rgb(7 12 30 / .45); }
.card-rows dd { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; color: rgb(7 12 30 / .78); }
.card-rows dd span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard-m { font-size: 11.5px; color: rgb(7 12 30 / .62); }
/* tones: what a card is about, as a square of colour on its label and an edge on its card (the label says it in words).
   Four hues checked for colour-blind separation and kept clear of the green (a person) and the red pen (errors). */
.k-member { --k: #2a78d6; } .k-news { --k: #dfa400; } .k-people { --k: #b03c8c; } .k-announce { --k: #13a39a; }
.k-issue, .k-reply { --k: var(--mk-navy); } .k-time { --k: rgb(7 12 30 / .3); }
.chip.k { color: var(--mk-navy); }
.chip.k::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--k); }
.k-reply .chip.k::before { background: none; box-shadow: inset 0 0 0 1.5px var(--mk-navy); }
/* the Waiting lane: the queue's items as cards, each with its decision keys */
.bcol .queue { gap: 8px; }
.bcol .qi-t { font-size: 13.5px; }
.bcol .qi-s { font-size: 12px; }
.bcol .qi .actions { gap: 6px; padding-top: 4px; }
.bcol .qi.is-done { opacity: 0; transform: translateX(12px); }
/* the board's filter: two keys, set like the story's stage toggle */
.seg a { display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: rgb(7 12 30 / .72); text-decoration: none; transition: background-color 160ms, color 160ms; }
.seg a:hover { color: var(--mk-navy); }
.seg a[aria-current] { background: var(--mk-navy); color: var(--mk-sheet); }

/* a story */
.story { max-width: 820px; margin: 0 auto; display: grid; gap: 18px; }
.story-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.crumb { font-size: 13px; color: rgb(7 12 30 / .62); }
.crumb a { color: inherit; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 19px; background: var(--mk-sheet); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .2); }
.seg button { appearance: none; border: 0; background: transparent; font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px; transition: background-color 200ms var(--ease-out), color 200ms; color: rgb(7 12 30 / .72); cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--mk-navy); color: var(--mk-sheet); }
.title-in { display: block; width: 100%; border: 0; background: none; padding: 0; resize: none; overflow: hidden; field-sizing: content; font: inherit; font-size: clamp(28px, 4vw, 40px); font-weight: 900; line-height: 1.08; letter-spacing: -.03em; color: var(--mk-navy); outline: 0; }
.title-in:focus { box-shadow: inset 0 -2px 0 var(--mk-green); }
.title-in--subject { font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -.02em; line-height: 1.2; }
.story-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 13px; }
.sel-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 8px; box-shadow: inset 0 0 0 1px var(--mk-rule); background: var(--mk-sheet); }
.sel-pill > span { font-size: 12px; color: rgb(7 12 30 / .62); }
.sel-pill select { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 13px; color: var(--mk-navy); padding: 3px 2px; max-width: 220px; }
.refs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.pill-x { appearance: none; border: 0; background: none; font: inherit; padding: 0 0 0 4px; color: rgb(7 12 30 / .5); cursor: pointer; }
.doc--piece { padding: 22px 26px 26px 14px; margin: 10px 0; box-shadow: inset 0 0 0 1px var(--mk-rule); }
.doc--piece .doc-body { min-height: 120px; font-size: 15.5px; }
.intake { display: grid; gap: 12px; padding-top: 12px; }
.notes textarea { background: rgb(7 12 30 / .03); }
.person-row .actions { gap: 6px; }

/* a pitch */
/* a person's page (person.js): a spokesperson or a journalist, set out to read */
.ppage { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.person-h { display: flex; align-items: center; gap: 20px; }
.person-h .avatar--lg { width: 64px; height: 64px; font-size: 26px; }
.person-t { display: grid; gap: 6px; min-width: 0; }
.person-name { font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -.045em; line-height: 1.05; }
.person-name span { font-size: .45em; font-weight: 500; letter-spacing: 0; color: rgb(7 12 30 / .55); }
.person-sub { font-size: 16px; color: var(--mk-ink2); }
.person-sub a { color: inherit; }
.person-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.person-kv { padding: 18px 20px; background: var(--mk-sheet); box-shadow: inset 0 0 0 1px var(--mk-rule); font-size: 14px; }
.person-kv dd { font-weight: 600; }
.person-kv a { color: inherit; text-decoration-color: rgb(7 12 30 / .3); text-underline-offset: 3px; }
.person-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.person-tags .pill { height: 28px; font-size: 13px; cursor: default; }
.person-p { font-size: 15.5px; line-height: 1.6; color: var(--mk-ink2); white-space: pre-wrap; }
.person-note { font-size: 12.5px; color: rgb(7 12 30 / .6); white-space: nowrap; }
.ppage .trow { grid-template-columns: auto minmax(0, 1fr) auto; }
.ppage .trow a b { font-weight: 700; }
.card-name { color: inherit; text-decoration: none; }
.card-name:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.pill-a { color: inherit; text-decoration: none; }
.pill-a:hover { text-decoration: underline; text-underline-offset: 3px; }
@container win (max-width: 640px) { .ppage .trow { grid-template-columns: minmax(0, 1fr); gap: 4px; } .person-note { white-space: normal; } }
/* a pitch: one column, the pitch first and the story it's from folded underneath */
.pitch { max-width: 820px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.subject { display: grid; gap: 4px; }
.pitch-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; }
.pitch-acts [data-send] { margin-left: auto; }
/* a fold: a heading row that opens a section underneath, smoothly */
.fold { margin-top: 18px; background: var(--mk-sheet); box-shadow: inset 0 0 0 1px var(--mk-rule); }
.fold-h { box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: none; color: var(--mk-navy); text-align: left; font: inherit; transition: background-color 160ms; }
.fold-h:hover { background: rgb(7 12 30 / .025); }
.fold-h > .ico { width: 18px; height: 18px; flex: none; }
.fold-h > .ico:last-child { width: 13px; height: 13px; color: rgb(7 12 30 / .45); transition: transform 320ms var(--mk-hand); }
.fold.is-open .fold-h > .ico:last-child { transform: rotate(180deg); }
.fold-t { display: grid; gap: 3px; min-width: 0; margin-right: auto; }
.fold-t b { font-size: 15px; font-weight: 800; letter-spacing: -.015em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fold-n { flex: none; font-size: 12px; color: rgb(7 12 30 / .55); }
.fold-b { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 440ms var(--ease-out), opacity 300ms var(--ease-out); }
.fold.is-open .fold-b { grid-template-rows: 1fr; opacity: 1; }
.fold-b > div { min-height: 0; overflow: hidden; }
.pitch-story-b { display: grid; gap: 8px; padding: 4px 18px 14px 46px; font-size: 14px; line-height: 1.6; color: rgb(7 12 30 / .82); }
.pitch-story-b p { margin: 0; }
.pitch-story-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 14px 46px; box-shadow: inset 0 1px 0 var(--mk-rule2); }
.to { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.vtabs { margin: 4px 0 0; }
.vtabs button { appearance: none; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 12px; color: rgb(7 12 30 / .66); cursor: pointer; }
.vtabs button[aria-selected="true"] { color: var(--mk-navy); box-shadow: inset 0 -2px 0 var(--mk-navy); }
.counter.is-over { color: var(--mk-flare); }
@container win (max-width: 640px) { .board { grid-auto-columns: 82%; scroll-snap-type: x mandatory; } }
@media (max-width: 720px) { .presence .pres-t { display: none; } }

/* ---------------------------------------------------------------- Ansar's panel (ansar/panel.js) */
/* The column: a header (the conversation, new, close on small screens), the log, and the ask box with what Ansar sees. */
.ans-grip::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: var(--mk-green); opacity: 0; transition: opacity 160ms; }
.ans-grip:hover::after, .is-resizing .ans-grip::after { opacity: 1; }
.ans-h { flex: none; display: flex; align-items: center; gap: 2px; height: var(--top); padding: 0 8px 0 10px; box-shadow: inset 0 -1px 0 var(--mk-rule); }
.ans-title { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; height: 38px; padding: 0 8px; border: 0; background: none; color: var(--mk-navy); font: 800 15px/1 var(--font-display); letter-spacing: -.02em; transition: background-color 160ms; }
.ans-title:hover, .ans-title[aria-expanded=true] { background: rgb(7 12 30 / .04); }
.ans-title > .ico { width: 13px; height: 13px; color: rgb(7 12 30 / .45); transition: transform 300ms var(--mk-hand); }
.ans-title[aria-expanded=true] > .ico { transform: rotate(180deg); }
.ans-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans-mark { flex: none; display: block; }
/* earlier conversations drop down under the title */
.ans-list { position: absolute; z-index: 8; top: var(--top); left: 8px; right: 8px; max-height: min(60%, 460px); overflow: auto; padding: 6px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow2); transform-origin: top; animation: drop-in 280ms var(--ease-out); }
.ans-list-h { padding: 8px 8px 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgb(7 12 30 / .5); }
.ans-list ul { list-style: none; margin: 0; padding: 0; display: grid; }
.ans-list button { box-sizing: border-box; display: grid; gap: 3px; width: 100%; padding: 9px 8px; border: 0; background: none; text-align: left; font: inherit; color: var(--mk-navy); transition: background-color 120ms; }
.ans-list button b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans-list button small { font-size: 11.5px; color: rgb(7 12 30 / .6); }
.ans-list button:hover { background: rgb(7 12 30 / .045); }
.ans-list button.is-here { box-shadow: inset 2px 0 0 var(--mk-green); }
.ans-list .soft { padding: 6px 8px 10px; font-size: 13px; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px) scaleY(.97); } }

.ans-log { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: 34px; padding: 18px 16px 22px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgb(7 12 30 / .15) transparent; }
.ans-empty { margin: auto 0; display: grid; gap: 14px; justify-items: start; padding: 4px; }
.ans-empty > * { animation: rise-in 480ms var(--ease-out) backwards; }
.ans-empty > :nth-child(2) { animation-delay: 60ms; } .ans-empty > :nth-child(3) { animation-delay: 120ms; }
.ans-empty p { max-width: 36ch; font-size: 14px; line-height: 1.5; color: var(--mk-ink2); }
.ans-empty p b { color: var(--mk-navy); }
.ans-try { display: grid; width: 100%; box-shadow: inset 0 1px 0 var(--mk-rule2); }
.ans-try button { box-sizing: border-box; width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 11px 2px; border: 0; background: none; box-shadow: inset 0 -1px 0 var(--mk-rule2); color: var(--mk-navy); text-align: left; font: 600 13.5px/1.3 var(--font-display); letter-spacing: -.01em; }
.ans-try .ico { width: 14px; height: 14px; opacity: .3; transition: transform 280ms var(--mk-hand), opacity 160ms; }
.ans-try button:hover .ico { opacity: 1; transform: translateX(3px); }
.ans-note { padding: 9px 11px; background: rgb(7 12 30 / .04); font-size: 12.5px; color: rgb(7 12 30 / .7); display: grid; gap: 8px; }

/* a run: the request, Ansar's steps as a thread of icons, what it said, its suggestions */
.ans-run { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
.ans-me { justify-self: end; margin-bottom: 10px; max-width: 86%; padding: 9px 13px; background: var(--mk-navy); color: var(--mk-sheet); font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.ans-run.is-new .ans-me { transform-origin: right bottom; animation: msg-in 380ms var(--ease-out) backwards; }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.ans-work { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ans-run.is-new .ans-work { animation: veil-in 300ms 120ms var(--ease-out) backwards; }
.ans-work-h { justify-self: start; display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 6px 0 0; border: 0; background: none; color: rgb(7 12 30 / .6); font: 600 12.5px/1 var(--font-display); transition: color 160ms; }
.ans-work-h:hover { color: var(--mk-navy); }
.ans-work-h > .ico { width: 11px; height: 11px; transform: rotate(-90deg); transition: transform 320ms var(--mk-hand); }
.ans-work.is-open .ans-work-h > .ico { transform: none; }
.ans-n::before { content: "·"; margin-right: 8px; }
.ans-n:empty { display: none; }
/* while Ansar works, its state reads as a pen line passing over the words */
.ans-work-h:has(.ans-st.is-running) [data-state] { background: linear-gradient(90deg, var(--mk-navy) 30%, rgb(7 12 30 / .28) 50%, var(--mk-navy) 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.8s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ans-work-b { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 420ms var(--ease-out), opacity 280ms var(--ease-out); }
.ans-work.is-open .ans-work-b { grid-template-rows: 1fr; opacity: 1; }
.ans-work-b > ol { min-height: 0; overflow: hidden; list-style: none; margin: 0; padding: 4px 0 0 1px; }
.ans-step { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); overflow-wrap: anywhere; gap: 11px; padding: 5px 0 6px; font-size: 12.5px; line-height: 1.4; color: rgb(7 12 30 / .72); }
.ans-step::before { content: ""; position: absolute; left: 7.5px; top: 23px; bottom: -5px; width: 1px; background: var(--mk-rule); }
.ans-step:last-child::before { display: none; }
.ans-step .ico { width: 16px; height: 16px; color: rgb(7 12 30 / .5); }
.ans-step.is-new { animation: step-in 400ms var(--ease-out) backwards; }
.ans-step.is-err span { color: var(--mk-flare); }
.ans-work-h:has(.ans-st.is-running) + .ans-work-b .ans-step:last-child .ico { color: var(--mk-navy); }
@keyframes step-in { from { opacity: 0; transform: translateX(-8px); } }
.ans-st { position: relative; flex: none; display: grid; place-items: center; width: 18px; height: 18px; }
.ans-st .amark { display: block; }
.ans-st .marks { position: absolute; left: -9px; top: -9px; width: 36px; height: 36px; overflow: visible; pointer-events: none; }
.ans-st .marks > g { display: none; }
/* while a proof mark plays the caret steps aside, leaving the period; it comes back when Ansar rests */
.ans-st .amark path { transition: opacity 260ms var(--ease-out); }
.ans-st:is([data-act="think"], [data-act="search"], [data-act="write"], [data-act="ask"], [data-act="done"]) .amark path { opacity: 0; }
/* the period sits low in the mark (31.8 of 48), so while it's on its own it rises to the middle of the line */
.ans-st .amark, .ans-st .marks { transition: transform 260ms var(--ease-out); }
.ans-st:is([data-act="think"], [data-act="search"], [data-act="write"], [data-act="ask"], [data-act="done"]) .amark { transform: translateY(-16.25%); }
.ans-st:is([data-act="think"], [data-act="search"], [data-act="write"], [data-act="ask"], [data-act="done"]) .marks { transform: translateY(-8.125%); }
.ans-st .marks path[pathLength] { stroke-dasharray: 1; }
.ans-st.is-failed .amark path { stroke: var(--mk-flare); }
/* thinking: circled, again and again, never quite the same */
.ans-st[data-act="think"] .m-think { display: inline; transform-origin: 24px 31.8px; animation: ring-turn 7s linear infinite; }
.ans-st[data-act="think"] .m-think path { animation: ring-draw 3.5s cubic-bezier(.55,.06,.22,1) infinite; }
/* searching or reading: a loupe passes over it */
.ans-st[data-act="search"] .m-search { display: inline; animation: loupe 1.5s cubic-bezier(.65,0,.35,1) infinite alternate; }
/* writing: underlined as it goes */
.ans-st[data-act="write"] .m-write { display: inline; }
.ans-st[data-act="write"] .m-write path { animation: underline 1.6s cubic-bezier(.55,.06,.22,1) infinite; }
/* waiting on you: a query in the margin, drawn once and held */
.ans-st[data-act="ask"] .m-ask { display: inline; }
.ans-st[data-act="ask"] .m-ask path[pathLength] { animation: draw-once 800ms cubic-bezier(.55,.06,.22,1) backwards; }
/* done: a quick tick, and the period answers it */
.ans-st[data-act="done"] .m-done { display: inline; }
.ans-st[data-act="done"] .m-done path { animation: draw-once 520ms cubic-bezier(.55,.06,.22,1) backwards; }
.ans-st[data-act="done"] .amark circle { transform-box: fill-box; transform-origin: 50% 50%; animation: ok-bounce 600ms 380ms cubic-bezier(.34,1.56,.64,1) backwards; }
@keyframes ring-turn { to { transform: rotate(360deg); } }
@keyframes ring-draw { 0% { stroke-dashoffset: 1; } 46%, 58% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes loupe { from { transform: translate(-7px, 1px); } to { transform: translate(7px, -1px); } }
@keyframes underline { 0% { stroke-dashoffset: 1; opacity: 1; } 70%, 85% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes draw-once { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ok-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.ans-said { font-size: 14.5px; line-height: 1.6; color: var(--mk-ink2); overflow-wrap: anywhere; }
.ans-said:empty:not(.is-live) { display: none; }
.ans-said b { color: var(--mk-navy); }
.ans-said .pill { font-size: 12.5px; }
.ans-said.is-live::after { content: ""; display: inline-block; width: 7px; height: 14px; margin-left: 3px; vertical-align: -2px; background: var(--mk-green); animation: caret 900ms steps(2, jump-none) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ans-end { font-size: 12.5px; color: rgb(7 12 30 / .66); }
.ans-end:empty { display: none; }
.ans-q { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; padding: 12px 13px; background: rgb(59 194 76 / .07); box-shadow: inset 2px 0 0 var(--mk-green); font-size: 14px; line-height: 1.45; animation: rise-in 380ms var(--ease-out) backwards; }
.ans-opts { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
/* an answer can be a whole story title: it wraps inside its key instead of pushing the column wide */
.ans-opts .btn { height: auto; min-height: 32px; max-width: 100%; padding: 7px 14px; white-space: normal; text-align: left; line-height: 1.3; border-radius: 18px; }
.ans-opts .btn { background: var(--mk-sheet); }

/* the ask box: what Ansar sees, as small chips, then the box with its send (or stop) key */
.ans-ask { flex: none; display: grid; gap: 8px; padding: 10px 12px 12px; box-shadow: 0 -12px 16px -12px rgb(7 12 30 / .08); }
.ans-sees { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 22px; font-size: 11.5px; }
.ans-sees.is-new > .ctx { animation: chip-in 300ms var(--ease-out) backwards; }
.ans-sees.is-new > .ctx:nth-child(3) { animation-delay: 40ms; } .ans-sees.is-new > .ctx:nth-child(n+4) { animation-delay: 80ms; }
@keyframes chip-in { from { opacity: 0; transform: translateY(3px); } }
.ctx-l { margin-right: 3px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgb(7 12 30 / .45); }
.ctx { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; box-shadow: inset 0 0 0 1px var(--mk-rule); color: rgb(7 12 30 / .68); font-weight: 600; white-space: nowrap; }
.ctx .ico { width: 12px; height: 12px; }
.ctx--on { color: var(--mk-navy); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .3); }
.ctx--sel { color: #175f22; box-shadow: inset 0 0 0 1px var(--mk-green); background: rgb(59 194 76 / .07); }
.ans-box { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px; padding: 5px 5px 5px 12px; background: var(--mk-paper); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .18); transition: box-shadow 200ms var(--ease-out); }
.ans-box:focus-within { box-shadow: inset 0 0 0 1px var(--mk-navy), inset 0 -2px 0 var(--mk-green); }
.ans-box textarea { flex: 1; min-width: 0; max-height: 168px; padding: 8px 0; border: 0; background: none; resize: none; outline: 0; color: var(--mk-navy); font: inherit; font-size: 14px; line-height: 1.45; }
.ans-box textarea::placeholder { color: rgb(7 12 30 / .42); }
/* lines handed to Ansar: pills at the top of the ask box, and on the request they went with */
.ans-att { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 4px; padding-top: 3px; }
.ans-att.is-new > .att:last-child { animation: chip-in 320ms var(--ease-out) backwards; }
.att { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 26px; padding: 0 4px 0 9px; border-radius: 999px; background: var(--mk-sheet); box-shadow: inset 0 0 0 1px rgb(59 194 76 / .6); font-size: 12px; color: var(--mk-navy); }
.att .ico { width: 12px; height: 12px; flex: none; }
.att b { font-weight: 700; white-space: nowrap; }
.att-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(7 12 30 / .6); }
.att-x { flex: none; display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: rgb(7 12 30 / .5); }
.att-x .ico { width: 10px; height: 10px; }
.att-x:hover { color: var(--mk-navy); background: rgb(7 12 30 / .07); }
.ans-me-att { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.ans-me .att { background: rgb(252 251 248 / .1); color: var(--mk-sheet); box-shadow: inset 0 0 0 1px rgb(59 194 76 / .7); padding-right: 9px; }
.ans-me .att-t { color: rgb(252 251 248 / .65); }
/* the key that appears beside a selection in a document */
.give { position: fixed; z-index: 60; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 10px; border: 0; border-radius: 999px; background: var(--mk-navy); color: var(--mk-sheet); font: 700 12.5px/1 var(--font-display); letter-spacing: -.01em; box-shadow: var(--mk-shadow2); animation: give-in 220ms var(--ease-out); }
.give .ico { width: 15px; height: 15px; }
.give svg .ac { stroke: var(--mk-green); }
.give:hover { background: #1a2036; }
@keyframes give-in { from { opacity: 0; transform: translateY(-4px) scale(.96); } }
.ans-send { flex: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--mk-navy); color: var(--mk-sheet); transition: background-color 200ms, color 200ms, box-shadow 200ms, transform 120ms var(--mk-hand); }
.ans-send .ico { width: 16px; height: 16px; }
.ans-send:active:not(:disabled) { transform: scale(.92); }
.ans-box:has(textarea:placeholder-shown) .ans-send:not(.is-stop) { background: rgb(7 12 30 / .16); color: var(--mk-sheet); }
.ans-send.is-stop { background: var(--mk-sheet); color: var(--mk-navy); box-shadow: inset 0 0 0 1.5px var(--mk-navy); animation: veil-in 200ms; }
.ans-send.is-stop .ico { width: 13px; height: 13px; }
.ans-send:disabled { opacity: .45; }

/* ---------------------------------------------------------------- Ansar's suggestions (ansar/suggestions.js) */
/* A card per suggestion. Pending, it shows its change and the keys; decided, it folds to its heading with a tick or a
   cross drawn on (the heading opens it again). */
.ans-sugg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ans-sugg:empty { display: none; }
.sg { display: grid; background: var(--mk-sheet); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .16), 0 1px 2px rgb(7 12 30 / .05); transition: box-shadow 300ms var(--ease-out), opacity 300ms; }
.sg.is-pending { box-shadow: inset 0 0 0 1px rgb(7 12 30 / .2), 0 1px 2px rgb(7 12 30 / .05), 0 10px 24px -16px rgb(7 12 30 / .35); }
.sg.is-new { animation: card-in 460ms var(--ease-out) backwards; }
@keyframes card-in { from { opacity: 0; transform: translateY(10px); } }
.sg-h { box-sizing: border-box; display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; background: none; color: var(--mk-navy); text-align: left; font: inherit; }
.sg-h > .ico { width: 15px; height: 15px; color: rgb(7 12 30 / .55); }
.sg-t { display: grid; gap: 2px; min-width: 0; margin-right: auto; line-height: 1.25; }
.sg-t b { font-size: 13px; }
.sg-t span { font-size: 11.5px; color: rgb(7 12 30 / .6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-state { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: rgb(7 12 30 / .55); white-space: nowrap; }
.sg-state .ico { width: 13px; height: 13px; }
.sg.is-accepted .sg-state, .sg.is-edited .sg-state { color: #1d7f2c; }
.sg.is-stale .sg-state { color: var(--mk-flare); }
.sg.is-rejected { opacity: .72; }
/* A change Ansar made at once: Done, with Undo beside its heading. */
.sg.is-applied .sg-state { color: #1d7f2c; }
.sg.is-undone { opacity: .72; }

.sg-undo { justify-self: start; margin: -6px 10px 8px 34px; font-size: 12px; font-weight: 700; }
/* Records Ansar shows in the chat (a phone's whole screen). */
.ans-items { display: grid; gap: 6px; }
.ans-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; background: var(--mk-sheet); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .16); color: var(--mk-navy); text-decoration: none; }
.ans-item b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans-item span { font-size: 11.5px; color: rgb(7 12 30 / .55); text-transform: capitalize; }
.ans-item .ico { width: 15px; height: 15px; flex: none; }
.sg-fold { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 420ms var(--ease-out), opacity 260ms var(--ease-out); }
.sg-fold > div { min-height: 0; overflow: hidden; }
.sg:is(.is-accepted, .is-rejected, .is-edited, .is-applied, .is-undone):not(.is-peek) .sg-fold { grid-template-rows: 0fr; opacity: 0; }
.sg:is(.is-accepted, .is-rejected, .is-edited, .is-applied, .is-undone) .sg-h:hover { background: rgb(7 12 30 / .03); }
/* A change that's done is one row: its type, what it is, when, and Undo on the same line. Rows that follow each other
   read as one list. */
.sg-line { display: flex; align-items: center; min-width: 0; }
.sg-line .sg-h { flex: 1; min-width: 0; }
.sg-line .sg-undo { margin: 0 10px 0 0; flex: none; }
.sg:is(.is-accepted, .is-rejected, .is-edited, .is-applied, .is-undone):not(.is-peek) .sg-h { padding-block: 6px; }
.sg:is(.is-accepted, .is-rejected, .is-edited, .is-applied, .is-undone):not(.is-peek) .sg-t span { display: inline; margin-left: 6px; }
.sg:is(.is-accepted, .is-rejected, .is-edited, .is-applied, .is-undone):not(.is-peek) .sg-t { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ans-sugg > .sg:is(.is-applied, .is-accepted, .is-undone) + .sg:is(.is-applied, .is-accepted, .is-undone) { margin-top: -8px; box-shadow: inset 0 0 0 1px rgb(7 12 30 / .16), inset 0 1px 0 rgb(7 12 30 / .08); }
.sg-type { flex: none; min-width: 64px; padding: 1px 6px; font: 700 9.5px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--t, var(--mk-navy)); box-shadow: inset 0 0 0 1px var(--t, rgb(7 12 30 / .3)); background: color-mix(in srgb, var(--t, var(--mk-navy)) 8%, transparent); }
.sg[data-type] .sg-h > .ico { color: var(--t, rgb(7 12 30 / .55)); }
/* Each kind of thing a change makes, in the calendar's own colours. */
:root { --t-date: var(--k-library); --t-task: var(--k-task); --t-story: var(--k-story); --t-release: var(--k-story); --t-advisory: var(--k-story);
  --t-comment: #5b6170; --t-note: #9a7400; --t-spokesperson: #1d7f2c; --t-invite: #1d7f2c; --t-integration: #5b6170; }
/* A run's changes folded to one row: how many of each. Open, it lists them; one still waiting for a tap stays out. */
.sg-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; width: 100%; padding: 8px 10px; border: 0; background: var(--mk-sheet); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .16); color: var(--mk-navy); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.sg-group:hover { background: rgb(7 12 30 / .03); }
.sg-group > .ico { width: 13px; height: 13px; transform: rotate(-90deg); transition: transform 200ms var(--ease-out); }
.ans-sugg.is-open > .sg-group > .ico { transform: none; }
.sg-group .sg-type { min-width: 0; }
.sg-group-n { font-size: 11.5px; color: rgb(7 12 30 / .55); }
.ans-sugg.is-grouped:not(.is-open) > .sg:not(.is-pending, .is-stale) { display: none; }
.sg.is-deciding.is-accepted, .sg.is-deciding.is-edited { animation: ok-ring 700ms var(--ease-out); }
@keyframes ok-ring { from { box-shadow: inset 0 0 0 1.5px var(--mk-green), 0 0 0 5px rgb(59 194 76 / .2); } }
.sg-b { display: grid; padding: 4px 0 6px; box-shadow: inset 0 1px 0 var(--mk-rule2); }
.sg-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; box-shadow: inset 0 1px 0 var(--mk-rule2); }
.sg-a .ico { width: 14px; height: 14px; }
.sg-a .hint { font-size: 12px; margin-right: auto; }
.sg .dl { font-size: 13px; line-height: 1.55; padding: 2px 10px 2px 30px; position: relative; }
.sg .dl i { position: absolute; left: 6px; font-style: normal; font-size: 10.5px; color: rgb(7 12 30 / .5); font-family: var(--font-mono); top: 4px; }
.sg .dl.rm { background: rgb(200 56 42 / .08); color: #7a2418; }
.sg .dl.ad { background: rgb(59 194 76 / .12); color: #175f22; }
.sg .dl del { background: rgb(200 56 42 / .2); text-decoration-thickness: 1px; }
.sg .dl ins { background: rgb(59 194 76 / .28); text-decoration: none; }
.sg-row { padding: 4px 10px; font-size: 13.5px; display: grid; gap: 4px; }
.sg-row p { margin: 0; font-size: 13px; }
.sg-why { margin: 0; padding: 0 10px 8px; font-size: 12.5px; color: rgb(7 12 30 / .7); }
.doc-body .sg-old { background: rgb(200 56 42 / .07); text-decoration: line-through; text-decoration-color: rgb(200 56 42 / .6); }
.sg-inline { margin: 6px 0 4px 19px; padding: 8px 10px; background: rgb(59 194 76 / .08); box-shadow: inset 2px 0 0 var(--mk-green); user-select: none; }
.sg-inline p { margin: 0; color: #175f22; }
.sg-by { display: inline-flex; align-items: center; gap: 6px; }
.sg-by .amark { flex: none; }
.sg-inline-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 6px; font-size: 12.5px; }
.or-model { display: flex; gap: 8px; align-items: center; } .or-model input { flex: 1 1 auto; min-width: 0; }

/* ---- V1: sponsors, plans, the board report ---- */
.stats b small.of { font-size: .42em; font-weight: 700; letter-spacing: -.02em; color: rgb(7 12 30 / .45); margin-left: 2px; }
.plans-tbl .in--sm { width: 100%; min-width: 64px; padding-right: 8px; }
.plans-tbl td:first-child .in--sm, .plans-tbl td:nth-last-child(2) .in--sm, .plans-tbl td:nth-last-child(3) .in--sm { min-width: 112px; }
.plans-tbl td.num .in--sm { text-align: right; max-width: 96px; }
.plans-tbl .check { font-size: 11px; margin-top: 4px; justify-content: flex-end; }
.report-sheet { max-width: 980px; }
@media print {
  @page { margin: 16mm 14mm; }
  body, .shell, .win, .win-scroll { display: block !important; height: auto !important; overflow: visible !important; background: #fff !important; }
  .side, .ansar, .tabbar, .notice, .scrim, .toast, .progress, .place-tabs, .noprint, .tip { display: none !important; }
  .view { animation: none !important; }
  .report-sheet { max-width: none; }
  .report-sheet .sec, .report-sheet tr, .report-sheet li { break-inside: avoid; }
  .report-sheet .stats { margin-bottom: 24px; }
  [data-ink-layer] svg.ink { display: none; }
}

/* ---- V1: the calendar ---- */
.cal { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
.cal--full { display: block; }
.cal--full .cal-key { gap: 8px; margin: 4px 0 14px; }
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
.cal-arrows { display: inline-flex; gap: 6px; }
.cal-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; font-size: 12px; color: var(--mk-ink2); }
.cal-key span { display: inline-flex; align-items: center; gap: 6px; }
/* Each kind in the key is a switch: pressed shows it on the calendar; off is faded and struck through. */
/* Each kind in the key: a switch (shows or hides it on the calendar) and View all (everything of that kind). */
.cal-key-i { display: inline-flex; align-items: stretch; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(7 12 30 / .14); background: var(--mk-sheet); }
.cal-key-t, .cal-key-all { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.cal-key-t { padding: 5px 10px 5px 10px; border-radius: 999px 0 0 999px; }
.cal-key-all { padding: 5px 11px 5px 9px; border-left: 1px solid rgb(7 12 30 / .14); border-radius: 0 999px 999px 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .02em; color: var(--mk-ink2); }
.cal-key-t:hover, .cal-key-all:hover { background: rgb(7 12 30 / .06); color: var(--mk-navy); }
.cal-key-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--mk-navy); color: var(--mk-sheet); font: 600 10.5px/18px var(--font-body); text-align: center; }
.cal-key-i.is-off .cal-key-t { opacity: .45; text-decoration: line-through; }
.cal-key-i.is-off .cal-key-t .ev, .cal-key-i.is-off .cal-key-t .hand { filter: grayscale(1); }
.cal-key .ev { width: 18px; height: 10px; padding: 0; display: inline-block; cursor: default; }
.cgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid rgb(7 12 30 / .12); border-left: 1px solid rgb(7 12 30 / .12); }
.cgrid .dow { padding: 8px 10px; border-right: 1px solid rgb(7 12 30 / .12); border-bottom: 1px solid rgb(7 12 30 / .12); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgb(7 12 30 / .55); }
.cday { position: relative; min-height: 118px; padding: 7px 6px 26px; border-right: 1px solid rgb(7 12 30 / .12); border-bottom: 1px solid rgb(7 12 30 / .12); display: flex; flex-direction: column; gap: 3px; background: var(--mk-sheet); min-width: 0; }
.cday--out { background: transparent; }
.cday--out .dn { color: rgb(7 12 30 / .35); }
.cday .dn { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; padding: 0 2px 2px; width: fit-content; }
.cday--today .dn { box-shadow: inset 0 -2.5px 0 var(--mk-green); }
.ev { display: block; width: 100%; text-align: left; border: 0; padding: 3px 6px; font: 500 12px/1.3 var(--font-body); background: none; color: var(--mk-navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ev:hover { filter: brightness(.95); }
.ev--library { box-shadow: inset 0 0 0 1px rgb(7 12 30 / .35); background: var(--mk-sheet); }
.ev--own { background: var(--mk-navy); color: var(--mk-sheet); }
.ev--emergent { background: var(--mk-sheet); box-shadow: inset 0 0 0 1.5px var(--mk-navy), 2px 2px 0 var(--mk-navy); }
.ev--story { background: var(--midnight-100); padding-left: 15px; position: relative; }
.ev--story::before { content: ""; position: absolute; left: 6px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: var(--mk-navy); }
.ev--suggested { color: var(--mk-ink2); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .35); background: repeating-linear-gradient(135deg, rgb(7 12 30 / .06) 0 6px, transparent 6px 12px); }
.ev--task { padding-left: 19px; position: relative; }
.ev--task::before { content: ""; position: absolute; left: 4px; top: 50%; width: 9px; height: 9px; margin-top: -5px; box-shadow: inset 0 0 0 1.5px var(--mk-navy); }
.ev--done { color: rgb(7 12 30 / .45); text-decoration: line-through; }
.ev--note, .hand { color: var(--signal-700); font-weight: 700; transform: skewX(var(--lean)); transform-origin: left center; }
.ev--note { white-space: normal; padding: 0 6px; }
.ev--more { color: rgb(7 12 30 / .55); font-size: 11px; }
/* views: day, week, month, year */
.seg { display: inline-flex; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(7 12 30 / .2); margin-left: auto; }
.seg a { padding: 5px 13px; border-radius: 999px; font: 500 13px var(--font-body); color: var(--mk-navy); text-decoration: none; }
.seg a:hover { background: var(--wash); }
.seg a[aria-current] { background: var(--mk-navy); color: var(--mk-sheet); }
.cday a.dn { color: inherit; text-decoration: none; border-radius: 3px; }
.cday a.dn:hover { background: var(--wash); }
.cgrid--week .dow b { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; color: var(--mk-navy); margin-left: 4px; }
.cgrid--week .cday { min-height: 420px; }
.cgrid--week .cday .dn { display: none; }
.cgrid--week .ev { white-space: normal; }
.cone { display: grid; gap: 22px; padding: 18px 20px; background: var(--mk-sheet); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .12); position: relative; }
.cone-list, .cone-win { display: grid; gap: 6px; }
.cone-row { display: flex; gap: 12px; align-items: flex-start; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; font: inherit; color: var(--mk-navy); cursor: pointer; box-shadow: inset 0 -1px 0 var(--mk-rule2); }
.cone-row:hover { background: var(--wash); }
.cone-row > i.ev { flex: none; width: 18px; height: 10px; padding: 0; margin-top: 5px; }
.cone-row > span { display: grid; gap: 2px; }
.cyear { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 26px 30px; }
.cmini-h { display: block; margin-bottom: 8px; font-weight: 800; letter-spacing: -.02em; color: var(--mk-navy); text-decoration: none; }
.cmini-h:hover { text-decoration: underline; text-underline-offset: 4px; }
.cmini-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cmini-w { font-family: var(--font-mono); font-size: 9px; color: rgb(7 12 30 / .45); text-align: center; padding-bottom: 3px; }
.cmini-d { position: relative; display: grid; place-items: center; aspect-ratio: 1; font-size: 11.5px; color: rgb(7 12 30 / .7); text-decoration: none; border-radius: 3px; }
.cmini-d:hover { background: var(--wash); }
.cmini-d.has { font-weight: 700; color: var(--mk-navy); }
.cmini-d.has::after { content: ""; position: absolute; bottom: 2px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgb(7 12 30 / .45); }
.cmini-d.has--own::after, .cmini-d.has--story::after { background: var(--mk-navy); }
.cmini-d.has--emergent::after { background: var(--mk-flare); }
.cmini-d.is-today { box-shadow: inset 0 -2px 0 var(--mk-green); }
/* a date's pitch window, while it's pointed at */
/* Room for two lines, always, so the calendar under it never moves when the words change. */
/* The window fades in and out; the band and the ring are always there, just unseen until the date is pointed at. */
.cday, .cmini-d { transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out); }
.cday.is-win, .cmini-d.is-win { background: rgb(59 194 76 / .12); }
.cday::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 4px; background: var(--mk-green); opacity: 0; transition: opacity 200ms var(--ease-out); pointer-events: none; }
.cday.is-win::after { opacity: 1; }
.cday.is-win-start::after { left: 6px; border-radius: 2px 0 0 2px; }
.cday.is-win-date, .cmini-d.is-win-date { box-shadow: inset 0 0 0 2px var(--mk-green); }
/* A date's name, with its reason or how far off it is on the line under it. */
.drawer-when { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: rgb(7 12 30 / .6); }
.drawer-note { padding: 10px 0; border-top: 1px solid rgb(7 12 30 / .1); font-size: 16px; line-height: 1.3; }
/* A date's side panel: rep.'s advice is the library's standing guidance for the date, the same for everyone, so it
   reads as plain print with a rule beside it; notes are written for this member, in the hand, each signed. */
.dr-advice { display: grid; gap: 4px; padding-left: 12px; box-shadow: inset 2px 0 0 rgb(7 12 30 / .2); }
.dr-advice p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--mk-navy); }
.dr-notes { display: grid; gap: 8px; }
.dr-note { display: grid; gap: 6px; padding: 10px 12px; border-radius: 4px; background: color-mix(in srgb, var(--mk-green) 7%, var(--mk-sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mk-green) 30%, transparent); }
.dr-note p { margin: 0; font-size: 16px; line-height: 1.35; }
.dr-note-by { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mk-ink2); }
.dr-note-by .ico { width: 12px; height: 12px; color: var(--mk-navy); }
.dr-note-by span { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 12px; }
@media (max-width: 1100px) { .cal { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .cday { min-height: 70px; } .cday .ev { font-size: 0; padding: 0; height: 5px; } .cgrid .dow { font-size: 8px; padding: 6px 4px; } }

.flow-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.note-preview { color: var(--signal-700); font-weight: 700; font-size: 16px; line-height: 1.3; transform: skewX(var(--lean)); transform-origin: left top; min-height: 22px; }

/* the input layer: one box to type, talk or attach, and what rep. heard */
.say { position: relative; display: grid; background: var(--mk-fibre), var(--mk-sheet); box-shadow: inset 0 0 0 1.25px rgb(7 12 30 / .22); transition: box-shadow var(--t-fast); }
.say:focus-within { box-shadow: inset 0 0 0 1.5px var(--mk-navy); }
.say.is-over { box-shadow: inset 0 0 0 1.5px var(--mk-green); }
.say.is-recording { box-shadow: inset 0 0 0 1.5px var(--mk-flare); }
.say-text { width: 100%; box-sizing: border-box; min-height: 120px; padding: 16px 18px 8px; border: 0; background: transparent; resize: none; outline: 0; font: 500 16.5px/1.5 var(--font-body); letter-spacing: -.01em; color: var(--mk-navy); }
.say-text::placeholder { color: rgb(7 12 30 / .38); }
.say-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; }
.say-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 32px; padding: 0 6px 0 10px; font-size: 13px; box-shadow: inset 0 0 0 1px rgb(7 12 30 / .2); background: var(--mk-sheet); }
.say-file b { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }
.say-file .ico { width: 16px; height: 16px; flex: none; }
.say-file button { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; color: rgb(7 12 30 / .5); }
.say-file button .ico { width: 13px; height: 13px; }
.say-file.is-busy .meta { color: var(--signal-700); }
.say-file.is-bad { box-shadow: inset 0 0 0 1px rgb(255 91 58 / .6); }
.say-file.is-bad .meta { color: var(--mk-flare); }
.say-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px 8px 8px; border-top: 1px solid var(--mk-rule2); }
.say-tool { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--mk-navy); cursor: pointer; }
.say-tool:hover { background: var(--wash); }
.say-tool .ico { width: 21px; height: 21px; }
.say-hint { margin-left: 6px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.say-rec { display: inline-flex; align-items: center; gap: 10px; padding-left: 8px; font-variant-numeric: tabular-nums; }
.say-rec i { width: 10px; height: 10px; border-radius: 50%; background: var(--mk-flare); animation: rec-pulse 1.2s ease-in-out infinite; }
.say-rec b { font-size: 14px; min-width: 3.2em; }
@keyframes rec-pulse { 50% { opacity: .35; } }
.say-go { flex: none; }
@media (max-width: 560px) { .say-hint { display: none; } .say-bar { justify-content: flex-start; } .say-go { margin-left: auto; } }
/* Ansar at work under an input box: the same mark and steps as the panel, for anyone */
.say-work { display: grid; gap: 10px; }
.ans-busy { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font-size: 13.5px; }
.ans-busy-l { font: 600 13px/1.3 var(--font-display); color: var(--mk-navy); }
.ans-busy:has(.ans-st.is-running) .ans-busy-l { background: linear-gradient(90deg, var(--mk-navy) 30%, rgb(7 12 30 / .28) 50%, var(--mk-navy) 70%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 1.8s linear infinite; }
.ans-busy:has(.ans-st.is-failed) .ans-busy-l { color: var(--mk-flare); font-weight: 500; }
.ans-busy-t { flex-basis: 100%; padding-left: 28px; font-size: 12.5px; line-height: 1.4; color: rgb(7 12 30 / .6); }
.ans-busy-t:empty { display: none; }
.ans-inline { margin-top: 10px; }
.ans-reading { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 16px; color: var(--mk-navy); }
.ans-reading .ans-st { width: 22px; height: 22px; }
.say-work:empty { display: none; }
.ans-work--inline { padding: 10px 14px 6px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: inset 0 0 0 1px var(--mk-rule); }
.ans-work--inline .ans-work-h { font-size: 13px; }
.ans-own { display: flex; gap: 8px; align-items: center; }
.ans-own .in { flex: 1; min-height: 36px; font-size: 14.5px; }
.say-file .ans-st { width: 18px; height: 18px; }
.heard { display: grid; gap: 22px; }
.heard-sec { display: grid; gap: 10px; }
.heard-prose { display: grid; gap: 8px; max-width: 60ch; }
.heard-prose p { margin: 0; font: 400 18px/1.5 var(--font-body); color: var(--mk-navy); }
.heard-dates { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.heard-dates li { display: grid; gap: 2px; padding-left: 12px; box-shadow: inset 2px 0 0 var(--mk-navy); }
.heard-dates b { font: 600 17px/1.35 var(--font-body); color: var(--mk-navy); }
.heard-dates span { font: 400 15px/1.45 var(--font-body); color: var(--mk-ink2); }
.heard-qs { display: grid; gap: 8px; margin: 0; padding: 14px 16px; list-style: none; box-shadow: inset 3px 0 0 var(--mk-green); background: var(--wash); }
.heard-qs li { font-size: 15px; line-height: 1.45; color: var(--mk-navy); }

/* the step-by-step flows (onboarding, a story): one question at a time */
.flow { max-width: 720px; display: grid; gap: 22px; }
.flow-rail { position: relative; height: 3px; background: rgb(7 12 30 / .1); margin: 6px 0 10px; }
.flow-rail i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--mk-navy); transition: width .45s cubic-bezier(.16, 1, .3, 1); }
.flow-rail b { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: var(--mk-green); transition: left .45s cubic-bezier(.34, 1.56, .64, 1); }
.flow-step { display: grid; gap: 16px; animation: flow-in .45s cubic-bezier(.16, 1, .3, 1); }
@keyframes flow-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.flow-q { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; margin: 0; }
.flow-hint { color: var(--mk-ink2); font-size: 15px; margin: 0; max-width: 60ch; }
.flow-chips { gap: 8px; }
.flow-chips button { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1.25px rgb(7 12 30 / .3); background: var(--mk-sheet); font: 500 14px var(--font-body); color: var(--mk-navy); cursor: pointer; }
.flow-chips button[aria-pressed=true] { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.flow-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.flow-foot .meta { margin-left: auto; }
.found { display: grid; gap: 0; }
.found-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgb(7 12 30 / .1); animation: flow-in .4s cubic-bezier(.16, 1, .3, 1) both; }
.found-row .meta { display: block; margin-top: 3px; }
.found-row.is-skipped b, .found-row.is-skipped .meta { opacity: .4; text-decoration: line-through; }
.reading { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 12px; }
.reading i { width: 10px; height: 10px; border-radius: 50%; background: var(--mk-green); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.55); opacity: .5; } }
.sp[hidden], .sub-foot [hidden] { display: none !important; }

/* ---- V1: crisis ---- */
/* The crisis button stands apart in a member's sidebar, in flare. */
.side .nav-i[data-v="crisis"] { color: var(--mk-flare); }
.crisis-form { max-width: 640px; }

/* ---------------------------------------------------------------- a new member's setup: no sidebar, just the steps */
.shell.is-setup { --side-w: 0px; }
.shell.is-setup .side { display: none; }
.setup-top { display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad); box-shadow: inset 0 -1px 0 var(--mk-rule); }
.setup-top img { height: 26px; display: block; }
.shell.is-setup #main .flow { margin: 0 auto; }
.setup-steps { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 14px var(--font-body); color: rgb(7 12 30 / .45); }
.setup-steps li { display: flex; align-items: center; gap: 8px; }
.setup-steps li + li::before { content: ""; width: 22px; height: 1.5px; margin-right: 14px; background: rgb(7 12 30 / .18); }
.setup-steps i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 12px var(--font-body); font-style: normal; box-shadow: inset 0 0 0 1.25px rgb(7 12 30 / .25); }
.setup-steps i .ico { width: 14px; height: 14px; }
.setup-steps li[aria-current] { color: var(--mk-navy); }
.setup-steps li[aria-current] i { background: var(--mk-navy); color: var(--mk-sheet); box-shadow: none; }
.setup-steps li.is-done { color: var(--mk-ink2); }
.setup-steps li.is-done i { background: var(--mk-green); box-shadow: none; }
.meet-ansar { display: flex; gap: 16px; align-items: flex-start; max-width: 620px; padding: 18px 20px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow); }
.meet-ansar b { font-size: 16px; letter-spacing: -.01em; }
.meet-ansar p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--mk-ink2); }
.meet-ansar .ans-st { width: 34px; height: 34px; margin-top: 2px; }
.meet-ansar .ans-st .marks { left: -17px; top: -17px; width: 68px; height: 68px; }
.setup-steps button { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.setup-steps button:hover { color: var(--mk-navy); text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- members' Ansar: the same panel, on the right */
.shell.ans-right { grid-template-columns: var(--side-w) minmax(0, 1fr) var(--ans-w); }
.shell.ans-right .win { grid-column: 2; }
.shell.ans-right .ansar { grid-column: 3; box-shadow: inset 1px 0 0 var(--mk-rule); }
.shell.ans-right:not(.ans-on) .ans-in { transform: translateX(28px); }
.shell.ans-right .ans-grip { right: auto; left: 0; }
.shell.ans-right .ans-grip::after { right: auto; left: 0; }
@media (max-width: 1100px) {
  .shell.ans-right .ansar { left: auto; right: 0; transform: translateX(100%); }
  .shell.ans-right.ans-on .ansar { transform: none; }
}
@media (max-width: 900px) {
  /* A phone: the panel is the whole screen under the bar, whichever side it sits on elsewhere. */
  .shell.ans-right .ansar { left: 0; right: 0; transform: translateY(100%); }
  /* and the phone's one column, which the right-hand panel's three columns would otherwise keep */
  .shell.ans-right { grid-template-columns: minmax(0, 1fr); }
  .shell.ans-right .win { grid-column: 1; }
}
/* what Ansar points at: ringed in green, pulsing a few times */
.ans-spot { outline: 2.5px solid var(--mk-green); outline-offset: 4px; border-radius: 6px; animation: ans-spot 1.1s var(--ease-out) 4; }
@keyframes ans-spot { 0% { box-shadow: 0 0 0 0 rgb(59 194 76 / .45); } 100% { box-shadow: 0 0 0 14px rgb(59 194 76 / 0); } }
/* the panel's ask box takes voice and files like every input in rep. */
.ans-files { flex: 0 0 100%; padding: 4px 0 2px; }
.ans-tools { display: flex; align-items: center; order: 3; }
.ans-tools .say-tool { width: 32px; height: 32px; }
.ans-tools .say-tool .ico { width: 18px; height: 18px; }
.ans-tools .say-rec { padding-left: 4px; gap: 8px; }
.ans-box.is-recording textarea { opacity: .5; }
.ans-box.is-over { box-shadow: inset 0 0 0 1.5px var(--mk-green); }
.ans-box { padding-left: 6px; }
.ans-box textarea { order: 2; flex-basis: 100%; padding-left: 6px; }
.ans-send { order: 4; margin-left: auto; }
/* the year's preview of a day */
.cpop { position: fixed; z-index: 60; width: 260px; padding: 12px 14px 10px; background: var(--mk-sheet); box-shadow: var(--mk-shadow2), inset 0 0 0 1px rgb(7 12 30 / .1); pointer-events: none;
  opacity: 0; transform: translateY(-4px); transition: opacity 160ms var(--ease-out), transform 160ms var(--ease-out); }
.cpop.is-above { transform: translateY(4px); }
.cpop.is-on { opacity: 1; transform: none; }
.cpop-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.cpop-h b { font-size: 14px; letter-spacing: -.01em; }
.cpop-h span { font-size: 12px; color: rgb(7 12 30 / .5); white-space: nowrap; }
.cpop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cpop li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; line-height: 1.35; }
.cpop li > i.ev { flex: none; width: 14px; height: 8px; padding: 0; margin-top: 5px; }
.cpop-w { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--mk-rule2); font-size: 12px; color: var(--mk-ink2); }
.cpop-f { margin: 8px 0 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgb(7 12 30 / .4); }
/* adding a date: Ansar's proposal, to check */
.ad-out { display: grid; gap: 14px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mk-rule2); animation: flow-in .45s cubic-bezier(.16, 1, .3, 1); }
.ad-days { display: flex; align-items: baseline; gap: 8px; }
.ad-qs ul { margin: 6px 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14.5px; }
.f .ad-days input[name=days] { width: 90px; flex: none; }
/* the flow everything a member creates goes through */
.aflow { display: grid; gap: 16px; }
.aflow-intro { margin: 0; }
.aflow-steps { margin: 0; }
.aflow-step { display: grid; gap: 12px; animation: flow-in .45s cubic-bezier(.16, 1, .3, 1); }
.aflow-q { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; }
.aflow-fields { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--mk-rule2); }
.aflow-why { margin-right: auto; margin-left: 12px; color: var(--mk-flare); }
/* who a story or release is for, ticked as it's sent */
.aud { display: grid; gap: 6px; margin-top: 14px; }
.aud > .soft { margin: 0 0 4px; font-size: 14px; }
.aud-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.aud-i { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--mk-sheet); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .16); cursor: pointer; transition: box-shadow var(--t-fast), background var(--t-fast); }
.aud-i:hover { box-shadow: inset 0 0 0 1px rgb(7 12 30 / .4); }
.aud-i:has(input:checked) { background: rgb(59 194 76 / .07); box-shadow: inset 0 0 0 1.5px var(--mk-green); }
.aud-i:has(input:focus-visible) { outline: 2px solid var(--mk-navy); outline-offset: 2px; }
.aud-i input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--mk-green); }
.aud-i > span { display: grid; gap: 2px; min-width: 0; }
.aud-i b { font-size: 15px; letter-spacing: -.01em; }
.aud-i small { font-size: 13px; line-height: 1.4; color: var(--mk-ink2); }
.aud-i .aud-n { margin-top: 4px; color: var(--mk-navy); }
.aud-i .aud-n a { color: inherit; font-weight: 700; text-decoration: underline; }
.aud-i.is-off { cursor: default; background: rgb(7 12 30 / .03); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .1); }
.aud-i.is-off b, .aud-i.is-off small:not(.aud-n) { color: rgb(7 12 30 / .45); }
.aud-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.aud-tag { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; font: 600 12px/1.5 var(--font-display); background: rgb(7 12 30 / .05); color: var(--mk-navy); white-space: nowrap; }
.aud-tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.aud-tag.a-media::before { background: var(--mk-navy); }
.aud-tag.a-social::before { background: var(--mk-flare); }
.aud-tag.a-wire::before { background: var(--mk-green); }
.aud-tags + .meta { display: block; margin-top: 6px; }
/* a step Ansar reads is a chat: the conversation and the draft scroll, the box stays at the bottom */
dialog.is-talk { height: min(calc(100dvh - 32px), 880px); }
dialog.is-talk .dlg { height: 100%; }
dialog.is-talk .dlg-b { display: flex; flex-direction: column; gap: 0; padding-bottom: 0; }
dialog.is-talk .aflow, dialog.is-talk .aflow > [data-step] { flex: 1 0 auto; display: flex; flex-direction: column; }
dialog.is-talk .aflow { gap: 16px; }
.aflow-step.is-talk { flex: 1 0 auto; display: flex; flex-direction: column; gap: 14px; }
.aflow-head { display: grid; gap: 8px; }
.aflow-talk { display: grid; gap: 22px; }
.aflow-talk:empty { display: none; }
.aflow-turn { display: grid; gap: 8px; min-width: 0; scroll-margin: 16px 0 140px; }
.aflow-turn .ans-me { margin-bottom: 2px; animation: msg-in 380ms var(--ease-out) backwards; transform-origin: right bottom; }
.aflow-turn .ans-me .pill { font-size: 12.5px; }
.aflow-run .ans-work--inline { padding: 0; background: none; box-shadow: none; }
.aflow-said { margin: 0; max-width: 62ch; font-size: 15px; line-height: 1.5; color: var(--mk-navy); animation: veil-in 300ms var(--ease-out) backwards; }
.aflow-step.is-talk .aflow-fields { margin-top: 0; padding: 16px 18px 6px; border-top: 0; background: var(--mk-paper); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .1); }
.aflow-step.is-talk .ad-qs { margin-top: 22px; padding: 12px 16px; background: rgb(7 12 30 / .035); box-shadow: inset 2px 0 0 var(--mk-navy); }
.ad-qs-h { display: inline-flex; align-items: center; gap: 6px; }
.ad-qs-h .ico { width: 14px; height: 14px; color: var(--mk-navy); }
.aflow-step.is-talk .ad-qs .soft { margin: 4px 0 0; font-size: 13.5px; }
.aflow-dock { position: sticky; bottom: 0; z-index: 2; margin: auto -26px 0; padding: 14px 26px 18px; background: linear-gradient(rgb(252 251 248 / 0), var(--mk-sheet) 14px); }
.aflow-dock .say { background: var(--mk-sheet); box-shadow: inset 0 0 0 1.25px rgb(7 12 30 / .22), 0 6px 24px rgb(7 12 30 / .08); }
.aflow-dock .say:focus-within { box-shadow: inset 0 0 0 1.5px var(--mk-navy), 0 6px 24px rgb(7 12 30 / .1); }
.aflow-dock .say-text { min-height: 64px; max-height: 32vh; overflow: auto; padding: 12px 16px 6px; }
.aflow-dock .say-go .ico { width: 15px; height: 15px; margin: 0 -2px 0 8px; }
@media (max-width: 560px) { dialog.is-talk { height: calc(100dvh - 12px); } .aflow-dock { margin: auto -18px 0; padding: 12px 18px 14px; } }
.aflow-sum { display: grid; gap: 4px; padding: 14px 16px; background: var(--mk-paper); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .1); }
.aflow-sum b { font-size: 17px; letter-spacing: -.02em; }
.aflow-sum p { margin: 6px 0 0; font-size: 14.5px; color: var(--mk-ink2); }
.aflow-part { display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--mk-rule2); }
.aflow-part:last-child { border-bottom: 0; }
.aflow-part p { margin: 0; white-space: pre-wrap; font-size: 14.5px; }
.aflow-part .soft { font-style: italic; }
.aflow-new p { margin: 0 0 8px; }
.aflow-new .actions { margin: 0; }
/* photos for what members make: the story's cover, a release's cover and video */
.mtile.is-cover .mtile-v { box-shadow: 0 0 0 2.5px var(--mk-green); }
.mtile-cover, .mtile-make { position: absolute; top: 6px; left: 6px; padding: 3px 8px; font: 600 11px var(--font-body); letter-spacing: .02em; border: 0; background: var(--mk-sheet); color: var(--mk-navy); box-shadow: var(--mk-shadow); }
.mtile-cover { background: var(--mk-green); }
.mtile-make { cursor: pointer; opacity: 0; transition: opacity 160ms; }
.mtile:hover .mtile-make, .mtile-make:focus-visible { opacity: 1; }
.aflow-always { display: grid; gap: 10px; }
.wslot { position: relative; max-width: 420px; }
.wslot img, .wslot video { display: block; width: 100%; max-height: 260px; object-fit: cover; background: var(--mk-paper); }
.wslot-up { display: grid; gap: 6px; width: 100%; }
.aflow-cover { margin: 0; display: grid; gap: 6px; }
.aflow-cover img { width: 100%; max-height: 280px; object-fit: cover; }
.aflow-cover figcaption { font-size: 13px; color: var(--mk-ink2); }
/* the Add menu: a date, a story, a press release, a media advisory */
.addmenu { position: relative; }
.addmenu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 300px; padding: 6px; display: grid; background: var(--mk-sheet); box-shadow: var(--mk-shadow2), inset 0 0 0 1px rgb(7 12 30 / .1); }
.addmenu-list[hidden] { display: none; }
.addmenu-list > * { display: grid; gap: 2px; padding: 10px 12px; border: 0; background: none; text-align: left; font: inherit; color: var(--mk-navy); text-decoration: none; cursor: pointer; }
.addmenu-list > *:hover, .addmenu-list > *:focus-visible { background: var(--wash); }
.addmenu-list b { font-size: 14.5px; }
.addmenu-list small { font-size: 12.5px; color: var(--mk-ink2); }
/* a story on the calendar, with where it stands */
.ev--story .ev-st { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: rgb(7 12 30 / .55); }
.ev--story.is-covered::before, .ev--story.is-wired::before { background: var(--mk-green); }
.ev--story.is-needs_info::before, .ev--story.is-member_review::before { background: var(--mk-flare); }
.cgrid--week .ev--story .ev-st, .cone .ev-st { display: inline; margin-left: 6px; }
/* the Wire tab: each post with its cover; the preview, full size */
.wrow { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.wrow-cover { width: 96px; height: 64px; object-fit: cover; background: var(--mk-paper); }
.wrow-cover--none { display: grid; place-items: center; color: rgb(7 12 30 / .3); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .1); }
.wpreview { width: 100%; height: min(78vh, 900px); border: 0; background: #fff; box-shadow: inset 0 0 0 1px rgb(7 12 30 / .12); }
/* photos in a story's document */
.dfig { margin: 18px 0; display: grid; gap: 6px; }
.dfig img, .dfig video { display: block; width: 100%; max-height: 460px; object-fit: contain; background: var(--mk-paper); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .08); }
.dfig.ProseMirror-selectednode img, .dfig.ProseMirror-selectednode video { outline: 2px solid var(--mk-navy); outline-offset: 2px; }
.dfig[draggable] { cursor: grab; }
.dfig-cap { width: 100%; padding: 4px 0; border: 0; background: none; font: italic 14px var(--font-body); color: var(--mk-ink2); outline: 0; }
.dfig-cap:focus { box-shadow: inset 0 -1.5px 0 var(--mk-green); }
.dfig.is-gone, .dfig-gone { padding: 18px; font-size: 13px; color: var(--mk-ink2); background: var(--mk-paper); }
.dfig--sg { margin: 6px 0 10px; }
.dfig--sg img, .dfig--sg video { max-height: 240px; }
.sg-moving { outline: 2px dashed var(--mk-green); outline-offset: 4px; }
.sg-move-to { margin: 0; font-weight: 600; color: var(--signal-700); }
.mtile-put { justify-self: start; }
/* the desk: a bird's-eye dashboard */
.dstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 12px; margin-bottom: 26px; }
.dstat { display: grid; gap: 2px; padding: 16px 18px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow); color: var(--mk-navy); text-decoration: none; transition: transform 200ms var(--mk-hand); }
.dstat:hover { transform: translateY(-2px); }
.dstat b { font-size: 34px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.dstat span { font-size: 14px; font-weight: 600; }
.dstat small { font-size: 12px; color: var(--mk-ink2); }
.dstat.is-hot { box-shadow: var(--mk-shadow), inset 0 -3px 0 var(--mk-flare); }
.dgrid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; margin-bottom: 26px; align-items: start; }
@media (max-width: 1100px) { .dgrid { grid-template-columns: 1fr; } }
.dpanel { min-width: 0; padding: 18px 20px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow); }
.dpanel-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.durgs { list-style: none; margin: 0; padding: 0; }
.durg { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; grid-template-areas: "k t c" "k s c"; column-gap: 12px; padding: 9px 0 9px 10px; border-bottom: 1px solid var(--mk-rule2); color: var(--mk-navy); text-decoration: none; box-shadow: inset 3px 0 0 var(--k); }
.durg:hover { background: var(--wash); }
.durgs li:last-child .durg { border-bottom: 0; }
.durg-k { grid-area: k; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgb(7 12 30 / .55); padding-top: 3px; }
.durg-t { grid-area: t; font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.durg-s { grid-area: s; font-size: 12.5px; color: var(--mk-ink2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.durg-c { grid-area: c; align-self: center; max-width: 170px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--mk-ink2); white-space: nowrap; }
.durg-c.is-due { color: var(--mk-flare); font-weight: 600; }
.dpipe { display: flex; gap: 3px; height: 44px; margin-bottom: 10px; }
.dpipe-seg { display: grid; align-content: center; min-width: 38px; padding: 0 8px; color: var(--mk-sheet); text-decoration: none; overflow: hidden; transition: filter 160ms; }
.dpipe-seg:hover { filter: brightness(1.12); }
.dpipe-seg b { font-size: 16px; line-height: 1.1; }
.dpipe-seg span { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.dpipe-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--mk-ink2); }
.dpipe-key span { display: inline-flex; align-items: center; gap: 6px; }
.dpipe-key i { width: 10px; height: 10px; display: inline-block; }
.dpipe-submitted { background: var(--mk-flare); } .dpipe-needs_info { background: #c98a12; } .dpipe-developing { background: #2a78d6; }
.dpipe-member_review { background: #7a3fb0; } .dpipe-ready { background: #13a39a; } .dpipe-out { background: var(--mk-navy); } .dpipe-held { background: rgb(7 12 30 / .3); }
.dtypes { display: grid; gap: 6px; }
.dtype { display: grid; grid-template-columns: minmax(120px, 1fr) repeat(4, 50px); align-items: center; gap: 8px; padding: 8px 10px; color: var(--mk-navy); text-decoration: none; box-shadow: inset 3px 0 0 var(--k); background: var(--mk-paper); }
.dtype:hover { background: var(--wash); }
.dtype-t { font-weight: 700; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtype-n { display: grid; font-size: 11px; color: var(--mk-ink2); text-align: right; }
.dtype-n b { font-size: 15px; color: var(--mk-navy); }
.dtype-n.is-zero { opacity: .4; }
.dqs { margin-bottom: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.dq { display: grid; gap: 2px; padding: 12px 14px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow), inset 3px 0 0 var(--k); color: var(--mk-navy); text-decoration: none; transition: transform 200ms var(--mk-hand); }
.dq:hover { transform: translateY(-2px); }
.dq b { font-size: 24px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.dq span { font-size: 13px; font-weight: 600; }
.dq small { font-size: 11.5px; color: var(--mk-ink2); }
.dteam { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dteam li { display: grid; grid-template-columns: 28px 130px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13.5px; }
.dteam-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dteam-none { display: grid; place-items: center; background: var(--mk-flare); color: var(--mk-sheet); font-weight: 700; }
.dteam-bar { height: 8px; background: rgb(7 12 30 / .08); }
.dteam-bar i { display: block; height: 100%; background: var(--mk-navy); }
.dteam-c { font-size: 12.5px; color: var(--mk-ink2); white-space: nowrap; }
.dteam-c b { color: var(--mk-navy); }
.is-warn { color: var(--mk-flare); font-weight: 600; }
.dweek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dweek div { display: grid; gap: 2px; }
.dweek b { font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.dweek span { font-size: 13px; color: var(--mk-ink2); }
.desk-crisis { margin-bottom: 22px; }
.bcard-flag { display: inline-block; justify-self: start; padding: 2px 8px; font: 600 11px var(--font-body); color: var(--mk-sheet); background: var(--mk-flare); }
.queue--wide { max-width: 760px; }

/* queue items outside the boards (a queue's workspace, Home's "waiting on you", a crisis): each one a card of its own,
   its kind in its colour, a deadline as a pill, what the journalist or Ansar said as a quote */
.queue--cards { gap: 12px; }
.queue--cards > .qi { gap: 8px; padding: 14px 18px 15px 22px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow), inset 5px 0 0 var(--k, var(--mk-rule)); transition: box-shadow 200ms var(--mk-hand), transform 200ms var(--mk-hand), opacity .3s; }
.queue--cards > .qi:hover { transform: translateY(-1px); box-shadow: var(--mk-shadow2), inset 5px 0 0 var(--k, var(--mk-rule)); }
.queue--cards .qi-t { font-size: 16.5px; letter-spacing: -.01em; }
.queue--cards .qi-s { padding: 8px 12px; font-style: italic; background: var(--mk-paper); box-shadow: inset 2px 0 0 rgb(7 12 30 / .22); }
.queue--cards .card-rows { margin: 2px 0; }
.qi .chip.k { padding: 3px 9px 3px 8px; font-weight: 700; letter-spacing: .06em; background: color-mix(in srgb, var(--k) 15%, var(--mk-sheet)); box-shadow: none; }
.qi .chip.k::before { width: 8px; height: 8px; border-radius: 50%; }
.qi-clock.is-due { max-width: 62%; padding: 3px 10px; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; background: color-mix(in srgb, var(--mk-flare) 12%, var(--mk-sheet)); }
/* the dashboard's urgent list: each row a small card, its kind as a tinted label */
.durgs { display: grid; gap: 6px; }
.durg { padding: 10px 12px 10px 16px; border-bottom: 0; background: var(--mk-paper); box-shadow: inset 4px 0 0 var(--k); transition: background 160ms, transform 160ms var(--mk-hand); }
.durg:hover { background: color-mix(in srgb, var(--k) 8%, var(--mk-sheet)); transform: translateX(2px); }
.durg-k { justify-self: start; align-self: start; padding: 3px 7px; font-weight: 700; color: var(--mk-navy); background: color-mix(in srgb, var(--k) 16%, var(--mk-sheet)); }
.durg-c.is-due { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--mk-flare) 12%, var(--mk-sheet)); }
/* the desk's search */
.dsearch-row { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.dsearch { flex: 1; max-width: 620px; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 44px; background: var(--mk-sheet); box-shadow: var(--mk-shadow), inset 0 0 0 1px rgb(7 12 30 / .1); }
.dsearch:focus-within { box-shadow: var(--mk-shadow), inset 0 0 0 1.5px var(--mk-navy), inset 0 -2px 0 var(--mk-green); }
.dsearch .ico { width: 18px; height: 18px; flex: none; color: rgb(7 12 30 / .5); }
.dsearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: 0; font: inherit; font-size: 15px; color: var(--mk-navy); }
.dsearch input::placeholder { color: rgb(7 12 30 / .42); }
.dres { margin-bottom: 14px; }
.bcard[hidden], .qi[hidden] { display: none; }
/* a journalist's reply, opened on the desk */
.qi-open { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font-family: inherit; }
.qi-open:hover { text-decoration: underline; text-underline-offset: 4px; }
.rp { display: grid; gap: 12px; }
.rp .meta { margin: 0; }
.rp-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rp-due { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--mk-flare); background: color-mix(in srgb, var(--mk-flare) 12%, var(--mk-sheet)); }
.rp-read { margin: 0; display: flex; gap: 8px; align-items: baseline; font-size: 14px; color: var(--mk-ink2); }
.rp-text { margin: 0; padding: 14px 18px; white-space: pre-wrap; font-size: 15px; line-height: 1.55; background: var(--mk-paper); box-shadow: inset 3px 0 0 var(--mk-navy); }
.rp-answer { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--mk-rule2); }

/* Lunar dates: expected (dashed) until rep. confirms the month's start, with a faint mark on the days either side. */
.ev--moon { box-shadow: inset 0 0 0 1px rgb(7 12 30 / .45); outline: 1px dashed rgb(7 12 30 / .45); outline-offset: -3px; }
.ev--own.ev--moon { outline-color: rgb(252 251 248 / .6); }
.ev--maybe { color: rgb(7 12 30 / .5); font-style: italic; background: repeating-linear-gradient(135deg, rgb(7 12 30 / .05) 0 4px, transparent 4px 8px); }
.moon-note { font-size: 14px; color: var(--mk-ink2); padding: 10px 12px; background: var(--midnight-100); border-left: 2px solid var(--mk-navy); }

/* A member's page for the rep. team: their calendar first, as they see it, then everything else. */
.member-cal { margin: 8px 0 44px; padding-top: 26px; border-top: 1px solid var(--mk-rule2); }
.head--sub { margin-bottom: 18px; }
.head--sub .lede { font-size: 15px; }
.ev--story.ev--suggested { padding-left: 15px; }

/* A note in a day on the calendar shows its first lines; the whole note is in rep.'s notes and on hover. */
.cday .ev--note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 12px; line-height: 1.25; }
.cgrid--week .cday .ev--note { -webkit-line-clamp: 4; }

.task-seg { margin-top: 6px; }
.task-seg button { border: 0; background: none; font: inherit; cursor: pointer; padding: 6px 14px; }
.task-seg button[aria-current] { background: var(--mk-navy); color: var(--mk-sheet); }
.tboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; min-height: 320px; }
.tcol { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--midnight-100); border-radius: 4px; transition: box-shadow .12s; }
.tcol.is-over { box-shadow: inset 0 0 0 2px var(--mk-green); }
.tcol-h { display: flex; justify-content: space-between; margin: 0 0 4px; font-size: 14px; }
.tcol-h span { font-family: var(--font-mono); font-size: 12px; color: var(--mk-ink2); }
.tcard { display: grid; gap: 4px; padding: 12px; border: 0; border-radius: 3px; background: var(--mk-sheet); box-shadow: 0 1px 0 rgb(7 12 30 / .12), inset 0 0 0 1px rgb(7 12 30 / .08); text-align: left; cursor: grab; font: inherit; color: inherit; }
.tcard:hover { box-shadow: 0 2px 6px rgb(7 12 30 / .12), inset 0 0 0 1px rgb(7 12 30 / .2); }
.tcard.is-dragging { opacity: .45; }
.tcol[data-col="done"] .tcard b { color: var(--mk-ink2); text-decoration: line-through; text-decoration-color: rgb(7 12 30 / .3); }
.tcol-empty { font-size: 13.5px; padding: 6px 2px; }
@media (max-width: 700px) { .tboard { grid-template-columns: 1fr; } }

/* All of one kind (the key's View all). */
.vall { min-height: 200px; }
.vall-lede { margin: -4px 0 18px; }
.vall-h { margin: 22px 0 10px; font-size: 15px; }
.vall-h:first-child { margin-top: 0; }
/* rep.'s library: a timeline down the year; each date's pitch window fills as it opens. */
.tl, .tl ol { list-style: none; margin: 0; padding: 0; }
.tl-m { position: relative; padding-left: 22px; border-left: 2px solid rgb(7 12 30 / .12); margin-left: 6px; }
.tl-mh { display: block; position: relative; padding: 4px 0 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--mk-ink2); }
.tl-mh::before { content: ""; position: absolute; left: -29px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--mk-sheet); box-shadow: inset 0 0 0 2px rgb(7 12 30 / .3); }
.tl-i button { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; width: 100%; padding: 10px 12px; margin: 0 0 8px -12px; border: 0; border-radius: 4px; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.tl-i button:hover { background: var(--midnight-100); }
.tl-d { font-weight: 700; font-size: 15px; padding-top: 1px; }
.tl-b { display: grid; gap: 4px; }
.tl-w { display: block; height: 4px; border-radius: 2px; background: rgb(7 12 30 / .08); overflow: hidden; margin-top: 4px; }
.tl-w i { display: block; height: 100%; background: var(--mk-green); }
.tl-wl { font-size: 12px; color: var(--mk-ink2); }
.tl-i.is-open .tl-wl { color: var(--signal-700); font-weight: 600; }
/* Their own dates: cards with the day large. */
.dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.dcard { display: grid; gap: 4px; justify-items: start; padding: 14px 16px 16px; border: 0; border-radius: 4px; background: var(--mk-navy); color: var(--mk-sheet); text-align: left; font: inherit; cursor: pointer; }
.dcard:hover { filter: brightness(1.15); }
.dcard-m { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.dcard-d { font-size: 40px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.dcard .meta { color: rgb(252 251 248 / .7); }
/* Just happened: a feed, newest first. */
.feed { list-style: none; margin: 0; padding: 0; }
.feed button { display: grid; gap: 3px; width: 100%; padding: 14px 4px; border: 0; border-bottom: 1px solid var(--mk-rule2); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.feed button:hover b { text-decoration: underline; text-decoration-color: var(--mk-green); }
.feed-when { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--signal-700); }
/* Lunar dates, by Islamic month. */
.hm { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.hm-m { padding: 14px 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(7 12 30 / .14); outline: 1px dashed rgb(7 12 30 / .25); outline-offset: -5px; }
.hm-m h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 16px; }
.hm-m ul { list-style: none; margin: 0; padding: 0; }
.hm-m button { display: grid; gap: 2px; width: 100%; padding: 8px 0; border: 0; border-top: 1px solid var(--mk-rule2); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.hm-h { font-family: var(--font-mono); font-size: 11px; color: var(--mk-ink2); }
/* Stories: the board has four columns. */
.tboard--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .tboard--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* rep. suggests: cards with the answer on them. */
.sugg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sugg-card { display: grid; gap: 6px; align-content: start; padding: 14px 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(7 12 30 / .3); background: repeating-linear-gradient(135deg, rgb(7 12 30 / .04) 0 6px, transparent 6px 12px); }
.sugg-card--gap { background: none; box-shadow: inset 0 0 0 1px rgb(7 12 30 / .14); }
.sugg-card .actions { margin-top: 6px; }
/* rep.'s notes: cards in rep.'s hand, in the order they show. */
.notes-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.note-card { display: grid; gap: 10px; align-content: start; padding: 16px 16px 14px; border: 0; border-radius: 3px; background: #fdfbe9; box-shadow: 0 1px 0 rgb(7 12 30 / .1), 0 6px 14px -10px rgb(7 12 30 / .35); text-align: left; font: inherit; color: inherit; cursor: pointer; transform: rotate(-.4deg); }
.note-card:nth-child(even) { transform: rotate(.5deg); }
.note-card .hand { font-size: 17px; line-height: 1.3; }
.note-card:not(.is-shown) { opacity: .8; }

/* ---------------------------------------------------------------- the calendar's kinds, in colour
   One hue per kind, checked as a set for colour-blind separation and normal-vision distinctness (the dataviz
   validator, all pairs, on the page's sheet). Chips wear a soft tint with a solid bar in their hue; their words stay in
   ink. Their own dates stay solid navy, rep.'s notes stay green handwriting, and rep.'s suggestions keep their hatching,
   so no kind relies on colour alone. */
:root { --k-library: #2a78d6; --k-emergent: #dd4b2c; --k-lunar: #d9a404; --k-story: #b8459c; --k-task: #1baf7a; }
.ev--library, .ev--emergent, .ev--story, .ev--task, .ev--moon, .ev--maybe { --k: var(--k-library); }
.ev--emergent { --k: var(--k-emergent); }
.ev--story { --k: var(--k-story); }
.ev--task { --k: var(--k-task); }
.ev--moon, .ev--maybe { --k: var(--k-lunar); }
.ev--library, .ev--emergent, .ev--story, .ev--task, .ev--moon { background: color-mix(in srgb, var(--k) 13%, var(--mk-sheet)); color: var(--mk-navy); box-shadow: inset 3px 0 0 var(--k); outline: 0; }
.ev--library, .ev--emergent, .ev--moon { padding-left: 9px; }
.ev--emergent { font-weight: 700; }
.ev--story::before { background: var(--k-story); }
.ev--task::before { box-shadow: inset 0 0 0 1.5px var(--k-task); background: var(--mk-sheet); left: 7px; }
.ev--task { padding-left: 21px; }
.ev--task.ev--done { background: color-mix(in srgb, var(--k-task) 6%, var(--mk-sheet)); }
.ev--task.ev--done::before { background: var(--k-task); }
/* Lunar, expected: the moon's gold, dashed while the day isn't confirmed; their own lunar dates too. */
.ev--moon, .ev--own.ev--moon { background: color-mix(in srgb, var(--k-lunar) 15%, var(--mk-sheet)); color: var(--mk-navy); box-shadow: inset 3px 0 0 var(--k-lunar); outline: 1px dashed var(--k-lunar); outline-offset: -2px; }
.ev--maybe { color: rgb(7 12 30 / .55); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--k-lunar) 18%, transparent) 0 4px, transparent 4px 8px); box-shadow: none; }
/* rep.'s suggestion of a story: the story's hue, behind rep.'s hatching. */
.ev--story.ev--suggested { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--k-story) 14%, transparent) 0 6px, transparent 6px 12px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-story) 55%, transparent); color: var(--mk-ink2); }
/* rep. suggests: anything rep. or Ansar put on a member's calendar for them to take or leave (a story, a release, an
   advisory, a task, a date), in one look everywhere: rep.'s violet, hatched and outlined in dashes. It isn't theirs
   until they add it. */
:root { --k-suggest: #6b4fd6; --k-suggest-ink: #47309e; }
.ev.ev--suggested { color: var(--k-suggest-ink); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--k-suggest) 15%, var(--mk-sheet)) 0 6px, var(--mk-sheet) 6px 12px); box-shadow: none; outline: 1px dashed var(--k-suggest); outline-offset: -1px; }
.ev--story.ev--suggested::before { background: var(--k-suggest); }
.ev--task.ev--suggested::before { box-shadow: inset 0 0 0 1.5px var(--k-suggest); background: var(--mk-sheet); }
.ev.ev--suggested .ev-st { color: var(--k-suggest); }
.cmini-d.has--suggested::after { background: var(--k-suggest); }
.wk-type.wk-suggested { color: var(--k-suggest-ink); background: color-mix(in srgb, var(--k-suggest) 12%, var(--mk-sheet)); box-shadow: none; outline: 1px dashed var(--k-suggest); outline-offset: -1px; }
.tlx-day.is-sug, .tlx-pt.is-sug { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--k-suggest) 30%, transparent) 0 3px, transparent 3px 6px); box-shadow: none; outline: 1px dashed var(--k-suggest); outline-offset: -1px; }
.sugg-grid .sugg-card:not(.sugg-card--gap) { box-shadow: none; outline: 1px dashed var(--k-suggest); outline-offset: -1px; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--k-suggest) 7%, var(--mk-sheet)) 0 6px, var(--mk-sheet) 6px 12px); }
.chip.chip--sug { color: var(--k-suggest-ink); background: color-mix(in srgb, var(--k-suggest) 10%, var(--mk-sheet)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-suggest) 55%, transparent); }
.sug-banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 4px; background: color-mix(in srgb, var(--k-suggest) 8%, var(--mk-sheet)); outline: 1px dashed var(--k-suggest); outline-offset: -1px; font-size: 14px; line-height: 1.45; color: var(--mk-navy); }
.sug-banner > .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--k-suggest); }
.sug-banner b { color: var(--k-suggest-ink); }
/* Ansar's mark on what it suggests: before the name in a calendar chip, in a type label and a chip. */
.ev-ans { display: inline-flex; vertical-align: -2px; margin-right: 4px; }
.ev-ans .ico, .wk-suggested .ico, .chip--sug .ico { width: 12px; height: 12px; color: var(--k-suggest); }
.wk-type.wk-suggested { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.ev--story.ev--suggested:has(.ev-ans)::before, .ev--task.ev--suggested:has(.ev-ans)::before { display: none; }
.ev--story.ev--suggested:has(.ev-ans), .ev--task.ev--suggested:has(.ev-ans) { padding-left: 6px; }
/* The key: each mark is its kind's chip in miniature. */
.cal-key .ev--library, .cal-key .ev--emergent, .cal-key .ev--story, .cal-key .ev--moon { padding: 0; }
.cal-key .ev--task { padding: 0; }
.cal-key .ev--task::before { left: 5px; width: 8px; height: 8px; margin-top: -4px; }
/* The year: a day's dot takes the colour of what's on it. */
.cmini-d.has--library::after { background: var(--k-library); }
.cmini-d.has--emergent::after { background: var(--k-emergent); }
.cmini-d.has--story::after { background: var(--k-story); }
.cmini-d.has--task::after { background: var(--k-task); }
.cmini-d.has--maybe::after { background: var(--k-lunar); }
.cmini-d.has--note::after { background: var(--signal-700); }
/* A chip's state ("expected", "could be, by the moon", "in progress"): a small note after its name; in a month's
   small days only a story keeps it (the colour, dashes and hatching say the rest; hovering shows it). */
.ev .ev-st { margin-left: 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: rgb(7 12 30 / .55); }
.cgrid:not(.cgrid--week) .ev:not(.ev--story) .ev-st { display: none; }
.ev--story .ev-st { margin-left: 0; }

/* The date a story is for, over every step of its flow. */
.aflow-for { display: grid; gap: 3px; margin: 0 0 18px; padding: 12px 14px 12px 16px; border-radius: 4px; background: color-mix(in srgb, var(--k-library) 9%, var(--mk-sheet)); box-shadow: inset 3px 0 0 var(--k-library); }
.aflow-for b { font-size: 16px; }
.aflow-for .hand { font-size: 15px; line-height: 1.3; margin-top: 4px; }
.aflow-for--now { background: color-mix(in srgb, var(--k-emergent) 9%, var(--mk-sheet)); box-shadow: inset 3px 0 0 var(--k-emergent); }

/* A day's view: a date ahead whose pitch window this day is in, as its run-up, not as something on the day. */
.cone-win { margin-top: 22px; gap: 10px; }
.runup { display: grid; gap: 10px; padding: 14px 16px; border-radius: 4px; background: var(--signal-100); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal-700) 30%, transparent); }
.runup-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.runup-to { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.runup-to b { font-size: 17px; }
.runup-arrow { color: var(--signal-700); font-weight: 700; }
.runup-when { font-weight: 600; color: var(--signal-800); }
.runup-day { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--signal-800); }
.runup-bar { position: relative; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--signal-700) 14%, var(--mk-sheet)); margin-right: 52px; }
.runup-bar i { position: relative; display: block; height: 100%; border-radius: 4px; background: repeating-linear-gradient(135deg, var(--signal-600) 0 5px, var(--signal-500) 5px 10px); }
.runup-bar i::after { content: ""; position: absolute; right: -1px; top: -4px; width: 2px; height: 16px; background: var(--mk-navy); }
.runup-end { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--mk-navy); white-space: nowrap; }
.runup-what { margin: 0; font-size: 14px; line-height: 1.4; color: var(--mk-ink2); }

/* A day with nothing on it says so plainly, so the run-ups below can't be taken for the day's own. */
.cone-empty { display: grid; gap: 6px; padding: 22px 20px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px rgb(7 12 30 / .14); outline: 1px dashed rgb(7 12 30 / .22); outline-offset: -7px; }
.cone-empty b { font-size: 24px; line-height: 1.1; letter-spacing: -.01em; color: var(--mk-navy); }
.cone-empty span { font-size: 15px; color: var(--mk-ink2); }

/* ---------------------------------------------------------------- linked references (refs.js): pills in what's typed */
.p-person::before { border-radius: 50%; background: rgb(7 12 30 / .38); }
.p-date::before { width: 8px; height: 8px; box-shadow: inset 0 2.5px 0 var(--k-own, var(--mk-navy)), inset 0 0 0 1.25px var(--mk-navy); }
.refbox { position: relative; outline: 0; white-space: pre-wrap; overflow-wrap: anywhere; cursor: text; }
.refbox.is-empty::before { content: attr(data-placeholder); display: block; height: 0; color: rgb(7 12 30 / .38); pointer-events: none; }
.refbox .pill { cursor: default; user-select: all; }
.say-text.refbox { max-height: 460px; overflow: auto; }
.ref-field { width: 100%; box-sizing: border-box; padding: 12px 14px; background: var(--mk-fibre), var(--mk-sheet); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .2); font-weight: 500; font-size: 15.5px; line-height: 1.6; letter-spacing: -.005em; color: var(--mk-navy); max-height: 420px; overflow: auto; }
.ref-field:focus { box-shadow: inset 0 0 0 1px var(--mk-navy), inset 0 -2px 0 var(--mk-green); }
.ref-field.is-empty::before { color: rgb(7 12 30 / .3); }
.mpick--fixed { position: absolute; z-index: 80; }
.mpick-new { font-size: 14px; }
.mpick-new b { font-weight: 700; }
.refs-new { display: grid; gap: 6px; margin: 12px 0 4px; padding: 10px 12px; background: rgb(59 194 76 / .06); box-shadow: inset 2px 0 0 var(--mk-green); }
.refs-new-i { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.refs-new-i > span { flex: 1; min-width: 160px; display: grid; }
.refs-new-i small { font-size: 12.5px; color: rgb(7 12 30 / .62); }
.refs-new-x { appearance: none; border: 0; background: none; padding: 4px; color: rgb(7 12 30 / .5); cursor: pointer; display: inline-flex; }
.refs-new-x:hover { color: var(--mk-navy); }
.pill[data-pill] { height: auto; padding-top: 0; padding-bottom: 0; }
.mpick .pill { white-space: normal; text-align: left; }
/* A reference pill reads as a word in the line: it wraps with the text instead of overflowing a narrow card. */
.pill[data-pill] { display: inline; white-space: normal; padding: 1px 6px 1px 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pill[data-pill]::before { display: inline-block; margin-right: 5px; vertical-align: 1px; }

/* ---------------------------------------------------------------- Newsroom: Ansar's reason, and viewing as a member */
.tc-why { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--mk-ink2); }
.tc-why svg, .nr-why svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--mk-green); }
.tas { display: inline-flex; align-items: center; gap: 8px; }
.tas .in { width: auto; max-width: 260px; }
.nr-why { display: flex; gap: 10px; align-items: flex-start; max-width: 70ch; margin: 0 0 26px; padding: 14px 16px; background: var(--mk-sheet); box-shadow: inset 3px 0 0 var(--mk-green), var(--mk-shadow); font-size: 15.5px; line-height: 1.5; }
.nr-sources { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.nr-sources li { display: grid; gap: 3px; }
.nr-sources a { display: inline-flex; gap: 6px; align-items: baseline; color: var(--mk-navy); text-decoration: none; line-height: 1.35; }
.nr-sources a:hover b { text-decoration: underline; }
.nr-sources a svg { flex: none; width: 12px; height: 12px; }
.nr-sources .soft { font-size: 13.5px; line-height: 1.45; }

/* ---------------------------------------------------------------- Admin → Library */
.lib-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 28px 36px; margin-bottom: 36px; }
.lib-top .sec { margin: 0; }
.lib-kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lib-kinds button { position: relative; display: flex; justify-content: space-between; width: 100%; padding: 8px 10px; border: 0; background: none; font: inherit; font-size: 14.5px; color: var(--mk-navy); text-align: left; cursor: pointer; isolation: isolate; }
.lib-kinds button i { position: absolute; inset: 3px auto 3px 0; z-index: -1; background: var(--midnight-100); border-radius: 2px; }
.lib-kinds button:hover i, .lib-kinds button[aria-pressed="true"] i { background: color-mix(in srgb, var(--mk-green) 28%, transparent); }
.lib-kinds button[aria-pressed="true"] { font-weight: 700; }
.lib-find { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.lib-find .tfind { flex: 1 1 280px; }
.lib-find select { width: auto; }
.lib-tbl td { vertical-align: top; }
.lib-also { display: block; margin-top: 2px; }
.lib-tbl svg { width: 12px; height: 12px; vertical-align: -1px; }
.lib-owners + .lib-owners { margin-top: 22px; }

/* ---------------------------------------------------------------- Admin → Decisions */
.dec-stat { display: grid; gap: 6px; align-content: start; padding: 12px 0 0; border: 0; border-top: 1px solid var(--mk-rule); background: none; font: inherit; color: var(--mk-navy); text-align: left; cursor: pointer; }
.dec-stat[aria-pressed="true"] { border-top: 3px solid var(--mk-green); padding-top: 10px; }
.dec-stat:hover b { text-decoration: underline; text-decoration-color: var(--mk-green); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.dec-find select { flex: 1 1 180px; }
.dec-rows > li { gap: 6px; }
.dec-rows > li.is-undone .dec-t b { text-decoration: line-through; text-decoration-color: rgb(7 12 30 / .35); }
.dec-t { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.dec-t a { color: inherit; text-decoration: none; }
.dec-t a:hover b { text-decoration: underline; }
.dec-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.dec-foot a { color: inherit; }
.dec-acts { margin-left: auto; display: inline-flex; gap: 8px; }
.chip.dec-library { background: var(--midnight-100); }
.chip.dec-context { background: color-mix(in srgb, var(--mk-green) 22%, transparent); }
.chip.dec-query { background: rgb(7 12 30 / .08); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .25); }
.chip.dec-newsroom { background: var(--mk-navy); color: var(--mk-sheet); }
.dec-notes { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.dec-diff th:first-child { text-transform: capitalize; }
.dec-diff td { vertical-align: top; padding: 8px 14px 8px 0; }
.dec-diff tbody th { text-align: left; padding: 8px 14px 8px 0; font-weight: 600; white-space: nowrap; }
.dec-steps { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }
.dec-steps li { display: grid; gap: 1px; }
.dec-steps li.is-err span:last-child { color: var(--mk-ink2); font-style: italic; }

/* ---------------------------------------------------------------- a member's context (staff) */
.mctx { margin: 0 0 40px; padding: 22px 24px; background: var(--mk-sheet); box-shadow: var(--mk-shadow); }
.mctx > .meta { display: block; margin: -4px 0 18px; max-width: 80ch; }
.mctx-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; }
@container win (max-width: 820px) { .mctx-grid { grid-template-columns: 1fr; } }
.mctx-kind { display: grid; gap: 6px; margin-top: 12px; }
.mctx-tags { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mctx-tag { display: inline-flex; align-items: baseline; gap: 7px; padding: 4px 6px 4px 10px; border-radius: 3px; background: var(--midnight-100); font-size: 13.5px; line-height: 1.3; }
.mctx-tag a { color: var(--mk-navy); text-decoration: none; font-weight: 600; }
.mctx-tag a:hover { text-decoration: underline; }
.mctx-tag.mctx-ansar { background: color-mix(in srgb, var(--mk-green) 20%, transparent); }
.mctx-tag.mctx-staff { background: none; box-shadow: inset 0 0 0 1px var(--mk-navy); }
.mctx-tag .meta { font-size: 9.5px; }
.mctx-tag button { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; background: none; color: var(--mk-ink2); cursor: pointer; align-self: center; }
.mctx-tag button svg { width: 10px; height: 10px; }
.mctx-tag button:hover { color: var(--mk-navy); }
.mctx-add { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mctx-add input { flex: 1 1 200px; }
.mctx-add select { width: auto; }
.mctx-qh { margin-top: 28px; }
.mctx-q .actions { justify-content: flex-start; margin-top: 2px; }

/* ---------------------------------------------------------------- the calendar as a workspace (calwork.js) */
/* The month, as one scroll of weeks: its own scroll box, the weekdays pinned, months told apart by shade. */
.cflow { position: relative; max-height: min(calc(100dvh - 260px), 920px); min-height: 420px; overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid rgb(7 12 30 / .12); scroll-padding-top: 34px; }
.cgrid--flow .dow { position: sticky; top: 0; z-index: 2; background: var(--mk-sheet); }
.cday--m0 { background: var(--mk-sheet); }
.cday--m1 { background: color-mix(in srgb, var(--mk-sheet) 82%, var(--midnight-100)); }
.cday--first { box-shadow: inset 3px 0 0 var(--mk-navy); }
.cday .cmo { margin-right: 5px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.cflow-end { display: flex; justify-content: center; padding: 18px 0 22px; }
.ev-n { float: right; margin-left: 4px; font-family: var(--font-mono); font-size: 9.5px; color: rgb(7 12 30 / .55); }
.cal-here { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; min-height: 24px; }
.cal-here .meta { font-size: 9.5px; }
.cal-here .pres-p + .pres-p .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--mk-sheet); }
.cal-inbox { display: inline-flex; align-items: center; gap: 6px; }
.cal-inbox svg { width: 14px; height: 14px; }

/* Kinds, the same everywhere */
.wk-type { flex: none; display: inline-block; min-width: 92px; padding: 2px 7px; border-radius: 2px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; background: var(--midnight-100); color: var(--mk-navy); text-align: center; }
.wk-task { background: rgb(7 12 30 / .07); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .35); }
.wk-story { background: var(--midnight-100); }
.wk-release { background: var(--mk-navy); color: var(--mk-sheet); }
.wk-advisory { background: color-mix(in srgb, var(--mk-navy) 70%, var(--mk-sheet)); color: var(--mk-sheet); }
.wk-date { background: var(--mk-sheet); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .45); }
.wk-note { background: color-mix(in srgb, var(--signal-700) 14%, transparent); color: var(--signal-700); }
.wk-suggested { background: repeating-linear-gradient(135deg, rgb(7 12 30 / .08) 0 5px, transparent 5px 10px); box-shadow: inset 0 0 0 1px rgb(7 12 30 / .35); }
.wk-ansar { margin-left: 6px; font-size: 9px; }
.wk-n { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 10px; color: rgb(7 12 30 / .6); }
.wk-n svg { width: 11px; height: 11px; }

/* The list */
.wk-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; }
.wk-f { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 0; border-radius: 3px; background: none; box-shadow: inset 0 0 0 1px var(--mk-rule); font: 600 12.5px/1.2 var(--font-body); color: var(--mk-navy); cursor: pointer; }
.wk-f[aria-pressed="false"] { color: rgb(7 12 30 / .45); text-decoration: line-through; text-decoration-color: rgb(7 12 30 / .3); }
.wk-f[data-mine][aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--mk-navy); background: var(--midnight-100); }
.wk-q { flex: 1 1 200px; margin-left: auto; max-width: 320px; }
.wk-g { margin-bottom: 22px; }
.wk-gh { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; padding-bottom: 6px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; box-shadow: inset 0 -1px 0 var(--mk-navy); }
.wk-g--overdue .wk-gh { color: var(--signal-700); box-shadow: inset 0 -1px 0 var(--signal-700); }
.wk-rows { list-style: none; margin: 0; padding: 0; }
.wk-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 110px minmax(90px, 160px) 24px 36px; align-items: center; gap: 12px; width: 100%; padding: 9px 4px; border: 0; border-bottom: 1px solid var(--mk-rule2); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.wk-row:hover { background: var(--wash); }
.wk-row.is-done .wk-t b { text-decoration: line-through; color: rgb(7 12 30 / .5); }
.wk-t { display: grid; gap: 1px; min-width: 0; }
.wk-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.wk-when { display: grid; font-size: 13px; font-weight: 600; }
.wk-st { font-size: 12.5px; color: var(--mk-ink2); }
.wk-c { text-align: right; }
@container win (max-width: 700px) {
  .wk-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .wk-row .wk-st, .wk-row .wk-who { display: none; }
  .wk-type { min-width: 0; }
}

/* The board */
.wk-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.wk-col { display: grid; gap: 8px; padding: 10px; background: var(--midnight-100); border-radius: 4px; min-height: 160px; align-content: start; }
.wk-colh { display: flex; align-items: center; gap: 8px; margin: 2px 2px 4px; font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.wk-colh .meta { margin-left: auto; }
.wk-dot { width: 9px; height: 9px; border-radius: 2px; }
.wk-card { display: grid; gap: 5px; width: 100%; padding: 11px 12px; border: 0; border-radius: 3px; background: var(--mk-sheet); box-shadow: 0 1px 0 rgb(7 12 30 / .12), inset 0 0 0 1px rgb(7 12 30 / .08); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.wk-card:hover { box-shadow: 0 2px 6px rgb(7 12 30 / .12), inset 0 0 0 1px rgb(7 12 30 / .2); }
.wk-card b { font-size: 14px; line-height: 1.3; }
.wk-card.is-done b { text-decoration: line-through; color: rgb(7 12 30 / .5); }
.wk-card-f { display: flex; align-items: center; gap: 6px; min-height: 18px; }
.wk-card-r { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.wk-none { padding: 6px 4px; font-size: 13px; }

/* The timeline */
.tlx { --tlx-lw: 260px; position: relative; overflow-x: auto; border-top: 1px solid rgb(7 12 30 / .12); padding-bottom: 8px; }
.tlx-head, .tlx-row, .tlx-gh { display: grid; grid-template-columns: var(--tlx-lw) var(--tlx-w); }
.tlx-head { position: sticky; top: 0; z-index: 3; background: var(--mk-sheet); box-shadow: inset 0 -1px 0 rgb(7 12 30 / .12); height: 42px; }
.tlx-l { position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px 0 4px; background: var(--mk-sheet); box-shadow: inset -1px 0 0 rgb(7 12 30 / .12); }
.tlx-l b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.tlx-l .wk-type { min-width: 0; }
.tlx-track { position: relative; }
.tlx-m { position: absolute; top: 6px; padding-left: 6px; font-size: 12.5px; font-weight: 800; white-space: nowrap; box-shadow: inset 1.5px 0 0 var(--mk-navy); }
.tlx-w { position: absolute; bottom: 4px; font-family: var(--font-mono); font-size: 9px; color: rgb(7 12 30 / .5); padding-left: 3px; }
.tlx-body { position: relative; }
.tlx-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: rgb(7 12 30 / .06); pointer-events: none; }
.tlx-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--mk-green); z-index: 1; pointer-events: none; }
.tlx-gh { height: 34px; align-items: end; }
.tlx-gh .tlx-l { align-items: flex-end; padding-bottom: 6px; font-size: 13px; }
.tlx-row { height: 34px; cursor: pointer; }
.tlx-row:hover .tlx-l, .tlx-row:hover .tlx-track { background: var(--wash); }
.tlx-row:focus-visible { outline: 2px solid var(--mk-green); outline-offset: -2px; }
.tlx-win { position: absolute; top: 11px; height: 12px; background: repeating-linear-gradient(135deg, rgb(7 12 30 / .14) 0 4px, rgb(7 12 30 / .05) 4px 8px); border-radius: 2px 0 0 2px; }
.tlx-win.is-open { background: color-mix(in srgb, var(--mk-green) 45%, transparent); }
.tlx-day { position: absolute; top: 8px; height: 18px; background: var(--mk-navy); border-radius: 2px; }
.tlx-day.is-sug { background: none; box-shadow: inset 0 0 0 1.5px var(--mk-navy); }
.tlx-task { position: absolute; top: 12px; height: 10px; border-radius: 5px; background: rgb(7 12 30 / .18); box-shadow: inset -10px 0 0 var(--mk-navy); }
.tlx-task.is-done { background: rgb(7 12 30 / .08); box-shadow: inset -10px 0 0 rgb(7 12 30 / .35); }
.tlx-pt { position: absolute; top: 10px; width: 14px; height: 14px; transform: rotate(45deg); background: var(--mk-navy); }
.tlx-pt.is-sug { background: none; box-shadow: inset 0 0 0 1.5px var(--mk-navy); }
.tlx-pt--note { background: var(--signal-700); border-radius: 50%; transform: none; }
.tlx-lab { position: absolute; top: 9px; font-size: 11.5px; color: var(--mk-ink2); white-space: nowrap; }
@container win (max-width: 700px) { .tlx { --tlx-lw: 150px; } .tlx-l .wk-type { display: none; } }

/* One item, in the side panel */
dialog.is-side { width: min(560px, 100vw); height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; }
dialog.is-side[open] { animation: side-in 320ms var(--ease-out); }
dialog.is-side .dlg { height: 100%; }
@keyframes side-in { from { transform: translateX(40px); opacity: 0; } }
.sp-facts { display: grid; gap: 14px; }
.sp-note { font-size: 19px; line-height: 1.35; }
.sp-here { display: flex; align-items: center; gap: 8px; min-height: 0; }
.sp-here:empty { display: none; }
.sp-comments { padding-top: 6px; box-shadow: inset 0 1px 0 var(--mk-rule2); }

/* Comments */
.cms { display: grid; gap: 10px; padding-top: 14px; }
.cm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cm { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.cm-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 13.5px; }
.cm-h .chip { font-size: 9px; padding: 1px 5px; }
.cm-acts { margin-left: auto; display: inline-flex; gap: 10px; font-size: 12px; }
.cm-t { margin-top: 2px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm--ansar .cm-t { color: var(--mk-ink2); }
.cm-ansar { background: var(--mk-green); color: var(--mk-navy); }
.cm-edit { width: 100%; }
.cm-none { font-size: 13.5px; }
.cm-new { display: grid; gap: 8px; }
.cm-box { position: relative; }
.cm-box textarea { width: 100%; resize: vertical; min-height: 64px; }
.cm-f { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cm-f .meta { font-size: 9.5px; }
.cm-pick { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 5; list-style: none; margin: 0; padding: 4px; min-width: 260px; background: var(--mk-sheet); box-shadow: var(--mk-shadow2); }
.cm-pick li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 2px; cursor: pointer; font-size: 13.5px; }
.cm-pick li.on, .cm-pick li:hover { background: var(--midnight-100); }
.cm-pick .meta { margin-left: auto; font-size: 9px; }

/* The inbox, and a member's team in Settings */
.inbox li { padding: 0; }
.inbox-i { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; width: 100%; padding: 12px 4px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.inbox-i span { display: grid; gap: 2px; }
.inbox-i:hover { background: var(--wash); }
.inbox li.is-new .inbox-i b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--mk-green); vertical-align: 1px; }
.team-p { display: inline-flex; align-items: center; gap: 10px; }
.cal-key[hidden] { display: none; }
.chip.dec-calendar { background: color-mix(in srgb, var(--signal-700) 16%, transparent); color: var(--signal-700); }

/* The key, as a dropdown in the calendar's bar */
.keydd { position: relative; }
.keydd-b { display: inline-flex; align-items: center; gap: 7px; }
.keydd-b svg { width: 12px; height: 12px; }
.keydd-b[aria-expanded="true"] svg { transform: rotate(180deg); }
.keydd-list.cal-key { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(300px, calc(100vw - 32px)); margin: 0; padding: 6px; display: grid; gap: 2px; background: var(--mk-sheet); box-shadow: var(--mk-shadow2), inset 0 0 0 1px rgb(7 12 30 / .08); }
.keydd-list.cal-key[hidden] { display: none; }
.keydd-list .cal-key-i { display: flex; border-radius: 3px; box-shadow: none; background: none; }
.keydd-list .cal-key-t { flex: 1; padding: 8px 8px; border-radius: 3px; font-size: 13px; color: var(--mk-navy); }
.keydd-list .cal-key-all { border-left: 0; border-radius: 3px; padding: 8px 8px; }
.keydd-list .cal-key-t .cal-key-n { margin-left: auto; }
.keydd-tick { flex: none; width: 14px; height: 14px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px var(--mk-navy); background: var(--mk-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.2l2.6 2.6L11 4.4' fill='none' stroke='white' stroke-width='1.8'/%3E%3C/svg%3E") center/12px no-repeat; }
.cal-key-i.is-off .keydd-tick { background: none; }
.keydd-list .cal-key-i.is-off .cal-key-t { text-decoration: none; }

/* Connected apps (Settings): what Ansar reads in each, and why. */
.app-picks { display: grid; gap: 6px; margin: 8px 0; }
.app-pick { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.app-pick small { display: block; color: rgb(7 12 30 / .6); }
/* A pill in Ansar's words stays one line: a long name is cut short (all of it shows on hover), never a two-line box. */
.ans-said .pill { display: inline-flex; max-width: min(100%, 30ch); }
.ans-said .pill > .pill-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Adding a date that's one of rep.'s: with "Add rep.'s date" ticked, the fields for a date of their own step aside. */
form:has(input[name="use_library"]:checked) .ad-own { display: none; }
/* A date's pitch window in its side panel: a card in the pitch window's own colour (the day view's run-up), or one
   button to add one. */
.pw-card { display: grid; gap: 10px; padding: 12px 14px 10px; border-radius: 4px; background: var(--signal-100); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--signal-700) 30%, transparent); }
.pw-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pw-h .eyebrow { color: var(--signal-800); }
.pw-days { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; }
.pw-days b { font-size: 18px; letter-spacing: -.01em; color: var(--mk-navy); }
.pw-days > span[aria-hidden] { color: var(--signal-700); font-weight: 700; }
.pw-n { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--signal-800); }
.pw-bar { margin-top: 2px; }
.pw-f { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; min-height: 30px; }
.pw-a { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.pw-a .btn .ico { width: 13px; height: 13px; }
.pw-range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 10px; }
.pw-range .f { margin: 0; }
.pw-to { padding-bottom: 10px; color: var(--signal-700); font-weight: 700; }
.pw-add { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1.25px dashed rgb(7 12 30 / .28); border-radius: 4px; background: none; color: var(--mk-navy); font: inherit; text-align: left; cursor: pointer; transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.pw-add:hover { background: var(--signal-100); border-color: color-mix(in srgb, var(--signal-700) 60%, transparent); }
.pw-add > .ico { flex: none; width: 16px; height: 16px; color: var(--signal-700); }
.pw-add > span { display: grid; gap: 2px; }
.pw-add b { font-size: 14px; }
.pw-add span span { font-size: 13px; color: var(--mk-ink2); }
@media (max-width: 520px) { .pw-range { grid-template-columns: 1fr; } .pw-to { display: none; } }
/* A date's time and place: two small time fields and a wide one for where, in Add a date; "Where" under the date in its
   side panel. */
/* The fields for a date of their own sit in one wrapper (it steps aside for rep.'s date): it keeps the form's rhythm. */
.form > .ad-own { display: grid; gap: inherit; }
.grid3.ad-time { grid-template-columns: minmax(120px, 150px) minmax(120px, 150px) minmax(0, 1fr); gap: 20px 24px; }
.ad-time small { margin-left: 4px; font-weight: 400; color: var(--mk-ink2); }
@media (max-width: 560px) { .grid3.ad-time { grid-template-columns: 1fr 1fr; } .grid3.ad-time > :last-child { grid-column: 1 / -1; } }
.drawer-where { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 15px; color: var(--mk-navy); }
/* Where a date is: Google's suggestions under the field as they type, and "Open in Google Maps" beside it in the panel. */
.ad-place { position: relative; }
.places { position: absolute; z-index: 20; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px 0; list-style: none; background: var(--mk-sheet); border-radius: 4px; box-shadow: 0 0 0 1px rgb(7 12 30 / .14), 0 10px 24px -10px rgb(7 12 30 / .35); max-height: 260px; overflow-y: auto; }
.places li { display: grid; gap: 1px; padding: 7px 12px; cursor: pointer; }
.places li:hover, .places li:focus { background: rgb(7 12 30 / .05); outline: 0; }
.places li b { font-size: 14px; font-weight: 600; color: var(--mk-navy); }
.places li span { font-size: 12.5px; color: var(--mk-ink2); }
.drawer-where { flex-wrap: wrap; }
.drawer-where .btn { margin-left: auto; }
.drawer-where .btn .ico { width: 13px; height: 13px; }

/* One date, in its side panel: the facts as labelled rows, then a section for each thing on it, each under the same
   header (a label, a count, a rule), with room between them. */
.dr { display: grid; gap: 30px; }
.dr > p { margin: 0; }
.dr-facts { display: grid; margin: 0; box-shadow: inset 0 1px 0 var(--mk-rule2); }
.dr-facts > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 11px 0; box-shadow: inset 0 -1px 0 var(--mk-rule2); }
.dr-facts dt { padding-top: 4px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgb(7 12 30 / .48); }
.dr-facts dd { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--mk-navy); overflow-wrap: anywhere; }
.dr-soft { font-size: 13.5px; font-weight: 400; color: var(--mk-ink2); }
.dr-from { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.dr-map { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--mk-navy); text-decoration: underline; text-decoration-color: rgb(7 12 30 / .3); text-underline-offset: 3px; }
.dr-map:hover { text-decoration-color: var(--mk-green); }
.dr-map .ico { width: 12px; height: 12px; }
.dr-about { font-size: 15.5px; line-height: 1.55; }
.dr-sec { display: grid; gap: 12px; min-width: 0; }
.dr-sec > .sec-h { padding-bottom: 8px; }
.dr-advice { padding: 2px 0 2px 14px; }
.dr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.dr-list > li { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; padding: 10px 0; box-shadow: inset 0 -1px 0 var(--mk-rule2); }
.dr-list > li:first-child { padding-top: 0; }
.dr-list > li:last-child { box-shadow: none; padding-bottom: 0; }
.dr-list > li > .meta, .dr-list > li > .chip { flex: none; }
.dr-li-t { min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.35; color: var(--mk-navy); text-align: left; }
a.dr-li-t, button.dr-li-t { padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgb(7 12 30 / .25); text-underline-offset: 4px; }
a.dr-li-t:hover, button.dr-li-t:hover { text-decoration-color: var(--mk-green); text-decoration-thickness: 2px; }
.dr-none { margin: 0; font-size: 14px; color: var(--mk-ink2); }
.pw-h .pw-n { margin-left: 4px; }
@media (max-width: 520px) { .dr-facts > div { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; } .cm-handle, .cm-sheet-b { padding-left: 20px; padding-right: 20px; } }

/* A panel's comments, docked at its bottom: a bar when closed; open, a sheet that slides up over the panel, the thread
   scrolling above the box to write in, while the panel behind it dims. */
.is-side.has-cm .dlg { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.cm-dock { position: relative; z-index: 4; height: 58px; }
.cm-sheet { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-rows: 58px minmax(0, 1fr); height: 58px; overflow: hidden; background: var(--mk-sheet); border-radius: 0; box-shadow: 0 -1px 0 rgb(7 12 30 / .1); transition: height 340ms var(--ease-out), box-shadow 340ms var(--ease-out), border-radius 340ms var(--ease-out); }
.cm-open .cm-sheet { height: min(78dvh, calc(100dvh - 150px)); border-radius: 12px 12px 0 0; box-shadow: 0 -1px 0 rgb(7 12 30 / .12), 0 -24px 48px -20px rgb(7 12 30 / .4); }
.cm-handle { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 6px 26px 0; border: 0; background: none; color: var(--mk-navy); font: inherit; text-align: left; cursor: pointer; }
.cm-handle:hover { background: rgb(7 12 30 / .025); }
.cm-handle:focus-visible { outline: 2px solid var(--mk-green); outline-offset: -2px; }
.cm-grip { position: absolute; top: 7px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: rgb(7 12 30 / .16); }
.cm-n { min-width: 20px; padding: 2px 6px; border-radius: 10px; background: var(--mk-navy); color: var(--mk-sheet); font-family: var(--font-mono); font-size: 10px; text-align: center; line-height: 1.4; }
.cm-n:empty { display: none; }
.cm-last { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13.5px; color: var(--mk-ink2); }
.cm-handle > .ico { width: 16px; height: 16px; transform: rotate(180deg); transition: transform 340ms var(--ease-out); color: rgb(7 12 30 / .55); }
.cm-open .cm-handle > .ico { transform: none; }
.cm-open .cm-last { visibility: hidden; }
.cm-sheet-b { display: grid; min-height: 0; padding: 0 26px 18px; }
.cm-sheet-b .sp-comments { display: grid; min-height: 0; padding: 0; box-shadow: none; }
.cm-sheet-b .cms { grid-template-rows: minmax(0, 1fr) auto; min-height: 0; padding-top: 6px; gap: 14px; }
.cm-sheet-b .cms > .sec-h { display: none; }
.cm-sheet-b .cm-list { overflow: auto; align-content: start; padding: 8px 2px 4px 0; overscroll-behavior: contain; box-shadow: inset 0 1px 0 var(--mk-rule2); }
.cm-sheet-b .cm-new { padding-top: 12px; box-shadow: inset 0 1px 0 var(--mk-rule2); }
.has-cm .dlg-b { transition: opacity 340ms var(--ease-out); }
.cm-open .dlg-b { opacity: .35; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .cm-sheet, .cm-handle > .ico, .has-cm .dlg-b { transition: none; } }
/* Staff, a member's page: the watch memory, one list per kind. */
.mp-watch { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-weight: 400; }
.mp-watch li { display: grid; gap: 1px; }
.mp-watch b { font-weight: 700; }
.mp-watch .soft { font-size: 13px; line-height: 1.4; }

/* When a spokesperson is free (avail.js): label on the left, the choices on the right */
.av { display: grid; gap: 10px; margin: 0; padding: 14px 16px 12px; border: 0; box-shadow: inset 0 0 0 1px rgb(7 12 30 / .14); }
.av > legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: var(--mk-navy); }
.av-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; }
.av-k { font: 500 11px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgb(7 12 30 / .6); }
.av .pick-chip span { height: 30px; padding: 0 11px; font-size: 13px; }
.av-or { display: inline-flex; gap: 2px; margin-left: 4px; }
.av-or .btn { height: 30px; font-size: 12.5px; }
.av select, .av input:not([type=checkbox]) { height: 34px; font-size: 14px; }
.av select { width: auto; min-width: 180px; max-width: 220px; }
.av-away { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.av .av-away input[type=date] { flex: none; width: 170px; }
.av-away span { font-size: 13px; color: rgb(7 12 30 / .6); }
.av-hint { margin: 0; font-size: 12.5px; color: rgb(7 12 30 / .6); }
@media (max-width: 560px) { .av-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* The master account's organizations (app.js orgPicker) */
.opk { min-height: 100vh; background: var(--paper, #fff); }
.opk-top { display: flex; gap: 6px; }
.opk-body { max-width: 1080px; margin: 0 auto; padding: 48px var(--pad) 80px; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: start; }
.opk-col { display: grid; gap: 14px; }
.opk-col .lede { margin: 0; }
.opk-list { margin: 6px 0 0; padding: 0; list-style: none; }
.opk-org { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
.opk-org-n { flex: 1; display: grid; gap: 2px; min-width: 0; }
.opk-org-n b { font-size: 15px; }
.opk-org-n small { font-size: 13px; color: var(--mk-ink2); }
.opk-new { display: grid; gap: 12px; padding: 22px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--mk-rule); position: sticky; top: 24px; }
.opk-new .hint { margin: 0; }
.opk-set { margin-bottom: 28px; }
@media (max-width: 860px) { .opk-body { grid-template-columns: 1fr; gap: 32px; padding-top: 28px; } .opk-new { position: static; } }