/* Generated by tools/build_frontend.py. Do not edit. */

/* source: frontend/styles/tokens.css */

:root {
  color-scheme: light;
  /* A dropdown's chevron: the same drawn mark as the one beside the user's name, in a
     quiet mid grey. An image cannot read a colour token, so dark mode sets its own. */
  --icon-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a8d93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  --color-canvas: #f6f7f7;
  --color-surface: #ffffff;
  /* A company logo's tile (0134): light in both modes, so a dark mark is never lost. */
  --color-logo-tile: #ffffff;
  --color-surface-subtle: #f0f3f4;
  --color-ink: #1c252b;
  /* Kept level with B1, which this palette is the un-themed copy of. The value it
     held measured 4.4981 on the subtle surface -- under the bar by two thousandths,
     and 4.50 once rounded, which is how it read as passing for so long. */
  --color-ink-soft: #647077;
  --color-line: #d8dddf;
  --color-line-strong: #bcc5c9;
  --color-accent: #4e7187;
  /* The logo's own blue, the same in every theme and mode (2026-09-27). */
  --color-brand: #2a61d6;
  --color-accent-strong: #365b70;
  --color-accent-soft: #e8eff3;
  --color-focus: #3567a2;
  --color-success: #4f7662;
  --color-success-soft: #edf4ef;
  --color-danger: #b42318;
  --color-danger-soft: #fff0ed;
  --color-warning: #9a5b00;
  --color-warning-soft: #fff8e8;
  /* The heading of an internal call's minutes (2026-09-28); a customer call's is the accent. */
  --color-internal: #c2410c;
  /* A third step between ink-soft and the lines: the note under a field, a table
     heading, the text of a step already ticked. Four rules asked for it long before it
     existed and were silently inheriting their parent's colour instead. */
  --color-ink-muted: color-mix(in srgb, var(--color-ink-soft) 70%, var(--color-line-strong));
  /* Headings take the ink unless a mode says otherwise. Dark says otherwise. */
  --color-heading: var(--color-ink);
  /* What a status border is mixed against. Every one of them is a mix of the status
     colour and a line, at a strength its author chose -- 18% for a card that should
     barely announce itself, 48% for a button that should. Giving each status its own
     line keeps those strengths and stops the mix landing in the neutral grey, which on
     a dark surface turns a red border into a mauve one. */
  --color-danger-line: var(--color-line);
  --color-warning-line: var(--color-line);
  --color-success-line: var(--color-line);
  /* Informational. Nothing wears it yet; it is here so that the first thing that needs
     to say "for your information" does not invent a colour. */
  --color-info: var(--color-focus);
  --color-on-ink: #ffffff;
  --color-on-accent: #ffffff;
  --color-nav-canvas: #253039;
  --color-nav-border: #334249;
  --color-nav-ink: #eef2f3;
  --color-nav-ink-strong: #ffffff;
  --color-nav-ink-soft: #aeb9be;
  --color-nav-hover: #313f47;
  --color-nav-active: #3f5d6f;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-sm: 0.2rem;
  --radius-md: 0.3rem;
  --radius-lg: 0.45rem;
  --radius-control: 0.5rem;
  --shadow-overlay: 0 18px 48px rgb(28 37 43 / 16%);
  --control-height: 2.75rem;
  --header-height: 4.5rem;
  --nav-width: 11rem;
  /* Every page one measure (Nico, 2026-09-29): 1500px of content at most -- a 1440px
     laptop gives 1200px -- plus the page's own padding on either side. */
  --content-max: calc(1500px + 2 * var(--space-8));
  --breakpoint-narrow: 54rem;
  --layer-base: 0;
  --layer-header: 20;
  --layer-scrim: 40;
  --layer-drawer: 50;
  --layer-modal: 60;
  --layer-toast: 70;
  --motion-fast: 120ms;
  --motion-standard: 180ms;
}

/* source: frontend/styles/themes.css */

/*
 * B1 is the approved Merkio 2 baseline captured on 8 September 2026.
 * Keep this block unchanged when exploring new themes. Add each alternative as
 * a separate html[data-theme="..."] block so the Theme switch can return to B1.
 */
html[data-theme="b1"] {
  color-scheme: light;
  --color-canvas: #f6f7f7;
  --color-surface: #ffffff;
  --color-surface-subtle: #f0f3f4;
  --color-ink: #1c252b;
  /* 4.4981 on the subtle surface -- under the bar by two thousandths, which rounds to
     4.50 and reads as passing. One value darker on one channel, same hue: 4.5642. The
     baseline is protected from theme drift, not from being wrong. */
  --color-ink-soft: #647077;
  --color-line: #d8dddf;
  --color-line-strong: #bcc5c9;
  --color-accent: #4e7187;
  --color-accent-strong: #365b70;
  --color-accent-soft: #e8eff3;
  --color-focus: #3567a2;
  --color-success: #4f7662;
  --color-success-soft: #edf4ef;
  --color-danger: #b42318;
  --color-danger-soft: #fff0ed;
  --color-warning: #9a5b00;
  --color-warning-soft: #fff8e8;
  --color-nav-canvas: #253039;
  --color-nav-border: #334249;
  --color-nav-ink: #eef2f3;
  --color-nav-ink-strong: #ffffff;
  --color-nav-ink-soft: #aeb9be;
  --color-nav-hover: #313f47;
  --color-nav-active: #3f5d6f;
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-sm: 0.2rem;
  --radius-md: 0.3rem;
  --radius-lg: 0.45rem;
  --radius-control: 0.5rem;
  --shadow-overlay: 0 18px 48px rgb(28 37 43 / 16%);
  --control-height: 2.75rem;
  --header-height: 4.5rem;
  --nav-width: 11rem;
  --content-max: calc(1500px + 2 * var(--space-8));
  --breakpoint-narrow: 54rem;
  --layer-base: 0;
  --layer-header: 20;
  --layer-scrim: 40;
  --layer-drawer: 50;
  --layer-modal: 60;
  --layer-toast: 70;
  --motion-fast: 120ms;
  --motion-standard: 180ms;
}

/* B2: Notion-calibrated Focus Canvas. B1 above remains the protected baseline. */
html[data-theme="b2"] {
  color-scheme: light;
  --color-canvas: #f7f7f5;
  --color-surface: #ffffff;
  --color-surface-subtle: #f3f3f1;
  --color-ink: #2f3437;
  /* Notion's grey missed the bar on every surface B2 has, white included: 4.48 there,
     4.03 on the subtle one. One step darker at the same hue lands on 4.52/5.02/4.68,
     which is where B1's grey already sits. */
  --color-ink-soft: #706f6c;
  --color-line: #e7e7e4;
  --color-line-strong: #d3d3cf;
  --color-accent: #337ea9;
  --color-accent-strong: #245f7f;
  --color-accent-soft: #eef6fa;
  --color-focus: #2383e2;
  /* Notion's green measured 4.08:1 on its own soft background -- under the bar for the
     small bold text a pill is made of, and the accounts list has been drawing it that
     way all along. Three steps darker at the same hue and saturation: 4.65:1. */
  --color-success: #3f795a;
  --color-success-soft: #edf6f0;
  --color-danger: #c2352a;
  --color-danger-soft: #fff1f0;
  /* 4.39 on its own soft background. One step darker at the same hue: 4.62, and 5.12
     on white -- B1's amber measures 5.13. */
  --color-warning: #956400;
  --color-warning-soft: #fbf3db;
  --color-nav-canvas: #202b33;
  --color-nav-border: #2d3941;
  --color-nav-ink: #e9edef;
  --color-nav-ink-strong: #ffffff;
  --color-nav-ink-soft: #aeb8bd;
  --color-nav-hover: #2a3740;
  --color-nav-active: #344751;
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-sm: 0.15rem;
  --radius-md: 0.25rem;
  --radius-lg: 0.375rem;
  --radius-control: 0.375rem;
  --shadow-overlay: 0 12px 36px rgb(47 52 55 / 15%);
  --control-height: 2.5rem;
  --header-height: 3.5rem;
  --nav-width: 10.75rem;
  --content-max: calc(1500px + 2 * var(--space-8));
  --breakpoint-narrow: 54rem;
  --layer-base: 0;
  --layer-header: 20;
  --layer-scrim: 40;
  --layer-drawer: 50;
  --layer-modal: 60;
  --layer-toast: 70;
  --motion-fast: 100ms;
  --motion-standard: 160ms;
}

/* B3: Attio-calibrated record page. B1 and B2 above are left exactly as they were. */
html[data-theme="b3"] {
  color-scheme: light;
  --color-canvas: #fafafa;
  --color-surface: #ffffff;
  --color-surface-subtle: #f5f5f6;
  --color-ink: #1f2023;
  --color-ink-soft: #65676e;
  --color-line: #ebebed;
  --color-line-strong: #d9dadd;
  --color-accent: #2a61d6;
  --color-accent-strong: #1e4cb0;
  --color-accent-soft: #eef3fd;
  --color-focus: #2a61d6;
  --color-success: #2e7650;
  --color-success-soft: #ecf6f0;
  --color-danger: #c0341f;
  --color-danger-soft: #fdf0ee;
  --color-warning: #8f5f00;
  --color-warning-soft: #fcf4e1;
  /* The rail is light here, the one theme where it is: a sidebar of the same paper as
     the page, separated by a hairline rather than by a dark slab. */
  --color-nav-canvas: #fafafa;
  --color-nav-border: #ebebed;
  --color-nav-ink: #2f3136;
  --color-nav-ink-strong: #1f2023;
  --color-nav-ink-soft: #65676e;
  --color-nav-hover: #efeff1;
  --color-nav-active: #e8e9ec;
  --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.625rem;
  --radius-control: 0.375rem;
  --shadow-overlay: 0 8px 28px rgb(31 32 35 / 12%), 0 1px 3px rgb(31 32 35 / 8%);
  --control-height: 2.25rem;
  --header-height: 3rem;
  --nav-width: 14rem;
  --content-max: calc(1500px + 2 * var(--space-8));
  --breakpoint-narrow: 54rem;
  --layer-base: 0;
  --layer-header: 20;
  --layer-scrim: 40;
  --layer-drawer: 50;
  --layer-modal: 60;
  --layer-toast: 70;
  --motion-fast: 100ms;
  --motion-standard: 160ms;
}

/* B3 Focus: B3 with the record centred in one column, the same 100rem span B2 Focus caps
   its dossier at. Layout only, so it carries no colours and the dark block needs nothing
   for it. */
html[data-theme="b3"][data-layout="focus"] {
  --focus-width: 100rem;
  --content-max: var(--focus-width);
  --focus-inset: max(var(--space-6), calc((100% - var(--focus-width)) / 2 + var(--space-6)));
}

/*
 * Dark is a mode, not a third theme. Every colour in this application already comes from
 * one of the tokens above, so one block that redefines them carries the whole interface --
 * including everything built with color-mix on an accent or a line, which follows on its
 * own. It is written last and matches on the same specificity as the theme blocks, so
 * source order is what lets it win over every theme alike.
 *
 * The one thing it deliberately does not carry across is the themes' separate accents.
 * Dark gets one accent, chosen to stay legible on a dark surface rather than to reproduce
 * a hue picked for white.
 */
html[data-mode="dark"] {
  color-scheme: dark;
  --icon-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238795a1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5'/%3E%3C/svg%3E");
  /* The logo keeps its blue on a dark page, as the brand draws it there. */
  --color-brand: #2a61d6;
  --color-canvas: #14191d;
  --color-surface: #1b2227;
  --color-logo-tile: #f1f3f4;
  --color-surface-subtle: #232b31;
  --color-ink: #e2e8f0;
  --color-ink-soft: #aab6c2;
  --color-ink-muted: #8795a1;
  /* Headings get their own colour here and nowhere else: on a white page a blue-grey
     heading reads as a link, on a dark one it reads as a heading. */
  --color-heading: #a8cde0;
  --color-line: #2e383f;
  --color-line-strong: #43505a;
  --color-accent: #7fb0cc;
  --color-accent-strong: #a8ccdf;
  --color-accent-soft: #1e2c35;
  --color-focus: #6ba7e8;
  --color-success: #86efac;
  --color-success-soft: #1a2921;
  /* The only one of the three lines not handed over with the palette. Picked to sit in
     the same register as the other two rather than derived, because a mix into the
     neutral line is what put a mauve border under a red word in the first place. */
  --color-success-line: #3c7f57;
  /* Danger and warning sat 30 degrees apart on the colour wheel at almost the same
     lightness, so on a dark surface they read as one warm smear. These hold their
     distance: the red stays soft because a saturated red vibrates on dark, and the amber
     carries the brightness instead. Each also brings the line its borders mix into, so a
     red border stays red instead of drifting towards the neutral grey. */
  --color-danger: #fca5a5;
  --color-danger-soft: #451820;
  --color-danger-line: #9f3a46;
  --color-warning: #fcd34d;
  --color-warning-soft: #382706;
  --color-internal: #fdba74;
  --color-warning-line: #92691a;
  --color-info: #93c5fd;
  /* Inverted here: the ink is nearly white, so what sits on it has to be the canvas. */
  --color-on-ink: #14191d;
  --color-on-accent: #14191d;
  /* The rail is dark in every theme already. Against a dark canvas it needs to sit lower
     than the page rather than above it, or the two read as one surface. */
  --color-nav-canvas: #0f1418;
  --color-nav-border: #232d34;
  --color-nav-ink: #e7ecef;
  --color-nav-ink-strong: #ffffff;
  --color-nav-ink-soft: #94a2aa;
  --color-nav-hover: #1c252b;
  --color-nav-active: #2a3a45;
}

/* source: frontend/styles/reset.css */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 20rem;
  background: var(--color-canvas);
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--color-ink);
  background: var(--color-canvas);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
summary {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
}

/* The keyboard's place, 2026-09-28: a solid 2px ring in the focus colour, which clears 3:1
   against the page in every theme and in dark mode; the 35% ring it replaced measured 1.7:1. */
:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* source: frontend/styles/typography.css */

body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

/* The same as the ink on a white page, and its own colour on a dark one, where a
   heading needs something other than weight to separate it from the text under it. */
h1,
h2,
h3 {
  color: var(--color-heading);
}

h1 {
  margin-bottom: var(--space-2);
  font-size: clamp(1.75rem, 3vw, var(--text-2xl));
  line-height: 1.1;
  letter-spacing: -0.035em;
}

::selection {
  color: var(--color-on-accent);
  background: var(--color-accent-strong);
}

a {
  text-underline-offset: 0.16em;
}

h2 {
  margin-bottom: var(--space-2);
  font-size: var(--text-lg);
  line-height: 1.25;
}

h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-md);
  line-height: 1.3;
}

.eyebrow {
  margin-bottom: var(--space-3);
  color: var(--color-accent-strong);
  font: 700 var(--text-xs)/1.5 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.intro,
.muted {
  color: var(--color-ink-soft);
}

.intro {
  margin-bottom: 0;
}

.mono {
  font-family: var(--font-mono);
}

/* source: frontend/styles/layout.css */

.auth-page,
.proof-page {
  width: min(100% - 2.5rem, 36.25rem);
  margin: 0 auto;
  padding: var(--space-12) 0 4.5rem;
}

.proof-page {
  width: min(100% - 2.5rem, 57.5rem);
}

.brand {
  display: grid;
  grid-template-columns: 2.25rem auto 1fr;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 4.5rem;
}

.proof-brand {
  margin-bottom: var(--space-12);
}

.auth-panel,
.proof-panel {
  padding: 2.25rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.proof-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-line);
}

.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.proof-grid > div {
  min-width: 0;
  padding: 1.75rem var(--space-5) 1.75rem 0;
  border-bottom: 1px solid var(--color-line);
}

.proof-grid > div:nth-child(even) {
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-line);
}

.app-shell {
  min-height: 100vh;
  background: var(--color-canvas);
}

.shell-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--layer-header);
  display: flex;
  width: var(--nav-width);
  flex-direction: column;
  padding: var(--space-5) var(--space-3);
  border-right: 1px solid var(--color-nav-border);
  color: var(--color-nav-ink);
  background: var(--color-nav-canvas);
}

.shell-brand {
  display: flex;
  min-height: var(--control-height);
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-2);
}

.shell-nav-list {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
}

.shell-nav-list > li {
  display: grid;
  gap: var(--space-1);
}

.shell-main {
  min-width: 0;
  min-height: 100vh;
  margin-left: var(--nav-width);
}

.shell-header {
  position: sticky;
  top: 0;
  z-index: var(--layer-header);
  display: flex;
  height: var(--header-height);
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-8);
  border-bottom: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-surface) 97%, transparent);
}

.shell-header-actions,
.page-title-row,
.state-picker,
.state-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.shell-header-actions > div {
  position: relative;
}

/* Today's date and weekday at the top of every page (2026-09-29), quiet beside the menu. */
.shell-date {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
}

/* An event's reminder after the date (0135): the accent's words and a small mark, on the
   date's line; the whole reminder opens the calendar. */
.shell-event-reminder {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin-left: var(--space-4);
  overflow: hidden;
  color: var(--color-accent-strong);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.shell-event-reminder[hidden] {
  display: none;
}

.shell-event-reminder > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-event-reminder:hover > span:last-child,
.shell-event-reminder:focus-visible > span:last-child {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.shell-event-reminder-mark {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
}

.shell-content {
  width: min(100%, var(--content-max));
  margin: 0 auto;
  padding: var(--space-10) var(--space-8) var(--space-12);
}

.account-dossier-shell .shell-header {
  display: none;
}

.account-dossier-shell .shell-content {
  width: 100%;
  /* The account page keeps the measure too: its own padding is inside it. */
  max-width: var(--content-max);
  padding: 0;
}

.page-title-row {
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}

.state-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--space-6);
}

.account-toolbar {
  display: grid;
  /* The search alone, as wide as Prospecting's find-a-person field (2026-09-29). */
  grid-template-columns: minmax(15rem, 34rem);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.contact-toolbar {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) repeat(2, auto);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.partner-title-row {
  margin-bottom: var(--space-6);
}

.partner-workspace {
  display: grid;
  grid-template-columns: minmax(17rem, 0.34fr) minmax(0, 1fr);
  min-height: 36rem;
  border-block: 1px solid var(--color-line);
}

.prompt-page-title {
  margin-bottom: var(--space-6);
}

/* The library first: a search and the prompts, each a title, its date and two lines,
   with Copy at hand. Writing one opens in a panel instead of standing over the list. */
.prompt-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 62rem;
  margin-bottom: var(--space-4);
}

.prompt-toolbar input[type="search"] {
  flex: 1 1 auto;
}

.prompt-toolbar p {
  flex: none;
  margin: 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.prompt-no-match {
  margin: 0;
  padding: var(--space-5) 0;
  color: var(--color-ink-soft);
}

.prompt-drawer {
  width: min(52rem, calc(100vw - 2rem));
  grid-template-rows: auto minmax(0, 1fr);
}

/* The reader: the header, the prompt's whole text as written, Copy and Edit prompt. */
.prompt-reader {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.prompt-reader-text {
  max-width: 75ch;
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#prompt-reader .prompt-card-meta {
  margin: var(--space-1) 0 0;
}

/* The prompt's name is the way in: plain text in the ink that underlines when pointed at. */
.prompt-card-open {
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.prompt-card-open:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.prompt-drawer-form {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

.prompt-drawer-body {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.prompt-drawer-body .prompt-editor textarea {
  min-height: 22rem;
}

.prompt-drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.prompt-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}

/* The prompt's name at the size and weight of a group's name on All accounts (2026-09-29). */
.prompt-card-header h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
}

/* The prompt's place in the library: two small arrows at the header's far right, up and
   down. The first prompt's up arrow and the last one's down arrow rest, greyed. */
.prompt-card-heading {
  flex: 1 1 auto;
  min-width: 0;
}

.prompt-card-move {
  display: grid;
  flex: none;
  gap: 0.125rem;
  margin: -0.125rem 0 0;
}

.prompt-card-move-button {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.375rem;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
  background: transparent;
  cursor: pointer;
}

.prompt-card-move-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prompt-card-move-button:hover:not(:disabled) {
  border-color: var(--color-line);
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.prompt-card-move-button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.prompt-card-move-button:disabled {
  cursor: default;
  opacity: 0.35;
}

.prompt-field-label {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-4);
}

.prompt-field-label span {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.prompt-editor {
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.prompt-editor:focus-within {
  border-color: var(--color-focus);
  outline: 2px solid var(--color-focus);
}

.prompt-format-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-subtle);
}

.prompt-format-toolbar button {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  background: transparent;
}

.prompt-format-toolbar button:hover {
  border-color: var(--color-line);
  color: var(--color-ink);
  background: var(--color-surface);
}

.prompt-toolbar-divider {
  width: 1px;
  height: 1.5rem;
  margin: 0 var(--space-1);
  background: var(--color-line);
}

.prompt-editor textarea {
  min-height: 15rem;
  padding: var(--space-4);
  border: 0;
  border-radius: 0;
  line-height: 1.6;
  resize: vertical;
  caret-color: var(--color-focus);
}

.prompt-editor textarea:focus {
  outline: 0;
}

.prompt-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-5);
}

.prompt-list {
  display: grid;
  max-width: 62rem;
}

.prompt-card {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-line);
}

.prompt-card:first-child {
  padding-top: var(--space-2);
}

.prompt-card-meta {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.prompt-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-1);
}

.prompt-card-action {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--color-ink-soft);
  background: transparent;
  font-size: var(--text-xs);
  font-weight: 400;
}

.prompt-card-action:hover {
  border-color: var(--color-line);
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.prompt-card-action.is-danger:hover {
  border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-surface));
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.prompt-card-action .icon {
  width: 1rem;
  height: 1rem;
}

.prompt-empty {
  max-width: 62rem;
  padding: var(--space-8) 0;
  color: var(--color-ink-soft);
}

.prompt-empty h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}

.prompt-empty p {
  margin: 0;
}

.prompt-delete-modal {
  max-width: 30rem;
}

.language-switch {
  display: flex;
  padding: 0.1875rem;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.language-switch button {
  min-width: 2.75rem;
  min-height: 2.25rem;
  border: 0;
  border-radius: calc(var(--radius-md) - 0.1875rem);
  color: var(--color-ink-soft);
  background: transparent;
  font-weight: 750;
}

.language-switch button[aria-pressed="true"] {
  color: var(--color-ink);
  background: var(--color-surface);
}

.wiki-product-meta {
  margin: var(--space-2) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.wiki-lead {
  max-width: 70ch;
  margin: var(--space-7) 0 0;
  color: var(--color-ink);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.wiki-section {
  max-width: 72ch;
  margin-top: var(--space-9);
}

.wiki-section h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
}

.wiki-bullet-list,
.wiki-resource-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: 1.25rem;
}

.wiki-objection {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
}

.wiki-objection:last-child {
  border-bottom: 1px solid var(--color-line);
}

.wiki-objection h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-md);
}

.wiki-objection p,
.wiki-prose {
  margin: 0;
  line-height: 1.65;
}

.wiki-question {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  font-size: var(--text-lg);
  font-weight: 650;
}

@media (max-width: 35rem) {
  .prompt-card-header { display: grid; }
  .prompt-card-actions { justify-content: flex-start; }
}

.partner-directory {
  padding: var(--space-6) var(--space-6) var(--space-6) 0;
  border-right: 1px solid var(--color-line);
}

.partner-directory-header,
.partner-contact-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.partner-directory-header {
  display: grid;
  margin-bottom: var(--space-4);
}

.partner-search {
  margin: 0;
}

.partner-contact-panel {
  min-width: 0;
  padding: var(--space-6) 0 var(--space-6) var(--space-8);
}

.partner-contact-header {
  min-height: var(--control-height);
  margin-bottom: var(--space-5);
}

.partner-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-list-state,
.partner-contact-state {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-ink-soft);
}

.partner-list-state {
  padding: var(--space-5) var(--space-3);
}

.partner-contact-state {
  min-height: 18rem;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.partner-list-state.is-error,
.partner-contact-state.is-error {
  color: var(--color-danger);
}

.product-toolbar {
  max-width: 44rem;
  margin-bottom: var(--space-8);
}

.detail-section-header,
.preview-form {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-3);
}

.detail-section-header {
  align-items: center;
  margin: var(--space-8) 0 var(--space-4);
}

.preview-form {
  display: grid;
  grid-template-columns: minmax(12rem, 1.5fr) repeat(5, minmax(7rem, 1fr)) auto;
}

.preview-form label {
  margin: 0;
}

.product-toolbar label {
  margin: 0;
}

.catalog-index {
  max-width: none;
}

.catalog-index-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  min-height: 4.5rem;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.catalog-index-header h2 {
  margin-bottom: var(--space-1);
}

.catalog-index-header p {
  margin: 0;
}

.catalog-list {
  border-bottom: 1px solid var(--color-line);
}

/* One column. The second held the detail the row no longer carries and stood empty,
   taking two fifths of the width from the description beside it and wrapping every
   point early. */
.catalog-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-5) 0;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  color: var(--color-ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* A row is its frame: the button that opens the product, then its links. The frame
   carries the dividing line so the links stay inside the row they belong to. */
.catalog-row {
  border-bottom: 1px solid var(--color-line);
}

.catalog-row:last-child {
  border-bottom: 0;
}

.catalog-row > .catalog-entry {
  border-bottom: 0;
}

.catalog-row.has-links > .catalog-entry {
  padding-bottom: var(--space-2);
}

/* Indented past the points above them, so they read as belonging to the product rather
   than as one more point. */
.catalog-entry-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: 0;
  padding: 0 0 var(--space-5) var(--space-10);
  list-style: none;
  font-size: var(--text-sm);
}

.catalog-entry-links a {
  color: var(--color-accent);
  text-decoration: none;
}

.catalog-entry-links a::after {
  content: " \2197";
}

.catalog-entry-links a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.catalog-entry:hover .catalog-entry-title,
.catalog-entry:focus-visible .catalog-entry-title {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.catalog-entry:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

.catalog-entry-main {
  display: grid;
  gap: var(--space-2);
}

.catalog-entry-title {
  font-weight: 720;
}

.catalog-entry-description {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-ink-soft);
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.contact-toolbar label {
  margin: 0;
}

.account-toolbar label {
  margin: 0;
}

.account-pagination {
  display: flex;
  justify-content: center;
  padding-top: var(--space-5);
}

/* Edit and archive wait until the pointer is on the account's name row, like the icons on
   a Sprint row. Only where there is a pointer: on a touch screen nothing hides. They come
   back for the keyboard with focus, and an invisible icon takes no click. The space stays
   reserved, so the header does not shift when they appear. The rules sit in the one
   pointer-only block with the Sprint rows' icons. */
@media (prefers-reduced-motion: reduce) {
  .account-identity-header .quiet-icon-action {
    transition: none;
  }
}

.account-identity-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-7) var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

/* Under the name, not beside it: the name is the heading and this is a fact about it.
   Beside it, a long company name and a pill compete for the same line and the pill wins
   the wrap. The line is a paragraph so it disappears entirely when there is nothing to
   say rather than leaving a gap the header has to hold open. */
.account-identity-marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
}

/* Flush with the name, which means the pill's text and not the pill's box: the box was
   already on the name's left edge, and its own padding then set the word eight pixels in,
   so the two lines read as starting in different places. Pulled back by exactly that
   padding. Only a pill that leads the line -- with none, what follows carries no padding
   and is flush already. */
.account-identity-marks > .pill:first-child {
  margin-left: calc(var(--space-2) * -1);
}

/* Gone only when there is nothing in it. `:has(> [hidden])` hid the whole row as soon as
   one child was hidden, which was harmless while the row held a single pill and wrong the
   moment it held two things that appear independently. */
.account-identity-marks:empty,
.account-identity-marks:not(:has(> :not([hidden]))) {
  display: none;
}

/* What an existing customer pays, and when the contract comes up again -- the two facts
   asked for first about a Bestandskunde, beside the pill that says they are one. They
   read as text rather than as two more pills: the pill is the status, these are numbers,
   and three coloured lozenges in a row would make none of them the point. */
.account-commercial-terms {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

/* A hairline between the pill, the ARR and the renewal. Set to the text height rather
   than the row height, so it reads as a separator between three facts and not as the
   edge of a box around one of them. Its own element rather than a `::before` on the
   buttons: inside one, it would join the click target and the hover underline. */
.account-commercial-divider {
  flex: none;
  width: 1px;
  height: 0.9em;
  background: var(--color-line-strong);
}

/* Measured: the pill and both facts hold one line down to 560px of column, and below
   that the row wraps. A hairline that wraps with the fact behind it starts the next line
   as a stray tick, so on a narrow screen the facts stack and separate themselves. */
@media (max-width: 40rem) {
  .account-commercial-terms {
    flex-direction: column;
    align-items: flex-start;
  }

  .account-commercial-divider {
    display: none;
  }
}

.account-commercial-term {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

button.account-commercial-term {
  cursor: pointer;
}

button.account-commercial-term:hover,
button.account-commercial-term:focus-visible {
  color: var(--color-accent-strong);
  text-decoration: underline;
}

.account-commercial-term strong {
  color: var(--color-ink);
  font-weight: 650;
}

.account-commercial-term.is-missing {
  font-style: italic;
}

/* Account dossier: conventional CRM structure with document-led evidence. */
.account-dossier-shell #account-workspace-app {
  min-height: 100vh;
  background: var(--color-canvas);
}

.account-dossier-shell .account-identity-header {
  grid-template-columns: minmax(16rem, 1fr) auto;
  gap: var(--space-4) var(--space-6);
  align-items: end;
  padding: var(--space-4) var(--space-8);
  border: 0;
  border-radius: 0;
  background: transparent;
}

.account-dossier-shell .account-identity-main .eyebrow,
.account-dossier-shell .overview-heading .eyebrow {
  display: none;
}

.account-dossier-shell .account-identity-main h1 {
  margin-bottom: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.account-dossier-shell .account-identity-domain {
  margin: 0;
  color: var(--color-ink-soft);
}

.account-dossier-shell .account-identity-actions {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

.account-dossier-shell .account-section-nav {
  position: sticky;
  top: 0;
  z-index: calc(var(--layer-header) - 1);
  gap: var(--space-7);
  margin: 0;
  padding: 0 var(--space-8);
  overflow-x: auto;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-surface) 97%, transparent);
}

.account-dossier-shell .account-section-nav.can-scroll-left {
  box-shadow: inset 1rem 0 0.75rem -1rem color-mix(in srgb, var(--color-ink) 32%, transparent);
}

.account-dossier-shell .account-section-nav.can-scroll-right {
  box-shadow: inset -1rem 0 0.75rem -1rem color-mix(in srgb, var(--color-ink) 32%, transparent);
}

.account-dossier-shell .account-section-nav.can-scroll-left.can-scroll-right {
  box-shadow:
    inset 1rem 0 0.75rem -1rem color-mix(in srgb, var(--color-ink) 32%, transparent),
    inset -1rem 0 0.75rem -1rem color-mix(in srgb, var(--color-ink) 32%, transparent);
}

.account-dossier-shell .account-section-nav a {
  flex: 0 0 auto;
  padding: var(--space-3) 0;
  border-bottom: 2px solid transparent;
  font-size: var(--text-sm);
  font-weight: 650;
}

.account-dossier-shell .account-section-nav a[aria-current="location"] {
  border-color: var(--color-accent);
  color: var(--color-ink);
}

.account-dossier-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  align-items: start;
}

.account-dossier-main {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 0 var(--space-8) var(--space-12);
}

.account-dossier-main > section {
  margin-top: 0;
  padding: var(--space-6) 0 var(--space-8);
}

/* An account in the Prospect Sprint with no deal yet leads with its people (0108): no
   deal tabs, no empty opportunity card, and the side column keeps its place but shows
   nothing yet. */
.is-prospecting .account-section-nav a[href="#account-opportunity"],
.is-prospecting .account-section-nav a[href="#account-org-chart"],
.is-prospecting .account-section-nav a[href="#account-deal-strategy"],
.is-prospecting .account-section-nav a[href="#account-timeline"],
.is-prospecting .account-dossier-layout > .account-dossier-main > #account-overview,
.is-prospecting .account-dossier-layout > .account-dossier-rail > * {
  display: none;
}

/* Promoting the prospect follows Research as one more tab, after a thin vertical line:
   the same type and colour as the tabs, because it is a place to go, not a form. */
.account-dossier-shell .account-section-nav .account-nav-promote {
  position: relative;
  flex: 0 0 auto;
  min-height: 0;
  margin: 0 0 -1px var(--space-4);
  padding: 0.6rem var(--space-2);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--color-ink-soft);
  background: none;
  box-shadow: none;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.account-dossier-shell .account-section-nav .account-nav-promote::before {
  content: "";
  position: absolute;
  top: 30%;
  bottom: 30%;
  left: calc(-1 * var(--space-2) - 0.5px);
  width: 1px;
  background: var(--color-line-strong);
}

.account-dossier-shell .account-section-nav .account-nav-promote:hover {
  color: var(--color-ink);
}

.account-dossier-shell .account-section-nav .account-nav-promote:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.account-section-nav .account-nav-promote[hidden] {
  display: none;
}

.account-dossier-main > #account-deal-sprint {
  margin-top: 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
  scroll-margin-top: 3.5rem;
}

.account-dossier-main .overview-heading {
  align-items: start;
  margin-bottom: var(--space-4);
}

.account-dossier-main .overview-heading h2 {
  font-size: 1.15rem;
}

.account-dossier-main .overview-heading .muted {
  max-width: 72ch;
  font-size: var(--text-xs);
}

.account-dossier-main .overview-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
}

.account-dossier-main .overview-matters {
  display: block;
  grid-column: 1 / -1;
  padding-top: 0;
  border-top: 0;
}

.account-dossier-main .overview-commercial {
  grid-column: auto;
}

.account-dossier-main .matter-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-8);
}

.account-dossier-main .matter-list article {
  position: relative;
  min-width: 0;
  /* Each tile ends where its own text ends. Stretched to the row, a two-line Current
     status became a card of mostly nothing beside a ten-line Pain points. */
  align-self: start;
  padding: var(--space-3) 0;
}

.account-dossier-main .matter-list article:first-child {
  grid-column: 1 / -1;
  padding: var(--space-6) var(--space-6) var(--space-6) calc(var(--space-6) + 0.25rem);
  background: var(--color-accent-soft);
}

.account-dossier-main .matter-list article:first-child::before {
  display: none;
}

.account-dossier-main .matter-list article:not(:first-of-type) {
  padding-top: var(--space-5);
  border-top: 0;
}

/* The three tiles share one outer margin: the left edge of Current status and the right
   edge of Pain points take the same inset as the Next step tile above them, so the block
   reads as one column of text rather than three that each start somewhere else. Only the
   inner edges differ, and the divider between the columns is what sets those. */
.account-dossier-main .matter-list article:nth-of-type(2) {
  padding-left: calc(var(--space-6) + 0.25rem);
}

/* The horizontal rules around this block went; this one stays. It does not separate the
   block from the page, it separates two columns that would otherwise read as one wrapped
   paragraph when the left one is short. */
.account-dossier-main .matter-list article:last-of-type {
  padding-right: var(--space-6);
  padding-left: var(--space-8);
  border-left: 1px solid var(--color-line);
}

.account-dossier-main .matter-list .matter-preview {
  min-height: 5rem;
}

.account-dossier-main .matter-list .matter-next-step {
  min-height: auto;
}

/* This tile carries the whole summary: German, a separator line and English.  The shared
   four-line clamp hid the English half completely, and the 64ch cap left half the tile
   empty while the text wrapped early.  pre-line keeps the separator on its own line. */

.matter-next-step .matter-preview-button {
  min-height: 0;
}

.matter-preview-button {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: inherit;
  cursor: pointer;
  flex-direction: column;
  font: inherit;
  text-align: left;
}

.matter-next-step .matter-preview-button {
  min-height: auto;
  padding: 0;
}

.matter-preview-button:hover {
  border-color: var(--color-line);
  background: var(--color-surface-subtle);
}

.matter-next-step .matter-preview-button:hover {
  background: var(--color-surface-subtle);
}

.matter-preview-button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.matter-preview-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.matter-preview-action {
  color: var(--color-accent-strong);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Four lines cut the pain points mid-sentence while the card still had a third of its
   height empty, because the column next to it sets the row height. Ten filled that space
   and twelve is the last honest step: each tile is align-self: start, so it grows to its
   own text and nothing below it moves. The card's min-height still keeps a one-line entry
   from collapsing. */
.matter-preview-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 12;
  line-clamp: 12;
}

.account-dossier-main .matter-list h4 {
  margin-bottom: var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.account-dossier-main .matter-list article:first-child .matter-preview-text {
  max-width: 64ch;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* Placed after the :first-child rule on purpose. Both selectors have the same specificity,
   so the later one wins: the earlier placement meant font-weight 500 and max-width 64ch
   kept applying and the summary stayed bold and half the width of its box. */
.matter-next-step .matter-preview-text,
.account-dossier-main .matter-list article.matter-next-step .matter-preview-text {
  display: block;
  max-width: none;
  overflow: visible;
  -webkit-line-clamp: none;
  line-clamp: none;
  white-space: pre-line;
  font-weight: 400;
}

.matter-next-step .matter-preview-text strong,
.account-dossier-main .matter-list article.matter-next-step .matter-preview-text strong {
  font-weight: 700;
}

.account-dossier-rail {
  position: sticky;
  top: 0;
  min-height: 100vh;
  padding: var(--space-6) var(--space-6) var(--space-10);
  border-left: 1px solid var(--color-line);
  background: var(--color-surface-subtle);
}

.dossier-rail-section {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}

.dossier-rail-section + .dossier-rail-section {
  padding-top: var(--space-6);
}

.dossier-rail-section h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-md);
}

.dossier-rail-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Only the actions beside a heading, never a link inside the heading itself: this rule
   used to match the anchor in "Stakeholders" too and drew that one heading a size
   smaller than the three around it. */
.dossier-heading-actions a {
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 700;
}

.dossier-product-summary > p {
  margin: 0;
  font-size: var(--text-sm);
}

.dossier-heading-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.dossier-heading-actions a,
.dossier-heading-actions button {
  border: 0;
  background: transparent;
  color: var(--color-accent-strong);
  cursor: pointer;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.2;
  padding: 0;
  text-decoration: none;
}

.dossier-heading-actions a:hover,
.dossier-heading-actions button:hover {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.dossier-heading-actions button:focus-visible {
  outline: 3px solid rgb(53 103 162 / 24%);
  outline-offset: 3px;
}

.dossier-product-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A bullet and an indent, so a product name reads as an item under the heading rather
   than as a heading of its own. The marker is drawn rather than listed, because the row
   is a flex line and list-item markers do not survive that. */
.dossier-product-list li {
  position: relative;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
}

.dossier-product-list li::before {
  position: absolute;
  top: var(--space-3);
  left: 0;
  color: var(--color-ink-soft);
  content: "•";
  line-height: inherit;
}

.dossier-product-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The name takes only its own width so the note icon stays beside it; the state keeps
   the far edge. */
.dossier-product-row > strong {
  flex: 0 1 auto;
}

.dossier-product-row > .rail-note + * {
  margin-left: auto;
}

.dossier-product-list li + li {
  border-top: 1px solid var(--color-line);
}

/* A rail of four boxes, every line in it bold, is a rail with no emphasis left. The
   names are the content here, not a heading over it. */
.dossier-product-list strong {
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: 400;
}

.dossier-product-row > span {
  flex: 0 0 auto;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

/* The note is out of the list until asked for. The icon is there on every product, filled
   in the accent when there is a note and faint when there is not, so which products have
   one reads down the column without opening anything. */
.rail-note {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.rail-note-icon {
  display: inline-grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-ink-soft);
  opacity: 0.55;
  cursor: pointer;
}

span.rail-note-icon {
  cursor: default;
}

.rail-note-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button.rail-note-icon:hover,
button.rail-note-icon:focus-visible,
.rail-note.is-open .rail-note-icon {
  background: var(--color-surface-subtle);
  color: var(--color-accent);
  opacity: 1;
}

/* A note that has been written stands out in the danger tone, on hover too (2026-09-29,
   Nico), so a filled one is told from an empty one at a glance. */
.rail-note.has-note .rail-note-icon,
.rail-note.has-note button.rail-note-icon:hover,
.rail-note.has-note button.rail-note-icon:focus-visible,
.rail-note.has-note.is-open .rail-note-icon {
  color: var(--color-danger);
  opacity: 1;
}

.rail-note.has-note .rail-note-icon svg path:first-child {
  fill: color-mix(in srgb, var(--color-danger) 16%, transparent);
}

/* Opens under the icon. The padding at its top is the bridge the pointer crosses from
   the icon into the popup, so it does not close on the way to the edit button. */
.rail-note-popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  display: none;
  width: min(17rem, calc(100vw - 2rem));
  padding-top: var(--space-1);
}

.rail-note-popup > * {
  position: relative;
}

.rail-note-popup::before {
  position: absolute;
  inset: var(--space-1) 0 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.12);
  content: "";
}

.rail-note:hover .rail-note-popup,
.rail-note:focus-within .rail-note-popup,
.rail-note.is-open .rail-note-popup {
  display: grid;
  gap: var(--space-2);
  padding: calc(var(--space-1) + var(--space-3)) var(--space-3) var(--space-3);
}

.rail-note-text {
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.rail-note-actions {
  display: flex;
  gap: var(--space-3);
}

.rail-note-edit,
.rail-note-save,
.rail-note-cancel {
  justify-self: start;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.rail-note-cancel {
  color: var(--color-ink-soft);
  font-weight: 400;
}

.rail-note-edit:hover,
.rail-note-save:hover,
.rail-note-cancel:hover {
  text-decoration: underline;
}

/* forms.css gives every control the full height; a three-line note in the rail sets its
   own. */
.rail-note-field {
  width: 100%;
  min-height: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: inherit;
  font-size: var(--text-xs);
  line-height: 1.45;
  resize: vertical;
}

.dossier-product-more {
  padding-top: var(--space-2);
}

.dossier-product-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.account-section-drawer-layer {
  position: fixed;
  inset: 0;
  z-index: var(--layer-drawer);
}

.drawer.account-section-drawer {
  width: min(75rem, calc(100vw - 2rem));
}

.account-section-drawer .drawer-header {
  padding: var(--space-5) var(--space-6);
}

.account-section-drawer .drawer-header h2 {
  margin-bottom: var(--space-1);
}

.account-section-drawer .drawer-header p {
  max-width: 62ch;
  margin: 0;
}

.account-section-drawer-body {
  padding: 0 var(--space-6) var(--space-8);
  overscroll-behavior: contain;
}

.account-section-drawer-body .overview-heading > div:first-child {
  display: none;
}

.account-section-drawer-body .overview-heading {
  justify-content: flex-end;
}

.account-section-drawer-body > section {
  display: grid;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-6) 0;
}

.account-section-drawer-body > section[hidden] {
  display: none;
}

.account-section-drawer-body > section > .overview-heading {
  justify-content: flex-end;
  margin: 0;
}

.account-section-drawer-body > section > .overview-heading > div:first-child {
  display: none;
}

.account-section-drawer-body .sprint-phase-list,
.account-section-drawer-body .sprint-items {
  gap: var(--space-3);
}

.account-section-drawer-body .account-opportunity {
  display: grid;
  gap: var(--space-5);
}

.account-section-drawer-body .overview-current .surface-header,
.account-section-drawer-body .overview-commercial .surface-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
}

.account-section-drawer-body #overview-opportunity-controls:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: end;
  margin-bottom: var(--space-5);
}

:is(.account-section-drawer-body, .account-section-drawer-actions) .opportunity-selector {
  width: 100%;
  min-width: 0;
}

/* The facts are one bar, not four cards: one frame, cells divided by hairlines, each a
   label over its value and only as tall as that. The hairlines are the frame's colour
   showing through a one-pixel gap, so they stay right however many cells fit a row. */
.account-section-drawer-body .overview-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 1px;
  margin: var(--space-5) 0 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-line);
}

.account-section-drawer-body .overview-current,
.account-section-drawer-body .overview-commercial {
  border-color: var(--color-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-surface) 92%, var(--color-surface-subtle)) 100%);
}

.account-section-drawer-body .overview-current {
  padding: var(--space-6);
}

.account-section-drawer-body .overview-current .surface-header {
  align-items: center;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.account-section-drawer-body .overview-current .surface-header h3 {
  max-width: 48rem;
  margin: 0;
  color: var(--color-ink);
  font-size: 1.25rem;
  letter-spacing: -0.025em;
}

.account-section-drawer-body #overview-opportunity-controls:not([hidden]) {
  margin: 0;
  padding-top: var(--space-5);
}

:is(.account-section-drawer-body, .account-section-drawer-actions) .opportunity-selector span {
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

:is(.account-section-drawer-body, .account-section-drawer-actions) .opportunity-selector select {
  min-height: 3rem;
  border-color: var(--color-line-strong);
  font-weight: 650;
}

.account-section-drawer-body .overview-facts > div {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
}

.account-section-drawer-body .overview-facts dt {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

.account-section-drawer-body .overview-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* The verbs belong to the facts above them, so they sit right under the bar rather than
   between two rules of their own. Archive ends the opportunity and goes to the far edge,
   away from the buttons someone is aiming for, as Cancel and Delete do in a Sprint. */
.account-section-drawer-body .overview-actions {
  align-items: center;
  margin-top: var(--space-4);
  padding-top: 0;
  border-top: 0;
}

.account-section-drawer-body .overview-actions > .account-archive-action {
  margin-left: auto;
}

.account-section-drawer-body .overview-commercial {
  padding: var(--space-6);
}

.account-section-drawer-body .overview-commercial .surface-header {
  align-items: center;
}

.account-section-drawer-body .overview-commercial .surface-header h3 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.account-section-drawer-body .overview-commercial .state-actions {
  justify-content: flex-end;
}

/* One list across the drawer: the product on the left, its state on the right, rows
   divided by hairlines. The section heading already says what it is, so the small-caps
   "Active products" above it stays for screen readers only. */
.account-section-drawer-body .commercial-summary-grid {
  display: block;
  margin-top: var(--space-2);
}

.account-section-drawer-body .commercial-summary-grid > div {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
}

.account-section-drawer-body .commercial-summary-grid h4 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.account-section-drawer-body .commercial-summary-grid .compact-list {
  gap: 0;
  border-top: 1px solid var(--color-line);
}

.account-section-drawer-body .commercial-summary-grid .compact-list li {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

.account-section-drawer-body .commercial-summary-grid .compact-list strong {
  font-weight: 600;
}

/* The opportunity as a record, the way the milestone panel reads: no frames, sections
   divided by one hairline, the name with its state right under it, the facts as one
   quiet row of label over value, then the verbs, then the products. */
.account-section-drawer-body .overview-current,
.account-section-drawer-body .overview-commercial {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.account-section-drawer-body .account-opportunity {
  gap: var(--space-6);
}

.account-section-drawer-body .overview-commercial {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.account-section-drawer-body .overview-current .opportunity-record-header {
  align-items: start;
  padding-bottom: 0;
  border-bottom: 0;
}

.account-section-drawer-body .opportunity-record-header .badge-row {
  justify-content: flex-start;
  margin-top: var(--space-2);
}

.account-section-drawer-body #overview-opportunity-controls:not([hidden]) {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
}

:is(.account-section-drawer-body, .account-section-drawer-actions) .opportunity-selector select {
  min-height: 2.25rem;
  font-weight: 600;
}

.account-section-drawer-body .overview-facts {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0;
  overflow: visible;
  border: 0;
  border-block: 1px solid var(--color-line);
  border-radius: 0;
  background: none;
}

.account-section-drawer-body .overview-facts > div {
  padding: 0;
  background: none;
}

.account-section-drawer-body .overview-facts dd {
  font-size: var(--text-sm);
  font-weight: 600;
}

.account-section-drawer-body .overview-facts dd a {
  color: var(--color-accent);
  text-decoration: none;
}

.account-section-drawer-body .overview-facts dd a:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.account-section-drawer-body .overview-facts dd a::after {
  content: " \2197";
}

.account-section-drawer-body .overview-facts .is-empty dd {
  color: var(--color-ink-soft);
  font-weight: 400;
}

.overview-fact-detail {
  display: block;
  margin-top: 0.125rem;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 400;
}

.account-section-drawer-body .overview-facts .is-late dd,
.account-section-drawer-body .overview-facts .is-late .overview-fact-detail {
  color: var(--color-danger);
}

.account-section-drawer-body .overview-commercial .surface-header > div:first-child {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.account-section-drawer-body .overview-commercial .surface-header h3 {
  font-size: var(--text-md);
}

.opportunity-products-count {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.account-section-drawer-body .commercial-summary-grid .compact-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-4);
  align-items: baseline;
}

.compact-list-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
  white-space: pre-line;
}

/* The theme draws a rule and padding above every surface; the panel's own header already
   ends in one, and the fact cells keep the bar's frame only. */
.account-section-drawer-body #account-opportunity {
  padding-top: 0;
}

.account-section-drawer-body #account-opportunity .overview-current {
  padding-top: 0;
  border-top: 0;
}

.account-section-drawer-body .overview-facts > div,
.account-section-drawer-body .overview-facts > div:nth-child(even) {
  border: 0;
}

@media (max-width: 48rem) {
  .account-section-drawer-body .overview-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dossier-next-step-copy {
  margin-bottom: var(--space-4);
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.35;
}

.dossier-rail-action {
  width: 100%;
}

.dossier-rail-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dossier-rail-list li + li {
  border-top: 1px solid var(--color-line);
}

/* Sits under the Stakeholders link, so it indents rather than restating the heading. */
.dossier-stakeholder-list {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}

.dossier-stakeholder-list:empty {
  display: none;
}

/* The rail names the people on a deal, grouped by where they came from. Matches the
   rail's own type size; the contact link inside inherits it. */
.dossier-stakeholders .dossier-rail-heading {
  align-items: baseline;
}

.dossier-stakeholders h2 a {
  color: inherit;
  text-decoration: none;
}

.dossier-stakeholders h2 a:hover {
  text-decoration: underline;
}

.dossier-stakeholder-groups {
  display: grid;
  gap: var(--space-5);
}

.dossier-stakeholder-group-heading {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dossier-stakeholder-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dossier-stakeholder-list li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-2);
  padding-left: var(--space-4);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 450;
  line-height: 1.4;
}

.dossier-stakeholder-who {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* The marks keep to their own column so they never wrap: a long name gives way instead,
   which is what a name is for. */
.dossier-stakeholder-marks {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: var(--space-1);
}

.dossier-stakeholder-list li::before {
  position: absolute;
  left: 0;
  content: "•";
}

.dossier-stakeholder-list .sprint-contact-link {
  text-decoration: none;
}

.dossier-stakeholder-list .sprint-contact-link:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

/* Who to ring first. A star rather than a word: "Hauptansprechpartner" is longer than
   most of the names it would follow, and this list is read at a glance. Hollow where it
   can be set and filled where it is, so the control and the fact look like one thing. */
.dossier-stakeholder-primary {
  flex: none;
  min-height: 0;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}

.dossier-stakeholder-primary.is-set {
  color: var(--color-accent-strong);
  opacity: 1;
}

/* Unset, it waits for the row to be looked at rather than offering a column of outlines
   beside every name. */
.dossier-stakeholder-list li:hover .dossier-stakeholder-primary,
.dossier-stakeholder-primary:focus-visible {
  opacity: 1;
}

.dossier-stakeholder-primary:hover {
  color: var(--color-accent-strong);
}

span.dossier-stakeholder-primary {
  cursor: default;
}

.account-contact-standing {
  text-align: right;
  white-space: nowrap;
}

.dossier-stakeholder-placement {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.dossier-stakeholder-remove {
  padding: 0 var(--space-1);
  border: 0;
  color: var(--color-ink-soft);
  background: transparent;
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}

.dossier-stakeholder-list li:hover .dossier-stakeholder-remove,
.dossier-stakeholder-remove:focus-visible {
  opacity: 1;
}

.dossier-stakeholder-remove:hover {
  color: var(--color-danger);
}

.stakeholder-picker-modal {
  width: min(34rem, calc(100vw - 4rem));
}

.stakeholder-pool-tabs {
  display: flex;
  margin-bottom: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.stakeholder-pool-tabs button {
  flex: 1 1 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  color: var(--color-ink-soft);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 650;
  cursor: pointer;
}

.stakeholder-pool-tabs button + button {
  border-left: 1px solid var(--color-line);
}

/* The chosen pool in the ink on the quiet grey, not blue (2026-09-29). */
.stakeholder-pool-tabs button[aria-pressed="true"] {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.stakeholder-candidates {
  display: grid;
  gap: var(--space-1);
  max-height: 22rem;
  margin-top: var(--space-3);
  overflow-y: auto;
}

.stakeholder-candidate {
  display: grid;
  gap: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.stakeholder-candidate:hover {
  border-color: var(--color-line);
  background: var(--color-surface-subtle);
}

.stakeholder-candidate span {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.dossier-rail-list a {
  display: flex;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 450;
  line-height: 1.4;
}

.dossier-rail-list a:hover,
.dossier-rail-list a:focus-visible {
  color: var(--color-accent-strong);
}

.account-identity-main {
  min-width: 0;
}

.account-identity-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.account-archived-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.account-overview {
  margin-top: var(--space-10);
}

.overview-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.overview-heading h2,
.overview-heading p {
  margin-bottom: 0;
}

.opportunity-selector {
  min-width: min(24rem, 42vw);
  margin: 0;
}

.opportunity-selector span {
  display: block;
  margin-bottom: var(--space-2);
}

.overview-state {
  min-height: 20rem;
  padding: var(--space-8);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.state-panel.overview-opportunity-empty {
  min-height: 0;
  padding: var(--space-5) var(--space-6);
  place-items: stretch;
  text-align: left;
}

.overview-opportunity-empty .state-content {
  display: flex;
  width: 100%;
  max-width: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  flex-wrap: wrap;
}

.overview-opportunity-empty h3,
.overview-opportunity-empty .state-content p {
  margin-bottom: 0;
}

.overview-opportunity-empty h3 {
  margin-bottom: var(--space-1);
}

.account-target-products-panel {
  width: 100%;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-muted);
}

.account-target-products-panel .surface-header {
  margin-bottom: var(--space-3);
}

.account-target-products-panel h3 {
  margin: 0;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
  gap: var(--space-6);
  align-items: start;
}

.overview-current,
.overview-matters,
.overview-commercial {
  min-width: 0;
}

.overview-commercial {
  grid-column: 1 / -1;
}

.overview-facts,
.commercial-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.overview-facts {
  margin: var(--space-5) 0;
}

.overview-facts > div,
.commercial-summary-grid > div {
  min-width: 0;
  padding: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.overview-facts > div:nth-child(even),
.commercial-summary-grid > div + div {
  border-left: 1px solid var(--color-line);
}

.overview-actions,
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.overview-actions {
  margin-top: var(--space-5);
}

.matter-list {
  display: grid;
  gap: var(--space-5);
}

.matter-list article:not(:first-of-type) {
  padding-top: var(--space-5);
}

.overview-prose {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* One line of a summary. A block of its own, because text-indent applies to the first
   line of a block and a wrapped point has to hang under its own text rather than under
   its bullet. The tiles clamp by rendered line and keep doing so: the clamp counts the
   lines inside the box, not the children of it. */
.prose-line {
  display: block;
}

/* The marker sits in the padding rather than in the text, so the first line and every
   line it wraps to start at the same place. A negative text-indent has to guess the
   marker's width and "• " is wider than any guess worth writing down.

   Taking it out of the flow with flex would align it too, and would also stop the tile
   clamping: -webkit-line-clamp counts lines of a block and gives up on a flex child.
   Measured, not assumed -- 113px either way here, 158px with flex. */
.prose-line.is-point {
  position: relative;
  padding-left: 1.1em;
}

/* "10." needs more room than "1." and both need more than a bullet. */
.prose-line.is-numbered {
  padding-left: 2em;
}

.prose-marker {
  position: absolute;
  top: 0;
  left: 0;
}

/* Every list drawn from text a person wrote -- milestone notes, the deal strategy, a
   sprint item's support text, prompts -- sets its markers the way Current Status and Pain
   Points do above: the marker at the left edge, the text 1.1em in after a bullet and 2em
   after a number, and every wrapped line starting where the first one did. A browser's
   own list indents the whole block and hugs the marker to the text, which read as a
   different thing on every page. */
.point-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: point;
}

.point-list > li {
  position: relative;
  padding-left: 1.1em;
}

ol.point-list > li {
  padding-left: 2em;
  counter-increment: point;
}

.point-list > li::before {
  position: absolute;
  top: 0;
  left: 0;
}

ul.point-list > li::before {
  content: "\2022";
}

ol.point-list > li::before {
  content: counter(point) ".";
}

/* An empty line separates two thoughts, and an empty block has no height of its own. */
.prose-line:empty {
  height: 0.55em;
}

.overview-drawer {
  width: min(38rem, calc(100vw - 4rem));
}

.summary-editor-drawer {
  width: min(46rem, calc(100vw - 2rem));
}

/* 30% narrower than the 56rem/78vw/90rem it was (2026-09-29, Nico); the side column keeps
   its 12-14rem. */
.drawer.milestone-note-drawer {
  width: clamp(39rem, 55vw, 63rem);
  max-width: calc(100vw - 2rem);
  grid-template-rows: auto minmax(0, 1fr);
}

.drawer-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.milestone-note-form {
  display: grid;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto;
}

.milestone-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 3.75rem;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

.milestone-action-row strong,
.milestone-action-row span {
  display: block;
}

/* The to-do reads as a line of text, not a heading: regular ink at body size. */
/* The to-do's words are a button that copies them: plain text, the copy cursor. */
.milestone-action-copy {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  text-align: left;
  cursor: copy;
}

.milestone-action-copy:hover strong {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.milestone-action-row strong {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.6;
}

.milestone-action-controls {
  display: flex;
  gap: var(--space-3);
  white-space: nowrap;
}

.milestone-action-controls .text-action {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

.milestone-action-controls .text-action:hover {
  color: var(--color-accent-strong);
}

.milestone-action-controls .is-on-hover {
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.milestone-action-row:is(:hover, :focus-within) .milestone-action-controls .is-on-hover {
  opacity: 1;
}

@media (hover: none) {
  .milestone-action-controls .is-on-hover {
    opacity: 1;
  }
}

.milestone-action-row span {
  margin-top: var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.milestone-action-row.is-overdue span {
  color: var(--color-danger);
  font-weight: 400;
}

.milestone-action-row.is-completed strong {
  color: var(--color-ink-soft);
  text-decoration: line-through;
}

.milestone-action-empty {
  margin: 0;
  padding: var(--space-4) 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.milestone-format-toolbar {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--color-line);
  background: var(--color-surface-subtle);
}

.milestone-format-toolbar button {
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.milestone-format-toolbar button:hover {
  border-color: var(--color-line);
  color: var(--color-ink);
  background: var(--color-surface);
}

.milestone-format-toolbar button:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: -0.125rem;
}

.milestone-format-toolbar button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.milestone-format-toolbar button:is(:hover, :focus-visible):disabled {
  border-color: transparent;
  color: var(--color-ink-soft);
  background: transparent;
}

.milestone-format-toolbar svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.milestone-format-toolbar circle {
  fill: currentColor;
  stroke: none;
}

.milestone-toolbar-divider {
  width: 1px;
  height: 1.5rem;
  margin-inline: var(--space-1);
  background: var(--color-line);
}

/* The milestone as a record: a reading column and a column of facts beside it. The
   reading column is held to a line length that reads; the facts column is narrow and
   quiet, the way B3's attribute panel is. Everything a seller checks first -- state,
   date, how many todos are open and late -- is in the first screen without scrolling. */
.milestone-note-body {
  display: grid;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5) var(--space-6) var(--space-6);
}

/* The side column -- Links, Documents -- narrower, the notes and to-dos wider
   (2026-09-29, Nico). */
.milestone-record {
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 14rem);
  align-content: start;
  align-items: start;
  gap: var(--space-8);
}

/* The to-dos and notes fill their column up to the side column: a cap here left a wide
   empty band between the two once the window grew (2026-09-29, Nico). */
.milestone-record-main {
  display: grid;
  min-width: 0;
  gap: var(--space-6);
}

.milestone-record-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-2) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.milestone-record-status {
  padding: 0.125rem var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 650;
}

.milestone-record-status.is-completed {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.milestone-record-when.is-late {
  color: var(--color-danger);
  font-weight: 650;
}

.milestone-record-when.is-today {
  color: var(--color-warning);
  font-weight: 650;
}

.milestone-record-heading,
.milestone-action-items > header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.milestone-record-heading h3,
.milestone-action-items h3 {
  margin: 0;
  font-size: var(--text-sm);
}

.milestone-record-heading .text-action {
  margin-left: auto;
}

.milestone-action-items {
  display: grid;
}

.milestone-action-summary {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.milestone-action-summary .is-late {
  color: var(--color-danger);
  font-weight: 650;
}

.milestone-action-summary span + span::before {
  margin-right: var(--space-2);
  color: var(--color-line-strong);
  content: "·";
}

.milestone-action-items-list {
  display: grid;
  border-top: 1px solid var(--color-line);
}

/* Reading and writing are two states of the same section. */
.milestone-note-form[data-mode="read"] :is(.milestone-note-input, .milestone-note-footer) {
  display: none;
}

.milestone-note-form[data-mode="edit"] :is(#milestone-note-preview, #milestone-note-edit-toggle) {
  display: none;
}

/* No notes yet (2026-09-29, Nico): the field and Submit stand open while reading, the empty
   preview gives way to them; Submit shows only then. */
/* The id keeps it above the "hide the field while reading" rule, whose :is() holds an id. */
#milestone-note-form[data-mode="read"] .milestone-note-editor.is-composing .milestone-note-input {
  display: block;
}

.milestone-note-editor.is-composing #milestone-note-preview,
.milestone-note-submit {
  display: none;
}

#milestone-note-form[data-mode="read"] .milestone-note-editor.is-composing .milestone-note-submit {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--space-2);
}

/* The pencil beside "Notes": a quiet icon, as beside the milestone's title. */
.milestone-note-edit-icon {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  background: none;
  cursor: pointer;
}

.milestone-note-edit-icon:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

/* The pencil shows while the notes are pointed at (2026-09-29, Nico). */
.milestone-note-edit-icon {
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.milestone-note-editor:is(:hover, :focus-within) .milestone-note-edit-icon {
  opacity: 1;
}

@media (hover: none) {
  .milestone-note-edit-icon {
    opacity: 1;
  }
}

.milestone-note-edit-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The notes take the whole width of their column (2026-09-29, Nico). */
.milestone-note-preview,
.milestone-note-preview .minutes-document {
  max-width: none;
  overflow-wrap: anywhere;
}

.milestone-note-preview > :first-child {
  margin-top: 0;
}

.milestone-note-preview > :last-child {
  margin-bottom: 0;
}

.milestone-note-preview :is(p, li) {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.milestone-note-preview p {
  white-space: normal;
}

.milestone-note-preview .muted {
  margin: 0;
  color: var(--color-ink-soft);
}

.milestone-note-input {
  overflow: hidden;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  transition: border-color var(--motion-fast) ease-out, box-shadow var(--motion-fast) ease-out;
}

.milestone-note-input:focus-within {
  border-color: var(--color-focus);
  box-shadow: 0 0 0 1px var(--color-focus);
}

.milestone-note-count {
  margin: 0 0 0 auto;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

#milestone-note-text {
  min-height: 12rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  line-height: 1.6;
  resize: vertical;
}

#milestone-note-text:focus {
  outline: 0;
}

/* The facts column: labels over values, small and grey above ink, so it is scanned in a
   glance and never competes with the reading column. */
.milestone-record-facts {
  display: grid;
  gap: var(--space-5);
  padding-left: var(--space-6);
  border-left: 1px solid var(--color-line);
}

/* A hairline between the parts of the side column: the account's Links, the Documents. */
.milestone-record-links + .milestone-record-files {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

/* "Documents" reads as "Links" beside it does (2026-09-29, Nico). */
.milestone-record-files .files-header h3 {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

/* The account's Revic and Glean (2026-09-29): the mark and the name, a link in the ink; one
   still to add greyed, a click away from its field. */
.milestone-record-links {
  display: grid;
  gap: var(--space-2);
}

.milestone-record-links h3 {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 650;
}

.milestone-links-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.milestone-link-open {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.75rem;
  padding: 0;
  border: 0;
  color: var(--color-ink);
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  text-decoration: none;
  cursor: pointer;
}

.milestone-link-open svg {
  width: 1rem;
  height: 1rem;
  flex: none;
}

a.milestone-link-open:hover span,
button.milestone-link-open:not(:disabled):hover span {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.milestone-link.is-missing .milestone-link-open {
  color: var(--color-ink-muted);
}

.milestone-link.is-missing .milestone-link-open svg {
  opacity: 0.45;
}

.milestone-link.is-editing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.milestone-link-field {
  flex: 1 1 12rem;
  min-width: 0;
}

/* Below this the two columns would squeeze the reading one; the facts go on top. */
@media (max-width: 60rem) {
  .milestone-record {
    grid-template-columns: minmax(0, 1fr);
  }

  .milestone-record-facts {
    padding-top: var(--space-5);
    padding-left: 0;
    border-top: 1px solid var(--color-line);
    border-left: 0;
  }
}

/* The text, its tools and Save sit together at the top of the window; the field no
   longer stretches to the drawer's foot (2026-09-29, Nico). */
.summary-editor-form {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-rows: auto auto;
  align-content: start;
}

.summary-editor-body {
  display: grid;
  overflow-y: auto;
  min-height: 0;
  padding: var(--space-5) var(--space-6);
  gap: var(--space-3);
}

.summary-format-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.summary-format-toolbar .summary-format-dot {
  fill: currentColor;
  stroke: none;
}

#summary-editor-text {
  min-height: 14rem;
  padding-block: var(--space-3);
  margin: 0;
  line-height: 1.6;
  resize: vertical;
}

.summary-editor-meta {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-5);
}

.summary-editor-meta p {
  margin: 0;
}

#summary-editor-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.account-contacts,
.account-org-chart,
.account-prospect-sprint,
.account-deal-sprint {
  display: grid;
  min-width: 0;
  gap: var(--space-5);
  margin-top: var(--space-10);
  scroll-margin-top: var(--space-8);
}

.account-org-chart {
  display: grid;
  min-width: 0;
  gap: var(--space-6);
  margin-top: var(--space-10);
  scroll-margin-top: var(--space-8);
}

.org-chart-heading {
  align-items: end;
}

.org-chart-heading .muted {
  max-width: 68ch;
}

.org-chart-toolbar {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto;
  gap: var(--space-4);
  align-items: end;
}

.org-chart-toolbar label {
  display: grid;
  gap: var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 650;
}

.org-chart-view-switch {
  display: flex;
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface-subtle);
}

.org-chart-view-switch button {
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-soft);
  font-weight: 700;
  cursor: pointer;
}

.org-chart-view-switch button[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-ink);
  box-shadow: 0 2px 8px rgb(28 37 43 / 10%);
}

.org-chart-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(19rem, 0.8fr);
  gap: var(--space-6);
  align-items: start;
}

.org-chart-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  min-width: 0;
}

@media (max-width: 54rem) {
  .org-chart-toolbar,
  .org-chart-workspace,
  .org-chart-map {
    grid-template-columns: 1fr;
  }

  .org-chart-view-switch button {
    flex: 1;
  }
}

.org-library-title {
  align-items: end;
}

.org-library-toolbar {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) auto;
  gap: var(--space-4);
  align-items: end;
  max-width: 72rem;
  margin-bottom: var(--space-6);
}

.org-library-toolbar label {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 650;
}

.org-library-toolbar input,
.org-library-toolbar .secondary-button {
  height: var(--control-height);
  min-height: var(--control-height);
  align-self: end;
}

.org-library-workspace {
  display: block;
}

.org-library-map {
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

@media (max-width: 62rem) {
  .org-library-workspace {
    display: block;
  }
}

@media (max-width: 42rem) {
  .org-library-toolbar {
    grid-template-columns: 1fr;
  }
}

.account-prospect-sprint > *,
.account-deal-sprint > * {
  min-width: 0;
}

.sprint-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  align-items: start;
}

.sprint-summary .sprint-facts,
.sprint-summary .sprint-briefing {
  grid-column: 1 / -1;
}

.sprint-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--color-line);
}

.sprint-facts > div {
  min-width: 0;
  padding: var(--space-4) var(--space-3) 0 0;
}

.sprint-facts dt,
.sprint-item-meta {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.deal-sprint-controls {
  display: grid;
  grid-template-columns: minmax(20rem, 30rem) minmax(14rem, 22rem) auto;
  gap: var(--space-3);
  align-items: end;
  width: min(100%, 70rem);
}

.deal-sprint-controls label {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 700;
}

.deal-sprint-controls label[hidden] {
  display: none;
}

.deal-sprint-controls > button {
  min-height: var(--control-height);
  align-self: end;
  justify-self: start;
}

.deal-sprint-context-host:empty,
.deal-sprint-controls[hidden] {
  display: none;
}

/* In the Sprint's own header the selects are one quiet context line above the action row:
   label beside its select, each select only as wide as what it names. */
.sprint-phase > header:has(> .deal-sprint-controls:not([hidden])) {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}

.sprint-phase > header > .deal-sprint-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-6);
  width: auto;
}

/* Hidden means gone: the rule above outranks the plain [hidden] rule, and an empty flex
   row left in the header took the header's gap with it and pushed the buttons in. */
.sprint-phase > header > .deal-sprint-controls[hidden] {
  display: none;
}

.sprint-phase > header > .deal-sprint-controls label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  font-size: var(--text-sm);
  font-weight: 600;
}

.sprint-phase > header > .deal-sprint-controls label[hidden] {
  display: none;
}

/* The select says which Sprint is shown on its own ("Beiersdorf – Deal Sprint · Active"),
   so its label is for screen readers only. */
.sprint-phase > header > .deal-sprint-controls label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sprint-phase > header > .deal-sprint-controls select {
  width: auto;
  min-width: 0;
  max-width: min(100%, 34rem);
  min-height: 2.25rem;
  padding-block: var(--space-1);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.sprint-item.is-overdue .sprint-item-meta {
  color: var(--color-danger);
}

.sprint-item.is-due-today .sprint-item-meta,
.sprint-item.is-waiting-dependency .sprint-item-meta {
  color: var(--color-warning);
}

.sprint-briefing,
.sprint-item p {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.sprint-phase-list,
.sprint-items {
  display: grid;
  gap: var(--space-4);
}

.sprint-phase-body {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-4);
}

.sprint-completed-items[hidden] {
  display: none;
}

.sprint-phase > header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  align-items: flex-start;
}

/* Same three columns as the todos nested inside it: date, body, controls. A grid track
   cannot be widened by its content the way flex-basis: auto could. */
.sprint-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

/* The todos are cards in their own right, not a footnote to the milestone, so they run
   the full width of it rather than starting under its text column. */
.sprint-item > .sprint-child-actions {
  grid-column: 1 / -1;
}

.sprint-phase > header {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.sprint-phase > header h4 {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.35;
}

.sprint-phase-summary {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.sprint-phase-title {
  display: grid;
  gap: var(--space-1);
}

.sprint-phase-controls,
.sprint-completed-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* The row has to span the header, or margin-left: auto on the delete button has no free
   space to push into and the whole group just sits left. */
.sprint-phase-controls {
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
}

/* Whichever of the pair comes first takes the push; the second follows it, so Cancel and
   Delete stay together at the edge whether or not both are offered. */
.sprint-phase-controls > .sprint-cancel-action,
.sprint-phase-controls > .sprint-delete-action {
  margin-left: auto;
}

.sprint-phase-controls > .sprint-cancel-action + .sprint-delete-action {
  margin-left: 0;
}

/* The two that end the Sprint stay out of sight until the row is under the pointer or
   one of its buttons has focus: they are the rarest thing done here and the worst to hit
   by mistake. They keep their space, so nothing in the row moves when they appear. Only
   where there is a pointer to hover with; on a touch screen they stay visible. */
@media (hover: hover) {
  .sprint-phase-controls > .sprint-cancel-action,
  .sprint-phase-controls > .sprint-delete-action {
    opacity: 0;
    transition: opacity 120ms ease;
  }

  .sprint-phase-controls:hover > .sprint-cancel-action,
  .sprint-phase-controls:hover > .sprint-delete-action,
  .sprint-phase-controls:focus-within > .sprint-cancel-action,
  .sprint-phase-controls:focus-within > .sprint-delete-action {
    opacity: 1;
  }
}

.sprint-empty-phase-controls {
  justify-content: flex-end;
}

.sprint-completed-group {
  align-items: flex-start;
  flex-direction: column;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-line);
}

.sprint-completed-items {
  width: 100%;
}

.sprint-item {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-left: 0.25rem solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

/* Every box in the column is one size, whatever it says. The height is what a box needs
   when its bottom line wraps ("19 days late", "since Sep 23"); a box whose line does not
   wrap centres in the same height instead of standing shorter than its neighbours. */
.sprint-item-date {
  display: flex;
  flex: 0 0 5rem;
  width: 5rem;
  min-height: 5.25rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: var(--space-2) var(--space-1);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
}

.sprint-item-date-day {
  font-size: var(--text-lg);
  font-weight: 800;
}

.sprint-item-date-month {
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* The rail keeps a fixed width so every row lines up. Long distances ("365 days late")
   wrap inside it rather than pushing past the edge. */
.sprint-item-date-distance {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 650;
  letter-spacing: 0.01em;
  white-space: normal;
}

/* Late and today are the two states worth interrupting for; everything else stays calm. */
.sprint-item-date.is-late {
  border-color: color-mix(in srgb, var(--color-danger) 65%, transparent);
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.sprint-item-date.is-today {
  border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.sprint-item-date.is-settled,
.sprint-item-date.has-no-date {
  border-color: var(--color-line);
  color: var(--color-ink-soft);
  background: transparent;
}

.sprint-item-date.has-no-date {
  font-size: var(--text-xs);
  font-weight: 650;
}

/* Completed: a very light green, enough to tell done from skipped at a glance and no more.
   The words stay the settled grey. */
.sprint-item-date.is-completed {
  border-color: color-mix(in srgb, var(--color-success) 45%, transparent);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
}

/* A planned milestone without a date is a blank waiting to be filled: the blue of a dated
   one, so it reads as the same kind of thing, with a dashed edge for the missing day. Not
   amber or red -- nothing is due, so nothing is late. Done without a date stays grey. */
.sprint-item-date.has-no-date:not(.is-settled) {
  border: 1px dashed color-mix(in srgb, var(--color-accent) 55%, transparent);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}

/* Open: the dated box's shape and lines, in neutral grey rather than the accent, since
   there is no date in it. Amber arrives only with a check-in that has come round. */
.sprint-item-date.is-open {
  border-color: var(--color-line-strong);
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
}

.sprint-item-date.is-open.is-today {
  border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

/* The mark stands where the day number stands, at the number's line height, so an open
   box and a dated one are the same height. */
.sprint-item-date-mark {
  display: grid;
  height: calc(var(--text-lg) * 1.15);
  place-items: center;
}

.sprint-item-date-mark svg {
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.sprint-item-support-label {
  font-weight: 750;
}

.sprint-item-main {
  flex: 1 1 auto;
  min-width: 0;
}

.sprint-item-main[role="button"] {
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.sprint-item-main[role="button"]:hover h5 {
  color: var(--color-accent-strong);
}

.sprint-item-main[role="button"]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0.25rem;
}

.sprint-item-heading-row {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.sprint-item-heading-row h5 {
  flex: 1 1 20rem;
}

.sprint-item.is-completed {
  border-color: color-mix(in srgb, var(--color-success) 42%, var(--color-success-line));
  border-left-width: 1px;
  background: var(--color-success-soft);
}

.sprint-item.is-skipped {
  border-left-color: var(--color-success);
}

.sprint-item.is-completed h5 {
  color: color-mix(in srgb, var(--color-ink) 86%, var(--color-success));
}

.sprint-item.is-completed .sprint-item-actions .secondary-button {
  border-color: color-mix(in srgb, var(--color-success) 36%, var(--color-success-line));
  background: var(--color-surface);
}

.sprint-item.is-blocked {
  border-left-color: var(--color-danger);
}

/* Arriving at a row from another page (markArrival): a wash of the accent that reaches a
   little past the row on every side -- a shadow, so nothing moves -- holds while the
   scroll settles, then fades out. Rounded, so it reads as a highlight laid over the row
   rather than a box drawn round it. The scroll leaves room above the row. */
.catalog-row,
.competitor-entry {
  scroll-margin-top: var(--space-10);
}

.is-arriving {
  border-radius: var(--radius-md);
  animation: row-arrival 2.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes row-arrival {
  0%,
  45% {
    background-color: color-mix(in srgb, var(--color-accent) 11%, var(--color-surface));
    box-shadow: 0 0 0 var(--space-3)
      color-mix(in srgb, var(--color-accent) 11%, var(--color-surface));
  }

  100% {
    background-color: transparent;
    box-shadow: 0 0 0 var(--space-3) transparent;
  }
}

/* Focus came with the arrival, not from the keyboard: no ring until a key is pressed. */
[data-arrived]:focus {
  outline: none;
}

/* A product's name in the rail leads to the catalogue. It reads as the name it was, and
   says it is a link only under the pointer. */
/* A product's (or competitor's) name in the rail leads to its page, and reads as a link:
   blue at rest, underlined under the pointer. */
.dossier-product-link {
  color: var(--color-accent);
  text-decoration: none;
}

.dossier-product-link:hover,
.dossier-product-link:focus-visible {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* The item a link brought the reader to (a to-do from Today, a milestone): a faint ring and a
   light wash in the focus hue over the row, rounded, held a moment and then faded away
   (2026-09-29; before: a thick outline). The wash is an inset shadow, so the row keeps its
   own background underneath; the row is reached by script, not by Tab, so the browser's
   focus ring stays off it. */
/* The highlight's own hue: the focus colour's clear tone, but not a focus indicator -- the
   keyboard's ring stays the solid one in reset.css. */
:is(.sprint-item, .sprint-child-action) {
  --scroll-target-hue: var(--color-focus);
}

@keyframes sprint-scroll-target {
  0%,
  45% {
    box-shadow:
      inset 0 0 0 100vmax color-mix(in srgb, var(--scroll-target-hue) 9%, transparent),
      0 0 0 1px color-mix(in srgb, var(--scroll-target-hue) 32%, transparent),
      0 0 0 5px color-mix(in srgb, var(--scroll-target-hue) 8%, transparent);
  }

  100% {
    box-shadow:
      inset 0 0 0 100vmax transparent,
      0 0 0 1px transparent,
      0 0 0 5px transparent;
  }
}

:is(.sprint-item, .sprint-child-action).is-scroll-target {
  border-radius: var(--radius-md);
  outline: 0;
  animation: sprint-scroll-target 2.4s ease-out;
}

/* A to-do's glow reaches past its text on both sides (Nico, 2026-09-29: more room on the
   left); the negative margin keeps the text where it was. */
.sprint-child-action.is-scroll-target {
  margin-inline: calc(-1 * var(--space-3));
  padding-inline: var(--space-3);
}

:is(.sprint-item, .sprint-child-action)[tabindex="-1"]:focus {
  outline: 0;
}

@media (prefers-reduced-motion: reduce) {
  :is(.sprint-item, .sprint-child-action).is-scroll-target {
    animation: none;
    box-shadow:
      inset 0 0 0 100vmax color-mix(in srgb, var(--scroll-target-hue) 9%, transparent),
      0 0 0 1px color-mix(in srgb, var(--scroll-target-hue) 32%, transparent);
  }
}

.sprint-item h5,
.sprint-item p {
  margin: 0 0 var(--space-2);
}

.sprint-item h5 {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.35;
}

.sprint-item-support {
  width: 100%;
  max-width: none;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* The generated prose lists what to ask about. It is a block now rather than one paragraph,
   so the lines it names can stand as a list the reader works down. */
.sprint-item-support > p {
  margin: 0;
}

.sprint-item-support > p + p,
.sprint-item-support > .sprint-item-support-list {
  margin-top: var(--space-2);
}

.sprint-item-support-list {
  margin: 0;
}

.sprint-item-support-list li + li {
  margin-top: var(--space-1);
}

/* The width and indent here were flex-era arithmetic that reserved room for the date rail
   beside the group. The grid row places it, and the todos fill the milestone's width. */
.sprint-child-actions {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.sprint-child-action-list {
  display: grid;
  gap: var(--space-2);
}

/* The heading and the toggle share the line a closed milestone folds down to, so the
   fold costs no height of its own. */
.sprint-child-actions-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  justify-content: space-between;
}

.sprint-child-actions-toggle {
  flex: none;
}

.sprint-child-actions-heading {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A plain row: no card around it and no colour behind it. The tickbox already says
   where one to-do ends and the next begins, and a list of boxed panels inside a boxed
   milestone read as a stack of frames rather than as the work. */
.sprint-child-action {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-2) 0;
}

.sprint-child-action h6 {
  margin: 0 0 var(--space-1);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.4;
}

.sprint-child-action.is-completed h6 {
  color: var(--color-ink-soft);
  text-decoration: line-through;
}

.sprint-child-action-main {
  min-width: 0;
}

/* The box that leads a to-do. It sits on the first line of the title rather than in the
   middle of the row, so a title running to three lines does not drag it down with it. */
.sprint-action-tick {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.6rem;
}

/* forms.css gives every input the full control height. A tickbox is not a text field. */
.sprint-action-tick input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: none;
  accent-color: var(--color-accent);
  cursor: pointer;
}

.sprint-action-tick input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* The date, said in one line instead of a block: "26 Sep · in 5 days". */
.sprint-item-due {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2em;
  padding: 0.05rem 0.4rem;
  border-radius: var(--radius-xs, 0.25rem);
  background: color-mix(in srgb, var(--color-ink) 7%, transparent);
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.sprint-item-due.is-today {
  background: color-mix(in srgb, var(--color-warning) 22%, transparent);
  color: color-mix(in srgb, var(--color-warning) 70%, var(--color-ink));
}

.sprint-item-due.is-late {
  background: color-mix(in srgb, var(--color-danger) 18%, transparent);
  color: var(--color-danger);
}

.sprint-item-due.is-settled {
  background: transparent;
  padding-left: 0;
  color: var(--color-ink-soft);
  font-weight: 400;
}

.sprint-child-action-controls {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

.sprint-item-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Five icons on every row is five things to read before the work. They are all
   secondary -- the row is the milestone or the to-do, not the buttons on it -- so they
   step back until the pointer is on the tile they belong to.

   Each icon fades in place rather than the whole row collapsing. The space stays
   reserved: a row that changes width when the pointer arrives
   moves the thing being aimed at.
   Hover only where there is a pointer. On a touch screen there is no hover to wait for,
   so nothing hides; :focus-within brings them back for the keyboard, and is-dragging
   keeps the grip visible when the pointer has left the tile it is carrying. */
@media (hover: hover) and (pointer: fine) {
  .sprint-item > .sprint-item-actions > *,
  .sprint-child-action > .sprint-child-action-controls {
    opacity: 0;
    transition: opacity var(--motion-fast) ease;
  }

  .sprint-item:hover > .sprint-item-actions > *,
  .sprint-item:focus-within > .sprint-item-actions > *,
  .sprint-item.is-dragging > .sprint-item-actions > *,
  .sprint-child-action:hover > .sprint-child-action-controls,
  .sprint-child-action:focus-within > .sprint-child-action-controls,
  .sprint-child-action.is-dragging > .sprint-child-action-controls {
    opacity: 1;
  }

  /* Invisible is not clickable. Focus still reaches them, which is what brings them
     back, because pointer-events says nothing about the keyboard. */
  .sprint-item:not(:hover):not(:focus-within):not(.is-dragging) > .sprint-item-actions > *,
  .sprint-child-action:not(:hover):not(:focus-within):not(.is-dragging)
    > .sprint-child-action-controls {
    pointer-events: none;
  }

  .account-identity-header .quiet-icon-action {
    opacity: 0;
    transition: opacity var(--motion-fast) ease;
  }

  .account-identity-header:hover .quiet-icon-action,
  .account-identity-header:focus-within .quiet-icon-action {
    opacity: 1;
  }

  .account-identity-header:not(:hover):not(:focus-within) .quiet-icon-action {
    pointer-events: none;
  }
}

.sprint-icon-action {
  position: relative;
  display: inline-grid;
  width: 2.5rem;
  min-height: 2.5rem;
  flex: 0 0 auto;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--color-ink-soft);
  background: transparent;
  cursor: pointer;
}

.sprint-icon-action:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.sprint-icon-action:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0.125rem;
}

/* The fill sat on a card that already has its own tint, and because this rule follows the
   hover rule at equal weight it also swallowed the hover state. Colour alone now, so the
   button still reads as the primary one and answers a pointer. */
.sprint-icon-action:is(.is-start, .is-activate) {
  color: var(--color-accent-strong);
}

.sprint-icon-action.is-delete {
  color: var(--color-danger);
}

.sprint-icon-action.is-delete:hover {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.state-actions > .sprint-delete-action {
  margin-inline-start: var(--space-2);
}

.sprint-delete-modal {
  width: min(32rem, calc(100vw - 4rem));
}

.sprint-delete-modal h2 {
  margin-top: 0;
}

.sprint-delete-note {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-5) 0;
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-danger) 25%, var(--color-danger-line));
  border-radius: var(--radius-control);
  color: var(--color-ink-soft);
  background: var(--color-danger-soft);
  line-height: 1.5;
}

.sprint-delete-note strong {
  color: var(--color-ink);
}

.sprint-icon-action.is-skip,
.sprint-icon-action.is-pause,
.sprint-icon-action.is-reopen,
.sprint-icon-action.is-dependency {
  color: var(--color-ink-soft);
}

.sprint-icon-action svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.sprint-icon-action::after {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  z-index: 1;
  width: max-content;
  max-width: 12rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-surface);
  background: var(--color-ink);
  box-shadow: var(--shadow-overlay);
  content: attr(data-tooltip);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.25rem);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}

.sprint-icon-action:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .sprint-icon-action::after {
    transition: none;
  }
}

.work-modal {
  width: min(46rem, calc(100vw - 4rem));
}

.account-contacts > * {
  min-width: 0;
  max-width: 100%;
}

.account-section-nav {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}

.account-section-nav a {
  padding: var(--space-3) 0;
  color: var(--color-ink-soft);
  font-weight: 700;
  text-decoration: none;
}

.account-section-nav a:hover,
.account-section-nav a:focus-visible {
  color: var(--color-accent-strong);
}

.account-contact-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem);
  gap: var(--space-4);
  align-items: end;
}

.account-contact-toolbar label,
.account-contact-toolbar input,
.account-contact-toolbar select {
  margin: 0;
}

@media (max-width: 42rem) {
  .drawer.milestone-note-drawer {
    width: 100%;
    max-width: 100%;
  }

  .milestone-note-body {
    padding-inline: var(--space-4);
  }

  #milestone-note-text {
    font-size: 1rem;
  }
}

.drawer-form {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.drawer-form label {
  margin: 0;
}

.form-span-2 {
  grid-column: 1 / -1;
}

@media (max-width: 75rem) {
  .overview-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .opportunity-selector {
    min-width: min(30rem, 100%);
  }

  .overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .overview-commercial {
    grid-column: auto;
  }

  .deal-sprint-controls {
    grid-template-columns: minmax(18rem, 1fr) minmax(14rem, 0.75fr) auto;
  }

}

@media (max-width: 48rem) {
  .deal-sprint-controls {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
  }

  .deal-sprint-controls > button {
    width: 100%;
  }
}

@media (max-width: 75rem) {
  .account-identity-header {
    grid-template-columns: 1fr;
  }

  .account-identity-actions {
    justify-content: flex-start;
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
}

.form-grid > .form-grid-wide {
  grid-column: 1 / -1;
}

.component-column {
  display: grid;
  align-content: start;
  gap: var(--space-6);
}

.icon-button.mobile-menu-button {
  display: none;
}

@media (max-width: 48rem) {
  .shell-nav {
    z-index: var(--layer-drawer);
    width: min(19rem, calc(100vw - 3rem));
    /* Slid in from the left, the same hairline on its inner edge as a side panel. */
    border-right: 1px solid var(--color-line-strong);
    box-shadow: var(--shadow-overlay);
    transform: translateX(-105%);
    transition: transform var(--motion-standard) ease;
  }

  .app-shell.nav-open .shell-nav {
    transform: translateX(0);
  }

  .shell-main {
    margin-left: 0;
  }

  .shell-header {
    height: 4rem;
    padding: 0 var(--space-4);
  }

  .icon-button.mobile-menu-button {
    display: inline-grid;
  }

  .shell-content {
    padding: var(--space-8) var(--space-4) var(--space-10);
  }

  .page-title-row {
    display: grid;
  }

  .preview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-toolbar {
    grid-template-columns: 1fr;
  }

  .contact-toolbar {
    grid-template-columns: 1fr;
  }

  .partner-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .partner-directory {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
  }

  .partner-contact-panel {
    padding-left: 0;
  }

  .catalog-entry {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
  }
}

@media (max-width: 40rem) {
  .auth-page,
  .proof-page {
    width: min(100% - 1.75rem, 36.25rem);
    padding-top: var(--space-6);
  }

  .brand {
    grid-template-columns: 2rem auto;
    margin-bottom: 2.125rem;
  }

  .brand-mark {
    height: 2rem;
  }

  .brand-context,
  .session-state {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: var(--space-1);
  }

  .auth-panel,
  .proof-panel {
    padding: var(--space-6) var(--space-5);
  }

  .proof-heading {
    flex-direction: column;
  }

  .proof-grid {
    grid-template-columns: 1fr;
  }

  .proof-grid > div,
  .proof-grid > div:nth-child(even) {
    padding: var(--space-5) 0;
    border-left: 0;
  }

  .state-picker {
    align-items: stretch;
    flex-direction: column;
  }

  .user-name {
    display: none;
  }

  .app-shell.nav-open #nav-scrim {
    left: min(19rem, calc(100vw - 3rem));
  }

  .normal-list li {
    grid-template-columns: 1.5rem minmax(0, 1fr);
    padding-block: var(--space-3);
  }

  .normal-list li > :last-child {
    grid-column: 2;
  }
}

@media (max-width: 75rem) {
  .account-dossier-layout {
    grid-template-columns: minmax(0, 1fr) 17rem;
  }

  .account-dossier-main {
    padding-inline: var(--space-5);
  }

  .account-dossier-shell .account-identity-header,
  .account-dossier-shell .account-section-nav {
    padding-inline: var(--space-5);
  }

  .account-dossier-shell .account-identity-header {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .account-dossier-shell .account-identity-actions {
    grid-column: 2;
  }

  .account-dossier-main .overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-dossier-main .overview-matters {
    grid-column: auto;
  }
}

@media (max-width: 54rem) {
  .account-dossier-layout {
    display: flex;
    flex-direction: column;
  }

  .account-dossier-rail {
    position: static;
    order: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--space-6);
    min-height: 0;
    padding: var(--space-5);
    border-top: 1px solid var(--color-line);
    border-left: 0;
  }

  .dossier-rail-section + .dossier-rail-section {
    padding-top: 0;
  }
}

@media (max-width: 48rem) {
  .account-dossier-shell .shell-header {
    display: flex;
  }

  .account-dossier-shell .shell-content {
    padding: 0;
  }

  .account-dossier-shell .account-identity-header {
    grid-template-columns: 1fr;
    padding-top: var(--space-5);
  }

  .account-dossier-shell .account-identity-actions {
    grid-column: 1;
    grid-row: auto;
  }

  .account-dossier-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .dossier-rail-section + .dossier-rail-section {
    padding-top: var(--space-5);
  }

  .account-dossier-main .matter-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-dossier-main .matter-list article:first-child {
    grid-column: auto;
    padding: var(--space-5) var(--space-4) var(--space-5) calc(var(--space-4) + 0.25rem);
  }

  .account-dossier-main .matter-list article:nth-of-type(2) {
    padding-left: calc(var(--space-4) + 0.25rem);
  }

  .account-dossier-main .matter-list article:last-of-type {
    padding-right: var(--space-4);
    padding-left: 0;
    border-top: 1px solid var(--color-line);
    border-left: 0;
  }

  .account-dossier-main .matter-list .matter-preview {
    min-height: 0;
  }

  .summary-editor-drawer {
    width: 100vw;
  }

  .summary-editor-body {
    padding-inline: var(--space-4);
  }

  .drawer.account-section-drawer {
    width: 100vw;
  }

  .account-section-drawer .drawer-header,
  .account-section-drawer-body {
    padding-inline: var(--space-4);
  }

  .account-section-drawer-body .account-contact-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-section-drawer-body #overview-opportunity-controls:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-section-drawer-body .overview-current .surface-header,
  .account-section-drawer-body .overview-commercial .surface-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-section-drawer-body .table-shell {
    overflow-x: auto;
  }
}

.account-section-drawer-body .compact-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-2) 0;
}

.account-section-drawer-body #overview-pricing.muted {
  display: block;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

@media (max-width: 75rem) {
  .sprint-child-actions {
    margin-left: 0;
  }

}

/* Collapsed by default: five rows of contract vocabulary above every todo crowded out the
   work. Still one click away, because it says what evidence counts at completion. */

/* The list price reads as part of the name line, one step quieter: it answers a question
   about the product rather than naming it. */
.catalog-entry-price {
  margin-left: var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* The drawer is read top to bottom: a heading, the text under it, then air and a line
   before the next heading. One rule sets that rhythm, so no section keeps its own idea of
   how much room it needs and the gaps read the same all the way down. */
.product-explanation,
.product-notes {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-line);
}

.product-explanation:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.product-explanation > :last-child {
  margin-bottom: 0;
}

.product-explanation-heading {
  margin: 0 0 var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-explanation p {
  max-width: 78ch;
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.product-note-list {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.product-note {
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.product-note-body {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  line-height: 1.55;
  white-space: pre-wrap;
}

.product-note-meta {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.product-note-form {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.product-note-form textarea {
  width: 100%;
}

/* Links sit between the texts and the notes, under the same rule and heading. Each is
   its name as a link, with a quiet remove at the end of the row. */
.product-links {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--color-line);
}

.product-link-list {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-4);
  padding: 0;
  list-style: none;
}

.product-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.product-link::before {
  color: var(--color-ink-soft);
  content: "•";
}

.product-link-anchor {
  min-width: 0;
  color: var(--color-accent);
  overflow-wrap: anywhere;
  text-decoration: none;
}

.product-link-anchor:hover {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.product-link-remove {
  min-height: 0;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}

.product-link:hover .product-link-remove,
.product-link-remove:focus-visible {
  opacity: 1;
}

.product-link-remove:hover {
  color: var(--color-danger);
}

.product-link-form {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: start;
}

.product-link-form .error {
  grid-column: 1 / -1;
  margin: 0;
}

.product-explanation-list {
  max-width: 78ch;
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.product-explanation-list li + li {
  margin-top: var(--space-2);
}

/* Above the first heading, out of the way of the text it edits. */
.product-text-edit {
  display: block;
  margin: 0 0 0 auto;
}

.product-text-form {
  display: grid;
  gap: var(--space-2);
}

.product-text-form label {
  margin-top: var(--space-6);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-text-form label:first-child {
  margin-top: 0;
}

.product-text-form .field-note {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.product-text-form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* The line under a product name is a short list of what it does. No clamp: four or five
   points are the whole point of the row, and half of them would be worse than none. */
.catalog-entry-points {
  max-width: 120ch;
  margin: var(--space-1) 0 0;
  padding-left: var(--space-5);
  color: var(--color-ink-soft);
  line-height: 1.5;
}

.catalog-entry-points li + li {
  margin-top: var(--space-1);
}

/* The steps inside one action. A seller returning on the third day needs to see where
   they stopped, so a ticked step is struck through rather than hidden: what is done is
   part of the picture. Ticking every step is a place-marker, not an approval -- the
   action still carries its own status and its own evidence. */
.sprint-step-list {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  /* The same typography the description had before it became a list: the steps are the
     supporting text of the action, not a second heading. */
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
}

.sprint-step > label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  margin: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* Centred on the first line rather than on the whole block: a step that wraps to two
   lines would otherwise drop its box into the gap between them.

   min-height and padding are reset explicitly. forms.css gives every input the height of
   a text field, and a checkbox inside a box that tall renders its mark in the middle --
   which is why it appeared to float half a line under the text it belongs to. */
.sprint-step input {
  width: 0.95rem;
  min-width: 0;
  height: 0.95rem;
  min-height: 0;
  padding: 0;
  margin: calc((1.5em - 0.95rem) / 2) 0 0;
  border-radius: var(--radius-sm);
  flex: none;
}

.sprint-step.is-done > label > span {
  color: var(--color-ink-muted);
  text-decoration: line-through;
}

.sprint-step > label:has(input:disabled) {
  cursor: default;
}

/* The drawer per account. A pasted transcript keeps its line breaks and its own width,
   so it reads the way it was written; the list is newest first because that is the one
   you came back for. */
.account-note-form {
  display: grid;
  gap: var(--space-3);
  max-width: 60rem;
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.account-note-form label {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 650;
}

.account-note-form textarea {
  min-height: 14rem;
  resize: vertical;
  font: inherit;
  line-height: 1.55;
}

.account-note-form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.account-note-list {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.account-note {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.account-note-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.account-note-header h3 {
  margin: 0;
  font-size: var(--text-md);
}

.account-note-meta {
  margin: 0;
  margin-right: auto;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

/* pre, not p: a transcript is written in lines and stays in them. It wraps rather than
   scrolling sideways, and it is capped so one long paste cannot bury the next note. */
.account-note-body {
  max-height: 28rem;
  margin: 0;
  overflow-y: auto;
  color: var(--color-ink-soft);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The deal strategy: one text, written in place and kept current. It uses the note's
   measure and type so the two read alike; earlier wordings fold away under it. */
.deal-strategy-form {
  display: grid;
  gap: var(--space-3);
  max-width: 60rem;
  margin-bottom: var(--space-2);
}

/* The text sits inside the toolbar's frame, as the milestone note does. */
.deal-strategy-form textarea {
  width: 100%;
  min-height: 18rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  resize: vertical;
  font: inherit;
  line-height: 1.6;
}

.deal-strategy-form textarea:focus {
  outline: 0;
}

.deal-strategy-form .field-help {
  margin: 0;
}

/* The strategy is a reference to glance at, not a field: no frame, a title, headings in
   the overview's label style, and points with room between them. It still opens for
   editing when pressed, and says so only under the pointer. */
/* The hover tint is drawn with a spread shadow, not padding and negative margins, so it
   reaches past the text without moving it or widening the page. */
.deal-strategy-view {
  max-width: 52rem;
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
}

.deal-strategy-view.is-editable {
  cursor: text;
  transition: background var(--motion-fast) ease-out, box-shadow var(--motion-fast) ease-out;
}

.deal-strategy-view.is-editable:hover {
  background: var(--color-surface-subtle);
  /* The highlight reaches out at the sides only: spread upward it met the window's line
     and read as a box starting above the text (2026-09-29, Nico). */
  box-shadow:
    calc(-1 * var(--space-3)) 0 0 0 var(--color-surface-subtle),
    var(--space-3) 0 0 0 var(--color-surface-subtle);
}

.deal-strategy-document {
  overflow-wrap: anywhere;
}

.deal-strategy-document > :first-child {
  margin-top: 0;
}

.deal-strategy-document > :last-child {
  margin-bottom: 0;
}

.deal-strategy-document .document-title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.35;
}

/* Two levels, not three: the title, and then one bold for everything that labels what
   follows -- a heading on its own line and a point's opening label alike. A heading
   differs only by standing alone with room above it. */
.deal-strategy-document .document-heading {
  margin: var(--space-6) 0 var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.6;
}

.deal-strategy-document p {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* A table copied in from Glean or a document: hairlines, a quiet header row, cells aligned
   to their first line, and a horizontal scroll rather than a squeezed column when it is
   wider than the page. */
.deal-strategy-document .document-table-wrap {
  margin: var(--space-2) 0 var(--space-5);
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

.deal-strategy-document .document-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.deal-strategy-document .document-table th,
.deal-strategy-document .document-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.deal-strategy-document .document-table th {
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 650;
  white-space: nowrap;
}

.deal-strategy-document .document-table tbody tr:last-child td {
  border-bottom: 0;
}

/* The first column names the row ("Warum ändern", "Economic Buyer"), so it reads as a
   label and does not wrap into a sliver. */
.deal-strategy-document .document-table td:first-child {
  min-width: 9rem;
  font-weight: 600;
}

.deal-strategy-document .document-status {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 650;
  line-height: 1.6;
  white-space: nowrap;
}

.deal-strategy-document .document-status.is-validated {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.deal-strategy-document .document-status.is-assumed {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.deal-strategy-document .document-status.is-unknown {
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
}

.deal-strategy-document .point-list {
  margin-bottom: var(--space-3);
}

.deal-strategy-document .point-list > li {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.deal-strategy-document .point-list > li + li {
  margin-top: var(--space-2);
}

.deal-strategy-document .point-list > li::before {
  color: var(--color-ink-soft);
}

.deal-strategy-document .document-lead {
  color: var(--color-ink);
  font-weight: 700;
}

.deal-strategy-view.is-editable:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}

/* In the drawer the title is the drawer's own, so this heading row would hold nothing
   but space. Edit lives on the stamp line under the strategy instead. */
.account-section-drawer-body .deal-strategy-heading {
  display: none;
}

.deal-strategy-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.deal-strategy-meta .text-action {
  padding: 0;
}

.deal-strategy-status {
  margin: 0;
  font-size: var(--text-xs);
}

.deal-strategy-status:empty {
  display: none;
}

.deal-strategy-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.deal-strategy-history {
  max-width: 60rem;
  margin-bottom: var(--space-6);
}

.deal-strategy-history summary {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  cursor: pointer;
}

.deal-strategy-revisions {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.deal-strategy-revision {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
}

.deal-strategy-revision .account-note-meta {
  margin-bottom: var(--space-2);
}

.deal-strategy-documents-title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-md);
}

/* Building a sprint from a plan the seller already wrote. The preview is the point:
   what was read is shown before anything is created, so a file the reader did not
   understand is visible rather than silently half-imported. */
.sprint-import {
  display: grid;
  gap: var(--space-4);
  max-width: 60rem;
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.sprint-import h3 {
  margin: 0;
}

/* The one decision this panel carries besides the file: replace what is running, or set
   a second plan beside it. Stated rather than implied, and ticked by default because an
   update from the customer replaces the plan it updates. */
.sprint-import-replace {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
}

/* forms.css gives every input the full control height. A tickbox is not a text field. */
.sprint-import-replace input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: none;
  accent-color: var(--color-accent);
}

.sprint-import-file {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 650;
}

.sprint-import-summary {
  margin: 0 0 var(--space-2);
  font-weight: 650;
}

.sprint-import-notice {
  margin: 0 0 var(--space-2);
  color: var(--color-danger);
  font-size: var(--text-sm);
}

.sprint-import-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding-left: var(--space-5);
}

.sprint-import-hint {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.sprint-import-milestone {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-weight: 650;
  cursor: pointer;
}

/* forms.css gives every input the full control height. A tickbox is not a text field. */
.sprint-import-milestone input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: none;
  accent-color: var(--color-accent);
  align-self: center;
}

.sprint-import-title {
  flex: 1 1 auto;
}

/* Unticked: still readable, plainly not going to be created. */
.sprint-import-list li.is-excluded {
  opacity: 0.5;
}

.sprint-import-list li.is-excluded .sprint-import-title {
  text-decoration: line-through;
}

.sprint-import-date {
  color: var(--color-ink-soft);
  font-weight: 400;
}

.sprint-import-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* The account's history, drawn as a line with points on it. The line is a border on the
   list, and each point's dot sits on top of it, so the line runs behind the dots rather
   than between them and never breaks between two entries. */
.account-timeline {
  display: grid;
  gap: var(--space-4);
}

.timeline {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-4) 0 0;
  padding: 0 0 0 var(--space-6);
  border-left: 2px solid var(--color-line);
  list-style: none;
}

.timeline.is-preview {
  gap: var(--space-4);
  margin-top: var(--space-3);
}

.timeline-point,
.timeline-year {
  position: relative;
}

.timeline-dot {
  position: absolute;
  top: 0.45rem;
  /* Half the dot plus the line's own width, so it sits centred on the line. */
  left: calc(-1 * var(--space-6) - 6px);
  width: 10px;
  height: 10px;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-ink-soft);
}

.timeline-point.is-marked .timeline-dot {
  width: 14px;
  height: 14px;
  left: calc(-1 * var(--space-6) - 8px);
  top: 0.35rem;
  background: var(--color-accent);
}

/* A chronology spanning years says the year once and then reads down from it. */
.timeline-year {
  margin-top: var(--space-3);
}

.timeline-year p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 750;
  letter-spacing: 0.08em;
}

.timeline-year .timeline-dot {
  width: 6px;
  height: 6px;
  top: 0.4rem;
  left: calc(-1 * var(--space-6) - 4px);
  background: var(--color-line);
}

.timeline-body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.timeline-when {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.timeline-point.is-marked .timeline-when {
  color: var(--color-accent);
}

.timeline-source {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.timeline-source a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.timeline-source a:hover {
  color: var(--color-accent);
}

.timeline-text {
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.timeline-text p {
  margin: 0 0 var(--space-1);
}

.timeline-text p:last-child {
  margin-bottom: 0;
}

.timeline-import {
  display: grid;
  gap: var(--space-4);
  max-width: 60rem;
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.timeline-import-file {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 650;
}

.timeline-import-preview {
  max-height: 28rem;
  overflow-y: auto;
}

.timeline-import-summary {
  margin: 0 0 var(--space-2);
  font-weight: 650;
}

.timeline-import-notice {
  margin: 0 0 var(--space-2);
  color: var(--color-danger);
  font-size: var(--text-sm);
}

.timeline-import-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.timeline-footer {
  display: flex;
  justify-content: flex-end;
}

/* The grip that arms a drag. The card itself stays undraggable at rest, because a
   milestone card is clickable and a to-do carries selectable text, and a draggable
   element swallows both. */
/* The same box and the same weight as the buttons beside it. It was three quarters of
   their size and at 55% opacity on top of that, so the one control you have to hit
   precisely was the hardest one to see and the smallest one to aim at. */
.sprint-drag-handle {
  display: inline-grid;
  width: 2.5rem;
  height: 2.5rem;
  place-items: center;
  color: var(--color-ink-soft);
  cursor: grab;
  touch-action: none;
}

.sprint-drag-handle:hover {
  color: var(--color-ink);
}

.sprint-drag-handle:active {
  cursor: grabbing;
}

.sprint-drag-handle svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.sprint-item.is-dragging,
.sprint-child-action.is-dragging {
  opacity: 0.4;
}

/* While a card is being carried, its neighbours move aside as the pointer passes them,
   so the gap under the pointer is the drop. Nothing else marks the place. */
.sprint-items[data-reorderable="true"] .sprint-item,
.sprint-child-action-list[data-reorderable="true"] .sprint-child-action {
  transition: transform 120ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .sprint-items[data-reorderable="true"] .sprint-item,
  .sprint-child-action-list[data-reorderable="true"] .sprint-child-action,
  .sprint-item > .sprint-item-actions > *,
  .sprint-child-action > .sprint-child-action-controls {
    transition: none;
  }
}

/* How far the deal has come, in the rail beside the people who are carrying it. The
   tickbox is the fact; the date says when it became one. */
.deal-step-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The row is the flex container, not the label: the date has to sit outside the label
   so that correcting it does not untick the step it belongs to. */
.deal-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.deal-step label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  cursor: pointer;
  font-size: var(--text-sm);
}

/* forms.css gives every input the full control height. A tickbox is not a text field. */
.deal-step input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: none;
  accent-color: var(--color-accent);
}

/* forms.css gives every label the weight of a form label. This one is not naming a
   field, it is the step. */
.deal-step-label {
  flex: 0 1 auto;
  color: var(--color-ink);
  font-weight: 400;
}

.deal-step.is-done .deal-step-label {
  color: var(--color-ink-soft);
}

.deal-step-date {
  flex: none;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* A tick can only record today, and the demo was weeks ago -- so the date is the one
   thing in this list worth correcting. It stays quiet until the pointer finds it. */
button.deal-step-date {
  padding: 0;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: none;
  font: inherit;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

button.deal-step-date:hover,
button.deal-step-date:focus-visible {
  border-bottom-color: var(--color-line-strong);
  color: var(--color-ink);
}

/* forms.css gives every input the full control height. This one replaces a date the
   size of a caption, and the row must not jump when it does. */
.deal-step-date-input {
  flex: none;
  width: auto;
  min-height: 0;
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.deal-step input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

/* What the customer already runs. Reads like Products in play above it, because it
   answers the same shape of question about a different tense. */
.owned-product-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The same bullet and indent as Products in play above it, so the two boxes read as one
   column of items about the same account rather than two lists that were styled apart.
   The marker is drawn rather than listed, because the row is a flex line and list-item
   markers do not survive that. */
.owned-product {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-left: var(--space-4);
  font-size: var(--text-sm);
}

.owned-product::before {
  position: absolute;
  left: 0;
  color: var(--color-ink-soft);
  content: "\2022";
  line-height: inherit;
}

/* Nothing to bullet: the row being added is a form, and the empty state is an
   invitation. */
.owned-product.is-adding::before {
  content: none;
}

.owned-product-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* Bought and merely running are different facts on a renewal: Purple Knight is
   downloaded for free and DSP is paid for. */
.owned-product-kind {
  flex: none;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.owned-product-remove {
  flex: none;
  min-height: 0;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}

.owned-product:hover .owned-product-remove,
.owned-product-remove:focus-visible {
  opacity: 1;
}

.owned-product-remove:hover {
  color: var(--color-danger);
}

.owned-product.is-adding {
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-left: 0;
}

/* forms.css gives every control the full height; the rail has no room for it. */
.owned-product-picker,
.owned-product-kind-picker {
  min-height: 0;
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-xs);
}

.owned-product-picker {
  flex: 1 1 100%;
}

.owned-product-save,
.owned-product-cancel,
.owned-product-invite {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-soft);
  font: inherit;
  font-size: var(--text-xs);
  text-align: left;
  cursor: pointer;
}

.owned-product-save {
  color: var(--color-accent);
  font-weight: 650;
}

.owned-product-save:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.owned-product-invite:hover,
.owned-product-cancel:hover {
  color: var(--color-accent);
}

.owned-product-invite:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.dossier-owned .dossier-rail-heading {
  align-items: baseline;
}

/* The File Vault. Sections are the seller's own categories; each one carries the same
   files panel every record in Merkio already uses, so an upload here behaves the same
   way and looks the same as an upload anywhere else. */
.vault-section-form {
  display: grid;
  gap: var(--space-3);
  max-width: 44rem;
  margin-bottom: var(--space-6);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.vault-section-form label {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.vault-section-form-actions {
  display: flex;
  gap: var(--space-3);
}

/* The open section's Rename and Delete, quiet words beside its name (2026-09-30: one
   section is open at a time, so they stay in view). */
.vault-section-actions {
  display: flex;
  flex: none;
  gap: var(--space-3);
}

/* Who else the customer is looking at. Red because that is what it is: the one thing in
   this rail that is working against the deal, and a seller scanning the column should
   find it without reading it. */
.competitor-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A bullet and an indent, as under Products in play, so each competing product reads as
   an item under the heading. Drawn, because the row is a flex line. */
.competitor {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: var(--space-4);
  font-size: var(--text-sm);
}

.competitor::before {
  position: absolute;
  top: 0;
  left: 0;
  color: var(--color-ink-soft);
  content: "•";
  line-height: inherit;
}

/* The other four states are steps along one road and read as progress. This one is the
   road ending, and in the same grey it looks like another step. The same red the
   Competition box uses: both answer "what is going against us here". It overrides
   .muted, which is the class it is usually written beside. */
.product-state-declined,
.muted.product-state-declined {
  color: var(--color-danger);
}

/* Red already says what this is. Bold on top of red is the same thing said twice. */
.competitor-name {
  flex: 0 1 auto;
  min-width: 0;
  color: var(--color-danger);
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* Quiet until the row is under the pointer: a column of crosses beside every name reads
   as a list of things to delete rather than a list of competitors. */
.competitor-remove {
  flex: none;
  margin-left: auto;
  min-height: 0;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
}

.competitor:hover .competitor-remove,
.competitor-remove:focus-visible {
  opacity: 1;
}

.competitor-remove:hover {
  color: var(--color-danger);
}

/* The one name that is not a name. It reads as what it will become -- a red entry in the
   list -- rather than as a button, because that is what pressing it produces. */
.competitor-unknown {
  flex: none;
  min-height: 0;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--color-danger);
  font-size: var(--text-xs);
  font-weight: 650;
  cursor: pointer;
}

.competitor-unknown:hover,
.competitor-unknown:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.dossier-competitors .dossier-rail-heading {
  align-items: baseline;
}

/* forms.css gives every input the full control height; the rail has no room for it. */
.competitor-field {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-danger);
  font-size: var(--text-sm);
  font-weight: 400;
}

/* Where else the account lives. A filled slot is the link itself; an empty one is a
   button that says so. Editing happens in the row, because a drawer for one line of
   text is a drawer too many. */
.account-link-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A bullet in front, like every other list in the rail: Stakeholders sets the pattern. */
.account-link {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-left: var(--space-4);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.account-link::before {
  position: absolute;
  left: 0;
  content: "•";
}

.account-link-name {
  flex: none;
  min-width: 5.5rem;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 650;
}

.account-link-value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The name and the link are one element when a slot is filled. It takes the link's
   colour at the rail's own size, so the row reads as one word to click -- and at regular
   weight: the colour and underline already say "link", and bold on all three made the
   box shout louder than anything around it. */
.account-link-name.account-link-value {
  flex: 1 1 auto;
  color: var(--color-accent-strong);
  font-size: var(--text-sm);
  font-weight: 400;
  text-decoration: none;
}

/* The same darker link colour the stakeholder names carry, and the same manners: no
   underline at rest, one on hover, so the rail's links read as one family. */
.account-link-value:hover,
.account-link-value:focus-visible {
  color: var(--color-accent-strong);
  text-decoration: underline;
}

.account-link-add,
.account-link-edit,
.account-link-save,
.account-link-cancel {
  flex: none;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  cursor: pointer;
}

/* It waits for the row to be looked at, like the stakeholder controls, rather than
   putting a column of "Ändern" beside every link. Still reachable by keyboard. */
.account-link-edit,
.account-link-add {
  opacity: 0;
}

.account-link:hover .account-link-edit,
.account-link:focus-within .account-link-edit,
.account-link:hover .account-link-add,
.account-link:focus-within .account-link-add {
  opacity: 1;
}

.account-link-add {
  flex: 1 1 auto;
  text-align: left;
}

.account-link-add:hover,
.account-link-edit:hover,
.account-link-save:hover,
.account-link-cancel:hover {
  color: var(--color-accent);
}

.account-link-add:disabled {
  cursor: not-allowed;
}

.account-link:hover .account-link-add:disabled {
  opacity: 0.5;
}

.account-link-save {
  color: var(--color-accent);
  font-weight: 650;
}

.account-link.is-editing {
  flex-wrap: wrap;
}

/* forms.css gives every input the full control height; the rail has no room for it. */
.account-link-field {
  flex: 1 1 100%;
  min-height: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--text-sm);
}

/* The two saved views of the accounts list, drawn under it because that is what they
   are: the same page with a lifecycle already chosen. Each carries its own icon like
   every other link; the indent and the smaller type are what say they sit beneath. */
.nav-sublink {
  padding-left: var(--space-6);
  font-size: var(--text-sm);
}

.nav-sublink .icon {
  width: 1.05rem;
  height: 1.05rem;
}
/* About 700 px: wide enough for a meeting's summary, and the summary fills it -- the wide
   panel it replaced left most of itself as white space beside a capped text column.
   Never wider than the screen, less a margin to click out. */
.drawer.deal-step-drawer {
  width: min(44rem, calc(100vw - 2rem));
}

.deal-step-drawer .deal-step-summary-view {
  max-width: none;
}

/* A deal step's panel: the summary first, then its files. The field is sized for a
   meeting's worth of notes rather than a line. */
.deal-step-summary-form textarea {
  min-height: 14rem;
  resize: vertical;
  line-height: 1.5;
}

.deal-step-summary-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.deal-step-files {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.deal-step-files h3 {
  margin: 0;
  font-size: var(--text-sm);
}

/* Reading a step's summary: its heading with Bearbeiten at the far end, then the text
   laid out the way the deal strategy is. */
.deal-step-summary-read {
  display: grid;
  gap: var(--space-3);
}

.deal-step-summary-read[hidden] {
  display: none;
}

.deal-step-summary-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.deal-step-summary-heading h3 {
  margin: 0;
  font-size: var(--text-sm);
}

/* Colleagues: a directory read for one question -- who looks after this. Each person is
   one row: who they are and how to reach them on the left, what they are responsible
   for beside it, where the eye lands after a search. */
.colleagues-page {
  display: grid;
  gap: var(--space-5);
}

.colleague-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.colleague-toolbar input[type="search"] {
  flex: 1 1 auto;
  max-width: 32rem;
}

.colleague-toolbar p {
  margin: 0;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.colleague-empty {
  margin: 0;
  padding: var(--space-5) 0;
}

/* Competitors (0096). Read like the product catalogue: one hairline between entries, no
   cards. The vendor stands in a left rail with the products of ours it meets, so the eye
   runs down the names; what they sell reads to the right of it. */
.competitors-page {
  max-width: none;
}

.competitor-toolbar {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.competitor-search {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.competitor-search input[type="search"] {
  flex: 1 1 auto;
  max-width: 32rem;
}

.competitor-search p {
  margin: 0;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.competitor-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.competitor-filter {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink-soft);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.competitor-filter:hover {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}

.competitor-filter[aria-pressed="true"] {
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.competitor-filter-count {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* The Competitors page's own empty note, under a name no other page uses. */
.competitor-page-empty {
  margin: 0;
  padding: var(--space-6) 0;
}

.competitor-entry {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: var(--space-2) var(--space-8);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-line);
}

.competitor-entry-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.competitor-entry-name {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
}

/* The whole name opens the panel, read as the heading it is until pointed at. */
.competitor-entry-open {
  min-height: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.competitor-entry-open:hover,
.competitor-entry-open:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.competitor-entry-faces {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.competitor-offering + .competitor-offering {
  margin-top: var(--space-4);
}

.competitor-offering-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}

.competitor-offering-title h3 {
  margin: 0 var(--space-1) 0 0;
  font-size: var(--text-base);
  font-weight: 600;
}

.competitor-tag {
  padding: 0.0625rem var(--space-2);
  border-radius: var(--radius-sm, 0.25rem);
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.competitor-tag.is-other {
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
  font-weight: 500;
  white-space: normal;
}

.competitor-offering-note {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.competitor-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1 1 auto;
}

.competitor-form-body {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  flex: 1 1 auto;
}

.competitor-identity {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}

.competitor-identity label {
  display: block;
  margin: 0 0 var(--space-1);
}

.competitor-identity input {
  width: 100%;
}

/* Offerings: each a block of its own, read the way the page shows it -- the name as a
   heading, our products it meets, its points as bullets -- and edited in place. Blocks
   are divided by a hairline, not boxed: the drawer is the one surface. */
.competitor-offerings-field {
  margin-top: var(--space-8);
}

.competitor-offerings-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-line);
}

.competitor-offerings-head h3,
.competitor-links-field legend,
.competitor-documents-title {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
}

.competitor-offerings-head span {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.offering-editor-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.offering-editor {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5) 0 var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.offering-editor-top {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

/* Fields that read as text until they are worked on: no box at rest, a quiet one on
   hover, the usual focus ring when typing. */
.offering-name,
.offering-counters,
.offering-point-text {
  width: 100%;
  min-height: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.offering-name:hover,
.offering-counters:hover,
.offering-point-text:hover {
  border-color: var(--color-line);
}

.offering-name:focus,
.offering-counters:focus,
.offering-point-text:focus {
  border-color: var(--color-accent);
  background: var(--color-surface);
  outline: 1px solid var(--color-focus);
  outline-offset: 0;
  box-shadow: none;
}

.offering-name,
.offering-counters {
  display: block;
  overflow: hidden;
  line-height: 1.4;
  resize: none;
}

.offering-name {
  flex: 1 1 auto;
  margin-left: calc(-1 * var(--space-2));
  padding: var(--space-1) var(--space-2);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.offering-name::placeholder,
.offering-counters::placeholder,
.offering-point-text::placeholder {
  color: var(--color-ink-muted);
  font-weight: 400;
}

.offering-tools {
  display: flex;
  flex: none;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity 120ms ease;
}

.offering-editor:hover .offering-tools,
.offering-editor:focus-within .offering-tools {
  opacity: 1;
}

@media (hover: none) {
  .offering-tools {
    opacity: 1;
  }
}

.offering-icon-button {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  background: none;
  cursor: pointer;
}

.offering-icon-button:hover:not(:disabled),
.offering-icon-button:focus-visible {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.offering-icon-button.is-danger:hover,
.offering-icon-button.is-danger:focus-visible {
  color: var(--color-danger);
}

.offering-icon-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.offering-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.offering-against {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.offering-against-label {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.offering-products {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* Off: an outline in the line colour. On: the tag the page shows for it. */
.offering-product {
  min-height: 0;
  padding: 0.1875rem var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  background: transparent;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.offering-product:hover {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
}

.offering-product[aria-pressed="true"] {
  border-color: transparent;
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.offering-counters {
  margin-left: calc(-1 * var(--space-2));
  padding: var(--space-1) var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.offering-points {
  display: grid;
  gap: 0.125rem;
  margin: var(--space-1) 0 0;
  padding: 0;
  list-style: none;
}

.offering-point {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding-left: var(--space-5);
}

/* The bullet the page draws, set where the text starts rather than inside the field. */
.offering-point::before {
  position: absolute;
  top: 0.8em;
  left: var(--space-2);
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: var(--color-ink-muted);
  content: "";
}

.offering-point-text {
  display: block;
  padding: var(--space-1) var(--space-2);
  overflow: hidden;
  color: var(--color-ink-soft);
  line-height: 1.5;
  resize: none;
}

.offering-point-remove {
  opacity: 0;
}

.offering-point:hover .offering-point-remove,
.offering-point:focus-within .offering-point-remove {
  opacity: 1;
}

@media (hover: none) {
  .offering-point-remove {
    opacity: 1;
  }
}

.offering-point-add {
  justify-self: start;
  margin-left: var(--space-5);
}

.offering-add {
  margin-top: var(--space-4);
}

.competitor-form-body .field-note {
  margin: calc(-1 * var(--space-2)) 0 0;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.competitor-form-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.competitor-form-spacer {
  flex: 1 1 auto;
}

@media (max-width: 48rem) {
  .competitor-entry {
    grid-template-columns: minmax(0, 1fr);
  }

  .competitor-entry-header {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-3);
  }
}

/* A competitor's website, links and documents (0097): the product row's link line,
   indented past the points, with each document as the blue note icon that opens it. */
.competitor-entry-links {
  align-items: center;
  margin-top: var(--space-4);
  padding-bottom: 0;
}

.competitor-document-open {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--color-accent);
  background: none;
  font: inherit;
  cursor: pointer;
}

.competitor-document-open:hover .competitor-document-name,
.competitor-document-open:focus-visible .competitor-document-name {
  text-decoration: underline;
}

.competitor-document-open:disabled {
  color: var(--color-ink-soft);
  cursor: default;
}

.competitor-document-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.competitor-document-icon path:first-child {
  fill: color-mix(in srgb, var(--color-accent) 16%, transparent);
}

.competitor-document-name {
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-links-field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: var(--space-8) 0 0;
  padding: 0;
  border: 0;
}

.competitor-links-field legend,
.competitor-documents-title {
  margin-bottom: var(--space-3);
  padding: 0;
}

.competitor-link-rows {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.competitor-link-rows:empty {
  display: none;
}

.competitor-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: center;
  min-height: 2.25rem;
}

.competitor-link-view {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--space-3);
}

.competitor-link-anchor {
  flex: none;
  max-width: 60%;
  overflow: hidden;
  color: var(--color-accent);
  font-weight: 500;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-link-anchor::after {
  content: " \2197";
}

.competitor-link-anchor:hover,
.competitor-link-anchor:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.competitor-link-address {
  min-width: 0;
  overflow: hidden;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-link-fields {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2);
}

.competitor-link-row.is-editing .competitor-link-fields {
  display: grid;
}

.competitor-link-row.is-editing .competitor-link-view {
  display: none;
}

.competitor-link-tools {
  display: flex;
  gap: var(--space-1);
}

.competitor-link-done,
.competitor-link-row.is-editing .competitor-link-edit {
  display: none;
}

.competitor-link-row.is-editing .competitor-link-done {
  display: inline-grid;
}

/* At rest the row is a link; its tools come up when it is looked at. */
.competitor-link-row:not(.is-editing) .competitor-link-tools {
  opacity: 0;
  transition: opacity 120ms ease;
}

.competitor-link-row:hover .competitor-link-tools,
.competitor-link-row:focus-within .competitor-link-tools {
  opacity: 1;
}

@media (hover: none) {
  .competitor-link-row:not(.is-editing) .competitor-link-tools {
    opacity: 1;
  }
}

.competitor-links-field .text-action {
  justify-self: start;
}

.competitor-documents-field {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

@media (max-width: 40rem) {
  .competitor-identity {
    grid-template-columns: minmax(0, 1fr);
  }

  .competitor-link-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Resources (0102): links kept at hand for calls. Built around finding one fast: a search
   that takes the page's first line, the pinned few beneath it, then the sections -- an
   index on the left to jump by, the links on hairlines to the right, read like the
   Competitors page. */
.resources-page {
  max-width: none;
}

.resource-find {
  position: relative;
  display: grid;
  gap: var(--space-2);
}

.resource-find input[type="search"] {
  width: 100%;
  min-height: 3rem;
  padding: 0 3rem 0 var(--space-4);
  font-size: var(--text-lg);
}

.resource-find-key {
  position: absolute;
  top: 0.75rem;
  right: var(--space-3);
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
  background: var(--color-surface);
  font: 600 var(--text-xs) / 1 var(--font-mono);
  pointer-events: none;
}

.resource-find input:focus ~ .resource-find-key {
  opacity: 0;
}

.resource-find-help {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.resource-find-keys {
  opacity: 0;
  transition: opacity 120ms ease;
}

.resource-find:focus-within .resource-find-keys {
  opacity: 1;
}

/* At hand: the pinned links as one line of plain links, the fastest reach on the page. */
.resource-pinned {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.resource-pinned h2 {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 600;
}

.resource-pinned-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.resource-pinned-link,
.resource-title {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.resource-pinned-link::after,
.resource-title::after {
  content: " \2197";
  font-weight: 400;
}

.resource-pinned-link:hover,
.resource-pinned-link:focus-visible,
.resource-title:hover,
.resource-title:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.resource-body {
  display: grid;
  grid-template-columns: 13rem minmax(0, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-6);
}

/* The index stays in view while the sections scroll past it. */
.resource-index {
  position: sticky;
  top: var(--space-6);
  display: grid;
  align-content: start;
  gap: 0.125rem;
  max-height: calc(100vh - var(--space-12, 3rem));
  overflow-y: auto;
}

.resource-index-link {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  text-decoration: none;
}

.resource-index-link:hover,
.resource-index-link:focus-visible {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.resource-index-count {
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}

.resource-section {
  scroll-margin-top: var(--space-6);
}

.resource-section + .resource-section {
  margin-top: var(--space-8);
}

.resource-section-name {
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
}

.resource-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.resource-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
}

/* The row the arrows are on: Enter opens it. */
.resource-row.is-active {
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

.resource-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.resource-host {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.resource-pinned-mark {
  display: inline-grid;
  color: var(--color-accent);
}

.resource-note {
  max-width: 90ch;
  margin: var(--space-1) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.resource-tools {
  display: flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity 120ms ease;
}

.resource-row:hover .resource-tools,
.resource-row:focus-within .resource-tools,
.resource-row.is-active .resource-tools {
  opacity: 1;
}

@media (hover: none) {
  .resource-tools {
    opacity: 1;
  }
}

.resource-tool {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  background: none;
  cursor: pointer;
}

.resource-tool:hover,
.resource-tool:focus-visible {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.resource-tool[aria-pressed="true"] {
  color: var(--color-accent);
}

.resource-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.resource-pinned-mark .resource-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.resource-empty {
  max-width: 34rem;
  margin: var(--space-10, 2.5rem) 0;
}

.resource-empty h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.resource-empty p {
  margin: 0 0 var(--space-4);
  color: var(--color-ink-soft);
  line-height: 1.55;
}

.resource-no-match {
  margin: var(--space-6) 0;
  color: var(--color-ink-soft);
}

.resource-form-body {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.resource-form-body label {
  margin: var(--space-2) 0 0;
}

.resource-form-body label:first-child {
  margin-top: 0;
}

.resource-form-body .resource-pin-field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-weight: 500;
}

.resource-form-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.resource-form-spacer {
  flex: 1 1 auto;
}

@media (max-width: 48rem) {
  .resource-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .resource-index {
    position: static;
    display: flex;
    flex-wrap: wrap;
    max-height: none;
  }
}

/* Editing the workspace's deal steps (0103): one row a step, a grip to drag it by, its
   name (editable when it is one's own), arrows for the keyboard and an eye to hide it.
   A hidden step stays in the list, faded, so it can come back. */
.deal-step-definition-list {
  display: grid;
  gap: 0.125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-editor-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.5rem;
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.step-editor-row:hover {
  border-color: var(--color-line);
}

.step-editor-row.is-dragging {
  opacity: 0.45;
}

.step-editor-row.is-drop-target {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 6%, var(--color-surface));
}

.step-editor-row.is-hidden .step-editor-name,
.step-editor-row.is-hidden .step-editor-name-input {
  color: var(--color-ink-muted);
}

.step-editor-grip {
  display: inline-grid;
  color: var(--color-ink-muted);
  cursor: grab;
}

.step-editor-grip .step-editor-icon {
  stroke-width: 2.4;
}

.step-editor-name {
  font-weight: 500;
}

.step-editor-name-input {
  min-height: 0;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 500;
}

.step-editor-state {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.step-editor-row:not(.is-hidden) .step-editor-state {
  display: none;
}

.step-editor-tools {
  display: flex;
  gap: 0.125rem;
  grid-column: 4;
}

.step-editor-button {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  background: none;
  cursor: pointer;
}

.step-editor-button:hover:not(:disabled),
.step-editor-button:focus-visible {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.step-editor-button.is-danger:hover,
.step-editor-button.is-danger:focus-visible {
  color: var(--color-danger);
}

.step-editor-button:disabled {
  opacity: 0.3;
  cursor: default;
}

.step-editor-button[aria-pressed="true"] {
  color: var(--color-ink-muted);
}

.step-editor-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.deal-step-add {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.deal-step-list-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  border-top: 1px solid var(--color-line);
}

/* A to-do can be taken anywhere on its row (grabAnywhere); the pointer says so. */
.sprint-child-action.is-grabbable,
.milestone-action-row.is-grabbable {
  cursor: grab;
}

.sprint-child-action.is-grabbable :is(button, a, input, label),
.milestone-action-row.is-grabbable :is(button, a, input, label) {
  cursor: pointer;
}

.sprint-child-action.is-dragging,
.milestone-action-row.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

/* With the grip in front, the row gains a narrow first column. */
.milestone-action-row.is-grabbable {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.milestone-action-row > .sprint-drag-handle {
  width: 1.75rem;
  margin-left: calc(-1 * var(--space-2));
  /* The text's own ink, a little fainter, in either mode (2026-09-29, Nico). */
  color: color-mix(in srgb, var(--color-ink) 70%, transparent);
}

/* The grip is a span, and a due to-do reddens its row's spans: keep the grip out of it. */
.milestone-action-row.is-overdue > span.sprint-drag-handle {
  color: color-mix(in srgb, var(--color-ink) 70%, transparent);
  font-weight: 400;
}

.milestone-action-row > .sprint-drag-handle:hover,
.milestone-action-row.is-overdue > span.sprint-drag-handle:hover {
  color: var(--color-ink);
}

/* Stacked under the page, an empty side column would only be a grey strip. */
@media (max-width: 54rem) {
  .is-prospecting .account-dossier-layout > .account-dossier-rail {
    display: none;
  }
}

/* A prospecting account says so in its title: "ALDI Nord – Prospect Sprint", the way the
   Contacts drawer reads "ALDI Nord – Contacts". The words come from here, so the title
   element keeps the bare name for everything that reads it. */
.is-prospecting #account-workspace-title::after {
  content: " – Prospect Sprint";
}

/* The row that adds a competitor is a form, not an item: no bullet, no indent. */
.competitor.is-adding {
  padding-left: 0;
}

.competitor.is-adding::before {
  content: none;
}

/* Competitors, calm (2026-09-27; the page before this is tagged
   design-backup/competitors-2026-09-27). The vendor's name leads, its offerings read as
   medium-weight lines, the products they meet are small outlined labels rather than
   filled badges, and the links sit under the offerings as quiet grey text that turns blue
   when pointed at -- the reference, not the headline. */
#competitors-app .competitor-entry {
  padding: var(--space-5) 0;
}

#competitors-app .competitor-entry-name {
  font-size: var(--text-lg);
  font-weight: 600;
}

#competitors-app .competitor-entry-faces {
  font-size: var(--text-xs);
}

#competitors-app .competitor-offering + .competitor-offering {
  margin-top: var(--space-3);
}

#competitors-app .competitor-offering-title h3 {
  font-size: var(--text-md);
  font-weight: 500;
  line-height: 1.4;
}

#competitors-app .competitor-tag {
  padding: 0 0.375rem;
  border: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  background: none;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

#competitors-app .competitor-tag.is-other {
  color: var(--color-ink-muted);
}

#competitors-app .competitor-offering .catalog-entry-points {
  margin-top: var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

#competitors-app .competitor-entry-links {
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-4);
  padding: var(--space-3) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--color-line) 60%, transparent);
  font-size: var(--text-xs);
}

#competitors-app .competitor-entry-links a {
  color: var(--color-ink-soft);
}

#competitors-app .competitor-entry-links a::after {
  color: var(--color-ink-muted);
}

#competitors-app .competitor-entry-links a:hover {
  color: var(--color-accent-strong);
}

#competitors-app .competitor-filter {
  min-height: 1.875rem;
}

/* Milestone drawer, 2026-09-28: the header's edit is a quiet mark beside the close, not a
   framed button; the files area stays small until there is something in it. */
#edit-milestone-detail {
  border-color: transparent;
  color: var(--color-ink-soft);
  background: none;
  box-shadow: none;
}

#edit-milestone-detail:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

/* As on the contact card: no empty box under Documents until there is a file; Upload sits
   beside the heading and dropping a file on the section still works. */
#milestone-files-panel .files-state.is-empty {
  display: none;
}

#milestone-files-panel .files-state {
  min-height: 0;
  place-items: start;
  padding: var(--space-3);
  text-align: left;
}

#milestone-files-panel .files-header .muted {
  font-size: var(--text-xs);
}

/* The milestone window's pencil shows while its title row is pointed at; there is no x --
   Esc or a click beside the window closes it (2026-09-29, Nico). */
.milestone-note-drawer #edit-milestone-detail {
  opacity: 0;
  transition: opacity 120ms ease-out;
}

/* Pointed at, or reached with the keyboard -- not merely holding the focus the window puts
   on its first button when it opens, which kept the pen showing (2026-09-29, Nico). */
.milestone-note-drawer .drawer-header:hover #edit-milestone-detail,
.milestone-note-drawer #edit-milestone-detail:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .milestone-note-drawer #edit-milestone-detail {
    opacity: 1;
  }
}

/* The milestone window's Save, more prominent (2026-09-29, Nico): a larger button in the
   ink on a footer set apart by a quiet band, pinned under the note while it is edited. */
.milestone-note-drawer .milestone-note-footer {
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-line);
  background: var(--color-surface-subtle);
}

.milestone-note-drawer #save-milestone-note {
  min-width: 9rem;
  min-height: 2.75rem;
  padding-inline: var(--space-6);
  font-size: var(--text-md);
}

/* A note reads as it was typed (2026-09-29, Nico): no gaps of their own between its
   paragraphs and lists -- each empty row typed is one empty line, and only those. */
.milestone-note-preview .minutes-document :is(p, ul, ol, blockquote) {
  margin: 0;
}

.milestone-note-preview .markdown-blank-line {
  height: 1.7em;
}

/* A to-do's Done in the milestone window is a tick in a circle (2026-09-29, Nico): quiet
   grey, the success colour when pointed at. */
.milestone-action-done {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--color-ink-soft);
  background: none;
  cursor: pointer;
}

.milestone-action-done:hover {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.milestone-action-done svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Done: the circle filled in the success colour, the tick white. */
.milestone-action-done.is-done {
  color: var(--color-success);
}

.milestone-action-done.is-done .milestone-action-done-ring {
  fill: currentColor;
}

.milestone-action-done.is-done .milestone-action-done-tick {
  stroke: var(--color-surface);
}

.milestone-action-done.is-done:hover {
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
}

/* The milestone window's headings -- Action items, Notes, Links, Documents -- and
   Add action are the size of the to-dos they sit over (2026-09-29, Nico): one voice, ink, 600. */
.milestone-action-items h3,
.milestone-record-heading h3,
.milestone-record-links h3,
.milestone-record-files .files-header h3 {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

/* A heading typed into the notes ("# ") is no larger than the window's own headings: the
   size of the text, set apart by weight alone (2026-09-29, Nico). */
.milestone-note-preview .minutes-document :is(h3, h4, h5, h6) {
  font-size: var(--text-sm);
}

/* The milestone window's Upload (the arrow out of a tray) and Add action (a plus): quiet
   until pointed at, like the to-do's tick (2026-09-29, Nico). */
.files-upload-icon {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--color-ink-soft);
  background: transparent;
  cursor: pointer;
}

.files-upload-icon:hover,
.files-upload-icon:focus-visible {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.files-upload-icon-mark {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.milestone-action-items > header .files-upload-icon {
  align-self: center;
}

/* The milestone window's title is set in the text's own ink, in dark mode too, where
   headings otherwise take the heading tint (2026-09-29, Nico). */
.milestone-note-drawer #milestone-note-title {
  color: var(--color-ink);
}

/* A to-do's Edit: the pencil, the size of the tick beside it, showing on hover. */
.milestone-action-edit {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--color-ink-soft);
  background: none;
  cursor: pointer;
}

.milestone-action-edit:hover,
.milestone-action-edit:focus-visible {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.milestone-action-edit svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The rail's Add and Anpassen as icons at the heading's end (2026-09-29, Nico): a plus to
   add, the adjusters for the deal's steps -- quiet until pointed at, like every rail icon. */
.rail-heading-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  background: none;
  cursor: pointer;
}

.rail-heading-icon[hidden] {
  display: none;
}

.rail-heading-icon:hover,
.rail-heading-icon:focus-visible {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.rail-heading-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The heading keeps its margin under it; the icon centres on the heading's line, not on
   that margin as well. */
.dossier-rail-heading:has(> .rail-heading-icon, > .dossier-heading-actions > .rail-heading-icon) {
  align-items: flex-start;
}

.dossier-rail-heading .rail-heading-icon {
  margin-top: -0.125rem;
}

/* A rail row's note icon, while it holds no note, shows only when the row is pointed at or
   in use (2026-09-29, Nico); a row with a note keeps its filled icon in view. */
.dossier-rail-section li:not(:hover):not(:focus-within) .rail-note:not(.has-note):not(.is-open):not(.is-editing) .rail-note-icon {
  opacity: 0;
}

@media (hover: none) {
  .dossier-rail-section li .rail-note:not(.has-note) .rail-note-icon {
    opacity: 0.55;
  }
}

/* A to-do's box is round, as the done milestone's mark is (2026-09-29, Nico): a ring while
   open, filled in the success tone with a tick once done. */
.sprint-action-tick input[type="checkbox"] {
  appearance: none;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--color-line-strong);
  border-radius: 50%;
  background: transparent;
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

.sprint-action-tick input[type="checkbox"]:not(:disabled):hover {
  border-color: var(--color-success);
}

.sprint-action-tick input[type="checkbox"]:checked {
  border-color: var(--color-success);
  background: var(--color-success);
}

/* The tick, an SVG laid over the box and shown only while it is ticked, in the surface's
   tone as the milestone's mark draws it. Clicks go through it to the box. */
.sprint-action-tick {
  position: relative;
}

.sprint-action-tick-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 1.125rem;
  height: 1.125rem;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sprint-action-tick-mark path {
  fill: none;
  stroke: var(--color-surface);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sprint-action-tick input[type="checkbox"]:checked + .sprint-action-tick-mark {
  display: block;
}



.sprint-action-tick input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Every mark at the rail's right edge -- the heading's plus and adjusters, a stakeholder's
   star and remove, a competitor's or product's remove -- in the same 1.5rem box with its
   icon centred, so they stand on one vertical line (2026-09-29, Nico). */
.rail-row-icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  line-height: 1;
}

.rail-row-icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dossier-stakeholder-primary.is-set svg {
  fill: currentColor;
}

.dossier-stakeholder-marks {
  align-items: center;
  gap: 0;
}

.dossier-rail-section li:has(.rail-row-icon) {
  align-items: center;
}

.sprint-icon-action[hidden] {
  display: none;
}

/* Company Research under its drawer's line: the header holds the title and its actions, so
   the section's own heading row goes and the profile starts close under the line
   (2026-09-29, Nico). */
.account-section-drawer .drawer-header {
  gap: var(--space-3);
}

.account-section-drawer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.account-section-drawer-actions:empty {
  display: none;
}

/* Every section close under the drawer's line, its actions in the header (2026-09-29,
   Nico): the body's top padding is the one space there; a section adds none
   (components.css), and a heading row left without a button goes. Doubled class: every
   drawer's own body padding (overlays.css) comes later and would win. */
.account-section-drawer .account-section-drawer-body {
  padding-top: var(--space-3);
}

/* source: frontend/styles/components.css */

/* The Marker (2026-09-27; the shield before it is tagged design-backup/logo-2026-09-27):
   a bookmark in the brand's own blue, its top corners rounded and its foot cut on a
   slant, set beside "Merkio". It keeps its blue in every theme and in dark mode. */
.brand-mark {
  display: block;
  flex: none;
  width: auto;
  height: 2.25rem;
  aspect-ratio: 28 / 36;
  fill: var(--color-brand);
}

.brand-name {
  font-size: 1.35rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.brand-context {
  justify-self: end;
  color: var(--color-ink-soft);
  font: 500 0.68rem/1.2 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.shell-logo-mark {
  height: 1.75rem;
}

.shell-logo-name {
  color: var(--color-nav-ink-strong);
  font-size: var(--text-lg);
  font-weight: 750;
  letter-spacing: -0.02em;
}

.icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
}

/* Framed buttons read in the regular weight, not bold (2026-09-29, Nico). */
.icon-button,
.menu-button,
.user-button,
.secondary-button,
.primary-button,
.state-link {
  min-height: var(--control-height);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-control);
  color: var(--color-ink);
  background: var(--color-surface);
  font-weight: 400;
}

.icon-button {
  display: inline-grid;
  width: var(--control-height);
  place-items: center;
  padding: 0;
}

.user-button,
.menu-button,
.secondary-button,
.primary-button,
.state-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  white-space: nowrap;
}

.user-button {
  padding-left: var(--space-2);
}

.primary-button {
  border-color: var(--color-ink);
  color: var(--color-on-ink);
  background: var(--color-ink);
}

.primary-button:hover {
  background: color-mix(in srgb, var(--color-ink) 86%, var(--color-canvas));
}

.action-button svg {
  width: 1.125rem;
  height: 1.125rem;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.quiet-icon-action {
  position: relative;
  display: inline-grid;
  width: 2.5rem;
  min-height: 2.5rem;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--color-ink-soft);
  background: transparent;
}

.quiet-icon-action:hover {
  border-color: var(--color-line);
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.quiet-icon-action.is-danger {
  color: var(--color-danger);
}

.quiet-icon-action.is-danger:hover {
  border-color: color-mix(in srgb, var(--color-danger) 24%, transparent);
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.quiet-icon-action:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0.125rem;
}

.quiet-icon-action svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.quiet-icon-action::after {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--space-2));
  z-index: 3;
  width: max-content;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-surface);
  background: var(--color-ink);
  box-shadow: var(--shadow-overlay);
  content: attr(data-tooltip);
  font-size: var(--text-xs);
  font-weight: 650;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.2rem);
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}

.quiet-icon-action:is(:hover, :focus-visible)::after {
  opacity: 1;
  transform: translateY(0);
}

.secondary-button:hover,
.icon-button:hover,
.user-button:hover,
.menu-button:hover,
.state-link:hover {
  border-color: var(--color-line-strong);
  background: var(--color-surface-subtle);
}

.avatar {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
}

.nav-link {
  display: flex;
  min-height: 3rem;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-nav-ink-soft);
  font-weight: 550;
}

.nav-link:hover {
  color: var(--color-nav-ink-strong);
  background: var(--color-nav-hover);
}

.nav-link[aria-current="page"] {
  color: var(--color-nav-ink-strong);
  background: var(--color-nav-active);
  font-weight: 680;
}

.notification-button {
  position: relative;
}

/* The bell carries the state itself rather than wearing a separate dot: the icon takes a
   colour and its count appears beside it, so how much is waiting reads without opening the
   panel. The accent while something is due today, the danger colour once anything is past
   its date. The count is also in the label, because a colour is not a message every reader
   receives. */
.notification-button.has-alerts {
  color: var(--color-accent-strong);
}

.notification-button.has-alerts.is-overdue {
  color: var(--color-danger);
}

.notification-count {
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.notification-count[hidden] {
  display: none;
}

.popup {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: min(20rem, calc(100vw - 2rem));
  padding: var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}

.popup-title {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  font-weight: 700;
}

.popup-note,
.popup-identity {
  margin: 0;
  padding: var(--space-3);
  color: var(--color-ink-soft);
}

.popup-identity strong {
  display: block;
  color: var(--color-ink);
}

.popup-action {
  width: 100%;
  justify-content: flex-start;
  border: 0;
}

.notification-menu {
  width: min(26rem, calc(100vw - 2rem));
}

.notification-list {
  display: grid;
  gap: var(--space-2);
}

.notification-summary {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--color-danger);
  font-weight: 700;
}

.notification-item {
  display: grid;
  gap: 0.2rem;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  text-decoration: none;
}

.notification-item:hover {
  border-color: color-mix(in srgb, var(--color-danger) 38%, var(--color-danger-line));
  background: var(--color-danger-soft);
}

.notification-item strong {
  font-size: var(--text-sm);
}

.notification-item span {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.state-picker {
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}

.section-tabs {
  display: flex;
  gap: var(--space-6);
  margin: calc(-1 * var(--space-3)) 0 var(--space-6);
  border-bottom: 1px solid var(--color-line);
}

.section-tabs a {
  padding: var(--space-3) 0;
  border-bottom: 2px solid transparent;
  color: var(--color-ink-soft);
  font-weight: 650;
}

.section-tabs a[aria-current="page"] {
  border-color: var(--color-accent);
  color: var(--color-ink);
}

.status-draft {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.status-active {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.status-retired {
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
}

.status-open,
.status-finalized,
.status-commit,
.status-selected {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.status-won,
.status-best_case,
.status-proposed {
  color: var(--color-focus);
  background: color-mix(in srgb, var(--color-focus) 12%, var(--color-surface));
}

.status-lost,
.status-archived,
.status-superseded {
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
}

.status-pipeline,
.status-qualification,
.status-discovery,
.status-technical_validation,
.status-proposal,
.status-negotiation,
.status-draft {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.compact-list,
.drawer-record-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.compact-list li,
.drawer-record-list li {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.compact-list span,
.drawer-record-list span {
  display: block;
}
.mono {
  font-family: var(--font-mono);
}

.detail-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

.detail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.detail-table th,
.detail-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.detail-table th {
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
}

.table-link {
  padding: 0;
  border: 0;
  color: var(--color-accent-strong);
  background: transparent;
  font-weight: 650;
}

.inline-empty,
.price-preview,
.preview-result {
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.inline-empty p {
  margin-bottom: 0;
}

.price-preview {
  margin-top: var(--space-6);
}

.price-preview .detail-section-header {
  margin-top: 0;
}

.preview-result {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-top: var(--space-4);
  background: var(--color-surface);
}

.preview-result.is-match strong {
  color: var(--color-accent-strong);
  font-size: var(--text-xl);
}

.state-link {
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  font-size: var(--text-xs);
}

.state-link[aria-current="true"] {
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.surface,
.state-panel {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.surface {
  padding: var(--space-6);
}

.surface-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.normal-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  list-style: none;
}

.normal-list li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  min-height: 3.5rem;
  padding: 0 var(--space-4);
}

.normal-list li + li {
  border-top: 1px solid var(--color-line);
}

.list-mark {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.status-badge {
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  color: var(--color-success);
  background: var(--color-success-soft);
  font-size: var(--text-xs);
  font-weight: 650;
}

.state-panel {
  display: grid;
  min-height: 20rem;
  place-items: center;
  padding: var(--space-10);
  text-align: center;
}

.state-content {
  max-width: 27rem;
}

.state-symbol {
  display: grid;
  width: 3rem;
  height: 3rem;
  margin: 0 auto var(--space-4);
  place-items: center;
  border-radius: 50%;
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
}

.state-panel.is-error .state-symbol {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.state-panel.is-denied .state-symbol {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.state-content p {
  margin-bottom: var(--space-6);
  color: var(--color-ink-soft);
}

.skeleton {
  display: grid;
  width: min(100%, 36rem);
  gap: var(--space-4);
}

.skeleton-line {
  height: 0.75rem;
  border-radius: 999px;
  background: var(--color-surface-subtle);
}

.skeleton-line:nth-child(2) {
  width: 82%;
}

.skeleton-line:nth-child(3) {
  width: 64%;
}

.permission-result {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5);
  border: 1px solid color-mix(in srgb, var(--color-success) 40%, var(--color-success-line));
  border-radius: var(--radius-md);
  color: var(--color-success);
  background: var(--color-success-soft);
}

.permission-result.denied {
  border-color: color-mix(in srgb, var(--color-danger) 40%, var(--color-danger-line));
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.status-dot {
  flex: 0 0 auto;
  width: 0.6875rem;
  height: 0.6875rem;
  margin-top: var(--space-1);
  border-radius: 50%;
  background: currentColor;
}

.toast-region {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--layer-toast);
  width: min(23rem, calc(100vw - 2rem));
}

.toast {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-ink);
  color: var(--color-on-ink);
  box-shadow: var(--shadow-overlay);
}

.toast-action {
  width: 100%;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.toast-action:hover {
  background: color-mix(in srgb, var(--color-on-ink) 14%, transparent);
}

.account-surface {
  padding: 0;
  overflow: hidden;
}

.contact-surface {
  padding: 0;
  overflow: hidden;
}

.product-classification.is-semperis {
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.product-classification.is-competitive {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.pill.is-retired {
  color: var(--color-ink-soft);
  background: var(--color-line);
}

.contact-surface > .surface-header {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-line);
}

.contact-table th,
.contact-table td {
  padding-inline: var(--space-4);
}

.contact-table {
  min-width: 66rem;
  table-layout: fixed;
}

/* Person, LinkedIn (2026-10-02), organization, email, phone, the arrow (2026-09-30: email
   and phone apart). */
.contact-table th:nth-child(1),
.contact-table td:nth-child(1) {
  width: 25%;
}

.contact-table th:nth-child(2),
.contact-table td:nth-child(2) {
  width: 10%;
}

.contact-table th:nth-child(3),
.contact-table td:nth-child(3) {
  width: 24%;
}

.contact-table th:nth-child(4),
.contact-table td:nth-child(4) {
  width: 24%;
}

.contact-table th:nth-child(5),
.contact-table td:nth-child(5) {
  width: 14%;
}

.contact-table th:nth-child(6),
.contact-table td:nth-child(6) {
  width: 3%;
}

.contact-table tbody tr:hover {
  background: var(--color-surface-subtle);
}

.contact-row-arrow {
  color: var(--color-ink-soft);
}

.partner-select {
  display: grid;
  width: 100%;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.partner-select:hover {
  background: var(--color-surface-subtle);
}

.partner-select[aria-current="true"] {
  border-left-color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.partner-select strong,
.partner-select span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-contact-table {
  min-width: 42rem;
}

.account-surface > .surface-header {
  margin: 0;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-line);
}

.account-table-wrap {
  overflow-x: auto;
  /* A hidden label in a header cell is placed against the table's own box, so it cannot
     push the page sideways on a phone (it measured 15px). */
  position: relative;
}

.account-table {
  width: 100%;
  min-width: 40rem;
  border-collapse: collapse;
  text-align: left;
}

.accounts-list-table {
  min-width: 58rem;
  table-layout: fixed;
}

/* All accounts: the account, its stage, the partner's people and company -- the account's
   name given the most room (Nico, 2026-09-28). */
.accounts-list-table th:nth-child(1),
.accounts-list-table td:nth-child(1) {
  width: 46%;
}

.accounts-list-table th:nth-child(2),
.accounts-list-table td:nth-child(2) {
  width: 14%;
}

.accounts-list-table th:nth-child(3),
.accounts-list-table td:nth-child(3) {
  width: 22%;
}

.accounts-list-table th:nth-child(4),
.accounts-list-table td:nth-child(4) {
  width: 18%;
}

.account-group-cell {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* Prospects adds the account's contacts after its stage. */
.accounts-list-table.is-prospects th:nth-child(1),
.accounts-list-table.is-prospects td:nth-child(1) {
  width: 40%;
}

.accounts-list-table.is-prospects th:nth-child(2),
.accounts-list-table.is-prospects td:nth-child(2) {
  width: 20%;
}

.accounts-list-table.is-prospects th:nth-child(3),
.accounts-list-table.is-prospects td:nth-child(3) {
  width: 12%;
}

.accounts-list-table.is-prospects th:nth-child(4),
.accounts-list-table.is-prospects td:nth-child(4),
.accounts-list-table.is-prospects th:nth-child(5),
.accounts-list-table.is-prospects td:nth-child(5) {
  width: 14%;
}

.prospect-contacts {
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.prospect-contacts .is-none {
  color: var(--color-ink-muted);
}

.account-table tbody tr:hover {
  background: var(--color-surface-subtle);
}

.account-table th,
.account-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-line);
  vertical-align: middle;
}

.account-table th {
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-name {
  display: block;
  font-weight: 700;
}

.account-domain {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.account-row-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.account-row-link:hover .account-name {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.account-contacts-table table {
  width: 100%;
  border-collapse: collapse;
}

.account-contacts-table {
  overflow-x: auto;
}

.account-contacts-table th,
.account-contacts-table td {
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: middle;
}

.account-contacts-table th {
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.account-contact-row-button {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 750;
  text-align: left;
  cursor: pointer;
}

.account-contact-row-button:hover,
.account-contact-row-button:focus-visible {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.sprint-contact-link {
  appearance: none;
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-accent-strong);
  background: transparent;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 42%, transparent);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
  cursor: pointer;
}

.sprint-contact-link:hover {
  text-decoration-color: currentColor;
}

.sprint-contact-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0.125rem;
}

.segmented-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.segmented-options label,
.inline-check {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.segmented-options input,
.inline-check input {
  width: auto;
  margin: 0;
}

.load-more-row {
  display: flex;
  justify-content: center;
}

.account-identity-domain a:hover {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* The account's name takes the whole width beside its tools (2026-09-29, Nico). */
.account-identity-main h1 {
  max-width: none;
  overflow-wrap: anywhere;
}

.account-identity-domain {
  margin: var(--space-2) 0 0;
  color: var(--color-ink-soft);
  overflow-wrap: anywhere;
}

.identity-linked-value {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 650;
}

.account-archive-action {
  min-height: var(--control-height);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-control);
  color: var(--color-danger);
  background: transparent;
  font-weight: 650;
}

.account-archive-action:hover {
  background: var(--color-danger-soft);
}

.salesforce-edit-section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.salesforce-edit-section h3,
.salesforce-edit-section p {
  margin-top: 0;
}

.salesforce-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

#account-archive-modal .danger-button {
  margin-right: 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border-radius: 999px;
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 650;
}

.pill.is-active,
.pill.is-customer,
/* Its own name rather than borrowing the customer's: the two mean different things and
   whoever changes one should not change the other by accident. */
.pill.is-archived,
/* The one lifecycle where silence would mislead: they were a customer and are not. */
.pill.is-former-customer {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.account-state {
  display: grid;
  min-height: 18rem;
  place-items: center;
  align-content: center;
  gap: var(--space-3);
  padding: var(--space-8);
  text-align: center;
}

.account-state.is-denied .state-symbol {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.spinner {
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--color-line);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.detail-grid > div {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-line);
}

.detail-grid dt {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.detail-grid dd {
  margin: var(--space-1) 0 0;
  font-weight: 650;
}

.danger-button {
  min-height: var(--control-height);
  margin-right: auto;
  padding: 0 var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-danger) 40%, var(--color-danger-line));
  border-radius: var(--radius-control);
  color: var(--color-danger);
  background: var(--color-danger-soft);
  font-weight: 400;
}

.tertiary-button {
  display: inline-flex;
  min-height: var(--control-height);
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--color-ink-soft);
  background: transparent;
  font-weight: 400;
  white-space: nowrap;
}

.tertiary-button:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.contact-detail-section + .contact-detail-section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

.contact-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.contact-section-header h3 {
  margin: 0;
}

.compact-button {
  min-height: 2.25rem;
  padding-inline: var(--space-3);
  font-size: var(--text-xs);
}

.text-action {
  padding: var(--space-1);
  border: 0;
  color: var(--color-accent-strong);
  background: transparent;
  font-size: var(--text-xs);
  font-weight: 650;
}

.text-action:hover {
  text-decoration: underline;
}

.files-header {
  align-items: flex-start;
}

.files-header p {
  margin: var(--space-1) 0 0;
  font-size: var(--text-xs);
}

.files-state {
  display: grid;
  min-height: 10rem;
  place-items: center;
  align-content: center;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  text-align: center;
}

.files-state .state-symbol {
  margin-bottom: var(--space-1);
}

.files-state p {
  max-width: 24rem;
  margin: 0;
}

.files-state.is-error .state-symbol {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.files-state.is-denied .state-symbol {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.file-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.file-card {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.file-card-top,
.file-card-actions,
.file-inline-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* The glyph sits in its own column beside the name, so a name that wraps wraps under
   itself rather than under the mark that labels it. */
.file-card-copy {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  min-width: 0;
  gap: var(--space-1) var(--space-3);
}

.file-card-copy > .muted {
  grid-column: 2;
}

/* What the row is, before its name is read (2026-09-30, Nico): a mark of its own for each
   kind, drawn in the kind's colour on a soft tile -- a PDF red, a deck amber, a document
   blue, a sheet green -- no letters to read. */
.file-glyph {
  display: inline-grid;
  flex: none;
  place-items: center;
  align-self: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
}

.file-glyph svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.file-glyph.is-pdf {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.file-glyph.is-pdf svg path:last-child {
  fill: currentColor;
}

.file-glyph.is-deck {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.file-glyph.is-sheet {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.file-glyph:is(.is-doc, .is-image) {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

/* Several files chosen at once: how many, in the tile. */
.file-glyph.is-count {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.file-glyph.is-large {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-md);
}

.file-glyph.is-large svg {
  width: 2rem;
  height: 2rem;
}

/* The preview of a file the browser cannot draw: its mark, name and kind, and Download. */
.file-preview-stage.is-card {
  display: grid;
  place-items: center;
}

.file-preview-card {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  max-width: 26rem;
  padding: var(--space-6);
  text-align: center;
}

.file-preview-card-name {
  color: var(--color-ink);
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}

.file-preview-card p {
  margin: 0;
  font-size: var(--text-sm);
}

.file-preview-card .primary-button {
  margin-top: var(--space-3);
}

.file-name {
  overflow-wrap: anywhere;
}

/* A PDF opens where it is. It is a button rather than a link because there is no address
   to copy: the grant behind it lives for minutes and belongs to this session. */
button.file-name-open {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

button.file-name-open:hover,
button.file-name-open:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* The preview itself: the page behind it stays, dimmed, because a file is read against
   the record it hangs on. */
.file-preview {
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal);
  display: grid;
  place-items: center;
  padding: var(--space-6);
}

/* Same treatment as a drawer's scrim: the record the file hangs on stays visible behind
   it, out of focus rather than switched off. */
.file-preview-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(15 20 24 / 42%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

@media (prefers-reduced-transparency: reduce) {
  .file-preview-scrim {
    background: rgb(15 20 24 / 80%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.file-preview-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(62rem, 100%);
  height: min(90vh, 100%);
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}

.file-preview-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.file-preview-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-preview-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
}

.file-preview-stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: var(--space-4);
  color: var(--color-ink-soft);
  background: var(--color-canvas);
  font-size: var(--text-sm);
}

.file-preview-stage.is-error {
  color: var(--color-danger);
}

.file-preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--color-canvas);
}

@media (max-width: 48rem) {
  .file-preview {
    padding: 0;
  }

  .file-preview-panel {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
  }
}

.file-status {
  flex: 0 0 auto;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  color: var(--color-warning);
  background: var(--color-warning-soft);
  font-size: var(--text-xs);
  font-weight: 700;
}

.file-status.is-available {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.file-status.is-rejected {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.file-meta,
.file-state-copy {
  margin: var(--space-2) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.file-state-copy {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-warning-soft);
}

.file-state-copy.is-rejected {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.file-card-actions {
  justify-content: flex-start;
  margin-top: var(--space-3);
}

.text-action.is-danger {
  color: var(--color-danger);
}

.file-upload-form,
.file-inline-form {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* The upload sits between the header and the list, as its own quiet form: the drop zone
   carries the colour, the frame around it does not. */
.file-upload-form {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
}

.file-upload-form label:first-child,
.file-inline-form label:first-child {
  margin-top: 0;
}

/* An empty list and an open upload say the same thing; the upload wins. */
.files-panel.is-uploading .files-state.is-empty {
  display: none;
}

.file-drop {
  position: relative;
  display: block;
  margin: 0;
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  font-weight: 400;
  cursor: pointer;
  transition: border-color 140ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 140ms cubic-bezier(0.16, 1, 0.3, 1);
}

.file-drop input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.file-drop:hover,
.file-drop.is-dragging,
.file-drop:focus-within {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.file-drop:focus-within {
  outline: 2px solid var(--color-focus);
}

.file-drop.has-file {
  border-style: solid;
  border-color: var(--color-line);
  background: var(--color-surface);
}

.file-drop.has-file:hover,
.file-drop.has-file:focus-within {
  border-color: var(--color-accent);
}

.file-drop.is-busy {
  cursor: progress;
  opacity: 0.72;
}

.file-drop-invite {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-5);
  text-align: center;
  pointer-events: none;
}

.file-drop-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0.55rem;
  border-radius: 999px;
  color: var(--color-accent);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.06), 0 0 0 1px var(--color-line);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.file-drop.is-dragging .file-drop-icon {
  transform: translateY(-3px);
}

.file-drop-copy {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.file-drop-title {
  color: var(--color-ink);
  font-size: var(--text-sm);
}

.file-drop-title strong {
  color: var(--color-accent-strong);
  font-weight: 650;
}

.file-drop-note {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* The chosen file, in the shape it will have in the list. */
.file-drop-chosen {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  pointer-events: none;
}

.file-drop-chosen .file-drop-title {
  font-weight: 600;
}

.file-drop-change {
  color: var(--color-accent-strong);
  font-size: var(--text-sm);
  font-weight: 600;
}

.file-upload-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-4);
}

.file-upload-details label {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.file-upload-details label[hidden] {
  display: none;
}

.file-duplicate-confirm {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
}

.file-duplicate-confirm input {
  width: auto;
  min-height: 0;
}

.file-inline-actions {
  justify-content: flex-end;
  margin-top: var(--space-4);
}

.file-upload-form .file-inline-actions,
.file-upload-form .error {
  margin: 0;
}

.file-upload-progress {
  display: grid;
  gap: var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.file-upload-progress[hidden] {
  display: none;
}

.file-upload-track {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-surface-subtle);
}

.file-upload-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .file-drop,
  .file-drop-icon,
  .file-upload-fill {
    transition: none;
  }
}

.file-duplicate-warning {
  margin-bottom: 0;
  background: var(--color-warning-soft);
}

.file-archive-confirm p {
  margin: var(--space-2) 0 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.research-migration-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
  font-size: var(--text-sm);
}

.research-migration-note strong {
  flex: 0 0 auto;
  color: var(--color-ink);
}

.research-list {
  display: grid;
  gap: var(--space-5);
}

.research-digest {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
}

.research-digest-compact {
  margin: var(--space-2) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.research-digest-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.research-digest-header h3,
.research-digest-header h4,
.research-digest-header p,
.research-digest-message p {
  margin: 0;
}

.research-digest-header h3,
.research-digest-header h4 {
  margin-top: var(--space-1);
}

.research-digest-header .muted {
  max-width: 72ch;
  margin-top: var(--space-1);
}

.research-digest-message {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
  font-size: var(--text-sm);
}

.research-digest-editor {
  display: grid;
  gap: var(--space-2);
}

.research-digest-editor[hidden] {
  display: none;
}

.research-digest-editor label {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
}

.research-digest-editor textarea {
  width: 100%;
  min-height: 13rem;
  margin: 0;
  resize: vertical;
}

.research-digest-editor-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.research-digest-editor-meta span:last-child {
  white-space: nowrap;
}

.research-digest-summary {
  max-height: 28rem;
  margin: 0;
  padding: var(--space-4);
  overflow: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  color: var(--color-ink);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.6;
  white-space: pre-wrap;
}

.research-digest-review {
  border-top: 1px solid var(--color-line);
  padding-top: var(--space-3);
}

.research-digest-review > summary {
  cursor: pointer;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 700;
}

.research-digest-facts {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0;
}

.research-digest-fact-group {
  display: grid;
  gap: var(--space-2);
}

.research-digest-fact-group h5 {
  margin: 0;
  font-size: var(--text-sm);
}

.research-digest-fact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
}

.research-digest-fact textarea {
  min-height: 4.5rem;
  margin: 0;
  resize: vertical;
}

.research-digest-fact label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.research-digest-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* The setup's dropdowns are the app's own, like every other one (2026-09-28): its custom
   picker drew a second kind of arrow at the far edge of the field. */

.research-card {
  padding: var(--space-5);
}

.research-card.is-draft {
  border-color: var(--color-warning);
}

.research-card.is-approved {
  border-color: var(--color-success);
}

.research-card-header,
.research-subheading,
.research-source-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.research-card-header {
  align-items: flex-start;
  flex-wrap: nowrap;
}

.research-card-heading {
  min-width: 0;
}

.research-card-header h3,
.research-subheading h4,
.research-card-section p {
  margin: 0;
}

.research-card-header .badge-row {
  margin-bottom: var(--space-2);
}

.research-card-header .state-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
}

.pill.is-manual {
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.research-body {
  margin: var(--space-5) 0 0;
  overflow-wrap: anywhere;
}

.research-body.is-preview {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 20;
  line-clamp: 20;
}

.research-body > * {
  margin: 0;
}

.research-body > * + * {
  margin-top: var(--space-3);
}

.research-body h3,
.research-body h4,
.research-body h5 {
  color: var(--color-heading);
  font-weight: 800;
  line-height: 1.2;
}

.research-body h3 {
  font-size: var(--text-lg);
}

.research-body h4,
.research-body h5 {
  font-size: var(--text-md);
}

.research-body ul,
.research-body ol {
  padding-left: var(--space-5);
}

.research-body li + li {
  margin-top: var(--space-2);
}

.research-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-line);
}

.research-markdown-table {
  width: 100%;
  min-width: 38rem;
  border-collapse: collapse;
}

.research-markdown-table th,
.research-markdown-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

.research-markdown-table th {
  background: var(--color-surface-subtle);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: 800;
}

.research-markdown-table tr:last-child td {
  border-bottom: 0;
}

.research-card-section {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.research-source-list,
.research-finding-list {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

.research-source-list li,
.research-finding-list li {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
}

.research-source-list li > div,
.research-finding-list li {
  display: grid;
  gap: var(--space-1);
}

.research-category {
  width: max-content;
  padding: var(--space-1) var(--space-2);
  border-radius: 999px;
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  font-size: var(--text-xs);
  font-weight: 700;
}

.research-subheading h4 {
  font-size: var(--text-md);
  line-height: 1.35;
}

/* 72ch is the readable measure for prose you sit and read. A finding is scanned in a
   drawer that is already as wide as the screen, where the cap only left half of it empty
   and pushed the list further down. */
.research-finding-statement {
  line-height: 1.55;
  white-space: pre-wrap;
}

.research-finding-statement.is-collapsed {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

.research-finding-toggle {
  width: max-content;
  margin-top: var(--space-1);
}

.research-finding-controls {
  display: flex;
  gap: var(--space-4);
  justify-content: flex-end;
}

.research-modal {
  width: min(56rem, calc(100vw - 2 * var(--space-5)));
}

.account-dossier-main .surface,
.account-dossier-main .state-panel,
.account-dossier-main .overview-state,
.account-section-drawer-body .surface,
.account-section-drawer-body .state-panel,
.account-section-drawer-body .overview-state {
  border-radius: 0;
  box-shadow: none;
}

.account-dossier-main .surface,
.account-section-drawer-body .surface {
  padding: var(--space-4) 0;
  border: 0;
  border-top: 1px solid var(--color-line);
  background: transparent;
}

.account-dossier-main .surface-header,
.account-section-drawer-body .surface-header {
  margin-bottom: var(--space-4);
}

/* The Opportunity drawer lays its facts and products out in layout.css; these list rows
   are for the page column only. Reaching the drawer too, they set label and value side
   by side inside the drawer's cells and left each cell half empty. */
.account-dossier-main .overview-facts,
.account-dossier-main .commercial-summary-grid {
  border-bottom: 1px solid var(--color-line);
}

.account-dossier-main .overview-facts > div,
.account-dossier-main .commercial-summary-grid > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.35fr) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-2) 0;
}

.account-dossier-main .overview-facts > div:nth-child(even),
.account-dossier-main .commercial-summary-grid > div + div {
  border-left: 0;
}

.account-dossier-main .research-migration-note,
.account-section-drawer-body .research-migration-note {
  padding: var(--space-3) 0;
  border-width: 1px 0;
  border-radius: 0;
  background: transparent;
}

.account-dossier-main .research-list,
.account-section-drawer-body .research-list {
  gap: 0;
}

.account-dossier-main .research-card,
.account-section-drawer-body .research-card {
  padding: var(--space-4) 0;
  border-width: 0 0 1px;
}

.account-dossier-main .research-card.is-draft,
.account-dossier-main .research-card.is-approved,
.account-section-drawer-body .research-card.is-draft,
.account-section-drawer-body .research-card.is-approved {
  border-color: var(--color-line);
}

.account-dossier-main .research-source-list li,
.account-dossier-main .research-finding-list li,
.account-section-drawer-body .research-source-list li,
.account-section-drawer-body .research-finding-list li {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
}

.account-dossier-main .account-contacts-table,
.account-dossier-main .table-shell,
.account-section-drawer-body .account-contacts-table,
.account-section-drawer-body .table-shell {
  border: 0;
  border-radius: 0;
}

.account-dossier-main .account-contacts-table th,
.account-dossier-main .account-contacts-table td,
.account-section-drawer-body .account-contacts-table th,
.account-section-drawer-body .account-contacts-table td {
  padding: var(--space-2) var(--space-3);
}

.account-dossier-main .account-contacts-table th,
.account-section-drawer-body .account-contacts-table th {
  background: transparent;
}

.account-dossier-main .pill,
.account-section-drawer-body .pill {
  border-radius: var(--radius-sm);
}

/* Org chart: a functional account map, deliberately distinct from invented reporting lines. */
.org-chart-count {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.account-contact-inline-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-accent-strong);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.account-contact-inline-link:hover,
.account-contact-inline-link:focus-visible {
  text-decoration-color: currentColor;
}

.nav-sub-link {
  min-height: 2rem;
  margin-left: 2.5rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-nav-ink-soft);
  font-size: var(--text-xs);
  font-weight: 700;
}

.nav-sub-link:hover,
.nav-sub-link:focus-visible,
.nav-sub-link[aria-current="page"] {
  color: var(--color-nav-ink);
  background: var(--color-nav-active);
}

.org-function {
  min-width: 0;
  border-top: 3px solid var(--color-accent-strong);
  background: var(--color-surface-subtle);
}

.org-function:nth-child(2) {
  border-top-color: var(--color-success);
}

.org-function:nth-child(3) {
  border-top-color: var(--color-warning);
}

.org-function.is-unmapped {
  border-top-color: var(--color-line-strong);
}

.org-function > header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-4);
}

.org-function > header h3,
.org-function > header span {
  margin: 0;
}

.org-function > header h3 {
  font-size: var(--text-md);
}

.org-function > header span {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.org-function-body {
  border-top: 1px solid var(--color-line);
}

.org-department + .org-department {
  border-top: 1px solid var(--color-line);
}

.org-department summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-4);
  cursor: pointer;
  list-style: none;
}

.org-department summary::-webkit-details-marker {
  display: none;
}

.org-department summary > span:first-child {
  display: grid;
  gap: var(--space-1);
}

.org-department summary strong {
  font-size: var(--text-sm);
}

.org-department summary small {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.45;
}

.org-department-tally {
  padding: 0.15rem var(--space-2);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.org-department[open] > summary {
  background: var(--color-surface);
}

.org-people-list,
.org-role-list {
  display: grid;
  gap: var(--space-1);
  padding: 0 var(--space-3) var(--space-3);
}

.org-people-list {
  padding-top: var(--space-1);
  border-bottom: 1px solid var(--color-line);
}

.org-person,
.org-role-button,
.org-role-contact {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.org-person {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

.org-person:hover,
.org-person:focus-visible,
.org-role-contact:hover,
.org-role-contact:focus-visible {
  background: var(--color-accent-soft);
}

.org-person-initials {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--color-accent-strong);
  color: var(--color-on-accent);
  font-size: var(--text-xs);
  font-weight: 800;
}

.org-person > span:last-child,
.org-role-button {
  display: grid;
  gap: 0.1rem;
}

.org-person strong,
.org-role-button span,
.org-role-contact strong {
  font-size: var(--text-sm);
}

.org-person small,
.org-role-button small,
.org-role-contact span {
  overflow: hidden;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.org-role-button {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
}

.org-role-button::after {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  color: var(--color-ink-soft);
  content: "›";
  transform: translateY(-50%);
}

.org-role-button:hover,
.org-role-button:focus-visible,
.org-role-button[aria-current="true"] {
  background: var(--color-surface);
  box-shadow: 0 2px 8px rgb(28 37 43 / 8%);
}

.org-role-button.is-primary span::before {
  display: inline-block;
  width: 0.42rem;
  height: 0.42rem;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--color-accent-strong);
  content: "";
  vertical-align: 0.08rem;
}

.org-role-button small {
  padding-right: var(--space-4);
}

.org-role-inspector {
  position: sticky;
  top: var(--space-4);
  min-height: 28rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 12px 32px rgb(28 37 43 / 10%);
}

.org-role-inspector-empty {
  display: grid;
  min-height: 28rem;
  padding: var(--space-8);
  place-content: center;
  text-align: center;
}

.org-role-inspector-empty svg {
  width: 2.5rem;
  margin: 0 auto var(--space-4);
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: round;
  stroke-width: 1.5;
}

.org-role-inspector-empty h3,
.org-role-inspector-empty p {
  margin: 0;
}

.org-role-inspector-empty p {
  max-width: 35ch;
  margin-top: var(--space-2);
  color: var(--color-ink-soft);
}

#org-role-detail {
  padding: var(--space-6);
}

#org-role-detail > header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: start;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

#org-role-detail > header > div {
  display: grid;
  gap: var(--space-1);
}

#org-role-detail > header span:first-child {
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 750;
}

#org-role-detail h3,
#org-role-detail h4,
#org-role-detail p {
  margin: 0;
}

#org-role-detail h3 {
  font-size: var(--text-xl);
  line-height: 1.15;
}

#org-role-detail h4 {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

#org-role-detail > section {
  padding-top: var(--space-5);
}

.org-role-mandate {
  padding-top: var(--space-5);
  color: var(--color-ink-soft);
  line-height: 1.6;
}

#org-role-detail ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.2rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
}

.org-role-angle {
  padding: var(--space-4);
  margin-top: var(--space-5);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
}

.org-role-angle p {
  color: var(--color-accent-strong);
  line-height: 1.55;
}

.org-role-contact-list {
  display: grid;
  gap: var(--space-1);
}

.org-role-contact {
  display: grid;
  gap: 0.1rem;
  padding: var(--space-2);
  border-radius: var(--radius-md);
}

#org-role-detail .org-role-disclaimer {
  padding-top: var(--space-5);
  margin-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.org-chart-empty {
  grid-column: 1 / -1;
  padding: var(--space-10);
  border-top: 1px solid var(--color-line);
  text-align: center;
}

.org-chart-empty h3,
.org-chart-empty p {
  margin: 0;
}

.org-chart-empty p {
  margin-top: var(--space-2);
  color: var(--color-ink-soft);
}

@media (max-width: 54rem) {
  .org-role-inspector {
    position: static;
  }
}

.org-library-board {
  --org-line: var(--color-line-strong);
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.org-library-preferences {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) minmax(12rem, 16rem) minmax(12rem, 16rem);
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-4);
}

.org-library-preferences label {
  display: grid;
  gap: var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 750;
}

.org-library-preferences select {
  min-height: 2.75rem;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-weight: 700;
}

.org-library-department-picker {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding: 0 0 var(--space-3);
  scroll-padding-inline: var(--space-2);
}

.org-library-department-tab {
  flex: 0 0 auto;
  max-width: 14rem;
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 750;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.org-library-department-tab:hover,
.org-library-department-tab:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.org-library-department-tab[aria-current="true"] {
  border-color: var(--color-accent-strong);
  background: var(--color-ink);
  color: var(--color-surface);
}

.org-library-department-panel {
  position: relative;
  display: grid;
  gap: var(--space-3);
  min-width: 0;
  padding-top: var(--space-3);
}

.org-library-board.is-chart {
  min-width: 72rem;
}

.org-library-chart {
  --chart-line: color-mix(in srgb, var(--color-line-strong) 86%, transparent);
  display: grid;
  gap: var(--space-5);
  padding: 0 0 var(--space-3);
}

.org-library-chart-top {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: var(--space-4);
}

.org-library-chart-top::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: var(--space-4);
  background: var(--chart-line);
  content: "";
}

.org-library-chart-node {
  display: grid;
  gap: 0.15rem;
  min-width: 14rem;
  max-width: 19rem;
  justify-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  text-align: center;
}

.org-library-chart-node strong,
.org-library-chart-node span,
.org-library-chart-node small {
  min-width: 0;
}

.org-library-chart-node strong {
  font-size: var(--text-sm);
  line-height: 1.12;
}

.org-library-chart-node span,
.org-library-chart-node small {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.18;
}

.org-library-chart-node.is-ceo {
  min-width: 17rem;
  border-color: var(--color-accent-strong);
  background: var(--color-ink);
}

.org-library-chart-node.is-ceo strong,
.org-library-chart-node.is-ceo span,
.org-library-chart-node.is-ceo small {
  color: var(--color-surface);
}

.org-library-chart-node.is-group {
  width: 100%;
  min-height: 3.1rem;
  max-width: none;
  align-content: center;
  background: var(--color-surface-subtle);
}

.org-library-chart-groups {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--chart-group-count, 4), minmax(15rem, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.org-library-chart-groups::before {
  position: absolute;
  top: 0;
  left: calc((100% / var(--chart-group-count, 4)) / 2);
  right: calc((100% / var(--chart-group-count, 4)) / 2);
  height: 1px;
  background: var(--chart-line);
  content: "";
}

.org-library-chart-group {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
  padding-top: var(--space-6);
}

.org-library-chart-group::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: var(--space-6);
  background: var(--chart-line);
  content: "";
}

.org-library-chart-departments {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.org-library-chart-department {
  position: relative;
  display: grid;
  gap: var(--space-2);
}

.org-library-chart-department::before {
  width: 1px;
  height: var(--space-3);
  justify-self: center;
  background: var(--chart-line);
  content: "";
}

.org-library-chart-department-head {
  display: grid;
  gap: var(--space-1);
  min-height: 3.4rem;
  align-content: center;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 2px solid color-mix(in srgb, var(--color-accent) 66%, var(--color-line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent-soft) 72%, var(--color-surface));
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.org-library-chart-department-head strong,
.org-library-chart-department-head span {
  margin: 0;
}

.org-library-chart-department-head strong {
  font-size: var(--text-sm);
  line-height: 1.25;
}

.org-library-chart-department-head span {
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 750;
}

.org-library-chart-department-head:hover,
.org-library-chart-department-head:focus-visible,
.org-library-chart-department-head[aria-current="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.org-library-chart-roles {
  display: grid;
  gap: var(--space-1);
  padding: 0 var(--space-2);
}

.org-library-department-lead {
  display: grid;
  min-height: 13.25rem;
  grid-template-rows: auto auto minmax(2.75rem, 1fr) auto auto;
  gap: var(--space-2);
  align-content: start;
  width: 100%;
  padding: var(--space-4);
  border: 2px solid color-mix(in srgb, var(--color-accent) 72%, var(--color-line));
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-accent-soft) 88%, var(--color-surface)) 0%, var(--color-surface) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-surface) 78%, transparent);
  color: var(--color-ink);
  font: inherit;
  text-align: left;
}

.org-library-department-lead h3,
.org-library-department-lead p,
.org-library-department-lead small {
  margin: 0;
}

.org-library-department-lead h3 {
  font-size: var(--text-md);
  line-height: 1.2;
}

.org-library-department-lead p {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.org-library-node-type {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 1.3rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-accent-strong);
  color: var(--color-surface);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

.org-library-department-count {
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 750;
}

.org-library-department-lead:hover,
.org-library-department-lead:focus-visible,
.org-library-department-lead[aria-current="true"] {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent-soft) 82%, var(--color-surface));
}

.org-library-department-lead[aria-current="true"] {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.org-library-branch {
  width: 1px;
  height: var(--space-3);
  margin: calc(var(--space-3) * -1) auto 0;
  background: var(--color-line);
}

.org-library-roles {
  display: grid;
  gap: var(--space-2);
  padding: 0 var(--space-1);
}

.org-library-role,
.org-library-more {
  position: relative;
  display: grid;
  min-height: 10.25rem;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
  align-content: start;
  width: 100%;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-6) var(--space-3) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
}

.org-library-focus-tags {
  display: flex;
  min-height: 1.35rem;
  flex-wrap: wrap;
  gap: var(--space-1);
  overflow: visible;
  padding-top: var(--space-1);
}

.org-library-focus-tags > span {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.35rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 750;
  line-height: 1;
}

.org-library-focus-tags > .is-identity {
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.org-library-focus-tags > .is-budget {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.org-library-semperis-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-warning) 24%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-warning-soft) 88%, var(--color-surface));
  color: var(--color-warning);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: 850;
  line-height: 1;
}

.org-library-semperis-tag.is-priority-a {
  border-color: color-mix(in srgb, var(--color-warning) 26%, transparent);
  background: var(--color-warning-soft);
}

.org-library-semperis-tag.is-priority-c {
  border-color: color-mix(in srgb, var(--color-accent) 14%, transparent);
  background: color-mix(in srgb, var(--color-warning-soft) 55%, var(--color-surface));
  color: color-mix(in srgb, var(--color-warning) 82%, var(--color-ink));
}

.org-library-role.is-lead {
  border-color: var(--color-line-strong);
  background: var(--color-surface-subtle);
}

.org-library-role.is-chart-row {
  min-height: 3.35rem;
  grid-template-rows: auto auto auto;
  align-content: center;
  padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3);
}

.org-library-role.is-chart-row > span:not(.org-library-node-type):not(.org-library-focus-tags),
.org-library-role.is-chart-row small,
.org-library-role.is-chart-row .org-library-focus-tags {
  display: none;
}

.org-library-chart-roles .org-library-more {
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-surface) 86%, var(--color-surface-subtle));
}

.org-library-role::after {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  color: var(--color-ink-soft);
  content: "›";
  transform: translateY(-50%);
}

.org-library-role .org-library-node-type {
  background: var(--color-surface-subtle);
  color: var(--color-ink-soft);
}

.org-library-role:hover,
.org-library-role:focus-visible,
.org-library-role[aria-current="true"],
.org-library-more:hover,
.org-library-more:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.org-library-role[aria-current="true"] {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.org-library-role strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--text-sm);
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.org-library-role > span:not(.org-library-node-type):not(.org-library-focus-tags),
.org-library-role small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* The tag and the arrow share the card's right edge, side by side and both centred:
   the tag in the top corner sat right where the centred arrow is drawn in a short card,
   and the arrow ran through it. The tag stops a small gap short of the arrow. */
.org-library-role .org-library-semperis-tag {
  position: absolute;
  top: 50%;
  right: 1.625rem;
  transform: translateY(-50%);
}

/* Room for both on the right, so a long title wraps before it reaches the tag. */
.org-library-role:has(.org-library-semperis-tag) {
  padding-right: 3.75rem;
}

.org-library-role small {
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.org-library-role .org-library-focus-tags,
.org-library-role .org-library-focus-tags > span {
  display: flex;
  overflow: visible;
  color: inherit;
  font-size: 0.68rem;
  line-height: 1;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.org-library-role .org-library-focus-tags {
  flex-wrap: wrap;
}

.org-library-role .org-library-focus-tags > span {
  display: inline-flex;
}

.org-library-more {
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 750;
  text-align: center;
}

.org-library-no-results {
  display: grid;
  min-height: 18rem;
  place-content: center;
  text-align: center;
}

.org-library-no-results h2 {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-lg);
}

@media (max-width: 62rem) {
  .org-library-board {
    min-width: 0;
  }
}

.org-library-drawer-backdrop {
  position: fixed;
  inset: var(--header-height) 0 0 var(--nav-width);
  z-index: 65;
  background: rgb(28 37 43 / 18%);
}

.org-library-drawer {
  position: fixed;
  inset: var(--header-height) 0 0 auto;
  z-index: 70;
  display: grid;
  width: min(36rem, calc(100vw - var(--nav-width) - var(--space-4)));
  grid-template-rows: auto minmax(0, 1fr);
  border-left: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}

.org-library-drawer[hidden],
.org-library-drawer-backdrop[hidden] {
  display: none;
}

.org-library-drawer-header {
  display: flex;
  gap: var(--space-4);
  align-items: start;
  justify-content: space-between;
  padding: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}

.org-library-drawer-header > div {
  display: grid;
  min-width: 0;
  gap: var(--space-1);
}

.org-library-drawer-header span {
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 750;
}

.org-library-drawer-header h2 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.15;
}

.org-library-drawer-header .icon-button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.75;
}

.org-library-drawer-body {
  overflow: auto;
  padding: var(--space-6);
}

.org-library-detail-article {
  display: grid;
  gap: var(--space-5);
}

.org-library-detail-article > header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: start;
}

.org-library-detail-article h3,
.org-library-detail-article p {
  margin: 0;
}

.org-library-detail-article h3 {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.org-library-mandate {
  color: var(--color-ink-soft);
  line-height: 1.6;
}

.org-library-semperis-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-warning) 18%, var(--color-warning-line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-warning-soft) 72%, var(--color-surface));
}

.org-library-semperis-card h3 {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--color-warning) 78%, var(--color-ink));
}

.org-library-semperis-card p {
  color: var(--color-ink);
  line-height: 1.55;
}

.org-library-semperis-card .org-library-semperis-meta {
  color: color-mix(in srgb, var(--color-warning) 74%, var(--color-ink-soft));
  font-size: var(--text-xs);
  font-weight: 760;
}

.org-library-detail-article ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.2rem;
  color: var(--color-ink-soft);
  line-height: 1.5;
}

.org-library-angle {
  padding: var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-accent-soft);
}

.org-library-angle p {
  color: var(--color-accent-strong);
  line-height: 1.55;
}

.org-library-reference-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.org-library-reference-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  background: var(--color-surface-subtle);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 700;
}

.org-library-discovery {
  display: grid;
  gap: var(--space-3);
}

.org-library-discovery article {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.org-library-discovery p {
  color: var(--color-ink);
  font-weight: 650;
  line-height: 1.45;
}

.org-library-answer {
  display: grid;
  gap: var(--space-1);
}

.org-library-answer textarea {
  min-height: 5rem;
  resize: vertical;
  padding: var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font: inherit;
  line-height: 1.45;
}

.org-library-answer span {
  justify-self: end;
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: 750;
}

.org-library-detail-article .org-library-reference-note {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
}

.org-library-drawer-roles {
  display: grid;
  gap: var(--space-2);
}

.org-library-role.is-drawer-row {
  padding-right: var(--space-7);
}

@media (max-width: 75rem) {
  .org-library-preferences {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The contact card: one layout for every person, wherever they are opened. Who they are
   and the job this card is about, then how to reach them, then their other jobs and
   documents. Each part is a section under a small heading, divided by one hairline. */
.contact-card {
  display: grid;
  gap: var(--space-6);
}

.contact-card-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2) var(--space-5);
  align-items: start;
}

.contact-card-portrait {
  display: grid;
  width: 4.5rem;
  height: 4.5rem;
  grid-row: span 2;
  overflow: hidden;
  place-items: center;
  border-radius: 50%;
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
}

.contact-card-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-card-portrait svg {
  width: 2.75rem;
  height: 2.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
}

.contact-card-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0;
}

.contact-card-facts .is-wide {
  grid-column: 1 / -1;
}

.contact-card-facts dt {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.contact-card-facts dd {
  margin: var(--space-1) 0 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.contact-card-photo-actions,
.contact-card-job-actions,
.contact-card-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.contact-card-photo-actions {
  grid-column: 1;
  justify-content: center;
}

.contact-card-job-actions {
  grid-column: 2;
}

.contact-card-section {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.contact-card-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.contact-card-section-header h3 {
  margin: 0;
  font-size: var(--text-sm);
}

.contact-card-section-header .text-action {
  font-size: var(--text-xs);
}

/* Reach: each address a row one click from use. */
.contact-card-methods {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-card-method {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.contact-card-method-link {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  background: var(--color-surface);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.contact-card-method-link:hover,
.contact-card-method-link:focus-visible {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.contact-card-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.contact-card-method-copy {
  display: grid;
  min-width: 0;
}

.contact-card-method-copy strong {
  overflow-wrap: anywhere;
  font-size: var(--text-sm);
  font-weight: 600;
}

.contact-card-method-copy span {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.contact-card-method .contact-card-row-actions {
  flex: none;
}

.contact-card-profile-form {
  display: grid;
  gap: var(--space-2);
}

.contact-card-profile-form label {
  display: grid;
  gap: var(--space-1);
  margin: 0;
}

.contact-card-profile-form label > span {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

.contact-card-profile-actions {
  display: flex;
  gap: var(--space-2);
}

/* Other jobs: a short timeline, current first. */
.contact-card-history {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-card-history li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.contact-card-history li:first-child {
  border-top: 0;
  padding-top: 0;
}

.contact-card-history-copy {
  display: grid;
  gap: 0.125rem;
  min-width: 0;
  font-size: var(--text-sm);
}

.contact-card-history li.is-past .contact-card-history-copy {
  color: var(--color-ink-soft);
}

.contact-card-history-dates {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.contact-card-empty {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* The documents panel brings its own section chrome; the card's hairline replaces it. */
.contact-card-files > .files-panel {
  padding-top: 0;
  border-top: 0;
}

@media (max-width: 36rem) {
  .contact-card-facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The person list: one row layout for Contacts, Colleagues and a partner's contacts.
   Who (name over position · department), the page's own column, how to reach them,
   the status where the list holds former jobs too, and the arrow. The whole row opens
   the contact card. */
.people-table {
  table-layout: fixed;
}

/* Partners and Colleagues: person, email, phone, the arrow -- email and phone each a column
   of its own (2026-09-30, Nico). Contacts, with its organization, is sized above. */
.people-table:not(.contact-table) th:nth-child(1) {
  width: 34%;
}

.people-table:not(.contact-table) th.person-col-email {
  width: 34%;
}

.people-table:not(.contact-table) th.person-col-phone {
  width: 20%;
}

.people-table th:last-child {
  width: 2.5rem;
}

.person-row {
  cursor: pointer;
}

.person-row:hover {
  background: var(--color-surface-subtle);
}

.person-row td {
  vertical-align: top;
}

.person-name,
.person-role {
  display: block;
}

/* The photo before the name (2026-09-30, Nico): round, 3.75rem, the silhouette in its place
   when there is none; name, position and the sprint line in the column beside it. */
.person-who {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: center;
}

.person-who > :not(.person-avatar) {
  grid-column: 2;
}

.person-avatar {
  display: grid;
  grid-row: 1 / span 3;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  overflow: hidden;
  border-radius: 50%;
  color: var(--color-ink-muted);
  background: var(--color-surface-subtle);
}

.person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.person-avatar svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.person-name {
  /* 24px at least, the smallest target WCAG 2.5.8 allows (it measured 21px). */
  min-height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.person-row:hover .person-name,
.person-name:focus-visible {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Copy in a person row (2026-09-30, Nico): the name opens the card, the copy mark beside it
   copies the name; an email copies itself. The mark shows while pointed at, "Copied" in its
   place after the click -- the card's own name and email, in a row. */
.person-name-line {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.person-copy,
.person-email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 1.5rem;
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  cursor: copy;
}

.person-copy {
  flex: none;
  color: var(--color-ink-muted);
}

.person-email {
  max-width: 100%;
  margin-left: calc(-1 * var(--space-1));
  color: var(--color-accent);
  text-align: left;
}

.person-copy-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:is(.person-copy, .person-email) .prospect-copy-icon {
  flex: none;
  width: 0.9rem;
  height: 0.9rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0;
  transition: opacity 120ms ease;
}

.person-name-line:hover .person-copy .prospect-copy-icon,
.person-copy:focus-visible .prospect-copy-icon,
.person-email:hover .prospect-copy-icon,
.person-email:focus-visible .prospect-copy-icon {
  opacity: 1;
}

:is(.person-copy, .person-email):hover {
  background: var(--color-surface-subtle);
}

.person-email:hover {
  color: var(--color-accent-strong);
}

:is(.person-copy, .person-email):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.person-copied {
  display: none;
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: 600;
}

:is(.person-copy, .person-email).is-copied .person-copied {
  display: inline;
}

:is(.person-copy, .person-email).is-copied .prospect-copy-icon {
  display: none;
}

@media (hover: none) {
  .person-copy .prospect-copy-icon {
    opacity: 1;
  }
}

.person-role,
.person-context,
.person-reach {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.person-context {
  color: var(--color-ink);
  white-space: pre-line;
}

.person-role.is-empty,
.person-context.is-empty,
.person-reach.is-empty {
  /* The soft ink: quiet, and still 4.5:1 (the muted one measured 3.5:1). */
  color: var(--color-ink-soft);
}

.person-reach a {
  display: block;
  width: fit-content;
  max-width: 100%;
  /* A 24px target, like the name beside it (it measured 21px). */
  min-height: 1.5rem;
  line-height: 1.5rem;
  /* An address stays whole on its line, cut with an ellipsis; the title holds all of it. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-accent);
  text-decoration: none;
}

.person-reach a:hover {
  text-decoration: underline;
}

.person-open {
  text-align: right;
}

/* Narrow, the phone goes first, and on Contacts the organization. */
@media (max-width: 52rem) {
  .people-table th.person-col-phone,
  .people-table td.person-phone-cell,
  .contact-table th:nth-child(3),
  .contact-table td:nth-child(3) {
    display: none;
  }
}

/* Corporate groups in the account list (0099). The group is named once, above its
   accounts, as a quiet heading row rather than a band of colour; its accounts are set in
   under it on a vertical hairline, the parent first. A company on its own is an
   ordinary row. */
.account-table .account-group-row th {
  padding: var(--space-5) var(--space-4) var(--space-2);
  border-bottom: 0;
  color: var(--color-accent);
  background: transparent;
  /* A step above the company names under it, never below them. */
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

.account-table tbody .account-group-row:hover {
  background: transparent;
}

.account-group-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.account-group-icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-row-in-group td:first-child {
  position: relative;
  padding-left: calc(var(--space-4) + var(--space-6));
}

/* No horizontal lines inside a group; the vertical one under the group's icon holds its
   accounts together and ends with the last of them. */
.account-table .account-row-in-group td {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 0;
}

.account-row-in-group td:first-child::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--space-4) + 0.5rem);
  width: 1px;
  background: var(--color-line-strong);
  content: "";
}

.account-row-in-group:not(:has(+ .account-row-in-group)) td:first-child::before {
  bottom: 50%;
}

/* Under the group's name its companies read as ordinary text: the group carries the
   weight, they do not compete with it. */
.account-row-in-group .account-name {
  font-weight: 500;
}

.account-row-in-group .account-row-link {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.account-group-parent {
  flex: none;
  padding: 0.0625rem var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* On the account itself: which group it belongs to, under its name. */
.account-group-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.account-group-line a {
  color: var(--color-ink);
  font-weight: 500;
  text-decoration: none;
}

.account-group-line a:hover,
.account-group-line a:focus-visible {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.account-group-role::before {
  margin-right: var(--space-2);
  color: var(--color-ink-muted);
  content: "\00b7";
}

/* The import panel: a drop area, a tally of what would change, and the plan grouped the
   way the list will be. */
.group-import-body {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.group-import-intro {
  margin: 0;
  color: var(--color-ink-soft);
  line-height: 1.55;
}

.group-import-drop {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.group-import-drop input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.group-import-drop:hover,
.group-import-drop.is-dragging,
.group-import-drop:focus-within {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.group-import-drop.has-file {
  padding: var(--space-3) var(--space-4);
  border-style: solid;
}

.group-import-drop-title {
  color: var(--color-accent-strong);
  font-weight: 600;
}

.group-import-drop-note {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.group-import-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.group-import-tally strong {
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.group-import-tally.is-ambiguous strong {
  color: var(--color-warning, var(--color-ink));
}

.group-import-preview {
  display: grid;
}

.group-import-group {
  padding: var(--space-4) 0 var(--space-2);
  border-top: 1px solid var(--color-line);
}

.group-import-group-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
}

.group-import-group-count {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.group-import-rows {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.group-import-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
}

.group-import-copy {
  display: grid;
  min-width: 0;
}

.group-import-name {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-import-detail {
  overflow: hidden;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-import-row.is-unchanged .group-import-name,
.group-import-row.is-skipped .group-import-name {
  color: var(--color-ink-muted);
}

.group-import-action {
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.group-import-action.is-group {
  color: var(--color-accent-strong);
}

.group-import-action.is-create {
  color: var(--color-success, var(--color-accent-strong));
}

.group-import-action.is-unchanged,
.group-import-action.is-skipped {
  color: var(--color-ink-muted);
  font-weight: 500;
}

.group-import-action.is-ambiguous {
  color: var(--color-warning, var(--color-danger));
}

.group-import-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.group-import-spacer {
  flex: 1 1 auto;
}

/* Prospects in the territory plan's tiers (0106): Large, Medium, Small, then the rest.
   The tier is a blue heading like a group's, and each account carries its rank in a
   fixed, quiet column before the name. */
.account-table .prospect-tier-row th {
  padding: var(--space-6) var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--color-line);
  /* In the ink: the account names under it are the page's blue links. */
  color: var(--color-ink);
  background: transparent;
  /* A step above the company names under it, as the group headings are. */
  font-size: var(--text-lg);
  font-weight: 650;
  letter-spacing: -0.01em;
  text-transform: none;
}

.account-table tbody .prospect-tier-row:first-child th {
  padding-top: var(--space-3);
}

.account-table tbody .prospect-tier-row:hover {
  background: transparent;
}

.prospect-tier-label {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

.prospect-tier-count {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.prospect-row .account-row-link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

/* On Prospects the account names are links in the page's blue, at the size and a lighter
   weight than the contact names in Today above them. */
.prospect-row .account-name {
  color: var(--color-accent);
  font-weight: 500;
}

.prospect-row .account-row-link:hover .account-name {
  color: var(--color-accent-strong);
}

.prospect-rank {
  display: inline-block;
  min-width: 1.5rem;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.prospect-list-row {
  grid-template-columns: auto 1.5rem minmax(0, 1fr) auto;
}

.prospect-list-row .prospect-rank {
  min-width: 0;
}

.prospect-list-choice {
  min-height: 2rem;
  margin-top: var(--space-1);
  padding-block: 0;
  font-size: var(--text-sm);
}

.prospect-list-row.is-ambiguous .prospect-list-choice {
  border-color: color-mix(in srgb, var(--color-warning) 55%, var(--color-line-strong));
}

/* Once a list is read the zone steps back to one line: the file, and a way to swap it. */
.file-drop.has-file .file-drop-invite {
  grid-template-columns: auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.file-drop.has-file .file-drop-icon {
  width: 2rem;
  height: 2rem;
  padding: 0.45rem;
}

/* The Prospect Sprint (0108). One row per person: who, where they are and what to do, and
   what can happen next. Hairline rows like the lists around it; the stage is the one
   tinted mark, and a date turns red only when it has passed. */
.prospect-today {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.prospect-today[hidden] {
  display: none;
}

.prospect-today-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.prospect-today-summary:empty {
  display: none;
}

.prospect-today-summary {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.prospect-today-body {
  display: grid;
  gap: var(--space-5);
}

.prospect-today-note {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.prospect-entry-list,
.prospect-coverage-list,
.prospect-people-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prospect-entry {
  display: grid;
  /* Each row is its own grid, so the person column has a set width: that is what lines
     the stage and the step up from one person to the next, whatever the buttons need. */
  grid-template-columns: 34rem minmax(0, 1fr) auto;
  grid-template-areas:
    "who what actions"
    "panel panel panel"
    "error error error";
  align-items: center;
  /* No row gap: the panel, error and history rows are empty most of the time, and a gap
     around each would pad every person with space that holds nothing. */
  gap: 0 var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.prospect-entry-panel:not([hidden]),
.prospect-entry-error:not([hidden]) {
  margin-top: var(--space-2);
}

.prospect-entry.is-busy {
  opacity: 0.6;
}

.prospect-entry-who { grid-area: who; }
.prospect-entry-what { grid-area: what; }
.prospect-entry-actions { grid-area: actions; }
.prospect-entry-panel { grid-area: panel; }
.prospect-entry-error { grid-area: error; margin: 0; }

.prospect-entry-who,
.prospect-entry-what {
  display: grid;
  min-width: 0;
  gap: 0.15rem;
}

.prospect-entry-name-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
}

.prospect-entry-name {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prospect-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.prospect-entry-meta > * + *::before {
  margin-right: var(--space-2);
  color: var(--color-ink-muted);
  content: "·";
}

.prospect-entry-account {
  color: var(--color-accent);
  text-decoration: none;
}

.prospect-entry-account:hover {
  text-decoration: underline;
}

/* The step, the date under it. */
.prospect-entry-what {
  grid-template-columns: minmax(0, 1fr);
}

.prospect-entry-step {
  font-size: var(--text-sm);
}

.prospect-entry-due {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.prospect-entry-due.is-overdue,
.prospect-sprint-next.is-overdue {
  color: var(--color-danger);
  font-weight: 600;
}

.prospect-stage {
  display: inline-block;
  justify-self: start;
  padding: 0.1rem var(--space-2);
  border-radius: 999px;
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.prospect-stage.is-engage,
.prospect-stage.is-conversation {
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.prospect-stage.is-meeting,
.prospect-stage.is-ready {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.prospect-stage.is-stopped {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.prospect-entry-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.prospect-entry-more {
  position: relative;
}

.prospect-entry-more > summary {
  list-style: none;
  cursor: pointer;
}

.prospect-entry-more > summary::-webkit-details-marker {
  display: none;
}

/* The accounts pages' ⋯ after New account: a square like the page's other buttons, its
   menu of rarer actions -- Import list, Documents, Import groups -- opening under it. */
.accounts-more {
  position: relative;
}

.accounts-more[hidden] {
  display: none;
}

.accounts-more > .accounts-more-toggle {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  list-style: none;
  cursor: pointer;
}

.accounts-more > .accounts-more-toggle::-webkit-details-marker {
  display: none;
}

.accounts-more-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 20;
  display: grid;
  min-width: 12rem;
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgb(16 24 40 / 0.12);
}

.accounts-more-item {
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: transparent;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.accounts-more-item[hidden] {
  display: none;
}

.accounts-more-item:hover,
.accounts-more-item:focus-visible {
  background: var(--color-surface-subtle);
}

.prospect-entry-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 5;
  display: grid;
  min-width: 13rem;
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgb(16 24 40 / 0.12);
}

.prospect-entry-menu-item {
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: transparent;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.prospect-entry-menu-item:hover,
.prospect-entry-menu-item:focus-visible {
  background: var(--color-surface-subtle);
}

.prospect-entry-menu-item.is-danger {
  color: var(--color-danger);
}

/* On an account's own list the ⋯ menu leads with what happened: the step's outcomes, a
   line, then the rest. */
.prospect-entry-menu.has-outcomes {
  min-width: 16rem;
}

.prospect-entry-menu-rule {
  width: auto;
  margin: var(--space-1) var(--space-2);
  border: 0;
  border-top: 1px solid var(--color-line);
}

.prospect-entry-form {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.prospect-entry-form-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.prospect-entry-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.prospect-entry-fields label {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--text-xs);
}

.prospect-entry-note-field {
  flex: 1 1 18rem;
}

.prospect-entry-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.prospect-coverage-row {
  display: grid;
  /* The account, then what it has and still needs; the tier and rank and the where-from
     columns left it (2026-09-29, Nico). */
  grid-template-columns: minmax(10rem, 1.2fr) minmax(15rem, 2fr);
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
}

.prospect-coverage-list {
  margin-top: var(--space-2);
}

.prospect-coverage-name {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.prospect-coverage-name:hover {
  text-decoration: underline;
}

.prospect-coverage-count {
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

/* The Prospects list column: people against the target, the stage, the next date. */
.prospect-sprint-cell {
  font-variant-numeric: tabular-nums;
}

.prospect-sprint-cell > * + * {
  margin-left: var(--space-2);
}

.prospect-sprint-coverage.is-short {
  color: var(--color-warning);
}

.prospect-sprint-next {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.prospect-sprint-empty {
  padding: var(--space-5);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
  text-align: center;
}

.prospect-sprint-empty p {
  margin: 0;
}

.prospect-sprint-empty p + p {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}

.prospect-people-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
}

.prospect-people-copy {
  display: grid;
  min-width: 0;
}

.prospect-people-name {
  font-weight: 600;
}

.prospect-people-add {
  flex: none;
}

/* Normal weight, above the theme's heavier button type. */
.prospect-people-row .prospect-people-add.secondary-button {
  font-weight: 400;
}

/* The standard framed button, at normal weight (not blue since 2026-09-29). */
.prospect-people-row .prospect-people-add:not(:disabled) {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
  background: var(--color-surface);
}

.prospect-people-row .prospect-people-add:not(:disabled):hover {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

/* Already in the sprint, or asked not to be contacted: the whole row steps back. */
.prospect-people-row.is-taken .prospect-people-copy,
.prospect-people-row.is-taken .prospect-people-copy .muted {
  color: var(--color-ink-muted);
}

.prospect-people-row.is-taken .prospect-people-add:disabled {
  border-color: var(--color-line);
  color: var(--color-ink-muted);
  background: var(--color-surface-subtle);
  opacity: 1;
  cursor: default;
}

/* The search sits above the list, the magnifier inside the field. */
.prospect-people-search {
  position: relative;
  display: block;
  margin: 0 0 var(--space-3);
}

.prospect-people-search svg {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  transform: translateY(-50%);
  pointer-events: none;
}

.prospect-people-search input {
  width: 100%;
  padding-left: calc(var(--space-3) + 1.5rem);
}

.prospect-settings-form {
  display: grid;
  align-content: start;
  gap: var(--space-2);
}

.prospect-settings-targets {
  display: grid;
  grid-template-columns: 1fr 6rem;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  border: 0;
}

.prospect-settings-targets legend {
  margin-bottom: var(--space-2);
  font-weight: 650;
}

.prospect-settings-targets label {
  margin: 0;
  font-weight: 500;
}

@media (max-width: 760px) {
  .prospect-entry {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "who"
      "what"
      "actions"
      "panel"
      "error";
  }

  .prospect-entry-actions {
    justify-content: flex-start;
  }

  .prospect-coverage-row {
    grid-template-columns: 1fr auto;
  }
}

/* The Prospect Sprint's events (0109) and its place on the Today page. */
.prospect-event {
  display: grid;
  grid-template-columns: 34rem minmax(0, 1fr) auto;
  grid-template-areas:
    "who what actions"
    "panel panel panel"
    "error error error";
  align-items: center;
  gap: 0 var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-line);
}

.prospect-sprint-events .prospect-event {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "what actions"
    "panel panel"
    "error error";
}

.prospect-sprint-events .prospect-event .prospect-entry-who {
  display: none;
}

.prospect-event-what {
  display: grid;
  grid-area: what;
  gap: 0.15rem;
  min-width: 0;
}

.prospect-event-account {
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
}

.prospect-event-account:hover {
  text-decoration: underline;
}

.prospect-event.is-event .prospect-entry-step {
  color: var(--color-success);
  font-weight: 600;
}

.prospect-sprint-events {
  display: grid;
  gap: var(--space-1);
}

.prospect-sprint-events h3 {
  margin: 0;
  font-size: var(--text-sm);
}

.today-prospecting {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.today-prospecting-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.today-prospecting-header h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.today-prospecting-link {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
}

.today-prospecting-link:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .prospect-event {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "who" "what" "actions" "panel" "error";
  }
}

.prospect-event-what .prospect-entry-due {
  grid-column: auto;
}

/* Column headings over the Prospect Sprint's lists: the rows' own grid, in the table
   header style used across the app. */
/* The same type as the account list's column headings below (.account-table th and the
   theme's th), so the two sets of headings on the page read as one system. */
.prospect-list-header {
  display: grid;
  grid-template-columns: 34rem minmax(0, 1fr) auto;
  gap: 0 var(--space-4);
  padding: var(--space-2) 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 760px) {
  .prospect-list-header {
    display: none;
  }
}

/* A name in the Prospect Sprint's lists opens the contact card: the app's link blue. */
button.prospect-entry-name {
  padding: 0;
  border: 0;
  color: var(--color-accent);
  background: none;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

button.prospect-entry-name:hover {
  text-decoration: underline;
}

button.prospect-entry-name:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.prospect-copy-icon {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Contact history on the contact card (0108): a thin line with a point per touch, newest
   on top. Replies and meetings get the colour; everything else stays quiet. */
/* With the person in more than one account's sprint, each record is named by its account. */
.contact-card-sprint-account {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.contact-card-timeline {
  position: relative;
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0 0 0 var(--space-5);
  list-style: none;
}

.contact-card-timeline::before {
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0.3rem;
  width: 1px;
  background: var(--color-line-strong);
  content: "";
}

.contact-card-timeline-point {
  position: relative;
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.contact-card-timeline-point[hidden] {
  display: none;
}

.contact-card-timeline-point::before {
  position: absolute;
  top: 0.35rem;
  left: calc(-1 * var(--space-5) + 0.05rem);
  width: 0.55rem;
  height: 0.55rem;
  border: 2px solid var(--color-surface);
  border-radius: 50%;
  background: var(--color-line-strong);
  box-shadow: 0 0 0 1px var(--color-line-strong);
  content: "";
}

.contact-card-timeline-point.is-reply::before {
  background: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent);
}

.contact-card-timeline-point.is-meeting::before {
  background: var(--color-success);
  box-shadow: 0 0 0 1px var(--color-success);
}

.contact-card-timeline-point.is-stop::before {
  background: var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger);
}

.contact-card-timeline-date {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  line-height: 1.5rem;
}

.contact-card-timeline-what {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
  min-width: 0;
}

.contact-card-timeline-point.is-reply .contact-card-timeline-label {
  color: var(--color-accent-strong);
  font-weight: 600;
}

.contact-card-timeline-point.is-meeting .contact-card-timeline-label {
  color: var(--color-success);
  font-weight: 600;
}

.contact-card-timeline-channel {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.contact-card-timeline-note {
  flex-basis: 100%;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

/* Today, reworked: the counts are the navigation. One list at a time under quiet tabs; the
   Start list carries its pace as a meter and a batch bar that exists only while something
   is ticked. Each row has one outlined action -- the usual next click -- and quiet
   alternatives, with rarer moves behind "⋯". */
.prospect-today-header {
  align-items: center;
}

/* Find a person: the page's search field under the heading, its matches dropping under
   it -- the name, then the account and the step in quiet text. */
.prospect-find {
  position: relative;
  max-width: 34rem;
  margin: var(--space-3) 0 var(--space-4);
}

/* Prospecting's search sits as far under the heading as Opportunities' does (2026-09-29):
   no empty header row above it, no margin of its own on the field. */
.prospect-today-header:has(> .prospect-today-summary:empty) {
  display: none;
}

#accounts-app .prospect-find-field {
  margin-top: 0;
}

.prospect-find-field input {
  margin: 0;
}

.prospect-find-results {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  max-height: 22rem;
  margin: 0;
  padding: var(--space-1);
  overflow-y: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgb(16 24 40 / 0.12);
  list-style: none;
}

.prospect-find-results[hidden] {
  display: none;
}

.prospect-find-result {
  display: grid;
  gap: 0.125rem;
  width: 100%;
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.prospect-find-result:hover,
.prospect-find-result:focus-visible {
  background: var(--color-surface-subtle);
}

/* From the keyboard the row also carries the ring, inside its edge. */
.prospect-find-result:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.prospect-find-name {
  color: var(--color-accent-strong);
  font-size: var(--text-sm);
  font-weight: 500;
}

.prospect-find-meta {
  overflow: hidden;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prospect-find-none {
  padding: var(--space-2) var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.prospect-today-summary:empty {
  display: none;
}

/* Pace and coverage (2026-09-29): a secondary button in the title row, framed and filled
   as the ⋯ beside it; only the icon's place is its own. */
.prospect-settings-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Not bold, the icon's lines thin (2026-09-29, Nico) -- in every theme, whose secondary
   buttons set their own weight. */
#accounts-app .prospect-settings-button {
  font-weight: 400;
}

.prospect-settings-button[hidden] {
  display: none;
}

.prospect-settings-button svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
}

.prospect-today-tabs {
  display: flex;
  flex-wrap: wrap;
  /* The tabs have no side padding, so the first label starts on the same line as the pace
     bar and the lists below; the gap keeps them apart. */
  gap: 0 var(--space-6);
  border-bottom: 1px solid var(--color-line);
}

.prospect-today-tab {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: -1px;
  padding: var(--space-2) 0 calc(var(--space-2) + 2px);
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--color-ink-soft);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.prospect-today-tab:hover {
  color: var(--color-ink);
}

.prospect-today-tab[aria-selected="true"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-ink);
}

.prospect-today-tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

.prospect-today-tab-count {
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.prospect-today-tab[aria-selected="true"] .prospect-today-tab-count {
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.prospect-today-tab-count.is-overdue {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.prospect-today-tab.is-empty .prospect-today-tab-label {
  color: var(--color-ink-muted);
}

.prospect-today-panel {
  display: grid;
  gap: var(--space-3);
}

.prospect-today-empty {
  margin: 0;
  padding: var(--space-6) 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  text-align: center;
}

.prospect-pace {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.prospect-pace-meter {
  flex: 0 0 10rem;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-surface-subtle);
  box-shadow: inset 0 0 0 1px var(--color-line);
}

.prospect-pace-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
  transition: width 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.prospect-pace-text {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.prospect-pace-text strong {
  color: var(--color-ink);
}

/* Row actions. */
.prospect-entry-actions {
  align-items: center;
  gap: var(--space-1);
}

.prospect-action {
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* Framed buttons share one face, never a blue one (2026-09-29, Nico): a white face, the
   strong hairline, the ink; a quiet grey when pointed at. */
.prospect-action.is-primary {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
  background: var(--color-surface);
}

.prospect-action.is-primary:hover {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.prospect-action.is-quiet {
  color: var(--color-ink-soft);
}

.prospect-action.is-quiet:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.prospect-action:focus-visible,
.prospect-action-more:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.prospect-action:disabled {
  cursor: default;
  opacity: 0.5;
}

.prospect-action-more {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  list-style: none;
  cursor: pointer;
}

.prospect-action-more::-webkit-details-marker {
  display: none;
}

.prospect-action-more:hover,
.prospect-entry-more[open] > .prospect-action-more {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

/* The Start list, grouped by company: the company once, its people as tight rows with no
   step column (every one of them starts with a connection request). */
.prospect-entry.is-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "who actions"
    "panel panel"
    "error error";
  padding: var(--space-2) 0;
  border-top-color: color-mix(in srgb, var(--color-line) 60%, transparent);
}

/* A company over its people (2026-09-29, Nico; before: tagged
   design-backup/prospecting-rail-2026-09-29), as on Today: the group's mark and the name,
   the people along a thin upright line that starts under the mark and ends with them. */
.prospect-account-group {
  margin-top: var(--space-4);
  padding: var(--space-2) 0 var(--space-1);
  border-top: 1px solid var(--color-line);
}

.prospect-account-group-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.prospect-account-group-head .account-group-icon {
  width: 1rem;
  height: 1rem;
  stroke: color-mix(in srgb, var(--color-accent) 70%, var(--color-ink-muted));
}

.prospect-account-group-rows {
  margin-left: 0.5rem;
  padding-left: calc(var(--space-6) - 0.5rem);
  border-left: 1px solid var(--color-line-strong);
}

/* The column titles over a grouped list move in with the people they name. */
.prospect-entry-list.is-grouped > .prospect-list-header {
  padding-left: var(--space-6);
}

.prospect-entry-list.is-grouped > .prospect-account-group:first-child {
  margin-top: 0;
}

.prospect-account-group-name {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 650;
  text-decoration: none;
}

.prospect-account-group-name:hover {
  text-decoration: underline;
}

@media (max-width: 760px) {
  .prospect-entry.is-compact {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "who" "actions" "panel" "error";
  }
}

/* Documents on the contact card, under the profile links: a list, not cards -- the type
   mark and the name, and a click on the name previews it. */
.contact-card-files .file-list {
  gap: 0;
}

.contact-card-files .file-card {
  padding: var(--space-2) 0;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  background: transparent;
}

.contact-card-files .file-card:last-child {
  border-bottom: 0;
}

.contact-card-files .files-state {
  min-height: 0;
  padding: var(--space-4);
}

.contact-card-files .files-header p {
  display: none;
}

/* Company names in the Today lists read exactly like the account names in the list below
   (.prospect-row .account-name): the page's blue, the list's size, normal weight. Still
   links -- they underline on hover. */
.prospect-account-group-name,
.prospect-entry-account,
.prospect-coverage-name,
.prospect-event-account {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* The company heading over its people: in ink, the size and weight of Today's (2026-09-29). */
.prospect-account-group .prospect-account-group-name {
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 600;
}

/* An account's own list: people grouped under their next step, one line each. The list
   is one grid and every row a subgrid of it: the person, the profile link in a column of
   its own, then one toolbar of outcomes that always ends at the same right edge. */
.account-prospect-sprint {
  container: prospect-sprint / inline-size;
}

.prospect-entry-list.is-lined {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-3);
}

.prospect-step-group {
  display: flex;
  flex-wrap: wrap;
  grid-column: 1 / -1;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  margin-top: var(--space-8);
  padding-bottom: var(--space-2);
}

.prospect-step-group:first-child {
  margin-top: 0;
}

/* Shaped like the group headings on All accounts and Prospects, in the page's ink, a step
   below them here because they sit under the section's own heading. */
.prospect-step-group-step {
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 650;
  letter-spacing: -0.01em;
}

.prospect-step-group-facts {
  margin-left: auto;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.prospect-step-group-due {
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

.prospect-step-group-due::before {
  content: "·";
  margin: 0 var(--space-2);
  color: var(--color-ink-muted);
}

.prospect-step-group-due.is-overdue {
  color: var(--color-danger);
  font-weight: 600;
}

.prospect-entry.is-lined {
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-areas:
    "who actions"
    "panel panel"
    "error error";
  column-gap: var(--space-3);
  padding: var(--space-2) 0;
}

.prospect-entry.is-lined .prospect-entry-who {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.prospect-entry.is-lined .prospect-entry-name-line {
  flex: none;
}

.prospect-entry.is-lined .prospect-entry-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prospect-entry.is-lined.is-stopped .prospect-entry-name {
  color: var(--color-ink-soft);
}

/* A joined toolbar of buttons -- the events band on an account's page: one height, one
   frame, the likely choice told apart by its blue label. */
.prospect-entry-actions.is-segmented > .prospect-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2rem;
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: 0;
  color: var(--color-ink);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 400;
  transition: background-color 120ms ease, color 120ms ease;
}

.prospect-entry-actions.is-segmented {
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0;
}

.prospect-entry-actions.is-segmented > * + * {
  margin-left: -1px;
}

.prospect-entry-actions.is-segmented > .prospect-action:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.prospect-entry-actions.is-segmented > .prospect-action:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.prospect-entry-actions.is-segmented > .prospect-action:only-child {
  border-radius: var(--radius-md);
}

.prospect-entry-actions.is-segmented > .prospect-action.is-primary {
  color: var(--color-ink);
  font-weight: 400;
}

.prospect-entry-actions.is-segmented > .prospect-action:hover {
  z-index: 1;
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.prospect-entry-actions.is-segmented > .prospect-action.is-primary:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.prospect-entry-actions.is-segmented > .prospect-action:focus-visible {
  z-index: 2;
}

/* The account's Revic link before a check's joined buttons: its own button, the usual gap
   away, and the joined group starts fresh after it. */
.prospect-entry-actions.is-segmented > .prospect-sprint-revic {
  margin-right: var(--space-2);
}

.prospect-entry-actions.is-segmented > .prospect-sprint-revic + .prospect-action {
  margin-left: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.prospect-event .prospect-sprint-revic-link.secondary-button {
  height: 2rem;
  min-height: 2rem;
  font-size: var(--text-sm);
}

.prospect-event .prospect-entry-panel .prospect-sprint-revic-form {
  justify-content: flex-start;
}

/* A narrow column -- a smaller window, or the page beside its side panel -- puts the
   person above their buttons instead of squeezing both onto one line. */
@container prospect-sprint (max-width: 44rem) {
  .prospect-entry-list.is-lined {
    grid-template-columns: minmax(0, 1fr);
  }

  .prospect-entry.is-lined {
    grid-template-areas:
      "who"
      "actions"
      "panel"
      "error";
    row-gap: var(--space-2);
    padding: var(--space-3) 0;
  }

  .prospect-entry.is-lined .prospect-entry-actions {
    justify-content: flex-start;
  }
}

@container prospect-sprint (max-width: 30rem) {
  .prospect-entry.is-lined .prospect-entry-who {
    flex-wrap: wrap;
    gap: 0 var(--space-3);
  }

  .prospect-entry-actions.is-segmented {
    justify-content: flex-start;
  }

  .prospect-entry-actions.is-segmented > .prospect-action {
    padding: 0 var(--space-2);
    font-size: var(--text-xs);
  }

  .prospect-step-group-facts {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* Events: a quiet band under the people, one line, its buttons drawn like theirs. */
.account-prospect-sprint .prospect-sprint-events:not([hidden]) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-1) var(--space-5);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.account-prospect-sprint .prospect-sprint-events h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

.prospect-sprint-events-body {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.prospect-sprint-events-note {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.prospect-sprint-events-note:empty,
.account-prospect-sprint .prospect-sprint-events .prospect-entry-list:empty {
  display: none;
}

.account-prospect-sprint .prospect-sprint-events .prospect-event {
  column-gap: var(--space-5);
  padding: 0;
  border-top: 0;
}

.account-prospect-sprint .prospect-sprint-events .prospect-event .prospect-action.is-primary {
  background: var(--color-surface);
}

@media (max-width: 760px) {
  .account-prospect-sprint .prospect-sprint-events:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .account-prospect-sprint .prospect-sprint-events .prospect-event {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "what"
      "actions"
      "panel"
      "error";
  }

  .account-prospect-sprint .prospect-sprint-events .prospect-entry-actions {
    justify-content: flex-start;
    margin-top: var(--space-2);
  }
}

/* An account's Contacts (the section drawer): one toolbar -- search, which contacts, Add
   contact -- over a quiet list. Each person is their name in the link blue with the role
   under it, how to reach them in a column of its own, and their place in the Prospect
   Sprint as one button of a fixed width at the right. */
.account-contacts .account-contact-toolbar {
  grid-template-columns: minmax(10rem, 1fr) minmax(9.5rem, 12rem) auto auto auto;
  align-items: center;
  gap: var(--space-3);
}

.account-contacts .account-contact-toolbar .primary-button[hidden],
.account-contacts .account-contact-toolbar .secondary-button[hidden],
.account-contacts .account-contact-toolbar .account-contact-prompts[hidden],
.account-contacts .account-contact-toolbar .account-contact-imports[hidden] {
  display: none;
}

/* Prompt, beside Add contact: the toolbar's own secondary button, the word and a caret
   after it, since it opens a list. The list drops under it, aligned
   to its right edge, and copies the prompt chosen. */
.account-contact-prompt-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  cursor: pointer;
  white-space: nowrap;
}

.account-contact-prompt-toggle::-webkit-details-marker {
  display: none;
}

.account-contact-prompt-caret {
  width: 0.875rem;
  height: 0.875rem;
  margin-right: calc(-1 * var(--space-1));
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 120ms ease;
}

.account-contact-prompts[open] .account-contact-prompt-caret {
  transform: rotate(180deg);
}

.account-contact-prompts > .prospect-prompt-menu {
  z-index: 20;
}

/* Import: the same button and caret as Prompt; its menu names where the file comes from. */
.account-contact-imports > .account-contact-import-menu {
  z-index: 20;
  min-width: 13rem;
}

.account-contact-imports.is-busy > summary {
  pointer-events: none;
  opacity: 0.7;
}

.account-contact-imports[open] .account-contact-prompt-caret {
  transform: rotate(180deg);
}

/* What an import did, person by person, under the toolbar: added ones in the success
   colour, the rest quiet, with why where there is a reason. */
.account-contact-import-result:not([hidden]) {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
  font-size: var(--text-sm);
}

.account-contact-import-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.account-contact-import-head strong {
  font-weight: 600;
}

.account-contact-import-list {
  display: grid;
  gap: var(--space-1);
  max-height: 14rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.account-contact-import-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--space-2);
}

.account-contact-import-name {
  font-weight: 500;
}

.account-contact-import-outcome {
  color: var(--color-ink-soft);
}

.account-contact-import-list .is-created .account-contact-import-outcome {
  color: var(--color-success);
}

.account-contact-import-list .is-failed .account-contact-import-outcome {
  color: var(--color-danger);
}

.account-contact-import-problem {
  margin: 0;
  color: var(--color-ink-soft);
}

.account-contact-import-note {
  flex-basis: 100%;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.account-contact-search {
  position: relative;
  display: block;
}

.account-contact-search svg {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--color-ink-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  transform: translateY(-50%);
  pointer-events: none;
}

.account-contact-search input {
  width: 100%;
  padding-left: calc(var(--space-3) + 1.5rem);
}

.account-contacts .account-contacts-table td {
  padding-block: var(--space-3);
}

.account-contact-identity {
  min-width: 0;
}

.account-contacts .account-contact-row-button {
  display: block;
  color: var(--color-accent);
  font-weight: 600;
}

.account-contacts .account-contact-row-button:hover,
.account-contacts .account-contact-row-button:focus-visible {
  color: var(--color-accent-strong);
}

.account-contact-role {
  display: block;
  margin-top: 0.1rem;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.account-contacts .account-contact-standing {
  width: 1%;
  padding-left: var(--space-6);
}

.account-contacts .account-contact-standing > * + * {
  margin-left: var(--space-2);
}

/* Delete, at the row's right end: a quiet bin that shows while the row is pointed at or
   holds the keyboard focus, and turns the danger colour when pointed at itself. */
.account-contacts .account-contact-delete {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  min-height: 0;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-ink-muted);
  background: transparent;
  vertical-align: middle;
  opacity: 0;
  cursor: pointer;
  transition: opacity 120ms ease, color 120ms ease, background-color 120ms ease;
}

.account-contacts .account-contact-delete svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-contacts tr:hover .account-contact-delete,
.account-contacts tr:focus-within .account-contact-delete {
  opacity: 1;
}

.account-contacts .account-contact-delete:hover {
  border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-surface));
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.account-contacts .account-contact-delete:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

@media (hover: none) {
  .account-contacts .account-contact-delete {
    opacity: 1;
  }
}

/* The main-contact mark: the icon alone in a square button, blue where it can be set,
   greyed where it is. */
.account-contacts .account-contact-main.secondary-button {
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
  vertical-align: middle;
}

.account-contact-main svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.account-contacts .account-contact-main:not(.is-taken):not(:disabled) {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-line));
  color: var(--color-accent-strong);
  background: var(--color-surface);
}

.account-contacts .account-contact-main:not(.is-taken):not(:disabled):hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

/* Marked, the main-contact button still takes the mark away when pressed. */
.account-contacts .account-contact-main.is-taken:not(:disabled):hover {
  border-color: var(--color-line-strong);
  color: var(--color-ink-soft);
}

.account-contacts .account-contact-main.is-taken {
  border-color: var(--color-line);
  color: var(--color-ink-muted);
  background: var(--color-surface-subtle);
  box-shadow: none;
  opacity: 1;
  cursor: default;
}

.account-contacts .account-contact-main.is-taken:not(:disabled) {
  cursor: pointer;
}

@media (max-width: 760px) {
  .account-contacts .account-contact-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Add people to sprint: the standard framed button (not blue since 2026-09-29). */
.prospect-sprint-heading .prospect-sprint-add.secondary-button {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
  background: var(--color-surface);
  font-weight: 400;
}

.prospect-sprint-heading .prospect-sprint-add.secondary-button:hover {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

/* On every Prospect Sprint row the profile link is LinkedIn's mark alone, frameless, with a
   quiet square behind it on hover; without a link the mark is grey and adds one. */
.prospect-entry.is-iconic .prospect-action-open.is-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  text-decoration: none;
  cursor: pointer;
}

.prospect-entry.is-iconic .prospect-action-open.is-icon:hover {
  background: var(--color-surface-subtle);
}

.prospect-linkedin-mark {
  width: 1.625rem;
  height: 1.625rem;
}

.prospect-action-open.is-missing .prospect-linkedin-square {
  fill: var(--color-ink-muted);
}

.prospect-action-open.is-missing .prospect-linkedin-mark {
  opacity: 0.55;
}

.prospect-action-open.is-missing:hover .prospect-linkedin-mark {
  opacity: 0.8;
}

/* The explanation beside the ⋯ menu: a small card level with the item pointed at, on
   the menu's right (or left, where the window ends first). */
.prospect-entry-menu-hint {
  position: absolute;
  left: calc(100% + var(--space-2));
  width: 18rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgb(16 24 40 / 0.12);
  font-size: var(--text-xs);
  line-height: 1.45;
  pointer-events: none;
}

.prospect-entry-menu-hint p {
  margin: 0;
}

/* When to pick it, in the ink; what happens then, quieter under it. */
.prospect-entry-menu-hint-when {
  color: var(--color-ink);
  font-weight: 500;
}

.prospect-entry-menu-hint p + p {
  margin-top: var(--space-1);
}

.prospect-entry-menu-hint.is-left {
  right: calc(100% + var(--space-2));
  left: auto;
}

.prospect-entry-menu-hint[hidden] {
  display: none;
}

/* Beside the LinkedIn mark, the row's blue squares: a paper plane (sent on LinkedIn), an
   envelope (sent by email), and ⋯ for everything else. The mark's size (1.625rem) and
   rounding, the usual blue of an action; an invisible margin widens each click target. */
.prospect-entry.is-iconic .prospect-entry-actions {
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
}

.prospect-entry.is-iconic .prospect-icon-button,
.prospect-entry.is-iconic .prospect-entry-more > .prospect-action-more {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  min-height: 1.625rem;
  padding: 0;
  border: 1px solid var(--color-line-strong);
  border-radius: 0.3rem;
  color: var(--color-ink);
  background: var(--color-surface);
  font-size: var(--text-sm);
  line-height: 1;
  cursor: pointer;
}

.prospect-entry.is-iconic .prospect-icon-button::after,
.prospect-entry.is-iconic .prospect-entry-more > .prospect-action-more::after {
  content: "";
  position: absolute;
  inset: -0.25rem;
}

.prospect-entry.is-iconic .prospect-icon-button:hover,
.prospect-entry.is-iconic .prospect-entry-more > .prospect-action-more:hover,
.prospect-entry.is-iconic .prospect-entry-more[open] > .prospect-action-more {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.prospect-entry.is-iconic .prospect-icon-button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.prospect-entry.is-iconic .prospect-icon-button:disabled {
  cursor: default;
  opacity: 0.5;
}

.prospect-send-icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* They looked at the seller's profile (seen in Sales Navigator): a small green mark with
   an open eye beside the name, on every Prospect Sprint row. */
.prospect-viewed {
  display: inline-flex;
  flex: none;
  align-items: center;
  align-self: center;
  gap: 0.25rem;
  padding: 0.05rem var(--space-2) 0.05rem 0.35rem;
  border-radius: 999px;
  color: var(--color-success);
  background: var(--color-success-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

.prospect-viewed-icon {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The account's Revic link before Add people to sprint: its height and frame. Saved, the
   usual blue with Revic's green mark; not saved, grey throughout. The pencil after a saved
   link shows while the button is pointed at (or reached by keyboard, or its field is
   open); on a touch screen it stays. */
.prospect-sprint-revic {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.prospect-sprint-heading .prospect-sprint-revic-link.secondary-button,
.prospect-event .prospect-sprint-revic-link.secondary-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 400;
  text-decoration: none;
}

.prospect-sprint-heading .prospect-sprint-revic-link.is-set,
.prospect-event .prospect-sprint-revic-link.is-set {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-line));
  color: var(--color-accent-strong);
  background: var(--color-surface);
}

.prospect-sprint-heading .prospect-sprint-revic-link.is-set:hover,
.prospect-event .prospect-sprint-revic-link.is-set:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.prospect-sprint-heading .prospect-sprint-revic-link:not(.is-set),
.prospect-event .prospect-sprint-revic-link:not(.is-set) {
  color: var(--color-ink-muted);
}

.prospect-sprint-revic-link .prospect-revic-icon {
  width: 0.7rem;
  height: 0.875rem;
}

.prospect-sprint-revic-link:not(.is-set) .prospect-revic-icon > * {
  fill: var(--color-ink-muted);
}

.prospect-sprint-revic-link:not(.is-set) .prospect-revic-icon {
  opacity: 0.6;
}

.prospect-sprint-revic-edit {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
  background: none;
  opacity: 0;
  transition: opacity 120ms ease;
  cursor: pointer;
}

.prospect-sprint-revic-edit svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prospect-sprint-revic:hover .prospect-sprint-revic-edit,
.prospect-sprint-revic:focus-within .prospect-sprint-revic-edit,
.prospect-sprint-revic-edit[aria-expanded="true"] {
  opacity: 1;
}

.prospect-sprint-revic-edit:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.prospect-sprint-revic-edit:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

@media (hover: none) {
  .prospect-sprint-revic-edit {
    opacity: 1;
  }
}

.prospect-sprint-revic-editor:not([hidden]) {
  margin-top: calc(-1 * var(--space-2));
}

.prospect-sprint-revic-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
}

.prospect-sprint-revic-form input {
  flex: 1 1 18rem;
  min-width: 0;
  max-width: 32rem;
  margin: 0;
}

/* The two ways of sending: the standard framed button with the icon in the ink (2026-09-29:
   no longer a solid blue square). */
.prospect-entry.is-iconic .prospect-icon-button {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
  background: var(--color-surface);
}

.prospect-entry.is-iconic .prospect-icon-button:hover {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

/* The contact card's Prospect Sprint section, where a person on an account's own list is
   worked: the step and its date on the left, the LinkedIn mark, the two ways of sending
   and the ⋯ menu on the right, with a line under it before the rest of the card. */
.prospect-contact-sprint:not([hidden]) {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-line);
}

.prospect-contact-sprint h3 {
  margin: 0;
  font-size: var(--text-md);
}

/* Inside the card, under the send line, it is one more section of it. */
.prospect-contact-card > .prospect-contact-sprint:not([hidden]) {
  margin-bottom: 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 0;
}

/* First in the card, under the header's own line: no second line over it. */
.prospect-contact-card > .prospect-contact-sprint:first-child:not([hidden]) {
  padding-top: 0;
  border-top: 0;
}

/* The contact card's Copy a prompt for Revic bar: Revic's mark in the bar's square. Its
   menu names each prompt and shows how it begins. */
.prospect-wide-mark .prospect-revic-icon {
  width: 0.9rem;
  height: 1.1rem;
}

/* Revic's mark keeps its own green (its fill, prospectRevicIcon) in the bar's square and
   in the card's Revic button, as on the account page. */

.prospect-entry-menu.prospect-prompt-menu {
  width: 22rem;
  max-width: calc(100vw - 2 * var(--space-4));
  max-height: 20rem;
  overflow-y: auto;
}

.prospect-entry-menu-item.prospect-prompt-item {
  display: grid;
  gap: 0.125rem;
  min-height: 0;
  padding: var(--space-2) var(--space-3);
}

.prospect-prompt-title {
  font-weight: 500;
}

.prospect-prompt-preview {
  overflow: hidden;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.prospect-prompt-empty {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.prospect-prompt-manage {
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3) var(--space-1);
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
}

.prospect-entry.is-card {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "actions"
    "panel"
    "error";
  row-gap: var(--space-3);
  padding: var(--space-2) 0 0;
  border-top: 0;
}

/* The card's actions, one under the other: each a wide bar like the send line above them.
   The ⋯ menu opens under its bar. */
.prospect-entry.is-card .prospect-entry-actions.is-stacked {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-self: stretch;
  gap: var(--space-2);
}

summary.prospect-wide-action {
  list-style: none;
}

summary.prospect-wide-action::-webkit-details-marker {
  display: none;
}

.prospect-entry-more[open] > .prospect-wide-action {
  border-color: var(--color-ink-muted);
}

.prospect-entry-actions.is-stacked .prospect-entry-menu,
.prospect-prompt-bar > .prospect-entry-menu {
  left: 0;
  right: auto;
}

.prospect-wide-action:disabled {
  cursor: default;
  opacity: 0.5;
}

/* The card's Prospect Sprint as a guide (2026-09-27; the card before is tagged
   design-backup/contact-card-2026-09-27). Three numbered parts joined by a thin line --
   the prompt bar, the Sales Navigator bar, the Sent answers -- each on its number's own
   line with no heading over them (2026-09-29), then Something else happened? under a
   hairline. */
.prospect-entry.is-card {
  grid-template-areas: none;
}

.prospect-entry.is-card > *,
.prospect-guide .prospect-entry-actions {
  grid-area: auto;
}

.prospect-guide {
  display: grid;
  gap: var(--space-4);
}

.prospect-guide-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.prospect-guide-step {
  position: relative;
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  column-gap: var(--space-3);
  padding-bottom: var(--space-5);
}

.prospect-guide-step:last-child {
  padding-bottom: 0;
}

/* The line from one number down to the next. */
.prospect-guide-step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  bottom: var(--space-2);
  left: calc(0.875rem - 0.5px);
  width: 1px;
  background: var(--color-line);
}

.prospect-guide-number {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 40%, var(--color-line));
  border-radius: 50%;
  color: var(--color-accent-strong);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.prospect-guide-body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

/* A step without a title (2026-09-29, Nico): its bar on the number's own line, the number
   centred on the bar's height, the line to the next number starting under it. */
.prospect-guide-step.is-direct > .prospect-guide-number {
  margin-top: 0.375rem;
}

.prospect-guide-step.is-direct:not(:last-child)::before {
  top: 2.5rem;
  bottom: 0;
}

/* The three steps close together (2026-09-29, Nico): a small gap between the bars. */
.prospect-guide-step.is-direct:not(:last-child) {
  padding-bottom: var(--space-2);
}

.prospect-guide-step.is-direct > .prospect-guide-body > :not(p) {
  margin-top: 0;
}

.prospect-guide-hint {
  margin: calc(-1 * var(--space-2)) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.prospect-guide-body > :not(p) {
  margin-top: var(--space-1);
}

/* Inside the guide the bars are a notch lower, and the marks sit side by side. */
.prospect-guide .contact-card-send,
.prospect-guide .prospect-wide-action {
  min-height: 2.75rem;
}

.prospect-entry.is-card .prospect-guide .prospect-entry-actions.is-stacked {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.prospect-guide-tools {
  display: grid;
  gap: var(--space-2);
}

.prospect-guide-tools .prospect-guide-hint {
  margin: 0;
}

.prospect-guide-slot:empty {
  display: none;
}

/* Something else happened?: a quiet line under a hairline, its menu opening under it. */
.prospect-guide-foot {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.prospect-guide-foot .prospect-entry-menu {
  left: 0;
  right: auto;
}

summary.prospect-guide-other {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

summary.prospect-guide-other:hover,
.prospect-entry-more[open] > summary.prospect-guide-other {
  color: var(--color-accent-strong);
}

.prospect-guide-other-mark {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-line-strong);
  border-radius: 50%;
  line-height: 1;
}
/* The calm card's wide bars (the prompt, the send line, the Prospect Sprint's actions): the
   icon in blue on a plain square with a faint blue frame, what happens in words, and for a
   link an arrow for the new tab. Without a profile the send line is grey and dashed. */
.contact-card-send,
.prospect-wide-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 3.25rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  background: var(--color-surface);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.contact-card-send:hover,
.prospect-wide-action:hover {
  border-color: var(--color-line-strong);
  background: var(--color-surface-subtle);
}

.contact-card-send:focus-visible,
.prospect-wide-action:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.contact-card-send-mark,
.prospect-wide-mark {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-line));
  border-radius: 0.35rem;
  color: var(--color-accent-strong);
  background: var(--color-surface);
}

.contact-card-send-mark svg,
.prospect-wide-mark svg {
  width: 1.1rem;
  height: 1.1rem;
}

.contact-card-send-copy {
  display: grid;
  flex: 1 1 auto;
  min-width: 0;
  gap: 0.125rem;
}

.contact-card-send-copy strong,
.prospect-wide-label {
  color: var(--color-accent-strong);
  font-size: var(--text-md);
  font-weight: 400;
}

.contact-card-profile-edit:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.contact-card-profile-mark {
  width: 1.05rem;
  height: 1.05rem;
}

/* The pencil is a small badge on the button's corner, there only while the button is
   pointed at, so the buttons sit close together. */
.contact-card-profile-edit {
  position: absolute;
  top: -0.45rem;
  right: -0.45rem;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  color: var(--color-ink-soft);
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.12);
  opacity: 0;
  transition: opacity 120ms ease;
  cursor: pointer;
}

.contact-card-profile-edit .contact-card-icon {
  width: 0.7rem;
  height: 0.7rem;
  stroke: currentColor;
}

.contact-card-profile-edit:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

@media (hover: none) {
  .contact-card-profile-edit {
    opacity: 1;
  }
}

/* The contact card beside the Prospect Sprint, distilled: who in three calm lines -- the
   name (a click copies it; the icon and "Copied" appear only when asked for), the job,
   and one row of the ways to reach them -- then the sprint, documents and history, each
   a quiet section on a hairline. */
.prospect-contact-drawer .drawer-header {
  align-items: flex-start;
  padding-bottom: var(--space-4);
}

.prospect-contact-heading {
  display: grid;
  flex: 1 1 auto;
  gap: var(--space-1);
  min-width: 0;
}

.prospect-contact-heading h2 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: 1.2;
}

.prospect-contact-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 100%;
  min-height: 0;
  margin: 0 0 0 calc(-1 * var(--space-1));
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: none;
  font: inherit;
  text-align: left;
  cursor: copy;
}

.prospect-contact-name .prospect-copy-icon {
  color: var(--color-ink-muted);
  opacity: 0;
  transition: opacity 120ms ease;
}

.prospect-contact-name:hover .prospect-copy-icon,
.prospect-contact-name:focus-visible .prospect-copy-icon {
  opacity: 1;
}

.prospect-contact-name:hover {
  background: var(--color-surface-subtle);
}

.prospect-contact-name:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.prospect-contact-copied {
  display: none;
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: 600;
}

.prospect-contact-name.is-copied .prospect-contact-copied {
  display: inline;
}

.prospect-contact-name.is-copied .prospect-copy-icon {
  display: none;
}

/* The pencil after the name: there while the name is pointed at or reached by keyboard,
   and always on a touch screen. Its form puts the name in a field the same size. */
.prospect-contact-heading h2 {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.prospect-contact-heading h2[hidden] {
  display: none;
}

/* Top right of the card: a person not to be contacted, in the danger colour -- a soft
   pill with a no-entry mark, set against the name like a status, not a button. */
/* Contact card, 2026-09-28: the corner holds the do-not-contact mark and one Edit, a quiet
   word in the soft ink that is always there -- the old pencil showed only on hover. */
.prospect-contact-corner {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
}

.prospect-contact-edit {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--color-ink-soft);
  background: none;
  cursor: pointer;
  /* The pencil shows while the header is pointed at (2026-09-29, Nico). */
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.prospect-contact-drawer .drawer-header:hover .prospect-contact-edit,
.prospect-contact-edit:focus-visible {
  opacity: 1;
}

@media (hover: none) {
  .prospect-contact-edit {
    opacity: 1;
  }
}

.prospect-contact-edit:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.prospect-contact-edit[hidden] {
  display: none;
}

.prospect-contact-status:not([hidden]) {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-1);
  align-self: flex-start;
  margin: var(--space-1) 0 0;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, var(--color-surface));
  border-radius: 999px;
  color: var(--color-danger);
  background: var(--color-danger-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: default;
}

.prospect-contact-status svg {
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.prospect-contact-subtitle {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  white-space: pre-line;
}

/* The position and the company, each behind a small mark in the links' column: 16px, 12px
   to the words, as the rows below (2026-09-30, Nico). */
.prospect-contact-job {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.prospect-contact-job svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--color-ink-muted);
}

.prospect-contact-reach:not(:empty) {
  margin-top: var(--space-3);
}
.prospect-contact-body .contact-card {
  gap: 0;
}

.prospect-contact-body .contact-card-section {
  gap: var(--space-2);
  padding: var(--space-4) 0;
}

.prospect-contact-body .contact-card-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.prospect-contact-body .contact-card-section h3,
.prospect-contact-body .files-header h3,
.prospect-contact-sprint h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* Documents without the big empty box: nothing under the heading until there is a file,
   and Upload as a small action beside it. Dropping a file on the section still works. */
.prospect-contact-body .contact-card-files .files-state.is-empty {
  display: none;
}

.prospect-contact-body .contact-card-files .files-state {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.prospect-contact-body .contact-card-files .files-state .state-symbol,
.prospect-contact-body .contact-card-files .files-state strong {
  display: none;
}

.prospect-contact-body .contact-card-files .files-state p {
  margin: 0;
  text-align: left;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.prospect-contact-body .contact-card-files .files-header {
  align-items: center;
}

/* Upload file is the section's own action, drawn like Events' Log event beside its heading:
   the accent in words, no frame, underlined while pointed at. */
.prospect-contact-body .contact-card-files .files-header .secondary-button {
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--color-accent);
  background: none;
  font-size: var(--text-sm);
  font-weight: 400;
  cursor: pointer;
}

.prospect-contact-body .contact-card-files .files-header .secondary-button:hover {
  background: none;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.prospect-contact-body .contact-card-files .files-header .secondary-button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Events a person attends, on their card: a date column and the event, its note under
   it; coming ones in the ink with how far off they are, past ones faded. Log event is a
   calendar icon beside the heading; the form opens in place. */

.contact-card-event-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-card-event-problem {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.contact-card-event {
  display: grid;
  grid-template-columns: 4.75rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-line);
}

.contact-card-event:first-child {
  border-top: 0;
}

.contact-card-event-date {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.contact-card-event-copy {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.contact-card-event-name {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 500;
}

.contact-card-event-when {
  margin-left: var(--space-2);
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 500;
}

.contact-card-event-note {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.contact-card-event.is-past .contact-card-event-date,
.contact-card-event.is-past .contact-card-event-name,
.contact-card-event.is-past .contact-card-event-note {
  color: var(--color-ink-muted);
}

.contact-card-event-remove {
  min-height: 0;
  padding: 0 var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
  background: none;
  font-size: var(--text-md);
  line-height: 1;
  opacity: 0;
  transition: opacity 120ms ease;
  cursor: pointer;
}

.contact-card-event:hover .contact-card-event-remove,
.contact-card-event-remove:focus-visible {
  opacity: 1;
}

.contact-card-event-remove:hover {
  color: var(--color-danger);
  background: var(--color-surface-subtle);
}

@media (hover: none) {
  .contact-card-event-remove {
    opacity: 1;
  }
}

.contact-card-event-form:not([hidden]) {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.contact-card-event-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 10rem;
  gap: var(--space-2) var(--space-3);
}

.contact-card-event-field {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 500;
}

.contact-card-event-field.is-note {
  grid-column: 1 / -1;
}

.contact-card-event-field input {
  margin: 0;
}

.contact-card-event-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* The Deal Sprint, calm (2026-09-27; the design before this is tagged
   design-backup/deal-sprint-milestones-2026-09-27). One column of work read top down: a
   quiet date, the milestone, and under it its to-dos with a thin bar that fills as they are
   ticked. No boxed date tiles, no capitalised labels; colour only where something is
   late, due now, or done. Scoped to the account's Deal Sprint -- the Today page keeps its
   own date boxes. */
#account-deal-sprint .sprint-item {
  column-gap: var(--space-4);
  row-gap: 0;
  padding-block: var(--space-4);
}

#account-deal-sprint .sprint-item-date {
  flex: 0 0 4.5rem;
  width: 4.5rem;
  min-height: 0;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.125rem 0 0;
  border: 0;
  color: var(--color-ink);
  background: none;
  line-height: 1.2;
  text-align: left;
}

#account-deal-sprint .sprint-item-date-day {
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#account-deal-sprint .sprint-item-date-month {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#account-deal-sprint .sprint-item-date-distance {
  margin-top: var(--space-1);
  white-space: nowrap;
  color: var(--color-ink-soft);
  font-weight: 400;
}

#account-deal-sprint .sprint-item-date.is-late,
#account-deal-sprint .sprint-item-date.is-late .sprint-item-date-month,
#account-deal-sprint .sprint-item-date.is-late .sprint-item-date-distance {
  color: var(--color-danger);
}

#account-deal-sprint .sprint-item-date.is-today .sprint-item-date-distance {
  color: color-mix(in srgb, var(--color-warning) 75%, var(--color-ink));
  font-weight: 600;
}

#account-deal-sprint .sprint-item-date.is-settled,
#account-deal-sprint .sprint-item-date.is-settled .sprint-item-date-month {
  color: var(--color-ink-muted);
}

#account-deal-sprint .sprint-item-date.has-no-date:not(.is-settled) {
  border: 0;
  color: var(--color-accent);
  background: none;
}

/* The milestone: its title leads, with the to-do's round box on the title's line to tick
   it done (2026-10-01, Nico); done, the title softens, nothing more. The box sits on the
   title's first line (2026-09-29): centring it on the whole title took the title's bottom
   margin in too and set it below the words. */
#account-deal-sprint .sprint-item-heading-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

#account-deal-sprint .sprint-item-heading-row > .sprint-action-tick {
  flex: none;
  min-height: 0;
  height: calc(var(--text-md) * 1.35);
}

#account-deal-sprint .sprint-item h5 {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.35;
}

#account-deal-sprint .sprint-item.is-completed h5 {
  color: var(--color-ink-soft);
}

#account-deal-sprint .sprint-item-meta:empty {
  display: none;
}

/* Its to-dos sit under the title, not under the date, with no rule between: the work
   reads as the milestone's own list. */
#account-deal-sprint .sprint-item > .sprint-child-actions {
  gap: var(--space-2);
  margin: var(--space-2) 0 0 calc(4.5rem + var(--space-4));
  padding-top: 0;
  border-top: 0;
}

#account-deal-sprint .sprint-child-actions-header {
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
}

#account-deal-sprint .sprint-child-actions-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#account-deal-sprint .sprint-child-progress {
  position: relative;
  display: block;
  width: 7rem;
  height: 0.25rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-line);
}

#account-deal-sprint .sprint-child-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--color-success);
  transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

#account-deal-sprint .sprint-child-actions-toggle {
  font-size: var(--text-xs);
}

/* A to-do: the box, the words, the date in one quiet line. Ticked, it steps back. */
#account-deal-sprint .sprint-child-action {
  column-gap: var(--space-3);
  padding: var(--space-2) 0;
}

#account-deal-sprint .sprint-child-action + .sprint-child-action {
  border-top: 1px solid color-mix(in srgb, var(--color-line) 60%, transparent);
}

#account-deal-sprint .sprint-action-tick input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
}

#account-deal-sprint .sprint-child-action h6 {
  margin-bottom: 0.125rem;
  font-size: var(--text-sm);
  font-weight: 500;
}

#account-deal-sprint .sprint-child-action.is-completed h6,
#account-deal-sprint .sprint-child-action.is-skipped h6 {
  color: var(--color-ink-muted);
  font-weight: 400;
  text-decoration-color: color-mix(in srgb, var(--color-ink-muted) 60%, transparent);
}

#account-deal-sprint .sprint-child-action.is-completed .sprint-item-meta {
  color: var(--color-ink-muted);
}

#account-deal-sprint .sprint-item-due {
  padding: 0;
  background: none;
  font-weight: 500;
}

#account-deal-sprint .sprint-item-due.is-today {
  background: none;
}

#account-deal-sprint .sprint-item-due.is-late {
  background: none;
}

@media (max-width: 700px) {
  #account-deal-sprint .sprint-item > .sprint-child-actions {
    margin-left: 0;
  }
}

/* The Deal Sprint's row buttons, calm: small, one weight of line, grey until wanted.
   A milestone is closed with the round box on its title's line (2026-10-01); the row's
   tools (edit, link, skip, reorder, delete) appear while the row is pointed at or holds
   the keyboard, and always on a touch screen. Delete takes the danger tone only when
   pointed at. */
#account-deal-sprint .sprint-item-actions,
#account-deal-sprint .sprint-child-action-controls {
  gap: 0.125rem;
  align-items: center;
}

#account-deal-sprint .sprint-icon-action,
#account-deal-sprint .sprint-drag-handle {
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
  background: transparent;
}

#account-deal-sprint .sprint-icon-action svg,
#account-deal-sprint .sprint-drag-handle svg {
  width: 1rem;
  height: 1rem;
}

#account-deal-sprint .sprint-icon-action svg {
  stroke-width: 1.6;
}

#account-deal-sprint .sprint-icon-action:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

#account-deal-sprint .sprint-icon-action.is-delete:hover {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

#account-deal-sprint .sprint-icon-action::after {
  font-weight: 500;
}

@media (hover: hover) {
  /* Complete too, since 2026-09-29 (Nico): every mark on a milestone waits for its row. */
  #account-deal-sprint .sprint-item-actions > *,
  #account-deal-sprint .sprint-child-action-controls > * {
    opacity: 0;
    transition: opacity 120ms ease;
  }

  #account-deal-sprint .sprint-item:is(:hover, :focus-within) > .sprint-item-actions > *,
  #account-deal-sprint .sprint-child-action:is(:hover, :focus-within) > .sprint-child-action-controls > * {
    opacity: 1;
  }
}

/* The Deal Sprint's header, calm: adding work is quiet text in the accent; the Sprint's
   own verbs are one "Sprint" menu, the two that end it last and in red; Hide completed is
   small text; one line under the header, not two. */
#account-deal-sprint .sprint-phase-controls {
  gap: var(--space-4);
}

#account-deal-sprint .sprint-phase-controls > .tertiary-button,
#account-deal-sprint .sprint-completed-group > .tertiary-button {
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--color-accent);
  background: none;
  box-shadow: none;
  font-size: var(--text-sm);
  font-weight: 500;
}

#account-deal-sprint .sprint-phase-controls > .tertiary-button:hover,
#account-deal-sprint .sprint-completed-group > .tertiary-button:hover {
  background: none;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

#account-deal-sprint .sprint-completed-group > .tertiary-button {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

#account-deal-sprint .sprint-completed-group {
  padding-top: 0;
  border-top: 0;
}

:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more {
  position: relative;
  margin-left: auto;
}

:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2rem;
  padding: 0 var(--space-2) 0 var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 400;
  list-style: none;
  cursor: pointer;
}

:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more-toggle::-webkit-details-marker {
  display: none;
}

:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more-toggle:hover,
:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more[open] > .sprint-more-toggle {
  border-color: var(--color-line-strong);
  background: var(--color-surface-subtle);
}

:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more-toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more-toggle svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--color-ink-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 120ms ease;
}

:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more[open] .sprint-more-toggle svg {
  transform: rotate(180deg);
}

:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 13rem;
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgb(16 24 40 / 0.12);
}

:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more-menu > button {
  justify-content: flex-start;
  width: 100%;
  min-height: 2.25rem;
  margin: 0;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: transparent;
  box-shadow: none;
  font-size: var(--text-sm);
  font-weight: 400;
  text-align: left;
  opacity: 1;
}

:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more-menu > button:hover,
:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more-menu > button:focus-visible {
  background: var(--color-surface-subtle);
}

:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more-menu > :is(.sprint-cancel-action, .sprint-delete-action, .account-archive-action) {
  color: var(--color-danger);
}

:is(#account-deal-sprint, #account-opportunity, #account-section-drawer-actions) .sprint-more-menu > .sprint-cancel-action {
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* One label per icon: the card clips the drawn tooltip at its top edge, and the browser
   shows the button's own title as well. In the Deal Sprint the title alone speaks. */
#account-deal-sprint .sprint-icon-action::after {
  content: none;
}

/* The Org Chart, calm (2026-09-27; the page before this is tagged
   design-backup/org-chart-2026-09-27). Kind of position as a quiet word rather than a
   capitalised badge -- core positions in blue -- role titles allowed two lines instead of
   cut short, the priority letter an outlined circle, department heads in a thin frame. */
#org-chart-library label > span {
  font-weight: 500;
}

#org-chart-library .org-library-role .org-library-node-type,
#org-chart-library .org-library-node-type {
  min-height: 0;
  padding: 0;
  border-radius: 0;
  color: var(--color-ink-muted);
  background: none;
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#org-chart-library .org-library-role.is-core .org-library-node-type {
  color: var(--color-accent-strong);
}

#org-chart-library .org-library-role strong {
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
  hyphens: auto;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

#org-chart-library .org-library-role.is-chart-row {
  gap: 0.125rem;
}

#org-chart-library .org-library-semperis-tag,
#org-chart-library .org-library-semperis-tag.is-priority-a,
#org-chart-library .org-library-semperis-tag.is-priority-c {
  width: 1.375rem;
  height: 1.375rem;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink-soft);
  background: var(--color-surface);
  font-weight: 600;
}

#org-chart-library .org-library-semperis-tag.is-priority-a {
  border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-line));
  color: var(--color-accent-strong);
}

#org-chart-library .org-library-chart-department-head {
  border: 1px solid var(--color-line-strong);
  background: var(--color-surface);
}

#org-chart-library .org-library-chart-department-head strong {
  font-weight: 600;
}

#org-chart-library .org-library-chart-department-head span {
  color: var(--color-ink-soft);
  font-weight: 500;
}

#org-chart-library .org-library-chart-department-head:hover,
#org-chart-library .org-library-chart-department-head:focus-visible,
#org-chart-library .org-library-chart-department-head[aria-current="true"] {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent-soft) 50%, var(--color-surface));
}

#org-chart-library .org-library-chart-node strong {
  font-weight: 600;
}

/* All accounts and Opportunities, calm (2026-09-27; the list before this is tagged
   design-backup/all-accounts-2026-09-27). The company names lead; the lifecycle and the
   engagement are plain words, not pills -- "Active" in grey, since nearly every row is
   active, and only Paused or Archived with a colour; the group names a notch smaller;
   the filters and column titles no longer bold. The Prospects view keeps its own look. */
#accounts-app:not(.is-prospects-page) .account-toolbar input {
  font-weight: 400;
}

#accounts-app:not(.is-prospects-page) .accounts-list-table thead th {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

#accounts-app:not(.is-prospects-page) .account-group-row th {
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0;
}

#accounts-app:not(.is-prospects-page) .account-group-icon {
  width: 1rem;
  height: 1rem;
  stroke: color-mix(in srgb, var(--color-accent) 70%, var(--color-ink-muted));
}

#accounts-app:not(.is-prospects-page) .account-row-in-group .account-name {
  font-weight: 400;
}

#accounts-app:not(.is-prospects-page) .accounts-list-table .pill {
  padding: 0;
  border: 0;
  color: var(--color-ink-soft);
  background: none;
  font-size: var(--text-sm);
  font-weight: 400;
}

#accounts-app:not(.is-prospects-page) .accounts-list-table .pill.is-customer {
  color: var(--color-accent-strong);
  font-weight: 500;
}

#accounts-app:not(.is-prospects-page) .accounts-list-table .pill.is-active {
  color: var(--color-ink-muted);
}

#accounts-app:not(.is-prospects-page) .accounts-list-table .pill.is-paused {
  color: color-mix(in srgb, var(--color-warning) 75%, var(--color-ink));
  font-weight: 500;
}

#accounts-app:not(.is-prospects-page) .accounts-list-table .pill.is-archived {
  color: var(--color-ink-muted);
  font-style: italic;
}

#accounts-app:not(.is-prospects-page) .account-toolbar label {
  font-weight: 400;
}

/* A group of one, as one row (2026-09-27): the account's name in the group heading's blue,
   the group under it in small grey where its name says something more. Opportunities keeps
   its Lifecycle beside the names rather than across the page. */
#accounts-app .account-row-single td {
  padding-top: var(--space-3);
  padding-bottom: var(--space-3);
}

#accounts-app .account-row-single .account-row-link {
  display: inline-flex;
  text-decoration: none;
}

#accounts-app .account-row-single .account-name {
  color: var(--color-accent-strong);
  font-size: var(--text-md);
  font-weight: 600;
}

#accounts-app .account-row-single .account-row-link:hover .account-name {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* Where groups have headings (All accounts, not Opportunities), a company in no group
   reads like the companies under a heading -- ink, regular weight, the list's size, blue
   when pointed at -- so only the group names stand out in blue. */
#accounts-app .accounts-list-table:not(.is-opportunities) .account-row-single .account-name {
  color: var(--color-ink);
  font-size: inherit;
  font-weight: 400;
}

#accounts-app .accounts-list-table:not(.is-opportunities) .account-row-single .account-row-link:hover .account-name {
  color: var(--color-accent-strong);
}

#accounts-app .account-row-group {
  display: block;
  margin-top: 0.125rem;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

/* Prospects, streamlined (2026-09-27; the page before this is tagged
   design-backup/prospects-2026-09-27). The same quiet table as All accounts: plain words
   for lifecycle and engagement ("Active" in grey), filters and column titles not bold, and
   the Prospect Sprint cell on one line -- coverage, the stage as a coloured word, the date. */
#accounts-app.is-prospects-page .account-toolbar input,
#accounts-app.is-prospects-page .account-toolbar label {
  font-weight: 400;
}

#accounts-app.is-prospects-page .accounts-list-table thead th {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

#accounts-app.is-prospects-page .accounts-list-table .pill {
  padding: 0;
  border: 0;
  color: var(--color-ink-soft);
  background: none;
  font-size: var(--text-sm);
  font-weight: 400;
}

#accounts-app.is-prospects-page .accounts-list-table .pill.is-customer {
  color: var(--color-accent-strong);
  font-weight: 500;
}

#accounts-app.is-prospects-page .accounts-list-table .pill.is-active {
  color: var(--color-ink-muted);
}

#accounts-app.is-prospects-page .accounts-list-table .pill.is-paused {
  color: color-mix(in srgb, var(--color-warning) 75%, var(--color-ink));
  font-weight: 500;
}

#accounts-app.is-prospects-page .prospect-sprint-cell {
  white-space: nowrap;
}

#accounts-app.is-prospects-page .prospect-sprint-cell > * + * {
  margin-left: var(--space-2);
}

#accounts-app.is-prospects-page .prospect-sprint-coverage {
  font-variant-numeric: tabular-nums;
}

#accounts-app.is-prospects-page .prospect-sprint-cell .prospect-stage {
  padding: 0;
  border-radius: 0;
  background: none;
  font-weight: 500;
}

#accounts-app.is-prospects-page .prospect-sprint-next {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

#accounts-app.is-prospects-page .prospect-contacts {
  font-variant-numeric: tabular-nums;
}

/* A waiting step's answers to What happened?, one under the other. */
.prospect-entry.is-card .prospect-guide .is-asked .prospect-entry-actions.is-stacked {
  grid-template-columns: minmax(0, 1fr);
}

/* The Prospects page's Today section, calm (2026-09-28; the section before this is tagged
   design-backup/prospects-today-2026-09-28). No box around it: the heading, the find field
   and the tabs sit on the page like the list below them, closer together. The tab counts are
   plain numbers beside their names -- only an overdue count takes a colour -- and the pace
   reads as a sentence first, its bar a short mark after it. */
#accounts-app .prospect-today {
  gap: var(--space-3);
  margin-bottom: var(--space-8);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

#accounts-app .prospect-find {
  margin: 0;
}

#accounts-app .prospect-find-field input {
  font-weight: 400;
}

#accounts-app .prospect-find-field input::placeholder {
  color: var(--color-ink-soft);
  font-weight: 400;
}

#accounts-app .prospect-today-body {
  gap: var(--space-4);
}

/* The same calm counts on Today's Sprint tabs (2026-09-28): a plain number, red only when
   some of it is overdue -- on the selected tab too. */
:is(#accounts-app, #today-page) .prospect-today-tab {
  gap: 0.375rem;
  font-weight: 500;
}

:is(#accounts-app, #today-page) .prospect-today-tab-count,
:is(#accounts-app, #today-page) .prospect-today-tab[aria-selected="true"] .prospect-today-tab-count {
  min-width: 0;
  padding: 0;
  border-radius: 0;
  color: var(--color-ink-soft);
  background: none;
  font-size: var(--text-sm);
  font-weight: 400;
}

:is(#accounts-app, #today-page) .prospect-today-tab.is-empty .prospect-today-tab-count {
  color: var(--color-ink-muted);
}

:is(#accounts-app, #today-page) .prospect-today-tab-count.is-overdue,
:is(#accounts-app, #today-page) .prospect-today-tab[aria-selected="true"] .prospect-today-tab-count.is-overdue {
  color: var(--color-danger);
  background: none;
  font-weight: 600;
}

#accounts-app .prospect-pace {
  gap: var(--space-3);
}

#accounts-app .prospect-pace-text {
  order: 1;
}

#accounts-app .prospect-pace-text strong {
  font-weight: 500;
}

#accounts-app .prospect-pace-meter {
  order: 2;
  flex: 0 0 4.5rem;
  height: 4px;
  background: var(--color-line);
  box-shadow: none;
}

/* The top bar, calm (2026-09-28; the bar before this is tagged
   design-backup/top-bar-2026-09-28). No boxes: the bell and the user's name are plain,
   the bell's icon in the quiet ink until it has something to say or is pointed at, the
   name in regular weight with a drawn chevron. Dark mode moved into the user menu as a
   switch. */
#app-shell .shell-header .notification-button,
#app-shell .shell-header .user-button {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

#app-shell .shell-header .notification-button {
  display: inline-flex;
  width: auto;
  min-width: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0 var(--space-2);
  color: var(--color-ink-soft);
}

#app-shell .shell-header .notification-button.has-alerts {
  color: var(--color-accent-strong);
}

#app-shell .shell-header .notification-button.has-alerts.is-overdue {
  color: var(--color-danger);
}

#app-shell .shell-header .notification-button:hover,
#app-shell .shell-header .notification-button[aria-expanded="true"],
#app-shell .shell-header .user-button:hover,
#app-shell .shell-header .user-button[aria-expanded="true"] {
  background: var(--color-surface-subtle);
}

#app-shell .shell-header .notification-button:not(.has-alerts):hover {
  color: var(--color-ink);
}

#app-shell .shell-header .user-button {
  gap: var(--space-2);
  padding-right: var(--space-2);
  color: var(--color-ink);
  font-weight: 500;
}

#app-shell .shell-header .user-chevron {
  width: 0.875rem;
  height: 0.875rem;
  color: var(--color-ink-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
}

#app-shell .shell-header .user-button:hover .user-chevron {
  color: var(--color-ink-soft);
}

/* Dark mode, in the user menu: its name, and a small switch at the end of the row that is
   on while the page is dark. */
#app-shell .color-mode-button {
  justify-content: space-between;
}

/* The look, in the user menu under Dark mode: its name, and the choice as quiet text at the
   end of the row, the whole row lighting up when pointed at. The looks carry plain names;
   the stored values stay b1, b2, b3 and b3-focus, so a saved choice keeps working. */
#app-shell .menu-look {
  display: flex;
  min-height: 2rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: 0;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 400;
}

#app-shell .menu-look select {
  width: auto;
  min-height: 2rem;
  padding: 0 1.25rem 0 var(--space-2);
  background-position: right 0 center;
  border-color: transparent;
  color: var(--color-ink-soft);
  background-color: transparent;
  font-size: var(--text-sm);
  text-align: right;
  cursor: pointer;
}

#app-shell .menu-look:hover select {
  color: var(--color-ink);
}

#app-shell .color-mode-switch {
  position: relative;
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--color-line-strong);
  transition: background-color 150ms ease-out;
}

#app-shell .color-mode-switch::after {
  position: absolute;
  top: 0.125rem;
  left: 0.125rem;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--color-surface);
  content: "";
  transition: transform 150ms ease-out;
}

#app-shell .color-mode-button[aria-pressed="true"] .color-mode-switch {
  background: var(--color-accent);
}

#app-shell .color-mode-button[aria-pressed="true"] .color-mode-switch::after {
  transform: translateX(0.75rem);
}

/* Incognito, switched on in the user menu: the areas it names leave the sidebar entirely,
   with no gap or marker where they were. */
:root[data-incognito="on"] #app-shell [data-incognito-hide] {
  display: none;
}

/* What Incognito hides, said under its switch rather than only in a tooltip. */
#app-shell .menu-hint {
  max-width: 16rem;
  margin: 0 0 var(--space-1);
  padding: 0 var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  #app-shell .color-mode-switch,
  #app-shell .color-mode-switch::after {
    transition: none;
  }
}

/* The user menu, calm (2026-09-28; the menu before this is tagged
   design-backup/user-menu-2026-09-28). Three groups divided by hairlines -- who you are,
   how Merkio looks, and where to go -- with every row the same height, the same inset and
   the same regular weight. Rows have no fill of their own, so a focused field's ring is not
   painted over by the row after it. */
#app-shell #user-menu {
  width: min(17rem, calc(100vw - 2rem));
  padding: var(--space-2);
}

#app-shell #user-menu .popup-identity {
  display: grid;
  gap: 0.125rem;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

#app-shell #user-menu .popup-identity strong {
  font-weight: 600;
}

#app-shell #user-menu .menu-divider {
  margin: var(--space-2) calc(-1 * var(--space-2));
  border: 0;
  border-top: 1px solid var(--color-line);
}

#app-shell #user-menu .popup-action {
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-ink);
  background: transparent;
  box-shadow: none;
  font-size: var(--text-sm);
  font-weight: 400;
  text-decoration: none;
}

#app-shell #user-menu .popup-action:hover,
#app-shell #user-menu .menu-look:hover {
  background: var(--color-surface-subtle);
}

#app-shell #user-menu .menu-look select:focus {
  border-color: transparent;
  outline: none;
}

#app-shell #user-menu .menu-look select:focus-visible {
  border-color: var(--color-focus);
  outline: 2px solid var(--color-focus);
}

/* The Opportunity panel, calm (2026-09-28; the panel before this is tagged
   design-backup/opportunity-2026-09-28). No explanatory line under the title and no cards:
   the name, one line of plain words for stage and forecast, the facts in regular weight
   with an unrecorded one in the soft ink, then Edit and one "Won or lost" menu beside it,
   and the products under a hairline. */
#account-opportunity .overview-current,
#account-opportunity .overview-commercial {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

#account-opportunity .overview-commercial {
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}

#account-opportunity .overview-current .surface-header h3 {
  font-weight: 600;
}

#account-opportunity #overview-opportunity-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  margin-top: var(--space-1);
}

#account-opportunity .opportunity-status-word {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

#account-opportunity .opportunity-status-word + .opportunity-status-word::before {
  margin-right: var(--space-2);
  color: var(--color-ink-muted);
  content: "·";
}

#account-opportunity .opportunity-status-word.is-primary {
  color: var(--color-accent-strong);
}

#account-opportunity .opportunity-status-word.is-won {
  color: var(--color-success);
  font-weight: 500;
}

#account-opportunity .opportunity-status-word.is-lost,
#account-opportunity .opportunity-status-word.is-archived {
  color: var(--color-ink-soft);
  font-weight: 500;
}

#account-opportunity .overview-facts dt {
  font-weight: 400;
}

#account-opportunity .overview-facts dd {
  font-weight: 500;
}

#account-opportunity .overview-facts .is-empty dd {
  color: var(--color-ink-soft);
  font-weight: 400;
}

:is(#account-opportunity, #account-section-drawer-actions) .overview-actions {
  gap: var(--space-2);
}

:is(#account-opportunity, #account-section-drawer-actions) .opportunity-more {
  margin-left: 0;
}

#account-opportunity .text-action {
  font-weight: 500;
}

:is(#account-opportunity, #account-section-drawer-actions) .opportunity-more .sprint-more-menu {
  right: auto;
  left: 0;
}

:is(#account-opportunity, #account-section-drawer-actions) .opportunity-more .sprint-more-menu > .account-archive-action {
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* The opportunity form, calm (2026-09-28; before this it is tagged
   design-backup/opportunity-form-2026-09-28). Labels are small, regular and over their
   field; the rows breathe evenly; the currency is a short field at the end of Amount rather
   than a column of its own; and the three texts grow with what is written in them instead of
   showing it through a slot. */
.opportunity-modal h2,
.contact-edit-modal h2 {
  margin-bottom: var(--space-5);
  font-weight: 600;
}

.opportunity-modal .form-grid,
.contact-edit-modal .form-grid {
  gap: var(--space-4);
}

.opportunity-modal .form-grid label,
.contact-edit-modal .form-grid label {
  display: block;
  margin: 0 0 var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

.opportunity-modal .opportunity-amount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem;
  gap: var(--space-2);
}

.opportunity-modal .opportunity-amount-row input {
  min-width: 0;
}

.opportunity-modal #opportunity-currency {
  text-align: center;
  text-transform: uppercase;
}

.opportunity-modal textarea,
.contact-edit-modal textarea {
  min-height: 4.5rem;
  max-height: 16rem;
  padding-block: var(--space-2);
  field-sizing: content;
  resize: vertical;
  line-height: 1.5;
}

.opportunity-modal .modal-actions,
.contact-edit-modal .modal-actions {
  margin-top: var(--space-6);
}

/* Contacts, calm (2026-09-28; before this it is tagged design-backup/contacts-2026-09-28).
   Names in a medium weight, the filters and column titles not bold, an empty cell a quiet
   dash, and the status said only for someone who has left -- in plain words. The arrow
   stays grey until its row is pointed at. */
.person-name {
  font-weight: 550;
}

.person-status-word {
  display: block;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.contact-row-arrow {
  color: var(--color-ink-muted);
}

.person-row:hover .contact-row-arrow {
  color: var(--color-ink-soft);
}

#contacts-app .contact-toolbar input,
#contacts-app .contact-toolbar select {
  font-weight: 400;
}

#contacts-app thead th {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* The account's side panels, calm (2026-09-28; before this they are tagged
   design-backup/account-panels-2026-09-28 and per panel). One frame for all of them: no
   stock line under the title, a close mark in the quiet ink until pointed at, the panel's
   own button a quiet one at the top of its content rather than a primary one floating in
   an empty band, and reading text held to a measure the eye can follow. */
.drawer-header [data-close-overlay].icon-button {
  border-color: transparent;
  color: var(--color-ink-soft);
  background: transparent;
  box-shadow: none;
}

.drawer-header [data-close-overlay].icon-button:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.account-section-drawer .drawer-header h2 {
  margin-bottom: 0;
  font-weight: 600;
}

.account-section-drawer-body > section {
  gap: var(--space-4);
  /* The space under the window's line is the body's alone, the same on every tab
     (2026-09-29, Nico): a section adds none above its first content. */
  padding-top: 0;
}

.account-section-drawer-body > section > .overview-heading:not(:has(> button:not([hidden]), > .state-actions)) {
  display: none;
}

/* Deal Strategy: a document -- its title a step above the text, headings a step above
   the paragraphs, and a line height that carries long German sentences. */
#account-deal-strategy .deal-strategy-document .document-title {
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

#account-deal-strategy .deal-strategy-document .document-heading {
  margin-top: var(--space-6);
  font-size: var(--text-md);
  font-weight: 600;
}

#account-deal-strategy .deal-strategy-document p,
#account-deal-strategy .deal-strategy-document li {
  line-height: 1.65;
}

#account-deal-strategy .deal-strategy-document strong {
  font-weight: 600;
}

/* Zeitstrahl: the year a plain heading on the line, the date in a medium weight, the
   source a quiet link that underlines when pointed at. */
#account-timeline .timeline-year p {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
}

#account-timeline .timeline-when {
  font-weight: 600;
}

#account-timeline .timeline-source a {
  text-decoration: none;
}

#account-timeline .timeline-source a:hover {
  text-decoration: underline;
}

#account-timeline .timeline-text {
  line-height: 1.6;
}

/* Notes: rows divided by hairlines instead of boxed cards, the first lines of a long
   transcript with "Show all" under them, the text in the ink it is written in. */
#account-notes .account-note-list {
  gap: 0;
}

#account-notes .account-note {
  padding: var(--space-5) 0;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  background: none;
}

#account-notes .account-note:first-child {
  padding-top: 0;
}

#account-notes .account-note-header {
  margin-bottom: var(--space-2);
}

#account-notes .account-note-header h3 {
  font-weight: 600;
}

#account-notes .account-note-body {
  color: var(--color-ink);
}

#account-notes .account-note-body.is-clamped {
  display: -webkit-box;
  max-height: none;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

#account-notes .account-note-more {
  margin-top: var(--space-2);
  padding: 0;
}

/* Files: a list, as on the contact card -- the type mark and the name, the size and date
   under it, and the three actions as quiet words at the end of the row. */
#account-files .file-list,
#file-vault-page .file-list {
  gap: 0;
}

#account-files .file-card,
#file-vault-page .file-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-4);
  padding: var(--space-3) 0;
  border: 0;
  border-bottom: 1px solid var(--color-line);
  border-radius: 0;
  background: none;
}

#account-files .file-card > :not(.file-card-actions),
#file-vault-page .file-card > :not(.file-card-actions) {
  grid-column: 1;
}

#account-files .file-card-actions,
#file-vault-page .file-card-actions {
  grid-row: 1 / span 2;
  grid-column: 2;
  gap: var(--space-4);
  margin: 0;
}

#account-files .file-card-actions .text-action,
#file-vault-page .file-card-actions .text-action {
  padding: 0;
  color: var(--color-ink-soft);
  font-weight: 500;
}

#account-files .file-card-actions .text-action:hover,
#file-vault-page .file-card-actions .text-action:hover {
  color: var(--color-accent-strong);
}

#account-files .file-card-actions .text-action.is-danger:hover,
#file-vault-page .file-card-actions .text-action.is-danger:hover {
  color: var(--color-danger);
}

#account-files .file-meta,
#file-vault-page .file-meta {
  margin: 0.125rem 0 0;
  padding-left: calc(2.25rem + var(--space-3));
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

#account-files .file-name,
#file-vault-page .file-name {
  font-weight: 500;
}

#account-files .files-header p,
#file-vault-page .files-header p {
  display: none;
}

#account-files .files-header,
#file-vault-page .files-header {
  justify-content: flex-end;
}

/* The contact card on Contacts, Colleagues and Partners, calm (2026-09-28; before this it
   is tagged design-backup/contact-card-2026-09-28). One Edit and one ⋯ in the footer
   instead of Edit job, End job, Edit, Deactivate, Edit identity and Close; a smaller
   portrait; the facts in a medium weight; the addresses plain rows rather than boxes; the
   profile marks grey until pointed at; and an empty Documents a single quiet line. */
.contact-drawer .contact-card-portrait {
  width: 3rem;
  height: 3rem;
  grid-row: auto;
}

.contact-drawer .contact-card-portrait svg {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 3;
}

.contact-drawer .contact-card-facts dd {
  font-weight: 500;
}

.contact-drawer .contact-card-section {
  gap: var(--space-2);
  padding-top: var(--space-4);
}

.contact-drawer .contact-card-section-header h3 {
  font-weight: 600;
}

.contact-drawer .contact-card-method-link {
  padding: var(--space-1) 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.contact-drawer .contact-card-method-link:hover,
.contact-drawer .contact-card-method-link:focus-visible {
  background: none;
  color: var(--color-accent-strong);
}

.contact-drawer .contact-card-method-copy strong {
  font-weight: 400;
}

.contact-drawer .contact-card-icon {
  width: 1rem;
  height: 1rem;
  stroke: var(--color-ink-soft);
}

.contact-drawer .contact-card-files .files-state {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}

.contact-drawer .contact-card-files .files-state .state-symbol,
.contact-drawer .contact-card-files .files-state strong {
  display: none;
}

.contact-drawer .contact-card-files .files-state p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.contact-drawer .contact-card-empty {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.contact-drawer-footer {
  justify-content: flex-start;
  gap: var(--space-2);
}

.contact-more {
  position: relative;
}

.contact-more > .contact-more-toggle {
  display: inline-grid;
  width: 2rem;
  padding: 0;
  place-items: center;
  list-style: none;
  cursor: pointer;
}

.contact-more > .contact-more-toggle::-webkit-details-marker {
  display: none;
}

.contact-more-menu {
  position: absolute;
  bottom: calc(100% + var(--space-1));
  left: 0;
  z-index: 20;
  display: grid;
  min-width: 12rem;
  padding: var(--space-1);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 8px 24px rgb(16 24 40 / 0.12);
}

.contact-more-menu > button {
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: transparent;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.contact-more-menu > button[hidden] {
  display: none;
}

.contact-more-menu > button:hover,
.contact-more-menu > button:focus-visible {
  background: var(--color-surface-subtle);
}

.contact-more-menu > button.is-danger {
  margin-top: var(--space-1);
  border-top: 1px solid var(--color-line);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  color: var(--color-danger);
}

.contact-drawer .contact-card-profile {
  grid-template-rows: auto;
  align-items: center;
  min-height: 0;
}

.contact-drawer .contact-card-section-header {
  min-height: 0;
}

.contact-drawer .contact-card-methods {
  gap: var(--space-1);
}

.contact-drawer-footer .contact-more-menu {
  right: 0;
  left: auto;
}

/* The card's sections keep their own height instead of sharing out the panel's. */
.contact-drawer .contact-card {
  align-content: start;
}

/* Products and Services, read as a refresher (2026-09-28; before this they are tagged
   design-backup/products-services-2026-09-28). One row per item: the name, its price and
   its links in a column on the left, its points beside them in the ink, so the eye runs
   down the names and across to what each is sold on. */

#products-app .catalog-list {
  border-bottom: 0;
}

#products-app .catalog-row {
  display: grid;
  /* The name column wide enough that "Lightning Detection & Response Pro" stays on one
     line (2026-09-29, Nico). */
  grid-template-columns: minmax(15rem, 22rem) minmax(0, 1fr);
  gap: var(--space-2) var(--space-8);
  padding: var(--space-5) 0;
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

#products-app .catalog-row-side {
  display: grid;
  align-content: start;
  gap: var(--space-1);
}

#products-app .catalog-row > .catalog-row-side > .catalog-entry {
  display: block;
  padding: 0;
  border: 0;
}

#products-app .catalog-entry-title {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.35;
}

#products-app .catalog-entry-price {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Each link under the price with a bullet before it (2026-09-29, Nico). */
#products-app .catalog-entry-links {
  display: grid;
  gap: 0.125rem;
  margin-top: var(--space-2);
  padding: 0 0 0 1rem;
  font-size: var(--text-xs);
  list-style: disc;
}

#products-app .catalog-entry-links > li {
  display: list-item;
}

#products-app .catalog-entry-links > li::marker {
  color: var(--color-ink-soft);
}

#products-app .catalog-entry-links a {
  color: var(--color-ink-soft);
}

#products-app .catalog-entry-links a:hover {
  color: var(--color-accent-strong);
}

#products-app .catalog-row-points {
  cursor: pointer;
}

#products-app .catalog-row-points .catalog-entry-points {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.55;
}

#products-app .catalog-row-points .catalog-entry-points li + li {
  margin-top: var(--space-1);
}

@media (max-width: 54rem) {
  #products-app .catalog-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The product's side panel: sentence-case headings, the short answer first in a slightly
   larger size, the long one folded, and adding a link or a note one quiet "+" away. */
.product-drawer .product-explanation-heading {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.product-drawer .product-explanation,
.product-drawer .product-notes,
.product-drawer .product-links {
  max-width: 46rem;
  margin-top: var(--space-5);
  padding-top: var(--space-5);
}

.product-drawer .product-explanation:first-child {
  margin-top: 0;
  padding-top: 0;
}

.product-drawer .product-explanation:first-child p {
  font-size: var(--text-md);
  line-height: 1.6;
}

.product-drawer details.product-explanation > summary {
  display: list-item;
  cursor: pointer;
}

.product-drawer details.product-explanation[open] > summary {
  margin-bottom: var(--space-3);
}

.product-drawer .product-add-toggle {
  justify-self: start;
  margin-top: var(--space-2);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: 500;
}

.product-drawer .product-link-form[hidden],
.product-drawer .product-note-form[hidden],
.product-drawer .product-add-toggle[hidden] {
  display: none;
}

/* New and edit: the name first, then vendor and code, classification and lifecycle, and
   the points; the technical keys fold under "Catalog keys". */
.product-modal h2 {
  margin-bottom: var(--space-5);
  font-weight: 600;
}

.product-modal .form-grid {
  gap: var(--space-4);
}

.product-modal label {
  display: block;
  margin: 0 0 var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

.product-modal textarea {
  min-height: 5rem;
  max-height: 16rem;
  field-sizing: content;
  line-height: 1.5;
}

.product-modal .product-form-keys {
  margin-top: var(--space-4);
}

.product-modal .product-form-keys > summary {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  cursor: pointer;
}

.product-modal .product-form-keys > .form-grid {
  margin-top: var(--space-3);
}

.product-modal .modal-actions {
  margin-top: var(--space-6);
}

/* Competitors, calm (2026-09-28; before this tagged design-backup/competitors-panel-2026-09-28).
   An offering says what it competes with in quiet words after its name, not in outlined
   tags; its side panel opens to read -- the website, each offering, what it meets and its
   points -- with Edit turning the same panel into the form. */
.competitor-offering-vs {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 400;
}

.competitor-view {
  display: grid;
  align-content: start;
  gap: var(--space-5);
}

.competitor-view > * {
  max-width: 46rem;
}

.competitor-view-offering {
  display: grid;
  gap: var(--space-1);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.competitor-view-offering h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
}

.competitor-view-vs {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.competitor-view-points {
  margin: var(--space-2) 0 0;
  padding-left: 1.1rem;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.competitor-view-points li + li {
  margin-top: var(--space-1);
}

.competitor-view-links {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

.competitor-view-links .catalog-entry-links {
  padding: 0;
}

.competitor-drawer .competitor-form label,
.competitor-drawer .competitor-offerings-head h3 {
  font-weight: 500;
}

.competitor-drawer .competitor-form[hidden] {
  display: none;
}

/* Partners, calm (2026-09-28; before this tagged design-backup/partners-page-2026-09-28).
   The chosen partner marked by a quiet fill and its name in the accent, not a boxed band
   with a bar; names in a medium weight; the website and Add contact together at the top of
   the partner's people. */
#partners-app .partner-select {
  border-left: 0;
  border-radius: var(--radius-md);
}

#partners-app .partner-select strong {
  font-weight: 500;
}

#partners-app .partner-select[aria-current="true"] {
  background: var(--color-surface-subtle);
  box-shadow: none;
}

#partners-app .partner-select[aria-current="true"] strong {
  color: var(--color-accent-strong);
}

#partners-app .partner-contact-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

#partners-app .partner-contact-actions [hidden] {
  display: none;
}

#partners-app .partner-directory-header h2,
#partners-app .partner-contact-header h2 {
  font-weight: 600;
}

#partners-app thead th {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* The opportunity's own actions sit at the top right, beside its name (2026-09-28; before
   this tagged design-backup/opportunity-top-2026-09-28): New opportunity as a quiet link,
   then Edit and the "Won or lost" menu, which opens under itself toward the left. The
   account panels close by a click outside or Escape; the × is gone. */
:is(#account-opportunity, #account-section-drawer-actions) #overview-opportunity-controls:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
}

:is(#account-opportunity, #account-section-drawer-actions) #overview-opportunity-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

:is(#account-opportunity, #account-section-drawer-actions) #overview-opportunity-actions:empty {
  display: none;
}

:is(#account-opportunity, #account-section-drawer-actions) .opportunity-more .sprint-more-menu {
  right: 0;
  left: auto;
}

/* Deal Strategy, Zeitstrahl and Notes use the panel's full width, as Nico asked
   (2026-09-28): a narrow reading column left the right half of the panel empty. */
#account-deal-strategy .deal-strategy-view,
#account-deal-strategy .deal-strategy-form,
#account-deal-strategy .deal-strategy-meta,
#account-deal-strategy .deal-strategy-history,
#account-notes .account-note-form,
#account-timeline .timeline-import {
  max-width: none;
}

/* Files' Upload file matches the other panels' buttons (New note, Chronologie hochladen,
   Add research): the same height and text size, not the compact one. */
#account-files .files-header .secondary-button,
#file-vault-page .files-header .secondary-button {
  min-height: 2rem;
  font-size: var(--text-sm);
}

/* Sales Navigator and LinkedIn on the full contact card: rows like the email, their marks
   in the same grey and size as its icon, the name opening the profile in a new tab, a
   pencil to change the link when pointed at, and "Add the … link" in the quiet ink where
   none is saved (2026-09-28; before this tagged design-backup/contact-profiles-2026-09-28). */
.contact-card-profile-line .contact-card-method-link {
  flex: 0 1 auto;
}

.contact-card-profile-line .contact-card-profile-edit {
  position: static;
  border: 0;
  background: transparent;
}

.contact-card-profile-line .contact-card-profile-mark {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--color-ink-soft);
}

.contact-card-profile-line .contact-card-method-link::after {
  color: var(--color-ink-muted);
  content: " \2197";
  font-size: var(--text-xs);
}

.contact-card-profile-line .contact-card-method-link.is-missing {
  color: var(--color-ink-soft);
}

.contact-card-profile-line .contact-card-method-link.is-missing::after {
  content: none;
}

.contact-card-profile-line .contact-card-profile-edit {
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.contact-card-profile-line:hover .contact-card-profile-edit,
.contact-card-profile-line .contact-card-profile-edit:focus-visible {
  opacity: 1;
}

/* Revic on the prospect card: a row like the profiles, its mark at their size. */
.contact-card-method-link.is-revic .prospect-revic-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

/* All accounts, second calm pass (2026-09-28; before this tagged
   design-backup/all-accounts-2-2026-09-28). Engagement said beside the lifecycle only when
   it is not the usual ("Customer · Paused"), not in a column of "Active"; the Deal Sprint
   dot carries its meaning in a word; the open-deal filter a quiet line under the filters. */
#accounts-app .accounts-list-table .pill + .pill::before {
  margin-right: var(--space-1);
  color: var(--color-ink-muted);
  content: "·";
}

#accounts-app .accounts-list-table .pill + .pill {
  margin-left: var(--space-1);
}

/* Opportunities as a deal board (2026-09-28; before this tagged
   design-backup/opportunities-page-2026-09-28): the account, its group, the deal's target
   close, and the partner's people and companies. The customer column left with the
   customers (2026-09-29: Opportunities is the qualified prospects alone). */
#accounts-app .accounts-list-table.is-opportunities th:nth-child(1),
#accounts-app .accounts-list-table.is-opportunities td:nth-child(1) {
  width: 28%;
}

#accounts-app .accounts-list-table.is-opportunities th:nth-child(2),
#accounts-app .accounts-list-table.is-opportunities td:nth-child(2) {
  width: 18%;
}

#accounts-app .accounts-list-table.is-opportunities th:nth-child(3),
#accounts-app .accounts-list-table.is-opportunities td:nth-child(3) {
  width: 14%;
}

#accounts-app .accounts-list-table.is-opportunities th:nth-child(4),
#accounts-app .accounts-list-table.is-opportunities td:nth-child(4) {
  width: 22%;
}

#accounts-app .accounts-list-table.is-opportunities th:nth-child(5),
#accounts-app .accounts-list-table.is-opportunities td:nth-child(5) {
  width: 18%;
}

#accounts-app .deal-close-cell {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

#accounts-app .deal-close-late {
  margin-left: var(--space-2);
  color: var(--color-danger);
  font-weight: 500;
}

/* Partners, second pass (2026-09-28; before this tagged design-backup/partners-2-2026-09-28):
   no rule under the page title and no second heading repeating it -- the count of partners
   is the directory's first line, above its search. */
#partners-app .partner-workspace {
  grid-template-columns: minmax(10rem, 12.5rem) minmax(0, 1fr);
  border-block: 0;
}

/* The partner list about 40% narrower (2026-09-30, Nico): one line per name, as before,
   and the contacts beside it get the room. */
#partners-app .partner-directory {
  padding-right: var(--space-4);
}

#partners-app .partner-contact-panel {
  padding-left: var(--space-6);
}

@media (max-width: 48rem) {
  #partners-app .partner-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  #partners-app .partner-directory {
    padding-right: 0;
  }

  #partners-app .partner-contact-panel {
    padding-left: 0;
  }
}

#partners-app .partner-directory-header p {
  margin: 0;
  font-size: var(--text-sm);
}

/* Products, second pass (2026-09-28; before this tagged design-backup/products-2-2026-09-28):
   a planned or retired item says so beside its price. */
#products-app .catalog-entry-state {
  color: color-mix(in srgb, var(--color-warning) 75%, var(--color-ink));
  font-size: var(--text-xs);
  font-weight: 500;
}

#products-app .catalog-entry-price:empty {
  display: none;
}

/* Services carry long names ("Active Directory Security Assessment (ADSA)") and no price:
   their name column is wider, so a name reads on one line instead of wrapping beside
   short points (2026-09-28; before this tagged design-backup/services-2-2026-09-28). */
#products-app[data-catalog-kind="service"] .catalog-row {
  grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr);
}

/* Competitors, second pass (2026-09-28; before this tagged design-backup/competitors-2-2026-09-28):
   the "competes with" filter reads as tabs, like Prospecting's -- names with plain counts on
   a hairline, the chosen one in the ink over an accent underline -- not a row of pills. */
#competitors-app .competitor-filters {
  gap: 0 var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

#competitors-app .competitor-filter {
  gap: 0.375rem;
  min-height: 0;
  margin-bottom: -1px;
  padding: var(--space-2) 0 calc(var(--space-2) + 1px);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--color-ink-soft);
  background: none;
  font-weight: 500;
}

#competitors-app .competitor-filter:hover {
  color: var(--color-ink);
}

#competitors-app .competitor-filter[aria-pressed="true"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-ink);
  background: none;
}

#competitors-app .competitor-filter-count {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* Resources' Add link panel (2026-09-28; before this tagged design-backup/resources-2026-09-28):
   small regular labels like every other form, the "Keep it at hand" box a normal checkbox
   beside its words (the form's full-width rule had made it a 36px square in the middle),
   and Delete link a quiet word in the danger colour. */
.resource-form-body > label:not(.resource-pin-field) {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

.resource-form-body .resource-pin-field {
  justify-content: flex-start;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 400;
}

.resource-form-body .resource-pin-field input[type="checkbox"] {
  flex: none;
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
  padding: 0;
}

.resource-form-body textarea {
  min-height: 4.5rem;
  field-sizing: content;
}

.resource-form-footer .text-action.is-danger {
  padding: 0;
  font-size: var(--text-sm);
}

/* Prompts (2026-09-28; before this tagged design-backup/prompts-2026-09-28): a row shows
   its title, its date, its preview and Kopieren -- what a prompt is for. Bearbeiten,
   Löschen and the order arrows come in when the row is pointed at or focused, like the
   tools on Resources. The editor's labels are small and regular like every other form. */
#prompt-library .prompt-card-actions .prompt-card-action:not(:first-child),
#prompt-library .prompt-card-move {
  opacity: 0;
  transition: opacity 120ms ease-out;
}

#prompt-library .prompt-card:hover .prompt-card-action,
#prompt-library .prompt-card:focus-within .prompt-card-action,
#prompt-library .prompt-card:hover .prompt-card-move,
#prompt-library .prompt-card:focus-within .prompt-card-move {
  opacity: 1;
}

@media (hover: none) {
  #prompt-library .prompt-card-actions .prompt-card-action:not(:first-child),
  #prompt-library .prompt-card-move {
    opacity: 1;
  }
}

.prompt-drawer-body > label,
.prompt-drawer-body .prompt-field-label label {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* Org Chart, second pass (2026-09-28; before this tagged design-backup/org-chart-2-2026-09-28):
   one quiet toolbar -- the search with its label as the placeholder, Show all roles, and
   the three settings as compact dropdowns whose choices name themselves ("US reference",
   "Compact layout") -- instead of two rows of bold labels over bold fields. */
#org-chart-library .org-library-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  max-width: none;
}

#org-chart-library .org-library-toolbar > label {
  flex: 1 1 22rem;
  display: block;
}

#org-chart-library .org-library-toolbar input,
#org-chart-library .org-library-toolbar .secondary-button {
  align-self: auto;
}

#org-chart-library .org-library-preferences {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 0 auto;
}

#org-chart-library .org-library-preferences label {
  display: block;
  margin: 0;
}

#org-chart-library .org-library-preferences select {
  min-height: var(--control-height);
  font-weight: 400;
}

#org-chart-library .org-library-toolbar > label,
#org-chart-library .org-library-toolbar input {
  font-weight: 400;
}

/* File Vault (2026-09-28; before this tagged design-backup/file-vault-2026-09-28): no
   paragraph under the title (the empty state says what a section is for), each section's
   files the same quiet list as an account's Files, and Rename / Delete as quiet words. */
#file-vault-page .vault-section-actions {
  display: flex;
  gap: var(--space-4);
}

#file-vault-page .vault-section-actions .text-action {
  padding: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

#file-vault-page .vault-section-actions .text-action:hover {
  color: var(--color-accent-strong);
}

#file-vault-page .vault-section-actions .text-action.is-danger:hover {
  color: var(--color-danger);
}

/* The prospect card's guide in Merkio's colours (2026-09-28; before this tagged
   design-backup/prospect-card-colours-2026-09-28). Its wide bars -- the Revic prompt, the
   Sales Navigator line, Sent in Sales Navigator / by email -- are neutral like every other
   button: a white face, a hairline, words in the ink and marks in the soft ink, a quiet
   fill when pointed at. The step numbers are grey rings, and "Next step" is written as a
   label, not in capitals. Revic keeps its own mark's colours. */
.contact-card-send,
.prospect-wide-action {
  border-color: var(--color-line-strong);
  background: var(--color-surface);
}

.contact-card-send:hover,
.prospect-wide-action:hover {
  border-color: var(--color-ink-muted);
  background: var(--color-surface-subtle);
}

.contact-card-send-mark,
.prospect-wide-mark {
  border-color: var(--color-line);
  color: var(--color-ink-soft);
}

.contact-card-send-copy strong,
.prospect-wide-label {
  color: var(--color-ink);
}

.prospect-guide-number {
  border-color: var(--color-line-strong);
  color: var(--color-ink-soft);
}

/* Account profile under Research (0116, 0125), 2026-09-29 (before: tagged
   design-backup/account-research-profile-2026-09-29). What kind of company this is, read at
   a glance and the same on every account: one line per fact, the label bold in ink in a
   column of its own, the value beside it; longer texts wrap in the value column, the
   sources a short list of links. A hairline under the block sets it off from the research
   items. Edit is a quiet word; the same place becomes the form. */
#account-profile {
  margin: 0 0 var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

#account-profile .account-profile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

#account-profile h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 700;
}

#account-profile .account-profile-action {
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  color: var(--color-ink-soft);
  background: none;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

#account-profile .account-profile-action:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

#account-profile .account-profile-facts {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  margin: 0;
}

#account-profile .account-profile-fact {
  display: contents;
}

#account-profile .account-profile-fact dt,
#account-profile .account-profile-fact dd {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  line-height: 1.5;
}

#account-profile .account-profile-fact:first-child :is(dt, dd) {
  border-top: 0;
}

#account-profile .account-profile-fact dt {
  padding-right: var(--space-4);
  color: var(--color-ink);
  font-weight: 700;
}

#account-profile .account-profile-fact dd {
  margin: 0;
  color: var(--color-ink);
  font-weight: 400;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

#account-profile .account-profile-fact dd a {
  color: var(--color-accent);
  text-decoration: none;
}

#account-profile .account-profile-fact dd a:hover {
  text-decoration: underline;
}

#account-profile .account-profile-sources {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: normal;
}

@media (max-width: 560px) {
  #account-profile .account-profile-facts {
    grid-template-columns: minmax(0, 1fr);
  }

  #account-profile .account-profile-fact dd {
    padding-top: 0;
    border-top: 0;
  }
}

/* Research's headings are bold wherever it is opened (2026-09-29, Nico). */
#account-research :is(h3, h4) {
  font-weight: 700;
}

#account-profile .account-profile-source {
  margin: var(--space-4) 0 0;
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

#account-profile .account-profile-empty {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

#account-profile .account-profile-form-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-3) var(--space-4);
}

#account-profile .account-profile-form > .field {
  margin-top: var(--space-3);
}

#account-profile .account-profile-form label {
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 700;
}

#account-profile .account-profile-form input,
#account-profile .account-profile-form textarea {
  width: 100%;
}

#account-profile .account-profile-form-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

#account-profile .account-profile-form .error {
  margin: var(--space-3) 0 0;
}

/* Meeting minutes (0119), 2026-09-28, reworked the same day: the tab is an index -- one
   hairline row per meeting, the day, the title as a link in the accent, and which call it
   was -- and the minutes are read in a reader over the page, as a file's preview is. */
#account-minutes .account-minutes-list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

#account-minutes .account-minutes-entry {
  display: grid;
  grid-template-columns: 8rem minmax(0, max-content) auto;
  justify-content: start;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

#account-minutes .account-minutes-day {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#account-minutes .account-minutes-link {
  justify-self: start;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-strong);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition: text-decoration-color 160ms ease-out;
}

#account-minutes .account-minutes-link:hover,
#account-minutes .account-minutes-link:focus-visible {
  text-decoration-color: currentColor;
}

#account-minutes .account-minutes-kind-word {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}

#account-minutes .is-internal-call .account-minutes-kind-word {
  color: var(--color-internal);
}

@media (max-width: 40rem) {
  #account-minutes .account-minutes-entry {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
  }

  #account-minutes .account-minutes-link {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #account-minutes .account-minutes-kind-word {
    justify-self: start;
  }
}

/* The reader, calmed the same day to the drawer's anatomy: the title in the call's colour
   with its facts beneath, the minutes on the page's own surface, Edit and Copy in the
   footer. The account stays behind it, dimmed, as behind a file's preview. */
.has-minutes-reader {
  overflow: hidden;
}

.minutes-reader {
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: var(--space-6);
}

.minutes-reader-scrim {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgb(15 20 24 / 42%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

@media (prefers-reduced-transparency: reduce) {
  .minutes-reader-scrim {
    background: rgb(15 20 24 / 80%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.minutes-reader-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(50rem, 100%);
  max-height: min(90vh, 100%);
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  animation: minutes-reader-in 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes minutes-reader-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .minutes-reader-panel {
    animation: none;
  }
}

.minutes-reader-header {
  align-items: flex-start;
  gap: var(--space-4);
}

.minutes-reader-header > div {
  min-width: 0;
}

.minutes-reader-title {
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.minutes-reader.is-customer-call .minutes-reader-title {
  color: var(--color-accent-strong);
}

.minutes-reader.is-internal-call .minutes-reader-title {
  color: var(--color-internal);
}

.minutes-reader-meta {
  color: var(--color-ink-soft);
}

.minutes-reader-close {
  flex: none;
}

.minutes-reader-close svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.75;
}

.minutes-reader-body {
  overscroll-behavior: contain;
}

.minutes-reader-footer {
  align-items: center;
}

.minutes-reader-edit {
  margin-right: auto;
}

@media (max-width: 48rem) {
  .minutes-reader {
    padding: 0;
  }

  .minutes-reader-panel {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }

  .minutes-reader-header,
  .minutes-reader-body,
  .minutes-reader-footer {
    padding: var(--space-4);
  }
}

/* The minutes as pasted, set as a document: headings, lists, tables and quotes in the
   page's own type at a reading size. */
.minutes-document {
  max-width: 44rem;
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.minutes-document > :first-child {
  margin-top: 0;
}

.minutes-document > :last-child {
  margin-bottom: 0;
}

.minutes-document p,
.minutes-document ul,
.minutes-document ol,
.minutes-document blockquote,
.minutes-document .minutes-table,
.minutes-document .minutes-code {
  margin: 0 0 var(--space-3);
}

.minutes-document :is(h3, h4, h5, h6) {
  margin: var(--space-6) 0 var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.4;
}

.minutes-document h3 {
  font-size: var(--text-md);
}

.minutes-document :is(ul, ol) {
  padding-left: 1.25rem;
}

.minutes-document li + li {
  margin-top: var(--space-1);
}

.minutes-document li > :is(ul, ol) {
  margin: var(--space-1) 0 0;
}

.minutes-document blockquote {
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-line-strong);
  color: var(--color-ink-soft);
}

.minutes-document code {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  font-size: 0.875em;
}

.minutes-document .minutes-code {
  overflow-x: auto;
  padding: var(--space-3);
  border-radius: var(--radius-control);
  background: var(--color-surface-subtle);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.minutes-document .minutes-code code {
  padding: 0;
  background: none;
}

.minutes-document .minutes-table {
  overflow-x: auto;
}

.minutes-document table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.minutes-document :is(th, td) {
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
  text-align: left;
  vertical-align: top;
}

/* A cell breaks between words, not inside them: a name or a date stays whole, and a table
   too wide for its column scrolls in its wrapper rather than splitting "Nico" in two. */
.minutes-document :is(th, td) {
  overflow-wrap: normal;
  word-break: normal;
  min-width: 5ch;
}

.minutes-document th {
  color: var(--color-ink-soft);
  font-weight: 600;
}

.minutes-document hr {
  margin: var(--space-5) 0;
  border: 0;
  border-top: 1px solid var(--color-line);
}

.minutes-document a {
  color: var(--color-accent-strong);
  text-underline-offset: 0.2em;
}

.minutes-document .minutes-task {
  color: var(--color-ink-soft);
}

/* A to-do in the minutes shows its box, not a bullet as well. */
.minutes-document li.is-task {
  margin-left: -1.25rem;
  list-style: none;
}

#account-minutes .account-minutes-form {
  max-width: none;
}

/* Which call: two plain choices on one line, the chosen one in the ink. */
#account-minutes .account-minutes-kind {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: 0;
  border: 0;
}

#account-minutes .account-minutes-kind legend {
  width: 100%;
  margin-bottom: var(--space-1);
  padding: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 650;
}

#account-minutes .account-minutes-kind label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 500;
}

/* A radio is a small round mark beside its words, not a field of the form's height. */
#account-minutes .account-minutes-kind input[type="radio"] {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--color-accent-strong);
}

#account-minutes .account-minutes-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 12rem);
  gap: var(--space-3);
}

#account-minutes .account-minutes-delete {
  margin-left: auto;
}

#account-minutes .account-minutes-delete:hover {
  color: var(--color-danger);
}

@media (max-width: 40rem) {
  #account-minutes .account-minutes-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Blind spots (0120), 2026-09-28. In the rail, one line under the heading: in the accent
   while the account has blind spots, quiet while it has none; regular weight either way. */
.dossier-blind-spots-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-strong);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: text-decoration-color 160ms ease-out;
}

.dossier-blind-spots-link:hover,
.dossier-blind-spots-link:focus-visible {
  text-decoration-color: currentColor;
}

/* Quiet, but readable: the soft ink clears 4.5:1 where the muted one measured 3.5:1. */
.dossier-blind-spots-link.is-empty {
  color: var(--color-ink-soft);
  font-weight: 400;
}

/* A bullet before the line, in its own colour (Nico, 2026-09-28); inline-block, so the
   underline on hover stays under the words. */
.dossier-blind-spots-link::before {
  display: inline-block;
  width: 1em;
  content: "\2022";
}

/* On the right: the paste field when asked for, then the open points with their boxes,
   then the closed ones, each with a green tick. Rows divided by hairlines. */
.blind-spots-add {
  margin: 0 0 var(--space-4);
  padding: 0;
}

.blind-spots-form {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-line);
}

.blind-spots-form label {
  display: grid;
  gap: var(--space-2);
}

.blind-spots-form label > span {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 650;
}

.blind-spots-form-actions {
  display: flex;
  gap: var(--space-3);
}

.blind-spots-form .error {
  margin: 0;
}

.blind-spots-empty {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.blind-spots-group + .blind-spots-group {
  margin-top: var(--space-8);
}

.blind-spots-group h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 650;
}

.blind-spots-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.blind-spot {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

/* A box the size of the text beside it, set on its first line. */
.blind-spot-box {
  width: 1rem;
  height: 1rem;
  min-height: 0;
  margin: 0.2rem 0 0;
  padding: 0;
  accent-color: var(--color-accent-strong);
  cursor: pointer;
}

.blind-spot-box:disabled {
  cursor: default;
}

.blind-spot.is-closed .blind-spot-box {
  accent-color: var(--color-success);
}

.blind-spot-text {
  min-width: 0;
}

.blind-spot .minutes-document {
  max-width: none;
  line-height: 1.6;
}

.blind-spot.is-closed .minutes-document {
  color: var(--color-ink-soft);
}

.blind-spot-meta {
  margin: var(--space-1) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

/* Remove is there when the row is pointed at or reached by keyboard, not on every row. */
.blind-spot-remove {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-soft);
  font: inherit;
  font-size: var(--text-xs);
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.blind-spot:hover .blind-spot-remove,
.blind-spot:focus-within .blind-spot-remove {
  opacity: 1;
}

.blind-spot-remove:hover {
  color: var(--color-danger);
  text-decoration: underline;
}

@media (hover: none) {
  .blind-spot-remove {
    opacity: 1;
  }
}

/* All accounts (2026-09-28): the partner's people on the account and the partner companies
   they work for, one per line, in the row's own type; the company a step quieter. */
.account-partner-cell span {
  display: block;
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* A partner's person opens their contact card: the name as a link in the accent, one per
   line, underlined when pointed at. */
.account-partner-person {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-strong);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.45;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: text-decoration-color 160ms ease-out;
}

.account-partner-person:hover,
.account-partner-person:focus-visible {
  text-decoration-color: currentColor;
}

.account-partner-cell.is-company span {
  color: var(--color-ink-soft);
}

/* One line per row (2026-09-29, Nico): the main or first partner contact, a "+2" for the
   rest, and that person's company beside it. Names too long for the column end in an
   ellipsis and are whole in their tooltip; the list opens under the count. */
.account-partner-cell .account-partner-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.account-partner-line > .account-partner-person {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-partner-more {
  flex: none;
}

summary.account-partner-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.75rem;
  height: 1.375rem;
  padding: 0 var(--space-1);
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  color: var(--color-ink-soft);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

summary.account-partner-count:hover,
.account-partner-more[open] > summary.account-partner-count {
  border-color: var(--color-ink-muted);
  color: var(--color-ink);
}

.account-partner-more > .account-partner-menu {
  left: 0;
  right: auto;
  min-width: 18rem;
  gap: 0;
  padding: var(--space-2);
}

.account-partner-menu-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.account-partner-menu-row:hover {
  background: var(--color-surface-subtle);
}

.account-partner-menu-company {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.account-partner-cell .account-partner-company {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The account and its group on one line too, so every row is the same height. */
#accounts-app .accounts-list-table.is-opportunities {
  table-layout: fixed;
}

#accounts-app .accounts-list-table.is-opportunities .account-row-link {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

#accounts-app .accounts-list-table.is-opportunities .account-name,
#accounts-app .accounts-list-table.is-opportunities .account-group-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The Partner Sprint (0121), 2026-09-28. On the contact card: the step in the ink with its
   day beside it, the step's own action first and the rest as quiet text actions, a small
   form in place, and the log under hairlines -- date, what was done, and what was written
   in its own lines. */
.partner-sprint-card {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

.partner-sprint-place {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

.partner-sprint-empty {
  margin: var(--space-2) 0 var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.partner-due {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.partner-due.is-overdue {
  color: var(--color-danger);
  font-weight: 600;
}

.partner-sprint-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.partner-action-form {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.partner-action-form select,
.partner-action-form input[type="date"] {
  width: auto;
  max-width: 14rem;
}

.partner-action-form textarea {
  min-height: 0;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.partner-action-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.partner-action-form .error {
  margin: 0;
}


/* Questions to the partner manager: the question, when it was asked and how often chased,
   its day, and Chased / Answered. */
.partner-asks {
  margin-top: var(--space-4);
}

.partner-asks-title {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 650;
}

.partner-ask-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.partner-ask {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

.partner-ask-question {
  margin: 0;
  font-size: var(--text-sm);
  white-space: pre-wrap;
}

.partner-ask-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-1) 0 var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

/* Today: one row per partner contact due -- the name opening their card, the partner, the
   step and its day. */
.partner-today-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}

.partner-today-row {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 10rem) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-line);
}

.partner-today-name {
  justify-self: start;
  min-height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-strong);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.partner-today-name:hover,
.partner-today-name:focus-visible {
  text-decoration-color: currentColor;
}

.partner-today-company {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.partner-today-step {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

@media (max-width: 40rem) {
  .partner-today-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

/* The partner's name and one quiet line under it -- its contacts and where the Partner
   Sprint stands with it (2026-09-30, Nico) -- then the table straight away. */
#partners-app .partner-contact-header {
  margin-bottom: var(--space-3);
}

#partners-app .partner-contact-header h2 {
  margin: 0;
}

.partner-contact-meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.partner-sprint-overview .partner-sprint-empty {
  display: inline;
  margin: 0;
}

/* The Partners page, one list since 2026-09-28: under each name, the person's place in the
   Partner Sprint with its day and the accounts in play with them, or Add to sprint. */
.partner-row-sprint {
  display: block;
  margin-top: var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.partner-row-sprint .text-action {
  padding: 0;
}

.partner-row-sprint .partner-due {
  margin-left: var(--space-1);
}

/* The person's photo on the contact card (2026-09-28): small and round, beside the name. */
.prospect-contact-photo {
  flex: none;
  width: 3rem;
  height: 3rem;
  margin-right: var(--space-3);
  border-radius: 50%;
  object-fit: cover;
}

/* In the card's top corner the menu opens downwards and keeps to the card's right edge
   (in the old drawer's footer it opened upwards from the left). */
.prospect-contact-more .contact-more-menu {
  top: calc(100% + var(--space-1));
  right: 0;
  bottom: auto;
  left: auto;
}

/* Contact card review (2026-09-28): the prompt menu stays inside a phone-wide card, and the
   minutes read under the section headings. */
.prospect-contact-drawer .prospect-prompt-bar > .prospect-entry-menu {
  width: min(22rem, 100%);
}

/* The Log as the Prospect card's contact history (2026-09-29, Nico): a history mark at the
   head of the line, the line down the dates, one dot per entry. The mark sits centred on
   the line (0.3rem from the list's edge), on the surface so the line starts beneath it. */
.contact-log-timeline {
  position: relative;
}

.contact-log-start {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: calc(0.3rem - 0.625rem + 0.5px);
  color: var(--color-ink-soft);
  background: var(--color-surface);
}

.contact-log-start svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.contact-log-timeline > .contact-card-timeline {
  margin-top: var(--space-2);
}

.contact-log-timeline > .contact-card-timeline::before {
  top: calc(-1 * var(--space-2) - 0.25rem);
}

.partner-log-note {
  font-size: var(--text-sm);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.partner-log-body {
  flex-basis: 100%;
  min-width: 0;
}

.partner-log-title {
  margin-top: var(--space-4);
}

.partner-log-minutes :is(h1, h2, h3, h4, h5, h6) {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  font-weight: 650;
}

/* The card's header in fewer lines: Edit, More and Close side by side under the status, and
   the ways to reach the person in one wrapping row instead of a line each. */
.prospect-contact-corner {
  flex-flow: row wrap;
  justify-content: flex-end;
  align-items: center;
  max-width: 12rem;
}

.prospect-contact-status {
  flex-basis: 100%;
  text-align: right;
}

/* One link a line, one under the other (2026-09-29, Nico): Sales Navigator, LinkedIn,
   Glean, Revic, the email and the phone as a short list under the job. */
.prospect-contact-reach .contact-card-methods {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--space-1);
}

/* On a phone the corner floats over the header's top right and only the name keeps clear of
   it: the job and the ways to reach the person take the card's whole width. */
@media (max-width: 40rem) {
  .prospect-contact-drawer .drawer-header {
    position: relative;
  }

  .prospect-contact-drawer .prospect-contact-corner {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
  }

  .prospect-contact-drawer .prospect-contact-heading h2 {
    padding-right: 8.5rem;
  }
}

/* A toast with Undo (2026-09-28): the message and one button on the same line. */
.toast-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.toast-undo-button {
  flex: none;
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-control);
  color: var(--color-on-ink);
  background: none;
  font: inherit;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.toast-undo-button:hover {
  background: color-mix(in srgb, var(--color-on-ink) 14%, transparent);
}

.toast-undo-button:focus-visible {
  outline: 2px solid var(--color-on-ink);
  outline-offset: 2px;
}

/* The partner's card (2026-09-28, Impeccable review). Strategy and Accounts are sections of
   the card, headed like Events and Documents -- ink, 600 -- while Asked Jörg and Log stay
   quieter sub-heads; a list's last row draws no rule where the card's own follows; the
   prospect's Revic and Sales Navigator bars give way to the header's Sales Navigator link;
   and every section action is the same small link. */
.prospect-contact-drawer .partner-section-title {
  color: var(--color-ink);
  font-weight: 600;
}

.prospect-contact-drawer .partner-ask:last-child {
  border-bottom: 0;
}

.prospect-contact-drawer.is-partner .contact-card-work {
  display: none;
}


/* The partner's card laid out to flow (2026-09-28, Impeccable layout; the card before is
   tagged design-backup/partner-card-flow-2026-09-28). One path down the card -- who, where
   the sprint stands and what to record, then the record -- in
   one rhythm: tight inside a group (8-12px), 24px between the sprint's parts, one hairline
   and 24px between the sprint and the record. A section's action sits beside its heading,
   not across the card; a heading is never cut from its own rows by a rule. */
.prospect-contact-drawer .contact-card-section-header {
  justify-content: flex-start;
  gap: var(--space-2) var(--space-4);
}

.prospect-contact-drawer .partner-sprint-card .partner-ask-list {
  border-top: 0;
}

/* The sprint ends in space, the record begins with the one hairline. */
.prospect-contact-drawer .partner-sprint-card {
  margin-bottom: 0;
  padding-bottom: var(--space-6);
  border-bottom: 0;
}

.prospect-contact-body .prospect-contact-card .contact-card-section {
  padding: var(--space-5) 0;
}

/* A link still to add keeps its place and its words -- "Add Sales Navigator URL" -- and is
   muted, its mark too, so it reads as empty at a glance (2026-09-29, Nico). */
.prospect-contact-reach .contact-card-method-link.is-missing {
  color: var(--color-ink-muted);
}

.prospect-contact-reach .contact-card-method-link.is-missing :is(svg, .contact-card-profile-mark, .prospect-revic-icon) {
  filter: grayscale(1);
  opacity: 0.45;
}

.prospect-contact-reach .contact-card-method-link.is-missing:hover {
  color: var(--color-ink);
}

.prospect-contact-reach .contact-card-method-link.is-missing:hover :is(svg, .contact-card-profile-mark, .prospect-revic-icon) {
  opacity: 0.8;
}

/* The partner's card (2026-09-28): every heading one style (ink, 600), every section action
   one quiet grey word beside it. */
.prospect-contact-drawer .partner-sprint-card :is(.partner-asks-title, .partner-section-title) {
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.prospect-contact-drawer :is(.partner-sprint-card, .contact-card-section-header, .files-header) .text-action {
  min-height: 1.5rem;
  padding: 0;
  border: 0;
  color: var(--color-ink-soft);
  background: none;
  font-size: var(--text-sm);
  font-weight: 400;
}

.prospect-contact-drawer :is(.partner-sprint-card, .contact-card-section-header, .files-header) .text-action:hover {
  color: var(--color-ink);
  background: none;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.prospect-contact-drawer .partner-sprint-card .text-action.is-lead {
  color: var(--color-ink);
}

.prospect-contact-drawer .contact-card-files .files-header {
  justify-content: flex-start;
  gap: var(--space-4);
}

/* The card below its next step as record rows (2026-09-28, third pass; Nico: "more visual,
   easy to read in one look"). Every part -- the questions to the partner manager, the
   log, events, documents -- is one row: its name in a
   fixed column on the left, what it holds on the right, its action last and quiet, one
   hairline and the same padding between every row. The headers become part of the row's
   grid (display: contents), so no part needs its own markup. */
.prospect-contact-drawer :is(.partner-asks, .partner-log),
.prospect-contact-body .prospect-contact-card > .contact-card-section:not(.contact-card-work):not([hidden]) {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  align-items: start;
  margin: 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
}

.prospect-contact-drawer .partner-sprint-card {
  padding-bottom: 0;
}

.prospect-contact-drawer .partner-guide {
  padding-bottom: var(--space-4);
}

.prospect-contact-card > .contact-card-section > .contact-card-section-header,
.prospect-contact-card > .contact-card-files > .files-panel,
.prospect-contact-card > .contact-card-files > .files-panel > .files-header,
.prospect-contact-card > .contact-card-files > .files-panel > .files-header > div {
  display: contents;
}

.prospect-contact-drawer :is(.partner-asks, .partner-log) > h4,
.prospect-contact-card > .contact-card-section > .contact-card-section-header > h3,
.prospect-contact-card > .contact-card-files .files-header > div > h3 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5rem;
}

.prospect-contact-drawer :is(.partner-asks, .partner-log) > :not(h4),
.prospect-contact-card > .contact-card-section > :not(.contact-card-section-header),
.prospect-contact-card > .contact-card-section > .contact-card-section-header > :not(h3),
.prospect-contact-card > .contact-card-files .files-header > button,
.prospect-contact-card > .contact-card-files .files-body {
  grid-column: 2;
  min-width: 0;
  margin: 0;
}

/* Each row's action comes after what it holds. */
.prospect-contact-card > .contact-card-section > .contact-card-section-header > :not(h3),
.prospect-contact-card > .contact-card-files .files-header > button {
  order: 50;
  justify-self: start;
}

.prospect-contact-drawer :is(.partner-asks, .partner-log, .contact-card-section) > :empty,
.prospect-contact-drawer .partner-sprint-form-host:empty {
  display: none;
}

.prospect-contact-drawer :is(.partner-sprint-empty, .contact-card-empty) {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.5rem;
}

/* Documents with nothing in them say so in the row, like Events. */
.prospect-contact-drawer .contact-card-files .files-state.is-empty {
  display: block;
  justify-items: start;
  text-align: left;
}

.prospect-contact-drawer .contact-card-files .files-state.is-empty strong {
  display: block;
  width: auto;
  max-width: none;
  text-align: left;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5rem;
}

.prospect-contact-drawer .contact-card-files .files-state.is-empty p {
  display: none;
}

.prospect-contact-drawer .contact-card-files .files-header .secondary-button {
  box-shadow: none;
}

.prospect-contact-card > .contact-card-files .files-header > div > p {
  display: none;
}

/* Today's Partner Sprint in two groups (2026-09-28): People to contact and Accounts to work
   on, each headed with its count; a person due for a message has Sent at the row's end, and
   its question -- how it went out -- opens under the row. */
.partner-today-group + .partner-today-group {
  margin-top: var(--space-6);
}

.partner-today-group-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.partner-today-group-count {
  color: var(--color-ink-soft);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.partner-today-row {
  grid-template-columns: minmax(0, 14rem) minmax(0, 10rem) minmax(0, 1fr) auto;
  align-items: center;
}

@media (max-width: 40rem) {
  .partner-today-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The Prospects list: a quiet ⋯ at each row's end for its rarer actions (2026-09-29). */
.accounts-list-table.is-prospects th:nth-child(5),
.accounts-list-table.is-prospects td:nth-child(5) {
  width: 3rem;
  text-align: right;
}

.prospect-row-more {
  position: relative;
  display: inline-block;
}

.prospect-row-more-toggle {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-control);
  color: var(--color-ink-soft);
  list-style: none;
  cursor: pointer;
}

.prospect-row-more-toggle::-webkit-details-marker {
  display: none;
}

.prospect-row-more-toggle:hover,
.prospect-row-more[open] > .prospect-row-more-toggle {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.prospect-row-more > .prospect-entry-menu {
  right: 0;
  left: auto;
  min-width: 15rem;
  text-align: left;
}

/* An account's contacts on a prospected account (2026-09-29): Add to sprint as one small
   outlined button beside the main-contact mark, or, once added, a quiet "In the sprint". */
.account-contacts .account-contact-add-sprint {
  min-height: 2rem;
  font-size: var(--text-sm);
  font-weight: 500;
  vertical-align: middle;
}

.account-contacts .account-contact-in-sprint {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  vertical-align: middle;
}

/* The last rows open their menu upwards, inside the table's own scroll area. */
#account-rows > tr:nth-last-child(-n + 2) .prospect-row-more > .prospect-entry-menu {
  top: auto;
  bottom: calc(100% + var(--space-1));
}

.accounts-list-table.is-prospects th:nth-child(1),
.accounts-list-table.is-prospects td:nth-child(1) {
  width: 36%;
}

/* Today's Prospect Sprint in groups (2026-09-29): Due, then To start today -- the people the
   daily pace starts -- each headed with its count, as the Partner Sprint's groups are. */
#today-prospecting .prospect-today-group {
  list-style: none;
  padding: var(--space-5) 0 var(--space-1);
}

#today-prospecting .prospect-today-group:first-child {
  padding-top: 0;
}

#today-prospecting .prospect-today-group-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

#today-prospecting .prospect-today-group-count {
  color: var(--color-ink-soft);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Within a group, each company heads its people (2026-09-29), as on the Deal Sprint tab:
   the group's mark and the name in ink at the same size, a link to the account that shows
   as one only when pointed at, and its people along a thin upright line under the mark.
   No Contact / Next step titles over them (2026-09-29, Nico). */
#today-prospecting .prospect-today-company {
  list-style: none;
  padding: var(--space-4) 0 var(--space-1);
}

#today-prospecting .prospect-today-company-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: 600;
}

#today-prospecting .prospect-today-company-name .account-group-icon {
  width: 1rem;
  height: 1rem;
  stroke: color-mix(in srgb, var(--color-accent) 70%, var(--color-ink-muted));
}

#today-prospecting .prospect-today-company-rows {
  margin-left: 0.5rem;
  padding-left: calc(var(--space-6) - 0.5rem);
  border-left: 1px solid var(--color-line-strong);
}

#today-prospecting .prospect-today-company-name a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  color: var(--color-ink);
  text-decoration: none;
}

#today-prospecting .prospect-today-company-name a:hover {
  text-decoration: underline;
}

/* An account's contacts, calmer (2026-09-29, Impeccable; before: tagged
   design-backup/account-contacts-rows-2026-09-29). Each row reads name, sprint, mark -- the
   email and phone are on the person's card; the sprint sits in a slot of its own width -- a small status dot
   with "In the sprint", or Add to sprint as a quiet word that firms up when pointed at; the
   main-contact mark is a bare icon that shows while the row is pointed at, and stays, in the
   accent on a soft round, on the one person who is the main contact. */

.account-contacts .account-contact-standing {
  padding-left: var(--space-4);
}

.account-contacts .account-contact-standing > * + * {
  margin-left: var(--space-1);
}

.account-contacts .account-contact-sprint {
  display: inline-flex;
  align-items: center;
  width: 8.5rem;
  vertical-align: middle;
}

.account-contacts .account-contact-in-sprint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.account-contacts .account-contact-in-sprint::before {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--color-success);
}

.account-contacts .account-contact-add-sprint {
  min-height: 2rem;
  padding: 0 var(--space-2);
  margin-left: calc(-1 * var(--space-2));
  border: 0;
  border-radius: var(--radius-control);
  color: var(--color-ink-soft);
  background: none;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.account-contacts .account-contact-add-sprint:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.account-contacts .account-contact-add-sprint:disabled {
  opacity: 0.5;
  cursor: default;
}

.account-contacts .account-contact-main.secondary-button,
.account-contacts .account-contact-main.secondary-button:not(.is-taken):not(:disabled),
.account-contacts .account-contact-main.is-taken {
  border: 0;
  border-radius: 50%;
  color: var(--color-ink-muted);
  background: transparent;
  box-shadow: none;
}

.account-contacts .account-contact-main:not(.is-taken) {
  opacity: 0;
  transition: opacity 120ms ease, background-color 120ms ease;
}

.account-contacts tr:hover .account-contact-main,
.account-contacts tr:focus-within .account-contact-main {
  opacity: 1;
}

.account-contacts .account-contact-main.secondary-button:not(.is-taken):not(:disabled):hover {
  color: var(--color-accent-strong);
  background: var(--color-surface-subtle);
}

.account-contacts .account-contact-main.is-taken,
.account-contacts .account-contact-main.is-taken:not(:disabled):hover {
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

@media (hover: none) {
  .account-contacts .account-contact-main:not(.is-taken) {
    opacity: 1;
  }
}

/* All accounts ends with the Prospect column (2026-09-29): an icon button -- the Prospects
   magnifier with a plus -- in the ink, firming to the accent when pointed at; greyed, with a
   tick, once the account is on the list. */
.accounts-list-table:not(.is-prospects):not(.is-opportunities) th:nth-child(1),
.accounts-list-table:not(.is-prospects):not(.is-opportunities) td:nth-child(1) {
  width: 40%;
}

.accounts-list-table:not(.is-prospects):not(.is-opportunities) th:nth-child(5),
.accounts-list-table:not(.is-prospects):not(.is-opportunities) td:nth-child(5) {
  width: 7.5rem;
  text-align: center;
}

.account-prospect-icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--color-ink-soft);
  background: none;
  vertical-align: middle;
  cursor: pointer;
}

.account-prospect-icon svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

button.account-prospect-icon:hover {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

button.account-prospect-icon:disabled {
  opacity: 0.5;
  cursor: default;
}

.account-prospect-icon.is-on {
  color: var(--color-ink-muted);
  opacity: 0.55;
  cursor: default;
}

/* The account's main partner contact (its star, 2026-09-29): first in the cell, in the
   danger colour, so the one to call reads before the rest. */
.account-partner-person.is-main {
  color: var(--color-danger);
  font-weight: 600;
}

.account-partner-person.is-main:hover {
  color: var(--color-danger);
}

/* The Partner prospecting page (2026-09-29): Today's partner block, then People as the same
   headed groups of rows -- a name, the partner, the step and its day. */
#partner-prospecting-page .today-tabs {
  margin: var(--space-5) 0 var(--space-5);
}

#partner-prospecting-page .partner-prospecting-panel:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

/* The Contacts page (2026-09-29): one heading, the three kinds of people as tabs (links,
   one page each), and under them the tab's page without its own heading -- its buttons,
   such as New contact, stay on their row. */
.contacts-hub-head .page-title-row {
  margin-bottom: 0;
}

.contacts-hub-tabs {
  margin: var(--space-4) 0 var(--space-5);
}

.contacts-hub-tabs .prospect-today-tab {
  text-decoration: none;
}

.contacts-hub-tabs .prospect-today-tab[aria-current="page"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-ink);
}

.contacts-hub-head ~ :is(#contacts-app, #colleagues-app, #partners-app) .page-title-row h1 {
  display: none;
}

.contacts-hub-head ~ :is(#contacts-app, #colleagues-app, #partners-app) > .page-title-row:not(:has(button, a)) {
  display: none;
}

.contacts-hub-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The contact card's prompt and send lines (2026-09-29, Nico; before: tagged
   design-backup/card-bars-left-2026-09-29): at the card's left edge, not in the rows' value
   column, and without a frame -- the mark and the words, a quiet grey when pointed at. */
.prospect-contact-body .prospect-contact-card > .contact-card-work {
  grid-template-columns: minmax(0, 1fr);
  /* Close to the hairlines above and below it (2026-09-29, Nico): it sat in a wide band. */
  margin-top: calc(-1 * var(--space-4));
  padding: 0 0 var(--space-2);
}

.prospect-contact-body .prospect-contact-card > .contact-card-work > * {
  grid-column: 1;
}

.prospect-contact-drawer :is(.contact-card-send, .prospect-prompt-bar > .prospect-wide-action) {
  border-color: transparent;
  border-style: solid;
}

/* Every mark on the contact card at one size (2026-09-29, Nico): the top line's and the
   lines' below alike, Revic's included -- 1rem square. */
.prospect-contact-drawer :is(.contact-card-send-mark, .prospect-wide-mark) svg,
.prospect-contact-drawer .contact-card-profile-mark,
.prospect-contact-drawer .prospect-revic-icon {
  width: 1rem;
  height: 1rem;
}

/* The contact card's Documents and Events: no "No files yet" line under the heading -- the
   upload arrow and the calendar beside it say what can be done (2026-09-29, Nico). */
.prospect-contact-card .contact-card-files .files-state.is-empty {
  display: none;
}

/* The lower rows of the card -- Events, Documents, Notes -- read as one line each while
   they are empty: the heading at the left, its icon action at the row's right edge on the
   same line, as in a milestone's window (2026-09-29, Nico). What a row holds sits under
   that line in the value column. */
.prospect-contact-body .prospect-contact-card :is(.contact-card-events, .contact-card-files, .contact-card-notes) .files-upload-icon {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin: -0.125rem calc(-1 * var(--space-1)) -0.125rem 0;
}

.prospect-contact-card :is(.contact-card-events, .contact-card-files, .contact-card-notes) > :not(.contact-card-section-header):not(.files-panel),
.prospect-contact-card .contact-card-files .files-body {
  grid-column: 2;
  grid-row: 2;
}

.prospect-contact-card :is(.contact-card-events, .contact-card-files, .contact-card-notes) :is(.contact-card-event-list, .files-body, .contact-card-notes-body):empty {
  display: none;
}

/* Revic's prompts in the card's header: a framed button with Revic's mark, the size of the
   menu button beside it, opening the same list of prompts (2026-09-29, Nico). */
.prospect-contact-prompt:empty,
.prospect-contact-drawer.is-partner .prospect-contact-prompt {
  display: none;
}

.prospect-prompt-bar.is-header {
  position: relative;
}

.prospect-contact-drawer .prospect-prompt-bar.is-header > .prospect-wide-action {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  /* The menu button's height beside it: a control's height; B3 sets its own below. */
  min-height: var(--control-height);
  padding: 0;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  list-style: none;
  cursor: pointer;
}

.prospect-contact-drawer .prospect-prompt-bar.is-header > .prospect-wide-action:hover {
  background: var(--color-surface-subtle);
}

.prospect-prompt-bar.is-header > .prospect-wide-action::-webkit-details-marker {
  display: none;
}

.prospect-prompt-bar.is-header .prospect-wide-mark {
  width: auto;
  height: auto;
  border: 0;
  background: none;
}

.prospect-prompt-bar.is-header .prospect-wide-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.prospect-prompt-bar.is-header > .prospect-prompt-menu {
  right: 0;
  left: auto;
  z-index: 5;
}

/* With the prompt in the header, Events is the card's first part outside a Sprint: no
   hairline of its own right under the header's. */
.prospect-contact-body .prospect-contact-card > .prospect-contact-sprint[hidden] + .contact-card-events {
  padding-top: 0;
  border-top: 0;
}

/* The person's picture before the name: the photo, or a silhouette in its place, round and
   6.75rem across -- twice half again the first 3rem (2026-09-30, Nico); a click chooses
   a photo. */
.prospect-contact-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 6.75rem;
  height: 6.75rem;
  min-height: 0;
  margin-right: var(--space-4);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  color: var(--color-ink-muted);
  background: var(--color-surface-subtle);
  cursor: pointer;
}

.prospect-contact-avatar:disabled {
  cursor: default;
}

.prospect-contact-avatar:not(:disabled):hover {
  color: var(--color-ink-soft);
  box-shadow: 0 0 0 2px var(--color-line-strong);
}

.prospect-contact-avatar:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.prospect-contact-avatar .prospect-contact-photo {
  width: 100%;
  height: 100%;
  margin: 0;
}

.prospect-contact-silhouette {
  display: grid;
  place-items: center;
}

.prospect-contact-silhouette[hidden] {
  display: none;
}

.prospect-contact-silhouette svg {
  width: 4.5rem;
  height: 4.5rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Notes at the card's foot: read formatted, the pencil beside the heading while the row is
   pointed at; the field and its Submit or Save while writing. */
.prospect-contact-card .contact-card-notes-body {
  min-width: 0;
}

.prospect-contact-card .contact-card-section-header > .contact-card-notes-edit {
  opacity: 0;
  transition: opacity 120ms ease-out;
}

/* A click on the notes opens them for editing as the pencil does (2026-09-29, Nico: the
   pencil, shown only while the row is pointed at, went unnoticed). */
.prospect-contact-card .contact-card-notes-view.is-editable {
  border-radius: var(--radius-sm);
  cursor: text;
  transition: background-color 120ms ease-out;
}

.prospect-contact-card .contact-card-notes-view.is-editable:hover {
  background: var(--color-surface-subtle);
}

.prospect-contact-card .contact-card-notes:is(:hover, :focus-within) .contact-card-notes-edit,
.prospect-contact-card .contact-card-notes-edit:focus-visible {
  opacity: 1;
}

.prospect-contact-card .contact-card-notes-edit[hidden] {
  display: none;
}

@media (hover: none) {
  .prospect-contact-card .contact-card-section-header > .contact-card-notes-edit {
    opacity: 1;
  }
}

.contact-card-notes-view {
  max-width: none;
  font-size: var(--text-sm);
}

.contact-card-notes-view :is(p, ul, ol, blockquote) {
  margin: 0;
}

.contact-card-notes-form {
  display: grid;
  gap: var(--space-2);
}

/* A writing line rather than a boxed form: the surface's quiet fill, no frame until it is
   in use, one control high while empty and growing with what is written. */
.contact-card-notes-field {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--color-ink);
  background: var(--color-surface-subtle);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.6;
  resize: none;
  field-sizing: content;
  transition: border-color 120ms ease-out, background-color 120ms ease-out;
}

.contact-card-notes-field::placeholder {
  color: var(--color-ink-muted);
}

.contact-card-notes-field:hover {
  border-color: var(--color-line);
}

.contact-card-notes-field:focus {
  border-color: var(--color-line-strong);
  outline: none;
  background: var(--color-surface);
}

.contact-card-notes-field:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

/* Submit, or Save and Cancel, only once there is something to keep. */
.contact-card-notes-actions {
  display: flex;
  gap: var(--space-2);
}

.contact-card-notes-form:not(.is-composing) .contact-card-notes-actions {
  display: none;
}

/* Notes start on the heading's line, read or written; a saved note keeps clear of the
   pencil that shows at the line's end while the row is pointed at. */
.prospect-contact-body .prospect-contact-card .contact-card-notes > .contact-card-notes-body {
  grid-row: 1;
}

.prospect-contact-body .prospect-contact-card .contact-card-notes-body:has(> .contact-card-notes-view) {
  padding-right: var(--space-8);
}

/* Every Edit on a page as the same pencil (2026-09-29, Nico): quiet until pointed at, the
   size of the page's other small icon actions. The word stays as its tooltip. */
.edit-pencil {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  background: none;
  cursor: pointer;
}

.edit-pencil[hidden] {
  display: none;
}

.edit-pencil:hover,
.edit-pencil:focus-visible {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.edit-pencil svg,
.matter-preview-action.is-pencil svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.matter-preview-action.is-pencil {
  display: inline-grid;
  place-items: center;
  color: var(--color-ink-soft);
}

/* A page's own add as a framed icon: New contact is a person with a plus (2026-09-29,
   Nico), square at the height of the page's other framed buttons, its name as tooltip. */
.page-icon-action {
  display: inline-grid;
  place-items: center;
  width: var(--control-height);
  height: var(--control-height);
  min-height: 0;
  padding: 0;
}

.page-icon-action svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Under the company profile, research with nothing in it is one quiet line, not a panel:
   Add research stands at the section's top (2026-09-29, Nico). */
.account-research-empty {
  margin: var(--space-4) 0 0;
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
}

.account-research-empty[hidden] {
  display: none;
}

.page-icon-action[hidden] {
  display: none;
}

/* Up in the window's header (2026-09-29, Nico) the opportunity's controls stay one row
   beside the title: the picker as wide as its choice, then New, Edit and Won or lost. */
#account-section-drawer-actions #overview-opportunity-controls:not([hidden]) {
  flex-wrap: nowrap;
}

#account-section-drawer-actions .opportunity-selector {
  width: auto;
}

/* The opportunity's name is not said twice (2026-09-29, Nico): the window reads
   "<customer> - Opportunity" and, where there are several, the picker beside it names the
   one shown. The stage line leads. */
#account-opportunity #current-opportunity-title {
  display: none;
}

/* Org Chart's search is the tab's first line: none of a form label's space above it, so it
   stands as close under the window's line as every other tab's content (2026-09-29). */
.account-section-drawer-body .org-chart-toolbar > label {
  margin-top: 0;
}

/* Meeting minutes start as Notes do, right under the window's line: no second line on top
   of the list and no row padding above the first meeting (2026-09-29, Nico). */
.account-section-drawer-body #account-minutes .account-minutes-list {
  border-top: 0;
}

.account-section-drawer-body #account-minutes .account-minutes-entry:first-child {
  padding-top: 0;
}

/* Log interaction as one bar that opens every outcome that fits (2026-09-29, Nico): the
   card's wide bar with a chevron at its end; the menu as wide as the bar, in named groups. */
.partner-log-picker > summary .prospect-wide-label {
  flex: 1 1 auto;
}

.partner-log-picker svg,
.partner-reminders svg,
.partner-reminder-done svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.partner-log-picker-chevron {
  display: inline-grid;
  flex: none;
  place-items: center;
  color: var(--color-ink-muted);
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.partner-log-picker-chevron svg {
  width: 1rem;
  height: 1rem;
}

.partner-log-picker[open] .partner-log-picker-chevron {
  transform: rotate(180deg);
}

.partner-log-picker[aria-busy="true"],
.partner-log-picker > summary[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.partner-log-picker > .partner-log-menu {
  left: 0;
  right: 0;
  max-height: min(24rem, 60vh);
  overflow-y: auto;
}

/* The group names at the items' size, set apart by weight (2026-09-29, Nico); each item
   under them starts with a small dot. */
.partner-log-menu-group {
  margin: var(--space-2) var(--space-3) var(--space-1);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.partner-log-menu > .prospect-entry-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-left: var(--space-4);
}

.partner-log-menu > .prospect-entry-menu-item::before {
  flex: none;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
  content: "";
}

.partner-log-menu-group:first-child {
  margin-top: var(--space-1);
}

/* Reminders above Log interaction: a quiet heading with a bell, each reminder one line --
   the round Done, why, then its day -- and Set a reminder at the heading row's right end. */
.partner-reminders {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.partner-reminders-host > .partner-reminders {
  margin-top: var(--space-3);
}

/* Above Log interaction on the card (2026-09-29, Nico): the hairline goes under the
   reminders instead of over them. */
.partner-guide > .partner-reminders {
  padding-top: 0;
  padding-bottom: var(--space-3);
  border-top: 0;
  border-bottom: 1px solid var(--color-line);
}

.partner-reminders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* The bell and the heading in the tone of the next reminder (2026-09-29, Nico): more than
   three days away success, one to three days warning, today or overdue danger. */
.partner-reminders-title.is-calm,
.partner-reminders-title.is-calm .partner-reminders-bell {
  color: var(--color-success);
}

.partner-reminders-title.is-near,
.partner-reminders-title.is-near .partner-reminders-bell {
  color: var(--color-warning);
}

.partner-reminders-title.is-urgent,
.partner-reminders-title.is-urgent .partner-reminders-bell {
  color: var(--color-danger);
}

.partner-reminders-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5rem;
}

.partner-reminders-bell {
  display: inline-grid;
  place-items: center;
  color: var(--color-ink-soft);
}

.partner-reminders-bell svg {
  width: 1rem;
  height: 1rem;
}

/* Set a reminder: a bell with a plus at the right end of the heading row, its name as
   tooltip. */
.partner-reminder-add {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  color: var(--color-ink-soft);
  background: transparent;
  cursor: pointer;
}

.partner-reminder-add svg {
  width: 1rem;
  height: 1rem;
}

.partner-reminder-add:hover,
.partner-reminder-add:focus-visible,
.partner-reminder-add[aria-expanded="true"] {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.partner-reminder-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-reminder-list:empty {
  display: none;
}

/* Laid out as the milestone to-dos (2026-09-29, Nico): the round Done first, why next to
   it, the day at the end in the muted voice; no rules between the lines. */
.partner-reminder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.25rem;
  font-size: var(--text-sm);
}

.partner-reminder-day {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.partner-reminder-done.is-placeholder {
  cursor: default;
}

.partner-reminder.is-due .partner-reminder-day .partner-due:not(.is-overdue) {
  color: var(--color-ink);
  font-weight: 600;
}

.partner-reminder-reason,
.partner-today-reason {
  min-width: 0;
  color: var(--color-ink);
  overflow-wrap: anywhere;
}

.partner-reminder-reason.is-plain,
.partner-today-reason.is-plain {
  color: var(--color-ink-soft);
}

/* Done: the round mark the milestone to-dos use, filled on hover. */
.partner-reminder-done {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  padding: 0;
  border: 1.5px solid var(--color-line-strong);
  border-radius: 50%;
  color: transparent;
  background: var(--color-surface);
  cursor: pointer;
  transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease;
}

.partner-reminder-done svg {
  width: 0.85rem;
  height: 0.85rem;
  stroke-width: 2;
}

.partner-reminder-done:hover,
.partner-reminder-done:focus-visible {
  border-color: var(--color-success);
  color: var(--color-success);
}

.partner-reminder-done:disabled {
  border-color: var(--color-success);
  color: var(--color-surface);
  background: var(--color-success);
}

.partner-reminder-form {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.partner-reminder-quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.partner-reminder-chip {
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: 999px;
  color: var(--color-ink);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.partner-reminder-chip:hover {
  border-color: var(--color-ink-muted);
}

.partner-reminder-chip[aria-pressed="true"] {
  border-color: var(--color-accent-strong);
  color: var(--color-accent-strong);
  font-weight: 600;
}

.partner-reminder-date {
  width: auto;
  min-height: 2rem;
  font-size: var(--text-sm);
}

.partner-reminder-reason-field {
  width: 100%;
  font-size: var(--text-sm);
}

/* Today: a reminder row keeps the partner rows' columns; the pencil, then Done where Sent
   sits. */
.partner-today-row.partner-today-reminder {
  grid-template-columns: minmax(0, 14rem) minmax(0, 10rem) minmax(0, 1fr) auto auto;
}

.partner-today-reminder .partner-reminder-edit {
  grid-column: 4;
}

.partner-today-reminder .partner-reminder-done {
  grid-column: 5;
  justify-self: end;
}

.partner-today-reminder .partner-today-step {
  align-items: baseline;
}

@media (max-width: 40rem) {
  .partner-today-reminder .partner-reminder-done {
    grid-column: 1;
    justify-self: start;
  }
}

/* Correcting the log (0133): a pencil and a bin at the end of each entry, shown while the
   entry is hovered or holds the focus. */
.contact-log-timeline .contact-card-timeline-point {
  grid-template-columns: 4.25rem minmax(0, 1fr) auto;
}

.partner-log-tools {
  display: inline-flex;
  gap: var(--space-1);
  opacity: 0;
  transition: opacity 120ms ease;
}

.partner-log-tools[hidden] {
  display: none;
}

.contact-card-timeline-point:hover > .partner-log-tools,
.partner-log-tools:focus-within {
  opacity: 1;
}

@media (hover: none) {
  .partner-log-tools {
    opacity: 1;
  }
}

.partner-log-tool {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink-muted);
  background: none;
  cursor: pointer;
}

.partner-log-tool svg {
  width: 0.95rem;
  height: 0.95rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.partner-log-tool:hover,
.partner-log-tool:focus-visible {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.partner-log-tool.is-danger:hover,
.partner-log-tool.is-danger:focus-visible {
  color: var(--color-danger);
}

.partner-log-edit {
  grid-column: 2 / -1;
}

/* Changing a reminder (2026-09-29, Nico): the pencil shows while the line is hovered or
   holds the focus; its form opens under the line, across it. */
.partner-reminder-edit {
  opacity: 0;
  transition: opacity 120ms ease;
}

:is(.partner-reminder, .partner-today-reminder):hover .partner-reminder-edit,
.partner-reminder-edit:focus-visible,
.partner-reminder-edit[aria-expanded="true"] {
  opacity: 1;
}

@media (hover: none) {
  .partner-reminder-edit {
    opacity: 1;
  }
}

.partner-reminder-edit-host {
  grid-column: 1 / -1;
  padding: var(--space-2) 0;
}

/* A company's logo before its name (0134, 2026-09-29, Nico): a small square tile, the
   image fitted inside on a surface that stays light in both modes so a dark mark is never
   lost; without a logo, the first letter in the same square in the muted voice. */
.account-logo {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-right: var(--space-2);
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: 0.35rem;
  background: var(--color-logo-tile);
  vertical-align: middle;
}

.account-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.account-logo.is-letter {
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.account-row-link:has(> .account-logo) {
  display: inline-flex;
  align-items: center;
}

.forecast-deal-title > .account-logo {
  align-self: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-right: 0;
}

/* The account page's heading with the logo beside it. */
.account-title-line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.account-title-line > .account-logo {
  width: 2.25rem;
  height: 2.25rem;
  margin-right: 0;
  border-radius: 0.5rem;
}

.account-title-line > h1 {
  min-width: 0;
}

/* Step 3 of the Prospect guide as one unframed menu (2026-09-29, Nico): "Sent by" and a
   chevron on the number's line, Sales Navigator or email in the menu under it. */
.prospect-guide .prospect-entry-actions.prospect-sent-by {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 2.5rem;
}

/* Unframed, but with the bars' own square mark and their padding and gap, so its words line
   up with "Copy the prompt" and "Open ... in Sales Navigator" above. */
summary.prospect-sent-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.5rem;
  padding: 0 calc(var(--space-3) + 1px);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 400;
  list-style: none;
  cursor: pointer;
}

summary.prospect-sent-summary::-webkit-details-marker {
  display: none;
}

summary.prospect-sent-summary:hover,
.prospect-sent-picker[open] > summary.prospect-sent-summary {
  color: var(--color-accent-strong);
}

.prospect-sent-chevron {
  display: inline-grid;
  place-items: center;
  color: var(--color-ink-muted);
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.prospect-sent-chevron svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.prospect-sent-picker[open] .prospect-sent-chevron {
  transform: rotate(180deg);
}

/* Wide enough that "Sent by LinkedIn connection request" stays on one line (2026-10-01). */
.prospect-sent-picker > .prospect-sent-menu {
  left: 0;
  right: auto;
  min-width: 18.5rem;
}

.prospect-sent-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

/* LinkedIn's and Sales Navigator's own marks, at the size of the envelope beside them. */
.prospect-sent-item .contact-card-profile-mark {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.prospect-sent-item .prospect-send-icon {
  flex: none;
  color: var(--color-ink-soft);
}

/* The contact card's guide, streamlined (2026-09-29, Nico; before: tagged
   design-backup/prospect-card-streamline-2026-09-29). Every action is one unframed row --
   its square mark and its words, a faint ground under the one pointed at -- as "Sent by"
   and the answers already were; the rows sit close; the empty Notes field is quiet until
   it is pointed at or written in. */
.prospect-entry.is-card .prospect-guide :is(.prospect-wide-action, .contact-card-send) {
  min-height: 2.5rem;
  padding-block: var(--space-1);
  border-color: transparent;
  background: transparent;
}

.prospect-entry.is-card .prospect-guide :is(.prospect-wide-action, .contact-card-send):hover,
.prospect-entry.is-card .prospect-guide :is(.prospect-wide-action, .contact-card-send):focus-visible,
.prospect-entry.is-card .prospect-guide .prospect-entry-more[open] > .prospect-wide-action {
  border-color: transparent;
  background: var(--color-surface-subtle);
}

.prospect-entry.is-card .prospect-guide .prospect-entry-actions.is-stacked,
.prospect-entry.is-card .prospect-guide .prospect-guide-tools {
  gap: var(--space-1);
}

.prospect-entry.is-card .prospect-guide {
  gap: var(--space-3);
}

.prospect-contact-card .contact-card-notes-form:not(.is-composing) .contact-card-notes-field:not(:hover):not(:focus) {
  background: transparent;
}

/* The team's calendar (0135, 2026-09-30, Nico; made calm the same day -- before: tagged
   design-backup/calendar-zen-2026-09-30). The month as open rows: a hairline under each week,
   no walls between the days, the other months' days only fainter; today ringed; each event a
   soft bar across its days, named where it begins and at the start of each week. Beside it
   what is coming, one row per event: the first day as plain figures, the name and its
   countdown, the facts in the muted voice, then who speaks and who staffs as lines of names,
   the seller's own in the ink's weight. On a reminder day the figures and the countdown take
   the accent. */
.calendar-page {
  display: grid;
  gap: var(--space-4);
}

.calendar-body {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 1fr);
  align-items: start;
  gap: var(--space-8);
}

.calendar-body[hidden] {
  display: none;
}

@media (max-width: 64rem) {
  .calendar-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.calendar-month-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 2.25rem;
  margin-bottom: var(--space-2);
}

.calendar-month-title,
.calendar-section-title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 2.25rem;
}

.calendar-month-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.calendar-month-nav .calendar-nav-button {
  width: 2rem;
  height: 2rem;
  border: 0;
  color: var(--color-ink-soft);
  background: none;
}

.calendar-month-nav .calendar-nav-button:hover,
.calendar-month-nav .calendar-nav-button:focus-visible {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.calendar-nav-button svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.calendar-weekdays,
.calendar-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays span {
  padding: 0 var(--space-2) var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-weight: 500;
}

.calendar-grid {
  border-top: 1px solid var(--color-line);
}

.calendar-week {
  border-bottom: 1px solid var(--color-line);
}

.calendar-day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 4.75rem;
  padding: var(--space-1) 0 var(--space-2);
}

.calendar-day.is-outside .calendar-day-number {
  color: var(--color-ink-muted);
  opacity: 0.6;
}

.calendar-day-number {
  align-self: flex-start;
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  height: 1.5rem;
  margin-left: var(--space-1);
  border-radius: 999px;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.calendar-day.is-today .calendar-day-number {
  color: var(--color-surface);
  background: var(--color-accent-strong);
  font-weight: 600;
}

.calendar-bar {
  display: block;
  min-width: 0;
  min-height: 1.375rem;
  margin: 0;
  padding: 0 var(--space-2);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  color: var(--color-accent-strong);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.375rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-bar.is-start {
  margin-left: var(--space-1);
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.calendar-bar.is-end {
  margin-right: var(--space-1);
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

/* A name runs on over the event's following days, above their part of the bar; a one-day
   event's name may take two lines in its cell. */
.calendar-bar.is-start:not(.is-end) {
  position: relative;
  z-index: 1;
  overflow: visible;
  text-overflow: clip;
}

.calendar-bar.is-start.is-end {
  padding-block: 0.1875rem;
  white-space: normal;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

button.calendar-bar {
  cursor: pointer;
}

button.calendar-bar:hover,
button.calendar-bar:focus-visible {
  background: color-mix(in srgb, var(--color-accent) 24%, transparent);
}

.calendar-reminder-rule {
  margin: 0 0 var(--space-2);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
}

.calendar-empty {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.calendar-event-list,
.today-events-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendar-event {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
}

.calendar-event-date {
  display: grid;
  justify-items: start;
  align-content: start;
}

.calendar-event-day {
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.calendar-event-month {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calendar-event-main {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.calendar-event-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

.calendar-event-title {
  padding: 0;
  border: 0;
  color: var(--color-ink);
  background: none;
  font: inherit;
  font-weight: 600;
  text-align: left;
}

button.calendar-event-title {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.2em;
}

button.calendar-event-title:hover,
button.calendar-event-title:focus-visible {
  text-decoration-color: currentColor;
}

.calendar-event-when {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.calendar-event-meta,
.calendar-event-note {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.calendar-event-note {
  white-space: pre-wrap;
}

/* A reminder day, or the event under way: the figures and the countdown in the accent. */
.calendar-event.is-reminder .calendar-event-day,
.calendar-event.is-reminder .calendar-event-when {
  color: var(--color-accent-strong);
}

.calendar-event.is-reminder .calendar-event-when {
  font-weight: 600;
}

.calendar-people {
  display: grid;
  gap: 0.125rem;
  margin: var(--space-1) 0 0;
}

.calendar-people-group {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.calendar-people-label {
  color: var(--color-ink-muted);
}

.calendar-people-names {
  margin: 0;
  color: var(--color-ink-soft);
  font-weight: 400;
}

.calendar-people-names.is-speaker {
  color: var(--color-ink);
}

.calendar-person.is-me {
  color: var(--color-ink);
  font-weight: 600;
}

/* On Today: the same rows, tighter, under a quiet heading with the way to the calendar. */
.today-events {
  margin: 0 0 var(--space-6);
}

.today-events[hidden] {
  display: none;
}

.today-events-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-1);
}

.today-events-head h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 600;
}

.calendar-event.is-compact {
  padding: var(--space-3) 0;
}


/* The event form: two fields a row where they belong together. */
.drawer.calendar-drawer {
  width: min(34rem, calc(100vw - 2rem));
}

.calendar-form {
  display: grid;
  min-height: 0;
  flex: 1;
  grid-template-rows: minmax(0, 1fr) auto;
}

.calendar-form-body {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
}

.calendar-form-body > label:not(:first-child) {
  margin-top: var(--space-2);
}

.calendar-form-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.calendar-form-pair > div {
  display: grid;
  gap: var(--space-2);
}

.calendar-form-footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.calendar-form-spacer {
  flex: 1;
}

/* LinkedIn updates (2026-09-30, Nico): the mail on the left, the post on the right, each a
   quiet field under a small heading; the post's count warns past LinkedIn's limit. */
.linkedin-page {
  display: grid;
  gap: var(--space-4);
}

.linkedin-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-8);
}

@media (max-width: 64rem) {
  .linkedin-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.linkedin-source,
.linkedin-result {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}

.linkedin-result[hidden] {
  display: none;
}

.linkedin-section-title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 600;
}

.linkedin-hint,
.linkedin-theme,
.linkedin-count {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.linkedin-theme {
  margin-top: var(--space-1);
}

.linkedin-count {
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

.linkedin-flagged {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-warning);
  background: var(--color-warning-soft);
  font-size: var(--text-sm);
}

.linkedin-flagged[hidden] {
  display: none;
}

.linkedin-count.is-over {
  color: var(--color-danger);
  font-weight: 600;
}

.linkedin-mail,
.linkedin-post {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-sm);
  line-height: 1.6;
  resize: vertical;
}

.linkedin-post {
  min-height: 24rem;
  font-size: var(--text-md);
}

.linkedin-mail:focus,
.linkedin-post:focus {
  border-color: var(--color-line-strong);
  outline: none;
}

.linkedin-mail:focus-visible,
.linkedin-post:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.linkedin-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.linkedin-status {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.linkedin-result-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.linkedin-result-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-3);
}

.linkedin-sources {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.linkedin-sources[hidden] {
  display: none;
}

.linkedin-sources-title {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.linkedin-source-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--text-sm);
}

/* The jour fixe with a partner contact (0136, 2026-09-30, Nico): the reminders' own row --
   round Held first, how often and the next date, the day at the end, the pencil on hover --
   above them, with the repeat mark; in lists a small muted mark of its own. */
.partner-standing-badge svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.partner-standing-every,
.partner-standing-which,
.partner-standing-weekday {
  width: auto;
  min-height: 2rem;
  font-size: var(--text-sm);
}

/* The week and the day of the month show only while that rhythm is picked (0148). */
.partner-reminder-quick .partner-standing-which[hidden],
.partner-reminder-quick .partner-standing-weekday[hidden] {
  display: none;
}

.partner-standing-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.partner-standing-badge svg {
  width: 0.85rem;
  height: 0.85rem;
}

/* Joint projects on a partner's card: first under who they are, set off from the Partner
   Sprint below by the same rule the sprint uses. One quiet row per account, its logo and
   name, the stage in small type, and a remove mark that shows on hover. */
/* Joint projects and the jour fixe as rows like Events, Notes and Documents (2026-09-30,
   Nico: two lines stood under the jour fixe) -- the heading in the left column, what it
   holds beside it, the icon at the row's end, one hairline above each row and none above
   the first, whose line is the header's. */
.prospect-contact-body > :is(.partner-projects, .partner-standing-section):not([hidden]) {
  margin: 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 0;
}

.prospect-contact-body > .partner-projects:first-child,
.prospect-contact-body > .partner-projects[hidden] + .partner-standing-section {
  padding-top: 0;
  border-top: 0;
}

.prospect-contact-body > .partner-projects:not([hidden]),
.partner-standing-section > .partner-standing {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  column-gap: var(--space-5);
  row-gap: var(--space-2);
  align-items: start;
}

.prospect-contact-body > .partner-projects > .contact-card-section-header,
.partner-standing-section .partner-standing-head {
  display: contents;
}

.prospect-contact-body > .partner-projects > .contact-card-section-header > h3,
.partner-standing-section .partner-standing-head > h3 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  /* The text's own ink, as Events and Notes: in dark mode headings otherwise take the
     heading tint. */
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5rem;
}

.prospect-contact-body > .partner-projects > .contact-card-section-header > .files-upload-icon,
.partner-standing-section .partner-standing-head > .files-upload-icon {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  margin: -0.125rem calc(-1 * var(--space-1)) -0.125rem 0;
}

.prospect-contact-body > .partner-projects > :not(.contact-card-section-header),
.partner-standing-section > .partner-standing > :not(.partner-standing-head) {
  grid-column: 2;
}

/* A partner's Partner Sprint below them keeps its own hairline. */
.prospect-contact-body > .partner-sprint-card:not([hidden]) {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}


.partner-projects-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.partner-project {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.5rem;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.25rem;
  font-size: var(--text-sm);
}

.partner-project-name {
  display: flex;
  align-items: center;
  min-width: 0;
  color: var(--color-ink);
  text-decoration: none;
}

.partner-project-name span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partner-project-name:hover span:last-child,
.partner-project-name:focus-visible span:last-child {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.partner-project-stage {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.partner-project-remove {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0.35rem;
  color: var(--color-ink-soft);
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
}

.partner-project-remove svg {
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
}

.partner-project:hover .partner-project-remove,
.partner-project-remove:focus-visible {
  opacity: 1;
}

.partner-project-remove:hover {
  color: var(--color-danger);
}

@media (hover: none) {
  .partner-project-remove {
    opacity: 1;
  }
}

.partner-projects .partner-projects-add[hidden] {
  display: none;
}

.partner-projects-add {
  justify-self: start;
  max-width: 100%;
  font-size: var(--text-sm);
}

/* An open section action keeps its hover look while what it opened is showing. */
.prospect-contact-body .files-upload-icon[aria-expanded="true"] {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

/* One rhythm down the card (2026-09-30, Nico): 16px from each hairline to the heading under
   it and from the heading to the next hairline, the header's line included. Empty parts --
   no events yet, a jour fixe's closed form, a note not yet written -- take no room of their
   own, and the empty note field sits on the heading's line. */
.prospect-contact-drawer .prospect-contact-body {
  padding-top: var(--space-4);
}

.prospect-contact-body .contact-card-event-list:empty,
.partner-standing > .partner-reminder-form-host:empty {
  display: none;
}

.prospect-contact-card .contact-card-notes-form:not(.is-composing) .contact-card-notes-field:placeholder-shown:not(:focus) {
  min-height: 1.5rem;
  height: 1.5rem;
  padding-block: 0;
  line-height: 1.5rem;
}

/* Delete, while a note is being edited (2026-09-30): after Cancel, quiet, in the danger ink. */
.account-note-form-actions .account-note-delete {
  margin-left: auto;
  padding: 0;
  color: var(--color-danger);
}

/* Discovery (0141, 2026-09-30, Nico): notes for discovery calls, a page of their own, made
   as Prompts -- the same title spacing, search row and rows, Copy at hand, Edit and Delete
   while a row is pointed at. The form opens under the search; a note's text shows
   formatted under its header, folded when long. */
.discovery-form {
  display: grid;
  gap: var(--space-3);
  max-width: 62rem;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-line);
}

.discovery-form label,
.discovery-field > label {
  display: grid;
  gap: var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 400;
}

.discovery-field {
  display: grid;
  gap: var(--space-1);
}

/* The text under its formatting bar, one framed field as Deal Strategy's. */
.discovery-form .milestone-note-input textarea {
  display: block;
  width: 100%;
  min-height: 14rem;
  margin: 0;
  border: 0;
  border-radius: 0;
  resize: vertical;
  font: inherit;
  line-height: 1.6;
}

.discovery-form .milestone-note-input textarea:focus {
  outline: 0;
}

.discovery-form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.discovery-form-actions .discovery-delete {
  margin-left: auto;
  padding: 0;
  color: var(--color-danger);
}

#discovery-app .discovery-note {
  display: grid;
  gap: var(--space-2);
}

#discovery-app .prompt-card-heading h3 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 600;
}

#discovery-app .prompt-card-actions .prompt-card-action:not(:first-child) {
  opacity: 0;
  transition: opacity 120ms ease-out;
}

#discovery-app .discovery-note:hover .prompt-card-action,
#discovery-app .discovery-note:focus-within .prompt-card-action {
  opacity: 1;
}

@media (hover: none) {
  #discovery-app .prompt-card-actions .prompt-card-action:not(:first-child) {
    opacity: 1;
  }
}

.discovery-note-body {
  max-width: none;
}

.discovery-note-body.is-folded {
  max-height: 11rem;
  overflow: hidden;
}

.discovery-note-more {
  justify-self: start;
  padding: 0;
}

/* The File Vault as Partner contacts (2026-09-30, Nico): the sections down a narrow list on
   the left -- name, file count, the open one marked -- and on the right the open section,
   its name and what belongs there, Rename and Delete, and its files with the upload. */
/* The section column as wide as its longest name, whole on one line (2026-09-30, Nico):
   never narrower than 14rem, and only past 36rem is a name cut. */
#file-vault-page .vault-workspace {
  display: grid;
  grid-template-columns: fit-content(36rem) minmax(0, 1fr);
  min-height: 30rem;
}

#file-vault-page .vault-directory {
  min-width: 14rem;
}

#file-vault-page .vault-workspace[hidden] {
  display: none;
}

#file-vault-page .vault-directory {
  padding: 0 var(--space-4) var(--space-6) 0;
  border-right: 1px solid var(--color-line);
}

#file-vault-page .vault-summary {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
}

#file-vault-page .vault-section-list {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

#file-vault-page .vault-select {
  display: grid;
  width: 100%;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-ink);
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#file-vault-page .vault-select:hover {
  background: var(--color-surface-subtle);
}

#file-vault-page .vault-select[aria-current="true"] {
  background: var(--color-surface-subtle);
}

#file-vault-page .vault-select[aria-current="true"] strong {
  color: var(--color-accent-strong);
}

#file-vault-page .vault-select strong {
  font-weight: 500;
}

#file-vault-page .vault-select :is(strong, span) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#file-vault-page .vault-select span {
  font-size: var(--text-xs);
}

#file-vault-page .vault-select:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

#file-vault-page .vault-panel {
  min-width: 0;
  padding: 0 0 var(--space-6) var(--space-6);
}

#file-vault-page .vault-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

#file-vault-page .vault-panel-header h2 {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-lg);
  font-weight: 600;
}

#file-vault-page .vault-panel-header p {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

@media (max-width: 48rem) {
  #file-vault-page .vault-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  #file-vault-page .vault-directory {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--color-line);
  }

  #file-vault-page .vault-panel {
    padding: var(--space-5) 0 0;
  }
}

/* A hairline between the jour fixe and whatever the card begins with under it -- a
   prospect's guide, the Revic prompt and the send line (2026-09-30, Nico) -- with the rows'
   own 16px on each side. */
.prospect-contact-body > .partner-standing-section:not([hidden]) ~ .prospect-contact-card > :first-child:not([hidden]) {
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

/* The guide on the card on the card's rhythm (2026-09-30, Nico): 16px from the line above
   to the first step, and 16px from the last step -- "Sent by" -- to the line under it. */
.prospect-contact-card > .prospect-contact-sprint .prospect-entry.is-card {
  padding-top: 0;
}

.prospect-contact-card > .prospect-contact-sprint .prospect-guide-foot {
  margin-top: calc(var(--space-4) - var(--space-3));
}

/* Prospecting statistics (2026-09-30, Nico): the figures in one row divided by hairlines;
   under them four panels -- the way to a meeting, the replies and channels, the last eight
   weeks, the stages -- then each company. Bars in the accent, what went well in the success
   ink, what stopped in the danger ink; every number in tabular figures. */
.stats-page {
  display: grid;
  gap: var(--space-5);
  max-width: 72rem;
}

.stats-title-row {
  align-items: flex-end;
  margin-bottom: 0;
}

.stats-scope {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
}

.stats-period {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.stats-period button {
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: calc(var(--radius-control) - 2px);
  color: var(--color-ink-soft);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.stats-period button[aria-pressed="true"] {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
  font-weight: 600;
}

.stats-body {
  display: grid;
  gap: var(--space-5);
}

.stats-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin: 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}

.stats-figure {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
}

.stats-figure + .stats-figure {
  padding-left: var(--space-4);
  border-left: 1px solid var(--color-line);
}

.stats-figure dt {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.stats-figure dd {
  margin: 0;
}

.stats-figure-value {
  color: var(--color-ink);
  font-size: var(--text-xl);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.stats-figure.is-good .stats-figure-value {
  color: var(--color-success);
}

.stats-figure.is-stop .stats-figure-value {
  color: var(--color-danger);
}

.stats-figure-note {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--space-6);
}

.stats-panel h2 {
  margin: 0 0 var(--space-3);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.stats-panel .stats-subtitle {
  margin-top: var(--space-5);
}

.stats-empty {
  margin: 0;
  font-size: var(--text-sm);
}

.stats-bars {
  display: grid;
  gap: var(--space-2);
}

.stats-bar {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) 2.5rem 6.5rem;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.stats-bar-label {
  color: var(--color-ink);
}

.stats-bar-track {
  height: 0.5rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-surface-subtle);
}

.stats-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
}

.stats-bar.is-good .stats-bar-fill {
  background: var(--color-success);
}

.stats-bar.is-stop .stats-bar-fill {
  background: var(--color-danger);
}

.stats-bar-count {
  color: var(--color-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.stats-bar-share {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.stats-split {
  display: flex;
  height: 0.75rem;
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-surface-subtle);
}

.stats-split-part {
  background: var(--color-accent);
}

.stats-split-part.is-good {
  background: var(--color-success);
}

.stats-split-part.is-stop {
  background: var(--color-danger);
}

.stats-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  list-style: none;
}

.stats-legend li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.stats-legend-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  background: var(--color-accent);
}

.stats-legend .is-good .stats-legend-dot {
  background: var(--color-success);
}

.stats-legend .is-stop .stats-legend-dot {
  background: var(--color-danger);
}

.stats-legend .is-messages .stats-legend-dot,
.stats-week-bar.is-messages {
  background: var(--color-accent-soft);
  box-shadow: inset 0 0 0 1px var(--color-accent);
}

.stats-weeks {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: end;
}

.stats-week {
  display: grid;
  justify-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
}

.stats-week-stack {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  width: 60%;
  height: 7rem;
  overflow: hidden;
  border-bottom: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.stats-week-bar {
  display: block;
  width: 100%;
}

.stats-week-bar.is-requests {
  background: var(--color-accent);
}

.stats-week-count {
  min-height: 1rem;
  color: var(--color-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.stats-week-day {
  color: var(--color-ink-soft);
  white-space: nowrap;
}

.stats-week-replies {
  color: var(--color-success);
  font-variant-numeric: tabular-nums;
}

.stats-weeks-key {
  grid-column: 1 / -1;
}

.stats-table .stats-number {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.stats-table th:not(:first-child) {
  text-align: right;
}

.stats-table .stats-number.is-stop {
  color: var(--color-danger);
  font-weight: 600;
}

@media (max-width: 60rem) {
  .stats-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stats-bar {
    grid-template-columns: 7.5rem minmax(0, 1fr) 2rem 5.5rem;
  }
}

/* Prospecting statistics, second pass (2026-10-01, Nico; Impeccable): colour only where a
   figure has something in it, rows and cells with nothing in them stepped back, the notes
   under the figures in the regular weight, and the company table as compact as the panels. */
.stats-figure-note {
  font-weight: 400;
}

.stats-figure.is-zero .stats-figure-value {
  color: var(--color-ink-soft);
}

.stats-bar.is-zero :is(.stats-bar-label, .stats-bar-count) {
  color: var(--color-ink-soft);
  font-weight: 400;
}

.stats-bar.is-zero .stats-bar-share {
  color: var(--color-ink-muted);
}

.stats-empty {
  max-width: 34rem;
  line-height: 1.5;
}

.stats-table :is(th, td) {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.stats-table .stats-number.is-zero {
  color: var(--color-ink-muted);
}

.stats-table .stats-number.is-good {
  color: var(--color-success);
  font-weight: 600;
}

/* Chasers (2026-10-01): the tag in front of a chaser's words, on the milestone panel and
   on the board -- small, in the danger tone, the only tag a to-do carries. */
.action-tag {
  display: inline-block;
  margin-right: var(--space-2);
  padding: 0 0.4rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.01em;
  vertical-align: 0.08em;
}

.action-tag.is-chaser {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.milestone-action-controls .chaser-reached {
  color: var(--color-ink);
}

/* Add a to-do, above Notes: one select at rest; the chaser's fields open under it. */
.milestone-todo-add:not([hidden]) {
  display: grid;
  gap: var(--space-3);
}

.milestone-todo-add .milestone-record-heading h3 {
  margin: 0;
}

.milestone-todo-kind {
  max-width: 18rem;
}

.milestone-chaser:not([hidden]) {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface-subtle);
}

.milestone-chaser-intro {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.milestone-chaser-people-field:not([hidden]) {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.milestone-chaser-people-field legend,
.milestone-chaser-when label {
  margin-bottom: var(--space-1);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.milestone-chaser-people:not([hidden]) {
  display: grid;
  max-height: 15rem;
  overflow-y: auto;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.milestone-chaser-person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.5rem;
  margin: 0;
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-sm);
  font-weight: 400;
  cursor: pointer;
}

.milestone-chaser-person:last-child {
  border-bottom: 0;
}

.milestone-chaser-person:hover {
  background: var(--color-surface-subtle);
}

.milestone-chaser-person.is-picked {
  background: var(--color-accent-soft);
}

.milestone-chaser-person input {
  width: 1rem;
  height: 1rem;
  margin: 0;
  accent-color: var(--color-accent-strong);
}

.milestone-chaser-name {
  overflow: hidden;
  color: var(--color-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.milestone-chaser-job {
  overflow: hidden;
  max-width: 14rem;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.milestone-chaser-none {
  margin: 0;
  padding: var(--space-3);
  font-size: var(--text-sm);
}

.milestone-chaser-when {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 9rem);
  gap: var(--space-4);
}

.milestone-chaser-when label {
  display: block;
  margin-top: 0;
}

.field-optional {
  color: var(--color-ink-soft);
  font-weight: 400;
}

.milestone-chaser-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.milestone-chaser .error {
  margin: 0;
}

/* Edit milestone / Edit action (2026-10-01, Impeccable). Each field is its label over its
   control, a steady step between them; the controls fill their column, so the two
   columns line up instead of each dropdown taking its text's width. forms.css loads after
   this file, hence the selectors that out-weigh its label and select rules. */
.work-modal .work-fields:not([hidden]) {
  display: grid;
  gap: var(--space-4);
}

.work-modal .work-grid {
  gap: var(--space-4) var(--space-5);
}

.work-modal .work-field:not([hidden]) {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  min-width: 0;
}

.work-modal .work-field > label {
  display: block;
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}

.work-modal .work-field select:not([multiple]):not([size]),
.work-modal .work-field input {
  width: 100%;
  min-width: 0;
}

.work-modal .work-field textarea {
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  line-height: 1.5;
  resize: vertical;
}

.work-modal .work-title-input {
  min-height: 2.75rem;
  font-size: var(--text-md);
  font-weight: 500;
}

.work-modal .work-field .field-help {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.work-modal .work-details {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-1);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.work-modal #work-modal-title {
  margin: 0 0 var(--space-5);
}

.work-modal .modal-actions {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-line);
}

/* The milestone's date, offered under the reminder: a quiet link-weight button, marked
   once the reminder already follows it. */
.work-modal .work-date-follow:not([hidden]) {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  color: var(--color-accent-strong);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
}

.work-modal .work-date-follow:hover {
  border-color: var(--color-line-strong);
  background: var(--color-surface-subtle);
}

.work-modal .work-date-follow.is-on {
  border-color: transparent;
  color: var(--color-ink);
  background: var(--color-accent-soft);
  cursor: default;
}

.work-modal .work-date-follow:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.0625rem;
}

.milestone-chaser-people-field legend {
  padding: 0;
}

/* A closed chaser keeps its tag, stepped back with the struck-through words. */
:is(.milestone-action-row, .sprint-child-action):is(.is-completed, .is-skipped) .action-tag {
  opacity: 0.6;
}

/* Contact responded (2026-10-01): the mark right after a name that has answered -- the
   success tone, filled, with a speech bubble and the day, so it reads from across the
   board. */
.responded-badge {
  /* An annotation on the title rather than a chip beside its link (2026-10-01,
     Impeccable): no edge, no fill -- a filled bubble with a tick, the word in the success
     tone, the day in the soft ink -- set a step off the name, on its baseline, at the
     size of the page's meta text so the title stays the line's one voice. */
  display: inline-flex;
  align-items: baseline;
  gap: 0.375em;
  margin-left: 0.75em;
  font-size: 0.8125em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  vertical-align: baseline;
}

.responded-badge svg {
  flex: none;
  align-self: center;
  width: 1.15em;
  height: 1.15em;
}

.responded-badge-bubble {
  fill: var(--color-success);
}

.responded-badge-tick {
  fill: none;
  stroke: var(--color-surface);
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.responded-badge-word {
  color: var(--color-success);
  font-weight: 600;
}

.responded-badge-day {
  color: var(--color-ink-soft);
}

/* In the list of who responded, the mark at the list's own small size. */
.responded-menu .responded-badge {
  font-size: var(--text-xs);
}

#account-deal-sprint .sprint-icon-action.is-responded.is-marked,
.milestone-action-controls .sprint-icon-action.is-responded.is-marked {
  color: var(--color-success);
}

/* The icon in the milestone panel's row, sized as the pencil beside it. */
.milestone-action-controls .sprint-icon-action.is-responded {
  display: inline-grid;
  width: 2rem;
  height: 2rem;
  min-height: 2rem;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  background: transparent;
  cursor: pointer;
}

.milestone-action-controls .sprint-icon-action.is-responded svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.milestone-action-controls .sprint-icon-action.is-responded:hover {
  color: var(--color-success);
  background: var(--color-surface-subtle);
}

/* Several people named: who responded, picked from a short list under the icon. */
.responded-menu {
  position: absolute;
  z-index: 60;
  display: grid;
  min-width: 14rem;
  max-width: 20rem;
  padding: var(--space-1);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}

.responded-menu-title {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

.responded-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.responded-menu-item:hover,
.responded-menu-item:focus-visible {
  background: var(--color-surface-subtle);
}

.responded-menu-item .responded-badge {
  margin-left: 0;
}

/* The chaser offered once a to-do is ticked done: the panel's chaser fields, in a small
   window of their own. */
.chaser-prompt-modal h2 {
  margin: 0 0 var(--space-2);
}

.chaser-prompt-modal .milestone-chaser-intro {
  margin: 0 0 var(--space-5);
}

.chaser-prompt-fields:not([hidden]) {
  display: grid;
  gap: var(--space-4);
}

.chaser-prompt-fields .error {
  margin: 0;
}

/* People on a milestone (2026-10-01): found by name as they are typed, picked as chips,
   written at the end of the title on Save; the line under them shows how it will read. */
.work-modal .work-people-find {
  position: relative;
}

.work-modal .work-people-picked:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.work-person-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 1.875rem;
  padding: 0 var(--space-1) 0 var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  color: var(--color-ink);
  background: var(--color-accent-soft);
  font-size: var(--text-sm);
}

.work-person-chip-org {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.work-person-chip-remove {
  display: inline-grid;
  width: 1.5rem;
  height: 1.5rem;
  min-height: 0;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--color-ink-soft);
  background: transparent;
  font: inherit;
  font-size: var(--text-md);
  line-height: 1;
  cursor: pointer;
}

.work-person-chip-remove:hover {
  color: var(--color-ink);
  background: var(--color-surface);
}

.work-people-results:not([hidden]) {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.25rem);
  right: 0;
  left: 0;
  display: grid;
  max-height: 16rem;
  margin: 0;
  padding: var(--space-1);
  overflow-y: auto;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
  list-style: none;
}

.work-people-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
}

.work-people-result:hover {
  background: var(--color-surface-subtle);
}

.work-people-result-org {
  overflow: hidden;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.work-people-none {
  padding: var(--space-2) var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* Zeitstrahl on the contact card (2026-10-01; reviewed with Impeccable the same day):
   the card's timeline, what was done leading in the ink and, under it in the soft ink,
   what kind and where. A milestone is a filled dot in the success tone, a to-do a ring of
   it; the date column holds the short day, the year only when it is not this one. */
.contact-card-zeitstrahl-line {
  gap: var(--space-4);
}

.contact-card-zeitstrahl-line .contact-card-timeline-point {
  grid-template-columns: 5.5rem minmax(0, 1fr);
}

.contact-card-zeitstrahl-line .contact-card-timeline-date {
  color: var(--color-ink-soft);
  line-height: 1.5;
  white-space: nowrap;
}

.contact-card-zeitstrahl-line .contact-card-timeline-what {
  display: grid;
  gap: 0.125rem;
}

.contact-card-timeline-point.is-done::before {
  background: var(--color-success);
  box-shadow: 0 0 0 1px var(--color-success);
}

.contact-card-timeline-point.is-done.is-todo::before {
  background: var(--color-surface);
  box-shadow: 0 0 0 1.5px var(--color-success);
}

.contact-card-zeitstrahl-title {
  color: var(--color-ink);
  font-weight: 500;
  line-height: 1.45;
}

.contact-card-zeitstrahl .contact-card-timeline-note a {
  color: inherit;
  text-decoration: none;
}

.contact-card-zeitstrahl .contact-card-timeline-note a:hover {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.contact-card-zeitstrahl > .text-action {
  margin-top: var(--space-2);
}

/* Quick days under a chaser's date (2026-10-01): small outlined choices; the one that
   matches the date is filled. */
.chaser-quick-days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: calc(-1 * var(--space-2));
}

.chaser-quick-day {
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}

.chaser-quick-day:hover {
  background: var(--color-surface-subtle);
}

.chaser-quick-day[aria-pressed="true"] {
  border-color: var(--color-accent-strong);
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  font-weight: 600;
}

.chaser-quick-day:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.0625rem;
}

/* Delete milestone beside its pencil in the panel's header: quiet until pointed at, then
   the danger tone, as a to-do's bin. */
.milestone-delete-icon:hover {
  color: var(--color-danger);
}

/* A milestone's to-dos indented one step (2026-10-01, Nico): their round box sits under
   the start of the milestone's title, not under its own box, so the to-dos read as the
   milestone's and the milestone stands out above them. The progress line stays at the
   milestone's edge as the group's heading. */
#account-deal-sprint .sprint-child-action-list {
  margin-left: calc(1.15rem + var(--space-2));
}

@media (max-width: 700px) {
  #account-deal-sprint .sprint-child-action-list {
    margin-left: var(--space-4);
  }
}

/* Copied for Revic, the bar steps back (2026-10-01, Nico): the mark without its colour, the
   words in the muted ink -- this part is done. It still copies again on a click. */
.prospect-prompt-bar.is-used .prospect-wide-mark,
.prospect-contact-drawer .prospect-prompt-bar.is-used .prospect-wide-mark {
  filter: grayscale(1);
  opacity: 0.5;
}

.prospect-prompt-bar.is-used .prospect-wide-label,
.prospect-contact-drawer .prospect-prompt-bar.is-used > .prospect-wide-action .prospect-wide-label {
  color: var(--color-ink-muted);
}

/* Opened on LinkedIn, the line steps back as the Revic bar does once copied (2026-10-01,
   Nico): the mark without its colour, the words in the muted ink. It still opens again. */
.contact-card-send.is-used .contact-card-send-mark,
.prospect-contact-drawer .contact-card-send.is-used .contact-card-send-mark {
  filter: grayscale(1);
  opacity: 0.5;
}

.contact-card-send.is-used .contact-card-send-copy strong,
.prospect-contact-drawer .contact-card-send.is-used .contact-card-send-copy strong {
  color: var(--color-ink-muted);
}

/* LinkedIn connected (0146, 2026-10-02): LinkedIn's mark and "Connected" in the accent,
   beside a name in every list -- the card's chip shape, not a pill, as the Connection
   request section on the card (reviewed with Impeccable the same day). */
.linkedin-connected-tag {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.3rem;
  margin-left: var(--space-2);
  padding: 0.0625rem 0.45rem 0.0625rem 0.3rem;
  border-radius: var(--radius-sm);
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.linkedin-connected-tag .contact-card-profile-mark {
  flex: none;
  width: 0.95rem;
  height: 0.95rem;
}

/* Connection request, its own section on the card above the jour fixe: LinkedIn's mark,
   the state as a tag in its tone -- accepted in the success tone, pending in the warning
   tone, not accepted yet in the danger tone -- and the days in the soft ink. */
.prospect-connection-section:not([hidden]) {
  display: grid;
  gap: var(--space-2);
}

.prospect-connection-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
}

.prospect-connection-mark {
  display: inline-grid;
  place-items: center;
}

.prospect-connection-mark .contact-card-profile-mark {
  width: 1.15rem;
  height: 1.15rem;
}

.prospect-connection-tag {
  padding: 0.125rem 0.55rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.prospect-connection-tag.is-accepted {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.prospect-connection-tag.is-pending {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.prospect-connection-tag.is-declined {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.prospect-connection-detail {
  color: var(--color-ink-soft);
}

.account-contact-name-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
}

.account-contact-name-line .linkedin-connected-tag,
.person-name-line .linkedin-connected-tag,
.prospect-entry-name-line .linkedin-connected-tag {
  margin-left: var(--space-1);
}

/* The LinkedIn column on Contacts (2026-10-02): the connection request's state as a tag in
   its tone, as on the card -- accepted, pending, not accepted -- a dash where none went out. */
.person-linkedin {
  white-space: nowrap;
}

.person-linkedin.is-empty {
  color: var(--color-ink-muted);
}

.person-linkedin-tag {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
}

.person-linkedin-tag.is-accepted {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.person-linkedin-tag.is-pending {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.person-linkedin-tag.is-not_accepted {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

/* Sortable headers on Contacts (2026-10-02): the heading is the button; a small chevron
   shows while it sorts, turned when the order runs the other way. */
.table-sort {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}

.table-sort:hover {
  color: var(--color-ink);
}

.table-sort:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
  border-radius: var(--radius-sm);
}

.table-sort-mark {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 120ms ease-out, transform 120ms ease-out;
}

.table-sort:hover .table-sort-mark {
  opacity: 0.45;
}

.table-sort.is-active {
  color: var(--color-ink);
}

.table-sort.is-active .table-sort-mark {
  opacity: 1;
}

.table-sort.is-reversed .table-sort-mark {
  transform: rotate(180deg);
}

.table-sort:disabled {
  cursor: progress;
}

/* Beside a name in the sprint's rows (2026-10-02): how far along a contacted person is --
   request sent (warning tone), not accepted (danger tone), chasing (accent) -- in the
   chip shape of the card's Connection request. A new person carries none. */
.prospect-chase-tag {
  display: inline-block;
  flex: none;
  margin-left: var(--space-2);
  padding: 0.0625rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

.prospect-chase-tag.is-pending {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.prospect-chase-tag.is-not-accepted {
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

.prospect-chase-tag.is-chasing {
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

/* Go-to-market (0147, 2026-10-02; reworked with Impeccable the same day): the companies
   gone after. Whom to work next leads: the figures are the filters, within each tier the
   companies not yet worked come first, the sprint state is the second column. The
   review's reasoning reads in two lines under each company and in the findings above the
   list; a click opens every word of it with the way into the account's prospects. */
.gtm-page {
  display: grid;
  gap: var(--space-5);
  max-width: 80rem;
}

.gtm-title-row {
  align-items: flex-end;
  margin-bottom: 0;
}

.gtm-scope {
  margin: var(--space-1) 0 0;
}

.gtm-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: min(22rem, 100%);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.gtm-search svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--color-ink-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
}

.gtm-search input {
  min-height: 2.25rem;
  padding: 0;
  border: 0;
  background: transparent;
}

.gtm-search input:focus {
  outline: none;
}

.gtm-search:focus-within {
  border-color: var(--color-focus);
}

/* Loading: the shape of the figures, not a word that jumps when the list arrives. */
.gtm-loading:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.gtm-loading > span:not(.sr-only) {
  height: 5.5rem;
  border-radius: var(--radius-lg);
  background: var(--color-surface-subtle);
}

.gtm-body {
  display: grid;
  gap: var(--space-5);
}

.gtm-figures {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
}

.gtm-figure {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  min-height: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  color: var(--color-ink);
  background: var(--color-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gtm-figure:hover {
  border-color: var(--color-line-strong);
}

.gtm-figure:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: 0.125rem;
}

.gtm-figure[aria-pressed="true"] {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}

.gtm-figure-label {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 600;
}

.gtm-figure-value {
  font-size: var(--text-2xl);
  font-weight: 650;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.gtm-figure-note {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.gtm-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.gtm-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 600;
}

.gtm-sort select {
  min-height: 2.25rem;
}

.gtm-count {
  margin: 0 0 0 auto;
  font-size: var(--text-sm);
}

.gtm-tiers {
  display: grid;
  gap: var(--space-8);
}

.gtm-tier {
  display: grid;
  gap: var(--space-2);
}

.gtm-tier-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-line-strong);
}

.gtm-tier-head h2 {
  margin: 0;
  font-size: var(--text-xl);
}

.gtm-tier-count {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* One grid for the column labels and every row, so they line up. */
.gtm-columns,
.gtm-row-main {
  display: grid;
  grid-template-columns: minmax(18rem, 1fr) 10.5rem 6.5rem 7.5rem 12rem 6.5rem 1.5rem;
  align-items: start;
  gap: var(--space-4);
}

.gtm-columns {
  padding: 0 var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 600;
}

.gtm-list {
  display: grid;
}

.gtm-row {
  border-bottom: 1px solid var(--color-line);
}

.gtm-row-main {
  width: 100%;
  min-height: 0;
  padding: var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--color-ink);
  background: transparent;
  font: inherit;
  font-size: var(--text-sm);
  text-align: left;
  cursor: pointer;
}

.gtm-row-main:hover,
.gtm-row.is-open .gtm-row-main {
  background: var(--color-surface-subtle);
}

.gtm-row-main:focus-visible {
  outline: 0.125rem solid var(--color-focus);
  outline-offset: -0.125rem;
}

.gtm-who {
  display: grid;
  gap: 0.2rem;
  min-width: 0;
}

.gtm-company-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

.gtm-company {
  font-weight: 600;
}

/* The review's reason, read in two lines; all of it when the row is opened. */
.gtm-under {
  display: -webkit-box;
  overflow: hidden;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.gtm-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.gtm-cell.is-empty {
  color: var(--color-ink-soft);
}

.gtm-sprint {
  font-weight: 600;
  white-space: normal;
}

.gtm-sprint.is-unworked {
  color: var(--color-warning);
}

.gtm-sprint.is-worked {
  color: var(--color-accent-strong);
}

.gtm-sprint.is-none {
  color: var(--color-ink-soft);
  font-weight: 400;
}

.gtm-tag {
  display: inline-block;
  padding: 0.0625rem 0.45rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.gtm-tag.is-high {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.gtm-tag.is-medium {
  color: var(--color-ink-soft);
  background: var(--color-surface-subtle);
}

.gtm-tag.is-low {
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.gtm-tag.is-new {
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

.gtm-chevron svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: var(--color-ink-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 120ms ease-out;
}

.gtm-row.is-open .gtm-chevron svg {
  transform: rotate(180deg);
}

.gtm-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-5);
  padding: var(--space-2) var(--space-3) var(--space-5);
}

.gtm-detail-facts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  max-width: 60rem;
}

.gtm-detail-row {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.gtm-detail-row dt {
  color: var(--color-ink-soft);
  font-weight: 600;
}

.gtm-detail-row dd {
  margin: 0;
  font-weight: 400;
  line-height: 1.55;
}

.gtm-detail-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.gtm-detail-none {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

.gtm-no-match:not([hidden]) {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.gtm-no-match p {
  margin: 0;
}

/* The review's findings above the list, folded; opened, they read as a short document. */
.gtm-findings {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.gtm-findings > summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.gtm-findings > summary::-webkit-details-marker {
  display: none;
}

.gtm-findings-hint {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 400;
}

.gtm-findings > summary svg {
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  fill: none;
  stroke: var(--color-ink-soft);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gtm-findings[open] > summary svg {
  transform: rotate(180deg);
}

.gtm-findings-body {
  max-width: 72ch;
  padding: 0 var(--space-5) var(--space-5);
}

.gtm-findings-body p {
  margin: var(--space-4) 0 var(--space-2);
}

.gtm-findings-body ul {
  margin: 0 0 var(--space-2);
}

.gtm-empty {
  padding: var(--space-8) 0;
}

.gtm-empty h2 {
  margin: 0 0 var(--space-2);
}

/* Narrower, the sprint state keeps its width; revenue, CRM signal and confidence go to
   the opened row. */
@media (max-width: 72rem) {
  .gtm-figures,
  .gtm-loading:not([hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .gtm-columns,
  .gtm-row-main {
    grid-template-columns: minmax(14rem, 1fr) 11rem 6.5rem 1.5rem;
  }

  .gtm-columns > .gtm-revenue,
  .gtm-columns > .gtm-signal,
  .gtm-columns > .gtm-confidence,
  .gtm-row-main > .gtm-revenue,
  .gtm-row-main > .gtm-signal,
  .gtm-row-main > .gtm-confidence {
    display: none;
  }
}

/* The card opened outside Prospecting, for someone not in the sprint yet (2026-10-02): one
   quiet line and the button that adds them. */
.prospect-card-join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.prospect-card-join-copy {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* Not interested / Do not contact beside a name in the lists (2026-10-02): the danger
   tone in the card's chip shape, as the LinkedIn Connected tag beside it is drawn. */
.contact-stop-tag {
  display: inline-block;
  flex: none;
  margin-left: var(--space-1);
  padding: 0.0625rem 0.45rem;
  border-radius: var(--radius-sm);
  color: var(--color-danger);
  background: var(--color-danger-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}

/* Opportunity lost (2026-10-02): the danger tone in the chip shape of the list tags, at the
   account page's top right and beside the account on Opportunities. */
.opportunity-lost-tag:not([hidden]) {
  display: inline-flex;
  flex: none;
  align-items: center;
  align-self: center;
  padding: 0.2rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
  border-radius: var(--radius-sm);
  color: var(--color-danger);
  background: var(--color-danger-soft);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.opportunity-lost-tag.is-small:not([hidden]) {
  margin-left: var(--space-2);
  padding: 0.0625rem 0.45rem;
  border: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  vertical-align: middle;
}

/* source: frontend/styles/forms.css */

form {
  display: grid;
}

label {
  margin: var(--space-5) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 650;
}

input,
select,
textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  color: var(--color-ink);
  background: var(--color-surface);
}

/* A field inside its label takes the label's font with it, and so its weight: what was
   typed, and the placeholder, read as bold (2026-09-28). The text of a field is regular. */
label :is(input, select, textarea) {
  font-weight: 400;
}

/* Dropdowns (2026-09-28; before this they are tagged design-backup/dropdowns-2026-09-28,
   and design-backup/dropdowns-all-2026-09-28 before they all took their text's width).
   The browser's own arrow sat at the far edge of a stretched field and in a different
   hand from every other icon; each dropdown now draws the app's chevron, just inside its
   right edge, and the text starts a step closer to the left. A list box (multiple or
   sized) keeps its own look. */
select:not([multiple]):not([size]) {
  appearance: none;
  padding-left: var(--space-3);
  padding-right: 2rem;
  background-image: var(--icon-select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  background-size: 0.875rem 0.875rem;
  text-overflow: ellipsis;
  cursor: pointer;
}

/* Every dropdown is as wide as the choice it shows, so its chevron stays by the words, never
   narrower than a comfortable target and never wider than its column. Browsers without
   field-sizing give it the width of its longest option. */
select:not([multiple]):not([size]) {
  /* Its own line, as a full-width field had: at its text's width an inline select sat
     beside its label ("Stage [Discovery]") in every form. */
  display: block;
  width: auto;
  /* A comfortable target, but never wider than its column: a fixed 10rem spilled over the
     next field in a narrow two-column form (the contact editor, 2026-09-28). */
  min-width: min(10rem, 100%);
  max-width: 100%;
  field-sizing: content;
  justify-self: start;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--color-line-strong);
}

/* Focus on a field: its border in the focus colour and a 1px outline on it, one solid 2px
   line that clears 3:1 against the page (the 18% halo it replaced measured under 2:1). */
/* The hint in an empty field in the soft ink, readable in both modes (the browser's own
   grey measured 3.5:1 on the dark surface). */
::placeholder {
  color: var(--color-ink-soft);
  opacity: 1;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-focus);
  outline: 1px solid var(--color-focus);
  outline-offset: 0;
}

.password-row {
  position: relative;
}

.password-row input {
  padding-right: 4.5rem;
}

.password-row .text-button {
  position: absolute;
  inset: 0.3125rem 0.3125rem 0.3125rem auto;
  padding: 0 var(--space-3);
  border: 0;
  color: var(--color-ink-soft);
  background: transparent;
  font-size: var(--text-xs);
  font-weight: 650;
}

.field-note,
.security-note,
.proof-note {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.55;
}

.field-note {
  margin: 0.4375rem 0 0;
}

.security-note {
  margin: 1.75rem 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.error {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--color-danger);
  background: var(--color-danger-soft);
}

fieldset {
  margin: var(--space-5) 0 0;
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

legend {
  padding: 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 650;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.check-grid label,
.duplicate-warning label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  font-weight: 500;
}

.check-grid input,
.duplicate-warning input {
  width: auto;
  min-height: auto;
  margin-top: 0.2rem;
}

.inline-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0;
  font-weight: 500;
}

.inline-check input {
  width: auto;
  min-height: auto;
}

.duplicate-warning {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-warning) 40%, var(--color-warning-line));
  border-radius: var(--radius-md);
  color: var(--color-warning);
  background: var(--color-warning-soft);
}

.duplicate-warning p {
  margin: var(--space-2) 0 var(--space-3);
}

/* source: frontend/styles/overlays.css */

/* The page behind a drawer is out of focus, not switched off. Blurred, it is still
   plainly the account you were on -- the shapes and the colours are where you left them
   -- but no line of it competes for reading with the panel in front.

   The dimming is lighter than it was because the blur now does that work: at 42% over a
   sharp page the text was still legible enough to pull the eye, and darkening it further
   would have made the page disappear instead of recede. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--layer-scrim);
  border: 0;
  background: rgb(29 34 39 / 28%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Someone who asked their system for less transparency gets the plain dark scrim back:
   a blur is transparency with extra steps, and for a reader who finds layered surfaces
   hard to parse it is the worst of both. */
@media (prefers-reduced-transparency: reduce) {
  .scrim {
    background: rgb(29 34 39 / 72%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--layer-drawer);
  display: grid;
  width: min(29rem, calc(100vw - 2rem));
  grid-template-rows: auto 1fr auto;
  /* A hairline on the edge that meets the dimmed page sets the panel off it (2026-09-29,
     Nico). */
  border-left: 1px solid var(--color-line-strong);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}

.contact-drawer {
  width: min(34rem, calc(100vw - 2rem));
}

/* Forty per cent wider than the 40rem it was: this drawer is read, not filled in, and a
   line of German prose at the old width broke every eight or nine words. */
.product-drawer {
  width: min(56rem, calc(100vw - 2rem));
}

/* The same width as the product drawer: a competitor's offerings are the same kind of
   text. Here rather than beside the page's other styles, because .drawer above sets the
   default width and a rule earlier in the bundle loses to it. */
.competitor-drawer {
  width: min(56rem, calc(100vw - 2rem));
}

/* Blind spots (0120): 700 pixels, wide enough for a point and its sub-points to read as
   prose beside their boxes. */
.blind-spots-drawer {
  width: min(43.75rem, calc(100vw - 2rem));
}

/* The deal step list: a column of names with their handles and switches. */
.deal-step-list-drawer {
  width: min(34rem, calc(100vw - 2rem));
}

/* A short form: address, title, section, a line of note. */
.resource-drawer {
  width: min(34rem, calc(100vw - 2rem));
}

/* The Prospects page's documents: a file list with names, sizes and actions side by side. */
.prospecting-documents-drawer {
  width: min(52rem, calc(100vw - 2rem));
}

/* Picking people: a search, then a name, a title and an Add to sprint button per row. */
.prospect-people-drawer {
  width: min(40rem, calc(100vw - 2rem));
}

.prospect-settings-drawer {
  width: min(30rem, calc(100vw - 2rem));
}

/* A territory plan: rank, company, the account it matched or a choice, and the outcome. */
.prospect-list-drawer {
  width: min(52rem, calc(100vw - 2rem));
}

/* Wide enough to read a company name, what happens to it, and what it matched. */
.group-import-drawer {
  width: min(44rem, calc(100vw - 2rem));
}

.drawer-header,
.drawer-body,
.drawer-footer {
  padding: var(--space-6);
}

.drawer-body {
  min-height: 0;
  overflow-y: auto;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-line);
}

.drawer-header h2 {
  margin-bottom: var(--space-1);
  font-size: 1.25rem;
  line-height: 1.25;
}

.drawer-header .icon-button svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.75;
}

.drawer-header p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  border-top: 1px solid var(--color-line);
}

.modal-layer {
  position: fixed;
  inset: 0;
  z-index: var(--layer-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: rgb(29 34 39 / 42%);
}

.modal {
  width: min(31rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  padding: var(--space-6);
  /* The side panels' hairline, all round (2026-09-29, Nico): a pop-up stands off the
     dimmed page in the dark theme as much as in the light one. */
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-overlay);
}

.account-modal {
  width: min(46rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

body.has-overlay {
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .drawer,
  .modal,
  .toast {
    animation: enter var(--motion-standard) ease-out;
  }

  .skeleton-line {
    animation: pulse 1.4s ease-in-out infinite alternate;
  }

  .account-section-drawer {
    animation: account-section-enter 240ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

@keyframes pulse {
  to {
    background: var(--color-line);
  }
}

@keyframes account-section-enter {
  from {
    opacity: 0.72;
    transform: translateX(2.5rem);
  }
}

/* The contact card opened from a Prospect Sprint list comes in from the left, beside the
   names it was opened from, so the eye does not cross the screen to read it. A click on
   the dimmed page closes it. */
.drawer.prospect-contact-drawer {
  inset: 0 auto 0 0;
  /* 900px (Nico, 2026-09-28): room for the history, the minutes and the accounts. */
  width: min(900px, calc(100vw - 2rem));
  /* Opened from the left, its hairline is on the right, the edge that meets the page. */
  border-right: 1px solid var(--color-line-strong);
  border-left: 0;
  box-shadow: 18px 0 48px rgb(28 37 43 / 16%);
}

@media (prefers-reduced-motion: no-preference) {
  .drawer.prospect-contact-drawer {
    animation: prospect-contact-enter 220ms cubic-bezier(0.16, 1, 0.3, 1);
  }
}

@keyframes prospect-contact-enter {
  from {
    opacity: 0.6;
    transform: translateX(-2rem);
  }
}

.drawer.prospect-contact-drawer.is-right {
  inset: 0 0 0 auto;
  /* Opened on the right, its hairline is on the left, the edge that meets the page. */
  border-right: 0;
  border-left: 1px solid var(--color-line-strong);
  box-shadow: -18px 0 48px rgb(28 37 43 / 16%);
}

@media (prefers-reduced-motion: no-preference) {
  .drawer.prospect-contact-drawer.is-right {
    animation-name: prospect-contact-enter-right;
  }
}

@keyframes prospect-contact-enter-right {
  from {
    opacity: 0.6;
    transform: translateX(2rem);
  }
}

/* A contact card opened over an account's section drawer (Contacts): the drawer steps back
   under a slight blur, like the page behind it, and a click on it reaches the scrim
   underneath and closes the card. */
.account-section-drawer {
  transition: filter 180ms ease;
}

body:has(#prospect-contact-layer:not([hidden])) .account-section-drawer {
  filter: blur(2px);
  pointer-events: none;
}

@media (prefers-reduced-transparency: reduce) {
  body:has(#prospect-contact-layer:not([hidden])) .account-section-drawer {
    filter: none;
    opacity: 0.6;
  }
}

/* source: frontend/styles/utilities.css */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loading {
  padding: var(--space-12) 0;
  color: var(--color-ink-soft);
}

.proof-note {
  margin: var(--space-5) var(--space-1) 0;
}

.session-state {
  justify-self: end;
  color: var(--color-success);
  font-weight: 650;
}

.session-state::before {
  display: inline-block;
  width: var(--space-2);
  height: var(--space-2);
  margin-right: var(--space-2);
  border-radius: 50%;
  background: currentColor;
  content: "";
}

dt {
  margin-bottom: var(--space-2);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 630;
}

.secondary-value {
  margin-top: var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 450;
}

[hidden] {
  display: none;
}

/* source: frontend/styles/theme-b2.css */

/*
 * B2 Focus Canvas
 * Notion-calibrated, content-first treatment for the existing Merkio 2 UI.
 * This file is bundled last so B2 can change composition without touching B1.
 */

html[data-theme="b2"] body {
  font-feature-settings: "kern" 1, "liga" 1;
  letter-spacing: -0.006em;
}

html[data-theme="b2"] .shell-nav {
  padding: var(--space-4) var(--space-2);
}

html[data-theme="b2"] .shell-brand {
  padding-inline: var(--space-3);
}

html[data-theme="b2"] .shell-nav-list {
  margin-top: var(--space-6);
}

html[data-theme="b2"] .nav-link {
  min-height: 2.5rem;
  gap: var(--space-2);
  padding-inline: var(--space-3);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
}

html[data-theme="b2"] .nav-link[aria-current="page"] {
  box-shadow: inset 2px 0 0 var(--color-accent);
}


html[data-theme="b2"] .primary-button,
html[data-theme="b2"] .secondary-button,
html[data-theme="b2"] .tertiary-button,
html[data-theme="b2"] .icon-button,
html[data-theme="b2"] .user-button,
html[data-theme="b2"] .menu-button {
  border-radius: var(--radius-control);
}

html[data-theme="b2"] .primary-button {
  border-color: var(--color-ink);
  background: var(--color-ink);
}

html[data-theme="b2"] .surface,
html[data-theme="b2"] .state-panel,
html[data-theme="b2"] .table-shell {
  border-radius: var(--radius-md);
  box-shadow: none;
}

html[data-theme="b2"] .account-dossier-shell #account-workspace-app {
  color: var(--color-ink);
  background: var(--color-surface);
}

html[data-theme="b2"] .account-dossier-shell .account-identity-header {
  min-height: 5.75rem;
  align-items: center;
  padding: var(--space-3) var(--space-6) var(--space-4);
}

html[data-theme="b2"] .account-dossier-shell .account-identity-main h1 {
  margin: 0;
  font-size: 1.625rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

html[data-theme="b2"] .account-dossier-shell .account-identity-actions {
  align-self: center;
}

html[data-theme="b2"] .account-dossier-shell .account-section-nav {
  gap: var(--space-7);
  padding-inline: var(--space-6);
  background: color-mix(in srgb, var(--color-surface) 98%, transparent);
}

html[data-theme="b2"] .account-dossier-shell .account-section-nav a {
  padding-block: 0.7rem;
  color: var(--color-ink-soft);
  font-size: 0.8125rem;
  font-weight: 550;
}

html[data-theme="b2"] .account-dossier-shell .account-section-nav a[aria-current="location"] {
  color: var(--color-ink);
  font-weight: 650;
}

html[data-theme="b2"] .account-dossier-layout {
  grid-template-columns: minmax(0, 1fr) 20rem;
  max-width: 100rem;
  margin-inline: auto;
}

html[data-theme="b2"] .account-dossier-main {
  padding: 0 var(--space-6) var(--space-12);
}

html[data-theme="b2"] .account-dossier-main > section {
  padding: var(--space-5) 0 var(--space-5);
}

html[data-theme="b2"] .account-dossier-main .overview-matters {
  padding-top: var(--space-4);
  border-top: 0;
}

html[data-theme="b2"] .account-dossier-main .overview-matters > .surface-header {
  display: none;
}

html[data-theme="b2"] .account-dossier-main .matter-list {
  gap: 0 var(--space-6);
  border-top: 0;
}

html[data-theme="b2"] .account-dossier-main .matter-list article:first-child {
  margin-bottom: var(--space-2);
  /* Bordered here, so the left padding gives up a pixel to the border and the text still
     starts one --space-5 from the column edge, where Current status starts. */
  padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) - 1px);
  border: 1px solid color-mix(in srgb, var(--color-accent) 32%, var(--color-line));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-accent-soft) 62%, var(--color-surface));
}

html[data-theme="b2"] .account-dossier-main .matter-list .matter-next-step {
  min-height: auto;
}

html[data-theme="b2"] .matter-next-step .matter-preview-button {
  min-height: auto;
  padding: 0;
}

html[data-theme="b2"] .account-dossier-main .matter-list article:first-child::before {
  display: none;
}

html[data-theme="b2"] .account-dossier-main .matter-list h4,
html[data-theme="b2"] .matter-preview-heading {
  color: var(--color-accent-strong);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.045em;
}

html[data-theme="b2"] .account-dossier-main .matter-list article:first-child .matter-preview-text {
  max-width: 72ch;
  margin-bottom: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 550;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

/* The Next Step tile is that first article, so it inherited weight 550 and a 72ch column.
   That suited the short hand-typed field the rule was written for, not a bilingual summary
   that should read as body text across the full box. Theme level, because the base
   override cannot outrank a selector carrying html[data-theme]. */
html[data-theme="b2"] .account-dossier-main .matter-list article.matter-next-step .matter-preview-text {
  max-width: none;
  font-weight: 400;
}

html[data-theme="b2"]
  .account-dossier-main
  .matter-list
  article.matter-next-step
  .matter-preview-text
  strong {
  font-weight: 700;
}

html[data-theme="b2"] .account-dossier-main .matter-list article:not(:first-of-type) {
  padding-top: var(--space-4);
}

html[data-theme="b2"] .account-dossier-main .matter-list article:nth-of-type(2) {
  padding-left: var(--space-5);
}

html[data-theme="b2"] .account-dossier-main .matter-list article:last-of-type {
  padding-right: var(--space-5);
  padding-left: var(--space-6);
}

html[data-theme="b2"] .account-dossier-main .matter-list .matter-preview {
  min-height: 4rem;
}

html[data-theme="b2"] .matter-preview-button {
  min-height: 0;
  padding: var(--space-2) 0 var(--space-2);
  border-radius: 0;
}

html[data-theme="b2"] .matter-preview-button:hover {
  border-color: transparent;
  background: transparent;
}

html[data-theme="b2"] .matter-preview-button:hover .matter-preview-action,
html[data-theme="b2"] .matter-preview-button:focus-visible .matter-preview-action {
  text-decoration: underline;
}

html[data-theme="b2"] .matter-preview-action {
  opacity: 0.76;
}

html[data-theme="b2"] .matter-preview-text {
  color: var(--color-ink);
  line-height: 1.55;
}

html[data-theme="b2"] .account-dossier-rail {
  top: 2.7rem;
  min-height: calc(100vh - 2.7rem);
  padding: var(--space-5) var(--space-5) var(--space-10);
  background: var(--color-surface);
}

html[data-theme="b2"] .dossier-rail-section {
  padding-bottom: var(--space-5);
}

html[data-theme="b2"] .dossier-rail-section + .dossier-rail-section {
  padding-top: var(--space-5);
}

html[data-theme="b2"] .dossier-rail-section h2 {
  font-size: var(--text-sm);
  letter-spacing: -0.01em;
}

html[data-theme="b2"] .dossier-rail-list a,
html[data-theme="b2"] .dossier-product-list li {
  padding-block: 0.65rem;
}

html[data-theme="b2"] .account-dossier-main .surface,
html[data-theme="b2"] .account-section-drawer-body .surface {
  border-top-color: var(--color-line);
}

/* #account-deal-sprint already draws a rule at the top of the section, 25px above this
   one, so the phase surface was a second line for the same boundary. */
html[data-theme="b2"] .account-dossier-main .sprint-phase.surface {
  padding-top: var(--space-2);
  border-top: 0;
}

html[data-theme="b2"] .account-dossier-main > #account-deal-sprint {
  padding-top: var(--space-4);
}

html[data-theme="b2"] .sprint-phase-list {
  gap: 0;
}

html[data-theme="b2"] .sprint-items {
  gap: var(--space-2);
}

html[data-theme="b2"] .sprint-phase-body {
  gap: var(--space-4);
}

html[data-theme="b2"] .sprint-phase > header {
  padding: var(--space-2) 0;
}

html[data-theme="b2"] .sprint-item {
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-accent) 16%, var(--color-line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent-soft) 45%, var(--color-surface));
  gap: var(--space-3);
}

/* The rail is a box now, so the nudge that used to line a bare label up with the title
   would eat its top padding instead. */
html[data-theme="b2"] .sprint-item-date {
  flex-basis: 5rem;
}

html[data-theme="b2"] .sprint-child-actions {
  border-top-color: var(--color-line);
}

html[data-theme="b2"] .sprint-item.is-completed {
  padding-inline: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--color-success) 26%, var(--color-success-line));
  border-radius: var(--radius-md);
  background: var(--color-success-soft);
}

html[data-theme="b2"] .sprint-item-support {
  font-size: var(--text-xs);
}

html[data-theme="b2"] .drawer,
html[data-theme="b2"] .modal,
html[data-theme="b2"] .popup {
  border-radius: var(--radius-lg);
}

@media (max-width: 75rem) {
  html[data-theme="b2"] .account-dossier-layout {
    grid-template-columns: minmax(0, 1fr) 17rem;
  }
}

@media (max-width: 54rem) {
  html[data-theme="b2"] .account-dossier-layout {
    display: flex;
  }

  html[data-theme="b2"] .account-dossier-rail {
    min-height: 0;
  }
}

/* source: frontend/styles/theme-b3.css */

/*
 * B3 Record
 * Attio-calibrated CRM record page: light sidebar, record header, underline tabs, a working
 * column and an attribute panel. Bundled after B2 and scoped to html[data-theme="b3"], so
 * nothing here can reach B1 or B2.
 */

html[data-theme="b3"] body {
  font-feature-settings: "kern" 1, "liga" 1, "tnum" 1, "cv11" 1;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

html[data-theme="b3"] ::selection {
  background: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

html[data-theme="b3"] * {
  scrollbar-color: var(--color-line-strong) transparent;
  scrollbar-width: thin;
}

html[data-theme="b3"] h1,
html[data-theme="b3"] h2,
html[data-theme="b3"] h3 {
  letter-spacing: -0.015em;
}

/* Sidebar: the same paper as the page, a hairline between them, compact rows. */

html[data-theme="b3"] .shell-nav {
  padding: var(--space-3) var(--space-2);
}

html[data-theme="b3"] .shell-brand {
  min-height: 2.25rem;
  gap: var(--space-2);
  padding-inline: var(--space-2);
}

html[data-theme="b3"] .shell-logo-mark {
  height: 1.375rem;
}

/* The wordmark as the logo draws it: bold, tight, a size up from the navigation. */
html[data-theme="b3"] .shell-logo-name {
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.025em;
}

html[data-theme="b3"] .shell-nav-list {
  gap: 1px;
  margin-top: var(--space-4);
}

html[data-theme="b3"] .shell-nav-list > li {
  gap: 1px;
}

html[data-theme="b3"] .nav-link {
  min-height: 2rem;
  gap: var(--space-2);
  padding-inline: var(--space-2);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  font-weight: 500;
}

html[data-theme="b3"] .nav-link .icon {
  width: 1rem;
  height: 1rem;
}

html[data-theme="b3"] .nav-link[aria-current="page"] {
  font-weight: 600;
}

/* Top bar and controls. */

html[data-theme="b3"] .shell-header {
  padding-inline: var(--space-6);
  background: var(--color-surface);
}

html[data-theme="b3"] .icon-button,
html[data-theme="b3"] .menu-button,
html[data-theme="b3"] .user-button,
html[data-theme="b3"] .secondary-button,
html[data-theme="b3"] .primary-button,
html[data-theme="b3"] .tertiary-button,
html[data-theme="b3"] .state-link {
  min-height: 2rem;
  border-color: var(--color-line-strong);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  font-weight: 400;
}

html[data-theme="b3"] .icon-button {
  width: 2rem;
}

html[data-theme="b3"] .secondary-button,
html[data-theme="b3"] .primary-button,
html[data-theme="b3"] .state-link {
  padding-inline: var(--space-3);
}

html[data-theme="b3"] .secondary-button,
html[data-theme="b3"] .icon-button,
html[data-theme="b3"] .user-button {
  box-shadow: 0 1px 1px rgb(31 32 35 / 4%);
}

html[data-theme="b3"] .secondary-button:hover,
html[data-theme="b3"] .icon-button:hover,
html[data-theme="b3"] .user-button:hover {
  background: var(--color-surface-subtle);
}

/* The main button in the ink, as in the other themes -- never a blue one (2026-09-29). */
html[data-theme="b3"] .primary-button {
  border-color: var(--color-ink);
  color: var(--color-on-ink);
  background: var(--color-ink);
}

html[data-theme="b3"] .primary-button:hover {
  border-color: var(--color-ink);
  background: color-mix(in srgb, var(--color-ink) 86%, var(--color-canvas));
}

/* Tags, not lozenges: a small square-shouldered chip. */
html[data-theme="b3"] .pill {
  min-height: 1.375rem;
  padding: 0 0.4rem;
  border-radius: var(--radius-sm);
  font-weight: 550;
}

html[data-theme="b3"] .surface,
html[data-theme="b3"] .state-panel,
html[data-theme="b3"] .table-shell {
  border-radius: var(--radius-md);
  box-shadow: none;
}

/* Table headings read as column names, not as shouted labels -- and at the size of the
   text around them, not a step below it. */
html[data-theme="b3"] th {
  color: var(--color-ink-soft);
  background: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}

html[data-theme="b3"] .eyebrow {
  display: none;
}

html[data-theme="b3"] .drawer,
html[data-theme="b3"] .modal,
html[data-theme="b3"] .popup {
  border-radius: var(--radius-lg);
}

/* The record. */

html[data-theme="b3"] .account-dossier-shell #account-workspace-app {
  color: var(--color-ink);
  background: var(--color-surface);
}

html[data-theme="b3"] .account-dossier-shell .account-identity-header {
  align-items: center;
  padding: var(--space-5) var(--space-6) var(--space-4);
}

html[data-theme="b3"] .account-dossier-shell .account-identity-main h1 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

html[data-theme="b3"] .account-dossier-shell .account-identity-actions {
  align-self: center;
}

html[data-theme="b3"] .account-dossier-shell .account-section-nav {
  gap: var(--space-1);
  padding-inline: var(--space-5);
  border-top: 0;
  background: var(--color-surface);
}

html[data-theme="b3"] .account-dossier-shell .account-section-nav a {
  margin-bottom: -1px;
  padding: 0.6rem var(--space-2);
  border-bottom: 2px solid transparent;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 500;
}

html[data-theme="b3"] .account-dossier-shell .account-section-nav a:hover {
  color: var(--color-ink);
}

html[data-theme="b3"] .account-dossier-shell .account-section-nav a[aria-current="location"] {
  border-color: var(--color-ink);
  color: var(--color-ink);
  font-weight: 600;
}

html[data-theme="b3"] .account-dossier-layout {
  grid-template-columns: minmax(0, 1fr) 20rem;
}

html[data-theme="b3"] .account-dossier-main {
  padding: 0 var(--space-6) var(--space-12);
}

html[data-theme="b3"] .account-dossier-main > section {
  padding: var(--space-5) 0;
}

/* What matters now: the Next step as one quiet bordered block, Status and Pain as a
   two-column brief beneath it. */

html[data-theme="b3"] .account-dossier-main .overview-matters {
  padding-top: var(--space-5);
  border: 0;
}

html[data-theme="b3"] .account-dossier-main .overview-matters > .surface-header {
  display: none;
}

html[data-theme="b3"] .account-dossier-main .matter-list {
  gap: var(--space-3);
  border-top: 0;
}

html[data-theme="b3"] .account-dossier-main .matter-list article {
  padding: var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* Status and Pain sit side by side as a pair, so the shorter one takes the taller one's
   height instead of ending halfway down its neighbour. */
html[data-theme="b3"] .account-dossier-main .matter-list article:not(.matter-next-step) {
  align-self: stretch;
}

html[data-theme="b3"] .account-dossier-main > #account-overview {
  padding-bottom: var(--space-2);
}

html[data-theme="b3"] .account-dossier-main .matter-list article::before {
  display: none;
}

html[data-theme="b3"] .account-dossier-main .matter-list article.matter-next-step {
  border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-line));
}

html[data-theme="b3"] .matter-preview-button {
  min-height: 0;
  padding: 0;
  border-radius: 0;
}

html[data-theme="b3"] .matter-preview-button:hover {
  border-color: transparent;
  background: transparent;
}

/* Section headings take the tabs' size: 12px grey read as captions, not as the names of
   the things below them. */
html[data-theme="b3"] .account-dossier-main .matter-list h4,
html[data-theme="b3"] .matter-preview-heading {
  margin-bottom: var(--space-2);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Next step, Current status and Pain points: each card's name in the same blue. */
html[data-theme="b3"] .matter-preview-heading > span:first-child {
  color: var(--color-accent-strong);
}

html[data-theme="b3"] .matter-preview-action {
  color: var(--color-ink-soft);
  opacity: 0;
  transition: opacity var(--motion-fast) ease-out;
}

html[data-theme="b3"] .matter-preview-button:hover .matter-preview-action,
html[data-theme="b3"] .matter-preview-button:focus-visible .matter-preview-action {
  opacity: 1;
}

html[data-theme="b3"] .matter-preview-text {
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* Attribute panel. */

html[data-theme="b3"] .account-dossier-rail {
  padding: var(--space-5) var(--space-5) var(--space-10);
  background: var(--color-surface);
}

html[data-theme="b3"] .dossier-rail-section {
  padding-bottom: var(--space-4);
}

html[data-theme="b3"] .dossier-rail-section + .dossier-rail-section {
  padding-top: var(--space-4);
}

html[data-theme="b3"] .dossier-rail-section h2 {
  margin-bottom: var(--space-3);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
}

html[data-theme="b3"] .dossier-rail-section h2 a {
  color: inherit;
}

/* The same weight and blue as Stakeholders' Add beside them: one "Add" down the rail. */
html[data-theme="b3"] .dossier-heading-actions a,
html[data-theme="b3"] .dossier-heading-actions button {
  color: var(--color-accent-strong);
  font-weight: 700;
}

/* Sprint rows. */

html[data-theme="b3"] .account-dossier-main .sprint-phase.surface {
  padding-top: var(--space-2);
  border-top: 0;
}

html[data-theme="b3"] .sprint-phase-list {
  gap: 0;
}

html[data-theme="b3"] .sprint-items {
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

html[data-theme="b3"] .sprint-item {
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 0;
  border-radius: 0;
  background: var(--color-surface);
}

html[data-theme="b3"] .sprint-item + .sprint-item {
  border-top: 1px solid var(--color-line);
}

html[data-theme="b3"] .sprint-item:hover {
  background: color-mix(in srgb, var(--color-surface-subtle) 60%, var(--color-surface));
}

html[data-theme="b3"] .sprint-item-date {
  flex-basis: 5rem;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}

html[data-theme="b3"] .sprint-item.is-completed {
  background: var(--color-surface);
}

/* B3 keeps the words in every date box grey and lets the box carry the colour; the
   no-date box follows, or its blue text would outshout a late one. */
/* Except when it is late: a milestone that should have been done by yesterday is the one
   box on the page that has to be seen, so it keeps its red words as well as its tint. */
html[data-theme="b3"] .sprint-item-date.is-late {
  color: var(--color-danger);
}

html[data-theme="b3"] .sprint-item-date.has-no-date:not(.is-settled) {
  color: var(--color-ink-soft);
}

html[data-theme="b3"] .sprint-item-support {
  font-size: var(--text-xs);
}

/* B3 Focus: the same record, centred. One column width holds the breadcrumb, header,
   tabs and body, so they share a left edge; the bars' hairlines still run the full
   width, only what sits on them is drawn in. The pages outside the record take the same
   width through --content-max, set in themes.css. */

html[data-theme="b3"][data-layout="focus"] .account-dossier-shell .account-identity-header,
html[data-theme="b3"][data-layout="focus"] .account-dossier-shell .account-section-nav {
  padding-inline: var(--focus-inset);
}

html[data-theme="b3"][data-layout="focus"] .account-dossier-shell .account-section-nav {
  padding-inline: calc(var(--focus-inset) - var(--space-2));
}

html[data-theme="b3"][data-layout="focus"] .account-dossier-layout {
  max-width: var(--focus-width);
  margin-inline: auto;
}

@media (max-width: 75rem) {
  html[data-theme="b3"] .account-dossier-layout {
    grid-template-columns: minmax(0, 1fr) 17rem;
  }
}

@media (max-width: 54rem) {
  html[data-theme="b3"] .account-dossier-layout {
    display: flex;
  }

  html[data-theme="b3"] .account-dossier-rail {
    min-height: 0;
  }
}

/* The Prospect Sprint's list headings follow the B3 table headings above. */
html[data-theme="b3"] .prospect-list-header {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}

/* The contact card's Revic button, as high as the menu button beside it: a B3 framed
   button is 2rem (2026-09-29, Nico). */
html[data-theme="b3"] .prospect-contact-drawer .prospect-prompt-bar.is-header > .prospect-wide-action {
  min-height: 2rem;
}

/* B3's framed buttons are 2rem high; a page's icon action is a 2rem square with them. */
html[data-theme="b3"] .page-icon-action {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

/* source: frontend/styles/today.css */

.today-title-row {
  align-items: flex-end;
}

.today-horizon {
  display: flex;
  gap: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  overflow: hidden;
}

.today-horizon button {
  padding: var(--space-2) var(--space-4);
  border: 0;
  color: var(--color-ink-soft);
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 650;
  cursor: pointer;
}

.today-horizon button + button {
  border-left: 1px solid var(--color-line);
}

.today-horizon button[aria-pressed="true"] {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

.today-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-6);
}




/* Only late and today interrupt; the rest stay quiet so the two that matter carry. */


.today-group + .today-group {
  margin-top: var(--space-8);
}

.today-group-heading {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) 0;
  color: var(--color-ink-soft);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.today-group-count {
  color: var(--color-ink-soft);
  font-weight: 650;
  letter-spacing: 0;
}

.today-account + .today-account {
  margin-top: var(--space-5);
}

.today-account-name {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
}

.today-account-name a {
  color: var(--color-ink);
  text-decoration: none;
}

.today-account-name a:hover {
  text-decoration: underline;
}

.today-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}

.today-row + .today-row {
  margin-top: var(--space-2);
}

.today-row:hover {
  border-color: color-mix(in srgb, var(--color-accent) 40%, var(--color-line));
  background: color-mix(in srgb, var(--color-accent-soft) 40%, var(--color-surface));
}

.today-row:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 0.125rem;
}

.today-row-main h5 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.35;
}

.today-row-desc {
  display: -webkit-box;
  overflow: hidden;
  margin: 0 0 var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  line-height: 1.5;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.today-row-meta {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.today-empty {
  padding: var(--space-8) 0;
}

.today-empty h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
}

.today-milestones {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line);
}

.today-milestones summary {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 650;
  cursor: pointer;
}

.today-milestones-list {
  margin-top: var(--space-4);
}

@media (max-width: 48rem) {
  .today-title-row {
    align-items: flex-start;
  }

  .today-group-heading {
    position: static;
  }
}

/* Today, calm (2026-09-27; the page before this is tagged design-backup/today-2026-09-27).
   The same world as the Deal Sprint: counts that only colour their number when they
   matter, headings in sentence case, and one column of rows -- a box to tick, a quiet
   date, the work -- divided by hairlines rather than boxed one by one. */
#today-page .today-horizon {
  border-radius: var(--radius-md);
}

#today-page .today-horizon button {
  padding: var(--space-1) var(--space-3);
  font-weight: 500;
}

#today-page .today-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-4) 0 var(--space-6);
  color: var(--color-ink-soft);
  font-size: var(--text-md);
}

#today-page .today-summary[hidden] {
  display: none;
}

#today-page .today-count strong {
  color: var(--color-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#today-page .today-count + .today-count::before {
  margin-right: var(--space-2);
  color: var(--color-ink-muted);
  content: "·";
}

#today-page .today-count.is-late strong {
  color: var(--color-danger);
}

#today-page .today-count.is-today strong {
  color: color-mix(in srgb, var(--color-warning) 75%, var(--color-ink));
}







#today-page .today-group-heading {
  margin-bottom: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-line);
  color: var(--color-ink);
  background: var(--color-canvas);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#today-page .today-group[data-bucket="overdue"] .today-group-heading {
  color: var(--color-danger);
}

#today-page .today-group-count {
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  font-weight: 400;
}

#today-page .today-account + .today-account {
  margin-top: var(--space-4);
}

/* The company a step larger than its rows (2026-09-29, Nico), under the group's mark as on
   All accounts; its to-dos hang off a thin upright line that starts under the mark and
   ends with the last of them. */
#today-page .today-account-name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: 600;
}

#today-page .today-account-name .account-group-icon {
  width: 1rem;
  height: 1rem;
  stroke: color-mix(in srgb, var(--color-accent) 70%, var(--color-ink-muted));
}

#today-page .today-account-rows {
  margin-left: 0.5rem;
  padding-left: calc(var(--space-6) - 0.5rem);
  border-left: 1px solid var(--color-line-strong);
}

/* The company in ink, as on the Prospect Sprint tab (2026-09-29, Nico). */
#today-page .today-account-name a {
  color: var(--color-ink);
}

/* A row: the date, the words. No frame; a hairline between rows. */
#today-page .today-row {
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
}

/* A to-do's day on one line (2026-09-29, Nico; before: tagged
   design-backup/today-todo-rows-2026-09-29): the date and month, a thin upright rule, how
   far off it is. */
#today-page .today-row.is-todo {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0;
  align-items: baseline;
}

/* The to-do follows its day at once, after the same thin upright rule (2026-09-29, Nico;
   before: tagged design-backup/today-todo-inline-2026-09-29): 29 Sep | Today | the to-do. */
#today-page .today-row.is-todo .today-row-main {
  margin-left: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-line);
}

#today-page .today-row.is-todo .sprint-item-date {
  flex: none;
  flex-direction: row;
  align-items: baseline;
  gap: var(--space-1);
  width: auto;
  white-space: nowrap;
}

#today-page .today-row.is-todo :is(.sprint-item-date-day, .sprint-item-date-month) {
  font-size: var(--text-sm);
}

#today-page .today-row.is-todo .sprint-item-date-distance {
  margin: 0 0 0 var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--color-line);
  font-size: var(--text-sm);
}

#today-page .today-row + .today-row {
  margin-top: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-line) 70%, transparent);
}

#today-page .today-row:hover {
  background: color-mix(in srgb, var(--color-surface-subtle) 70%, transparent);
}

#today-page .today-row-main {
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

#today-page .today-row-main:focus-visible {
  border-radius: var(--radius-sm);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

#today-page .today-row-main h5 {
  margin-bottom: 0.125rem;
  font-weight: 500;
  line-height: 1.4;
}

#today-page .today-row-main:hover h5 {
  color: var(--color-accent-strong);
}

/* The date column, as in the Deal Sprint: words only, colour only when late or due. */
#today-page .sprint-item-date {
  flex: 0 0 4.5rem;
  width: 4.5rem;
  min-height: 0;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.125rem 0 0;
  border: 0;
  color: var(--color-ink);
  background: none;
  line-height: 1.2;
  text-align: left;
}

#today-page .sprint-item-date-day {
  font-size: var(--text-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

#today-page .sprint-item-date-month {
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#today-page .sprint-item-date-distance {
  margin-top: 0.125rem;
  color: var(--color-ink-soft);
  font-weight: 400;
  white-space: nowrap;
}

#today-page .sprint-item-date.is-late,
#today-page .sprint-item-date.is-late :is(.sprint-item-date-month, .sprint-item-date-distance) {
  color: var(--color-danger);
}

#today-page .sprint-item-date.is-today .sprint-item-date-distance {
  color: color-mix(in srgb, var(--color-warning) 75%, var(--color-ink));
  font-weight: 600;
}

#today-page .sprint-item-date.has-no-date:not(.is-settled),
#today-page .sprint-item-date.is-open {
  border: 0;
  background: none;
}

@media (max-width: 48rem) {
  #today-page .today-row.is-todo {
    grid-template-columns: minmax(0, 1fr);
  }

  #today-page .today-row.is-todo .today-row-main {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
}

/* The horizon, second pass (2026-09-28; before this tagged design-backup/today-2-2026-09-28):
   underline tabs like every other view switch in Merkio (Prospecting, Competitors) -- plain
   words, the chosen range in the ink over an accent underline -- not a boxed button group
   with a filled selection. */
#today-page .today-horizon {
  gap: var(--space-4);
  border: 0;
  border-radius: 0;
  overflow: visible;
}

#today-page .today-horizon button {
  padding: var(--space-1) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--color-ink-soft);
  background: none;
  font-weight: 500;
}

#today-page .today-horizon button + button {
  border-left: 0;
}

#today-page .today-horizon button:hover {
  color: var(--color-ink);
}

#today-page .today-horizon button[aria-pressed="true"] {
  border-bottom-color: var(--color-accent);
  color: var(--color-ink);
  background: none;
}

/* Today review (2026-09-28): the to-dos are a section like the two Sprints -- heading and
   window on one line, the count line under it -- and every name or account on the page is
   a 24px target. */
#today-page .today-work {
  margin-bottom: var(--space-8);
}

#today-page .today-work-header {
  align-items: center;
}

#today-page .today-work .today-summary {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-sm);
}

#today-page .today-empty {
  margin: 0;
  padding: var(--space-2) 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

#today-page .today-empty[hidden] {
  display: none;
}

#today-page :is(.today-account-name a, .prospect-entry-name, .prospect-entry-account, .prospect-event-account, .partner-today-name, .today-prospecting-link) {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}

/* The Sprints as tabs (2026-09-28): the Prospects page's own tab row, under the date; each
   panel's heading is for screen readers only, since its tab names it, and what is left in
   its header row -- the window, Open Prospecting, Ask the partner manager -- sits right. */
#today-page .today-tabs {
  margin: var(--space-5) 0 var(--space-5);
}

#today-page .today-panel:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 4px;
}

/* Tabs review (2026-09-28): each panel's first line is its summary at the left and its one
   control at the right -- the window, Open Prospecting, Ask the partner manager. */
#today-page .today-panel > .today-prospecting-header {
  align-items: baseline;
  margin-bottom: var(--space-3);
}

#today-page .today-panel > .today-prospecting-header > :is(.today-summary, .prospect-today-summary) {
  margin: 0;
}

#today-page .today-panel > .today-prospecting-header > :last-child {
  margin-left: auto;
}

/* The window is no second row of tabs under the Sprint tabs: plain words, the chosen one in
   the ink and heavier, no underline. */
#today-page .today-horizon button,
#today-page .today-horizon button[aria-pressed="true"] {
  border-bottom: 0;
  font-size: var(--text-sm);
}

#today-page .today-horizon button[aria-pressed="true"] {
  color: var(--color-ink);
  font-weight: 650;
}

/* On a narrow screen the three Sprint tabs stay on one line and scroll sideways rather than
   break into two rows. */
@media (max-width: 30rem) {
  #today-page .today-tabs {
    flex-wrap: nowrap;
    gap: 0 var(--space-4);
    overflow-x: auto;
    scrollbar-width: none;
  }

  #today-page .today-tabs .prospect-today-tab {
    flex: none;
  }
}

/* A Sprint cleared for today (2026-09-28): one quiet line under the panel's head, and the
   next Sprint with work as a link to its tab. */
#today-page .today-clear {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0 0 var(--space-4);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

#today-page .today-clear-next {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}

#today-page .today-clear ~ .today-empty {
  display: none;
}

/* source: frontend/styles/forecast.css */

/* Forecast (0115), 2026-09-28. A sheet to speak from, not a dashboard: one column of deals
   divided by hairlines, the facts as one plain line, the sheet's headline as the strongest
   text in each deal, and the lists beside each other so a deal reads at a glance. One
   primary button on the page; each deal's own Refresh stays quiet. */

/* The page keeps the shell's measure, like every page (2026-09-29; it was 68rem). */
.forecast-page {
  max-width: none;
}

.forecast-title-row {
  align-items: flex-end;
}

.forecast-prepare {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
}

.forecast-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.forecast-last {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

.forecast-last:empty {
  display: none;
}

#forecast-prepare.is-stopping {
  border-color: var(--color-line-strong);
  color: var(--color-ink);
  background: var(--color-surface);
}

.forecast-summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-4) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-md);
}

.forecast-summary[hidden] {
  display: none;
}

.forecast-count strong {
  color: var(--color-ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.forecast-count + .forecast-count::before {
  margin-right: var(--space-2);
  color: var(--color-ink-muted);
  content: "·";
}

.forecast-count.is-late strong {
  color: var(--color-danger);
}

.forecast-status {
  margin: var(--space-2) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}

/* The update email: a working surface to read, change and copy -- bordered, since it is
   text to take away rather than part of the page. */
.forecast-email {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-surface);
}

.forecast-email[hidden] {
  display: none;
}

.forecast-email-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  margin-bottom: var(--space-2);
}

.forecast-email-head h2 {
  margin: 0;
  color: var(--color-accent-strong);
  font-size: var(--text-md);
  font-weight: 600;
}

/* German or English as underline tabs, like every view switch in the app. */
.forecast-email-language {
  display: flex;
  gap: var(--space-4);
}

.forecast-email-language button {
  padding: var(--space-1) 0;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--color-ink-soft);
  background: none;
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
}

.forecast-email-language button:hover:not(:disabled) {
  color: var(--color-ink);
}

.forecast-email-language button[aria-pressed="true"] {
  border-bottom-color: var(--color-accent-strong);
  color: var(--color-ink);
}

.forecast-email-language button:disabled {
  cursor: default;
}

.forecast-email-note {
  margin: 0 0 var(--space-1);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
}

/* A label sits close to its own field and apart from the one above. */
.forecast-email-label {
  margin-top: var(--space-3);
  color: var(--color-ink-soft);
  font-size: var(--text-xs);
  font-weight: 500;
}

.forecast-email-subject,
.forecast-email-body {
  width: 100%;
  font-size: var(--text-sm);
}

.forecast-email-body {
  min-height: 16rem;
  line-height: 1.55;
  resize: vertical;
}

.forecast-email-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.forecast-email-close {
  margin-left: auto;
}

.forecast-status:empty {
  display: none;
}

.forecast-deals {
  margin-top: var(--space-6);
}

.forecast-deals[hidden] {
  display: none;
}

.forecast-deal {
  padding: var(--space-8) 0;
  border-top: 1px solid var(--color-line);
}

.forecast-deal:last-child {
  border-bottom: 1px solid var(--color-line);
}

.forecast-deal-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.forecast-deal-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.3;
}

/* The account's name is a link to it, in the same blue as the headings below. */
.forecast-account {
  color: var(--color-accent-strong);
  text-decoration: none;
}

.forecast-account:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.forecast-opportunity {
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-weight: 400;
}

.forecast-deal-tools {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-2);
}

/* To the record in Salesforce: a link, so the same blue as the account's name. */
.forecast-sfdc {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  color: var(--color-accent-strong);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
}

.forecast-sfdc:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.forecast-sfdc svg {
  width: 0.75rem;
  height: 0.75rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.forecast-written {
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

/* Each deal's own action is a word in the soft ink, not a framed button: the page has one
   button that matters. A quiet fill shows where the pointer is. */
#forecast-app .forecast-refresh {
  min-height: 1.75rem;
  padding: 0 var(--space-2);
  border: 0;
  color: var(--color-ink-soft);
  background: none;
  box-shadow: none;
  font-size: var(--text-sm);
  font-weight: 500;
}

#forecast-app .forecast-refresh:hover:not(:disabled) {
  color: var(--color-ink);
  background: var(--color-surface-subtle);
}

#forecast-app .forecast-refresh:disabled {
  opacity: 0.45;
  cursor: default;
}

.forecast-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  margin: var(--space-2) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.forecast-fact + .forecast-fact::before {
  margin-right: var(--space-2);
  color: var(--color-ink-muted);
  content: "·";
}

.forecast-fact.is-value {
  color: var(--color-ink);
  font-weight: 600;
}

.forecast-fact.is-late {
  color: var(--color-danger);
}

.forecast-fact.is-gap {
  color: var(--color-ink-muted);
}

.forecast-sheet {
  margin-top: var(--space-4);
}

/* The one line said first: large enough to find before anything else in the deal. It and
   the Stand run the deal's full width, as wide as the columns below (Nico, 2026-09-28). */
.forecast-headline {
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.45;
  text-wrap: pretty;
}

.forecast-stand {
  margin: var(--space-2) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.6;
  text-wrap: pretty;
}

/* What comes next, and what changed, in the wide column; the risks beside them. */
.forecast-columns {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-6) var(--space-10);
  margin-top: var(--space-6);
}

.forecast-columns.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.forecast-main,
.forecast-side {
  display: grid;
  align-content: start;
  gap: var(--space-6);
}

/* The sheet's headings in the blue the account page gives its card names (Next step,
   Current status, Pain points), at the size of the headline, so each part is found at a
   glance (Nico, 2026-09-28). */
.forecast-list h3 {
  margin: 0 0 var(--space-2);
  color: var(--color-accent-strong);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}

/* Risks in the danger red, the one heading that asks to be read before the call. */
.forecast-list.is-risks h3 {
  color: var(--color-danger);
}

.forecast-list-when {
  color: var(--color-ink-muted);
  font-weight: 400;
}

.forecast-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* An agenda: the date in its own narrow column, the step beside it, hairlines between. */
.forecast-list li {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--color-line);
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.forecast-list li:last-child {
  border-bottom: 1px solid var(--color-line);
}

.forecast-due {
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.forecast-due.is-late {
  color: var(--color-danger);
}

/* Lists that carry no dates drop the date column rather than keep an empty gutter. */
.forecast-list:not(:has(li.has-due)) li {
  grid-template-columns: minmax(0, 1fr);
}

.forecast-list:not(:has(li.has-due)) .forecast-due {
  display: none;
}

.forecast-list.is-since-last li {
  color: var(--color-ink-soft);
}

.forecast-missing {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  max-width: 100%;
  margin: var(--space-5) 0 0;
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.forecast-missing-label {
  margin-right: var(--space-2);
  color: var(--color-accent-strong);
  font-size: var(--text-md);
  font-weight: 600;
}

/* The dot trails each item, so a wrapped line ends on one rather than opening with it. */
.forecast-missing-item:not(:last-child)::after {
  margin-left: var(--space-2);
  color: var(--color-ink-muted);
  content: "·";
}

.forecast-next {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  color: var(--color-ink);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.forecast-next-label {
  color: var(--color-accent-strong);
  font-size: var(--text-md);
  font-weight: 600;
}

.forecast-next.is-gap {
  color: var(--color-ink-muted);
}

.forecast-sheet.is-writing .skeleton {
  max-width: 40rem;
}

.forecast-deal-error {
  margin: var(--space-3) 0 0;
  color: var(--color-danger);
  font-size: var(--text-sm);
}

.forecast-empty {
  max-width: 40rem;
  margin-top: var(--space-6);
}

.forecast-empty h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.forecast-empty p {
  margin: 0 0 var(--space-4);
}

.forecast-empty[hidden] {
  display: none;
}

@media (max-width: 48rem) {
  .forecast-title-row {
    align-items: flex-start;
  }

  .forecast-prepare {
    align-items: flex-start;
  }

  .forecast-deal-head {
    flex-direction: column;
    gap: var(--space-2);
  }
}

@media (max-width: 60rem) {
  .forecast-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}