/* flows.css: the full-screen flows (pairing a tracker, adding people), built on
   field.css's tokens and its flowFrame (.f-flow, __head, __body, __foot); see
   field.css for the rules every stylesheet here keeps.

   On phones a flow fills the screen. From 700px it is a centred dialog over a
   dim: pairing 560px wide, adding people min(760px, 100% - 48px), both
   min(760px, 100% - 48px) tall, as the design's tablet layout has it.

   Selection, show-and-hide and Continue's disabled look are CSS on the form's
   own inputs (:has(:checked)), so a tap answers at once with no round trip. */

:root {
  --fl-tint: #fff4f0;
  --fl-tint-row: #fff5f1;
  --fl-radio: #c8d1da;
  --fl-off-bg: var(--buttonColour-tertiary, #eff2f5);
  --fl-ok-bg: #dafbe1;
  --fl-ok-fg: #1a7f37;
  --fl-crit-bg: #ffebe9;
  --fl-crit-fg: #a40e26;
  --fl-warn-bg: #fff8c5;
  --fl-warn-fg: #7d4e00;
  --fl-info-bg: #ddf4ff;
  --fl-info-bd: #54aeff;
  --fl-info-fg: #0969da;
  --fl-switch-off: #d1d9e0;
}

[data-theme="dark"] {
  --fl-tint: rgba(241, 88, 43, 0.12);
  --fl-tint-row: rgba(241, 88, 43, 0.1);
  --fl-radio: #656c76;
  --fl-off-bg: #2a313c;
  --fl-ok-bg: rgba(46, 160, 67, 0.18);
  --fl-ok-fg: #4ac26b;
  --fl-crit-bg: rgba(248, 81, 73, 0.15);
  --fl-crit-fg: #ff8080;
  --fl-warn-bg: rgba(210, 153, 34, 0.15);
  --fl-warn-fg: #e3b341;
  --fl-info-bg: rgba(56, 139, 253, 0.12);
  --fl-info-bd: rgba(56, 139, 253, 0.45);
  --fl-info-fg: #4493f8;
  --fl-switch-off: #3d444d;
}

/* ---------------------------------------------------------------- frame */

.fl-dim { display: none; }

.fl-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--bgColour-primary);
  color: var(--textColour-primary);
}

.fl-panel > .fl-form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 700px) {
  .f-flow:has(> .fl-panel) {
    align-items: center;
    justify-content: center;
    background: transparent;
    animation: none;
  }
  .fl-dim {
    display: block;
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.4);
    animation: f-fade 200ms ease both;
  }
  .fl-panel {
    position: relative;
    flex: none;
    width: min(560px, calc(100% - 48px));
    height: min(760px, calc(100% - 48px));
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, 0.35), 0 2px 6px rgba(16, 24, 40, 0.08);
  }
  .fl-panel--nr { width: min(760px, calc(100% - 48px)); }
  .fl-panel--enter { animation: fl-sheet 180ms ease-out both; }
}

@keyframes fl-sheet { from { transform: translateY(20px); opacity: 0.5; } to { transform: none; opacity: 1; } }
@keyframes fl-spin { to { transform: rotate(360deg); } }
@keyframes fl-bob { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ---------------------------------------------------------------- header */

.fl-head {
  flex: none;
  gap: 8px;
  padding: max(14px, env(safe-area-inset-top, 0px)) 12px 12px;
  background: var(--sfColour-primary);
}
.fl-head__text { flex: 1; min-width: 0; padding-left: 4px; }
.fl-head__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}
.fl-head__sub {
  margin: 1px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--textColour-tertiary);
  text-wrap: pretty;
}
.fl-head__close { width: 36px; height: 36px; color: var(--textColour-primary); border-radius: 6px; }

@media (min-width: 700px) {
  .fl-panel--nr .fl-head { padding: 22px 16px 20px 20px; }
  .fl-panel--nr .fl-head__sub { margin-top: 4px; }
}

/* ---------------------------------------------------------------- stepper */

.fl-steps {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 16px;
  list-style: none;
  background: var(--sfColour-primary);
  border-bottom: 1px solid var(--borderColour-primary);
}
.fl-step {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: calc(8px * var(--sp));
}
.fl-step:last-child { flex: none; }
.fl-step__mark {
  width: 22px;
  height: 22px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1.5px solid var(--borderColour-secondary, #d1d9e0);
  font-size: 11px;
  font-weight: 600;
  color: var(--textColour-tertiary);
  transition: background var(--duration-fast, 150ms) ease, border-color var(--duration-fast, 150ms) ease;
}
.fl-step.is-done .fl-step__mark,
.fl-step.is-current .fl-step__mark {
  background: var(--field-coral);
  border-color: var(--field-coral);
  color: #fff;
}
.fl-step__mark svg { stroke-width: 3; }
.fl-step__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 500;
  color: var(--textColour-secondary);
  white-space: nowrap;
}
.fl-step.is-current .fl-step__label { flex: none; font-weight: 600; color: var(--textColour-primary); }
.fl-step__line {
  flex: 1;
  min-width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--borderColour-primary);
}
.fl-step.is-done .fl-step__line { background: var(--field-coral); }

@media (max-width: 699px) {
  .fl-steps--compact .fl-step:not(.is-current) .fl-step__label { display: none; }
  .fl-steps--compact .fl-step.is-current:not(:last-child) { flex: none; }
  .fl-steps--compact .fl-step.is-current .fl-step__line { flex: none; width: 8px; }
}

/* ---------------------------------------------------------------- body, footer, buttons */

.fl-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 16px 20px;
}
.fl-body--nr { padding: 0 16px 28px; background: var(--sfColour-primary); }
.fl-nr { max-width: 680px; margin: 0 auto; }

.fl-foot {
  flex: none;
  padding: 12px 16px max(12px, var(--field-safe-bottom));
  background: var(--sfColour-primary);
}

.fl-btn {
  height: 48px;
  min-width: 0;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, transform var(--duration-fast, 150ms) ease;
}
.fl-btn:active { transform: scale(0.99); }
.fl-btn svg { stroke-width: 2.2; }
.fl-btn--back {
  flex: none;
  min-width: 96px;
  background: var(--sfColour-primary);
  border-color: var(--borderColour-primary);
  color: var(--textColour-primary);
}
.fl-btn--go { flex: 1; background: var(--field-coral); color: #fff; padding: 0 12px; }
.fl-btn--go:active { background: var(--buttonColour-primary-hover, #c4432b); }
.fl-btn--wide { display: flex; width: 100%; margin-top: 16px; }
.fl-btn--quiet { height: 44px; margin-top: 8px; }

@media (hover: hover) {
  .fl-btn--back:hover, .fl-tool:hover, .fl-mini:hover, .fl-count__btn:hover { background: var(--sfColour-hover); }
  .fl-check:hover { background: var(--sfColour-hover); }
}

/* Continue waits for the step's choice. */
.fl-form--who:not(:has(input[name="who"]:checked)) [data-fl-go],
.fl-form--tracker:not(:has(input[name="tracker"]:checked)) [data-fl-go],
.fl-form--id:has(#fl-id:placeholder-shown) [data-fl-find],
.fl-panel--nr[data-step="link"]:not(:has(input[name="acct"]:checked)) [data-fl-go],
.fl-panel--nr[data-step="details"]:has(input[name="ident"][value="named"]:checked):has(#nr-name:placeholder-shown) [data-fl-go],
.fl-panel--nr[data-step="details"]:has(input[name="rolemode"][value="one"]:checked):not(:has(input[name="role1"]:checked)) [data-fl-go],
.fl-panel--nr[data-step="details"]:has(input[name="rolemode"][value="many"]:checked):not(:has(input[name="roles"]:checked)) [data-fl-go] {
  background: var(--fl-off-bg);
  color: var(--textColour-tertiary);
  cursor: not-allowed;
  pointer-events: none;
}

.fl-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-num { font-variant-numeric: tabular-nums; }

/* A radio or checkbox that a styled row stands in for: still focusable and
   announced, never seen. */
.fl-hide {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
:is(.fl-tracker, .fl-choice, .fl-chip, .fl-check, .fl-seg__opt):has(.fl-hide:focus-visible) {
  outline: 2px solid var(--field-coral);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- shared bits */

.fl-label {
  display: block;
  margin: 16px 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--textColour-tertiary);
}
.fl-label--flush { margin-top: 0; margin-bottom: 0; }

.fl-search {
  flex: 1;
  min-width: 0;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--textColour-tertiary);
}
.fl-search:focus-within { border-color: var(--field-coral); box-shadow: 0 0 0 3px var(--field-coral-tint); }
.fl-search svg { flex: none; }
.fl-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  color: var(--textColour-primary);
  appearance: none;
}
.fl-search__input::-webkit-search-cancel-button { appearance: none; }
.fl-search__input::placeholder { color: var(--textColour-tertiary); }

.fl-none {
  margin: 0;
  padding: 18px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--textColour-tertiary);
}
.fl-none--left { padding: 14px 2px; text-align: left; color: var(--textColour-secondary); }

.fl-help {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 17px;
  color: var(--textColour-tertiary);
}

.fl-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fl-row__title { font-size: 14px; font-weight: 500; line-height: 20px; }
.fl-row__sub { margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--textColour-tertiary); }

.fl-marker { position: relative; width: 34px; height: 34px; flex: none; }
.fl-marker img { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; display: block; }
.fl-art { width: 34px; height: 34px; flex: none; display: grid; place-items: center; }
.fl-art img { width: auto; height: 34px; display: block; } /* the RH2 is tall */
.fl-art--lg { width: 46px; height: 46px; }
.fl-art--lg img { width: auto; height: 46px; }

/* ---------------------------------------------------------------- pairing: user */

.fl-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--borderColour-primary);
  border: 1px solid var(--borderColour-primary);
  border-radius: 8px;
  overflow: hidden;
}
.fl-row--person {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(11px * var(--sp));
  min-height: 56px;
  padding: calc(10px * var(--sp)) calc(12px * var(--sp));
  background: var(--sfColour-primary);
  cursor: pointer;
  transition: background 200ms ease;
}
.fl-row--person .fl-row__sub { color: var(--textColour-tertiary); }
.fl-row--person:has(.fl-radio:checked) { background: var(--fl-tint); box-shadow: inset 0 0 0 1.5px var(--field-coral); }
.fl-row--person.is-disabled { opacity: 0.5; cursor: default; }
.fl-radio {
  appearance: none;
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1.5px solid var(--fl-radio);
  background: transparent;
  cursor: inherit;
}
.fl-radio::after { content: ""; width: 10px; height: 10px; border-radius: 999px; background: var(--field-coral); transform: scale(0); transition: transform 150ms ease; }
.fl-radio:checked { border: 2px solid var(--field-coral); }
.fl-radio:checked::after { transform: scale(1); }

/* ---------------------------------------------------------------- pairing: tracker */

.fl-to {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 4px 4px 4px 12px;
  border-radius: 8px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
}
.fl-to__label { flex: none; font-size: 12px; color: var(--textColour-tertiary); }
.fl-to__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-to__change {
  flex: none;
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--field-coral);
  cursor: pointer;
}

.fl-tools { display: flex; align-items: center; gap: 8px; }
.fl-tool {
  flex: none;
  min-width: 42px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 6px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.fl-tool__label { display: none; }
@media (min-width: 700px) {
  .fl-tool { width: auto; padding: 0 12px; }
  .fl-tool__label { display: inline; }
  .fl-search__input { font-size: 14px; }
}

.fl-pool { display: flex; flex-direction: column; gap: 8px; }
/* The project's trackers, after the location's own pool. */
.fl-more { margin-top: 16px; }
.fl-tracker {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(11px * var(--sp));
  padding: calc(12px * var(--sp));
  border-radius: 8px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.fl-tracker:has(.fl-hide:checked) { border-color: var(--field-coral); box-shadow: 0 0 0 1px var(--field-coral); background: var(--fl-tint-row); }
.fl-tracker.is-off { opacity: 0.6; cursor: default; }
.fl-tracker .fl-row__title { font-variant-numeric: tabular-nums; }
.fl-tracker__sub { display: flex; align-items: center; gap: 5px; color: var(--textColour-secondary); }
.fl-tracker__sub .f-batt { flex: none; }
.fl-state {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--fl-off-bg);
  color: var(--textColour-tertiary);
}
.fl-state--free { background: var(--fl-ok-bg); color: var(--fl-ok-fg); }
/* A project tracker, allocated here when chosen. */
.fl-state--allocate { background: var(--fl-warn-bg); color: var(--fl-warn-fg); }

/* ---------------------------------------------------------------- pairing: scan, enter ID */

.fl-scan {
  position: relative;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 12px;
  background: #151b23;
}
.fl-scan__frame { position: relative; width: 176px; height: 176px; }
.fl-scan__c { position: absolute; width: 40px; height: 40px; border: 0 solid #fff; }
.fl-scan__c--tl { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-radius: 8px 0 0 0; }
.fl-scan__c--tr { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-radius: 0 8px 0 0; }
.fl-scan__c--bl { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-radius: 0 0 0 8px; }
.fl-scan__c--br { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 8px 0; }
.fl-scan__line {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 2px;
  background: var(--field-coral);
  animation: fl-bob 1.6s ease-in-out infinite;
}
.fl-scan__hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  margin: 0;
  padding: 0 16px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}
.fl-link {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--textColour-brand, var(--field-coral));
  cursor: pointer;
}

.fl-idbox {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  margin-top: 6px;
  padding: 0 13px;
  border-radius: 6px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
}
.fl-idbox:focus-within { border-color: var(--field-coral); box-shadow: 0 0 0 3px var(--field-coral-tint); }
.fl-idbox__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font: 600 20px var(--font-mono-accent, var(--font-sans));
  letter-spacing: 0.06em;
  color: var(--textColour-primary);
}
.fl-idbox__input::placeholder { color: var(--textColour-tertiary); opacity: 0.8; }
.fl-idbox__scan {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--textColour-secondary);
  cursor: pointer;
}

/* ---------------------------------------------------------------- pairing: allocate, confirm, busy */

.fl-card {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  border-radius: 10px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
}
.fl-card__text { flex: 1; min-width: 0; }
.fl-card__over { font-size: 12px; color: var(--textColour-tertiary); }
.fl-card__title { margin-top: 1px; font-size: 17px; line-height: 22px; font-weight: 600; }
.fl-card__sub { margin-top: 2px; font-size: 12px; line-height: 17px; color: var(--textColour-secondary); }

.fl-info {
  margin-top: 12px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--fl-info-bd);
  background: var(--fl-info-bg);
}
.fl-info__head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.fl-info__head svg { flex: none; color: var(--fl-info-fg); }
.fl-info__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: fl-alloc;
}
.fl-info__steps li {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: calc(10px * var(--sp));
  counter-increment: fl-alloc;
}
.fl-info__steps li::before {
  content: counter(fl-alloc);
  grid-row: span 2;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--fl-info-fg);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}
.fl-info__title { font-size: 13px; line-height: 20px; font-weight: 600; }
.fl-info__sub { margin-top: 1px; font-size: 12px; line-height: 17px; color: var(--textColour-secondary); }

.fl-pairto {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  font-size: 13px;
}
.fl-pairto span { flex: 1; color: var(--textColour-secondary); }
.fl-pairto strong { font-weight: 600; }

.fl-benefits {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid var(--borderColour-primary);
  background: var(--borderColour-primary);
}
.fl-benefits li { padding: calc(11px * var(--sp)) calc(12px * var(--sp)); background: var(--sfColour-primary); font-size: 13px; }
.fl-benefits + .fl-help { margin-top: 10px; }

.fl-busy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 50px 0;
  text-align: center;
}
.fl-spinner {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid var(--borderColour-primary);
  border-top-color: var(--field-coral);
  animation: fl-spin 800ms linear infinite;
}
.fl-busy__title { font-size: 14px; font-weight: 500; }
.fl-busy__sub { font-size: 12px; color: var(--textColour-secondary); }

/* ---------------------------------------------------------------- adding people */

.fl-q { display: block; margin: 20px 0 8px; font-size: 12px; line-height: 17px; font-weight: 600; color: var(--textColour-primary); }
.fl-q--sub { margin-top: 14px; }
.fl-q--more { margin-top: 24px; }
.fl-opt { font-weight: 400; color: var(--textColour-tertiary); }
.fl-p { margin: 0; font-size: 13px; line-height: 19px; color: var(--textColour-secondary); text-wrap: pretty; }
.fl-p--gap { margin-bottom: 12px; }
.fl-small { margin: 6px 0 0; font-size: 12px; line-height: 17px; color: var(--textColour-secondary); }
.fl-small--error { color: var(--fl-crit-fg); }
.fl-input--search { margin: 12px 0 10px; }
.fl-gap-top { margin-top: 10px; }

.fl-input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  font-size: 16px;
  color: var(--textColour-primary);
  outline: none;
}
.fl-input:focus { border-color: var(--field-coral); box-shadow: 0 0 0 3px var(--field-coral-tint); }
.fl-input::placeholder { color: var(--textColour-tertiary); }
@media (min-width: 700px) { .fl-input { font-size: 14px; } }

/* Radio cards: stacked until there is room for two side by side. */
.fl-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 10px; }
@media (max-width: 380px) { .fl-choices { grid-template-columns: 1fr; } }
.fl-choice {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  cursor: pointer;
  transition: border-color 200ms ease;
}
.fl-choice:has(.fl-hide:checked) { border-color: var(--field-coral); box-shadow: inset 0 0 0 1px var(--field-coral); }
.fl-choice__icon {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--sfColour-hover);
  color: var(--textColour-secondary);
  transition: background 200ms ease, color 200ms ease;
}
.fl-choice:has(.fl-hide:checked) .fl-choice__icon { background: var(--field-coral); color: #fff; }
.fl-choice__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fl-choice__title { font-size: 14px; line-height: 19px; font-weight: 600; }
.fl-choice__desc { margin-top: 3px; font-size: 12px; line-height: 17px; color: var(--textColour-secondary); text-wrap: pretty; }
.fl-dot {
  width: 18px;
  height: 18px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid var(--fl-radio);
}
.fl-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--field-coral); transform: scale(0); transition: transform 150ms ease; }
.fl-choice:has(.fl-hide:checked) .fl-dot { border-color: var(--field-coral); }
.fl-choice:has(.fl-hide:checked) .fl-dot::after { transform: scale(1); }

/* Multiple people: the quantity stepper. */
.fl-qty { display: none; }
.fl-sec:has(input[name="mode"][value="multiple"]:checked) .fl-qty { display: block; }
.fl-count { display: flex; align-items: center; gap: 8px; }
.fl-count__btn {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 6px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
.fl-count__input { width: 88px; text-align: center; font-variant-numeric: tabular-nums; }
.fl-note {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--borderColour-primary);
  background: var(--bgColour-primary);
  font-size: 13px;
  line-height: 19px;
  color: var(--textColour-secondary);
  text-wrap: pretty;
}

/* Check lists: accounts, holders, devices, custodians. */
.fl-checks { overflow: hidden; border-radius: 8px; border: 1px solid var(--borderColour-primary); background: var(--sfColour-primary); }
.fl-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 12px;
  border-top: 1px solid var(--borderColour-primary);
  cursor: pointer;
}
.fl-check:first-child, .fl-check[hidden] + .fl-check:not([hidden]):first-of-type { border-top-color: transparent; }
.fl-check.is-disabled { opacity: 0.45; cursor: default; }
.fl-check .fl-row__sub { color: var(--textColour-secondary); }
.fl-box {
  width: 20px;
  height: 20px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 4px;
  border: 1.5px solid var(--fl-radio);
  color: #fff;
  transition: background 150ms ease, border-color 150ms ease;
}
.fl-box--round { border-radius: 50%; }
.fl-box svg { opacity: 0; stroke-width: 3.2; }
.fl-check:has(.fl-hide:checked) .fl-box { background: var(--field-coral); border-color: var(--field-coral); }
.fl-check:has(.fl-hide:checked) .fl-box svg { opacity: 1; }
.fl-tag { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; background: var(--fl-crit-bg); color: var(--fl-crit-fg); }
.fl-linked { margin: 10px 0 0; font-size: 13px; font-weight: 500; }

/* Segmented controls: identity, role mode. */
.fl-seg { display: flex; gap: 4px; padding: 3px; border-radius: 8px; background: var(--sfColour-hover); }
.fl-seg--role { margin-bottom: 10px; }
.fl-seg__opt { position: relative; flex: 1; min-width: 0; cursor: pointer; }
.fl-seg__opt span {
  height: 36px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 13px;
  line-height: 15px;
  font-weight: 500;
  text-align: center;
  color: var(--textColour-secondary);
  transition: background 150ms ease, color 150ms ease;
}
.fl-seg__opt:has(.fl-hide:checked) span { background: var(--sfColour-primary); color: var(--textColour-primary); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); }

/* Identity cards. */
.fl-ident { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px; border-radius: 8px; border: 1px solid var(--borderColour-primary); }
.fl-ident--top { align-items: flex-start; margin-top: 0; }
.fl-ident__text { flex: 1; min-width: 0; }
.fl-ident__name { font-size: 14px; font-weight: 600; }
.fl-ident__sub { margin-top: 1px; font-size: 12px; line-height: 17px; color: var(--textColour-secondary); overflow-wrap: anywhere; text-wrap: pretty; }
.fl-ident--top .fl-ident__sub { margin-top: 3px; }
.fl-ident__tag { flex: none; font-size: 12px; font-weight: 500; color: var(--textColour-secondary); }
.fl-avatar { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 600; color: #fff; }
.fl-avatar--muted { background: var(--sfColour-hover); color: var(--textColour-secondary); }
.fl-avatar--coral { background: var(--field-coral); }
.fl-avatar--blue { background: #0969da; }
.fl-avatar--grey { background: var(--lm-neutral-7, #818b98); }
.fl-mini {
  flex: none;
  height: 36px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 6px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.fl-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }

.fl-ident--anon, .fl-ident--named, .fl-role--none, .fl-role--one, .fl-role--many { display: none; }
.fl-sec:has(input[name="ident"][value="anon"]:checked) .fl-ident--anon,
.fl-sec:has(input[name="rolemode"][value="none"]:checked) .fl-role--none { display: flex; }
.fl-sec:has(input[name="ident"][value="named"]:checked) .fl-ident--named,
.fl-sec:has(input[name="rolemode"][value="one"]:checked) .fl-role--one,
.fl-sec:has(input[name="rolemode"][value="many"]:checked) .fl-role--many { display: block; }

/* Chips: roles, work groups. */
.fl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fl-chip {
  position: relative;
  height: 36px;
  padding: 0 12px 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 999px;
  border: 1px solid var(--borderColour-primary);
  background: var(--sfColour-primary);
  color: var(--textColour-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.fl-chip:not(:has(.fl-swatch)) { padding-left: 12px; }
.fl-chip:has(.fl-hide:checked) { background: var(--field-coral); border-color: var(--field-coral); color: #fff; }
.fl-swatch { width: 12px; height: 12px; flex: none; border-radius: 50%; background: var(--fl-sw, transparent); }
.fl-chip:has(.fl-hide:checked) .fl-swatch--ring { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.95); }

/* Dynamic zone. */
.fl-dyn { margin-top: 22px; padding: 14px; border-radius: 8px; border: 1px solid var(--borderColour-primary); }
.fl-dyn__head { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.fl-dyn__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fl-dyn__title { margin-bottom: 3px; font-size: 14px; font-weight: 600; }
.fl-switch {
  appearance: none;
  position: relative;
  width: 40px;
  height: 24px;
  flex: none;
  margin: 0;
  border-radius: 999px;
  background: var(--fl-switch-off);
  cursor: pointer;
  transition: background 200ms ease;
}
.fl-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  transition: left 200ms ease;
}
.fl-switch:checked { background: var(--field-coral); }
.fl-switch:checked::after { left: 18px; }
.fl-dyn__fields {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--borderColour-primary);
}
.fl-dyn:has(.fl-switch:checked) .fl-dyn__fields { display: grid; }
.fl-dyn__label { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; font-weight: 600; }
.fl-sev { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; }
.fl-sev--critical { background: var(--fl-crit-bg); color: var(--fl-crit-fg); }
.fl-sev--warning { background: var(--fl-warn-bg); color: var(--fl-warn-fg); }
.fl-unit { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--textColour-secondary); }
.fl-input--num { width: 96px; }

.fl-max { margin-top: 10px; padding: 9px 12px; border-radius: 8px; font-size: 12px; line-height: 17px; background: var(--fl-warn-bg); color: var(--fl-warn-fg); }

/* Confirm. */
.fl-band {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border-radius: 8px;
  background: #151b23;
  color: #fff;
}
.fl-band > svg { opacity: 0.5; }
.fl-band__n { font-family: var(--font-mono-accent, var(--font-sans)); font-size: 20px; line-height: 24px; font-variant-numeric: tabular-nums; }
.fl-band__l { font-size: 12px; opacity: 0.75; }
.fl-band__pill { margin-left: auto; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #d4a72c; color: #1f2328; }
.fl-band__pill--ok { background: #2da44e; color: #fff; }
.fl-sum { margin: 14px 0 0; overflow: hidden; border-radius: 8px; border: 1px solid var(--borderColour-primary); background: var(--sfColour-primary); }
.fl-sum__row { display: flex; gap: 12px; padding: 12px; font-size: 13px; line-height: 18px; }
.fl-sum__row + .fl-sum__row { border-top: 1px solid var(--borderColour-primary); }
.fl-sum dt { width: 38%; flex: none; color: var(--textColour-secondary); }
.fl-sum dd { flex: 1; min-width: 0; margin: 0; font-weight: 500; overflow-wrap: anywhere; }