/* Qovo brand system v1 (MC-h8sndzzz). One file: tokens + own components. Fonts are Ubuntu Sans (width axis!) and Ubuntu Sans Mono, shipped in ./fonts (UFL licence). */
@font-face{font-family:"Qovo Sans";src:url("fonts/sans.ttf") format("truetype");font-weight:100 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Qovo Mono";src:url("fonts/mono.ttf") format("truetype");font-weight:300 700;font-display:swap}

:root{
  /* palette: ink / paper / signal + three verdict colours. Signal is NEVER a text colour on paper and never takes white text: it takes ink text (6.4:1). */
  --ink:#12151A; --paper:#F5F1E8; --bone:#E8E1D0; --white:#FFFFFF;
  --signal:#FF5B22; --signal-deep:#A5370A; --signal-tint:#FFD9C7;
  --ok:#0B6B49; --ok-tint:#D3EDE0; --watch:#8F5A00; --watch-tint:#F7E3AE; --bad:#B4232E; --bad-tint:#F6D2D4;
  --lime:#D9F26B; /* only for live-data highlights, never as a background of text blocks */
  --bg:var(--paper); --surface:var(--white); --surface-2:var(--bone); --text:var(--ink); --muted:#575B63; --line:var(--ink); --hair:rgba(18,21,26,.16);
  --accent:var(--signal); --on-accent:var(--ink); --cut:var(--paper);
  --f-sans:"Qovo Sans","Ubuntu Sans","Segoe UI",system-ui,sans-serif; --f-mono:"Qovo Mono","Ubuntu Sans Mono",ui-monospace,monospace;
  /* grid: 12 columns, 8px baseline, gutters 24 (desktop) / 16 (mobile), container 1200 */
  --gut:24px; --wrap:1200px; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px; --s7:112px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
[data-theme=dark]{
  --ink:#F3EFE6; --paper:#0E1115; --bone:#20252D; --white:#171B21;
  --signal:#FF6B38; --signal-deep:#FF8F66; --signal-tint:#3A2118;
  --ok:#5AD3A6; --ok-tint:#123A2D; --watch:#F2B84B; --watch-tint:#3B2E10; --bad:#FF8087; --bad-tint:#431A1E;
  --lime:#D9F26B;
  --bg:#0E1115; --surface:#171B21; --surface-2:#20252D; --text:#F3EFE6; --muted:#A8ADB5; --line:#F3EFE6; --hair:rgba(243,239,230,.18);
  --on-accent:#12151A; --cut:#0E1115;
}
@media(max-width:700px){:root{--gut:16px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:450 17px/1.5 var(--f-sans);font-stretch:100%;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* type scale: display is the condensed width (75%) at 800, so headlines are dense and tall; body is normal width */
.t-display{font-weight:800;font-stretch:75%;font-size:clamp(52px,9vw,124px);line-height:.88;letter-spacing:-.015em;text-transform:uppercase;margin:0}
.t-h1{font-weight:800;font-stretch:75%;font-size:clamp(40px,6vw,80px);line-height:.92;letter-spacing:-.01em;text-transform:uppercase;margin:0}
.t-h2{font-weight:800;font-stretch:80%;font-size:clamp(30px,4vw,52px);line-height:.98;text-transform:uppercase;margin:0}
.t-h3{font-weight:700;font-stretch:90%;font-size:22px;line-height:1.15;margin:0}
.t-lead{font-size:clamp(18px,2vw,21px);line-height:1.45;max-width:36em}
.t-mono{font-family:var(--f-mono);font-weight:500;letter-spacing:.02em}
.t-kicker{font:600 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:10px;color:var(--text)}
.t-kicker::before{content:"";width:10px;height:10px;background:var(--signal);flex:none}
.muted{color:var(--muted)}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* BUTTON "notch": rectangular, cut top-right corner, ink sweep on hover, arrow nudge */
.q-btn{--bgc:var(--signal);--fg:var(--on-accent);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 26px;border:0;cursor:pointer;
  font:700 15px/1 var(--f-sans);font-stretch:85%;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:var(--fg);
  background:linear-gradient(var(--sweep,var(--ink)) 0 0) no-repeat 0 0/0% 100%,var(--bgc);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  transition:background-size .35s var(--ease),color .2s,transform .2s var(--ease)}
.q-btn:hover{background-size:100% 100%;color:var(--sweep-fg,var(--paper))}
.q-btn:active{transform:translateY(2px)}
.q-btn .arr{transition:transform .3s var(--ease)} .q-btn:hover .arr{transform:translateX(6px)}
.q-btn.ink{--bgc:var(--ink);--fg:var(--paper);--sweep:var(--signal);} .q-btn.ink:hover{color:var(--on-accent)}
.q-btn.line{--bgc:transparent;--fg:var(--text);box-shadow:inset 0 0 0 2px var(--line)}
.q-btn.line:hover{color:var(--paper)} [data-theme=dark] .q-btn.line:hover{color:var(--bg)}
.q-btn.sm{min-height:40px;padding:0 16px;font-size:13px;clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%)}
.q-btn[disabled]{opacity:.45;pointer-events:none}
.q-btn.loading{pointer-events:none}.q-btn.loading::after{content:"";width:16px;height:16px;border:3px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* SLIP card: ticket with side notches and a dashed tear line. Variable sizes come from the layout, not from the component. */
.q-slip{position:relative;background:var(--surface);border:2px solid var(--line);padding:var(--s3);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.q-slip::before,.q-slip::after{content:"";position:absolute;top:var(--tear,72px);width:18px;height:18px;border-radius:50%;background:var(--bg);border:2px solid var(--line);z-index:1}
.q-slip::before{left:-11px;clip-path:inset(0 0 0 50%)} .q-slip::after{right:-11px;clip-path:inset(0 50% 0 0)}
.q-slip .tear{position:absolute;left:12px;right:12px;top:calc(var(--tear,72px) + 8px);border-top:2px dashed var(--hair)}
.q-slip.lift:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--line)}
.q-slip.ink{background:var(--ink);color:var(--paper);--line:var(--ink)} [data-theme=dark] .q-slip.ink{background:var(--signal);color:#12151A;--line:var(--signal)}
.q-slip.signal{background:var(--signal);color:#12151A;--line:#12151A}
.q-slip.bone{background:var(--surface-2)}

/* STATUS chip "stamp": shape + word, never colour alone. ok = square tick, watch = triangle, bad = diamond */
.q-chip{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 8px;font:600 11.5px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  color:var(--c);background:var(--t);box-shadow:inset 0 0 0 1.5px var(--c);clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}
.q-chip svg{width:14px;height:14px;flex:none}
.q-chip.ok{--c:var(--ok);--t:var(--ok-tint)} .q-chip.watch{--c:var(--watch);--t:var(--watch-tint)} .q-chip.bad{--c:var(--bad);--t:var(--bad-tint)} .q-chip.sig{--c:var(--signal-deep);--t:var(--signal-tint)} .q-chip.mute{--c:var(--muted);--t:var(--surface-2)}
.q-chip.live::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25;transform:scale(.7)}}

/* REPORT HEADER: plate-like VIN band + ring-28 + verdict. The recognisable Qovo object. */
.q-rhead{display:grid;grid-template-columns:auto 1fr auto;gap:var(--s3);align-items:center;background:var(--ink);color:var(--paper);padding:var(--s3);position:relative;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
[data-theme=dark] .q-rhead{background:var(--surface-2);color:var(--text)}
.q-rhead .vin{font:600 clamp(15px,2vw,22px)/1 var(--f-mono);letter-spacing:.12em}
.q-rhead .car{font-weight:800;font-stretch:78%;font-size:clamp(24px,3vw,38px);text-transform:uppercase;line-height:1}
.q-rhead .verdict{font:700 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;background:var(--signal);color:#12151A;padding:8px 12px;display:inline-block;margin-top:12px}
@media(max-width:700px){.q-rhead{grid-template-columns:1fr auto}.q-rhead .ringbox{order:-1}}

/* RING-28: 28 ticks = 28 inspection points. Used as logo, loader, score, progress. */
.ring28{display:block;width:var(--d,120px);height:var(--d,120px)}
.ring28 .tk{transform-origin:50px 50px;fill:currentColor}
.ring28 .tk.ok{color:var(--ok)} .ring28 .tk.watch{color:var(--watch)} .ring28 .tk.bad{color:var(--bad)} .ring28 .tk.off{opacity:.18}
.ring28.anim .tk{animation:tick .35s var(--ease) both;animation-delay:calc(var(--i)*38ms)}
@keyframes tick{from{opacity:0;transform:rotate(var(--r)) scaleY(.2)}}
.ring28 .tail{fill:var(--signal)}
.ring28 text{fill:currentColor;font:800 26px var(--f-sans);font-stretch:75%;text-anchor:middle}

/* skeleton / empty */
.skel{background:linear-gradient(100deg,var(--surface-2) 30%,var(--hair) 50%,var(--surface-2) 70%) 0 0/300% 100%;animation:sh 1.3s linear infinite;min-height:16px}
@keyframes sh{to{background-position:-300% 0}}
.empty{border:2px dashed var(--line);padding:var(--s5) var(--s3);text-align:center;display:grid;gap:var(--s2);justify-items:center}

/* ticker */
.ticker{overflow:hidden;white-space:nowrap;background:var(--ink);color:var(--paper);font:600 13px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
[data-theme=dark] .ticker{background:var(--signal);color:#12151A}
.ticker .run{display:inline-flex;gap:40px;padding:14px 0;animation:run 38s linear infinite}
.ticker:hover .run{animation-play-state:paused}
@keyframes run{to{transform:translateX(-50%)}}

/* reveal on scroll (JS adds .in) */
.rv{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .rv.in{opacity:1;transform:none}
.no-js .rv{opacity:1;transform:none}

/* field */
.q-field{display:flex;flex-direction:column;gap:6px}
.q-field label{font:600 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.q-field input,.q-field select{height:52px;padding:0 14px;border:2px solid var(--line);background:var(--surface);color:var(--text);font:600 18px var(--f-mono);letter-spacing:.06em;border-radius:0;min-width:0}
.q-field input:focus{outline:3px solid var(--signal);outline-offset:0}
.q-field .help{font-size:13px;color:var(--muted)}

/* theme + lang switch */
.q-toggle{width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--line);background:transparent;color:var(--text);cursor:pointer}
.q-toggle:hover{background:var(--ink);color:var(--paper)}

/* reference note beside each screen (D6) */
.refnote{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;font:500 12px/1.4 var(--f-mono);padding:10px var(--gut);background:var(--lime);color:#12151A;letter-spacing:.02em}
.refnote a{font-weight:700}
.refnote b{text-transform:uppercase;letter-spacing:.1em}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}.rv{opacity:1;transform:none}.ticker .run{animation:none}}
.ring28 .tk.ink{color:inherit}
html,body{overflow-x:clip}
.q-slip.plain::before,.q-slip.plain::after,.q-slip.plain .tear{display:none}
@media(max-width:700px){.q-rhead>.t-mono{display:none}.q-rhead{padding:16px}}
.av{width:56px;height:56px;background:var(--signal);display:grid;place-items:center;font:800 24px var(--f-sans);color:#12151A;flex:none;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}