/* ============================================================ The office half: Settings, Money, Customers, Fleet & compliance, Files, and the driver view's dispatcher-side bits. Loaded after tokens.css and the existing stylesheets. Nothing here redefines a token, and nothing here invents a colour. THE SEMANTIC EXTENSION (DESIGN-SEVEN-FEATURES.md §2.1): tokens.css locks rust/green/amber to job types. This file gives the same three hues a SECOND meaning -- severity -- and keeps the two apart by SHAPE, never by hue: job type = the docket spine, or the type pill (existing) severity = a .flag chip, or a .rule left border (here) rust = wrong/overdue/expired, amber = warning/soon/partial, green = right/paid/valid. theme-skip-planner.css already does exactly this for payment status; this codifies it rather than adding a fourth accent to a page that already carries job type plus yellow-as-action. ============================================================ */ /* ---------- severity language ---------- */ .flag{display:inline-flex;align-items:center;gap:5px;font:700 10px var(--font-body); text-transform:uppercase;letter-spacing:.03em;border-radius:5px;padding:3px 8px; border:1px solid transparent;white-space:nowrap;vertical-align:middle} .flag::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none} .flag.nodot::before{display:none} .flag.bad{background:var(--rust-bg);color:var(--rust);border-color:#F0CFC9} .flag.warn{background:var(--amber-bg);color:var(--amber);border-color:#EFDCBC} .flag.good{background:var(--green-bg);color:var(--green);border-color:#C9E4D6} .flag.quiet{background:var(--concrete);color:var(--muted);border-color:var(--line)} .rule{border-left:4px solid var(--line);padding:9px 12px;background:#FAFBFA;border-radius:0 8px 8px 0;margin:10px 0} .rule.bad{border-left-color:var(--rust)} .rule.warn{border-left-color:var(--amber)} .rule.good{border-left-color:var(--green)} .rule p{margin:4px 0 0} .stack{display:flex;flex-direction:column;gap:14px} .mono{font-family:var(--font-mono)} .money-figure{font-family:var(--font-mono);font-weight:600} .money-figure.owed{color:var(--rust)} .money-figure.paid{color:var(--green)} /* ---------- shared page chrome ---------- */ .office-page{padding:20px 24px 48px;min-width:0} .office-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px} .office-head h1{font-family:var(--font-display);font-size:24px;text-transform:uppercase;letter-spacing:.02em;margin:0} .office-head .sub{margin-top:2px} .office-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto} .office-tabs{display:flex;gap:2px;flex-wrap:wrap;margin:4px 0 14px;border-bottom:1px solid var(--line)} .office-tabs button{border:0;background:none;padding:10px 14px;font:700 12.5px var(--font-body); color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px} .office-tabs button.on{color:var(--ink);border-bottom-color:var(--yellow)} .office-tabs button .n{font-family:var(--font-mono);font-weight:500;font-size:11px;opacity:.7;margin-left:5px} .office-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px} .office-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start} .office-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start} @media(max-width:1100px){.office-grid2,.office-grid3{grid-template-columns:1fr}} /* ---------- notifications dropdown ---------- Was a permanent strip across the top of the board; too loud on a screen whose job is the day's work, so it became a count on a bell. */ /* z-index 831 for the same reason as .unplan-dialog below: this panel opens with .live-backdrop, which dispatch.css sets to 825. At the old 96 the backdrop covered the panel, so every click inside the alerts list landed on the backdrop and merely closed it. */ .notifications-drop{position:fixed;top:64px;right:22px;width:400px;max-width:94vw; max-height:70vh;overflow-y:auto;z-index:831;padding:0;box-shadow:0 20px 50px #12181D2A} .notifications-head{display:flex;align-items:center;justify-content:space-between; padding:12px 16px;border-bottom:1px solid var(--line)} .notifications-head h3{margin:0;font-family:var(--font-display);font-size:13px; text-transform:uppercase;letter-spacing:.05em} .notification{display:flex;align-items:center;gap:10px;padding:11px 16px; border-bottom:1px solid var(--line);text-decoration:none;color:inherit;font-size:12.5px;font-weight:600} .notification:hover{background:#FBFCFB} .notification.bad{border-left:4px solid var(--rust)} .notification.warn{border-left:4px solid var(--amber)} .notification .w{flex:1;min-width:0} .notification .n{font-family:var(--font-mono);font-weight:600;color:var(--muted)} .notifications-drop footer{padding:11px 16px} /* ---------- settings ---------- */ .settings-page{padding:20px 24px 48px;min-width:0} .settings-head h1{font-family:var(--font-display);font-size:24px;text-transform:uppercase;margin:0} .settings-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start;margin-top:14px} @media(max-width:900px){.settings-layout{grid-template-columns:1fr}} .settings-nav{padding:8px 0;display:flex;flex-direction:column} .settings-nav button{border:0;background:none;text-align:left;padding:9px 15px; font:600 12.5px var(--font-body);color:var(--muted);cursor:pointer} .settings-nav button:hover{background:#FBFCFB} .settings-nav button.on{background:#FFFBEF;box-shadow:inset 3px 0 0 var(--yellow);color:var(--ink)} /* A signpost to somewhere else, deliberately not dressed as a section: it leaves the page, and looking identical to the nine that don't is how you get someone clicking Back wondering what they broke. */ .settings-nav-away{display:block;margin-top:6px;padding:9px 15px;border-top:1px solid var(--line); font:600 11.5px var(--font-body);color:var(--muted);text-decoration:none} .settings-nav-away:hover{background:#FBFCFB;color:var(--ink)} .settings-body{min-width:0} .settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:10px 0} .settings-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px} .field{display:block;margin-bottom:6px} .field>span{display:block;font:600 10px var(--font-display);letter-spacing:.1em;text-transform:uppercase; color:var(--muted);margin-bottom:5px} .field>span small{text-transform:none;letter-spacing:0;font-weight:400} .field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:8px; padding:8px 10px;font:13px var(--font-body);background:var(--paper);color:var(--ink)} .field textarea{resize:vertical} .checkbox-field{display:flex;gap:10px;align-items:flex-start;margin-top:12px} .checkbox-field input{width:auto;margin-top:3px} .checkbox-field small{display:block;margin-top:3px} /* The SMS set-up banner: the page's job while unconfigured is to be honest and to be a checklist. */ .setup-banner{border-left:4px solid var(--line)} .setup-banner.is-warn{border-left-color:var(--amber);background:#FFFDF7} .setup-banner.is-good{border-left-color:var(--green)} .setup-banner-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .setup-banner-head h2{margin:0} .setup-checklist{margin:10px 0 6px;padding-left:20px;display:flex;flex-direction:column;gap:7px;font-size:13px} .setup-checklist li::marker{font-weight:700;color:var(--muted)} .setup-checklist li.done{color:var(--muted);text-decoration:line-through} .template-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;margin-top:10px} .template-card{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--paper)} .template-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px} .template-toggle{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--muted)} .template-card textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px; font:12.5px/1.5 var(--font-body);background:var(--concrete);resize:vertical} .template-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:7px} .threshold-table input{width:74px;border:1px solid var(--line);border-radius:6px;padding:5px 7px; font-family:var(--font-mono);text-align:right} /* ---------- money ---------- */ .kpi-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px} .kpi{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px 15px; min-width:150px;position:relative;flex:1} .kpi::before{content:"";position:absolute;left:14px;right:14px;top:37px;border-top:1.5px dashed #CBD3CE} .kpi.bad{border-left:4px solid var(--rust)} .kpi.warn{border-left:4px solid var(--amber)} .kpi.good{border-left:4px solid var(--green)} .kpi b{display:block;font:600 20px var(--font-mono)} .kpi span{font:600 9.5px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .kpi small{display:block;color:var(--muted);font-size:11px;margin-top:4px} .office-table{width:100%;border-collapse:collapse;font-size:12.5px;background:var(--paper)} .office-table th{font:600 10px var(--font-display);letter-spacing:.09em;text-transform:uppercase; color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);background:#F7F8F7;white-space:nowrap} .office-table td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle} .office-table tbody tr:hover td{background:#FBFCFB} .office-table td.num{font-family:var(--font-mono);text-align:right;white-space:nowrap} .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px} .linkish{font-weight:700;text-decoration:none;border-bottom:1.5px dotted var(--line);color:inherit} .linkish:hover{border-bottom-color:var(--yellow)} /* the rendered document */ .doc-preview{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:24px; max-width:560px;font-size:12.5px} .doc-preview .dh{display:flex;justify-content:space-between;gap:16px;border-bottom:2px solid var(--ink);padding-bottom:12px} .doc-preview h2{font-family:var(--font-display);font-size:19px;text-transform:uppercase;letter-spacing:.05em;margin:0} .doc-preview table{width:100%;border-collapse:collapse;margin-top:14px} .doc-preview th{font:600 9.5px var(--font-display);letter-spacing:.1em;text-transform:uppercase; color:var(--muted);text-align:left;padding:7px 0;border-bottom:1px solid var(--line)} .doc-preview td{padding:8px 0;border-bottom:1px solid var(--line);vertical-align:top} .doc-preview td.num{text-align:right;font-family:var(--font-mono)} .doc-totals{margin-left:auto;width:240px;margin-top:12px} .doc-totals div{display:flex;justify-content:space-between;padding:4px 0;font-family:var(--font-mono)} .doc-totals .grand{border-top:2px solid var(--ink);margin-top:5px;padding-top:7px;font-weight:700;font-size:14px} .doc-evidence{margin-top:16px;border-left:4px solid var(--green);padding:9px 12px;background:var(--green-bg); border-radius:0 8px 8px 0;font-size:11.5px} /* ---------- fleet & compliance ---------- Section headings inside a tab, the two fleet tables, and the add forms. These replaced a scattering of inline style={{}} objects on the page. */ .office-section{font:600 11px var(--font-display);letter-spacing:.09em;text-transform:uppercase; color:var(--muted);margin:22px 0 0} .office-section:first-child{margin-top:0} .office-section-sub{margin:4px 0 10px;max-width:74ch} .office-section-head{align-items:center;margin:0 0 10px} .office-section-head .office-section{margin:0} .office-note{margin:8px 0 0;font-size:11.5px;max-width:74ch} /* add-a-lorry / add-a-driver: a plain field grid, wide enough for four */ .fleet-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 12px;margin-bottom:12px} @media(max-width:900px){.fleet-form{grid-template-columns:repeat(2,minmax(0,1fr))}} .fleet-form-actions{grid-column:1/-1;margin-top:6px} /* The lorry a driver is on is changed in place -- one control, no dialog. */ .fleet-assign{border:1px solid var(--line);border-radius:7px;padding:5px 8px;background:var(--paper); color:var(--ink);font:inherit;font-size:12px;max-width:170px} .fleet-row-actions{display:flex;gap:6px;white-space:nowrap} .fleet-link{margin-top:5px;word-break:break-all} /* A lorry's own details, edited in a row that opens under it. It is a form in a table cell, so it drops the card border and keeps the field grid. */ .fleet-edit-row>td{background:var(--concrete);padding:12px 14px} .fleet-edit-row .fleet-form{margin-bottom:0} /* Retired: still listed, because past work and its driver point at it, but plainly no longer part of the working fleet. */ .fleet-retired>td{opacity:.6} .fleet-retired>td:last-child{opacity:1} /* The shift, edited where it is read. Small enough to sit in a table cell. */ .fleet-shift{white-space:nowrap} .fleet-shift input{border:1px solid var(--line);border-radius:7px;padding:4px 6px;background:var(--paper); color:var(--ink);font:inherit;font-family:var(--font-mono);font-size:11.5px;width:82px} .fleet-shift span{color:var(--muted);padding:0 2px} /* lorry record: the facts as a definition list, two up */ .lorry-facts{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:4px 0 0} .lorry-facts>div{padding:8px 0;border-bottom:1px solid var(--line)} .lorry-facts>div:nth-last-child(-n+2){border-bottom:0} .lorry-facts dt{font:600 9.5px var(--font-display);letter-spacing:.09em;text-transform:uppercase; color:var(--muted)} .lorry-facts dd{margin:3px 0 0;font-size:13.5px;font-weight:650} .lorry-drivers{list-style:none;margin:6px 0 0;padding:0} .lorry-drivers li{display:flex;justify-content:space-between;gap:10px;align-items:baseline; padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px} .lorry-drivers li:last-child{border-bottom:0} .lorry-drivers span{color:var(--muted);font-size:12px} .lorry-note{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)} /* driver record */ .driver-shift{display:grid;grid-template-columns:1fr 1fr;gap:0 12px} .driver-subhead{margin:18px 0 8px;font:600 10px var(--font-display);letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} .driver-warn{color:var(--rust);margin:0 0 6px} /* ---------- compliance runway ---------- */ .runway{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 18px} .runway-head{margin-bottom:0;align-items:baseline} .runway-head h3{margin:0;font:600 13px var(--font-display);letter-spacing:.05em;text-transform:uppercase} .runway-head .sub{margin-left:auto} /* Nothing expiring: one line, not the full apparatus over an empty band. */ .runway-clear{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px} .runway-clear .sub{margin:0;flex:1;min-width:260px} /* document cards */ .doc-title{margin:0} .doc-meta{margin:3px 0} .doc-state{margin:8px 0 0} .doc-actions{margin-left:0;margin-top:9px} .doc-renew{margin-top:9px} .runway-scale{position:relative;height:24px;margin:12px 0 4px;border-bottom:1px solid var(--line)} .runway-tick{position:absolute;top:0;bottom:0;border-left:1px dashed var(--line); font:500 9.5px var(--font-mono);color:var(--muted);padding-left:4px} .runway-tick.urgent{border-left:2px solid var(--rust);color:var(--rust)} .runway-tick.warn{border-left:2px solid var(--amber);color:var(--amber)} .runway-lane{position:relative;min-height:32px;border-bottom:1px solid #F0F2F0;display:flex;align-items:center} .runway-lane .lane-label{width:150px;flex:none;font:600 11px var(--font-body);color:var(--muted)} .runway-track{position:relative;flex:1;height:30px} .runway-pip{position:absolute;top:5px;height:20px;border-radius:6px;padding:0 8px; font:700 10px var(--font-body);display:flex;align-items:center;white-space:nowrap;cursor:pointer;border:1px solid} .runway-pip.bad{background:var(--rust-bg);color:var(--rust);border-color:#F0CFC9} .runway-pip.warn{background:var(--amber-bg);color:var(--amber);border-color:#EFDCBC} .runway-pip.good{background:var(--green-bg);color:var(--green);border-color:#C9E4D6} .runway-legend{display:flex;gap:14px;flex-wrap:wrap;padding-top:10px;font-size:11.5px;color:var(--muted);align-items:center} /* ---------- files ---------- */ .files-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:14px;align-items:start} @media(max-width:900px){.files-layout{grid-template-columns:1fr}} .facet-list{padding:6px 0} .facet-list h4{font:600 10px var(--font-display);letter-spacing:.1em;text-transform:uppercase; color:var(--muted);padding:10px 15px 5px;margin:0} .facet-list button{display:flex;width:100%;align-items:center;gap:8px;padding:7px 15px;border:0; background:none;font:600 12.5px var(--font-body);color:inherit;cursor:pointer;text-align:left} .facet-list button:hover{background:#FBFCFB} .facet-list button.on{background:#FFFBEF;box-shadow:inset 3px 0 0 var(--yellow)} .facet-list button .n{margin-left:auto;font:500 11px var(--font-mono);color:var(--muted)} .file-drop{border:2px dashed var(--line);border-radius:12px;padding:20px;text-align:center; color:var(--muted);background:var(--paper);font-size:12.5px;margin-top:12px} .file-drop.dragging{border-color:var(--yellow);background:#FFFBEF} .file-type{width:30px;height:34px;border-radius:4px;background:var(--concrete);border:1px solid var(--line); display:inline-flex;align-items:center;justify-content:center;font:700 8.5px var(--font-mono); color:var(--muted);flex:none} /* ---------- customer record ---------- */ .record-head{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px 18px} .record-head h1{font-family:var(--font-display);font-size:23px;text-transform:uppercase;margin:0} .record-facts{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px} .record-fact b{display:block;font:600 17px var(--font-mono)} .record-fact span{font:600 9.5px var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .site-card{border:1px solid var(--line);border-radius:10px;padding:11px 13px;background:var(--paper)} .site-card.live{border-left:4px solid var(--amber)} .kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:12.5px;margin:0} .kv dt{color:var(--muted);white-space:nowrap} .kv dd{margin:0;font-weight:600} /* ---------- message thread ---------- */ .thread{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto;padding:4px} .msg{max-width:86%;border-radius:10px;padding:8px 11px;font-size:12.5px;line-height:1.45} .msg .when{display:block;font:500 10px var(--font-mono);color:var(--muted);margin-top:4px} .msg.out{align-self:flex-end;background:var(--concrete);border:1px solid var(--line)} .msg.in{align-self:flex-start;background:#FFFBEF;border:1px solid #F0E3B8} .msg.pending{border-style:dashed;opacity:.85} .msg-compose{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px} .msg-compose input[type=text]{flex:1;min-width:180px;border:1px solid var(--line);border-radius:8px;padding:8px 10px} /* ---------- evidence chips on the board's dockets ---------- */ .evidence-row{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:3px} .ev{font:600 9.5px var(--font-mono);color:var(--muted);border:1px solid var(--line); border-radius:5px;padding:1px 5px;background:var(--paper);white-space:nowrap} .ev.on{color:var(--green);border-color:#C9E4D6;background:var(--green-bg)} .ev.due{color:var(--rust);border-color:#F0CFC9;background:var(--rust-bg)} .ev.warn{color:var(--amber);border-color:#EFDCBC;background:var(--amber-bg)} /* ---------- today's paperwork panel (board right rail) ---------- */ .paperwork-item{display:flex;align-items:center;gap:9px;padding:9px 14px;border-top:1px solid var(--line);font-size:11.5px} .paperwork-item:first-child{border-top:0} .paperwork-item .w{flex:1;min-width:0} .paperwork-item .w b{display:block;font-size:11.5px} .paperwork-item .w span{color:var(--muted);font-size:10.5px} /* ---------- unplan-the-day dialog ---------- Destructive and rare, so it asks with the real counts and names anything it will refuse to touch. z-index 831 because the backdrop it opens with is .live-backdrop, which is defined in dispatch.css at 825 -- this pair spans two stylesheets with two different numbering scales, and this rule used to say 96. That is BELOW the backdrop, so the backdrop covered the dialog it was meant to sit behind: every click on "Unplan N job(s)" landed on the backdrop instead, whose handler closes the dialog. The dialog shut, nothing was sent, and the board was unchanged -- indistinguishable from a button that does nothing, and invisible to any test that clicks via script, because element.click() bypasses hit-testing entirely. Only a real cursor hits the covering layer. 831 clears .live-backdrop (825) and .live-panel (830), and stays under .reason-drawer (851) and .modal-backdrop (900) so a more urgent modal can still cover this one. */ .unplan-dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:831; width:560px;max-width:94vw;max-height:86vh;overflow-y:auto;padding:20px 22px; box-shadow:0 24px 60px #12181D33} .unplan-dialog h3{font-family:var(--font-display);font-size:17px;text-transform:uppercase; letter-spacing:.04em;margin:0 0 10px} .unplan-dialog p{margin:0 0 9px;font-size:13px;line-height:1.5} .unplan-dialog ul{margin:7px 0 0;padding-left:18px;font-size:12.5px;line-height:1.6} /* ---------- dashboard tweaks (11 Aug) ---------- */ /* The road the skip is standing on. A locality is no use to somebody ringing the council about one specific permit. */ .permit-list .permit-where{display:block;font-size:12.5px;font-weight:600;margin-top:2px} /* The topbar date control, matching the jobs page and the board. */ .topbar .date-nav{display:inline-flex;align-items:center;gap:4px} /* ---------- day outlook tables (11 Aug) ---------- Three panels in one shape: skips out vs back, longest-waiting collections, and who is driving. Tables rather than prose because each is a set of figures a dispatcher scans down a column. */ .os-detail{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px} .os-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:6px} .os-table th{font:600 9.5px var(--font-display);letter-spacing:.08em;text-transform:uppercase; color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap} .os-table td{padding:6px 8px;border-bottom:1px solid #F0F2F0;vertical-align:middle} .os-table tr:last-child td{border-bottom:0} .os-table td:not(:first-child):not(.os-addr):not(.os-date):not(.os-shift){font-family:var(--font-mono)} .os-table td.os-date,.os-table td.os-shift{font-family:var(--font-mono);white-space:nowrap;color:var(--muted)} .os-table td.os-addr{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .os-table tr.short td{background:var(--rust-bg)} .os-table tr.tight td{background:var(--amber-bg)} /* ---------- a page that holds still (11 Aug) ---------- The real reason the filter row moved was the scrollbar: a 50-job day is long enough to scroll and a 1-job day is not, so the viewport changed width by 15px between them and every control shifted with it. Reserving the gutter always costs 15px of width and buys a page whose controls are in the same place whatever the day holds -- which is what makes muscle memory worth anything. Sitewide, because the effect was never specific to Jobs. */ html{scrollbar-gutter:stable} /* ---------- jobs page: a filter row that holds still ---------- The pills carry live counts, so "All 7" one day and "All 127" the next used to change their own width and re-wrap the row -- the Unpaid filter moved to a different line depending on how busy the day was, and muscle memory was worthless. Fixed minimum widths and a tabular count keep every control in the same place whatever the numbers say. */ .jp-tools{row-gap:8px} .jp-tools .jp-pill{min-width:118px;justify-content:center;flex:0 0 auto} .jp-tools .jp-pill .n{font-variant-numeric:tabular-nums;min-width:2.2ch;display:inline-block;text-align:right} .jp-tools .pw-seg{flex:0 0 auto} .jp-tools .jp-search{flex:1 1 220px;min-width:200px} /* A fixed width, not a minimum: a