/* ═══════════════════════════════════════════════════════════════════════
   5Stones pre migration intake
   Same tokens and the same voice as the deck, but a working document
   rather than a presented one: denser, plainer, and built to be filled in
   on a laptop and printed at the end.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --paper:      #F5F1E8;
  --linen:      #EEE9DC;
  --stone-1:    #E7E1D2;
  --stone-2:    #DCD5C3;

  --ink-strong: #1E211C;
  --ink-mid:    #2C302A;
  --ink-faint:  #6E7065;
  --ink-deep:   #191C17;

  --bronze:      #9A744C;
  --bronze-deep: #7C5C34;
  --bronze-pale: #D3B489;

  --sage:       #5E7A63;
  --sage-deep:  #4A6350;

  --line:       rgba(30, 33, 28, 0.16);
  --line-soft:  rgba(30, 33, 28, 0.09);
  --line-light: rgba(245, 241, 232, 0.22);

  --body-ink:     rgba(30, 33, 28, 0.80);
  --body-ink-dim: rgba(30, 33, 28, 0.58);
  --body-light:   rgba(245, 241, 232, 0.76);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --gutter: clamp(20px, 4vw, 72px);
  --radius: 10px;
  --shell-h: 64px;
  --ease-out: cubic-bezier(0.22, 0.85, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--body-ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 400; color: var(--ink-strong); }
p { margin: 0; }
a { color: var(--bronze-deep); }

/* ── Shell ───────────────────────────────────────────────────────────── */
.shell {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--shell-h);
  display: flex;
  align-items: center;
  gap: 18px;
  padding-inline: var(--gutter);
  background: var(--ink-deep);
  border-bottom: 1px solid var(--line-light);
}
.brandmark {
  display: block;
  aspect-ratio: 643.6 / 130;
  background: var(--paper);
  -webkit-mask: url("../assets/5stones-wordmark.svg") center / contain no-repeat;
          mask: url("../assets/5stones-wordmark.svg") center / contain no-repeat;
}
.shell__logo { height: 17px; width: auto; flex: none; opacity: 0.94; }
.shell__here {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bronze-pale);
}
.shell__save {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.5);
  white-space: nowrap;
}
/* On a phone the page title is already the first thing under the shell, so
   the shell keeps the mark and the save state and drops the repeat. */
@media (max-width: 560px) {
  .shell__here { display: none; }
}

/* ── Page ────────────────────────────────────────────────────────────── */
.wrap { max-width: 1320px; margin-inline: auto; padding: clamp(28px, 4vw, 56px) var(--gutter) 96px; }

.intro { max-width: 72ch; }
.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bronze-deep);
}
.intro h1 { margin-top: 8px; font-family: var(--serif); font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; }
.intro .rule { margin: 14px 0 16px; }
.rule { width: 62px; height: 2px; background: var(--bronze); margin: 18px 0 20px; }
.lede { font-size: 15.5px; color: var(--body-ink); }
.lede + .lede { margin-top: 8px; }
.lede--note { font-size: 13.5px; color: var(--body-ink-dim); }
.noscript {
  margin-top: 24px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--stone-1);
}

/* ── Two column layout: the form, and the scope read beside it ───────── */
.layout {
  margin-top: clamp(26px, 3vw, 44px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 2.4vw, 34px);
  align-items: start;
}
@media (min-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 1fr) 260px; }
  .scope__inner { position: sticky; top: calc(var(--shell-h) + 20px); }
}

/* The map narrows on a smaller laptop so the seven column tables still fit
   the form without scrolling. */
@media (min-width: 1280px) {
  .layout { grid-template-columns: minmax(0, 1fr) 320px; }
}

/* ── Sections ────────────────────────────────────────────────────────── */
/* One section shows at a time; the rest carry [hidden]. Submitting is the
   last step, so it sits in the same column with no gap above it. */
.sect[hidden], .send[hidden] { display: none; }
/* A slow fade between sections. Only the section moves; the page around it
   stays where it is. */
.sect, .layout__main .send { transition: opacity 500ms ease; }
.sect.is-fading, .layout__main .send.is-fading { opacity: 0; }
.layout__main { min-width: 0; }
.layout__main .send { margin-top: 0; }
.sect, .send { scroll-margin-top: calc(var(--shell-h) + 20px); }
.sect h2:focus, .send h2:focus { outline: none; }

.stepnav {
  margin-top: clamp(22px, 2.6vw, 32px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.stepnav__next { margin-left: auto; }
@media (max-width: 560px) {
  .stepnav .btn { flex: 1 1 100%; }
  .stepnav__next { order: -1; }
}
.sect {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--linen);
  padding: clamp(20px, 2.2vw, 30px);
}
/* One section shows at a time, so no section is spaced against the hidden
   ones before it. The visible one starts level with the map beside it. */
.sect + .sect { margin-top: 0; }
.sect__head { display: flex; align-items: baseline; gap: 14px; }
.sect__n {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1;
  color: var(--bronze-deep);
  flex: none;
}
.sect__t { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 25px); line-height: 1.2; }
.sect__why {
  margin-top: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--body-ink-dim);
  max-width: 78ch;
}
.sect__body { margin-top: clamp(18px, 2vw, 24px); }

/* ── Fields ──────────────────────────────────────────────────────────── */
/* Two even columns, so short questions pair up edge to edge with the wide
   ones under them. auto-fit made three tracks that a wide field kept open,
   and two short fields then sat in two of three with a hole at the end. */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 20px;
}
@media (max-width: 640px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
}
/* Each field is three rows of the grid: question, control, hint. As a
   subgrid, two fields side by side share those rows, so a question that
   wraps to two lines pushes its neighbour's control down with it and the
   two boxes stay level. */
.field {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 6px;
  align-content: start;
  min-width: 0;
}
.field > label, .field > .legend { align-self: end; }
.field > .choices:only-child { grid-row: 2; }
/* A conditional question sets [hidden], and the browser's own rule for that is
   display: none at the weakest possible specificity, which .field above beats.
   Without this line the question is hidden to the script and still on the page
   to the family, which is the worst of both. */
.field[hidden], .group[hidden] { display: none; }
.field--wide, .field--fill { grid-column: 1 / -1; }
.field > label, .legend {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-mid);
}
.hint { font-size: 12px; color: var(--ink-faint); }
/* Everything the family types in, styled by exclusion rather than by a list
   of types. The list version silently missed input[type="tel"], which then
   rendered as a browser default box: white, shorter, wrong corners, sitting
   next to six fields that matched. Any type added later is covered now. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink-strong);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0 11px;
  height: 40px;
  line-height: 38px;
  width: 100%;
  min-width: 0;
  transition: border-color 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
textarea { height: auto; min-height: 78px; padding: 9px 11px; resize: vertical; line-height: 1.5; }
/* A year is typed, not stepped, and the spinner ate a third of a narrow cell. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--bronze);
  box-shadow: 0 0 0 3px rgba(154, 116, 76, 0.16);
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--bronze-deep) 50%), linear-gradient(135deg, var(--bronze-deep) 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }

/* Choice sets: radios and checkboxes as quiet pills. */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice span {
  display: block;
  font-size: 13px;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--body-ink);
  cursor: pointer;
  transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.choice input:checked + span { background: var(--bronze-deep); border-color: var(--bronze-deep); color: var(--paper); }
.choice input:focus-visible + span { outline: 2px solid var(--bronze-deep); outline-offset: 2px; }
fieldset { margin: 0; padding: 0; border: 0; }
.legend { display: block; }

/* A sub heading inside a section, where one section covers two different
   kinds of question and the reader should not have to work out the split. */
.group { margin-top: 6px; }
.group:first-child { margin-top: 0; }
.group__t {
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink-strong);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}
.group__h { margin-top: 7px; font-size: 12.5px; color: var(--ink-faint); }

/* ── Repeatable tables ───────────────────────────────────────────────── */
.rows { margin-top: 4px; }
.rows__scroll { overflow-x: auto; }
/* The scroller carries the width, so the table is sized for the controls to
   be readable rather than squeezed to the column. A table sizes itself to its
   own columns rather than to a fixed floor, so a short table sits inside the
   column and only a genuinely wide one scrolls. */
/* Fixed layout: every column is the same width apart from years, which are
   short, and the remove button. Sizing by header text gave each table its own
   ragged set of widths. The minimum width is set per table from its columns,
   so a narrow screen scrolls the table rather than crushing it. */
.rows table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rows col.col--year { width: 80px; }
.rows col.col--kill { width: 40px; }
.rows th {
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0 8px 8px 0;
  vertical-align: bottom;
  line-height: 1.35;
}
.rows td { padding: 0 8px 8px 0; vertical-align: top; }
.rows td:last-child, .rows th:last-child { padding-right: 0; }
.rows input, .rows select { font-size: 13.5px; padding: 0 9px; }
.rows select { padding-right: 28px; background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; }
.rowkill {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-faint);
  border-radius: 7px;
  width: 100%;
  height: 40px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}
.rowkill:hover { border-color: var(--bronze); color: var(--bronze-deep); }
.rowadd {
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-mid);
  cursor: pointer;
}
.rowadd:hover { border-color: var(--bronze); color: var(--bronze-deep); }
.rows__empty { font-size: 13px; color: var(--ink-faint); padding-bottom: 8px; }

/* ── Scope read ──────────────────────────────────────────────────────
   A progress card that keeps up with the form. On a wide screen it is a
   sticky column that never grows past the viewport: the head is fixed
   inside the card and the body scrolls on its own. Below that width it
   becomes a bar pinned to the bottom of the screen that opens on tap, so
   it is still answering the question "how far am I and what have I set
   off" without taking the whole screen to do it. */
.scope__inner {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ink-deep);
  color: var(--body-light);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* The card opens on progress, so the body carries its own top padding and
   the first block needs no rule above it. */
.scope__body { padding: 20px 22px; overflow-y: auto; overscroll-behavior: contain; }

.scope__toggle { display: none; }

.scope__label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze-pale);
}
.scope__band { margin-top: 10px; font-family: var(--serif); font-size: 27px; line-height: 1.15; color: var(--paper); }
.scope__sub { margin-top: 6px; font-size: 13px; color: rgba(245, 241, 232, 0.6); }
.scope__meter { margin-top: 14px; height: 4px; border-radius: 999px; background: rgba(245, 241, 232, 0.16); overflow: hidden; }
.scope__meter span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--bronze), var(--bronze-pale)); transition: width 420ms var(--ease-out); }
.scope__meter--prog span { background: linear-gradient(90deg, var(--sage), #8FA893); }
.scope__meterkey {
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.4);
}

.scope__block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-light); }
.scope__block:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.scope__h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.5);
}
.scope__count { margin-left: auto; letter-spacing: 0.08em; color: var(--bronze-pale); white-space: nowrap; }
.scope__v { margin-top: 6px; font-family: var(--serif); font-size: 19px; color: var(--paper); }

/* The section list doubles as navigation: a tap goes to that section. */
.scope__steps { margin: 12px 0 0; padding: 0; list-style: none; }
.scope__steps li { margin-bottom: 2px; }
.scope__step {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 5px 6px 5px 0;
  background: none;
  border: 0;
  border-radius: 5px;
  font-family: var(--sans);
  font-size: 12.5px;
  color: rgba(245, 241, 232, 0.62);
  text-align: left;
  cursor: pointer;
  transition: color 180ms var(--ease-out), background 180ms var(--ease-out);
}
.scope__step:hover { color: var(--paper); background: rgba(245, 241, 232, 0.06); }
.scope__step:focus-visible { outline: 2px solid var(--bronze-pale); outline-offset: 1px; }
.scope__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(245, 241, 232, 0.35);
  margin-left: 4px;
}
.scope__step[data-state="part"] .scope__dot { background: linear-gradient(90deg, var(--bronze-pale) 50%, transparent 50%); border-color: var(--bronze-pale); }
.scope__step[data-state="done"] .scope__dot { background: var(--bronze-pale); border-color: var(--bronze-pale); }
.scope__step[data-state="done"] { color: var(--paper); }
/* The section on screen. */
.scope__step[aria-current="step"] { color: var(--paper); background: rgba(245, 241, 232, 0.1); }
.scope__step[aria-current="step"] .scope__stepn { color: var(--bronze-pale); }
.scope__step--send .scope__dot { border-radius: 2px; }
.scope__stepn { flex: none; font-family: var(--serif); font-size: 12px; color: rgba(245, 241, 232, 0.4); width: 12px; }
.scope__stept { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scope__steppct { margin-left: auto; padding-left: 8px; font-size: 11px; color: rgba(245, 241, 232, 0.38); flex: none; }

.scope__convs, .scope__flags { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }
.scope__convs li, .scope__flags li { padding: 5px 0; border-bottom: 1px solid rgba(245, 241, 232, 0.1); }
.scope__convs li:last-child, .scope__flags li:last-child { border-bottom: 0; }
.scope__convs b { font-family: var(--serif); font-weight: 400; color: var(--bronze-pale); margin-right: 7px; }
.scope__flags li { padding-left: 15px; position: relative; }
.scope__flags li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--bronze); }
.scope__flags li.scope__empty::before { display: none; }
.scope__flags li.scope__empty { padding-left: 0; }
/* Notes are findings that are not faults, so they are marked in sage rather
   than bronze and read as context rather than as something to fix. */
.scope__notes { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }
.scope__notes li { padding: 5px 0 5px 15px; position: relative; border-bottom: 1px solid rgba(245, 241, 232, 0.1); color: rgba(245, 241, 232, 0.66); }
.scope__notes li:last-child { border-bottom: 0; }
.scope__notes li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: #8FA893; }
.scope__notes li.scope__empty::before { display: none; }
.scope__notes li.scope__empty { padding-left: 0; }
.scope__empty { color: rgba(245, 241, 232, 0.4); }

/* Wide: a sticky column that sizes itself to the screen. */
@media (min-width: 1080px) {
  .scope { position: sticky; top: calc(var(--shell-h) + 20px); }
  .scope__inner { max-height: calc(100svh - var(--shell-h) - 44px); }
}

/* Narrow: a bar at the foot of the screen that opens on tap. */
@media (max-width: 1079px) {
  .scope {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    padding: 0 max(0px, calc((100vw - 1320px) / 2));
  }
  .scope__inner {
    border-radius: 12px 12px 0 0;
    border-bottom: 0;
    box-shadow: 0 -14px 40px rgba(25, 28, 23, 0.34);
    max-height: 62svh;
  }
  .scope__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px var(--gutter);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--line-light);
    cursor: pointer;
    font-family: var(--sans);
  }
  .scope__toggleband {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-family: var(--serif);
    font-size: 17px;
    color: var(--paper);
  }
  .scope__togglepct {
    margin-left: auto;
    flex: none;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--bronze-pale);
  }
  .scope__toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.5px solid rgba(245, 241, 232, 0.6);
    border-bottom: 1.5px solid rgba(245, 241, 232, 0.6);
    transform: rotate(-135deg);
    transition: transform 220ms var(--ease-out);
    flex: none;
  }
  .scope__toggle[aria-expanded="true"]::after { transform: rotate(45deg); }
  .scope__body { display: none; padding-inline: var(--gutter); }
  .scope.is-open .scope__body { display: block; }
  /* The bar sits over the last of the form, so the page ends above it. */
  body { padding-bottom: 68px; }
}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.clear {
  margin-top: clamp(24px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.clear__note { flex: 1 1 300px; font-size: 12.5px; line-height: 1.6; color: var(--ink-faint); }
.btn {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 11px 19px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink-mid);
  cursor: pointer;
  transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out), color 200ms var(--ease-out);
}
.btn:hover { border-color: var(--bronze); color: var(--bronze-deep); }
.btn--primary { background: var(--bronze-deep); border-color: var(--bronze-deep); color: var(--paper); }
.btn--primary:hover { background: var(--bronze); border-color: var(--bronze); color: var(--paper); }
.btn--quiet { background: transparent; color: var(--ink-faint); }

/* Still to answer, and what has moved since the last send. */
.scope__todo, .scope__changed { list-style: none; margin-top: 10px; }
.scope__todoitem {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 6px 5px 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(245, 241, 232, 0.72);
  cursor: pointer;
  border-radius: 3px;
  transition: color 160ms var(--ease-out), background 160ms var(--ease-out);
}
.scope__todoitem:hover { color: var(--paper); background: rgba(245, 241, 232, 0.06); }
.scope__todoitem:focus-visible { outline: 2px solid var(--bronze-pale); outline-offset: 1px; }
.scope__todon { flex: none; width: 1.2em; font-size: 11px; color: var(--bronze-pale); }
.scope__todot { flex: 1 1 auto; }

.scope__changed li {
  position: relative;
  padding: 4px 0 4px 15px;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(245, 241, 232, 0.72);
}
.scope__changed li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--bronze-pale);
}
.scope__changed li.scope__empty::before { display: none; }
.scope__sincev { margin-top: 8px; font-family: var(--serif); font-size: 17px; color: var(--paper); }
.scope__more { padding: 5px 0 0 15px; font-size: 11.5px; color: rgba(245, 241, 232, 0.45); }
.scope__block--since .scope__count { font-family: var(--serif); font-size: 14px; letter-spacing: 0.04em; }

/* ── Send ────────────────────────────────────────────────────────────── */

.send {
  margin-top: clamp(28px, 4vw, 52px);
  padding: clamp(24px, 3vw, 38px);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--linen);
}
.send h2 {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.12;
}
.send__lede { max-width: 68ch; font-size: 15px; color: var(--ink-mid); }
/* The honeypot. Off screen rather than display:none, because a bot that
   reads styles skips a hidden field and fills a visible one. */
.send__missing {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-mid);
}

.send__gap {
  font: inherit;
  color: var(--bronze-deep);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.rowadd--copy { margin-left: 8px; }

.send__more { margin-top: 14px; font-size: 12.5px; color: var(--ink-faint); }
.send__more a { text-decoration: underline; text-underline-offset: 2px; }

.send__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.send__prior {
  flex: 1 1 100%;
  margin-bottom: 4px;
  padding: 13px 16px;
  border: 1px solid var(--bronze-pale);
  border-radius: 3px;
  background: var(--paper);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mid);
}
.send__prior b { font-family: var(--serif); font-size: 15.5px; letter-spacing: 0.02em; color: var(--ink-deep); }

.send__go {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.btn--send { padding: 14px 28px; font-size: 12px; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.btn[disabled]:hover { border-color: var(--line); color: var(--ink-mid); }
.btn--primary[disabled]:hover { background: var(--bronze-deep); border-color: var(--bronze-deep); color: var(--paper); }

.send__state { flex: 1 1 240px; font-size: 13px; line-height: 1.55; color: var(--ink-faint); }
.send__state[data-state="working"] { color: var(--ink-mid); }
.send__state[data-state="ok"] { color: var(--ink-deep); }
.send__state[data-state="ok"] b { font-family: var(--serif); font-size: 17px; letter-spacing: 0.02em; }
.send__state[data-state="error"] { color: #8A3A2A; }

/* ── Privacy statement ───────────────────────────────────────────────── */

.privacy {
  /* The shell is fixed, so an anchor jump has to clear it. */
  scroll-margin-top: 82px;
  margin-top: clamp(32px, 4vw, 60px);
  padding-top: clamp(26px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.privacy h2 {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.14;
}
.privacy__toggle {
  margin-top: 12px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--bronze-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.privacy__toggle:hover { color: var(--ink-deep); }
.privacy__body[hidden] { display: none; }
.privacy__lede { max-width: 66ch; font-size: 14.5px; color: var(--ink-mid); }

.privacy__list {
  margin: 26px 0 0;
  display: grid;
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
  border-radius: 4px;
  overflow: hidden;
}
.privacy__item {
  display: grid;
  grid-template-columns: minmax(180px, 15em) 1fr;
  gap: 0 28px;
  padding: 17px 20px;
  background: var(--paper);
}
.privacy__item dt {
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--bronze-deep);
}
.privacy__item dd {
  margin: 0;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--ink-mid);
}
.privacy a { text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 720px) {
  .privacy__item { grid-template-columns: 1fr; gap: 6px; padding: 15px 16px; }
}

/* ── Sent: the confirmation ───────────────────────────────────
   This screen takes the page, because it is the whole of what a family is
   given. What it is not is a receipt. An earlier build set the reference in
   a bordered box at 58px under a small capitalised label, which is how a
   government office acknowledges a filing, and this is a family office
   thanking somebody. The thanks is the page now and the reference is one
   quiet line at the foot of it. */

body.is-done .intro,
body.is-done .layout,
body.is-done .send,
body.is-done .clear,
body.is-done .privacy,
body.is-done .noscript { display: none; }

.done {
  max-width: 660px;
  margin: clamp(24px, 6vw, 72px) auto clamp(40px, 8vw, 96px);
  animation: doneIn 0.5s var(--ease-out) both;
}

@keyframes doneIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.done h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink-deep);
  margin: 0;
}

.done__lede {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: var(--body-ink);
  margin: 0 0 clamp(24px, 3vw, 34px);
}

.done__contact {
  font-size: clamp(15px, 1.5vw, 16px);
  line-height: 1.62;
  color: var(--body-ink);
  margin: 0;
}

.done__contact a {
  color: var(--bronze-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.done__ref {
  margin: clamp(20px, 2.5vw, 28px) 0 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--body-ink-dim);
}

.done__ref b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0.04em;
  color: var(--ink-deep);
  user-select: all;
}

.done__go {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(22px, 3vw, 32px);
  padding-top: clamp(20px, 2.5vw, 28px);
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 560px) {
  .done__go .btn { flex: 1 1 100%; }
}

/* ── Portal mode ─────────────────────────────────────────────────────
   The same form, saving to the family's shared intake on the server. There
   is no browser copy to clear, so the clear control goes, and the privacy
   notice describes where the answers actually are. */
.privacy__item--portal { display: none; }
body.is-portal .privacy__item--portal { display: grid; }
body.is-portal .privacy__item--local,
body.is-portal .clear { display: none; }
body.is-portal .portal-back { display: block !important; }
body.is-loading .layout { visibility: hidden; }
.portal-back { margin: 0 0 14px; font-size: 13px; }
.portal-back a { color: var(--bronze-deep); text-decoration: underline; text-underline-offset: 2px; }
.portal-banner {
  margin: 0 0 22px;
  padding: 13px 16px;
  border-radius: var(--radius);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-mid);
  background: var(--stone-1);
  border: 1px solid var(--line);
}

/* ── Print: the filled form as a document ────────────────────────────── */
@media print {
  .shell, .send, .clear, .rowadd, .rowkill, .noscript, .stepnav { display: none !important; }
  /* Paper gets every section, not just the one on screen. */
  .sect[hidden] { display: block !important; }
  .sect + .sect { margin-top: 12pt; }
  .done__go { display: none !important; }
  .done { margin: 0; animation: none; }
  .done__ref b { color: #000; }
  .done__contact, .done__ref { color: #000; }
  body { background: #fff; font-size: 10.5pt; }
  .wrap { max-width: none; padding: 0; }
  .layout { display: block; }
  .scope { display: none !important; }
  .scope__inner { position: static; background: #fff; color: #000; border: 1pt solid #999; }
  .scope__band, .scope__v { color: #000; }
  .scope__label, .scope__h { color: #444; }
  .scope__convs li, .scope__flags li { border-bottom: 1px solid #ddd; }
  .scope__todoitem, .scope__changed li, .scope__sincev { color: #000; }
  .scope__todon { color: #555; }
  .scope__more { color: #666; }
  .scope__convs b { color: #000; }
  .sect { background: #fff; border: 1pt solid #bbb; break-inside: avoid; }
  .privacy { break-before: page; border-top: 0; }
  .privacy__body[hidden] { display: block !important; }
  .privacy__toggle { display: none !important; }
  .privacy__list { background: #fff; border: 1pt solid #bbb; gap: 0; }
  .privacy__item { background: #fff; border-bottom: 1px solid #ddd; break-inside: avoid; }
  .privacy__item dt, .privacy__item dd { color: #000; }
  input, select, textarea { border: 0; border-bottom: 1px solid #bbb; border-radius: 0; background: transparent; padding-left: 0; }
  .rows table { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 1ms !important; }
}