/* The CRM page: the one style sheet. The design is the Figma file "CRM" (frames "CRM · Board" and
   "CRM · Organization file"): a dark rail at the left in Storm, a soft canvas for the page, white cards
   with a gray edge and round corners, large Space Grotesk headings. Storm is the solid color (a button,
   the track, the Next step card). Arc Blue is the second color on light: a link, the current tab, a focus
   ring, the edge of the one card that asks. Arc Cyan marks the current view in the rail and the focus
   ring on dark, never text on a light ground. Labels are sentence case; IBM Plex Mono is for numbers,
   dates and money. Colors and type are the Arc tokens of brand/tokens.css, with no business name in a
   variable. Brand rules kept: buttons are solid; one solid button on each screen; the rail carries the
   one gradient, a soft Arc Blue glow at its top, and no card, button or text has one.

   Each part of the page has one section. A section states its rules once, then its media blocks in this
   order: from 760px up (the sidebar), the tablet (up to 1099px), the phone (up to 759px), reduced motion.
   The last section holds the state colors that must win over the color of a part. */

/* ===== Tokens ===== */
:root {
  --storm: #0B1026;
  --night: #161E44;
  --arc-blue: #2448E8;
  --arc-cyan: #3EE6FF;
  --ice: #EEF3FF;

  --canvas: #F6F7FA;         /* the ground of a page */
  --ground: var(--canvas);
  --raised: #FFFFFF;
  --tint: #F3F4F7;           /* a quiet fill on white: a tag, a chosen option */
  --track: #EEF0F4;          /* the track of a segmented control; a lane of the board at 70% */
  --ink: var(--storm);
  --muted: #5A6072;
  --line: #E1E4EA;
  --edge: #CDD2DD;           /* the edge of an outline button or a field */
  --rail: var(--storm);      /* the sidebar, and the top bar of a phone */
  --rail-ink: #AEB6D6;       /* text on the rail and on a Storm card */
  --rail-field: var(--night);
  --rail-line: rgba(174, 182, 214, .16);
  --late-on-dark: #FF8A80;
  --brand: var(--storm);     /* a solid fill: a button, a dot of the track */
  --brand-hover: var(--night);
  --accent: var(--arc-blue); /* text and edges that carry the second color */
  --on-brand: #FFFFFF;
  --late: #B3261E;
  --good: #0E7A4B;
  --caution: #8A5A00;
  --amber-dot: #F5B83D;
  --violet: #5B3FC4;
  --scrim: rgba(11, 16, 38, .34);
  --toast: var(--storm);
  --on-toast: var(--ice);
  --av-1: var(--storm);
  --on-av-1: #FFFFFF;
  --cl: var(--storm);        /* the square mark of Claude */
  --on-cl: #FFFFFF;

  /* One color for each status: the bar of a column, a chip. */
  --s-new: #2448E8;
  --s-contacted: #4A557A;
  --s-call-booked: #8A5A00;
  --s-proposal: #5B3FC4;
  --s-won: #0E7A4B;
  --s-lost: #B3261E;
  --s-parked: #5A6072;
  --s-client: #0E7A4B;
  --s-rfp: #5B3FC4;

  --shadow: 0 1px 3px rgba(11, 16, 38, .05);
  --shadow-2: 0 8px 24px rgba(11, 16, 38, .08);
  --shadow-hair: 0 1px 2px rgba(11, 16, 38, .08), 0 0 0 1px rgba(11, 16, 38, .04);
  --shadow-menu: 0 8px 28px rgba(11, 16, 38, .16);
  --shadow-sheet: 0 0 60px rgba(11, 16, 38, .28);

  --sans: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  /* The type scale: size/line height. A rule with a size outside the scale states its own. */
  --type-micro: 11px/14px;   /* a chip, a tag */
  --type-label: 12px/16px;   /* a label, a number, a date */
  --type-small: 13px/17px;
  --type-note: 13px/18px;
  --type-ui: 14px/18px;      /* a control, a menu item, a table row */
  --type-text: 14px/21px;    /* running text */
  --type-body: 15px/20px;    /* the name of a row */
  --type-lead: 16px/21px;
  --type-h3: 17px/22px;
  --type-h2: 20px/26px;
  --type-h1: 46px/52px;

  --pad: 40px;               /* the side margin of a page */
  --side: 232px;             /* the width of the sidebar */
  color-scheme: light;
}
/* The dark colors do not follow the device. Only <html data-theme="dark"> shows them, and no control sets it. */
:root[data-theme="dark"] {
  --ground: var(--storm);
  --raised: var(--night);
  --tint: #1D2757;
  --track: #1D2757;
  --edge: #2A3566;
  --ink: var(--ice);
  --muted: #8FA2D8;
  --line: #2A3566;
  --brand: var(--arc-blue);
  --brand-hover: #3D5EF0;
  --accent: var(--arc-cyan);
  --late: #FF6B6B;
  --good: #3DD68C;
  --caution: #F5B83D;
  --violet: #B58CFF;
  --scrim: rgba(0, 0, 0, .55);
  --toast: var(--ice);
  --on-toast: var(--storm);
  --av-1: var(--ice);
  --on-av-1: var(--storm);
  --cl: var(--ice);
  --on-cl: var(--storm);
  --s-new: #3EE6FF;
  --s-contacted: #8FA2D8;
  --s-call-booked: #F5B83D;
  --s-proposal: #B58CFF;
  --s-won: #3DD68C;
  --s-lost: #FF6B6B;
  --s-parked: #8FA2D8;
  --s-client: #3DD68C;
  --s-rfp: #B58CFF;
  --shadow: 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .35);
  --shadow-menu: 0 8px 28px rgba(0, 0, 0, .5);
  --shadow-sheet: 0 0 60px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
@media (min-width: 760px) and (max-width: 1199px) {
  :root { --side: 64px; }    /* the rail of icons */
}
@media (max-width: 1099px) {
  :root { --pad: 24px; }
}
@media (max-width: 759px) {
  :root { --pad: 20px; }
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 var(--type-text) var(--sans); }
h1, h2, h3, p, dl, dd, ol, blockquote { margin: 0; }
ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.boot, .none { padding: 24px 0; color: var(--muted); font-size: 15px; }
.boot { padding: 24px 16px; }

/* ===== Type that repeats ===== */
.mono, .num { font: 400 var(--type-label) var(--mono); letter-spacing: .02em; color: var(--muted); }
.label { font: 500 var(--type-small) var(--sans); color: var(--muted); }
.label-accent { color: var(--accent); }
.is-late { color: var(--late); }
.quiet { color: var(--muted); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.sub { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 17px; }
.sub:empty { display: none; }
.eyebrow { font: 500 var(--type-small) var(--sans); color: var(--muted); }
.link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.accent { color: var(--accent); }
.gap { margin-top: 24px; }
.gap-l { margin-top: 40px; }
hr.rule { height: 1px; margin: 28px 0 0; border: 0; background: var(--line); }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--raised); color: var(--muted); font: 400 10px/1 var(--mono); }

/* ===== Controls ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; min-width: 104px; height: 44px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px; background: var(--brand); color: var(--on-brand); font: 500 var(--type-ui) var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--brand-hover); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn .icon { margin-right: 8px; }
.btn-line { border-color: var(--edge); background: var(--raised); color: var(--ink); }
.btn-line:hover { background: var(--tint); }
.btn-32 { min-width: 72px; height: 32px; padding: 0 16px; }
.btn-36 { min-width: 84px; height: 36px; padding: 0 18px; }
.btn-40 { min-width: 124px; height: 40px; padding: 0 16px; }
.btn-48 { min-width: 160px; height: 48px; font-size: 16px; line-height: 20px; }
.btn-block { width: 100%; height: 50px; }
.btn-red { border-color: var(--late); background: var(--raised); color: var(--late); }
.btn-red:hover { filter: none; background: color-mix(in srgb, var(--late) 6%, var(--raised)); }
.text-btn { padding: 0; border: 0; background: none; color: var(--muted); font: 500 var(--type-ui) var(--sans); cursor: pointer; }
.text-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.text-btn:disabled { opacity: .6; cursor: progress; }
.text-btn-s { display: inline-flex; gap: 10px; color: var(--ink); font-weight: 400; text-align: left; }
.text-btn-ic { display: inline-flex; align-items: center; gap: 8px; }
.link-red { color: var(--late); }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); }
.icon-btn:hover { background: var(--tint); color: var(--ink); }
.input { width: 100%; height: 46px; padding: 0 16px; border: 1px solid var(--muted); border-radius: 10px; background: var(--raised); color: var(--ink); font: 400 var(--type-ui) var(--sans); }
.input::placeholder { color: var(--muted); }
textarea.input { height: auto; min-height: 104px; padding: 12px 16px; line-height: 21px; resize: vertical; }
.input-s { width: 132px; height: 32px; padding: 0 10px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.notice { margin-top: 16px; padding: 14px 16px; border: 2px solid var(--late); border-radius: 8px; color: var(--late); font-weight: 500; }
/* A segmented control: a tint track, the chosen one a white pill with a hairline shadow. */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: 20px; background: var(--track); }
.seg button { height: 32px; padding: 0 14px; border: 0; border-radius: 16px; background: none; color: var(--muted); font: 500 var(--type-small) var(--sans); }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-hair); }
.card { position: relative; border: 1px solid var(--line); border-radius: 18px; background: var(--raised); box-shadow: var(--shadow); }
.tag { align-self: flex-start; padding: 4px 8px; border-radius: 6px; background: var(--tint); color: var(--muted); font: 500 var(--type-micro) var(--sans); }
.tag-white { background: var(--raised); }
.tag-amber { background: color-mix(in srgb, var(--caution) 12%, transparent); color: var(--caution); font-size: 12px; line-height: 16px; padding: 5px 10px; }
.tag-green { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good); }
.pillnote { display: inline-block; padding: 5px 10px 6px; border-radius: 6px; background: var(--tint); color: var(--accent); font: 500 12px/15px var(--sans); }
/* A status: a tinted pill with a dot of its color. */
.chip { --c: var(--s-parked); display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px 0 8px; border: 0; border-radius: 11px; background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--c); font: 500 var(--type-label) var(--sans); white-space: nowrap; }
.chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-new { --c: var(--s-new); }
.chip-contacted { --c: var(--s-contacted); }
.chip-call-booked { --c: var(--s-call-booked); }
.chip-proposal { --c: var(--s-proposal); }
.chip-won { --c: var(--s-won); }
.chip-lost { --c: var(--s-lost); }
.chip-client { --c: var(--s-client); }
.chip-rfp { --c: var(--s-rfp); }
.chip-do-not-contact { --c: var(--late); }
.chip-researched { border: 1px solid var(--line); background: var(--raised); color: var(--muted); }
.chip-researched::before { display: none; }
.chip-btn { text-decoration: none; }
@media (max-width: 759px) {
  .input { font-size: 16px; }
  .seg button { height: 36px; border-radius: 18px; }
  .seg { border-radius: 22px; }
}

/* ===== Marks: an owner, Claude, the initials of a person, a dot ===== */
/* An owner: a circle with the first letter. The first founder is blue, the second is dark. */
.av { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #5A6072; color: #FFFFFF; font: 500 15px/1 var(--sans); }
.av-0 { background: var(--arc-blue); }
.av-1 { background: var(--av-1); color: var(--on-av-1); }
.av-2 { background: #5B3FC4; }
.av-3 { background: #0E7A4B; }
.av-none { border: 1px dashed var(--muted); background: none; }
.av-22 { width: 22px; height: 22px; font-size: 12px; }
.av-20 { width: 20px; height: 20px; font-size: 11px; }
.av-24 { width: 24px; height: 24px; font-size: 13px; }
.av-32 { width: 32px; height: 32px; font-size: 16px; }
.av-44 { width: 44px; height: 44px; font-size: 21px; }
.cl { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 7px; background: var(--cl); color: var(--on-cl); font: 500 13px/1 var(--mono); }
.cl-24 { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
.cl-22 { width: 22px; height: 22px; border-radius: 6px; font-size: 11px; }
.cl-20 { width: 20px; height: 20px; border-radius: 5px; font-size: 10px; }
.ini { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--tint); color: var(--accent); font: 500 10px/1 var(--mono); }
.ini-36 { width: 36px; height: 36px; font-size: 11px; }
.ini-28 { width: 28px; height: 28px; }
.ini-20 { width: 20px; height: 20px; font-size: 8px; }
.table .ini { border: 1px solid var(--line); background: var(--raised); }
.pill .ini { border: 0; background: var(--tint); }
.dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.dot-inferred { background: var(--amber-dot); }
.dot-open { border: 1px solid var(--muted); background: none; }
.dot-bad { background: var(--late); }
.legend { display: inline-flex; gap: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sample { display: inline-block; padding: 1px 7px 2px; border: 1px dashed var(--late); border-radius: 10px; color: var(--late); font: 500 10px/13px var(--sans); vertical-align: 3px; white-space: nowrap; }

/* ===== A menu, or a small panel, below its button ===== */
.menu-wrap { position: relative; display: inline-flex; }
.menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: grid; min-width: 196px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); box-shadow: var(--shadow-menu); }
.menu-right { left: auto; right: 0; }
.menu-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: 400 var(--type-ui) var(--sans); text-align: left; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.menu-item > span:not(.av) { flex: 1; }
.menu-item:hover, .menu-item:focus-visible { background: var(--tint); }
.menu-item[aria-current="true"] { font-weight: 500; }
.menu-item .icon { color: var(--accent); }
.menu-note { padding: 6px 10px; font: 500 var(--type-label) var(--sans); color: var(--muted); white-space: nowrap; }

.menu-line { height: 1px; margin: 6px 0; border: 0; background: var(--line); }
.menu-item.is-red { color: var(--late); }
.menu-item kbd { margin-left: 16px; }
a.menu-item { text-decoration: none; }
/* The founder's menu */
.menu-account { min-width: 260px; }
.menu-me { display: grid; gap: 2px; padding: 10px 10px 8px; }
.menu-me b { font: 500 var(--type-body) var(--sans); }
.menu-me span { color: var(--muted); font-size: 12px; line-height: 16px; }
/* A small panel below a button: Move the date */
.pop { width: 320px; padding: 20px 19px 16px; gap: 0; cursor: default; }
.pop > .label { margin-bottom: 6px; }
.pop-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; height: 38px; margin: 0 -11px; padding: 0 11px; border-radius: 8px; cursor: pointer; }
.pop-row:has(input:checked) { background: var(--tint); }
.pop-row b { font: 400 var(--type-ui) var(--sans); }
.pop-row:has(input:checked) b { font-weight: 500; }
.pop-row .date { width: auto; height: 28px; padding: 0; border: 0; background: none; }
.pop-row .date span { display: none; }
.pop .input { height: 44px; margin-top: 10px; }
.pop .btn-block { height: 40px; margin-top: 12px; }
.pop-note { margin-top: 12px; color: var(--muted); font: 400 var(--type-label) var(--sans); }

/* ===== The toast ===== */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 40; max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 8px; background: var(--toast); color: var(--on-toast); font: 500 var(--type-ui) var(--sans); opacity: 0; transform: translate(-50%, 10px); pointer-events: none; transition: opacity .15s ease-out, transform .15s ease-out; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.is-bad { background: #B3261E; color: #FFFFFF; }
.toast-x { margin: -4px -6px -4px 14px; padding: 4px; border: 0; background: none; color: inherit; vertical-align: middle; }
.toast-act { margin-left: 22px; padding: 0; border: 0; background: none; color: var(--arc-cyan); font: 500 var(--type-ui) var(--sans); }
.toast.is-bad .toast-act { color: #FFFFFF; text-decoration: underline; }
:root[data-theme="dark"] .toast-act { color: var(--arc-blue); }
@media (max-width: 759px) {
  .toast { bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* ===== Radio, check, toggle, pills, choices ===== */
.check-native { position: absolute; opacity: 0; pointer-events: none; }
.check-native + i { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--muted); border-radius: 50%; background: var(--raised); }
.check-native:checked + i { border: 5px solid var(--brand); }
.check-native:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }
.check { display: inline-flex; align-items: center; gap: 10px; font: 400 var(--type-ui) var(--sans); cursor: pointer; }
.check .check-native + i { border-radius: 4px; color: transparent; }
.check .check-native:checked + i { border: 0; background: var(--brand); color: #FFFFFF; }
.check .icon { stroke-width: 2.2; }
.checks { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.toggle { flex: none; width: 38px; height: 22px; padding: 2px; border: 0; border-radius: 11px; background: var(--muted); }
.toggle i { display: block; width: 18px; height: 18px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(11, 16, 38, .3); transition: transform .15s ease-out; }
.toggle[aria-checked="true"] { background: var(--brand); }
.toggle[aria-checked="true"] i { transform: translateX(16px); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.switch-row b { display: block; font: 500 var(--type-body) var(--sans); }
.switch-row span { color: var(--muted); font: 400 var(--type-note) var(--sans); }
.switch-row + p { margin-top: 20px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--ink); font: 400 var(--type-ui) var(--sans); white-space: nowrap; }
.pill[aria-checked="true"] { padding: 0 12px; border: 2px solid var(--accent); background: var(--tint); font-weight: 500; }
.pill > .icon { display: none; color: var(--accent); stroke-width: 2; }
.pill[aria-checked="true"] > .icon { display: block; }
.pills-wide .pill { flex: 1 1 auto; justify-content: center; }
.pills-people .pill { padding-left: 8px; }
.pills-people .pill[aria-checked="true"] { padding-left: 7px; }
.pills-with { display: flex; flex-wrap: wrap; gap: 8px; }
.pills-with .date-pill { width: auto; height: 36px; padding: 0 13px; border-color: var(--line); }
.pills-with .date-pill .icon { display: none; }
/* The owner: a box for each founder. From 760px up it also shows the name. */
.own { display: flex; gap: 8px; }
.own-box { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); }
.own-box[aria-checked="true"] { border: 2px solid var(--accent); background: var(--tint); }
.own-name { display: none; }
.choices { margin: 14px -12px 0; }
.choice { border-radius: 12px; }
.choice.is-on { background: var(--tint); }
.choice-head { display: grid; grid-template-columns: 30px 128px minmax(0, 1fr); align-items: center; min-height: 44px; padding: 0 12px; cursor: pointer; }
.choice-head b { font: 500 var(--type-body) var(--sans); }
.choice-head span { color: var(--muted); font: 400 var(--type-note) var(--sans); }
.choice-more { padding: 6px 12px 16px 42px; }
.choice-more .label { margin-bottom: 8px; }
.choice-more .label.gap { margin-top: 18px; }
.choices-sheet .choice-head { grid-template-columns: 30px minmax(0, 1fr); row-gap: 2px; padding: 12px; align-items: start; }
.choices-sheet .choice-head i { margin-top: 2px; }
.choices-sheet .choice-head b { font-size: 16px; }
.choices-sheet .choice-head span { grid-column: 2; }
.choices-sheet .choice-more .check { margin-top: 12px; }
@media (min-width: 760px) {
  .own .own-box { width: auto; grid-auto-flow: column; gap: 8px; padding: 0 12px 0 10px; }
  .own-name { display: inline; color: var(--ink); font: 500 var(--type-ui) var(--sans); }
}
@media (prefers-reduced-motion: reduce) {
  .toggle i { transition: none; animation: none; }
}

/* ===== Fields ===== */
.step-row + .check { margin-top: 14px; }
.field > .label, .label-row { display: flex; align-items: center; justify-content: space-between; }
.label-row .link { font: 500 var(--type-small) var(--sans); }
.field-pair.first .field, .sheet-block + .field { margin-top: 24px; }
.hint { color: var(--muted); font: 400 var(--type-label) var(--sans); }
.hint-side { align-self: center; margin-top: 34px; }
.select-wrap { position: relative; display: block; }
.select { appearance: none; padding-right: 40px; }
.select-wrap .icon { position: absolute; top: 15px; right: 16px; color: var(--muted); pointer-events: none; }
.date { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap; }
.date .icon { color: var(--muted); }
.date:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.date-native { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; opacity: 0; cursor: pointer; }
.input.mono { font: 400 var(--type-note) var(--mono); }
.step-3 { display: grid; grid-template-columns: minmax(0, 1fr) 148px auto; gap: 12px; align-items: start; }
.stepblock .check { margin-top: 20px; }
.stepblock .check b { font-weight: 500; }
.sheet-hint { margin-top: 6px; color: var(--muted); font: 400 var(--type-note) var(--sans); }
.sheet-info { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--muted); font: 400 var(--type-label) var(--sans); }
.docrow { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 16px; border-radius: 8px; background: var(--tint); color: var(--muted); }
.docrow-name { flex: 1; min-width: 0; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.docrow .link { font: 500 var(--type-small) var(--sans); }
.tidy { display: flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--muted); font: 400 var(--type-note) var(--sans); }
.tidy .link { font-weight: 500; }
@media (max-width: 759px) {
  .tidy { flex-wrap: wrap; }
}

/* ===== The frame: the rail (the top bar of a phone), search, the banner ===== */
.skip { position: absolute; top: 8px; left: 8px; z-index: 50; padding: 8px 12px; border-radius: 8px; background: var(--brand); color: var(--on-brand); font: 500 var(--type-ui) var(--sans); text-decoration: none; transform: translateY(-200%); }
.skip:focus { transform: none; }
.main:focus { outline: none; }
/* The bar is Storm at each width. On a phone it is the row at the top; from 760px up it is the rail. */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; height: 64px; padding: 0 var(--pad); background: var(--rail); color: var(--rail-ink); }
.top > .brand:focus-visible, .top .tab:focus-visible, .top .people:focus-visible, .top .search-open:focus-visible { outline-color: var(--arc-cyan); }
/* The logo is the lockup for dark surfaces of brand/logos/orthus; the rail of icons shows the Keystone. */
.brand { margin-right: 39px; color: #FFFFFF; font: 700 18px/23px var(--sans); text-decoration: none; }
.brand img { display: block; width: auto; height: 26px; }
.brand .brand-mark { display: none; }
.tabs { display: flex; align-self: stretch; gap: 28px; }
.tab { display: inline-flex; align-items: center; gap: 6px; padding-top: 2px; border-bottom: 2px solid transparent; color: var(--rail-ink); font: 400 var(--type-ui) var(--sans); text-decoration: none; white-space: nowrap; }
.tab:hover { color: #FFFFFF; }
.tab[aria-current="page"] { border-bottom-color: var(--arc-cyan); color: #FFFFFF; font-weight: 500; }
.tab .num { padding-top: 3px; color: var(--rail-ink); }
.tab .icon { display: none; }
.tools-nav { display: none; }   /* the founders' tools: in the rail from 760px up, on the More page of a phone */
.num-accent { color: var(--accent); }
.search { position: relative; display: flex; align-items: center; flex: 0 0 280px; height: 38px; margin-left: auto; padding: 0 9px 0 12px; border: 1px solid var(--rail-line); border-radius: 10px; background: var(--rail-field); color: var(--rail-ink); }
.search:focus-within { outline: 2px solid var(--arc-cyan); outline-offset: 1px; }
.search > .icon { display: none; }
.search-input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: #FFFFFF; font: 400 var(--type-small) var(--sans); }
.search-input::placeholder { color: var(--rail-ink); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-open { display: none; color: var(--rail-ink); }
.search-open:hover { background: var(--rail-field); color: #FFFFFF; }
.search-key { margin-left: 8px; border-color: var(--rail-ink); background: none; color: var(--rail-ink); }
.search-clear { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--rail-ink); }
.top.has-q .search-key { display: none; }
.top.has-q .search { outline: 2px solid var(--arc-cyan); outline-offset: -1px; }
.results { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 500px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--ink); box-shadow: var(--shadow-menu); }
.results-list { padding: 10px 8px 6px; }
.results .label { padding: 12px 12px 8px; }
.result { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 2px; column-gap: 12px; padding: 8px 12px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.result.is-on, .result:hover, .result:focus-visible { background: var(--tint); }
.result b { font: 500 var(--type-ui) var(--sans); }
.result span { font: 400 var(--type-label) var(--sans); color: var(--muted); }
.result-ic { display: grid; place-items: center; color: var(--muted); }
.result-main { display: grid; gap: 2px; min-width: 0; }
.result-main b { font: 500 var(--type-body) var(--sans); color: var(--ink); }
.result-main b i { margin-left: 10px; color: var(--muted); font: 400 var(--type-small) var(--sans); }
.result-main span { font: 400 var(--type-small) var(--sans); color: var(--muted); }
.result-main .is-late { color: var(--late); }
.result-chips { display: flex; gap: 6px; }
.result .hit { color: var(--ink); font-weight: 500; }
.result .label { padding: 0; }
.results-keys { display: flex; align-items: center; gap: 6px; margin: 0; padding: 12px 20px; border-top: 1px solid var(--line); color: var(--muted); font: 400 var(--type-label) var(--sans); }
.results-keys kbd + kbd { margin-left: -2px; }
.results-keys kbd:not(:first-child) { margin-left: 14px; }
.results-keys kbd:nth-child(2) { margin-left: 0; }
.results-keys .label { margin-left: auto; padding: 0; }
.results-none { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; color: var(--muted); font-size: 13px; }
.results-none div { display: grid; gap: 4px; }
.results-none b { font: 500 var(--type-body) var(--sans); color: var(--ink); }
.results-none span { font-size: 13px; line-height: 17px; }
.top .menu { color: var(--ink); }
.top > .menu-wrap { margin-left: 34px; }
.people { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; text-align: left; }
.people-name { display: none; }
.top .av-1 { background: var(--night); box-shadow: inset 0 0 0 1px var(--rail-ink); }
/* The strip below the top bar: white, with a 4 px bar in the color of the state. */
.banner { position: sticky; top: 64px; z-index: 9; border-bottom: 1px solid var(--line); background: var(--raised); box-shadow: inset 4px 0 0 var(--caution); }
.banner-in { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px var(--pad); font: 400 var(--type-ui) var(--sans); }
.banner-in .icon { color: var(--caution); }
.banner-in .text-btn { margin-left: auto; }
.banner-in .link { margin-left: 4px; font-weight: 500; }
.banner-in b { font-weight: 500; }
.banner-bad { box-shadow: inset 4px 0 0 var(--late); }
.banner-bad .icon { color: var(--late); }
.banner-info { box-shadow: inset 4px 0 0 var(--accent); }
.banner-info .icon { color: var(--accent); }
.banner-caution { box-shadow: inset 4px 0 0 var(--caution); }
/* From 760px up, the bar is the rail at the left (Liam, 2026-10-12; the dark rail, 2026-10-17): the logo,
   search, the views, and the founder at the bottom. The one gradient of the page is its glow. */
@media (min-width: 760px) {
  .top { position: fixed; top: 0; bottom: 0; left: 0; flex-direction: column; align-items: stretch; width: var(--side); height: auto; padding: 28px 24px 16px;
    background: radial-gradient(260px 240px at 0 0, color-mix(in srgb, var(--arc-blue) 42%, transparent), transparent), var(--rail); }
  .top .brand { display: flex; flex: none; align-items: center; height: 32px; margin: 0 0 22px; }
  .top .search { flex: none; margin: 0 0 26px; }
  .tabs { flex: 1 1 auto; flex-direction: column; align-self: auto; gap: 4px; min-height: 0; margin: 0 -6px; padding: 2px 6px; overflow-y: auto; }
  .tab { position: relative; flex: none; justify-content: space-between; height: 40px; padding: 0 14px 0 25px; border-bottom: 0; border-radius: 10px; font-size: 15px; line-height: 20px; }
  .tab:hover { background: color-mix(in srgb, var(--night) 60%, transparent); }
  .tab[aria-current="page"] { background: var(--rail-field); }
  .tab[aria-current="page"]::before { content: ""; position: absolute; top: 11px; bottom: 11px; left: 12px; width: 3px; border-radius: 2px; background: var(--arc-cyan); }
  .tab .num { padding-top: 0; color: var(--rail-ink); font-size: 12px; }
  .tools-nav { display: flex; flex: none; flex-direction: column; gap: 2px; margin: 12px -6px 0; padding: 12px 6px 0; border-top: 1px solid var(--rail-line); }
  .tools-label { margin: 0 0 4px 25px; color: var(--rail-ink); font: 500 var(--type-label) var(--sans); }
  .tools-nav .tab { height: 36px; }
  .top > .menu-wrap { flex: none; margin: 12px 0 0; padding-top: 16px; border-top: 1px solid var(--rail-line); }
  .people { width: 100%; border-radius: 10px; }
  .people .av { width: 32px; height: 32px; font-size: 15px; }
  .people-name { display: grid; gap: 1px; min-width: 0; }
  .people-name b { overflow: hidden; color: #FFFFFF; font: 500 var(--type-ui) var(--sans); text-overflow: ellipsis; white-space: nowrap; }
  .people-name span { color: var(--rail-ink); font: 400 var(--type-label) var(--sans); }
  .people-name span:empty { display: none; }
  /* The menu of the founder opens up from the bottom of the rail. */
  .top .menu-account { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
  .main, .banner { margin-left: var(--side); }
  .banner { top: 0; }
}
/* From 760px to 1199px the rail shows icons, so the board has room for its five columns.
   Each label stays for a screen reader and as a tooltip; a count is a badge on the icon. Search opens beside the rail. */
@media (min-width: 760px) and (max-width: 1199px) {
  .top { align-items: center; padding: 20px 10px 14px; }
  .top .brand { margin-bottom: 18px; }
  .brand .brand-full { display: none; }
  .brand .brand-mark { display: block; height: 30px; }
  .top .search-open { display: grid; flex: none; width: 44px; height: 40px; margin-bottom: 12px; border-radius: 10px; }
  .top .search { display: none; }
  .top.is-search .search, .top.has-q .search { position: fixed; top: 16px; left: calc(var(--side) + 16px); z-index: 30; display: flex; width: min(420px, 100vw - var(--side) - 32px); height: 44px; margin: 0; box-shadow: var(--shadow-menu); }
  .tabs { align-self: stretch; margin: 0 -4px; padding: 2px 4px; }
  .tab { justify-content: center; padding: 0; }
  .tab .icon { display: block; }
  .tab[aria-current="page"]::before { left: 0; }
  .tab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tab .num { position: absolute; top: 3px; left: calc(50% + 4px); min-width: 16px; padding: 0 4px; border-radius: 8px; background: var(--arc-blue); color: #FFFFFF; font: 500 10px/16px var(--sans); letter-spacing: 0; text-align: center; }
  .tools-nav { align-self: stretch; margin: 10px -4px 0; padding: 10px 4px 0; }
  .tools-label { display: none; }
  .top > .menu-wrap { align-self: stretch; display: flex; justify-content: center; }
  .people { width: auto; border-radius: 50%; }
  .people-name { display: none; }
}
@media (max-width: 1099px) {
  .results { width: min(500px, 100vw - var(--side) - 32px); }
}
/* The phone: the top row holds the name and the founder. The four tabs are at the bottom (design 8.3). */
@media (max-width: 759px) {
  .top { flex-wrap: wrap; padding: 0 16px; }
  .brand { display: flex; align-items: center; height: 56px; margin-right: auto; }
  .brand img { height: 24px; }
  .tabs { display: none; }
  .search-open { display: grid; }
  .top.is-search .search-open { display: none; }
  .search { display: none; order: 4; height: 44px; margin: 0 0 10px; }
  .top .search { flex: 0 0 100%; margin-bottom: 12px; }
  .top.is-search .search { display: flex; }
  .search-input { font-size: 16px; }
  .results { top: calc(100% + 12px); right: -16px; left: -16px; width: auto; max-height: calc(100dvh - 190px); overflow-y: auto; border: 0; border-radius: 0; box-shadow: none; background: var(--ground); }
  .results-keys kbd, .results-keys { font-size: 0; }
  .results-keys kbd { display: none; }
  .results-keys .label { margin-left: 0; font-size: 12px; }
  .top > .menu-wrap { margin-left: 12px; }
  .top .people .av { width: 36px; height: 36px; font-size: 18px; }
  .banner { top: 0; }
  .main { overflow-x: clip; }
}

/* ===== A page: the large heading, one line under it, then the content ===== */
.page { display: flex; flex-direction: column; min-height: 100dvh; padding: 40px var(--pad) 56px; }
.page-board { padding-bottom: 0; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.title { font: 700 var(--type-h1) var(--sans); letter-spacing: -.025em; overflow-wrap: anywhere; }
.lede { margin-top: 10px; color: var(--muted); font: 400 var(--type-h3) var(--sans); }
/* The right of a head: its controls, then Add. */
.head-right { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; margin-top: 30px; }
.head-actions { display: flex; align-items: center; gap: 12px 20px; }
.seg-row { margin-top: 30px; }
.seg .num { margin-left: 6px; }
.ptabs { display: flex; gap: 28px; margin-top: 30px; border-bottom: 1px solid var(--line); }
.ptab:focus-visible { border-radius: 4px 4px 0 0; }
.ptab { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 0 11px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted); font: 400 var(--type-body) var(--sans); text-decoration: none; white-space: nowrap; }
.ptab:hover { color: var(--ink); }
.ptab[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); font-weight: 500; }
.filter-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 40px; align-items: start; margin-top: 38px; }
.cols-top { margin-top: 38px; }
.cols-side, .stack { display: grid; gap: 16px; align-content: start; }
.card.pad { padding: 24px 23px 23px; }
/* The title of a card: sentence case, 16px. */
.card > .label:first-child, .card > .card-top:first-child > .label:first-child, .card > .label-row:first-child > .label:first-child { color: var(--ink); font: 500 var(--type-lead) var(--sans); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card-top .link { font-size: 13px; line-height: 17px; font-weight: 500; }
.card-note { margin-top: 18px; padding-top: 0; color: var(--muted); font: 400 13px/19px var(--sans); }
.lines { margin-top: 12px; }
.line { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font: 400 14px/19px var(--sans); }
.lines .line:last-child { border-bottom: 0; padding-bottom: 0; }
.lines + .card-note { margin-top: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.lines:has(+ .card-note) .line:last-child { padding-bottom: 13px; }
.line b { display: block; font: 500 var(--type-body) var(--sans); }
.line .sub { margin-top: 2px; }
.line-c > div, .line-renew > div:first-child { flex: 1; min-width: 0; }
.line .link { font-weight: 500; }
.line-date .label { flex: 0 0 74px; font: 400 var(--type-label) var(--mono); }
.line-date > span:nth-child(2) { flex: 1; font-size: 15px; }
.line-plain { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-top: 12px; font: 400 var(--type-body) var(--sans); }
.line-plain .link { font-weight: 500; white-space: nowrap; }
.line-count { justify-content: space-between; font-size: 15px; }
.line-check { display: flex; align-items: baseline; gap: 10px; }
.line-check .icon { flex: none; align-self: center; color: var(--good); }
.line-check.is-warn { color: var(--caution); }
.line-check.is-warn .icon { color: var(--caution); }
.line-q { display: grid; gap: 6px; }
.line-q .line-check { font-size: 13px; line-height: 18px; color: var(--muted); }
.line-q .line-check.is-warn { color: var(--caution); }
.line-version { gap: 28px; }
.line-version .chip { margin-left: auto; }
.line-renew .cell-end { display: grid; gap: 4px; }
.cell-end { text-align: right; justify-self: end; }
.figure-l { margin-top: 12px; font: 700 34px/40px var(--sans); }
.figure-l span { color: var(--muted); font: 400 var(--type-body) var(--sans); }
.figure-m { margin-top: 8px; font: 700 var(--type-h2) var(--sans); }
.meter { height: 4px; margin-top: 14px; border-radius: 2px; background: var(--line); }
.meter i { display: block; height: 100%; border-radius: 2px; background: var(--brand); }
.empty-card h3 { font: 700 18px/23px var(--sans); }
.empty-card p { margin-top: 8px; max-width: 520px; font-size: 14px; line-height: 21px; }
.empty-card .actions { margin-top: 20px; }
/* Two parts share this name: the row of links in a card, and a row of the phone page More. */
.more-row { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; margin-top: 18px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font-size: 13px; line-height: 17px; text-align: left; text-decoration: none; }
.more-row .link { font-weight: 500; }
.state { max-width: 560px; padding-top: 80px; }
.state .actions { margin-top: 28px; }
/* A laptop window (1100 to 1439 pixels): a narrower side column, so the main column keeps room for its rows. */
@media (min-width: 1100px) and (max-width: 1439px) {
  .cols, .spam-cols { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
}
/* The rows of the main column change their layout by its width, not by the window: see .srow and .rp-row. */
.cols-main { container-type: inline-size; }
@media (max-width: 1099px) {
  .cols { display: block; }
  .cols-side { margin-top: 28px; }
}
@media (max-width: 759px) {
  .page { min-height: calc(100dvh - 101px); padding-top: 30px; padding-bottom: 104px; }
  .page-head { display: block; }
  .head-right { justify-content: flex-start; margin-top: 18px; }
  .head-add { display: none; }
  .title { font-size: 28px; line-height: 34px; }
  .lede { font-size: 15px; line-height: 21px; }
  .seg-row { margin-top: 18px; }
  .filter-row { flex-wrap: wrap; }
  .filter-row > .seg { flex: 1 1 100%; }
  /* A row of tabs that is wider than the phone scrolls in place. It must not widen the page. */
  .ptabs { gap: 24px; overflow-x: auto; scrollbar-width: none; }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptab { flex: none; }
}

/* ===== The board ===== */
/* Each status is a lane: a tint fill with round corners that runs to the bottom of the window. */
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; flex: 1 0 auto; margin: 34px 0 16px; }
.col { --c: var(--s-new); display: flex; flex-direction: column; min-width: 0; padding: 14px 12px 12px; border-radius: 18px; background: color-mix(in srgb, var(--track) 70%, transparent); }
.col-contacted { --c: var(--s-contacted); }
.col-call-booked { --c: var(--s-call-booked); }
.col-proposal { --c: var(--s-proposal); }
.col-won { --c: var(--s-won); }
.col-head { display: flex; align-items: center; gap: 8px; min-height: 22px; padding: 0 4px; }
.col-head::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.col-head h2 { font: 500 15px/19px var(--sans); }
.col-head .num { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--raised); color: var(--muted); font: 500 11px/18px var(--mono); letter-spacing: 0; text-align: center; }
.col-head .col-sum { min-width: 0; margin-left: auto; padding: 0; background: none; color: var(--ink); font-size: 12px; }
.col-cards { display: grid; flex: 1 0 auto; gap: 12px; align-content: start; margin-top: 14px; min-height: 64px; }
.col.is-drop { outline: 2px dashed var(--accent); outline-offset: 2px; }
.col-none { padding: 2px 4px; color: var(--muted); font-size: 13px; }
.bcard { position: relative; display: flex; flex-direction: column; padding: 15px 15px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .2s ease-out, box-shadow .2s ease-out; }
.bcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.bcard.is-ask { padding: 14px 14px 12px; border: 2px solid var(--accent); }
.bcard.is-dragged { opacity: .5; }
.bcard[draggable="true"] { cursor: grab; }
.bcard-eyebrow { margin-bottom: 9px; color: var(--accent); font: 500 var(--type-label) var(--sans); }
.bcard-eyebrow.is-rfp { color: var(--violet); }
.bcard-org { font: 500 var(--type-body) var(--sans); overflow-wrap: anywhere; }
a.bcard-org { color: inherit; text-decoration: none; }
a.bcard-org::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
a.bcard-org:focus-visible { outline: none; }
a.bcard-org:focus-visible::after { outline: 2px solid var(--accent); outline-offset: 2px; }
.bcard-who { margin-top: 4px; color: var(--muted); font: 400 var(--type-small) var(--sans); overflow-wrap: anywhere; }
.bcard-msg { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--muted); font: 400 var(--type-note) var(--sans); overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.bcard .tag { margin-top: 0; }
.bcard .menu-wrap { z-index: 1; }
.bcard .menu-wrap:has(.menu) { z-index: 2; }
.bcard-menu { width: 28px; height: 28px; margin-right: -6px; }
.bcard-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; margin-top: 9px; }
/* A narrow lane (a laptop window): the sum of the lane goes under its name. */
.col { container-type: inline-size; }
@container (max-width: 200px) {
  .col-head { flex-wrap: wrap; row-gap: 2px; }
  .col-head .col-sum { flex-basis: 100%; margin-left: 16px; }
}
.bcard-fee { display: flex; gap: 14px; margin: 0; color: var(--ink); font: 400 var(--type-label) var(--mono); letter-spacing: .02em; text-transform: none; }
.bcard-fee b { font-weight: 400; }
.bcard-marks { display: flex; align-items: center; gap: 8px; }
.bcard-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: center; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); }
.bcard-next { display: grid; gap: 6px; }
.bcard-step { font: 400 var(--type-note) var(--sans); overflow-wrap: anywhere; }
.bcard-step.is-ask { color: var(--accent); font-weight: 500; }
.bcard-step.is-none { color: var(--late); }
.bcard-due { font: 400 var(--type-label) var(--mono); letter-spacing: .02em; color: var(--muted); }
.bcard-due.is-late { color: var(--late); font-weight: 500; }
/* The shelf below the lanes: parked and lost, one white strip */
.shelf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: auto 0 24px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); box-shadow: var(--shadow); }
.page > :has(+ .shelf) { margin-bottom: 24px; }
.shelf-item { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.shelf-item b { font: 500 var(--type-ui) var(--sans); }
.shelf-item span:not(.av) { color: var(--muted); font: 400 var(--type-small) var(--sans); }
.shelf-item:hover b { text-decoration: underline; text-underline-offset: 3px; }
.shelf-item .chip { color: var(--c); font: 500 var(--type-micro) var(--mono); }
.shelf-lost { margin-left: auto; padding: 8px 0; border: 0; background: none; }
.shelf-lost:hover { color: var(--ink); }
.shelf .label { text-decoration: none; }
.shelf a.label:hover { color: var(--ink); }
.shelf a.label.shelf-link, .shelf a.label.shelf-link:hover { color: var(--muted); }
.shelf a.label.shelf-lost { color: var(--ink); }
.shelf a.label.shelf-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.shelf .chip { margin-left: 2px; }
.shelf .link.shelf-lost { font: 500 var(--type-ui) var(--sans); }
/* The page while the first answer is on its way: bars in place of words */
.sk { display: inline-block; border-radius: 6px; background: var(--line); opacity: .6; animation: sk 1.2s ease-in-out infinite alternate; }
.sk-card { gap: 10px; }
.sk-card:hover { transform: none; box-shadow: var(--shadow); }
.page-head .sk + br + .sk { margin-top: 14px; }
@keyframes sk { to { opacity: .3; } }
/* A narrow window: the board scrolls sideways. */
@media (max-width: 1099px) {
  .board { grid-template-columns: repeat(5, minmax(180px, 1fr)); overflow-x: auto; margin-right: calc(-1 * var(--pad)); padding: 4px var(--pad) 12px 2px; margin-left: -2px; }
}
@media (max-width: 759px) {
  .board { display: block; overflow: visible; margin: 0 0 24px; padding: 0; }
  .col { margin-top: 20px; scroll-margin-top: 12px; }
  .col-cards { min-height: 0; }
  .shelf { display: grid; gap: 14px; padding: 16px; }
  .shelf-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; }
  .shelf-item .av { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .shelf-lost { margin-left: 0; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .sk { transition: none; animation: none; }
  .bcard { transition: none; }
  .bcard:hover { transform: none; }
}

/* ===== Next steps ===== */
.sgroup + .sgroup { margin-top: 30px; }
.sgroup > .label { margin-bottom: 11px; }
.srows { padding: 0 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--raised); box-shadow: var(--shadow); }
.srow { display: grid; grid-template-columns: 40px minmax(0, 1fr) 142px 214px 24px; align-items: center; min-height: 58px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.srow:last-child { border-bottom: 0; }
.srow > .label { font: 400 var(--type-label) var(--mono); }
.srow-main { display: grid; gap: 2px; min-width: 0; }
.srow-title { color: var(--ink); font: 500 var(--type-body) var(--sans); text-decoration: none; }
.srow-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.srow-title.link { color: var(--accent); }
.srow .chip { justify-self: start; }
.circle { width: 20px; height: 20px; border: 1.5px solid var(--muted); border-radius: 50%; }
.circle:hover { border-color: var(--accent); background: var(--tint); }
.latecard { padding: 26px 23px 0; border-top: 3px solid var(--late); }
.latecard + .latecard { margin-top: 16px; }
.latecard-top { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 28px; column-gap: 0; align-items: start; }
.latecard-top .circle { width: 22px; height: 22px; margin-top: 2px; }
.latecard-top > .label { padding: 7px 12px 0 0; font: 400 var(--type-label) var(--mono); }
.latecard-title { color: var(--ink); font: 700 19px/25px var(--sans); text-decoration: none; }
.latecard .sub { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: 14px; line-height: 20px; }
.latecard-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; margin-top: 16px; padding: 7px 0; border-top: 1px solid var(--line); }
.latecard-foot .actions { flex-wrap: nowrap; }
.latecard-draft { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.latecard-draft .link { margin-left: 2px; font-weight: 500; }
.later-line { display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; color: var(--muted); font-size: 14px; }
.later-line .link { font-weight: 500; white-space: nowrap; }
.digest .line-plain { font-size: 14px; }
/* A narrow main column, not on a phone: the date goes under the title, so the title keeps its room. */
@media (min-width: 760px) {
  @container (max-width: 640px) {
    .srow { grid-template-columns: 40px minmax(0, 1fr) auto 24px; column-gap: 12px; row-gap: 4px; }
    .srow > .circle { grid-row: 1 / span 2; }
    .srow > .label { grid-column: 2; grid-row: 2; }
    .srow > .chip { grid-column: 3; grid-row: 1 / span 2; }
    .srow > .av, .srow > .av-none { grid-column: 4; grid-row: 1 / span 2; }
  }
}
@media (max-width: 759px) {
  /* Tap targets: 36px at least, 44px for a done circle (its ::before). */
  .circle, .latecard-top .circle { position: relative; width: 24px; height: 24px; }
  .circle::before { content: ""; position: absolute; inset: -10px; }
  .srow { grid-template-columns: 36px minmax(0, 1fr) auto; row-gap: 4px; }
  .srow .chip { display: none; }
  .srow > .label { grid-column: 2; grid-row: 2; }
  .srow > .av, .srow > .av-none { grid-column: 3; grid-row: 1 / span 2; }
  .latecard-top { grid-template-columns: 32px minmax(0, 1fr) 28px; }
  .latecard-top > .label { grid-column: 2; grid-row: 2; padding-top: 6px; }
  .latecard-foot { display: grid; }
  .latecard-foot .actions .btn { flex: 1; }
}

/* ===== A table: organizations, people, prospects, the rest of Spam ===== */
/* A table on the page is a white card. In a card or a sheet it is plain. */
.table { margin-top: 28px; padding: 4px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--raised); box-shadow: var(--shadow); }
.card .table, .sheet .table { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.table > .trow:last-child { border-bottom: 0; }
.table > a.trow { margin: 0 -20px; padding-right: 20px; padding-left: 20px; transition: background-color .2s ease-out; }
a.trow:hover { background: color-mix(in srgb, var(--track) 55%, transparent); }
.seg-row + .table { margin-top: 24px; }
.filter-row + .table { margin-top: 26px; }
.thead, .trow { display: grid; column-gap: 20px; }
.thead { padding: 12px 0 9px; border-bottom: 1px solid var(--line); }
.thead span { font: 500 var(--type-label) var(--sans); color: var(--muted); }
.thead .icon { vertical-align: -1px; }
.thead-in { margin-top: -13px; border-bottom: 0; padding-bottom: 11px; }
.trow { align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); font: 400 var(--type-ui) var(--sans); text-decoration: none; }
.trow:hover b { text-decoration: underline; text-underline-offset: 3px; }
.trow > span { min-width: 0; overflow-wrap: anywhere; }
.trow .mono { padding-top: 2px; }
.trow b { font-weight: 500; }
.cell-main b { display: block; font-weight: 500; }
.cell-owner { display: flex; align-items: center; gap: 8px; }
.cell-next { display: grid; gap: 5px; }
.cell-need, .cell-msg, .cell-why { color: var(--muted); }
.cell-why { font-size: 13px; }
.cell-msg { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-name { font: 500 var(--type-body) var(--sans); }
.cell-chips { display: flex; gap: 6px; }
.cell-person { display: flex; align-items: center; gap: 12px; }
.cell-person b { display: block; font: 500 var(--type-body) var(--sans); }
.cell-mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-step .link { font-weight: 500; }
/* The columns of each table */
.t-orgs .thead, .t-orgs .trow { grid-template-columns: minmax(0, 420fr) 146px minmax(0, 194fr) 76px minmax(0, 264fr) minmax(0, 210fr) 40px; column-gap: 0; }
.t-orgs-touch .thead, .t-orgs-touch .trow { grid-template-columns: minmax(0, 360fr) 146px minmax(0, 160fr) 76px minmax(0, 240fr) minmax(0, 190fr) minmax(0, 130fr) 40px; }
.t-people .thead, .t-people .trow { grid-template-columns: minmax(0, 230fr) minmax(0, 220fr) minmax(0, 330fr) minmax(0, 180fr) minmax(0, 140fr) minmax(0, 260fr); column-gap: 0; }
.t-people .trow > span, .t-orgs .trow > * { padding-right: 12px; }
.t-prospects .thead, .t-prospects .trow { grid-template-columns: minmax(0, 356fr) 88px minmax(0, 124fr) minmax(0, 122fr) minmax(0, 100fr) 70px; column-gap: 0; }
.t-prospects .trow { padding: 17px 0 16px; }
/* Room for the 12px labels in tight rows */
.t-prospects .thead > span:not(:last-child) { padding-right: 8px; }
.t-spam .thead, .t-spam .trow { grid-template-columns: minmax(0, 210fr) minmax(0, 310fr) minmax(0, 230fr) minmax(0, 110fr); column-gap: 0; }
.t-spam .trow > span, .t-spam .thead > span { padding-right: 16px; }
.t-spam .trow b { font: 500 var(--type-body) var(--sans); }
.t-fpeople, .t-docs { margin-top: 2px; }
.t-fpeople .thead, .t-fpeople .trow { grid-template-columns: minmax(0, 250fr) minmax(0, 190fr) minmax(0, 236fr) minmax(0, 164fr); column-gap: 0; }
.t-fpeople .trow { padding: 15px 0; }
.t-fpeople .trow > span { padding-right: 12px; }
.t-docs .thead, .t-docs .trow { grid-template-columns: minmax(0, 420fr) minmax(0, 180fr) minmax(0, 190fr) 50px; column-gap: 0; }
.t-docs .trow { padding: 15px 0; }
.t-lost { margin-top: 0; }
.t-lost .thead, .t-lost .trow { grid-template-columns: minmax(0, 470fr) minmax(0, 130fr) minmax(0, 120fr) 60px 60px; column-gap: 0; }
.t-lost .trow { padding: 14px 0; }
.t-lost .thead-in + .trow { border-top: 1px solid var(--line); }
/* A document in a table */
.docname { display: block; color: var(--ink); font: 500 var(--type-note) var(--mono); overflow-wrap: anywhere; }
.is-scanning .docname { font-weight: 400; color: var(--muted); }
.docstate { display: flex; align-items: center; gap: 10px; }
.progress { display: block; width: 180px; height: 3px; margin-top: 12px; border-radius: 2px; background: var(--line); overflow: hidden; }
.progress i { display: block; width: 62%; height: 100%; background: var(--brand); }
.doc-add { margin-top: 22px; gap: 14px; }
@media (max-width: 1099px) {
  /* Organizations: a narrower status column and a wider due column keep a date on one line. */
  .t-orgs .thead, .t-orgs .trow { grid-template-columns: minmax(0, 420fr) 112px minmax(0, 194fr) 76px minmax(0, 264fr) minmax(0, 260fr) 40px; }
}
@media (max-width: 759px) {
  .thead { display: none; }
  .table { padding: 0 16px; }
  .table > a.trow { margin: 0 -16px; padding-right: 16px; padding-left: 16px; }
  .trow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
  .t-orgs .trow { padding: 16px 0; }
  .t-spam .trow { gap: 8px 14px; padding: 16px 0; }
  .trow .cell-main { flex: 0 0 100%; }
  .t-spam .trow > span { padding-right: 0; }
  .cell-msg { flex: 0 0 100%; }
}

/* ===== Spam ===== */
.spam-cols { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 40px; align-items: start; margin-top: 38px; }
.spam-main > .table:first-child { margin-top: 0; }
.real { padding: 26px 30px 22px; border: 2px solid var(--accent); box-shadow: var(--shadow-2); }
.real + .real { margin-top: 16px; }
.real-top { display: flex; justify-content: space-between; gap: 16px; }
.real h2 { margin-top: 11px; font: 700 24px/31px var(--sans); overflow-wrap: anywhere; }
.real-who { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; color: var(--muted); font: 400 var(--type-ui) var(--sans); overflow-wrap: anywhere; }
.quote { position: relative; padding: 0 20px; font: 400 21px/31px var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.quote::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 0; width: 3px; background: var(--accent); }
.quote-m { margin-top: 20px; font-size: 19px; line-height: 28px; }
.real-why { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 18px; color: var(--muted); font: 400 var(--type-small) var(--sans); }
.why { padding: 5px 10px 6px; border-radius: 6px; background: color-mix(in srgb, var(--s-call-booked) 10%, transparent); color: var(--s-call-booked); font: 500 12px/15px var(--sans); }
.real .actions { margin-top: 24px; }
.how { padding: 23px; }
.how h2 { font: 700 18px/23px var(--sans); }
.how ol { display: grid; gap: 34px; margin-top: 18px; }
.how li { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.how i { width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--accent); font: 500 13px/26px var(--sans); text-align: center; }
.how li span { padding-top: 2px; font: 400 var(--type-text) var(--sans); }
.how-note { margin-top: 27px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--muted); font: 400 13px/20px var(--sans); }
@media (max-width: 1099px) {
  .spam-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  .spam-cols { margin-top: 24px; gap: 24px; }
  .real { padding: 20px 18px; }
  .real h2 { font-size: 20px; line-height: 26px; }
  .quote, .quote-m { font-size: 17px; line-height: 25px; }
  .real .btn { flex: 1 1 100%; }
}

/* ===== A sheet over a list (it moves in from the right in 0.25 s), and a dialog ===== */
.layer { position: fixed; inset: 0; z-index: 20; }
.scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity .25s ease-out; }
.sheet { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(600px, 100%); background: var(--raised); box-shadow: var(--shadow-sheet); transform: translateX(100%); transition: transform .25s ease-out; }
.layer.is-open .scrim { opacity: 1; }
.layer.is-open .sheet { transform: none; }
.sheet-close { position: absolute; top: 21px; right: 31px; z-index: 1; }
.sheet-body { flex: 1; overflow-y: auto; padding: 34px var(--pad) 28px; }
.sheet-title { margin-top: 14px; padding-right: 20px; font: 700 32px/38px var(--sans); overflow-wrap: anywhere; }
.sheet-who { margin-top: 10px; color: var(--muted); font: 400 15px/19px var(--sans); }
.sheet-who:empty { display: none; }
.sheet-mail { margin-top: 5px; font-size: 14px; line-height: 18px; }
.sheet-gap { margin-top: 24px; }
.sheet-gap + * { margin-top: 11px; }
.sheet-gap-s { margin-top: 24px; }
.sheet-block { margin-top: 20px; }
.pair { display: grid; grid-template-columns: 200px minmax(0, 1fr); margin-top: 26px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.pair dd { margin-top: 5px; font: 400 15px/19px var(--sans); overflow-wrap: anywhere; }
.sheet-h { margin-top: 28px; font: 700 19px/25px var(--sans); }
.sheet-why { margin-top: 20px; }
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.option { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 19px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); color: var(--ink); font: 500 15px/19px var(--sans); text-align: left; }
.option > span:not(.av) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.option .icon { color: var(--accent); stroke-width: 2; visibility: hidden; }
.option[aria-checked="true"] { padding: 0 18px; border: 2px solid var(--accent); background: var(--tint); }
.option[aria-checked="true"] .icon { visibility: visible; }
.step-row { display: grid; grid-template-columns: minmax(0, 1fr) 172px; gap: 12px; align-items: start; margin-top: 0; }
.sheet .options + .step-row { margin-top: 4px; }
.field { display: grid; gap: 7px; margin-top: 20px; }
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.sheet-form .sheet-h { margin-top: 28px; }
.form-error { min-height: 18px; margin-top: 14px; color: var(--late); font-weight: 500; }
.match { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; font-size: 13px; }
.match .link { font-weight: 500; }
.field + .match { margin-top: 10px; }
.cbox { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 13px 16px; border-radius: 10px; background: var(--tint); }
.cbox > div { flex: 1; display: grid; gap: 2px; }
.cbox b { font: 500 14px/19px var(--sans); }
.cbox > div span { color: var(--muted); font: 400 var(--type-note) var(--sans); }
.cbox .link { font: 500 var(--type-small) var(--sans); }
.sheet-foot { display: flex; flex-wrap: nowrap; align-items: center; gap: 24px; padding: 23px var(--pad) calc(40px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.sheet-foot .text-btn { color: var(--ink); }
.foot-note { margin-left: auto; color: var(--muted); font: 400 12px/15px var(--sans); }
.sheet-foot .foot-note { text-align: right; }
.layer-dialog { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px; overflow-y: auto; }
.dialog { position: relative; width: 576px; max-width: 100%; border-radius: 16px; background: var(--raised); box-shadow: var(--shadow-sheet); opacity: 0; transform: translateY(8px); transition: opacity .18s ease-out, transform .18s ease-out; }
.layer.is-open .dialog { opacity: 1; transform: none; }
.dialog-close { position: absolute; top: 22px; right: 30px; }
.dialog-body { padding: 30px 40px 28px; }
.dialog-title { margin-top: 9px; font: 700 24px/31px var(--sans); }
.dialog-sub { margin-top: 10px; color: var(--muted); font: 400 var(--type-body) var(--sans); }
.dialog-sub b { color: var(--ink); font-weight: 500; }
.dialog-line { margin-top: 10px; font: 400 15px/21px var(--sans); }
.dialog-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding: 19px 40px 28px; border-top: 1px solid var(--line); }
.dialog-foot .actions { gap: 12px 22px; }
.dialog-foot .text-btn { color: var(--ink); }
.dialog-foot .foot-note { max-width: 250px; text-align: right; line-height: 17px; }
/* Join: the two records side by side */
.twins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 28px; }
.twin { display: grid; gap: 6px; align-content: start; justify-items: start; padding: 20px; border-radius: 12px; background: var(--tint); font: 400 14px/19px var(--sans); color: var(--muted); overflow-wrap: anywhere; }
.twin b { margin: 8px 0 4px; color: var(--ink); font: 500 16px/22px var(--sans); }
.twin .tag { margin-top: 8px; }
.twins-why { margin-top: 18px; text-align: center; }
/* The phone: a sheet comes up from the bottom; the step and its date one below the other; the footer one short row. */
@media (max-width: 759px) {
  .sheet { top: auto; max-height: 94dvh; width: 100%; border-radius: 18px 18px 0 0; transform: translateY(100%); }
  .sheet > * { min-width: 0; }
  .sheet-body { overflow-x: hidden; }
  .sheet-title { font-size: 26px; line-height: 32px; padding-right: 28px; }
  .sheet-close { top: 14px; right: 12px; }
  /* The kicker of a sheet or a dialog wraps before the close button. */
  .sheet-body > .label:first-child, .dialog-body > .label:first-child { padding-right: 36px; }
  .pair { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
  .step-row, .field-pair { grid-template-columns: minmax(0, 1fr); }
  .sheet .step-3 { grid-template-columns: minmax(0, 1fr); }
  .sheet .pills { flex-wrap: wrap; }
  .sheet-foot { flex-wrap: nowrap; gap: 16px; padding-top: 12px; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
  .sheet-foot .btn { flex: 1 1 auto; }
  .foot-note { flex: 1 1 100%; margin-left: 0; }
  .sheet-foot .foot-note { display: none; }
  /* A text button in a footer: a 44px tap target. */
  .sheet-foot .text-btn, .dialog-foot .text-btn { min-height: 44px; }
  .layer-dialog { padding: 12px; align-items: end; }
  .dialog-foot { flex-wrap: wrap; }
  .twins { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .scrim, .sheet { transition: none; }
  .dialog { transition: none; animation: none; }
}

/* ===== The file of one organization ===== */
/* The head is a white band across the top: where it is, the monogram, the name, the status, the track, the tabs on its edge. */
.page-file { padding-top: 0; }
.page-file > :first-child:not(.file-band) { margin-top: 30px; }
.file-band { margin: 0 calc(-1 * var(--pad)); padding: 30px var(--pad) 0; border-bottom: 1px solid var(--line); background: var(--raised); }
.crumbs { display: flex; gap: 8px; }
.crumbs a { color: var(--accent); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.file-head { display: flex; align-items: center; gap: 24px; margin-top: 18px; }
.file-mono { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 16px; background: var(--ice); color: var(--arc-blue); font: 700 22px/1 var(--sans); }
.file-name { flex: 1; min-width: 0; }
.file-sub { margin-top: 8px; color: var(--muted); font: 400 16px/22px var(--sans); overflow-wrap: anywhere; }
.file-sub > .chip { margin-right: 6px; vertical-align: 1px; }
.file-actions { display: flex; flex: none; gap: 12px; }
.file-back, .file-status, .file-bar { display: none; }
.owner-btn { display: inline-grid; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.av-btn { padding: 0; border: 0; border-radius: 50%; background: none; }
/* The track: the status and the date of each change */
.track { display: grid; grid-template-columns: repeat(4, minmax(0, 213px)) auto; margin: 42px 0 0 2px; }
.track li { position: relative; min-width: 0; padding-top: 26px; }
.file-band .track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 30px; }
.file-band .track li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; padding-top: 20px; padding-right: 12px; }
.file-band .track .mono { margin-top: 0; }
.track li::before { content: ""; position: absolute; top: 5px; right: -6px; left: 6px; height: 2px; background: var(--line); }
.track li:last-child::before { display: none; }
.track li.is-passed::before { background: var(--brand); }
.track li::after { content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--brand); }
.track li.is-next::after { border: 2px solid var(--line); background: var(--raised); }
.track li.is-now::after { top: -4px; left: -4px; width: 20px; height: 20px; background: radial-gradient(circle, #FFFFFF 0 4px, var(--brand) 4.6px); }
.track b { display: block; font: 500 var(--type-ui) var(--sans); }
.track .is-next b { color: var(--muted); font-weight: 400; }
.track .mono { display: block; min-height: 14px; margin-top: 4px; }
.track .is-now .mono { color: var(--accent); }
.track li.is-now b { font-weight: 500; }
.track li.is-end::after { top: -4px; left: -4px; width: 20px; height: 20px; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.8 2.8L14 7.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px; }
.track li.is-end .mono { color: var(--accent); }
.track-s { grid-template-columns: repeat(4, minmax(0, 166px)) auto; margin: 34px 0 0 2px; }
.track-s b { font-size: 13px; line-height: 17px; }
.page-file .ptabs { margin-top: 24px; border-bottom: 0; }
/* The story at the left; the next step and the other cards at the right */
.file-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-rows: none; gap: 16px 28px; margin-top: 32px; }
.file-cols .story, .file-cols .next { grid-column: auto; grid-row: auto; }
.file-cols .side { grid-column: 2; grid-row: auto; }
.file-cols.is-drop { outline: 2px dashed var(--accent); outline-offset: 12px; border-radius: 12px; }
/* The Next step: a solid Storm card with white type. A menu inside it is white again. */
.next { grid-column: 2; grid-row: 1; padding: 24px 22px 22px; border-color: var(--storm); background: var(--storm); color: #FFFFFF; box-shadow: var(--shadow-2); }
.next.is-overdue { padding-top: 22px; border-top: 3px solid var(--late-on-dark); }
.next > .label:first-child { color: var(--rail-ink); font: 500 var(--type-small) var(--sans); }
.next > .label.is-late { color: var(--late-on-dark); }
.next > .menu-wrap { position: absolute; top: 20px; right: 20px; }
.next-owner { position: absolute; top: 20px; right: 20px; }
.next-title { margin-top: 14px; padding-right: 48px; font: 700 26px/32px var(--sans); letter-spacing: -.01em; overflow-wrap: anywhere; }
.next-sub { margin-top: 8px; color: var(--rail-ink); font-size: 13px; line-height: 18px; }
.label-due { margin-top: 10px; color: var(--rail-ink); font: 400 var(--type-label) var(--mono); letter-spacing: .02em; }
.next .label-due.is-late, .next .next-sub.is-late { color: var(--late-on-dark); }
.next .ask-step { color: #FFFFFF; }
.next .actions { margin-top: 22px; gap: 10px; }
.next .btn { border-color: color-mix(in srgb, #FFFFFF 40%, transparent); background: transparent; color: #FFFFFF; }
.next .btn:hover { background: color-mix(in srgb, #FFFFFF 8%, transparent); }
.next .actions > .btn:first-child { border-color: #FFFFFF; background: #FFFFFF; color: var(--storm); }
.next .actions > .btn:first-child:hover { background: var(--ice); }
.next :focus-visible { outline-color: var(--arc-cyan); }
.next .link { color: var(--ice); text-decoration: underline; text-underline-offset: 3px; }
.next .av-1 { background: var(--night); box-shadow: inset 0 0 0 1px var(--rail-ink); }
.next .menu { color: var(--ink); }
.next .menu :focus-visible { outline-color: var(--accent); }
.next .menu .btn { border-color: transparent; background: var(--brand); color: var(--on-brand); }
.next-form { display: grid; gap: 12px; }
.next-form .next-title { margin-bottom: 6px; }
.next-form .actions { margin-top: 8px; }
.story { grid-column: 1; grid-row: 1 / span 2; min-width: 0; padding-top: 0; }
.story h2 { font: 700 var(--type-h2) var(--sans); }
.story > .card + h2 { margin-top: 34px; }
/* The composer: a round white field; it opens the note sheet. */
.composer { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 62px; padding: 10px 10px 10px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); box-shadow: var(--shadow); color: var(--muted); font: 400 var(--type-ui) var(--sans); text-align: left; cursor: text; }
.composer:hover { border-color: var(--edge); }
.composer-add { display: inline-grid; place-items: center; flex: none; height: 40px; padding: 0 18px; border-radius: 20px; background: var(--track); color: var(--ink); font-weight: 500; }
.story > .card + .composer { margin-top: 16px; }
.note-form { display: grid; gap: 12px; max-width: 804px; margin-top: 18px; }
/* The timeline of the story */
.tl { position: relative; margin-top: 22px; }
.tl li { position: relative; display: grid; grid-template-columns: 70px 26px minmax(0, 1fr); padding-bottom: 18px; }
.tl li + li { padding-top: 18px; border-top: 1px solid var(--line); }
.tl li > :not(time):not(i) { min-width: 0; }
.tl time { padding-top: 3px; }
.tl i { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.tl h3 { font: 500 15px/19px var(--sans); overflow-wrap: anywhere; }
.tl p { margin-top: 7px; color: var(--muted); font: 400 var(--type-text) var(--sans); }
.tl p.ink { color: var(--ink); }
.tl li.is-removed h3 { color: var(--muted); text-decoration: line-through; }
.tl li.is-wait i { background: var(--caution); }
.tl li.is-wait h3 { font-weight: 500; }
.tl-more { margin: 0 0 0 96px; font-size: 14px; }
.tl .link, .tl-more .link { font-weight: 500; }
.file-chip { display: inline-block; padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--raised); color: var(--ink); font: 400 var(--type-label) var(--mono); overflow-wrap: anywhere; }
a.file-chip { text-decoration: none; }
a.file-chip:hover { border-color: var(--muted); }
.side { grid-column: 2; grid-row: 2; display: grid; gap: 16px; align-content: start; }
.side .card.pad { padding: 22px 22px 20px; }
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.sec-head h2, h2.sec-gap { font: 700 var(--type-h2) var(--sans); }
.sec-head .link { font: 500 var(--type-ui) var(--sans); }
.sec-gap { margin-top: 44px; }
.sec-head + .label { margin-top: 4px; }
.sec-head + .card { margin-top: 14px; }
/* Where it stands, the people, the facts */
.stands-text { margin-top: 14px; font: 400 15px/21px var(--sans); }
.stands > p:last-child { margin-top: 26px; }
.stands .link, .care .link { font: 500 var(--type-small) var(--sans); }
.people-card { padding: 23px 23px 15px; }
.whos { margin-top: 12px; }
.who { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.who + .who { margin-top: 0; }
.who:hover b { text-decoration: underline; text-underline-offset: 3px; }
.who-av { width: 44px; height: 44px; border-radius: 50%; background: var(--tint); color: var(--accent); font: 500 14px/44px var(--sans); text-align: center; }
.who:last-child { border-bottom: 0; }
.who > div { display: grid; gap: 2px; margin: 0; }
.who b { font: 500 15px/19px var(--sans); overflow-wrap: anywhere; }
.who > div span, .who a { font-size: 13px; line-height: 17px; }
.who > div span { color: var(--muted); }
.people-card > .quiet { margin: 14px 0 8px; font-size: 13px; line-height: 20px; }
.warnline, .inferred-line { display: flex; align-items: center; gap: 10px; }
.warnline { margin-top: 16px; color: var(--caution); font: 400 var(--type-small) var(--sans); }
.warnline-row { margin-top: 18px; }
.warnline-row .link { margin-left: 6px; font-weight: 500; }
.inferred-line { margin-top: 14px; color: var(--muted); font-size: 13px; }
.inferred-line .label { margin-left: auto; }
.facts-card { padding: 23px; overflow: visible; }
.facts { margin-top: 7px; }
.fact { position: relative; display: grid; grid-template-columns: 146px minmax(0, 1fr); align-items: baseline; padding: 8px 0 7px; border-bottom: 1px solid var(--line); }
.fact:last-child { padding-bottom: 0; border-bottom: 0; }
.fact dt { color: var(--muted); font: 400 var(--type-small) var(--sans); }
.fact dd { font: 400 var(--type-ui) var(--sans); overflow-wrap: anywhere; }
.fact dd.mono { color: var(--ink); font: 400 var(--type-label) var(--mono); }
.facts .fact { grid-template-columns: 146px minmax(0, 1fr) auto; column-gap: 0; padding: 9px 0 8px; }
.facts dd.mono { color: var(--ink); }
.facts .dot { align-self: center; }
.fact.is-open { margin: 0 -12px; padding-right: 12px; padding-left: 12px; border-radius: 6px; background: var(--tint); }
.fact-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: underline dotted var(--muted); text-underline-offset: 4px; }
.fee-form { display: flex; gap: 8px; }
.facts-foot { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.side .facts dd { text-align: right; }
/* A fact that Claude inferred: the panel to confirm or fix it */
.factpop { position: absolute; top: -140px; right: calc(100% + 26px); z-index: 6; width: 360px; padding: 24px 23px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); box-shadow: var(--shadow-menu); font: 400 var(--type-text) var(--sans); cursor: default; }
.factpop .card-top b { font: 700 var(--type-h3) var(--sans); }
.factpop .label.gap { margin: 18px 0 6px; }
.factpop .actions { margin-top: 18px; gap: 8px; }
.factpop-fix { display: flex; gap: 8px; margin-top: 10px; }
.factpop-fix .input { height: 36px; }
.factpop .card-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; }
/* The Care plan */
.care .figure-m + .label { margin-top: 12px; }
.care-covers { margin-top: 16px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
.care > p:last-child { margin-top: 14px; }
.care-add { display: flex; gap: 8px; margin-top: 12px; }
.care-add .input { height: 36px; }
/* The brief */
.brief { padding: 22px 27px 6px; }
.brief-by { display: inline-flex; align-items: center; gap: 12px; }
.brief-row { display: grid; grid-template-columns: 142px minmax(0, 1fr) auto 26px; column-gap: 0; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--line); }
.brief-row:first-of-type { margin-top: 10px; }
.brief-label { display: grid; gap: 8px; justify-items: start; padding-top: 2px; color: var(--muted); font: 400 var(--type-note) var(--sans); }
.brief-text { font: 400 15px/23px var(--sans); }
.brief-text .sub { margin-top: 4px; font-size: 13px; }
.brief-refs { padding: 5px 0 0 20px; }
.brief-row .dot { margin: 8px 0 0 auto; }
.brief-sources { border-bottom: 0; }
.brief-sources ol { display: grid; gap: 10px; grid-column: 2 / -1; padding-top: 3px; }
.brief-sources li { display: flex; gap: 14px; }
.brief-sources b { color: var(--ink); font-weight: 400; }
.t-check { margin-top: 22px; }
.t-check .thead, .t-check .trow { grid-template-columns: 130px minmax(0, 1fr) auto; column-gap: 0; }
.t-check .trow { align-items: center; padding: 14px 0; }
.t-check .trow b { font: 500 var(--type-body) var(--sans); }
.sev { display: flex; align-items: center; gap: 10px; }
.sev i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--line); font: 500 12px/1 var(--mono); }
.sev .sev-4, .sev .sev-5 { background: color-mix(in srgb, var(--late) 14%, transparent); color: var(--late); }
.sev .sev-3 { background: color-mix(in srgb, var(--caution) 14%, transparent); color: var(--caution); }
/* The proposal and signed work */
.prop { padding: 30px 31px 23px; }
.prop-title { margin-top: 14px; font: 700 24px/31px var(--sans); }
.prop-title .tag { vertical-align: 4px; margin-left: 6px; }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.figures-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.figures .figure-m { font-size: 24px; line-height: 31px; }
.prop .label.gap, .prop .card-top.gap { margin-top: 24px; }
.scope { display: grid; gap: 12px; margin-top: 14px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.scope li { display: flex; gap: 18px; font: 400 var(--type-body) var(--sans); }
.scope .mono { padding-top: 3px; }
.prop-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 22px; }
.prop-foot .actions { gap: 22px; }
.prop-foot .link { font: 500 var(--type-ui) var(--sans); }
.prop .lines { margin-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.prop .lines .line:last-child { padding-bottom: 13px; }
.prop .line-date > span:nth-child(2) { font-size: 16px; }
.made-line { display: flex; align-items: center; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 15px; }
.t-made { margin-top: 20px; border-top: 1px solid var(--line); }
.t-made .trow { grid-template-columns: 420px minmax(0, 1fr); padding: 13px 0; }
.t-made .mono b { color: var(--ink); font-weight: 500; }
.range { position: relative; height: 3px; margin-top: 30px; border-radius: 2px; background: var(--line); }
.range i { position: absolute; top: -5px; width: 2px; height: 13px; background: var(--brand); }
.range-ends { display: flex; justify-content: space-between; margin-top: 14px; }
.est-note { margin-top: 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.rules { display: grid; gap: 14px; margin-top: 16px; }
.rules li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; align-items: start; font: 400 15px/22px var(--sans); }
.rules i { width: 22px; height: 22px; border-radius: 50%; background: var(--tint); color: var(--accent); font: 500 12px/22px var(--sans); text-align: center; }
/* A narrow window: the file is one column. */
@media (max-width: 1099px) {
  .file-cols { display: block; }
  .file-cols > * + * { margin-top: 28px; }
  .file-cols .side { margin-top: 28px; }
  .side { margin-top: 16px; }
  .factpop { position: static; width: auto; margin-top: 12px; grid-column: 1 / -1; }
}
/* The phone: the next step first, then the story, then the other cards (design 8.5), and the one action at the bottom. */
@media (max-width: 759px) {
  body.is-file .top { display: none; }
  .page-file { min-height: 100dvh; }
  .file-back { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 -4px 0 -8px; }
  .file-back a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding-right: 12px; color: var(--muted); font: 400 15px/19px var(--sans); text-decoration: none; }
  .file-band { padding-top: 12px; }
  .crumbs, .file-actions, .track, .file-mono, .file-sub > .chip, .composer { display: none; }
  .file-head { margin-top: 0; }
  .page-file .ptabs { margin-top: 18px; }
  .file-status { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
  .chip-btn { cursor: pointer; }
  .file-status .chip-btn { height: 36px; }
  .page-file .title { font-size: 26px; line-height: 32px; }
  .file-sub { margin-top: 6px; font-size: 14px; line-height: 18px; }
  .file-role { display: none; }
  .file-cols { display: flex; flex-direction: column; gap: 20px; }
  .file-cols > * + * { margin-top: 0; }
  .file-cols .side { display: contents; }
  .file-cols .next { order: -2; }
  .file-cols .story { order: -1; }
  .next > .menu-wrap { display: none; }
  .next-title { padding-right: 0; line-height: 23px; }
  .next .actions { flex-wrap: nowrap; gap: 10px; }
  .next .actions .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; }
  .story > h2, .story .prop-title { font-size: 17px; line-height: 22px; }
  .tl::before, .tl i { display: none; }
  .tl li { grid-template-columns: 60px minmax(0, 1fr); padding-bottom: 23px; }
  .tl p { margin-top: 5px; line-height: 20px; }
  .fact { grid-template-columns: 124px minmax(0, 1fr); }
  .file-bar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 5; display: block; padding: 16px var(--pad) calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--raised); }
}

/* ===== Claude: the card of a draft or a tip above the story, the draft sheet ===== */
.ccard { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; column-gap: 0; align-items: start; padding: 23px 23px 22px; }
.ccard h3 { margin-top: 6px; font: 500 16px/22px var(--sans); }
.ccard p { margin-top: 6px; max-width: 500px; color: var(--muted); font: 400 var(--type-text) var(--sans); }
.ccard p.label { margin-top: 0; color: var(--muted); font: 500 var(--type-small) var(--sans); }
.ccard p.label-accent { color: var(--accent); }
.ccard-side { display: grid; justify-items: end; gap: 22px; }
.ccard-side .actions { gap: 26px; }
.ccard-help .ccard-side, .ccard-state .ccard-side { align-self: center; }
.ccard-state h3 { margin-top: 0; font: 700 18px/24px var(--sans); }
.ccard-ic { display: grid; place-items: center; width: 28px; height: 28px; color: var(--muted); }
.ccard-ic.is-late { color: var(--late); }
.ccard-state.is-failed { padding-top: 21px; border-top: 3px solid var(--late); }
.ccard-row { display: flex; align-items: center; gap: 20px; }
.ccard-row .link { font: 500 var(--type-small) var(--sans); }
.kick-c { display: inline-flex; align-items: center; gap: 10px; }
.sheet-who .chip { vertical-align: 2px; margin-left: 6px; }
.draft-why { margin-top: 10px; font: 400 17px/26px var(--sans); }
.draftbox { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.draftbox.is-edit { border: 2px solid var(--accent); }
.draft-row { display: grid; grid-template-columns: 72px auto minmax(0, 1fr) auto; column-gap: 0; align-items: center; min-height: 42px; padding: 0 19px; border-bottom: 1px solid var(--line); background: var(--tint); font: 400 var(--type-note) var(--sans); }
.draft-row b { margin-right: 10px; font: 500 var(--type-ui) var(--sans); }
.draft-text { padding: 22px 19px 20px; font: 400 16px/25px var(--sans); }
.draft-text p + p { margin-top: 12px; }
.draft-edit { display: block; width: 100%; min-height: 150px; padding: 0; border: 0; outline: 0; background: none; color: var(--ink); font: inherit; resize: vertical; }
.draft-orig { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 21px; }
.agenda { display: grid; gap: 12px; }
.agenda li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 60px; column-gap: 0; align-items: baseline; }
.agenda .mono { justify-self: end; grid-column: 3; }
.agenda li > span:nth-child(2) { max-width: 330px; }
.agenda-n { color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.tags .tag { padding: 6px 10px; font-size: 12px; line-height: 16px; }
.progress-run { width: 100%; max-width: 500px; margin-top: 16px; }
.progress-run i { width: 38%; }
.ask-step { margin-top: 10px; font-size: 14px; }
.ask-actions { margin-top: 20px; }
.ask-actions .foot-note { text-align: right; line-height: 17px; }
@media (max-width: 759px) {
  .story .ccard { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 14px; }
  .story .ccard > :nth-child(3) { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
}

/* ===== Clients and parked ===== */
.client { display: block; padding: 28px 27px 26px; color: var(--ink); text-decoration: none; cursor: pointer; transition: transform .2s ease-out, box-shadow .2s ease-out; }
.client:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.client-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.client-top h2 { font: 700 22px/28px var(--sans); }
.client-top h2 a { color: inherit; text-decoration: none; }
.client-top .file-sub { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.client-state { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.client-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.client-foot > div { display: grid; gap: 6px; align-content: start; }
.client-foot b { font: 500 var(--type-lead) var(--sans); }
.client-foot .label:first-child { margin-bottom: 4px; }
.client-none { font-size: 15px; }
.client-new { margin-top: 14px; font-size: 14px; line-height: 18px; }
.client-new .link, .client-req { font-weight: 500; }
.client-req { font-size: 14px; line-height: 18px; }
.money2 { display: grid; grid-template-columns: 1fr 1fr; }
.money2 > div + div { padding-left: 23px; border-left: 1px solid var(--line); }
.money2 .sub { margin-top: 14px; font-size: 14px; }
.perm { margin-top: 18px; }
.perm + .perm { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.perm b { font: 500 var(--type-lead) var(--sans); }
.perm .facts { margin-top: 10px; }
.perm .quiet { margin-top: 6px; font-size: 14px; }
.cols-shelf { margin-top: 42px; }
.cols-shelf .cols-main > .label { margin-bottom: 14px; }
.parkcard { padding: 26px 27px 24px; }
.park-foot { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; gap: 16px; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.park-foot > div { display: grid; gap: 10px; font-size: 15px; }
.park-foot b { font: 500 var(--type-lead) var(--sans); }
@media (max-width: 759px) {
  .client-foot { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .client { transition: none; }
  .client:hover { transform: none; }
}


/* ===== Research: prospects, RFPs, runs ===== */
.label-violet { color: var(--violet); }
.label-caution { color: var(--caution); }
.cols-research { margin-top: 28px; }
.plist + .plist { margin-top: 44px; }
.plist-head { display: flex; align-items: baseline; gap: 14px; }
.plist-head > .label { flex: none; }
.plist-head h2 { font: 700 var(--type-h3) var(--sans); }
.plist-head .legend { margin-left: auto; }
.plist .table { margin-top: 22px; }
.fitcell { display: flex; align-items: center; gap: 12px; }
.fitcell .mono { width: 16px; color: var(--ink); }
.fitcell .meter { width: 44px; height: 3px; margin: 0; }
.sys { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.dot-none { visibility: hidden; }
p.sys { margin-top: 10px; font-size: 13px; }
.hint-inferred { margin-top: 8px; color: var(--caution); font-size: 12px; }
.hint-inferred:empty { display: none; }
.chead { display: flex; gap: 14px; }
.chead h2, .card-h { font: 700 18px/23px var(--sans); }
.chead h2 { margin-top: 6px; }
.chead + .lines { margin-top: 18px; }
.cmd { margin-top: 14px; padding: 15px 16px; border-radius: 8px; background: var(--tint); color: var(--ink); font-size: 12px; overflow-wrap: anywhere; }
.have { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.have b { display: block; font: 500 var(--type-body) var(--sans); }
.card-h + .line-plain { margin-top: 14px; font-size: 14px; }
.card-h + .lines { margin-top: 10px; }
.rfpcard { padding: 23px 31px 22px; }
.rfpcard h2 { margin-top: 10px; font: 700 19px/25px var(--sans); }
.rfpcard h2 a { color: inherit; text-decoration: none; }
.rfpcard .file-sub { margin-top: 6px; font-size: 15px; }
.rfp-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rfp-row .link { font: 500 var(--type-ui) var(--sans); }
.rfpcard.is-open { display: grid; grid-template-columns: minmax(0, 1fr) 216px; column-gap: 31px; padding: 30px 30px 30px; border: 2px solid var(--accent); box-shadow: var(--shadow-2); }
.rfpcard.is-open h2 { margin-top: 14px; font-size: 24px; line-height: 31px; }
.rfp-lines { display: grid; gap: 10px; margin-top: 24px; font-size: 14px; }
.rfpcard .actions { margin-top: 28px; gap: 12px 20px; }
.rfpcard .actions .link { font-weight: 500; }
.rfp-side { padding-left: 31px; border-left: 1px solid var(--line); }
.rfp-due { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.rfp-due b { font: 500 var(--type-h3) var(--sans); }
.rfp-side .meter { margin-top: 10px; }
.rfp-side .label.gap { margin-top: 26px; }
.rfpcard.is-passed { background: none; box-shadow: none; }
.rfpcard.is-passed h2 { color: var(--muted); font-weight: 500; font-size: 17px; }
.line-check.is-no .icon, .line-check.is-no { color: var(--late); }
.line-check.is-no span { color: var(--ink); }
.line-check.is-off .icon { color: var(--muted); }
.how-note .link { display: inline-block; margin-top: 12px; font-weight: 500; }
.t-runs { margin-top: 0; }
.t-runs .thead, .t-runs .trow { grid-template-columns: 148px 168px minmax(0, 1fr) 116px; column-gap: 0; }
.t-runs .trow { padding: 14px 0 13px; }
.t-runs .trow b { display: flex; align-items: baseline; gap: 10px; font: 500 var(--type-body) var(--sans); }
.run-cmd { color: var(--ink); font-size: 12px; }
.t-runs .sub .link { margin-left: 6px; font-weight: 500; }
.t-runs .cell-owner { font-size: 13px; }
.maydo { display: grid; gap: 12px; margin-top: 18px; font-size: 14px; }
.maydo-tight { margin-top: 8px; }
.maydo + .card-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.card-note .link { font-weight: 500; }
.card-note-line { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.rfp-cols { margin-top: 44px; }
.t-asks { margin-top: 14px; border-top: 1px solid var(--line); }
.t-asks .trow { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 0 11px; }
.t-asks .trow b { font: 500 var(--type-body) var(--sans); }
.tag-ans { padding: 6px 10px; font-size: 12px; }
.tag-yes { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good); }
.tag-unknown { background: color-mix(in srgb, var(--caution) 12%, transparent); color: var(--caution); }
.tag-no { background: color-mix(in srgb, var(--late) 12%, transparent); color: var(--late); }
.src { margin-top: 18px; color: var(--ink); overflow-wrap: anywhere; }
.src + .quiet { margin-top: 12px; font-size: 13px; }
.lines-tight { margin-top: 6px; }
.lines-tight .line { padding: 9px 0; }
.lines-tight .line:last-child { padding-bottom: 9px; }
.warnline.warn-2 { align-items: flex-start; margin-top: 18px; font-size: 14px; line-height: 19px; }
.warnline.warn-2 .icon { margin-top: 3px; }
.crow { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.crow > div { flex: 1; display: grid; gap: 3px; }
.crow b { font: 500 var(--type-body) var(--sans); }
.crow > div span { color: var(--muted); font: 400 var(--type-note) var(--sans); }
.docrow-file { min-height: 56px; }
.docrow-file .docrow-name b { display: block; color: var(--ink); }
.docrow-file .docrow-name b:not(.mono) { font: 500 14px/19px var(--sans); }
/* Import a prospect list */
.imp-sum { margin-top: 10px; font: 700 24px/34px var(--sans); }
.t-imp { margin-top: 22px; }
.t-imp .thead, .t-imp .trow { grid-template-columns: minmax(0, 1fr) 126px 84px; column-gap: 0; }
.t-imp .trow { padding: 9px 0; min-height: 46px; }
.t-imp .trow b { font: 400 var(--type-body) var(--sans); }
.imp-rest { font-size: 14px; }
.tag-res { padding: 6px 10px; background: var(--tint); font-size: 12px; line-height: 16px; }
.tag-res.tag-amber { background: color-mix(in srgb, var(--caution) 12%, transparent); }
.tag-blue { color: var(--accent); }
.info-2 { align-items: flex-start; margin-top: 18px; font-size: 13px; line-height: 20px; }
.info-2 .icon { margin-top: 3px; }
@media (max-width: 1099px) {
  .rfpcard.is-open { display: block; }
  .rfp-side { margin-top: 24px; padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); }
}

/* ===== Marketing: the calendar of posts, one post, the Posts part of Settings ===== */
/* Three columns of the board: Drafts, Approved, Posted. A post job that waits for Claude is a dashed slot in Drafts. */
.board.posts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }
.col-post-drafts { --c: var(--accent); }
.col-post-approved { --c: var(--s-proposal); }
.col-post-posted { --c: var(--s-won); }
.col-head .num { color: var(--muted); }
.pcard .bcard-msg { -webkit-line-clamp: 3; line-clamp: 3; }
.pcard .bcard-foot { grid-template-columns: minmax(0, 1fr) auto; }
.pcard.is-slot { border-style: dashed; box-shadow: none; background: none; }
.pcard.is-slot .bcard-org, .pcard.is-slot .bcard-msg { color: var(--muted); }
.cmd-inline { font: 400 12px/1 var(--mono); white-space: nowrap; }
/* The hold: a quiet strip with a bar in the caution color, not an error. */
.hold { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--raised); box-shadow: inset 4px 0 0 var(--caution); font: 400 var(--type-ui) var(--sans); }
.hold .icon { flex: none; color: var(--caution); }
.hold b { font-weight: 500; }
.hold .link { margin-left: auto; font-weight: 500; white-space: nowrap; }
.sheet-body > .hold:first-of-type { margin-top: 22px; }
.post-form .field:first-child { margin-top: 24px; }
.post-text { min-height: 220px; }
.sheet-foot .post-share { flex: none; }
.post-ask { display: grid; gap: 10px; margin-top: 24px; padding: 18px 18px 16px; border: 2px solid var(--accent); border-radius: 12px; }
.post-ask h3 { font: 700 19px/25px var(--sans); }
.post-ask .sub { margin: 0; }
.post-ask .actions { margin-top: 4px; }
/* The days: the line of text, then the seven pills below it. */
.st-row.st-stack { flex-direction: column; align-items: stretch; gap: 12px; }
.st-days { gap: 6px; }
.st-days .pill { min-width: 52px; justify-content: center; }
.st-topics { margin-top: 12px; }
.tag-x { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.tag-x .icon { color: var(--muted); }
.tag-x:hover .icon { color: var(--late); }
@media (max-width: 1099px) {
  .board.posts { grid-template-columns: repeat(3, minmax(220px, 1fr)); }
}
@media (max-width: 759px) {
  .head-actions { flex-wrap: wrap; gap: 12px; }
  .hold { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; row-gap: 8px; }
  .hold .icon { margin-top: 2px; }
  .hold .link { grid-column: 2; margin-left: 0; justify-self: start; }
}

/* ===== Reports ===== */
.rp-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; padding: 26px 0; }
.rp-fig { padding: 0 28px; border-left: 1px solid var(--line); }
.rp-fig:first-child { border-left: 0; }
.rp-fig .label-row { justify-content: flex-start; gap: 12px; min-height: 20px; }
.rp-num { margin-top: 10px; color: var(--ink); font: 500 30px/36px var(--mono); letter-spacing: -.01em; }
.rp-cols { margin-top: 36px; }
.rp-gap { margin-top: 40px; }
.rp-rows { margin-top: 12px; padding: 0 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--raised); box-shadow: var(--shadow); }
.rp-row:last-child { border-bottom: 0; }
.rp-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px 70px 90px 60px; align-items: center; column-gap: 12px; min-height: 66px; padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
a.rp-row:hover b { text-decoration: underline; text-underline-offset: 3px; }
.rp-row b { font: 500 var(--type-body) var(--sans); }
.rp-row .chip { justify-self: start; }
.rp-fee { text-align: right; font-size: 13px; }
.rp-row > .av, .rp-row > .av-none { justify-self: end; }
.rp-row:has(.rp-since) { grid-template-columns: minmax(0, 1fr) 150px 60px; }
.rp-since.is-late { color: var(--late); }
.rp-since.is-caution { color: var(--caution); }
.rp-marks { display: flex; justify-content: flex-end; gap: 6px; }
.rp-names { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars { display: grid; gap: 14px; margin-top: 18px; }
.bar-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 28px; align-items: center; column-gap: 12px; font: 400 var(--type-ui) var(--sans); }
.bar-row-wide { grid-template-columns: 96px minmax(0, 1fr) 64px; }
.bar-row b { font-weight: 400; font-size: 12px; text-align: right; }
.bar { height: 8px; border-radius: 4px; background: var(--tint); }
.bar i { display: block; min-width: 2px; height: 8px; border-radius: 4px; background: var(--s-new); }
.bar .bar-contacted { background: var(--s-contacted); }
.bar .bar-call-booked { background: var(--s-call-booked); }
.bar .bar-proposal { background: var(--s-proposal); }
.bar .bar-won { background: var(--s-won); }
.card-note.label-row a { text-decoration: none; }
.rp-next { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; color: var(--ink); text-decoration: none; }
/* A narrow side column: the date goes under the step, the avatar stays at the end, and the status is left out. */
.cols-side { container-type: inline-size; }
@container (max-width: 420px) {
  .rp-next { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 4px; }
  .rp-next > .chip { display: none; }
  .rp-next > .label { grid-column: 1; grid-row: 2; }
  .rp-next > .av, .rp-next > .av-none { grid-column: 2; grid-row: 1 / span 2; }
}
.rp-lost { justify-content: space-between; align-items: flex-start; }
.rp-lost > b { font-weight: 400; font-size: 13px; }
.rp-table { margin-top: 0; border-top: 1px solid var(--line); }
.rp-cols .cols-main > .rp-table:first-child { border-top: 0; }
.rp-tr { display: grid; grid-template-columns: minmax(0, 1fr) 90px 90px 90px 70px; align-items: center; min-height: 68px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rp-tr > span, .rp-tr > .mono { text-align: right; }
.rp-tr > :first-child { text-align: left; }
.rp-tr b { font: 500 var(--type-body) var(--sans); }
.rp-tr .mono { color: var(--ink); font-size: 14px; }
/* A narrow main column, not on a phone: the date goes under the name and the fee under the status. */
@media (min-width: 760px) {
  @container (max-width: 640px) {
    .rp-row { grid-template-columns: minmax(0, 1fr) auto 28px; row-gap: 4px; }
    .rp-row > .rp-what { grid-column: 1; grid-row: 1; }
    .rp-row > .rp-date { grid-column: 1; grid-row: 2; }
    .rp-row > .chip { grid-column: 2; grid-row: 1; }
    .rp-row > .rp-fee { grid-column: 2; grid-row: 2; text-align: left; }
    .rp-row > .av, .rp-row > .av-none { grid-column: 3; grid-row: 1 / span 2; }
    .rp-row:has(.rp-since) { grid-template-columns: minmax(0, 1fr) auto; }
    .rp-row > .rp-since { grid-column: 1; grid-row: 2; }
    .rp-row > .rp-marks { grid-column: 2; grid-row: 1 / span 2; }
  }
}
.rp-tr .mono.quiet { color: var(--muted); }
.rp-th { min-height: 0; padding: 0 0 12px; }
.rp-total { border-bottom: 0; }
@media (max-width: 1099px) {
  .rp-figs { grid-template-columns: minmax(0, 1fr); padding: 8px 0; }
  .rp-fig { padding: 16px 23px; border-left: 0; border-top: 1px solid var(--line); }
  .rp-fig:first-child { border-top: 0; }
}
@media (max-width: 759px) {
  .rp-row, .rp-row:has(.rp-since) { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .rp-row .rp-date, .rp-row .rp-fee { display: none; }
  .rp-tr { grid-template-columns: minmax(0, 1fr) 36px 36px 36px 36px; }
  .rp-th span { font-size: 0; }
  .rp-th span::first-letter { font-size: 10px; }
}

/* ===== Sign-in ===== */
body.gate { min-height: 100dvh; display: grid; place-items: center; font-size: 16px; line-height: 24px; }
body.gate #app { width: 100%; display: grid; justify-items: center; }
.gate-card { width: min(100% - 32px, 440px); display: grid; gap: 16px; justify-items: start; }
.gate-card h1 { font: 700 40px/44px var(--sans); }
.gate-card .btn { padding: 0 18px; font-size: 16px; }
.gate-note { color: var(--muted); }
.gate-error { color: var(--late); font-weight: 500; }
body.is-signin { background: var(--ground); }
.signin { display: grid; align-content: center; justify-content: center; grid-template-columns: minmax(0, 440px); min-height: 100dvh; padding: 32px 16px; }
.signin-wide { grid-template-columns: minmax(0, 520px); }
.signin .brand { margin: 0 0 22px; }
.sign-card { padding: 40px 39px 39px; border: 1px solid var(--line); border-radius: 14px; background: var(--raised); box-shadow: var(--shadow); }
.sign-card h1 { font: 700 32px/38px var(--sans); }
.sign-sub { margin-top: 10px; color: var(--muted); font: 400 var(--type-body) var(--sans); }
.sign-card .field { margin-top: 24px; }
.sign-card .field + .field { margin-top: 20px; }
.sign-card .btn-block { height: 48px; margin-top: 28px; font-size: 16px; }
.sign-card .label-row .link { font: 500 13px/13px var(--sans); }
.sign-error { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--late); font: 400 var(--type-note) var(--sans); }
.sign-error:empty { display: none; }
.sign-error + .btn-block { margin-top: 28px; }
.sign-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 26px; color: var(--muted); font-size: 13px; line-height: 17px; }
.sign-row .link { font-weight: 500; }
.sign-foot { display: flex; align-items: center; gap: 8px; margin-top: 20px; color: var(--muted); font: 400 var(--type-small) var(--sans); }
.pw { position: relative; display: block; }
.pw .input { padding-right: 48px; }
.pw-eye { position: absolute; top: 5px; right: 6px; }
.code-row { display: grid; grid-template-columns: repeat(6, 50px); gap: 12px; margin-top: 24px; }
.field .code-row { margin-top: 0; }
.code-box { width: 50px; height: 60px; padding: 0; border: 1px solid var(--muted); border-radius: 8px; background: var(--raised); color: var(--ink); font-size: 22px; text-align: center; }
.code-box:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.code-row.is-bad .code-box { border: 2px solid var(--late); }
.setup { gap: 28px; margin-top: 28px; }
.setup li { grid-template-columns: 26px minmax(0, 1fr); }
.setup b { font: 500 15px/22px var(--sans); }
.setup .code-row { margin-top: 16px; }
.setup-qr { display: flex; align-items: center; gap: 28px; margin-top: 16px; }
.qr { display: grid; flex: none; place-items: center; width: 148px; height: 148px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }
/* The QR code keeps its white ground in the dark theme too, so each app can scan it. */
.qr.is-ready { overflow: hidden; background: #FFFFFF; }
.qr svg { display: block; width: 100%; height: 100%; }
.setup-key { display: block; margin: 10px 0 12px; font: 400 var(--type-body) var(--mono); letter-spacing: .04em; }
.setup-phone { margin-top: 12px; font-size: 14px; }
.setup-phone:empty { display: none; }
.setup-phone .link { font-weight: 500; }
.sign-error .link { font-weight: 500; }
@media (max-width: 759px) {
  .signin { align-content: start; padding: 20px 4px; }
  .signin .brand { margin-left: 22px; }
  .sign-card { padding: 28px 22px; border: 0; background: none; box-shadow: none; }
  .sign-foot { margin-left: 22px; }
  .code-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
  .code-box { width: auto; }
  .setup-qr { flex-wrap: wrap; gap: 16px 28px; }
}

/* ===== Settings and the keys ===== */
.st { display: grid; grid-template-columns: 260px minmax(0, 560px) minmax(0, 460px); column-gap: 40px; align-items: start; margin-top: 38px; }
.st-wide { grid-template-columns: 260px minmax(0, 1fr); }
/* Three columns need about 1680 pixels. In a smaller window the side card goes under the part. */
@media (min-width: 1100px) and (max-width: 1679px) {
  .st:not(.st-wide) { grid-template-columns: 220px minmax(0, 680px); }
  .st:not(.st-wide) > .cols-side { grid-column: 2; margin-top: 28px; }
}
/* With the side card under the part, the list of parts spans both rows, so no gap opens above the card. */
@media (max-width: 1679px) {
  .st > .st-nav { grid-row: 1 / span 2; }
}
.st-nav { display: grid; gap: 4px; }
.st-nav a { padding: 10px 16px 10px 14px; border-left: 2px solid transparent; color: var(--muted); font: 400 var(--type-body) var(--sans); text-decoration: none; }
.st-nav a:hover { color: var(--ink); }
.st-nav a[aria-current] { border-color: var(--accent); color: var(--ink); font-weight: 500; }
.st-body { padding-top: 6px; min-width: 0; }
.st-body > .label:first-child, .st-body > .label-row:first-child { margin-top: 0; }
.st-gap { margin-top: 38px; }
.st-rows { margin-top: 10px; padding: 0 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--raised); box-shadow: var(--shadow); }
.st-row:last-child { border-bottom: 0; }

.st-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 48px; padding: 14px 0; border-bottom: 1px solid var(--line); font: 400 var(--type-body) var(--sans); }
.st-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.st-main b { display: flex; align-items: center; gap: 10px; font: 500 var(--type-body) var(--sans); }
.st-side { display: flex; align-items: center; gap: 20px; flex: none; }
.st-user .st-side { flex: 1; justify-content: space-between; max-width: 296px; }
/* A founder row with no room: the sign-in facts go under the name, never over it. */
.st-user { flex-wrap: wrap; row-gap: 10px; }
.st-user .st-main { min-width: min(100%, 230px); }
.st-user .st-side { min-width: min(100%, 240px); }
.st-mid { display: grid; gap: 8px; }
.st-yes, .st-never, .st-wait { display: inline-flex; align-items: center; gap: 8px; font: 400 var(--type-ui) var(--sans); }
.st-yes .icon { color: var(--good); }
.st-row > .st-side > .st-yes { color: var(--good); font-weight: 500; }
.st-user .st-yes { color: var(--ink); }
.st-never { color: var(--muted); font-weight: 500; }
.st-wait { color: var(--caution); }
.st-add { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.st-add .sub { max-width: 300px; margin: 0; line-height: 19px; }
.st-add .btn { flex: none; }
.st-checks { margin-top: 12px; }
.st-flow { display: grid; gap: 18px; margin-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.st-flow > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
.st-flow p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.st-flow .sub { margin: 0 14px 0 4px; font-size: 14px; }
.st-flow .icon { color: var(--muted); }
.st-note { margin-top: 16px; color: var(--muted); font-size: 14px; line-height: 20px; }
.st-offer { font-size: 16px; }
.st-row .tags { margin-top: 8px; }
.st-row .tags .tag { padding: 4px 8px; font-size: 11px; border: 1px solid var(--line); }
.st-row > .st-main > div { min-width: 0; }
.st-fee { display: grid; gap: 8px; justify-items: end; }
.st-fee p { display: flex; align-items: center; gap: 10px; }
.st-fee .mono { color: var(--ink); font-size: 13px; }
.st-h { margin-top: 12px; font: 500 var(--type-lead) var(--sans); }
.st-limit { display: flex; align-items: center; gap: 12px; font: 700 var(--type-h2) var(--sans); }
.st-reply { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.st-reply .select-wrap { width: 196px; }
.st-word { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.st-word .input { flex: 1; height: 36px; }
.st-word .sub { flex: 0 0 100%; }
.st-form { margin-top: 0; }
.st-url { margin-top: 14px; color: var(--ink); font-size: 18px; line-height: 24px; }
.st-form .sub { margin-top: 8px; font-size: 13px; }
.st-form .st-add { margin-top: 12px; }
.st-num { color: var(--ink); font-size: 12px; }
.st-link { margin-top: 14px; }
.st-link .link { font-weight: 500; font-size: 13px; }
.ticks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 18px 0 14px; }
.ticks i { height: 4px; border-radius: 2px; background: var(--line); }
.ticks i.is-on { background: var(--brand); }
.st-find { position: relative; display: flex; align-items: center; margin-top: 16px; }
.st-find > .icon { position: absolute; left: 16px; color: var(--muted); }
.st-find .input { padding-left: 42px; }
.st-find + p { margin-top: 16px; }
.st-found { position: absolute; top: calc(100% + 4px); right: 0; left: 0; z-index: 5; display: grid; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); box-shadow: var(--shadow-sheet); }
.st-found button { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--ink); text-align: left; cursor: pointer; }
.st-found button:hover, .st-found button:focus-visible { background: var(--tint); }
.st-found b { display: block; font: 500 var(--type-ui) var(--sans); }
/* The history of changes */
.hist { margin-top: 6px; }
.hist-tr { display: grid; grid-template-columns: 150px 150px 90px minmax(0, 1fr) minmax(0, 300px); align-items: center; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line); font: 400 var(--type-body) var(--sans); }
.hist-tr.hist-th { min-height: 0; padding: 0 0 12px; font: 400 var(--type-label) var(--mono); }
.hist-who { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.hist-form { display: grid; place-items: center; width: 24px; height: 24px; color: var(--muted); }
.hist-org { color: var(--muted); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-org:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.hist-was { display: inline; }
.hist-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }
.hist-foot .link { font-weight: 500; }
.dialog-remove .line-check { margin-top: 8px; font-size: 15px; line-height: 20px; }
.dialog-remove .line-check.is-no span { color: var(--ink); }
.dialog-remove .label.gap { margin-top: 26px; }
/* The keys */
.keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 28px; }
.keys .lines { border-top: 1px solid var(--line); margin-top: 10px; }
.key-seq { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.dialog-keys .dialog-sub kbd { margin: 0 4px; }
.keys kbd, .dialog-sub kbd { min-width: 26px; height: 24px; }
/* The email sequences: Settings, the sheet of an email, Next steps and the file */
.seq-on { display: flex; align-items: center; gap: 12px; }
.seq-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; max-width: 1000px; margin-top: 20px; }
.seq-card .rules b { font-weight: 500; color: var(--ink); }
.seq-card .rules span { color: var(--muted); }
.seq-line { margin-top: 8px; }
.seq-line .link { font-weight: 500; }
.seq-step .st-main > div { display: grid; gap: 2px; }
.seq-step .sample { margin-left: 8px; vertical-align: 1px; }
.seq-subject { color: var(--ink); }
.seq-preview { padding: 16px 18px 18px; border-bottom: 1px solid var(--line); background: var(--tint); font: 400 var(--type-text) var(--sans); }
.seq-preview b { display: block; margin: 8px 0 10px; font-weight: 500; }
.seq-n { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; background: var(--tint); color: var(--muted); font-size: 12px; vertical-align: 2px; }
.seq-edit + .seq-edit { margin-top: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.seq-edit .sheet-h { display: flex; align-items: center; gap: 4px; }
.seq-edit .sheet-h .sample { margin-left: 8px; }
.seq-when { display: grid; grid-template-columns: 96px repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.seq-wait { margin-top: 12px; }
.seq-optout { margin-top: 6px; font: 400 var(--type-note) var(--sans); }
.srow-ic { display: grid; place-items: center; width: 24px; height: 24px; color: var(--accent); }
.ccard-mail { color: var(--accent); }
.draft-subject { width: 100%; height: 30px; padding: 0 8px; border: 1px solid var(--muted); border-radius: 6px; background: var(--raised); color: var(--ink); font: 500 var(--type-ui) var(--sans); }
.draft-foot { padding: 14px 19px 18px; border-top: 1px dashed var(--line); color: var(--muted); font: 400 var(--type-note) var(--sans); }
.take-emails { margin-top: 18px; }
.take-emails .sheet-info { margin-top: 8px; }
.check:has(.check-native:disabled) { opacity: .55; cursor: default; }
.emails-actions { gap: 20px; margin-top: 14px; }
.sheet-email .sheet-foot { flex-wrap: wrap; row-gap: 8px; }
.sheet-email .sheet-foot .text-btn { white-space: nowrap; }
.sheet-email .sheet-foot .link-red { color: var(--late); }
.emails-actions .link { font: 500 var(--type-small) var(--sans); }
@media (max-width: 759px) {
  .seq-when { grid-template-columns: 1fr; gap: 0; }
  .seq-step .st-side { width: 100%; }
}
@media (max-width: 1099px) {
  .st { grid-template-columns: 200px minmax(0, 1fr); }
  .st > .cols-side { grid-column: 2; margin-top: 28px; }
}
@media (max-width: 759px) {
  .st { display: block; margin-top: 22px; }
  .st-nav { display: flex; gap: 4px; margin: 0 calc(-1 * var(--pad)) 24px; padding: 0 var(--pad); overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .st-nav a { flex: none; padding: 10px 8px; border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; }
  .st > .cols-side { margin-top: 28px; }
  .st-row, .st-add { flex-wrap: wrap; }
  .st-flow > div { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hist-tr { grid-template-columns: 96px minmax(0, 1fr); row-gap: 4px; }
  .hist-th, .hist-tr > .label:nth-child(3) { display: none; }
  .hist-tr > :nth-child(4), .hist-org, .hist-tr > .quiet { grid-column: 2; }
  .keys { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ===== The states (design row 9): the first day, a change by the other founder, a lost file, a calm day ===== */
.page-first .board { margin-bottom: 52px; }
.col-empty { display: grid; place-items: center; min-height: 176px; margin-top: 17px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; }
.col-empty.is-first { border: 1.5px dashed var(--accent); }
.ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 14px 0 48px; }
.way h3 { margin-top: 12px; font: 700 19px/25px var(--sans); }
.way .sub { margin-top: 8px; }
.way .actions { margin-top: 18px; }
.way .file-chip { margin-left: 6px; }
.form-error.is-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 24px calc(-1 * var(--pad)) -28px; padding: 14px var(--pad); border-top: 1px solid var(--line); box-shadow: inset 4px 0 0 var(--late); color: var(--ink); font-weight: 400; }
.form-error.is-strip span { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.form-error.is-strip .icon { color: var(--late); }
.form-error.is-strip b { font-weight: 500; }
.form-error.is-strip .text-btn { color: var(--ink); font-weight: 500; white-space: nowrap; }
.clash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.clash-box { position: relative; display: grid; gap: 8px; align-content: start; padding: 16px 16px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--raised); color: var(--ink); text-align: left; cursor: pointer; }
.clash-box[aria-checked="true"] { border: 2px solid var(--accent); padding: 15px 15px 13px; background: var(--tint); }
.clash-box i { position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; border: 1.5px solid var(--muted); border-radius: 50%; }
.clash-box[aria-checked="true"] i { border: 5px solid var(--brand); background: var(--raised); }
.clash-box b { margin-top: 6px; font: 500 var(--type-lead) var(--sans); }
.clash-who { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; }
.page-lost { justify-content: center; align-items: center; }
.lost { display: grid; justify-items: center; gap: 0; padding-bottom: 80px; text-align: center; }
.lost .title { margin-top: 22px; font-size: 32px; line-height: 40px; }
.lost .lede { font-size: 16px; }
.lost .actions { margin-top: 28px; }
.lost > .sub { margin-top: 24px; }
.lost kbd { margin: 0 4px; }
.while { margin-top: 28px; }
.while h2 { font: 700 var(--type-h3) var(--sans); }
.while .lines { max-width: 730px; }
.while .line { font-size: 14px; }
.calm { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 30px; }
.calm-ic { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--good); color: #FFFFFF; }
.calm-ic .icon { stroke-width: 2.4; }
.calm b { font: 500 17px/23px var(--sans); }
.calm .sub { margin-top: 6px; font-size: 14px; line-height: 20px; }
@media (max-width: 1099px) {
  .ways { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 759px) {
  /* The first day: only New, a short box, then the three ways to start. */
  .page-first .col:not(.col-new) { display: none; }
  .page-first .col-empty.is-first { min-height: 96px; }
  .clash { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .lost { padding-bottom: 0; }
}

/* ===== The phone: the four tabs at the bottom, the stage buttons of the board, the page More ===== */
.phone-tabs { display: none; }
.stage-jump { display: none; }
.ph-only { display: none; }
.more-me { display: flex; align-items: center; gap: 14px; }
.more-me b { display: block; font: 700 var(--type-h2) var(--sans); }
.more-rows { margin-top: 24px; border-top: 1px solid var(--line); }
.more-row > span:first-child { flex: 1; }
.more-row b { font: 500 var(--type-lead) var(--sans); }
.more-row .icon { color: var(--muted); }
.more-label { margin-top: 32px; }
.more-label + .more-rows { margin-top: 8px; }
.more-out { margin-top: 18px; padding: 10px 0; border: 0; background: none; color: var(--ink); font: 500 var(--type-lead) var(--sans); }
@media (max-width: 759px) {
  .phone-tabs { position: fixed; right: 0; bottom: 0; left: 0; z-index: 8; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--raised); }
  .phone-tab { position: relative; display: grid; justify-items: center; gap: 6px; padding: 6px 0 4px; color: var(--muted); font: 400 var(--type-micro) var(--sans); text-decoration: none; }
  .phone-tab[aria-current] { color: var(--accent); font-weight: 500; }
  .phone-num { position: absolute; top: 0; left: calc(50% + 8px); min-width: 16px; padding: 1px 4px; border-radius: 8px; background: var(--brand); color: #FFFFFF; font: 500 10px/14px var(--sans); text-align: center; }
  body[data-view="org"] .phone-tabs, body[data-view="org"] .top { display: none; }
  .stage-jump { display: flex; gap: 8px; margin: 20px calc(-1 * var(--pad)) 0; padding: 2px var(--pad); overflow-x: auto; scrollbar-width: none; }
  .stage-jump::-webkit-scrollbar { display: none; }
  .stage-jump button { flex: none; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--raised); color: var(--muted); font: 400 var(--type-ui) var(--sans); }
  .stage-jump .num { margin-left: 8px; }
  .ph-only { display: inline; }
  .ph-hide { display: none; }
}

/* ===== State colors that win over the color of a part ===== */
.is-caution { color: var(--caution); }
.is-accent { color: var(--accent); }
.sub.is-late, .hint.is-late, .next-sub.is-late, .link.is-late { color: var(--late); }