/* The design round (Ops/crm-reviews/2026-10-24-client-portal/design/DIRECTION.md): the tokens the direction changes,
   the shared pieces js/ui.js draws (section head, cover card, phase bar, who chip, needs card, job row, money strip,
   history, quiet actions, sticky bar) and the base components restyled. Loads right after portal.css and before every
   screen's own file, so a screen can still refine what it needs. One white theme: no prefers-color-scheme. */

:root {
  --graphite: #14171B; --on-graphite: #C9CFD5; --concrete: #E4E7EA; --line: #E4E7EA;
  /* the edge of anything you type in or pick: 3.15 to 1 on white (WCAG 1.4.11); cards keep concrete */
  --field: #8A929B;
  /* whose move it is: text on its tint passes 4.5 to 1 */
  --you: #B8420F; --you-tint: #FDEEE7;
  --live: #0E1116; --live-tint: #E9ECEF;
  --wait: #8A5A00; --wait-tint: #FBF1DC; --wait-dot: #C98A12;
  --go: #1F7A3F; --go-tint: #E8F3EC;
  --stop: #B42318; --stop-tint: #FBECEA;
  --quiet: #545D68; --quiet-tint: #F1F3F5;
  --r-card: 14px; --r-ctl: 12px; --r-cover: 18px; --r-sheet: 20px;
  --ease: cubic-bezier(.2, .8, .2, 1); --t-fast: 160ms; --t-med: 240ms; --t-slow: 420ms;
  --shadow-sheet: 0 12px 32px rgba(14, 17, 22, .16);
  --sec-gap: 32px;
}
@media (min-width: 1024px) { :root { --sec-gap: 40px; } }
@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; } }

/* A view arrives with a short rise; nothing moves for reduced motion. */
.view { animation: ds-rise var(--t-med) var(--ease); }
@keyframes ds-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* A moving transform makes the view the box a position: fixed child is laid out in: the onboarding page (.ob, fixed
   to the screen) measured 0 px tall for the length of the rise. That view fades only (Opus design 3). */
.view:has(.ob) { animation: ds-fade var(--t-med) var(--ease); }
@keyframes ds-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .view, .view:has(.ob) { animation: none; } }

/* Links read as ink with an underline; orange is kept for the one action on a screen. */
a:not([class]), .link { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(14, 17, 22, .3);
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:not([class]):hover, .link:hover { text-decoration-color: var(--ink); }
/* A link styled button is a control of its own, never a word in a sentence: 44 px tall wherever it sits. */
button.link { min-height: 44px; min-width: 44px; text-align: inherit; }

/* Buttons press like a native control. */
.btn { transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.btn:active:not([disabled]) { transform: scale(.98); }
.btn-light { background: var(--white); border-color: var(--white); color: var(--ink); }
.btn-light:hover { background: #E9ECEF; }

.btn[disabled] { opacity: 1; background: var(--mist); border-color: var(--mist); color: #8A929B; }

/* ------------------------------------------------------------------ section head: DIN, uppercase, the orange lead */
.ds-sec { margin: 0 0 var(--sec-gap); }
.sec-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.sec-h h2 { position: relative; margin: 0; padding-bottom: 9px; font: 700 20px/22px var(--num); letter-spacing: .01em;
  text-transform: uppercase; }
.sec-h h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 3px; border-radius: 2px; background: var(--orange); }
.sec-h .sec-side { padding-bottom: 9px; font-size: 14px; line-height: 20px; color: var(--steel); }

/* ------------------------------------------------------------------ the who chip */
.who { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; background: var(--quiet-tint); color: var(--quiet); }
.who::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.who-you { background: var(--you-tint); color: var(--you); }
.who-live { background: var(--live-tint); color: var(--live); }
.who-live::before { background: var(--orange); }
.who-wait { background: var(--wait-tint); color: var(--wait); }
.who-wait::before { background: var(--wait-dot); }
.who-go { background: var(--go-tint); color: var(--go); }
.who-stop { background: var(--stop-tint); color: var(--stop); }
.who-quiet { background: var(--quiet-tint); color: var(--quiet); }
.who.breathe::before { animation: ds-breathe 1.6s ease-in-out infinite; }
@keyframes ds-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .who.breathe::before { animation: none; } }

/* ------------------------------------------------------------------ the phase bar: Request, Quote, Visit, Done, Paid */
.phases { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.phase i { position: relative; display: block; height: 4px; border-radius: 2px; overflow: hidden; background: var(--concrete); }
.phase.done i { background: var(--ink); }
.phase.now i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--fill, 50%); border-radius: 2px;
  background: var(--orange); transition: width var(--t-slow) var(--ease); }
.phase.skip i { opacity: .5; }
.phase span { display: block; margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; line-height: 18px; font-weight: 500; color: var(--steel); }
.phase.now span { color: var(--ink); font-weight: 600; }
/* Under 360 px five labels at 14 px do not fit: only the current stage keeps its word. */
@media (max-width: 359px) {
  .phases:not(.mini) .phase:not(.now) span { visibility: hidden; }
  .phases:not(.mini) .phase.now span { overflow: visible; }
}
.phases.mini { display: flex; gap: 2px; }
.phases.mini .phase i { width: 8px; height: 3px; }
.phases.mini .phase span { display: none; }

/* ------------------------------------------------------------------ cards, needs cards, job rows */
.ds-card { background: var(--white); border: 1px solid var(--concrete); border-radius: var(--r-card); overflow: hidden; }
.need { display: block; padding: 16px; background: var(--white); border: 1px solid var(--concrete); border-radius: var(--r-card); }
.need + .need { margin-top: 12px; }
.need-top { color: inherit; text-decoration: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.need-main { min-width: 0; }
.need-what { font-size: 17px; line-height: 22px; font-weight: 600; }
.need-where { margin-top: 2px; font-size: 14px; line-height: 20px; color: var(--steel); }
.need-amt { flex: none; font: 700 28px/28px var(--num); white-space: nowrap; }
.need-due { margin-top: 10px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--steel); }
.need-due.you { color: var(--you); }
.need-due.stop { color: var(--stop); }
.need .btn { width: 100%; margin-top: 14px; }
@media (min-width: 1024px) { .need .btn { width: auto; min-width: 200px; } }

.jrows { margin: 0; padding: 0; list-style: none; }
.jrow { display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 14px 16px; border-top: 1px solid var(--concrete);
  color: var(--ink); text-decoration: none; transition: background var(--t-fast) var(--ease); }
.jrow:first-child { border-top: 0; }
a.jrow:hover { background: var(--mist); text-decoration: none; }
.jrow-main { flex: 1; min-width: 0; }
/* A row's first line wraps rather than cutting off the unit (Opus design 11); keepUnit holds "Unit 807" together. */
.jrow-1 { overflow-wrap: anywhere; font-size: 16px; line-height: 22px; font-weight: 600; }
.jrow-2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; color: var(--steel); }
.jrow-3 { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--ink); }
.jrow-3.you { color: var(--you); }
.jrow-3.wait { color: var(--wait); }
.jrow-3.urg { color: var(--stop); font-weight: 600; }
.jrow-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

/* ------------------------------------------------------------------ the money strip */
.mstrip { display: block; padding: 16px; background: var(--white); border: 1px solid var(--concrete); border-radius: var(--r-card);
  color: var(--ink); text-decoration: none; }
a.mstrip:hover { border-color: #C9CFD5; text-decoration: none; }
.mstrip-cap { font-size: 14px; line-height: 20px; color: var(--steel); }
.mstrip-fig { margin-top: 4px; font: 700 44px/44px var(--num); letter-spacing: .005em; }
.mstrip-due { margin-top: 6px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--steel); }
.mstrip-due.stop { color: var(--stop); }
.mstrip-row { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--concrete); }
.mstrip-row .n { font: 700 24px/26px var(--num); }
.mstrip-row .c { font-size: 14px; line-height: 20px; color: var(--steel); }

.mstrip-say { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--steel); }

/* ------------------------------------------------------------------ history: done steps with their times */
.hist { margin: 0; padding: 0; list-style: none; }
.hist li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--concrete); }
.hist li:first-child { border-top: 0; }
.hist .t { font: 700 16px/22px var(--num); letter-spacing: .02em; color: var(--steel); }
.hist .t small { display: block; font: 500 14px/18px var(--font); letter-spacing: 0; }
.hist .w { font-weight: 600; }
.hist-more { margin-top: 8px; min-height: 44px; }
.hist .l { font-size: 14px; line-height: 20px; color: var(--steel); }

/* ------------------------------------------------------------------ quiet actions under a cover, the sticky bar */
.qa { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.qa .btn { flex: none; min-height: 44px; padding: 0 16px; font-size: 15px; border-radius: 999px; }
.qa .btn .icon { width: 18px; height: 18px; }
.sbar { position: sticky; bottom: 0; z-index: 5; margin: 0 calc(-1 * var(--pad)); padding: 12px var(--pad) calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96); border-top: 1px solid var(--concrete); }

/* ------------------------------------------------------------------ sheets: a grabber on the phone */

.sheet { border-radius: var(--r-sheet) var(--r-sheet) 0 0; animation-duration: var(--t-med); animation-timing-function: var(--ease); }
@media (min-width: 1024px) { .sheet { border-radius: 0; } }

.sk-line { height: 14px; margin: 10px 0; border-radius: 7px; background: var(--mist); }

/* ================================================================== the base components, design round roll out
   The first build's shared classes (portal.css) restyled here so every screen speaks the direction before its own
   pass: chips by whose move it is, filter and category picks, choice lists, fields, section heads, empty states,
   skeleton rows, sheets with a grabber, toasts, a destructive button. */

/* Chips: the who chip's pill, dot and 14 px, in the first build's colour names. */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; background: var(--quiet-tint); color: var(--quiet); }
.chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-now { background: var(--you-tint); color: var(--you); }
.chip-go { background: var(--go-tint); color: var(--go); }

/* Picks: filter chips and category chips, a full 44 px target. */
.pick { min-height: 44px; padding: 0 16px; border: 1px solid var(--concrete); border-radius: var(--r-ctl); background: var(--white);
  font-size: 15px; line-height: 20px; font-weight: 500; color: var(--ink); transition: background var(--t-fast) var(--ease); }
.pick:hover { background: var(--mist); }
.pick[aria-pressed="true"], .pick[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.pick .n { margin-left: 6px; font: 700 16px/1 var(--num); }

/* Choice lists: radius 14, concrete rules, the picked row on mist. */
.choices { border-color: var(--concrete); border-radius: var(--r-card); }
.choice { border-top-color: var(--concrete); min-height: 60px; padding: 14px 16px; font-weight: 600; }
.choice .sub { margin-top: 2px; line-height: 20px; }
.choice[aria-checked="true"], .choice[aria-pressed="true"] { background: var(--mist); }

/* Fields: 48 px, radius 12, the ink border on focus. */
.input, .select, .textarea { min-height: 48px; padding: 12px 14px; border-color: var(--field); border-radius: var(--r-ctl);
  transition: border-color var(--t-fast) var(--ease); }
.textarea { min-height: 120px; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--steel); }
.field { gap: 8px; }
.field .error, .error { color: var(--stop); }
.check input { accent-color: var(--ink); }
/* A tick row is one target, the words included: 44 px at the least (Opus design 2). */
.check { min-height: 44px; align-items: center; }

/* Section heads in screens not yet on section(): the same DIN head and orange lead. */
.section > h2 { position: relative; margin: 0 0 14px; padding-bottom: 9px; font: 700 20px/22px var(--num); letter-spacing: .01em;
  text-transform: uppercase; }
.section > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 24px; height: 3px; border-radius: 2px; background: var(--orange); }
.section { margin: 0 0 var(--sec-gap); }

/* Empty states: a heading, one line, one button. */
.empty { padding: 32px 0; }
.empty h2 { margin: 0 0 6px; font-size: 20px; line-height: 26px; font-weight: 600; }
.empty p { margin: 0 0 16px; color: var(--steel); }

/* Skeleton rows hold a row's height. */
.sk-row { height: 56px; margin: 0 0 8px; border-radius: var(--r-card); background: var(--mist); }

/* Sheets: a grabber on the phone (not on the full screen order flow). */
@media (max-width: 1023px) {
  .sheet:not(.order-sheet)::before { content: ""; display: block; width: 36px; height: 5px; margin: -4px auto 12px; border-radius: 3px; background: #D5DAE0; }
}
.sheet-h h2, .sheet-h h3 { font-size: 20px; line-height: 26px; font-weight: 600; }

/* Toasts and the offline bar. */
.toast { border-radius: var(--r-ctl); padding: 14px 16px; font-size: 15px; line-height: 22px; }

/* A destructive confirm: the stop colour, never the orange primary. */
.btn-stop { background: var(--stop); border-color: var(--stop); color: var(--white); }
.btn-stop:hover { background: #9A1E14; }