/* Rig Route – Next Stop tile + sheet. Uses the host's tokens (--accent, --cool, --txt, --mut, --glass …) from style.css. */
.tile.ns-wide{grid-column:1/-1}
.ns-kind{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;font-weight:650;color:var(--mut);text-transform:uppercase;letter-spacing:.07em}
.ns-kind .ic{width:15px;height:15px;color:var(--accent)}
.ns-name{font-size:19px;font-weight:650;color:var(--head);letter-spacing:-.015em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ns-name.ns-name-lg{font-size:24px}
.ns-main{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.ns-tile .bignum,.ns-hero .bignum{display:flex;align-items:baseline;gap:4px;font-size:48px;font-weight:300;line-height:1;letter-spacing:-.04em;color:var(--head);font-variant-numeric:tabular-nums;margin:4px 0 2px}
.ns-tile .bignum small,.ns-hero .bignum small{font-size:16px;font-weight:550;letter-spacing:0;color:var(--txt)}
.ns-eta{display:flex;align-items:center;gap:7px;padding-bottom:4px}
.ns-eta .ic{width:18px;height:18px;color:var(--mut)}
.ns-eta b{display:block;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.ns-eta small{display:block;font-size:12px;color:var(--mut)}
.ns-fuel{color:var(--txt)}
.ns-fuel .ic{color:var(--mut)}
.ns-dot{color:var(--faint)}
.ns-price b{color:var(--head);font-variant-numeric:tabular-nums}
.ns-price.na{color:var(--mut)}
.ns-fit{display:inline-flex;align-items:center;padding:2px 8px;border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:none}
.ns-fit.fit-yes{background:var(--accent);color:var(--accent-ink)}
.ns-fit.fit-likely{border:1px solid var(--accent-line);color:var(--accent)}
.ns-fit.fit-check{border:1px solid var(--stroke-2);color:var(--mut)}
.ns-chip-topoff{display:inline-flex;padding:2px 8px;border-radius:999px;background:var(--cool,#4fd1dc);color:var(--cool-ink,#06191b);font-size:10.5px;font-weight:750;letter-spacing:.06em}
/* big orange alert */
.ns-alert{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:10px 12px;margin:0 0 6px;background:var(--accent);color:var(--accent-ink);font-size:15px;font-weight:700;line-height:1.3}
.ns-alert .ic{width:22px;height:22px;flex:none;color:var(--accent-ink)}
.ns-alert.lvl1{background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}
.ns-alert.lvl1 .ic{color:var(--accent)}
/* top-off = cyan (the only cyan use) */
.tile.ns-topoff{border-color:var(--cool-line,rgba(79,209,220,.5));background:linear-gradient(160deg,rgba(79,209,220,.16),rgba(79,209,220,.03) 60%),var(--glass)}
.tile.ns-topoff .ns-kind .ic,.ns-hero.topoff .ns-kind .ic{color:var(--cool,#4fd1dc)}
.ns-row.topoff .ns-ri{color:var(--cool,#4fd1dc);border-color:var(--cool-line,rgba(79,209,220,.5))}
.topoff-txt{color:var(--cool,#4fd1dc)!important}
.ns-tile .sub{display:flex;align-items:center;gap:5px;margin-top:4px}
.ns-tile .sub .ic{width:13px;height:13px;color:var(--faint)}
/* sheet */
.ns-hero{border-radius:var(--r-lg,22px);padding:14px;margin:4px 0 6px;background:rgba(255,255,255,.04);border:1px solid var(--stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.ns-hero.topoff{border-color:var(--cool-line,rgba(79,209,220,.5))}
.ns-hero .meta{font-size:13.5px;color:var(--txt);margin-top:4px}
.ns-sec{margin-top:6px}
.ns-kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:8px 0}
.ns-kv div{border-radius:var(--r-md,16px);padding:10px 12px;background:rgba(255,255,255,.04);border:1px solid var(--stroke)}
.ns-kv span{display:block;font-size:10.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.ns-kv b{display:block;font-size:19px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.ns-kv small{display:block;font-size:11.5px;color:var(--mut)}
@media(max-width:380px){.ns-kv{grid-template-columns:1fr 1fr}}
.ns-lead{margin:10px 0 6px;color:var(--txt);font-size:14px}
.ns-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.ns-row{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-md,16px);padding:10px 10px 10px 12px;background:rgba(255,255,255,.04);border:1px solid var(--stroke)}
.ns-ri{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;border:1px solid var(--accent-line);color:var(--accent)}
.ns-ri .ic{width:17px;height:17px}
.ns-rb{flex:1;min-width:0}
.ns-rb b{font-size:15px}
.ns-rb .meta{font-size:12.5px;color:var(--mut);margin-top:2px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.ns-rb .meta .ic{width:13px;height:13px}
.ns-rb .meta.ok{color:var(--txt)} .ns-rb .meta.ok .ic{color:var(--accent)}
.ns-rb .meta.faint{color:var(--faint)}
.ns-go{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid var(--stroke-2);color:var(--accent)}
.ns-go .ic{width:18px;height:18px}
.ns-warn{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;border-radius:var(--r-md,16px);padding:12px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--head);font-size:14px}
.ns-warn .ic{color:var(--accent);width:20px;height:20px;flex:none}
.ns-warn span{flex:1;min-width:200px}
.ns-btns{display:flex;flex-wrap:wrap;gap:8px}
.ns-b{min-height:48px;padding:10px 16px;font-size:15px;font-weight:650;display:inline-flex;align-items:center;gap:6px}
.ns-b.primary{border-radius:14px}
/* CarPlay-style glance (prototype) */
.ns-glance{height:100%;box-sizing:border-box;padding:22px 26px;border-radius:22px;background:rgba(24,24,28,.86);border:1px solid var(--stroke);display:flex;flex-direction:column;gap:6px;color:var(--txt)}
.ns-glance.topoff{border-color:var(--cool-line,rgba(79,209,220,.5))}
.ns-glance .g-alert{display:flex;gap:10px;align-items:center;background:var(--accent);color:var(--accent-ink);border-radius:14px;padding:10px 14px;font-size:22px;font-weight:750}
.ns-glance .g-alert .ic{width:28px;height:28px;color:var(--accent-ink)}
.ns-glance .g-kind{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:650;color:var(--mut);text-transform:uppercase;letter-spacing:.06em}
.ns-glance .g-kind .ic{width:22px;height:22px;color:var(--accent)} .ns-glance.topoff .g-kind .ic{color:var(--cool,#4fd1dc)}
.ns-glance .g-name{font-size:34px;font-weight:700;color:var(--head);letter-spacing:-.02em}
.ns-glance .g-row{display:flex;gap:40px;margin-top:auto}
.ns-glance .g-big{font-size:64px;font-weight:300;color:var(--head);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.ns-glance .g-big small{font-size:20px;font-weight:550;letter-spacing:0;color:var(--txt)}
.ns-glance .g-sub{font-size:18px;color:var(--txt)}
@media (prefers-reduced-motion:reduce){.tile.ns-tile{transition:none}}
.ns-why{font-size:13px;font-weight:650;color:var(--accent)}
.tile .line.ns-fuel{flex-wrap:nowrap;align-items:flex-start;gap:6px}
.tile .line.ns-fuel .ic{margin-top:2px}
.ns-fl{flex:1;min-width:0}
.ns-pet{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;border:1px solid var(--stroke-2);color:var(--txt);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:none}
.ns-pet .ic{width:12px!important;height:12px!important;color:var(--accent)}

/* ---- collapsed half-width tile (same box as Conditions / Elevation) ---- */
.tile.ns-tile .ns-name{font-size:15px;line-height:1.25;-webkit-line-clamp:2;min-height:0}
.tile.ns-tile .bignum{margin:0}
.tile.ns-tile .ns-etaline{color:var(--txt);font-variant-numeric:tabular-nums;white-space:nowrap}
.tile.ns-tile .ns-etaline span{overflow:hidden;text-overflow:ellipsis}
.ns-note{display:flex;align-items:center;gap:5px;margin-top:auto;font-size:12px;color:var(--mut);white-space:nowrap;min-width:0}
.ns-note span{overflow:hidden;text-overflow:ellipsis}
.ns-note .ic{width:13px;height:13px;flex:none;color:var(--faint)}
.ns-note.alert{color:var(--accent);font-weight:700;font-size:12.5px}
.ns-note.alert .ic{color:var(--accent);width:15px;height:15px}
.ns-dot-topoff{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cool,#4fd1dc);margin-right:6px;vertical-align:1px}
.tile.ns-topoff .t-head{color:var(--cool,#4fd1dc)}

/* ---------- Layouts g / h (merged from next-stop-sibling.css) ---------- */
/* Next Stop – sibling variants g/h. Inherits host .tile/.t-head/.bignum/.line/.sub from style.css; only adds what Conditions doesn't have. */
:root{--ns-cool:#4fd1dc;--ns-cool-line:rgba(79,209,220,.45)}
/* undo the classic Next Stop overrides so the host Conditions metrics apply 1:1 (44px/300 number, 13.5px lines, 12px sub) */
.tile.nsv-sib .bignum{display:flex;align-items:center;gap:8px;font-size:44px;font-weight:300;line-height:1;letter-spacing:-.04em;margin:2px 0 4px}
.tile.nsv-sib .bignum small{font-size:14px;font-weight:550;letter-spacing:0;color:var(--txt);margin-left:-4px;align-self:flex-end;padding-bottom:4px}
.tile.nsv-sib .sub{display:block;margin-top:auto}
.ss-ell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile.nsv-sib .line{flex-wrap:nowrap;min-width:0}
.tile.nsv-sib .ss-type{flex:none;color:var(--txt);white-space:nowrap}
/* the symbol: sized like the sun glyph (g) or bigger + duotone on the right (h) */
.ss-sym .d{fill:currentColor;fill-opacity:0}
.tile.nsv-sib .bignum .ss-sym{width:32px;height:32px;stroke-width:1.6;color:var(--head);flex:none}
.tile.nsv-sib .bignum .ss-sym.ss-big{width:46px;height:46px;margin:-3px 0 -3px auto;stroke-width:1.5}
.ss-sym.ss-big .d{fill-opacity:.16}
/* ---- fuel-status colour ladder (palette only) ---- */
.fs-top .ss-sym, .fs-top .bignum.ss-hero{color:var(--ns-cool)!important}
.tile.fs-top{border-color:var(--ns-cool-line)}
.tile.fs-top.ns-topoff{background:linear-gradient(160deg,rgba(79,209,220,.13),rgba(79,209,220,.03) 60%),var(--glass)}
.tile.fs-top .t-head{color:var(--ns-cool)}
.fs-low .ss-sym, .fs-low .bignum.ss-hero{color:var(--accent)!important}
.tile.fs-low{border-color:var(--accent-line)}
.tile.fs-low .ss-l1 b{color:var(--accent)}
/* crit = host .alert-on (orange gradient, orange header + number + glyph) – just make sure our symbol follows */
.fs-crit .ss-sym, .fs-crit .bignum.ss-hero{color:var(--accent)!important}
.tile.fs-crit{box-shadow:0 0 0 1px var(--accent-line),0 0 24px rgba(255,159,10,.18)}
.tile.fs-crit .ss-l1 b{color:var(--head)}
/* ---- panel ---- */
.ss-card,.ss-glance{border-radius:var(--r-xl);padding:16px 16px 14px;background:rgba(255,255,255,.04);border:1px solid var(--stroke,rgba(255,255,255,.10));box-shadow:inset 0 1px 0 rgba(255,255,255,.06);display:flex;flex-direction:column;gap:4px;color:var(--txt)}
.ss-head{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:650;color:var(--mut);text-transform:uppercase;letter-spacing:.09em}
.ss-head span{display:flex;align-items:center;gap:6px}.ss-head .ic{width:15px;height:15px}
.ss-head .ss-state{letter-spacing:.06em}
.ss-herorow{display:flex;align-items:center;gap:12px}
.ss-card .bignum,.ss-glance .bignum{display:flex;align-items:center;gap:10px;font-size:64px;font-weight:300;line-height:1;letter-spacing:-.04em;color:var(--head);font-variant-numeric:tabular-nums;margin:6px 0 6px;flex:1;min-width:0}
.ss-card .bignum small,.ss-glance .bignum small{font-size:18px;font-weight:550;letter-spacing:0;color:var(--txt);align-self:flex-end;padding-bottom:8px;margin-left:-6px}
.ss-card .bignum .ss-sym{width:46px;height:46px;stroke-width:1.5;color:var(--head)}
.ss-card .bignum .ss-sym.ss-big{width:64px;height:64px;margin-left:auto;stroke-width:1.4}
.ss-card .line,.ss-glance .line{font-size:15px;display:flex;align-items:center;gap:6px}
.ss-card .line .ic,.ss-glance .line .ic{width:15px;height:15px;color:var(--mut)}
.ss-card .ss-name{color:var(--head);font-size:17px;font-weight:600}
.ss-card .sub,.ss-glance .sub{font-size:13px;color:var(--mut);margin-top:4px}
.ss-card.fs-top,.ss-glance.fs-top{border-color:var(--ns-cool-line)} .fs-top .ss-head{color:var(--ns-cool)}
.ss-card.fs-low,.ss-glance.fs-low{border-color:var(--accent-line)} .fs-low .ss-head .ss-state{color:var(--accent)}
.ss-card.fs-crit,.ss-glance.fs-crit{border-color:var(--accent-line);background:linear-gradient(160deg,rgba(255,159,10,.20),rgba(255,159,10,.05) 60%),rgba(255,255,255,.03)} .fs-crit .ss-head{color:var(--accent)}
.ss-go{display:inline-flex;align-items:center;justify-content:center;min-width:76px;min-height:48px;padding:0 20px;border-radius:24px;background:rgba(255,255,255,.12);color:var(--head);font-size:17px;font-weight:650;text-decoration:none;flex:none}
.ss-go.alert{background:var(--accent);color:var(--accent-ink)}
.ss-rows{display:flex;flex-direction:column;gap:8px;margin:12px 0 4px}
.ss-row{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 14px;border-radius:var(--r-md);background:rgba(255,255,255,.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);flex-wrap:wrap}
.ss-row>summary{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;cursor:pointer;list-style:none}.ss-row>summary::-webkit-details-marker{display:none}
.ss-ri{display:grid;place-items:center;color:var(--mut)} .ss-ri .ic{width:20px;height:20px}
.ss-rl{font-size:15px;color:var(--txt)} .ss-rv{margin-left:auto;font-size:16px;font-weight:600;color:var(--head);font-variant-numeric:tabular-nums}
.ss-rn{flex-basis:100%;padding-left:30px;font-size:13px;color:var(--mut);margin-top:-6px}
.ss-upd{font-size:14px;color:var(--mut);padding:6px 10px;border-radius:14px;background:rgba(255,255,255,.07)}
.ss-btns{display:flex;gap:8px;width:100%;padding:6px 0 4px}.ss-btns button{flex:1;min-height:48px;border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);color:var(--head);font:600 15px var(--font)}
.ss-foot{font-size:12.5px;color:var(--faint);margin:8px 2px 4px}
/* glance (CarPlay-size) */
.ss-glance{padding:22px 26px;gap:8px;height:100%;box-sizing:border-box}
.ss-glance .ss-head{font-size:16px}.ss-glance .ss-head .ic{width:20px;height:20px}
.ss-glance .bignum{font-size:132px;gap:18px}.ss-glance .bignum small{font-size:30px;padding-bottom:16px}
.ss-glance .bignum .ss-sym{width:92px;height:92px;stroke-width:1.4;color:var(--head)}
.ss-glance .bignum .ss-sym.ss-big{width:128px;height:128px;margin-left:auto;stroke-width:1.3}
.ss-glance .line{font-size:26px;color:var(--head)}.ss-glance .line .ic{width:24px;height:24px}.ss-glance .sub{font-size:20px}
.ss-glance .bignum{flex:none;margin:auto 0}
.ss-glance .bignum{align-items:baseline}.ss-glance .bignum small{align-self:auto;padding-bottom:0}.ss-glance .bignum .ss-sym{align-self:center}