/* ══ Tyres tab (redesign) — .tt-* ══════════════════════════════════════════
   Consumables ▸ Tyres "On car" home: a live top-down car diagram + a set
   library of cards, with a slide-in set-detail drawer. Mirrors the Brakes tab
   (.bt-*) conventions — same scope bar, same lime accent, Barlow / Barlow
   Condensed, dark + light-mode. The Parts page hosts the SAME library in stock
   mode (#stock-cons-tyres), so every selector here has to reach both hosts.   */

/* Palette (dark defaults; overridden under .light-mode at the bottom of the
   file). Accent comes from the app (--accent). Defined on BOTH tab containers
   AND the body-level overlays (drawer / scrim / dialogs) — those are appended to
   document.body, OUTSIDE either host, so scoping the vars only to the tab
   would leave their backgrounds transparent. */
#detail-cons-tyres, #stock-cons-tyres,
.tt-drawer, .tt-scrim, .tt-ov {
  --tt-panel: #111620; --tt-panel-2: #0f1318; --tt-card-a: #131920; --tt-card-b: #111620;
  --tt-border: #1f2530; --tt-border-2: #2a3040; --tt-border-3: #3a4558;
  --tt-text: #dce3ed; --tt-dim: #7a8a9b; --tt-faint: #5a6d8a; --tt-faint-2: #3a4558;
  --tt-track: #1a1f28;
  --tt-good: #22c55e; --tt-wy: #eab308; --tt-wo: #f59e0b; --tt-bad: #ef4444;
  --tt-info: #3b82f6; --tt-aged: #a855f7; --tt-event: #8bb800;
  --tt-scrim: rgba(0,0,0,.55);
  /* the page behind the tab — the sticky mobile toolbar has to paint over the
     rows scrolling under it, so it needs the ground colour, not a panel one */
  --tt-page: #090b0e;
}

/* ── Scope bar (On car | Stock | History) — same shape as .bt-bar ── */
.tt-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.tt-seg { display: inline-flex; background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); border-radius: 7px; padding: 2px; gap: 2px; }
.tt-seg-btn {
  border: none; background: transparent; border-radius: 5px; padding: 6px 14px;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--tt-dim);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  transition: background .15s, color .15s;
}
.tt-seg-btn:hover { color: var(--tt-text); }
.tt-seg-btn.active { background: rgba(var(--accent-rgb), .15); color: var(--accent); }
.tt-seg-btn .material-symbols-outlined { font-size: 16px; }
.tt-seg-btn .tt-cnt { color: var(--tt-dim); font-weight: 500; margin-left: 4px; }

.tt-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 13px 'Barlow', sans-serif; color: var(--tt-text);
  background: #141820; border: 1px solid var(--tt-border-2); border-radius: 9px;
  padding: 8px 14px; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.tt-btn:hover { background: #1a2030; border-color: var(--tt-border-3); }
.tt-btn.primary { background: var(--accent); border-color: var(--accent); color: #000; }
.tt-btn.primary:hover { filter: brightness(1.05); }
.tt-btn:disabled { opacity: .55; cursor: default; }
.tt-btn.icon { padding: 8px 9px; }
.tt-btn.icon .material-symbols-outlined { font-size: 18px; }
.tt-btn .material-symbols-outlined { font-size: 16px; }
.tt-btn.danger { color: var(--tt-bad); border-color: rgba(239,68,68,.35); background: transparent; }
.tt-linklike { background: none; border: none; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; }

.tt-loading { color: var(--tt-dim); padding: 30px; text-align: center; font-size: 14px; }

/* ── On-car home layout: rail + main ── */
.tt-home {
  display: grid; grid-template-columns: 272px 1fr; gap: 14px; align-items: start;
  position: relative;
}
@media (max-width: 900px) { .tt-home { grid-template-columns: 1fr; } }

/* ── Left rail ── */
.tt-rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tt-rail-title {
  font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: .12em; font-weight: 700; font-size: 10px; color: var(--tt-faint);
  display: flex; align-items: center; gap: 7px; margin-bottom: 8px;
}
.tt-rail-title .tt-live { width: 6px; height: 6px; border-radius: 50%; background: var(--tt-good); box-shadow: 0 0 0 3px rgba(34,197,94,.15); }

/* Rims & fitted sets — each rim shows the set assembled on it; the set that is
   mounted on the car right now gets an "On car" tag. Replaces the old top-down
   car diagram + separate mounted-set card (both were redundant with this list). */
.tt-rimlist { display: flex; flex-direction: column; gap: 6px; }
.tt-rim { display: flex; align-items: center; gap: 9px; background: var(--tt-panel); border: 1px solid var(--tt-border); border-radius: 10px; padding: 9px 11px; cursor: pointer; transition: border-color .15s, transform .15s; }
.tt-rim:hover { border-color: var(--tt-border-3); transform: translateY(-1px); }
.tt-rim.oncar { border-color: rgba(var(--accent-rgb), .5); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .25) inset; }
.tt-rim.empty { cursor: default; opacity: .72; }
.tt-rim.empty:hover { transform: none; border-color: var(--tt-border); }
.tt-rim .tt-sw { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.tt-rim-b { min-width: 0; flex: 1; }
.tt-rim-h { display: flex; align-items: center; gap: 6px; }
.tt-rim-nm { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .03em; font-size: 14px; }
.tt-oncar { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 9px; color: var(--accent); background: rgba(var(--accent-rgb), .13); border-radius: 4px; padding: 1px 5px; }
.tt-rim-sub { font-size: 10.5px; color: var(--tt-dim); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-rim .tt-mw { margin-left: auto; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; flex: none; }
.tt-none { color: var(--tt-faint); font-size: 12px; padding: 8px 2px; }

.tt-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
.tt-stat { background: var(--tt-panel); border: 1px solid var(--tt-border); border-radius: 10px; padding: 9px 8px; text-align: center; }
.tt-stat b { display: block; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.tt-stat span { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 9px; color: var(--tt-dim); display: block; margin-top: 4px; }

/* ── Main: set library ── */
.tt-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.tt-controls { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tt-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px; background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); border-radius: 9px; padding: 0 12px; }
.tt-search input { flex: 1; background: none; border: 0; outline: 0; color: var(--tt-text); font-size: 13px; padding: 9px 0; font-family: inherit; }
.tt-search input::placeholder { color: var(--tt-faint); }
.tt-search .material-symbols-outlined { color: var(--tt-faint); font-size: 18px; }
.tt-segf { display: flex; gap: 2px; background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); border-radius: 9px; padding: 3px; }
.tt-segf button {
  background: none; border: 0; border-radius: 6px; padding: 7px 13px; color: var(--tt-dim);
  font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; font-size: 11.5px; display: flex; align-items: center; gap: 6px; cursor: pointer;
}
.tt-segf button.on { background: rgba(var(--accent-rgb), .13); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .4); }
.tt-segf button .tt-n { font-size: 10px; opacity: .7; font-variant-numeric: tabular-nums; }

.tt-sec-hdr { display: flex; align-items: center; gap: 8px; margin: 2px 0 -2px; }
.tt-sec-hdr .tt-gd { width: 7px; height: 7px; border-radius: 50%; }
.tt-sec-hdr .tt-t { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: 10px; color: var(--tt-faint); }
.tt-sec-hdr .tt-c { margin-left: auto; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; color: var(--tt-faint); }

.tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.tt-empty-grid { color: var(--tt-faint); font-size: 12px; padding: 6px 2px; }

/* set card */
.tt-card {
  background: linear-gradient(180deg, var(--tt-card-a), var(--tt-card-b)); border: 1px solid var(--tt-border);
  border-radius: 13px; padding: 11px 12px 10px; position: relative; cursor: pointer;
  display: flex; flex-direction: column; gap: 9px; transition: transform .16s, box-shadow .2s, border-color .16s; overflow: hidden;
}
.tt-card::before { content: ""; position: absolute; top: 0; left: 13px; right: 13px; height: 4px; border-radius: 0 0 3px 3px; background: var(--tt-cat, transparent); opacity: .85; }
.tt-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.28); border-color: var(--tt-border-3); }
.tt-card.mounted { border-color: rgba(245,158,11,.24); box-shadow: 0 0 16px rgba(245,158,11,.05); }
.tt-card.scrapped { opacity: .62; }
.tt-card-top { display: flex; align-items: flex-start; gap: 8px; }
.tt-card-top .tt-nm { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .03em; font-size: 15px; line-height: 1.05; flex: 1; }
.tt-badges { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }

/* ── Bulk pick (general stock only) ──
   A stockroom action is nearly always plural — allocate a shelf of sets to a
   car, bin a batch. The box stays faint until it's ticked or the card is
   hovered, so an untouched board still reads as cards, not as a form. */
.tt-pick {
  background: none; border: 0; padding: 0; cursor: pointer; flex: none;
  color: var(--tt-faint-2); line-height: 0; opacity: 0; transition: opacity .15s, color .15s;
}
.tt-pick .material-symbols-outlined { font-size: 18px; }
.tt-card:hover .tt-pick, .tt-pick.on { opacity: 1; }
.tt-pick.on { color: var(--accent); }
.tt-pick:hover { color: var(--tt-text); }
.tt-card.picked { border-color: rgba(var(--accent-rgb), .55); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .25) inset; }

.tt-selbar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  background: var(--tt-panel); border: 1px solid rgba(var(--accent-rgb), .35);
  border-radius: 11px; padding: 8px 12px;
}
.tt-selc {
  margin-right: auto; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700; font-size: 12px; color: var(--accent);
}
.tt-bdg { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 8.5px; padding: 2px 6px; border-radius: 4px; border: 1px solid; line-height: 1.4; }

.tt-rings { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 0 2px; }
.tt-rc { display: flex; align-items: center; gap: 6px; justify-content: center; }
.tt-rc .tt-rclab { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 9px; color: var(--tt-faint); width: 16px; }
.tt-ring { flex: none; }
.tt-rlab { position: relative; display: grid; place-items: center; }
.tt-rlab > span { position: absolute; font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-variant-numeric: tabular-nums; }

.tt-kmmid { display: flex; align-items: center; gap: 11px; padding: 1px 2px 0; }
.tt-kmmid .tt-rlab > span { font-size: 13px; }
.tt-kmmid-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tt-kmmid-m { font-size: 10px; color: var(--tt-dim); font-variant-numeric: tabular-nums; }

.tt-cbar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; background: var(--tt-track); }
.tt-cbar.big { height: 9px; }
.tt-cbar > span { display: block; height: 100%; }
.tt-cleg { display: flex; gap: 12px; font-size: 10px; color: var(--tt-dim); font-variant-numeric: tabular-nums; }
.tt-cleg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.tt-cmini { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: var(--tt-dim); font-variant-numeric: tabular-nums; }
.tt-cmini i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; }
.tt-cmini i + i { margin-left: 6px; }

.tt-card-foot { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--tt-border); padding-top: 8px; margin-top: 1px; }
.tt-src { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; font-size: 8.5px; padding: 2px 6px; border-radius: 4px; border: 1px solid; line-height: 1.35; flex: none; }
.tt-src.km { color: var(--tt-info); border-color: rgba(59,130,246,.5); background: rgba(59,130,246,.12); }
.tt-src.tread { color: var(--accent); border-color: rgba(var(--accent-rgb),.45); background: rgba(var(--accent-rgb),.1); }
.tt-card-foot .tt-km { font-size: 11px; color: var(--tt-dim); font-variant-numeric: tabular-nums; }
.tt-card-foot .tt-wear { margin-left: auto; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; }
.tt-evt { font-family: 'Barlow Condensed', sans-serif; font-weight: 600; letter-spacing: .03em; font-size: 10.5px; color: var(--tt-event); background: rgba(139,184,0,.09); border: 1px solid rgba(139,184,0,.28); border-radius: 6px; padding: 3px 8px; display: flex; align-items: center; gap: 5px; }
.tt-warnrow { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .02em; font-size: 10.5px; color: var(--tt-wo); background: rgba(249,115,22,.09); border: 1px solid rgba(249,115,22,.3); border-radius: 6px; padding: 3px 8px; display: flex; align-items: center; gap: 5px; }
.tt-warnrow .material-symbols-outlined { font-size: 14px; }
.tt-evt .material-symbols-outlined { font-size: 14px; }

/* card hover quick-actions */
.tt-qa { position: absolute; inset: auto 10px 10px; display: flex; gap: 6px; opacity: 0; transform: translateY(6px); transition: .16s; pointer-events: none; }
.tt-card:hover .tt-qa { opacity: 1; transform: none; pointer-events: auto; }
.tt-qa button { flex: 1; border-radius: 7px; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 11px; padding: 7px 0; border: 1px solid var(--tt-border-2); background: var(--tt-panel-2); color: var(--tt-text); cursor: pointer; }
.tt-qa button.mount { background: var(--accent); border-color: var(--accent); color: #000; }
.tt-qa button:hover { border-color: var(--tt-border-3); }
.tt-card:hover .tt-card-foot { visibility: hidden; }
.tt-card:hover .tt-rings, .tt-card:hover .tt-kmmid { filter: blur(1.5px); opacity: .35; }

/* ── Touch: nothing may hide behind :hover ──────────────────────────────────
   A finger has no hover state. The quick-actions either never appeared or
   latched after a tap — and then blurred the wear numbers underneath — while
   the bulk pick box, which the entire general-stock allocate/scrap flow runs
   through, was simply invisible. So on touch the overlay goes away (every one
   of its actions is one tap away in the drawer) and the pick box is drawn at
   rest instead of on hover. */
@media (hover: none) {
  .tt-qa { display: none; }
  .tt-card:hover .tt-card-foot { visibility: visible; }
  .tt-card:hover .tt-rings, .tt-card:hover .tt-kmmid { filter: none; opacity: 1; }
  .tt-pick { opacity: .7; color: var(--tt-dim); }
  .tt-pick.on { opacity: 1; color: var(--accent); }
}

/* ── Drawer (slide-in set detail) ── */
.tt-scrim { position: fixed; inset: 0; background: var(--tt-scrim); opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 1400; }
.tt-scrim.on { opacity: 1; pointer-events: auto; }
.tt-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 408px; max-width: 94%;
  background: var(--tt-panel-2); border-left: 1px solid var(--tt-border-2); z-index: 1401;
  transform: translateX(100%); transition: transform .28s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; box-shadow: -16px 0 40px rgba(0,0,0,.3);
}
.tt-drawer.on { transform: none; }
.tt-dh { display: flex; align-items: flex-start; gap: 10px; padding: 15px 16px 13px; border-bottom: 1px solid var(--tt-border); }
.tt-dh .tt-cat { width: 10px; height: 10px; border-radius: 3px; margin-top: 5px; flex: none; }
.tt-dh .tt-nm { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; font-size: 19px; line-height: 1; }
.tt-dh .tt-meta { color: var(--tt-dim); font-size: 11.5px; margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.tt-pill { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 9px; padding: 2px 7px; border-radius: 5px; }
.tt-pill.mounted { background: rgba(245,158,11,.14); color: var(--tt-wo); }
.tt-pill.stock { background: rgba(34,197,94,.13); color: var(--tt-good); }
.tt-pill.scrapped { background: rgba(239,68,68,.14); color: var(--tt-bad); }
.tt-dh .tt-x { margin-left: auto; background: none; border: 1px solid var(--tt-border-2); border-radius: 8px; color: var(--tt-dim); width: 30px; height: 30px; flex: none; cursor: pointer; display: grid; place-items: center; }
.tt-dh .tt-x:hover { border-color: var(--tt-border-3); color: var(--tt-text); }
.tt-dbody { flex: 1; overflow: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 13px; }
/* Keep each section at its natural height and let the body SCROLL. Without this,
   flex children shrink to fit and the stacked accordions collapse into thin
   overlapping slivers (the "grey lines" — barcodes etc. become unreadable). */
.tt-dbody > * { flex-shrink: 0; }

.tt-srcbar { display: flex; align-items: center; gap: 10px; }
.tt-srclbl { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; font-size: 10px; color: var(--tt-faint); }
.tt-srcseg { margin-left: auto; display: flex; gap: 2px; background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); border-radius: 9px; padding: 3px; }
.tt-srcseg button { background: none; border: 0; border-radius: 6px; padding: 6px 11px; color: var(--tt-dim); font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 11.5px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.tt-srcseg button.on { background: rgba(var(--accent-rgb),.14); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.4); }
.tt-srcseg .material-symbols-outlined { font-size: 15px; }

/* corner grid inside drawer */
.tt-cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tt-cg { background: var(--tt-card-b); border: 1px solid var(--tt-border); border-radius: 11px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; }
.tt-cg .tt-cgpos { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; letter-spacing: .06em; font-size: 10px; color: var(--tt-dim); }
.tt-cg .tt-cgmm { font-weight: 700; font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums; margin-top: 1px; }
.tt-cg .tt-cgmm small { font-size: 9px; color: var(--tt-dim); font-weight: 600; }
.tt-cg .tt-cgpct { font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.tt-cg .tt-cgsh { font-size: 9.5px; color: var(--tt-faint); font-variant-numeric: tabular-nums; margin-top: 2px; letter-spacing: .01em; }

/* reading row (add tread / mileage) */
.tt-reading { background: linear-gradient(180deg, rgba(var(--accent-rgb),.05), transparent); border: 1px solid rgba(var(--accent-rgb),.35); border-radius: 12px; padding: 11px 12px; display: flex; flex-direction: column; gap: 9px; }
.tt-rh { display: flex; align-items: center; gap: 8px; }
.tt-rh .tt-rt { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 11px; color: var(--tt-text); }
.tt-rh .tt-rsub { font-size: 10.5px; color: var(--tt-dim); margin-left: auto; }
.tt-rh .material-symbols-outlined { font-size: 16px; color: var(--accent); }
.tt-rrow { display: flex; gap: 7px; align-items: stretch; flex-wrap: wrap; }
.tt-field { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 78px; }
.tt-field label { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 8.5px; color: var(--tt-faint); }
.tt-field .tt-inp, .tt-field select { background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); border-radius: 7px; color: var(--tt-text); font-family: inherit; font-size: 13px; padding: 7px 9px; outline: 0; width: 100%; font-variant-numeric: tabular-nums; }
.tt-field .tt-inp:focus, .tt-field select:focus { border-color: var(--accent); }
.tt-field.corner-f { flex: 1.3; }
.tt-field.tt-shoulder { flex: .6; min-width: 56px; }
.tt-add-read { background: var(--accent); color: #000; border: 0; border-radius: 8px; align-self: flex-end; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; font-size: 12px; padding: 8px 15px; height: 34px; cursor: pointer; }
.tt-add-read:hover { filter: brightness(1.05); }
.tt-read-prev { font-size: 11px; color: var(--tt-dim); display: flex; align-items: center; gap: 6px; min-height: 15px; }
.tt-read-prev b { color: var(--accent); font-variant-numeric: tabular-nums; }

/* mileage panel */
.tt-kmpanel { display: flex; gap: 13px; background: var(--tt-card-b); border: 1px solid var(--tt-border); border-radius: 12px; padding: 12px 13px; }
.tt-kmring { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.tt-kmring .tt-rlab > span { font-size: 15px; }
.tt-kmring-l { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 9px; color: var(--tt-dim); }
.tt-kmpanel-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.tt-kmpanel-n { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; line-height: 1; font-variant-numeric: tabular-nums; }
.tt-kmpanel-n small { font-size: 11px; color: var(--tt-dim); font-weight: 600; margin-left: 3px; }
.tt-kmpanel-m { font-size: 10.5px; color: var(--tt-dim); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; line-height: 1.5; }
.tt-kmpanel-m b { color: var(--tt-text); }
.tt-autochip { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 8.5px; color: var(--tt-info); background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.35); border-radius: 4px; padding: 2px 6px; }

/* trend sparkline */
.tt-spark-wrap { background: var(--tt-card-b); border: 1px solid var(--tt-border); border-radius: 11px; padding: 10px 12px; }
.tt-spark-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tt-spark-head .tt-t { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; font-size: 10px; color: var(--tt-faint); }
.tt-spark-head .tt-proj { margin-left: auto; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11px; color: var(--tt-wo); }
.tt-spark svg { display: block; width: 100%; height: 64px; }
.tt-spark-x { display: flex; justify-content: space-between; font-size: 9px; color: var(--tt-faint); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* meta strip: heat cycles + condition */
.tt-metastrip { display: grid; grid-template-columns: .85fr 1.25fr; gap: 9px; }
.tt-ms-card { background: var(--tt-card-b); border: 1px solid var(--tt-border); border-radius: 11px; padding: 9px 11px; display: flex; flex-direction: column; gap: 6px; }
.tt-ms-lbl { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: 9.5px; color: var(--tt-faint); display: flex; align-items: center; gap: 6px; }
.tt-ms-val { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 19px; line-height: 1; font-variant-numeric: tabular-nums; }
.tt-ms-val small { font-size: 11px; color: var(--tt-dim); font-weight: 600; margin-left: 2px; }
.tt-ms-bar { height: 6px; border-radius: 4px; background: var(--tt-track); overflow: hidden; }
.tt-ms-bar > span { display: block; height: 100%; }
.tt-ms-sub { font-size: 9.5px; color: var(--tt-faint); }
.tt-ms-warn { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: 9.5px; color: var(--tt-bad); }
.tt-cyc-btns { display: flex; gap: 4px; margin-top: 2px; }
.tt-cyc-btns button { flex: 1; border: 1px solid var(--tt-border-2); background: var(--tt-panel-2); border-radius: 6px; color: var(--tt-dim); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; padding: 3px 0; cursor: pointer; }
.tt-cyc-btns button:hover { border-color: var(--tt-border-3); color: var(--tt-text); }
.tt-condchips { display: flex; flex-wrap: wrap; gap: 4px; }
.tt-condchip { border: 1px solid var(--tt-border-2); border-radius: 13px; padding: 3px 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: .02em; color: var(--tt-dim); background: none; cursor: pointer; }
.tt-condchip:hover { border-color: var(--tt-border-3); }

/* drawer actions */
.tt-dactions { display: flex; gap: 8px; flex-wrap: wrap; }
.tt-dactions button { flex: 1; min-width: 96px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border-radius: 9px; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 12px; padding: 10px 0; border: 1px solid var(--tt-border-2); background: none; color: var(--tt-text); cursor: pointer; }
.tt-dactions button .material-symbols-outlined { font-size: 16px; }
.tt-dactions .mount { background: var(--accent); border-color: var(--accent); color: #000; flex: 1.5; }
.tt-dactions .mount:hover { filter: brightness(1.05); }
.tt-dactions button:hover { border-color: var(--tt-border-3); }
.tt-dactions .danger { color: var(--tt-bad); border-color: rgba(239,68,68,.35); }
.tt-danger-note { font-size: 11px; color: var(--tt-faint); text-align: center; }

/* accordions */
.tt-acc { border: 1px solid var(--tt-border-2); border-radius: 11px; overflow: hidden; background: var(--tt-panel-2); }
/* Resting fill + a leading accent tick so a collapsed section reads as a tappable
   row, not a stray divider line, even when several stack under the footer. */
.tt-acc summary { list-style: none; cursor: pointer; padding: 12px 13px; display: flex; align-items: center; gap: 9px; font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 12px; color: var(--tt-text); background: rgba(127,127,127,.05); transition: background .12s; }
.tt-acc summary:hover { background: rgba(127,127,127,.11); }
.tt-acc[open] summary { border-bottom: 1px solid var(--tt-border); background: rgba(127,127,127,.03); }
.tt-acc summary::-webkit-details-marker { display: none; }
.tt-acc summary .tt-chev { margin-left: auto; color: var(--tt-dim); transition: transform .2s; }
.tt-acc[open] summary .tt-chev { transform: rotate(90deg); }
.tt-acc summary .tt-tag { font-family: 'Barlow', sans-serif; text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 10.5px; color: var(--tt-dim); }
.tt-acc summary .material-symbols-outlined { color: var(--tt-faint); font-size: 17px; }
.tt-acc .tt-inner { padding: 0 13px 13px; display: flex; flex-direction: column; gap: 8px; }

.tt-hist { display: flex; align-items: center; gap: 9px; font-size: 12px; padding: 2px 0; }
.tt-hist .tt-hd { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tt-hist .tt-hdate { margin-left: auto; font-size: 10.5px; color: var(--tt-faint); font-variant-numeric: tabular-nums; }
.tt-evrow { display: flex; align-items: center; gap: 8px; background: var(--tt-card-b); border: 1px solid var(--tt-border); border-radius: 8px; padding: 7px 10px; }
.tt-evrow .tt-en { font-size: 12px; font-weight: 600; }
.tt-evrow .tt-ed { margin-left: auto; font-size: 10px; color: var(--tt-dim); font-variant-numeric: tabular-nums; }
.tt-nextbdg { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 8px; background: var(--accent); color: #000; border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.tt-press { background: var(--tt-card-b); border: 1px solid var(--tt-border); border-radius: 8px; padding: 8px 10px; font-size: 11.5px; }
.tt-press .tt-pe { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px; margin-bottom: 3px; display: flex; gap: 8px; align-items: baseline; }
.tt-press .tt-pm { font-size: 10px; color: var(--tt-dim); font-weight: 600; }
.tt-press .tt-pv { font-variant-numeric: tabular-nums; color: var(--tt-dim); }
.tt-press .tt-pv b { color: var(--tt-faint); font-size: 9px; text-transform: uppercase; letter-spacing: .05em; margin-right: 4px; }
.tt-ptarget { background: var(--tt-card-b); border: 1px solid var(--tt-border); border-radius: 10px; padding: 10px 11px; margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.tt-pt-row { display: flex; gap: 10px; align-items: flex-end; }
.tt-pt-row .tt-field { flex: none; width: 108px; }
.tt-pt-out { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.tt-pt-cell { background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); border-radius: 7px; padding: 5px 3px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tt-pc-pos { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 9px; color: var(--tt-faint); }
.tt-pc-v { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 14px; color: var(--accent); font-variant-numeric: tabular-nums; }
.tt-fhint { font-size: 10.5px; color: var(--tt-dim); line-height: 1.5; }
.tt-bcrow { display: flex; align-items: center; gap: 9px; background: var(--tt-card-b); border: 1px solid var(--tt-border); border-radius: 8px; padding: 6px 10px; }
.tt-bc-pos { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 11px; color: var(--tt-dim); width: 24px; }
.tt-bc-code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; letter-spacing: .06em; color: var(--tt-text); flex: 1; }
.tt-bc-code input { width: 100%; background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); border-radius: 6px; color: var(--tt-text); font-family: inherit; font-size: 12px; padding: 5px 8px; outline: 0; }
.tt-bc-code input:focus { border-color: var(--accent); }
.tt-bc-ok { margin-left: auto; color: var(--tt-good); }
.tt-share { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; color: var(--tt-dim); }

/* ── Dialogs (Add sets · Compounds · Scan) ── */
.tt-ov { position: fixed; inset: 0; background: var(--tt-scrim); display: none; align-items: flex-start; justify-content: center; z-index: 1500; padding: 38px 16px; overflow: auto; }
.tt-ov.on { display: flex; }
.tt-dlg { background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); border-radius: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.42); width: 100%; display: flex; flex-direction: column; overflow: hidden; }
.tt-dlg-add { max-width: 464px; }
.tt-dlg-lib { max-width: 730px; }
.tt-dlg-h { display: flex; align-items: center; gap: 9px; padding: 14px 17px; border-bottom: 1px solid var(--tt-border); }
.tt-dlg-h b { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .02em; font-weight: 800; font-size: 17px; }
.tt-dlg-h .tt-sub { color: var(--tt-dim); font-size: 11px; }
.tt-dlg-h .tt-x { margin-left: auto; background: none; border: 1px solid var(--tt-border-2); border-radius: 8px; color: var(--tt-dim); width: 30px; height: 30px; flex: none; cursor: pointer; display: grid; place-items: center; }
.tt-dlg-h .tt-x:hover { border-color: var(--tt-border-3); color: var(--tt-text); }
.tt-dlg-b { padding: 15px 17px; display: flex; flex-direction: column; gap: 14px; overflow: auto; max-height: calc(100vh - 220px); }
.tt-dlg-f { display: flex; gap: 9px; padding: 12px 17px; border-top: 1px solid var(--tt-border); }
.tt-dlg-f .tt-btn { flex: 1; justify-content: center; padding: 10px; }
.tt-frow { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tt-frow > label { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 9.5px; color: var(--tt-faint); }
.tt-frow input, .tt-frow select { background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); border-radius: 8px; color: var(--tt-text); font-family: inherit; font-size: 13px; padding: 8px 10px; outline: 0; width: 100%; font-variant-numeric: tabular-nums; }
.tt-frow input:focus, .tt-frow select:focus { border-color: var(--accent); }
.tt-frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tt-compchips { display: flex; flex-wrap: wrap; gap: 7px; }
/* color is NOT optional here — this is a <button>, so it does not inherit the
   body text colour and would render in the UA's black. */
.tt-compchip { display: flex; align-items: center; gap: 8px; background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); border-radius: 9px; padding: 7px 11px; cursor: pointer; color: var(--tt-text); }
.tt-compchip .tt-cd { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.tt-compchip .tt-cn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; }
.tt-compchip .tt-cc { font-size: 10px; color: var(--tt-dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.tt-compchip.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: rgba(var(--accent-rgb),.08); }
.tt-prevtags { display: flex; flex-wrap: wrap; gap: 6px; }
/* The dot is the category colour the created sets will carry — same swatch as
   the compound chip above, so the preview shows the set as it will look. */
.tt-prevtag { display: inline-flex; align-items: center; gap: 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: .02em; color: var(--tt-text); background: var(--tt-card-a); border: 1px solid var(--tt-border-2); border-radius: 6px; padding: 4px 10px; }
.tt-prevtag .tt-cd { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tt-destseg { align-self: flex-start; display: flex; gap: 2px; background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); border-radius: 9px; padding: 3px; }
.tt-destseg button { background: none; border: 0; border-radius: 6px; padding: 7px 13px; color: var(--tt-dim); font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 11.5px; cursor: pointer; }
.tt-destseg button.on { background: rgba(var(--accent-rgb),.14); color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.4); }

/* scan-in */
.tt-scan-zone { background: var(--tt-card-b); border: 1px solid var(--tt-border-2); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.tt-scan-head { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--tt-dim); }
.tt-scan-head b { color: var(--tt-text); font-variant-numeric: tabular-nums; }
.tt-scan-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.tt-scan-slot { display: flex; align-items: center; gap: 8px; border: 1px dashed var(--tt-border-2); border-radius: 9px; padding: 8px 10px; min-height: 42px; }
.tt-scan-slot.done { border-style: solid; border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.06); }
.tt-scan-slot.next { border-color: var(--accent); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb),.35); }
.tt-ss-pos { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 12px; color: var(--tt-dim); width: 22px; }
.tt-ss-code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--tt-text); }
.tt-ss-ok { margin-left: auto; color: var(--tt-good); }
.tt-ss-wait { color: var(--tt-faint); font-size: 11px; }
.tt-scan-in-row { display: flex; gap: 7px; }
.tt-scan-in-row input { flex: 1; min-width: 0; background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); border-radius: 8px; color: var(--tt-text); font-family: inherit; font-size: 13px; padding: 9px 11px; outline: 0; }
.tt-scan-in-row input:focus { border-color: var(--accent); }
.tt-scanned-list { display: flex; flex-direction: column; gap: 5px; }
.tt-scanned-set { display: flex; align-items: center; gap: 9px; background: var(--tt-panel-2); border: 1px solid var(--tt-border); border-radius: 8px; padding: 7px 10px; }
.tt-sd-nm { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; flex: none; }
.tt-sd-codes { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 10px; color: var(--tt-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-sd-n { margin-left: auto; color: var(--tt-good); }

/* compound library */
.tt-complib { display: flex; min-height: 430px; }
.tt-complib-rail { width: 190px; flex: none; border-right: 1px solid var(--tt-border); padding: 11px 9px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.tt-complib-bm { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 9px; border: 1px solid transparent; cursor: pointer; text-align: left; background: none; color: var(--tt-text); }
.tt-complib-bm:hover { background: var(--tt-panel-2); }
.tt-complib-bm.on { background: var(--tt-panel-2); border-color: var(--tt-border-2); box-shadow: inset 3px 0 0 var(--accent); }
.tt-complib-bm .tt-cbar-b { width: 4px; height: 28px; border-radius: 3px; flex: none; }
.tt-complib-bm .tt-bn { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 13px; line-height: 1.15; }
.tt-complib-bm .tt-bc { font-size: 10px; color: var(--tt-dim); font-variant-numeric: tabular-nums; }
/* Which car model a compound is scoped to — only rendered in general stock,
   where every model's compounds sit in one list and brand+name repeats. */
.tt-complib-bm .tt-bm {
  font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: .07em; font-weight: 700; font-size: 9px; color: var(--tt-faint);
}
.tt-complib-bm .tt-cbar-b { align-self: stretch; height: auto; }
.tt-complib-new { margin-top: 6px; border: 1px dashed var(--tt-border-2); border-radius: 9px; color: var(--tt-dim); font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: 11px; padding: 9px; background: none; cursor: pointer; }
.tt-complib-new:hover { border-color: var(--accent); color: var(--accent); }
.tt-complib-edit { flex: 1; min-width: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; overflow: auto; max-height: calc(100vh - 180px); }
.tt-sectionlbl { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: 9.5px; color: var(--tt-faint); border-bottom: 1px solid var(--tt-border); padding-bottom: 5px; }
.tt-wearcfg { background: linear-gradient(180deg, rgba(var(--accent-rgb),.05), transparent); border: 1px solid rgba(var(--accent-rgb),.32); border-radius: 12px; padding: 12px 13px; display: flex; flex-direction: column; gap: 11px; }
.tt-wearcfg-h { display: flex; align-items: center; gap: 8px; }
.tt-wearcfg-h .tt-t { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; font-size: 11px; }

/* ── Rail: add rim set ── */
.tt-mini-add { margin-top: 6px; width: 100%; background: none; border: 1px dashed var(--tt-border-3); border-radius: 8px; color: var(--tt-dim); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; padding: 6px 0; cursor: pointer; }
.tt-mini-add:hover { color: var(--tt-text); border-color: var(--tt-dim); }

/* ── Grouped "Available" sub-headers ── */
.tt-sub-hdr { display: flex; align-items: center; gap: 7px; margin: 10px 0 6px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--tt-dim); }
.tt-sub-hdr .tt-gd { width: 7px; height: 7px; border-radius: 50%; }
.tt-sub-hdr .tt-c { color: var(--tt-faint); font-size: 11px; }
.tt-btn.on { border-color: rgba(var(--accent-rgb),.5); color: var(--accent); background: rgba(var(--accent-rgb),.1); }

/* ── Drawer: session rows, manual entries, event picker ── */
.tt-evpick { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; }
.tt-evrow .tt-evtrack { display: block; font-size: 10px; font-weight: 400; color: var(--tt-faint); }
.tt-evrow.added { border-color: rgba(var(--accent-rgb),.35); }
.tt-evrow .tt-hd { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.tt-evsrc { font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 8px; background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); color: var(--tt-faint); border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.tt-addbtn { flex: none; border: 1px solid var(--tt-border-2); background: var(--tt-panel-2); border-radius: 7px; color: var(--tt-text); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; padding: 4px 10px; cursor: pointer; }
.tt-addbtn:hover { border-color: var(--tt-border-3); }
.tt-addbtn.on { color: var(--tt-bad); border-color: rgba(239,68,68,.35); }
.tt-manual-del { flex: none; background: none; border: 0; color: var(--tt-faint); font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px; border-radius: 5px; }
.tt-manual-del:hover { color: var(--tt-bad); background: rgba(239,68,68,.1); }

/* ── Scrap chooser corners ── */
.tt-scrap-corners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tt-scrap-corners .tt-btn { justify-content: center; }
.tt-scrap-corners .tt-btn:disabled { opacity: .35; cursor: default; }
.tt-btn.danger-b { border-color: rgba(239,68,68,.4); }
.tt-btn.danger-b:hover { background: rgba(239,68,68,.08); }

/* ── Compounds: inline category creation ── */
.tt-catchip-add { border-style: dashed !important; }
.tt-cat-adder { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; background: var(--tt-panel-2); border: 1px solid var(--tt-border-2); border-radius: 9px; padding: 8px 10px; }
.tt-cat-adder input { flex: 1; min-width: 140px; background: var(--tt-panel); border: 1px solid var(--tt-border-2); border-radius: 7px; color: var(--tt-text); font: 500 12.5px 'Barlow', sans-serif; padding: 6px 9px; }
.tt-cat-swatches { display: flex; gap: 5px; }
.tt-cat-sw { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.tt-cat-sw.on { border-color: var(--tt-text); box-shadow: 0 0 0 2px var(--tt-panel); }

/* ══ LIGHT MODE ══ */
body.light-mode #detail-cons-tyres, body.light-mode #stock-cons-tyres,
body.light-mode .tt-drawer, body.light-mode .tt-scrim, body.light-mode .tt-ov {
  --tt-panel: #ffffff; --tt-panel-2: #f8f9fc; --tt-card-a: #ffffff; --tt-card-b: #f8f9fc;
  --tt-border: #e8ecf2; --tt-border-2: #dde2ec; --tt-border-3: #c8d0dc;
  --tt-text: #1a2030; --tt-dim: #6b7a8d; --tt-faint: #8fa0b3; --tt-faint-2: #b0b8c4;
  --tt-track: #d0d8e8; --tt-scrim: rgba(20,30,50,.30);
  --tt-page: #f0f3f8;
}
body.light-mode .tt-btn { background: #fff; }
body.light-mode .tt-btn:hover { background: #f0f3f8; }
/* Primary keeps the accent fill in light mode (the .tt-btn white bg above would
   otherwise win on specificity and hide the white label). */
body.light-mode .tt-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
body.light-mode .tt-btn.primary:hover { background: var(--accent); }
body.light-mode .tt-src.tread, body.light-mode .tt-pc-v, body.light-mode .tt-read-prev b,
body.light-mode .tt-complib-new:hover, body.light-mode .tt-linklike, body.light-mode .tt-seg-btn.active,
body.light-mode .tt-segf button.on, body.light-mode .tt-srcseg button.on { color: var(--accent); }
body.light-mode .tt-qa button.mount, body.light-mode .tt-dactions .mount, body.light-mode .tt-nextbdg { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   PHONE  (≤767px)
   The desktop board is a 272px rail beside a card grid. Collapsed to one
   column that becomes: every tally you own, then the toolbar, then — a screen
   and a half down — the first tyre set. So on a phone the rail is re-cut as a
   chip strip (where the compound / car-model tallies become FILTERS, which is
   what you wanted off them anyway), the toolbar keeps four controls and puts
   the rest in a sheet, and the cards become rows.

   The markup for the strip, the toolbar and the rows is rendered by
   tyres-tab.js behind a matchMedia check — it is different markup, not the
   same markup restyled, because a 240px card can't honestly be squeezed into
   58px with CSS alone. Everything below 900px-and-above is untouched.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Toolbar: search · Filters · Select · Add ── */
.tt-controls.tt-m {
  position: sticky; top: 0; z-index: 4;
  margin: 0 -14px; padding: 9px 14px 10px;
  background: var(--tt-page); border-bottom: 1px solid var(--tt-border);
  gap: 8px; flex-wrap: nowrap;
}
.tt-controls.tt-m .tt-search { min-width: 0; padding: 0 11px; }
.tt-controls.tt-m .tt-btn { flex: none; height: 38px; padding: 0 12px; }
.tt-controls.tt-m .tt-btn.icon { width: 38px; padding: 0; justify-content: center; }
.tt-fn {
  background: var(--accent); color: #000; border-radius: 9px; min-width: 17px; height: 17px;
  display: grid; place-items: center; font-size: 10px; font-weight: 800; padding: 0 4px;
  font-family: 'Barlow Condensed', sans-serif; font-variant-numeric: tabular-nums;
}
body.light-mode .tt-fn { color: #fff; }

/* ── Chip strip (replaces the rail) ── */
.tt-chips {
  display: flex; gap: 6px; overflow-x: auto;
  margin: 11px -14px 2px; padding: 0 14px 4px;
  scrollbar-width: none; -ms-overflow-style: none;
  touch-action: pan-x pinch-zoom; overscroll-behavior-x: contain;
}
.tt-chips::-webkit-scrollbar { display: none; }
.tt-chip {
  flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 11px;
  background: var(--tt-panel); border: 1px solid var(--tt-border); border-radius: 20px;
  color: var(--tt-text); cursor: pointer; white-space: nowrap;
  font-family: 'Barlow Condensed', sans-serif; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.tt-chip .tt-n { color: var(--tt-dim); font-weight: 600; font-variant-numeric: tabular-nums; }
.tt-chip .tt-sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.tt-chip .material-symbols-outlined { font-size: 15px; }
.tt-chip.on { border-color: var(--accent); color: var(--accent); background: rgba(var(--accent-rgb), .1); }
.tt-chip.on .tt-n { color: var(--accent); }
/* Read-only counters — dashed so they don't read as tappable filters. */
.tt-chip.tt-stat { background: none; border-style: dashed; border-color: var(--tt-border-2); color: var(--tt-dim); cursor: default; }
.tt-chip.tt-stat b { color: var(--tt-text); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.tt-chip.tt-stat.warn b { color: var(--tt-wo); }

/* ── Set rows (replace the cards) ── */
.tt-rows { display: flex; flex-direction: column; gap: 7px; }
.tt-row {
  display: flex; align-items: center; gap: 11px; position: relative;
  background: var(--tt-panel); border: 1px solid var(--tt-border);
  border-radius: 11px; padding: 10px 11px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tt-row:active { border-color: var(--tt-border-3); }
.tt-row .tt-rbar { width: 3px; align-self: stretch; border-radius: 2px; background: var(--tt-cat, var(--tt-border-3)); flex: none; }
.tt-rb { flex: 1; min-width: 0; }
.tt-rl1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tt-rnm { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-rl2 { font-size: 11.5px; color: var(--tt-dim); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-rl2 .tt-sep { color: var(--tt-faint-2); margin: 0 5px; }
.tt-rrt { flex: none; display: flex; align-items: center; gap: 9px; }
.tt-rpct { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.tt-rchev { color: var(--tt-faint-2); display: grid; place-items: center; }
.tt-rchev .material-symbols-outlined { font-size: 18px; }
.tt-row.mounted { border-color: rgba(245,158,11,.3); }
.tt-row.scrapped { opacity: .6; }
.tt-row.picked { border-color: rgba(var(--accent-rgb), .55); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .25); }
.tt-rwarn { color: var(--tt-wo); display: grid; place-items: center; flex: none; }
.tt-rwarn .material-symbols-outlined { font-size: 16px; }
.tt-rtick {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--tt-faint-2);
  flex: none; display: grid; place-items: center; color: transparent;
}
.tt-rtick .material-symbols-outlined { font-size: 15px; }
.tt-row.picked .tt-rtick { border-color: var(--accent); background: var(--accent); color: #000; }
body.light-mode .tt-row.picked .tt-rtick { color: #fff; }

@media (max-width: 767px) {
  /* The bulk bar has to clear the fixed bottom tab bar, and it must stay put
     while the list scrolls under it — that is the whole point of select mode. */
  .tt-selbar {
    position: fixed; left: 10px; right: 10px;
    bottom: calc(68px + env(safe-area-inset-bottom, 0px));
    z-index: 120; background: var(--tt-panel);
    box-shadow: 0 12px 30px rgba(0,0,0,.5);
  }
  body.light-mode .tt-selbar { box-shadow: 0 12px 30px rgba(20,30,50,.22); }
  .tt-selbar .tt-btn { padding: 8px 11px; font-size: 12px; }

  /* ── Drawer → bottom sheet ──
     A 408px panel sliding in from the right is a desktop gesture wearing a
     phone's dimensions: it left a dead 6% strip of board on the left, and the
     actions sat wherever the body happened to end. */
  .tt-drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; max-width: none; height: 92dvh; max-height: 92dvh;
    border-left: 0; border-top: 1px solid var(--tt-border-2);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -16px 40px rgba(0,0,0,.4);
  }
  .tt-drawer::before {
    content: ""; flex: none; width: 38px; height: 4px; border-radius: 3px;
    background: var(--tt-border-3); margin: 9px auto 2px;
  }
  .tt-dh { padding-top: 8px; }
  .tt-dbody { padding-bottom: 0; }
  /* Sticky, not fixed: later content (the danger note, the accordions) scrolls
     UNDER it, so the primary action is always on screen without reserving a
     band of dead space when the body is short. */
  .tt-dbody > .tt-dactions {
    position: sticky; bottom: 0; z-index: 3;
    margin: 4px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--tt-panel-2); border-top: 1px solid var(--tt-border);
  }
  .tt-dbody > .tt-dactions button { min-width: 0; }
  /* Reading fields go 2×2 rather than four-across-then-wrap. */
  .tt-rrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .tt-rrow .tt-field, .tt-rrow .tt-field.corner-f, .tt-rrow .tt-field.tt-shoulder { flex: none; min-width: 0; }
  .tt-add-read { grid-column: 1 / -1; align-self: stretch; }
  .tt-pt-row { flex-direction: column; align-items: stretch; }
  .tt-pt-row .tt-field { width: auto; }
  .tt-pt-out { grid-template-columns: repeat(4, 1fr); }
  .tt-cgrid { gap: 7px; }
  .tt-metastrip { grid-template-columns: 1fr; }

  /* ── Dialogs → bottom sheets ── */
  .tt-ov { padding: 0; align-items: flex-end; overflow: hidden; }
  .tt-ov .tt-dlg { max-width: none; width: 100%; border-radius: 16px 16px 0 0; max-height: 92dvh; }
  .tt-ov .tt-dlg::before {
    content: ""; flex: none; width: 38px; height: 4px; border-radius: 3px;
    background: var(--tt-border-3); margin: 9px auto -2px;
  }
  .tt-dlg-b { max-height: none; flex: 1; min-height: 0; }
  .tt-dlg-f { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .tt-frow2 { grid-template-columns: 1fr; }
  .tt-scan-slots { grid-template-columns: 1fr; }

  /* Compound library: the 190px rail leaves ~170px for the editor on a 390px
     screen, so the rail lies down as a strip above it. */
  .tt-complib { flex-direction: column; min-height: 0; }
  .tt-complib-rail {
    width: auto; flex: none; flex-direction: row; gap: 6px;
    overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 1px solid var(--tt-border);
    touch-action: pan-x pinch-zoom; overscroll-behavior-x: contain;
  }
  .tt-complib-bm { flex: none; }
  .tt-complib-bm.on { box-shadow: inset 0 3px 0 var(--accent); }
  .tt-complib-bm .tt-cbar-b { height: 26px; align-self: center; }
  .tt-complib-new { margin-top: 0; white-space: nowrap; flex: none; }
  .tt-complib-edit { max-height: none; padding: 13px 14px 15px; }
}