:root {
  --paper: #f4f1e8; --paper-2: #ebe6d8; --sheet: #fbf9f3; --ink: #1c2430; --ink-2: #5a6472; --ink-3: #8b93a0;
  --rule: #d8d1c0; --grid: rgba(28, 36, 48, .045); --red: #b3261e; --sel: #1f4ea3; --sel-soft: #dce6f7;
  --amber: #c25a00; --amber-soft: #fde6c8; --green: #2c7a4b; --green-soft: #dcefe2;
  --cond: 'Bahnschrift', 'DIN Alternate', 'Segoe UI', system-ui, sans-serif;
  --sans: 'Segoe UI', system-ui, sans-serif;
  --mono: 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 13px/1.4 var(--sans); color: var(--ink); background: var(--paper); display: flex; flex-direction: column; min-width: 1200px; }
button { font: inherit; color: inherit; cursor: pointer; }
.muted { color: var(--ink-3); }

/* top bar */
.topbar { height: 52px; flex: none; display: flex; align-items: center; gap: 18px; padding: 0 16px; background: var(--ink); color: #eef0f3; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 214px; }
.brand .mark { width: 30px; height: 30px; border: 1.5px solid #eef0f3; display: grid; place-items: center; font: 700 12px var(--cond); letter-spacing: .06em; }
.brand b { font: 600 14px var(--cond); letter-spacing: .14em; display: block; }
.brand small { font: 11px var(--cond); letter-spacing: .1em; color: #9aa3b0; text-transform: uppercase; }
.vchip { display: flex; align-items: stretch; border: 1px solid #3a4452; font: 12px var(--mono); }
.vchip span { padding: 5px 10px; border-left: 1px solid #3a4452; color: #c9ced6; }
.vchip span:first-child { border-left: 0; color: #fff; font-weight: 600; }
.search { flex: 1; display: flex; }
.search input { width: 100%; max-width: 420px; background: #283241; border: 1px solid #3a4452; color: #fff; padding: 7px 10px; font: 13px var(--sans); outline: none; }
.search input:focus { border-color: #7d93b8; }
.seg { display: flex; border: 1px solid #3a4452; }
.seg button { background: none; border: 0; border-left: 1px solid #3a4452; padding: 6px 11px; font: 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: #b7bec8; }
.seg button:first-child { border-left: 0; }
.seg button.on { background: #eef0f3; color: var(--ink); }
.seg-label { font: 11px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: #9aa3b0; }
.user { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #56606e; display: grid; place-items: center; font: 600 11px var(--cond); color: #c9ced6; }

/* layout */
.layout { flex: 1; display: grid; grid-template-columns: 232px minmax(0, 1fr) 452px; min-height: 0; }
.centre[hidden], .side[hidden], .garage[hidden] { display: none !important; }
.tree { border-right: 1px solid var(--rule); padding: 14px 0; overflow: auto; background: var(--paper); }
.tree h4 { margin: 14px 16px 6px; font: 600 11px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.tree h4:first-child { margin-top: 0; }
.tree a { display: block; padding: 4px 16px 4px 22px; color: var(--ink); text-decoration: none; border-left: 3px solid transparent; }
.tree a[href]:hover { background: var(--paper-2); }
.tree a.on { border-left-color: var(--red); background: var(--sheet); font-weight: 600; }
.tree a.dim { color: var(--ink-3); cursor: default; }
.tree a.top { margin: 0 0 6px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); font: 600 12px var(--cond); letter-spacing: .14em; text-transform: uppercase; }
.tree .jobs a::before { content: '▸ '; color: var(--ink-3); }

/* sheet */
.centre { display: flex; flex-direction: column; min-width: 0; padding: 14px 16px 12px; gap: 10px; }
.crumbs { font: 12px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); min-height: 17px; }
.crumbs b { color: var(--ink); }
.title-row { display: flex; align-items: baseline; gap: 12px; min-height: 25px; }
.title-row h1 { margin: 0; font: 600 19px var(--cond); letter-spacing: .02em; white-space: nowrap; }
.title-row .tag { font: 11px var(--mono); padding: 2px 6px; border: 1px solid var(--rule); color: var(--ink-2); background: var(--sheet); }
.title-row .tag:empty { display: none; }
.sheet { position: relative; flex: 1; min-height: 0; background: var(--sheet); border: 1px solid var(--rule);
         background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
         background-size: 24px 24px; }
.sheet::before { content: ''; position: absolute; inset: 8px; border: 1px solid var(--ink); pointer-events: none; opacity: .7; }
#fig { position: absolute; inset: 18px; }
.titleblock { position: absolute; right: 8px; bottom: 8px; display: grid; grid-template-columns: auto auto; border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); background: var(--sheet); font: 11px var(--cond); letter-spacing: .06em; }
.titleblock div { padding: 3px 8px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.titleblock div:nth-child(odd) { color: var(--ink-2); text-transform: uppercase; }
.titleblock div:nth-child(even) { font-family: var(--mono); font-size: 11px; }
.legend { position: absolute; left: 20px; top: 18px; display: flex; gap: 12px; font: 11px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.legend i { display: inline-block; width: 16px; height: 9px; margin-right: 5px; vertical-align: -1px; border: 1px solid var(--ink); }
.legend .hatch { background: repeating-linear-gradient(45deg, #fbf9f3 0 3px, #c9c0ab 3px 4px); }
.legend .cur { background: var(--amber-soft); border-color: var(--amber); }
.legend .new { background: var(--green-soft); border-color: var(--green); }
.load-msg { position: absolute; inset: 40px; display: grid; place-content: center; text-align: center; color: var(--ink-2); }
.load-msg code { font: 12px var(--mono); }
.load-msg ul { text-align: left; color: var(--red); max-width: 640px; }

.toolbar { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border: 1px solid var(--rule); background: var(--sheet); }
.toolbar label { font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.toolbar input[type=range] { width: 260px; accent-color: var(--ink); }
.toolbar .val { font: 12px var(--mono); width: 38px; }
.btn { background: var(--sheet); border: 1px solid var(--ink); padding: 5px 10px; font: 12px var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.btn:hover { background: var(--ink); color: var(--sheet); }
.btn.ghost { border-color: var(--rule); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--sheet); color: inherit; }
.toolbar .sp { flex: 1; }
.check { display: flex; align-items: center; gap: 6px; font: 12px var(--sans); color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.check input { accent-color: var(--ink); }

/* right panel */
.side { border-left: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 0; background: var(--paper); }
.tabs { display: flex; border-bottom: 1px solid var(--rule); flex: none; }
.tabs button { flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; padding: 11px 8px 9px; font: 600 12px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.tabs button.on { color: var(--ink); border-bottom-color: var(--red); background: var(--sheet); }
.tabs small { font: 11px var(--mono); color: var(--ink-3); margin-left: 4px; }
.pane { flex: 1; min-height: 0; overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th { position: sticky; top: 0; background: var(--paper-2); text-align: left; font: 600 10.5px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding: 6px 8px; border-bottom: 1px solid var(--rule); }
td { padding: 6px 8px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tr.row { cursor: pointer; }
tr.row:hover td, tr.row.hover td { background: var(--sel-soft); }
tr.row.sel td { background: var(--ink); color: var(--sheet); }
tr.row.sel .num, tr.row.sel .pn { color: var(--sheet); }
tr.row.sel .pn.missing { color: #aab2bd; }
.num { font: 600 12px var(--mono); color: var(--red); width: 30px; }
.pn { font: 12px var(--mono); white-space: nowrap; }
.pn.missing { color: var(--ink-3); font-style: italic; font-family: var(--sans); }
.pn .sup { color: var(--ink-3); margin-left: 4px; }
.qty { font: 12px var(--mono); text-align: center; width: 34px; }
.st { width: 18px; text-align: center; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot.epc { background: var(--green); }
.dot.xref { background: #d9a400; }
.dot.todo { border: 1px solid var(--ink-3); }
tr.group td { background: var(--paper); font: 600 10.5px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: 8px 8px 4px; cursor: default; }
td.empty { color: var(--ink-3); padding: 14px; }

.detail { flex: none; border-top: 2px solid var(--ink); background: var(--sheet); padding: 12px 14px 14px; max-height: 50%; overflow: auto; }
.detail.empty { color: var(--ink-3); font-style: italic; }
.detail .head { display: flex; align-items: baseline; gap: 8px; }
.detail .ref { font: 600 12px var(--mono); color: #fff; background: var(--red); padding: 1px 6px; }
.detail h3 { margin: 0; font: 600 15px var(--cond); }
.detail .big { font: 600 22px var(--mono); letter-spacing: .02em; margin: 8px 0 4px; display: flex; align-items: center; gap: 10px; }
.detail .big.missing { font: italic 14px var(--sans); color: var(--ink-3); }
.copy { font: 11px var(--cond); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--rule); background: none; padding: 2px 6px; }
dl { display: grid; grid-template-columns: 118px 1fr; margin: 8px 0; row-gap: 3px; column-gap: 10px; }
dt { font: 11px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); padding-top: 1px; }
dd { margin: 0; font-size: 12.5px; }
dd code { font: 12px var(--mono); }
.src { font-size: 11.5px; color: var(--ink-2); padding: 6px 8px; border-left: 3px solid #d9a400; background: #fbf3d9; margin: 8px 0; }
.src.todo { border-left-color: var(--ink-3); background: var(--paper); }
.src.epc { border-left-color: var(--green); background: var(--green-soft); }
.buy h5 { margin: 10px 0 6px; font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.buy .links { display: flex; flex-wrap: wrap; gap: 6px; }
.buy a { font: 12px var(--sans); color: var(--ink); text-decoration: none; border: 1px solid var(--ink); padding: 5px 9px; background: #fff; }
.buy a:hover { background: var(--ink); color: #fff; }
.buy .note { font-size: 11.5px; color: var(--amber); margin-top: 6px; }
.appears { margin-top: 10px; }
.appears h5 { margin: 0 0 4px; font: 600 11px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.appears ul { list-style: none; margin: 0; padding: 0; }
.appears a { display: block; padding: 2px 0; color: var(--sel); text-decoration: none; font-size: 12.5px; }
.appears a:hover { text-decoration: underline; }
.hist { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--rule); font-size: 12px; color: var(--ink-2); }
.hist-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.log-form { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin-top: 8px; }
.log-form label.field { display: flex; flex-direction: column; gap: 3px; font: 600 11px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.log-form input { font: 13px var(--sans); text-transform: none; letter-spacing: 0; color: var(--ink); background: #fff; border: 1px solid var(--ink); padding: 4px 6px; min-width: 0; }
.log-form input[type="date"], .log-form input[type="number"] { font-family: var(--mono); width: 9.5em; }
.log-form input[type="text"] { width: 14em; }
.log-form input:focus { outline: 1px solid var(--sel); border-color: var(--sel); }
.log-form .form-actions, .log-form .also { flex-basis: 100%; }
.form-actions { display: flex; gap: 8px; }
.log-form .also { border: 0; margin: 4px 0 0; padding: 0; }
.log-form .also legend { font: 600 11px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding: 0; }
.log-form .also .check { margin: 4px 0; color: var(--ink); }
.log-err { color: var(--red); font-size: 12px; margin: 6px 0 0; }
.log-list { list-style: none; margin: 8px 0 0; padding: 0; }
.log-list li { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; border-top: 1px solid var(--rule); font-size: 12px; }
.log-list .when, .log-list .km { font-family: var(--mono); white-space: nowrap; }
.log-list .note { color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.tiny { margin-left: auto; border: 0; background: none; padding: 0 0 0 8px; font: 600 10px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tiny:hover { color: var(--red); }

/* job pane */
.job-head { padding: 12px 14px; border-bottom: 1px solid var(--rule); background: var(--sheet); }
.job-head h3 { margin: 0 0 4px; font: 600 15px var(--cond); }
.job-head .meta { font: 11px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); display: flex; gap: 14px; flex-wrap: wrap; }
.job-head .meta .when { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 12px; }
ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
ol.steps li { counter-increment: s; display: grid; grid-template-columns: 34px 1fr; gap: 4px; padding: 9px 14px 9px 10px; border-bottom: 1px solid var(--rule); cursor: pointer; }
ol.steps li::before { content: counter(s, decimal-leading-zero); font: 600 12px var(--mono); color: var(--ink-3); padding-top: 1px; }
ol.steps li:hover { background: var(--paper-2); }
ol.steps li.on { background: var(--sheet); box-shadow: inset 3px 0 0 var(--amber); }
ol.steps li.on::before { color: var(--amber); }
ol.steps li.done { color: var(--ink-3); }
ol.steps b { font: 600 13px var(--cond); letter-spacing: .02em; display: block; }
ol.steps p { margin: 3px 0 0; font-size: 12.5px; display: none; }
ol.steps li.on p { display: block; }
ol.steps .off { margin-top: 5px; display: none; flex-wrap: wrap; gap: 4px; }
ol.steps li.on .off { display: flex; }
ol.steps .off span { font: 11px var(--mono); border: 1px solid var(--amber); color: var(--amber); padding: 1px 5px; cursor: pointer; background: #fff; }
ol.steps .off span.fresh { border-color: var(--green); color: var(--green); }
ol.steps .tip { margin-top: 6px; font-size: 12px; padding: 5px 8px; background: var(--amber-soft); display: none; }
ol.steps li.on .tip { display: block; }
.torque { font: 11.5px var(--mono); color: var(--ink); margin-top: 6px; display: none; }
.torque span { font: 11px var(--cond); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
ol.steps li.on .torque { display: block; }
.needs { margin-top: 8px; font-size: 12px; }
.needs summary { font: 600 11px var(--cond); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; }
.needs h6 { margin: 8px 0 4px; font: 600 10.5px var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.needs ul { margin: 0; padding-left: 16px; }
.needs .chips { display: flex; flex-wrap: wrap; gap: 4px; }
.needs .chips span { font: 11px var(--mono); border: 1px solid var(--ink); padding: 1px 5px; cursor: pointer; background: #fff; }
.job-src { margin: 6px 0 0; font-size: 11px; color: var(--ink-3); }
.job-done { padding: 12px 14px 16px; background: var(--sheet); border-top: 1px solid var(--rule); }
.job-done .log-err { margin: 8px 0 0; }

/* garage: truck, odometer, service log */
.garage { grid-column: 2 / 4; grid-row: 1; min-width: 0; min-height: 0; overflow: auto; padding: 18px 22px 32px; background: var(--paper); }
.garage h2 { margin: 0 0 12px; font: 600 20px var(--cond); letter-spacing: .04em; }
.garage h3 { margin: 0 0 10px; font: 600 12px var(--cond); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.garage h3.name { font-size: 18px; letter-spacing: .02em; text-transform: none; color: var(--ink); margin-bottom: 8px; }
.garage-top { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .75fr); gap: 14px; align-items: stretch; }
.garage .card { background: var(--sheet); border: 1px solid var(--rule); padding: 12px 14px 14px; }
.garage .history, .garage .verified { margin-top: 14px; }
.garage dl { display: grid; grid-template-columns: 148px 1fr; margin: 0; row-gap: 4px; column-gap: 12px; }
.garage dt { font: 11px var(--cond); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.garage dd { margin: 0; font-size: 13px; }
.garage .mono { font-family: var(--mono); }
.local-note { margin: 0 0 12px; font-size: 12px; color: var(--ink-2); }
.odo-num { font: 600 34px/1.15 var(--mono); letter-spacing: .01em; margin: 4px 0 10px; }
.odo-num.empty { color: var(--ink-3); }
.log-scroll { overflow-x: auto; }
.log-table { min-width: 640px; }
.log-table th { position: static; }
.log-table .when, .log-table .km, .log-table .hrs { font-family: var(--mono); white-space: nowrap; }
.log-table .note { max-width: 280px; overflow-wrap: anywhere; }
.log-table .act { width: 1%; text-align: right; }
.log-table a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.log-table a:hover { color: var(--sel); border-bottom-color: var(--sel); }
.log-table tbody tr:hover td { background: var(--paper-2); }
.verified ul { list-style: none; margin: 0; padding: 0; }
.verified li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.verified li:last-child { border-bottom: 0; }
.verified b { font-weight: 600; font-family: var(--mono); font-size: 12px; white-space: nowrap; }

.foot { flex: none; font-size: 11px; color: var(--ink-3); padding: 5px 16px; border-top: 1px solid var(--rule); background: var(--paper); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.foot .key { display: flex; gap: 14px; align-items: center; }
.foot .key .dot { margin-right: 5px; vertical-align: 0; }
.foot form { display: inline; margin: 0; }
.foot .linkbtn { background: none; border: 0; padding: 0; color: var(--ink-2); text-decoration: underline; font: 11px var(--sans); }

/* figure theme */
.lc-fig .s-body { fill: #fbf9f3; stroke: var(--ink); stroke-width: 1.3; }
.lc-fig .s-top { fill: #fffdf8; stroke: var(--ink); stroke-width: 1.15; }
.lc-fig .s-side { fill: #e4dccb; stroke: var(--ink); stroke-width: 1.05; }
.lc-fig .s-dark { fill: #cfc6b2; stroke: var(--ink); stroke-width: 1; }
.lc-fig .s-blade { fill-opacity: .82; }
.lc-fig .s-line { fill: none; stroke: var(--ink); stroke-width: .7; }
.lc-fig .s-hole { fill: var(--paper-2); stroke: var(--ink); stroke-width: .9; }
.lc-fig .s-ghost { stroke: #b4ab96; stroke-width: 1; stroke-dasharray: 5 4; }
.lc-fig .bg-label { font: 11px var(--cond); letter-spacing: .08em; text-transform: uppercase; fill: #a79d86; }
.lc-fig .s-cover { fill: url(#lc-hatch); }
.lc-fig .hatch-bg { fill: #fbf9f3; }
.lc-fig .hatch-line { stroke: #cdc4b0; stroke-width: 1.2; }
.lc-fig .s-belt-outer { stroke: var(--ink); stroke-width: 9; }
.lc-fig .s-belt-inner { stroke: #fbf9f3; stroke-width: 6.4; }
.lc-fig .s-belt-teeth { stroke: var(--ink); stroke-width: 5; stroke-dasharray: 1.2 3.4; opacity: .5; }
.lc-fig .co-leader { stroke: var(--ink); stroke-width: .8; }
.lc-fig .co-anchor { fill: var(--ink); }
.lc-fig .co-bubble { fill: #fff; stroke: var(--ink); stroke-width: 1.1; }
.lc-fig .co-text { font: 600 12px var(--cond); fill: var(--ink); }
.lc-fig.no-leaders .co-leader, .lc-fig.no-leaders .co-anchor { display: none; }

.lc-fig .part.is-hover .s-body, .lc-fig .part.is-hover .s-top, .lc-fig .part.is-hover .s-side, .lc-fig .part.is-hover .s-dark, .lc-fig .part.is-hover .s-line { stroke: var(--sel); }
.lc-fig .part.is-hover .s-belt-outer { stroke: var(--sel); }
.lc-fig .callout.is-hover .co-bubble { stroke: var(--sel); stroke-width: 2; }
.lc-fig .part.is-selected .s-body, .lc-fig .part.is-selected .s-top, .lc-fig .part.is-selected .s-side, .lc-fig .part.is-selected .s-dark { fill: var(--sel-soft); stroke: var(--sel); stroke-width: 2; }
.lc-fig .part.is-selected .s-line { stroke: var(--sel); }
.lc-fig .part.is-selected .s-belt-outer { stroke: var(--sel); stroke-width: 10; }
.lc-fig .part.is-selected .s-belt-inner { stroke: var(--sel-soft); }
.lc-fig .callout.is-selected .co-bubble { fill: var(--red); stroke: var(--red); }
.lc-fig .callout.is-selected .co-text { fill: #fff; }
.lc-fig.has-selection .part:not(.is-selected):not(.fixed) { opacity: .38; }

.lc-fig.job-mode .part.is-removed, .lc-fig.job-mode .callout.is-removed { opacity: .1; }
.lc-fig .part.is-current .s-body, .lc-fig .part.is-current .s-top, .lc-fig .part.is-current .s-side, .lc-fig .part.is-current .s-dark { fill: var(--amber-soft); stroke: var(--amber); stroke-width: 2; }
.lc-fig .part.is-current .s-belt-outer { stroke: var(--amber); }
.lc-fig .part.is-current .s-belt-inner { stroke: var(--amber-soft); }
.lc-fig .callout.is-current .co-bubble { fill: var(--amber); stroke: var(--amber); }
.lc-fig .callout.is-current .co-text { fill: #fff; }
.lc-fig .part.is-fresh .s-body, .lc-fig .part.is-fresh .s-top, .lc-fig .part.is-fresh .s-side, .lc-fig .part.is-fresh .s-dark { fill: var(--green-soft); stroke: var(--green); stroke-width: 1.8; }
.lc-fig .part.is-fresh .s-belt-outer { stroke: var(--green); }
.lc-fig .part.is-fresh .s-belt-inner { stroke: var(--green-soft); }
.lc-fig .callout.is-fresh .co-bubble { fill: var(--green); stroke: var(--green); }
.lc-fig .callout.is-fresh .co-text { fill: #fff; }

@media (max-width: 819px) {
  .garage { overflow: visible; min-height: auto; padding: 12px 12px 28px; }
  .garage-top { grid-template-columns: 1fr; }
  .garage h2 { font-size: 18px; }
  .odo-num { font-size: 28px; }
  .garage dl { grid-template-columns: 118px 1fr; }
  .verified li { flex-wrap: wrap; }
}

@media print {
  .topbar, .tree, .toolbar, .tabs, .foot, .no-print { display: none !important; }
  .layout { grid-template-columns: 1fr 380px; }
  .garage { grid-column: 1 / -1; overflow: visible; }
}