/* ============================================================
   Tydy · components.css
   Requires tokens.css. Class names match Brand Book v5 §12.
   Do not add a second set of button styles anywhere.
   ============================================================ */

/* ------------------------------------------------------------
   BUTTONS · the lift
   Full pill, 1.5px soot edge, 3px hard shadow underneath.
   Hover lifts 1px. Press drops onto the page, shadow vanishes.
   Colour tells you which one matters; the edge tells you it is
   a button at all. One .btn-primary per screen.
   ------------------------------------------------------------ */
.btn{
  font-family:var(--body);font-weight:600;font-size:15px;line-height:1;
  background:var(--paper);color:var(--soot);
  border:1.5px solid var(--soot);border-radius:var(--radius-pill);
  padding:15px 26px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  position:relative;top:0;box-shadow:0 3px 0 var(--soot);
  transition:top .09s ease,box-shadow .09s ease,background .16s ease;
  /* An <a class="btn"> is still an anchor and still underlines itself. The
     product surfaces mostly use <button>, so this went unnoticed until the
     marketing pages, where nearly every button is a link. */
  text-decoration:none;white-space:nowrap;
}
.btn:hover{top:-1px;box-shadow:0 4px 0 var(--soot);background:var(--paper-2)}
.btn:active{top:3px;box-shadow:0 0 0 var(--soot)}
.btn:focus-visible{outline:none;box-shadow:0 3px 0 var(--soot),0 0 0 4px var(--citron)}
.btn:focus-visible:active{box-shadow:0 0 0 var(--soot),0 0 0 4px var(--citron)}

.btn-primary{background:var(--citron)}
.btn-primary:hover{background:var(--citron-deep)}
.btn-secondary{background:var(--paper)}

.btn-danger{background:var(--rust-wash);color:#8E3520;border-color:var(--rust);box-shadow:0 3px 0 var(--rust)}
.btn-danger:hover{background:#F0D9D1;box-shadow:0 4px 0 var(--rust)}
.btn-danger:active{box-shadow:0 0 0 var(--rust)}

.btn-ghost{
  background:transparent;border-color:transparent;box-shadow:none;color:var(--cedar);
  border-radius:10px;padding:13px 14px;font-weight:500;
}
.btn-ghost:hover{top:0;box-shadow:none;background:var(--paper-2);color:var(--soot)}
.btn-ghost:active{top:1px;box-shadow:none}

.btn[disabled]{
  background:var(--paper-2);color:#A79C8D;border-color:var(--line);
  box-shadow:0 3px 0 var(--line);cursor:not-allowed;top:0;
}
.btn[disabled]:hover,.btn[disabled]:active{top:0;box-shadow:0 3px 0 var(--line);background:var(--paper-2)}

.btn-sm{padding:9px 18px;font-size:13.5px;box-shadow:0 2px 0 var(--soot)}
.btn-sm:hover{box-shadow:0 3px 0 var(--soot)}
.btn-sm:active{top:2px}
.btn-sm.btn-danger{box-shadow:0 2px 0 var(--rust)}
.btn-sm[disabled],.btn-sm[disabled]:hover{box-shadow:0 2px 0 var(--line)}

.btn-lg{padding:19px 34px;font-size:17px;box-shadow:0 4px 0 var(--soot)}
.btn-lg:hover{box-shadow:0 5px 0 var(--soot)}
.btn-lg:active{top:4px}

.btn-block{width:100%}

@media (prefers-reduced-motion:reduce){
  .btn{transition:background .16s ease}
  .btn:hover{top:0;box-shadow:0 3px 0 var(--soot)}
}

/* ------------------------------------------------------------
   CHOICE PILLS
   Flat on purpose. A button is press-once-and-something-happens.
   A pill is a thing you pick. Selected = fill, never a tick.
   Single-select and multi-select look identical; the question
   says which.
   ------------------------------------------------------------ */
.pill{
  font-family:var(--body);font-weight:500;font-size:15px;
  background:var(--paper);color:var(--soot);
  border:1.5px solid var(--line);border-radius:var(--radius-pill);
  padding:12px 22px;cursor:pointer;transition:all .14s ease;
  min-height:44px;
}
.pill:hover{border-color:var(--cedar)}
.pill[aria-pressed="true"],.pill.on{background:var(--citron);border-color:var(--citron-deep);font-weight:600}
.pill:focus-visible{outline:2.5px solid var(--soot);outline-offset:3px}

/* A pill in a form wraps its own radio or checkbox, so there is no sibling to
   style and `.on` can only be applied by the server on the next render. That
   made the application feel broken: you pressed Yes and nothing happened until
   the page came back.
   `:has()` fills it in, and it is the right tool rather than a shortcut —
   deselecting the other radio in the group is handled by the browser, so a
   single rule keeps the whole group honest with no JavaScript at all. It also
   means the form still answers to the keyboard and still works if a script
   fails to load. */
.pill:has(input:checked){
  background:var(--citron);border-color:var(--citron-deep);font-weight:600;
}

/* The real control is visually hidden, so the ring has to be drawn on the
   label or a keyboard user cannot see where they are. */
.pill:has(input:focus-visible){
  outline:2.5px solid var(--soot);outline-offset:3px;
}

/* ------------------------------------------------------------
   FIELDS
   Label above, reason below, error in rust with the fix in it.
   Every field asking for something personal earns it with a hint
   saying why we need it or who never sees it.
   ------------------------------------------------------------ */
.fld{display:block;margin-bottom:16px}
.fld > span{display:block;font-size:13.5px;font-weight:600;margin-bottom:7px}
.fld > span em{font-style:normal;font-weight:400;color:var(--cedar)}

.inp{
  width:100%;font-family:var(--body);font-size:16px;color:var(--soot);
  background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--radius);padding:14px 16px;
}
.inp::placeholder{color:#A79C8D}
.inp:focus{outline:none;border-color:var(--soot);box-shadow:0 0 0 3px var(--citron-wash)}
.inp[readonly]{background:var(--paper-2);color:var(--cedar)}
.inp.err{border-color:var(--rust);box-shadow:0 0 0 3px var(--rust-wash)}

.fld .hint{font-size:13px;color:var(--cedar);margin-top:6px}
.fld .err-msg{font-size:13px;color:var(--rust);margin-top:6px;font-weight:500}

/* icon-prefixed variant — login and account screens only */
.ipx{position:relative;display:flex;align-items:center;margin-bottom:14px}
.ipx svg{
  position:absolute;left:15px;width:18px;height:18px;
  stroke:var(--cedar);fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;
}
.ipx input{
  width:100%;font-family:var(--body);font-size:16px;color:var(--soot);
  background:var(--paper-2);border:1.5px solid var(--line);
  border-radius:14px;padding:15px 16px 15px 45px;
}
.ipx input:focus{outline:none;background:var(--paper);border-color:var(--soot);box-shadow:0 0 0 4px var(--citron-wash)}

/* checkbox */
.check{display:inline-flex;align-items:center;gap:11px;cursor:pointer;font-size:15px;user-select:none}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{
  width:23px;height:23px;border:1.5px solid var(--soot);border-radius:7px;
  background:var(--paper);display:grid;place-items:center;flex:none;
  transition:background .14s ease;
}
.check .box::after{
  content:"";width:5px;height:10px;border:solid var(--soot);border-width:0 2.2px 2.2px 0;
  transform:rotate(42deg) scale(0);transition:transform .14s ease;margin-top:-2px;
}
.check input:checked + .box{background:var(--citron)}
.check input:checked + .box::after{transform:rotate(42deg) scale(1)}
.check input:focus-visible + .box{box-shadow:0 0 0 4px var(--citron)}

/* ------------------------------------------------------------
   STATUS CHIPS
   A status never appears without a next step within reach.
   "Expired" sits beside "Upload a new one". A red dot with
   nowhere to go is a dead end, and dead ends churn supply.
   ------------------------------------------------------------ */
.chip{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 13px;border-radius:var(--radius-pill);border:1px solid transparent;
}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip-done{background:var(--citron-wash);color:#5F6A12;border-color:#D3DA9A}
.chip-wait{background:var(--ochre-wash);color:#8A5F14;border-color:#E2CB9B}
.chip-stop{background:var(--rust-wash);color:#8E3520;border-color:#E3BCB0}
.chip-idle{background:var(--paper-2);color:var(--cedar);border-color:var(--line)}
.chip-live{background:var(--citron);color:var(--citron-ink);border-color:var(--citron-deep)}
.chip-live::before{animation:tydy-pulse 1.8s ease-in-out infinite}
@keyframes tydy-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.chip-live::before{animation:none}}

/* ------------------------------------------------------------
   THE RAIL
   Clay, not soot. It sits back from the work column without
   turning the screen into a night mode. Cards inside drop back
   up to paper: three readable layers on one warm ground.
   Same component for the onboarding wizard, the cleaner app nav,
   and the desk nav — swap the head.
   ------------------------------------------------------------ */
.rail{
  background:var(--clay);color:var(--soot);
  border-radius:var(--radius-lg);padding:22px 20px;max-width:300px;font-size:15px;
}
.rail .brand{font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.rail .brand svg{width:19px;height:19px;stroke:var(--soot);fill:none}
.rail .rlabel{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cedar-deep);margin:24px 0 8px;display:block;
}
.rail .pct{font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:-.02em}
.rail .pct span{font-family:var(--body);font-weight:400;font-size:15px;color:#5E5140;margin-left:8px}
.rail .est{font-size:13px;color:var(--cedar-deep)}

.bar{height:5px;background:#A8977F;border-radius:99px;margin:12px 0 8px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--citron);border-radius:99px}

.steps{list-style:none;margin:18px -8px 0;padding:0}
.steps li{display:flex;gap:12px;align-items:flex-start;padding:11px 8px;border-radius:10px;border-left:2.5px solid transparent}
.steps li.now{background:var(--paper);border-left-color:var(--citron-deep)}
.steps .dot{width:17px;height:17px;border-radius:50%;border:2px solid #9C8A72;flex:none;margin-top:2px}
.steps li.now .dot{border-color:var(--citron-deep);box-shadow:inset 0 0 0 3px var(--citron)}
.steps li.done .dot{background:var(--citron);border-color:var(--citron-deep);position:relative}
.steps li.done .dot::after{
  content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;
  border:solid var(--soot);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.steps .t{font-weight:600;font-size:15px;line-height:1.25}
.steps .s{font-size:12.5px;color:var(--cedar-deep);margin-top:2px}
.steps li.done .s{color:#66700F}

.helpcard{background:var(--paper);border-radius:var(--radius);padding:16px;margin-top:26px}
.helpcard b{display:block;font-family:var(--display);font-size:16px;margin-bottom:6px}
.helpcard p{font-size:13.5px;color:var(--cedar);line-height:1.5;margin-bottom:12px}

/* ------------------------------------------------------------
   THE QUESTION BLOCK
   The unit the whole onboarding is built from. Numbers are real
   sequence: a cleaner says "I'm stuck on 03" and the office
   knows exactly where they are.
   ------------------------------------------------------------ */
.q{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
.q:last-child{border-bottom:none}
.q .n{font-family:var(--mono);font-size:12px;color:var(--cedar);padding-top:4px;flex:none}
.q .body{flex:1;min-width:0}
.q h4{font-family:var(--display);font-weight:600;font-size:19px;margin-bottom:5px}
.q .why{color:var(--cedar);font-size:14.5px;margin-bottom:15px;max-width:56ch}

/* ------------------------------------------------------------
   DOCUMENT ROWS
   Status, action, and expiry on one line. Anything with an
   expiry is tracked: reminders at 60, 30, 7. At zero the cleaner
   leaves the matching pool and the rail says why.
   ------------------------------------------------------------ */
.docs{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.doc{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.doc:last-child{border-bottom:none}
.doc .nm{font-family:var(--display);font-weight:600;font-size:16.5px;flex:1;min-width:150px}
.doc .expiry{width:100%;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--cedar);margin-top:2px}

/* ------------------------------------------------------------
   THE JOB CARD
   Payout large, address hidden, one decision. The cleaner sees
   their flat payout and nothing about what the customer paid.
   ------------------------------------------------------------ */
.job{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;max-width:400px}
.job .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.job .pay{font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:-.02em;line-height:1}
.job .payl{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--cedar);margin-top:5px}
.job dl{margin:18px 0 20px;display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:14.5px}
.job dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--cedar);padding-top:4px}
.job dd{font-weight:500;margin:0}
.job .locked{color:var(--cedar);font-style:italic}

/* ------------------------------------------------------------
   BANNERS
   ------------------------------------------------------------ */
.banner{border-radius:var(--radius);padding:16px 18px;display:flex;gap:13px;align-items:flex-start;font-size:14.5px;line-height:1.5}
.banner b{font-family:var(--display);font-size:16px;display:block;margin-bottom:3px}
.banner .ic{
  font-family:var(--mono);font-weight:700;flex:none;width:22px;height:22px;
  border-radius:50%;display:grid;place-items:center;font-size:12px;margin-top:1px;
}
.b-done{background:var(--citron-wash);border:1px solid #D3DA9A}
.b-done .ic{background:var(--citron);color:var(--soot)}
.b-wait{background:var(--ochre-wash);border:1px solid #E2CB9B}
.b-wait .ic{background:var(--ochre);color:var(--paper)}
.b-stop{background:var(--rust-wash);border:1px solid #E3BCB0}
.b-stop .ic{background:var(--rust);color:var(--paper)}

/* ------------------------------------------------------------
   EMPTY STATES
   A blank screen is an instruction. Name what will appear,
   when, and give one action.
   ------------------------------------------------------------ */
.empty{text-align:center;padding:44px 24px;border:1.5px dashed var(--line);border-radius:var(--radius-lg);background:var(--paper)}
.empty h4{font-family:var(--display);font-weight:600;font-size:21px;margin-bottom:8px}
.empty p{color:var(--cedar);font-size:14.5px;margin:0 auto 18px;max-width:38ch}

/* ------------------------------------------------------------
   CARDS
   Same physics as a button: a hard warm lip, never a soft blur.
   ------------------------------------------------------------ */
.card{
  background:var(--paper);border:1.5px solid var(--soot);
  border-radius:22px;box-shadow:var(--lift-card);overflow:hidden;
}
.card-quiet{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:none}

/* ------------------------------------------------------------
   ICONS
   24 grid, 1.75 stroke, round caps and joins, no fills.
   Nudge weight at the extremes so optical weight stays even.
   The Y is the only tick — plain checks are for checkboxes only.
   ------------------------------------------------------------ */
.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon-sm{width:16px;height:16px;stroke-width:1.9}
.icon-md{width:20px;height:20px;stroke-width:1.8}
.icon-lg{width:32px;height:32px;stroke-width:1.65}
.icon-xl{width:48px;height:48px;stroke-width:1.5}

/* ------------------------------------------------------------
   ACCESSIBILITY
   ------------------------------------------------------------ */
.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;
}
:focus-visible{outline:2.5px solid var(--soot);outline-offset:3px}

/* ------------------------------------------------------------
   THE RAIL, FULL HEIGHT
   The desk variant. Same clay, same groups, but flush to the left
   edge and the full height of the window rather than a card
   floating on the page. "Swap the head" — this swaps the frame.
   ------------------------------------------------------------ */
.rail-full{
  max-width:none;border-radius:0;padding:0;
  border-right:1.5px solid var(--soot);
  display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;
}

/* ------------------------------------------------------------
   GROUPED RAIL NAV
   The desk has more places to go than the wizard has steps, so
   they are grouped by what you are doing: live, supply, demand,
   money. The count is the point — you come here to see what has
   piled up, not to read labels.
   ------------------------------------------------------------ */
.navgroup{margin-bottom:16px}
.navgroup > .gl{
  font-family:var(--mono);font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--cedar-deep);padding:0 12px 7px;display:block;
}
.navgroup + .navgroup{border-top:1px solid var(--clay-deep);padding-top:14px}
.navgroup a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  text-decoration:none;color:var(--soot);font-weight:600;font-size:14.5px;
  border-left:3px solid transparent;cursor:pointer;
}
.navgroup a:hover{background:rgba(243,239,231,.55)}
.navgroup a.on{background:var(--paper);border-left-color:var(--citron-deep)}
.navgroup a svg{
  width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.75;
  stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.75;
}
.navgroup a.on svg{opacity:1}
.navgroup a .lbl{flex:1}
.navgroup a .n{
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  background:var(--paper-2);color:var(--cedar-deep);
  border-radius:var(--radius-pill);padding:3px 8px;min-width:23px;text-align:center;
}
.navgroup a .n.hot{background:var(--rust);color:var(--paper)}
.navgroup a .n.warm{background:var(--ochre);color:var(--paper)}
.navgroup a .n.good{background:var(--citron);color:var(--citron-ink)}

/* ------------------------------------------------------------
   THE TOTALS STRIP
   Both sides of the ledger on one line. Desk only — this is the
   one surface where customer_price, processing_fee and margin
   exist at all. The last cell is the margin, washed citron,
   because it is the number you are actually running.
   ------------------------------------------------------------ */
.tot{display:flex;border:1.5px solid var(--soot);border-radius:var(--radius-lg);overflow:hidden;background:var(--paper)}
.tot div{padding:10px 17px;border-right:1px solid var(--line);min-width:108px}
.tot div:last-child{border-right:none;background:var(--citron-wash)}
.tot .k{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--cedar);white-space:nowrap;display:block;
}
.tot .v{
  font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;
  margin-top:3px;font-variant-numeric:tabular-nums;display:block;
}
.tot .v small{font-family:var(--body);font-weight:500;font-size:12px;color:var(--cedar);margin-left:4px}

/* ------------------------------------------------------------
   SECTION HEADER
   A count and a reason. The reason says what you are meant to do
   about the section, which is why a heading alone is not enough.
   ------------------------------------------------------------ */
.sec > .h{display:flex;align-items:center;gap:11px;margin-bottom:11px;flex-wrap:wrap}
.sec > .h h2{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.015em}
.sec > .h .why{font-size:13px;color:var(--cedar);margin-left:auto}

/* ------------------------------------------------------------
   THE JOB ROW
   One job, four columns: when and where, who, the money, what you
   can do. The left border is the state — rust stopped, ochre
   waiting, citron live. Colour tells you which rows to read first
   without reading any of them.
   ------------------------------------------------------------ */
.rows{display:grid;gap:8px}
.row{
  background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--clay-deep);border-radius:var(--radius);
  padding:13px 15px;display:grid;
  grid-template-columns:minmax(230px,1.6fr) minmax(150px,1fr) auto auto;
  gap:12px 18px;align-items:center;
}
.row:hover{border-color:var(--cedar)}
.row.stop{border-left-color:var(--rust)}
.row.wait{border-left-color:var(--ochre)}
.row.live{border-left-color:var(--citron-deep)}
.row.done{border-left-color:var(--clay-deep);opacity:.8}

.when{font-family:var(--display);font-weight:600;font-size:15.5px;letter-spacing:-.01em}
.when .tz{
  font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--cedar);
  margin-left:6px;text-transform:uppercase;
}
.meta{font-size:13px;color:var(--cedar);margin-top:3px}
.meta b{color:var(--soot);font-weight:600}

.person{display:flex;align-items:center;gap:9px;min-width:0}
.person .nm{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.person .sub{font-size:12.5px;color:var(--cedar)}

.av{
  width:30px;height:30px;border-radius:50%;background:var(--paper-2);
  border:1px solid var(--line);flex:none;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:12px;color:var(--cedar-deep);
}
.av.none{background:var(--rust-wash);border-color:#E3BCB0;color:#8E3520}
.av.cit{background:var(--citron);border-color:var(--citron-deep);color:var(--citron-ink)}

.money{display:flex;gap:15px;align-items:baseline;font-variant-numeric:tabular-nums}
.money div{text-align:right}
.money .k{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cedar);display:block;
}
.money .v{font-weight:600;font-size:14px;margin-top:2px;display:block}
.money .m .v{color:var(--citron-ink);font-weight:700}
.money .m .v small{font-family:var(--mono);font-size:9.5px;font-weight:400;color:var(--cedar);margin-left:3px}

.acts{display:flex;gap:7px;align-items:center;justify-content:flex-end}

/* The horizontal empty state: a summary line with one action on
   the right, rather than the centred block. Used where something
   is collapsed rather than absent. */
.empty-row{
  border:1.5px dashed var(--line);border-radius:var(--radius);padding:20px;
  background:var(--paper);display:flex;align-items:center;gap:14px;flex-wrap:wrap;text-align:left;
}
.empty-row b{font-family:var(--display);font-weight:600;font-size:15.5px}
.empty-row p{font-size:13px;color:var(--cedar);margin-top:2px}
.empty-row .r{margin-left:auto}

/* ------------------------------------------------------------
   THE WEEK CARD
   Seven of them, Monday to Sunday, matching the pay week. The load
   bar is covered against gap: citron for covered, rust for not. A
   week you can read at a glance is a week you can staff on the
   Wednesday instead of the Saturday.
   ------------------------------------------------------------ */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.day{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;min-height:220px;
}
.day.today{border:1.5px solid var(--soot);box-shadow:0 3px 0 var(--clay-deep)}
.day .dh{padding:10px 12px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.day.today .dh{background:var(--citron-wash)}
.day .dd{font-family:var(--mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--cedar)}
.day .dn{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;margin-top:1px}
.day .db{padding:11px 12px;display:grid;gap:8px;flex:1}
.day .df{
  padding:9px 12px;border-top:1px solid var(--line);font-family:var(--mono);
  font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cedar);
}
.day.gap .df{background:var(--rust-wash);color:#8E3520}

.stat{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}
.stat .l{color:var(--cedar);font-size:12.5px}
.stat .r{font-family:var(--display);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums}
.stat.bad .r{color:var(--rust)}
.stat.ok .r{color:var(--citron-ink)}

.load{height:6px;background:var(--paper-2);border-radius:99px;overflow:hidden;display:flex}
.load i{display:block;height:100%}
.load .f{background:var(--citron-deep)}
.load .g{background:var(--rust)}

/* ------------------------------------------------------------
   DATA TABLE
   Mono headers, tabular numerals, scrolling inside its own box so
   the page itself never scrolls sideways.
   ------------------------------------------------------------ */
.tblwrap{overflow-x:auto;border-radius:var(--radius)}
.tbl{
  width:100%;border-collapse:collapse;font-size:14.5px;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:820px;
}
.tbl th{
  text-align:left;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cedar);font-weight:400;padding:12px 14px;
  background:var(--paper-2);border-bottom:1px solid var(--line);white-space:nowrap;
}
.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--paper-2)}
.tbl td.num{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;white-space:nowrap}
.tbl .who2{display:flex;align-items:center;gap:10px}
.tbl .who2 b{font-family:var(--display);font-weight:600;font-size:15px;display:block;line-height:1.2}
.tbl .who2 span{font-size:12.5px;color:var(--cedar)}

/* ------------------------------------------------------------
   MARKET CARD
   The top border is the status: citron live, ochre pilot, clay
   waitlist. A market is a place with its own price, its own
   timezone and its own supply, and this is the shape of that.
   ------------------------------------------------------------ */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.mk{
  background:var(--paper);border:1px solid var(--line);border-radius:13px;
  padding:16px;border-top:4px solid var(--clay-deep);
}
.mk.live{border-top-color:var(--citron-deep)}
.mk.pilot{border-top-color:var(--ochre)}
.mk.wait{border-top-color:var(--clay-deep)}
.mk h3{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em}
.mk .tz{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--cedar);margin-top:2px}
.mk dl{margin:14px 0 0;display:grid;grid-template-columns:1fr auto;gap:7px 12px;font-size:13.5px}
.mk dt{color:var(--cedar)}
.mk dd{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
.mk .foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);display:flex;gap:7px;flex-wrap:wrap}

@media (max-width:1250px){
  .row{grid-template-columns:1fr auto;gap:11px}
  .money{grid-column:1/-1;justify-content:flex-start;border-top:1px solid var(--line);padding-top:10px}
  .week{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  .rail-full{position:static;height:auto;border-right:none;border-bottom:1.5px solid var(--soot)}
  .week{grid-template-columns:repeat(2,1fr)}
}

/* ---------------------------------------------------------------------------
   Scrollbars

   The default one is a grey plastic strip from another operating system
   sitting next to a clay rail. It is the one piece of chrome on the page that
   nobody chose, and on a screen somebody looks at all day that shows.

   No new colours: the thumb is clay-deep on paper and cedar on the rail, both
   of which are already the border colours for those surfaces. The transparent
   border with background-clip gives the thumb breathing room without having to
   know what surface it is sitting on.
   --------------------------------------------------------------------------- */
html{
  scrollbar-width:thin;
  scrollbar-color:var(--clay-deep) transparent;
}

*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-corner{background:transparent}

*::-webkit-scrollbar-thumb{
  background:var(--clay-deep);
  background-clip:padding-box;
  border:3px solid transparent;
  border-radius:var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover{background:var(--cedar);background-clip:padding-box}
*::-webkit-scrollbar-thumb:active{background:var(--soot);background-clip:padding-box}

/* On clay, clay-deep is nearly invisible. The rail gets the darker pair. */
.rail{scrollbar-color:var(--cedar) transparent}
.rail *::-webkit-scrollbar-thumb{background:var(--cedar);background-clip:padding-box}
.rail *::-webkit-scrollbar-thumb:hover{background:var(--cedar-deep);background-clip:padding-box}

/* A table that scrolls sideways is a common thing on the desk, and its bar sits
   under the last row rather than at the edge of the screen. Slimmer, so it
   reads as part of the table. */
.tblwrap{scrollbar-width:thin}
.tblwrap::-webkit-scrollbar{height:10px}

/* Touch devices draw their own overlay bars and ignore all of this, which is
   correct: a permanent 12px gutter on a phone is 12px of wasted screen. */
@media (hover:none){
  *::-webkit-scrollbar{width:0;height:0}
  html{scrollbar-width:none}
}

/* ---------------------------------------------------------------------------
   Tooltips

   A label is not an explanation. "Widen" means nothing until you already know
   what it does, and on the board the cost of finding out by clicking is
   somebody's shift.

   The wrapper carries the text rather than the control, because a disabled
   button does not reliably receive hover, and the disabled ones are exactly
   the ones that need explaining. Focusable too, so it is readable without a
   mouse.
   --------------------------------------------------------------------------- */
.tip{position:relative;display:inline-flex;outline:none}

.tip::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(3px);
  width:max-content;max-width:262px;
  background:var(--soot);color:var(--paper);
  font-family:var(--body);font-size:12.5px;font-weight:400;line-height:1.45;
  text-align:left;letter-spacing:0;text-transform:none;
  padding:9px 11px;border-radius:var(--radius);
  opacity:0;visibility:hidden;pointer-events:none;z-index:60;
  transition:opacity .12s ease,transform .12s ease,visibility .12s;
}

/* The little nib, in the same ink. */
.tip::before{
  content:"";position:absolute;bottom:calc(100% + 4px);left:50%;
  transform:translateX(-50%) translateY(3px);
  border:5px solid transparent;border-top-color:var(--soot);
  opacity:0;visibility:hidden;pointer-events:none;z-index:60;
  transition:opacity .12s ease,transform .12s ease,visibility .12s;
}

.tip:hover::after,.tip:focus-visible::after,.tip:focus-within::after,
.tip:hover::before,.tip:focus-visible::before,.tip:focus-within::before{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}

/* Near the right edge of a table the tooltip would run off. Anchoring right
   keeps it on screen without measuring anything in JavaScript. */
.acts .tip:last-of-type::after{left:auto;right:0;transform:translateY(3px)}
.acts .tip:last-of-type:hover::after,
.acts .tip:last-of-type:focus-within::after{transform:translateY(0)}

/* Actions inside a row sit in a line, forms included. */
.rowact{display:inline-flex}

@media (hover:none){
  /* No hover on a phone, so the tooltip would only ever appear on tap and
     then sit in the way. */
  .tip::after,.tip::before{display:none}
}

/* ===========================================================================
   THE CLEANER APP
   ===========================================================================
   Extracted from Tydy_Cleaner_App.html. Mobile first: every one of these is
   designed for a phone held one-handed, and the desktop version is the same
   layout in a centred column rather than a second design.

   Nothing here introduces a colour. The prototype's palette is tokens.css and
   its chips are the ones already above.
   =========================================================================== */

/* The phone frame in the prototype IS the prototype. On a real phone the
   browser is the frame, so this is a centred column instead. */
.appshell{
  max-width:480px;margin:0 auto;min-height:100dvh;
  display:flex;flex-direction:column;background:var(--paper)
}
@media (min-width:520px){
  .appshell{
    border-left:1.5px solid var(--soot);border-right:1.5px solid var(--soot);
    min-height:100vh
  }
}

/* ---- the header ---------------------------------------------------------- */
.appbar{background:var(--clay);padding:18px 18px 16px;border-bottom:1.5px solid var(--soot)}
.appbar .top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.appbar .k{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--cedar-deep)}
.appbar h1{font-family:var(--display);font-weight:700;font-size:25px;letter-spacing:-.025em;line-height:1.05;margin-top:4px}
.appbar .sub{font-size:13px;color:var(--cedar-deep);margin-top:4px}

.wk{background:var(--paper);border-radius:12px;padding:9px 13px;text-align:right;flex:none}
.wk .k2{font-family:var(--mono);font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--cedar)}
.wk .v{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:-.02em;
       font-variant-numeric:tabular-nums;line-height:1.1}

/* ---- the scrolling body -------------------------------------------------- */
.appbody{flex:1;padding:18px 16px 22px;display:grid;gap:16px;align-content:start}

/* ---- the bottom bar ------------------------------------------------------ */
.tabbar{
  display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1.5px solid var(--soot);background:var(--paper-2);
  position:sticky;bottom:0;z-index:30
}
.tabbar a{
  padding:11px 4px 13px;display:grid;justify-items:center;gap:4px;text-decoration:none;
  border-top:3px solid transparent;margin-top:-1.5px;position:relative;min-height:44px
}
.tabbar svg{width:21px;height:21px;stroke:var(--cedar);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tabbar span{font-size:10.5px;font-weight:600;color:var(--cedar)}
.tabbar a.on{border-top-color:var(--citron-deep);background:var(--paper)}
.tabbar a.on svg{stroke:var(--soot)}
.tabbar a.on span{color:var(--soot)}
.tabbar .dot{
  position:absolute;top:8px;left:calc(50% + 7px);
  width:7px;height:7px;border-radius:50%;background:var(--rust)
}

/* ---- a labelled rule ----------------------------------------------------- */
.sect{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cedar);display:flex;align-items:center;gap:9px
}
.sect::after{content:"";height:1px;background:var(--line);flex:1}

/* ---- the payout, the only money on this surface -------------------------- */
.pay{font-family:var(--display);font-weight:700;font-size:42px;letter-spacing:-.03em;
     line-height:1;font-variant-numeric:tabular-nums}
.payk{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
      color:var(--cedar);margin-top:5px}
.big{font-family:var(--display);font-weight:700;font-size:38px;letter-spacing:-.03em;
     line-height:1;font-variant-numeric:tabular-nums}

/* ---- a job, as a labelled list ------------------------------------------- */
.jl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14.5px;margin:16px 0}
.jl dt{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;
       color:var(--cedar);padding-top:4px}
.jl dd{font-weight:500;margin:0}
.jl .lock{color:var(--cedar);font-style:italic}
.note{font-size:13px;color:var(--cedar);margin-top:10px;text-align:center}

/* ---- the lifecycle track ------------------------------------------------- */
.track{display:flex;gap:5px;margin-bottom:4px}
.track i{flex:1;height:5px;border-radius:99px;background:var(--paper-2);border:1px solid var(--line)}
.track i.on{background:var(--citron);border-color:var(--citron-deep)}
.trackl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
        color:var(--cedar);display:flex;justify-content:space-between}

/* ---- the photo gate ------------------------------------------------------ */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.shot{
  aspect-ratio:1;border:1.5px dashed var(--line);border-radius:13px;background:var(--paper-2);
  display:grid;place-items:center;text-align:center;padding:8px;cursor:pointer;
  font:inherit;color:inherit;width:100%
}
.shot span{font-size:11.5px;color:var(--cedar);line-height:1.3;font-weight:500;display:block}
.shot svg{width:19px;height:19px;stroke:var(--cedar);fill:none;stroke-width:1.75;
          stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.shot.got{border:1.5px solid var(--citron-deep);background:var(--citron-wash)}
.shot.got span{color:var(--citron-ink)}
.shot.got svg{stroke:var(--citron-ink)}

/* ---- a list row ---------------------------------------------------------- */
.lrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:none}
.lrow .l{flex:1;min-width:0}
.lrow .t{font-family:var(--display);font-weight:600;font-size:15.5px}
.lrow .s{font-size:12.5px;color:var(--cedar);margin-top:2px}
.lrow .amt{font-family:var(--display);font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}

/* ---- a step in a tracker ------------------------------------------------- */
.stepline{display:flex;gap:11px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.stepline:last-child{border-bottom:none}
.stepline .d{width:17px;height:17px;border-radius:50%;border:2px solid var(--line);flex:none;margin-top:3px}
.stepline .d.done{background:var(--citron);border-color:var(--citron-deep);position:relative}
.stepline .d.done::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--soot);border-width:0 2px 2px 0;transform:rotate(42deg)
}
.stepline .d.now{border-color:var(--citron-deep);box-shadow:inset 0 0 0 3px var(--citron)}
.stepline b{font-family:var(--display);font-weight:600;font-size:15px;display:block}
.stepline span{font-size:12.5px;color:var(--cedar)}

/* ---- a card that is asking to be read ------------------------------------ */
.card.hot{border:1.5px solid var(--soot);box-shadow:0 3px 0 var(--clay-deep)}

/* The avatar already exists. This is the profile-sized one. */
.av-xl{width:74px;height:74px;font-size:26px;border:1.5px solid var(--soot)}

.pair{display:grid;gap:8px}

/* ===========================================================================
   THE CLEANER WEB APP
   ===========================================================================
   Copied from docs/Tydy_Cleaner_Web.html rather than invented.

   Scoped to body.cleanerweb on purpose. The desk and this app both use .card
   and they are NOT the same component: the desk's is an unpadded frame with
   overflow:hidden, wrapped round a table so the table sits flush to the
   rounded edge, and it supplies its own padding inline where it needs any.
   This one is a padded box you put prose in. Giving the shared .card padding
   would inset every table on the desk.

   Without these two rules the cleaner app rendered with its text jammed
   against the card borders and no gap between cards, because .card carried no
   padding and .why was only ever defined as .q .why — inside a question block.
   Every .why in a card, and there are twenty of them, was unstyled.
   =========================================================================== */
.cleanerweb .card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:22px;margin-bottom:16px;
  box-shadow:none;overflow:visible;
}
.cleanerweb .card.hot{border:1.5px solid var(--soot);box-shadow:0 4px 0 var(--clay-deep)}
.cleanerweb .card > h3{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em}
.cleanerweb .card > .why{font-size:14px;color:var(--cedar);margin:5px 0 18px;max-width:62ch}

/* A .why that is the last thing in the card has nothing to space itself from. */
.cleanerweb .card > .why:last-child{margin-bottom:0}

/* The tables the cleaner app shows sit inside a padded card, so they need
   their own edge back — the desk gets this from the card clipping them. */
.cleanerweb .card > .tblwrap{border:1px solid var(--line);border-radius:12px;overflow:hidden}

/* ===========================================================================
   THE SHELL, SHARED
   ===========================================================================
   The desk and the cleaner web app are the same frame: clay rail flush left,
   sticky topbar, one content column. These three were written inside
   DESK_CHROME when the desk was the only thing using them; they are here now
   because two surfaces sharing a definition is the point of this file.
   =========================================================================== */
.topbar{
  border-bottom:1.5px solid var(--soot);background:var(--paper);
  padding:20px clamp(18px,2.4vw,32px);display:flex;justify-content:space-between;
  align-items:flex-end;gap:22px;flex-wrap:wrap;position:sticky;top:0;z-index:20;
}
.topbar .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--cedar)}
.topbar h1{font-family:var(--display);font-weight:700;font-size:clamp(25px,2.8vw,34px);letter-spacing:-.025em;line-height:1;margin-top:6px}
.topbar .sm{font-size:13.5px;color:var(--cedar);margin-top:6px;max-width:62ch}

.railfoot{padding:12px 16px 18px;display:grid;gap:9px;border-top:1px solid var(--clay-deep)}
.who{
  background:var(--paper);border-radius:11px;padding:11px 13px;
  display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  border:1.5px solid transparent;transition:border-color .12s
}
.who:hover,.who.on{border-color:var(--soot)}
.who .av{width:32px;height:32px;font-size:13px}
.who b{display:block;font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.2}
.who span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--cedar)}
.who .go{
  margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cedar);opacity:0;transition:opacity .12s
}
.who:hover .go,.who.on .go{opacity:1}

/* ===========================================================================
   THE CLEANER WEB APP
   ===========================================================================
   From Tydy_Cleaner_Web.html. Same frame as the desk, different contents and
   one thing the desk does not have: a nav that is locked rather than empty.
   =========================================================================== */

/* The rail head. Three shapes for three account states: a progress bar while
   applying, a sentence while waiting, this week's pay once working. */
.rhead{margin:18px 0 4px;background:var(--paper);border-radius:13px;padding:15px}
.rhead.locked{border-left:4px solid var(--ochre)}
.rhead .k{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--cedar)}
.rhead .big{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.025em;line-height:1.05;margin-top:4px}
.rhead .sm{font-size:12.5px;color:var(--cedar);margin-top:4px}

/* A nav item that is visible and refused. Locked rather than hidden, so
   somebody halfway through an application can see what they are working
   toward — a nav that grows new entries after approval gives them nothing to
   aim at. */
.navgroup .nv{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;
  text-decoration:none;color:var(--soot);font-weight:600;font-size:14.5px;
  border:none;border-left:3px solid transparent;background:none;width:100%;
  text-align:left;cursor:pointer;font-family:inherit;min-height:44px
}
.navgroup .nv:hover{background:rgba(243,239,231,.55)}
.navgroup .nv.on{background:var(--paper);border-left-color:var(--citron-deep)}
.navgroup .nv svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.75;
                  stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.75}
.navgroup .nv .lbl{flex:1}
.navgroup .nv .n{font-family:var(--mono);font-size:10px;background:var(--paper-2);color:var(--cedar-deep);
                 border-radius:999px;padding:3px 8px;min-width:22px;text-align:center}
.navgroup .nv .n.hot{background:var(--rust);color:var(--paper)}

.navgroup .nv.lock{opacity:.42;cursor:not-allowed}
.navgroup .nv.lock:hover{background:none}
.navgroup .nv .lk{width:14px;height:14px;stroke:var(--cedar-deep);opacity:1;flex:none}

/* What unlocks it, rather than that it is locked, which they can see. */
.lockmsg{
  background:var(--ochre-wash);border:1px solid var(--line);border-radius:11px;
  padding:12px 13px;margin:10px 12px 0;font-size:12.5px;line-height:1.45
}
.lockmsg b{font-family:var(--display);font-weight:600;font-size:14px;display:block;margin-bottom:3px}

/* Two and three across, collapsing on a narrow screen. */
.two{display:grid;grid-template-columns:1fr;gap:14px}
.three{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:820px){
  .two{grid-template-columns:1fr 1fr}
  .three{grid-template-columns:repeat(3,1fr)}
}

/* The offer, with its reasoning beside it. */
.jobgrid{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media (min-width:900px){ .jobgrid{grid-template-columns:1fr 320px} }

/* The wizard. */
.wizfoot{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:22px;
         border-top:1px solid var(--line);margin-top:8px}
.wizfoot .sp{flex:1}
.saved{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cedar)}

/* A hint under a field. Used in half a dozen views with a local style block;
   one definition instead. */
.hint{font-size:13px;color:var(--cedar);margin-top:7px}

/* ---------------------------------------------------------------------------
   The seven steps, in the rail
   ---------------------------------------------------------------------------
   Any order once the gate is answered, because a form filled over three
   evenings is a form somebody abandons if it insists on a sequence. A locked
   step is a disabled button rather than a styled link, same rule as the nav.
   --------------------------------------------------------------------------- */
.steplist{display:grid;gap:2px;margin:12px 0 4px}
.steplist .st{
  display:flex;align-items:flex-start;gap:11px;padding:10px;border-radius:11px;
  text-decoration:none;color:var(--soot);background:none;border:none;width:100%;
  text-align:left;font-family:inherit;cursor:pointer;border-left:3px solid transparent;
}
.steplist .st:hover{background:rgba(243,239,231,.55)}
.steplist .st.now{background:var(--paper);border-left-color:var(--citron-deep)}
.steplist .st .lbl{flex:1;min-width:0}
.steplist .st .lbl b{display:block;font-weight:600;font-size:14.5px;line-height:1.25}
.steplist .st .lbl .sub{display:block;font-size:12px;color:var(--cedar-deep);margin-top:2px}
.steplist .st.done .lbl .sub{color:var(--citron-ink)}

/* The mark: an empty ring to do, a ringed dot for the one they are on, a
   filled tick once it is done. Same three states as the tracker, so the rail
   and the review screen read the same. */
.steplist .st .mark{
  width:18px;height:18px;border-radius:50%;flex:none;margin-top:2px;
  border:2px solid var(--cedar);background:var(--clay);position:relative;
}
.steplist .st.now .mark{
  border-color:var(--citron-deep);box-shadow:inset 0 0 0 3px var(--citron);background:var(--paper);
}
.steplist .st.done .mark{background:var(--citron);border-color:var(--citron-deep)}
.steplist .st.done .mark::after{
  content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;
  border:solid var(--soot);border-width:0 2px 2px 0;transform:rotate(42deg);
}
.steplist .st.lock{opacity:.4;cursor:not-allowed}
.steplist .st.lock:hover{background:none}

/* ------------------------------------------------------------
   THE WELCOME
   Shown once, when somebody is told they have the job. The only
   thing in this product that deliberately gets in the way.
   ------------------------------------------------------------ */
.welcome-wrap{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(30,27,23,.45);
}
.welcome{
  background:var(--paper);border:1.5px solid var(--soot);border-radius:24px;
  box-shadow:0 7px 0 var(--clay-deep);padding:32px;max-width:460px;text-align:center;
}
.welcome-mark{
  width:54px;height:54px;border-radius:50%;background:var(--citron);
  border:1.5px solid var(--citron-deep);display:grid;place-items:center;margin:0 auto 18px;
  font-family:var(--mono);font-weight:700;font-size:20px;color:var(--soot);
}
.welcome h2{
  font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:-.03em;
  margin-bottom:10px;line-height:1.15;
}
.welcome p{font-size:15px;color:var(--cedar-deep);margin-bottom:14px;line-height:1.55}
.welcome .welcome-next{font-size:13.5px;color:var(--cedar);margin-bottom:22px}

/* ------------------------------------------------------------
   HOW A CUSTOMER SEES YOU
   The same three answers the customer app reads, arranged the
   way it arranges them. Deliberately plainer than the form
   around it: this is a preview of somewhere else.
   ------------------------------------------------------------ */
.seenby{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.seenby-head{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--cedar);margin-bottom:12px;
}
.seenby-card{display:flex;gap:14px;align-items:flex-start}
.seenby-face{
  width:62px;height:62px;border-radius:50%;object-fit:cover;flex:none;
  border:1.5px solid var(--soot);display:block;
}
.seenby-blank{
  background:var(--citron);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:24px;color:var(--soot);
}
.seenby-name{font-family:var(--display);font-weight:600;font-size:18px;display:block}
.seenby-bio{font-size:14.5px;color:var(--cedar-deep);margin:4px 0 0;line-height:1.5}
.seenby-meta{font-size:13px;color:var(--cedar);margin:0}

/* ------------------------------------------------------------
   THE PAY WEEK, DRAWN
   Three rows, seven days each. The week you work is filled, the
   Thursday and the Friday are marked. Same citron as everywhere
   else; the days are labels, not controls, so they are flat.
   ------------------------------------------------------------ */
.payweek{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;display:grid;gap:12px;
}
.pwrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.pwlabel{
  font-size:13.5px;font-weight:600;min-width:104px;flex:none;
}
.pwdays{display:flex;gap:4px;flex:none}
.pwd{
  width:26px;height:26px;border-radius:7px;border:1px solid var(--line);
  background:var(--paper-2);display:grid;place-items:center;font-style:normal;
  font-family:var(--mono);font-size:10px;color:var(--cedar);
}
.pwd.on{background:var(--citron-wash);border-color:var(--citron-deep);color:var(--citron-ink)}
.pwd.mark{background:var(--ochre-wash);border-color:var(--ochre);color:var(--cedar-deep);font-weight:700}
.pwd.paid{background:var(--citron);border-color:var(--citron-deep);color:var(--soot);font-weight:700}
.pwnote{font-size:13px;color:var(--cedar)}

/* ------------------------------------------------------------
   A LEGAL DOCUMENT, TO BE READ
   Body font, not monospace. It is prose and somebody has to get
   through several thousand words of it before they sign.
   Scrolls in its own box so the page does not become endless.
   ------------------------------------------------------------ */
.legal{
  background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:16px;max-height:340px;overflow-y:auto;
  font-size:14.5px;line-height:1.6;color:var(--cedar-deep);
}
.legal h4{
  font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--soot);
  margin:22px 0 8px;letter-spacing:-.01em;
}
.legal h4:first-child{margin-top:0}
.legal p{margin:0 0 12px}
.legal ul{margin:0 0 12px;padding-left:20px}
.legal li{margin-bottom:6px}
.legal > :last-child{margin-bottom:0}

/* An outstanding answer, jumped to from the list of what is still needed.
   Deliberately NOT .err: rust means something is wrong, and a question nobody
   has reached yet is not wrong. This is a citron ring that says "here", and it
   only appears once somebody has asked to be taken to the field. */
.inp:target,
:target > .inp,
:target + .inp{
  border-color:var(--citron-deep);
  box-shadow:0 0 0 4px var(--citron-wash);
}
:target .cell,
:target .avwrap{outline:2.5px solid var(--citron-deep);outline-offset:3px}

/* ------------------------------------------------------------
   THE AVAILABILITY GRID
   Twelve hours a day, seven days. A cell is a checkbox with its
   input hidden, so the whole thing works with a keyboard and
   survives having no JavaScript — drag is an enhancement, not
   the only way in.
   ------------------------------------------------------------ */
.avwrap{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.avhead{
  display:flex;gap:10px;align-items:center;padding:12px 14px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);background:var(--paper-2);
}
.avgrid{padding:6px 14px 14px}
.cell{
  display:block;height:32px;border-radius:6px;border:1px solid var(--line);
  background:var(--paper-2);cursor:pointer;
}
.cell:hover{border-color:var(--cedar)}
.cell.on,.cell:has(input:checked){background:var(--citron);border-color:var(--citron-deep)}
.cell:has(input:focus-visible){outline:2.5px solid var(--soot);outline-offset:2px}
.allday{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
  background:none;border:none;color:var(--citron-ink);cursor:pointer;padding:4px 2px;
}
.allday:hover{text-decoration:underline}
.avsum{
  padding:12px 14px;border-top:1px solid var(--line);background:var(--paper-2);
  font-size:13.5px;color:var(--cedar);line-height:1.6;
}
.avsum b{color:var(--soot);font-weight:600}

/* The help card in the rail, for somebody still filling the form in. */
.help{background:var(--paper);border-radius:13px;padding:15px;margin:12px 12px 0}
.help b{display:block;font-family:var(--display);font-weight:600;font-size:15px;margin-bottom:5px}
.help p{font-size:12.5px;color:var(--cedar);line-height:1.45;margin-bottom:11px}