/* Auto Advisor 3.0 layer. Tokens come from the Gold and Teal palette. */
.linklike { background: none; border: 0; padding: 0; color: var(--primary-ink); text-decoration: underline; font: inherit; cursor: pointer; }
/* typewriter reveal: words fade in; the text is whole in the page the whole time */
.tw-run .tw-w { opacity: 0; animation: twIn 170ms var(--ease-out, ease-out) forwards; }
@keyframes twIn { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* evidence */
.ev-chip { display: inline-block; margin-top: .35rem; padding: .12rem .55rem; border-radius: 999px; font: 600 .66rem/1.5 var(--font-mono); letter-spacing: .03em; text-transform: uppercase; color: var(--mid); background: var(--panel-alt); border: 1px dashed var(--line); }
.ev-chip.ev-ok { color: var(--on-ok); background: var(--ok-solid); border: 1px solid var(--ok-solid); }
.ev-chip.ev-wip { color: var(--primary-ink); border-style: solid; }
.ev-box { margin: .8rem 0; padding: .7rem .9rem; border-radius: var(--radius-md); background: var(--panel-alt); }
.ev-box p { font-size: .8rem; color: var(--mid); margin-top: .3rem; }
.ev-state { display: flex; gap: .7rem; align-items: flex-start; margin: .7rem 0; } .ev-state p { font-size: .85rem; margin: 0; }
/* where-to-look photos: duotone, always labelled */
.look-row { display: grid; gap: .8rem; margin: .6rem 0 .8rem; }
.look { margin: 0; } .look figcaption { font-size: .78rem; color: var(--mid); margin-top: .35rem; }
.look-ph { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; max-height: 52vh; background: var(--panel-alt); }
.look-ph img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); }
.look-ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, #E0BC4A, #0D7377); mix-blend-mode: soft-light; opacity: .95; pointer-events: none; }
.look-tag { display: inline-block; padding: 0 .4rem; border-radius: 999px; background: var(--panel-alt); border: 1px solid var(--line); font: 600 .62rem/1.6 var(--font-mono); text-transform: uppercase; }
/* tyre and odometer results */
.tyre-out { margin: -.2rem 0 .6rem; } .tyre-msg { font-size: .82rem; margin: .25rem 0; padding-left: .7rem; border-left: 3px solid var(--line); }
.tyre-msg.ok { border-color: var(--state); } .tyre-msg.watch { border-color: var(--warn); } .tyre-msg.bad { border-color: var(--danger); }
.info-box.warn { border-color: var(--warn); }
.odo-res.ok { border-left: 6px solid var(--state); } .odo-res.watch { border-left: 6px solid var(--warn); } .odo-res.bad { border-left: 6px solid var(--danger); }
.odo-card, .cluster-odo { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: .4rem; }
.odo { display: inline-flex; align-items: center; gap: 3px; padding: .45em .6em; border-radius: 10px; background: #14100A; color: #F1EADA; font: 500 clamp(1.2rem, 8vw, 1.9rem)/1 var(--font-mono); box-shadow: inset 0 2px 8px rgba(0,0,0,.6); }
.odo-d { display: block; width: .78em; height: 1.25em; overflow: hidden; border-radius: 3px; background: linear-gradient(#050403, #26221b 50%, #050403); line-height: 1.25em; text-align: center; }
.odo-strip { display: block; transition: transform 900ms cubic-bezier(.2,.9,.08,1); transition-delay: calc(var(--i, 0) * 60ms); }
.odo-strip i { display: block; font-style: normal; height: 1.25em; }
.odo-u { margin-left: .5rem; font-size: .8rem; color: #B9AF9A; }
/* gauge cluster */
.cluster { background: #14100A; color: #F1EADA; border-radius: 20px; padding: 1rem; border: 1px solid #3a2f18; }
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem; }
.gauge { text-align: center; } .gauge svg { width: 100%; height: auto; display: block; }
.g-face { fill: #1b1710; stroke: #E0BC4A; stroke-width: 2; } .g-ticks line { stroke: #B9AF9A; stroke-width: 1.5; } .g-ticks text { fill: #D8CFB8; font: 500 9px var(--font-mono); }
.g-needle { transform-origin: 100px 100px; transform-box: view-box; transition: transform 800ms cubic-bezier(.2,.9,.08,1); } .g-needle line { stroke: #E0BC4A; stroke-width: 3; stroke-linecap: round; } .g-hub { fill: #E0BC4A; }
.g-unit { fill: #B9AF9A; font: 500 9px var(--font-mono); } .g-label { font: 600 .7rem var(--font-mono); text-transform: uppercase; color: #B9AF9A; margin-top: -.4rem; }
.cluster-odo { margin: .8rem 0; } .cluster-odo small { color: #B9AF9A; font-size: .72rem; }
.lamps { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.2rem, 1fr)); gap: .45rem; }
.lamp { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .5rem .2rem; border-radius: 10px; border: 1px solid #3a352b; background: #232623; color: #B9AF9A; cursor: pointer; transition: background 160ms, color 160ms, box-shadow 160ms; }
.lamp span { font: 700 .8rem var(--font-mono); } .lamp small { font-size: .56rem; line-height: 1.1; text-align: center; }
.lamp.lit.amb { background: #F0B44C; color: #1C1812; border-color: #F0B44C; box-shadow: 0 0 14px rgba(240,180,76,.55); }
.lamp.lit.red { background: #C0392B; color: #fff; border-color: #C0392B; box-shadow: 0 0 14px rgba(192,57,43,.55); }
.lamp:focus-visible { outline: 2px solid #E0BC4A; outline-offset: 2px; }
.cluster-btns { display: flex; gap: .6rem; margin: .9rem 0; } .cluster-btns .btn { flex: 1; }
.fob { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.6rem, 1fr)); gap: .5rem; } .fob-note { grid-column: 1 / -1; font-size: .75rem; color: var(--mid); margin-top: .3rem; }
.fob-b { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .8rem .2rem; border-radius: 16px; border: 1px solid var(--line); background: var(--panel-alt); color: var(--ink); font: 600 .68rem var(--font-mono); text-transform: uppercase; cursor: pointer; }
.fob-b svg { width: 24px; height: 24px; } .fob-b:active { transform: scale(.96); } .fob-b.alarm.on { background: var(--danger); color: #fff; border-color: var(--danger); }
.seg { display: flex; flex-wrap: wrap; gap: .5rem; } .seg .btn { flex: 1 1 6rem; min-width: 0; }
/* workspace modes */
[data-workspace="focus"] .topbar-right { display: none; }
[data-workspace="focus"] #screen-home .divider ~ * { display: none; }
[data-workspace="focus"] #screen-home .card.vertical[style*="gradient-premium"] { display: none; }
[data-workspace="command"] .card { padding-top: .55rem; padding-bottom: .55rem; } [data-workspace="command"] .card-grid { gap: .5rem; }
[data-workspace="command"] .section-desc { font-size: .8rem; }
@media (min-width: 760px) { [data-workspace="command"] .card-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .tw-run .tw-w { animation: none; opacity: 1; } .g-needle, .odo-strip { transition: none; } }
/* 2.2.1 defect: question rows pushed the page sideways at 200% text */
.rc-liftable { flex-wrap: wrap; } .rc-liftable > span, .rc-liftable > div { min-width: 0; flex: 1 1 9rem; overflow-wrap: anywhere; }