/* ============================================================================
   BB Internal Form — surface styles

   Reads tokens.css. Five rules this file holds itself to, carried over from the
   field app's Internal Form because they were learned the hard way:

   1. ONE PADDING LEVEL. No card inside a card. Grouping is by space and a
      hairline, never by nested borders — at 390px a second border costs real
      content width.
   2. ONE SELECTED STATE — a filled navy chip. accent-color on a native
      checkbox renders the brand orange at 2.97:1; a rep auditing 46 binary
      answers in a truck cab cannot see that. Navy fill + a white check is
      unambiguous at arm's length in sunlight.
   3. CONTROLS NEVER SHRINK BELOW 16px. Enforced by the :where() floor in
      tokens.css; nothing here overrides font-size downward on an input.
   4. NO outline:none, anywhere.
   5. NO hairline directly under an eyebrow — the eyebrow already reads as a
      divider, and two in a row reads as a mistake.
   ========================================================================= */

*, *::before, *::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--t-body);
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

/* The app is a column: fixed header, scrolling body, sticky footer. 100dvh so
   mobile browser chrome collapsing doesn't leave a gap under the footer. */
.app{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* ============================================================================
   Grid

   The frame's three bands, as real column counts:
     390–639    4 col · 12px gutter · 16px margin
     640–1023   8 col · 16px gutter · 24px margin
     1024+     12 col · 20px gutter · 24px margin, content capped at 1200

   Spans are integers held in variables rather than calc() on grid-column, so
   the column maths stays readable and every browser agrees on it.
   ========================================================================= */
/* ---- the width scale ----------------------------------------------------
   Five sizes, in columns, per band. A field declares what it HOLDS and the
   grid decides how wide that is — a ZIP and a street address are not the same
   input, and sizing them identically is what makes a form read as a stack of
   identical bars.

              390(4col)  640(8col)  1024(12col)
     xs           2          2           2       counts: rooms, stories
     sm           2          3           3       date, account number
     md           4          4           4       durations, most text
     lg           4          6           6        names, locations
     full         4          8           8       textareas, notes

   `full` deliberately stops at 8 of 12. The content column is capped at 1200,
   so spanning all twelve would put a customer-name input about 1150px wide —
   a metre of empty box for a 20-character answer. */
:root{
  --w-xs:2; --w-sm:2; --w-md:4; --w-lg:4; --w-full:4; --w-chip:2;
}
@media (min-width:640px){
  :root{ --w-xs:2; --w-sm:3; --w-md:4; --w-lg:6; --w-full:8; --w-chip:2; }
}
@media (min-width:1024px){
  :root{ --w-xs:2; --w-sm:3; --w-md:4; --w-lg:6; --w-full:8; --w-chip:3; }
}

.wrap{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
  padding-inline:var(--margin);
}

.grid{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols), minmax(0,1fr));
  column-gap:var(--gutter);
  row-gap:var(--sp-3);
}
.grid > *{ grid-column:span var(--w-full); min-width:0; }
.col-xs { grid-column:span var(--w-xs); }
.col-sm { grid-column:span var(--w-sm); }
.col-md { grid-column:span var(--w-md); }
.col-lg { grid-column:span var(--w-lg); }
/* Spans every column regardless of band — for the few things that genuinely
   want the whole measure. */
.col-wide{ grid-column:1 / -1; }

/* ============================================================================
   Header — the one dark surface. Carries back, title, step count and progress.
   ========================================================================= */
.topbar{
  background:linear-gradient(135deg,#1b212a 0%,#242e3b 52%,#16305f 100%);
  color:var(--on-dark-ink);
  padding-top:calc(var(--sp-4) + env(safe-area-inset-top));
  position:sticky;
  top:0;
  z-index:20;
}
.topbar .wrap{ padding-bottom:var(--sp-2); }

/* The app's two pages. Underline rather than a pill row — at 390px two pills
   plus a count read as buttons that do something, and these only navigate. */
.tabs{
  display:flex;
  gap:var(--sp-5);
  margin-bottom:var(--sp-4);
}
.tab{
  appearance:none;
  border:0;
  background:none;
  padding:var(--sp-2) 0;
  font:inherit;
  font-size:var(--t-meta);
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.62);
  cursor:pointer;
  border-bottom:2px solid transparent;
  display:flex;
  align-items:center;
  gap:var(--sp-2);
}
.tab[aria-current="page"]{
  color:#fff;
  border-bottom-color:var(--orange);
}
.tab-count{
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:var(--r-full);
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:var(--t-eyebrow);
  font-weight:800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  letter-spacing:0;
}

.top-row{ display:flex; align-items:center; gap:var(--sp-3); }

/* The archive header has no rail under it; this keeps the band the same
   height as the form's so switching pages doesn't jump the layout. */
.head-pad{ height:34px; }
@media (min-width:640px){ .head-pad{ height:56px; } }

.eyebrow{
  font-size:var(--t-eyebrow);
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-dark-warm);
  margin:0;
}
.step-title{
  font-size:var(--t-display);
  font-weight:800;
  letter-spacing:-.02em;
  line-height:1.15;
  margin:2px 0 0;
}
.top-meta{ flex:1; min-width:0; }

.pill{
  flex:none;
  height:28px;
  padding:0 var(--sp-3);
  border-radius:var(--r-full);
  background:rgba(255,145,102,.20);
  color:var(--on-dark-warm);
  font-size:var(--t-meta);
  font-weight:800;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

/* Progress rail — the bars ARE the step navigation, so they're real buttons.
   minmax(0,1fr), not 1fr: a plain 1fr floors at min-content, so "Equipment"
   and "Checklist" would push their columns wider than their share and shunt
   the whole rail out of alignment. */
.rail{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:var(--sp-1);
  margin-top:var(--sp-4);
  padding:0;
}
.rail-btn{
  appearance:none;
  border:0;
  padding:var(--sp-2) 0 0;
  background:none;
  cursor:pointer;
  text-align:left;
  color:inherit;
  font:inherit;
  border-radius:var(--r-xs);
}
.rail-bar{
  display:block;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,.22);
  transition:background var(--dur-base) var(--ease);
}
.rail-btn[data-state="done"]    .rail-bar{ background:var(--navy-l); }
.rail-btn[data-state="current"] .rail-bar{ background:var(--orange); }

/* Six labels do not fit across a 390px phone without truncating every one of
   them to nonsense. Below 640 the bars carry the position and the header's
   "Step 3 of 6" + title carry the meaning; each button keeps an aria-label so
   the rail is still navigable without sight of them. */
.rail-label{
  display:none;
  font-size:var(--t-eyebrow);
  font-weight:700;
  letter-spacing:.04em;
  padding:var(--sp-2) 0 var(--sp-3);
  color:rgba(255,255,255,.62);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rail-btn[data-state="current"] .rail-label{ color:#fff; }

@media (min-width:640px){
  .rail-label{ display:block; }
}
/* Without labels the rail needs its own bottom breathing room. */
@media (max-width:639px){
  .rail{ margin-bottom:var(--sp-4); }
  .rail-btn{ padding-bottom:var(--sp-2); }
}

/* ============================================================================
   Body
   ========================================================================= */
main{ flex:1; padding-block:var(--sp-4) var(--sp-6); }

/* The content sits on a white panel, the page canvas stays --bg. This is the
   ONLY container (rule 1) — sections inside it are separated by space and a
   hairline, never by a second border. */
#steps{
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:var(--sp-4);
}
@media (min-width:640px){
  #steps{ padding:var(--sp-5); }
}

.step[hidden]{ display:none; }

.sec{ margin-bottom:var(--sp-6); }
.sec:last-child{ margin-bottom:0; }

.sec-h{
  font-size:var(--t-section);
  font-weight:800;
  letter-spacing:-.01em;
  margin:0 0 var(--sp-3);
  padding-bottom:var(--sp-2);
  border-bottom:1px solid var(--line);
}
/* Rule 5: an eyebrow is its own divider. */
.sec-h.no-rule{ border-bottom:0; padding-bottom:0; }

.sec-note{
  font-size:var(--t-meta);
  color:var(--muted);
  margin:calc(var(--sp-3) * -1 + 2px) 0 var(--sp-4);
  line-height:1.6;
}

/* ============================================================================
   Fields
   ========================================================================= */
.field{ display:flex; flex-direction:column; gap:var(--sp-2); }

.lbl{
  font-size:var(--t-meta);
  font-weight:700;
  letter-spacing:.04em;
  color:var(--muted);
}
.lbl .opt{ font-weight:500; text-transform:none; letter-spacing:0; }

input[type=text],
input[type=date],
input[type=number],
input[type=tel],
input[type=email],
select,
textarea{
  width:100%;
  height:var(--control-h);
  padding:0 var(--sp-3);
  color:var(--ink);
  background:var(--card);
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-md);
  font-weight:600;
  transition:border-color var(--dur-fast) var(--ease);
}
input[type=number]{ font-variant-numeric:tabular-nums; }

textarea{
  height:auto;
  min-height:120px;
  padding:var(--sp-3);
  line-height:1.6;
  font-weight:500;
  resize:vertical;
}

input:hover, select:hover, textarea:hover{ border-color:var(--navy-l); }

/* At 390 a paired field is ~157px. With 12px of horizontal padding a
   fifteen-character name overruns by about two pixels — visible, and on the
   first screen of the form. 8px buys the ~8px that fixes it, and a tighter
   control is the right direction here anyway. */
@media (max-width:639px){
  input[type=text], input[type=date], input[type=number],
  input[type=tel], input[type=email], select{ padding-inline:var(--sp-2); }
  select{ padding-right:30px; }
}


/* The app's own chevron. The native select arrow is inconsistent across
   platforms and ignores the type scale. */
select{
  appearance:none;
  padding-right:34px;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--placeholder) 50%),
    linear-gradient(135deg,var(--placeholder) 50%,transparent 50%);
  background-position:calc(100% - 17px) 53%, calc(100% - 12px) 53%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

:focus-visible{ border-radius:var(--r-md); }

/* ============================================================================
   Checkable chip — rule 2. Replaces every checkbox and radio in the form.

   The native control stays in the DOM as the accessible, keyboard-operable
   thing; it is visually hidden and the chip is drawn by its <label>. Space
   still toggles it, and screen readers still announce it as a checkbox.
   ========================================================================= */
/* Chips sit on the same columns as the fields above them, so a bank and a
   field group share vertical edges instead of nearly sharing them.
   auto-fill minmax() was doing its own thing: at 768 it produced four tracks
   that lined up with nothing. */
.bank{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols), minmax(0,1fr));
  column-gap:var(--gutter);
  row-gap:var(--sp-2);
}
.bank > *{ grid-column:span var(--w-chip); min-width:0; }
.bank.stack > *{ grid-column:1 / -1; }

/* height:100% on both so a two-line label ("Extension Applicator") lifts every
   chip in its row to the same height instead of leaving a ragged edge. */
.chk{ position:relative; display:block; height:100%; }

.chk input{
  position:absolute;
  width:1px; height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}

.chk span{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  height:100%;
  min-height:var(--control-h);
  padding:var(--sp-2) var(--sp-3);
  background:var(--card);
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-md);
  font-size:var(--t-body);
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),
             color var(--dur-fast) var(--ease);
}

/* The box. ::before is the square, ::after is the tick. */
.chk span::before{
  content:"";
  flex:none;
  width:20px; height:20px;
  border:1.5px solid var(--line-strong);
  border-radius:var(--r-xs);
  background:#fff;
  transition:inherit;
}
.chk.radio span::before{ border-radius:var(--r-full); }

.chk span::after{
  content:"";
  position:absolute;
  left:calc(var(--sp-3) + 6px);
  top:50%;
  width:5px; height:10px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:translateY(-60%) rotate(45deg) scale(.4);
  opacity:0;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.chk.radio span::after{
  left:calc(var(--sp-3) + 5px);
  width:8px; height:8px;
  border:0;
  border-radius:var(--r-full);
  background:#fff;
  transform:translateY(-50%) scale(.4);
}

.chk input:checked + span{
  background:var(--navy);
  border-color:var(--navy);
  color:#fff;
}
.chk input:checked + span::before{
  background:var(--navy);
  border-color:#fff;
}
.chk input:checked + span::after{
  opacity:1;
  transform:translateY(-60%) rotate(45deg) scale(1);
}
.chk.radio input:checked + span::after{ transform:translateY(-50%) scale(1); }

.chk input:hover + span{ border-color:var(--navy-l); }
.chk input:focus-visible + span{
  outline:2px solid var(--navy-l);
  outline-offset:2px;
}

/* ============================================================================
   Equipment row — label, then Qty and Each side by side.
   The two number cells share one grid across every row so the columns line up
   down the whole list.
   ========================================================================= */
.eq-row{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--sp-3);
  padding:var(--sp-3) 0;
  border-bottom:1px solid var(--line);
}
.eq-row:last-of-type{ border-bottom:0; }

.eq-name{ font-size:var(--t-body); font-weight:700; align-self:center; }
.eq-cells{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.eq-cells input{ text-align:center; }

@media (min-width:640px){
  .eq-row{ grid-template-columns:1fr 240px; align-items:center; }
}

.eq-variants{ margin-top:var(--sp-2); }

/* ============================================================================
   Service rows — a service, and the durations that appear once it is chosen.
   ========================================================================= */
.svc-row{
  padding:var(--sp-4) 0 var(--sp-3);
  border-bottom:1px solid var(--line);
}
.svc-row:first-child{ padding-top:0; }

/* The Type select and its Remove button sit on the columns like everything
   else. As a flex row the select stretched the full panel — a 12-option
   dropdown a metre wide, which is what the width scale exists to prevent. */
.svc-head{
  display:grid;
  grid-template-columns:repeat(var(--grid-cols), minmax(0,1fr));
  column-gap:var(--gutter);
  align-items:end;
}
.svc-head .field{ grid-column:span var(--w-md); min-width:0; }
.svc-head .btn-remove{ grid-column:span var(--w-xs); }

/* The durations reveal is a child of the row, so it indents under its service
   the same way a checklist sub-choice indents under its item — and it is a
   grid, so the notes field inside it gets a measure rather than the full
   indent width. */
/* `.show` on the reveal sets display:block at the same specificity as a plain
   `.svc-row .sub`, so the grid has to be declared on the shown state or source
   order silently wins and every child goes full width. */
.svc-row .sub,
.svc-row .sub.show{
  margin-bottom:0;
  display:grid;
  grid-template-columns:repeat(var(--grid-cols), minmax(0,1fr));
  column-gap:var(--gutter);
  row-gap:var(--sp-3);
}
.svc-row .sub:not(.show){ display:none; }
.svc-row .sub > *{ grid-column:1 / -1; min-width:0; }
.svc-row .sub > .svc-notes{ grid-column:span var(--w-full); }

/* ============================================================================
   Conditional reveal — same contract as the field app's inspection form:
   [data-cond] is closed, .show opens it. Kept as a class toggle rather than
   [hidden] so it can animate.
   ========================================================================= */
[data-cond]{ display:none; }
[data-cond].show{ display:block; animation:rv var(--dur-base) var(--ease); }

@keyframes rv{
  from{ opacity:0; transform:translateY(-4px); }
  to  { opacity:1; transform:none; }
}

/* A revealed sub-choice sits inside its parent item — indent, don't box it
   (rule 1). */
.sub{
  margin:var(--sp-3) 0 var(--sp-2) var(--sp-5);
  padding-left:var(--sp-4);
  border-left:2px solid var(--line);
}
.sub .lbl{ margin-bottom:var(--sp-2); display:block; }

/* ============================================================================
   Checklist — one item per row, full width, with its revealed sub-choices.
   ========================================================================= */
.check-list{ display:flex; flex-direction:column; gap:var(--sp-2); }
.check-item .chk span{ min-height:var(--control-h); }

/* ============================================================================
   Photos
   ========================================================================= */
.photo-add{
  width:100%;
  min-height:var(--control-h-lg);
  padding:var(--sp-2) var(--sp-4);
  background:var(--card);
  border:1.5px dashed var(--orange-br);
  border-radius:var(--r-md);
  color:var(--orange-btn);      /* never --orange: this is text */
  font-family:inherit;
  font-size:var(--t-body);
  font-weight:800;
  cursor:pointer;
  transition:background var(--dur-fast) var(--ease);
}
.photo-add:hover{ background:var(--orange-pale); }

.photo-empty{
  color:var(--muted);
  font-size:var(--t-meta);
  text-align:center;
  padding:var(--sp-6) 0;
}

.photo-block{
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.photo-block:first-of-type{ padding-top:var(--sp-2); }

.photo-img{
  width:100%;
  max-height:280px;
  object-fit:cover;
  border-radius:var(--r-lg);
  background:repeating-linear-gradient(135deg,#eef1f6 0 10px,#e4e9f1 10px 20px);
  display:block;
}

.photo-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
}
.photo-count{
  font-family:var(--font-mono);
  font-size:var(--t-meta);
  color:var(--placeholder);
}

.btn-remove{
  height:var(--control-h);
  padding:0 var(--sp-4);
  border:0;
  border-radius:var(--r-md);
  background:var(--danger-pale);
  color:var(--danger-d);
  font-family:inherit;
  font-size:var(--t-meta);
  font-weight:800;
  cursor:pointer;
}
.btn-remove:hover{ background:#fbe0e6; }

/* ============================================================================
   Review
   ========================================================================= */
.review-sec{ margin-bottom:var(--sp-6); }
.review-h{
  font-size:var(--t-meta);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--placeholder);
  margin:0 0 var(--sp-2);
}
.review-row{
  display:flex;
  justify-content:space-between;
  gap:var(--sp-4);
  padding:var(--sp-2) 0;
  border-bottom:1px solid var(--neutral-pale);
  font-size:var(--t-body);
}
.review-row dt{ color:var(--muted); font-weight:500; }
.review-row dd{ margin:0; font-weight:700; text-align:right; }
.review-empty{ color:var(--placeholder); font-weight:500; }

dl{ margin:0; }

/* ============================================================================
   Past forms
   ========================================================================= */
#pageArchive{
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  padding:var(--sp-5) var(--sp-4);
}
@media (min-width:640px){ #pageArchive{ padding:var(--sp-6); } }

.arch-row{
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  flex-wrap:wrap;
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--line);
}
.arch-row:last-of-type{ border-bottom:0; }

.arch-main{ flex:1; min-width:180px; }
.arch-name{
  font-size:var(--t-body);
  font-weight:800;
  letter-spacing:-.01em;
  margin:0;
}
.arch-meta{
  font-size:var(--t-meta);
  color:var(--muted);
  margin:2px 0 0;
}
.arch-actions{ display:flex; align-items:center; gap:var(--sp-2); }

.row-busy{
  font-size:var(--t-meta);
  color:var(--muted);
  font-weight:600;
}

.btn-small{
  height:var(--control-h);
  padding:0 var(--sp-4);
  font-size:var(--t-meta);
}
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-d); }
.btn-quiet{
  background:var(--card);
  border-color:var(--line-strong);
  color:var(--muted);
}
.btn-quiet:hover{ background:var(--danger-pale); color:var(--danger-d); border-color:var(--danger-pale); }

.empty{ text-align:center; padding:var(--sp-8) 0; }
.empty .sec-h{ margin-bottom:var(--sp-2); }
.empty .sec-note{ margin:0 auto var(--sp-5); max-width:38ch; }
.empty .btn{ display:inline-block; flex:none; padding-inline:var(--sp-6); }

.bank-gap{ margin-top:var(--sp-4); }

/* ============================================================================
   Footer — sticky, always reachable with a thumb.
   ========================================================================= */
.foot{
  position:sticky;
  bottom:0;
  z-index:10;
  background:var(--card);
  border-top:1px solid var(--line);
  box-shadow:var(--sh-up);
}
.foot .wrap{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  padding-block:var(--sp-3);
  padding-bottom:calc(var(--sp-3) + env(safe-area-inset-bottom));
}

.btn{
  height:var(--control-h-lg);
  padding:0 var(--sp-5);
  border-radius:var(--r-md);
  font-family:inherit;
  font-size:var(--t-body);
  font-weight:800;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:background var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn-back{
  background:var(--card);
  border-color:var(--line-strong);
  color:var(--muted);
}
.btn-back:hover{ background:var(--neutral-pale); }

.btn-next{
  flex:1;
  background:var(--navy);
  color:#fff;
}
.btn-next:hover{ background:var(--navy-d); }

.btn-submit{
  flex:1;
  background:var(--ok-strong);
  color:#fff;
}
.btn-submit:hover{ background:#12692f; }
.btn-submit[disabled]{ background:var(--placeholder); cursor:not-allowed; }

/* ============================================================================
   Banners — draft resume, sync state, storage pressure.
   ========================================================================= */
.banner{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-md);
  font-size:var(--t-meta);
  font-weight:600;
  margin-bottom:var(--sp-5);
}
.banner p{ margin:0; flex:1; min-width:180px; }
.banner-info{ background:var(--neutral-pale); color:var(--neutral); }
.banner-ok  { background:var(--ok-pale);      color:var(--ok); }
.banner-warn{ background:var(--warn-pale);    color:var(--warn); }
.banner-err { background:var(--danger-pale);  color:var(--danger-d); }

.banner button{
  height:var(--control-h);
  padding:0 var(--sp-4);
  border:1.5px solid currentColor;
  border-radius:var(--r-sm);
  background:transparent;
  color:inherit;
  font-family:inherit;
  font-size:var(--t-meta);
  font-weight:800;
  cursor:pointer;
}

.status{
  font-size:var(--t-meta);
  font-weight:600;
  color:var(--muted);
  margin:0 0 var(--sp-3);
}
/* Empty most of the time — don't hold a blank line above the form for it. */
.status:empty{ display:none; }

/* Visible only to screen readers — used for the live region that announces
   step changes and save state. */
.sr-only{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* Service notes sits under the durations, full width. */
.svc-notes textarea{ min-height:64px; }

/* Materials + tools, revealed only for an Exclusion type. */
.svc-banks{ display:flex; flex-direction:column; gap:var(--sp-2); }
.svc-banks .lbl{ margin-top:var(--sp-2); }
.svc-banks[hidden]{ display:none; }

/* Add Service / Next. Step 1 puts its own navigation here, directly under the
   service notes, so the sticky footer is hidden on that step rather than
   showing a second identical Next. */
.svc-actions{
  display:flex;
  gap:var(--sp-3);
  margin-top:var(--sp-6);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line);
}
.svc-add{ flex:none; }
.svc-actions .btn-next{ flex:1; }

/* Photos-for picker. Sits above the list; hidden when there is only one
   service and nothing stranded, because then it decides nothing. */
.photo-picker{ margin-bottom:var(--sp-5); }