/* Inter (variable, Latin subset, weights 100-900), served locally so the app works without internet (OFL, see fonts/OFL.txt) */ @font-face{font-family:Inter;font-weight:100 900;font-style:normal;font-display:swap;src:url(/static/fonts/inter-latin.woff2) format("woff2")} /* Tokens. Dark is the default. Light is the [data-theme=light] block, repeated for "system" when the OS is light, because CSS cannot share one rule between a selector and a media query; the tests keep both copies identical. */ :root{ --top-h:60px; /* the sticky header's height, measured by core.js (fitTop) */ /* Material 3 roles on Verkly's own palette (owner, 2026-10-16: keep the grey-blue base): the neutral surfaces are the grey-blue ones from before, the primary is the workshop's amber. The old names keep working and carry the M3 roles: --bg surface, --panel surface-container-low, --ink on-surface, --muted on-surface-variant, --line outline-variant, --field outline, --accent primary. */ color-scheme:dark; --bg:#12171A; --panel:#1C2429; --ink:#E3E8EA; --muted:#93A0A6; --line:#2B3840; --field:#5C6C74; --accent:#E09A2B; --accent-ink:#241A06; --accent-text:#E8A93F; --tape-bg:#F3F3EC; --tape-ink:#15181A; --ok:#5DBB8E; --on-ok:#0B2418; --bad:#E07A68; --on-bad:#161C1F; --ok-bg:#254036; --ok-ink:#86D9AF; --warn-bg:#43361C; --warn-ink:#F0BC63; --bad-bg:#472925; --bad-ink:#F0A090; --info-bg:#1F3550; --info-ink:#8DBCF0; --mute-bg:#2B353B; --mute-ink:#A9B6BC; --card-border:#2B3840; --card-shadow:none; --md-primary-container:#4A3410; --md-on-primary-container:#FBDDB0; --md-secondary-container:#2C3E48; --md-on-secondary-container:#CFE4EF; --md-surface-lowest:#0E1316; --md-surface-container:#161C20; --md-surface-high:#242F35; --md-surface-highest:#2B353B; --md-inverse-surface:#E3E8EA; --md-inverse-on-surface:#1F272B; --md-inverse-primary:#8A5300; --md-scrim:rgba(0,0,0,.55); --tour:#4CC2FF; --tour-glow:rgba(76,194,255,.38); --tour-ink:#03233A; /* shape, type and motion scales of M3 */ --shape-xs:4px; --shape-s:8px; --shape-m:12px; --shape-l:16px; --shape-xl:28px; --shape-full:999px; --ease:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.05,.7,.1,1); --dur:200ms; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } :root[data-theme="light"]{ color-scheme:light; --bg:#EDF0F2; --panel:#FFFFFF; --ink:#1C262B; --muted:#5D6A71; --line:#DCE2E5; --field:#8A979E; --accent:#E09A2B; --accent-ink:#241A06; --accent-text:#8A5300; --tape-bg:#15181A; --tape-ink:#F6F6F0; --ok:#2F7A58; --on-ok:#FFFFFF; --bad:#B0412F; --on-bad:#FFFFFF; --ok-bg:#D9EFE4; --ok-ink:#1C5E41; --warn-bg:#FBEACB; --warn-ink:#7A4B04; --bad-bg:#F8DCD6; --bad-ink:#8A2C1C; --info-bg:#DCEAF9; --info-ink:#1D4C83; --mute-bg:#E4E9EC; --mute-ink:#46535A; --card-border:#D5DCE0; --card-shadow:none; --md-primary-container:#FBEACB; --md-on-primary-container:#7A4B04; --md-secondary-container:#D3E3EC; --md-on-secondary-container:#1B3340; --md-surface-lowest:#FFFFFF; --md-surface-container:#E5EAED; --md-surface-high:#DFE5E8; --md-surface-highest:#D8DFE3; --md-inverse-surface:#2B353B; --md-inverse-on-surface:#EDF0F2; --md-inverse-primary:#E8A93F; --md-scrim:rgba(0,0,0,.32); --tour:#0A6CBF; --tour-glow:rgba(10,108,191,.32); --tour-ink:#FFFFFF; } @media (prefers-color-scheme:light){ :root[data-theme="system"]{ color-scheme:light; --bg:#EDF0F2; --panel:#FFFFFF; --ink:#1C262B; --muted:#5D6A71; --line:#DCE2E5; --field:#8A979E; --accent:#E09A2B; --accent-ink:#241A06; --accent-text:#8A5300; --tape-bg:#15181A; --tape-ink:#F6F6F0; --ok:#2F7A58; --on-ok:#FFFFFF; --bad:#B0412F; --on-bad:#FFFFFF; --ok-bg:#D9EFE4; --ok-ink:#1C5E41; --warn-bg:#FBEACB; --warn-ink:#7A4B04; --bad-bg:#F8DCD6; --bad-ink:#8A2C1C; --info-bg:#DCEAF9; --info-ink:#1D4C83; --mute-bg:#E4E9EC; --mute-ink:#46535A; --card-border:#D5DCE0; --card-shadow:none; --md-primary-container:#FBEACB; --md-on-primary-container:#7A4B04; --md-secondary-container:#D3E3EC; --md-on-secondary-container:#1B3340; --md-surface-lowest:#FFFFFF; --md-surface-container:#E5EAED; --md-surface-high:#DFE5E8; --md-surface-highest:#D8DFE3; --md-inverse-surface:#2B353B; --md-inverse-on-surface:#EDF0F2; --md-inverse-primary:#E8A93F; --md-scrim:rgba(0,0,0,.32); --tour:#0A6CBF; --tour-glow:rgba(10,108,191,.32); --tour-ink:#FFFFFF; } } *{box-sizing:border-box} [hidden]{display:none !important} /* a class that sets display (form.grid, .bar) must not override hidden */ html{-webkit-text-size-adjust:100%;touch-action:manipulation} /* no double-tap zoom on a quick second tap; pinch still zooms */ /* The page never pans sideways on a phone. `clip`, not `hidden`: hidden would make body a scroll container and unstick the sticky header. Wide things (a drawer map, a table) scroll inside their own wrapper. */ html,body{overflow-x:clip} body{margin:0;background:var(--bg);color:var(--ink);accent-color:var(--accent); font:16px/1.45 Inter, system-ui, sans-serif; padding-bottom:calc(76px + env(safe-area-inset-bottom))} /* On a phone the body scrolls, not the document (owner, 2026-10-22, Chrome on an iPhone): a scrolling document makes the browser hide its toolbars, and WebKit then leaves a bottom:0 bar hanging where they were. With the document still, the toolbars stay and the tab bar and the card's dock sit on the edge. Screen only: a printed receipt still flows over pages. */ @media screen and (max-width:899px){ html{height:100%;overflow:hidden} body{height:100%;overflow-y:auto;overscroll-behavior-y:contain} } /* A dock that sticks to the foot (Save on a long form, a count's tally): its offset is taken from the scroller's padding edge, and on a phone the body's padding already leaves the tab bar's room, so it is -4px there (the bar is 4px shorter than that room), not the bar's height again (owner, 2026-10-25: the kit's Save floated mid-list with rows showing under it). Without the phone's bar the document scrolls and the dock sits on the edge. */ :root{--dock-bottom:0px} @media screen and (max-width:899px){ :root{--dock-bottom:-4px} } /* While a field takes typing on a phone the keyboard is up: the tab bar steps aside (Chrome on an iPhone lifted it over the keyboard, with the form's dock above it, covering the field). `typing` is set by core.js and taken off a moment after the field lets go, so a tap on a button the bar would cover lands before the bar comes back. */ @media screen and (max-width:899px){ html.typing body{padding-bottom:4px} html.typing :is(nav.tabs,.dc-dock){display:none} }} a{color:inherit} h1{font-size:28px;line-height:1.15;margin:.3rem 0 0;font-weight:700;letter-spacing:-.01em} h2{font-size:17px;line-height:1.3;margin:0 0 .75rem;font-weight:600} small{font-size:13px} small,.muted{color:var(--muted)} .page-sub{margin:.3rem 0 0;color:var(--muted);font-size:14px} .ic{width:24px;height:24px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .top{position:sticky;top:0;z-index:15;display:flex;gap:10px;align-items:center; padding:calc(8px + env(safe-area-inset-top)) 16px 8px; background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line)} .brand{font-weight:700;font-size:1.25rem;text-decoration:none;letter-spacing:-.01em;display:inline-flex;align-items:center;min-width:0} .brand-logo{height:22px;width:22px;object-fit:contain;border-radius:3px;margin-right:7px;flex:none} .has-logo .brand-logo{height:28px;width:auto;max-width:120px;border-radius:0} .brand-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:11em} @media (max-width:599px){.brand .brand-name{max-width:5em}.brand.has-logo .brand-name{display:none}.top form{min-width:6.5em}} .top form{flex:1;display:flex;justify-content:flex-end} .top input{width:min(260px,100%);background:var(--bg);color:var(--ink);border:1px solid var(--field); border-radius:999px;padding:8px 14px;font:500 14px var(--mono)} .top input::placeholder{color:var(--muted)} #jumpHits{position:absolute;left:12px;right:12px;top:100%;margin-top:4px;z-index:30;background:var(--panel); border:1px solid var(--card-border);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.35);max-height:65vh;overflow:auto} #jumpHits .hit{display:flex;flex-direction:column;gap:2px;padding:10px 14px;color:var(--ink);text-decoration:none; border-top:1px solid var(--card-border);min-height:44px;justify-content:center} #jumpHits .hit:first-child{border-top:0} #jumpHits .hit small{color:var(--muted);overflow-wrap:anywhere} #jumpHits .hit .kind{font-size:12px;color:var(--accent-text);text-transform:uppercase;letter-spacing:.04em} #jumpHits .hit.all{color:var(--accent-text);font-weight:600} #jumpHits .none{padding:12px 14px;color:var(--muted)} /* On a phone the code box is narrow; while it has focus it takes the whole header (the brand, theme and printer step aside, the scan button stays) and shows the long hint. It shrinks back when it loses focus. */ @media (max-width:899px){ /* the search field's own focus, not the header's: a tap on a header button focuses that button */ .top:has(#jump input:focus) :is(.brand,#themeBtn,a[href="#/printer"],.lang-menu,.bell-menu){display:none} .top:has(#jump input:focus) input{width:100%} .lang-code{display:none} } main{max-width:760px;margin:0 auto;padding:16px} section,.rows,.tile,.figs>div{background:var(--panel);border:1px solid var(--card-border);border-radius:12px;box-shadow:var(--card-shadow)} section{padding:20px;margin:0 0 16px} section.head{background:none;border:0;box-shadow:none;padding:4px 0 8px} /* One nav, two layouts: a bottom bar on phones (four main tabs + More, which opens the other seven as a sheet above the bar) and, from 900 px, a fixed sidebar with all eleven. Icons come from the inline sprite. */ .tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;display:grid;grid-template-columns:repeat(60,minmax(0,1fr)); background:var(--panel);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))} .tabs a,.tabs .tab-more{order:20;grid-column:span 12;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2px;min-height:52px;padding:6px 2px;border:0;border-radius:12px;background:none;color:var(--muted);cursor:pointer; font:600 10px/1.2 Inter, system-ui, sans-serif;letter-spacing:.01em;text-decoration:none} .tabs a.tab-extra{order:10;grid-column:span 15;display:none} /* The More sheet: two full rows of four, most used first (the sidebar keeps the DOM order). The bar's first tab always starts a new row, so a short last row of the sheet can never pull Home up into it. */ .tabs a[data-tab=stats]{order:1} .tabs a[data-tab=exp]{order:2} .tabs a[data-tab=jrnl]{order:3} .tabs a[data-tab=diag]{order:4} .tabs a[data-tab=data]{order:5} .tabs a[data-tab=cal]{order:6} .tabs a.tab-sub,.tabs a.tab-signout{display:none} /* Stock's own pages: the sidebar lists them under Stock, the phone has the strip */ .tabs a.tab-main[data-tab=home]{grid-column:1 / span 12} /* While the sheet is open, the bar keeps its top line: a full-width divider sits between the sheet and the bar (a grid item of its own, ordered after the sheet entries and before the bar). */ .tabs::before{content:"";display:none;order:15;grid-column:1 / -1;height:1px;margin:4px -4px;background:var(--line)} .tabs.open::before{display:block} .tabs.open a.tab-extra{display:flex} .tabs.open{box-shadow:0 -12px 32px rgba(0,0,0,.35)} .tabs a.on,.tabs .tab-more.on{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text)} .tabs .side-brand{display:none} .tape{display:inline-block;font:600 14px/1 var(--mono);background:var(--tape-bg);color:var(--tape-ink); padding:7px 9px;border-radius:4px;white-space:nowrap} .head .tape{font-size:18px;padding:9px 12px} .bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px} .bi-order{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:start;border-top:1px solid var(--field);padding:6px 0} .bi-box{display:flex;justify-content:center;padding-top:6px} .bi-box input{width:22px;height:22px;margin:0} .bi-main{min-width:0;overflow-x:auto} .page-head{align-items:flex-start;margin-bottom:16px} .page-head h1{margin:0} .page-head>div:first-child{flex:1 1 180px;min-width:0} .chips{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:2px} .chip{border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:999px; padding:6px 14px;font-family:inherit;font-weight:500;font-size:14px;white-space:nowrap;cursor:pointer} .chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)} .chip small{color:inherit;opacity:.6} .rows{list-style:none;margin:0;padding:0;overflow:hidden} .rows li+li{border-top:1px solid var(--line)} .row{display:flex;gap:12px;align-items:center;padding:14px 16px;text-decoration:none} .row:focus-visible{outline-offset:-3px} .row .main{flex:1;min-width:0;display:flex;flex-direction:column} .row .main b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere} .row .main small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .row .side{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right} .row .side b{white-space:nowrap} .row .side small{white-space:nowrap} /* A list inside a card is not a card in a card: drop its frame, keep the hairlines between rows. */ section .rows{background:none;border:0;border-radius:0;box-shadow:none} section .row{padding-left:0;padding-right:0} .pos{color:var(--ok)} .neg{color:var(--bad)} /* Status capsules: a tinted pill with deep text, one hue per meaning. */ .st{display:inline-block;font-size:12px;font-weight:600;line-height:1.5;padding:1px 10px;border-radius:999px; border:1px solid transparent;white-space:nowrap;background:var(--mute-bg);color:var(--mute-ink)} .st-sold{background:var(--ok);color:var(--on-ok)} .st-ready,.st-listed,.st-to_ship{background:var(--ok-bg);color:var(--ok-ink)} .st-repair,.st-awaiting_parts,.st-diagnosing,.st-in_repair{background:var(--warn-bg);color:var(--warn-ink)} .st-problem{background:var(--bad-bg);color:var(--bad-ink)} .st-approved{background:var(--ok-bg);color:var(--ok-ink)} .st-declined{background:var(--bad-bg);color:var(--bad-ink)} /* the client's answer about the price */ .price-answer{margin:2px 0 6px;font-size:13px;font-weight:600} .st-in_transit,.st-accepted,.st-info_received,.st-out_for_delivery,.st-pickup{background:var(--info-bg);color:var(--info-ink)} .st-delivered{background:var(--ok-bg);color:var(--ok-ink)} .row-actions{display:flex;justify-content:flex-end;padding:0 14px 10px} .order-link{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-weight:600} .sorts{margin-left:auto} .saas-bar{max-width:760px;margin:8px auto 0;padding:0 16px} .saas-bar p{margin:0 0 6px;padding:8px 14px;border-radius:12px;font-size:15px} .saas-bad{background:var(--bad-bg);color:var(--bad-ink)} .saas-warn{background:var(--warn-bg);color:var(--warn-ink)} .saas-info{background:var(--info-bg);color:var(--info-ink)} .saas-bar a{color:inherit;font-weight:600} /* the device catalog in the forms: "＋ Add …" turns a select into a field in place; a long model list gets a search */ .tax-add{display:flex;gap:6px;align-items:center} .tax-add input{flex:1;min-width:0} .tax-add button{min-width:44px;padding:0 10px} .tax-find{margin-bottom:6px} .pack-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 6px} /* a hint beside a field: level with the input box, not with the label above it */ .beside-hint{margin:0;align-self:end;min-height:44px;display:flex;align-items:center} /* Home's first steps lead here: the block they are about glows for a few seconds */ .spotlight{outline:3px solid var(--accent);outline-offset:4px;border-radius:12px;animation:spot 1.2s ease-in-out 3} @keyframes spot{50%{outline-color:transparent}} @media (prefers-reduced-motion:reduce){.spotlight{animation:none}} .notice{background:var(--ok-bg);color:var(--ok-ink);border-radius:12px;padding:10px 14px;margin:0 0 10px} .mono{font-family:var(--mono)} .st-donor{background:var(--mute-bg);color:var(--mute-ink);border:1px dashed var(--field)} .st-queued,.st-on_the_way,.st-not_sent,.st-not_fixed{background:var(--mute-bg);color:var(--mute-ink)} .dx-st{display:inline-flex;align-items:center;gap:4px} .dx-st button{font-size:13px;font-weight:600;padding:2px 10px;border-radius:999px;border:1px solid var(--field);background:var(--panel);color:var(--muted);cursor:pointer} .dx-open button{color:var(--muted)} .dx-ordered button{border-color:var(--accent);color:var(--accent-text)} .dx-arrived button{background:var(--ok);color:var(--on-ok);border-color:var(--ok)} .dx-status{white-space:nowrap} .dx-st select{font-size:13px;padding:2px 26px 2px 8px;background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%} .rsv-chip{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600; padding:2px 10px;border-radius:999px;background:var(--warn-bg);color:var(--warn-ink)} fieldset.line{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:0 0 10px;display:grid;grid-template-columns:1fr 1fr;gap:8px} fieldset.chip-part{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0 0 12px} fieldset.chip-part .grid{margin-top:8px} fieldset.line legend{font-weight:600;padding:0 4px} fieldset.line .share{grid-column:1/-1;color:var(--ok);font-weight:600} .ln{display:flex;justify-content:space-between;padding:4px 0;font-variant-numeric:tabular-nums} .ln.sum{border-top:1px solid var(--ink);margin-top:4px;padding-top:8px;font-weight:700;font-size:1.1rem} .ln.sub{color:var(--muted)} form.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px} form.grid .full{grid-column:1/-1} .tax{display:grid;grid-template-columns:1fr 1fr;gap:12px;grid-column:1/-1;padding-bottom:4px} @media(max-width:520px){.tax{grid-template-columns:1fr}} label{display:flex;flex-direction:column;gap:4px;font-size:14px;font-weight:500;color:var(--muted)} /* One look for every field (owner, 2026-10-16): the value in the ink colour at 15 px and normal weight, whatever the label around it says; a select is drawn like an input with our own chevron, never the system's control. */ input,select,textarea{font:inherit;font-size:15px;font-weight:400;line-height:1.35;color:var(--ink);background-color:var(--bg); border:1px solid var(--field);border-radius:8px;padding:10px 12px;width:100%;min-height:44px} select:not([multiple]){appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer;text-overflow:ellipsis; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat} select:disabled,input:disabled,textarea:disabled{opacity:.6;cursor:not-allowed} ::placeholder{color:var(--muted);opacity:.8} textarea{min-height:70px} input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{ outline:2px solid var(--accent);outline-offset:1px} .radio{flex-direction:row;align-items:center;gap:8px;color:var(--ink)} .radio input{width:auto} .btn,button{font-family:inherit;font-weight:600;font-size:16px;line-height:1.3;border:0;border-radius:10px;padding:10px 18px; min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--accent);color:var(--accent-ink);cursor:pointer;text-decoration:none} /* The 44 px glove rule is for real buttons; these are compact by design. */ .chip,.link,.cat-x,.cat-chev,.pri-set,.qthumb button,#lbClose{min-height:0} button:disabled{opacity:.55;cursor:progress} /* in flight: .busy */ .ghost{background:none;color:var(--ink);border:1px solid var(--field)} /* A date field typed as DD/MM/YYYY: the browser's own date input follows the browser locale (month first in en-US) and cannot be forced, so it stays underneath (ISO value, name, picker) and a text field shows the date. */ .ddate{display:flex;gap:6px;align-items:stretch;position:relative} .ddate .ddate-txt{flex:1;min-width:0} .ddate .ddate-pick{flex:0 0 44px;padding:0;font-size:1.05rem} dialog.bulk{background:var(--panel);color:var(--ink);border:1px solid var(--card-border);border-radius:12px;padding:20px;width:min(560px,94vw)} dialog.bulk::backdrop{background:rgba(0,0,0,.55)} dialog.whatsnew ul,.changes{margin:.4rem 0 1rem;padding-left:1.2rem;line-height:1.5} dialog.whatsnew h3{margin:.6rem 0 0;font-size:15px} .ddate .ddate-native{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0} .danger{background:none;color:var(--bad);border:1px solid var(--bad)} .link{background:none;color:var(--muted);padding:2px 6px;font-weight:500;text-decoration:underline} .actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .inline{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end} .inline label{flex:1 1 180px;min-width:0} .label-img{display:block;max-width:100%;height:auto;image-rendering:pixelated;background:#fff; border:1px solid var(--line);padding:6px;border-radius:8px} .icon-btn{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;color:inherit; background:none;border-radius:10px} .layout-block{border-top:1px solid var(--line);padding-top:12px;margin-top:12px} .layout-block h3{font-size:1rem;margin:0 0 6px;font-weight:600} .checks{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:10px} details summary{cursor:pointer;font-weight:600} details[open] summary{margin-bottom:12px} /* A collapsible block of a card: the summary is the tap target of a closed block, so pad it to 44 px; the negative margins give that height back, so a closed block takes the room a plain 23 px line did. */ details.fold>summary{padding:12px 0;margin:-12px 0} details.fold[open]>summary{margin-bottom:0} .dev-hero{margin:0 0 16px} .dev-hero:empty{display:none} .list{list-style:none;margin:0;padding:0} .list li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line)} .list li:first-child{border-top:0} .table{overflow-x:auto} table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums;font-size:15px} th,td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap} th:first-child,td:first-child{text-align:left} th{color:var(--muted);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase} /* Number tiles: a big figure under a caps label. .figs (Summary, lot card) is the same thing in older markup. */ .tiles,.figs{display:grid;gap:12px;margin-bottom:16px} .tiles{grid-template-columns:repeat(3,minmax(0,1fr))} .tiles.tiles-4{grid-template-columns:repeat(2,minmax(0,1fr))} /* Tools & supplies: four figures, two per row on a phone */ @media (min-width:900px){.tiles.tiles-4{grid-template-columns:repeat(4,minmax(0,1fr))}} .figs{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .tile,.figs>div{display:flex;flex-direction:column;justify-content:space-between;gap:4px;padding:12px 14px;min-width:0} .tile small,.figs small{display:block;font-size:11px;font-weight:600;letter-spacing:.06em;line-height:1.3;text-transform:uppercase} .tile b,.figs b{display:block;overflow-wrap:anywhere;font-size:24px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums} .empty{padding:28px 16px;text-align:center;color:var(--muted)} .embed{width:100%;height:calc(100vh - 220px);min-height:520px;border:1px solid var(--line); border-radius:12px;background:var(--panel)} .hint{font-size:14px;color:var(--muted);margin:.4rem 0 0} #toast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:25; background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.3); opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw} #toast.show{opacity:1} .update-bar{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:24; display:flex;align-items:center;gap:14px;background:var(--panel);color:var(--ink);border:1px solid var(--accent); padding:8px 8px 8px 16px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.3);max-width:92vw;white-space:nowrap} .update-bar button{min-height:44px} #toast.bad{background:var(--bad);color:var(--on-bad)} @media (max-width:520px){form.grid{grid-template-columns:minmax(0,1fr)}} @media (prefers-reduced-motion:reduce){#toast{transition:none}} @media (hover:hover){.row:hover{background:color-mix(in srgb,var(--ink) 5%,transparent)}} /* Repair journal */ .jentry{border-top:1px solid var(--line);padding:10px 0} .jentry:first-child{border-top:0} .jentry header{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-weight:600} .jentry header .jhead{flex:1 1 12em;min-width:0} .jentry header .jby{color:var(--muted);font-weight:400;white-space:nowrap} .jentry header .jacts{margin-left:auto;display:flex;gap:6px} .jentry p{margin:.3rem 0 0;white-space:pre-wrap} .thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px} .thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer} .thumbs.mini{gap:4px;margin-top:6px} .thumbs.mini img{width:40px;height:40px} .dropzone{border:2px dashed var(--field);border-radius:12px;padding:14px;text-align:center;cursor:pointer; margin-top:8px;color:var(--muted);transition:border-color .15s,background .15s} .dropzone:focus,.dropzone.drag{border-color:var(--ink);background:var(--bg);outline:none} .dropzone .dz-label{pointer-events:none} .snip{display:block;white-space:normal;overflow:hidden} .row-thumb{flex:0 0 auto;width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line)} /* Phones: a row has three fixed costs (code chip, optional thumbnail, right-hand column) and the title gets what is left. Measured at 390 px: with the full spacing Microsoft and Aluminium broke mid-word; trimmed, nothing does. */ @media (max-width:420px){ .row{gap:10px;padding-left:14px;padding-right:14px} .row .tape{font-size:13px;padding:6px 7px} .row-thumb{width:40px;height:40px} } .sel:not(tr){flex:0 0 auto;display:flex;align-items:center} /* not tr: the diagnosis checklist also marks ticked */ .sel input{width:26px;height:26px;accent-color:var(--accent)} /* Selection mode is opt-in: checkboxes hide until the toolbar turns it on */ .rows.no-sel .sel{display:none} .batch-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .list-tools{position:sticky;top:var(--top-h);z-index:12;background:var(--bg);margin:0 -16px;padding:6px 16px 2px} .list-tools:empty,.list-tools:has(> .batch-bar[hidden]:only-child){padding:0} .list-tools .bar{margin:0 0 6px} .list-tools input[type=search]{max-width:none!important;flex:1} .list-tools .batch-bar{gap:6px 8px} .list-tools .batch-bar button{padding:8px 12px} .batch-bar #bc{flex:1} .batch-bar .bb-break{flex-basis:100%;height:0} .batch-bar label.sel{flex-direction:row;align-items:center;gap:6px;margin:0} .batch-bar[hidden]{display:none} /* author display:flex would otherwise beat the UA [hidden] rule */ .batch-bar span{color:var(--muted)} .line-photo{flex:0 0 auto;width:64px;height:64px;object-fit:cover;border-radius:8px; border:1px solid var(--line);cursor:pointer} #queue{display:flex;flex-wrap:wrap;gap:6px} .qthumb{position:relative} .qthumb img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--line)} .qthumb button{position:absolute;top:-6px;right:-6px;background:var(--ink);color:var(--bg); border-radius:50%;width:20px;height:20px;padding:0;line-height:1;font-size:14px} .qthumb .pri-mark{position:absolute;left:-6px;top:-6px;background:var(--accent);color:var(--accent-ink);border-radius:50%; width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1} .qthumb .pri-set{position:absolute;left:-6px;top:-6px;background:var(--panel);color:var(--muted); border:1px solid var(--field);border-radius:50%;width:20px;height:20px;font-size:12px;line-height:1} .ld-hero-wrap{margin-bottom:10px} .ld-hero{width:100%;max-width:360px;height:auto;max-height:280px;object-fit:contain; border-radius:12px;border:1px solid var(--line);cursor:pointer;display:block} #lightbox{position:fixed;inset:0;z-index:30;background:rgba(0,0,0,.92);display:flex; align-items:center;justify-content:center;padding:20px} #lightbox[hidden]{display:none} #lbImg{max-width:100%;max-height:100%;object-fit:contain} #lbClose{position:absolute;top:12px;right:16px;background:none;color:#fff;font-size:32px; border:0;cursor:pointer;line-height:1} .dxlist{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);border-radius:8px;overflow:hidden} .dxrow{display:grid;grid-template-columns:32px 1fr;gap:8px;align-items:center;padding:8px 10px;border-top:1px solid var(--line)} .dxrow:first-child{border-top:0} .dxrow .zone{font-weight:500;min-width:0} .dxrow .zone .sub{display:block;font-weight:400;color:var(--muted);font-size:14px} .dxpart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 64px;gap:6px;align-items:center;padding:6px 10px 8px;border-top:1px solid var(--line);background:var(--bg)} .dxpart .dxzone{font-size:14px;color:var(--muted)} .dxpart input{width:100%} .dxhead{display:grid;grid-template-columns:32px 1fr;gap:8px;padding:6px 10px;background:var(--panel);font-weight:600;color:var(--muted);font-size:14px;border-bottom:1px solid var(--line)} .dxhead .r{text-align:right} .tbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:8px} .tbl th,.tbl td{padding:8px 10px;text-align:left;border-top:1px solid var(--line);white-space:normal} .tbl td.dx-status{white-space:nowrap} .tbl thead th{border-top:0} .tbl .num{text-align:right;font-variant-numeric:tabular-nums} /* Diagnosis checklist: clicking a row ticks it and shades the row like a selected Excel line. */ .tbl.checklist tbody tr{cursor:pointer} .tbl.checklist tbody tr.sel{background:color-mix(in srgb,var(--accent) 14%,var(--panel))} .tbl.checklist td.chk{width:32px;text-align:center} .tbl.checklist td.zone{font-weight:500} .tbl.checklist td.part{color:var(--muted);font-size:14px} .tbl.checklist td.part em{font-style:normal;font-weight:600} .tbl .r{text-align:right} .tbl tr.err td{color:var(--bad)} code{background:var(--bg);padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:.92em} .atts{display:flex;flex-direction:column;gap:6px;margin-top:6px} .att{display:flex;flex-wrap:wrap;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 8px;border-radius:8px} .att-name{font-weight:600} .att-size{color:var(--muted);font-size:.85em} .att-pre{flex-basis:100%;max-height:300px;overflow:auto;background:var(--bg);border:1px solid var(--line);padding:8px;font-family:var(--mono);font-size:12px;white-space:pre-wrap;margin:4px 0 0} .att-thumb{max-width:60px;max-height:60px;cursor:pointer;border-radius:6px} /* Camera scanner: a full-screen layer over everything, the video in a square with a frame to aim with. */ div#scan{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;gap:10px; padding:calc(10px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));overflow-y:auto} div#scan[hidden]{display:none} .scan-top{display:flex;align-items:center;justify-content:space-between;gap:10px} .scan-top b{font-size:18px} .scan-view{position:relative;width:min(100%,420px);aspect-ratio:1;margin:0 auto;border-radius:12px;overflow:hidden;background:var(--panel)} .scan-view video{width:100%;height:100%;object-fit:cover;display:block} .scan-frame{position:absolute;inset:14%;border:3px solid var(--accent);border-radius:12px;pointer-events:none;transition:border-color .15s} .scan-frame.hit{border-color:var(--ok)} .scan-frame.miss{border-color:var(--bad)} .scan-msg{margin:0;text-align:center;color:var(--muted);min-height:1.45em} .scan-type{display:flex;gap:8px;width:min(100%,420px);margin:0 auto} .scan-type input{flex:1;min-width:0;font-family:var(--mono)} .scan-log{list-style:none;margin:0 auto;padding:0;width:min(100%,420px);display:flex;flex-direction:column;gap:6px} .scan-log li{padding:8px 12px;border-radius:10px;background:var(--ok-bg);color:var(--ok-ink);font-size:14px} .scan-log li.bad{background:var(--bad-bg);color:var(--bad-ink)} /* Counting a box: big tick boxes and a − / + stepper, usable with gloves. */ .count-row{display:flex;gap:10px;align-items:center;padding:10px 0} .count-row .main{flex:1;min-width:0;display:flex;flex-direction:column} .count-row .main b{overflow-wrap:anywhere} .count-row.found .main b::before{content:"✓ ";color:var(--ok)} .ctick input{width:28px;height:28px;margin:0} .stepper{display:flex;align-items:center;gap:4px;flex:none} .stepper button{min-width:44px;padding:0;font-size:20px} .stepper input{width:64px;text-align:center;padding:8px 4px} .count-diff{color:var(--warn-ink);font-weight:600} .count-foot{position:sticky;bottom:var(--dock-bottom);z-index:5;background:var(--panel); border:1px solid var(--line);border-radius:12px;padding:10px 12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center} .count-foot .grow{flex:1;min-width:120px;font-weight:600} label.chip:has(input:checked){background:var(--ink);color:var(--bg);border-color:var(--ink)} label.chip input{margin:0 4px 0 0} .loose-row{display:flex;gap:10px;align-items:center;padding:10px 0} .loose-row input[type=checkbox]{width:24px;height:24px;margin:0;flex:none} .loose-row .main{flex:1;min-width:0;display:flex;flex-direction:column} @media (min-width: 900px){.count-foot{bottom:12px}} /* Home: the quick buttons (two per row on a phone, big enough for gloves), the first-steps checklist, the page tips. */ .quick{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0 0 16px} .quick-btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:96px;padding:14px;border-radius:12px; background:var(--panel);border:1px solid var(--card-border);box-shadow:var(--card-shadow);text-decoration:none;color:var(--ink)} .quick-btn .ic{color:var(--accent-text);width:28px;height:28px} .quick-btn b{font-size:15px;line-height:1.25} .quick-btn small{color:var(--muted);line-height:1.3} .progress{height:8px;border-radius:999px;background:var(--mute-bg);overflow:hidden;margin:-4px 0 8px} .progress span{display:block;height:100%;background:var(--ok)} .step-mark{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px; border:2px solid var(--field);color:var(--on-ok);font-weight:700} .step-mark.done{background:var(--ok);border-color:var(--ok)} .steps .row .main small{white-space:normal} .att-n{flex:none;min-width:36px;text-align:center;font-size:20px;font-weight:700;color:var(--accent-text)} .tip{display:flex;gap:8px;align-items:flex-start;background:var(--info-bg);color:var(--info-ink);border-radius:12px;padding:10px 6px 10px 14px;margin:0 0 14px} .tip p{margin:0;flex:1;font-size:14px} .tip .link{color:inherit;text-decoration:none;font-size:22px;line-height:1;padding:0 8px;min-height:32px} .parcel{display:flex;flex-direction:column;gap:4px;padding:12px 0} .parcel small{color:var(--muted)} .parcel-actions{display:flex;align-items:center;gap:10px;margin-top:4px} .parcel-actions select{flex:1;min-width:0} /* Nested boxes: the path above a box, the tree indent, and the gridfinity map of a drawer (front at the bottom). */ .crumbs{margin:0 0 6px;font-size:14px;color:var(--muted)} .crumbs a{color:var(--muted)} .tree-pad{flex:none;color:var(--muted);text-align:right;font-size:13px} .gf-wrap{overflow-x:auto;padding-bottom:4px} .gf{display:grid;gap:4px;min-width:min-content;justify-content:center} .gf-cell{min-height:44px;padding:0;border:1px dashed var(--field);border-radius:8px;background:none;color:var(--muted); font:500 12px var(--mono);cursor:pointer} .gf-bin{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:44px;padding:4px 6px;border-radius:8px; background:var(--ok-bg);color:var(--ok-ink);text-decoration:none;overflow:hidden} .gf-bin b{font-size:12px;line-height:1.2;overflow-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} .gf-bin small{color:inherit;font-size:11px;font-weight:600} .gf-bin.here{outline:3px solid var(--accent);outline-offset:1px} .gf-empty{cursor:default} .gf-front{margin:6px 0 0;text-align:center;font-size:12px;color:var(--muted);border-top:2px solid var(--field);padding-top:4px} /* Signed out: only the sign-in card, no nav or header tools. */ body.signed-out .tabs,body.signed-out #jump,body.signed-out #scanBtn,body.signed-out .top a[href="#/printer"]{display:none} .auth-card{max-width:440px;margin:24px auto} .auth-card .big{width:100%;min-height:56px;font-size:17px} .auth-codes{font:600 16px/1.9 var(--mono);columns:2;margin:8px 0;padding:12px 16px;background:var(--bg);border-radius:12px;list-style:none} .auth-qr{display:block;margin:8px auto;background:#fff;padding:8px;border-radius:12px;max-width:220px;width:100%;image-rendering:pixelated} .demo-card{border:1px dashed var(--accent)} .money-line{display:grid;grid-template-columns:minmax(150px,190px) 1fr;gap:10px;align-items:start} .money-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .money-fields:empty{display:none} .pf-edit{display:flex;gap:8px;align-items:center} .pf-edit input{flex:1;min-width:0} .bk-row{flex-wrap:wrap;row-gap:8px} .bk-row .main{flex:1 1 100%} .bk-actions{display:flex;gap:8px;flex-wrap:wrap} .copy-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px} .copy-row code,.copy-row .auth-secret{font-size:16px;padding:6px 10px;min-width:0;overflow-wrap:anywhere} .copyable{user-select:all;-webkit-user-select:all} .auth-secret{font:600 14px var(--mono);word-break:break-all;user-select:all} @media (min-width: 900px){body.signed-out main,body.signed-out .top{margin-left:0}} /* signed out, the card carries the workshop's name and logo: the header's would show it twice */ body.signed-out .top .brand{display:none} /* Desktop: the nav becomes a fixed 220 px sidebar with all ten tabs, icon and label side by side. */ @media (min-width: 900px){ .tabs{position:fixed;left:0;top:0;bottom:0;right:auto;width:220px;display:flex;flex-direction:column;gap:2px; overflow-y:auto;padding:16px 12px;border-top:0;border-right:1px solid var(--line)} .tabs a,.tabs a.tab-extra{order:0;flex:0 0 auto;display:flex;flex-direction:row;justify-content:flex-start;gap:12px; min-height:44px;padding:10px 14px;font-size:15px;font-weight:500;letter-spacing:0} .tabs .tab-more{display:none} .tabs::before,.tabs.open::before{display:none} .tabs .side-brand{display:flex;align-items:center;gap:10px;min-height:0;padding:6px 14px 18px;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .side-brand img{border-radius:6px;height:28px;width:28px} .side-brand.has-logo{flex-direction:column;align-items:flex-start} .side-brand.has-logo img{width:auto;height:40px;max-width:180px;border-radius:0} .side-brand .brand-name{white-space:normal;max-width:180px;line-height:1.2;overflow-wrap:anywhere} .side-brand.has-logo .brand-name{font-size:15px} .top{margin-left:220px;padding-left:32px;padding-right:32px} .top .brand{display:none} main{margin-left:220px;max-width:none;padding:28px max(32px,calc((100vw - 220px - 1040px) / 2)) 40px} .saas-bar{margin:12px 0 0 220px;max-width:none;padding:0 max(32px,calc((100vw - 220px - 1040px) / 2))} body{padding-bottom:0} #toast{bottom:24px} .update-bar{bottom:24px} .tabs.open{box-shadow:none} } /* iOS Safari zooms into any field whose text is under 16 px when it gets focus, and the page stays zoomed and wobbles sideways. On touch screens every field is at least 16 px. */ @media (pointer:coarse){input,select,textarea{font-size:16px !important}} /* ---- UI/UX audit, 2026-10 ---- */ /* A tile with a filter key is a button: it looks like the other tiles, the figures sit on one line. */ button.tile{font:inherit;color:var(--ink);text-align:left;align-items:stretch;justify-content:space-between;cursor:pointer} button.tile small{color:var(--muted)} .tile b{margin-top:auto} /* A small labelled select: the sort order and the colour filter of a list. */ .inline-select{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--muted)} .inline-select select{width:auto;min-height:40px;padding:6px 34px 6px 10px} @media (max-width:520px){.wide-only{display:none}} /* Checkboxes and radios a gloved finger can hit. */ .radio{min-height:44px} .radio input[type=checkbox],.radio input[type=radio]{width:22px;height:22px;flex:0 0 22px;accent-color:var(--accent)} /* The New device form: its fields live in one swappable block that joins the form's grid. */ #own-fields{display:contents} /* Three buttons on a phone: the main one full width, the other two side by side. */ @media (max-width:520px){ .actions:has(> button:nth-child(3):last-child){display:grid;grid-template-columns:1fr 1fr} .actions:has(> button:nth-child(3):last-child) > :first-child{grid-column:1 / -1} } /* The More sheet dims the page behind it, and More stays lit while it is open. */ @media (max-width:899px){ .tabs.open{box-shadow:0 0 0 100vmax rgba(0,0,0,.45),0 -12px 32px rgba(0,0,0,.35)} .tabs .tab-more[aria-expanded=true]{color:var(--accent-text)} } /* Search results: the snippet shows why it matched, the box path on its own line. */ #sres section{padding:12px 16px} #sres section h2{margin:0 0 4px;font-size:16px} #sres .row .main small{white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* Long lines of text stay readable on a wide screen. */ .changes,.readable{max-width:72ch} section .changes{margin-bottom:0} .embed{background:var(--panel)} .notice .actions{margin-top:8px} /* A side link of a Home row: a chevron, the accent only where something is still to do. */ .row .side .go{font-size:22px;line-height:1;color:var(--muted)} .row .side .todo{color:var(--accent-text);font-weight:600} /* A row's own small buttons (Edit / Delete on a list row): smaller than a form's button, still glove-sized. */ button.sm,.btn.sm{min-height:40px;padding:6px 12px;font-size:14px} .row-btns{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap} .exp-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:0 0 auto} .list li.editing{background:color-mix(in srgb,var(--accent) 10%,transparent);border-radius:8px} /* A button that can't be pressed yet is not "busy": it says so by looking inactive. */ button:disabled:not(.busy){cursor:not-allowed} button:not(.ghost):not(.danger):disabled:not(.busy){background:none;color:var(--muted);border:1px solid var(--field);opacity:1} input[type=checkbox],input[type=radio],input[type=range],input[type=color]{min-height:0} .top input{min-height:40px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .proj{border-top:1px solid var(--line);padding-top:12px} .proj h3{margin:0 0 10px} .proj .ln.sum{margin-top:12px} .settings-links .quick-btn{min-height:72px} /* The journal entry form: under the list for a new entry; moved into the entry's place and framed while editing one. */ #jform{margin-top:14px} .jform-head{margin:0;font-size:16px} #jform.jediting{border:2px solid var(--accent);border-radius:12px;padding:14px;margin:10px 0; background:color-mix(in srgb,var(--accent) 7%,transparent)} #jform.jediting .jform-head{color:var(--accent-text)} /* A file field: its button looks like the app's ghost buttons, not the browser's grey one. */ input[type=file]{padding:6px} input[type=file]::file-selector-button{font:600 15px Inter, system-ui, sans-serif;color:var(--ink);background:none; border:1px solid var(--field);border-radius:8px;padding:8px 14px;margin-right:10px;cursor:pointer} .bar.opts{flex-wrap:nowrap}.bar.opts .inline-select{min-width:0}.bar.opts select{max-width:100%;min-width:0} /* Diagnosis: the part's status pill is a real button; a saved row shows a plain tick. */ .dx-st button{min-height:40px;padding:6px 14px;font-size:14px} .dx-st{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center} .dx-st select{width:auto;max-width:100%} .tbl.checklist .tick{color:var(--accent-text);font-weight:700} #dx-checklist{margin-top:12px} /* Device card header: the status capsule, the one next step, the full status menu. */ .dev-status{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .dev-status .st{font-size:14px;padding:6px 12px} .nowrap{white-space:nowrap} .ddate-pick .ic{width:20px;height:20px} /* Using a part: on a phone the part picker takes the whole row, quantity and buttons go under it. */ #use label.qty{flex:0 0 80px} @media (max-width:520px){ #use label:first-child,#pay label:last-of-type{flex:1 1 100%} #use button,#pay button{flex:1 1 auto} form.grid#sell{grid-template-columns:1fr 1fr} } .dev-status select{font-weight:600} /* A list row's box path: its own line, wrapped, so the bin at the end is never cut off. */ .row .main small.where{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2} .rows li.out .row{opacity:.6} /* One swipeable row of chips on a phone (it scrolls inside itself, the page never pans). */ @media (max-width:899px){.chips.scroll-row{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:10px} .chips.scroll-row::-webkit-scrollbar{display:none}.chips.scroll-row .chip{flex:0 0 auto}} .st-out{background:var(--mute-bg);color:var(--mute-ink)} .st-low{background:var(--warn-bg);color:var(--warn-ink)} .st-stuck{background:var(--warn-bg);color:var(--warn-ink)} .po-stuck{display:flex;gap:10px;align-items:flex-start;margin:12px 0 16px;padding:12px 14px;border-radius:12px;background:var(--warn-bg);color:var(--warn-ink)} .po-stuck .ic{width:18px;height:18px;flex:none;margin-top:2px} .po-stuck p{margin:0 0 8px} .stuck-note{flex-basis:100%;margin:6px 0 0;font-size:14px;color:var(--warn-ink)} .po-stuck.stuck-note{margin:12px 0 16px} /* the device note's rule above would otherwise win and leave it touching the cards */ #applies-wrap:not([hidden]){display:grid;gap:12px} #lcount label.qty{flex:0 0 120px} label.chip input[type=radio]{position:absolute;opacity:0;width:1px;height:1px} label.chip{position:relative} fieldset.line .line-remove{grid-column:1/-1;justify-self:end;margin-top:-4px} fieldset.line .share{text-align:right;font-size:16px} .add-lines button{flex:1 1 0} @media (max-width:520px){fieldset.line{grid-template-columns:1fr}} /* Purchase inspection: three equal choices a glove can hit; "Not as described" turns the problem colour. */ #insp-pick{display:flex;flex-wrap:wrap;gap:6px} .chip.insp{min-height:44px} .chip.insp.insp-bad.on{background:var(--bad-bg);color:var(--bad-ink);border-color:var(--bad-ink)} /* Wide tables scroll inside themselves; the first column stays put while they do. */ .table th:first-child,.table td:first-child{position:sticky;left:0;background:var(--panel);z-index:1} .add-head{margin:6px 0 0;font-weight:600;color:var(--ink);border-top:1px dashed var(--field);padding-top:10px} .inline-num{display:flex;align-items:center;gap:10px;color:var(--ink)}.inline-num input{max-width:110px} .jrows .row{align-items:flex-start} /* Device card top. Phone: header, status, big photo, facts, Device details, Label, one column, in that order. Wide screen: header, facts and Label on the left; status and the big photo on the right; Device details below. */ .dev-status{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 16px} .dev-facts{padding:12px 16px} .facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 16px;margin:0} .facts div{min-width:0} .facts dt{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .facts dd{margin:2px 0 0;overflow-wrap:anywhere} @media (min-width:1200px){ .dev-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,380px);column-gap:16px;align-items:start} .dev-top > .head{grid-column:1;grid-row:1} .dev-top > .dev-facts{grid-column:1;grid-row:2} .dev-top > .dev-label{grid-column:1;grid-row:3} .dev-top > .dev-status{grid-column:2;grid-row:1;flex-direction:column;align-items:stretch;align-self:end; background:var(--panel);border:1px solid var(--card-border);border-radius:12px;padding:12px;margin-bottom:16px} .dev-top > .dev-status .inline-select{justify-content:space-between} .dev-top > .dev-status .inline-select select{flex:1} .dev-top > .dev-hero{grid-column:2;grid-row:2 / span 2} .dev-top > .dev-hero .ld-hero{max-width:100%;max-height:420px;width:100%} .dev-top > .dev-details{grid-column:1 / -1;grid-row:4} } /* A computer (a fine pointer that hovers) has no camera pointed at the shelf: the scan buttons are for phones and tablets. Codes are typed there instead (Put here by code, the count's Type codes). */ .desk-only{display:none !important} @media (hover:hover) and (pointer:fine) { .scan-only{display:none !important} .desk-only{display:inline-flex !important} } div#scan.no-camera .scan-view{display:none} /* A section heading with its action on the right (Repair journal → New entry). */ .sec-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px} .sec-head h2{margin:0} /* The new journal entry opens on top of the block, ruled off from the entries below it. */ #jform:not(.jediting){margin:12px 0 6px;padding-bottom:16px;border-bottom:1px solid var(--line)} /* A bin with a photo on the drawer's map: the shot fills the cell, its name and cell stay readable on top. */ .gf-bin.has-img{position:relative;isolation:isolate} .gf-bin img{pointer-events:none} .gf-bin.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;z-index:-1;border-radius:inherit} .gf-bin.has-img b,.gf-bin.has-img small{text-shadow:0 0 4px var(--ok-bg)} /* The way back from a card to its section's list ("‹ Boxes"), on top of the card. */ .back-link{display:inline-flex;align-items:center;min-height:40px;margin:-6px 0 4px;color:var(--accent-text);font-weight:600;text-decoration:none} /* Phones: the section from behind More you work in joins the bar as a sixth slot until you leave it. */ @media (max-width:899px) { .tabs.pinned a.tab-main,.tabs.pinned .tab-more,.tabs.pinned a.tab-extra.on{grid-column:span 10} .tabs.pinned a.tab-main[data-tab=home]{grid-column:1 / span 10} .tabs.pinned a.tab-extra.on{display:flex;order:21} .tabs.pinned .tab-more{order:22} /* A long name gets its short form in the bar (Tools & supplies → Tools); the More sheet and the sidebar keep it whole. */ .tabs.pinned a.tab-extra.on:has(.tab-short) span:not(.tab-short){display:none} .tabs.pinned a.tab-extra.on .tab-short{display:inline} .tabs a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } .tabs .tab-short{display:none} /* Repair prices: one row per sheet item, the price range at the side. */ .price-row{display:flex;align-items:center;gap:12px;padding:10px 14px;flex-wrap:wrap} .price-row .main{flex:1 1 180px;min-width:0;display:flex;flex-direction:column} .price-in{display:flex;align-items:center;gap:6px} .price-in input{width:6.5em} .dx-estimate{margin:10px 0 0} .dx-estimate b{font-size:18px} .est-use{display:flex;flex-wrap:wrap;align-items:center;gap:6px} /* Client contacts and warranty on the card. */ .client-contacts{margin:0 0 .4rem} .client-contacts a{color:inherit} .warranty{margin:.2rem 0 .5rem;font-weight:600} .warranty.on{color:var(--ok-ink)} .warranty.off{color:var(--muted)} .fold-lite{margin-top:10px} .fold-lite summary{cursor:pointer;min-height:44px;display:flex;align-items:center} /* A printed page (the intake receipt, the invoice): black on white in either theme, A4 when printed. */ .paper{background:#fff;color:#1b1b1b;border-radius:12px;padding:28px 24px;max-width:800px;font-size:15px;line-height:1.45} .paper h1{font-size:22px;margin:18px 0 12px;color:#1b1b1b} .paper .pre{white-space:pre-line} .paper-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:2px solid #1b1b1b;padding-bottom:12px} .paper-head .shop{font-size:20px;display:block} .paper-ref{display:flex;flex-direction:column;align-items:flex-end;text-align:right} .paper-ref b{font-family:ui-monospace,monospace;font-size:22px} .paper-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 24px} .paper-tbl{width:100%;border-collapse:collapse;margin:8px 0} .paper-tbl caption{text-align:left;font-weight:700;padding-bottom:4px;text-transform:uppercase;font-size:12px;letter-spacing:.06em} .paper-tbl th,.paper-tbl td{text-align:left;vertical-align:top;padding:4px 8px 4px 0;border-bottom:1px solid #ddd} .paper-tbl th{font-weight:600;width:7em;color:#555} .paper-tbl .r{text-align:right;white-space:nowrap} .paper-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid #1b1b1b;padding-top:10px;margin-top:14px;font-size:17px} .paper .terms{font-size:13px;color:#444} .paper-sign{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:48px} .paper-sign div{border-top:1px solid #1b1b1b;padding-top:6px;font-size:13px} @media (max-width:600px){.paper-ref{align-items:flex-start;text-align:left}} .paper-qr{display:flex;gap:14px;align-items:center;margin-top:20px;font-size:13px} .paper-qr img{width:96px;height:96px;image-rendering:pixelated} .paper-link{word-break:break-all;font-family:ui-monospace,monospace;font-size:11px} .paper-sub{display:flex;justify-content:space-between;margin:4px 0} .paper .muted-p{color:#555;font-size:13px;margin-top:2px} .track-box{margin:12px 0 4px;padding:12px;border:1px solid var(--line);border-radius:10px} .track-url{word-break:break-all;margin:4px 0;font-size:14px} /* Labels on paper: real-size pictures in rows, a dashed line to cut along (white paper in either theme). */ .sheet{display:flex;flex-wrap:wrap;gap:3mm;background:#fff;padding:4mm;border-radius:12px} .sheet img.cut{display:block;width:auto;max-width:100%;outline:1px dashed #9aa0a6;outline-offset:1mm;margin:1mm;image-rendering:pixelated} @media print{ @page{size:A4;margin:14mm} .sheet{padding:0;border-radius:0} .top,.tabs,.back-link,.no-print,.update-bar,#toast{display:none !important} html,body,main{background:#fff !important;padding:0 !important;margin:0 !important} .paper{border-radius:0;padding:0;max-width:none} } /* Workshop & documents: the logo preview; the logo on the papers. */ /* Workshop & documents → Texts on your papers: the fields on the left, the paper as it will look on the right */ .doc-tabs{margin:4px 0 6px} .doc-edit{display:grid;gap:18px;align-items:start} @media (min-width:1100px){.doc-edit{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.doc-preview{position:sticky;top:calc(var(--top-h, 60px) + 12px)}} .doc-fields{display:grid;gap:14px} .doc-field{display:flex;flex-direction:column;gap:4px;font-weight:600} .doc-field small{font-weight:400} .doc-field input,.doc-field textarea{font-weight:400} .doc-reset{align-self:flex-start;font-weight:400;font-size:14px;min-height:32px;padding:0} .doc-vars{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0} .doc-vars .chip small{color:var(--muted);font-weight:400} .doc-pv-label{margin:0 0 6px;font-size:13px} .doc-preview .paper{font-size:13px;padding:18px 16px;max-width:none;max-height:75vh;overflow:auto} .doc-preview .paper h1{font-size:18px} .qr-stand{width:72px;height:72px;flex:none;background:repeating-conic-gradient(#1b1b1b 0 25%,#fff 0 50%) 0 0/12px 12px;border:4px solid #fff;outline:1px solid #1b1b1b} .client-pv .pv-brand{display:flex;align-items:center;gap:10px;font-size:16px} .client-pv .pv-brand img{max-height:36px;max-width:110px;object-fit:contain} .client-pv h1{margin:10px 0 2px} .client-pv h2{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin:0 0 8px;color:#555} .pv-card{border:1px solid #e3e6e8;border-radius:10px;padding:12px;margin-top:12px} .pv-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px} .pv-steps li{background:#eef1f2;color:#555;border-radius:8px;padding:8px 6px;text-align:center;font-size:12px} .pv-steps li.done{background:#d9efe4;color:#1c5e41}.pv-steps li.now{background:#1c5e41;color:#fff;font-weight:700} .pv-btns{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;margin-top:8px} .pv-btns span{border:1px solid #c9d1d5;border-radius:8px;padding:8px 6px;text-align:center;font-size:12px;font-weight:600;color:#1c262b;background:#fff} .pv-btns span.main{background:#1c262b;color:#fff;border-color:#1c262b} .pv-area{border:1px solid #c9d1d5;border-radius:8px;height:40px;margin-top:6px;background:#fff} .pv-mail{border:1px solid #e3e6e8;border-radius:10px;padding:12px;margin-bottom:12px} .pv-subj{margin:0 0 8px;font-weight:700}.pv-subj span{color:#555;font-weight:400;margin-right:6px} .logo-box{min-height:48px;display:flex;align-items:center;margin-bottom:10px} .logo-preview{max-height:96px;max-width:240px;background:#fff;padding:8px;border-radius:8px} .paper-brand{display:flex;gap:14px;align-items:flex-start} .paper-logo{max-height:64px;max-width:150px;object-fit:contain} body.signed-out .back-link{display:none} .auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-weight:700;font-size:18px} .auth-brand img{max-height:40px;max-width:140px;object-fit:contain} /* languages as a flag and a code (owner, 2026-10-15): Data → Language and under the sign-in card */ /* Data → Part categories: one row per category, renamed in place */ /* The header's language list: the page's flag (and its code on a computer) opens it under the button. */ .lang-menu{position:relative;flex:none} #langBtn{gap:6px;padding:0 8px;font-weight:600;font-size:.875rem} #langList{position:absolute;right:0;top:100%;margin-top:6px;z-index:30;min-width:200px;padding:6px;background:var(--panel); border:1px solid var(--card-border);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.35)} #langList button{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:44px;padding:0 12px;background:none; color:var(--ink);border:0;border-radius:8px;text-align:left;font-weight:400} #langList button:hover{background:var(--line)} #langList button.on{box-shadow:inset 0 0 0 1px var(--accent)} #langList b{min-width:24px} #langList span{color:var(--muted)} .flag{width:20px;height:14px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px var(--card-border);flex:none} .lang-pick{display:flex;flex-wrap:wrap;gap:8px} .lang-pick button{display:inline-flex;align-items:center;gap:8px;min-height:44px} .lang-pick button.on{border-color:var(--accent);color:var(--ink);box-shadow:inset 0 0 0 1px var(--accent)} .auth-langs{margin-top:18px;display:flex;justify-content:center} /* the note a client sees under the status (client repairs) */ .client-note{margin-top:10px} .client-note textarea{width:100%} .client-note .hint{margin:4px 0 0} /* a technician never sees the owner's pages or money (the server takes the data out; this hides the frames) */ .role-tech .owner-only{display:none !important} /* A technician's phone bar has no Purchases (owner-only): Home, Devices, Parts and More share the row in quarters, and a pinned section makes it five. */ /* Data → Users: a row's name, role and actions stack under the user's line */ .user-row .main{display:flex;flex-direction:column;gap:6px;width:100%} .user-edit{margin:4px 0 0} .user-row .actions{margin:0;align-items:center} /* ===== Material 3 layer (m3.material.io): the components restyled on the M3 roles above. It sits last so it wins over the older rules without moving any markup, id or name. ===== */ html{--fl-bg:var(--bg)} section,.rows,.tile,.figs>div{--fl-bg:var(--panel)} dialog{--fl-bg:var(--md-surface-high)} /* Type scale: Headline Medium for the page title, Title Medium for a block, Body for the rest. */ h1{font-size:28px;line-height:36px;font-weight:400;letter-spacing:0} h2{font-size:16px;line-height:24px;font-weight:500;letter-spacing:.01em} .page-sub{font-size:14px;line-height:20px;letter-spacing:.016em} /* Surfaces: cards are filled containers (no stroke in dark, a level-1 shadow in light), 12 px corners. */ section,.rows,.tile,.figs>div{border-radius:var(--shape-m)} .rows li+li{border-top-color:color-mix(in srgb,var(--line) 70%,transparent)} /* Top app bar: the page colour, the search a full-round surface-high field. */ .top{background:var(--bg);border-bottom:0;box-shadow:0 1px 0 color-mix(in srgb,var(--line) 60%,transparent)} .top input{background:var(--md-surface-high);border:0;border-radius:var(--shape-full);padding:10px 18px; font:400 15px Inter, system-ui, sans-serif;min-height:44px} .top input:focus-visible{outline:2px solid var(--accent);outline-offset:0} #jumpHits{background:var(--md-surface-container);border:0;border-radius:var(--shape-l);box-shadow:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3)} /* Buttons: filled (primary), outlined (.ghost), text (.link), danger outlined; full-round, Label Large type. A state layer of the text colour shows hover (8 %) and press (12 %); a press also gives a little (Emil). */ .btn,button{border-radius:var(--shape-full);font-weight:500;font-size:15px;letter-spacing:.01em;padding:10px 24px; transition:transform 160ms var(--ease-out),box-shadow var(--dur) var(--ease)} .btn:not(.ghost):not(.danger):not(.link):not(.chip),button:not(.ghost):not(.danger):not(.link):not(.chip):not(.tile):not(.icon-btn){ box-shadow:none} @media (hover:hover){ .btn:hover,button:not(:disabled):not(.tab-more):hover{background-image:linear-gradient(color-mix(in srgb,currentColor 8%,transparent),color-mix(in srgb,currentColor 8%,transparent))} .btn:not(.ghost):not(.danger):not(.link):hover,button:not(.ghost):not(.danger):not(.link):not(.chip):not(.tile):not(.icon-btn):not(:disabled):hover{ box-shadow:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15)} } .btn:active,button:not(:disabled):not(.tab-more):active{background-image:linear-gradient(color-mix(in srgb,currentColor 12%,transparent),color-mix(in srgb,currentColor 12%,transparent)); transform:scale(.97)} .ghost{color:var(--accent-text);border:1px solid var(--field)} .danger{border-color:var(--field)} .link{color:var(--accent-text);text-decoration:none;font-weight:500;border-radius:var(--shape-full);padding:4px 10px} .link:hover{text-decoration:underline} button.sm,.btn.sm{padding:6px 16px} .icon-btn{border-radius:var(--shape-full)} button:not(.ghost):not(.danger):disabled:not(.busy){background:color-mix(in srgb,var(--ink) 12%,transparent);color:color-mix(in srgb,var(--ink) 38%,transparent);border:0} @media (prefers-reduced-motion:reduce){.btn,button{transition:none}.btn:active,button:active{transform:none}} /* Filter chips: 8 px corners, 32 px tall; selected = secondary container with a tick-free fill. */ .chip{border-radius:var(--shape-s);border-color:var(--field);background:transparent;padding:5px 16px;font-size:14px;font-weight:500; min-height:32px;transition:background-color var(--dur) var(--ease)} .chip.on,label.chip:has(input:checked){background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-color:transparent} .chip small{opacity:.75} /* Status capsules: M3 small badges, 8 px corners, Label Medium. */ .st{border-radius:var(--shape-s);font-weight:500;letter-spacing:.03em;padding:2px 10px} /* Fields: M3 outlined text fields. 1 px outline, 2 px primary on focus, 4 px corners, the label floats into the outline (core.js `floatLabel` gives the label `.tf` and its leading words `.fl`). */ input,select,textarea{border-radius:var(--shape-xs);background-color:transparent;min-height:48px;padding:12px 14px; transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease)} select:not([multiple]){padding-right:36px} input:hover:not(:disabled):not(:focus),select:hover:not(:disabled):not(:focus),textarea:hover:not(:disabled):not(:focus){border-color:var(--ink)} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);outline:0} input:invalid:not(:placeholder-shown):not(:focus){border-color:var(--bad)} select option{background:var(--md-surface-high);color:var(--ink)} input[type=checkbox],input[type=radio]{width:18px;height:18px;min-height:0;padding:0} label.tf{position:relative;margin-top:6px} label.tf>.fl{position:absolute;z-index:1;left:10px;top:24px;transform:translateY(-50%);max-width:calc(100% - 44px);padding:0 4px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;font-size:15px;font-weight:400;color:var(--muted); background:transparent;transition:top var(--dur) var(--ease),font-size var(--dur) var(--ease),color var(--dur) var(--ease)} label.tf.tf-up>.fl,label.tf:has(>input:focus)>.fl,label.tf:has(>input:not(:placeholder-shown))>.fl,label.tf:has(>textarea:focus)>.fl, label.tf:has(>textarea:not(:placeholder-shown))>.fl{top:0;font-size:12px;line-height:16px;background:var(--fl-bg);max-width:calc(100% - 20px)} label.tf:has(>:focus)>.fl,label.tf:has(.ddate-txt:focus)>.fl{color:var(--accent-text)} label.tf:not(.tf-up)>input:not(:focus)::placeholder,label.tf>textarea:not(:focus)::placeholder{color:transparent} @media (prefers-reduced-motion:reduce){label.tf>.fl{transition:none}} /* Navigation bar (phone): surface container, a pill indicator in secondary container behind the active icon. */ .tabs{background:var(--md-surface-container);border-top:0} .tabs a,.tabs .tab-more{border-radius:var(--shape-l);font:500 11px/16px Inter, system-ui, sans-serif;letter-spacing:.03em;gap:4px;color:var(--muted)} .tabs a .ic,.tabs .tab-more .ic{box-sizing:content-box;width:24px;height:24px;padding:4px 18px;border-radius:var(--shape-full)} .tabs a.on,.tabs .tab-more.on{background:none;color:var(--ink);font-weight:600} .tabs a.on .ic,.tabs .tab-more.on .ic{background:var(--md-secondary-container);color:var(--md-on-secondary-container)} @media (max-width:899px){.tabs.open{box-shadow:0 0 0 100vmax var(--md-scrim),0 -4px 8px 3px rgba(0,0,0,.15);border-radius:var(--shape-l) var(--shape-l) 0 0}} .tabs::before{background:var(--line)} @media (hover:hover){.tabs a:hover .ic,.tabs .tab-more:hover .ic{background-color:color-mix(in srgb,var(--ink) 8%,transparent)} .tabs a.on:hover .ic{background:var(--md-secondary-container)}} /* Navigation drawer (from 900 px): full-round items, the active one filled with secondary container. */ @media (min-width:900px){ .tabs{background:var(--md-surface-container);border-right:0;padding:12px} .tabs a,.tabs a.tab-extra{border-radius:var(--shape-full);min-height:52px;padding:0 16px;font-size:14px;font-weight:500;letter-spacing:.01em;gap:12px} .tabs a .ic{padding:0;background:none !important} .tabs a.on{background:var(--md-secondary-container);color:var(--md-on-secondary-container);font-weight:600} .tabs .side-brand{padding:12px 16px 20px;font-size:22px;font-weight:500;background:none !important} .tabs a:not(.on):not(.side-brand):hover{background:color-mix(in srgb,var(--ink) 8%,transparent)} } /* Dialogs: surface container high, 28 px corners, a scrim behind; they rise in (interruptible, from @starting-style). */ dialog.bulk{background:var(--md-surface-high);border:0;border-radius:var(--shape-xl);padding:24px; box-shadow:0 8px 12px 6px rgba(0,0,0,.15),0 4px 4px rgba(0,0,0,.3); transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)} dialog.bulk[open]{opacity:1;transform:none} @starting-style{dialog.bulk[open]{opacity:0;transform:translateY(8px) scale(.98)}} dialog.bulk::backdrop{background:var(--md-scrim)} @media (prefers-reduced-motion:reduce){dialog.bulk{transition:none}} /* Snackbar: inverse surface, 4 px corners, slides up a little as it shows. */ #toast{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);border-radius:var(--shape-xs);padding:14px 16px; font-size:14px;line-height:20px;box-shadow:0 4px 8px 3px rgba(0,0,0,.15),0 1px 3px rgba(0,0,0,.3); transform:translate(-50%,8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease-out)} #toast.show{transform:translate(-50%,0)} #toast.bad{background:var(--bad-bg);color:var(--bad-ink)} .update-bar{background:var(--md-inverse-surface);color:var(--md-inverse-on-surface);border:0;border-radius:var(--shape-xs)} .update-bar button{background:none;color:var(--md-inverse-primary)} /* Number tiles: filled cards, the label in Label Medium (no shouting caps), the figure in Headline Small. */ .tile,.figs>div{padding:16px} .tile small,.figs small{font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:none;line-height:16px} .tile b,.figs b{font-size:24px;line-height:32px;font-weight:500} button.tile{transition:background-color var(--dur) var(--ease)} th{text-transform:none;font-size:12px;letter-spacing:.03em;font-weight:500} /* Lists and folds */ @media (hover:hover){.row:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)}} details summary{font-weight:500} details.fold>summary{border-radius:var(--shape-s)} .label-img{border-radius:var(--shape-s)} .tape{border-radius:var(--shape-xs)} .facts dt{font-size:12px;font-weight:500;letter-spacing:.03em;text-transform:none} /* Motion, with restraint (Emil Kowalski's rules): only occasional surfaces move, under 250 ms, transform and opacity only, always interruptible; navigation, search hits and lists never animate. */ #langList{background:var(--md-surface-container);border:0;border-radius:var(--shape-xs); box-shadow:0 2px 6px 2px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.3);transform-origin:top right; transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out)} @starting-style{#langList{opacity:0;transform:scale(.96)}} #langList button{border-radius:var(--shape-xs)} #langList button:hover{background:color-mix(in srgb,var(--ink) 8%,transparent)} #langList button.on{box-shadow:none;background:var(--md-secondary-container);color:var(--md-on-secondary-container)} .tabs.open a.tab-extra{transition:opacity 150ms var(--ease-out),transform 150ms var(--ease-out)} @starting-style{.tabs.open a.tab-extra{opacity:0;transform:translateY(6px)}} @media (prefers-reduced-motion:reduce){#langList,.tabs.open a.tab-extra{transition:none}} /* the language picker on Data and the sign-in card: the chosen one is a tonal fill */ .lang-pick button.on{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-color:transparent;box-shadow:none} /* a notice or card the owner can put away (× at its top right, the same memory as the page tips) */ .has-x{position:relative;padding-right:44px} .has-x>.tip-x{position:absolute;top:6px;right:6px;font-size:22px;line-height:1;min-height:36px;min-width:36px;padding:0;color:inherit;text-decoration:none} /* a long request in flight (the demo load): a dialog with a spinner nobody can close by accident */ .busy-dlg{text-align:center} .spinner{width:36px;height:36px;margin:8px auto 14px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent); animation:spin .9s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){.spinner{animation-duration:3s}} /* a fold whose summary is an action ("Edit Mira's contacts"): drawn as an outlined button with a pencil, so it reads as something to tap and not as a caption */ summary.edit-btn{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px; border:1px solid var(--field);border-radius:var(--shape-full);color:var(--accent-text);font-weight:500;width:max-content;max-width:100%} summary.edit-btn::-webkit-details-marker{display:none} summary.edit-btn .ic{width:18px;height:18px} details[open]>summary.edit-btn{background:var(--md-secondary-container);color:var(--md-on-secondary-container);border-color:transparent} /* The Add wizard (owner, 2026-10-16): a list's add form in steps, over the list; a bottom sheet on a phone. */ dialog.wizard{width:min(640px,calc(100vw - 24px));max-height:92dvh;overflow:auto;padding:20px 20px 24px} dialog.wizard .wz-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} dialog.wizard .wz-head h2{margin:0;font-size:22px;line-height:28px;font-weight:600} dialog.wizard .wz-head .tip-x{position:static;font-size:26px;color:var(--muted)} .wz-dots{display:flex;gap:6px;margin:12px 0 16px} .wz-dots span{flex:1;height:4px;border-radius:var(--shape-full);background:var(--line)} .wz-dots span.on{background:var(--accent)} fieldset.wstep{border:0;margin:0;padding:0;min-width:0} fieldset.wstep[hidden]{display:none} .wz-nav{justify-content:space-between} .wz-nav [data-wz-next]{margin-left:auto} .kind-pick{display:grid;gap:4px} @media (max-width:600px){ dialog.wizard{width:100%;max-width:100%;margin:auto 0 0;border-radius:var(--shape-xl) var(--shape-xl) 0 0; padding-bottom:calc(24px + env(safe-area-inset-bottom));max-height:94dvh} @starting-style{dialog.wizard[open]{transform:translateY(24px)}} } /* One drop-down for every list (pickSelect in core.js): the field is a button drawn like an outlined field with our chevron; the