/* Accent: steel teal. The only colours this demo changes; everything else comes from the kit tokens. */
:root{--accent:#1f6f78;--accent-hover:#185c64;--accent-soft:rgba(31,111,120,.08);--accent-line:rgba(31,111,120,.34);--chart-a:#1f6f78}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent:#4aa6b0;--accent-hover:#63b8c1;--accent-soft:rgba(74,166,176,.14);--accent-line:rgba(74,166,176,.44);--chart-a:#4aa6b0}}
:root[data-theme="dark"]{--accent:#4aa6b0;--accent-hover:#63b8c1;--accent-soft:rgba(74,166,176,.14);--accent-line:rgba(74,166,176,.44);--chart-a:#4aa6b0}

/* Shared small type */
.fm-st{font-size:12px;color:var(--text-3);font-weight:500;display:flex;align-items:center;gap:6px}
.fm-note{font-size:12px;color:var(--text-3);margin:10px 0 0}

/* ---------- Overview: hero ---------- */
.fm-hero{padding:20px 24px}
.fm-hero-g{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start}
.fm-h-left{display:flex;flex-direction:column;gap:20px;min-width:0}
.fm-h-top{display:flex;flex-direction:column;gap:20px}
.fm-h-l{font-size:12.5px;color:var(--text-2);font-weight:500;display:flex;align-items:center;gap:6px}
.fm-h-v{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.fm-h-v .v{font-size:36px;font-weight:600;letter-spacing:-.035em;line-height:1}
.fm-h-vs{font-size:12.5px;color:var(--text-3)}
.fm-target .fm-tl-row{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--text-2);margin-bottom:8px;flex-wrap:wrap}
.fm-target b{color:var(--text);font-weight:600}
.fm-bar{position:relative;height:8px;border-radius:4px;background:var(--surface-3)}
.fm-bar i{position:absolute;inset:0 auto 0 0;border-radius:4px;background:var(--chart-a)}
.fm-bar .tick{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;border-radius:1px;background:var(--text)}
.fm-sec{display:flex;flex-direction:column;gap:10px}
.fm-cats{display:flex;flex-direction:column;gap:7px}
.fm-cat{display:grid;grid-template-columns:150px minmax(0,1fr) 56px;gap:10px;align-items:center;font-size:12.5px}
.fm-cat .nm{color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-cat .mb{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.fm-cat .mb i{display:block;height:100%;background:var(--chart-a);border-radius:3px}
.fm-cat b{text-align:right;font-weight:500;white-space:nowrap}
.fm-h-right{min-width:0;display:flex;flex-direction:column;gap:14px}
.fm-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--r-lg)}
.fm-fig{padding:12px 14px;min-width:0}
.fm-fig+.fm-fig{border-left:1px solid var(--border)}
.fm-fig .fv{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-top:4px;white-space:nowrap;font-variant-numeric:tabular-nums}
.fm-fig .fs{font-size:11.5px;color:var(--text-3);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-ch{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* line chart */
.fm-lc{width:100%;min-width:0}
.fm-lcs text{font-size:11px;fill:var(--text-3);font-family:var(--font-mono)}
.fm-lcs .gr{stroke:var(--chart-grid);shape-rendering:crispEdges}
.fm-lcs .base{stroke:var(--border-strong);shape-rendering:crispEdges}
.fm-lcs .ar{fill:var(--chart-fill);stroke:none}
.fm-lcs .ln{fill:none;stroke:var(--chart-a);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.fm-lcs .tg{stroke:var(--text-3);stroke-width:1.25;stroke-dasharray:4 3}
.fm-lcs .tl{fill:var(--text-2);font-family:var(--font-ui)}
.fm-lcs .end{fill:var(--chart-a);stroke:var(--surface);stroke-width:2}
.fm-lcs .ev{fill:var(--text);font-weight:600}
.fm-lcs .cur{stroke:var(--border-strong)}
.fm-lcs .hov{fill:var(--surface);stroke:var(--chart-a);stroke-width:2}

/* fleet status strip */
.fm-strip{padding:14px 20px}
.fm-strip-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.fm-seg{display:flex;height:10px;gap:2px;border-radius:4px;overflow:hidden;background:var(--surface-3)}
.fm-seg i{display:block;min-width:3px}
.fm-seg-leg{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:10px}
.fm-seg-k{display:inline-flex;align-items:center;gap:7px;padding:4px 8px;border-radius:var(--r);font-size:12.5px;color:var(--text-2)}
.fm-seg-k:hover:not([disabled]){background:var(--surface-2);color:var(--text)}
.fm-seg-k[disabled]{opacity:.6;cursor:not-allowed}
.fm-seg-k i{width:8px;height:8px;border-radius:2px}
.fm-seg-k b{font-weight:600;color:var(--text)}
.t-rent{background:var(--accent)}.t-dispatch{background:var(--info)}.t-inspect{background:var(--chart-c)}.t-service{background:var(--warn)}.t-avail{background:var(--good)}

/* needs attention */
.fm-attn{display:flex;flex-direction:column}
.fm-attn-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 12px;border-top:1px solid var(--hair)}
.fm-attn-row:first-child{border-top:0}
.fm-attn-row .k-badge{justify-content:center}
.fm-attn-row .fm-t{min-width:0;font-size:13px}
.fm-attn-row .fm-t b{font-weight:600}
.fm-attn-row .fm-t span{display:block;color:var(--text-2);font-size:12px;margin-top:2px;overflow:hidden;text-overflow:ellipsis}
.fm-brief{margin:0;font-size:14px;line-height:1.55;color:var(--text);max-width:78ch}
.fm-brief b{font-weight:600}

/* ---------- machine drawings (spec-sheet line work) ---------- */
.fm-sil{width:100%;height:84px;color:var(--text-2);display:block}
.fm-sil.lg{height:auto;aspect-ratio:160/100;max-height:220px}
.fm-sil .fm-ln{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.fm-sil .fm-ln *,.fm-sil line{vector-effect:non-scaling-stroke}
.fm-sil .fm-ground{stroke:var(--border-strong);stroke-width:1}
.fm-sil .fm-grid line{stroke:var(--hair);stroke-width:1}
.fm-sil.lg{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r)}
.fm-sil.diag{max-height:none;color:var(--text-2)}
.fm-gi{width:22px;height:22px;flex:none;display:block}
.fm-gi .disc{fill:var(--mk-c,var(--text-3))}
.fm-gi .gl,.k-mk .gl{fill:none;stroke:var(--text-inv);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.fm-gi.t-acc{--mk-c:var(--accent)}.fm-gi.t-good{--mk-c:var(--good)}.fm-gi.t-warn{--mk-c:var(--warn)}.fm-gi.t-crit{--mk-c:var(--crit)}.fm-gi.t-info{--mk-c:var(--info)}.fm-gi.t-neutral,.fm-gi.t-{--mk-c:var(--text-3)}

/* catalogue cards */
.fm-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.fm-card{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);padding:12px;display:flex;flex-direction:column;gap:9px;cursor:pointer;text-align:left;font:inherit;color:inherit;width:100%}
.fm-card:hover{border-color:var(--border-strong)}
.fm-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fm-card .fm-sil{background:var(--surface-2);border-radius:var(--r);padding:6px 0}
.fm-card h3{margin:0;font-size:13px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-card .fm-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--text-2)}
.fm-rates{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;font-size:12px}
.fm-rates div{background:var(--surface-2);border-radius:var(--r);padding:5px 7px}
.fm-rates small{display:block;color:var(--text-3);font-size:11px}
.fm-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.fm-cat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.fm-seg-t{display:inline-flex;gap:0;border:1px solid var(--border);border-radius:var(--r);padding:2px;background:var(--surface-2)}
.fm-seg-t .k-chip{border:0;background:transparent}
.fm-seg-t .k-chip[aria-pressed="true"]{background:var(--surface);box-shadow:var(--shadow)}

/* ---------- availability timeline ---------- */
.fm-tl{position:relative;min-width:0}
.fm-tl-sc{overflow-x:auto;overscroll-behavior-x:contain;border:1px solid var(--border);border-radius:var(--r)}
.fm-tl-in{position:relative}
.fm-tl-head{display:flex;height:40px;border-bottom:1px solid var(--border);background:var(--surface)}
.fm-tl-corner{position:sticky;left:0;z-index:3;background:var(--surface);flex:none;display:flex;align-items:flex-end;padding:0 10px 6px;font-size:11px;color:var(--text-3);font-weight:500;border-right:1px solid var(--border)}
.fm-tl-axis{position:relative;flex:none}
.fm-tl-mo{position:absolute;top:4px;font-size:11px;font-weight:600;color:var(--text-2);padding-left:4px;white-space:nowrap}
.fm-tl-d{position:absolute;bottom:5px;font:11px var(--font-mono);color:var(--text-3);text-align:center}
.fm-tl-d.we{color:var(--text-3);opacity:.7}
.fm-tl-d.td{color:var(--accent);font-weight:600}
.fm-tl-body{position:relative;outline:none;cursor:crosshair}
.fm-tl-body:focus-visible{box-shadow:inset 0 0 0 2px var(--focus-ring)}
.fm-tl-grid{position:absolute;top:0;bottom:0;pointer-events:none}
.fm-tl-grid .we{position:absolute;top:0;bottom:0;background:var(--surface-2)}
.fm-tl-grid .wk{position:absolute;top:0;bottom:0;width:1px;background:var(--hair)}
.fm-tl-grid .today{position:absolute;top:0;bottom:0;background:var(--accent-soft);border-left:1.5px solid var(--accent)}
.fm-tl-now{position:absolute;top:3px;transform:translateX(-50%);font-size:11px;font-weight:600;color:var(--text-inv);background:var(--accent);padding:0 5px;border-radius:3px;line-height:15px;white-space:nowrap;z-index:1}
.fm-tl-row{display:flex;height:36px;border-bottom:1px solid var(--hair);position:relative}
.fm-tl-row:last-of-type{border-bottom:0}
.fm-tl-lab{position:sticky;left:0;z-index:2;flex:none;background:var(--surface);border-right:1px solid var(--border);display:flex;align-items:center;gap:8px;padding:0 10px;cursor:default;min-width:0}
.fm-tl-lab span{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.fm-tl-lab b{font-size:12px;font-weight:500}
.fm-tl-lab small{font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-tl-track{position:relative;flex:none}
.fm-tb{position:absolute;top:7px;height:22px;border-radius:3px;font:500 11px var(--font-mono);padding:0 6px;text-align:left;overflow:hidden;white-space:nowrap;cursor:pointer;border:1px solid transparent;display:flex;align-items:center;min-width:3px}
.fm-tb span{overflow:hidden;text-overflow:ellipsis}
.fm-tb:hover{filter:brightness(1.06)}
.fm-tb:focus-visible{outline:2px solid var(--text);outline-offset:1px}
.fm-tb.t-onrent{background:var(--accent);color:var(--text-inv)}
.fm-tb.t-reserved{background:color-mix(in srgb,var(--accent) 22%,var(--surface));border-color:var(--accent-line);color:var(--text)}
.fm-tb.t-quote{background:var(--surface);border:1px dashed var(--border-strong);color:var(--text-2)}
.fm-tb.t-done{background:var(--surface-4);color:var(--text-2)}
.fm-tb.t-service{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 55%,transparent);color:var(--warn)}
.fm-tb.t-hold{background:var(--surface);border:1.5px dashed var(--accent);color:var(--accent)}
.fm-tb.t-overdue{background:var(--crit);color:var(--text-inv)}
.fm-tl-ghost{position:absolute;height:22px;margin-top:2px;border-radius:3px;background:var(--accent-soft);border:1.5px solid var(--accent);pointer-events:none;z-index:1;display:flex;align-items:center;justify-content:center;min-width:14px}
.fm-tl-ghost span{position:absolute;left:calc(100% + 4px);top:2px;font:600 11px var(--font-mono);color:var(--accent);white-space:nowrap;padding:0 5px;background:var(--surface);border:1px solid var(--accent-line);border-radius:3px;line-height:15px}
.fm-tl-ghost.bad span{border-color:var(--crit)}
.fm-tl-ghost.bad{background:var(--crit-soft);border-color:var(--crit)}
.fm-tl-ghost.bad span{color:var(--crit)}
.fm-tl-cursor{position:absolute;height:32px;border:2px solid var(--text);border-radius:3px;pointer-events:none;z-index:1}
.fm-tl-leg{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--text-2);margin-bottom:12px}
.fm-tl-leg span{display:inline-flex;align-items:center;gap:7px}
.fm-tl-leg .fm-tb{position:static;width:20px;height:10px;padding:0;cursor:default;border-radius:2px}

/* ---------- quotes and documents ---------- */
.fm-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.fm-form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-2)}
.fm-form .wide{grid-column:1/-1}
.fm-quote-lines{width:100%;border-collapse:collapse;font-size:13px}
.fm-quote-lines td{padding:6px 0;border-top:1px solid var(--hair)}
.fm-quote-lines td:last-child{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:12px}
.fm-quote-lines tr.t td{font-weight:600;border-top:1px solid var(--border-strong)}
.fm-doc{position:relative;font-size:13px;line-height:1.5;padding:4px 2px;overflow:hidden}
.fm-doc h3{margin:0 0 2px;font-size:15px}
.fm-doc .fm-wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:700;letter-spacing:.2em;color:var(--text);opacity:.05;transform:rotate(-24deg);pointer-events:none}
.fm-doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.fm-doc-grid h4{margin:0 0 3px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);font-weight:600}
.fm-docs{display:flex;flex-wrap:wrap;gap:8px}
.fm-sign{display:flex;gap:24px;margin-top:20px;font-size:12px;color:var(--text-2)}
.fm-sign span{flex:1;border-top:1px solid var(--border-strong);padding-top:4px}

/* ---------- inspection ---------- */
.fm-insp{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px}
.fm-diagram{min-width:0}
.fm-diagram svg{width:100%;display:block;max-height:320px}
.fm-diag-cap{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font:11px var(--font-mono);color:var(--text-3);margin-top:6px}
.fm-hot{cursor:pointer;outline:none}
.fm-hot.ro{cursor:default}
.fm-hot .hit{fill:transparent}
.fm-hot .dot{fill:var(--surface);stroke:var(--text-2);stroke-width:1;vector-effect:non-scaling-stroke}
.fm-hot text{font:600 4.8px var(--font-mono);fill:var(--text-2);pointer-events:none}
.fm-hot.minor .dot{fill:var(--warn);stroke:var(--warn)}
.fm-hot.major .dot{fill:var(--crit);stroke:var(--crit)}
.fm-hot.minor text,.fm-hot.major text{fill:var(--text-inv)}
.fm-hot:not(.ro):hover .dot{stroke:var(--accent);stroke-width:1.75}
.fm-hot:focus-visible .dot{stroke:var(--text);stroke-width:2}
.fm-zrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:7px 0;border-top:1px solid var(--hair);font-size:13px}
.fm-zrow .k-sp{min-width:4px}
.fm-zrow .k-mono{white-space:nowrap}
.fm-zrow>.k-btn{margin-left:auto}
.fm-zn{width:18px;height:18px;flex:none;border-radius:50%;display:inline-grid;place-items:center;font:600 11px var(--font-mono);border:1px solid var(--border-strong);color:var(--text-2);background:var(--surface)}
.fm-zn.minor{background:var(--warn);border-color:var(--warn);color:var(--text-inv)}
.fm-zn.major{background:var(--crit);border-color:var(--crit);color:var(--text-inv)}
.fm-zamt{min-width:64px;text-align:right}
.fm-zrow.ed{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:6px 10px}
.fm-zrow.ed .fm-sev{grid-column:2/4;display:flex;gap:6px}
.fm-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,150px));gap:10px}
.fm-photo{margin:0;min-width:0}
.fm-ph-box{aspect-ratio:4/3;border:1px dashed var(--border-strong);border-radius:var(--r);background:var(--surface-2);display:grid;place-items:center;font-size:11px;color:var(--text-3);text-align:center;padding:4px}
.fm-photo figcaption{font-size:11.5px;color:var(--text-2);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-modal-box:has(.fm-insp){width:min(860px,100%)}
.k-modal-box:has(.fm-doc){width:min(640px,100%)}
.k-modal-box:has(.fm-wk){width:min(640px,100%)}

/* ---------- dispatch map ---------- */
.fm-fleet{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-width:0}
.fm-mapbox{min-width:0}
.fm-map-leg{display:flex;flex-wrap:wrap;gap:4px 14px;padding:8px 10px;font-size:11.5px;color:var(--text-2);border-top:1px solid var(--border)}
.fm-map-leg span{display:inline-flex;align-items:center;gap:6px}
.fm-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.fm-dot.t-acc{background:var(--accent)}.fm-dot.t-warn{background:var(--warn)}.fm-dot.t-crit{background:var(--crit)}.fm-dot.t-info{background:var(--info)}
.fm-dot.sq{border-radius:1px;background:var(--surface);border:1.5px solid var(--text)}
.fm-ring{width:11px;height:11px;border-radius:50%;border:1.25px dashed var(--crit);background:var(--crit-soft);display:inline-block}
.fm-map-leg .fm-ln{width:14px;height:3px;border-radius:2px;background:var(--accent);display:inline-block}
.fm-fl-wrap{border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0;max-height:clamp(300px,50vw,620px)}
.fm-fl-h{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--border);font-size:13px}
.fm-fl{overflow-y:auto;flex:1;padding:4px}
.fm-fl-g{font-size:11px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;padding:10px 8px 4px}
.fm-fl-i{display:flex;align-items:center;gap:10px;width:100%;padding:6px 8px;border-radius:var(--r);text-align:left;font:inherit;color:inherit}
.fm-fl-i:hover{background:var(--surface-2)}
.fm-fl-i[aria-pressed="true"]{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent)}
.fm-fl-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25}
.fm-fl-t b{font-size:12px;font-weight:500}
.fm-fl-t small{font-size:11.5px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-map .k-mk.dot .fm-disc,.fm-map .k-mk.vehicle .fm-disc{fill:var(--mk);stroke:var(--surface);stroke-width:1.75}
.fm-map .k-mk .gl{stroke-width:1.5}
.fm-map .k-mk .fm-head{stroke:var(--mk);stroke-width:2.5;stroke-linecap:round}
.fm-map .k-mk.pulse .ring{stroke-width:1.5}
.fm-map .k-mk[aria-pressed],.fm-map .k-mk:focus-visible .fm-disc{stroke:var(--text);stroke-width:2.25}
.fm-map .k-mk.dot text,.fm-map .k-mk.vehicle text{display:none}
.fm-map.fm-near .k-mk.dot text,.fm-map.fm-near .k-mk.vehicle text{display:block;font:600 8px var(--font-mono)}
.fm-map .k-mk.square text{font:600 8.5px var(--font-ui)}
.fm-rt-c{fill:none;stroke:var(--surface);stroke-width:6;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.fm-rt{fill:none;stroke:var(--accent);opacity:.85;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.fm-rt-end{fill:var(--surface);stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke}
.fm-fence{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.25;stroke-dasharray:3 2;vector-effect:non-scaling-stroke}
.fm-fence.bad{fill:var(--crit-soft);stroke:var(--crit)}
.fm-fence-c{stroke:var(--accent);stroke-width:1;vector-effect:non-scaling-stroke}
.fm-fence-c.bad{stroke:var(--crit)}
.fm-fence-l{stroke:var(--crit);stroke-width:1.25;stroke-dasharray:2 2;vector-effect:non-scaling-stroke}
.fm-clu{cursor:pointer;outline:none}
.fm-clu .o{fill:color-mix(in srgb,var(--accent) 22%,transparent)}
.fm-clu .i{fill:var(--accent);stroke:var(--surface);stroke-width:1.5}
.fm-clu text{font:600 8px var(--font-mono);fill:var(--text-inv);pointer-events:none}
.fm-clu:focus-visible .i{stroke:var(--text);stroke-width:2.25}
.fm-map .k-map-pop{min-width:250px;max-width:290px;padding:12px 14px}
.fm-pop-h{display:flex;align-items:center;gap:10px;padding-right:24px}
.fm-pop-h .fm-gi{width:26px;height:26px}
.fm-pop-h b{display:block;font-size:13px}
.fm-pop-h small{display:block;font-size:11.5px;color:var(--text-3)}
.fm-pop-kv{grid-template-columns:86px minmax(0,1fr);gap:5px 10px;font-size:12px}
.fm-pop-b{margin-top:10px;width:100%;justify-content:center}
.fm-gauge{display:inline-flex;align-items:center;gap:8px}
.fm-gauge .gb{width:60px;height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.fm-gauge .gb i{display:block;height:100%;background:var(--text-2);border-radius:3px}
.fm-gauge.low .gb i{background:var(--warn)}
.fm-gauge.low b{color:var(--warn)}
.fm-gauge b{font-weight:500;font-size:12px}
.fm-cellm{display:inline-flex;align-items:center;gap:8px}
.fm-cellm .fm-gi{width:18px;height:18px}

/* ---------- insights ---------- */
.fm-heat{margin-top:4px}
.fm-wk{display:flex;flex-direction:column}
.fm-wk-i{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:8px 6px;border-top:1px solid var(--hair);text-align:left;font:inherit;color:inherit;font-size:13px}
.fm-wk-i:hover{background:var(--surface-2)}
.fm-wk-c{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- settings ---------- */
.fm-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.fm-roles td,.fm-roles th{padding:7px 8px;border-top:1px solid var(--hair);font-size:12px;text-align:center}
.fm-roles th{color:var(--text-2);font-weight:500}
.fm-roles td:first-child,.fm-roles th:first-child{text-align:left}
.fm-roles-wrap{overflow-x:auto}
.fm-ro{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fm-pill{display:inline-flex;align-items:center;gap:6px}

@media (max-width:1180px){
  .fm-hero-g{grid-template-columns:minmax(0,1fr)}
  .fm-fleet{grid-template-columns:minmax(0,1fr)}
  .fm-fl-wrap{border-left:0;border-top:1px solid var(--border);max-height:360px}
}
@media (max-width:760px){
  .fm-insp{grid-template-columns:1fr}
  .fm-form{grid-template-columns:1fr}
  .fm-doc-grid{grid-template-columns:1fr}
  .fm-hero{padding:16px}
  .fm-h-v .v{font-size:30px}
  .fm-cat{grid-template-columns:110px minmax(0,1fr) 52px}
  .fm-fig .fs{white-space:normal}
  .fm-figs{grid-template-columns:1fr 1fr}
  .fm-fig:nth-child(3){grid-column:1/-1;border-left:0;border-top:1px solid var(--border)}
  .fm-attn-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 10px}
  .fm-attn-row .k-badge{grid-column:1/-1;justify-self:start}
  .fm-photos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fm-hot text{font-size:5.8px}
  .fm-hot .dot{r:5.6px}
  .fm-strip{padding:12px 14px}
  .fm-wk-i{grid-template-columns:auto minmax(0,1fr) auto}
  .fm-wk-i .k-mono.k-muted,.fm-wk-i .k-num{display:none}
}
/* phones: keep long grids inside their own scroll box so the page and the tour stay readable */
@media (max-width:640px){
  .fm-tl-sc{max-height:440px;overflow:auto}
  .fm-tl-head{position:sticky;top:0;z-index:4}
  #fm-resv .k-tbl-wrap,#fm-invoices .k-tbl-wrap,#fm-maint .k-tbl-wrap{max-height:440px}
  .fm-heat{overflow-x:auto;overscroll-behavior-x:contain}
  .fm-heat .k-chart-host{min-width:760px}
}
.fm-insp input[type="range"],.fm-form input[type="checkbox"]{accent-color:var(--accent)}
/* Watch it run on phones: lift drawer buttons above the docked caption and player so the walkthrough never clicks under them */
@media (max-width:639px){body.k-ap-on .k-drawer-f{padding-bottom:250px}}