:root{ /* ================= DOT BRAND TOKENS ================= To rebrand this app for a client, change ONLY these values. Nothing else in this stylesheet needs to be touched. ==================================================== */ /* SPLIT (3 Sep 2026): dark-green chrome, light working surfaces. The header and the bottom nav keep the brand green; every card, form, list and panel between them is white on an off-white ground. Values are the approved "Split" set from design/gen.py — change them there first, then here. */ --bg:#F3F5F2; /* page ground */ --panel:#FFFFFF; /* cards and panels */ --panel-2:#F3F5F2; /* inset surfaces: pressed states, image wells, code */ /* Component boundaries. A white card on an off-white ground is told apart by its hairline and its shadow, not by a 3:1 rule — WCAG 1.4.11 asks that of the boundary of a CONTROL you must find by its edge, which here means the form fields. Those use --field-line below. */ --line:#D9E0DB; /* card and panel hairlines */ --line-soft:#EBEFEC; /* hairlines between rows inside one card */ --brass:#3F7D5A; /* primary accent: icons, ticks, focus, links on white (4.89:1) */ --brass-bright:#D7F75B;/* lime — the FAB, and the ink on a primary button. Nothing else. */ --rust:#B85C1F; /* warnings — 4.58:1 on white. The old #E08A3C measured 2.67:1. */ --cream:#08211E; /* body text (the name is historical — it is the dark ink now) */ --muted:#5F7069; /* secondary text — 5.24:1 on white, 4.78:1 on the ground */ --profit:#247A44; /* positive numbers — 5.33:1 on white; #7BD88F was 1.74:1 */ --loss:#C0392B; /* negative numbers — 5.44:1 on white */ /* Dot orange: the one colour that means "Dot is asking you something". Same job in all three products. On white it has to be the rust value — the dialog title and the pencilled-in field border both sit on white now. */ --dot-orange:#B85C1F; /* Accent as TEXT on the off-white ground misses 4.5:1 by a hair (4.46), so the eyebrow and the credit line use this deeper green instead (7.9:1). */ --accent-ink:#2F5F3F; /* Rust as text on any tinted ground (4.17:1) — the deeper cut passes (5.4:1). */ --rust-ink:#9E4E19; /* Chrome — the header, the bottom nav, the toast, the icon plates on tiles. */ --chrome:#08211E; --chrome-ink:#F2F7F0; --chrome-mut:#9DB8AF; --plate:var(--chrome); --plate-ink:var(--brass-bright); /* Form fields. The border is the only thing that says "type here", so it carries 3:1 on white and on the ground (3.87 / 3.53). The approved sketch had #C9D3CD, which measures 1.53:1 — the one place the gate beat the sketch. */ --field:#FFFFFF; --field-line:#76857F; --field-ph:#5E6F69; /* placeholder 5.3:1 on white, 4.65:1 on the invalid-field wash */ /* Tinted strips: the "all current" note, warnings, and the loss banner. */ --good-bg:#EEF6E3; --good-line:#CFE3B9; --good-ink:#2F5F3F; --warm-bg:#FBF3EA; --warm-line:#DFB69A; --bad-bg:#FBEDEA; --bad-line:#E3A6A0; /* One shadow for lifted surfaces, one for flat cards. Both tinted with the ink, not black — black shadows were tuned for the dark ground. */ --shadow:0 1px 2px rgba(8,33,30,.05), 0 6px 18px -12px rgba(8,33,30,.18); --shadow-card:0 1px 2px rgba(8,33,30,.05); /* Aliases so the shared Dot Dialog inherits this app's palette. Dot Book names these --cream / --muted / --brass-bright / --brass / --loss. */ --ink:var(--cream);--mut:var(--muted);--lime:var(--brass-bright); --accent:var(--brass);--bad:var(--loss); /* ---- Corner radii. Three steps, nothing else. -------------------------- --r-sm controls: inputs, chips-in-a-box, small tiles, icon plates --r-md surfaces: cards, panels, buttons, photo boxes --r-pill fully round: pills, badges, filter chips, toast, meters (A true circle — avatars, the FAB — stays 50%; that is a shape, not a corner.) */ --r-sm:12px; --r-md:16px; --r-pill:999px; --radius:var(--r-md); /* legacy alias — same value, kept so nothing breaks */ /* ---- Type scale. Eight steps plus one display size for decorative glyphs. Nothing is below 11px: this is read at arm's length on a counter tablet, not at 30cm on a phone. -------------------------------- */ --t-xs:11px; /* eyebrows, badges, nav labels, captions */ --t-sm:12px; /* dense meta */ --t-base:13px; /* labels, secondary body */ --t-md:15px; /* body, card titles, buttons */ --t-lg:17px; /* inputs, list item names, large buttons */ --t-xl:20px; /* section titles, stat figures, glyph plates */ --t-2xl:24px; /* big glyphs, chevrons */ --t-3xl:28px; /* the one page-level greeting */ --t-display:40px; /* decorative emoji in empty states / photo box only */ /* Browser-supplied UI — scrollbars, the date picker, the select popup, autofill — follows the working surfaces, which are light again. */ color-scheme: light; } /* The shared standards layer (dot-ui.css, identical across the three apps) paints a lime focus ring and a green-on-white text selection, both drawn for the dark ground. Lime on white measures 1.21:1 — invisible — so on the light surfaces the ring is the accent green (4.89:1) and lime is kept for the dark chrome, where it measures 13.9:1. `body *` beats dot-ui's bare selectors. */ body :focus-visible{outline-color:var(--brass);} header :focus-visible,header select:focus-visible,.bottom-nav :focus-visible{outline-color:var(--brass-bright);} body *::selection{background:rgba(63,125,90,.28); color:var(--ink);} /* ================= ICONS ================= AUDIT FIX M2 (2 Sep 2026): one inline-SVG family replaces the old mix of OS emoji and stray Unicode glyphs. The shapes live in the sprite at the top of index.html; every visual property of the family is set here, once, so weight and colour cannot drift between screens the way the two hammers did. Colour is currentColor, so an icon takes the colour of its own label and recolours with the theme and with state (.active nav, .danger-outline, etc). Size is 1em: each icon inherits the font-size of the slot it replaced, so nothing on any screen reflows. */ .dot-i{width:1em; height:1em; flex:0 0 auto; display:inline-block; vertical-align:-0.135em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; overflow:visible;} /* The round FAB and the empty-state mark set their glyph size for a glyph's ink, not a full em square; an outline icon fills the em, so it is stepped back to the same optical size. Neither element's box changes. */ .bottom-nav .nav-add .dot-i{width:.72em; height:.72em;} .empty .big .dot-i{width:.8em; height:.8em;} *{box-sizing:border-box; -webkit-tap-highlight-color: transparent;} html,body{margin:0; padding:0; background:var(--bg); color:var(--cream); font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; -webkit-user-select:none; user-select:none; } /* The lime glow that used to sit behind the header was drawn for the dark ground; on off-white it read as a stain. Flat ground now. */ body{padding-bottom:108px;background:var(--bg);} input,textarea{ -webkit-user-select:text; user-select:text; } /* Anything without an explicit size inherited the UA's 16px (containers, the empty states) or its 13.3px button default — two more steps in the scale that no stylesheet had chosen. Both now land on --t-md. */ html,body{font-size:var(--t-md);} button,input,textarea,select{font-family:inherit; font-size:inherit;} /* ---------- Header ---------- */ /* The header is two things in one sticky block: the dark brand band, and the three stat cards, which the approved sketch puts on the light ground just under it. The DOM keeps both inside
; the dark band is painted by a pseudo-element behind .brandrow that bleeds out to the header's edges and up through its top padding, and the header itself is the page ground. */ header{ background:var(--bg); border-bottom:3px solid var(--bg); /* keeps the height; the edge is the hairline below */ box-shadow:0 1px 0 var(--line); padding:16px 18px 14px; position:sticky; top:0; z-index:50; overflow:hidden; } .brandrow::before{content:''; position:absolute; z-index:-1; inset:-16px -100vw -12px; background:var(--chrome);} .edition-pill{display:inline-block;border:1px solid rgba(215,247,91,.45);color:var(--brass-bright);font-size:var(--t-xs);letter-spacing:.6px;padding:2px 8px;border-radius:var(--r-pill);vertical-align:2px;margin-left:5px;} .brandrow{display:flex; align-items:center; gap:14px; position:relative; color:var(--chrome-ink); background:var(--chrome);} .brand-logo{width:72px; height:72px; flex:0 0 auto; object-fit:cover; border-radius:var(--r-md); border:2px solid var(--brass-bright); box-shadow:0 8px 24px rgba(0,0,0,.35);} .smokemark{width:50px; height:50px; flex:0 0 auto;} .brandtext{flex:1; min-width:0;} .brandtext .name{ font-size:var(--t-2xl); font-weight:800; letter-spacing:.6px; color:var(--chrome-ink); line-height:1.1; font-family:-apple-system,'Segoe UI',Roboto,Arial,sans-serif; } .brandtext .sub{font-size:var(--t-base); color:var(--chrome-mut); letter-spacing:2px; text-transform:uppercase; margin-top:2px;} .gear-btn{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-size:var(--t-xl); flex:0 0 auto; color:var(--chrome-ink); } .stats{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin-top:16px;} .stat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 10px; text-align:center; box-shadow:var(--shadow-card);} .stat .num{font-size:var(--t-xl); font-weight:800; color:var(--cream);} .stat .lbl{font-size:var(--t-xs); color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-top:4px;} .stat.profit .num{color:var(--profit);} /* ---------- Main layout ---------- */ main{padding:18px; max-width:720px; margin:0 auto;} .view{display:none;} .view.active{display:block;} .bigbtn{ width:100%; padding:22px 20px; border-radius:var(--r-md); border:none; font-size:var(--t-xl); font-weight:800; letter-spacing:0.5px; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:12px; margin-bottom:14px; cursor:pointer; } /* Primary is dark ink with lime lettering — the sketch's one loud thing. The old lime slab with a brown ledge under it was a dark-ground device. */ .bigbtn.primary{background:var(--chrome); color:var(--brass-bright); box-shadow:0 1px 2px rgba(8,33,30,.2);} .bigbtn.secondary{background:var(--panel); color:var(--cream); border:1px solid var(--field-line); box-shadow:var(--shadow-card);} .bigbtn.primary:active{transform:translateY(1px); box-shadow:none;} .bigbtn.secondary:active{background:var(--panel-2);} .bigbtn .icon{font-size:var(--t-2xl);} .toplinks{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:16px;} .toplinks a,.linkbtn{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:10px 18px; color:var(--cream); font-size:var(--t-md); font-weight:700; text-decoration:none; cursor:pointer; background:var(--panel); border:1px solid var(--field-line); border-radius:var(--r-pill); transition:background .15s ease, border-color .15s ease;} .toplinks a:active,.linkbtn:active{background:var(--panel-2); border-color:var(--brass);} /* The document-reader button is disabled while it works. Nothing marked that before; on white the button simply looked ready. */ .linkbtn:disabled,.bigbtn:disabled{opacity:.55; cursor:default;} .linkbtn.danger{color:var(--loss); border-color:var(--bad-line);} .sectiontitle{font-family:inherit; font-size:var(--t-xl); font-weight:800; color:var(--cream); margin:22px 0 12px; letter-spacing:0.5px;} .listspace{margin-top:14px;} .mutedline{color:var(--muted); font-size:var(--t-md);} .mutedline strong{color:var(--cream);} .mutedparagraph{color:var(--muted); font-size:var(--t-md); line-height:1.5;} /* ---------- Premium dashboard ---------- */ /* The greeting was a 148px card whose min-height and 72%-wide text column were reserving space for a 185px bleed illustration that was never shipped (styles.css had the img rule; index.html has no img). Three lines of text sat above an empty void on the app's most-used screen. It is a greeting, not a record and not a control, so it is now a heading: no border, no gradient, no shadow, no reserved slot. That gives back the void AND removes one of the six competing card systems on Home. */ .welcome-panel{position:relative;display:block;padding:4px 2px 2px;margin-bottom:18px;} .welcome-panel>div{position:relative;z-index:2;max-width:none;} .welcome-panel .eyebrow{color:var(--accent-ink);font-size:var(--t-xs);font-weight:900;letter-spacing:1.7px;text-transform:uppercase;} .welcome-panel h1{font:800 var(--t-3xl)/1.08 -apple-system,'Segoe UI',Roboto,Arial,sans-serif;margin:9px 0 8px;color:var(--cream);} .welcome-panel p{margin:0;color:var(--muted);font-size:var(--t-base);line-height:1.45;} .quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;} /* Tiles are flat white cards. The featured tile no longer gets its own lime border and green wash — on white that read as a warning, not an invitation; the dark icon plate is what every tile leads with now. */ .action-tile{min-height:112px;text-align:left;padding:15px;border-radius:var(--r-md);border:1px solid var(--field-line);background:var(--panel);color:var(--cream);box-shadow:var(--shadow);} .action-tile.featured{border-color:var(--field-line);background:var(--panel);} .quick-actions .action-tile.featured{box-shadow:var(--shadow);} /* over dot-ui's green glow */ .action-tile>span{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:var(--r-sm);background:var(--plate);color:var(--plate-ink);font-size:var(--t-xl);margin-bottom:10px;} .action-tile strong,.action-tile small{display:block;}.action-tile strong{font-size:var(--t-md);}.action-tile small{color:var(--muted);font-size:var(--t-xs);margin-top:4px;line-height:1.3;} .report-strip{width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:14px;border:1px solid var(--field-line);border-radius:var(--r-md);background:var(--panel);color:var(--cream);margin-bottom:12px;box-shadow:var(--shadow-card);} .report-strip .report-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r-sm);background:var(--plate);color:var(--plate-ink);font-size:var(--t-xl);}.report-strip>span:nth-child(2){flex:1}.report-strip strong,.report-strip small{display:block}.report-strip strong{font-size:var(--t-md)}.report-strip small{font-size:var(--t-xs);color:var(--muted);margin-top:3px}.report-strip b{font-size:var(--t-2xl);color:var(--muted);} .insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px;}.insight-grid button{padding:13px 7px;border:1px solid var(--field-line);border-radius:var(--r-md);background:var(--panel);color:var(--cream);box-shadow:var(--shadow-card)}.insight-grid span,.insight-grid small{display:block}.insight-grid span{font-weight:900;font-size:var(--t-md);color:var(--cream);overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.insight-grid small{margin-top:4px;color:var(--muted);font-size:var(--t-xs);} .inventory-search-label{margin-top:2px}.search-wrap{position:relative;margin-bottom:12px}.search-wrap>span{position:absolute;left:14px;top:50%;transform:translateY(-52%);font-size:var(--t-2xl);color:var(--muted)}.search-wrap input{padding-left:44px!important;background:var(--field)!important;} /* The nav is chrome: the same green as the brand band, with the sketch's hairline on top. Inactive labels are the chrome's muted tint (7.95:1), the selected one lime. */ .bottom-nav{position:fixed;z-index:100;left:50%;bottom:0;transform:translateX(-50%);width:min(720px,100%);display:grid;grid-template-columns:1fr 1fr 72px 1fr 1fr;align-items:end;padding:9px 10px max(9px,env(safe-area-inset-bottom));background:rgba(8,33,30,.96);backdrop-filter:blur(18px);border-top:1px solid var(--line);box-shadow:0 -12px 30px rgba(8,33,30,.12)} /* Was 9px uppercase with 0.5px tracking on the app's primary navigation — a shape, not a word, at 60-70cm. 11px with the tracking spent back on legibility. Plus a non-colour cue for the selected tab: the old design separated selected from unselected by colour alone, and the two colours measured 1.89:1 against each other. */ /* The nav's grid is capped at 720px. On the dark ground its edges were invisible; on the light ground they showed as a floating dock. A pseudo- element carries the same chrome the full width of the window behind it, so the band reads as one bar at every width. (The sketch's desktop answer is a left rail — a layout change, and not part of this pass.) */ .bottom-nav::before{content:'';position:absolute;z-index:-1;top:-1px;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:rgba(8,33,30,.96);border-top:1px solid var(--line)} .bottom-nav button{position:relative;height:50px;border:0;background:none;color:var(--chrome-mut);font-size:var(--t-xs);font-weight:800;text-transform:uppercase;letter-spacing:.2px} .bottom-nav button.active::before{content:'';position:absolute;top:-9px;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--brass-bright)}.bottom-nav button>span{display:block;font-size:var(--t-xl);line-height:24px}.bottom-nav button.active{color:var(--brass-bright)}.bottom-nav .nav-add{width:54px;height:54px;align-self:end;justify-self:center;margin:0 0 -2px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--brass-bright);color:var(--chrome);border:3px solid var(--chrome);box-shadow:0 6px 16px rgba(8,33,30,.25)}.bottom-nav .nav-add span{display:block;font-size:var(--t-3xl);line-height:1;transform:translateY(-1px)} /* ---------- Cards ---------- */ .card,.history-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; margin-bottom:12px; display:flex; gap:14px; align-items:center; cursor:pointer; box-shadow:var(--shadow-card); } .card:active,.history-card:active{background:var(--panel-2);} .card img,.history-card img{width:72px; height:72px; object-fit:cover; border-radius:var(--r-sm); background:var(--panel-2); flex:0 0 auto; border:1px solid var(--line);} .card .noimg,.history-card .noimg{width:72px; height:72px; border-radius:var(--r-sm); background:var(--panel-2); flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:var(--t-3xl); color:var(--muted); border:1px solid var(--line);} .card .info,.history-card .info{flex:1; min-width:0;} .card .gname,.history-card .hname{font-size:var(--t-lg); font-weight:700; color:var(--cream); margin-bottom:4px;} .card .gmeta,.history-card .hmeta{font-size:var(--t-base); color:var(--muted); line-height:1.35;} .card .price,.history-card .price{font-size:var(--t-lg); font-weight:800; color:var(--cream); white-space:nowrap;} .card .price.sold,.history-card .price.sold{color:var(--profit);} .card .price.sold.loss,.history-card .price.sold.loss{color:var(--loss);} /* Badges were translucent washes over the dark panel. On white they are the three tinted strips: good (green), neutral (the row hairline), bad (red). */ .badge{display:inline-block; font-size:var(--t-xs); padding:2px 9px; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:1px; margin-bottom:4px;} .badge.stock{background:var(--good-bg); color:var(--good-ink);} .badge.sold{background:var(--good-bg); color:var(--profit);} .badge.repair{background:var(--line-soft); color:var(--muted);} .badge.ready{background:var(--good-bg); color:var(--profit);} .badge.due{background:var(--bad-bg); color:var(--loss);} .badge.cat{background:var(--line-soft); color:var(--muted); margin-left:6px;} .empty{text-align:center; padding:50px 20px; color:var(--muted);} .empty .big{font-size:var(--t-display); margin-bottom:10px;} /* ---------- Forms ---------- */ label{display:block; font-size:var(--t-base); color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin:16px 0 6px;} label.first{margin-top:4px;} /* AUDIT FIX, 14 Sep 2026 (sector E). This list named input types one by one, so every type NOT named fell back to the browser's own tiny unstyled box. The s.21(2) fields added today — the seller's telephone (type=tel) and the time of the transaction (type=time) — landed unstyled and half the height of everything around them, on the one form a dealer fills in all day. Naming types one at a time guarantees this happens again with the next field, so it is now every text-like input EXCEPT the ones with their own treatment (checkbox, radio, and the hidden file input). */ input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]), textarea,select{ width:100%; padding:14px; border-radius:var(--r-sm); border:1px solid var(--field-line); background:var(--field); color:var(--cream); font-size:var(--t-lg); } textarea{resize:none; height:70px;} textarea.largearea{height:120px;} /* Browser-default placeholders were #757575 on these fields: 2.71:1. This pins the placeholder to a token that passes (4.71:1) because a UA default is not a design decision. opacity:1 is required — Firefox applies its own. */ input::placeholder,textarea::placeholder{color:var(--field-ph); opacity:1;} /* :focus beat dot-ui.css's :focus-visible on specificity, so fields got a 2px ring where every other control gets a 3px one. Accent green, not lime: lime on a white field is 1.21:1. */ input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--brass); outline-offset:2px;} .photo-box{ width:100%; aspect-ratio:4/3; border-radius:var(--r-md); border:2px dashed var(--field-line); background:var(--panel); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; color:var(--muted); overflow:hidden; position:relative; } .photo-box .ph-icon{color:var(--brass);} .photo-box img{width:100%; height:100%; object-fit:cover;} .photo-box .ph-icon{font-size:var(--t-display);} .photo-box .ph-txt{font-size:var(--t-md);} .retake{position:absolute; bottom:10px; right:10px; background:rgba(0,0,0,0.6); color:white; padding:8px 14px; border-radius:var(--r-pill); font-size:var(--t-base); border:1px solid rgba(255,255,255,0.3);} .formgrid{display:grid; grid-template-columns:1fr 1fr; gap:12px;} .saverow{margin-top:24px; display:flex; gap:10px;} .saverow .bigbtn{margin-bottom:0;} input[type=file]{display:none;} /* The chevron is the accent green (was an old brass #C9912E that matched nothing). */ select{-webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 16px center; } /* ---------- Detail ---------- */ .detail-photo{width:100%; aspect-ratio:4/3; border-radius:var(--r-md); object-fit:cover; background:var(--panel-2); border:1px solid var(--line); margin-bottom:16px;} .detail-grid,.summary-grid{background:var(--panel); border-radius:var(--r-md); border:1px solid var(--line); overflow:hidden; margin-bottom:16px; box-shadow:var(--shadow-card);} .detail-row{display:flex; justify-content:space-between; padding:13px 16px; border-bottom:1px solid var(--line-soft); gap:20px;} .detail-row:last-child{border-bottom:none;} .detail-row .k{color:var(--muted); font-size:var(--t-md);} /* 21 Sep 2026: overflow-wrap:anywhere let this flex item shrink to one character of min-content, so on a 390px phone the Money Report's headline read "R48,00" with the last zero orphaned onto the next line - a factor of ten, on the money screen, on the device he actually uses. CORRECTED THE SAME DAY. The first fix was white-space:nowrap with a .v.longtext escape hatch for the free-text rows - and the escape hatch was never wired to anything, so the seller's name, ID number, address, the verification note and the fault on a job card were all silently CUT at the card edge, with .detail-grid's overflow:hidden meaning no ellipsis and no scroll. A truncated value looks exactly like the whole value. That is worse than the wrap it replaced, and on a register entry it hides the particular an officer asks for. The culprit was only ever overflow-wrap:anywhere, which lets a flex item shrink to ONE CHARACTER of min-content. break-word wraps between words and only breaks a word that cannot fit on a line of its own - and the money formatter uses a non-breaking space between thousands, so R48 000 is one unbreakable token either way. Long text wraps; numbers stay whole. */ .detail-row .v{font-weight:700; font-size:var(--t-md); text-align:right; max-width:62%; flex:0 1 auto; white-space:normal; overflow-wrap:break-word;} .profit-banner{text-align:center; padding:18px; border-radius:var(--r-md); margin-bottom:16px; font-weight:800; font-size:var(--t-xl);} .profit-banner.win{background:var(--good-bg); color:var(--profit); border:1px solid var(--good-line);} .profit-banner.lose{background:var(--bad-bg); color:var(--loss); border:1px solid var(--bad-line);} .note-box{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:14px; color:var(--cream); line-height:1.5; white-space:pre-wrap; min-height:54px;} /* ---------- Filters ---------- */ .filterrow{display:flex; gap:8px; overflow-x:auto; padding:4px 0 16px; -webkit-overflow-scrolling:touch;} .filterrow::-webkit-scrollbar{display:none;} /* The row scrolls sideways with the scrollbar hidden — right on a tablet where you swipe. On a mouse there is no swipe and no scrollbar, so every category past the fold was unreachable. Reported from a desktop, 03 Aug 2026. On a pointer device the row wraps instead: there is room, and nothing needs scrolling at all. */ @media (hover:hover) and (pointer:fine){ .filterrow{flex-wrap:wrap; overflow-x:visible;} } /* 21 Sep 2026: 35px tall on a phone, against a 44px minimum - the only two rows in the app that missed it, and a miss silently changes what he is looking at. Padding alone got it to 41px, which is not the fix; an explicit min-height with the flex centring is. */ .chip{display:inline-flex; align-items:center; min-height:44px; flex:0 0 auto; padding:12px 16px; border-radius:var(--r-pill); font-size:var(--t-base); font-weight:700; background:var(--panel); border:1px solid var(--field-line); color:var(--muted); white-space:nowrap; cursor:pointer;} /* The chosen chip is drawn like the primary button — dark with lime lettering — so "selected" and "the next step" are the same shape everywhere. */ .chip.active{background:var(--chrome); color:var(--brass-bright); border-color:var(--chrome);} .helpbox{ background:var(--good-bg); border:1px solid var(--good-line); color:var(--muted); border-radius:var(--r-sm); padding:12px 14px; font-size:var(--t-base); line-height:1.45; margin:8px 0 14px; } /* ---------- Document reader (dot-docreader.js) ---------- */ /* A field the reader filled in is drawn in Dot orange — the one colour that means "Dot is asking you something" — until the person edits it. Dashed, because it is pencilled in, not written. */ input.is-suggested{border:1px dashed var(--dot-orange); background:var(--warm-bg); box-shadow:inset 3px 0 0 var(--dot-orange);} .field-flag{color:var(--loss); font-size:var(--t-base); line-height:1.4; margin-top:6px;} .docreader-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:14px;} .docreader-hint{color:var(--muted); font-size:var(--t-base); line-height:1.4; flex:1 1 200px;} .docreader-status{color:var(--cream); font-size:var(--t-base); line-height:1.45; margin-top:10px; padding:10px 14px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--line);} .docreader-notice{border-color:var(--warm-line); background:var(--warm-bg); color:var(--cream);} /* A tick with its sentence. The label is not uppercase like a field label — it is a sentence the person is agreeing to, so it reads as one. */ .tickrow{display:flex; align-items:flex-start; gap:12px; text-transform:none; letter-spacing:0; font-size:var(--t-md); color:var(--cream); line-height:1.4; margin:12px 0 4px; cursor:pointer;} /* AUDIT FIX, 14 Sep 2026 (sector E, finding 7). A 22px box is half the 44px minimum, and one of these — "bought from a member of the public" — decides whether an item goes on the statutory register at all. The BOX stays 22px (a giant tick looks wrong); the ROW around it is the target, and the whole row has always been clickable because it is a