/* Service Scope by ANSCRIPT Dealer Solutions: the product's theme layer (rebrand, 2026-10-14). The single source of Service Scope's tokens and shared components. Brand guide, token map and the contract the pages follow: .agents/handoffs/2026-10-23-service-scope-brand.md. Load order on every Service Scope page (service-*.html): appearance.css, base.css, tracker.css, servicescope.css, then the page's own stylesheets and mobile.css. So this file wins over base.css/tracker.css (it redefines their tokens: the existing page CSS inherits the new look) and a page's own stylesheet can still refine a component after it. The ANSCRIPT platform pages (main screen, Shop Manager, console) never load it. The idea: a scope. The mark is a lens ring with crosshair ticks, a centre node and an amber blip on the ring (rebrand from ShopFlow, 2026-10-23, trademark): you look into the shop and see where every car is. The station a car is at now glows Lens cyan. Colour encodes state only, and every state also has a word. Scope #12427A the brand (violet): the mark, the primary action, links, the sheet's band. (The token is still named --sf-petrol: names are never renamed, only values change; the same goes for the other --sf-* names.) Lens #1B7FD4 live or current, nothing else: the station a car is at, the running clock, the tab you're on, the focus ring Amber #FFB020 waiting / needs attention (and the mark's blip) Go green done, ready Late red late, at risk, comeback, danger Epoxy (the ground, a cool lilac grey), Paper (rows and panels), Iron (ink, a deep violet black) Archivo Semi-Expanded for headings, the product name and every figure; Atkinson Hyperlegible Next for text. CONTRACT (stable from the stage 1 checkpoint): the --sf-* tokens and the .sf-* classes below are only ever added to, never renamed. The base.css / tracker.css token names (--ink, --panel, --signal ...) keep their meaning; their values change here. */ /* =================================================================================================================================== 1. Tokens =================================================================================================================================== */ :root{ /* the named palette (--sf-petrol = Scope violet, --sf-flow = Lens cyan: legacy names) */ --sf-petrol:#12427A; --sf-petrol-deep:#0B2D55; /* pressed, hover on petrol, the side sheet's band */ --sf-flow:#1B7FD4; /* live: graphics (nodes, underlines, rings): 3.6:1 on paper, 3.2:1 on epoxy */ --sf-flow-ink:#0F62AD; /* live as text (the running clock): 5.5:1 on paper, 4.9:1 on epoxy */ --sf-amber:#FFB020; --sf-amber-ink:#7A5200; --sf-amber-wash:#FFF1D1; --sf-go:#2E8540; --sf-go-ink:#226B33; --sf-go-wash:#E3F2E6; --sf-late:#C93A2E; --sf-late-ink:#B12F24; --sf-late-wash:#FBE5E2; --sf-epoxy:#F2F5F9; --sf-paper:#FFFFFF; --sf-iron:#0F1E33; /* surfaces and lines */ --sf-raised:#F8FAFC; /* a field, a hovered row */ --sf-track:#E3E9F1; /* the bed of a segmented switch, an empty meter */ --sf-line:#CBD5E1; --sf-line-soft:#E2E8F0; --sf-muted:#4A5B72; /* the app bar (Paper in light, Iron in dark: the band is quiet, the line under it carries the brand) */ --sf-bar-bg:var(--sf-paper); --sf-bar-ink:var(--sf-iron); --sf-bar-muted:#4A5B72; --sf-bar-line:var(--sf-line); --sf-bar-hover:#EAF1FA; /* the mark's two colours (the inline mark in the app bar reads these) */ --sf-mark-path:var(--sf-petrol); --sf-mark-end:#F2A93B; --sf-mark-in:#FFFFFF; /* type */ --sf-font-text:'Atkinson Hyperlegible Next',system-ui,-apple-system,'Segoe UI',sans-serif; --sf-font-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif; /* only the semi-expanded instances are loaded */ /* the scale (px): 12 · 13 · 15 (body) · 17 · 20 · 24 · 30 · 38 */ --sf-t-xs:12px; --sf-t-sm:13px; --sf-t-body:15px; --sf-t-md:17px; --sf-t-lg:20px; --sf-t-xl:24px; --sf-t-2xl:30px; --sf-t-3xl:38px; /* shape: controls 8, panels 14, the things that move (tags, badges, switches, nodes) round */ --sf-r-control:8px; --sf-r-panel:14px; --sf-r-pill:999px; /* spacing, a 4px grid */ --sf-s1:4px; --sf-s2:8px; --sf-s3:12px; --sf-s4:16px; --sf-s5:20px; --sf-s6:24px; --sf-s8:32px; --sf-s10:40px; /* elevation: panels are flat (a hairline); only what floats over the page has a shadow */ --sf-shadow-lift:0 1px 2px rgba(15,30,51,.10),0 1px 1px rgba(15,30,51,.04); --sf-shadow-float:0 18px 40px -12px rgba(11,35,70,.32),0 3px 8px rgba(11,35,70,.10); /* motion */ --sf-ease:cubic-bezier(.2,.7,.2,1); --sf-fast:120ms; --sf-med:220ms; --sf-flow-in:520ms; /* ---- the base.css / tracker.css tokens, redefined: everything the pages already read takes the Service Scope values ---- */ --asphalt:#0A2140; /* (the old ink band: the sign-in cover, the tab badge's ink) */ --concrete:var(--sf-epoxy); --paint:var(--sf-paper); --signal:var(--sf-flow); /* live */ --safety:var(--sf-amber); /* waiting */ --bay:var(--sf-go); /* done */ --flag:var(--sf-late); /* late */ --ground:var(--sf-epoxy); --panel:var(--sf-paper); --raised:var(--sf-raised); --ink:var(--sf-iron); --muted:var(--sf-muted); --line:var(--sf-line); --line-soft:var(--sf-line-soft); --signal-ink:var(--sf-flow-ink); --safety-ink:var(--sf-amber-ink); --safety-wash:var(--sf-amber-wash); --bay-wash:var(--sf-go-wash); --bay-ink:var(--sf-go-ink); --flag-wash:var(--sf-late-wash); --flag-ink:var(--sf-late-ink); --head-bg:var(--sf-petrol-deep); /* (the side sheet's band; the app bar has its own --sf-bar-* tokens) */ --head-ink:#FFFFFF; --head-muted:#C5D8F2; --head-line:rgba(255,255,255,.24); --primary-bg:var(--sf-petrol); --primary-ink:#FFFFFF; --focus:var(--sf-flow-ink); --shadow:rgba(11,35,70,.22); --backdrop:rgba(6,16,32,.55); --bg:var(--ground); --road:var(--sf-flow); --road-ink:var(--sf-iron); --accent:var(--sf-petrol); /* links */ --danger:var(--sf-late-ink); --err-bg:var(--sf-late-wash); --info-bg:#E6F0FC; --arrived:var(--sf-go-ink); --arrived-bg:var(--sf-go-wash); --warn:var(--sf-amber-ink); --warn-bg:var(--sf-amber-wash); --radius:var(--sf-r-control); --radius-lg:var(--sf-r-panel); --font:var(--sf-font-text); --font-cond:var(--sf-font-display); /* tracker.css: the rail and the lap bar */ --rail-off:#7C8DA6; /* a station still ahead (3:1 on the panel; was #9AAAC0 at 2.3:1, 2026-10-25) */ --rail-done:var(--sf-petrol); /* the line the car has travelled */ --lap-a:#0F3A6E; /* the lap bar: two tones of petrol, so neighbours read apart */ --lap-b:#2F6AB3; --lap-ink:#FFFFFF; color-scheme:light; } :root[data-theme="dark"]{ --sf-petrol:#8CBBFF; /* in the dark the brand lifts so it reads; the primary action takes dark ink */ --sf-petrol-deep:#0F2342; --sf-flow:#4DB2FF; --sf-flow-ink:#7CC4FF; --sf-amber:#FFB830; --sf-amber-ink:#FFC95C; --sf-amber-wash:#3A2A06; --sf-go:#5BC27A; --sf-go-ink:#6FD08C; --sf-go-wash:#10301C; --sf-late:#FF7468; --sf-late-ink:#FF8A80; --sf-late-wash:#3D1714; --sf-epoxy:#0A1424; --sf-paper:#111E33; --sf-iron:#E8EEF7; --sf-raised:#16253D; --sf-track:#0C1729; --sf-line:#25395A; --sf-line-soft:#1B2C48; --sf-muted:#9FB0C8; --sf-bar-bg:#08111F; --sf-bar-ink:#E8EEF7; --sf-bar-muted:#A5B5CC; --sf-bar-line:#1D3150; --sf-bar-hover:#13233D; --sf-mark-path:#B7D4FF; --sf-mark-in:#0F2342; /* the scope inside the shield: navy, not white (white on #B7D4FF is 1.5:1; 2026-10-25) */ --sf-shadow-lift:0 1px 2px rgba(0,0,0,.4); --sf-shadow-float:0 18px 44px -10px rgba(0,0,0,.65),0 3px 8px rgba(0,0,0,.35); --asphalt:#0A0818; --ground:var(--sf-epoxy); --panel:var(--sf-paper); --raised:var(--sf-raised); --ink:var(--sf-iron); --muted:var(--sf-muted); --line:var(--sf-line); --line-soft:var(--sf-line-soft); --signal:var(--sf-flow); --signal-ink:var(--sf-flow-ink); --safety:var(--sf-amber); --safety-ink:var(--sf-amber-ink); --safety-wash:var(--sf-amber-wash); --bay:var(--sf-go); --bay-wash:var(--sf-go-wash); --bay-ink:var(--sf-go-ink); --flag:var(--sf-late); --flag-wash:var(--sf-late-wash); --flag-ink:var(--sf-late-ink); --head-bg:var(--sf-petrol-deep); --head-ink:#FFFFFF; --head-muted:#A9C0E3; --primary-bg:var(--sf-petrol); --primary-ink:#0A1626; --focus:var(--sf-flow); --road-ink:#0A1626; --accent:#A9CBFF; --info-bg:#14284A; --shadow:rgba(0,0,0,.55); --backdrop:rgba(0,0,0,.66); --rail-off:#566F96; /* (dark: 3:1; was #3F5577, 2026-10-25) */ --rail-done:#8CBBFF; --lap-a:#6FA6EB; --lap-b:#4F8CD8; --lap-ink:#0A1626; color-scheme:dark; } /* Settings → Appearance → high contrast, in Service Scope's hues (appearance.css sets the navy ones) */ :root:root[data-contrast="high"]{--muted:#2C3C52;--line:#6F8099;--line-soft:#B5C2D3} :root:root[data-contrast="high"][data-theme="dark"]{--ink:#FFFFFF;--muted:#DCE6F3;--line:#5F7CA6;--line-soft:#34507A} /* =================================================================================================================================== 2. The ground and type =================================================================================================================================== */ body{font-family:var(--sf-font-text);font-size:var(--sf-t-body);line-height:1.5;background:var(--ground);color:var(--ink); font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased} h1,h2,h3,h4,legend{font-family:var(--sf-font-display);letter-spacing:-.005em} a{color:var(--accent);text-underline-offset:.18em} :focus-visible{outline:2px solid var(--focus);outline-offset:2px} ::selection{background:color-mix(in srgb,var(--sf-flow) 30%,transparent)} .auth{background:var(--asphalt)} .auth-status{color:#C5D8F2} /* the display face for a figure (a clock, a count, a total): Service Scope's figures are always Archivo, tabular */ .sf-figure{font-family:var(--sf-font-display);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:0} /* =================================================================================================================================== 3. The app bar (js/header.js brand() draws the Service Scope lockup on Service Scope pages; js/tracker-shell.js the tabs and the store) [⌂] | [S Service Scope ▾ / by ANSCRIPT Dealer Solutions] Home My day Board ... [store] [⚙] [⇥] ─────────────────────────────────────────●═══════════───────────────────────────────────────────────────── The bar sits on a hairline: the flow line. The tab you're on is a station on it: a Flow underline with a node at its centre. =================================================================================================================================== */ .app-bar.tk-head{background:var(--sf-bar-bg);color:var(--sf-bar-ink);box-shadow:inset 0 -1px 0 var(--sf-bar-line);min-height:64px; --head-ink:var(--sf-bar-ink);--head-muted:var(--sf-bar-muted);--head-line:var(--sf-bar-line)} .tk-head .ab-home{color:var(--sf-bar-muted);border-right-color:var(--sf-bar-line);border-radius:0;padding:0 12px 0 2px} .tk-head .ab-home:hover{color:var(--sf-bar-ink)} .tk-head .ab-home .ab-logo{display:none} .tk-head .ab-home .ab-mark{display:block} .tk-head .ab-tool-btn{color:var(--sf-bar-ink)} .tk-head .ab-tool-btn:hover,.tk-head .ab-tool-btn[aria-expanded="true"]{background:var(--sf-bar-hover)} /* the lockup: the mark, the name, the byline under it */ .sf-lockup{display:inline-grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left} .sf-lockup .sf-mark{grid-row:1 / span 2;width:30px;height:30px;flex:none} .sf-lockup .nm{grid-column:2;font:700 19px/1 var(--sf-font-display);letter-spacing:-.01em;color:var(--sf-bar-ink)} .sf-lockup .sf-by{grid-column:2;grid-row:2;font:500 11px/1.25 var(--sf-font-text);color:var(--sf-bar-muted);letter-spacing:.01em;white-space:nowrap} .sf-lockup .chev{grid-column:3;grid-row:1 / span 2} .tk-head .ab-tool-btn.sf-lockup{min-height:48px;padding:4px 10px 4px 8px;gap:0;column-gap:10px} .sf-mark .sf-sh{fill:var(--sf-mark-path);stroke:var(--sf-mark-path)} .sf-mark .sf-p{stroke:var(--sf-mark-in)} .sf-mark .sf-n{fill:var(--sf-mark-in)} .sf-mark .sf-en{fill:var(--sf-mark-end);stroke:var(--sf-mark-path)} /* the tabs: stations on the flow line */ .tk-head .ab-tabs{gap:2px} .tk-head .ab-tabs a{position:relative;color:var(--sf-bar-muted);font:600 14.5px/1 var(--sf-font-text);padding:0 12px;border:0;letter-spacing:.005em} .tk-head .ab-tabs a:hover{color:var(--sf-bar-ink);background:linear-gradient(var(--sf-bar-hover),var(--sf-bar-hover)) center/calc(100% - 4px) 36px no-repeat;border-radius:var(--sf-r-control)} .tk-head .ab-tabs a[aria-current="page"]{color:var(--sf-bar-ink);font-weight:700} .tk-head .ab-tabs a:focus-visible{outline-offset:-8px;border-radius:12px} .tk-head .ab-tabs a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--sf-flow);transform-origin:left center} .tk-head .ab-tabs a[aria-current="page"]::before{content:"";position:absolute;left:50%;bottom:-4px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--sf-flow);box-shadow:0 0 0 3px var(--sf-bar-bg);z-index:1} /* the badges: amber pills (new jobs); open help requests are Late red */ .tk-head .tab-badge{border-radius:var(--sf-r-pill);background:var(--sf-amber);color:#2B1D00;font:700 12px/1 var(--sf-font-display);min-width:20px;height:20px;padding:0 6px} .tk-head .tab-badge[data-badge="lanes"],.tk-head .tab-badge[data-badge="advisor"],.tk-head .tab-badge[data-badge="calls"]{background:var(--sf-late);color:#FFFFFF} :root[data-theme="dark"] .tk-head .tab-badge[data-badge="lanes"],:root[data-theme="dark"] .tk-head .tab-badge[data-badge="advisor"],:root[data-theme="dark"] .tk-head .tab-badge[data-badge="calls"]{color:#2A0906} /* the store, Settings and Sign out: quiet outlined controls on the bar */ .tk-head .ah-btn{color:var(--sf-bar-ink);border:1px solid var(--sf-bar-line);border-radius:var(--sf-r-control);background:transparent;font:600 13px var(--sf-font-text)} .tk-head .ah-btn:hover{background:var(--sf-bar-hover);border-color:var(--sf-muted)} /* (the store switcher's own styles are injected by anscript.js after this file: these selectors are one class stronger) */ .tk-head .store-switch .chip{border-radius:var(--sf-r-pill);color:var(--sf-bar-ink);border:1px solid var(--sf-bar-line);font:600 14px var(--sf-font-text)} .tk-head .store-switch .chip::before{background:var(--sf-flow)} .tk-head .store-switch button.chip:hover,.tk-head .store-switch button.chip[aria-expanded="true"]{background:var(--sf-bar-hover);border-color:var(--sf-muted)} .tk-head .store-switch button.chip:focus-visible{outline-color:var(--focus)} .tk-head .store-switch .panel{border-radius:var(--sf-r-panel);box-shadow:var(--sf-shadow-float)} .tk-head .store-switch li[aria-selected="true"]{border-left:3px solid var(--sf-flow)} /* the tool menu floats */ .tk-head .ab-menu{border-radius:var(--sf-r-panel);box-shadow:var(--sf-shadow-float);padding:8px} .tk-head .ab-menu a{border-left:0;border-radius:var(--sf-r-control);position:relative;padding-left:26px} .tk-head .ab-menu a::before{content:"";position:absolute;left:10px;top:16px;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--rail-off)} .tk-head .ab-menu a[aria-current="page"]::before{background:var(--sf-flow);box-shadow:none} .tk-head .ab-menu a b{font:700 15px/1.2 var(--sf-font-display)} /* the signature moment: on a page load the station you're on flows in along the line, once */ @media (prefers-reduced-motion:no-preference){ :root:not([data-motion="reduce"]) .tk-head .ab-tabs a[aria-current="page"]::after{animation:sf-flow-in var(--sf-flow-in) var(--sf-ease) both} :root:not([data-motion="reduce"]) .tk-head .ab-tabs a[aria-current="page"]::before{animation:sf-node-in var(--sf-med) var(--sf-ease) calc(var(--sf-flow-in) - 140ms) both} } @keyframes sf-flow-in{from{transform:scaleX(0)}to{transform:scaleX(1)}} @keyframes sf-node-in{from{transform:scale(0)}60%{transform:scale(1.35)}to{transform:scale(1)}} /* widths: up to 1100px the tabs take their own row (tracker.css); the byline goes first, then the name at a phone's width */ @media (max-width:1240px){ .sf-lockup .sf-by{display:none} .sf-lockup{grid-template-rows:auto} } @media (max-width:1100px){ .app-bar.tk-head{min-height:0} .tk-head .ab-tabs a{padding:12px 11px 13px} .tk-head .ab-tabs a:hover{background-size:calc(100% - 4px) 32px} /* (the tabs' own row scrolls sideways, which would clip a node hanging below it: the underline alone marks the station here) */ .tk-head .ab-tabs a[aria-current="page"]::before{display:none} } /* (a phone: base.css caps the tool button at 52vw and ellipses its name, which cut "Service Scope" to "Service Sc…" at 375px (review 2026-10-23); the lockup may take the row, as the store and the buttons sit on the next one) */ @media (max-width:420px){ .sf-lockup .nm{font-size:17px} .sf-lockup .sf-mark{width:26px;height:26px} .tk-head .ab-tool-btn.sf-lockup{max-width:calc(100vw - 80px);column-gap:8px} } @media (max-width:360px){ .sf-lockup .nm{font-size:15.5px} } /* =================================================================================================================================== 4. Controls =================================================================================================================================== */ .btn{font:600 14px/1.1 var(--sf-font-text);border-radius:var(--sf-r-control);min-height:38px;padding:8px 15px;border:1px solid var(--line);background:var(--panel);color:var(--ink); transition:background-color var(--sf-fast) ease,border-color var(--sf-fast) ease,box-shadow var(--sf-fast) ease} .btn:hover{border-color:var(--muted);background:var(--raised)} .btn:active{transform:translateY(1px)} .btn.primary{background:var(--primary-bg);border-color:var(--primary-bg);color:var(--primary-ink);box-shadow:var(--sf-shadow-lift)} .btn.primary:hover{background:var(--sf-petrol-deep);border-color:var(--sf-petrol-deep)} :root[data-theme="dark"] .btn.primary:hover{background:#B7D4FF;border-color:#B7D4FF} .btn.danger{color:var(--flag-ink)} .btn.danger:hover{border-color:var(--flag-ink);background:var(--flag-wash)} .btn.sm{min-height:30px;padding:4px 11px;font-size:13px} .btn:disabled,.btn[aria-disabled="true"]{opacity:.45;transform:none} /* a quiet text button (no box until hovered) */ .sf-btn-quiet{background:transparent;border-color:transparent;color:var(--accent)} .sf-btn-quiet:hover{background:var(--raised);border-color:transparent} input,select,textarea{font-family:var(--sf-font-text);border-radius:var(--sf-r-control);background:var(--panel);border:1px solid var(--line);min-height:40px;padding:8px 11px} input:hover,select:hover,textarea:hover{border-color:var(--muted)} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sf-flow-ink);background:var(--panel);box-shadow:0 0 0 3px color-mix(in srgb,var(--sf-flow) 28%,transparent)} input[type=checkbox],input[type=radio]{accent-color:var(--sf-petrol)} .field label{font:600 13px var(--sf-font-text);color:var(--muted)} /* the segmented switch (Open | Closed | All): a track with a raised chip for the one that's on */ .seg{border:0;border-radius:var(--sf-r-pill);background:var(--sf-track);padding:3px;gap:2px} .seg button{font:600 13.5px var(--sf-font-text);border-radius:var(--sf-r-pill);padding:6px 14px;min-height:30px;color:var(--muted)} .seg button:hover{color:var(--ink)} .seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);font-weight:700;box-shadow:var(--sf-shadow-lift),inset 0 0 0 1px var(--line-soft)} :root[data-theme="dark"] .seg button[aria-pressed="true"]{background:var(--sf-raised);color:var(--ink)} /* the tags: a state in words, on a pill; the colour only backs the word up */ .tag{border-radius:var(--sf-r-pill);font:700 12px/1 var(--sf-font-text);padding:4px 9px;letter-spacing:.005em} .tag.wait,.tag.mail,.tag.prio{background:var(--safety-wash);color:var(--safety-ink)} .tag.risk,.tag.back{background:var(--flag-wash);color:var(--flag-ink)} .tag.ok{background:var(--bay-wash);color:var(--bay-ink)} .tag.lane,.tag.flag{border-radius:var(--sf-r-pill)} .tag.imp{border-radius:var(--sf-r-pill)} /* a live tag (something happening right now): a Flow node before the word */ .sf-tag-live{background:color-mix(in srgb,var(--sf-flow) 14%,var(--panel));color:var(--signal-ink)} .sf-tag-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sf-flow);margin-right:6px} /* the notice line: a panel with a leading station node in the state's colour */ .notice{border:1px solid var(--line);border-left:0;border-radius:var(--sf-r-control);background:var(--panel);position:relative;padding:10px 14px 10px 32px} .notice::before{content:"";position:absolute;left:13px;top:15px;width:9px;height:9px;border-radius:50%;background:var(--accent)} .notice.err{background:var(--flag-wash);border-color:color-mix(in srgb,var(--flag) 35%,transparent)} .notice.err::before{background:var(--flag)} .notice.ok{background:var(--bay-wash);border-color:color-mix(in srgb,var(--bay) 35%,transparent)} .notice.ok::before{background:var(--bay)} /* the in-page section tabs (Parts: Part orders | Writer stats; SRC: Calendar ...): stations, like the app bar's */ .pt-tabs,.src-tabs{border-bottom:1px solid var(--line)} .pt-tab,.src-tab{font:600 15px var(--sf-font-text);border-bottom:0;position:relative} .pt-tab[aria-selected="true"],.src-tab[aria-selected="true"]{color:var(--ink);font-weight:700} .pt-tab[aria-selected="true"]::after,.src-tab[aria-selected="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--sf-flow)} /* =================================================================================================================================== 5. Panels, rows and queues A panel is Paper on the Epoxy ground with a hairline and the panel radius; no shadow. A row inside it is separated by a soft hairline; a row's state is a 4px rounded edge at its left (late: red, waiting: amber, the open one: Flow). =================================================================================================================================== */ .sf-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--sf-r-panel)} .sf-row{position:relative;padding:12px 16px;border-bottom:1px solid var(--line-soft)} .sf-row:last-child{border-bottom:0} .sf-edge-late::before,.sf-edge-wait::before,.sf-edge-live::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0} .sf-edge-late::before{background:var(--flag)} .sf-edge-wait::before{background:var(--safety)} .sf-edge-live::before{background:var(--sf-flow)} /* a heading over a panel, with its count as a figure */ .sf-sec-head{display:flex;align-items:baseline;gap:10px;margin:0 0 10px} .sf-sec-head h2,.sf-sec-head h3{margin:0;font:700 20px/1.15 var(--sf-font-display)} .sf-count{font:700 20px/1 var(--sf-font-display);font-variant-numeric:tabular-nums;color:var(--muted)} /* the Board's rows (tracker.css) */ .timing{border-radius:var(--sf-r-panel)} .rows .card.at-risk::before{width:4px;top:6px;bottom:6px;border-radius:0 4px 4px 0} .rows .card.on::before{width:4px;top:6px;bottom:6px;border-radius:0 4px 4px 0;background:var(--sf-flow)} .rows .card:hover,.rows .card.on{background:var(--raised)} .card-ro{font:700 15px var(--sf-font-display)} .clock{font:600 20px/1 var(--sf-font-display);letter-spacing:-.01em} .col h2{font:700 15px/1.2 var(--sf-font-display);border-bottom-width:2px} .col .card{border-radius:var(--sf-r-control)} .col .card.at-risk{border-left:4px solid var(--flag)} .col .card.on{border-left:4px solid var(--sf-flow)} .more{border-radius:var(--sf-r-control)} .counts b{font:700 22px/1 var(--sf-font-display)} /* =================================================================================================================================== 6. The flow line (the phase rail): one station per phase, the line the car has travelled in Petrol, the station it's at now a larger Flow node with a halo; a phase that stops the shop's clock is a rounded-square station; now at one of those, Amber. ─●─●─●─◉─○─○─■─○ (tracker-shell.js railHtml draws ; nothing in the markup changes) =================================================================================================================================== */ .rail{display:flex;gap:0;align-items:center;height:14px} .rail i{--ln:var(--rail-off);--nd:var(--panel);--nb:var(--rail-off);--sz:8px; position:relative;flex:1;min-width:0;height:14px;border-radius:0;background:linear-gradient(var(--ln),var(--ln)) left center/calc(100% - 4px) 2px no-repeat} .rail i::after{content:"";position:absolute;right:0;top:50%;width:var(--sz);height:var(--sz);margin-top:calc(var(--sz) / -2);border-radius:50%;background:var(--nd);box-shadow:inset 0 0 0 2px var(--nb)} .rail i.stop{background:linear-gradient(var(--ln),var(--ln)) left center/calc(100% - 4px) 2px no-repeat} .rail i.stop::after{border-radius:2px} .rail i.done{--ln:var(--rail-done);--nd:var(--rail-done);--nb:var(--rail-done);background:linear-gradient(var(--ln),var(--ln)) left center/calc(100% - 4px) 2px no-repeat} .rail i.now{--ln:var(--rail-done);--nd:var(--signal);--nb:var(--signal);--sz:12px;height:14px;background:linear-gradient(var(--ln),var(--ln)) left center/calc(100% - 6px) 2px no-repeat} .rail i.now::after{box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 26%,transparent)} .rail i.now.stop{--nd:var(--safety);--nb:var(--safety);background-color:transparent} .rail i.now.stop::after{box-shadow:0 0 0 3px color-mix(in srgb,var(--safety) 30%,transparent)} .rail-name{font:700 14.5px/1.2 var(--sf-font-display)} @media (prefers-reduced-motion:no-preference){ :root:not([data-motion="reduce"]) .rows.first .rail i.now{animation:none} :root:not([data-motion="reduce"]) .rows.first .rail i.now::after{animation:sf-node-in var(--sf-med) var(--sf-ease) 1} } /* on the side sheet's Petrol band */ .band-rail .rail i{--ln:rgba(255,255,255,.28);--nd:var(--head-bg);--nb:rgba(255,255,255,.4);background:linear-gradient(var(--ln),var(--ln)) left center/calc(100% - 4px) 2px no-repeat} .band-rail .rail i.done{--ln:rgba(255,255,255,.85);--nd:rgba(255,255,255,.85);--nb:rgba(255,255,255,.85);background:linear-gradient(var(--ln),var(--ln)) left center/calc(100% - 4px) 2px no-repeat} .band-rail .rail i.now{--ln:rgba(255,255,255,.85);--nd:#7CC4FF;--nb:#7CC4FF;background:linear-gradient(var(--ln),var(--ln)) left center/calc(100% - 6px) 2px no-repeat} .band-rail .rail i.now.stop{--nd:var(--sf-amber);--nb:var(--sf-amber);background-color:transparent} @media (min-width:1800px){ .rail{height:20px} .rail i,.rail i.now{height:20px} .rail i{--sz:11px} .rail i.now{--sz:16px} } /* the lap bar: petrol segments with rounded ends; a phase that stops the shop's clock has an amber hatched foot */ .lap-bar{gap:3px} .lap-seg{border-radius:6px} .lap-seg:first-child{border-radius:var(--sf-r-control) 6px 6px var(--sf-r-control)} .lap-seg:last-child{border-radius:6px var(--sf-r-control) var(--sf-r-control) 6px} .lap-seg .n{font:700 13px/1.1 var(--sf-font-display)} .lap-seg .m{font:500 12.5px/1.2 var(--sf-font-text)} .lap-seg.stopped::after{height:6px;background:repeating-linear-gradient(135deg,var(--safety) 0 4px,transparent 4px 8px)} .lap-empty{border-radius:var(--sf-r-control)} .lap-head h2,.sheet .lap-head h3{font:700 20px/1.1 var(--sf-font-display)} /* =================================================================================================================================== 7. Tables, dialogs, the side sheet =================================================================================================================================== */ .dt th{font:600 12.5px var(--sf-font-text);color:var(--muted);letter-spacing:.01em} .dt tbody tr:hover td{background:var(--raised)} .block > .tbl-wrap,.block > .empty,.block > .pair-charts,.block > .panel,.strip{border-radius:var(--sf-r-panel)} .strip .v{font:700 32px/1.05 var(--sf-font-display);letter-spacing:-.01em} dialog{border-radius:18px;box-shadow:var(--sf-shadow-float);border:1px solid var(--line-soft)} dialog::backdrop{background:var(--backdrop)} dialog h2{font:700 22px/1.15 var(--sf-font-display)} dialog legend{font:700 14.5px var(--sf-font-display)} .dlg-foot{border-top-color:var(--line-soft)} @media (prefers-reduced-motion:no-preference){ :root:not([data-motion="reduce"]) dialog[open]{animation:sf-dlg-in var(--sf-med) var(--sf-ease)} } @keyframes sf-dlg-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}} dialog.side-sheet{border-radius:18px 0 0 18px;border:0} .sheet-band{background:var(--head-bg)} .band-ro{font:700 30px/1 var(--sf-font-display);letter-spacing:-.01em} .band-close{border-radius:var(--sf-r-pill)} .band-flags .tag.wait,.band-flags .tag.prio,.band-flags .tag.mail{background:var(--sf-amber);color:#2B1D00} .band-clocks b.run{color:#7CC4FF} @media (prefers-reduced-motion:no-preference){ :root:not([data-motion="reduce"]) dialog.side-sheet[open]{animation:tk-slide var(--sf-med) var(--sf-ease)} } /* =================================================================================================================================== 8. Empty, loading and error states: on the left, in words, with the way forward. A dashed station line says "nothing here yet". =================================================================================================================================== */ .empty-state,.sf-empty{padding:20px 18px;color:var(--muted);font-size:14px;text-align:left} .empty-state b,.sf-empty b{display:block;color:var(--ink);font:700 16px/1.25 var(--sf-font-display);margin:0 0 3px} .sf-empty{border:1px dashed var(--line);border-radius:var(--sf-r-panel);background:transparent} .sf-loading{color:var(--muted);font-size:14px;padding:14px 18px;display:flex;align-items:center;gap:10px} .sf-loading::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sf-flow)} @media (prefers-reduced-motion:no-preference){ :root:not([data-motion="reduce"]) .sf-loading::before{animation:sf-pulse 1.2s ease-in-out infinite} } @keyframes sf-pulse{0%,100%{opacity:1}50%{opacity:.3}} .sf-error{padding:12px 16px;border-radius:var(--sf-r-control);background:var(--flag-wash);color:var(--ink);border:1px solid color-mix(in srgb,var(--flag) 35%,transparent)} .msg.err,.msg.bad{color:var(--flag-ink)} /* =================================================================================================================================== 9. Touch screens: every shared control is at least 44px for a thumb =================================================================================================================================== */ @media (pointer:coarse){ .tk-head .ab-tabs a{min-height:44px} /* (R-UX 2026-10-19: every control a thumb taps is 44px, the brand rule: the switches were 40, the guide's close 40 (role-guide.css), the parts cards' RO links 18 and their "who" buttons 31, the Home figures' names 20) */ .seg button{min-height:44px} a.ro,.linklike{display:inline-flex;align-items:center;min-height:44px} .home-strip dt a{display:inline-flex;align-items:center;min-height:44px} } /* =================================================================================================================================== 10. Settings (js/settings.js) opened on a Service Scope page: its band's fields in Service Scope's petrol, not the platform's navy (its own stylesheet hard-codes #14294a / #3a5272 / #071222; found by the system test 2026-10-15). Only here: the platform pages keep theirs. =================================================================================================================================== */ html:root dialog.sg .sg-top{background:var(--sf-petrol-deep)} html:root[data-theme="dark"] dialog.sg .sg-top{background:#08111F;border-bottom-color:var(--line)} html:root dialog.sg .sg-pick{color:#C5D8F2} html:root dialog.sg .sg-pick select,html:root dialog.sg .sg-find{background:#0F3A6E;border-color:#2F6AB3;color:#C5D8F2} html:root dialog.sg .sg-pick select{color:#FFFFFF} html:root dialog.sg .sg-find:focus-within{border-color:var(--sf-flow)} html:root dialog.sg .sg-find input::placeholder{color:#C5D8F2} html:root dialog.sg .sg-close,html:root dialog.sg .sg-close kbd{border-color:#2F6AB3} html:root dialog.sg .sg-close kbd{color:#C5D8F2} html:root dialog.sg .sg-close:hover{border-color:#9AAAC0} /* =================================================================================================================================== 11. The usability layer (redesign 2026-10-24, builder A). Only ever added to: nothing above is renamed. Every screen inherits it; the page stylesheets after this file may still refine a piece. NEW CLASS NAMES for the pages to use (documented here once): .sf-skip the keyboard's skip link (tracker-shell.js draws it; first stop on every page) .sf-page-head a page's top: [.sf-ph-text: h1 (the screen's name) + .sf-purpose (one line: what it is for)] [.sf-ph-actions: the ONE primary button, then quiet ones]. h1 is Archivo 700, clamp(24px..30px); the purpose line 16px muted, <= 64ch. .sf-chip + .live|.wait|.done|.late|.info a state as WORD + SHAPE + colour (live: a lit node, wait: a clock, done: a check, late: a triangle, info: an "i"). (the existing .tag.wait/.risk/.back/.ok/.mail/.prio take the same shapes automatically) .sf-field (+ .invalid) a form field: label above (visible, 14px 600), control, .sf-help (hint) and .sf-error (words + icon, never red alone) .sf-skeleton, .sf-skel-line loading placeholders (a calm shimmer; static under reduced motion) .sf-toast, .sf-toast.ok|.err a floating confirmation, bottom centre, above the phone's tab bar .sf-card, .sf-card.is-link a card with the row anatomy (title, meta, trailing figure) and hover / focus affordance .sf-row.is-link a clickable row: hover, keyboard focus ring inside the row .sf-fig a right-aligned tabular figure in a row or table cell .sf-section a titled block: .sf-sec-head (exists) + .sf-section-note, a line saying what the section is for Phones (<= 640px): the app's tabs become a BOTTOM tab bar (the same