/* Help and catalogue presentation share the system's semantic tokens. */
.fleetTrailers{margin-top:28px;padding-top:16px;border-top:2px solid var(--line)}.fleetTrailers>[data-add-trailer]{margin-bottom:16px}
.kpiPlain,.kpiMissingData{margin-top:12px;text-align:left;font-size:.88rem;line-height:1.6;color:var(--ink)}.kpiPlain summary,.kpiMissingData summary{cursor:pointer;font-weight:700;color:var(--link)}.kpiMissingData{border:1px solid var(--line);border-radius:8px;padding:10px;background:var(--soft)}.kpiPlain h4{font-size:1em;margin-bottom:0}.kpiPlain .kpiMethod{border-top:1px solid var(--line);margin-top:16px;padding-top:8px}
.biVehicleComparison{padding:18px;margin:20px 0;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--ink)}.comparisonControls{display:flex;flex-wrap:wrap;gap:14px}.comparisonControls label{display:grid;gap:5px}.comparisonTable{max-width:100%;overflow:auto}.comparisonTable table{width:100%;min-width:850px;border-collapse:collapse;font-size:.85rem}.comparisonTable th,.comparisonTable td{padding:12px 10px;border:1px solid var(--line);text-align:left;color:var(--ink);background:var(--panel)}.comparisonTable thead th{background:var(--soft)}.comparisonTable small{display:block;font-weight:400;color:var(--muted)}.comparisonTable .comparisonSelected{background:var(--soft);font-weight:700}.comparisonTable caption{text-align:left;padding:12px 0;color:var(--muted)}
/* Shared plan treatment in every palette; the time layer must survive theme overrides. */
#weekBoard .vehicleLane{background-image:linear-gradient(to bottom,color-mix(in srgb,var(--accent) 17%,transparent) 0,color-mix(in srgb,var(--accent) 17%,transparent) var(--elapsed,0px),transparent var(--elapsed,0px)),repeating-linear-gradient(to bottom,transparent 0,transparent 17px,color-mix(in srgb,var(--line) 35%,transparent) 17px,color-mix(in srgb,var(--line) 35%,transparent) 18px)}
.planScrollTools{min-width:0;max-width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);margin:10px 0}
.planScrollLabel{display:flex;gap:12px;align-items:center;justify-content:space-between;font-size:.85rem}.planScrollLabel button{min-width:44px;min-height:36px;margin-left:6px}
.planTopScroll{overflow-x:scroll;overflow-y:hidden;min-height:22px;width:100%;scrollbar-color:var(--accent) var(--soft)}.planTopScroll>div{height:1px}
.planElapsedLegend{font-size:.8rem;color:var(--muted);margin:7px 0 0}.planElapsedLegend i{display:inline-block;width:16px;height:12px;margin-right:6px;border:1px solid var(--line);background:color-mix(in srgb,var(--accent) 17%,var(--panel))}
#weekBoard .planVehicleCard{padding:12px 10px;text-align:left;border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:10px 10px 0 0;background:linear-gradient(160deg,var(--soft),var(--panel) 60%);display:flex;flex-direction:column;gap:5px}
#weekBoard .planVehicleCard .centerBadge{margin:0 0 3px;font-size:11px;border:0;padding:3px 6px;color:var(--ink)}
#weekBoard .planVehicleCard .planVehicleModel{font-size:14px;min-height:2.5em;line-height:1.25}
#weekBoard .planVehicleCard .flowAsset{margin:0 -3px}#weekBoard .planVehicleCard .flowAsset img{height:90px}#weekBoard .planVehicleCard .flowAsset figcaption{font-size:9px;padding:0}
#weekBoard .planVehicleRegistration{font-size:18px;letter-spacing:.035em}#weekBoard .planVehicleCard .planDriver{font-size:13px;color:var(--ink);font-weight:650}
.planDriverConnection{margin-top:auto;padding-top:6px;border-top:1px solid var(--line);font-size:11px}
#weekBoard .planVehicleCard[role="button"]{cursor:pointer}
#weekBoard .planVehicleCard[role="button"]:hover{border-color:var(--accent)}
#weekBoard .planVehicleCard[role="button"]:focus-visible{outline:3px solid var(--focus);outline-offset:-4px}
.comparisonTable th button{width:100%;white-space:normal;text-align:left;background:transparent;color:var(--link);border:0;padding:6px 0;text-decoration:underline;min-height:44px}
.comparisonTable .comparisonVehicle{white-space:normal;text-align:left;min-height:44px;color:var(--link)}
.comparisonControls{align-items:end;margin-bottom:12px}.comparisonControls input[type="search"]{width:100%;min-width:0}
.comparisonControls .comparisonCheck{display:flex;align-items:center;gap:8px;min-height:44px}.comparisonCheck input{width:auto}
.comparisonTable th[aria-sort="ascending"] button::after{content:' ↑'}.comparisonTable th[aria-sort="descending"] button::after{content:' ↓'}
#flowHelp[open]{display:flex;flex-direction:column;width:min(960px,calc(100vw - 24px));max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);padding:0;border:2px solid var(--line);border-radius:12px;background:var(--help-panel)!important;color:var(--help-ink)!important;overflow:hidden}
#flowHelp [hidden]{display:none!important}
#flowHelp::backdrop{background:#071015b8}
.flowHelpHead{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line);flex-shrink:0;background:var(--help-soft)}
.flowHelpHead h2{margin:0;font-size:1.3rem;color:var(--help-ink)!important}
.flowHelpBody{overflow:auto;padding:16px 20px;overscroll-behavior:contain;line-height:1.65}
.flowHelpBody input{width:100%;margin:6px 0 12px}
.flowHelpTools,[data-help-topics]{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
[data-help-topics] button{flex:1 1 180px;text-align:left;white-space:normal}
[data-help-topics] button[aria-current="true"]{font-weight:800;text-decoration:underline;border:2px solid var(--help-focus)!important}
#flowHelp article{border-top:1px solid var(--line);padding-top:12px;overflow-wrap:anywhere}
#flowHelp article:empty{display:none}
#flowHelp :is(h3,h4),.flowSourceGuide :is(h3,h4){color:var(--help-ink)!important;margin-bottom:6px}
#flowHelp li{margin-bottom:10px}
.flowSourceGuide{padding:12px 0;border-top:1px solid var(--line);color:var(--help-ink);line-height:1.65;overflow-wrap:anywhere}
.flowSourceGuide pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:12px;background:var(--help-soft);color:var(--help-ink);border-radius:6px;font-size:.85rem}
.flowSourceGuide summary{cursor:pointer;display:flex;align-items:center;font-weight:700;text-decoration:underline}
.flowSourceGuide details{padding-top:12px}
#dataMrp>[data-source-help],#dataWeb>[data-source-help]{margin:0 0 12px}
.historyPanel{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}
.historyFields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;margin:14px 0}.historyFields label{display:grid;gap:6px}.historyFields input,.historyFields select{width:100%;min-width:0}
.historyConfirm{display:flex;align-items:flex-start;gap:8px;margin-top:16px}.historyConfirm input{width:auto;margin-top:4px}
.historyTable{overflow:auto;max-width:100%}.historyTable table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}.historyTable th,.historyTable td{text-align:right;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}.historyTable th:first-child{text-align:left}
.biGaugeCard.partial{border-color:var(--accent)}

.fleetBrowser{padding:12px 0}.fleetBrowser>label{display:block;margin-bottom:16px}.fleetBrowser input{width:min(100%,560px);margin-top:6px}
.fleetCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr));gap:16px}
.fleetCard{display:flex;position:relative;flex-direction:column;gap:9px;text-align:left;padding:16px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-top:3px solid var(--accent);min-width:0;white-space:normal;overflow-wrap:anywhere}
.fleetCard:hover{transform:translateY(-2px);box-shadow:0 8px 24px var(--shadow)}.fleetCard strong{font-size:1.4rem;letter-spacing:.025em}.fleetCardAction{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font-weight:700;color:var(--link)}
.fleetCard .centerBadge{margin:0}.fleetCard small{color:var(--muted)}.fleetDetails{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:.85rem;color:var(--muted)}
.flowAsset{display:block;margin:0;position:relative;border-radius:10px;background:radial-gradient(ellipse at 50% 70%,var(--soft),var(--panel) 75%);overflow:hidden}
.flowAsset img{display:block;width:100%;height:170px;object-fit:contain;padding:8px}.flowAsset figcaption,.assetCaption{display:block;font-size:.72rem;color:var(--muted);text-align:center;padding:4px 8px;line-height:1.4}
.flowAsset .assetFallback{display:none;min-height:100px;align-items:center;justify-content:center;text-align:center;padding:16px;color:var(--muted)}
.flowAsset.assetMissing img{display:none}.flowAsset.assetMissing .assetFallback{display:flex}
.fleetDetail .flowAsset{max-width:560px;margin:12px auto 24px}.fleetDetail .flowAsset img{height:220px}
.vehicleHead .flowAsset{margin:6px 0;background:transparent}.vehicleHead .flowAsset img{height:82px;padding:0}.vehicleHead .flowAsset figcaption{font-size:10px}
.vehicleHead .flowAsset .assetFallback{min-height:70px;font-size:11px}
/* Adapt to the card's width, not the viewport: the sidebar and diagram also take space. */
.tyreProduct{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));gap:16px;align-items:center}.tyreProduct>div{min-width:0}.tyreProduct .flowAsset img{height:190px}
.tyreProduct h3{margin:0 0 10px}.tyreState{display:inline-block;border:1px solid var(--line);background:var(--soft);color:var(--ink);padding:6px 10px;border-radius:20px;font-size:.85rem}
.tyreState[data-state="REPAIR"],.tyreState[data-state="RESERVED"]{background:var(--warning-bg);color:var(--warning-ink)}.tyreState[data-state="RETIRED"]{background:var(--danger-bg);color:var(--danger-ink)}
.stockFilters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin:18px 0}.stockFilters label{display:grid;gap:6px;color:var(--muted);font-size:.85rem}.stockFilters input,.stockFilters select{width:100%;min-width:0}
.stockStates{display:flex;flex-wrap:wrap;gap:8px}.stockStates button{display:grid;gap:4px;min-width:110px;flex:1;background:var(--panel)}.stockStates button b{font-size:1.5rem}
.stockCards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(235px,100%),1fr));gap:14px}.stockCard{padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel);display:flex;flex-direction:column;gap:10px}
.stockCard .flowAsset img{height:130px}.stockCard h3,.stockCard p{margin:0}.stockCard small{color:var(--muted)}.stockCard .ops-actions{margin-top:auto}
.stockDetail:not(:empty){border:2px solid var(--accent);padding:18px;border-radius:12px;margin:16px 0;background:var(--panel)}.stockDetail>button{float:right}
@media(max-width:750px){.flowHelpHead{padding:10px;flex-wrap:wrap}.flowHelpBody{padding:12px}#flowHelp[open]{max-height:calc(100dvh - 16px)}.stockFilters{grid-template-columns:1fr}.tyreProduct .flowAsset img{height:145px}}

/* One bounded plan viewport keeps its controls, vehicle labels and clock visible. */
#week .weekShell{position:relative;max-height:78dvh;min-height:320px;overflow:auto;overscroll-behavior:contain;scroll-behavior:auto;scroll-padding-top:calc(var(--plan-toolbar-height,92px) + 56px);isolation:isolate}
#weekBoard>.weekHeader{position:relative;top:auto;z-index:1}
#weekBoard>.planDockedScroll{position:sticky;top:0;left:0;z-index:12;box-sizing:border-box;margin:0;padding:5px 8px;border-radius:0;background:var(--panel);border-top:2px solid var(--accent);border-bottom:1px solid var(--line)}
#weekBoard>.planDockedScroll .planFleetHeading{display:none}
#weekBoard>.planDockedScroll .planElapsedLegend{margin:2px 0 0;font-size:11px}
#weekBoard>.planDockedScroll .planScrollLabel{font-size:12px}
#weekBoard>.planDockedScroll .planScrollLabel button{min-height:30px}
#weekBoard>.planCompactHeader{display:grid;position:sticky;top:var(--plan-toolbar-height,92px);z-index:10;background:var(--panel);border-bottom:2px solid var(--accent)}
.planCompactHeader>div{padding:7px 6px;border-right:1px solid var(--line);box-sizing:border-box;min-width:0;background:var(--panel);color:var(--ink)}
.planCompactHeader b,.planCompactHeader small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.planCompactHeader b{font-size:12px}.planCompactHeader small{font-size:11px;margin-top:3px;color:var(--muted)}
#weekBoard .planCompactTime{position:sticky;left:0;z-index:13;background:var(--panel);font-size:12px;font-weight:800;border-right:2px solid var(--accent)}
#weekBoard .timeAxis{position:sticky;left:0;z-index:6;background:var(--panel);border-right:2px solid var(--accent)}
#weekBoard .timeAxis .hourLabel{background:var(--panel)}
#weekBoard .dayTitle{padding:0}#weekBoard .planPinnedDay{display:block;position:sticky;left:0;width:max-content;max-width:calc(100vw - 30px);padding:8px 12px}
@media(max-height:700px){#week .weekShell{max-height:84dvh}#weekBoard .planVehicleCard{gap:3px!important;padding:8px!important}#weekBoard .planVehicleCard .flowAsset img{height:58px}#weekBoard .planVehicleCard .planVehicleModel{min-height:0}}

/* Fill the visible work area; cards have one compact readable summary. */
body.flow-plan-active .app{padding-bottom:40px}
#week.active .weekShell{max-height:none;min-height:0;box-sizing:border-box}
#weekBoard .planJob[data-plan]{overflow:hidden!important;font-size:13px!important;line-height:1.25!important;min-width:0;padding:5px!important}
#weekBoard .planJob[data-plan] .planJobRoute{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden!important;text-overflow:ellipsis;font-size:13px!important;line-height:1.25!important;word-break:normal;overflow-wrap:break-word}
#weekBoard .planJob[data-plan] small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px!important;line-height:1.3!important}
#weekBoard .planJob[data-plan] small.planJobDay{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:break-word}

/* The working plan keeps its controls compact so the timetable gets the screen. */
body.flow-plan-active.flowReferenceDesign .app>header{min-height:0;padding:7px 12px;gap:8px;align-items:center}
body.flow-plan-active.flowReferenceDesign .app>header .brand{padding:5px 8px;gap:8px}
body.flow-plan-active .app>header .logo{width:30px;height:30px;flex:0 0 30px}
body.flow-plan-active .app>header .brand b{font-size:16px}
body.flow-plan-active .app>header .brand small{display:none}
body.flow-plan-active.flowReferenceDesign .app>header #account{padding:5px 8px;max-width:none}
body.flow-plan-active .app>header .headerIdentity{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:12px;text-align:left}
body.flow-plan-active .app>header .headerIdentity button{margin:0;min-height:36px;padding:7px 10px}
body.flow-plan-active.flowReferenceDesign #week>.titlebar{min-height:0;padding:8px 12px;margin:8px 0;gap:8px}
body.flow-plan-active #week .sectionHeading{flex:1 1 180px;gap:8px}
body.flow-plan-active #week .sectionScene{width:36px;height:36px;flex:0 0 36px}
body.flow-plan-active #week .sectionScene svg{width:30px;height:30px}
body.flow-plan-active #week .sectionHeadingCopy .eyebrow{display:none}
body.flow-plan-active.flowReferenceDesign #week>.titlebar h1{font-size:24px;line-height:1.15;margin:0}
body.flow-plan-active #week>.titlebar>div:not(.sectionHeading):not(.weekControls){display:flex;align-items:center;gap:6px;flex-wrap:wrap}
body.flow-plan-active #week>.titlebar button{min-height:36px;padding:7px 10px;font-size:12px}
body.flow-plan-active.flowReferenceDesign #week>.titlebar .weekControls{padding-top:7px;gap:8px;flex-direction:row;align-items:center;flex-wrap:wrap}
body.flow-plan-active #week .weekControls>div{gap:6px}
body.flow-plan-active.flowReferenceDesign #weekLabel{font-size:16px;flex-basis:auto;order:0}
body.flow-plan-active #week #weekLiveStatus{margin:0;font-size:10px}
body.flow-plan-active #week .weekMaintenanceActions{padding:6px 10px;margin:6px 0;gap:6px;font-size:12px}
body.flow-plan-active #week .weekMaintenanceActions strong{flex-basis:auto}
body.flow-plan-active #week .weekMaintenanceActions button{flex:0 1 auto;min-height:36px;padding:6px 10px;font-size:12px}
body.flow-plan-active #week .planStateLegend{gap:4px;margin:6px 0;font-size:11px}
body.flow-plan-active #week .planStateLegend span{padding:4px 6px}
body.flow-plan-active.flowReferenceDesign #weekBoard>.planDockedScroll{padding:5px 8px;gap:4px 8px}
@media(max-width:750px){
 body.flow-plan-active #week.active .weekShell{min-height:55vh;min-height:55dvh}
 body.flow-plan-active .app>header .brand{flex:0 1 auto}
 body.flow-plan-active.flowReferenceDesign .app>header #account{margin-left:auto;font-size:11px}
 body.flow-plan-active .app>header #flowHelpButton{margin:0;padding:6px 8px;min-height:36px}
 body.flow-plan-active #week>.titlebar>div:not(.sectionHeading):not(.weekControls){width:auto}
 body.flow-plan-active #week>.titlebar .weekControls>div{flex-wrap:wrap}
 body.flow-plan-active #week #weekLiveStatus{flex-basis:100%}
}