@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/fonts/figtree-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Figtree";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/figtree-italic.woff2") format("woff2");
}

/* The client side of the portal is deliberately plain and institutional. Clients
   are handing over financial records, so this reads closer to a government form
   than to the marketing site: white page, ruled sections, a fixed left index of
   the documents, and no decoration competing with the task. */
:root {
  --paper: #ffffff;
  --panel: #f4f6f9;
  --ink: #16202e;
  --ink-soft: #47536580;
  --muted: #4a5666;
  --navy: #0d2f57;
  --blue: #14549b;
  --blue-soft: #eaf1f9;
  --rule: #ccd4de;
  --rule-soft: #e3e8ee;
  --done: #1c6340;
  --needed: #b3261e;
  --needed-soft: #fdf6f5;
  /* Roles that were literals repeated down the file. Named so a theme can move
     them; a hex typed in forty places cannot be themed at all. */
  --field-border: #8b97a6;
  --caution: #a36f1e;
  --caution-soft: #fdf7ec;
  /* --caution is a rule colour: it only ever draws a border, so it is free to
     stay light. Caution as *text* needs to clear 4.5:1 and cannot, which is why
     two places had typed this darker hex by hand and neither of them themed. */
  --caution-text: #8a4b12;
  --good: #24603f;
  --good-soft: #f3faf6;
  --font: "Figtree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Dark.
 *
 * The palette is redefined, not the rules — every colour in this file is a role
 * from :root, so a theme is a new set of values rather than a second stylesheet
 * to keep in step with the first.
 *
 * Two blocks saying the same thing on purpose. The media query is the default
 * when she has made no choice, and it is written so an explicit light choice
 * still wins inside it. The attribute block is the choice itself, and comes
 * second so it beats the system in both directions.
 *
 * Navy stays the accent but cannot stay the ink: #0d2f57 on a dark ground is
 * unreadable. So on dark, the blues lift and the paper drops, and the
 * relationship between them is preserved rather than the exact colours. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #10161f;
    --panel: #182231;
    --ink: #e7ecf3;
    --ink-soft: #9aa7b880;
    --muted: #9fadbf;
    --navy: #8fb6e6;
    --blue: #7fb0ea;
    --blue-soft: #1b2a3d;
    --rule: #2c3a4c;
    --rule-soft: #222e3e;
    --done: #6cc39a;
    --needed: #f19d95;
    --needed-soft: #2a1d1c;
    --field-border: #46566b;
    --caution: #d9a441;
    --caution-soft: #2a2318;
    --caution-text: #d9a441;
    --good: #6cc39a;
    --good-soft: #17241d;
  }
}

:root[data-theme="dark"] {
  --paper: #10161f;
  --panel: #182231;
  --ink: #e7ecf3;
  --ink-soft: #9aa7b880;
  --muted: #9fadbf;
  --navy: #8fb6e6;
  --blue: #7fb0ea;
  --blue-soft: #1b2a3d;
  --rule: #2c3a4c;
  --rule-soft: #222e3e;
  --done: #6cc39a;
  --needed: #f19d95;
  --needed-soft: #2a1d1c;
  --field-border: #46566b;
  --caution: #d9a441;
  --caution-soft: #2a2318;
  --caution-text: #d9a441;
  --good: #6cc39a;
  --good-soft: #17241d;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 112.5%; }
html, body { min-height: 100%; }

/* The sign-in gate sits on the site's gradient, so the page itself has to be
   transparent for the fixed backdrop to show through. html carries the dark
   base so there is no white flash before the field paints, and the signed-in
   shell paints its own paper background back over it. */
html { background: #040a13; }

body {
  min-height: 100svh;
  background: transparent;
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: 0.55; }
[hidden] { display: none !important; }

.wordmark {
  display: flex;
  align-items: center;
  min-height: 24px;
  gap: 0.22em;
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
}

.wordmark em { font-style: normal; }

.btn {
  display: inline-block;
  min-height: 48px;
  padding: 12px 26px;
  border: 1px solid var(--navy);
  border-radius: 2px;
  background: var(--navy);
  color: #ffffff;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
}

.btn:hover:not(:disabled) { background: var(--blue); border-color: var(--blue); }

.btn:focus-visible,
a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* Sign in */

.gate {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 20px;
}

/* Dark panel on the gradient. Scoped entirely to the gate so the signed-in
   shell keeps its plain-paper treatment. Colours are the marketing site's, not
   the portal's, because this screen is the seam between the two. */
.gate__card {
  width: min(100%, 440px);
  padding: 40px 38px 34px;
  border: 1px solid rgba(201, 220, 255, 0.16);
  border-top: 4px solid #d3e2ff;
  border-radius: 6px;
  background: rgba(4, 10, 19, 0.72);
  backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  color: #dde6f5;
}

.gate .wordmark { justify-content: center; margin-bottom: 30px; color: #d3e2ff; }

.gate__title {
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(201, 220, 255, 0.16);
  text-align: center;
  font-size: 1.3rem;
  font-weight: 500;
  color: #d3e2ff;
}

.gate__fields { display: grid; gap: 8px; }
.gate__label { margin-top: 10px; color: #dde6f5; font-size: 0.95rem; font-weight: 500; }

.gate__input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: 1px solid rgba(201, 220, 255, 0.34);
  border-radius: 6px;
  background: rgba(2, 5, 11, 0.5);
  color: #eef3fb;
}

.gate__input::placeholder { color: rgba(221, 230, 245, 0.5); }
.gate__input:focus { border-color: #d3e2ff; }
.gate__input[aria-invalid="true"] { border: 2px solid #ffb4a8; }

.gate__reveal {
  justify-self: start;
  min-height: 44px;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: #d3e2ff;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The gate's own submit sits on a dark panel, so it inverts: light face, dark
   label. .btn stays as-is for the signed-in shell. */
.gate__fields .btn {
  margin-top: 16px;
  border-color: #d3e2ff;
  background: #d3e2ff;
  color: #0a1526;
}

.gate__fields .btn:hover:not(:disabled) {
  border-color: #eef3fb;
  background: #eef3fb;
}

.gate__error { min-height: 3em; margin-top: 16px; color: rgba(221, 230, 245, 0.78); text-align: center; }
.gate__error[data-kind="error"] { color: #ffb4a8; }
.gate__help { margin-top: 18px; color: rgba(221, 230, 245, 0.78); font-size: 0.95rem; text-align: center; }
.gate__help a { color: #d3e2ff; }
.foot a { color: var(--blue); }

/* The shared focus ring is a dark blue tuned for paper. On the gate's dark
   panel it all but disappears, so the gate gets a light ring instead. */
.gate__card a:focus-visible,
.gate__card input:focus-visible,
.gate__card button:focus-visible {
  outline: 3px solid #eef3fb;
  outline-offset: 2px;
}

/* Required agreement shown after authentication and before client records. */

.consent { min-height: 100svh; background: var(--panel); }

.consent__wrap {
  width: min(100% - 40px, 820px);
  margin: 0 auto;
  padding: 48px 0 80px;
}

.consent__card {
  padding: 38px 42px 42px;
  border: 1px solid var(--rule);
  border-top: 4px solid var(--navy);
  background: var(--paper);
}

.consent__eyebrow {
  margin-bottom: 8px;
  color: var(--blue);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.consent__title { color: var(--navy); font-size: 1.55rem; font-weight: 500; line-height: 1.25; }
.consent__intro { max-width: 66ch; margin-top: 12px; color: var(--muted); }

.consent__statement {
  margin-top: 28px;
  padding: 24px 26px;
  border: 1px solid var(--rule);
  background: var(--panel);
}

.consent__statement p + p { margin-top: 14px; }
.consent__statement ul { margin: 16px 0 0 1.25rem; }
.consent__statement li + li { margin-top: 12px; }

.consent__form { margin-top: 26px; }
.consent__choices { display: grid; gap: 18px; }

.consent__check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  max-width: 66ch;
  color: var(--ink);
  cursor: pointer;
  font-weight: 500;
}

.consent__check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--navy); }
.consent__form .btn { margin-top: 22px; }
.consent__status { min-height: 1.5em; margin-top: 14px; color: var(--blue); }
.consent__status[data-kind="error"] { color: #9a2020; }

.legal-overview,
.permission-gate,
.legal-statement {
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.legal-overview { border-top: 3px solid var(--navy); }
.legal-overview__title,
.permission-gate__title,
.legal-statement__title { color: var(--navy); font-size: 1.12rem; font-weight: 500; }
.legal-overview__list,
.legal-statement__terms ul { margin: 16px 0 0 1.25rem; }
.legal-overview__list li + li,
.legal-statement__terms li + li { margin-top: 10px; }
.legal-overview__link { display: inline-block; min-height: 44px; margin-top: 18px; color: var(--blue); }
.legal-statement__terms + .legal-statement__terms { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--rule); }
.legal-statement__intro,
.permission-gate__copy { margin-top: 10px; color: var(--muted); }
.legal-statement__review {
  margin-top: 18px;
  padding: 12px 14px;
  border-left: 3px solid var(--caution);
  background: #fff8e8;
  color: #624817;
  font-size: 0.9rem;
}
.legal-statement__accepted,
.legal-statement__pending { margin-top: 20px; font-weight: 600; }
.legal-statement__accepted { color: var(--good); }
.legal-statement__pending { color: #8b2626; }
.legal-statement__accept { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule-soft); }
.legal-statement__accept .btn { margin-top: 18px; }
.permission-gate { border-left: 4px solid var(--caution); background: #fffaf0; }
.permission-gate__button { margin-top: 18px; }

/* Signed-in shell */

/* Once you are signed in this is a records desk, not a front door: it paints
   paper back over the gradient and the light theme applies unchanged. */
.dash { display: none; }
.dash.is-open { display: block; min-height: 100svh; background: var(--paper); }

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 32px;
  border-top: 4px solid var(--navy);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.bar__unit { margin-top: 4px; color: var(--muted); font-size: 0.95rem; }

.bar__out {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  color: var(--blue);
  cursor: pointer;
}

.bar__out:hover { background: var(--blue-soft); }

.layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  align-items: start;
  max-width: 1180px;
  margin: 0 auto;
}

/* Left index of documents, the way a grant application lists its sections. */

.sidenav {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 32px 26px 40px;
  border-right: 1px solid var(--rule);
  background: var(--panel);
}

.sidenav__org {
  margin-bottom: 22px;
  color: var(--navy);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.25;
}

.portal-views {
  display: grid;
  gap: 6px;
  margin: 0 0 24px;
}

.portal-view {
  width: 100%;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  font-size: 0.9rem;
}

.portal-view[aria-pressed="true"] {
  border-color: var(--navy);
  background: var(--navy);
  color: #ffffff;
}

.portal-view--back { margin-bottom: 8px; border: 0; padding-left: 0; background: transparent; text-decoration: underline; text-underline-offset: 3px; }

/* On desktop this is a plain always-open index. Narrow screens stack the sidebar
   above the content, where nine open rows would push the actual documents off
   screen, so there it collapses to a single toggle. */
.sidenav__summary { display: none; }
.sidenav__list { list-style: none; margin-top: 20px; border-top: 1px solid var(--rule); }

.navitem {
  display: flex;
  gap: 10px;
  padding: 13px 8px 13px 4px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.35;
  text-decoration: none;
}

.navitem:hover { background: var(--blue-soft); }
.navitem__mark { flex: 0 0 18px; color: var(--rule); font-weight: 500; }
.navitem--done .navitem__mark { color: var(--done); }
.navitem--done .navitem__text { color: var(--muted); }

.prog { margin-top: 4px; }
.prog__count { margin-bottom: 8px; color: var(--muted); font-size: 0.95rem; }
.prog__track { height: 8px; overflow: hidden; border: 1px solid var(--rule); background: var(--paper); }
.prog__fill { width: 0; height: 100%; background: var(--done); transition: width 0.5s ease; }

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

.content { padding: 36px 40px 80px; }

.content__title {
  margin-bottom: 14px;
  color: var(--navy);
  font-size: 1.45rem;
  font-weight: 500;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.head__intro { max-width: 62ch; margin-bottom: 34px; color: var(--ink); }

.group + .group { margin-top: 44px; }

.group__title {
  margin-bottom: 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--navy);
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 500;
}


.doc { padding: 24px 0; border-bottom: 1px solid var(--rule-soft); scroll-margin-top: 24px; }
.doc:target { background: var(--blue-soft); box-shadow: 0 0 0 12px var(--blue-soft); }
.doc__top { display: flex; align-items: baseline; gap: 14px; }
.doc__mark { flex: 0 0 20px; color: var(--done); font-weight: 500; }
.doc--todo .doc__mark { color: var(--rule); }
.doc__body { min-width: 0; flex: 1; }
.doc__name { margin-bottom: 6px; font-size: 1.05rem; font-weight: 500; }
.doc--done .doc__name { color: var(--muted); }
.doc__what { max-width: 62ch; color: var(--ink); }
.doc__status { margin-top: 4px; color: var(--muted); font-size: 0.95rem; overflow-wrap: anywhere; }

.find { max-width: 62ch; margin-top: 14px; }

.find > summary {
  display: inline-block;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.find__body {
  margin-top: 12px;
  padding: 16px 18px;
  border-left: 3px solid var(--blue);
  background: var(--blue-soft);
  color: var(--ink);
}

.find__body p + p { margin-top: 10px; }

.doc__upload {
  display: grid;
  gap: 12px;
  max-width: 62ch;
  margin-top: 20px;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  background: var(--panel);
}

.doc__file-label { color: var(--ink); font-size: 0.95rem; font-weight: 500; }
.doc__file { display: block; width: 100%; margin-top: 8px; color: var(--ink); }
.doc__send { justify-self: start; }
.doc__upload-status { min-height: 1.5em; color: var(--blue); font-size: 0.95rem; }

.secure-download {
  min-height: 44px;
  padding: 8px 0;
  margin-top: 10px;
  border: 0;
  background: none;
  color: var(--blue);
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* View sits next to Download. The separator is decorative, so it is drawn
   rather than typed, and nothing reads it out. */
.doc-links {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

/* Upload progress. Hidden until a file is actually moving, so a small document
   that finishes instantly never flashes a bar at anyone. */
.upmeter {
  height: 6px;
  margin-top: 12px;
  border-radius: 3px;
  background: var(--rule-soft);
  overflow: hidden;
}

.upmeter__fill {
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 120ms linear;
}

.upmeter__pct {
  display: inline-block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .upmeter__fill { transition: none; }
}

/* Replacing a wrong file: available, but folded away so it does not compete
   with the documents still outstanding. */
.redo { margin-top: 14px; }

.redo__summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blue);
  cursor: pointer;
  font-size: 0.95rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.redo__body {
  margin-top: 8px;
  padding-left: 14px;
  border-left: 2px solid var(--rule-soft);
}

.redo__what {
  max-width: 62ch;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.doc-links .secure-download + .secure-download { position: relative; }

.doc-links .secure-download + .secure-download::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 1px;
  height: 1em;
  transform: translateY(-50%);
  background: var(--rule);
}

@media (forced-colors: active) {
  .doc-links .secure-download + .secure-download::before { background: CanvasText; }
}

/* Admin overview keeps its simple stacked shape in the same light treatment. */

.admin-client { padding: 26px 0; border-top: 1px solid var(--rule); }
.admin-client + .admin-client { margin-top: 30px; }
.admin-client__name { color: var(--navy); font-size: 1.25rem; font-weight: 500; }
.admin-client__progress { margin: 6px 0 18px; color: var(--muted); }
.admin-client__open { min-height: 44px; margin: 0 0 18px; padding: 8px 0; border: 0; background: transparent; color: var(--blue); cursor: pointer; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }

/* Admin-only controls for pacing one client's workspace. */

.admin-visibility {
  margin: 0 0 24px;
  border: 1px solid var(--rule);
  background: var(--panel);
}

.admin-visibility__summary {
  padding: 14px 16px;
  color: var(--blue);
  cursor: pointer;
  font-weight: 500;
}

.admin-visibility__body { padding: 4px 18px 20px; }
.admin-visibility__intro { max-width: 68ch; margin-bottom: 16px; color: var(--muted); }
.admin-visibility__shortcuts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.admin-visibility__sections { display: grid; gap: 12px; }

.admin-visibility__section {
  min-width: 0;
  padding: 12px 14px 14px;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.admin-visibility__section.is-hidden { background: var(--panel); }
.admin-visibility__section legend { padding: 0 6px; color: var(--navy); font-weight: 500; }
.admin-visibility__section-toggle,
.admin-visibility__field { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.admin-visibility__section-toggle input,
.admin-visibility__field input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--navy); }
.admin-visibility__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 18px; margin-top: 10px; }
.admin-visibility__field { color: var(--ink); font-size: 0.9rem; }
.admin-visibility__field:has(input:disabled) { color: var(--muted); cursor: default; }
.admin-visibility__fixed { margin-top: 8px; color: var(--muted); font-size: 0.9rem; }
.admin-visibility__copy { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.admin-visibility__copy label { display: grid; gap: 6px; min-width: min(100%, 280px); color: var(--ink); font-size: 0.9rem; }
.admin-visibility__save { margin-top: 22px; }
.admin-visibility__status { min-height: 1.5em; margin-top: 10px; color: var(--blue); }

/* Single-administrator relationship management. Never rendered client-side. */

.admin-relationship {
  margin: 0 0 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.admin-relationship__summary {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  color: var(--blue);
  cursor: pointer;
}

.admin-relationship__summary-title { font-weight: 500; }
.admin-relationship__summary-meta { color: var(--muted); font-size: 0.88rem; font-weight: 400; }
.admin-relationship__body { padding: 4px 18px 22px; }
.admin-relationship__privacy { max-width: 70ch; margin-bottom: 18px; color: var(--muted); font-size: 0.9rem; }
.admin-relationship__profile { display: grid; gap: 18px; }

.admin-relationship__group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--rule);
}

.admin-relationship__legend { padding: 0 6px; color: var(--navy); font-weight: 500; }
.admin-relationship__group .board-field:has(textarea) { grid-column: 1 / -1; }
.admin-relationship__status { min-height: 1.5em; color: var(--blue); }

.admin-touchpoints { margin-top: 34px; padding-top: 24px; border-top: 2px solid var(--navy); }
.admin-touchpoints__title { margin-bottom: 16px; color: var(--navy); font-size: 1.1rem; font-weight: 500; }
.admin-touchpoints__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.admin-touchpoints__form .board-field:has(textarea) { grid-column: 1 / -1; }
.admin-touchpoints__form > .btn,
.admin-touchpoints__form > .admin-relationship__status { justify-self: start; grid-column: 1 / -1; }
.admin-touchpoints__timeline { display: grid; gap: 12px; margin-top: 24px; }
.admin-touchpoint { padding: 16px; border: 1px solid var(--rule-soft); background: var(--panel); }
.admin-touchpoint__heading { color: var(--navy); font-size: 0.98rem; font-weight: 500; text-transform: capitalize; }
.admin-touchpoint__subject { margin-top: 6px; font-weight: 500; }
.admin-touchpoint__summary { margin-top: 6px; }
.admin-touchpoint__meta { margin-top: 6px; color: var(--muted); font-size: 0.9rem; }
.admin-touchpoint .board-card__remove { margin-top: 10px; }

/* Board directory */

.board-directory { display: grid; gap: 28px; }

.board-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 18px 24px;
  padding: 24px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--navy);
  background: var(--paper);
}

.board-card__title { grid-column: 1 / -1; color: var(--navy); font-size: 1.15rem; font-weight: 500; }
.board-portrait { grid-column: 1; width: 150px; aspect-ratio: 4 / 5; overflow: hidden; border: 1px solid var(--rule); background: var(--panel); }
.board-portrait__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.board-portrait__placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: var(--muted); font-size: 0.9rem; }
.board-card > .board-field { grid-column: 1; align-self: start; }
.board-card__fields { grid-column: 2; grid-row: 2 / span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.board-field { display: grid; align-content: start; gap: 6px; min-width: 0; color: var(--ink); }
.board-field__label { font-size: 0.9rem; font-weight: 500; }
.board-field__input { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--field-border); border-radius: 2px; background: var(--paper); color: var(--ink); }
.board-field__input[type="file"] { min-height: 0; padding: 0; border: 0; font-size: 0.88rem; }
.board-field__bio { min-height: 126px; resize: vertical; }
.board-field--wide { grid-column: 1 / -1; }
.board-field__unverified {
  max-width: 68ch;
  margin: 0;
  padding: 8px 11px;
  border-left: 3px solid var(--caution);
  background: var(--caution-soft);
  font-size: 0.88rem;
}
.board-check { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: 0.92rem; }
.board-check .board-field__input { flex: 0 0 auto; width: 20px; min-height: 20px; margin-top: 2px; }
.board-card__actions { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.board-card__save { min-height: 44px; padding: 9px 20px; }
.board-card__remove, .board-add { min-height: 44px; border: 0; background: transparent; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.board-card__remove { color: #8b2626; }
.board-card__status { grid-column: 2; min-height: 1.5em; color: var(--blue); font-size: 0.92rem; }
.board-directory__controls { margin-top: 24px; }
.board-add { padding: 8px 0; font-weight: 500; }

.workspace-directory { display: grid; gap: 28px; }
.workspace-review {
  margin-bottom: 28px;
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule);
  background: var(--panel);
}
.workspace-review--ready_for_review { border-left-color: var(--caution); background: #fffaf0; }
.workspace-review--approved { border-left-color: var(--good); background: var(--good-soft); }
.workspace-review--changes_requested { border-left-color: #9a2020; background: #fff5f3; }
.workspace-review__title { color: var(--navy); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.workspace-review__assignment { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; padding: 10px 12px; border: 1px solid var(--rule-soft); background: var(--paper); }
.workspace-review__assignment-state { color: var(--navy); }
.workspace-review__assignment-due { color: var(--muted); }
.workspace-review__assignment-note { flex-basis: 100%; color: var(--ink); }
.workspace-review__state { margin-top: 7px; color: var(--navy); font-size: 1.1rem; font-weight: 600; }
.workspace-review__meta,
.workspace-review__copy,
.workspace-review__hint { margin-top: 8px; color: var(--muted); }
.workspace-review__note { max-width: 68ch; margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--rule); background: var(--paper); }
.workspace-review__action { margin-top: 16px; }
.workspace-review__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.workspace-review__actions .workspace-review__action { margin-top: 0; }
.workspace-review > .board-field { max-width: 680px; margin-top: 16px; }
.workspace-review__textarea { min-height: 96px; }
.workspace-review__message { min-height: 1.5em; margin-top: 10px; color: var(--blue); }
.workspace-review__hint { font-size: 0.9rem; }
.workspace-card { padding: 24px; border: 1px solid var(--rule); border-top: 3px solid var(--navy); background: var(--paper); }
.workspace-card__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.workspace-card .board-card__actions { margin-top: 22px; }
.workspace-card .board-card__status { margin-top: 10px; }

.testimonial-media { display: grid; gap: 14px; margin-top: 18px; padding: 18px; border: 1px solid var(--rule-soft); background: var(--panel); }
.testimonial-media__preview { max-width: 520px; }
.testimonial-media__empty { display: grid; min-height: 150px; place-items: center; border: 1px dashed var(--rule); color: var(--muted); }
.testimonial-media__asset { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #000000; }
.testimonial-media__name { margin-top: 7px; color: var(--muted); font-size: 0.88rem; overflow-wrap: anywhere; }

.org-media { margin-top: 36px; }
.org-media--embedded { padding-top: 36px; border-top: 1px solid var(--rule); }
.org-media__upload { display: grid; gap: 18px; margin: 22px 0 30px; padding: 22px; border: 1px solid var(--rule); background: var(--panel); }
.org-media__upload-title { color: var(--navy); font-size: 1.05rem; font-weight: 500; }
.org-media__upload > .btn { justify-self: start; }
.org-media__gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.org-media__empty { grid-column: 1 / -1; padding: 24px; border: 1px dashed var(--rule); color: var(--muted); text-align: center; }
.org-media-card { overflow: hidden; border: 1px solid var(--rule); background: var(--paper); }
.org-media-card__preview { display: grid; min-height: 220px; place-items: center; background: var(--panel); }
.org-media-card__image { display: block; width: 100%; height: 260px; object-fit: contain; background: var(--panel); }
.org-media-card__body { padding: 18px; }
.org-media-card__title { color: var(--navy); font-size: 1.02rem; font-weight: 500; }
.org-media-card__caption { margin-top: 8px; color: var(--ink); }
.org-media-card__meta { margin-top: 6px; color: var(--muted); font-size: 0.88rem; }
.org-media-card__edit { margin-top: 14px; }
.org-media-card__edit > summary { color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.org-media-card__edit-form { display: grid; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule-soft); }
.org-media-card__edit-form .board-card__save { justify-self: start; }

.admin-board { margin: 0 0 18px; padding: 12px 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.admin-board__summary { color: var(--blue); cursor: pointer; font-weight: 500; }
.admin-board__list { margin: 12px 0 0 22px; color: var(--muted); }
.admin-board__member + .admin-board__member { margin-top: 6px; }

.admin-work {
  margin: 0 0 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.admin-work__summary {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  color: var(--blue);
  cursor: pointer;
}
.admin-work__title { font-weight: 600; }
.admin-work__counts { color: var(--muted); font-size: 0.88rem; }
.admin-work__body { padding: 2px 16px 18px; }
.admin-work__intro { max-width: 70ch; margin-bottom: 16px; color: var(--muted); font-size: 0.92rem; }
.admin-work__metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.admin-work__metric { display: grid; gap: 3px; padding: 13px 14px; border: 1px solid var(--rule-soft); border-top: 3px solid var(--rule); background: var(--panel); }
.admin-work__metric--completed { border-top-color: var(--good); }
.admin-work__metric--ready_for_review { border-top-color: var(--caution); }
.admin-work__metric--assigned_pending { border-top-color: var(--blue); }
.admin-work__metric-value { color: var(--navy); font-size: 1.4rem; }
.admin-work__metric-label { color: var(--muted); font-size: 0.84rem; }
.admin-work__group { margin-top: 10px; border: 1px solid var(--rule-soft); }
.admin-work__group-summary { padding: 12px 14px; color: var(--blue); cursor: pointer; font-weight: 600; }
.admin-work__group--ready_for_review { border-left: 4px solid var(--caution); }
.admin-work__group--assigned_pending { border-left: 4px solid var(--blue); }
.admin-work__group--completed { border-left: 4px solid var(--good); }
.admin-work__empty { padding: 0 14px 14px; color: var(--muted); }
.admin-work__list { display: grid; gap: 0; margin: 0; padding: 0 14px 14px; list-style: none; }
.admin-work__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 18px; align-items: start; padding: 13px 0; border-top: 1px solid var(--rule-soft); }
.admin-work__item.is-overdue { margin-inline: -10px; padding-inline: 10px; border-left: 3px solid #9b2f24; background: #fff5f3; }
.admin-work__item-heading { display: grid; gap: 3px; }
.admin-work__item-title { color: var(--navy); }
.admin-work__item-detail,
.admin-work__item-due { color: var(--muted); font-size: 0.88rem; }
.admin-work__item-note { max-width: 68ch; margin-top: 4px; font-size: 0.9rem; }
.admin-work__open { min-height: 42px; padding: 7px 0; border: 0; background: transparent; color: var(--blue); cursor: pointer; font: inherit; font-size: 0.88rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.admin-work__assignment { grid-column: 1 / -1; }
.admin-work__assignment-summary { color: var(--blue); cursor: pointer; font-size: 0.9rem; }
.admin-work__assignment-form { display: grid; grid-template-columns: minmax(180px, 0.4fr) minmax(0, 1fr); gap: 12px 16px; margin-top: 12px; padding: 14px; background: var(--panel); }
.admin-work__assignment-form .board-field:has(textarea) { grid-column: 2; grid-row: 1 / span 3; }
.admin-work__assignment-save,
.admin-work__assignment-form .board-card__remove,
.admin-work__assignment-status { justify-self: start; grid-column: 1; }
.admin-work__assignment-status { min-height: 1.5em; color: var(--blue); font-size: 0.9rem; }

.admin-intake {
  margin: 0 0 30px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.admin-intake__summary { padding: 14px 16px; color: var(--blue); cursor: pointer; font-weight: 600; }
.admin-intake__body { padding: 2px 16px 20px; }
.admin-intake__intro { max-width: 70ch; margin-bottom: 18px; color: var(--muted); font-size: 0.92rem; }
.admin-intake__form { display: grid; gap: 14px; max-width: 62ch; }
.admin-intake__hint { max-width: 62ch; margin-top: -4px; color: var(--muted); font-size: 0.88rem; }
.admin-intake__form .btn { justify-self: start; }
.admin-intake__status { min-height: 1.5em; color: var(--blue); }
.admin-intake__access { display: grid; gap: 12px; max-width: 46ch; margin-top: 12px; padding: 14px; background: var(--panel); }
.admin-intake__access .btn { justify-self: start; }

.admin-setup {
  margin: 0 0 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
/* A client with steps left is the one thing on this screen worth a second
   glance, so it is the only thing given an edge. */
.admin-setup--unfinished { border-left: 4px solid var(--blue); }
.admin-setup__summary { display: grid; gap: 3px; padding: 14px 16px; color: var(--blue); cursor: pointer; }
.admin-setup__title { font-weight: 600; }
.admin-setup__count { color: var(--muted); font-size: 0.88rem; }
.admin-setup__body { padding: 2px 16px 18px; }
.admin-setup__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.admin-setup__step {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 2px 10px;
  padding: 13px 0;
  border-top: 1px solid var(--rule-soft);
}
.admin-setup__step:first-child { border-top: 0; }
.admin-setup__mark { color: var(--muted); font-size: 0.95rem; }
.admin-setup__step.is-done .admin-setup__mark { color: var(--done); }
.admin-setup__label { color: var(--navy); }
.admin-setup__detail { grid-column: 2; color: var(--muted); font-size: 0.88rem; }
.admin-setup__tag { grid-column: 2; justify-self: start; margin-top: 5px; padding: 2px 8px; background: var(--blue-soft); color: var(--navy); font-size: 0.78rem; }
.admin-setup__warning {
  grid-column: 2;
  max-width: 68ch;
  margin-top: 6px;
  padding: 9px 11px;
  border-left: 3px solid var(--caution);
  background: var(--caution-soft);
  font-size: 0.9rem;
}
.admin-setup__access,
.admin-intake__access { grid-column: 2; }
.admin-setup__handoff { margin-top: 20px; padding: 14px 16px; background: var(--panel); }
.admin-setup__reminders { margin: 0 0 0 20px; color: var(--ink); font-size: 0.92rem; }
.admin-setup__reminders li + li { margin-top: 4px; }

.foot {
  max-width: 62ch;
  margin-top: 56px;
  padding: 18px 20px;
  border-left: 3px solid var(--rule);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidenav { position: static; border-right: 0; border-bottom: 1px solid var(--rule); }
  .sidenav { max-height: none; overflow-y: visible; }
  .content { padding: 30px 24px 64px; }
  .bar { padding: 16px 24px; }

  .sidenav__summary {
    display: block;
    margin-top: 18px;
    padding: 12px 0;
    border-top: 1px solid var(--rule);
    color: var(--blue);
    font-weight: 500;
    cursor: pointer;
  }

  .sidenav__list { margin-top: 0; border-top: 0; }
}

@media (max-width: 560px) {
  .gate__card { padding: 30px 22px 26px; }
  .consent__wrap { width: min(100% - 24px, 820px); padding: 24px 0 48px; }
  .consent__card { padding: 28px 22px 32px; }
  .consent__statement { padding: 20px; }
  .sidenav { padding: 26px 20px 30px; }
  .content { padding: 26px 20px 56px; }
  .bar { flex-wrap: wrap; padding: 14px 20px; }
  .admin-visibility__fields { grid-template-columns: minmax(0, 1fr); }
  .admin-relationship__group,
  .admin-touchpoints__form { grid-template-columns: minmax(0, 1fr); }
  .admin-relationship__group .board-field:has(textarea),
  .admin-touchpoints__form .board-field:has(textarea),
  .admin-touchpoints__form > .btn,
  .admin-touchpoints__form > .admin-relationship__status { grid-column: 1; }
  .board-card { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .board-card__title,
  .board-portrait,
  .board-card > .board-field,
  .board-card__fields,
  .board-card__actions,
  .board-card__status { grid-column: 1; grid-row: auto; }
  .board-card__fields { grid-template-columns: minmax(0, 1fr); }
  .board-field--wide { grid-column: 1; }
  .workspace-card { padding: 20px; }
  .workspace-card__fields { grid-template-columns: minmax(0, 1fr); }
  .org-media__gallery { grid-template-columns: minmax(0, 1fr); }
  .admin-work__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-work__item { grid-template-columns: minmax(0, 1fr); }
  .admin-work__open { justify-self: start; }
  .admin-work__assignment-form { grid-template-columns: minmax(0, 1fr); }
  .admin-work__assignment-form .board-field:has(textarea),
  .admin-work__assignment-save,
  .admin-work__assignment-form .board-card__remove,
  .admin-work__assignment-status { grid-column: 1; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .prog__fill { transition: none; }
}

@media (prefers-contrast: more) {
  :root {
    --panel: #ffffff;
    --ink-soft: #2e3948;
    --muted: #2e3948;
    --blue: #003f83;
    --rule: #6d7785;
    --rule-soft: #8b95a2;
  }

  .btn,
  .bar__out,
  .gate__input,
  .doc__upload {
    border-width: 2px;
  }

  /* The gate's colours are literals, so the :root overrides above cannot reach
     them. Drop the translucency and let the panel go solid. */
  .gate__card {
    border-color: #ffffff;
    background: #02050b;
    backdrop-filter: none;
  }

  .gate__input {
    border-color: #ffffff;
    background: #02050b;
    color: #ffffff;
  }

  .gate__error,
  .gate__help {
    color: #ffffff;
  }
}

@media (forced-colors: active) {
  a,
  button,
  input,
  select,
  textarea,
  summary,
  [role="progressbar"] {
    forced-color-adjust: auto;
  }

  :focus-visible {
    outline: 3px solid Highlight !important;
    outline-offset: 3px;
  }

  .prog__fill { background: Highlight; }
  .doc__mark,
  .navitem__mark { color: CanvasText; }
}

[dir="rtl"] .sidenav {
  border-right: 0;
  border-left: 1px solid var(--rule);
}

[dir="rtl"] .find__body,
[dir="rtl"] .foot {
  border-left: 0;
  border-right: 3px solid var(--blue);
}

@media (max-width: 900px) {
  [dir="rtl"] .sidenav { border-left: 0; }
}

/* ── Sectioned checklist ─────────────────────────────────────────────────────
   The database has supported sections, optional items, a catch-all and four
   statuses since 2026-08-02; the screen showed one flat list with two states.
   These are the styles for the rest of it. */

.navsection + .navsection { margin-top: 18px; }
.navsection__title {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.navsection__list { margin: 0; padding: 0; list-style: none; }

.group__lede { max-width: 58ch; margin: 12px 0 4px; color: var(--muted); }

/* The catch-all is the answer to "I don't know what this is", so it reads as a
   welcome rather than as one more outstanding demand. */
.group--catchall .group__title { border-bottom-color: var(--rule-soft); }
.group--catchall { padding: 4px 0 8px; }

/* "only if it applies" — so a small organization is not staring at an audit
   requirement wondering whether it is holding everything up. */
.doc__optional {
  display: inline-block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  vertical-align: middle;
}

.doc__answered { margin: 8px 0 0; color: var(--muted); font-size: 0.92rem; }

.answer { margin-top: 14px; }
.answer__ask { margin: 0 0 8px; color: var(--muted); font-size: 0.92rem; }
.answer__row { display: flex; flex-wrap: wrap; gap: 10px; }

/* Quieter than "Upload securely". Answering is useful, but it is not the thing
   we are asking them to do first. */
.answer__btn {
  padding: 8px 14px;
  border: 1px solid var(--navy);
  border-radius: 2px;
  background: transparent;
  color: var(--navy);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
}
.answer__btn:hover:not(:disabled) { background: var(--blue-soft); }
.answer__btn:disabled { opacity: 0.55; cursor: default; }
.answer__status:empty { display: none; }
.answer__status { margin: 8px 0 0; color: var(--muted); font-size: 0.92rem; }

.doc__note-label {
  display: block;
  margin-top: 12px;
  color: var(--ink);
  font-size: 0.95rem;
}
.doc__note {
  display: block;
  width: 100%;
  max-width: 42ch;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  font: inherit;
  font-size: 1rem;
}
.doc__note:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }

/* A file that passed inspection but was never compared against malware
   signatures. Admin screen only — a client can neither judge nor act on it. */
.admin-request__unscanned {
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.admin-activity {
  margin-block: 0 1.5rem;
  border: 1px solid var(--rule-soft);
  border-radius: 0.75rem;
  background: var(--paper, #fff);
}

.admin-activity__summary {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
}

.admin-activity__title { font-weight: 650; }
.admin-activity__count { color: var(--muted); font-size: 0.9rem; }
.admin-activity__body { padding: 0 1.25rem 1.25rem; }
.admin-activity__intro { max-width: 70ch; margin: 0 0 1rem; color: var(--muted); }

.admin-activity__list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-soft);
}

.admin-activity__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.25rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
}

.admin-activity__heading { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; }
.admin-activity__organization,
.admin-activity__time,
.admin-activity__fields { color: var(--muted); font-size: 0.9rem; }
.admin-activity__fields { grid-column: 1 / -1; margin: 0; }



.admin-operational-warning {
  margin-bottom: 1.25rem;
  padding: 1rem 1.15rem;
  border: 1px solid #9b3d2f;
  border-radius: 0.6rem;
  background: #fff4f1;
  color: #572017;
}

.admin-operational-warning__title {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.admin-operational-warning__list {
  margin: 0;
  padding-left: 1.25rem;
}





@media (max-width: 700px) {
  .admin-activity__item { grid-template-columns: 1fr; }
  .admin-activity__fields { grid-column: 1; }


}

/* ---------------------------------------------------------------- intake
   The twenty-one pages. A stepped list rather than the workspace's section
   switcher: one subject per page, with the page number carrying progress so a
   client can see where they are without a bar that punishes an honest answer. */

.intake-nav { margin-bottom: 26px; border: 1px solid var(--rule-soft); background: var(--panel); }
.intake-nav__list { list-style: none; display: flex; flex-wrap: wrap; gap: 2px; padding: 8px; }
.intake-nav__button {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 6px;
  background: var(--paper); border: 1px solid var(--rule-soft); color: var(--muted);
  font: inherit; font-size: 0.85rem; cursor: pointer;
}
.intake-nav__button.is-started { border-color: var(--done); color: var(--done); font-weight: 500; }
.intake-nav__button:hover { border-color: var(--blue); color: var(--navy); }
.intake-nav__button.is-current { background: var(--navy); border-color: var(--navy); color: #fff; }
.intake-nav__number {
  min-width: 20px; height: 20px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 0.72rem; border-radius: 50%;
  background: var(--rule-soft); color: var(--muted);
}
.intake-nav__number.is-started { background: var(--done); color: #fff; }
.intake-nav__button.is-current .intake-nav__number { background: #fff; color: var(--navy); }

.intake-form { display: block; }
.intake-group {
  margin: 24px 0 10px; padding-bottom: 6px; color: var(--navy);
  font-size: 0.95rem; font-weight: 500; border-bottom: 2px solid var(--navy);
}
.intake-field { display: grid; grid-template-columns: 240px 1fr; gap: 14px; align-items: start; margin-bottom: 12px; }
.intake-field__label { padding-top: 9px; color: var(--ink); font-size: 0.92rem; }
.intake-field__input {
  width: 100%; padding: 9px 11px; border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 0.92rem;
}
.intake-field__input:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }

.intake-teach {
  margin-bottom: 22px; padding: 14px 16px;
  background: var(--blue-soft); border-left: 4px solid var(--blue);
}
.intake-teach__label {
  color: var(--navy); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 4px;
}
.intake-teach__body { color: var(--muted); font-size: 0.9rem; }

.intake-checks { margin: 22px 0; padding: 0; border: 1px solid var(--rule-soft); }
.intake-checks__title {
  padding: 9px 14px; width: 100%; background: var(--panel);
  color: var(--navy); font-size: 0.92rem; font-weight: 500;
}
.intake-checks__group {
  padding: 8px 14px; background: var(--blue-soft); color: var(--navy);
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.intake-checks__item {
  display: flex; gap: 11px; align-items: flex-start; padding: 9px 14px;
  border-top: 1px solid var(--rule-soft); font-size: 0.9rem; cursor: pointer;
}
.intake-checks__item:hover { background: var(--panel); }
.intake-checks__box { width: 19px; height: 19px; margin-top: 1px; flex: none; accent-color: var(--navy); }

.intake-table { margin: 22px 0; }
.intake-table__title { color: var(--navy); font-size: 1rem; font-weight: 500; margin-bottom: 10px; }
/* Wide tables scroll inside their own box; the page itself never scrolls sideways. */
.intake-table__scroll { overflow-x: auto; border: 1px solid var(--rule-soft); }
.intake-table__grid { width: 100%; border-collapse: collapse; min-width: 640px; }
.intake-table__grid th {
  padding: 8px 10px; background: var(--panel); color: var(--navy);
  font-size: 0.78rem; font-weight: 600; text-align: left; border: 1px solid var(--rule-soft);
}
.intake-table__grid td { border: 1px solid var(--rule-soft); padding: 0; }
.intake-table__input { width: 100%; padding: 8px 10px; border: 0; background: none; font: inherit; font-size: 0.86rem; }
.intake-table__input:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.intake-table__add { margin-top: 10px; }

.intake-note { margin: 12px 0; color: var(--muted); font-size: 0.85rem; }
.intake-save { margin-top: 22px; }
.intake-status { margin-top: 10px; min-height: 1.2em; color: var(--muted); font-size: 0.88rem; }
.intake-move { display: flex; justify-content: space-between; gap: 12px; margin-top: 30px; }
.intake-move__button:disabled { opacity: 0.4; cursor: default; }

@media (max-width: 720px) {
  .intake-field { grid-template-columns: 1fr; gap: 6px; }
  .intake-field__label { padding-top: 0; }
}

/* A client created without a login. The setup checklist that used to carry this
   form is gone; the rescue path it held is not. */
.admin-client__stranded {
  margin: 14px 0; padding: 14px 16px;
  background: var(--blue-soft); border-left: 4px solid var(--blue);
}
.admin-client__stranded-note { color: var(--muted); font-size: 0.9rem; margin-bottom: 10px; }

/* A minimal client list. One client opens at a time, because every panel below
   a name used to belong to whichever name you last scrolled past. */
/* margin-block, not margin-top: the clients are a peer of the sections above and
   below them, and with only a top margin the list ran flush into the "System"
   heading while BRAD above it kept its 26px. */
.admin-clients { margin-block: 26px; }
.admin-clients__title { color: var(--navy); font-size: 1.15rem; font-weight: 500; margin-bottom: 10px; }
.admin-clients__list { list-style: none; border-top: 1px solid var(--rule-soft); }
.admin-clients__item { border-bottom: 1px solid var(--rule-soft); }
.admin-clients__open {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  width: 100%; padding: 16px 14px; background: none; border: 0;
  font: inherit; text-align: left; cursor: pointer;
}
.admin-clients__open:hover { background: var(--blue-soft); }
.admin-clients__open:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.admin-clients__name { color: var(--navy); font-size: 1.05rem; font-weight: 500; }
.admin-clients__facts { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); font-size: 0.85rem; }
.admin-clients__fact.is-ready { color: var(--blue); font-weight: 500; }
.admin-clients__fact.is-warning { color: var(--caution-text); font-weight: 500; }
.admin-client__back {
  margin-bottom: 18px; padding: 7px 12px; background: none;
  border: 1px solid var(--rule); color: var(--blue); font: inherit; font-size: 0.88rem; cursor: pointer;
}
.admin-client__back:hover { background: var(--blue-soft); }

/* Giving a client a login. The email path is the one to reach for; pasting a
   user ID stays for a client whose login already exists. */
.admin-intake__access-wrap { display: grid; gap: 12px; }
.admin-intake__paste { border-top: 1px solid var(--rule-soft); padding-top: 10px; }
.admin-intake__paste > summary { color: var(--blue); font-size: 0.88rem; cursor: pointer; }
.admin-intake__paste > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Giving a client a login. The email path is the one to reach for; pasting a
   user ID stays for a client whose login already exists. */
.admin-intake__access-wrap { display: grid; gap: 12px; }
.admin-intake__paste { border-top: 1px solid var(--rule-soft); padding-top: 10px; }
.admin-intake__paste > summary { color: var(--blue); font-size: 0.88rem; cursor: pointer; }
.admin-intake__paste > summary:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Unassign, on the row rather than inside the panel for assigning. The way out
   of an assignment should not be behind the way further into one. */
.admin-work__controls { display: flex; align-items: center; gap: 10px; flex: none; }
.admin-work__unassign {
  background: none; border: 1px solid var(--rule); color: var(--muted);
  padding: 6px 11px; font: inherit; font-size: 0.82rem; cursor: pointer;
}
.admin-work__unassign:hover { border-color: var(--blue); color: var(--blue); }
.admin-work__unassign.is-armed { border-color: var(--caution-text); color: var(--caution-text); }
.admin-work__unassign:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.admin-work__unassign:disabled { opacity: 0.5; cursor: default; }

/* The sidebar is the intake: one numbered list, in order. Legal, Documents and
   Board are no longer peers of it — they are reached from the pages about them. */
.portal-view--page {
  display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: baseline;
  text-align: left; padding: 8px 10px;
}
.portal-view__number {
  color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.portal-view__label { line-height: 1.3; }
.portal-view--page[aria-pressed="true"] .portal-view__number { color: inherit; }
.intake-open-screen { margin-top: 16px; }
.intake-uploads { margin-top: 26px; display: grid; gap: 16px; }

/* Which view you are in, said plainly. Guiding a client by phone only works if
   the screen matches theirs, so the state has to be unmissable. */
.client-preview {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 22px; padding: 12px 16px;
  background: var(--panel); border: 1px solid var(--rule-soft);
}
.client-preview__state { color: var(--muted); font-size: 0.88rem; }
.client-preview.is-previewing {
  background: var(--blue-soft); border-color: var(--blue);
}
.client-preview.is-previewing .client-preview__state { color: var(--navy); font-weight: 500; }

/* An unanswered field, in red. No label and no list: the colour is the whole
   signal, and saying it three times is what makes a form feel like homework.
   Red is carried by a border and a left bar rather than by colour alone, so it
   still reads without colour vision. */
.intake-field.is-needed .intake-field__input {
  border-color: var(--needed);
  border-left-width: 4px;
  background: var(--needed-soft);
}
.intake-field.is-needed .intake-field__input:focus-visible {
  outline-color: var(--needed);
}
.intake-save:disabled { opacity: 0.45; cursor: not-allowed; }

/* A long answer under its label, with what good looks like before it and how
   long theirs is after it. */
.intake-field--stacked { grid-template-columns: 1fr; gap: 6px; }
.intake-field--stacked .intake-field__label { padding-top: 0; font-weight: 500; color: var(--navy); }
.intake-field__tip {
  color: var(--muted); font-size: 0.82rem; margin: 0 0 2px;
}
.intake-field__count {
  color: var(--muted); font-size: 0.78rem; font-variant-numeric: tabular-nums;
}

/* Submitting is the one action on the page, so it sits in the middle of it. */
.intake-save { display: block; margin: 26px auto 0; min-width: 220px; }
.intake-status { text-align: center; }

/* When it was assigned, and when it came back. */
.admin-work__item-when {
  color: var(--muted); font-size: 0.8rem; margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* A repeatable entry: its own heading, its own submit. */
.intake-entry {
  margin-bottom: 34px; padding-bottom: 26px; border-bottom: 1px solid var(--rule-soft);
}
.intake-entry__title { color: var(--navy); font-size: 1.25rem; font-weight: 500; margin-bottom: 16px; }
.intake-entry__section {
  margin: 26px 0 12px; padding-bottom: 5px; color: var(--navy);
  font-size: 1rem; font-weight: 500; border-bottom: 2px solid var(--navy);
}
.intake-add { display: block; margin: 0 auto; }

/* A group of options as a dropdown, showing only what was chosen. */
.intake-pick { margin-bottom: 18px; }
.intake-pick__label { color: var(--ink); font-size: 0.95rem; font-weight: 500; margin-bottom: 6px; }
.intake-pick__select {
  width: 100%; max-width: 420px; padding: 9px 11px;
  border: 1px solid var(--rule); background: var(--paper); font: inherit; font-size: 0.92rem;
}
.intake-pick__list { list-style: none; margin-top: 8px; display: grid; gap: 4px; }
.intake-pick__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 420px; padding: 6px 11px; background: var(--blue-soft); font-size: 0.9rem;
}
.intake-pick__remove {
  background: none; border: 0; color: var(--blue); font: inherit;
  font-size: 0.78rem; cursor: pointer; text-decoration: underline;
}

/* Room to breathe. A long form read as a wall because every row sat on the next
   one; the space between questions is what makes it feel answerable. */
.intake-field { margin-bottom: 22px; }
.intake-field--stacked { grid-template-columns: 1fr; gap: 7px; }
.intake-field--stacked .intake-field__label {
  padding-top: 0; font-weight: 500; color: var(--navy); font-size: 0.95rem;
}
.intake-entry { margin-bottom: 52px; padding-bottom: 40px; }
.intake-entry__title { margin-bottom: 26px; }
.intake-entry__section { margin: 40px 0 18px; }
.intake-pick { margin-bottom: 26px; }
.intake-checks { margin: 32px 0; }
.intake-form > .intake-checks:first-child { margin-top: 0; }
.intake-save { margin-top: 34px; }

/* Testimonials, photos, videos and links, attached to one program.
   One at a time, each with a title and a description, because a folder of
   IMG_4471.jpg tells nobody what it was. */
.program-media { margin-top: 40px; padding-top: 4px; }
.program-media__copy { color: var(--ink); margin: 0 0 20px; max-width: 58ch; }

.program-media__list { list-style: none; margin: 0 0 28px; display: grid; gap: 14px; }
.program-media__item {
  padding: 16px 18px; background: var(--blue-soft); border-left: 3px solid var(--blue);
}
.program-media__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  flex-wrap: wrap;
}
.program-media__title { color: var(--navy); font-size: 1rem; }
.program-media__kind {
  color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.program-media__description { margin: 7px 0 0; font-size: 0.95rem; }
.program-media__file { margin: 5px 0 0; color: var(--muted); font-size: 0.85rem; }
.program-media__link {
  display: inline-block; margin-top: 5px; font-size: 0.85rem; word-break: break-all;
}
.program-media__actions { display: flex; gap: 18px; margin-top: 12px; }
.program-media__action {
  background: none; border: 0; padding: 0; color: var(--blue); font: inherit;
  font-size: 0.85rem; cursor: pointer; text-decoration: underline;
}
.program-media__action:hover { color: var(--navy); }
.program-media__action:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.program-media__save { margin-top: 10px; }

.program-media__form { padding-top: 4px; }
.program-media__form .intake-field { margin-bottom: 20px; }
.program-media__file-input { font-size: 0.9rem; }
.program-media__add { display: block; margin: 4px auto 0; min-width: 200px; }
.program-media__status { text-align: center; margin-top: 12px; min-height: 1.2em; }
.program-media__viewer:empty { display: none; }
.program-media__image {
  display: block; max-width: 100%; height: auto; margin-top: 12px;
  border: 1px solid var(--rule-soft);
}
.program-media__player { display: block; width: 100%; max-width: 520px; margin-top: 12px; }

/* Taking a client's answers out of the portal. */
.client-export { display: flex; gap: 10px; flex-wrap: wrap; }
.client-export__button { font-size: 0.85rem; padding: 8px 14px; }

/* The printable copy. Hidden on screen, and on paper it is the only thing on
   the page: a sidebar and a preview bar printed alongside the answers is what
   makes an exported document look like a screenshot. */
.print-only { display: none; }

@media print {
  body > *:not(.print-only) { display: none !important; }
  .print-only { display: block; }

  .print-only, .print-only * { background: #fff !important; }
  .print-only, .print__value { color: #000 !important; }
  /* Read on screen far more often than it is printed, so the headings keep the
     brand colour and only the body text is forced to black. */
  .print__title, .print__page-title, .print__section { color: #16324f !important; }
  .print__meta, .print__field { color: #4a5563 !important; }

  .print__title { font-size: 20pt; margin-bottom: 2pt; }
  .print__meta { font-size: 9pt; margin-bottom: 18pt; }
  .print__empty { font-size: 11pt; }

  .print__page { margin-bottom: 16pt; }
  /* A heading alone at the foot of a page, with its answers overleaf, is the
     one break that reads as a mistake. */
  .print__page-title {
    font-size: 13pt; margin: 14pt 0 6pt; padding-bottom: 3pt;
    border-bottom: 1pt solid #000; break-after: avoid; break-inside: avoid;
  }
  .print__section {
    font-size: 11pt; font-weight: 600; margin: 10pt 0 4pt; break-after: avoid;
  }
  .print__list { margin: 0 0 8pt; }
  /* Not an uppercase eyebrow. Set small and quiet instead, so a long statement
     title does not arrive shouting. */
  .print__field { font-size: 8.5pt; margin-top: 7pt; break-after: avoid; }
  .print__value {
    font-size: 10.5pt; margin: 1pt 0 0; line-height: 1.45;
    /* A long answer breaks across pages; a one-line answer never should. */
    orphans: 2; widows: 2; white-space: pre-wrap;
  }

  @page { margin: 16mm; }
}
.client-export__trouble { flex-basis: 100%; color: var(--danger, #9b2c2c); font-size: 0.85rem; }

/* "Have any old photos? Upload them here!" — asked right under the box where
   the history is being written, because that is when they think of them. */
.history-photos {
  margin: -6px 0 26px; padding: 16px 18px;
  background: var(--blue-soft); border-left: 3px solid var(--blue);
}
.history-photos__copy { margin: 0 0 14px; color: var(--navy); font-size: 0.95rem; }
.history-photos__field { margin-bottom: 0; }
.history-photos__field .intake-field__label { font-size: 0.85rem; }
.history-photos__input { font-size: 0.9rem; }

.history-photos__list {
  list-style: none; margin: 0 0 16px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px;
}
.history-photos__item { display: flex; flex-direction: column; gap: 5px; }
.history-photos__frame {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 4 / 3; background: var(--paper); border: 1px solid var(--rule-soft);
  color: var(--muted); font-size: 0.8rem; overflow: hidden;
}
.history-photos__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.history-photos__name {
  margin: 0; font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere;
}
.history-photos__remove {
  align-self: start; background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--blue); font: inherit; font-size: 0.8rem; text-decoration: underline;
}
.history-photos__remove:hover { color: var(--navy); }
.history-photos__remove:disabled { color: var(--muted); cursor: default; text-decoration: none; }
.history-photos__status { margin: 10px 0 0; font-size: 0.85rem; min-height: 1.2em; }

/* The way back in when a password is gone. Quiet, under the form, because it is
   the exception and not the thing most people came to do. */
.gate__forgot {
  display: block; margin: 14px auto 0; background: none; border: 0; padding: 4px;
  /* The sign-in panel is dark. The page's blues are for the white screens
     behind it and read at 1.5:1 here, so this takes the same pale blue the rest
     of the panel uses — and full size, because it is the control somebody
     reaches for when they already cannot get in. */
  color: #d3e2ff; font: inherit; font-size: 1rem; cursor: pointer;
  text-decoration: underline;
}
.gate__forgot:hover { color: #ffffff; }
.gate__forgot:disabled {
  color: rgba(221, 230, 245, 0.6); cursor: default; text-decoration: none;
}

/* Christina's own note on a client's file. Never rendered for a client, and
   marked out so it is never mistaken for something they wrote. */
.media-note {
  margin-top: 12px; padding: 12px 14px;
  background: var(--paper); border: 1px dashed var(--blue);
}
.media-note__field { margin-bottom: 8px; }
.media-note__field .intake-field__label { font-size: 0.85rem; color: var(--navy); }
.media-note__status { margin: 8px 0 0; font-size: 0.82rem; color: var(--muted); min-height: 1.1em; }
.media-note__use { border: 0; padding: 0; margin: 0 0 12px; }
.media-note__use-title { padding: 0; margin-bottom: 6px; color: var(--navy); font-size: 0.85rem; font-weight: 500; }
.media-note__choice { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 0.9rem; }
.media-note__radio { width: 16px; height: 16px; }

/* The transcript, under the recording it belongs to. */
.transcript { margin-top: 14px; border-top: 1px solid var(--rule-soft); padding-top: 12px; }
.transcript__title { color: var(--navy); font-size: 0.95rem; font-weight: 500; margin: 0 0 8px; }
.transcript__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.transcript__run { font-size: 0.85rem; padding: 8px 16px; }
.transcript__field { margin: 0 0 10px; }
.transcript__field .intake-field__label { font-size: 0.85rem; color: var(--navy); }

/* The flame in the bottom right corner.
   
   Fixed to the viewport rather than to the form, so it stays put while a long
   page scrolls past it. It is the only fixed element in the portal, so the
   z-index is a small number rather than a fight: nothing else claims one.
   
   The four heights are steps rather than a scale, because a flame that grows
   by two pixels per field would look like a rendering bug and not like
   progress. Below 620px it stands down entirely — on a phone the corner it
   would sit in is the corner the keyboard and the Submit button share. */
.cheer {
  position: fixed; right: 24px; bottom: 24px; z-index: 20;
  width: 132px; padding: 12px 12px 10px;
  background: var(--paper); border: 1px solid var(--rule);
  box-shadow: 0 6px 22px #0d2f5722;
  text-align: center; pointer-events: none;
}
.cheer__flame { display: block; width: 34px; height: 42px; margin: 0 auto 6px; }
.cheer__body { fill: var(--rule); transition: fill 400ms ease, transform 400ms ease; transform-origin: 50% 85%; }
.cheer__eye { fill: var(--paper); }
.cheer__smile { stroke: var(--paper); }
.cheer__line { color: var(--navy); font-size: 0.86rem; font-weight: 500; line-height: 1.25; }
.cheer__count { margin-top: 2px; color: var(--muted); font-size: 0.76rem; }

.cheer[data-step="1"] .cheer__body { fill: #9db6d2; }
.cheer[data-step="2"] .cheer__body { fill: #4d81bd; }
.cheer[data-step="3"] .cheer__body { fill: var(--blue); }
.cheer[data-step="4"] .cheer__body { fill: var(--navy); transform: scale(1.08); }
.cheer[data-step="4"] { border-color: var(--blue); }

/* Only the finished flame moves, and only once the client has earned it. */
@keyframes cheer-flicker {
  0%, 100% { transform: scale(1.08) translateY(0); }
  50% { transform: scale(1.12) translateY(-2px); }
}
.cheer[data-step="4"] .cheer__body { animation: cheer-flicker 2.4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .cheer__body { transition: none; animation: none !important; }
}

@media (max-width: 620px) {
  .cheer { display: none; }
}

/* Purchased sits under the numbered intake pages and is deliberately not one of
   them: no number, and a rule above it so the eye reads it as a different kind
   of thing rather than as page twenty-three. */
.portal-view--purchased { margin-top: 14px; border-top: 2px solid var(--rule); padding-top: 12px; }

/* Logos, toolkits and flyers, under the boxes that ask about them. */
.brand-files { margin-top: 34px; border-top: 1px solid var(--rule); padding-top: 20px; }
.brand-files__upload { margin-bottom: 22px; padding: 16px; background: var(--panel); border: 1px solid var(--rule); }
.brand-files__list { display: grid; gap: 12px; }
.brand-files__row { padding: 14px 16px; border: 1px solid var(--rule); background: var(--paper); }
.brand-files__name { color: var(--navy); font-size: 0.98rem; font-weight: 500; }
.brand-files__meta { margin-top: 2px; color: var(--muted); font-size: 0.82rem; }
.brand-files__notes { margin-top: 8px; font-size: 0.9rem; }
.brand-files__actions { margin-top: 12px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

.stored-file__open {
  padding: 8px 16px; border: 1px solid var(--blue);
  background: var(--paper); color: var(--blue); cursor: pointer; font-size: 0.85rem;
}
.stored-file__open:hover { background: var(--blue-soft); }

/* The one screen that owes the client something. No progress bar, no Submit,
   and nothing on it marked in red. */
.purchased { display: grid; gap: 16px; }
.purchased__item { padding: 20px 22px; border: 1px solid var(--rule); border-left: 4px solid var(--blue); background: var(--paper); }
.purchased__title { color: var(--navy); font-size: 1.08rem; font-weight: 500; }
.purchased__date { margin-top: 2px; color: var(--muted); font-size: 0.82rem; }
.purchased__summary { margin-top: 10px; font-size: 0.94rem; }
.purchased__meta { margin-top: 8px; color: var(--muted); font-size: 0.8rem; }
.purchased__actions { margin-top: 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.purchased__deliver { margin-top: 30px; padding: 16px; background: var(--panel); border: 1px dashed var(--blue); }
.purchased__deliver-title { color: var(--navy); font-size: 0.95rem; font-weight: 500; }

/* Christina's own note about a client. Marked out so it is never mistaken for
   something the client wrote or can see. */
.admin-basics { margin-top: 24px; padding: 16px; background: var(--paper); border: 1px dashed var(--blue); }
.admin-basics__title { color: var(--navy); font-size: 1rem; font-weight: 500; }
.admin-basics__note { margin-top: 2px; color: var(--muted); font-size: 0.82rem; }
.admin-basics__form { margin-top: 14px; display: grid; gap: 12px; justify-items: start; }

.admin-wiki-open {
  margin-bottom: 18px; padding: 10px 18px;
  border: 1px solid var(--navy); background: var(--paper); color: var(--navy);
  cursor: pointer; font-size: 0.9rem;
}
.admin-wiki-open:hover { background: var(--blue-soft); }

.wiki__bar { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.wiki__entries { display: grid; gap: 18px; }
.wiki__entry { padding: 16px 18px; border: 1px solid var(--rule); background: var(--paper); }
.wiki__form { display: grid; gap: 10px; justify-items: start; }
.wiki__save { justify-self: start; }
.wiki__add { margin-top: 26px; padding: 16px; background: var(--panel); border: 1px solid var(--rule); }
.wiki__add-title { color: var(--navy); font-size: 0.95rem; font-weight: 500; }

/* A list of prospects that opens profiles.
   
   Text rather than inputs, because six text boxes across the width of the page
   clipped every one of their own contents — a funder's name should not need a
   click to read. Grid rather than a table element: the columns stay aligned
   while the whole row stays one button. */
.profiles { margin: 18px 0 24px; border: 1px solid var(--rule); background: var(--paper); }
.profiles__row {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.25fr) minmax(0, 1.7fr) minmax(0, 0.9fr) auto;
  gap: 18px; align-items: baseline;
  width: 100%; padding: 14px 18px; border: 0; border-top: 1px solid var(--rule-soft);
  background: var(--paper); color: var(--ink); font: inherit; font-size: 0.9rem;
  text-align: left; cursor: pointer;
}
.profiles__row:first-child { border-top: 0; }
.profiles__row--head {
  background: var(--panel); color: var(--navy); font-weight: 500; font-size: 0.82rem;
  letter-spacing: 0.04em; text-transform: uppercase; cursor: default;
}
.profiles__row:not(.profiles__row--head):hover { background: var(--blue-soft); }
.profiles__row:not(.profiles__row--head):focus-visible {
  outline: 3px solid var(--blue); outline-offset: -3px;
}
/* Wrapping, not clipping. The whole point of the change.
   break-word rather than anywhere: "anywhere" split "$25,000-$50,000" across
   two lines mid-number, which is harder to read than the clipping was. */
.profiles__cell { overflow-wrap: break-word; hyphens: none; line-height: 1.35; }
.profiles__cell--lead { color: var(--navy); font-weight: 500; }
.profiles__cell--empty { color: var(--ink-soft); }
.profiles__cell--go { color: var(--blue); white-space: nowrap; }

@media (max-width: 860px) {
  /* Stacked, with the funder carrying the row. Four columns in a phone's width
     is how the table got unreadable in the first place. */
  .profiles__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .profiles__row--head { display: none; }
  .profiles__cell--lead { font-size: 1rem; }
  .profiles__cell--go { margin-top: 4px; }
}

/* BRAD and the wiki sit together above the overview: neither belongs to a
   client, so neither belongs inside one. */
/* The overview is read as sections — the funder database, the clients, the
   portal's own parts — so each carries a heading rather than sharing a shelf. */
.admin-section { display: block; margin-bottom: 26px; }
.admin-section__title { color: var(--navy); font-size: 1.15rem; font-weight: 500; margin-bottom: 10px; }
.admin-section .admin-activity { margin-top: 14px; }

/* The funder list carries five columns rather than the pipeline's four-plus-go,
   so it declares its own track sizes instead of inheriting them. */
.profiles__row--brad {
  /* Funder, state dot, type, keywords, geography, website, opportunities, go.
     Opportunities takes a min-content floor rather than 0: with a 0 minimum the
     track could shrink under its own heading and .profiles__cell's break-word
     then split it, so the header read "OPPORT / UNITIES". A track that never
     goes below its longest word cannot break one. */
  grid-template-columns:
    minmax(0, 2.4fr) 18px minmax(0, 0.8fr) minmax(0, 1.15fr) minmax(0, 0.8fr)
    minmax(0, 0.9fr) minmax(min-content, 0.4fr);
  position: relative;
}
.profiles__cell--state { justify-self: center; }

/* How far along a funder is, as a dot that fills up. Empty is flagged to
   research, half is started, solid is researched. Same information the word
   carried, in the width of a character — the row spends its space on what the
   funder funds instead. Navy throughout rather than a traffic light: none of
   these states is a warning, they are just how far she has got. */
.profiles__dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--navy); box-sizing: border-box;
}
.profiles__dot--researched { background: var(--navy); }
.profiles__dot--started {
  background: linear-gradient(90deg, var(--navy) 0 50%, transparent 50% 100%);
}
.profiles__dot--flagged { border-color: var(--field-border); background: transparent; }

/* Keywords are the reason a funder is on the list, so they get room — but two
   lines of it, not eleven. */
.profiles__cell--keywords {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--muted); font-size: 0.86rem; line-height: 1.35;
}

/* Geography was the row's real height problem, not keywords. Keywords has been
   clamped for a while; a service area written as "City of Orange, CA (primary);
   Orange County, CA (secondary); ..." had nothing holding it, so one funder in
   ten ran to seven lines and the table's beat broke. Twelve consecutive rows
   measured 72, 73, 73, 73, 73, 116, 73, 72, 73, 116, 182, 51 — a three-and-a-
   half-fold swing down a list of 440. The full text is on the profile. */
.profiles__cell--geo {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Most of BRAD is a research queue, so the list opens with a way to separate
   what is finished from what has only been flagged. */
.profiles__search { margin-bottom: 12px; }
.profiles__search-input {
  width: 100%; max-width: 520px; min-height: 46px; padding: 10px 12px;
  border: 1px solid var(--field-border); border-radius: 2px; background: var(--paper); color: var(--ink);
}
.profiles__search-input:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.profiles__found { margin: 0 0 12px; color: var(--muted); font-size: 0.88rem; }
.profiles__matched { display: block; margin-top: 2px; color: var(--muted); font-size: 0.78rem; }
/* The theme toggle sits with Log out because both are about the session rather
   than the work. The mark is the same fill idea used by the research dot: a
   circle half in shadow, which reads as light-or-dark without a word. */
.bar__actions { display: flex; align-items: center; gap: 10px; }
.bar__theme {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--rule); border-radius: 2px;
  background: transparent; color: inherit; font: inherit; font-size: 0.85rem;
  cursor: pointer;
}
.bar__theme:hover { border-color: currentColor; }
.bar__theme:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.bar__theme-mark {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.5px solid currentColor; box-sizing: border-box;
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
}

.profiles__filters { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.profiles__filter {
  padding: 6px 12px; border: 1px solid var(--field-border); border-radius: 2px;
  background: var(--paper); color: var(--ink); font-size: 0.88rem; cursor: pointer;
}
.profiles__filter:hover { border-color: var(--navy); }
.profiles__filter.is-on { border-color: var(--navy); background: var(--navy); color: var(--paper); }

.funder { display: block; }
.funder__name { color: var(--navy); font-size: 1.3rem; font-weight: 500; margin-top: 14px; }
.funder__score { color: var(--muted); font-size: 0.9rem; margin-top: 2px; }
.funder__form { display: grid; gap: 14px; margin-top: 20px; }
.funder__section {
  margin: 22px 0 4px; padding-bottom: 6px; color: var(--navy);
  font-size: 0.95rem; font-weight: 500; border-bottom: 2px solid var(--navy);
}
/* Marked so it is obvious at a glance which half of the record a client could
   ever be shown. */
.funder__field--shared { border-left: 3px solid var(--blue); padding-left: 12px; }

@media (max-width: 700px) {
  .profiles__row--brad { grid-template-columns: minmax(0, 1fr); }
}

/* What a funder runs, under the funder. */
.openings { margin-top: 30px; }
.openings__item {
  margin-bottom: 18px; padding: 16px 18px;
  border: 1px solid var(--rule); border-left: 3px solid var(--navy); background: var(--paper);
}

/* ---------------------------------------------------------------------------
   Her side of the portal, softened.
   ---------------------------------------------------------------------------
   Everything here hangs off .dash--admin, which only the three screens that
   are wholly hers set: the client overview, BRAD, and the writing wiki. The
   client's intake keeps the plain institutional treatment described at the top
   of this file, and that boundary is the reason for the scoping — a visitor
   handing over financial records should still meet a form, not a product.

   What made the admin screens read as boxy was measurable rather than a matter
   of taste: twenty-odd bespoke button classes, six different corner radii
   across eighteen declarations, and six transitions in the whole stylesheet, so
   every state change snapped. This sets one radius scale, gives state changes
   somewhere to travel, and lets the existing classes inherit both instead of
   replacing them. No element is restyled beyond its shape, its edge and the way
   it moves between states; nothing here changes a colour role, a size or a
   position, so the screens stay the ones she already knows. */
.dash--admin {
  --radius-control: 8px;
  --radius-panel: 12px;
  --ease-ui: cubic-bezier(0.2, 0, 0, 1);
  --dur-ui: 150ms;
}

/* One easing for every state change on these screens. Colour and edge only:
   nothing moves position, so a pointer never has to chase a control. */
.dash--admin .btn,
.dash--admin .admin-wiki-open,
.dash--admin .admin-client__back,
.dash--admin .admin-clients__open,
.dash--admin .profiles__filter,
.dash--admin .profiles__row,
.dash--admin .admin-work__unassign,
.dash--admin .board-field__input,
.dash--admin .board-field textarea,
.dash--admin .profiles__search-input {
  transition:
    background-color var(--dur-ui) var(--ease-ui),
    border-color var(--dur-ui) var(--ease-ui),
    color var(--dur-ui) var(--ease-ui),
    box-shadow var(--dur-ui) var(--ease-ui);
}

/* Controls. The radius is the whole change to the buttons' shape; their
   colours, sizes and weights are untouched. */
.dash--admin .btn,
.dash--admin .admin-wiki-open,
.dash--admin .admin-client__back,
.dash--admin .admin-work__unassign,
.dash--admin .client-export__button,
.dash--admin .board-field__input,
.dash--admin .board-field input,
.dash--admin .board-field select,
.dash--admin .board-field textarea,
.dash--admin .profiles__search-input {
  border-radius: var(--radius-control);
}

/* The filters read as a row of choices, so they take the fully rounded form
   that shape already implies. */
.dash--admin .profiles__filter { border-radius: 999px; }

/* Panels and cards. .admin-activity already carried 0.75rem on its own; it now
   reads from the same scale as everything beside it instead of being the one
   rounded thing on a square page. */
.dash--admin .admin-activity,
.dash--admin .admin-visibility,
.dash--admin .admin-relationship,
.dash--admin .admin-work,
.dash--admin .admin-touchpoint,
.dash--admin .admin-board,
.dash--admin .openings__item,
.dash--admin .wiki__entry,
.dash--admin .wiki__add,
.dash--admin .admin-visibility__section {
  border-radius: var(--radius-panel);
}

/* A row is a target, so it gets the control radius and a ground that arrives
   rather than appears. */
.dash--admin .admin-clients__open,
.dash--admin .profiles__row:not(.profiles__row--head) {
  border-radius: var(--radius-control);
}

/* Focus keeps its own hard outline — softening a focus ring would cost more
   than it gains — but the offset follows the new radius so the ring sits
   concentric with the corner instead of cutting across it. */
.dash--admin .btn:focus-visible,
.dash--admin .admin-wiki-open:focus-visible,
.dash--admin .profiles__filter:focus-visible,
.dash--admin .admin-client__back:focus-visible {
  outline-offset: 3px;
}

/* Reduced motion takes the travel away and leaves every shape and colour
   exactly as it is. */
@media (prefers-reduced-motion: reduce) {
  .dash--admin .btn,
  .dash--admin .admin-wiki-open,
  .dash--admin .admin-client__back,
  .dash--admin .admin-clients__open,
  .dash--admin .profiles__filter,
  .dash--admin .profiles__row,
  .dash--admin .admin-work__unassign,
  .dash--admin .board-field__input,
  .dash--admin .board-field textarea,
  .dash--admin .profiles__search-input {
    transition: none;
  }
}

/* The bar sits above .layout, so it only comes along now that the marker is on
   .dash. Left square it was the one hard-cornered thing left on screen, which
   read as an oversight rather than as restraint. */
.dash--admin .bar__theme,
.dash--admin .bar__out {
  border-radius: var(--radius-control);
  transition:
    background-color var(--dur-ui) var(--ease-ui),
    border-color var(--dur-ui) var(--ease-ui),
    color var(--dur-ui) var(--ease-ui);
}

@media (prefers-reduced-motion: reduce) {
  .dash--admin .bar__theme,
  .dash--admin .bar__out { transition: none; }
}

/* Density: let a field be as tall as it needs, not as tall as its neighbour.
   The funder form is two columns, and a grid item stretches to the tallest in
   its row unless told otherwise. So "Next deadline" — seventeen characters —
   was rendering 358px tall because "Cycle" sat beside it, and the three empty
   fields were paying ~187px each for nothing at all. Short facts were costing
   4.8px per character against research prose at 0.6. align-items: start ends
   the stretching; the columns are declared here rather than left implicit so
   the intent is readable. */
.funder__form {
  /* Four tracks, not two. Prose and URLs span two of them and so keep exactly
     the width they had; a short fact spans one and four now share a row where
     two used to. Nothing is narrower than it was — the short values simply stop
     each claiming half the page to hold ten characters. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  column-gap: 18px;
}

.funder__form > .board-field { grid-column: span 2; }
.funder__form > .funder__field--compact { grid-column: span 1; }
.funder__form > .funder__section { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .funder__form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .funder__form > .board-field { grid-column: span 2; }
  .funder__form > .funder__field--compact { grid-column: span 1; }
}

/* board-field__bio carries a 126px floor. That is right for a board member's
   biography, which is typed into a fixed slot, and wrong for a funder field
   that sizes itself to what it holds: it made an empty box cost 157px to say
   nothing at all. The floor comes off only where the box grows on its own. */
.funder__form .board-field__bio,
.openings__item .board-field__bio { min-height: 0; }

/* The funder's name is the row's button, and its ::after covers the row, so a
   click anywhere still opens the profile. The website link sits above that
   layer, so following it goes to the funder's own site instead. */
.profiles__open {
  padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer;
}
.profiles__open::after { content: ""; position: absolute; inset: 0; }
.profiles__open:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
/* "Open" used to say the row was openable; with it gone the name says so, and
   underlines on hover so the affordance is not carried by the row tint alone. */
.profiles__row:hover .profiles__open { text-decoration: underline; text-underline-offset: 3px; }

.profiles__cell--site { position: relative; z-index: 1; min-width: 0; }
/* One line, cut with an ellipsis rather than wrapped. Breaking a host across
   two lines put the row-height swing straight back — the thing the geography
   clamp had just fixed — and half a domain on its own line is unreadable
   anyway. The full address stays in the title and in the href. */
.profiles__site {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--blue);
  text-overflow: ellipsis;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.profiles__site:hover { color: var(--navy); }
.profiles__site:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   A type scale for her screens.
   ---------------------------------------------------------------------------
   Measured before this: nine distinct sizes between 15.3 and 26.1px, with steps
   of 1.05, 1.04, and — between 16.2 and 15.84 — 1.02. A third of a pixel is not
   a distinction anybody can see, so those sizes cost a value to maintain and
   said nothing. Five sizes now, none closer than 1.10, which is the tightest
   step still worth having when the 16px floor for essential text pins the
   bottom of the range.

   The ranking was also upside down. On a funder profile "BRAD" set at 26.1px
   while the funder's own name set at 23.4, so the navigation outranked the
   record. The name is the largest thing on that screen now, because it is what
   the screen is about.

   Scoped to .dash--admin, like the rest of her treatment: the client's intake
   keeps the sizes it has. */
.dash--admin {
  --type-display: 1.7rem;   /* 30.6px — the subject of the screen */
  --type-title: 1.35rem;    /* 24.3px — what page you are on */
  --type-section: 1.1rem;   /* 19.8px — a group within it */
  --type-body: 1rem;        /* 18px   — the base */
  --type-meta: 0.9rem;      /* 16.2px — labels and counts, on the 16px floor */
}

.dash--admin .funder__name { font-size: var(--type-display); }
.dash--admin .content__title { font-size: var(--type-title); }

.dash--admin .admin-section__title,
.dash--admin .admin-clients__title,
.dash--admin .funder__section,
.dash--admin .admin-touchpoints__title { font-size: var(--type-section); }

/* Everything that had drifted to its own near-duplicate size. 18.9, 17.1, 15.84
   and 15.3 were each within a few tenths of a neighbour. */
.dash--admin .admin-clients__name { font-size: var(--type-body); }
.dash--admin .admin-client__back,
.dash--admin .admin-clients__facts,
.dash--admin .admin-activity__count,
.dash--admin .board-field__label,
.dash--admin .admin-wiki-open { font-size: var(--type-meta); }

/* 650 was a weight of its own for one element. Headings and labels carry 500,
   emphasis carries 600, everything else 400. */
.dash--admin .admin-activity__title { font-weight: 600; }