/* Tire Pressure tile + panel. Host Conditions anatomy (.t-head/.bignum/.line/.sub). Orange only; no cyan; no dividers. */
.tile.tp-tile .bignum.tp-hero{display:flex;align-items:center;gap:8px;min-width:0}
.tile.tp-tile .bignum small{font-size:14px;font-weight:550;letter-spacing:0;color:var(--txt);align-self:flex-end;padding-bottom:4px;margin-left:-4px}
.tile.tp-tile .tp-word{font-size:32px;font-weight:400;letter-spacing:-.02em;white-space:nowrap}
.tile.tp-tile .tp-line{flex-wrap:nowrap;min-width:0}.tp-ell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile.tp-tile .sub{margin-top:auto}
/* glyph */
.tp-glyph{flex:none;margin-left:auto;overflow:visible}
.tp-glyph .body{stroke:var(--head);stroke-width:1.3}
.tp-glyph .d-ok{fill:var(--head)} .tp-glyph .d-warn{fill:var(--accent)} .tp-glyph .d-bad{fill:var(--accent)} .tp-glyph .d-na{fill:none;stroke:var(--faint);stroke-width:.8}
.tile.tp-k .tp-glyph.tp-big{width:62px;height:24px}
.tile.tp-l .tp-glyph.tp-big{width:70px;height:27px;margin-right:-4px}
.tile.tp-l .tp-word{font-size:30px}
/* status colour: caution = subtle (number/word + dots + edge); alert = host .alert-on */
.tile.tp-l1{border-color:var(--accent-line)} .tile.tp-l1 .bignum{color:var(--accent)}
/* panel */
.tp-panel{display:flex;flex-direction:column;gap:6px}
.tp-lead{color:var(--txt);font-size:14.5px;margin:2px 0 8px;line-height:1.45}
.tp-herorow{display:flex;align-items:center;gap:16px;margin:4px 0 6px}
.tp-hnum{font-size:58px;font-weight:300;line-height:1;letter-spacing:-.04em;color:var(--head);font-variant-numeric:tabular-nums;display:flex;align-items:center}
.tp-hnum small{font-size:17px;font-weight:550;letter-spacing:0;color:var(--txt);align-self:flex-end;padding:0 0 7px 4px}
.tp-hnum .tp-word{font-size:40px;font-weight:400;letter-spacing:-.02em}
.tp-hl{display:flex;flex-direction:column;font-size:16px;color:var(--head);font-weight:600}.tp-hl small{font-size:13px;color:var(--mut);font-weight:400;margin-top:2px}
.tp-herorow.tp-l1 .tp-hnum,.tp-herorow.tp-l2 .tp-hnum{color:var(--accent)}
/* diagram: top-down, front at top; each axle = left tire · axle · right tire */
.tp-diag{display:flex;flex-direction:column;gap:18px;margin:8px 0 10px}
.tp-unit{display:flex;flex-direction:column;gap:10px}
.tp-ulab{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:650;color:var(--mut);text-transform:uppercase;letter-spacing:.09em}.tp-ulab .ic{width:14px;height:14px}
.tp-axle{display:grid;grid-template-columns:1fr 54px 1fr;align-items:center}
.tp-axbar{height:2px;border-radius:2px;background:rgba(255,255,255,.10);margin:0 6px}
.tp-tire{min-height:64px;border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;color:var(--head);font-variant-numeric:tabular-nums}
.tp-tire b{font-size:26px;font-weight:500}
.tp-pos{font-size:11px;font-weight:650;color:var(--mut);letter-spacing:.06em;margin-right:2px}
.tp-u{font-size:13px;color:var(--mut)}
.tp-tire.tp-s1 b{color:var(--accent)} .tp-tire.tp-s1{box-shadow:inset 0 0 0 1px var(--accent-line)}
.tp-tire.tp-s2{background:linear-gradient(160deg,rgba(255,159,10,.24),rgba(255,159,10,.07));box-shadow:inset 0 0 0 1px var(--accent-line)} .tp-tire.tp-s2 b{color:var(--accent)}
.tp-tire.tp-sna b{color:var(--faint)}
.tp-in input{width:64px;min-height:48px;font-size:24px;text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:12px;color:var(--head);padding:0 4px;font-variant-numeric:tabular-nums}
.tp-in input::placeholder{color:var(--faint)}
.tp-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tp-seg button{min-height:56px;border-radius:16px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.05);color:var(--txt);font:600 16px var(--font);display:flex;flex-direction:column;align-items:center;justify-content:center}
.tp-seg button small{font-size:12px;font-weight:400;color:var(--mut)}
.tp-seg button[aria-checked=true]{background:rgba(255,255,255,.14);color:var(--head);border-color:rgba(255,255,255,.22)}
.tp-f{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--mut)}
.tp-f input{min-height:48px;font-size:20px}
.tp-f small{font-size:12px;color:var(--faint)}
.tp-amb{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}.tp-amb span{flex-basis:100%}.tp-amb input{width:110px}.tp-amb button{min-height:44px}
.tp-form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tp-actions{display:flex;gap:10px;margin-top:10px}.tp-big-btn{min-height:52px;flex:1;font-size:17px}
.tp-logbtn{width:100%;margin:2px 0 6px}
.tp-rows{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.tp-row{display:grid;grid-template-columns:96px 1fr auto;gap:12px;align-items:center;min-height:52px}
.tp-row .ghost.sm{min-height:44px;min-width:64px}
.tp-k{font-size:13px;color:var(--mut)}.tp-v{font-size:15px;color:var(--head);line-height:1.35}.tp-v small{display:block;font-size:13px;color:var(--accent)}
.tp-more{margin-top:8px}.tp-more>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--txt);font-size:14px}
.tp-list{display:flex;flex-direction:column;gap:2px;margin:6px 0;font-size:13px}
.tp-li{display:grid;grid-template-columns:1.3fr .6fr 1.6fr;gap:8px;color:var(--txt)}.tp-li.tp-s1,.tp-li.tp-s2{color:var(--accent)}
/* CarPlay glance */
.tp-glance{height:100%;box-sizing:border-box;border-radius:26px;padding:26px 30px;background:var(--glass);border:1px solid rgba(255,255,255,.10);display:flex;flex-direction:column;gap:10px;justify-content:center;color:var(--head)}
.tp-glance.tp-l1{border-color:var(--accent-line)} .tp-glance.tp-l2{border-color:var(--accent-line);background:linear-gradient(160deg,rgba(255,159,10,.22),rgba(255,159,10,.05) 60%),var(--glass)}
.tp-ghead{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:650;color:var(--mut);text-transform:uppercase;letter-spacing:.09em}.tp-ghead .ic{width:20px;height:20px}.tp-ghead span{margin-left:auto;text-transform:none;letter-spacing:0;font-weight:500}
.tp-l2 .tp-ghead{color:var(--accent)}
.tp-grow{display:flex;align-items:center;gap:20px}
.tp-gnum{font-size:120px;font-weight:300;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.tp-gnum small{font-size:30px;font-weight:550;letter-spacing:0;color:var(--txt)}
.tp-l1 .tp-gnum,.tp-l2 .tp-gnum{color:var(--accent)}
.tp-gglyph{width:220px;height:82px}
.tp-gline{font-size:28px}
.tp-gword{font-size:60px;font-weight:400}
.tp-in input::-webkit-outer-spin-button,.tp-in input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.tp-in input{-moz-appearance:textfield}
/* status dots read better slightly larger when not OK */
.tp-glyph .d-warn,.tp-glyph .d-bad{stroke:var(--accent);stroke-width:.9}
.tp-glyph .d-bad{filter:drop-shadow(0 0 1.5px rgba(255,159,10,.9))}
/* ===== tile v2: the diagram is the hero ===== */
.tile.tp-tile{touch-action:pan-y}
.tile.tp-tile .tp-hero{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;margin:-2px 0 2px}
.tp-diagram{display:block;overflow:visible}
.tile.tp-tile .tp-tdiag{height:88px;width:auto;max-width:100%}
.tile.tp-l .tp-tdiag{height:90px}
.tp-diagram .tb{stroke:var(--faint);stroke-width:1.6}
.tp-diagram .tx{stroke:var(--faint);stroke-width:2}
.tp-diagram .tt{stroke-width:1.6}
.tp-diagram .tt.t-ok{fill:var(--head);stroke:var(--head)}
.tp-diagram .tt.t-warn{fill:rgba(255,159,10,.30);stroke:var(--accent);stroke-width:2.2}
.tp-diagram .tt.t-bad{fill:var(--accent);stroke:var(--accent);filter:drop-shadow(0 0 4px rgba(255,159,10,.85))}
.tp-diagram .tt.t-na{fill:none;stroke:var(--faint);stroke-dasharray:3 3}
.tp-diagram .tg{stroke-width:1.4} .tp-diagram .tg.t-ok{stroke:rgba(0,0,0,.35)} .tp-diagram .tg.t-bad{stroke:rgba(0,0,0,.30)} .tp-diagram .tg.t-warn{stroke:rgba(255,159,10,.55)} .tp-diagram .tg.t-na{stroke:none}
.tp-diagram .tn{font:600 19px var(--font);fill:var(--txt);stroke:none;font-variant-numeric:tabular-nums} .tp-diagram .tn.t-warn,.tp-diagram .tn.t-bad{fill:var(--accent)} .tp-diagram .tn.t-na{fill:var(--faint)}
.tile.tp-tile .tp-line{display:flex;align-items:center;gap:6px;color:var(--txt);flex-wrap:nowrap}
.tile.tp-l1 .tp-line,.tile.tp-l2 .tp-line{color:var(--accent)}
.tp-smp{flex:none;font-size:9.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.tp-dots{display:flex;gap:4px;margin-left:auto;flex:none}.tp-dots i{width:5px;height:5px;border-radius:50%;background:var(--faint)}.tp-dots i.on{background:var(--head)}
.tile.tp-l1 .tp-dots i.on,.tile.tp-l2 .tp-dots i.on{background:var(--accent)}
.tp-view{margin:2px 0 4px}.tp-view button{min-height:48px;flex-direction:row}
.tp-dim{color:var(--mut)!important}
/* glance v2 */
.tp-grow{display:flex;align-items:center;gap:34px}
.tp-gdiag{height:250px;width:auto;flex:none}
.tp-gtext{display:flex;flex-direction:column;gap:6px}
.tp-glance .tp-gword{font-size:72px;font-weight:400;line-height:1}
.tp-l1 .tp-gword,.tp-l2 .tp-gword{color:var(--accent)}
.tp-glance .tp-diagram .tn{font-size:15px}
.tile.tp-sample .t-head>span::after{content:'Sample data';white-space:nowrap;margin-left:5px;padding:1px 5px;border-radius:99px;background:rgba(255,255,255,.12);color:var(--head);font-size:8px;letter-spacing:.03em}
.tp-sbanner{display:flex;flex-direction:column;gap:2px;padding:2px 0 8px}.tp-sbanner b{align-self:flex-start;font-size:11px;letter-spacing:.08em;padding:3px 9px;border-radius:99px;background:rgba(255,255,255,.14);color:var(--head)}.tp-sbanner span{font-size:13px;color:var(--mut);margin-top:4px}
.tile.tp-sample .t-head>span{white-space:nowrap;min-width:0}
.tile.tp-sample .t-head{gap:4px}
.tp-gsmp{margin-left:10px;padding:2px 9px;border-radius:99px;background:rgba(255,255,255,.14);color:var(--head);font-size:12px;letter-spacing:.06em;font-weight:600}