/* ============================================================
   Paragon Blueprint Portal — Component styles
   Status color appears only inside data elements:
   .dot, .pill, .value.graded, range bars, chart marks.
   ============================================================ */

/* ---- Skip link: off-screen until focused (keyboard users jump to #main).
   Pure CSS (:focus reveal) so no inline on* handlers are needed -> CSP-safe. ---- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--cocoa);
  color: var(--bone);
  padding: 8px 14px;
  border-radius: 0 0 8px 0;
  font-size: var(--fs-micro);
}
.skip-link:focus { left: 0; }

/* ---- Status dot ---- */
.dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
  display: inline-block;
}
.dot.optimal { background: var(--st-optimal); }
.dot.normal { background: var(--st-normal); }
.dot.borderline { background: var(--st-borderline); }
.dot.flagged { background: var(--st-flagged); }
.dot.pending { background: var(--rule-soft); }

/* ---- Status pill ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.14rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid;
  white-space: nowrap;
}
.pill.optimal { color: var(--st-optimal-pill); background: var(--st-optimal-fill); border-color: var(--st-optimal); }
.pill.normal { color: var(--st-normal-pill); background: var(--st-normal-fill); border-color: var(--st-normal); }
.pill.borderline { color: var(--st-borderline-pill); background: var(--st-borderline-fill); border-color: var(--st-borderline); }
.pill.flagged { color: var(--st-flagged-pill); background: var(--st-flagged-fill); border-color: var(--st-flagged); }
.pill.neutral { color: var(--text-mute); background: transparent; border-color: var(--rule-soft); }

/* ---- Graded value text ---- */
.value.graded.optimal { color: var(--st-optimal-text); }
.value.graded.normal { color: var(--st-normal-text); }
.value.graded.borderline { color: var(--st-borderline-text); }
.value.graded.flagged { color: var(--st-flagged-text); }

/* ---- Delta chip (trend direction; colored by clinical direction, not raw sign) ---- */
.delta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.delta.improved { color: var(--st-optimal-pill); background: var(--st-optimal-fill); }
.delta.worsened { color: var(--st-flagged-pill); background: var(--st-flagged-fill); }
.delta.steady { color: var(--text-mute); background: var(--card-deep); }

/* ---- Source tag ---- */
.source-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.06em;
  color: var(--text-mute);
  border: 1px solid var(--rule-soft);
  border-radius: 3px;
  padding: 0 0.3rem;
  white-space: nowrap;
}
/* Item-type tag: a color dot (reinforces type, never the sole cue — the
   label text carries the meaning) sitting beside the source-tag label. */
.type-tag { display: inline-flex; align-items: center; gap: 0.3rem; vertical-align: middle; }

/* ---- Stat card ---- */
.stat-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
/* Clickable filter stat-tiles (roster header): a hover wash marks them as
   interactive (vs the inert tile beside them), and a neutral cocoa inset shows
   which filter is active. aria-pressed is already set in the markup; any status
   colour stays on the numeral, never the chrome. */
button.stat-card { transition: background 0.12s ease, box-shadow 0.12s ease; }
button.stat-card:hover { background: var(--card-deep); }
.stat-card[aria-pressed="true"] { background: var(--card-deep); box-shadow: var(--shadow-card), inset 0 0 0 1.5px var(--cocoa); }
/* Overline-label standard: the mono-uppercase label idiom shares ONE tracking
   value (0.08em) across two size tiers. PRIMARY labels (.eyebrow, .stat-label,
   .panel-title, .dash-metric-label) read at --fs-small; SECONDARY enumerators /
   nested sub-labels (.goal-num, .subgroup-label) stay at the denser --fs-micro.
   Each rule keeps its own color/weight; only size + tracking are shared. Dense
   data-table headers (table.data th) keep their own 0.1em as a table convention. */
.stat-card .stat-label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dusty-ink);
}
.stat-card .stat-value { font-size: var(--fs-stat); font-weight: 300; line-height: var(--lh-tight); }
.stat-card .stat-value.big { font-size: var(--fs-stat-xl); }
/* Compact stat value: a tile whose value is text (a date, plan, or stage),
   not a glanceable numeral — drops to the small display size. */
.stat-card .stat-value.compact { font-size: var(--fs-stat-sm); }
.stat-card .stat-sub { font-size: var(--fs-small); color: var(--text-mute); }

/* Auto-fitting stat-card row (dashboard chips, roster header tiles) — wraps
   any count of tiles evenly rather than forcing a fixed column count. */
.stat-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Dashboard panels: a heading-weight title distinct from the page eyebrow
   (cocoa, bold) so section heads outrank the dusty-ink page kicker; a
   group sub-head inside a panel; and a deliberate all-clear empty state. */
.panel-title { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cocoa-soft); font-weight: 600; margin: 0; }
.group-head { margin: 10px 0 2px; }
.empty-note { margin-top: var(--sp-3); padding: var(--sp-3) 0; text-align: center; color: var(--text-mute); font-size: var(--fs-small); }
.row-name { min-width: 140px; }

/* Dashboard metric tiles: a clear number over a label + caption. Self-
   contained (not .stat-link, whose display:block would cancel the flex). */
.dash-metric { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 90px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--sp-4) var(--sp-5); color: inherit; text-decoration: none; }
.dash-metric:hover { background: var(--card-deep); text-decoration: none; }
.dash-metric-value { font-size: var(--fs-stat-lg); font-weight: 300; line-height: var(--lh-tight); color: var(--cocoa); }
/* A zero count recedes (neutral mute, never a status colour) so the actionable
   tiles carry the visual weight. */
.dash-metric-value.zero { color: var(--text-mute); }
.dash-metric-label { font-family: var(--font-mono); font-size: var(--fs-small); letter-spacing: 0.08em; text-transform: uppercase; color: var(--dusty-ink); }
.dash-metric-sub { font-size: var(--fs-small); color: var(--text-mute); }
.dash-metric.alert .dash-metric-value { color: var(--st-flagged-text); }

/* ---- Marker row ---- */
.marker-row {
  display: grid;
  grid-template-columns: 11px minmax(150px, 1.25fr) minmax(96px, 0.6fr) minmax(150px, 1fr) 96px;
  align-items: center;
  gap: var(--sp-4);
  padding: 0.65rem var(--sp-4);
  border-bottom: 1px solid var(--rule-soft);
  cursor: pointer;
  border-left: 3px solid transparent;
}
.marker-row:hover { background: var(--card-deep); }
.marker-row.flagged-stripe { border-left-color: var(--st-flagged); }
.marker-row.borderline-stripe { border-left-color: var(--st-borderline); }
.marker-row .marker-name { font-weight: 500; font-size: var(--fs-small); }
.marker-row .value { font-size: var(--fs-body); font-weight: 600; white-space: nowrap; }
.marker-row .value .unit { font-size: var(--fs-micro); font-weight: 400; color: var(--text-mute); margin-left: 2px; }
.marker-row .pill { justify-self: end; }

.marker-detail {
  display: none;
  padding: var(--sp-3) var(--sp-5) var(--sp-4) calc(11px + var(--sp-4) + var(--sp-4));
  border-bottom: 1px solid var(--rule-soft);
  background: var(--card-deep);
}
.marker-detail.open { display: block; }
.marker-detail .ref {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--dusty-ink);
  margin-bottom: var(--sp-2);
}

.subgroup-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dusty-ink);
  padding: var(--sp-4) var(--sp-4) var(--sp-2);
}

/* Blueprint section nav: a wrapping chip row on desktop, but a single
   horizontally-scrolling strip below 700px so the 15 chips don't reflow into
   ~8 rows and push the report two screens down. */
.bp-nav { flex-wrap: wrap; gap: 8px; margin-bottom: 0.5rem; }
@media (max-width: 700px) {
  /* One scrolling row; the right-edge fade signals there are more chips to scroll to. */
  .bp-nav {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }
  .bp-nav > * { flex: 0 0 auto; }
}

/* ---- Section header band ---- */
.section-head {
  background: var(--cocoa);
  color: var(--bone);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-4);
}
.section-head .num { font-family: var(--font-mono); color: var(--dusty-blue); font-size: var(--fs-small); }
.section-head h2 { margin: 0; font-weight: 300; font-size: var(--fs-section); letter-spacing: 0.01em; }
.section-head .counts { margin-left: auto; display: flex; gap: var(--sp-3); font-size: var(--fs-micro); align-items: center; }
.section-head .counts span { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--dusty-blue-soft); }

/* ---- Narrative block ---- */
.narrative {
  background: var(--card);
  border-left: 3px solid var(--dusty-blue);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
}
.narrative p { max-width: var(--measure); }
.narrative p:last-child { margin-bottom: 0; }
.narrative .byline {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-mute);
  margin-top: var(--sp-3);
}

/* ---- Tables ---- */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
table.data th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--cocoa);
  padding: 0.5rem var(--sp-4);
}
table.data th:first-child { border-radius: var(--radius-sm) 0 0 0; }
table.data th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
table.data td { padding: 0.55rem var(--sp-4); border-bottom: 1px solid var(--rule-soft); }
table.data tr:nth-child(even) td { background: var(--card); }

/* Schedule list tables: clickable rows clear the 40px tap-target floor
   (44px on touch, set in the mobile block below). */
table.data.sched td { padding-top: 0.7rem; padding-bottom: 0.7rem; }
/* Lateness ("Nd over") is a graded value, so the flagged status lives here
   on the data — never on a card edge (status-on-data rule, tokens.css). */
.lateness.flagged { color: var(--st-flagged-text); font-weight: 600; }

/* ---- Schedule (staff) ---- */
/* Control strip: a thin toolbar over the data, not a full-weight peer card. */
.sched-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-5); }
/* The overdue count leads with a flagged value when there's a backlog (data,
   not chrome); it stays neutral at zero — no shame, no empty alarm. */
.stat-card.alert .stat-value { color: var(--st-flagged-text); }
/* Tasks disclosure sits at the foot, demoted from the page lead. */
.sched-tasks { margin-top: var(--sp-6); }
.sched-tasks summary { cursor: pointer; min-height: 40px; padding: 0.5rem 0; }
.sched-tasks summary:hover { color: var(--cocoa); }
.sched-tasks-body { padding-top: var(--sp-3); }
@media (max-width: 700px) {
  /* Stack list rows so the lateness value (top-right) never clips off the
     right edge the way an overflow-x table would. */
  table.data.sched,
  table.data.sched tbody { display: block; }
  table.data.sched tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "date late"
      "member member"
      "item item";
    gap: 2px var(--sp-4);
    padding: 0.6rem var(--sp-4);
    min-height: 44px;
    border-bottom: 1px solid var(--rule-soft);
  }
  table.data.sched tbody td { border: 0; padding: 0; background: transparent; }
  table.data.sched tbody td:nth-child(1) { grid-area: date; align-self: center; }
  table.data.sched tbody td:nth-child(2) { grid-area: member; }
  table.data.sched tbody td:nth-child(3) { grid-area: item; }
  table.data.sched tbody td:nth-child(4) { grid-area: late; justify-self: end; align-self: center; }

  /* Roster (8 cols) stacks into a labeled card per member so the right-edge
     columns (Attention, Last log) never clip behind an overflow-x scroll. The
     member name leads full-width; the rest flow as a 2-up grid, each cell
     carrying its column label (data-label) since the header row is hidden. */
  table.data.roster, table.data.roster tbody { display: block; }
  table.data.roster thead { display: none; }
  table.data.roster tbody tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px var(--sp-4);
    align-items: start;
    padding: 0.7rem var(--sp-4);
    border-bottom: 1px solid var(--rule-soft);
  }
  table.data.roster tbody td { display: block; border: 0; padding: 0; background: transparent; }
  table.data.roster tbody td:first-child { grid-column: 1 / -1; margin-bottom: 2px; }
  table.data.roster tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dusty-ink);
    margin-bottom: 1px;
  }

  /* Member-detail assessment schedule (5 cols incl. an editable due-date cell)
     stacks single-column so the date input keeps full width. Simple cells read
     "LABEL  value" inline; the Item name leads; the input cell drops its label
     above. */
  table.data.assess, table.data.assess tbody, table.data.assess tbody tr, table.data.assess tbody td { display: block; }
  table.data.assess thead { display: none; }
  table.data.assess tbody tr { padding: 0.7rem var(--sp-4); border-bottom: 1px solid var(--rule-soft); }
  table.data.assess tbody td { border: 0; padding: 2px 0; }
  table.data.assess tbody td:first-child { font-weight: 600; margin-bottom: 4px; }
  table.data.assess tbody td[data-label]::before {
    content: attr(data-label);
    display: inline-block;
    min-width: 84px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dusty-ink);
  }
  table.data.assess tbody td.row[data-label] { margin-top: 4px; }
  table.data.assess tbody td.row[data-label]::before { display: block; min-width: 0; margin-bottom: 3px; }
}

/* ---- Trends ---- */
/* One consistent vertical rhythm between the hero card and the support
   sections below it, instead of ad-hoc inline 1.5rem/2rem margins. */
.trend-section { margin-top: var(--sp-6); }
/* auto-fit (not auto-fill) so the trajectory cards fill the row with no dead
   gutter and no clipped last card. */
.trend-traj { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
/* Quick-pick chips folded into the hero card under a hairline rule: a fast
   switch for the same control as the dropdown, grouped to mirror its sections. */
.trend-switch { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--rule-soft); }
.trend-chip-group + .trend-chip-group { margin-top: var(--sp-3); }
.trend-chip-grouplabel { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dusty-ink); }
.trend-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.trend-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0.3rem 0.7rem; border: 1px solid var(--rule-soft); border-radius: var(--radius-pill); background: var(--card); color: var(--cocoa); font-size: var(--fs-small); cursor: pointer; }
.trend-chip:hover { background: var(--card-deep); }
/* Selected chip: the cocoa border + 600 weight carry the active state (chrome
   neutrals, never a status hue, so status-on-data is intact); the card-deep
   fill is faint reinforcement on this card background, not the load-bearing cue. */
.trend-chip.active { background: var(--card-deep); border-color: var(--cocoa); font-weight: 600; }

/* ---- Contacts (CRM list) ---- */
/* Clickable data-table rows — Contacts (.crm-row), Roster (tr[data-member]) and
   Schedule (tr[data-nav]) — get a hover wash + a row-tuned focus ring; the global
   :focus-visible draws an awkward full-width outline around a table row.
   Paint the cells, not the row, so the hover wash overrides table.data's
   nth-child(even) td zebra; needs >= that rule's specificity (table.data prefix)
   to beat it on even rows. */
table.data .crm-row:hover td,
table.data tr[data-member]:hover td,
table.data tr[data-nav]:hover td { background: var(--card-deep); }
.crm-row:focus-visible,
tr[data-member]:focus-visible,
tr[data-nav]:focus-visible { outline: 2px solid var(--dusty-ink); outline-offset: -2px; }
@media (max-width: 700px) {
  /* Stack the 5-column list so it never side-scrolls; the follow-up signal pins
     top-right beside the name and the headers fold away (cells self-label). */
  table.data.crm-table, table.data.crm-table tbody { display: block; }
  table.data.crm-table thead { display: none; }
  table.data.crm-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name late"
      "type type"
      "stage stage"
      "last last";
    gap: 2px var(--sp-4);
    padding: 0.6rem var(--sp-4);
    min-height: 44px;
    border-bottom: 1px solid var(--rule-soft);
  }
  table.data.crm-table tbody td { border: 0; padding: 0; background: transparent; }
  table.data.crm-table tbody td:nth-child(1) { grid-area: name; }
  table.data.crm-table tbody td:nth-child(2) { grid-area: type; align-self: center; }
  table.data.crm-table tbody td:nth-child(3) { grid-area: stage; }
  table.data.crm-table tbody td:nth-child(4) { grid-area: last; }
  table.data.crm-table tbody td:nth-child(5) { grid-area: late; justify-self: end; }
}

/* ---- Buttons ---- */
/* 40px min-height is the comfortable tap-target floor for every interactive control
   (matches .choice/.scale-btn below). inline-flex centres the label inside that floor;
   buttons that want left-aligned content opt out with an inline justify-content. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid var(--cocoa);
  background: var(--cocoa);
  color: var(--bone);
  border-radius: var(--radius-pill);
  padding: 0.45rem 1.1rem;
  font-size: var(--fs-small);
  font-weight: 600;
  cursor: pointer;
}
.btn:hover { background: var(--cocoa-soft); }
.btn.ghost { background: transparent; color: var(--cocoa); border-color: var(--rule-soft); }
.btn.ghost:hover { background: var(--card-deep); border-color: var(--cocoa-soft); }
.btn.small { padding: 0.25rem 0.75rem; font-size: var(--fs-micro); }
.btn:disabled { opacity: 0.45; cursor: default; }

/* Loading placeholder bars (quieter than a bare "Loading…" line). */
.wf-skeleton { height: 40px; margin-bottom: 8px; border-radius: var(--radius-sm); background: var(--card-deep); opacity: 0.5; }

/* Filter chips: a lighter, individual-toggle treatment that reads as filtering,
   distinct from the dark grouped .seg used for section navigation. */
.filter-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.filter-chips .eyebrow { margin-right: 2px; }
.filter-chip { min-height: 40px; padding: 0.3rem 0.7rem; border: 1px solid var(--rule-soft); border-radius: var(--radius-pill); background: transparent; color: var(--cocoa); font-size: var(--fs-micro); cursor: pointer; }
.filter-chip:hover { background: var(--card-deep); }
.filter-chip.active { background: var(--card-deep); border-color: var(--cocoa); font-weight: 600; }
.wf-create { white-space: nowrap; }

/* Forms table stacks below 700px so the 7 columns never side-scroll and the
   Status / Access pills stay on-screen (pinned right) instead of clipping. */
@media (max-width: 700px) {
  table.data.forms-table, table.data.forms-table tbody { display: block; }
  table.data.forms-table thead { display: none; }
  table.data.forms-table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "form    status"
      "tags    access"
      "subs    updated"
      "actions actions";
    gap: 4px var(--sp-4);
    padding: 0.7rem var(--sp-4);
    min-height: 44px;
    border-bottom: 1px solid var(--rule-soft);
  }
  table.data.forms-table tbody td { border: 0; padding: 0; background: transparent; }
  table.data.forms-table tbody td:nth-child(1) { grid-area: form; }
  table.data.forms-table tbody td:nth-child(2) { grid-area: tags; }
  table.data.forms-table tbody td:nth-child(3) { grid-area: status; justify-self: end; }
  table.data.forms-table tbody td:nth-child(4) { grid-area: access; justify-self: end; }
  table.data.forms-table tbody td:nth-child(5) { grid-area: subs; }
  table.data.forms-table tbody td:nth-child(6) { grid-area: updated; justify-self: end; }
  table.data.forms-table tbody td:nth-child(7) { grid-area: actions; margin-top: 4px; }
  table.data.forms-table tbody td[colspan] { grid-column: 1 / -1; text-align: center; }
  /* The header row is hidden when stacked, so prefix the ambiguous cells with
     their column name so screen-reader / zoom users still get the field. */
  table.data.forms-table tbody td[data-label]::before {
    content: attr(data-label) " "; margin-right: 4px;
    font-family: var(--font-mono); font-size: var(--fs-micro);
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--dusty-ink);
  }
}

/* ---- Segmented control (cycle selector, view toggles) ---- */
.seg {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-pill);
  padding: 2px;
  gap: 2px;
  max-width: 100%;
}
.seg button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--text-mute);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.seg button.active { background: var(--cocoa); color: var(--bone); }

/* ---- Type toggles (multi-select filter chips; the colored dot doubles as a
   legend for the calendar item colors). On = filled; off = hollow + muted. ---- */
.type-toggles { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-pill);
  background: var(--card);
  color: var(--cocoa);
  cursor: pointer;
}
.type-toggle .tdot { width: 8px; height: 8px; border-radius: 50%; flex: none; border: 1px solid transparent; }
.type-toggle:hover { border-color: var(--cocoa-soft); }
.type-toggle:focus-visible { outline: 2px solid var(--dusty-blue); outline-offset: 1px; }
.type-toggle[aria-pressed="false"] { color: var(--text-mute); background: transparent; }
.type-toggle[aria-pressed="false"] .tdot { background: transparent !important; border-color: var(--rule-soft); }

/* ---- Goal components ---- */
.goal-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  border-left: 3px solid var(--dusty-blue);
}
/* Goal disclosure header: a full-width reset button. `all: unset` strips the
   default focus outline, so re-declare a visible :focus-visible ring (inset, since
   the parent .goal-card has overflow:hidden) — keyboard users must see the focus. */
.goal-toggle {
  all: unset;
  display: block;
  width: 100%;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  box-sizing: border-box;
}
.goal-toggle:focus-visible { outline: 2px solid var(--dusty-ink); outline-offset: -3px; }
/* Generic full-width reset button for a disclosure header (e.g. the Documents-tab
   per-record toggle). `all: unset` strips the focus outline, so re-declare a ring. */
.disclosure-btn { all: unset; display: block; width: 100%; cursor: pointer; box-sizing: border-box; }
.disclosure-btn:focus-visible { outline: 2px solid var(--dusty-ink); outline-offset: -2px; }
.goal-num {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  color: var(--dusty-ink);
  text-transform: uppercase;
}

/* ---- Adherence: week strip ---- */
.wk-strip { display: inline-flex; align-items: flex-start; gap: 7px; }
.wk-strip.compact { gap: 4px; }
.wk-day { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.wk-dot {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 700;
  color: var(--bone);
  border: 2px solid var(--rule-soft);
  background: transparent;
  box-sizing: border-box;
}
.wk-day.compact .wk-dot { width: 13px; height: 13px; border-width: 1.5px; font-size: 0; }
/* Keep the check visible on a done dot even when compact, so done / ahead /
   missed differ by shape (check / dashed ring / empty ring), not color alone. */
.wk-day.compact .wk-dot.done { font-size: 8px; }
.wk-dot.done { background: var(--st-optimal); border-color: var(--st-optimal); }
.wk-dot.missed { background: transparent; border-color: var(--rule-soft); }
.wk-dot.ahead { background: transparent; border-style: dashed; border-color: var(--dusty-blue-soft); }
.wk-dot.today { box-shadow: 0 0 0 2px var(--bone), 0 0 0 4px var(--cocoa); }
.wk-label { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-mute); }
.wk-count { font-size: var(--fs-h3); font-weight: 600; margin-left: 6px; align-self: center; color: var(--cocoa); }
.wk-count .muted { font-size: var(--fs-small); }
.wk-history { display: flex; flex-direction: column; gap: 2px; }

.chip-stat {
  font-size: var(--fs-micro);
  color: var(--text-mute);
  background: var(--card-deep);
  border-radius: var(--radius-pill);
  padding: 0.18rem 0.6rem;
  white-space: nowrap;
}
.chip-stat strong { color: var(--cocoa); }
.chip-stat.good { color: var(--st-optimal-pill); background: var(--st-optimal-fill); }

/* ---- Member-detail status band: non-interactive identity/status (left) split
   from the one nav action (right), with a compact signal strip that travels on
   every non-Care tab. All status color stays on the data pills/chips, never the
   band chrome. ---- */
.member-statusband {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.member-statusband .statusband-id,
.member-statusband .statusband-signals,
.member-statusband .statusband-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.member-statusband .statusband-actions { margin-left: auto; }

/* ---- Profile demographics: a clean two-column label/value record. Labels read
   as labels (legible, not a faint micro line), values carry the weight, and an
   even grid rhythm replaces the per-row dashed dividers. ---- */
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-6); }
.field-row { min-width: 0; }
.field-row-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.field-label { font-size: var(--fs-small); color: var(--dusty-ink); }
/* Card/section heading — a real, legible title (Manrope), distinct from the
   small mono .eyebrow overline used for page kickers. */
.section-title { font-size: var(--fs-h3); font-weight: 600; color: var(--cocoa); margin: 0 0 var(--sp-4); }
.field-value { font-size: var(--fs-body); font-weight: 600; color: var(--cocoa); margin-top: 3px; overflow-wrap: anywhere; }
.field-value .muted { font-weight: 400; }
.field-provenance { display: block; font-size: var(--fs-micro); font-weight: 400; color: var(--text-mute); margin-top: 3px; }
.card-provenance { font-size: var(--fs-micro); color: var(--text-mute); margin: var(--sp-5) 0 0; }
@media (max-width: 620px) { .field-grid { grid-template-columns: 1fr; gap: var(--sp-4); } }

/* ---- Member-detail responsive: keep the tab strip a single scrollable row
   (not a two-row wrap inside one pill), constrain the demo role switcher, and
   let the status band's action drop to its own left-aligned line. ---- */
@media (max-width: 560px) {
  .seg.seg-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .seg.seg-scroll::-webkit-scrollbar { display: none; }
  .staff-identity { max-width: 100%; }
  .staff-identity .input { max-width: 58vw; }
  .member-statusband .statusband-actions { margin-left: 0; }
}

/* ---- Dashboard widgets ---- */
.widget { margin-bottom: var(--sp-5); position: relative; }
.widget-controls {
  display: flex; gap: 6px; align-items: center;
  position: absolute; top: 10px; right: 12px; z-index: 5;
}
.widget.editing { outline: 2px dashed var(--dusty-blue-soft); outline-offset: 4px; border-radius: var(--radius); }
.widget.editing > :first-child { opacity: 0.92; }

.checkin-toggle {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--card);
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-size: var(--fs-small);
}
.checkin-toggle:hover { border-color: var(--dusty-blue); }
.checkin-toggle .box {
  width: 20px; height: 20px;
  border-radius: 5px;
  border: 2px solid var(--rule-soft);
  flex: none;
  display: grid;
  place-items: center;
  color: var(--bone);
  font-size: 0.8rem;
  font-weight: 700;
}
.checkin-toggle.done { border-color: var(--st-optimal); }
.checkin-toggle.done .box { background: var(--st-optimal); border-color: var(--st-optimal); }
.checkin-main { flex: 1; min-width: 0; }
.checkin-status { min-width: 86px; text-align: right; }

/* Below 560px the check-in row wraps so a long title never crushes to one word
   per line. Habit rows (<button>) keep the box + title on the first line and
   drop the week strip and status to their own full-width lines; metric rows
   (<div>) give the title its own line so the inputs + Log wrap beneath it. */
@media (max-width: 560px) {
  #today-panel .checkin-toggle { flex-wrap: wrap; }
  #today-panel button.checkin-toggle > .wk-strip,
  #today-panel button.checkin-toggle > .checkin-status { flex-basis: 100%; }
  #today-panel div.checkin-toggle > .checkin-main { flex-basis: 100%; }
  #today-panel .checkin-status { min-width: 0; text-align: left; }
}

/* ---- Timeline ---- */
.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: '';
  position: absolute;
  left: 5px; top: 6px; bottom: 6px;
  width: 1px;
  background: var(--rule-soft);
}
.timeline li {
  position: relative;
  padding: 0 0 var(--sp-4) var(--sp-5);
}
.timeline li::before {
  content: '';
  position: absolute;
  left: 1px; top: 7px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dusty-blue);
}
.timeline li.milestone::before { background: var(--st-optimal); }
.timeline li.data::before { background: var(--cocoa); }
.timeline .t-date { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-mute); }
.timeline .t-author { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--dusty-ink); letter-spacing: 0.06em; }

/* ---- Inputs ---- */
select.input { max-width: 100%; }

.input, textarea.input {
  font-family: inherit;
  font-size: var(--fs-small);
  color: var(--cocoa);
  background: #fffef6;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  padding: 0.5rem 0.7rem;
  min-height: 40px;
  width: 100%;
}
.input:focus { outline: 2px solid var(--dusty-ink); outline-offset: 0; border-color: var(--dusty-ink); }

/* ---- Toast ---- */
.toast {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  background: var(--cocoa);
  color: var(--bone);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-5);
  box-shadow: var(--shadow-raise);
  font-size: var(--fs-small);
  z-index: 50;
  animation: toast-in 0.25s ease;
}
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- Login (Supabase mode) ---- */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--cocoa);
  display: grid;
  place-items: center;
  padding: var(--sp-5);
  overflow-y: auto;
}
.login-card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-raise);
  padding: var(--sp-6);
  width: 100%;
  max-width: 380px;
}
.login-mark { width: 180px; display: block; margin: 0 auto var(--sp-5); }
.login-title { font-size: var(--fs-h2); margin: 0 0 var(--sp-1); text-align: center; }
.login-sub { text-align: center; margin: 0 0 var(--sp-5); }
.login-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.login-field { display: flex; flex-direction: column; gap: 4px; }
.login-error {
  color: var(--st-flagged-text);
  background: var(--st-flagged-fill);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin: 0;
}
.login-submit { width: 100%; padding: 0.6rem; }
/* Centered account/notice card (unprovisioned, post-login boot error). */
.notice-card { max-width: 480px; margin: 2rem auto; }

/* Sign-out in the sidebar chip: an outline button legible on the cocoa sidebar. */
.chip-signout {
  margin-top: var(--sp-3);
  width: 100%;
  background: transparent;
  border-color: var(--dusty-blue-soft);
  color: var(--bone);
}
.chip-signout:hover { background: rgba(235, 235, 220, 0.08); border-color: var(--bone); }

/* ---- Checklist (criteria modules) ---- */
.criteria { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2) var(--sp-5); }
.criteria .crit {
  display: flex;
  gap: var(--sp-3);
  align-items: baseline;
  font-size: var(--fs-small);
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--rule-soft);
}
.criteria .crit .mark { font-family: var(--font-mono); flex: none; }
.criteria .crit.met .mark { color: var(--st-flagged-text); }
.criteria .crit:not(.met) .mark { color: var(--text-mute); }
.criteria .crit .thr { color: var(--text-mute); font-size: var(--fs-micro); }
@media (max-width: 620px) { .criteria { grid-template-columns: 1fr; } }

/* CRM contact detail: interaction timeline */
.cd-timeline { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule-soft); margin-left: 5px; }
.cd-entry { position: relative; padding: 0 0 1.15rem 1.15rem; }
.cd-entry:last-child { padding-bottom: 0; }
.cd-entry-dot { position: absolute; left: -5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--dusty-blue); box-shadow: 0 0 0 3px var(--card); }
@media (max-width: 760px) { .cd-grid { grid-template-columns: 1fr !important; } }

/* ---- Inline link-style button (tappable text) ---- */
.link-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  font-size: var(--fs-small);
  padding: 6px 0;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.link-btn:hover, .link-btn:focus-visible { color: var(--dusty-ink); text-decoration: underline; }

/* ---- Score layout: ring beside domain grid, stacks on mobile ---- */
.score-layout {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: auto 1fr;
  align-items: start;
}
@media (max-width: 700px) {
  .score-layout { grid-template-columns: 1fr; }
  .score-layout > .card { width: 100%; min-width: 0; }
}

/* ---- Table cards scroll sideways on small screens ---- */
.table-card {
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ---- Mobile: marker rows stack (name/value/pill, bar below) ---- */
@media (max-width: 700px) {
  .btn.small, .seg button { padding: 0.5rem 0.9rem; } /* min-height floor (40px) comes from the base rules */
  .marker-row { min-height: 44px; }
  input[type="checkbox"] { width: 20px; height: 20px; }
  .marker-row {
    grid-template-columns: 11px 1fr auto auto;
    grid-template-areas:
      "dot name value pill"
      ".   bars bars bars";
    row-gap: 6px;
  }
  .marker-row > .dot { grid-area: dot; }
  .marker-row > .marker-name { grid-area: name; }
  .marker-row > .value { grid-area: value; }
  .marker-row > .row { grid-area: bars; }
  .marker-row > .pill { grid-area: pill; }
}

/* ---- Compare table ---- */
.cycle-cols th.cyc { text-align: center; }
.cycle-cols td.cyc { text-align: center; font-weight: 600; white-space: nowrap; }

/* ---- Forms engine ---- */
.choice.selected {
  background: var(--cocoa);
  color: var(--bone);
  border-color: var(--cocoa);
}
/* A selected choice must keep its dark fill + light text on hover — otherwise the generic
   .btn.ghost:hover (light background) leaves white text on a light fill, nearly invisible. */
.choice.selected:hover {
  background: var(--cocoa);
  color: var(--bone);
  border-color: var(--cocoa);
}
.scale-btn { min-width: 40px; justify-content: center; }
/* Member-facing answer controls stay a comfortable tap target at every width
   (the generic .btn.small bump only applies on phones). */
.choice, .scale-btn { min-height: 40px; }
.form-field label { color: var(--cocoa); }

/* Subheading field type: visual hierarchy inside a section without
   nested subsection complexity (docs/FORMS.md). */
.form-subheading {
  margin: 18px 0 2px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--cocoa);
  letter-spacing: 0.01em;
}
.form-field:first-child .form-subheading { margin-top: 0; }
.form-subheading-desc {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--text-mute);
  max-width: 60ch;
}

/* ---- Journey stepper ---- */
.journey { list-style: none; margin: 0; padding: 0; position: relative; }
.journey::before {
  content: '';
  position: absolute;
  left: 13px; top: 10px; bottom: 10px;
  width: 2px;
  background: var(--rule-soft);
}
.journey li { position: relative; padding: 0 0 16px 42px; }
.journey .j-dot {
  position: absolute;
  left: 4px; top: 1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.7rem; font-weight: 700;
  background: var(--card);
  border: 2px solid var(--rule-soft);
  color: var(--bone);
  box-sizing: border-box;
}
.journey li.done .j-dot { background: var(--st-optimal); border-color: var(--st-optimal); }
.journey li.current .j-dot { border-color: var(--cocoa); background: var(--cocoa); }
.journey li.current .j-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--bone); }
.journey li.ahead { opacity: 0.6; }
.journey .j-title { font-weight: 600; font-size: var(--fs-small); }
.journey li.current .j-title { font-size: var(--fs-h3); }

/* ---- Plan selection cards ---- */
.plan-card {
  border: 2px solid var(--rule-soft);
  border-radius: var(--radius);
  background: var(--card);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.plan-card:hover { border-color: var(--dusty-blue); }
.plan-card.selected { border-color: var(--cocoa); box-shadow: var(--shadow-card); }

/* ---- Affirmation: feedback at the point of action ---- */
.affirm {
  margin: -2px 0 2px 52px;
  padding: 0.45rem 0.9rem;
  border-left: 3px solid var(--st-optimal);
  background: var(--st-optimal-fill);
  color: var(--st-optimal-pill);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--fs-small);
  font-weight: 600;
  animation: affirm-in 0.35s ease;
}
.affirm.week { border-left-color: var(--st-optimal); font-weight: 700; }
.affirm.day { border-left-color: var(--dusty-blue); background: rgba(114, 139, 167, 0.14); color: var(--dusty-ink-deep); }
@keyframes affirm-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.checkin-toggle .box.pop { animation: box-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes box-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

h3.day-complete { animation: affirm-in 0.5s ease; }
h3.day-complete::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--st-optimal);
  animation: day-line 0.6s ease;
}
@keyframes day-line { from { width: 0; } to { width: 64px; } }

/* ---- Form Studio two-pane (stacks on small screens) ---- */
.studio-layout {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(320px, 1fr);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 860px) {
  .studio-layout { grid-template-columns: 1fr; }
  .studio-layout > div[style*='sticky'] { position: static !important; }
}

/* ---- Master calendar (month grid) ---- */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow: hidden;
}
.cal-head {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--cocoa);
  padding: 6px 8px;
}
.cal-day {
  min-height: 96px;
  border-top: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.out { background: var(--card-deep); opacity: 0.55; }
.cal-day.today { background: rgba(114, 139, 167, 0.12); }
.cal-day.today .cal-date { color: var(--bone); background: var(--cocoa); }
.cal-date {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-mute);
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
}
.cal-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-micro);
  line-height: 1.25;
  color: var(--cocoa);
  text-decoration: none;
  border-radius: 4px;
  padding: 1px 3px;
  min-width: 0;
}
.cal-item:hover { background: var(--card-deep); text-decoration: none; }
.cal-item .cal-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
/* Non-color type cue, visible at all widths (incl. mobile where cal-text hides). */
.cal-code { font-family: var(--font-mono); font-size: 0.58rem; color: var(--text-mute); flex: none; }
@media (max-width: 700px) {
  .cal-day { min-height: 64px; }
  .cal-item .cal-text { display: none; }
  .cal-item { padding: 2px; }
}

/* Anchor reset for card/row links (staff dashboard rows, stat chips). */
.stat-link { display: block; color: inherit; text-decoration: none; }
.stat-link:hover { text-decoration: none; }
a.list-row:hover { background: var(--card-deep); }

/* ---- Member calendar (dashboard widget) ---- */
.mcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mcal-dow { text-align: center; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-mute); padding: 2px 0; }
.mcal-day {
  all: unset; box-sizing: border-box; cursor: pointer;
  min-height: 52px; padding: 4px 5px; border-radius: var(--radius-sm);
  background: var(--card-deep); display: flex; flex-direction: column; gap: 3px;
}
.mcal-day:hover { background: var(--rule-soft); }
.mcal-day:focus-visible { outline: 2px solid var(--dusty-blue); }
.mcal-day.out { opacity: 0.38; }
.mcal-day.today { box-shadow: inset 0 0 0 1.5px var(--dusty-blue); }
.mcal-day .num { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--cocoa-soft); }
.mcal-dots { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.mcal-dot { width: 7px; height: 7px; border-radius: 50%; border: 1.4px solid var(--cocoa-soft); flex: none; }
.mcal-dot.done { background: var(--cocoa); border-color: var(--cocoa); }
.mcal-evt { width: 8px; height: 8px; flex: none; border-radius: 2px; }
.mcal-evt.appointment { background: var(--dusty-blue); }
.mcal-evt.monitoring { background: var(--st-optimal); border-radius: 50%; }
.mcal-evt.inline { display: inline-block; vertical-align: baseline; }
.mcal-more { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-mute); }
.mcal-empty { color: var(--rule-soft); }

/* Rich-text: a small toolbar + contenteditable editor (Form Studio), and the
   sanitized formatted output members see. */
.rt-toolbar { display: flex; gap: 4px; margin-bottom: 4px; }
.rt-editor { min-height: 90px; max-height: 360px; overflow-y: auto; }
.rt-editor:focus { outline: none; border-color: var(--dusty-blue); }
.rt-editor ul, .rt-editor ol, .form-richtext ul, .form-richtext ol { margin: 0.3em 0 0.3em 1.4em; padding: 0; }
.rt-editor p, .form-richtext p { margin: 0 0 0.55em; }
.rt-editor p:last-child, .form-richtext p:last-child, .form-richtext > :last-child { margin-bottom: 0; }
.form-richtext { color: var(--cocoa-soft); max-width: 680px; }
.form-richtext strong, .form-richtext b { font-weight: 600; color: var(--cocoa); }

/* Form options as native-style bubbles: a small radio circle / checkbox square
   beside the label, in a vertical list (matches the source forms). The whole
   row is the click/touch target. */
.opt-list { display: flex; flex-direction: column; gap: 2px; max-width: 600px; }
.opt-row {
  all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; min-height: 38px; cursor: pointer; border-radius: var(--radius-sm);
}
.opt-row:hover { background: var(--card-deep); }
.opt-row:focus-visible { outline: 2px solid var(--dusty-blue); outline-offset: -2px; }
.opt-bubble {
  flex: none; width: 18px; height: 18px; border: 1.5px solid var(--cocoa-soft);
  background: #fff; position: relative;
}
.opt-bubble.radio { border-radius: 50%; }
.opt-bubble.check { border-radius: 4px; }
/* Filled radio: a centered dot painted as a radial gradient — immune to any
   flex/box-model rounding that can nudge a pseudo-element off-center. */
.opt-bubble.radio.on { border-color: var(--dusty-blue); background: radial-gradient(circle, var(--dusty-blue) 0 4.5px, #fff 5px); }
.opt-bubble.check.on { background: var(--dusty-blue); border-color: var(--dusty-blue); }
.opt-bubble.check.on::after { content: '✓'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }
.opt-label { font-size: var(--fs-small); color: var(--cocoa); }

/* Form inputs span the field width (matches the source forms' full-width boxes);
   a number keeps its own narrow inline cap. */
.form-field input.input, .form-field textarea.input, .form-field select.input { width: 100%; }

/* Signature pad: a drawable canvas (forms `signature` field). */
.sig-field { max-width: 600px; }
.sig-pad { display: block; width: 100%; height: 150px; box-sizing: border-box; border: 1px dashed var(--rule-soft); border-radius: var(--radius-sm); background: #fff; cursor: crosshair; touch-action: none; }
/* Week-ahead day cells: a brief list of the day's items (dot + clipped label). */
.mcal-evtlist { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mcal-evtline { display: flex; align-items: center; gap: 4px; min-width: 0; }
.mcal-evtline .mcal-evt { flex: none; }
.mcal-evtlabel { font-size: var(--fs-micro); color: var(--cocoa-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mcal-row {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center;
  gap: 10px; width: 100%; padding: 8px 4px; border-bottom: 1px dashed var(--rule-soft);
}
.mcal-row:hover { background: var(--card-deep); }
.mcal-row.today { background: var(--card-deep); border-radius: var(--radius-sm); }
.mcal-row .mcal-date { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-mute); min-width: 56px; }
.mcal-row.today .mcal-date { color: var(--dusty-ink); font-weight: 600; }
@media (max-width: 700px) {
  .mcal-day { min-height: 44px; }
  .mcal-row .chip-stat { display: none; }
}

/* ---- Spacing + layout utilities ----
   Replacements for the inline styles that repeated across views.
   Convention (CLAUDE.md): no new inline style="" for any pattern
   used more than once — extend this block instead. Numbers are px
   unless the name says otherwise. .mt-* are stack-spacing shorthands
   (margin: N 0 0), not bare margin-top. */
.m-0 { margin: 0; }
.mb-2 { margin-bottom: 2px; }
.mb-4 { margin-bottom: 4px; }
.mb-6 { margin-bottom: 6px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 0.75rem; }
.mb-16 { margin-bottom: 1rem; }
.mb-20 { margin-bottom: 1.25rem; }
.mt-6 { margin: 6px 0 0; }
.mt-8 { margin: 8px 0 0; }
.mt-10 { margin: 10px 0 0; }
.gap-6 { gap: 6px; }
.gap-8 { gap: 8px; }
.gap-10 { gap: 10px; }
.w-auto { width: auto; }
.block { display: block; }
.flex-1 { flex: 1; }
/* Visually hidden, still read by assistive tech (e.g. table column headers). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.list-row { padding: 7px 0; border-bottom: 1px dashed var(--rule-soft); }

/* ---- Print: report reads as a document ---- */
@media print {
  .sidebar, .topbar, .btn, .seg, .toast { display: none !important; }
  .app { display: block; }
  .main { padding: 0; max-width: none; }
  body { background: #fff; }
  .marker-row { break-inside: avoid; }
  .section-head { break-after: avoid; }
}