/* thedrawer/public/css/leave-time-build.css
 * DR-197 step 1. Bench tokens only, same as every other tool page. The
 * picker rules below are leave-time.css's own `.lt-picker-*` block,
 * copied and renamed under `.ltb-` rather than shared, per the brief:
 * this page does not load leave-time.js and has no reason to load its
 * CSS either. Anything not renamed here (`.bench-btn`, `.bench-input`,
 * `.bench-field-label`, `.bench-stage`) is the shared design-system
 * base every tool page already uses unmodified.
 */

.ltb-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-width: 640px;
}

/* DR-216 step 6, finding 12. Wider on desktop and only on desktop.
   640px was chosen when this page was a form; it is a chain of cards
   now, several of which carry a title, a byline, a row of buttons and a
   duration on one line, and at 640 the measured cards wrap where they
   do not need to. 820 is still inside Section 3's own comfortable
   measure for the body text, which is the thing that would suffer from
   going wider for its own sake.
   Section 3's isDesktop breakpoint is 900px throughout, so this uses
   that and nothing narrower: below it the width was never the problem
   and the 390px viewport rule still governs. */
@media (min-width: 900px) {
  .ltb-wrap { max-width: 820px; }
}

/* DR-216 finding 1. .ltb-alpha, the dev banner's own rule, came out
   with the banner. Nothing else used it, checked before removing
   rather than left behind as a class with no element. */

.ltb-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
}

.ltb-lead {
  margin: 0;
  color: var(--ink-soft);
}

.ltb-ask {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.ltb-field { min-width: 0; }

.ltb-row {
  display: flex;
  gap: var(--s2);
  align-items: stretch;
  flex-wrap: wrap;
}

.ltb-row .bench-input { flex: 1 1 210px; min-width: 0; }

.ltb-geo-denied {
  margin: 4px 0 0;
  font-size: var(--t-small);
  color: var(--ink-faint);
}

/* ── Target chips ────────────────────────────────────────────────── */

.ltb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.ltb-chip {
  min-height: var(--tap);
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: var(--t-body);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-raised);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--line-strong);
}

.ltb-chip.is-active {
  background: var(--ink);
  color: var(--ground);
  box-shadow: none;
}

/* ── Station stickers ────────────────────────────────────────────── */

.ltb-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0;
}

.ltb-sticker {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  font: inherit;
  text-align: left;
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel-raised);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--line-strong);
}

.ltb-sticker-name { font-size: 14px; line-height: 1.2; }
.ltb-sticker-line { font-size: var(--t-micro); color: var(--ink-faint); }

.ltb-station-more {
  margin-top: 4px;
}

/* ── The picker, copied from leave-time.css's .lt-picker-* block and
 * renamed. Behaviour and structure are identical; only the class and
 * id prefixes changed. ─────────────────────────────────────────────
 */

.ltb-picker-summary {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  text-align: left;
  background: var(--ground);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  min-height: 64px;
  font: inherit;
  cursor: pointer;
}

.ltb-picker-summary-text { flex: 1 1 auto; min-width: 0; }

.ltb-picker-summary-name {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

.ltb-picker-summary-line {
  display: block;
  margin-top: 2px;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.ltb-picker-summary-change {
  flex: 0 0 auto;
  font-size: var(--t-small);
  color: var(--ink-soft);
  text-decoration: underline;
}

.ltb-picker-open {
  background: var(--ground);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ltb-picker-field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 12px;
  min-height: 56px;
}

.ltb-picker-icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ink-faint); }

.ltb-picker-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 18px;
  color: var(--ink);
  padding: 14px 0;
}

.ltb-picker-input::placeholder { color: var(--ink-faint); }
body.bench .ltb-picker-input:focus-visible { outline: none; }
.ltb-picker-field:focus-within { border-color: var(--focus); }

.ltb-picker-clear,
.ltb-picker-close {
  flex: 0 0 auto;
  background: none;
  border: none;
  padding: 8px 2px;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}

.ltb-picker-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

.ltb-picker-chip {
  min-height: 34px;
  padding: 6px 11px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-faint);
  white-space: nowrap;
  cursor: pointer;
}

.ltb-picker-chip.is-active { background: var(--line-strong); border-color: var(--line-strong); color: var(--ground); }

.ltb-picker-filter-trigger {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-faint);
  cursor: pointer;
  text-align: left;
}

.ltb-picker-filter-trigger.is-active { background: var(--line-strong); border-color: var(--line-strong); color: var(--ground); }
.ltb-picker-filter-arrow { flex: 0 0 auto; font-size: 9px; line-height: 1; transition: transform .15s; }
@media (prefers-reduced-motion: reduce) { .ltb-picker-filter-arrow { transition: none; } }
.ltb-picker-filter-trigger[aria-expanded="true"] .ltb-picker-filter-arrow { transform: rotate(90deg); }

.ltb-picker-count { margin: 0; font-size: var(--t-small); color: var(--ink-faint); }

.ltb-picker-list {
  max-height: 300px;
  overflow-y: auto;
  border-top: 1px solid var(--line);
  padding-top: 6px;
  padding-right: 10px;
}
.ltb-picker-list:focus-visible { outline: none; }

.ltb-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  min-height: 56px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
}

.ltb-picker-row-text { flex: 1 1 auto; min-width: 0; }
.ltb-picker-row-name { display: block; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.15; color: var(--ink); }
.ltb-picker-row-line { display: block; margin-top: 1px; font-size: 13px; color: var(--ink-faint); }
.ltb-picker-row.is-line-hit { opacity: .86; }
.ltb-picker-row.is-selected { background: var(--ground-sunk); border-color: var(--line-strong); }
.ltb-picker-row.is-active { background: var(--accent-soft); border-color: var(--accent); }
.ltb-picker-row:hover { background: var(--ground-sunk); }

.ltb-picker-badge {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: var(--radius);
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
}
.ltb-picker-badge-go { background: var(--ink); color: var(--ground); }
.ltb-picker-badge-up { background: var(--accent); color: var(--accent-ink); }

.ltb-picker-check { flex: 0 0 auto; width: 14px; font-size: 15px; color: var(--accent); }

.ltb-picker-empty { padding: var(--s3) var(--s2); }
.ltb-picker-empty-head { margin: 0 0 4px; font-weight: 600; color: var(--ink); }
.ltb-picker-empty-body { margin: 0; font-size: var(--t-small); color: var(--ink-faint); }

/* ── The map. Park Here's own pin/marker rules (park-here.css),
 * copied and renamed. Its Toronto-only maxBounds and curb hit-test do
 * not carry over: neither belongs to an office picker that has to
 * reach wherever Google resolves an address. ───────────────────────
 */

.ltb-map { margin-top: var(--s2); }

.ltb-map-lead {
  margin: 0 0 6px;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.ltb-map-surface {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: min(60vh, 420px);
  border: var(--border-w) solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel-raised);
}

.ltb-map-container { position: absolute; inset: 0; }

.ltb-map-plain {
  position: absolute;
  inset: 0;
  background: var(--panel-raised);
  touch-action: none;
}

.leaflet-marker-icon.ltb-pin,
.ltb-map-plain-pin {
  cursor: grab;
}

.ltb-map-plain-pin { position: absolute; left: 50%; top: 50%; }
.ltb-map-plain-pin:active,
.ltb-pin:active { cursor: grabbing; }

.ltb-pin-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
}

.ltb-pin-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding: var(--s1) var(--s2);
  background: var(--accent);
  color: var(--accent-ink);
  border: var(--border-w-heavy) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}

.ltb-pin-point { display: block; margin-top: -3px; pointer-events: none; }
.ltb-pin-point path { fill: var(--accent); stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }

@keyframes ltb-pin-drop {
  0%   { transform: translateY(-16px) scale(0.9); }
  55%  { transform: translateY(2px) scale(1.05); }
  78%  { transform: translateY(-2px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}
.ltb-pin-drop-anim { animation: ltb-pin-drop 260ms ease-out; }

.ltb-map-note {
  margin: var(--s2) 0 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.ltb-map-error {
  margin: var(--s2) 0 0;
  font-size: var(--t-small);
  color: var(--stop);
}

/* ── Build gate and the step 1 placeholder result ────────────────── */

.ltb-build-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
}

.ltb-build-note {
  flex: 1 1 170px;
  font-size: var(--t-small);
  color: var(--ink-faint);
}

.ltb-result {
  border: var(--border-w) solid var(--line-strong);
  background: var(--panel-raised);
  border-radius: var(--radius);
  padding: var(--s3);
}

.ltb-result-lead {
  margin: 0 0 var(--s2);
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.ltb-result-list { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.ltb-result-list dt { font-size: var(--t-micro); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--ink-faint); }
.ltb-result-list dd { margin: 0 0 6px; font-size: var(--t-body); color: var(--ink); }

/* ── DR-197 step 2. The assembled chain. ──────────────────────────────
 * Three card treatments carry the tool's whole pitch: a dark, pinned
 * card for the one anchor everything else bends around, a light,
 * bordered card for anything Google or DR-186 actually measured, and a
 * dashed, slightly rotated card for the four buffers that are somebody's
 * own preference, not a measurement. Losing that visible difference
 * loses the point of the builder, per the brief's own Terry check.
 */

.ltb-build-error {
  margin: var(--s2) 0 0;
  font-size: var(--t-small);
  color: var(--stop);
}

/* DR-211. This card is deliberately always dark, --ink itself, in every
   skin and theme -- everything else on the page inverts around it. The
   text on it was hardcoded near-white/rose instead, which happened to
   read correctly against a dark --ink in both light themes by
   coincidence and went unreadable in both dark ones, where --ink is
   itself light. --panel is the token already defined, per skin and
   theme, as the opposite polarity of --ink -- it is the exact value
   the light-theme hardcode already matched (#FBF7EF is Workshop
   light's own --panel), so using it changes nothing in light and fixes
   dark. --ltb-panel-muted derives the secondary tier from it the same
   way, rather than a second hand-picked hardcode with no dark
   counterpart. */
.ltb-totals-banner {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 calc(-1 * var(--s3));
  padding: 11px var(--s3);
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--ink);
  color: var(--panel);
  --ltb-panel-muted: color-mix(in srgb, var(--panel) 78%, transparent);
  border-bottom: 3px solid var(--accent);
}

.ltb-totals-label {
  font-size: var(--t-micro);
  letter-spacing: var(--label-track);
  text-transform: var(--label-case);
  color: var(--ltb-panel-muted);
}

.ltb-totals-value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
}

.ltb-totals-spacer { flex: 1; }
.ltb-totals-detail { font-size: var(--t-small); color: var(--ltb-panel-muted); }

.ltb-chain {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.ltb-chain-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--panel);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  padding: 10px 13px;
}

.ltb-chain-summary-text { flex: 1 1 220px; font-size: var(--t-small); line-height: 1.35; }

/* DR-216 finding 2. The implausible-leg warning. --warn rather than
   --stop, and the left edge rather than a full fill, because this is
   the same box language the closure notice below already set for
   "something about this chain is worth knowing" -- and unlike a
   closure, which is a fact about the world, this one is a guess about
   an address that may well be right. */
.ltb-implausible-notice {
  padding: 10px 14px;
  background: var(--panel);
  border: var(--border-w) solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
}
.ltb-implausible-notice p { margin: 0; font-size: var(--t-small); color: var(--ink); }

/* DR-207 step 3. Same box as .ltb-ttc-notice below, but a --stop left
   edge and full-ink text: this one only shows for a real closure, not
   a standing disclaimer, so it reads as more than ambient caveat. */
.ltb-closure-notice {
  padding: 10px 14px;
  background: var(--panel);
  border: var(--border-w) solid var(--line);
  border-left: 3px solid var(--stop);
  border-radius: var(--radius);
}
.ltb-closure-notice p { margin: 0; font-size: var(--t-small); color: var(--ink); }

/* DR-200 step 3. Same box language as leave-time.css's own #lt-ttc-notice
   -- no dismiss control, own copy updated in DR-207 step 4. */
.ltb-ttc-notice {
  padding: 10px 14px;
  background: var(--panel);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
}
.ltb-ttc-notice p { margin: 0; font-size: var(--t-small); color: var(--ink-faint); }
.ltb-ttc-notice a { color: var(--accent); }

.ltb-chain-trunk {
  position: relative;
  display: flex;
  flex-direction: column;
}

.ltb-chain-trunk::before {
  content: '';
  position: absolute;
  left: 25px;
  top: 20px;
  bottom: 20px;
  width: 3px;
  background: var(--line-strong);
}

.ltb-node-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
}

.ltb-node-dot {
  width: 53px;
  flex: 0 0 53px;
  display: flex;
  justify-content: center;
  padding-top: 12px;
}

.ltb-node-dot span {
  width: 15px;
  height: 15px;
  background: var(--ink);
  border: 3px solid var(--ink);
}

.ltb-node-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 0 12px;
}

.ltb-node-kicker {
  font-size: var(--t-micro);
  letter-spacing: var(--label-track);
  text-transform: var(--label-case);
  color: var(--ink-faint);
}

.ltb-node-value { font-size: var(--t-body); line-height: 1.3; }

.ltb-leg-row { display: flex; gap: 12px; align-items: flex-start; position: relative; }

.ltb-leg-dot-wrap { width: 53px; flex: 0 0 53px; display: flex; justify-content: center; padding-top: 16px; }

.ltb-leg-wrap { flex: 1; min-width: 0; display: flex; margin: 7px 0; }

/* Measured and pinned cards share a shape; only the colour differs. */
.ltb-leg-card {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  background: var(--panel-raised);
  border: var(--border-w-heavy) solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--line-strong);
}

/* DR-211. Same fix as .ltb-totals-banner above and for the same
   reason: this card is deliberately always --ink, so its own text
   needs the token that is always the opposite polarity of --ink,
   --panel, not a value hand-picked against one theme's --ink alone. */
.ltb-leg-card.is-pinned {
  background: var(--ink);
  color: var(--panel);
  --ltb-panel-muted: color-mix(in srgb, var(--panel) 78%, transparent);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--accent);
}

.ltb-leg-dot { width: 13px; height: 13px; border-radius: 50%; border: 3px solid var(--line-strong); background: var(--ink); }
.ltb-leg-dot.is-pinned { width: 19px; height: 19px; border-radius: 50%; border: 4px solid var(--ink); background: var(--accent); }

.ltb-leg-tick {
  width: 9px;
  flex: 0 0 9px;
  align-self: stretch;
  background: repeating-linear-gradient(to bottom, var(--line-strong) 0 1.5px, transparent 1.5px 7px);
  border-right: 1px solid var(--line);
}

.ltb-leg-card.is-pinned .ltb-leg-tick {
  background: repeating-linear-gradient(to bottom, var(--accent) 0 6px, transparent 6px 12px);
  border-right: none;
}

.ltb-leg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 12px 13px 13px; }

.ltb-leg-kicker { font-size: var(--t-micro); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--ink-faint); }
.ltb-leg-card.is-pinned .ltb-leg-kicker { color: var(--ltb-panel-muted); }

.ltb-leg-title-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ltb-leg-title { font-size: var(--t-body); line-height: 1.25; }

.ltb-leg-icon { width: 20px; height: 20px; flex: 0 0 20px; }

.ltb-leg-badge {
  font-size: 10px;
  letter-spacing: .18em;
  padding: 2px 6px;
  border: 1.5px solid var(--line-strong);
}
.ltb-leg-card.is-pinned .ltb-leg-badge { border-color: var(--panel); }

.ltb-leg-meta { font-size: var(--t-micro); color: var(--ink-faint); letter-spacing: .04em; }
.ltb-leg-card.is-pinned .ltb-leg-meta { color: var(--ltb-panel-muted); }

.ltb-leg-modes { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.ltb-leg-mode-btn {
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  border: var(--border-w) solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
}
/* DR-211. Same background/text pairing as the pinned card, standalone
   here rather than nested under .is-pinned since this toggle can sit
   on a measured card too -- var(--panel) directly, no muted tier
   needed for a two-word label. */
.ltb-leg-mode-btn.is-active { background: var(--ink); color: var(--panel); }

.ltb-leg-ends { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px; }
.ltb-leg-ends-label { font-size: var(--t-micro); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--ink-faint); }
.ltb-leg-end-btn {
  padding: 5px 9px;
  cursor: pointer;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.1;
  border: 1.5px solid var(--line-strong);
  background: transparent;
  color: var(--ink-soft);
}
.ltb-leg-end-btn.is-active { background: var(--ink); color: var(--panel); }

.ltb-leg-path {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  cursor: pointer;
  font-size: var(--t-small);
  color: var(--ink-soft);
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.ltb-leg-path-box {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
  border: 2px solid var(--line-strong);
  background: var(--panel-raised);
}
.ltb-leg-path.is-on .ltb-leg-path-box { background: var(--accent); color: var(--accent-ink); }

.ltb-leg-right-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 9px;
  padding: 12px 13px 13px;
}
.ltb-leg-mins { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.ltb-leg-link {
  font-size: var(--t-small);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  color: var(--ink-faint);
}
.ltb-leg-card.is-pinned .ltb-leg-link { color: var(--ltb-panel-muted); }

/* Personal cards: dashed, rotated, the accent-soft ground. */
.ltb-personal-row { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--accent-soft); border: 2px dashed var(--accent); border-radius: var(--radius); transform: rotate(-.6deg); box-shadow: 3px 3px 0 rgba(20,17,12,.18); }
/* DR-211. A plain <button> reset that dropped `color`: browsers never
   inherit text colour into a button by default (unlike font-family,
   reset explicitly below and already correct), so both of these fell
   back to the UA default, opaque black, on every skin and theme
   rather than the page's own --ink. That read fine wherever --ink
   itself happens to be dark, both light themes, and failed wherever
   it is light, both dark ones -- confirmed by computed contrast, not
   assumed from the missing property alone. `color: inherit` restores
   the same --ink this row's every other, non-button child already
   carries for free. */
/* DR-216 step 6, finding 11. The head is a row of two: the disclosure
   button, which now reveals the note rather than the number, and the
   stepper, which is always there. They are siblings because a button
   cannot contain a button, which is the real reason the stepper used to
   live behind the disclosure at all. */
.ltb-personal-head-row { display: flex; align-items: center; gap: 8px; padding: 7px 11px; }
.ltb-personal-head { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 0; background: none; border: none; text-align: left; font-family: inherit; color: inherit; }
.ltb-personal-title { flex: 1; min-width: 0; font-size: var(--t-small); line-height: 1.3; }
.ltb-personal-toggle { font-size: var(--t-small); color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.ltb-personal-open { display: flex; flex-direction: column; gap: 9px; padding: 0 11px 11px; }
/* The stepper no longer sits inside the opened area, so it carries its
   own alignment rather than inheriting that column's. */
.ltb-personal-head-row .ltb-personal-stepper { flex: 0 0 auto; }
.ltb-personal-meta { font-size: var(--t-micro); color: var(--ink-soft); line-height: 1.5; }
.ltb-personal-stepper { display: flex; align-items: center; gap: 2px; }
/* DR-211. Same missing-colour bug as .ltb-personal-head above, on its
   own background (--panel-raised) rather than an inherited one, so
   the fix is the explicit token that background is already paired
   with everywhere else on this page, not `inherit`. */
.ltb-personal-step-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--line-strong);
  background: var(--panel-raised);
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.ltb-personal-step-value { font-family: var(--font-display); font-size: 21px; font-weight: 700; min-width: 56px; text-align: center; }

.ltb-transfer-row { display: flex; gap: 12px; align-items: flex-start; position: relative; }
.ltb-transfer-dot-wrap { width: 53px; flex: 0 0 53px; display: flex; justify-content: center; padding-top: 16px; }
.ltb-transfer-dot { width: 11px; height: 11px; border-radius: 50%; border: 3px dashed var(--line); background: var(--ground); }
.ltb-transfer-add {
  flex: 1; min-width: 0; margin: 7px 0;
  display: flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 16px; text-align: center;
  font-size: var(--t-small);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}
.ltb-transfer-add[disabled] { border-color: var(--line); color: var(--ink-faint); cursor: default; }

.ltb-chain-readout {
  border: var(--border-w) solid var(--line-strong);
  background: var(--panel-raised);
  box-shadow: var(--shadow);
  padding: 15px 16px;
  border-radius: var(--radius);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.ltb-chain-readout-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ltb-chain-readout-kicker { font-size: var(--t-micro); letter-spacing: var(--label-track); text-transform: var(--label-case); color: var(--ink-faint); }
.ltb-chain-readout-head { font-family: var(--font-display); font-size: 28px; font-weight: 700; line-height: 1.05; }
.ltb-chain-readout-sub { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.4; }
.ltb-chain-readout-confidence { font-size: var(--t-small); color: var(--ink); line-height: 1.4; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.ltb-chain-save-note { margin: 8px 0 0; font-size: var(--t-micro); color: var(--ink-faint); line-height: 1.5; }

/* DR-216 step 4, finding 9. The confirm step, mirroring the live page's
   own #lt-confirm rather than inventing a second treatment for the same
   moment: the same row-per-address shape, the same label column, the
   same --warn weight on the implausible line. The tokens do the work of
   keeping the two pages recognisably one tool across all four skin and
   theme combinations. */
.ltb-confirm {
  margin: 0 0 var(--s4);
  padding: var(--s3);
  background: var(--panel);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
}

.ltb-confirm-kicker {
  margin: 0 0 6px;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  color: var(--ink-faint);
}

.ltb-confirm-headline {
  margin: 0 0 var(--s3);
  font-family: var(--font-display);
  font-size: var(--t-lead);
  font-weight: 700;
  color: var(--ink);
}

.ltb-confirm-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  min-width: 0;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.ltb-confirm-kind {
  flex: 0 0 44px;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  color: var(--ink-faint);
}

.ltb-confirm-addr {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-body);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.ltb-confirm-note {
  margin: 0 0 var(--s2);
  font-size: var(--t-small);
  color: var(--ink-faint);
}

.ltb-confirm-warning {
  margin: 0 0 var(--s2);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--warn);
}

.ltb-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

.ltb-map-confirm {
  margin-top: var(--s2);
}

/* DR-216 step 5, finding 13. The explainer box a new arrival reads
   first, now that the old setup screen is retired and this page is where
   they land. Coloured, per Tim's own word for it: --accent-soft is the
   token pair --accent already carries per skin and theme, so it reads as
   deliberate in all four rather than as a warning in one of them. */
.ltb-intro {
  margin: var(--s3) 0 0;
  padding: 12px 16px;
  background: var(--accent-soft);
  border: var(--border-w) solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.ltb-intro-text {
  margin: 0;
  font-size: var(--t-small);
  color: var(--ink);
}