/* Leadership Lab Portal — public site.
   Mobile-first: most participants open this on a phone, often on patchy data,
   often in a right-to-left script.

   Design notes:
   - The admin runs on a single crisp sans because it is a data grid. This side
     is a welcome letter, so it keeps a serif display face for warmth — but a
     reliable one, led by Georgia rather than falling through to Times.
   - The outstanding-items checklist is the whole point of the portal, so it
     gets the strongest treatment on the page. */

:root {
  --ground:     #eaedf3;
  --surface:    #ffffff;
  --surface-2:  #f5f7fa;
  --surface-3:  #eceff5;
  --ink:        #10131a;
  --ink-soft:   #333b48;
  --muted:      #646d7d;
  --hairline:   #dde2ea;
  --hairline-2: #e9ecf2;

  --lapis:      #1b4b8f;
  --lapis-ink:  #143a70;
  --lapis-bg:   #e7edf8;
  --lapis-ring: rgba(27, 75, 143, .18);

  --verdigris:    #1c7a5b;
  --verdigris-bg: #e1f3ec;
  --copper:       #96590f;
  --copper-bg:    #fcefd9;
  --danger:       #a62a20;
  --danger-bg:    #fbe6e3;

  --r:    11px;
  --r-lg: 15px;
  --shadow-sm: 0 1px 2px rgba(16, 19, 26, .06);
  --shadow:    0 1px 2px rgba(16, 19, 26, .05), 0 8px 22px -14px rgba(16, 19, 26, .28);

  --display: Georgia, "Palatino Linotype", "Iowan Old Style", "Times New Roman", serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:     #0d1016;
    --surface:    #161a21;
    --surface-2:  #1b2029;
    --surface-3:  #222834;
    --ink:        #e9edf4;
    --ink-soft:   #c3cbd8;
    --muted:      #8d97a8;
    --hairline:   #262d38;
    --hairline-2: #1f2530;

    --lapis:      #82abee;
    --lapis-ink:  #a3c2f4;
    --lapis-bg:   #15233b;
    --lapis-ring: rgba(130, 171, 238, .25);

    --verdigris:    #52ba90;
    --verdigris-bg: #112720;
    --copper:       #dd964f;
    --copper-bg:    #2a1d0f;
    --danger:       #ef8078;
    --danger-bg:    #331714;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow:    0 1px 2px rgba(0, 0, 0, .45), 0 8px 22px -14px rgba(0, 0, 0, .85);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body[dir="rtl"] { font-family: "Segoe UI", Tahoma, var(--body); }

.wrap { max-width: 720px; margin-inline: auto; padding: 0 18px 72px; }
.wrap-wide { max-width: 1080px; }

/* ==========================================================  header  === */
.site-header { background: var(--surface); border-bottom: 1px solid var(--hairline); }
.site-header-in {
  max-width: 1080px; margin-inline: auto; padding: 13px 18px;
  display: flex; align-items: center; gap: 14px;
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); font-weight: 650; }
.brand-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center; border-radius: 9px;
  background: linear-gradient(150deg, #2a5fa8, var(--lapis) 62%);
  color: #fff; font-size: 12.5px; font-weight: 700; letter-spacing: .02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.brand-text { font-size: 15px; line-height: 1.25; letter-spacing: -.01em; }
.brand-text small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }

.lang-menu { margin-inline-start: auto; position: relative; }
.lang-btn {
  background: var(--surface-2); border: 1px solid var(--hairline);
  color: var(--ink-soft); border-radius: 999px;
  padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.lang-btn:hover { border-color: var(--lapis); color: var(--lapis); }
.lang-list {
  position: absolute; inset-inline-end: 0; top: calc(100% + 7px);
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r); box-shadow: var(--shadow);
  min-width: 190px; padding: 6px; z-index: 40;
}
.lang-list[hidden] { display: none; }
.lang-list a {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 11px; border-radius: 7px;
  text-decoration: none; color: var(--ink); font-size: 14.5px;
}
.lang-list a:hover { background: var(--surface-2); }
.lang-list a span { color: var(--muted); font-size: 12.5px; }
.lang-list a[aria-current="true"] { background: var(--lapis-bg); color: var(--lapis); font-weight: 600; }

/* ======================================================  typography  === */
h1 {
  font-family: var(--display);
  font-size: clamp(27px, 5.5vw, 37px);
  line-height: 1.14; letter-spacing: -.018em; font-weight: 700;
  margin: 32px 0 10px; text-wrap: balance;
}
h2 {
  font-family: var(--display);
  font-size: clamp(20px, 3.6vw, 25px);
  line-height: 1.2; letter-spacing: -.012em; font-weight: 700;
  margin: 38px 0 13px; text-wrap: balance;
}
h3 { font-size: 16px; font-weight: 650; margin: 24px 0 8px; letter-spacing: -.006em; }
p { margin: 0 0 15px; }
.lede { font-size: 17.5px; line-height: 1.55; color: var(--ink-soft); margin-bottom: 24px; }
a { color: var(--lapis); text-underline-offset: 2px; }
a:hover { color: var(--lapis-ink); }
:focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; border-radius: 6px; }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}

/* ===========================================================  cards  === */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 21px 22px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.card > :first-child { margin-top: 0; }
.card > :last-child  { margin-bottom: 0; }
.card-title { font-size: 16px; font-weight: 650; letter-spacing: -.01em; margin: 0 0 7px; }

.note {
  position: relative;
  border-radius: var(--r); padding: 15px 17px 15px 19px;
  margin-bottom: 16px; font-size: 15px;
  background: var(--lapis-bg); color: var(--ink-soft);
}
.note::before {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px;
  border-start-start-radius: var(--r); border-end-start-radius: var(--r);
  background: var(--lapis);
}
.note.warn   { background: var(--copper-bg); }
.note.warn::before { background: var(--copper); }
.note.ok     { background: var(--verdigris-bg); }
.note.ok::before { background: var(--verdigris); }
.note.danger { background: var(--danger-bg); }
.note.danger::before { background: var(--danger); }
.note > :last-child { margin-bottom: 0; }

/* =======================================================  checklist  === */
/* The heart of the portal. Each row states what it wants and whether it is
   waiting on the participant or on us. */
.checklist { display: flex; flex-direction: column; gap: 10px; margin: 0 0 10px; padding: 0; list-style: none; }
.check {
  display: grid; grid-template-columns: 28px 1fr; gap: 14px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 17px 19px;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
a.check:hover { border-color: var(--lapis); box-shadow: var(--shadow); transform: translateY(-1px); }

.check-dot {
  width: 25px; height: 25px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #fff; line-height: 1;
}
.check.todo    { border-inline-start: 3px solid var(--copper); }
.check.todo    .check-dot { background: var(--copper); }
.check.done    .check-dot { background: var(--verdigris); }
.check.waiting .check-dot { background: var(--muted); }
.check.info    .check-dot { background: var(--lapis); }
/* A step that exists but is not open yet — shown so nobody wonders where it went. */
.check.later   { opacity: .62; }
.check.later   .check-dot { background: transparent; border: 1.5px dashed var(--hairline); color: var(--muted); }
.check.done    { background: var(--surface-2); }

.check-label { font-weight: 650; font-size: 15.5px; letter-spacing: -.008em; }
.check-note  { color: var(--muted); font-size: 14px; margin-top: 4px; white-space: pre-line; line-height: 1.5; }
.check-state {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  margin-top: 8px; display: inline-block;
}
.check.todo    .check-state { color: var(--copper); }
.check.done    .check-state { color: var(--verdigris); }
.check.waiting .check-state { color: var(--muted); }
.check.info    .check-state { color: var(--lapis); }
.check.later   .check-state { color: var(--muted); }

/* ===========================================================  forms  === */
.field { margin-bottom: 18px; }
.field > label, .field-label { display: block; font-weight: 650; font-size: 15px; margin-bottom: 7px; }
.field .hint { display: block; color: var(--muted); font-size: 13.5px; font-weight: 400; margin-top: 3px; }
.req { color: var(--copper); font-weight: 600; font-size: 13px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="search"],
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="number"], input[type="password"], select, textarea {
  width: 100%; font: inherit;
  font-size: 16px;               /* 16px stops iOS zooming the page on focus */
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 9px;
  padding: 12px 13px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
textarea { min-height: 104px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus {
  border-color: var(--lapis); outline: none; box-shadow: 0 0 0 3px var(--lapis-ring);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .75; }

select {
  appearance: none; cursor: pointer; padding-inline-end: 38px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 53%, calc(100% - 14px) 53%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
body[dir="rtl"] select {
  background-position: 14px 53%, 19px 53%;
  padding-inline-end: 13px; padding-inline-start: 38px;
}

.choices { display: flex; flex-direction: column; gap: 9px; }
.choice {
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: 14px 15px; cursor: pointer; background: var(--surface);
  transition: border-color .12s ease, background-color .12s ease;
}
.choice:hover { border-color: var(--lapis); background: var(--surface-2); }
.choice input { margin: 2px 0 0; flex: none; width: 19px; height: 19px; accent-color: var(--lapis); }
.choice-text { font-size: 15.5px; }
.choice-text small { display: block; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.choice:has(input:checked) {
  border-color: var(--lapis); background: var(--lapis-bg);
  box-shadow: 0 0 0 1px var(--lapis);
}

.row { display: grid; gap: 15px; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 15.5px; font-weight: 650; letter-spacing: -.008em;
  padding: 13px 24px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--lapis); background: var(--lapis); color: #fff;
  text-decoration: none; box-shadow: var(--shadow-sm);
  transition: background-color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.btn:hover { background: var(--lapis-ink); border-color: var(--lapis-ink); color: #fff; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn-lg { width: 100%; padding: 15px 24px; font-size: 16.5px; }
.btn-ghost { background: transparent; color: var(--lapis); border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--lapis-bg); color: var(--lapis); }
.btn-quiet { background: var(--surface); border-color: var(--hairline); color: var(--ink-soft); }
.btn-quiet:hover { background: var(--surface-2); border-color: var(--lapis); color: var(--lapis); }

/* ====================================================  detail rows  === */
.kv { display: grid; grid-template-columns: minmax(118px, 34%) 1fr; gap: 9px 18px; font-size: 15px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; color: var(--ink-soft); }

/* ==============================================================  QR  === */
.qr { text-align: center; }
.qr img {
  width: 210px; height: 210px; border-radius: 12px;
  background: #fff; padding: 10px; box-shadow: var(--shadow-sm);
}
.qr-code {
  font-family: var(--mono); font-size: 21px; font-weight: 600; letter-spacing: .16em;
  margin-top: 12px; color: var(--ink-soft);
}

/* ==========================================================  agenda  === */
.agenda-day { margin-bottom: 26px; }
.agenda-day:last-child { margin-bottom: 0; }
.agenda-day h3 {
  font-family: var(--display); font-size: 19px; font-weight: 700;
  padding-bottom: 8px; margin-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}
.agenda-item {
  display: grid; grid-template-columns: 96px 1fr; gap: 15px;
  padding: 12px 0; border-bottom: 1px solid var(--hairline-2);
}
.agenda-item:last-child { border-bottom: 0; }
.agenda-time {
  font-family: var(--mono); font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; padding-top: 3px;
}
.agenda-title { font-weight: 650; font-size: 15.5px; }
.agenda-detail { color: var(--muted); font-size: 14px; margin-top: 3px; line-height: 1.5; }
@media (max-width: 520px) { .agenda-item { grid-template-columns: 1fr; gap: 3px; } }

/* =======================================================  directory  === */
.dir-grid { display: grid; gap: 15px; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); }
.dir-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: 20px 17px; text-align: center;
  box-shadow: var(--shadow-sm);
}
.dir-photo {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 12px; display: block; background: var(--surface-3);
}
.dir-photo-blank {
  display: grid; place-items: center;
  font-family: var(--display); font-size: 32px; color: var(--muted);
}
.dir-name { font-weight: 650; font-size: 15.5px; letter-spacing: -.008em; }
.dir-role { color: var(--muted); font-size: 13.5px; margin-top: 3px; }
.dir-contact { font-size: 13.5px; margin-top: 10px; word-break: break-word; }

/* ===========================================================  scale  === */
.scale { display: flex; gap: 7px; }
.scale label {
  flex: 1; text-align: center; border: 1px solid var(--hairline); border-radius: 9px;
  padding: 13px 4px; cursor: pointer; background: var(--surface);
  font-weight: 650; font-size: 16px;
  transition: border-color .12s ease, background-color .12s ease;
}
.scale label:hover { border-color: var(--lapis); }
.scale label:has(input:checked) {
  border-color: var(--lapis); background: var(--lapis-bg); color: var(--lapis);
  box-shadow: 0 0 0 1px var(--lapis);
}
.scale input { position: absolute; opacity: 0; pointer-events: none; }
.scale-ends { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; margin-top: 7px; }

/* ==========================================================  footer  === */
.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: 44px; padding: 24px 18px 48px;
  /* Sits on the ground rather than a card, so it needs to be a shade darker
     than --muted to clear 4.5:1. */
  color: color-mix(in srgb, var(--muted) 74%, var(--ink));
  font-size: 13.5px; text-align: center; line-height: 1.6;
}

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


/* ==================================================  language bar  === */
/* Shown above the public forms. Each option is labelled in its own script and
   marked with its own lang/dir, so the browser shapes the text correctly even
   when the surrounding page is the other direction. */
.langbar {
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline-2);
}
.langbar-in {
  max-width: 760px; margin: 0 auto; padding: 14px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
}
.langbar-label {
  font-size: 13px; font-weight: 650; color: var(--ink-soft);
  white-space: nowrap;
}
.langbar-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.langbar-opt {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 13px; border-radius: 7px;
  border: 1px solid var(--hairline); background: var(--surface);
  text-decoration: none; color: var(--ink);
  min-width: 74px;
}
.langbar-opt strong { font-size: 15px; font-weight: 650; line-height: 1.25; }
.langbar-opt small  { font-size: 11.5px; color: var(--muted); line-height: 1.2; }
.langbar-opt:hover {
  border-color: var(--lapis); box-shadow: var(--shadow); transform: translateY(-1px);
}
.langbar-opt.is-on {
  background: var(--lapis); border-color: var(--lapis); color: #fff;
}
.langbar-opt.is-on small { color: rgba(255, 255, 255, .8); }
.langbar-opt:focus-visible { outline: 2px solid var(--lapis); outline-offset: 2px; }

@media (max-width: 620px) {
  .langbar-in { padding: 11px 15px; gap: 8px; }
  .langbar-label { flex-basis: 100%; }
  .langbar-opt { min-width: 0; padding: 6px 11px; }
  .langbar-opt small { display: none; }   /* the native name is the useful half */
}
@media (prefers-reduced-motion: reduce) {
  .langbar-opt:hover { transform: none; }
}


/* ==================================================  staff entrance  === */
/* On the landing page only, and last. Findable by someone looking for it,
   invisible to someone who is not. */
.staff-link {
  margin: 30px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline-2);
  text-align: center;
}
.staff-link a {
  font-size: 12.6px;
  color: var(--muted);
  text-decoration: none;
}
.staff-link a:hover { color: var(--lapis); text-decoration: underline; }
.staff-link a:focus-visible { outline: 2px solid var(--lapis); outline-offset: 3px; }


/* ======================================================  tables  === */
/* .t and .tw started life in admin.css. A public page using them rendered an
   unstyled table straight onto the page background, which is where the bare grey
   came from — there was no surface under it at all. */
.tw {
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: 10px;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(20, 30, 45, .05));
  overflow-x: auto;          /* wide tables scroll inside their own box */
  margin: 0 0 20px;
  -webkit-overflow-scrolling: touch;
}
table.t {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.6px;
}
table.t thead th {
  text-align: start;
  padding: 11px 15px;
  font-size: 11.6px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
table.t td {
  padding: 11px 15px;
  border-bottom: 1px solid var(--hairline-2);
  vertical-align: middle;
}
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr:nth-child(even) td { background: var(--surface-2); }
table.t tbody tr:hover td { background: var(--lapis-bg); }

/* The person cell carries the name with the contact details underneath, which is
   how a contact list is read and what let the table drop from seven columns to
   four. Email is allowed to break mid-string; a long address was the single
   biggest cause of the overflow. */
table.t .cell-person { padding-top: 10px; padding-bottom: 10px; }
table.t .person-name {
  display: block; font-weight: 650; font-size: 14.8px; line-height: 1.35;
}
table.t .person-contact {
  display: flex; flex-wrap: wrap; gap: 2px 14px;
  margin-top: 3px; font-size: 12.9px;
}
table.t .person-contact a { color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
table.t .person-contact a:hover { color: var(--lapis); text-decoration: underline; }
table.t .cell-contact a { color: var(--ink-soft); text-decoration: none; }
table.t .cell-contact a:hover { color: var(--lapis); text-decoration: underline; }
table.t .cell-name { font-weight: 650; white-space: nowrap; }

/* Deliberately no position:sticky on thead — the overflow-x above forces
   overflow-y to auto, which makes a sticky header stick to the scroll box
   rather than the viewport and land under the first row. */

@media (max-width: 620px) {
  table.t { font-size: 13.8px; }
  table.t thead th, table.t td { padding: 9px 11px; }
}

/* ============================================  the filter row  === */
.filterbar {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin: 0;
}
.filterbar select { max-width: 220px; }
.filterbar input[type="search"] { max-width: 220px; }

/* ==============================================  primary action  === */
/* The nominate link is the one thing somebody is here to do once they have
   checked the list, so it reads as an action rather than as prose. */
.cta-inline {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 4px;
}


/* ============================================  text utilities  === */
/* .muted, .small and .pill are used throughout the markup and were only ever
   defined in admin.css. On a public page they did nothing, which is why status
   badges rendered as plain text. */
.muted { color: var(--muted); }
.small { font-size: 13.4px; }
p.small, .small p { line-height: 1.6; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.2px; font-weight: 650; letter-spacing: .01em;
  white-space: nowrap;
  background: var(--surface-3, var(--surface-2)); color: var(--ink-soft);
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: none; opacity: .85;
}
.pill.blue  { background: var(--lapis-bg);     color: var(--lapis-ink, var(--lapis)); }
.pill.green { background: var(--verdigris-bg); color: var(--verdigris); }
.pill.amber { background: var(--copper-bg);    color: var(--copper); }
.pill.red   { background: var(--danger-bg);    color: var(--danger); }


/* Four columns fit without scrolling, so there is nothing to hint at. .tw keeps
   overflow-x for safety, but no minimum width is forced — on a phone the columns
   narrow and the person cell wraps, which is preferable to a sideways scroll. */
@media (max-width: 620px) {
  table.t .person-name    { font-size: 14.2px; }
  table.t .person-contact { font-size: 12.4px; gap: 1px 10px; }
}

/* ================================================ registration form groups ===
   The registration form asks yes/no questions that open further questions. The
   options need to be big enough to hit on a phone, and a revealed branch needs
   to read as belonging to the question above it rather than floating loose.
   ========================================================================= */

.qset {
  border: 0; margin: 0 0 18px; padding: 0;
}
.qset > legend {
  padding: 0; margin: 0 0 8px;
  font-weight: 550; font-size: 15px; color: var(--ink);
}

/* Whole-row targets: the label is the control, so the text is tappable too. */
.opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; margin: 0 0 6px;
  border: 1px solid var(--hairline-2); border-radius: 9px;
  background: var(--surface); cursor: pointer;
  font-size: 15px; line-height: 1.45;
  transition: border-color .12s ease, background .12s ease;
}
.opt:hover { border-color: var(--lapis); background: var(--surface-2); }
.opt input { margin: .25em 0 0; flex: none; width: 18px; height: 18px; }
.opt:has(input:checked) {
  border-color: var(--lapis, #2a5db0);
  background: var(--lapis-bg, rgba(42, 93, 176, .06));
}

/* A branch opened by an answer. The rule down the side is what ties it to the
   question, which matters most on a phone where the question scrolls away. */
.branch {
  border-inline-start: 3px solid var(--hairline-2);
  padding: 14px 0 2px 16px;
  margin: 0 0 6px;
}
.branch[hidden] { display: none; }

/* A revealed section must not inherit the bottom margin of the field above it
   and end up looking detached from its own question. */
.qset + .field { margin-top: -6px; }