:root {
  --bg: #eef1f3;
  --surface: #ffffff;
  --ink: #1d232b;
  --muted: #5b6672;
  --line: #d7dce0;
  --go: #4a3f8f;
  --go-ink: #ffffff;
  --gold: #e3a324;
  --ok: #1f7a4d;
  --danger: #a33a2b;
  --focus: #1f6fd1;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15191e;
    --surface: #1e242b;
    --ink: #e8ecef;
    --muted: #9aa5b0;
    --line: #343c45;
    --go: #a99cf0;
    --go-ink: #17142e;
    --ok: #5fcf95;
    --danger: #f07b69;
    --focus: #79b0ff;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
}

h1, h2, p { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 14px 28px;
  background: var(--surface);
  border-bottom: 3px solid var(--gold);
}
.brand { display: flex; align-items: center; gap: 16px; }
.brand img { height: 64px; width: auto; }
.brand h1 { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
.sub { color: var(--muted); font-size: 14px; max-width: 60ch; }

.save-area { display: flex; align-items: center; gap: 12px; }
.save-state { font-size: 14px; color: var(--muted); max-width: 40ch; text-align: right; }
.save-state.ok { color: var(--ok); font-weight: 600; }
.save-state.error { color: var(--danger); font-weight: 600; }

/* Buttons */
.btn {
  font: inherit; font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.btn.primary { background: var(--go); border-color: var(--go); color: var(--go-ink); padding: 10px 18px; }
.btn.ghost { background: transparent; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn:disabled { opacity: 0.5; cursor: default; }
.file-btn { display: inline-block; }

.banner { margin: 20px 28px; padding: 12px 16px; border-radius: 8px; background: var(--surface); }
.banner.error { color: var(--danger); border: 1px solid var(--danger); }

/* Layout */
main { max-width: 1080px; margin: 0 auto; padding: 24px 28px 80px; display: grid; gap: 28px; }
.block { display: grid; gap: 12px; }
.block-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.block-head h2 { font-size: 18px; font-weight: 650; }
.help { color: var(--muted); font-size: 14px; max-width: 80ch; }
.hint { color: var(--muted); font-size: 13px; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }

input[type="text"], textarea {
  font: inherit; color: var(--ink);
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface);
}
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--go); }

/* Interval list */
.table-head, .main-row {
  display: grid;
  grid-template-columns: 28px minmax(180px, 1.4fr) 110px 90px minmax(140px, 1.2fr) 84px;
  gap: 10px; align-items: center;
}
.table-head { padding: 0 14px; font-size: 13px; font-weight: 600; color: var(--muted); }

.intervals, .jobs { list-style: none; margin: 0; padding: 0; }
.intervals { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.interval { padding: 10px 14px; border-top: 1px solid var(--line); }
.interval:first-child { border-top: 0; }
.interval.off .f-name, .interval.off .f-miles, .interval.off .f-months, .interval.off .job-summary { opacity: 0.45; }
.interval.invalid { box-shadow: inset 4px 0 0 var(--danger); }
.f-miles, .f-months { text-align: right; font-variant-numeric: tabular-nums; }

.job-summary { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-summary.none { color: var(--muted); }

.more {
  display: grid; gap: 12px;
  margin: 12px 0 4px 38px;
  padding: 14px;
  background: var(--bg);
  border-radius: 8px;
}
.more label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); }
.more .f-remove { justify-self: start; }

.job-picks { border: 0; padding: 0; margin: 0; }
.job-picks legend { font-size: 13px; font-weight: 600; color: var(--muted); padding: 0; margin-bottom: 6px; }
.picks { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pick { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); font-weight: 400; }
.pick-price { color: var(--muted); font-variant-numeric: tabular-nums; }

/* Due soon */
.due-soon { display: flex; gap: 18px; flex-wrap: wrap; }
.due-soon label { display: inline-flex; align-items: center; gap: 8px; }
.due-soon input { width: 90px; text-align: right; }

/* Canned jobs */
.jobs { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.job { display: grid; grid-template-columns: 1fr 130px auto; gap: 10px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--line); }
.job:first-child, .jobs .empty:first-child { border-top: 0; }
.jobs .empty { padding: 14px; color: var(--muted); }
.dollar { display: flex; align-items: center; gap: 4px; color: var(--muted); }
.j-price { text-align: right; font-variant-numeric: tabular-nums; }

.paste summary { cursor: pointer; font-weight: 600; }
.paste[open] { display: grid; gap: 8px; }
.paste[open] summary { margin-bottom: 4px; }
.paste .btn { justify-self: start; }

@media (max-width: 760px) {
  .table-head { display: none; }
  .main-row { grid-template-columns: 28px 1fr 1fr; }
  .f-name { grid-column: 2 / -1; }
  .job-summary { grid-column: 2 / 3; }
  .more { margin-left: 0; }
}

/* Field text stays regular weight inside bold labels */
.more label input, .more .hint { font-weight: 400; }
.more .pick { display: inline-flex; grid-template-columns: none; align-items: center; gap: 6px; font-size: 14px; font-weight: 400; color: var(--ink); }

.picks { max-height: 260px; overflow-y: auto; padding: 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); flex-direction: column; flex-wrap: nowrap; }
.jobs { max-height: 520px; overflow-y: auto; }
.pick-filter { margin-bottom: 6px; font-weight: 400; }

.audit-set { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
.audit-set > label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.audit-set > label.inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.audit-set input[type="text"] { font-weight: 400; }
#markupPercent { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.req { border: 0; padding: 0; margin: 0; }
.req legend { font-weight: 600; font-size: 14px; margin-bottom: 6px; padding: 0; }
.req-picks { flex-direction: row; flex-wrap: wrap; max-height: none; border: 0; padding: 0; background: none; gap: 6px 20px; }

.matrix-area { display: grid; gap: 12px; }
.matrices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.matrix { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--bg); }
.matrix-head { display: grid; grid-template-columns: minmax(140px, 1fr) 120px minmax(180px, 1.2fr) auto; gap: 8px; align-items: center; }
.matrix select, .audit-set select {
  font: inherit; color: var(--ink); padding: 7px 8px;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface);
}
.mx-body { margin-top: 10px; display: grid; gap: 8px; }
.tiers { border-collapse: collapse; width: 100%; max-width: 560px; font-variant-numeric: tabular-nums; }
.tiers th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; padding: 4px 6px; }
.tiers td { padding: 3px 6px; font-size: 14px; white-space: nowrap; }
.tiers input { width: 100px; text-align: right; margin: 0 4px; }
.t-gp { color: var(--muted); }
.tryprice { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.tryprice input, #oemOverCost { width: 100px; text-align: right; }
.try-out { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px; }
.try-out li { display: flex; gap: 8px; align-items: baseline; font-variant-numeric: tabular-nums; }
.try-out strong { margin-left: auto; }
.audit-set .dollar { display: inline-flex; align-items: center; gap: 4px; }

.notes-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; max-height: 420px; overflow-y: auto; }
.note-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.note-row:first-child, .notes-list .empty:first-child { border-top: 0; }
.notes-list .empty { padding: 14px; color: var(--muted); }

.goals { display: grid; gap: 8px; }
.goals input { width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
#laborOver { width: 70px; text-align: right; }
.mx-for-label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--muted); max-width: 640px; }
.mx-for-label input { font-weight: 400; }

.stack { display: grid; gap: 4px; font-size: 14px; font-weight: 600; max-width: 820px; }
.stack textarea { font: inherit; font-weight: 400; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); resize: vertical; }
.tags-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.stack input { font: inherit; font-weight: 400; color: var(--ink); padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }

/* Shop details and logo */
.shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: 20px; align-items: start; }
.shop-fields { display: grid; gap: 10px; max-width: 520px; }
.shop-fields label, .logo-box { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.logo-label { font-size: 13px; color: var(--muted); }
.logo-preview { display: grid; place-items: center; height: 120px; padding: 10px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface); }
.logo-preview img { max-width: 100%; max-height: 100px; object-fit: contain; }
@media (max-width: 700px) { .shop-grid { grid-template-columns: 1fr; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Labor rates */
.rates { border-collapse: collapse; width: 100%; max-width: 860px; font-variant-numeric: tabular-nums; }
.rates th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; padding: 4px 6px; }
.rates td { padding: 3px 6px; }
.rates input[type="text"] { width: 100%; }
.rates .r-rate { width: 100%; min-width: 80px; text-align: right; }
.rates td:nth-child(4) { text-align: center; }
.lm .lm-mark { color: var(--muted); font-size: 13px; }
.rates th:nth-child(1) { width: 26%; }
.rates th:nth-child(2) { width: 110px; }
.rates th:nth-child(3) { width: 20%; }
.rates th:nth-child(4) { width: 26%; }
.rates th:nth-child(5) { width: 80px; text-align: center; }
.rates td:nth-child(5) { text-align: center; }
.rates td:nth-child(4) { text-align: left; }

.rate-more td { padding: 4px 6px 14px; }
.rate-more .rate-filter { width: min(100%, 360px); margin: 6px 0; }
.rate-picks { max-height: 220px; }
.r-jobs { margin-top: 4px; }

.zl { display: grid; gap: 6px; justify-items: start; }
.zl-panel { display: grid; gap: 6px; width: min(100%, 720px); }
.zl-panel > input { width: min(100%, 360px); }
.zl .pick, .rate-more .pick { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; text-align: left; width: 100%; font-size: 14px; font-weight: 400; color: var(--ink); }
.zl .pick input, .rate-more .pick input { flex: none; margin: 0; }

/* AI: model per tool and usage */
.usage-wrap { overflow-x: auto; }
.usage { border-collapse: collapse; width: 100%; max-width: 860px; font-variant-numeric: tabular-nums; font-size: 14px; }
.usage th { text-align: left; font-size: 13px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.usage td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.usage .num, .usage th:nth-child(n+3) { text-align: right; }
.usage select { font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.usage-totals { font-size: 14px; font-weight: 600; }

/* Team */
.team-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 6px 0 12px; }
.team-add label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.team-add input { min-width: 260px; }
.team-add select, .team select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.team td:first-child { word-break: break-all; }
.team-note { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 8px; }
.team-add input { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.team-add select { font-size: 15px; padding: 8px 10px; border-radius: 8px; }
.usage.team th, .usage.team td { text-align: left; }

/* Warranty */
.warranty th:nth-child(1) { width: 22%; }
.warranty th:nth-child(2) { width: 200px; }
.warranty th:nth-child(3) { width: 130px; }
.w-timebox { display: flex; gap: 6px; }
.w-timebox .w-time { width: 64px; text-align: right; }
.w-timebox select { font: inherit; padding: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.warranty .w-miles { width: 100%; text-align: right; }
.warranty tr.w-other td { border-top: 1px dashed var(--line); padding-top: 8px; }

/* ---------- Drawers ---------- */
.drawer-controls { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: -8px; }
.drawer-group { font-size: 13px !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 18px 4px -6px; }
#app > section.block.drawer { gap: 0; padding: 0; overflow: hidden; }
section.drawer > .block-head { display: block; margin: 0; }
section.drawer > .block-head h2 { margin: 0; font-size: inherit; }
.drawer-toggle { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 16px 20px; border: 0; background: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer; border-radius: inherit; }
.drawer-toggle:hover { background: color-mix(in srgb, var(--go, #4B3FA0) 6%, transparent); }
.drawer-toggle:focus-visible { outline: 3px solid var(--go, #4B3FA0); outline-offset: -3px; }
.drawer-name { font-size: 17px; font-weight: 700; }
.drawer-sum { justify-self: end; font-size: 14px; color: var(--muted); text-align: right; }
.drawer-chev { width: 10px; height: 10px; border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s; }
section.drawer.open .drawer-chev { transform: rotate(225deg) translate(-2px, -2px); }
.drawer-dot { width: 8px; height: 8px; border-radius: 50%; background: #e3a324; visibility: hidden; }
section.drawer.changed .drawer-dot { visibility: visible; }
.drawer-body { display: grid; gap: 12px; padding: 4px 20px 20px; border-top: 1px solid var(--line); }
.drawer-body > :first-child { margin-top: 12px; }
.drawer-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) { .drawer-chev { transition: none; } }

#app.with-drawers { gap: 8px; }
#app.with-drawers > section.block.drawer { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 2px rgba(30, 20, 90, .05); }
#app.with-drawers > section.drawer.open { box-shadow: 0 6px 18px rgba(30, 20, 90, .10); border-color: color-mix(in srgb, var(--go, #4B3FA0) 35%, var(--line)); }
#app.with-drawers > .drawer-group { margin: 22px 4px 2px; }
#app.with-drawers > .drawer-controls { margin-bottom: 0; }
.drawer-toggle { padding: 15px 20px; }

/* Fluid units */
.units { display: grid; gap: 10px; }
.unit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.unit-grid label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .unit-grid { grid-template-columns: 1fr; } }

.ri-picks { display: flex; gap: 18px; flex-wrap: wrap; }

/* Oil change sticker */
.os-grid { display: grid; grid-template-columns: 1fr auto; gap: 22px; margin-top: 12px; }
@media (max-width: 760px) { .os-grid { grid-template-columns: 1fr; } }
.os-fields { display: grid; gap: 12px; align-content: start; }
.os-row { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.os-label { font-weight: 600; font-size: 13px; margin-right: 4px; align-self: center; }
.os-link { display: flex; gap: 8px; }
.os-link input { flex: 1; min-width: 0; }
.os-msg { min-height: 1em; margin: -6px 0 0; }
.os-msg.bad { color: #b42318; }
.os-preview { display: grid; justify-items: center; gap: 6px; align-content: start; }
.os-paper { background: #eceef3; padding: 14px; border-radius: 10px; }
.os-scale { zoom: 1.4; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.os-preview .help { max-width: 230px; text-align: center; font-size: 12px; }
.os-rules { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line, #dfe3ea); border-radius: 10px; }
.os-rules-head { display: grid; gap: 1px; font-size: 13px; }
.os-rules-head .help { margin: 0; font-size: 12px; }
.os-rule-list { display: grid; gap: 6px; }
.os-rule { display: grid; grid-template-columns: minmax(0, 1fr) 92px 74px auto; gap: 6px; align-items: center; }
.os-rule input { width: 100%; box-sizing: border-box; }
.os-rule .x { border: 0; background: none; font-size: 18px; line-height: 1; padding: 4px 8px; border-radius: 6px; cursor: pointer; color: var(--muted, #6b7280); }
.os-rule .x:hover { background: rgba(0,0,0,.06); }
.os-rule-cols { display: grid; grid-template-columns: minmax(0, 1fr) 92px 74px 30px; gap: 6px; font-size: 11.5px; color: var(--muted, #6b7280); }
.btn.small { padding: 5px 10px; font-size: 13px; justify-self: start; }
.os-rule input.bad { border-color: #b42318; }
.os-rule input { font: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--line, #cfd4dc); border-radius: 8px; background: var(--surface, #fff); color: inherit; }
.os-rule input.bad { border-color: #b42318; }

/* Priority order: name, tag, and Must-do per priority */
.pr-grid { display: grid; gap: 10px; margin-top: 10px; }
.pr-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(0, 1.4fr) auto auto; gap: 12px; align-items: end; }
@media (max-width: 760px) { .pr-row { grid-template-columns: 30px minmax(0, 1fr); } .pr-row .pr-must, .pr-row label:nth-of-type(2) { grid-column: 2; } }
.pr-num { width: 28px; height: 28px; border-radius: 7px; background: var(--brand, #4b3fa0); color: #fff; font-weight: 800; display: grid; place-items: center; margin-bottom: 6px; }
.pr-must { padding-bottom: 8px; white-space: nowrap; }
.pr-row + .pr-row .pr-cap { display: none; }
.pr-row + .pr-row .pr-must { padding-bottom: 8px; }

/* Priority order: old tags */
.ot { margin-top: 14px; }
.ot-row, .ot-cols { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 30px; }
.ot-row select { font: inherit; font-size: 14px; padding: 9px 10px; border: 1px solid var(--line, #cfd4dc); border-radius: 8px; background: var(--surface, #fff); color: inherit; }

/* Setup checklist */
.setup-box { border: 1px solid var(--line, #dfe3ea); border-radius: 14px; padding: 16px 18px; margin: 0 0 18px; background: var(--surface, #fff); box-shadow: 0 1px 3px rgba(40, 30, 90, .06); }
.setup-box.complete { padding: 12px 18px; }
.setup-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.setup-head h2 { margin: 0; font-size: 18px; }
.setup-count { color: var(--muted, #6b7280); font-size: 14px; }
.setup-head .linkish { margin-left: auto; font-size: 13px; }
.setup-bar { height: 6px; border-radius: 99px; background: var(--line, #e6e8ee); margin: 10px 0 12px; overflow: hidden; }
.setup-bar span { display: block; height: 100%; background: var(--brand, #4b3fa0); border-radius: 99px; transition: width .3s; }
.setup-box.complete .setup-bar { margin-bottom: 0; }
.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.setup-step { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line, #e6e8ee); }
.setup-step.done { background: color-mix(in srgb, #2e7d4f 7%, transparent); border-color: color-mix(in srgb, #2e7d4f 25%, transparent); }
.setup-step.skipped { opacity: .7; }
.setup-mark { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--brand, #4b3fa0); color: #fff; }
.setup-step.done .setup-mark { background: #2e7d4f; }
.setup-step.skipped .setup-mark { background: #8a90a0; }
.setup-words { display: grid; gap: 1px; min-width: 0; }
.setup-words b { font-size: 14.5px; }
.setup-words span { font-size: 13px; color: var(--muted, #6b7280); }
.setup-skip { font-size: 12.5px; white-space: nowrap; }
.setup-extras { margin: 12px 0 0; font-size: 13px; color: var(--muted, #6b7280); }
.linkish { border: 0; background: none; padding: 0; font: inherit; color: var(--brand, #4b3fa0); text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) { .setup-step { grid-template-columns: 30px minmax(0, 1fr) auto; } .setup-skip { grid-column: 2; justify-self: start; } }

.job-fits { display: grid; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.fits-group { display: grid; gap: 4px; }
.fits-h { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.fits-group > .hint { margin: 0 0 4px; }
.fit-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 10px; align-items: center; padding: 5px 0; border-top: 1px solid var(--line); }
.fit-name { font-size: 14px; font-weight: 400; color: var(--ink); overflow-wrap: anywhere; }
.fit-row input { font-size: 13px; padding: 6px 8px; }


.help.bad { color: var(--bad, #a32d2d); }
h3.sub { margin: 14px 0 6px; font-size: 15px; }
#historyTable th, #historyTable td { text-align: left; }
.usage td.does { font-size: 12.5px; color: var(--muted); max-width: 420px; }
.cs-labels { gap: 12px; margin-top: 8px; } .cs-labels .stack { flex: 1; min-width: 140px; }