/* ==========================================================================
   TalentCorp | DataFlow
   Source of truth: HelloKindred CI Guideline 2024 v1.5

   Palette is basalt blue + fresh lime and nothing else. The secondary
   colours (fuzzy peach, lavender haze, plum royale, meadow dew, sky mist)
   are restricted by the guideline to charts and process artwork in
   PowerPoint and Word, so they do not appear here at all.

   Fresh lime is the highlighter device only — slanted strip, basalt text
   reversed out — and never more than twice on one page.

   Type is Aptos with Georgia Bold Italic for emphasis: the guideline's
   specified electronic fonts, picked there for PC/Mac compatibility.
   Gilroy and Larken are the primary brand faces but are licensed, so they
   are neither embedded nor hotlinked. Nothing here makes an external
   request, so the site renders offline and calls out to nobody.
   ========================================================================== */

:root {
  /* Basalt blue, and the guideline's tints. */
  --basalt:     #09262d;
  --basalt-80:  rgba(9, 38, 45, 0.80);
  --basalt-60:  rgba(9, 38, 45, 0.60);
  --basalt-40:  rgba(9, 38, 45, 0.40);
  --basalt-10:  rgba(9, 38, 45, 0.10);
  --basalt-05:  rgba(9, 38, 45, 0.05);

  /* Fresh lime. Highlighter only. */
  --lime:       #cbff02;

  --paper:      #ffffff;
  --rule:       var(--basalt-10);

  --font: Aptos, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-em: Georgia, 'Times New Roman', serif;

  --measure: 46rem;   /* one comfortable reading column */
  --gap: 1.5rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--basalt);
  background: var(--paper);
}

h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
h1 { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem); font-weight: 700; }
h2 { font-size: 1.4rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p  { margin: 0 0 1rem; }
a  { color: var(--basalt); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--basalt);
  outline-offset: 2px;
}

/* Georgia Bold Italic — the guideline's emphasis face. */
.em, .lead-em {
  font-family: var(--font-em);
  font-weight: 700;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   The highlighter device
   Slanted lime strip, basalt text reversed out. Two per page maximum —
   the guideline is explicit that overuse loses the emphasis.
   `isolation` keeps the strip behind the text without escaping the span.
   -------------------------------------------------------------------------- */

.hl {
  position: relative;
  isolation: isolate;
  display: inline-block;
  color: var(--basalt);
  padding: 0 0.2em;
  white-space: nowrap;
}

.hl::before {
  content: '';
  position: absolute;
  inset: 0.1em -0.1em 0.08em -0.1em;
  background: var(--lime);
  transform: skewX(-12deg);
  z-index: -1;
}

/* --------------------------------------------------------------------------
   Dark band: top bar and footer
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--basalt);
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: var(--gap);
  flex-wrap: wrap;
  padding: 0.85rem 1.5rem;
}

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--paper);
  flex-shrink: 0;
}

.lockup-mark { font-weight: 700; letter-spacing: -0.01em; }
.lockup-bar  { width: 1px; height: 1.1em; background: rgba(255,255,255,0.35); }
.lockup-name { font-weight: 400; opacity: 0.85; }

/* The brand block: holding lockup naming the owning function, operating brands
   beneath it. Two lines rather than one row of four names, so the hierarchy reads
   correctly — TalentCorp owns, the affiliates sit under it — and so the bar does not
   run out of room next to the nav on a laptop. Signed-in pages only; see render.mjs. */
.brand { display: flex; flex-direction: column; gap: 0.15rem; flex-shrink: 0; }

.affiliates {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* Quiet enough to stay subordinate to the lockup, still over 4.5:1 on basalt. */
  color: rgba(255, 255, 255, 0.62);
}

.affiliates li + li::before {
  content: '·';
  margin: 0 0.45rem;
  color: rgba(255, 255, 255, 0.32);
}

/* On a narrow screen the affiliate line is the first thing worth dropping: the
   lockup still says whose site this is. */
@media (max-width: 30rem) {
  .affiliates { display: none; }
}

.topnav {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.topnav a {
  color: var(--paper);
  text-decoration: none;
  font-size: 0.92rem;
  opacity: 0.8;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.topnav a:hover { opacity: 1; border-bottom-color: rgba(255,255,255,0.5); }
.topnav a[aria-current='page'] { opacity: 1; border-bottom-color: var(--paper); }

/* The account menu. A <details> disclosure: keyboard-operable, no script, and the
   name and Sign out live inside it rather than taking up room in the bar. */
.who { position: relative; margin-left: 0.25rem; }

.who-badge {
  list-style: none;
  cursor: pointer;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--paper);
}

.who-badge::-webkit-details-marker { display: none; }
.who-badge::marker { content: ''; }
.who-badge:hover { border-color: var(--paper); }
.who-badge:focus-visible { outline: 3px solid var(--paper); outline-offset: 2px; }
.who[open] .who-badge { background: rgba(255, 255, 255, 0.14); }

/* Sign out is the one destructive item in the menu, so it reads differently
   without shouting. */
.who-signout { border-top: 1px solid var(--basalt-40); font-weight: 600; }

.who-panel {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 60;
  min-width: 13rem;
  background: var(--paper);
  border: 1px solid var(--basalt-40);
  border-radius: 2px;
  box-shadow: 0 10px 28px rgba(9, 38, 45, 0.22);
  padding: 0.7rem 0;
}

.who-who   { margin: 0 0.9rem 0.1rem; font-weight: 700; color: var(--basalt); }
.who-email { margin: 0 0.9rem 0.55rem; font-size: 0.8rem; color: var(--basalt-60); word-break: break-all; }

.who-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--basalt);
  background: none;
  border: 0;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  cursor: pointer;
}

.who-item:hover { background: var(--basalt-05); color: var(--basalt); }
.who-form { margin: 0; }

.inline-form { display: inline; margin: 0; }

.linkish {
  background: none;
  border: 0;
  color: var(--paper);
  opacity: 0.65;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.linkish:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   List rows
   One anchor per row, so clicking anywhere along the bar opens it. A grid and not
   a table because a <tr> cannot be a link, and wrapping each cell in its own
   anchor would announce one row as several links. Column counts are utility
   classes: the CSP forbids style attributes, so this cannot be an inline var.
   -------------------------------------------------------------------------- */

.list-rows { border-top: 1px solid var(--rule); }

.list-head,
.list-row {
  display: grid;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--rule);
}

.list-head {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--basalt-60);
}

.list-row {
  color: var(--basalt);
  text-decoration: none;
}

.list-row:hover { background: var(--basalt-05); }

/* Keyboard users get the same target, visibly. */
.list-row:focus-visible {
  outline: 2px solid var(--basalt);
  outline-offset: -2px;
  background: var(--basalt-05);
}

/* The first column carries the name of the thing, so it leads and it is the part
   that looks like a link. */
.list-title {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.cols-2 { grid-template-columns: minmax(9rem, 2fr) minmax(6rem, 1fr); }
.cols-3 { grid-template-columns: minmax(9rem, 2fr) repeat(2, minmax(6rem, 1fr)); }
.cols-4 { grid-template-columns: minmax(9rem, 2fr) repeat(3, minmax(6rem, 1fr)); }
.cols-5 { grid-template-columns: minmax(9rem, 2fr) repeat(4, minmax(6rem, 1fr)); }
.cols-6 { grid-template-columns: minmax(9rem, 2fr) repeat(5, minmax(5rem, 1fr)); }

@media (max-width: 45rem) {
  .list-head { display: none; }
  .list-row { grid-template-columns: 1fr; gap: 0.15rem; }
  .list-row span:not(.list-title) { color: var(--basalt-60); font-size: 0.85rem; }
}

/* --------------------------------------------------------------------------
   Attaching a file, and the context block
   -------------------------------------------------------------------------- */

.attach input[type="file"] { padding: 0.45rem; }

.attach-status {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--basalt-60);
}

.attach-status.is-saved { color: var(--basalt); font-weight: 600; }
.attach-status.is-error { color: var(--danger, #9c2b2b); font-weight: 600; }

/* The context block. A read-only textarea rather than a styled div, so it can always be
   selected and copied by hand even if the button fails. */
/* Help for filling the form in, so it sits above the first field. The prompt itself is behind
   a disclosure: four thousand characters above the Date box would bury the form. */
.assist {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--basalt);
  padding: 1rem 1.1rem;
  margin-bottom: 2rem;
}

/* Sits above each shortcut, so nobody reads an arrow as a requirement. Styled exactly like
   the "required" marker beside a field label — same size, weight, case, tracking and colour —
   because it is the same kind of note about the same kind of thing. */
.optional-note {
  font-weight: 400;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--basalt-40);
  margin: 0 0 0.4rem;
}

.assist h2 { font-size: 1.02rem; margin-bottom: 0.4rem; }
.assist p { color: var(--basalt-80); margin-bottom: 0.8rem; max-width: 40rem; }
.assist .actions { margin-bottom: 0.6rem; }
.assist details { margin-top: 0.5rem; }

/* The file box lives inside the AI block, because the PDF is what comes out of it. */
.assist-attach {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}
.assist textarea { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.8rem; }

.copybox { margin-bottom: 1.5rem; }
.copybox textarea { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.82rem; }
.copy-said { font-size: 0.85rem; color: var(--basalt-60); align-self: center; }

/* --------------------------------------------------------------------------
   The Work Flow — and then what happens
   A chain read along rather than looked at. The numbered rail down the left is
   the sequence; each card is one hand the work passed through.
   -------------------------------------------------------------------------- */

.wf-chains { display: grid; gap: 22px; }

.wf-chain {
  border: 1px solid var(--rule);
  border-left: 5px solid var(--basalt-10);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(9, 38, 45, 0.04);
}
.wf-chain.is-special    { border-left-color: #7d1d14; }
.wf-chain.is-personal   { border-left-color: #b4453a; }
.wf-chain.is-commercial { border-left-color: #c08a2e; }
.wf-chain.is-business   { border-left-color: var(--basalt-40); }

.wf-chain-head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(var(--basalt-05), rgba(9, 38, 45, 0));
}
.wf-chain-head h3 { margin: 4px 0 0; font-size: 1.15rem; letter-spacing: -0.01em; }
.wf-to { font-weight: 400; color: var(--basalt-40); }
.wf-summary { margin: 4px 0 0; font-size: 0.84rem; color: var(--basalt-60); }
.wf-more { margin: 8px 0 0; font-size: 0.82rem; color: #8c2f22; }

/* The rail. A numbered marker with a line running through it, so the eye follows
   the sequence downwards without every card having to be an arrow. */
.wf-steps { list-style: none; margin: 0; padding: 6px 0 10px; }

.wf-stop {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: start;
}
.wf-marker { position: relative; display: flex; justify-content: center; padding-top: 18px; }
.wf-marker::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -8px;
  width: 2px;
  background: var(--basalt-10);
}
.wf-stop:first-child .wf-marker::before { top: 18px; }
.wf-stop:last-child .wf-marker::before { bottom: auto; height: 18px; }

.wf-num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--basalt);
  color: var(--paper);
  font-size: 0.76rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.wf-stop.is-system   .wf-num { background: #a86a2f; }
.wf-stop.is-internal .wf-num { background: #1d4d57; }
.wf-stop.is-team     .wf-num { background: #3d5b62; }
.wf-stop.is-outside  .wf-num { background: #8a3f2f; }
.wf-stop.is-role     .wf-num { background: #5d7a80; }
.wf-stop.is-client   .wf-num { background: #6f2f28; }

.wf-card { padding: 14px 20px 14px 4px; min-width: 0; }
.wf-card h4 { margin: 0; font-size: 1rem; }
.wf-where { margin: 1px 0 0; font-size: 0.8rem; color: var(--basalt-60); }
.wf-onward { margin-top: 10px; padding-top: 10px; border-top: 1px dotted var(--basalt-10); }
.wf-meta { margin: 2px 0 0; font-size: 0.78rem; color: var(--basalt-60); }

/* Where the chain chose. Never hidden: a reader not told about the branch will
   believe a picture that is tidier than the company actually is. */
.wf-branch {
  margin: 6px 0 0;
  font-size: 0.78rem;
  color: var(--basalt-60);
  font-style: italic;
}
.wf-n { font-variant-numeric: tabular-nums; color: var(--basalt-40); }

/* A hand-off nobody can account for is the most useful thing on this page, so it
   is marked rather than left blank. */
.wf-blank { margin: 0; font-size: 0.8rem; font-weight: 600; color: #8c2f22; }
.wf-end {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dotted var(--basalt-10);
  font-size: 0.8rem;
  color: var(--basalt-60);
}

/* --------------------------------------------------------------------------
   The Data Chart — left to right, start to finish
   A ribbon's thickness is how much travels and its colour is the most sensitive
   thing in it. Those two facts are the whole diagram; everything else here is
   getting out of their way.
   -------------------------------------------------------------------------- */

.sk-wrap {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(9, 38, 45, 0.05), 0 12px 32px -20px rgba(9, 38, 45, 0.35);
}

.sk-svg { display: block; width: 100%; height: auto; grid-column: 1; }

/* Sits below the toolbar, not behind it. */
.sk-head {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--basalt-40);
}

.sk-bands { pointer-events: auto; }

/* Blocks sit above the ribbons, so a thin one in a crowded column is still hoverable. */
.sk-nodes { pointer-events: auto; }

/* A hairline of paper between neighbouring ribbons. Butted together they read as one
   wide band, and the whole point of stacking them at a block edge is that each is a
   separate route you can point at. */
.sk-band {
  stroke: var(--paper);
  stroke-width: 0.75;
  opacity: 0.42;
  transition: opacity 90ms linear;
}
.sk-band:hover { opacity: 0.92; }
.sk-wrap.is-tracing .sk-band { opacity: 0.08; }
.sk-wrap.is-tracing .sk-band.is-lit {
  opacity: 0.95;
  stroke: var(--basalt);
  stroke-width: 1.5;
}
.sk-wrap.is-tracing .sk-band.is-origin {
  stroke: var(--lime);
  stroke-width: 2.5;
}
.sk-wrap.is-tracing .sk-node { opacity: 0.25; }
.sk-wrap.is-tracing .sk-node.is-lit { opacity: 1; }
.sk-wrap.is-tracing .sk-node.is-lit .sk-block {
  stroke: var(--lime);
  stroke-width: 2.5;
}

/* The same four bands as everywhere else on the site, so the colour means one thing
   whichever page you learned it on. Grey is not a fifth level — it is the absence of
   an answer, and it should look like one. */
.sk-band.is-special    { fill: #7d1d14; }
.sk-band.is-personal   { fill: #b4453a; }
.sk-band.is-commercial { fill: #c08a2e; }
.sk-band.is-business   { fill: #4a6f78; }
.sk-band.is-unknown    { fill: var(--basalt-40); opacity: 0.22; }
.sk-band.is-unknown:hover { opacity: 0.6; }

/* Work coming back to a hand that has already had it. Worth seeing: a round trip is
   usually either a review loop or the same information being handled twice. */
.sk-band.is-back { opacity: 0.3; }
.sk-band.is-back:hover { opacity: 0.85; }

.sk-block {
  fill: var(--basalt);
  stroke: var(--paper);
  stroke-width: 1;
}
.sk-node.is-system   .sk-block { fill: #a86a2f; }
.sk-node.is-internal .sk-block { fill: #1d4d57; }
.sk-node.is-team     .sk-block { fill: #3d5b62; }
.sk-node.is-outside  .sk-block { fill: #8a3f2f; }
.sk-node.is-role     .sk-block { fill: #5d7a80; }
.sk-node.is-client   .sk-block { fill: #6f2f28; }
.sk-node.is-end      .sk-block { stroke: var(--lime); stroke-width: 2; }

.sk-name {
  font-size: 13.5px;
  font-weight: 600;
  fill: var(--basalt-80);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3.5;
  stroke-linejoin: round;
  pointer-events: none;
}
.sk-n { font-weight: 400; fill: var(--basalt-40); }

.web-key .k-special    { background: #7d1d14; }
.web-key .k-commercial { background: #c08a2e; }
.web-key .k-business   { background: #4a6f78; }
.web-key .k-unknown    { background: var(--basalt-40); }

/* --------------------------------------------------------------------------
   The Data Chart — who deals with what
   Read by directors, so it is built to be read rather than operated: generous
   line length, real hierarchy, and the sensitivity of a thing carried by a
   colour band rather than by a word you have to look up.
   Cool is ours, warm is not ours, red is personal — the same language as the
   flow chart, so learning one teaches the other.
   -------------------------------------------------------------------------- */

.dk-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 0 0 2rem;
}

.dk-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(9, 38, 45, 0.04);
}
.dk-card-n { font-size: 2rem; font-weight: 600; line-height: 1.05; color: var(--basalt); }
.dk-card-l { font-size: 0.86rem; font-weight: 600; color: var(--basalt-80); }
.dk-card-s { font-size: 0.78rem; color: var(--basalt-60); }

/* The chips. One vocabulary for a kind of information, used identically in the
   dossiers, the route table and the per-kind blocks, so it is learned once. */

.dk {
  display: inline-block;
  padding: 2px 9px 3px;
  margin: 0 2px 4px 0;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.45;
  border: 1px solid transparent;
  white-space: nowrap;
}
.dk-n {
  margin-left: 6px;
  padding-left: 6px;
  border-left: 1px solid currentColor;
  font-weight: 400;
  opacity: 0.75;
}
.dk-special    { background: #7d1d14; color: #fff; }
.dk-personal   { background: #fbe9e6; color: #8c2f22; border-color: #edc4bd; }
.dk-commercial { background: #fdf1de; color: #7a4c12; border-color: #edd6ac; }
.dk-business   { background: var(--basalt-05); color: var(--basalt-80); border-color: var(--basalt-10); }
.dk-system     { background: #eef3f4; color: #1d4d57; border-color: #cfe0e3; font-weight: 500; }

/* One person, fully. The band down the left is the worst thing they handle, so a
   page of these can be skimmed for the ones that matter without reading a word. */

.dk-people { display: grid; gap: 18px; }

.dk-person {
  border: 1px solid var(--rule);
  border-left: 5px solid var(--basalt-10);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(9, 38, 45, 0.04);
}
.dk-person.is-special    { border-left-color: #7d1d14; }
.dk-person.is-personal   { border-left-color: #b4453a; }
.dk-person.is-commercial { border-left-color: #c08a2e; }
.dk-person.is-business   { border-left-color: var(--basalt-40); }

.dk-person-head {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(var(--basalt-05), rgba(9, 38, 45, 0));
}
.dk-person-head h3 { margin: 0; font-size: 1.18rem; letter-spacing: -0.01em; }
.dk-role { margin: 2px 0 0; font-size: 0.86rem; color: var(--basalt-60); }
.dk-worst { margin: 8px 0 0; font-size: 0.8rem; color: var(--basalt-80); }

.dk-person-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
}
.dk-block {
  padding: 16px 20px;
  border-top: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.dk-block h4 {
  margin: 0 0 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--basalt-60);
}
.dk-block .note { margin: 0; }
.dk-chips { margin: 10px 0 0; }

/* Somebody's own words are set apart and in the serif, so it is never in doubt
   which sentences are theirs and which are ours. */
.dk-said {
  margin: 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--basalt-10);
  font-family: var(--font-em);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--basalt-80);
}

.dk-flow { list-style: none; margin: 0; padding: 0; }
.dk-flow li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dotted var(--basalt-10);
  font-size: 0.88rem;
}
.dk-flow li:last-child { border-bottom: 0; }
.dk-who { font-weight: 600; color: var(--basalt); }
.dk-sub { font-size: 0.78rem; color: var(--basalt-60); }
.dk-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: var(--basalt-60);
}

.dk-person-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  padding: 10px 20px;
  border-top: 1px solid var(--rule);
  background: var(--basalt-05);
  font-size: 0.78rem;
  color: var(--basalt-60);
}

/* The evidence. Closed by default so the page can be skimmed; one click from
   any claim to the sentence it came from. */
.dk-evidence > summary {
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--basalt-60);
  padding: 4px 0;
}
.dk-evidence > summary:hover { color: var(--basalt); }
.dk-evidence ul { margin: 6px 0 0; padding-left: 18px; }
.dk-evidence li { font-size: 0.82rem; line-height: 1.5; margin-bottom: 6px; }
.dk-evidence q { font-family: var(--font-em); color: var(--basalt-80); }
.dk-hit {
  font-weight: 700;
  background: var(--lime);
  padding: 0 3px;
  border-radius: 2px;
  color: var(--basalt);
}

/* The route table. */
.dk-routes td { vertical-align: top; }
.dk-routes tr.is-personal td:first-child { box-shadow: inset 3px 0 0 #b4453a; }
.dk-route { min-width: 260px; }
.dk-route .dk-sub { display: block; }
.dk-arrow { display: block; color: var(--basalt-40); margin: 2px 0; }

/* One block per kind of information. */
.dk-kinds { display: grid; gap: 16px; }
.dk-kind {
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--basalt-40);
  border-radius: 12px;
  background: var(--paper);
}
.dk-kind.is-special    { border-top-color: #7d1d14; }
.dk-kind.is-personal   { border-top-color: #b4453a; }
.dk-kind.is-commercial { border-top-color: #c08a2e; }
.dk-kind header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.dk-kind h3 { margin: 0; font-size: 1.05rem; }
.dk-band {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--basalt-60);
}
.dk-why { margin: 8px 0 0; max-width: var(--measure); }
.dk-law {
  margin: 6px 0 14px;
  max-width: var(--measure);
  font-size: 0.85rem;
  color: var(--basalt-60);
}
.dk-kind h4 {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--basalt-60);
}

.dk-no { color: #8c2f22; font-weight: 600; }
.lead-sm { max-width: var(--measure); color: var(--basalt-80); }

@media (max-width: 640px) {
  .dk-block { border-right: 0; }
  .dk-card-n { font-size: 1.6rem; }
}

/* --------------------------------------------------------------------------
   The flow chart — the whole company as one web
   Obsidian's graph, with the four things it does not do: direction, volume,
   an explanation on hover, and a mark on anything carrying personal data.
   All of it works with scripting switched off; the script only adds pan and
   zoom on top of a picture that is already correct.
   -------------------------------------------------------------------------- */

.web-wrap {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(9, 38, 45, 0.045), rgba(9, 38, 45, 0) 62%),
    var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(9, 38, 45, 0.05), 0 12px 32px -20px rgba(9, 38, 45, 0.35);
}

.web-tools {
  position: absolute;
  top: 8px;
  left: 10px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(3px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}

.web-hint { margin: 0 0 0 6px; }

/* The chart and the readout sit side by side. The explanation used to follow the
   mouse, which meant it covered the very thing you had just pointed at and vanished
   the moment you tried to read it. Parked on the side it stays still, stays put
   while you compare two, and can be as long as the truth requires. */
.web-wrap[data-chart],
.sk-wrap[data-chart] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  position: relative;
}

/* Full screen. A fifteen-column diagram inside a column of a web page is a diagram
   read through a letterbox. The panel comes along — the explanation is the point of
   looking closely, so leaving it behind would be the wrong half. */
.web-wrap.is-full,
.sk-wrap.is-full {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: var(--paper);
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: 100%;
}
.web-wrap.is-full .js-pan,
.sk-wrap.is-full .js-pan {
  height: 100%;
  width: 100%;
}
.web-wrap.is-full .web-readout,
.sk-wrap.is-full .web-readout {
  height: 100%;
  overflow-y: auto;
}
.js-fullscreen[hidden] { display: none; }

/* Behaviour hooks. The js- prefix says so: these carry no appearance of their own,
   they are how the script finds the surface to drag and the group to move. */
/* Dragging a chart was selecting every label it passed over, so the page ended up
   blue and the drag ended up looking like a mistake. A chart is a surface you move,
   not a paragraph you highlight. */
.js-pan {
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.js-pan-group { will-change: transform; }
.is-dragging .js-pan { cursor: grabbing; }

.web-svg {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
  cursor: grab;
  grid-column: 1;
}

.web-readout {
  grid-column: 2;
  border-left: 1px solid var(--rule);
  background: rgba(9, 38, 45, 0.025);
  padding: 52px 18px 18px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--basalt-80);
  overflow-wrap: anywhere;
}
.web-readout-idle { margin: 0; color: var(--basalt-40); font-size: 0.82rem; }
.web-readout h4 { margin: 0 0 4px; font-size: 0.98rem; line-height: 1.3; color: var(--basalt); }
.web-readout p { margin: 0 0 6px; }
.web-readout-tag {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 8px 3px;
  border-radius: 999px;
  background: var(--basalt-05);
  border: 1px solid var(--basalt-10);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--basalt-60);
}
/* Pinned, and saying so. A panel that has stopped following the mouse without
   telling you looks like a panel that has broken. */
.web-readout-pin {
  margin: 0 0 10px;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--lime);
  color: var(--basalt);
  font-size: 0.76rem;
  font-weight: 700;
}
.web-readout-go {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--basalt);
}

/* The panel is a list of answers, so headings and items are set as such rather than
   as more paragraphs. */
.web-readout-head {
  margin: 12px 0 3px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--basalt-60);
}
.web-readout-list { margin: 0; padding-left: 16px; }
.web-readout-list li { font-size: 0.83rem; line-height: 1.45; }

/* Every connection as a button the size of a line of text. A route two pixels tall in a
   crowded block is not clickable, and telling somebody to aim better is not a fix. */
.web-readout-links { list-style: none; margin: 4px 0 0; padding: 0; }
.web-readout-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: 0.83rem;
  text-align: left;
  color: var(--basalt-80);
  cursor: pointer;
}
.web-readout-link:hover,
.web-readout-link:focus {
  background: var(--basalt-05);
  border-color: var(--basalt-10);
  outline: none;
}
.web-readout-link:focus { border-color: var(--basalt-40); }
.web-readout-dir { color: var(--basalt-40); font-weight: 700; }
.web-readout-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.web-readout-n {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  color: var(--basalt-60);
}

.web-readout-said {
  padding-left: 10px;
  border-left: 2px solid var(--basalt-10);
  font-family: var(--font-em);
  color: var(--basalt-60);
}

@media (max-width: 820px) {
  .web-wrap[data-chart],
  .sk-wrap[data-chart] { grid-template-columns: minmax(0, 1fr); }
  .web-svg, .sk-svg, .web-readout { grid-column: 1; }
  .web-readout { border-left: 0; border-top: 1px solid var(--rule); padding-top: 16px; }
}



/* The group the script moves. Panning rewrites its transform attribute, so warn
   the browser it will change and let it keep the layer on the GPU. */
.web-pan { will-change: transform; }

/* Lines are only hoverable ON the line. Filled curves would each claim the whole
   area under their arc, and the top one would swallow every hover on the map. */
/* The visible line is not the target — its invisible twin is. */
.web-links { pointer-events: none; }
.web-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 16;
  pointer-events: stroke;
  cursor: pointer;
}

.sk-band { cursor: pointer; }

/* Nodes sit above the lines, so a small dot in a busy patch is still reachable. */
.web-nodes { pointer-events: auto; }

/* The department each island is. Set behind everything, large and very pale, so it
   labels the cluster without competing with the names of the people in it. */
.web-islands { pointer-events: none; }

/* The ground of an area answers for the whole department. The name across the top does
   not — a label is for reading, and catching hovers with it only makes the thing behind
   it unreachable. Nodes are drawn after these, so a person always wins over the ground
   they are standing on. */
.web-zone { pointer-events: none; }
.web-zone-box { pointer-events: all; cursor: help; }

/* Each area has a rectangle it has to itself. Drawn faintly — it is a boundary, not a
   feature — but drawn, because "these eight belong together" is otherwise something the
   reader has to infer from proximity, and proximity is exactly what was failing. */
.web-zone-box {
  fill: rgba(9, 38, 45, 0.022);
  stroke: var(--basalt-10);
  stroke-width: 1;
}

.web-island {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  fill: var(--basalt-60);
}
.web-island-n { font-weight: 400; letter-spacing: 0; }

/* Lines --------------------------------------------------------------------
   Thin and pale by default. A hundred routes drawn boldly is wool; the eye has
   to be able to find the node before it can follow the line out of it. */

.web-link {
  fill: none;
  stroke: rgba(9, 38, 45, 0.22);
  stroke-width: 1.1;
  stroke-linecap: round;
  transition: stroke-width 90ms linear, opacity 90ms linear;
}

.web-link.is-often { stroke-width: 2; }
.web-link.is-heavy { stroke-width: 3.2; }

/* Personal information is the reason this site exists, so it is the one thing
   marked on the line itself rather than left to a hover. */
.web-link.has-personal {
  stroke: #b4453a;
  stroke-dasharray: 7 4;
}

.web-arrowhead { fill: rgba(9, 38, 45, 0.3); }

.web-link.w-0 { stroke: #1f6f5c; }
.web-link.w-1 { stroke: #8a4b2a; }
.web-link.w-2 { stroke: #3a5a8c; }
.web-link.w-3 { stroke: #7a3b62; }
.web-link.w-4 { stroke: #5a6a1f; }
.web-link.w-5 { stroke: #2a6a7a; }
.web-link.w-6 { stroke: #8a6a1f; }
.web-link.w-7 { stroke: #4a4a7a; }

/* Nodes --------------------------------------------------------------------
   Shape carries the same meaning as colour — a square is a system, a circle is
   a person or a party — so the map still reads printed in black and white, or
   to somebody who cannot separate the two greens. */

.web-node { cursor: pointer; }
.web-shape {
  fill: var(--basalt-40);
  stroke: var(--paper);
  stroke-width: 1.5;
  transition: fill 90ms linear;
}

/* Cool is us, warm is not us. A reader who learns nothing else about this map can still
   see at a glance how much of the company's information leaves the building. */
.web-node.is-person   .web-shape { fill: var(--basalt); }
.web-node.is-team     .web-shape { fill: #3d5b62; }
.web-node.is-internal .web-shape { fill: #1d4d57; }
.web-node.is-system   .web-shape { fill: #a86a2f; }
.web-node.is-outside  .web-shape { fill: #8a3f2f; }
/* A role is ours but not a person, so it sits in the family without being one of the
   circles you can put a face to. A client is firmly outside. */
.web-node.is-role     .web-shape { fill: #5d7a80; }
.web-node.is-client   .web-shape { fill: #6f2f28; }
.web-node.is-focus    .web-shape { fill: var(--basalt); stroke: var(--lime); stroke-width: 3.5; }

.web-label {
  font-size: 11px;
  font-weight: 500;
  fill: var(--basalt-80);
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 3.5;
  stroke-linejoin: round;
  pointer-events: none;
  transition: opacity 90ms linear;
}

/* Zoomed out, the quiet names are faded rather than removed. Removed would mean
   the map silently omits the person somebody came here to find; faded means the
   busy names are readable and the rest are still there when you lean in. */
.web-wrap:not(.is-near) .web-node:not(.is-major):not(.is-focus) .web-label { opacity: 0.28; }
.web-node.is-major .web-label { font-size: 12.5px; font-weight: 600; fill: var(--basalt); }

/* Following one thread ------------------------------------------------------
   Hover or keyboard-focus a node and everything it does not touch drops back.
   This is the answer to "which of these lines is hers", and it is the single
   most useful thing on the page once there are more than about thirty ends. */

.web-wrap.is-tracing .web-link,
.web-wrap.is-tracing .web-node { opacity: 0.08; }

/* The area names go back with everything else, and the ones involved come forward. An
   area whose name has faded is an area you can stop reading, which is most of the value
   of following one thread in the first place. */
.web-wrap.is-tracing .web-zone { opacity: 0.25; }
.web-wrap.is-tracing .web-zone.is-lit { opacity: 1; }
.web-wrap.is-tracing .web-zone.is-lit .web-island { fill: var(--basalt); }
.web-wrap.is-tracing .web-zone.is-lit .web-zone-box {
  stroke: var(--basalt-40);
  fill: rgba(9, 38, 45, 0.05);
}
.web-wrap.is-tracing .web-zone.is-origin .web-zone-box {
  stroke: var(--lime);
  stroke-width: 3;
}

/* Fading everything else is not enough on its own. At a glance a dimmed line and a
   lit one differ only in how grey they are, which is a judgement call the reader has
   to make about every line on the page. An outline is not a judgement call. */
.web-wrap.is-tracing .web-link.is-lit {
  opacity: 1;
  stroke-width: 3.4;
  paint-order: stroke;
}

.web-wrap.is-tracing .web-node.is-lit { opacity: 1; }
.web-wrap.is-tracing .web-node.is-lit .web-label { opacity: 1; font-weight: 700; }

/* Everything lit gets a ring; the one you actually chose gets a thicker one in the
   highlighter colour, so "this is what I clicked" and "this is what it touches" are
   two different statements rather than one vague one. */
.web-wrap.is-tracing .web-node.is-lit .web-shape {
  stroke: var(--basalt);
  stroke-width: 2.5;
}
.web-wrap.is-tracing .web-node.is-origin .web-shape {
  stroke: var(--lime);
  stroke-width: 4;
}

/* A line cannot carry a second stroke, so the chosen one is doubled: the halo is drawn
   by its own hit path, which is otherwise invisible. */
.web-wrap.is-tracing .web-hit.is-chosen {
  stroke: var(--lime);
  stroke-width: 9;
}

/* With scripting off there is no tracing class, so hovering a single line still
   has to lift it on its own. */

.web-node:hover .web-shape,
.web-node:focus .web-shape { stroke: var(--basalt); stroke-width: 2.5; }
.web-node:focus { outline: none; }
.web-node:focus .web-label { opacity: 1; }

.web-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  margin: 10px 0 0;
  font-size: 0.82rem;
  color: var(--muted);
}
.web-key b { font-weight: 600; color: var(--basalt); }
.web-key .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
}
.web-key .dot.sq { border-radius: 2px; }
.web-key .k-person { background: var(--basalt); }
.web-key .k-internal { background: #1d4d57; }
.web-key .k-system { background: #a86a2f; }
.web-key .k-team { background: #3d5b62; }
.web-key .k-outside { background: #8a3f2f; }
.web-key .k-role { background: #5d7a80; }
.web-key .k-client { background: #6f2f28; }
.web-key .k-personal { background: #b4453a; }

@media (prefers-reduced-motion: reduce) {
  .web-link, .web-node, .web-shape, .web-label { transition: none; }
}

/* --------------------------------------------------------------------------
   Following one flow through a tangle
   Hovering a line lifts it and fades the rest. Pure CSS: the strict CSP forbids
   inline handlers, and this works with scripting off entirely. It is the only
   thing that actually answers "which line is that one" on a map this dense.
   -------------------------------------------------------------------------- */

.map-svg:hover .flow-link { opacity: 0.12; }

.map-svg .flow-link:hover {
  opacity: 1;
  stroke-width: 3;
}

/* Eight colours per workflow, so where two flows cross it is two colours meeting
   rather than two identical lines. Chosen for contrast against each other and to
   stay legible on paper; the palette is deliberately muted so the map does not
   turn into a rainbow. */
.flow-link.w-0 { stroke: #1f6f5c; }
.flow-link.w-1 { stroke: #8a4b2a; }
.flow-link.w-2 { stroke: #3a5a8c; }
.flow-link.w-3 { stroke: #7a3b62; }
.flow-link.w-4 { stroke: #5a6a1f; }
.flow-link.w-5 { stroke: #2a6a7a; }
.flow-link.w-6 { stroke: #8a6a1f; }
.flow-link.w-7 { stroke: #4a4a7a; }

/* A team is an end that work moves to. Drawn as a rounded tag rather than a circle or a
   square, so it reads as neither a person nor a system at a glance. */
.flow-node.is-team .node-shape {
  fill: var(--basalt-10);
  stroke: var(--basalt-60);
  stroke-width: 1.5;
}

/* --------------------------------------------------------------------------
   The Claude learning section
   Cards for topics, rows for lessons, one lesson at a time. Nothing decorative:
   the same basalt, the same rules, the same spacing as everywhere else.
   -------------------------------------------------------------------------- */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.topic-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
  text-decoration: none;
  color: var(--basalt);
}

.topic-card:hover { border-color: var(--basalt); background: var(--basalt-05); }
.topic-card:focus-visible { outline: 2px solid var(--basalt); outline-offset: -2px; }
.topic-title { font-weight: 700; font-size: 1.02rem; }
.topic-sum { color: var(--basalt-80); font-size: 0.9rem; }
.topic-meta { color: var(--basalt-60); font-size: 0.8rem; margin-top: 0.2rem; }

/* Lessons within a topic. A grid so the number, title and description line up. */
.lesson-list { border-top: 1px solid var(--rule); margin-bottom: 1.25rem; }

.lesson-row {
  display: grid;
  grid-template-columns: 2rem minmax(9rem, 1fr) minmax(0, 1.4fr) auto;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--basalt);
}

.lesson-row:hover { background: var(--basalt-05); }
.lesson-row:focus-visible { outline: 2px solid var(--basalt); outline-offset: -2px; }
.lesson-row.is-static:hover { background: none; }
.lesson-n { color: var(--basalt-60); font-variant-numeric: tabular-nums; }
.lesson-title { font-weight: 600; }
.lesson-sum { color: var(--basalt-60); font-size: 0.88rem; }

/* One lesson. Narrow measure, because this is the only part of the site meant to be
   read rather than scanned. */
.lesson { max-width: 38rem; margin-bottom: 1.5rem; }
.lesson p { margin-bottom: 0.9rem; }
.lesson-part { margin-bottom: 1.25rem; }

.lesson-part h3 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--basalt-60);
  margin-bottom: 0.35rem;
}

/* An example is something to copy, so it reads as a block rather than as prose. */
.lesson-part.is-example p {
  border-left: 3px solid var(--basalt-10);
  padding-left: 0.9rem;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.88rem;
  white-space: pre-wrap;
}

.lesson-part.is-remember p {
  border-left: 3px solid var(--basalt);
  padding-left: 0.9rem;
  font-weight: 600;
}

.lesson-nav { flex-wrap: wrap; gap: 0.5rem; }
.done-form { margin: 1rem 0 1.5rem; }

.crumbs { font-size: 0.85rem; color: var(--basalt-60); margin-bottom: 0.5rem; }

/* What not to put in. The rule leads, because that is what somebody is checking. */
.care-list { border-top: 1px solid var(--rule); margin-bottom: 1.5rem; }

.care-row {
  display: grid;
  grid-template-columns: 6rem minmax(10rem, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.7rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--basalt);
}

.care-row:hover { background: var(--basalt-05); }
.care-row:focus-visible { outline: 2px solid var(--basalt); outline-offset: -2px; }
.care-kind { font-weight: 600; }
.care-af { color: var(--basalt-60); font-size: 0.88rem; font-style: italic; }

.care-rule {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  align-self: start;
}

.care-rule.is-never { background: var(--basalt); color: var(--paper); }
.care-rule.is-ask { background: var(--basalt-10); color: var(--basalt); }

.in-af { color: var(--basalt-80); }

.af-tag {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--basalt-60);
  margin-right: 0.3rem;
}

/* Search results. */
.results { border-top: 1px solid var(--rule); }

.result {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.8rem 0.5rem;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  color: var(--basalt);
}

.result:hover { background: var(--basalt-05); }
.result:focus-visible { outline: 2px solid var(--basalt); outline-offset: -2px; }
.result-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.result-title { font-weight: 600; }
.result-parent { color: var(--basalt-60); font-size: 0.8rem; }
.result-snip { color: var(--basalt-80); font-size: 0.9rem; }

@media (max-width: 45rem) {
  .lesson-row { grid-template-columns: 1.5rem 1fr; }
  .lesson-row .lesson-sum, .lesson-row .lesson-done { grid-column: 2; }
  .care-row { grid-template-columns: 1fr; gap: 0.2rem; }
  .care-rule { justify-self: start; }
}

/* A disclosure summary on a light background. .linkish is white, for the dark bar. */
.disclose {
  cursor: pointer;
  color: var(--basalt);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.disclose:hover { color: var(--basalt-80); }

.foot {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding: 1.5rem;
  color: var(--basalt-60);
  font-size: 0.85rem;
}

.foot p { margin: 0; }

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.shell {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem 1.5rem 2rem;
}

.shell-wide { max-width: 76rem; }

.page-head { margin-bottom: 2.5rem; }

.page-head .lead {
  font-size: 1.1rem;
  color: var(--basalt-80);
  max-width: 38rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--basalt-60);
  margin: 0 0 0.6rem;
}

/* --------------------------------------------------------------------------
   Parts
   -------------------------------------------------------------------------- */

.part { margin: 0 0 3.5rem; }

.part-head {
  border-top: 2px solid var(--basalt);
  padding-top: 0.9rem;
  margin-bottom: 1.75rem;
}

.part-number {
  font-family: var(--font-em);
  font-weight: 700;
  font-style: italic;
  color: var(--basalt-60);
  font-size: 0.95rem;
  display: block;
  margin-bottom: 0.15rem;
}

.part-intro {
  color: var(--basalt-80);
  margin: 0.6rem 0 0;
  max-width: 34rem;
}

/* --------------------------------------------------------------------------
   The spine — part two only
   Eight questions in the order they actually happen. The spine exists to
   carry that order, which is why it appears here and nowhere else.
   -------------------------------------------------------------------------- */

.spine { position: relative; padding-left: 2.25rem; }

.spine::before {
  content: '';
  position: absolute;
  left: 0.4rem;
  top: 0.55rem;
  bottom: 1.5rem;
  width: 2px;
  background: var(--basalt-10);
}

.spine > .field { position: relative; }

.spine > .field::before {
  content: '';
  position: absolute;
  left: -2.25rem;
  top: 0.5rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--basalt-40);
}

/* The `copies` marker is filled lime — the one place on the spine that is. */
.spine > .field-emphasis::before {
  background: var(--lime);
  border-color: var(--basalt);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

.field { margin-bottom: 2.25rem; }

.field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.field-label {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.3rem;
}

.req {
  font-weight: 400;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--basalt-40);
  margin-left: 0.4rem;
}

.hint {
  color: var(--basalt-60);
  font-size: 0.9rem;
  margin: 0 0 0.7rem;
  max-width: 36rem;
}

.input {
  width: 100%;
  font: inherit;
  color: var(--basalt);
  background: var(--paper);
  border: 1px solid var(--basalt-40);
  border-radius: 2px;
  padding: 0.6rem 0.7rem;
}

.input:hover { border-color: var(--basalt-60); }

.input:focus {
  outline: 3px solid var(--basalt);
  outline-offset: 1px;
  border-color: var(--basalt);
}

.input:disabled {
  background: var(--basalt-05);
  color: var(--basalt-40);
  border-style: dashed;
  cursor: not-allowed;
}

.input-date { width: auto; min-width: 12rem; }

textarea.input { resize: vertical; line-height: 1.6; display: block; }

/* Textarea sizes are utility classes, not style attributes: the CSP forbids
   inline styles. */
.ta-s { min-height: 4.5rem; }
.ta-m { min-height: 7.5rem; }
.ta-l { min-height: 13rem; }

/* The emphasised field — `copies`. Distinct without reaching for a second
   colour: a basalt keyline and a tinted ground. */
.field-emphasis {
  background: var(--basalt-05);
  border-left: 3px solid var(--basalt);
  padding: 1.25rem 1.25rem 1.4rem;
  margin-left: -1.25rem;
}

.field-emphasis .hint { color: var(--basalt-80); max-width: 40rem; }

/* Not sure toggle */
.notsure {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--basalt-60);
  flex-shrink: 0;
}

.notsure input { width: 1rem; height: 1rem; accent-color: var(--basalt); margin: 0; }
.notsure label { cursor: pointer; user-select: none; }

.radio-row { display: flex; gap: 1.25rem; flex-wrap: wrap; padding-top: 0.2rem; }
.radio-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.radio-item input { width: 1rem; height: 1rem; accent-color: var(--basalt); margin: 0; }
.radio-item label { cursor: pointer; }

.is-hidden { display: none; }

/* --------------------------------------------------------------------------
   Buttons — basalt, never lime. Lime is the highlighter and nothing else.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font: inherit;
  font-weight: 700;
  background: var(--basalt);
  color: var(--paper);
  border: 2px solid var(--basalt);
  border-radius: 2px;
  padding: 0.65rem 1.5rem;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { background: rgba(9, 38, 45, 0.88); color: var(--paper); }

.btn-ghost { background: transparent; color: var(--basalt); }
.btn-ghost:hover { background: var(--basalt-05); color: var(--basalt); }

.actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  margin-top: 2.5rem;
}

.actions .note { color: var(--basalt-60); font-size: 0.88rem; margin: 0; }

/* --------------------------------------------------------------------------
   Flashes, tags, cards
   -------------------------------------------------------------------------- */

.flash {
  border: 1px solid var(--basalt);
  border-left-width: 4px;
  padding: 0.8rem 1rem;
  margin-bottom: 1.75rem;
  background: var(--basalt-05);
}

.flash-error { border-color: var(--basalt); font-weight: 600; }

.tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--basalt-40);
  border-radius: 2px;
  color: var(--basalt-80);
}

/* NOT SURE must read as a deliberate answer, distinct from an empty one. */
.tag-notsure { border-color: var(--basalt); color: var(--basalt); border-style: solid; font-weight: 700; }
.tag-empty   { border-style: dashed; color: var(--basalt-40); }

.card {
  border: 1px solid var(--rule);
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
}

.card h3 { margin-bottom: 0.35rem; }
.card .meta { color: var(--basalt-60); font-size: 0.85rem; margin: 0; }

.stack { display: grid; gap: 0.75rem; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 40rem) { .row-2 { grid-template-columns: 1fr; } }

.ro-value { white-space: pre-wrap; margin: 0; color: var(--basalt-80); }
.field-ro { margin-bottom: 1.25rem; }
.field-ro .field-label { font-size: 0.95rem; margin-bottom: 0.1rem; }

/* --------------------------------------------------------------------------
   Admin
   -------------------------------------------------------------------------- */

.admin-bar {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.admin-bar .grow { margin-right: auto; }

.resp {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--basalt);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.resp-head { display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.25rem; }
.resp-head .meta { color: var(--basalt-60); font-size: 0.85rem; margin: 0; }
.resp-account { font-size: 0.85rem; color: var(--basalt-60); }

.qa { border-top: 1px solid var(--rule); padding: 0.9rem 0; }
.qa:last-child { border-bottom: 1px solid var(--rule); }
.qa-q { font-weight: 700; font-size: 0.9rem; margin: 0 0 0.25rem; }
.qa-a { white-space: pre-wrap; margin: 0; color: var(--basalt-80); }
.qa-key { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.75rem; color: var(--basalt-40); }

table.grid { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.grid th, table.grid td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.grid th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--basalt-60); }
.scroll-x { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Chevrons
   Three stages of one journey — never arrived, arrived and stopped, arrived and
   logged nothing — so they point into each other rather than sitting in three
   separate boxes. clip-path rather than borders or background images: one shape,
   no extra requests, and it scales with the text.
   -------------------------------------------------------------------------- */

/* Landing on the strip rather than flush against the viewport edge, so the heading
   above it is still readable when a tab is clicked. */
.chevrons,
.admin-tabs { scroll-margin-top: 1.5rem; }

.chevrons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 1.25rem;
}

.chevron {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.6rem 0.6rem 1.9rem;
  background: var(--basalt-05);
  color: var(--basalt-80);
  text-decoration: none;
  font-size: 0.86rem;
  /* Pointed right, notched left, so consecutive chevrons interlock. */
  clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0 100%, 0.9rem 50%);
}

/* The first one has nothing to interlock with, so it gets a flat left edge. */
.chevron:first-child {
  padding-left: 1.1rem;
  clip-path: polygon(0 0, calc(100% - 0.9rem) 0, 100% 50%, calc(100% - 0.9rem) 100%, 0 100%);
}

.chevron:hover { background: var(--basalt-10); }

.chevron.is-on {
  background: var(--basalt);
  color: var(--paper);
}

.chevron-label { font-weight: 600; }

.chevron-n {
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.75;
}

/* Stacked on a narrow screen, where a row of interlocking arrows would be unreadable.
   Pointing down instead of right keeps the meaning. */
@media (max-width: 40rem) {
  .chevrons { flex-direction: column; gap: 0.15rem; }
  .chevron,
  .chevron:first-child {
    padding: 0.55rem 1.1rem 0.9rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.6rem), 50% 100%, 0 calc(100% - 0.6rem));
  }
}

/* --------------------------------------------------------------------------
   Landing
   -------------------------------------------------------------------------- */

.hero { margin-bottom: 3rem; }
.hero h1 { max-width: 32rem; }
.hero .lead { font-size: 1.15rem; color: var(--basalt-80); max-width: 36rem; margin-top: 1rem; }

.why { border-left: 3px solid var(--basalt); padding: 0.2rem 0 0.2rem 1.25rem; margin: 2rem 0 2.5rem; }
.why p { margin-bottom: 0.6rem; }
.why p:last-child { margin-bottom: 0; }

.steps { list-style: none; padding: 0; margin: 0 0 2.5rem; counter-reset: step; }

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 2.5rem;
  margin-bottom: 1rem;
  color: var(--basalt-80);
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.7rem; height: 1.7rem;
  border: 2px solid var(--basalt);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 700;
  color: var(--basalt);
}

/* --------------------------------------------------------------------------
   Dashboard — the administrator's view
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 3rem;
}

.stat {
  background: var(--paper);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.stat-figure { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }

.stat-label {
  font-size: 0.78rem;
  color: var(--basalt-60);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.35;
}

/* Recent activity */
.feed { list-style: none; padding: 0; margin: 0; }

.feed-item {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.25rem 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}

.feed-item:first-child { border-top: 1px solid var(--rule); }

.feed-when {
  color: var(--basalt-40);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  padding-top: 0.1rem;
}

.feed-what { font-size: 0.95rem; }

.feed-detail {
  grid-column: 2;
  color: var(--basalt-60);
  font-size: 0.87rem;
}

@media (max-width: 34rem) {
  .feed-item { grid-template-columns: 1fr; }
  .feed-detail { grid-column: 1; }
}

/* Coverage panels */
.panel { border: 1px solid var(--rule); padding: 1rem 1.1rem 0.5rem; margin-bottom: 1.25rem; }

.panel h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--basalt-60);
  margin-bottom: 0.5rem;
}

.panel table.grid td { padding: 0.35rem 0; border-bottom: 1px solid var(--basalt-05); }
.panel table.grid tr:last-child td { border-bottom: none; }

td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; width: 3.5rem; }

@media print {
  .topbar, .topnav, .actions, .foot { display: none; }
  body { color: #000; }
}

/* --------------------------------------------------------------------------
   The gate — the only thing an anonymous visitor sees
   -------------------------------------------------------------------------- */

.gate { max-width: 34rem; padding-top: 2rem; }
.gate h1 { margin-bottom: 1rem; }
.gate .lead { font-size: 1.1rem; color: var(--basalt-80); }
.gate .actions { margin-top: 2rem; }
.gate .note { margin-top: 1.5rem; color: var(--basalt-60); font-size: 0.88rem; }

/* --------------------------------------------------------------------------
   Live character counter
   Encouragement bands set by the owner: red -> orange -> yellow -> green ->
   blue as an answer gets longer.

   NOTE ON BRAND: the CI guideline restricts this site to basalt and lime, and
   an earlier amber accent was removed as off-brand. These five hues are a
   deliberate exception, requested by the owner for the encouragement device
   only. They appear nowhere else, and never as a background or a heading.

   NOTE ON CONTRAST: each hue is a darkened variant so it clears 4.5:1 on
   white. Pure yellow (#FFD400) measures about 1.6:1 and is unreadable as
   text, so the "yellow" band uses a dark gold and carries a yellow dot.
   -------------------------------------------------------------------------- */

.counter {
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0.4rem 0 0;
  min-height: 1.2em;          /* reserve the line so nothing jumps as you type */
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--basalt-60);
  transition: color 0.15s;
}

/* The dot carries the true hue; the text carries a legible variant. */
.counter::before {
  content: '';
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}

.counter.is-plain  { color: var(--basalt-40); }
.counter.is-red    { color: #c0362c; }
.counter.is-orange { color: #b85c00; }
.counter.is-yellow { color: #8f7000; }
.counter.is-green  { color: #1e7a45; }
.counter.is-blue   { color: #1d5fb4; }

.counter.is-red::before,
.counter.is-orange::before,
.counter.is-yellow::before,
.counter.is-green::before,
.counter.is-blue::before { opacity: 1; }

/* True hues on the dot only, where contrast does not apply. */
.counter.is-red::before    { background: #e03b2f; }
.counter.is-orange::before { background: #f08000; }
.counter.is-yellow::before { background: #ffd400; }
.counter.is-green::before  { background: #23a05a; }
.counter.is-blue::before   { background: #2a7fe0; }

/* A disabled box (Not sure) shows no encouragement. */
.input:disabled + .counter { color: var(--basalt-40); }
.input:disabled + .counter::before { opacity: 0; }

/* --------------------------------------------------------------------------
   Voice notes
   -------------------------------------------------------------------------- */

.voice {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--basalt);
  padding: 1rem 1.1rem;
  background: var(--basalt-05);
}

.voice-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.voice-status { font-size: 0.85rem; color: var(--basalt-60); }
.voice-status.is-recording { color: #c0362c; font-weight: 600; }
.voice-status.is-saved     { color: #1e7a45; font-weight: 600; }
.voice-status.is-error     { color: #c0362c; }

/* A quiet pulse while recording, so it is obvious the microphone is live. */
.voice-status.is-recording::before {
  content: '';
  display: inline-block;
  width: 0.6rem; height: 0.6rem;
  border-radius: 50%;
  background: #e03b2f;
  margin-right: 0.45rem;
  animation: voicePulse 1.2s ease-in-out infinite;
}

@keyframes voicePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

@media (prefers-reduced-motion: reduce) {
  .voice-status.is-recording::before { animation: none; }
}

.voice-player { display: block; width: 100%; max-width: 22rem; margin-top: 0.9rem; }

/* --------------------------------------------------------------------------
   Administrator portal
   -------------------------------------------------------------------------- */

.admin-tabs {
  margin: 0 0 2rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.75rem;
  gap: 1.5rem;
}

.admin-tabs a {
  color: var(--basalt-60);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  opacity: 1;
  border-bottom: 2px solid transparent;
  padding-bottom: 0.35rem;
}

.admin-tabs a:hover { color: var(--basalt); }
.admin-tabs a[aria-current='page'] { color: var(--basalt); border-bottom-color: var(--basalt); }

/* State tags. Basalt only — a role or an account state is not an encouragement,
   so it does not borrow the counter's colours. */
.tag-on  { border-color: var(--basalt); color: var(--basalt); }
.tag-off { border-style: dashed; border-color: var(--basalt); color: var(--basalt); text-decoration: line-through; }

/* A failed sign-in or an administrative change should catch the eye when
   scanning, without a colour. */
tr.row-notable td { background: var(--basalt-05); font-weight: 600; }
tr.row-inactive td { opacity: 0.45; }

td.wrap { word-break: break-word; max-width: 18rem; }

/* One cell for who somebody is, instead of five columns. Thirteen columns had squeezed
   the address down to one character per line. The name leads, the address sits under it
   at full width, and the staff details run as one quiet line. */
.who-cell { min-width: 15rem; }
.who-cell .who-name { font-weight: 600; }
.who-cell .who-addr,
.who-cell .who-meta { display: block; font-size: 0.82rem; color: var(--basalt-60); }
/* Break an address at its punctuation rather than mid-word. */
.who-cell .who-addr { overflow-wrap: anywhere; }
.who-cell .who-meta { margin-top: 0.1rem; }
td.nowrap, th.nowrap { white-space: nowrap; }

.action-cell { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }

.btn-outline-sm, .btn-danger-sm {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
  cursor: pointer;
  background: transparent;
  white-space: nowrap;
}

.btn-outline-sm { border: 1px solid var(--basalt-40); color: var(--basalt); }
.btn-outline-sm:hover { border-color: var(--basalt); background: var(--basalt-05); }

/* Destructive actions are outlined and underlined rather than coloured red: the
   palette is basalt and lime, and red here would compete with the counter. */
.btn-danger-sm { border: 1px solid var(--basalt); color: var(--basalt); text-decoration: underline; }
.btn-danger-sm:hover { background: var(--basalt); color: var(--paper); }

.admin-bar .grow { margin-right: auto; }

/* --------------------------------------------------------------------------
   The maps
   Basalt only. Volume is size and weight, direction is position and arrowhead,
   and nothing depends on hue — so both maps read in greyscale and in print.
   No rotated text: labels near the top and bottom of a circle came out vertical
   and unreadable.
   -------------------------------------------------------------------------- */

.map-wrap {
  border: 1px solid var(--rule);
  background: var(--paper);
  margin-bottom: 1.25rem;
  overflow-x: auto;
  padding: 0.5rem;
}

.map-svg { display: block; width: 100%; height: auto; min-width: 38rem; }

/* --- the company sunburst --- */
.dept-wedge {
  fill: var(--basalt-05);
  stroke: var(--paper);
  stroke-width: 2;
  transition: fill 0.15s;
}
.dept-wedge.has-logged { fill: rgba(9, 38, 45, 0.22); }
.dept-wedge:hover { fill: rgba(9, 38, 45, 0.42); }

.person-dot { fill: var(--paper); stroke: var(--basalt-40); stroke-width: 1.3; }
.person-dot.has-logged { fill: var(--basalt); stroke: var(--basalt); }

.core circle { fill: var(--basalt); }
.core-total { font-family: var(--font); font-size: 34px; font-weight: 700; fill: var(--paper); }
.core-word  { font-family: var(--font); font-size: 12px; fill: var(--paper); opacity: 0.85; letter-spacing: 0.1em; text-transform: uppercase; }
.core-sub   { font-family: var(--font); font-size: 11px; fill: var(--paper); opacity: 0.6; }

.label-leader { fill: none; stroke: var(--basalt-40); stroke-width: 1; }
.label-name  { font-family: var(--font); font-size: 13px; font-weight: 700; fill: var(--basalt); }
.label-count { font-family: var(--font); font-size: 11px; fill: var(--basalt-60); }

/* --- the flow columns --- */
.col-head {
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--basalt-40);
}

.flow-link {
  fill: none;
  stroke: var(--basalt-40);
  stroke-width: 1.6;
  transition: stroke 0.15s, stroke-width 0.15s;
}
.flow-link.has-personal { stroke: var(--basalt); stroke-width: 2.4; }
.flow-link:hover { stroke: var(--basalt); stroke-width: 3.2; }

.flow-node .node-shape { fill: var(--paper); stroke: var(--basalt); stroke-width: 1.8; }
.flow-node.is-person .node-shape { fill: var(--basalt); }
.flow-node.is-system .node-shape { fill: var(--basalt); }
.flow-node.is-outside .node-shape { fill: var(--paper); stroke-dasharray: 2.5 2; }
.flow-node.is-focus .node-shape { stroke-width: 3.5; }

.node-label { font-family: var(--font); font-size: 13px; font-weight: 600; fill: var(--basalt); }
.node-sub   { font-family: var(--font); font-size: 10.5px; fill: var(--basalt-60); }

/* --- key --- */
.map-key {
  list-style: none;
  padding: 0;
  margin: 0 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  font-size: 0.85rem;
  color: var(--basalt-60);
}
.map-key li { display: flex; align-items: center; gap: 0.45rem; }

.key-line { width: 1.8rem; height: 0; border-top: 2px solid var(--basalt-40); }
.key-line.has-personal { border-top-color: var(--basalt); border-top-width: 3px; }
.key-mark { width: 0.72rem; height: 0.72rem; flex-shrink: 0; }
.key-mark.is-logged { background: var(--basalt); border-radius: 50%; }
.key-mark.is-party  { border: 1.5px dashed var(--basalt); border-radius: 50%; }
.key-mark.is-system { background: var(--basalt); border-radius: 2px; }
.key-swatch { width: 1.4rem; height: 0.8rem; flex-shrink: 0; border: 1px solid var(--paper); }
.key-swatch.is-wedge { background: var(--basalt-05); outline: 1px solid var(--basalt-10); }
.key-swatch.is-wedge-live { background: rgba(9, 38, 45, 0.22); }

/* A person on the staff list whose sign-in access is currently withdrawn: still in
   their department, visibly not active. */
.person-dot.no-access { fill: var(--paper); stroke: var(--basalt-10); stroke-width: 1; }
.key-mark.is-noaccess { border: 1px solid var(--basalt-10); border-radius: 50%; }

/* An internal system is ours; an external one is not; an unrecognised endpoint is
   neither claim. Three distinguishable fills, still basalt only. */
.flow-node.is-internal .node-shape { fill: var(--basalt); stroke: var(--basalt); }
.flow-node.is-system .node-shape { fill: var(--paper); stroke: var(--basalt); stroke-width: 2; }
.flow-node.is-outside .node-shape { fill: var(--paper); stroke: var(--basalt-40); stroke-dasharray: 2.5 2; }
.key-mark.is-external { border: 2px solid var(--basalt); border-radius: 2px; }

/* Department filter chips. Links, not buttons, so they work with scripting blocked
   and the resulting view can be bookmarked or sent to someone. */
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0 0 0.6rem; }
.chips .field-label { margin: 0 0.4rem 0 0; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--basalt-40);
  border-radius: 999px;
  color: var(--basalt);
  text-decoration: none;
  background: var(--paper);
}

.chip:hover { border-color: var(--basalt); background: var(--basalt-05); }
.chip.is-on { background: var(--basalt); border-color: var(--basalt); color: var(--paper); }
.chip.is-on .chip-n { color: var(--paper); opacity: 0.75; }
.chip.is-quiet { color: var(--basalt-40); border-color: var(--basalt-10); }
.chip-n { font-weight: 400; color: var(--basalt-60); font-variant-numeric: tabular-nums; }
.chip.is-clear { border-style: dashed; font-weight: 400; }

/* Saved flows: a named selection you can reopen, rename or drop. */
.saved { border: 1px solid var(--rule); border-left: 3px solid var(--basalt); padding: 0.9rem 1rem; margin-bottom: 1.25rem; background: var(--basalt-05); }
.saved-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.5rem; }
.saved-flow { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.3rem; border: 1px solid var(--basalt-10); border-radius: 999px; background: var(--paper); }
.saved-rename { display: inline-flex; align-items: center; gap: 0.25rem; }
.rename-input { width: 9rem; padding: 0.18rem 0.4rem; font-size: 0.8rem; }
.saved-new { margin-top: 0.6rem; }
.saved-new input:disabled { background: var(--basalt-05); color: var(--basalt-40); }

/* --------------------------------------------------------------------------
   Restored: these were lost when the map styles were replaced "wholesale" and
   the replacement truncated everything appended after them. The markup kept
   referencing classes that no longer existed, so the access slider rendered as
   a bare checkbox and the name-matching feedback had no colour at all.
   -------------------------------------------------------------------------- */

/* The access switch. A real checkbox, drawn as a slider: keyboard focus, screen
   readers and a scripting-blocked browser all keep working. */
.switch { position: relative; display: inline-block; width: 2.5rem; height: 1.35rem; vertical-align: middle; }

.switch input {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;                 /* invisible, but still the thing being clicked */
  cursor: pointer;
  z-index: 1;
}

.switch-track {
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  background: var(--paper);
  border: 1.5px solid var(--basalt-40);
  transition: background 0.15s, border-color 0.15s;
  pointer-events: none;
}

.switch-track::after {
  content: '';
  position: absolute;
  top: 0.16rem; left: 0.2rem;
  width: 0.9rem; height: 0.9rem;
  border-radius: 50%;
  background: var(--basalt-40);
  transition: transform 0.15s, background 0.15s;
}

.switch input:checked + .switch-track { background: var(--basalt); border-color: var(--basalt); }
.switch input:checked + .switch-track::after { background: var(--paper); transform: translateX(1.05rem); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--basalt); outline-offset: 2px; }
.switch input:disabled { cursor: not-allowed; }
.switch.is-fixed .switch-track { opacity: 0.45; }

@media (prefers-reduced-motion: reduce) {
  .switch-track, .switch-track::after { transition: none; }
}

/* Bulk actions over a selection. */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--basalt);
  background: var(--basalt-05);
  padding: 0.7rem 0.9rem;
  margin-bottom: 1rem;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Setting a staff detail on everyone selected. Sits in the bulk bar with the actions,
   because it is the same gesture: tick people, then say what to do. */
.bulk-country {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.bulk-country .field-label { margin: 0; font-size: 0.78rem; }
.bulk-country .input { width: 11rem; }

.bulk-count { font-size: 0.85rem; font-weight: 600; color: var(--basalt-60); }
.row-select, [data-select-all] { width: 1.1rem; height: 1.1rem; accent-color: var(--basalt); margin: 0; cursor: pointer; }

/* Live "is that a colleague?" feedback under the person fields on the work log. */
.match { font-size: 0.82rem; font-weight: 600; margin: 0.35rem 0 0; min-height: 1.2em; display: flex; align-items: center; gap: 0.4rem; }
.match::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%; flex-shrink: 0; opacity: 0; }
.match.is-found { color: #1e7a45; }
.match.is-found::before { background: #23a05a; opacity: 1; }
.match.is-missing { color: #c0362c; }
.match.is-missing::before { background: #e03b2f; opacity: 1; }

/* Role control in the People table. */
.role-control { margin-top: 0.3rem; }
.role-select { padding: 0.15rem 0.3rem; font-size: 0.78rem; width: auto; min-width: 8rem; }

/* Read-only stand-in for the access switch, shown to a view-only Admin. Deliberately
   not a faded slider: a control that looks interactive and does nothing reads as a
   fault rather than as a permission. */
.switch-static {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border: 1px dashed var(--basalt-40);
  border-radius: 2px;
  color: var(--basalt-60);
}
.switch-static.is-on { border-style: solid; border-color: var(--basalt); color: var(--basalt); }

/* --------------------------------------------------------------------------
   @mentions on the work log
   -------------------------------------------------------------------------- */

.mention { position: relative; }

.mention-list {
  position: absolute;
  z-index: 40;
  left: 0;
  right: 0;
  top: calc(100% - 1.4rem);
  margin: 0;
  padding: 0.25rem 0;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--basalt);
  border-radius: 2px;
  box-shadow: 0 12px 30px rgba(9, 38, 45, 0.2);
}

.mention-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.mention-option.is-active, .mention-option:hover { background: var(--basalt); color: var(--paper); }
.mention-kind { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.09em; opacity: 0.65; }

.mention-help { font-size: 0.8rem; color: var(--basalt-60); margin: 0.35rem 0 0; }
.mention-chips { font-size: 0.82rem; font-weight: 600; color: var(--basalt); margin: 0.3rem 0 0; min-height: 1.1em; }