/* Transship dashboard. Light and dark follow the device setting. */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  /* page */
  --bg: #ECEEEE;
  --surface: #FFFFFF;
  --surface-2: #F3F4F5;
  --ink: #14181D;
  --ink-2: #3A424B;
  --muted: #646D77;
  --rule: #D0D5DA;
  --rule-2: #E4E7EA;
  /* fixed-dark chrome: top bar, hero */
  --bar-bg: #14181D;
  --bar-ink: #F1F3F5;
  --bar-muted: #B4BDC6;
  --bar-rule: #3A424B;
  --hero-bg: #14181D;
  --hero-rule: #14181D;
  /* controls */
  --primary-bg: #14181D;
  --primary-ink: #F4F6F7;
  --pressed-bg: #3A424B;
  --pressed-ink: #FFFFFF;
  /* gaff tape: case ids, the one loud thing */
  --tape: #F2C94C;
  --tape-ink: #1A1A14;
  --tape-dull: #C4BDA2;
  /* status */
  --amber: #8F5600;
  --amber-bg: #FFF1D6;
  --amber-solid: #A86400;
  --amber-solid-ink: #FFFFFF;
  --red: #B3261E;
  --red-bg: #FBE9E7;
  --green: #1C6E35;
  --green-bg: #E2F1E6;
  --green-solid: #1F7A3A;
  --kiwi: #3E6B2A;
  --kiwi-bg: #E7EFE1;
  /* the two jobs */
  --navy: #1F3A5F;
  --teal: #156B6B;
  --scrim: rgba(12, 15, 18, .55);
  --sheet-shadow: 0 -8px 30px rgba(0, 0, 0, .22);
  --radius: 6px;
  --sans: "Barlow", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --cond: "Barlow Condensed", "Arial Narrow", -apple-system, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111519;
    --surface: #1A2026;
    --surface-2: #232A32;
    --ink: #EEF1F4;
    --ink-2: #C8CFD7;
    --muted: #939DA8;
    --rule: #353F49;
    --rule-2: #29313A;
    --bar-bg: #0B0E11;
    --bar-ink: #EEF1F4;
    --bar-muted: #98A2AD;
    --bar-rule: #353F49;
    --hero-bg: #232A32;
    --hero-rule: #3B4651;
    --primary-bg: #EEF1F4;
    --primary-ink: #111519;
    --pressed-bg: #C8CFD7;
    --pressed-ink: #111519;
    --tape-dull: #8D8873;
    --amber: #EBB04D;
    --amber-bg: #36280F;
    --amber-solid: #E0A030;
    --amber-solid-ink: #1A1408;
    --red: #F2867C;
    --red-bg: #3B1B18;
    --green: #67C786;
    --green-bg: #14301F;
    --green-solid: #2C8A4C;
    --kiwi: #A8D08D;
    --kiwi-bg: #25351D;
    --navy: #3D6CA8;
    --teal: #1C7F7F;
    --scrim: rgba(0, 0, 0, .66);
    --sheet-shadow: 0 -8px 30px rgba(0, 0, 0, .5);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.4; -webkit-text-size-adjust: 100%; }
body { min-height: 100dvh; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tape); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
[hidden] { display: none !important; }

/* ---------- shell ---------- */
.shell { display: flex; flex-direction: column; min-height: 100dvh; }
.topbar { position: sticky; top: 0; z-index: 20; background: var(--bar-bg); color: var(--bar-ink); padding: calc(10px + var(--safe-t)) 16px 10px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--bar-rule); }
.topbar .title { font-family: var(--cond); font-weight: 700; font-size: 21px; letter-spacing: .01em; line-height: 1; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .title small { display: block; font-family: var(--sans); font-weight: 500; font-size: 12px; color: var(--bar-muted); margin-top: 3px; letter-spacing: 0; }
.topbar .who { font-size: 13px; font-weight: 500; color: var(--bar-ink); background: transparent; border: 1px solid var(--bar-rule); border-radius: 999px; padding: 6px 11px; white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* the whole transship as one bar, along the bottom edge of the top bar on every tab */
.gbar { position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--bar-rule); }
.gbar > i { display: block; height: 100%; background: var(--tape); transition: width .4s; }
.gbar.full > i { background: #5FBF7C; }
.bell { position: relative; width: 40px; height: 34px; border: 1px solid var(--bar-rule); border-radius: 999px; background: transparent; color: var(--bar-ink); display: grid; place-items: center; flex: none; padding: 0; }
.bell svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bell .n { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--tape); color: var(--tape-ink); font-size: 11px; font-weight: 700; line-height: 18px; padding: 0 5px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: #68717B; flex: none; }
.live.on { background: #5FBF7C; box-shadow: 0 0 0 3px rgba(95, 191, 124, .25); }

.shipbar { display: flex; gap: 6px; padding: 10px 16px 0; max-width: 860px; width: 100%; margin: 0 auto; }
.shipbar button { flex: 1; border: 1px solid var(--rule); background: var(--surface); border-radius: var(--radius); padding: 8px 6px; font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--ink-2); min-height: 44px; }
.shipbar button { position: relative; overflow: hidden; padding-bottom: 11px; }
.shipbar button::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--rule-2); }
.shipbar .mini { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--green-solid); transition: width .4s; }
.shipbar button[aria-pressed="true"]::before { background: rgba(255, 255, 255, .28); }
.shipbar button[aria-pressed="true"] .mini { background: var(--tape); }
.shipbar button[aria-pressed="true"] { background: var(--pressed-bg); border-color: var(--pressed-bg); color: var(--pressed-ink); }
.shipbar button[data-ship="R"][aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.shipbar button[data-ship="A"][aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: #fff; }

main { flex: 1; padding: 12px 16px calc(88px + var(--safe-b)); max-width: 860px; width: 100%; margin: 0 auto; }

.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--rule); display: flex; padding-bottom: var(--safe-b); }
.tabbar .tab { flex: 1; position: relative; background: none; border: 0; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 600; min-height: 56px; }
.tabbar .tab svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar .tab[aria-current="page"] { color: var(--ink); }
.tabbar .tab[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 3px; background: var(--tape); }
.tabbar .dot { position: absolute; top: 5px; right: calc(50% - 20px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--amber-solid); color: var(--amber-solid-ink); font-size: 11px; line-height: 18px; text-align: center; padding: 0 5px; font-weight: 700; }
@media (min-width: 860px) {
  .tabbar { position: static; order: 1; border-top: 0; border-bottom: 1px solid var(--rule); justify-content: center; padding-bottom: 0; }
  .tabbar .tab { flex: 0 0 132px; flex-direction: row; justify-content: center; gap: 8px; font-size: 14px; min-height: 48px; }
  .tabbar .tab[aria-current="page"]::before { top: auto; bottom: -1px; left: 12%; right: 12%; }
  .tabbar .dot { position: static; }
  .topbar { position: relative; order: 0; }
  .shipbar { order: 2; } main { order: 3; padding-bottom: 48px; }
}

/* ---------- common blocks ---------- */
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; }
h2 { font-size: 17px; margin: 24px 0 8px; }
h2:first-child { margin-top: 4px; }
h3 { font-size: 15px; }
p { margin: 0 0 8px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px; position: relative; }
.card.stripe { border-left-width: 5px; }
.card.stripe-R { border-left-color: var(--navy); }
.card.stripe-A { border-left-color: var(--teal); }
.callout { padding: 10px 12px; border-radius: var(--radius); margin: 8px 0; font-size: 14px; color: var(--ink-2); background: var(--surface-2); border-left: 4px solid var(--rule); }
.callout.red { background: var(--red-bg); color: var(--red); border-left-color: var(--red); }
.callout.amber { background: var(--amber-bg); color: var(--amber); border-left-color: var(--amber); }
.callout.green { background: var(--green-bg); color: var(--green); border-left-color: var(--green); }
.callout strong { color: var(--ink); }
.callout .btn { margin-top: 8px; }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.row.top { align-items: flex-start; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.kv { display: grid; grid-template-columns: minmax(110px, 36%) 1fr; gap: 4px 12px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.kv .tbd { color: var(--amber); font-weight: 600; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule); color: var(--ink-2); background: var(--surface-2); white-space: nowrap; vertical-align: 1px; }
.chip.R { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip.A { background: var(--teal); border-color: var(--teal); color: #fff; }
.chip.amber { background: var(--amber-bg); border-color: transparent; color: var(--amber); }
.chip.red { background: var(--red-bg); border-color: transparent; color: var(--red); }
.chip.green { background: var(--green-bg); border-color: transparent; color: var(--green); }
.chip.kiwi { background: var(--kiwi-bg); border-color: transparent; color: var(--kiwi); }
.chip.truck { background: var(--tape); border-color: var(--tape); color: var(--tape-ink); }
.chip.mini { font-size: 10.5px; padding: 0 6px; }

/* gaff tape: case ids are written on tape, so they look like it here */
.tape { display: inline-block; font-family: var(--cond); font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--tape-ink); background: var(--tape); padding: 1px 8px 0; line-height: 1.35; transform: rotate(-1.2deg); clip-path: polygon(1% 0, 100% 3%, 99% 100%, 0 96%); white-space: nowrap; }
.tape { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tape.big { font-size: 26px; padding: 2px 12px 0; }
.tapes { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.tapes .tape:nth-child(even) { transform: rotate(.8deg); }
.tape.dull { background: var(--tape-dull); }

/* numbers and meters */
.meter { height: 6px; background: var(--rule-2); border-radius: 3px; overflow: hidden; display: flex; }
.meter > i { display: block; height: 100%; }
.meter .done { background: var(--green-solid); }
.meter .started { background: var(--amber-solid); }
.meter .tapefill { background: var(--tape); }
.meter.thin { height: 3px; margin: 0 0 8px; }
.meter .over { background: var(--red); }
/* the dial: a ring that fills clockwise from the top */
.dial { --size: 64px; --thick: 7px; width: var(--size); height: var(--size); border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--dial-fill, var(--green-solid)) calc(var(--p) * 1%), var(--dial-track, var(--rule-2)) 0); }
.dial > div { width: calc(var(--size) - 2 * var(--thick)); height: calc(var(--size) - 2 * var(--thick)); border-radius: 50%; background: var(--dial-hole, var(--surface)); display: grid; place-content: center; text-align: center; }
.dial b { display: block; font-family: var(--cond); font-weight: 700; font-size: calc(var(--size) * .36); line-height: .95; }
.dial b small { font-size: .5em; font-weight: 600; margin-left: 1px; }
.dial span { display: block; font-size: 10px; line-height: 1.1; color: var(--muted); margin-top: 1px; }
.dial.lg { --size: 104px; --thick: 10px; }
.dial.lg span { font-size: 12.5px; margin-top: 2px; }
.hero .dial { --dial-track: rgba(255, 255, 255, .16); --dial-hole: var(--hero-bg); --dial-fill: var(--tape); }
.hero .dial.full { --dial-fill: #5FBF7C; }
.hero .dial span { color: var(--bar-muted); }
.bignum { font-family: var(--cond); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: .01em; }
.bignum small { font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.journey { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.journey .step { background: var(--surface-2); border-radius: var(--radius); padding: 8px 10px 9px; }
.journey .step .bignum { font-size: 26px; }
.journey .step .bignum small { font-family: var(--cond); font-weight: 600; font-size: 17px; margin-left: 1px; }
.journey .step .lbl { font-size: 13px; color: var(--muted); margin: 1px 0 6px; }
@media (min-width: 520px) { .journey { grid-template-columns: repeat(4, 1fr); } }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 10px 14px; font-weight: 600; font-size: 15px; line-height: 1.2; min-height: 44px; text-decoration: none; text-align: center; }
.btn.primary { background: var(--primary-bg); border-color: var(--primary-bg); color: var(--primary-ink); }
.btn.tape-btn { background: var(--tape); border-color: var(--tape); color: var(--tape-ink); }
.btn.danger { color: var(--red); border-color: var(--red); background: transparent; }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 36px; padding: 6px 10px; font-size: 14px; }
.btn.xs { min-height: 26px; padding: 1px 8px; font-size: 12px; border-radius: 999px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; cursor: default; }
.btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.btnrow .btn { flex: 1; }

/* forms */
label.f, .f { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 4px; font-weight: 600; }
.in, textarea.in, select.in { width: 100%; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); border-radius: var(--radius); padding: 11px 12px; font-size: 16px; min-height: 46px; }
textarea.in { min-height: 76px; resize: vertical; }
.in::placeholder { color: var(--muted); opacity: .8; }
.in:focus { border-color: var(--ink-2); outline: none; box-shadow: 0 0 0 3px rgba(242, 201, 76, .4); }
.stepper { display: flex; align-items: stretch; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.stepper button { width: 52px; border: 0; background: var(--surface-2); font-size: 24px; font-weight: 500; }
.stepper input { flex: 1; border: 0; text-align: center; font-family: var(--cond); font-size: 28px; font-weight: 700; min-width: 0; background: transparent; }
.stepper.sm { width: 124px; flex: none; }
.stepper.sm button { width: 38px; font-size: 20px; }
.stepper.sm input { font-size: 20px; }
.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 4px; }
.toggle .sw { width: 46px; height: 28px; border-radius: 14px; background: var(--rule); position: relative; border: 0; flex: none; transition: background .15s; }
.toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.toggle .sw[aria-checked="true"] { background: var(--green-solid); }
.toggle .sw[aria-checked="true"]::after { left: 21px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chips button { border: 1px solid var(--rule); background: var(--surface); border-radius: 999px; padding: 7px 13px; font-size: 14px; font-weight: 500; min-height: 38px; }
.chips button.out { border-style: dashed; color: var(--muted); }
.chips button[aria-pressed="true"] { background: var(--primary-bg); color: var(--primary-ink); border-color: var(--primary-bg); }
.chips button.tapechip[aria-pressed="true"] { background: var(--tape); color: var(--tape-ink); border-color: var(--tape); }
.help { font-size: 13px; color: var(--muted); margin-top: 6px; }
.err { color: var(--red); font-size: 14px; margin-top: 8px; font-weight: 600; }
.err:empty { display: none; }
.filebtn input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.filebtn:focus-within { outline: 3px solid var(--tape); outline-offset: 2px; }

/* tick rows: cases going on the truck, cases checked in, items into a case */
.ticks { margin: 8px 0 0; padding: 0; list-style: none; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.ticks li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--rule-2); background: var(--surface); }
.ticks li:last-child { border-bottom: 0; }
.ticks label { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; cursor: pointer; min-height: 32px; }
.ticks input[type=checkbox] { width: 22px; height: 22px; flex: none; accent-color: var(--green-solid); }
.ticks .n { font-weight: 600; font-size: 14px; line-height: 1.25; }
.ticks .m { font-size: 12.5px; color: var(--muted); }

/* ---------- sign-in ---------- */
.login { max-width: 440px; margin: 0 auto; padding: calc(36px + var(--safe-t)) 20px 48px; }
.login .mark { font-family: var(--cond); font-weight: 700; font-size: 36px; line-height: 1; margin: 18px 0 4px; }
.login .sub { color: var(--muted); margin: 0 0 4px; }
.login h2 { margin-top: 30px; }
.rosterlist { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.rosterlist li { border-bottom: 1px solid var(--rule-2); }
.rosterlist li:last-child { border-bottom: 0; }
.rosterlist .who { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 12px; background: none; border: 0; text-align: left; min-height: 44px; }
.rosterlist button.who[aria-pressed="true"] { background: var(--surface-2); box-shadow: inset 4px 0 0 var(--tape); }
.rosterlist .n { font-weight: 600; font-size: 15px; }
.rosterlist .when { font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rosterlist .when.none { font-style: normal; opacity: .8; }

/* ---------- pack list ---------- */
.cat { margin: 18px 0 6px; display: flex; align-items: baseline; justify-content: space-between; }
.cat h3 { font-size: 14px; color: var(--muted); font-weight: 600; }
.item { width: 100%; text-align: left; display: grid; grid-template-columns: 56px 1fr auto; gap: 0 10px; align-items: center; background: var(--surface); border: 1px solid var(--rule); border-left-width: 5px; border-radius: var(--radius); padding: 10px 12px 10px 10px; margin-bottom: 6px; min-height: 60px; }
.item.R { border-left-color: var(--navy); }
.item.A { border-left-color: var(--teal); }
.item .q { font-family: var(--cond); font-weight: 700; font-size: 24px; line-height: 1; text-align: center; }
.item .q small { display: block; font-family: var(--sans); font-weight: 500; font-size: 11px; color: var(--muted); margin-top: 2px; }
.item .n { font-weight: 600; font-size: 15px; line-height: 1.25; }
.item .m { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.item .cases { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.item .cases .tape { font-size: 12px; padding: 0 6px; }
.item .st { justify-self: end; text-align: right; }
.ring { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cond); font-weight: 700; font-size: 15px; color: var(--ink-2); background: conic-gradient(var(--green-solid) calc(var(--p) * 1%), var(--rule-2) 0); }
.ring > span { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; }
.ring.full { background: var(--green-solid); }
.ring.full > span { background: transparent; color: #fff; }
.ring.over { background: var(--red); }
.ring.over > span { background: transparent; color: #fff; }
.item.blocked { background: var(--red-bg); border-left-color: var(--red); }
.item.blocked .n { text-decoration: line-through; color: var(--red); }
.item.dim { opacity: .72; }
.flagmark { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-left: 6px; vertical-align: middle; }

/* ---------- cases ---------- */
.casecard { background: var(--surface); border: 1px solid var(--rule); border-left: 5px solid var(--ink-2); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; }
.casecard.R { border-left-color: var(--navy); }
.casecard.A { border-left-color: var(--teal); }
.casecard .open-case { display: block; width: 100%; text-align: left; padding: 0; background: none; border: 0; }
.casecard .hd { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.casecard .meta { font-size: 13px; color: var(--muted); margin-top: 3px; }
.casecard .bd { padding: 0 12px 10px; font-size: 14px; color: var(--ink-2); }
.casecard .bd div { padding: 1px 0; }
.casecard .count { font-family: var(--cond); font-weight: 700; font-size: 22px; line-height: 1; margin-left: auto; text-align: right; }
.casecard .count small { display: block; font-family: var(--sans); font-weight: 500; font-size: 11px; color: var(--muted); }
.casecard .quick { padding: 0 12px 12px; }
.stagebar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0 12px; }
.stagebar div { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 6px 8px; }
.stagebar b { display: block; font-family: var(--cond); font-weight: 700; font-size: 22px; line-height: 1.05; }
.stagebar span { font-size: 12px; color: var(--muted); }
.photos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.photos a { display: block; width: 72px; height: 72px; border-radius: 4px; overflow: hidden; border: 1px solid var(--rule); background: var(--surface-2); text-decoration: none; }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos .doc { display: grid; place-items: center; font-size: 11px; line-height: 1.2; text-align: center; padding: 4px; color: var(--muted); overflow-wrap: anywhere; }
.line .btn { flex: none; white-space: nowrap; }
.undo { background: none; border: 0; padding: 2px 4px; margin-left: 2px; font-size: 12.5px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule-2); }
.line:last-child { border-bottom: 0; }

/* ---------- questions ---------- */
.qcard { background: var(--surface); border: 1px solid var(--rule); border-left-width: 5px; border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; width: 100%; text-align: left; display: block; }
.qcard.open { border-left-color: var(--amber-solid); }
.qcard.answered { border-left-color: var(--green-solid); }
.qcard.closed { opacity: .78; }
.qcard .qn { font-family: var(--cond); font-weight: 700; font-size: 22px; line-height: 1; min-width: 34px; }
.qcard .qt { font-weight: 600; font-size: 15px; line-height: 1.3; }
.qcard .owner { font-size: 13px; color: var(--muted); margin-top: 3px; }
.ctx { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 10px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2); max-width: 100%; text-align: left; min-height: 28px; }
.ctx .tape { font-size: 12px; padding: 0 6px; }
.qcard .answer { margin-top: 4px; color: var(--ink-2); }
/* For you */
.nlist { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.nrow { display: block; width: 100%; text-align: left; background: var(--surface); border: 0; border-bottom: 1px solid var(--rule-2); padding: 9px 12px; }
.nrow:last-child { border-bottom: 0; }
.nrow .t { display: block; font-size: 12px; color: var(--muted); }
.nrow .b { display: block; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; }
.nrow .b b { color: var(--ink); font-weight: 600; }
.nrow.new { box-shadow: inset 4px 0 0 var(--tape); background: var(--surface-2); }
.nrow.new .t { color: var(--ink-2); font-weight: 600; }
.answers { margin-top: 8px; border-top: 1px dashed var(--rule); padding-top: 8px; }
.answer { font-size: 14px; padding: 3px 0; }
.answer b { font-weight: 600; }
.answer .via { font-size: 11.5px; color: var(--muted); margin-left: 4px; white-space: nowrap; }

/* ---------- timeline ---------- */
.filters { display: flex; gap: 6px; overflow-x: auto; padding: 2px 16px 10px; margin: 0 -16px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters .btn { flex: none; border-radius: 999px; }
.tl-day { display: flex; align-items: baseline; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 16px 0 6px; }
.tl-day:first-child { margin-top: 2px; }
.tl-row { display: grid; grid-template-columns: 62px 14px 1fr; gap: 0 8px; font-size: 14px; }
.tl-row .t { font-family: var(--cond); font-weight: 600; font-size: 15px; color: var(--muted); text-align: right; padding-top: 1px; white-space: nowrap; }
.tl-row .t small { display: block; font-family: var(--sans); font-weight: 500; font-size: 11px; }
.tl-row .rail { position: relative; }
.tl-row .rail::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--rule); }
.tl-row .rail::after { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink-2); box-shadow: 0 0 0 3px var(--surface); }
.tl-row:last-child .rail::before { bottom: auto; height: 12px; }
.tl-row .body { padding: 0 0 14px; min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.tl-row .body b, .tl-row .body .who { color: var(--ink); font-weight: 600; }
.tl-row .body .tape { font-size: 12px; padding: 0 6px; }
.tl-row.k-move .rail::after { background: var(--tape); }
.tl-row.k-ask .rail::after { background: var(--amber-solid); }
.tl-row.k-text .rail::after { background: var(--kiwi); }
.tl-row.k-people .rail::after { background: var(--teal); }
.tl-row.k-docs .rail::after { background: var(--navy); }
.tl-row.k-email .rail::after { background: var(--surface); border: 2px solid var(--ink-2); width: 10px; height: 10px; border-radius: 2px; }
.tl-row.k-plan .rail::before { background: repeating-linear-gradient(to bottom, var(--rule) 0 4px, transparent 4px 8px); }
.tl-row.k-plan .rail::after { background: var(--surface); border: 2px solid var(--muted); }
.tl-row.k-plan.next .rail::after { background: var(--tape); border-color: var(--tape); }
.card.tl { padding: 14px 12px 2px 6px; }
.card.tl.compact .tl-row .body { padding-bottom: 12px; }

/* ---------- bottom sheet ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.sheet { background: var(--surface); width: 100%; max-width: 640px; max-height: 92dvh; overflow: auto; border-radius: 14px 14px 0 0; padding: 8px 18px calc(18px + var(--safe-b)); box-shadow: var(--sheet-shadow); overscroll-behavior: contain; }
.sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--rule); margin: 4px auto 12px; }
.sheet h2 { font-size: 18px; margin: 0 0 4px; }
.sheet .hdr { display: flex; align-items: flex-start; gap: 10px; }
.sheet .hdr .x { margin-left: auto; border: 0; background: var(--surface-2); color: var(--ink); border-radius: 50%; width: 36px; height: 36px; font-size: 22px; line-height: 1; flex: none; }
.sheet .actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.sheet .actions .btn { flex: 1; }
.sheet .hist { font-size: 13px; color: var(--muted); margin-top: 12px; }
.sheet .hist div { padding: 2px 0; }
@media (min-width: 860px) { .scrim { align-items: center; } .sheet { border-radius: 14px; max-height: 88vh; } }

/* toast */
#toast-root { position: fixed; left: 0; right: 0; bottom: calc(76px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 60; pointer-events: none; padding: 0 12px; }
.toast { background: var(--primary-bg); color: var(--primary-ink); padding: 10px 16px; border-radius: 18px; font-size: 14px; font-weight: 600; box-shadow: 0 4px 16px rgba(0, 0, 0, .3); max-width: 100%; text-align: center; }
.toast.err { background: var(--red); color: #fff; }
@media (prefers-color-scheme: dark) { .toast.err { color: #1B0907; } }
@media (min-width: 860px) { #toast-root { bottom: 24px; } }

/* ---------- overview ---------- */
.hero { display: block; width: 100%; text-align: left; background: var(--hero-bg); color: var(--bar-ink); border: 1px solid var(--hero-rule); border-radius: 8px; padding: 16px 16px 14px; margin-bottom: 12px; }
.hero .lbl { color: var(--bar-muted); font-size: 14px; }
.hero .when { font-family: var(--cond); font-weight: 700; font-size: 40px; line-height: 1; margin: 4px 0 4px; }
.hero .sub { color: var(--bar-muted); font-size: 14px; }
.hero .tbd { color: var(--tape); font-weight: 600; }
.hero .tape { font-size: 14px; }
.twocol { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .twocol.pair { grid-template-columns: 1fr 1fr; } .twocol .card { margin-bottom: 0; } .twocol { margin-bottom: 10px; } }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details.card > summary { font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
details.card > summary::after { content: "+"; color: var(--muted); font-size: 18px; line-height: 1; }
details[open].card > summary::after { content: "\2212"; }
details.card[open] > summary { margin-bottom: 8px; }
details.more > summary { font-size: 13px; color: var(--muted); font-weight: 600; padding: 6px 0 2px; }
details.more > summary::before { content: "+ "; }
details.more[open] > summary::before { content: "\2212  "; }
.contact { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule-2); font-size: 14px; }
.contact:last-child { border-bottom: 0; }
.contact .r { color: var(--muted); font-size: 13px; }
.contact a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.srow { display: grid; grid-template-columns: 70px 1fr; gap: 4px 10px; font-size: 14px; padding: 3px 0; }
.srow > b { color: var(--muted); font-weight: 600; }
.doclink { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule-2); text-decoration: none; font-size: 14px; }
.doclink:last-child { border-bottom: 0; }
.doclink b { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- 2.2: phases ---------- */
.phasebar { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px 2px; max-width: 860px; width: 100%; margin: 0 auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.phasebar::-webkit-scrollbar { display: none; }
.ph { position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink-2); border-radius: 999px; padding: 5px 13px 5px 5px; font-size: 13px; font-weight: 600; min-height: 36px; white-space: nowrap; }
.ph .pn { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cond); font-weight: 700; font-size: 15px; line-height: 1; background: var(--surface-2); color: var(--muted); }
.ph.done { color: var(--muted); }
.ph.done .pn { background: var(--green-bg); color: var(--green); }
.ph.now { background: var(--tape); border-color: var(--tape); color: var(--tape-ink); }
.ph.now .pn { background: var(--tape-ink); color: var(--tape); }
.ph.ahead { border-style: dashed; }
.phasenow { display: block; width: 100%; text-align: left; border-left: 5px solid var(--tape); color: var(--ink); }
.phasenow h3 { margin: 2px 0 2px; font-family: var(--cond); font-weight: 700; font-size: 26px; line-height: 1.05; }
.chk { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; font-size: 14px; margin-top: 9px; color: var(--ink-2); }
.chk b { font-weight: 600; color: var(--ink); }
.chk .meter { grid-column: 1 / -1; margin: 0; }
.openline { font-size: 14px; color: var(--amber); margin-top: 9px; padding-left: 10px; border-left: 3px solid var(--amber); }
.filters.phasefilter { padding-top: 0; }
/* ---------- 2.2: documents ---------- */
.docrow { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule-2); padding: 9px 0; color: var(--ink); }
.docrow .n { font-weight: 600; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.docrow .m { font-size: 13px; color: var(--muted); margin-top: 3px; }
.packetline { padding: 10px 0 0; font-size: 14px; }
.vrow { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--rule-2); }
.vrow.cur { box-shadow: inset 4px 0 0 var(--tape); padding-left: 12px; }
.changes { margin: 4px 0 0; padding-left: 18px; }
/* ---------- 2.2: findings, packing-list cases ---------- */
.fcard .fdetail { margin: 8px 0 0; font-size: 14px; line-height: 1.4; color: var(--ink-2); white-space: pre-line; }
.srcs { margin-top: 8px; font-size: 13px; color: var(--ink-2); }
.srcs ul { margin: 2px 0 0; padding-left: 18px; }
.pcase { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--rule-2); margin-top: 8px; }
.pcase .small { margin-top: 2px; }
.amberline { color: var(--amber); }
.linebtns { display: inline-flex; gap: 6px; flex: none; }

/* 2.3: phases switched off for the job; source materials; change orders and sign-offs */
.ph.off { border-style: dotted; background: transparent; color: var(--muted); font-weight: 500; }
.ph.off .pn { background: transparent; border: 1px dotted var(--rule); }
.ph .tag { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; border: 1px solid var(--rule); border-radius: 999px; padding: 0 6px; line-height: 1.5; color: var(--muted); }
.srclist { padding-top: 4px; padding-bottom: 12px; }
.srcrow { display: flex; align-items: baseline; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule-2); padding: 10px 0; color: var(--ink); font-size: 15px; }
.srcrow b { font-family: var(--cond); font-weight: 700; font-size: 26px; line-height: 1; min-width: 38px; }
.srcrow small { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.qcard .qn.co { font-size: 17px; min-width: 0; background: var(--tape); color: var(--tape-ink); padding: 3px 7px 1px; border-radius: 2px; transform: rotate(-1.2deg); white-space: nowrap; }
.ccard.closed { opacity: .82; }
.ctext { margin: 2px 0 0; font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.party { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
.party .small { margin-top: 2px; }
.linkbox { flex: 1 0 100%; }
.linkbox input { font-size: 13px; color: var(--muted); }
.linkbox .btnrow { margin-top: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.linkbox .btnrow > * { margin: 0; }
.prow { display: grid; grid-template-columns: 1fr 130px; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--rule-2); }
.prow .pemail { grid-column: 1 / -1; }
.tl-row.k-sign .rail::after { background: var(--tape); border: 2px solid var(--tape-ink); border-radius: 2px; }

/* AI agents: one mark, the same everywhere a name appears */
.chip.ai { background: var(--ink); border-color: var(--ink); color: var(--surface); border-radius: 3px; letter-spacing: .06em; font-weight: 700; padding: 0 5px; vertical-align: 1px; }
.rosterlist.agents .who { align-items: center; }
.agenthelps { margin: 4px 0 0; padding-left: 18px; font-size: 15px; color: var(--ink); }
.agenthelps li { margin: 3px 0; }

/* 2.4: who is in (people and AI in one list, with a role line), the Job tab, the truck check */
.rosterlist.full .who { align-items: flex-start; }
.rosterlist .grow { min-width: 0; }
.rosterlist .role { display: block; font-size: 13px; font-weight: 400; color: var(--muted); margin-top: 1px; overflow-wrap: anywhere; }
.rosterlist.full .when { text-align: right; white-space: normal; flex: none; max-width: 46%; }
.rosterlist .when b { display: block; font-weight: 600; color: var(--ink-2); }
.rosterlist .aihead { padding: 6px 12px 5px; font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-top: 1px solid var(--rule); }
.rosterlist .rowbtns { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.truckcheck { border-left: 5px solid var(--amber-solid); }
.truckcheck.ready { border-left-color: var(--green-solid); }
.truckcheck h3 { margin: 0; font-family: var(--cond); font-weight: 700; font-size: 24px; line-height: 1.05; }
.truckcheck .dial b small { font-size: .62em; }
.tclist { margin-top: 10px; }
.tcrow { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-top: 1px solid var(--rule-2); padding: 9px 0; color: var(--ink); font-size: 15px; min-height: 44px; }
.tcrow b { font-weight: 600; display: block; line-height: 1.25; }
.tcrow small { display: block; font-size: 13px; color: var(--amber); margin-top: 2px; }
.tcrow.ok b { font-weight: 500; color: var(--ink-2); }
.tcrow.ok small { color: var(--muted); }
.tcmark { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--amber-solid); display: grid; place-items: center; font-size: 13px; font-weight: 700; margin-top: 1px; }
.tcrow.ok .tcmark { border-color: var(--green-solid); background: var(--green-solid); color: var(--surface); }
.tcgo { flex: none; color: var(--muted); font-size: 20px; line-height: 1; margin-top: 2px; }
@media (max-width: 420px) { .tabbar .tab { font-size: 10.5px; } }

/* 2.4: the revision log */
.rev { border-left: 5px solid var(--tape); }
.revstats { display: flex; gap: 18px; flex-wrap: wrap; }
.revstats b { display: block; font-family: var(--cond); font-weight: 700; font-size: 30px; line-height: 1; }
.revstats span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.revstrip { position: relative; height: 22px; margin: 16px 7px 0; }
.revstrip::before { content: ""; position: absolute; left: -7px; right: -7px; top: 10px; height: 2px; background: var(--rule); }
.revstrip i { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ink-2); border: 2px solid var(--surface); }
.revstrip i.now { background: var(--tape); outline: 2px solid var(--ink); outline-offset: -1px; }
.revends { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-top: 2px; }
.revlatest { margin: 14px 0 12px; display: grid; gap: 4px; }
.revlatest b { font-weight: 600; }
.revrel > summary { align-items: flex-start; }
.revrel > summary .grow { display: grid; gap: 4px; min-width: 0; }
.revhead b { font-weight: 600; }
.revneed { margin: 0 0 6px; }
.revlist { list-style: none; margin: 10px 0 0; padding: 0; }
.revlist li { padding: 10px 0; border-top: 1px solid var(--rule-2); }
.revwhat { font-weight: 600; line-height: 1.35; }
.revwhy { margin-top: 3px; color: var(--ink-2); line-height: 1.4; }
.revfrom { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.chip.rk-new { background: var(--green-bg); border-color: transparent; color: var(--green); }
.chip.rk-better { background: var(--surface-2); }
.chip.rk-fix, .chip.rk-safety { background: var(--amber-bg); border-color: transparent; color: var(--amber); }
.newsbar { display: flex; align-items: stretch; gap: 0; margin: 0 0 10px; border: 1px solid var(--rule); border-left: 5px solid var(--tape); border-radius: var(--radius); background: var(--surface); }
.newsbar .grow { flex: 1; min-width: 0; text-align: left; padding: 10px 12px; background: none; border: 0; color: inherit; font: inherit; font-size: 14px; line-height: 1.4; cursor: pointer; }
.newsbar .x { flex: none; width: 44px; background: none; border: 0; border-left: 1px solid var(--rule-2); color: var(--muted); font-size: 20px; cursor: pointer; }
.linklike { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.revrel > summary .small { font-weight: 400; line-height: 1.4; }
.revwhat { font-size: 15.5px; }

/* A mouse cannot swipe a strip sideways. On a computer, and on any wide screen, the phase strip and the filter
   chips wrap onto another row, so nothing is cut off. A phone keeps the strip it swipes. */
@media (min-width: 860px), (hover: hover) and (pointer: fine) {
  .phasebar { flex-wrap: wrap; justify-content: center; overflow: visible; max-width: 1320px; row-gap: 8px; }
  .filters { flex-wrap: wrap; overflow: visible; row-gap: 8px; }
}