/* Knelsen parts: phone pages. Design language from the mockups (docs/SPEC.md): white paper, ink #0A0A0A, Knelsen green for "go" and for where you are, square corners, no shadows. Storage units are coloured by kind (solid blocks, chips, the sign); section headings sit on light grey bands. */ @font-face { font-family: 'Overpass'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/overpass-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'Overpass'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/overpass-latin-600-normal.woff2) format('woff2'); } @font-face { font-family: 'Overpass'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/overpass-latin-700-normal.woff2) format('woff2'); } @font-face { font-family: 'Overpass'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/overpass-latin-800-normal.woff2) format('woff2'); } @font-face { font-family: 'Overpass Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/overpass-mono-latin-400-normal.woff2) format('woff2'); } @font-face { font-family: 'Overpass Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/overpass-mono-latin-600-normal.woff2) format('woff2'); } /* Overpass draws the middle dot (·) with no width, so "Top · Oil filters" ran together: that one character comes from a system font (whichever the device has), through 'Dot' at the head of --sans. Everything else stays Overpass. */ @font-face { font-family: 'Dot'; src: local('Helvetica Neue'), local('HelveticaNeue'), local('Helvetica'), local('Arial'), local('ArialMT'), local('Roboto'), local('Roboto-Regular'), local('Segoe UI'), local('DejaVu Sans'), local('DejaVuSans'), local('Noto Sans'), local('NotoSans-Regular'), local('Liberation Sans'); unicode-range: U+00B7; } :root { /* step 6: the refreshed look (the South Region reference): ink, two greys for text, hairlines, a light grey side, radii 4px for surfaces and 3px for controls and chips. The old names stay as aliases, so every page follows. */ --ink: #15181B; --ink-2: #4A5159; /* summaries, secondary words */ --ink-3: #626A73; /* counts, column headings, muted text (5.6:1 on white) */ --paper: #FFFFFF; --surface-2: #F6F7F8; --g1: #626A73; /* secondary text (= ink-3) */ --g2: #8A9097; /* thin drawing lines, never text */ --g3: #E1E4E8; /* rules */ --g4: #F1F2F4; /* pressed */ --field: #8B929A; /* the edge of a field, a button, a select */ --line: #C9CED4; /* borders of secondary boxes */ --line2: #E1E4E8; /* hairlines between rows */ --wash: #F6F7F8; /* selected rows, quiet boxes */ --soft: #4A5159; /* softer body text (= ink-2) */ --hover: #C9CED4; /* underlines of text buttons */ --hover2: #626A73; /* hover borders */ --row-hover: #F6F7F8; --row-open: #EEF4FC; --sel-bg: #EEF4FC; --ink-hover: #2A2D31; --ink-press: #333333; --disabled: #9AA0A6; --go-off: #8FB9A9; /* the green button, not usable yet */ --go-off2: #A9C9BC; --cam: #000000; /* behind the camera */ --toast-alert: #FFB3BE; --print-bg: #E4E7EA; --sheet-line: #B8BDC3; --scrim: rgba(10, 12, 14, 0.35); --sign-grey: #C6CBD0; --band: #F6F7F8; /* quiet section bands */ --side: #F1F2F4; /* the desk side menu: light grey */ --side-hover: #E5E8EB; --side-on: #017A53; /* where you are in it: a solid green block */ --chg-bg: #FFF6D6; /* a field changed and not saved yet */ --chg-mark: #C68A00; --green: #017A53; /* go: the one primary button, the route, the target */ --green-d: #015C3E; --brand: #017A53; --focus: #1D64BD; --blue: #2C5784; /* info, on order */ --red: #B92D2D; /* act now, out: always with a triangle and a word */ --amber: #8A5A00; /* low: always with an outlined diamond and a word */ --good: #17703A; --good-bg: #E7F4EB; --good-dot: #1F9D48; --bad: #B92D2D; --bad-bg: #FBEAEA; --bad-dot: #D03B3B; --warn: #8A5A00; --warn-bg: #FDF3DC; --warn-dot: #C98500; /* status tags: a tinted background with the word and its shape */ --st-low: #8A5A00; --st-low-bg: #FDF3DC; --st-out: #B92D2D; --st-out-bg: #FBEAEA; --st-order: #24507E; --st-order-bg: #E6EEF8; --lv-A: #6B3FA0; --lv-B: #8A8F98; --lv-C: #0A0A0A; --lv-D: #FFFFFF; --sans: 'Dot', 'Overpass', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'Overpass Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --r: 4px; /* surfaces */ --rc: 3px; /* controls and chips */ --shadow: 0 12px 40px rgba(20, 24, 28, 0.16); --nav-h: 64px; --safe-b: env(safe-area-inset-bottom, 0px); --toast-h: 0px; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.3; -webkit-tap-highlight-color: transparent; overflow-x: hidden; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--ink); } img { display: block; } h1, h2, h3, p { margin: 0; } ul { list-style: none; margin: 0; padding: 0; } [hidden] { display: none !important; } :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .app { min-height: 100vh; min-height: 100dvh; padding-top: env(safe-area-inset-top, 0px); } #view { display: block; outline: none; padding-bottom: calc(var(--nav-h) + var(--safe-b) + var(--toast-h) + 24px); } body.no-nav #view { padding-bottom: calc(var(--safe-b) + 24px); } /* ---------------------------------------------------------------- type helpers */ .lbl { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--g1); } .mono { font-family: var(--mono); font-weight: 600; } .muted { color: var(--g1); } .nowrap { white-space: nowrap; } .nw { white-space: nowrap; } /* a part number: never broken at its hyphens */ .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------------------------------------------------------------- header */ .hdr { height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 8px 0 16px; border-bottom: 4px solid var(--green); background: var(--paper); } .hdr-left { display: flex; align-items: center; gap: 10px; min-width: 0; } .hdr-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .hdr h1, .hdr .h1 { font-size: 22px; font-weight: 800; line-height: 1; white-space: nowrap; margin: 0; } .hdr .h1.shrink { overflow: hidden; text-overflow: ellipsis; } .back { height: 48px; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; background: none; border: 0; padding: 0; } .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 6px; border: 1.5px solid var(--ink); font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; line-height: 1; white-space: nowrap; } .tagbtn { height: 48px; width: 48px; display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; flex-shrink: 0; } .tagbtn:active { background: var(--g4); } .sync2 { height: 48px; display: flex; align-items: center; gap: 7px; text-decoration: none; color: var(--g1); font-size: 14px; font-weight: 600; white-space: nowrap; } .sync2 .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); flex-shrink: 0; } .sync2.busy .dot { background: var(--amber); } .sync2.off .dot { background: var(--paper); border: 2px solid var(--g1); } .sync2.off, .sync2.busy { color: var(--ink); } .sync2.bad { color: var(--red); font-weight: 700; } .sync2.bad .dot { background: var(--red); } .sync2.compact { font-size: 13px; } .jobbtn { height: 48px; display: flex; align-items: center; background: none; border: 0; padding: 0; color: var(--ink); min-width: 0; text-decoration: none; } .jobbtn .row { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; } .jobbtn .big { font-size: 24px; font-weight: 800; line-height: 1; } .jobbtn .veh { align-self: flex-end; margin-left: 2px; } .jobbtn .wo { margin-left: 8px; } .jobbtn .none { font-size: 18px; font-weight: 800; } @media (max-width: 380px) { .hdr.busy .jobbtn .veh { display: none; } .jobbtn .big { font-size: 22px; } } /* the small menu under the role tag */ .menu { position: fixed; right: 12px; top: calc(56px + env(safe-area-inset-top, 0px)); z-index: 40; width: min(300px, calc(100vw - 24px)); background: var(--paper); border: 1px solid var(--ink); padding: 14px; } .menu .who { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 8px; } .menu .note { font-size: 14px; color: var(--g1); margin-top: 4px; } .menu .btn { margin-top: 8px; border: 0; border-top: 1px solid var(--line2); justify-content: flex-start; padding: 0 2px; font-weight: 700; } .menu .btn:first-of-type { margin-top: 12px; } .scrim { position: fixed; inset: 0; z-index: 39; background: transparent; border: 0; } /* ---------------------------------------------------------------- bottom nav */ #nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--paper); } #nav:empty { display: none; } .nav { height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); background: var(--paper); } .nav a { display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--ink); background: var(--paper); font-size: 18px; font-weight: 700; letter-spacing: 0.03em; } .nav a[aria-current="page"] { background: var(--green); color: var(--paper); font-weight: 800; } /* ---------------------------------------------------------------- buttons and fields */ .btn { min-height: 48px; padding: 0 14px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 16px; font-weight: 800; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .btn.block { width: 100%; } .btn.ink { background: var(--ink); color: var(--paper); } .btn:active { background: var(--g4); } .btn.ink:active { background: var(--ink-press); } .go { width: 100%; height: 60px; background: var(--green); color: var(--paper); border: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; text-decoration: none; } .go.h64 { height: 64px; } .go:active { background: var(--green-d); } .go:disabled { background: var(--go-off); } .go .t { font-size: 24px; font-weight: 800; letter-spacing: 0.01em; white-space: nowrap; } .go .s { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; min-width: 0; } .linkbtn { height: 48px; padding: 0 4px; border: 0; background: none; font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-color: var(--hover); text-underline-offset: 4px; } .field { flex: 1; min-width: 0; height: 56px; border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--paper); } .field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 18px; font-weight: 600; color: var(--ink); padding: 0; height: 100%; } .field input::placeholder { color: var(--g1); opacity: 1; } .field.big input { font-size: 20px; } .field:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .field svg { flex-shrink: 0; } .field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .sq { width: 56px; height: 56px; border: 1px solid var(--line); background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .scanbtn { width: 84px; height: 56px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 800; flex-shrink: 0; padding: 0; } .searchrow { display: flex; gap: 8px; margin: 12px 16px 0; } .searchrow.flush { margin: 0; } /* ---------------------------------------------------------------- location codes: level letter sits on its colour band */ .code { font-weight: 800; line-height: 1; white-space: nowrap; letter-spacing: -0.01em; } .code .dash { padding: 0 0.03em; } .code .lv { position: relative; display: inline-block; } .code .lv::after { content: ''; position: absolute; left: 0.02em; right: 0.02em; bottom: 0.13em; height: max(4px, 0.11em); background: var(--band, var(--g2)); border: 1.5px solid currentColor; } .code.c16 .lv::after, .code.c14 .lv::after { border-width: 1px; } .code .lv-A { --band: var(--lv-A); } .code .lv-B { --band: var(--lv-B); } .code .lv-C { --band: var(--lv-C); } .code .lv-D { --band: var(--lv-D); } .c74 { font-size: 74px; } .c64 { font-size: 64px; } .c26 { font-size: 26px; } .c24 { font-size: 24px; } .c20 { font-size: 20px; } .c16 { font-size: 16px; } .c14 { font-size: 14px; } /* ---------------------------------------------------------------- the location sign: in its unit's colour (black with no location) */ .sign { background: var(--ink); border-radius: 10px; padding: 4px; color: var(--paper); } .sign[data-uc] { background: var(--uc); } .sign[data-uc] .area { border-bottom-color: rgba(255, 255, 255, 0.75); } .sign[data-uc] .foot { color: var(--paper); } .sign-in { border: 2px solid var(--paper); border-radius: 7px; padding: 8px 14px 10px; } .sign .area { font-family: var(--mono); font-size: 15px; font-weight: 600; letter-spacing: 0.1em; padding-bottom: 4px; border-bottom: 1.5px solid var(--sign-grey); } .sign .mid { display: flex; align-items: center; gap: 12px; margin: 4px 0 2px -2px; min-width: 0; } .sign h1 { margin: 0; color: var(--paper); min-width: 0; font-size: inherit; } .sign .code.c74 { font-size: clamp(56px, 19vw, 74px); } .sign .mid.long .code.c74 { font-size: clamp(40px, 12.5vw, 64px); } .sign .mid.xlong .code.c74 { font-size: clamp(30px, 9.5vw, 52px); } .sign .signnames { font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: 0.05em; color: var(--paper); margin: 0 0 6px; overflow-wrap: anywhere; } .sign .nobin { font-size: 50px; font-weight: 800; line-height: 1; letter-spacing: 0.01em; padding: 6px 0 2px; } .sign .what { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; margin-bottom: 4px; } .sign .what .n { font-size: 18px; font-weight: 700; } .sign .what .pn { font-family: var(--mono); font-size: 15px; font-weight: 600; text-transform: uppercase; } .sign .foot { display: flex; align-items: baseline; gap: 12px; font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.03em; color: var(--sign-grey); } .sign .foot .oh { margin-left: auto; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; } .sign .foot .oh b { font-family: var(--sans); font-size: 24px; font-weight: 800; color: var(--paper); letter-spacing: 0; } .sign .foot .from { min-width: 0; } /* ---------------------------------------------------------------- status: shape + word, never colour alone */ /* tags on a tinted background: Low (diamond), Out (triangle), On order (box) */ .st, .stag { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 7px; font-size: 14px; font-weight: 800; white-space: nowrap; line-height: 1; } .stag { height: 24px; font-size: 13px; padding: 0 8px 0 6px; } .st.out, .stag.out { color: var(--st-out); background: var(--st-out-bg); } .st.low, .stag.low { color: var(--st-low); background: var(--st-low-bg); } .st.order, .stag.order { color: var(--st-order); background: var(--st-order-bg); } .st svg, .stag svg { flex-shrink: 0; } .st.out svg path, .stag.out svg path { fill: currentColor; } .st.low svg path, .stag.low svg path { stroke: currentColor; } .st.low svg rect, .stag.low svg rect { fill: currentColor; } .stag.order svg rect, .stag.order svg path { stroke: currentColor; } .stags { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: middle; } .stag.okay { color: var(--green-d); background: #E3F3EC; } .stag.okay svg path { stroke: currentColor; } .stag.verify { color: var(--st-order); background: var(--st-order-bg); } .stag.verify svg circle { stroke: currentColor; } .stag.verify svg rect { fill: currentColor; } .stag.warn { color: var(--st-low); background: var(--st-low-bg); } .stag.plain { color: var(--soft); background: var(--band); } /* a location code as a solid chip in its unit's colour, white text */ .lchip { display: inline-flex; align-items: center; white-space: nowrap; } .lchip[data-uc] { background: var(--uc); color: var(--paper); padding: 4px 9px; } .statusline { margin: 8px 0 0; display: flex; align-items: flex-start; gap: 8px; font-size: 15px; line-height: 1.35; } .statusline svg { margin-top: 2px; flex-shrink: 0; } .statusline .red { color: var(--red); } .statusline .amber { color: var(--amber); } .statusline .blue { color: var(--blue); } .note { margin: 0; min-height: 48px; padding: 8px 12px; background: var(--wash); display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.3; } .note svg { flex-shrink: 0; } .err { color: var(--red); font-weight: 700; } /* ---------------------------------------------------------------- lists */ .sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 10px; background: var(--band); } .sechead h2 { font-size: 19px; font-weight: 800; } .sechead .lbl { color: var(--g1); } .prow { min-height: 92px; display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line2); padding: 10px 0; } .prow .nm { font-size: 17px; font-weight: 700; line-height: 1.2; } .prow .pn { font-family: var(--mono); font-size: 14px; font-weight: 600; text-transform: uppercase; overflow-wrap: anywhere; } /* wraps between brand and number, never cut */ .prow .mid { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .prow .end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .prow .end .stags { margin: 0; } .prow .oh { font-size: 14px; color: var(--g1); white-space: nowrap; } .prow .oh b { color: var(--ink); } .prow .fitsnote { font-size: 13px; color: var(--g1); } /* step 5: a location's names, small, under its code or in the row ("Top · Oil filters") */ .lcn { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--g1); overflow-wrap: anywhere; } .lc .lcn, .pcode .lcn { margin-top: 3px; } .empty { padding: 16px 0; font-size: 16px; color: var(--g1); line-height: 1.4; } .empty b { color: var(--ink); } /* ---------------------------------------------------------------- login (step 6): a login name and a PIN, no names One plain white page at every size: "Knelsen / PARTS ROOM" centred above the login box, nothing else. A phone: near the top. 700px and up: the box gets a thin border. 1024px and up: the brand and the box sit in the middle of the page. Nothing is stuck to the bottom of the screen. */ body.page-login #view { padding-bottom: 0; } .lg { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; } .lg-main { width: 100%; max-width: 472px; margin: 0 auto; padding: 28px 16px 32px; } .lg-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; line-height: 1.1; text-align: center; color: var(--ink); } .lg-brand small { font-size: 14px; font-weight: 700; color: var(--ink-2); } .lg-brand b { font-size: 22px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; } .lg-card h1 { font-size: 30px; font-weight: 800; line-height: 1.1; } .lg-sub { margin-top: 6px; font-size: 15px; color: var(--ink-2); } .lg-who { display: flex; align-items: center; gap: 8px; margin-top: 16px; min-height: 48px; padding: 0 4px 0 14px; border: 1px solid var(--line); border-radius: var(--rc); background: var(--surface-2); } .lg-whoname { font-size: 18px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; } .lg-who .linkbtn { margin-left: auto; color: var(--ink); } .lg-f { margin-top: 16px; } .lg-f label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--ink); } .lg-f input { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--field); border-radius: var(--rc); background: var(--paper); font-size: 18px; color: var(--ink); } .lg-f input::placeholder { color: var(--ink-3); } .lg-f input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); } .lg-f input[aria-invalid="true"] { border-color: var(--bad); } #login-pin { font-family: var(--mono); letter-spacing: 0.3em; } .lg-msg { min-height: 24px; margin: 12px 0 4px; display: flex; align-items: flex-start; gap: 8px; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--ink); } .lg-msg.bad { color: var(--bad); } .lg-msg svg { flex: none; margin-top: 2px; } .lg-go { justify-content: center; height: 56px; border-radius: var(--rc); font-size: 18px; font-weight: 800; letter-spacing: 0.04em; } .lg-help { margin-top: 14px; font-size: 14px; color: var(--ink-2); } .lg-demo { margin-top: 24px; padding: 12px 14px; border: 1px dashed var(--field); border-radius: var(--r); font-size: 14px; line-height: 1.4; color: var(--ink-2); } .lg-demo b { color: var(--ink); } .lg-demo ul { margin-top: 6px; display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 2px 18px; align-items: baseline; } .lg-demo li { display: contents; } .lg-demo .mono { font-size: 15px; color: var(--ink); } .lg-demo .lgpin { color: var(--ink-2); } .lg-demo .r { font-size: 13px; color: var(--ink-3); } @media (min-width: 700px) { .lg-main { padding-top: 64px; } .lg-brand { margin-bottom: 28px; } .lg-brand small { font-size: 15px; } .lg-brand b { font-size: 26px; } .lg-card { padding: 32px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); } } @media (min-width: 1024px) { .lg-main { max-width: 464px; margin: auto; padding: 32px; } } /* ---------------------------------------------------------------- home */ .sec { margin: 20px 16px 0; } .jobcard { min-height: 104px; border: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 8px 14px; text-decoration: none; color: var(--ink); } .jobcard .veh { align-self: flex-end; margin-bottom: 10px; flex-shrink: 1; min-width: 0; } .jobcard .veh img { max-width: 100%; height: auto; } .jobcard .txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .jobcard .num { font-size: 34px; font-weight: 800; line-height: 1; } .jobcard .mm { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jobcard .wo { display: flex; align-items: baseline; gap: 6px; } .jobcard .wo b { font-size: 17px; font-weight: 800; } .jobcard .arr { margin-left: auto; flex-shrink: 0; } .jobcard .pick { font-size: 20px; font-weight: 800; line-height: 1.2; } .bigscan { width: 100%; height: 104px; border: 0; background: var(--green); color: var(--paper); display: flex; align-items: center; gap: 18px; padding: 0 22px; text-align: left; } .bigscan:active { background: var(--green-d); } .bigscan .t { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; } .bigscan .s { font-size: 15px; font-weight: 600; } .bigscan .col { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .findform { margin: 0; display: flex; gap: 8px; } .stack { display: flex; flex-direction: column; gap: 12px; } /* ---------------------------------------------------------------- part / find */ .mapsec { margin: 10px 16px 0; } .mapbox { margin-top: 14px; } .mapcap { margin: 18px 0 0; font-size: 14px; color: var(--g1); } .mapbox.front { margin-top: 6px; } /* a unit seen from the front, framed in its colour */ .mapbox.front[data-uc], .elev[data-uc], .sc-elev[data-uc] { border: 2px solid var(--uc); border-top-width: 12px; padding: 8px 6px 4px; } .mapbox svg { display: block; max-width: 100%; height: auto; margin: 0 auto; } .results-h { margin: 16px 16px 0; } .results-h + ul { margin: 0 16px; } /* ---------------------------------------------------------------- take */ .elev { margin: 8px 16px 0; } .elev svg { display: block; max-width: 100%; height: auto; } .partblock { margin: 10px 16px 0; border-top: 1px solid var(--line); padding-top: 14px; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; align-items: center; } .partblock .col { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .partblock h1 { font-size: 22px; font-weight: 800; line-height: 1.1; } .partblock .pn { font-family: var(--mono); font-size: 16px; font-weight: 600; text-transform: uppercase; } .partblock .loc { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .partblock .loc .muted { font-size: 14px; } .fitline { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.3; } .fitline svg { margin-top: 2px; flex-shrink: 0; } .takeform { margin: 16px 16px 0; display: flex; flex-direction: column; gap: 8px; } .jobboxes { display: grid; grid-template-columns: minmax(0, 1fr) 136px; gap: 8px; } /* the WO box holds 10 characters (main.js shrinks a longer one) */ .unitbox { height: 64px; border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 10px; text-decoration: none; color: var(--ink); min-width: 0; background: var(--paper); text-align: left; } .unitbox .c { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .unitbox .c b { font-size: 20px; font-weight: 800; line-height: 1; } .unitbox .c span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .unitbox .c span.muted { color: var(--g1); } .unitbox .pick { font-size: 18px; font-weight: 800; } .wobox { height: 64px; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; padding: 0 10px; } .wobox input { width: 100%; min-width: 0; border: 0; background: transparent; font-size: 22px; font-weight: 800; color: var(--ink); padding: 0; outline: none; } .wobox:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .wobox.bad { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); } .stepper { display: flex; gap: 8px; } .stepper > button { width: 64px; height: 60px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-size: 34px; font-weight: 800; line-height: 1; flex-shrink: 0; padding: 0; } .stepper > button:active { background: var(--g4); } .stepper label { flex: 1; min-width: 0; height: 60px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; gap: 12px; } .stepper input { width: 72px; border: 0; background: transparent; font-size: 40px; font-weight: 800; color: var(--ink); text-align: center; padding: 0; outline: none; } .stepper label:focus-within { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .hint { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--g1); margin: 2px 0 0; line-height: 1.35; } .hint svg { flex-shrink: 0; } .formerr { font-size: 15px; font-weight: 700; color: var(--red); display: flex; align-items: center; gap: 6px; } /* ---------------------------------------------------------------- unit */ .unitsearch { margin: 12px 16px 0; } .subhead { display: flex; align-items: flex-end; justify-content: space-between; min-height: 30px; margin-top: 8px; } .subhead .r { color: var(--g1); font-size: 13px; } .urows { border-top: 1px solid var(--line); margin-top: 4px; } .urow { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 66px; border: 0; border-bottom: 1px solid var(--line2); background: var(--paper); width: 100%; padding: 6px 0; text-align: left; color: var(--ink); } .urow.nopic { grid-template-columns: minmax(0, 1fr) auto; } .urow .pic { display: flex; align-items: flex-end; justify-content: flex-start; height: 30px; } .urow .c { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .urow .c b { font-size: 24px; font-weight: 800; line-height: 1.05; } .urow .c span { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .urow .c span.muted { color: var(--g1); } .urow .e { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; text-align: right; } .urow .e .wo { display: flex; align-items: baseline; gap: 6px; } .urow .e .wo b { font-size: 20px; font-weight: 800; } .urow .e span { font-size: 13px; color: var(--g1); } .fitunits { margin-top: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .fitunit { min-height: 60px; border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 10px; background: var(--paper); color: var(--ink); text-align: left; min-width: 0; } .fitunit .c { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .fitunit .c b { font-size: 20px; font-weight: 800; } .fitunit .c span { font-size: 13px; color: var(--g1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grow { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto 24px; align-items: center; column-gap: 12px; min-height: 52px; width: 100%; border: 0; border-bottom: 1px solid var(--g3); background: var(--paper); color: var(--ink); padding: 0; text-align: left; } .grow .pic { display: flex; align-items: flex-end; height: 24px; } .grow .n { font-size: 16px; font-weight: 700; } .grow .k { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; } .grow[aria-expanded="true"] .chev { transform: rotate(90deg); } .gunits { padding: 0 0 8px; border-bottom: 1px solid var(--g3); } .chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 0; } .chip { min-height: 48px; min-width: 72px; padding: 0 12px; border: 1px solid var(--line); background: var(--paper); font-size: 18px; font-weight: 800; } .notfleet { margin-top: 10px; display: flex; align-items: center; gap: 10px; min-height: 48px; border: 0; border-top: 1px solid var(--g3); border-bottom: 1px solid var(--g3); width: 100%; background: var(--paper); padding: 0; text-align: left; color: var(--ink); } .notfleet b { font-size: 16px; font-weight: 800; } .notfleet span { font-size: 14px; flex: 1; } .wostep { margin: 12px 16px 0; } .wostep .chosen { display: flex; align-items: center; gap: 12px; padding: 8px 0 12px; border-bottom: 1px solid var(--line); } .wostep .chosen .c { display: flex; flex-direction: column; min-width: 0; } .wostep .chosen b { font-size: 30px; font-weight: 800; line-height: 1; } .wostep .chosen span { font-size: 14px; } .wofield { margin-top: 14px; display: flex; gap: 8px; } .wofield .field input { font-size: 24px; font-weight: 800; } .abc { width: 64px; height: 56px; border: 1px solid var(--line); background: var(--paper); font-size: 14px; font-weight: 700; flex-shrink: 0; } .abc[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .wostep .go { margin-top: 12px; } /* ---------------------------------------------------------------- pulls */ .jobline { margin: 0 16px; min-height: 76px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); } .jobline .veh { align-self: flex-end; margin-bottom: 14px; flex-shrink: 0; } .jobline .c { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .jobline .top { display: flex; align-items: baseline; gap: 12px; white-space: nowrap; } .jobline .top b { font-size: 22px; line-height: 1; } .jobline .top b.wo { font-size: 18px; margin-left: -6px; } .jobline .mm { font-size: 14px; color: var(--g1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .jobline .chg { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 15px; font-weight: 700; } .day { margin: 22px 16px 0; } .dayh { display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; background: var(--band); } .dayh .sent { display: flex; align-items: center; gap: 6px; } .pull { min-height: 76px; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; border-bottom: 1px solid var(--line2); padding: 8px 0; } .pull.today { grid-template-columns: 64px minmax(0, 1fr) auto; min-height: 88px; } .pull .c { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .pull .nm { display: flex; align-items: center; gap: 7px; font-size: 16px; font-weight: 600; flex-wrap: wrap; } .pull.today .nm { font-size: 17px; } .pull .nm .x { font-weight: 800; } .pull .pn { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; } .pull .pn .from { color: var(--g1); font-weight: 400; text-transform: none; } .pull .when { font-size: 14px; color: var(--g1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pull .qty { font-size: 16px; font-weight: 700; white-space: nowrap; color: var(--soft); } .pull .flag { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--g1); } .pull .flag.red { color: var(--st-out); background: var(--st-out-bg); padding: 2px 7px 2px 5px; } .pull .flag.blue { color: var(--st-order); background: var(--st-order-bg); padding: 2px 7px 2px 5px; } .pull.undone .nm, .pull.undone .pn { text-decoration: line-through; text-decoration-thickness: 2px; } .undo { width: 104px; height: 64px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0; } .undo .u { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; } .undo .until { font-size: 13px; font-weight: 600; color: var(--g1); } .undo:active { background: var(--g4); } .footnote { margin: 10px 0 0; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--g1); line-height: 1.35; } .footnote svg { flex-shrink: 0; } .returnsec { margin: 24px 16px 0; } .retbtn { width: 100%; height: 64px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); color: var(--ink); display: flex; align-items: center; gap: 14px; padding: 0 4px; text-decoration: none; } .retbtn .t { font-size: 20px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; } .retbtn .lbl { margin-left: auto; } .reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .reasons button { min-height: 52px; border: 1px solid var(--line); background: var(--paper); font-size: 16px; font-weight: 800; padding: 4px 8px; } .reasons button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } /* ---------------------------------------------------------------- toast (undo) */ #toast { position: fixed; left: 8px; right: 8px; bottom: calc(var(--nav-h) + var(--safe-b) + 8px); z-index: 30; } body.no-nav #toast { bottom: calc(var(--safe-b) + 8px); } #toast:empty { display: none; } .toast { background: var(--ink); color: var(--paper); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; min-height: 64px; } .toast .c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .toast .c b { font-size: 18px; font-weight: 800; } .toast .c span { font-size: 14px; color: var(--sign-grey); line-height: 1.3; } .toast .ubtn { height: 48px; min-width: 88px; border: 2px solid var(--paper); background: var(--ink); color: var(--paper); font-size: 16px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; flex-shrink: 0; } .toast .xbtn { width: 48px; height: 48px; border: 0; background: none; color: var(--paper); display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; } .toast.plain { min-height: 56px; } /* ---------------------------------------------------------------- scanner */ .scan { position: fixed; inset: 0; z-index: 50; background: var(--cam); color: var(--paper); display: flex; flex-direction: column; } .scan .bar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; border-bottom: 2px solid var(--paper); padding-top: env(safe-area-inset-top, 0px); box-sizing: content-box; } .scan .bar h2 { font-size: 22px; font-weight: 800; } .scan .bar button { height: 48px; min-width: 48px; border: 2px solid var(--paper); background: var(--cam); color: var(--paper); font-size: 15px; font-weight: 800; padding: 0 12px; } .scan .cam { position: relative; flex: 1; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .scan video { width: 100%; height: 100%; object-fit: cover; } .scan .frame { position: absolute; width: 64vw; max-width: 280px; aspect-ratio: 1; border: 4px solid var(--paper); } .scan .msg { position: absolute; left: 16px; right: 16px; bottom: 16px; font-size: 16px; line-height: 1.4; text-align: center; } .scan .msg.box { background: var(--cam); padding: 10px; border: 2px solid var(--paper); } .scan .type { background: var(--paper); color: var(--ink); padding: 12px 16px calc(16px + var(--safe-b)); } .scan .type form { display: block; } .scan .type .lbl { display: block; margin-bottom: 6px; } .scan .tools { display: flex; gap: 8px; } /* ---------------------------------------------------------------- full-page messages */ .center { margin: 32px 16px 0; } .center h1 { font-size: 28px; font-weight: 800; line-height: 1.15; } .center p { margin-top: 12px; font-size: 17px; line-height: 1.45; } .center .go, .center .btn { margin-top: 20px; } .center code { font-family: var(--mono); font-size: 15px; background: var(--g4); padding: 1px 4px; } .loading { margin: 40px 16px; font-size: 18px; font-weight: 700; } /* ---------------------------------------------------------------- small layout bits */ .gh-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; } .small { font-size: 13px; } .sec.stack { margin-top: 14px; } .sec.fitsec { margin-top: 30px; } .sec.signsec { margin-top: 12px; } .gobtn { margin-top: 8px; } .sechead.gap { margin-top: 18px; } .results { margin-top: 14px; } .unitsearch { margin: 12px 16px 0; } .unitlists { margin: 0 16px; } .endwrap { display: flex; align-items: center; gap: 10px; } .fitsh { margin-top: 14px; } .allh { margin-top: 16px; padding: 8px 10px; background: var(--band); font-size: 20px; font-weight: 800; } .wostep .other { margin-top: 12px; } .reasonset { border: 0; margin: 4px 0 0; padding: 0; min-width: 0; } .reasonset legend { padding: 0; margin-bottom: 6px; } .other-why { margin-top: 8px; } .pulls-list .day:first-child { margin-top: 16px; } .view-pulls { display: flex; flex-direction: column; min-height: calc(100vh - 58px); min-height: calc(100dvh - 58px - env(safe-area-inset-top, 0px)); } .view-pulls .returnsec { margin-top: auto; padding-top: 24px; } .statusline .btn { margin-top: 6px; } .day ul + .note { margin-top: 8px; } @media (max-width: 370px) { .hdr h1, .hdr .h1 { font-size: 20px; } .go .t { font-size: 22px; } .bigscan { gap: 14px; padding: 0 16px; } } .hdr .h1.long { font-size: 19px; } @media (max-width: 370px) { .hdr .h1.long { font-size: 17px; } } #wo-hint { margin-top: 6px; } .toast .c b.row { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--toast-alert); } .toast.compact { min-height: 56px; padding: 4px 4px 4px 14px; } .toast.compact .c b { font-size: 16px; } .toast.compact .c span { font-size: 13px; } @media (max-width: 370px) { .sign-in { padding: 8px 10px 10px; } .sign .foot { letter-spacing: 0; gap: 8px; } .jobboxes { grid-template-columns: minmax(0, 1fr) 128px; } .unitbox img { width: 52px; height: auto; } .undo { width: 96px; } .pull.today { column-gap: 10px; } } .urow .e .wo { color: var(--ink); } .urow .e .wo .lbl { color: var(--ink); } .sr:focus { position: fixed; left: 8px; top: 8px; z-index: 60; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; padding: 12px 16px; background: var(--paper); border: 1px solid var(--ink); font-weight: 800; } .hdr-left { flex: 1 1 auto; overflow: hidden; } @media (max-width: 419px) { .hdr.busy .jobbtn .veh { display: none; } } @media (max-width: 370px) { .pull.today { grid-template-columns: 48px minmax(0, 1fr) auto; } .pull.today img { width: 48px; height: 48px; } .pull.today .nm { font-size: 16px; } } @media (max-width: 370px) { .fitunit img { width: 40px; height: auto; } } /* While a full-screen sheet is open, a message sits at the bottom, just above the sheet's foot bar (its height is --sheet-foot, set by js/ui.js; 0 for a sheet with no foot), never over the sheet's fields or its buttons. Opening a sheet clears the page's message (main.js). While the menu drawer is open, messages wait behind it. */ html.layer-open #toast { z-index: 50; top: auto; bottom: calc(max(var(--sheet-foot, 0px), env(safe-area-inset-bottom, 0px)) + 8px); } html.drawer-open #toast { display: none; } /* ---------------------------------------------------------------- a unit's parts, by category, folded (js/unit-parts.js): Find with a unit number, the Parts search, the unit page. The card: the drawing and the number big, the model, the group and location, the summary. Each category is a
: its drawing, name, count, Low / Out, a chevron. */ .uparts { margin-top: 4px; } .uhead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; row-gap: 6px; padding: 12px 0 14px; border-bottom: 2px solid var(--ink); } .uh-veh { display: flex; align-items: flex-end; justify-content: center; min-width: 96px; } .uh-veh img { max-width: 132px; height: auto; } .uh-nodraw { display: flex; align-items: center; justify-content: center; width: 104px; height: 56px; border: 1px dashed var(--g2); font-size: 13px; font-weight: 700; color: var(--g1); } .uh-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .uh-k { font-size: 13px; font-weight: 700; color: var(--g1); letter-spacing: 0.04em; text-transform: uppercase; } .uh-num { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; } .uh-mm { font-size: 16px; font-weight: 700; } .uh-unknown { color: var(--st-low); } .uh-g { font-size: 14px; color: var(--g1); } .uh-sum { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 16px; font-weight: 700; } .uh-sum svg { vertical-align: -2px; margin-right: 3px; } .uh-low { color: var(--st-low); } .uh-out { color: var(--st-out); } .usep { color: var(--g1); } .uhead .uh-link { grid-column: 1 / -1; justify-self: start; padding-left: 0; } .ugroups { display: flex; flex-direction: column; } .ugroup { border-bottom: 1px solid var(--line); } .ugroup > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 20px; align-items: center; column-gap: 12px; min-height: 64px; padding: 8px 4px 8px 0; } .ugroup > summary::-webkit-details-marker { display: none; } .ugroup > summary img { width: 40px; height: 40px; } .ugroup > summary:active { background: var(--wash); } .ug-t { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; min-width: 0; } .ug-name { font-size: 19px; font-weight: 800; } .ug-n { font-size: 19px; font-weight: 800; color: var(--g1); font-variant-numeric: tabular-nums; } .ug-every { flex-basis: 100%; font-size: 14px; font-weight: 600; color: var(--g1); } .ug-marks { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .ug-chev { width: 10px; height: 10px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg); margin: -4px auto 0; transition: transform 0.12s; } .ugroup[open] > summary .ug-chev { transform: rotate(-135deg); margin-top: 4px; } @media (prefers-reduced-motion: reduce) { .ug-chev { transition: none; } } .ugroup[open] > summary { border-bottom: 1px solid var(--line2); } .ug-list { padding: 0 0 6px; } .ug-row { display: flex; align-items: center; gap: 8px; } .ug-row > .prow { flex: 1; min-width: 0; } .ug-rm { flex: none; } /* a phone: Remove under the row's bin and stock, so the name and the number keep the width */ @media (max-width: 599.98px) { .ug-row.has-rm { flex-wrap: wrap; row-gap: 0; border-bottom: 1px solid var(--line2); } .ug-row.has-rm > .prow { flex-basis: 100%; border-bottom: 0; padding-bottom: 0; } .ug-row.has-rm > .ug-rm { margin: -12px 0 2px auto; padding-right: 0; } } .ug-foot { margin: 12px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; color: var(--g1); line-height: 1.4; } .ug-foot .tbtn { padding-left: 0; font-size: 15px; } /* step 5: a unit narrowed by words ("7759 filters"): a smaller card, the groups open, "See all of 7759's parts" */ .uhead.compact { padding: 8px 0 10px; column-gap: 12px; } .uhead.compact .uh-veh { min-width: 72px; } .uhead.compact .uh-veh img { max-width: 84px; } .uhead.compact .uh-nodraw { width: 72px; height: 40px; font-size: 12.5px; } .uhead.compact .uh-k { display: none; } .uhead.compact .uh-num { font-size: 28px; } .uhead.compact .uh-mm { font-size: 15px; } .uhead.compact .uh-g { display: none; } .ug-none { margin: 14px 0 4px; font-size: 16px; line-height: 1.4; } .uparts .ug-all { margin: 8px 0 0; padding-left: 0; font-size: 16px; min-height: 48px; display: inline-flex; align-items: center; background: none; border: 0; color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; } /* unit suggestions on Find ("61": 6102, 6148, ...) */ .usugs { display: grid; grid-template-columns: minmax(0, 1fr); } .usug { width: 100%; display: grid; grid-template-columns: 72px auto minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 56px; padding: 4px 0; border: 0; border-bottom: 1px solid var(--line2); background: var(--paper); color: var(--ink); text-align: left; } .usug:active { background: var(--wash); } .usug-veh { display: flex; align-items: flex-end; justify-content: flex-start; height: 30px; } .usug-veh img { max-width: 64px; height: auto; } .usug-n { font-size: 22px; font-weight: 800; } .usug-m { font-size: 14px; line-height: 1.3; color: var(--g1); overflow-wrap: anywhere; } /* the job card's "Parts for 6148" */ .jobparts { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 14px; border: 1px solid var(--line); border-top: 0; text-decoration: none; color: var(--ink); font-size: 16px; font-weight: 800; } .jobparts:active { background: var(--g4); } /* ---- step 6: truck drawings (js/trucks.js, from Denys's South Region app). The reference injected these as a