/* Easy Care Apps, stage 0.
   Deliberately plain. The design system arrives when there is something to
   design; this exists so the spine can be looked at without squinting.
   External stylesheet only: the content security policy forbids inline styles. */

:root {
  --ink: #16202a;
  --ink-soft: #566573;
  --paper: #ffffff;
  --wash: #f4f6f8;
  --line: #d0d8df;
  /* The edge of a box somebody types into. Darker than a divider on purpose:
     a field has to look like a field across a room, on a tablet, in daylight. */
  --line-field: #9fadb8;
  --accent: #0b5f7d;
  --accent-ink: #ffffff;
  --error: #8a1c1c;
  --error-wash: #fdeaea;
  --radius: 6px;
  /* Density. Every screen uses the space it is given: tight padding, small
     headings, side by side rather than stacked, full width rather than a
     narrow centred column. Space is for separating things that are different,
     never for its own sake. Tune the four below and the whole product moves.
     Check a new screen at 1280 and ask how much of it is content. */
  --pad-y: 10px;
  --pad-x: 14px;
  --gap: 12px;
  --stack: 10px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--wash);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
}

.main {
  max-width: 900px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.page__title {
  font-size: 1.22rem;
  margin: 0 0 2px;
}

.page__lede {
  color: var(--ink-soft);
  margin: 0 0 12px;
  font-size: 0.9rem;
  max-width: 70ch;
}

.auth {
  max-width: 380px;
  margin: 8vh auto 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}

.auth__title {
  font-size: 1.5rem;
  margin: 0 0 4px;
}

.auth__strap {
  color: var(--ink-soft);
  margin: 0 0 24px;
}

.auth__form {
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 3px;
}

.field__label {
  font-size: 0.82rem;
  font-weight: 600;
}

.field__input {
  font: inherit;
  padding: 6px 9px;
  border: 1px solid var(--line-field);
  border-radius: var(--radius);
  background: var(--paper);
  color: inherit;
}

.field__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.button {
  font: inherit;
  font-weight: 600;
  padding: 7px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

.button:hover {
  filter: brightness(1.08);
}

.button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.button--quiet {
  background: transparent;
  color: var(--accent);
  border-color: var(--line);
}

.notice {
  padding: 7px 12px;
  border-radius: var(--radius);
  margin: 0 0 12px;
}

.notice--error {
  background: var(--error-wash);
  color: var(--error);
}

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad-y) var(--pad-x);
}

.panel__title {
  font-size: 1rem;
  margin: 0 0 8px;
}

.panel__empty,
.panel__note {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.panel__note {
  margin-bottom: 0;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 0.88rem;
}

.table th,
.table td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table th {
  color: var(--ink-soft);
  font-weight: 600;
}

.link {
  color: var(--accent);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e8edf2;
    --ink-soft: #9fb0bf;
    --paper: #16202a;
    --wash: #0e161d;
    --line: #2a3845;
    --accent: #5fb9d8;
    --accent-ink: #0e161d;
    --error: #ffb4b4;
    --error-wash: #3a1d1d;
  }
}

/* ---------------------------------------------------------------------------
   Stage 1: services, people, staff
   --------------------------------------------------------------------------- */

.main {
  max-width: 900px;
}

.page__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.page__head .page__title {
  margin: 0;
  margin-right: auto;
}

.form {
  display: grid;
  gap: var(--gap);
  max-width: 720px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad-y) var(--pad-x);
  margin-bottom: var(--stack);
}

/* A form with nothing to read in it, so it may use the width it is given. */
.form--wide {
  max-width: none;
}

/* Already inside a box: do not draw a second one around it. */
.panel > .form,
.card > .form {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}

.form--danger {
  border-color: var(--error);
}

.form__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inline-form {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* A label for a screen reader and not for the eye. Used where a dense table
   gives a field its meaning through the row it sits in, which a screen reader
   cannot see. */
.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;
}

/* The same form inside a table row, where the margin above it would push every
   row taller for nothing. */
.inline-form--tight {
  margin-top: 0;
  flex-wrap: nowrap;
  gap: 6px;
}

.field--inline {
  margin: 0;
}

.field--grow {
  flex: 1 1 200px;
}

.field__hint {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.field__input--short {
  max-width: 220px;
}

textarea.field__input {
  resize: vertical;
}

.fieldset {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px 12px;
  display: grid;
  gap: 8px;
}

.fieldset__legend {
  font-weight: 600;
  padding: 0 6px;
}

.choice {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
}

/* Seven days, or any other short list of tick boxes, packed tight enough to
   read as one question rather than seven. */
.choices--tight {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 4px 10px;
}

/* Choices that are short enough to sit beside one another. */
.choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}

.choice:hover {
  background: var(--wash);
}

.choice__body {
  display: grid;
  gap: 1px;
}

.choice__name {
  font-weight: 600;
}

.choice__blurb,
.choice__meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.checkline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.facts {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 4px 16px;
  margin: 0 0 var(--stack);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad-y) var(--pad-x);
}

.facts dt {
  font-weight: 600;
  color: var(--ink-soft);
}

.facts dd {
  margin: 0;
}

.facts__note {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.firstfive {
  background: var(--paper);
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: var(--pad-y) var(--pad-x);
  margin-bottom: var(--stack);
}

.firstfive__title {
  margin: 0 0 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}

.firstfive p {
  margin: 4px 0;
}

/* What has been agreed and what has not, under the two lines above it. A
   withdrawn consent belongs here and not three tabs away: it changes what
   somebody is about to do. */
.firstfive__consent {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  font-size: 0.9rem;
}

/* The intake path, said as steps rather than left for somebody to know. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.steps__step {
  padding: 7px 10px 7px 12px;
  border-left: 3px solid var(--line);
  background: var(--wash);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.92rem;
}

.steps__step.is-now {
  border-left-color: var(--accent);
  background: var(--paper);
}

.steps__step.is-done {
  opacity: 0.65;
}

/* The board the founder sketched: four cards, two by two, falling to one
   column on a narrow screen. Each card is the same height as its neighbour so
   the grid reads as a grid rather than as four stacked boxes. */
.board {
  display: grid;
  gap: var(--gap);
  margin-bottom: var(--stack);
}

@media (min-width: 900px) {
  .board {
    grid-template-columns: 1fr 1fr;
  }
}

.board__card {
  margin: 0;
  min-height: 150px;
}

@media (max-width: 900px) {
  .board__card {
    min-height: 0;
  }
}

.board__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

.board__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 8px;
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}

.board__row:hover {
  background: var(--wash);
}

.board__row .small {
  margin-left: 6px;
}

.board__count {
  min-width: 2ch;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.board__row--urgent .board__count {
  color: var(--bad, #b3261e);
}

/* The date and the clock, at the right of the top bar. */
/* The day and the time, legible rather than decorative. They were set in the
   bar's soft ink at 0.85rem and could not be read on the dark band at a
   glance, which is the only thing they are there for. */
.top__now {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-left: auto;
  margin-right: 14px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

.top__time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media (max-width: 900px) {
  .top__date { display: none; }
}

.panel {
  margin-bottom: 24px;
}

.filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.filters__link {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.filters__link.is-on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--wash);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

.tag--active {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

.tag--urgent {
  background: var(--error-wash);
  color: var(--error);
  border-color: transparent;
}

.is-past {
  color: var(--ink-soft);
}

.disclosure {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.disclosure__summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
}

.disclosure .form {
  margin-top: 16px;
  border: none;
  padding: 0;
}

.notice {
  background: var(--wash);
  border: 1px solid var(--line);
}

.table form {
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Navigation, rebuilt 2026-10-27.

     TOP     the sections, across a dark bar
     SIDE    that section's areas, in labelled groups
     WHO     the person this page is about, and how to change them
     TABS    the parts of one record

   Three levels and a context bar. Compact on purpose: the point of three
   levels is that each one stays short, so the type is small, the rows are
   tight, and nothing is padded for the sake of it.

   Entirely server-rendered, so it works before anything has loaded and needs
   no exception in the content security policy.
   --------------------------------------------------------------------------- */

:root {
  --top-h: 42px;
  --groups-h: 34px;
  /* Everything that pins itself pins under the whole stack: the sections bar
     and the groups bar. One value, so adding a level never leaves a band at
     the top of the page that nothing covers. */
  --chrome-h: calc(var(--top-h) + var(--groups-h));
  --side-w: 186px;
  --fb-bar-h: 52px;
  --fb-pal-w: 172px;
  --fb-gap: 14px;
  /* Where the builder's own bar pins itself: under the product's sticky top
     bar. The console has a different header, which does not stick, so it
     overrides this to zero and the bar pins to the window instead. Getting
     this wrong leaves a band at the top of the page that nothing covers, and
     the palette scrolls through it. */
  --fb-top: var(--chrome-h);
  --bar-bg: #0a2634;
  --bar-ink: #eaf2f6;
  --bar-ink-soft: #9fbccb;
  --tint: rgba(11, 95, 125, 0.09);
  --shadow: 0 1px 2px rgba(16, 32, 44, 0.06), 0 1px 10px rgba(16, 32, 44, 0.04);
}

/* Level one: the sections */

.top {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: stretch;
  height: var(--top-h);
  padding: 0 14px;
  background: var(--bar-bg);
  color: var(--bar-ink);
}

/* The brand is exactly as wide as the menu below it, so the dark column has
   one straight edge from the top of the window to the bottom instead of a
   notch where the two met. */
.top__brand {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: var(--side-w);
  flex: none;
  margin-left: -14px;
  padding: 0 16px 0 14px;
  color: var(--bar-ink);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top__nav {
  display: flex;
  align-items: stretch;
  gap: 1px;
  overflow-x: auto;
}

.top__link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  color: var(--bar-ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.top__link:hover {
  color: var(--bar-ink);
  background: rgba(255, 255, 255, 0.07);
}

.top__link.is-on {
  color: #fff;
  border-bottom-color: #5fb9d8;
  background: rgba(255, 255, 255, 0.07);
}

.top__link.is-soon {
  opacity: 0.45;
  cursor: default;
}

.top__link .icon {
  width: 17px;
  height: 17px;
}

.top__who {
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-left: 14px;
  color: var(--bar-ink-soft);
  font-size: 0.85rem;
  white-space: nowrap;
}

.top__out {
  display: flex;
  align-items: center;
  margin-left: 12px;
}

.button--ghost {
  background: transparent;
  color: var(--bar-ink);
  border-color: rgba(255, 255, 255, 0.28);
  font-weight: 600;
  padding: 5px 12px;
  font-size: 0.85rem;
}

.button--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  filter: none;
}

.readonly {
  padding: 9px 18px;
  background: #fdf1dd;
  color: #6b4400;
  border-bottom: 1px solid #e8c88a;
  font-size: 0.88rem;
}

/* Level two: this section's groups, across the top.
   The founder's words: "Floating menu appears when click on Care. Then based
   on what clicked next that submenu group planed in the left menu." So the
   group labels left the sidebar, where all of them were on screen at once and
   the list ran twenty-odd rows, and became a bar where one is open at a
   time. */

/* This section's groups, across the top of the work column. It used to span
   the window, which drew a pale strip over the top of the dark menu. */
.groups {
  position: sticky;
  top: var(--top-h);
  z-index: 4;
  display: flex;
  gap: 2px;
  padding: 0 14px;
  height: var(--groups-h);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.groups__link {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.groups__link:hover {
  color: var(--ink);
  background: var(--wash);
}

.groups__link.is-on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Level three: the items of whichever group is open */

.frame {
  background:
    linear-gradient(to right, var(--bar-bg) 0 var(--side-w), transparent var(--side-w));
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - var(--top-h));
}

/* The left menu carries the top bar's colour, asked for 2026-10-28. One dark
   band down the left and across the top, and the work on white beside it: the
   navigation stops competing with the content for attention. */
.side {
  position: sticky;
  top: var(--top-h);
  flex: none;
  width: var(--side-w);
  /* Full height, however short the list is: the band reaches the bottom of the
     window and keeps going while the page scrolls. It starts under the top bar
     and nothing is drawn across it. */
  height: calc(100vh - var(--top-h));
  overflow-y: auto;
  padding: 8px 8px 16px;
  background: var(--bar-bg);
  color: var(--bar-ink);
  border-right: 1px solid var(--bar-bg);
}

/* A section with one group draws no group bar, so what sits inside the work
   column pins under the top bar alone. */
.frame.is-bare .who {
  top: var(--top-h);
}

.side__label {
  margin: 11px 9px 3px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--bar-ink-soft);
}

.side__label:first-child {
  margin-top: 2px;
}

/* A heading inside an area, put there in Edit Menu: Essentials, Medical. The
   same voice as the area's own label, a step quieter, so the list reads as
   one area in parts rather than as several areas. */
.side__heading {
  display: block;
  margin: 9px 9px 2px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bar-ink-soft);
}

/* The menu's open/close control. Hidden on a wide screen, where the list is
   always there; see the narrow-screen block for what it does on a phone. */
.side__toggle,
.side__summary {
  display: none;
}

.side__empty {
  margin: 2px 9px 6px;
  font-size: 0.82rem;
  color: var(--bar-ink-soft);
}

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

.side__link,
.groups__link {
  display: flex;
  align-items: center;
  gap: 7px;
}

.side__link .icon,
.groups__link .icon,
.card__title .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  opacity: 0.75;
}

.side__link.is-on .icon,
.groups__link.is-on .icon {
  opacity: 1;
}

.card__title .icon {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
}

.side__link {
  width: 100%;
  padding: 4px 9px;
  border-radius: 6px;
  color: var(--bar-ink);
  text-decoration: none;
  font-size: 0.88rem;
  line-height: 1.35;
}

a.side__link:hover,
button.side__link:hover {
  background: rgba(255, 255, 255, 0.09);
}

.side__link.is-on {
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  font-weight: 600;
}

/* Log Out is drawn in the menu where he drew it and is still a POST with a
   token behind it, so it is a button wearing the menu's clothes. */
.side__out {
  margin: 0;
}

button.side__link {
  background: none;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Built, but needing a person chosen first. */
.side__link.is-waiting {
  color: var(--bar-ink-soft);
  opacity: 0.6;
  cursor: default;
}

/* Not built yet, in a menu that is now dark: the label stays readable and the
   pill stops shouting. */
.side__link.is-soon {
  color: var(--bar-ink-soft);
}

.side .soon {
  background: rgba(255, 255, 255, 0.12);
  color: var(--bar-ink-soft);
  border-color: transparent;
}

.work {
  flex: 1 1 auto;
  min-width: 0;
}

/* The context bar: who this page is about */

.who {
  position: sticky;
  top: var(--chrome-h);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.who__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--accent);
  font-weight: 700;
  font-size: 0.78rem;
  flex: none;
}

.who__name {
  font-weight: 700;
}

.who__facts {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.who__moves {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.who__move,
.who__change {
  font-size: 0.8rem;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  text-decoration: none;
  color: var(--ink-soft);
  white-space: nowrap;
}

a.who__move:hover,
a.who__change:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.who__move.is-off {
  opacity: 0.35;
  cursor: default;
}

.who__change {
  font-weight: 600;
  color: var(--accent);
  border-color: var(--accent);
}

/* Level three: the parts of this record */

.tabs {
  display: flex;
  gap: 2px;
  padding: 0 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.tabs__link {
  padding: 7px 11px 6px;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.88rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

.tabs__link:hover {
  color: var(--ink);
}

.tabs__link.is-on {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Not built yet. Never a link, so nothing promises a page that is not there. */

.is-soon {
  color: var(--ink-soft);
  cursor: default;
}

.soon {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 6px;
  padding: 1px 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  vertical-align: 1px;
}

.app .main {
  max-width: none;
  margin: 0;
  padding: 12px 16px 32px;
}

/* Compact forms: two to a row where they fit. */

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}

/* Three and four to a row, for the screens that have the width for it. */
.form__row--3 {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.facts--split {
  grid-template-columns: minmax(130px, auto) 1fr minmax(130px, auto) 1fr;
}

.finder {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: var(--stack);
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad-y) var(--pad-x);
  margin-bottom: var(--stack);
}

.card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}

.card__title {
  margin: 0;
  font-size: 0.98rem;
}

.card__text {
  color: var(--ink-soft);
  margin: 0 0 8px;
  font-size: 0.9rem;
}

.table--pick tbody tr:hover {
  background: var(--tint);
}

/* A phone. The desktop chrome is a dark column beside the work; here there is
   no room for a column, so the menu lies down: the same items, the same
   colour, in a strip under the bar that scrolls sideways.
   Everything the wide layout pins or sizes to the viewport is undone here, or
   the column keeps its full height and paints over the page, which is what the
   founder photographed on 2026-10-29. */
@media (max-width: 900px) {
  .frame {
    display: block;
    /* The dark band belongs to the column, and there is no column now. */
    background: none;
    min-height: 0;
  }

  /* Nothing scrolls sideways. A strip that scrolls hides half its items
     behind a gesture nobody makes, so the menu becomes a line you tap to
     open, and the list underneath runs down the page like a list. */
  .side {
    position: static;
    width: auto;
    height: auto;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--bar-bg);
    display: block;
    overflow: visible;
    padding: 0;
  }

  .side__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    color: var(--bar-ink);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    cursor: pointer;
  }

  .side__chevron {
    width: 16px;
    height: 16px;
    flex: none;
    transition: transform 0.15s ease;
  }

  .side__toggle:checked ~ .side__summary .side__chevron {
    transform: rotate(180deg);
  }

  /* Keyboard users get the same outline the browser would give a button. */
  .side__toggle:focus-visible ~ .side__summary {
    outline: 2px solid var(--bar-ink);
    outline-offset: -2px;
  }

  /* The heading above the list is what the summary already says. */
  .side > .side__label {
    display: none;
  }

  .side__list,
  .side__empty {
    display: none;
  }

  .side__toggle:checked ~ .side__list {
    display: block;
    padding: 0 8px 10px;
  }

  .side__toggle:checked ~ .side__empty {
    display: block;
    margin: 0 14px 10px;
  }

  .side__link {
    padding: 8px 10px;
  }

  /* The sections wrap onto a second line rather than running off the edge. */
  .top {
    height: auto;
    min-height: var(--top-h);
    flex-wrap: wrap;
    padding: 0 10px 6px;
  }

  .top__nav {
    order: 3;
    width: 100%;
    overflow: visible;
    flex-wrap: wrap;
    gap: 2px;
  }

  .top__brand {
    height: var(--top-h);
  }

  .top__out {
    margin-left: auto;
  }

  .groups {
    height: auto;
    flex-wrap: wrap;
    gap: 0 6px;
    padding: 4px 10px;
    overflow: visible;
  }

  /* The brand is the width of the menu column on a wide screen. With no
     column it takes the room its own name needs and no more. */
  .top__brand {
    width: auto;
    max-width: 55vw;
    margin-left: 0;
    padding: 0 12px 0 0;
    border-right: none;
  }

  .top {
    padding: 0 10px;
  }

  .top__nav {
    overflow-x: auto;
  }

  .top__now {
    margin-right: 8px;
    padding: 2px 8px;
    font-size: 0.85rem;
  }

  /* On a phone the bar has room for the provider, the sections and the way
     out, and nothing else. The device already shows the time. */
  @media (max-width: 700px) {
    .top__now {
      display: none;
    }
  }

  .who,
  .tabs {
    position: static;
    padding-left: 14px;
    padding-right: 14px;
  }

  .groups {
    position: static;
    padding-left: 14px;
    padding-right: 14px;
  }

  .app .main {
    padding: 12px 12px 32px;
  }

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

  .facts--split {
    grid-template-columns: minmax(120px, auto) 1fr;
  }

  .top__who {
    display: none;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bar-bg: #0a1620;
    --tint: rgba(95, 185, 216, 0.12);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  .readonly {
    background: #3a2d12;
    color: #e8c88a;
    border-bottom-color: #5a4720;
  }
}

/* The gate, said plainly at the top of a staff record. */

.gate {
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  background: var(--paper);
}

.gate__title {
  margin: 0 0 6px;
  font-size: 1rem;
}

.gate p {
  margin: 0;
  color: var(--ink-soft);
}

.gate--open {
  border-left-color: #1c7c4a;
}

.gate--open .gate__title {
  color: #1c7c4a;
}

.gate--warn {
  border-left-color: #a96b00;
}

.gate--warn .gate__title {
  color: #a96b00;
}

.gate--shut {
  border-left-color: var(--error);
}

.gate--shut .gate__title {
  color: var(--error);
}

.tag--ok {
  background: #e4f3ea;
  color: #1c7c4a;
  border-color: transparent;
}

.tag--warn {
  background: #fdf1dd;
  color: #8a5800;
  border-color: transparent;
}

.panel--loud {
  background: var(--paper);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 20px;
}

/* An invitation link, shown once. Breaks anywhere so it can be selected whole. */
.codeline {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  word-break: break-all;
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  .tag--ok {
    background: #16301f;
    color: #7fd3a1;
  }

  .tag--warn {
    background: #33260f;
    color: #e5b765;
  }

  .gate--open,
  .gate--open .gate__title {
    border-left-color: #7fd3a1;
    color: #7fd3a1;
  }

  .gate--warn,
  .gate--warn .gate__title {
    border-left-color: #e5b765;
    color: #e5b765;
  }
}

/* ---------------------------------------------------------------------------
   The platform console. A different colour from the product on purpose: it is
   not the product, and nobody should be unsure which one they are looking at.
   --------------------------------------------------------------------------- */

.platform {
  --accent: #5b3fa8;
  --tint: rgba(91, 63, 168, 0.1);
  /* The same top bar as the product, in the console's own colour. It is not
     the product, and nobody should be unsure which one they are looking at.
     Because it is the same bar, --fb-top needs no override here any more. */
  --bar-bg: #241a3d;
}

/* No width rule of its own: the console's main area is the product's, beside
   the sidebar rather than floating in the middle of the window. */

/* Open support access. Deliberately loud: it should be uncomfortable to leave
   one running. */
.supportbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: #fdf1dd;
  color: #6b4400;
  border-bottom: 1px solid #e8c88a;
}

.supportbar form {
  margin-left: auto;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.tile {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tile__n {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}

.tile__l {
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.small {
  font-size: 0.8rem;
  color: var(--ink-soft);
  max-width: 340px;
  word-break: break-word;
}

@media (prefers-color-scheme: dark) {
  .platform {
    --accent: #a98ae8;
    --tint: rgba(169, 138, 232, 0.14);
    --bar-bg: #1a1430;
  }

  .supportbar {
    background: #3a2d12;
    color: #e8c88a;
    border-bottom-color: #5a4720;
  }
}

/* ---------------------------------------------------------------------------
   The form builder, and the form it builds.

   Rebuilt 2026-10-27. The shape of it is the point: a palette that stays put,
   and a canvas laid out on a twelve column grid so a half-width field is half
   a row. What you are looking at is the form, not a table describing one.
   --------------------------------------------------------------------------- */

/* The bar and the palette are both stuck to the top, one under the other, so
   the palette has to know exactly how tall the bar is. It is given a fixed
   height rather than measured, because a measured one wraps to two lines on a
   narrow window and the palette then slides underneath it. */
.fb__bar {
  position: sticky;
  top: var(--fb-top);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  height: var(--fb-bar-h);
  padding: 0;
  background: var(--wash);
  border-bottom: 1px solid var(--line);
}

.fb__count {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.fb__actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

/* Show in list, marked on the card so the columns can be seen at a glance. */
.fb-card__listed {
  flex: none;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 0.7rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

/* Don't need people: about the whole form, so in the bar beside the count. */
.fb__who {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  white-space: nowrap;
}

.fb__who--fixed {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-soft);
}

/* The two columns of the page: the palette, and everything else. The palette
   is a column of the PAGE rather than of the form, because a sticky element
   only stays put while its own parent is on screen. Put it inside the form and
   it leaves the moment the last section does, and whatever the page renders
   underneath runs up the left hand side on its own. */
.fb__layout {
  display: flex;
  align-items: flex-start;
  gap: var(--fb-gap);
  padding-top: 12px;
}

/* The column beside the palette: the builder, then whatever the page puts
   under it. Publishing and the way back live here, which is why they line up
   with the questions. */
.fb__work {
  flex: 1 1 auto;
  min-width: 0;
}

/* The settings of the chosen question, beside the form on a wide screen. On a
   narrower one the column goes and the panel opens under its card. */
.fb__settings {
  position: sticky;
  top: calc(var(--fb-top) + 12px);
  flex: none;
  width: 320px;
  max-height: calc(100vh - var(--fb-top) - 24px);
  overflow-x: hidden;
  overflow-y: auto;
}

/* Nothing in the panel is wider than the panel. A date box asks for more room
   than half of it by default, and until 2026-10-30 the two side by side pushed
   the panel's contents past its edge, clipped on the left with a scrollbar. */
.fb-panel > *,
.fb-pair > * {
  min-width: 0;
}

.fb-panel .field__input {
  width: 100%;
  min-width: 0;
}

.fb__settings-empty {
  margin: 0;
  padding: 12px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

@media (max-width: 1179px) {
  .fb__settings {
    display: none;
  }
}

.fb-panel {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}

.fb-panel.is-inline {
  grid-column: 1 / -1;
}

.fb-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fb-panel__type {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.fb-panel__label {
  margin: -4px 0 0;
  font-weight: 600;
  font-size: 0.88rem;
}

.fb-panel__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  font-size: 0.78rem;
}

.fb-panel__opts[hidden] {
  display: none;
}

.fb-panel__extra {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

/* The palette stays on screen. Building a twenty question form previously
   meant scrolling to the foot of a section for every single field. */
.fb__palette {
  position: sticky;
  top: calc(var(--fb-top) + 12px);
  z-index: 1;
  flex: none;
  width: var(--fb-pal-w);
  max-height: calc(100vh - var(--fb-top) - 24px);
  overflow-y: auto;
  padding: 12px 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.fb__palette-h {
  margin: 12px 2px 4px;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.fb__palette-h:first-child {
  margin-top: 0;
}

.fb__palette-hint {
  margin: 0 2px 8px;
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.fb__palette-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fb-pal {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  cursor: grab;
}

.fb-pal:hover {
  border-color: var(--accent);
  background: var(--tint);
}

.fb-pal:active {
  cursor: grabbing;
}

.fb-pal--sec {
  font-weight: 600;
  color: var(--accent);
}

.fb__canvas {
  display: grid;
  gap: 8px;
}

/* A section is a real container here, which the product this is measured
   against does not have: theirs is a heading in a flat list. */
.fb-sec {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px 10px;
}

.fb-sec__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.fb-sec__n {
  flex: none;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.fb-sec__title {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-weight: 600;
  padding: 5px 8px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid transparent;
  border-radius: 6px;
}

.fb-sec__title:hover {
  border-color: var(--line);
}

.fb-sec__title:focus {
  border-color: var(--accent);
  outline: none;
}

.fb-sec__more {
  margin-bottom: 6px;
}

.fb-sec__more summary {
  font-size: 0.78rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.fb-sec__help {
  margin-top: 6px;
}

/* The canvas grid. --span is set per card from the width buttons. */
.fb-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 6px;
  min-height: 40px;
  border-radius: 6px;
}

.fb-grid.is-over {
  outline: 2px dashed var(--accent);
  outline-offset: 3px;
}

.fb-grid__hint {
  grid-column: span 12;
  margin: 0;
  padding: 14px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

/* A card is the question as it will look: its label and the shape of its
   answer. Its settings are in the panel. Compacted 2026-10-29: a card was
   about 190 pixels of controls; it is now as tall as the question. */
.fb-card {
  grid-column: span var(--span, 12);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 8px 7px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}

.fb-card:hover {
  border-color: var(--line-field);
}

.fb-card.is-chosen {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.fb-card.is-dragging {
  opacity: 0.4;
}

.fb-card__grip {
  color: var(--ink-soft);
  cursor: grab;
  font-size: 0.9rem;
  line-height: 1;
}

.fb-card__type {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
}

.fb-card__sp {
  flex: 1 1 auto;
}

/* Larger from 2026-10-30, at the founder's request: the arrows, copy and
   cross were hard to see and to hit. */
.fb-mini {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}

.fb-mini:hover {
  color: var(--ink);
  background: var(--wash);
  border-color: var(--line);
}

.fb-mini--danger:hover {
  color: var(--error);
  border-color: var(--error);
}

.fb-card__head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* The question, typed straight onto the card. It looks like the label it
   will be on the form until you are typing in it. */
.fb-card__label {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 2px 4px;
  margin-left: -4px;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  text-overflow: ellipsis;
}

.fb-card__label:hover {
  border-color: var(--line);
}

.fb-card__label:focus {
  border-color: var(--accent);
  background: var(--paper);
  outline: none;
}

.fb-card__req {
  flex: none;
  color: var(--error);
  font-weight: 700;
}

/* The type is not shown on the card: the shape of the answer already says
   it, the panel names it, and on a narrow question it pushed the question
   itself out of sight. Kept for a screen reader. */
.fb-card__type {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Move, add, duplicate and remove: a small bar over the card's top edge when
   you are on it, so they never take room from the question. */
.fb-card {
  position: relative;
}

.fb-card__tools {
  position: absolute;
  top: -15px;
  right: 6px;
  z-index: 2;
  display: inline-flex;
  gap: 2px;
  padding: 0 3px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 15px;
  visibility: hidden;
}

.fb-card__tools .fb-mini {
  width: 26px;
  height: 26px;
}

.fb-card:hover .fb-card__tools,
.fb-card.is-chosen .fb-card__tools,
.fb-card:focus-within .fb-card__tools {
  visibility: visible;
}

/* A touch screen has no hover: the bar is there on the chosen card, which a
   tap chooses. */



.fb-foot-lbl {
  font-weight: 600;
}

.fb-widths {
  display: inline-flex;
  gap: 2px;
}

.fb-widths button {
  min-width: 26px;
  padding: 2px 6px;
  font: inherit;
  font-size: 0.76rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
}

.fb-widths button:hover {
  border-color: var(--accent);
}

.fb-widths button.on {
  color: var(--accent-ink);
  background: var(--ink);
  border-color: var(--ink);
  font-weight: 600;
}

.fb-req {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fb-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}

.fb-pair .field__hint {
  grid-column: span 2;
}

.fb__textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
}

/* Once JavaScript has drawn the builder, the JSON panel is a way in and out
   rather than the editor, so it starts closed. */
.fb.is-enhanced .fb__json {
  margin-top: 20px;
}


@media (max-width: 900px) {
  .fb__layout {
    display: block;
  }


  /* On a phone the palette becomes a row across the top: still one tap to add
     a field, still without scrolling to the foot of anything. */
  .fb__palette {
    position: static;
    width: auto;
    max-height: none;
    margin-bottom: 12px;
  }

  .fb__palette-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .fb-pal {
    width: auto;
  }

  /* Four cards to a row needs a mouse and a wide screen. Below that every
     field is full width, which is also how the form itself renders. */
  .fb-card {
    grid-column: span 12;
  }
}

/* The form itself, as a provider sees it. */

/* Compact, 2026-10-29, at the founder's request: a supervision form of
   eleven questions went from 849 pixels to about 650, still easy to read.
   Space separates things that are different; a section is one thing. */
.formview__section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad-y) var(--pad-x);
  margin-bottom: 8px;
}

.formview__title {
  margin: 0 0 6px;
  font-size: 0.98rem;
}

.formview__help {
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin: -2px 0 8px;
}

.formview__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 8px 12px;
}

.formview .field {
  gap: 2px;
}

.formview .field__input {
  padding: 4px 8px;
}

.formview .field__hint {
  font-size: 0.78rem;
}

.formview__field {
  grid-column: span 12;
}

/* Six columns, expressed on the twelve column grid, so a half and a third
   land on exact boundaries. The four old names are kept because forms
   authored before 2026-10-29 still carry them. */
.formview__field--w1 { grid-column: span 2; }
.formview__field--w2 { grid-column: span 4; }
.formview__field--w3 { grid-column: span 6; }
.formview__field--w4 { grid-column: span 8; }
.formview__field--w5 { grid-column: span 10; }
.formview__field--w6 { grid-column: span 12; }

.formview__field--half { grid-column: span 6; }
.formview__field--third { grid-column: span 4; }
.formview__field--quarter { grid-column: span 3; }

/* The author chose the width when they chose the column. A date, a time or a
   number keeps its own narrow size everywhere else in the product, and inside
   a form it fills the column it was put in, so a row of thirds is a row of
   equal boxes. */
.formview .field__input,
.formview .field__input--short {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

/* What is attached to an answer: a thumbnail for a photograph, an icon for a
   document, and the way to add another. */
.attach {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.attach__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

.attach__thumb {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  background: var(--wash);
}

.attach__doc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 4px;
  background: var(--wash);
  color: var(--ink-soft);
}

.attach__doc .icon {
  width: 26px;
  height: 26px;
}

.attach__name {
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.attach__add {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.attach__signed {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.attach__signature {
  display: block;
  max-width: 320px;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}

/* The shape of an answer, on the builder's canvas: a box, a line of choices,
   a pad to sign, drawn from the question's settings so the canvas reads as
   the form. Not a control: nothing here is filled in. */
.fb-card__shape {
  min-width: 0;
  color: var(--ink-soft);
  font-size: 0.76rem;
}

.fb-shape__box {
  display: block;
  height: 24px;
  padding: 3px 7px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--wash);
}

.fb-shape__box--tall {
  height: 44px;
}

.fb-shape__box--short {
  max-width: 130px;
}

.fb-shape__box--select {
  max-width: 260px;
}

.fb-shape__box--dashed,
.fb-shape__box--sign {
  border-style: dashed;
}

.fb-shape__box--sign {
  height: 40px;
  font-style: italic;
}

.fb-shape__choices {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
}

.fb-shape__choice {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fb-shape__mark {
  flex: none;
  width: 10px;
  height: 10px;
  border: 1px solid var(--line-field);
  background: var(--paper);
}

.fb-shape__mark--round {
  border-radius: 50%;
}

.fb-shape__mark--square {
  border-radius: 2px;
}

.fb-shape__more,
.fb-shape__end {
  font-style: italic;
}

.fb-shape__info {
  display: block;
  padding: 3px 8px;
  border-left: 3px solid var(--accent);
  background: var(--wash);
}

/* Narrower and wider, with what it is between them. */
.fb-widths {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.fb-w {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-field);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  line-height: 1;
  cursor: pointer;
}

.fb-w:disabled {
  opacity: 0.4;
  cursor: default;
}

.fb-w-now {
  min-width: 3.4em;
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* An empty pad, where a signature is possible but not being taken: the
   preview, and a form nobody has opened to fill in yet. */
.sign__pad--empty {
  height: 64px;
}

.sign--shown {
  max-width: 420px;
}

/* The pad itself. Wide, short, and obviously a place to write. */
.sign {
  display: grid;
  gap: 6px;
  margin-bottom: 8px;
}

.sign__pad {
  width: 100%;
  max-width: 420px;
  height: 100px;
  border: 1px dashed var(--line-field);
  border-radius: var(--radius);
  background: var(--paper);
  touch-action: none;
  cursor: crosshair;
}

.sign__actions {
  display: flex;
  gap: 8px;
}

/* A form that exists to carry an action, with nothing in it to look at. */
.offstage {
  display: contents;
}

.formview__info {
  background: var(--wash);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
}

.formview__info p {
  margin: 4px 0 0;
  color: var(--ink-soft);
}

.formview__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding-top: 2px;
}

/* A rating scale on one line: the number beside its button rather than
   underneath, which was a second line for every scale on the form. */
.formview__scale {
  display: flex;
  align-items: center;
  gap: 4px 12px;
  flex-wrap: wrap;
  padding-top: 2px;
}

.formview__point {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.85rem;
}

.formview__scale-end {
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* Required, as a red asterisk. A screen reader hears "(required)" from the
   hidden text beside it, so nothing is lost by the word going. */
.req {
  color: var(--error);
  font-size: 0.9rem;
  font-weight: 700;
  margin-left: 2px;
}

@media (max-width: 700px) {
  .formview__field--w1,
  .formview__field--w2,
  .formview__field--w3,
  .formview__field--w4,
  .formview__field--w5,
  .formview__field--half,
  .formview__field--third,
  .formview__field--quarter {
    grid-column: span 12;
  }
}

/* On a phone the top bar has to hold five sections and a sign-out button, so
   the brand gives up its space first and nothing is allowed to wrap. */
.button--ghost,
.top__brand {
  white-space: nowrap;
}

@media (max-width: 620px) {
  .top {
    padding: 0 8px;
  }

  .top__brand {
    font-size: 0.82rem;
    padding-right: 9px;
    margin-right: 5px;
  }

  .top__link {
    padding: 0 9px;
    font-size: 0.85rem;
  }

  .button--ghost {
    padding: 4px 9px;
    font-size: 0.78rem;
  }
}

/* ---------------------------------------------------------------------------
   The landing page.
   A manager meets exceptions, not statistics. Each tile is a link to the list
   it counts, so the number is a way into the work rather than a report about
   it. Tones: urgent where somebody may already be working without cover, warn
   where that is about to be true, calm where it is simply work waiting.
   --------------------------------------------------------------------------- */

/* Two columns wherever there is room for two, because a screen read top to
   bottom in one narrow strip wastes most of itself. Below the breakpoint they
   stack, and nothing is lost. */
.cols {
  display: grid;
  gap: var(--gap);
  align-items: start;
}

@media (min-width: 1180px) {
  .cols--rail {
    grid-template-columns: minmax(300px, 420px) 1fr;
  }

  .cols--even {
    grid-template-columns: 1fr 1fr;
  }
}

.section__title {
  margin: 14px 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: var(--stack);
}

.tile {
  display: block;
  padding: 9px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow);
}

.tile:hover {
  border-color: var(--accent);
  border-left-width: 4px;
}

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

.tile__count {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
}

.tile__unit {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
}

.tile__line {
  display: block;
  margin-top: 5px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.tile--urgent {
  border-left-color: var(--error);
}

.tile--urgent .tile__count {
  color: var(--error);
}

.tile--warn {
  border-left-color: #a96b00;
}

.tile--warn .tile__count {
  color: #a96b00;
}

.tile--calm {
  border-left-color: var(--accent);
}

.tile--calm .tile__count {
  color: var(--accent);
}

/* The activity feed: sentences, never identifiers. */

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

.feed__row {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}

.feed__row:last-child {
  border-bottom: none;
}

.feed__when {
  flex: none;
  width: 108px;
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.feed__said {
  min-width: 0;
}

.feed__subject {
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .tile--warn {
    border-left-color: #e5b765;
  }

  .tile--warn .tile__count {
    color: #e5b765;
  }
}

@media (max-width: 620px) {
  .feed__row {
    flex-direction: column;
    gap: 2px;
  }

  .feed__when {
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
   Filling a form in, and reading one back.
   --------------------------------------------------------------------------- */

/* A list of forms that can be started: a button and a note about it. */
.pick {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pick__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}

.pick__row:last-child {
  border-bottom: none;
}

.pick__meta {
  color: var(--ink-soft);
  font-size: 0.82rem;
}

/* A question that was answered wrongly, shown where the answer is rather than
   in a list at the top, because a list at the top means scrolling twice. */
.field__wrong {
  display: block;
  margin-top: 4px;
  color: var(--error);
  font-size: 0.82rem;
  font-weight: 600;
}

.formview__field.is-wrong .field__input {
  border-color: var(--error);
}

/* Reading a completed entry. Every question is shown, including the ones left
   blank: what was not answered is part of the record. */
.answer {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0;
  border-bottom: 1px solid var(--line);
}

/* Reading a completed entry: in a wide question the question sits beside its
   answer rather than above it, which halves the rows of a long form. A narrow
   question keeps them stacked, where side by side would squeeze both. */
@media (min-width: 701px) {
  .formview__field--w4 .answer,
  .formview__field--w5 .answer,
  .formview__field--w6 .answer {
    display: grid;
    grid-template-columns: minmax(160px, 32%) 1fr;
    gap: 2px 14px;
    align-items: baseline;
  }
}

.answer__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.answer__value {
  white-space: pre-wrap;
}

.answer__blank {
  color: var(--ink-soft);
  font-style: italic;
}

/* The care record: one day at a time. */
.day {
  margin-bottom: 20px;
}

.day__date {
  margin: 0 0 6px;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}

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

.day__event {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 2px 12px;
  padding: 7px 0;
}

.day__kind {
  grid-row: span 2;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  padding-top: 2px;
}

.day__who {
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* A form reached by a link, by somebody with no account. Wider than a sign-in
   box, because it holds a whole form rather than two fields. */
.auth--wide {
  max-width: 760px;
}

@media (max-width: 620px) {
  .day__event {
    grid-template-columns: 1fr;
  }

  .day__kind {
    grid-row: auto;
  }
}

/* Dragging in the builder, done with pointer events rather than the browser's
   own drag and drop. See the note in public/js/form-builder.js for why. */

.fb-pal,
.fb-card__grip {
  user-select: none;
  -webkit-user-select: none;
}

.fb-card__grip {
  cursor: grab;
}

body.fb-dragging,
body.fb-dragging * {
  cursor: grabbing !important;
  user-select: none;
}

/* What follows the pointer. It must never be what is under the pointer, or
   the drop target can never be found. */
.fb-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
  transform: translate(-1000px, -1000px);
  margin: 8px 0 0 12px;
  padding: 5px 10px;
  max-width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8rem;
  color: var(--accent-ink);
  background: var(--ink);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(16, 32, 44, 0.25);
}

/* A question with no label yet. A draft saves with it; publishing will not, so
   it is marked while there is still time to do something about it rather than
   reported as a wall of errors at the publish button. */
.fb-card.is-unlabelled .fb-card__label {
  border-style: dashed;
}

.fb__count.is-wanting {
  color: #a96b00;
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  .fb__count.is-wanting {
    color: #e5b765;
  }
}

/* A list of providers to tick. Two or three columns where there is room, so a
   platform with thirty of them is not thirty lines of scrolling. */
.pickers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px 14px;
  margin: 8px 0 10px;
  max-height: 320px;
  overflow-y: auto;
}

/* A list of names: as many columns as the screen has room for, and taller
   before it starts scrolling, because scrolling inside a page is the thing
   that hides the name somebody was looking for. */
.pickers--wide {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  max-height: 46vh;
}

.pickers--wide .small {
  margin-left: 5px;
}

/* ---------------------------------------------------------------------------
   Edit Menu, in the console (migration 033). The tree on the left is the menu
   as it is built; whatever is chosen is edited on the right. Compact, because
   the whole menu is ninety-odd rows and the point is to see its shape.
   --------------------------------------------------------------------------- */

.menu-editor {
  display: grid;
  gap: var(--gap);
  align-items: start;
}

@media (min-width: 1100px) {
  .menu-editor {
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr);
  }

  /* The editing panel stays in view while the tree scrolls past it. */
  .menu-editor__side {
    position: sticky;
    top: calc(var(--chrome-h, 48px) + 8px);
  }
}

.panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap);
}

.menu-publish {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gap);
}

.inline-form--grow {
  flex: 1 1 360px;
}

.menu-editor__group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 10px 2px;
  margin: 0 0 var(--stack);
}

.menu-editor__more {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gap);
  margin-top: var(--stack);
  padding-top: var(--stack);
  border-top: 1px solid var(--line);
}

.menu-editor__help li {
  margin-bottom: 6px;
}

.mtree,
.mtree__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mtree__list {
  margin-left: 18px;
  border-left: 1px solid var(--line);
}

.mtree__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 2px 6px;
  border-radius: 4px;
  min-height: 28px;
}

.mtree__row:hover {
  background: var(--wash);
}

.mtree__node.is-chosen > .mtree__row {
  background: var(--wash);
  box-shadow: inset 3px 0 0 var(--accent);
}

.mtree__kind {
  flex: 0 0 auto;
  min-width: 52px;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

.mtree__name {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.mtree__name:hover {
  text-decoration: underline;
}

.mtree__node--section > .mtree__row .mtree__name {
  font-size: 1.02rem;
}

.mtree__node--item > .mtree__row .mtree__name {
  font-weight: 400;
}

.mtree__note {
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.mtree__acts {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mtree__btn {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
  width: 24px;
  height: 22px;
  padding: 0;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.mtree__btn:hover {
  border-color: var(--accent);
}

.mtree__btn--danger:hover {
  color: var(--error);
  border-color: var(--error);
}

.button--danger {
  color: var(--error);
}

.mtree__add {
  font-size: 0.78rem;
  color: var(--accent);
  white-space: nowrap;
}

.mtree__empty {
  margin: 0 0 4px 24px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* Dragging in Edit Menu: a handle on every row, a line where it will land, a
   label that follows the pointer, and a brief highlight where a row arrives. */
.mtree__grip {
  flex: 0 0 auto;
  cursor: grab;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1;
  padding: 0 2px;
  user-select: none;
  touch-action: none;
}

.mtree__grip:hover {
  color: var(--accent);
}

.mtree__drop {
  height: 0;
  margin: 1px 0;
  border-top: 2px solid var(--accent);
  list-style: none;
}

.mtree__ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.82rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.mtree__node.is-dragging > .mtree__row {
  opacity: 0.4;
}

.mtree__node.is-moved > .mtree__row {
  background: var(--wash);
  box-shadow: inset 3px 0 0 var(--accent);
}

body.is-dragging-menu,
body.is-dragging-menu * {
  cursor: grabbing !important;
  user-select: none;
}

/* Without the script, a moved row is scrolled to: clear of the console's
   own bars rather than under them. */
.mtree__node {
  scroll-margin-top: 140px;
}

/* The Person question's search box (public/js/person-picker.js). Type a few
   letters, pick from what matches. The dropdown underneath is hidden and is
   still what the form posts. */
.pp {
  position: relative;
}

.pp__row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.pp__input {
  flex: 1 1 auto;
  min-width: 0;
}

.pp__clear[hidden] {
  display: none;
}

.pp__list {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 3px;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line-field);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(16, 32, 44, 0.16);
}

.pp__list[hidden] {
  display: none;
}

.pp__item {
  display: flex;
  flex-direction: column;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}

.pp__item:hover,
.pp__item.is-active {
  background: var(--wash);
}

.pp__name {
  font-size: 0.86rem;
}

.pp__detail {
  font-size: 0.74rem;
  color: var(--ink-soft);
}

.pp__none {
  padding: 6px 8px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}

/* The Person question's settings in the builder's panel, and the note on its
   card that it files the form. */
.fb-person {
  display: grid;
  gap: 6px;
}

.fb-person__who {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 0;
  border: 0;
}

.fb-person__who legend {
  width: 100%;
  margin-bottom: 2px;
}

.fb-person__file {
  font-weight: 600;
}

.fb-shape__tag {
  display: inline-block;
  margin-top: 3px;
  padding: 0 6px;
  font-size: 0.68rem;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 9px;
}

/* The field on the public referral page that only robots fill in. Off the
   page rather than hidden, because some robots skip hidden fields. */
.trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* A tick in a question's settings, with what it does under it. */
.fb-tick {
  display: grid;
  gap: 2px;
}

/* Vacancies (migration 039): the advert's own words keep their line breaks,
   and the public list of jobs reads as a compact list rather than cards. */
.prewrap {
  white-space: pre-wrap;
}

.jobs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.jobs__item {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.jobs__title {
  font-weight: 600;
}

.jobs__facts {
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
   Form builder tweaks, 2026-10-30: Image, Heading, New row, pages and Show
   only when. The founder's list; DECISIONS.md has the reasoning.
   --------------------------------------------------------------------------- */

/* What a form's script hides stays hidden, whatever display a class gives it. */
.formview [hidden],
.button[hidden] {
  display: none !important;
}

/* A heading inside a section: words, nothing to fill in. */
.formview__heading {
  margin: 4px 0 0;
  font-size: 0.95rem;
  font-weight: 700;
}

/* An Image question's photograph, at the width of its question. */
.formview__image {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--wash);
}

.formview__image-empty {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  border: 1px dashed var(--line-field);
  border-radius: var(--radius);
}

/* New row: the question starts at the left edge, whatever is before it. A
   width is a span, and starting at column one has to keep that span. */
.formview__field--row.formview__field--w1 { grid-column: 1 / span 2; }
.formview__field--row.formview__field--w2 { grid-column: 1 / span 4; }
.formview__field--row.formview__field--w3 { grid-column: 1 / span 6; }
.formview__field--row.formview__field--w4 { grid-column: 1 / span 8; }
.formview__field--row.formview__field--w5 { grid-column: 1 / span 10; }
.formview__field--row.formview__field--w6 { grid-column: 1 / span 12; }

@media (max-width: 700px) {
  .formview .formview__field--row {
    grid-column: 1 / -1;
  }
}

.fb-card.is-new-row {
  grid-column: 1 / span var(--span, 12);
}

/* Pages. Without the script every page shows, one under the other, each with
   its number. With it, one at a time, named across the top. */
.formview__page-n {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.formview.is-flowing .formview__page:not(.is-current),
.formview.is-flowing .formview__page-n {
  display: none;
}

.formview__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.formview__step {
  padding: 4px 10px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  cursor: pointer;
}

.formview__step:hover {
  border-color: var(--accent);
}

.formview__step[aria-current="step"] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.formview__nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 8px;
}

.formview__nav .button:only-child,
.formview__nav .button[hidden] + .button {
  margin-left: auto;
}

/* The builder: a heading card reads as a heading, an image as a photo. */
.fb-card.is-heading .fb-card__label {
  font-size: 1rem;
  font-weight: 700;
}

.fb-card.is-heading .fb-card__shape:empty {
  display: none;
}

.fb-shape__box--photo {
  width: 72px;
  height: 56px;
  display: grid;
  place-items: center;
  border-style: dashed;
}

.fb-shape__tag--when {
  color: var(--ink-soft);
  border-color: var(--line-field);
}

/* Where each page begins, once a form has more than one. */
.fb-page-band {
  margin: 6px 0 -2px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}

.fb-sec__page {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.fb-sec__cond {
  margin: 0 0 4px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.fb-sec__when {
  margin-top: 6px;
}

/* Show only when, in the panel and a section's guidance. */
.fb-when {
  display: grid;
  gap: 4px;
}

.fb-when__answers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 0.8rem;
}