/* ============================================================
   CASUPO — Design system (v4, mobile-first)

   Built phone-up. The mechanic works standing next to a truck
   with one hand free, so every control is at least 44px, the
   primary actions sit at the bottom of the screen within thumb
   reach, and nothing depends on hover. The desktop layout is the
   same markup with a sidebar instead of a bottom bar.

   Colour language is the shop's own: red / amber / yellow /
   green, used identically everywhere they appear.
   ============================================================ */

:root {
  /* brand — blue/violet, deliberately not a dark UI */
  --brand:      #6366f1;
  --brand-2:    #8b5cf6;
  --brand-3:    #a855f7;
  --brand-ink:  #312e81;
  --brand-wash: #eef2ff;

  /* surfaces */
  --bg:         #f6f7fb;
  --surface:    #ffffff;
  --surface-2:  #fafbff;
  --line:       #e6e8f2;
  --line-2:     #eff1f8;

  /* text */
  --ink:        #16182b;
  --ink-2:      #454868;
  --muted:      #797d9c;
  --faint:      #a8abc4;

  /* status codes */
  --red:        #dc2626;  --red-bg:    #fee2e2;  --red-ink:    #991b1b;
  --amber:      #ea580c;  --amber-bg:  #ffedd5;  --amber-ink:  #9a3412;
  --yellow:     #ca8a04;  --yellow-bg: #fef3c7;  --yellow-ink: #854d0e;
  --green:      #059669;  --green-bg:  #d1fae5;  --green-ink:  #065f46;

  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 1px 2px rgba(22,24,43,.05), 0 8px 24px rgba(22,24,43,.06);
  --shadow-lg:  0 20px 50px rgba(22,24,43,.18);

  --tap:        46px;                 /* minimum touch target */
  --safe-b:     env(safe-area-inset-bottom, 0px);
  --bar-h:      calc(60px + var(--safe-b));
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Default size for every inline icon. Contexts that want a different size
   override it; nothing is ever left to the SVG default of 300x150. */
.ic { width: 17px; height: 17px; flex: none; display: block; }

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

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
  /* Stop iOS bouncing the whole page behind the fixed bars. */
  overscroll-behavior-y: none;
}

input, select, textarea, button { font: inherit; color: inherit; }

/* iOS zooms the page when a field smaller than 16px takes focus. */
input, select, textarea { font-size: 16px; }

a { color: var(--brand); text-decoration: none; }

/* ============================================================
   Layout shell
   ============================================================ */

.shell { min-height: 100dvh; padding-bottom: calc(var(--bar-h) + 12px); }

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 17px; letter-spacing: -.4px; color: var(--brand-ink);
}
.wordmark .mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-2) 55%, var(--brand-3));
  display: grid; place-items: center;
  box-shadow: 0 4px 12px rgba(99,102,241,.35);
}
.topbar .spacer { flex: 1; }

.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--brand), var(--brand-3));
  color: #fff; font-size: 12.5px; font-weight: 700;
  display: grid; place-items: center; cursor: pointer;
}

.page { padding: 16px 14px 8px; max-width: 1180px; margin: 0 auto; }

.page-head { margin-bottom: 14px; }
.page-head h1 { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.page-head .sub { color: var(--muted); font-size: 13.5px; margin-top: 3px; }

/* ---------- bottom tab bar (mobile) ---------- */
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 50;
  display: flex; align-items: stretch;
  height: var(--bar-h); padding-bottom: var(--safe-b);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 10.5px; font-weight: 650; color: var(--muted);
  min-height: var(--tap); -webkit-tap-highlight-color: transparent;
}
.tabbar a svg { width: 21px; height: 21px; }
.tabbar a.on { color: var(--brand); }
.tabbar a .dot {
  position: absolute; transform: translate(13px, -13px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}

.sidebar { display: none; }

/* ============================================================
   Cards, lists, rows
   ============================================================ */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden;
}
.card + .card { margin-top: 12px; }
.card-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; border-bottom: 1px solid var(--line-2);
}
.card-head h2 { font-size: 14.5px; font-weight: 750; letter-spacing: -.2px; }
.card-head .spacer { flex: 1; }
.card-body { padding: 15px; }
.card-body.tight { padding: 0; }

.row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-bottom: 1px solid var(--line-2);
  min-height: var(--tap); width: 100%; text-align: left;
  background: none; border-left: 0; border-right: 0; border-top: 0;
}
.row:last-child { border-bottom: none; }
button.row, a.row { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.row:active, a.row:active { background: var(--surface-2); }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 650; font-size: 14.5px; }
.row .meta { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.row .chev { color: var(--faint); flex: none; display: flex; }
.row .chev .ic { width: 15px; height: 15px; stroke-width: 2.2; }

.stack > * + * { margin-top: 12px; }

/* ---------- KPI tiles ----------
   Grid rows, not free-flowing text: the number, the label and the caption
   each get their own row track, so all four tiles line up across regardless
   of how long the words are. */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 14px; box-shadow: var(--shadow);
}
.tile .k { font-size: 11.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.tile .v { font-size: 26px; font-weight: 800; letter-spacing: -1px; margin-top: 5px; }
.tile .n { font-size: 12px; color: var(--muted); margin-top: 2px; }

.code-tiles { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.code-tile {
  display: grid;
  grid-template-rows: 3px auto auto auto;
  align-content: start;
  gap: 0;
  padding: 0 0 11px;
  color: var(--ink);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s, transform .12s;
}
.code-tile:active { transform: scale(.985); }
.code-tile:hover { border-color: var(--faint); }
.code-tile .rule { display: block; height: 3px; width: 100%; }
.code-tile .rule.red { background: var(--red); }   .code-tile .rule.amber { background: var(--amber); }
.code-tile .rule.yellow { background: var(--yellow); } .code-tile .rule.green { background: var(--green); }
.code-tile .v {
  font-size: 27px; font-weight: 800; letter-spacing: -1.2px;
  line-height: 1.1; margin: 10px 12px 0; font-variant-numeric: tabular-nums;
}
.code-tile .k {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--ink-2); margin: 3px 12px 0;
}
.code-tile .n {
  font-size: 11px; color: var(--muted); margin: 1px 12px 0;
  line-height: 1.35; min-height: 2.7em;    /* keeps all four bottoms level */
}

/* ---------- code pills ---------- */
.code {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1px;
}
.code::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.code.red    { background: var(--red-bg);    color: var(--red-ink); }
.code.amber  { background: var(--amber-bg);  color: var(--amber-ink); }
.code.yellow { background: var(--yellow-bg); color: var(--yellow-ink); }
.code.green  { background: var(--green-bg);  color: var(--green-ink); }

.code-bar { width: 4px; align-self: stretch; border-radius: 3px; flex: none; margin: -13px 0 -13px -15px; }
.code-bar.red { background: var(--red); } .code-bar.amber { background: var(--amber); }
.code-bar.yellow { background: var(--yellow); } .code-bar.green { background: var(--green); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; background: var(--brand-wash);
  color: var(--brand-ink); font-size: 11.5px; font-weight: 650;
}
.chip.plain { background: var(--line-2); color: var(--ink-2); }
.chip.warn  { background: var(--amber-bg); color: var(--amber-ink); }

/* ============================================================
   Buttons & forms
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tap); padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font-size: 14.5px; font-weight: 650;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: filter .15s, background .15s;
}
.btn:active { filter: brightness(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary {
  border: none; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2) 60%, var(--brand-3));
  box-shadow: 0 6px 16px rgba(99,102,241,.32);
}
.btn.danger { color: var(--red); border-color: #f6cccc; background: #fff5f5; }
.btn.ghost  { border-color: transparent; background: transparent; color: var(--brand); }
.btn.sm     { min-height: 36px; padding: 0 12px; font-size: 13px; }
.btn.block  { width: 100%; }
.btn.icon   { width: var(--tap); padding: 0; }

.btn-row { display: flex; gap: 9px; flex-wrap: wrap; }
.btn-row.split > * { flex: 1; }

.field { margin-bottom: 13px; }
.field label {
  display: block; font-size: 12.5px; font-weight: 650; color: var(--ink-2); margin-bottom: 6px;
}
.field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.input, select.input, textarea.input {
  width: 100%; min-height: var(--tap);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; background: var(--surface); outline: none;
  transition: border-color .15s, box-shadow .15s;
}
textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99,102,241,.14); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.search {
  position: relative; margin-bottom: 12px;
}
.search input {
  width: 100%; min-height: var(--tap);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 16px 11px 40px; background: var(--surface); outline: none;
}
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); }

.seg {
  display: flex; gap: 3px; padding: 3px; background: var(--line-2);
  border-radius: 999px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg button {
  flex: 1; min-height: 36px; padding: 0 14px; white-space: nowrap;
  border: none; border-radius: 999px; background: none;
  font-size: 13px; font-weight: 650; color: var(--muted); cursor: pointer;
}
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* ============================================================
   Definition lists (truck characteristics, part details)
   ============================================================ */
.dl { display: grid; grid-template-columns: 1fr; }
.dl > div {
  display: flex; align-items: baseline; gap: 12px;
  padding: 10px 15px; border-bottom: 1px solid var(--line-2);
}
.dl > div:last-child { border-bottom: none; }
.dl dt { font-size: 13px; color: var(--muted); flex: none; width: 42%; }
.dl dd { font-size: 14px; font-weight: 600; flex: 1; word-break: break-word; }
.dl dd.empty { color: var(--faint); font-weight: 500; font-style: italic; }

/* ============================================================
   Sheets & modals — bottom sheet on phones, centred on desktop
   ============================================================ */
.scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(22,24,43,.45); backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: fade .18s ease;
}
@keyframes fade { from { opacity: 0 } }
@keyframes rise { from { transform: translateY(16px); opacity: .6 } }

.sheet {
  width: 100%; max-height: 92dvh; overflow-y: auto;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding-bottom: calc(16px + var(--safe-b));
  box-shadow: var(--shadow-lg);
  animation: rise .22s cubic-bezier(.2,.8,.3,1);
}
.sheet-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px 12px; background: var(--surface);
  border-bottom: 1px solid var(--line-2);
}
.sheet-head h2 { font-size: 17px; font-weight: 780; letter-spacing: -.3px; }
.sheet-head .spacer { flex: 1; }
.sheet-body { padding: 15px 16px; }
.sheet-foot {
  position: sticky; bottom: 0;
  display: flex; gap: 9px; padding: 12px 16px;
  background: var(--surface); border-top: 1px solid var(--line-2);
}
.sheet-foot > * { flex: 1; }
.grabber {
  width: 36px; height: 4px; border-radius: 3px; background: var(--line);
  margin: 8px auto 0;
}

/* ============================================================
   Capture screen
   ============================================================ */
.capture-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.capture-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-height: 92px; padding: 14px 8px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow);
  font-size: 13px; font-weight: 650; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.capture-btn svg { width: 26px; height: 26px; color: var(--brand); }
.capture-btn:active { background: var(--surface-2); }
.capture-btn.on {
  border-color: var(--red); background: #fff5f5; color: var(--red-ink);
}
.capture-btn.on svg { color: var(--red); }

.rec-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--red);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .25 } }

.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.thumb {
  position: relative; width: 76px; height: 76px; border-radius: var(--radius-sm);
  overflow: hidden; border: 1px solid var(--line); background: var(--surface-2);
  display: grid; place-items: center; flex: none;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .x {
  position: absolute; top: 3px; right: 3px;
  width: 22px; height: 22px; border-radius: 50%; border: none;
  background: rgba(0,0,0,.6); color: #fff; font-size: 14px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
}
.thumb.audio { font-size: 11px; font-weight: 650; color: var(--brand-ink); gap: 3px; flex-direction: column; }

/* proposed actions */
.action {
  display: flex; gap: 11px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 9px;
}
.action.off { opacity: .48; }
.action input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--brand); flex: none; margin-top: 1px; }
.action .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--brand); }
.action .t { font-weight: 650; margin-top: 2px; }
.action .w { font-size: 12.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
.action .lo { color: var(--amber-ink); }

/* ============================================================
   Photos
   ============================================================ */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.gallery img, .gallery .ph {
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line); cursor: pointer;
}
.gallery .ph { display: grid; place-items: center; background: var(--surface-2); color: var(--faint); }

/* ============================================================
   Tables (desktop-only affordance; lists are used on phones)
   ============================================================ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- fleet table ----------
   A table on every screen size, not cards on a phone. The narrow columns
   drop out below 700px so unit, vehicle, mileage and open-item count still
   fit without sideways scrolling. */
table.fleet { font-size: 13px; }
table.fleet th { padding: 9px 10px; background: var(--surface-2); position: sticky; top: 0; z-index: 1; }
table.fleet td { padding: 0 10px; height: 46px; vertical-align: middle; }
table.fleet tbody tr { cursor: pointer; -webkit-tap-highlight-color: transparent; }
table.fleet tbody tr:hover { background: var(--surface-2); }
table.fleet tbody tr:active { background: var(--brand-wash); }
table.fleet tbody tr:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
table.fleet .unit { font-weight: 700; font-size: 13.5px; white-space: nowrap; }
table.fleet .c-code { width: 26px; padding-right: 0; }
table.fleet .c-chev { width: 26px; padding-left: 0; text-align: right; }
table.fleet .c-chev .chev { color: var(--faint); display: inline-flex; }
table.fleet .c-chev .ic { width: 14px; height: 14px; stroke-width: 2.2; }
table.fleet .chip { padding: 2px 7px; font-size: 11px; }

/* ---------- history tables (mileage, tread) ---------- */
table.hist { font-size: 13px; }
table.hist th { padding: 8px 12px; background: var(--surface-2); }
table.hist td { padding: 9px 12px; }
table.hist .latest { font-weight: 750; }
table.hist .neg { color: var(--red); }
table.hist .tread-worn { color: var(--yellow-ink); background: var(--yellow-bg); font-weight: 700; }
table.hist .tread-bad  { color: var(--red-ink);    background: var(--red-bg);    font-weight: 700; }
table.hist .c-chev { width: 40px; text-align: right; padding-left: 0; }
table.hist .btn.icon { width: 30px; min-height: 30px; }
table.hist .btn.icon .ic { width: 14px; height: 14px; }
@media (max-width: 699px) { table.hist .c-hide { display: none; } }

/* Characteristic rows are editable — show it. */
.dl > div[data-spec-row] { cursor: pointer; }
.dl > div[data-spec-row]:hover { background: var(--surface-2); }
.dl > div[data-spec-row]:active { background: var(--brand-wash); }

.dotcode { display: block; width: 9px; height: 9px; border-radius: 50%; }
.dotcode.red { background: var(--red); }       .dotcode.amber { background: var(--amber); }
.dotcode.yellow { background: var(--yellow); } .dotcode.green { background: var(--green); }

@media (max-width: 699px) {
  table.fleet .c-hide { display: none; }
  table.fleet th, table.fleet td { padding-left: 8px; padding-right: 8px; }
}
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .4px; padding: 10px 12px;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ============================================================
   Misc
   ============================================================ */
.empty-state { padding: 28px 20px; text-align: center; color: var(--muted); }
.empty-state .ic {
  width: 20px; height: 20px; stroke-width: 1.6;
  color: var(--faint); margin-bottom: 8px;
}
.empty-state .t { font-weight: 650; color: var(--ink-2); margin-bottom: 3px; font-size: 14px; }
.empty-state .s { font-size: 12.5px; line-height: 1.5; max-width: 40ch; margin: 0 auto; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--bar-h) + 14px); z-index: 90;
  transform: translateX(-50%) translateY(10px);
  max-width: calc(100vw - 28px);
  background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 600;
  padding: 12px 17px; border-radius: 999px; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.bad { background: var(--red); }

.banner {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--radius);
  background: var(--brand-wash); border: 1px solid #dfe3ff;
  font-size: 13px; color: var(--brand-ink); line-height: 1.5; margin-bottom: 13px;
}
.banner.warn { background: var(--amber-bg); border-color: #fed7aa; color: var(--amber-ink); }
.banner .ic { width: 16px; height: 16px; stroke-width: 2; margin-top: 2px; opacity: .85; }

.skel {
  background: linear-gradient(90deg, var(--line-2) 25%, #f6f7fc 50%, var(--line-2) 75%);
  background-size: 200% 100%; animation: shimmer 1.3s infinite; border-radius: 6px;
}
@keyframes shimmer { to { background-position: -200% 0 } }

.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.hide { display: none !important; }

/* ============================================================
   Desktop — sidebar replaces the tab bar
   ============================================================ */
@media (min-width: 860px) {
  body { font-size: 14.5px; }

  .shell { display: grid; grid-template-columns: 236px 1fr; padding-bottom: 0; }

  .tabbar { display: none; }

  .sidebar {
    display: flex; flex-direction: column; gap: 2px;
    padding: 16px 12px; border-right: 1px solid var(--line);
    background: var(--surface); position: sticky; top: 0; height: 100dvh;
  }
  .sidebar .wordmark { padding: 4px 8px 18px; }
  .sidebar a {
    display: flex; align-items: center; gap: 11px;
    padding: 10px 12px; border-radius: var(--radius-sm);
    color: var(--ink-2); font-size: 14px; font-weight: 600;
  }
  .sidebar a svg { width: 18px; height: 18px; color: var(--muted); }
  .sidebar a:hover { background: var(--surface-2); }
  .sidebar a.on { background: var(--brand-wash); color: var(--brand-ink); font-weight: 700; }
  .sidebar a.on svg { color: var(--brand); }
  .sidebar a .dot {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: var(--red); color: #fff; font-size: 11px; font-weight: 700;
    display: grid; place-items: center;
  }
  .sidebar .spacer { flex: 1; }

  .main { min-width: 0; }
  .topbar { padding: 12px 22px; }
  .page { padding: 22px; }
  .page-head h1 { font-size: 26px; }

  .tiles { grid-template-columns: repeat(4, 1fr); }
  .dl { grid-template-columns: 1fr 1fr; }
  .dl > div:nth-last-child(2):nth-child(odd) { border-bottom: none; }

  .scrim { align-items: center; padding: 24px; }
  .sheet { max-width: 640px; border-radius: 18px; padding-bottom: 0; animation: fade .18s ease; }
  .sheet.wide { max-width: 940px; }

  .capture-actions { grid-template-columns: repeat(3, 1fr); max-width: 520px; }
  .gallery { grid-template-columns: repeat(6, 1fr); }
  .toast { bottom: 22px; }
}

@media (min-width: 1180px) {
  .cols-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: start; }
  .cols-2 .card + .card { margin-top: 0; }
  .cols-2 > div > .card + .card { margin-top: 12px; }
}

/* Respect a reduced-motion preference: the animations here are decorative. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}