/* TrimOut app chrome. * * HISTORY, CORRECTED AT THE CLAIM (24d, 2026-08-24): this file began as a * verbatim copy of site/trimout-app-screens.html's style block, under a * nothing-redesigned law that kept three agents' markup and one stylesheet * from drifting. Rex then ruled on the LOOK itself ("It feels like I'm * filling in a Word document... I want it to look clean and attractive * rather than cold and standard") and ratified the paint-job direction: * SAME STRUCTURE, NEW SKIN. So the copy law is dead and the CLASS * CONTRACT is the whole law now: * * card btn btn g btn sm btn w field row spread pill p-ok p-warn * p-bad p-mute note note w note b drop steps kpi q opts opt lic * dots narrow top tabs who av * * EVERY SELECTOR AND CLASS NAME IN THIS FILE IS FROZEN; only values may * change. A class renamed here is a screen that silently loses its * styling, and the screen agent who wrote the markup will be looking for * the bug in his own template. New rules go at the bottom under their own * comment, as they always did. tools-side: the 24d deploy note carries a * scripted before/after selector diff proving nothing was removed. * * THE SKIN (24d, the ratified mock): slate ink and porcelain neutrals, a * copper accent (the trade's own material) for primary actions and the * current step, green kept as the one color of progress, Bricolage * Grotesque for headings and Instrument Sans for body, hairline borders * traded for soft shadows on cards. Fonts load from Google Fonts in * base.html; every face declares a full system fallback stack, so the * 401 gate and an offline box render fine without the fetch. * * --------------------------------------------------------------------------- * THE SKIN AGAIN (DEC-123, 2026-08-29, Rex on the TrimOut Look canvas): "Use * the new website template we created." It is THE FIELD BOOK, and it lands * here as values only, which is what makes it a skin rather than a rebuild: * every selector, every class name and every rule below is the one that was * here before the change. * * paper #f7f1e3 for the page, #fdf8ee for cards, #efe6d2 for panels * ink #2b2620, muted #77705f, dashed dividers #d9cdb2 * green #3f7d51 for done, which is the same job green already had * Lora for headings, Nunito Sans for body, IBM Plex Mono for figures * * BUTTONS ARE DEEP TEAL #3d7068 AND NEVER ORANGE. Rex rejected orange * buttons twice, including the accent dot on the Field Book board itself, so * `--accent` - which is what `.btn` paints with - is teal. TERRACOTTA * #c24d2f SURVIVES AS A SMALL TEXT ACCENT AND NOWHERE ELSE: it is `--said`, * it names the line the punch list is asking him about, and it appears in no * `background` declaration in this file. `tests/test_29f_the_field_book.py` * holds both halves of that as a lint. * * --------------------------------------------------------------------------- * THE SKIN AGAIN, AGAIN (Order 2026-09-02b, THE DOORS AND THE PAINT, ruling * 4): "The app should follow the same color and flow as the main website." * DEC-123's Field Book paper is retired - it lasted one order - and the * values below are lifted from site/index.html's own :root, the same way * the Field Book's were lifted from the TrimOut Look canvas. TEAL STAYS: * `--accent`/`--blue` were already #3d7068, so the never-orange rule and * every test that pins it carry forward untouched. What actually moves: * * white page #ffffff, cool-white alternate #f5f8f7 (was cream #f7f1e3/ * #fdf8ee/#efe6d2, all three collapsed to one pair), ink #17211f (was * warm black #2b2620), line/rule #e2e8e6 (was dashed tan #d9cdb2), * muted #6f7b79, body copy #46514f * Manrope 700/800 for headings (was Lora), Source Sans 3 for body (was * Nunito Sans), IBM Plex Mono unchanged for figures * buttons keep their 48px height but take the site's 10px radius, not a * pill; the secondary button's ink border is 1.5px, matching the site * cards keep 14px radius and the site's own soft shadow * warn #8a6d1f and bad #9c3b22 are unchanged - already not orange, so * there was nothing to fix * * `--said` (terracotta #c24d2f) is UNCHANGED AND STILL TEXT-ONLY: the site * has no equivalent of a "this is the line we are asking about" accent, so * there is no site value to adopt in its place, and the alternative * (folding it into `--teal-ink`) would erase the one signal a dealer has for * which punch-list line is open. It keeps its own custom property and its * own lint in test_29f, both untouched by this order. * ------------------------------------------------------------------------- */ :root{ --ink:#17211f; --blue:#3b42ff; --blue-d:#1d73e8; --muted:#636b8a; --rule:#e5e7f2; --bg:#ffffff; --tint:#f7f8fc; --mid:#414a5e; --accent:#3b42ff; --mark-block:#1A5FA8; --accent-d:#1d73e8; --accent-bg:#eef0ff; --ok:#2f7d4f; --okbg:#e3f1e7; --warn:#8a6d1f; --warnbg:#fbf3df; --bad:#9c3b22; --badbg:#f6e6df; --shadow:0 6px 24px rgba(23,33,31,.06); /* the third paper, for panels and rails. Same value as --tint now that the site's paint has only one alternate to the white page; the name stays separate so no rule below this line changes shape. */ --panel:#f7f8fc; /* the ONE place terracotta is allowed: small text, never a control. */ --said:#c24d2f; } *{box-sizing:border-box;margin:0;padding:0} body{background:var(--tint);color:var(--ink); font:17px/1.6 "Source Sans 3",Verdana,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif} h1{font:800 32px/1.15 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; letter-spacing:-.02em;margin-bottom:6px} h2{font:700 21px/1.25 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; letter-spacing:-.02em;margin-bottom:4px} h3{font:700 16px/1.3 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; letter-spacing:-.02em;margin-bottom:5px} p{color:var(--mid)} .sub{color:var(--muted);font-size:14.5px;margin-bottom:22px} a{color:var(--blue)} code{font:12.5px "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;background:var(--tint); padding:1px 5px;border-radius:3px;border:1px solid var(--rule)} /* app chrome. Order 2026-09-02b: the header matches the site's - white, sticky, a 1px bottom line, 64px tall - not the Field Book's panel-tinted bar with a 2px rule. */ .top{background:var(--bg);border-bottom:1px solid var(--rule);box-shadow:none; position:sticky;top:0;z-index:60} .top .in{max-width:1080px;margin:0 auto;padding:0 24px;height:64px;display:flex; align-items:center;gap:22px} .brand{display:flex;align-items:center;gap:10px; font:800 22px/1 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; letter-spacing:-.02em;text-decoration:none;color:var(--ink)} .tabs{display:flex;gap:20px;margin-left:14px} .tabs a{color:var(--muted);text-decoration:none;font-size:15px;font-weight:700; padding:20px 0;border-bottom:3px solid transparent} .tabs a.cur{color:var(--ink);border-bottom-color:var(--accent)} .who{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--mid)} .av{width:29px;height:29px;border-radius:50%;background:var(--ink);color:var(--bg); display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:680} main{max-width:1080px;margin:0 auto;padding:28px 24px 80px} .narrow{max-width:460px;margin:0 auto;padding:56px 24px 80px} /* bits. Order 2026-09-02b: the card border drops to the site's 1px line and the shadow is the site's own soft one (set on --shadow above); the radius was already 14px and needed no change. */ .card{background:var(--bg);border:1px solid var(--rule);border-radius:14px; padding:24px 26px;margin-bottom:16px;box-shadow:var(--shadow)} .card.pad0{padding:0;overflow:hidden} /* A row's actions sheet must escape the card; :has flips the clip only while a menu is open, so the rounded table corners keep their trim the rest of the time (found on the 08-12 browser pass: the sheet rendered clipped to a sliver). */ .card.pad0:has(.menu[open]){overflow:visible} /* Buttons keep their 48px-tall touch target but take the site's 10px radius, not a pill; `.btn.sm` overrides the height back down since the site never scaled its small buttons up. */ .btn{display:inline-flex;align-items:center;justify-content:center; height:48px;background:var(--accent);color:var(--bg);border:0; border-radius:10px;padding:0 26px;font:inherit;font-size:15px; font-weight:700;cursor:pointer;text-decoration:none} .btn:hover{background:var(--accent-d)} .btn.g{background:var(--bg);color:var(--ink);border:1.5px solid var(--ink)} .btn.g:hover{background:var(--tint)} .btn.sm{height:36px;padding:0 16px;font-size:13px} .btn.w{width:100%;text-align:center} .btn[disabled]{opacity:.45;cursor:not-allowed} .field{margin-bottom:14px} .field label{display:block;font-size:12.5px;font-weight:640;color:var(--mid);margin-bottom:5px} .field input,.field select,.field textarea{width:100%;font:inherit;font-size:15px; padding:10px 12px;border:1.5px solid var(--rule);border-radius:9px;background:var(--bg);color:var(--ink)} .field input:focus,.field select:focus{outline:0;border-color:var(--accent)} .row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .spread{display:flex;justify-content:space-between;align-items:flex-start;gap:16px} table{width:100%;border-collapse:collapse;font-size:13.5px} th,td{text-align:left;padding:10px 12px;border-bottom:1.5px dashed var(--rule);vertical-align:middle} th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted); font-weight:700;background:var(--tint)} tr:last-child td{border-bottom:0} td input,td select{width:100%;font:inherit;font-size:13.5px;padding:5px 8px; border:1.5px solid transparent;border-radius:5px;background:transparent;color:var(--ink)} td input:hover,td select:hover{border-color:var(--rule);background:var(--bg)} td input:focus,td select:focus{outline:0;border-color:var(--accent);background:var(--bg)} td input.edited{background:var(--accent-bg);border-color:var(--accent);font-weight:600} .pill{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px; letter-spacing:.02em;white-space:nowrap} .p-ok{background:var(--okbg);color:var(--ok)} .p-warn{background:var(--warnbg);color:var(--warn)} .p-bad{background:var(--badbg);color:var(--bad)} .p-mute{background:var(--tint);color:var(--muted)} .note{background:var(--tint);border-left:3px solid var(--blue);padding:12px 16px; border-radius:0 9px 9px 0;font-size:14px;margin:14px 0;color:var(--mid)} .note b{color:var(--ink)} .note.w{background:var(--warnbg);border-left-color:var(--warn)} .note.b{background:var(--badbg);border-left-color:var(--bad)} .drop{border:2px dashed var(--rule);border-radius:12px;padding:32px;text-align:center; background:var(--tint);color:var(--muted);font-size:14px} .steps{display:flex;gap:0;margin-bottom:22px;background:#fff;border:1px solid var(--rule); border-radius:9px;overflow:hidden} .steps div,.steps a{flex:1;padding:11px 14px;font-size:12.5px;font-weight:600;color:var(--muted); border-right:1px solid var(--rule);display:flex;gap:8px;align-items:center;text-decoration:none} .steps div:last-child,.steps a:last-child{border-right:0} .steps div.done,.steps a.done{color:var(--ok);background:#FAFDFB} .steps a:hover{background:var(--tint);color:var(--ink)} .steps div.cur{color:var(--ink);background:var(--accent-bg);box-shadow:inset 0 -2px 0 var(--accent)} .steps i{font-style:normal;width:18px;height:18px;border-radius:50%;background:var(--rule); color:var(--muted);font-size:10.5px;display:flex;align-items:center;justify-content:center; font-weight:700} .steps .done i{background:var(--ok);color:#fff} .steps .cur i{background:var(--accent);color:#fff} /* 22i item 2: the progress bar. It sits ABOVE the steps because the steps are the thing it measures, and it is deliberately thin - Rex ruled a coarse step bar with the facts ratio inside the Questions step, not a dashboard. `width` is the CLAMPED number; the true one never leaves run.json. */ .prog{height:6px;background:var(--rule);border-radius:99px;overflow:hidden; margin-bottom:10px} .prog .fill{height:100%;background:var(--accent);border-radius:99px; transition:width .35s ease} .prog .fill.done{background:var(--ok)} /* The ratio inside one step. Muted and small: it is the inside of a step, never the outer number, and it must not read as the headline. */ .steps .facts{display:block;margin-top:5px;font-size:11px;font-weight:500; color:var(--muted);line-height:1.35} .steps .fbar{display:block;height:3px;background:var(--rule); border-radius:99px;overflow:hidden;margin-bottom:3px} .steps .fbar span{display:block;height:100%;background:var(--muted); border-radius:99px} .menu{position:relative;display:inline-block} .menu>summary{list-style:none;cursor:pointer;padding:4px 10px;border-radius:7px; font-weight:700;color:var(--muted);user-select:none} .menu>summary::-webkit-details-marker{display:none} .menu>summary:hover{background:var(--tint);color:var(--ink)} .menu[open]>summary{background:var(--tint)} .menu .sheet{position:absolute;right:0;top:100%;z-index:30;background:var(--bg); border:1.5px solid var(--rule);border-radius:12px;box-shadow:0 10px 28px rgba(43,38,32,.18); min-width:210px;padding:6px;white-space:normal;text-align:left} .menu .sheet .rename input{display:block} .menu .sheet form{margin:0} .menu .sheet button,.menu .sheet a{display:block;width:100%;text-align:left;background:none; border:0;padding:8px 12px;font-size:13.5px;border-radius:6px;cursor:pointer;color:var(--ink); text-decoration:none} .menu .sheet button:hover,.menu .sheet a:hover{background:var(--tint)} .menu .sheet button.danger{color:var(--bad)} /* 16f item 10a: the rename FIELDS live behind the rename CONTROL. The summary is styled as one more menu row so the closed menu reads as a list of actions rather than as a list with a form sitting open in it; the fields keep the padded, ruled-off block they had. */ .menu .sheet details.rename{margin-top:4px;border-top:1px solid var(--rule)} .menu .sheet details.rename > summary{display:block;padding:8px 12px;font-size:13.5px; border-radius:6px;cursor:pointer;color:var(--ink);list-style:none} .menu .sheet details.rename > summary::-webkit-details-marker{display:none} .menu .sheet details.rename > summary:hover{background:var(--tint)} .menu .sheet .rename form{padding:0 12px 8px} .menu .sheet .rename input{width:100%;border:1px solid var(--rule);border-radius:7px; padding:7px 9px;font-size:13px;margin-bottom:6px} .kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px} .kpi div{background:var(--bg);border:1.5px solid var(--rule);border-radius:12px; padding:15px 17px;box-shadow:var(--shadow)} .kpi.five{grid-template-columns:repeat(5,1fr)} .kpi b{display:block;font:700 23px/1.2 "IBM Plex Mono",ui-monospace,Menlo, Consolas,monospace;letter-spacing:-.01em} .kpi span{font-size:12px;color:var(--muted)} .kpi a{display:block;color:inherit;text-decoration:none} .kpi a:hover b{color:var(--total)} .kpi a:hover span{text-decoration:underline} .q{border:1.5px solid var(--rule);border-radius:14px;margin-bottom:14px;background:var(--bg); box-shadow:var(--shadow)} .q .h{padding:15px 18px;border-bottom:1px solid var(--rule)} .q .b{padding:15px 18px} .q .occ{font-size:12.5px;color:var(--muted);margin-top:9px;line-height:1.7} .opts{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px} .opt{border:1.5px solid var(--rule);border-radius:9px;padding:9px 14px;font-size:13.5px; cursor:pointer;background:var(--bg)} .opt:hover{border-color:var(--accent)} .opt.sel{border-color:var(--accent);background:var(--accent-bg);font-weight:620;color:var(--accent-d)} .lic{display:flex;justify-content:space-between;align-items:center;padding:12px 0; border-bottom:1px solid var(--rule);font-size:14px} .lic:last-child{border-bottom:0} .dots{font:14px "IBM Plex Mono",ui-monospace,monospace;color:var(--muted);letter-spacing:.14em} @media(max-width:820px){.kpi,.kpi.five{grid-template-columns:1fr 1fr} .tabs{display:none}} /* --------------------------------------------------------------------------- * BELOW THIS LINE IS NOT FROM THE PROTOTYPE. Two class names, both for one * thing the prototype has no state for. * * 08-07c item 5: Rex viewing a dealer's job "should still be recorded, with a * banner on screen while it is active, so it can never be mistaken for the * dealer's own action in a log". chrome() never drew that banner because the * prototype has no open-as-dealer mode to draw it in. * * THE BANNER HAS TO STAY ON SCREEN, not just be at the top of it. The failure * this exists to prevent is an admin who has forgotten he is acting as * somebody else and takes an action believing it is his own, and that is a * mistake made three screens down a page rather than at the top of one. So * .chrome wraps the banner and the header together and it is the thing that * sticks; .top keeps its own sticky rule from the lifted block, which inside * an already-stuck parent has nothing left to do and does it harmlessly. * ------------------------------------------------------------------------- */ .chrome{position:sticky;top:0;z-index:70} .acting{background:var(--warnbg);border-bottom:1px solid var(--warn); color:var(--warn);font-size:13px;font-weight:600} .acting .in{max-width:1080px;margin:0 auto;padding:9px 24px;display:flex; gap:12px;align-items:center;flex-wrap:wrap} .acting form{margin-left:auto} .acting .btn.sm{padding:4px 10px} /* --------------------------------------------------------------------------- * 08-14o: the initials in the header became a menu (Account, Dealer * Configuration, Admin for the real role, Sign out). The .menu/.sheet * machinery is the jobs table's, reused; these rules only stop the avatar * from picking up the three-dots summary's padding and grey hover, mark * the menu item for the screen the dealer is on, and give the sign-out * form the same top rule the rename form has, so the destructive-adjacent * action reads as its own group. * ------------------------------------------------------------------------- */ .who .menu>summary{padding:0;border-radius:50%;line-height:0} .who .menu>summary:hover,.who .menu[open]>summary{background:none} .who .menu>summary:hover .av{background:var(--accent-d)} .who .menu .sheet{margin-top:8px} .menu .sheet a.cur{color:var(--accent-d);font-weight:650} .menu .sheet form.signout{border-top:1px solid var(--rule);margin-top:4px; padding-top:4px} /* The lifted block hides .tabs under 821px, which was harmless while the * header was Jobs/Configuration/Admin and the create form lived on the * list. 08-14o made the tabs the dealer's ONLY doors (New Project, * Change Orders, My Projects) and moved the create form behind the first * of them, so a phone with one project would have had no way to start * another. Three short labels fit where the old row did not; the company * name is what gives way. */ @media(max-width:820px){ .tabs{display:flex;gap:12px;margin-left:4px} .tabs a{font-size:12.5px} .top .in{gap:12px;padding:0 14px} .who .co{display:none} } /* --------------------------------------------------------------------------- * 24d gave the wordmark a CSS square, pure decoration with no template * change. Order 2026-09-02b ruling 5 brings back THE SETTLED MARK ITSELF * (four corner brackets around a block) as an inline SVG in _chrome.html, * left of the wordmark - the thing Rex noticed missing ("we settled on that * logo a long time ago and somewhere it disappeared"), which a CSS square * was never going to be mistaken for. The square rule is retired; the SVG * carries `aria-hidden` and paints in `currentColor`, so this one rule is * all the CSS the mark needs. */ .brand svg{height:22px;width:22px;flex:none;color:var(--ink)} /* --------------------------------------------------------------------------- * 24f, THE GUIDED BUILD (Option C phase one). The stage frame around the * shared question-card macro: one decision per screen, scaled up. New * classes only, at the bottom, per this file's own rule. * ------------------------------------------------------------------------- */ .stage{max-width:640px;margin:10px auto 0;text-align:center} .stage-rail{display:flex;gap:14px;align-items:baseline;justify-content:center; flex-wrap:wrap;font-size:13px;color:var(--muted);margin-bottom:18px} .stage-rail a{color:var(--muted);font-size:12.5px} .stage-landed{color:var(--ok);font-weight:600} .stage .hello{font-size:14px;color:var(--said);font-weight:700;margin-bottom:10px} .stage-q{font:800 27px/1.2 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; letter-spacing:-.02em} .stage-why{font-size:15px;color:var(--mid);margin-top:8px} .stage-card{text-align:left;margin-top:6px} .stage-card .q{box-shadow:var(--shadow)} .stage-card .q .h h3{font:700 20px/1.3 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; letter-spacing:-.02em} .stage-card .q .b{font-size:15px} .stage-card .q .b label{font-size:15px} .stage-card select,.stage-card input[type=text],.stage-card input:not([type]){ font-size:15px} .stage-nav{display:flex;justify-content:space-between;align-items:center; margin-top:20px} .stage-actions{display:flex;gap:16px;align-items:center} .stage-back{font-size:14px;color:var(--muted);text-decoration:none} .stage-back:hover{color:var(--ink)} .stage-skip{font-size:14px;color:var(--muted)} .stage-count{font-size:12.5px;color:var(--muted);margin-top:12px} /* --------------------------------------------------------------------------- * 24g (C2/C3): the documents journey strip and the finish moment. New * classes only, at the bottom, per this file's own rule. * ------------------------------------------------------------------------- */ .docs-lede{max-width:66ch;font-size:15.5px;color:var(--mid);margin-bottom:12px} .docs-status{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .docs-status .pill{font-size:12px;padding:5px 12px} .finish{max-width:640px;margin:12px auto 0;text-align:center} .finish h2{font:800 31px/1.15 Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; letter-spacing:-.02em} .finish .sub2{font-size:15px;color:var(--mid);margin-top:8px} .dl-tiles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 6px; text-align:left} @media(max-width:640px){.dl-tiles{grid-template-columns:1fr}} .dl-tile{background:var(--bg);border-radius:14px;padding:20px 22px; box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px} .dl-tile b{font-size:16px} .dl-tile span{font-size:13px;color:var(--mid)} .dl-tile .btn{align-self:flex-start;margin-top:4px} /* 24h B5: THE BUILD TIMELINE. Rex: "there is still no timeline for the build." The bar rides every data-busy form; the sentence stays and the bar moves under it. It is perceived progress, not measurement - the press does not report percentages - so it eases toward full and holds short of it until the redirect lands. */ .busybar{margin-top:12px;height:6px;border-radius:3px; background:var(--rule);overflow:hidden} .busybar i{display:block;height:100%;width:0;border-radius:3px; background:var(--accent); animation:busyfill 75s cubic-bezier(.15,.6,.3,1) forwards} @keyframes busyfill{0%{width:0}10%{width:34%}30%{width:62%} 60%{width:82%}100%{width:94%}} @media (prefers-reduced-motion: reduce){ .busybar i{animation:none;width:50%;opacity:.6}} /* 24i A1: THE DOCUMENTS PAGE STOPS READING LIKE A DOCUMENT. Four intake cards on a grid, each wearing its own status; drop zones that look like drop zones; the equipment decision as option tiles. (Replaces the 24g lede + status strip, whose pills moved into the card heads; .docs-lede/.docs-status stay for any old markup.) */ .docs-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px; align-items:start;margin-bottom:20px} @media (max-width:920px){.docs-grid{grid-template-columns:1fr}} .docs-grid>.card{margin:0} .wt-card{margin-top:22px} .docs-grid .wt-card{margin-top:0} /* 29c: the record control, in the Field Book skin. THE BUTTON IS THE PRODUCT'S OWN TEAL `.btn` and paints nothing of its own, which is DEC-123's rule and the reason there is no colour on the controls here. The one colour this block introduces is the RECORDING DOT, and it is a conventional red on purpose: red-while-recording is the one convention every recorder in the world already taught the dealer, and Rex named it ("a conventional red recording indicator dot"). It is 10px across, it appears only while a recording is running, and it is on no control and in no button, so the never-orange rule is untouched by it. */ .rec{display:flex;gap:10px;align-items:center;flex-wrap:wrap} /* THE `hidden` ATTRIBUTE HAS TO OUTRANK `.btn`, and without this rule it does not: the browser's own `[hidden]{display:none}` is weaker than a class selector, so `.btn`'s `display:inline-block` put Pause, Stop and a ticking 00:00 on the screen of a page where nothing was recording. Found on the first eyeball of this control, not in a test: markup can say hidden and a stylesheet can still show it. */ .rec [hidden]{display:none} .rec-live{display:inline-flex;gap:8px;align-items:center; font:600 15px/1 "IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; color:var(--ink)} .rec-dot{width:10px;height:10px;border-radius:50%;background:#c0392b; display:inline-block;animation:recbeat 1.4s ease-in-out infinite} /* Paused reads as paused without a second control to look at: the dot stops beating and goes quiet, the clock holds its figure. */ .rec-live.held .rec-dot{animation:none;opacity:.35} .rec-say{font-size:13px;color:var(--muted);flex:1 1 220px} @keyframes recbeat{0%,100%{opacity:1}50%{opacity:.25}} @media (prefers-reduced-motion:reduce){.rec-dot{animation:none}} .card-head{display:flex;align-items:baseline;justify-content:space-between; gap:10px;margin-bottom:10px} .card-head h2{margin-bottom:0} .card.doc .drop{padding:22px 16px;border-color:var(--rule); transition:border-color .15s ease, background .15s ease} .card.doc .drop:hover{border-color:var(--accent);background:var(--accent-bg)} .opt-tile{display:flex;gap:10px;align-items:center;border:1.5px solid var(--rule);border-radius:10px;padding:11px 14px;font-size:13.5px; margin-bottom:8px;cursor:pointer;transition:border-color .15s ease, background .15s ease} .opt-tile:hover{border-color:var(--accent)} .opt-tile:has(input:checked){border-color:var(--accent); background:var(--accent-bg)} .opt-tile input[type=radio]{width:auto;flex:none} /* --------------------------------------------------------------------------- * DEC-123 (Rex, 2026-08-29): THE PUNCH LIST IS THE NAVIGATION. * * The five-across strip became the eight-stage chain drawn the way the Field * Book board draws a punch list: one line each, a box that gets ticked, the * current line highlighted, later lines saying waiting. New class names under * their own comment at the bottom, which is this file's own rule; `.steps` * keeps its rules untouched because the class contract above is frozen. * ------------------------------------------------------------------------- */ .punch{list-style:none;margin:0 0 22px;padding:0;background:var(--bg); border:1.5px solid var(--rule);border-radius:14px;box-shadow:var(--shadow); overflow:hidden} .punch li{border-bottom:1.5px dashed var(--rule)} .punch li:last-child{border-bottom:0} .punch li>a,.punch li>span{display:flex;align-items:center;gap:14px; padding:13px 18px;text-decoration:none;color:var(--ink);flex-wrap:wrap} .punch li>a:hover{background:var(--tint)} .punch .box{flex:none;width:24px;height:24px;border:2px solid var(--ink); border-radius:6px;font-style:normal;font-size:14px;font-weight:700; display:flex;align-items:center;justify-content:center;line-height:1} .punch b{font-size:15px;font-weight:700} .punch em{font-style:normal;font-size:13px;color:var(--muted);flex:1; min-width:140px} .punch u{text-decoration:none;font-size:12px;font-weight:700; letter-spacing:.04em;color:var(--muted)} .punch .done .box{background:var(--ink);color:var(--bg)} .punch .done u{color:var(--ok)} /* the board highlights the line it is asking about in the palest paper and names it in terracotta. That word is the ONE terracotta on the product: small text, and not a control. */ .punch .cur{background:var(--warnbg)} .punch .cur b{font-weight:800} .punch .cur u{color:var(--said)} .punch .wait>span{opacity:.6} /* the facts ratio rides inside its own line, the same shape it had inside the questions step of the strip */ .punch .facts{flex-basis:100%;font-size:11px;font-weight:500; color:var(--muted);line-height:1.35;padding-left:38px} .punch .fbar{display:block;height:3px;background:var(--rule); border-radius:99px;overflow:hidden;margin-bottom:3px;max-width:220px} .punch .fbar span{display:block;height:100%;background:var(--muted); border-radius:99px} @media(max-width:640px){.punch em{display:none}} /* --------------------------------------------------------------------------- * 09-03a ruling 4 (Rex, 2026-09-03): THE NUMBERED STEP RAIL. * * "There should be step one through however many steps to complete it." * `.steps` keeps every rule it has (the class contract is frozen); these are * the rail's own wrapper, its count line and the one instruction under it, * new names at the bottom under their own comment, which is this file's rule. * * IT STACKS ON A PHONE. Five instructions side by side at 500px wide are five * unreadable columns, and this rail exists to be read. * ------------------------------------------------------------------------- */ .rail{margin:0 0 22px} .rail .steps{margin-bottom:8px} .rail-count{margin:0 0 8px;font-size:12px;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .rail-say{margin:0;font-size:13.5px;color:var(--muted)} @media(max-width:640px){ .rail .steps{display:block} .rail .steps div{border-right:0;border-bottom:1px solid var(--rule)} .rail .steps div:last-child{border-bottom:0} } /* --------------------------------------------------------------------------- * 09-03a ruling 5 (Rex, 2026-09-03): THE UPLOAD BAR, BESIDE THE BUTTON. * * "there should be a status bar showing the progress of the upload. If * there's not, the dealer will think his webpage froze and refresh." * The element ships hidden; trimout.js reveals it when bytes start moving. * ------------------------------------------------------------------------- */ .upbar{display:inline-flex;align-items:center;gap:8px;margin-left:10px; vertical-align:middle} /* HIDDEN MEANS HIDDEN. `display:inline-flex` on a class beats the sheet's own `[hidden]` rule by source order, so the bar sat on every upload form at zero percent, which reads as something already stuck. */ .upbar[hidden]{display:none} .upbar progress{width:150px;height:8px;border:0;border-radius:99px; background:var(--rule);appearance:none;-webkit-appearance:none} .upbar progress::-webkit-progress-bar{background:var(--rule); border-radius:99px} .upbar progress::-webkit-progress-value{background:var(--accent); border-radius:99px} .upbar progress::-moz-progress-bar{background:var(--accent); border-radius:99px} .upbar-pct{font-size:12.5px;font-weight:700;color:var(--muted); font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; min-width:38px} /* --------------------------------------------------------------------------- * ITEM 3 OF THE 2026-09-08 PLAN: the question pattern on a page of its own. * * Four rules, new class names at the bottom, which is this file's own * standing rule. Everything else the tree draws is `.q`, `.opt`, `.opt-tile` * and `.pill`, which this product already had. * * THE PROGRESS LINE IS STICKY ON THE SETUP PAGE AND NOT ON THE QUESTIONS * PAGE, and that is deliberate rather than an oversight: the questions page * renders its pill inside the card that introduces the questions, where it * reads as part of a sentence, and moving it would have changed a page this * strand pinned byte for byte. `sticky` is a parameter on the macro. * ------------------------------------------------------------------------- */ .qbar{position:sticky;top:0;z-index:5;padding:10px 0;background:var(--bg); border-bottom:1px solid var(--rule);margin-bottom:6px} .qprog{font-size:12.5px;padding:5px 12px} /* THE ANSWERED CARD. A `
` and not a script: "reopens in place, no reload" has to be true with JavaScript off as well as on, which is the same rule the follow-up cards follow. */ .qans > summary{cursor:pointer;list-style:none;display:flex;gap:10px; align-items:center;flex-wrap:wrap} .qans > summary::-webkit-details-marker{display:none} .qchange{font-size:12.5px;color:var(--accent-ink);font-weight:620} .qans[open] > summary .qchange{color:var(--muted)} /* --------------------------------------------------------------------------- * THE PHONE LAYER. Rex, 2026-09-08: "Phone one-at-a-time, desktop long * page: yes." * * TWO RULES, AND THE SCRIPT PUTS THE CLASSES ON. Every card is in the HTML * the server rendered; on a narrow screen `trimout.js` marks the ones that * are not the current step. `qstep-off` and NOT the `hidden` attribute, * because `hidden` is the TREE's word for "this branch is not open" and is * what the progress line counts. A wizard reaching for the same attribute * would tell a dealer he had one question left because ten were off-screen. * * IT IS INERT ON A DESKTOP AND WITH NO SCRIPT. Nothing here fires unless the * script has added the class, so the long page is what a browser that never * ran the file shows, which is the whole no-JavaScript rule this pattern * follows. * ------------------------------------------------------------------------- */ .qstep-off{display:none} .qnav{display:flex;justify-content:space-between;align-items:center; gap:12px;margin-top:16px} .qnav button[disabled]{opacity:.45;cursor:default} .qnav[hidden]{display:none} /* AND A BUTTON INSIDE IT THAT SAYS `hidden` IS HIDDEN (2026-09-18). The rule above exists because the browser's own `[hidden]{display:none}` is weaker than a class selector, and `.rec [hidden]` up at line 430 carries the same lesson with the same note: "markup can say hidden and a stylesheet can still show it." The NAV got the rule and the three buttons in it never did, so `nav.back.hidden` on the first card and `nav.next.hidden` at the end of the line both did nothing at all. Invisible while the glyph was flex-shrunk to 0px; visible the moment that was fixed, as a back arrow on card one that steps nowhere and a forward arrow sitting beside the finishing button. */ .qnav [hidden]{display:none} /* THE TWO ARROWS (Rex, 2026-09-16): "an image of an arrow pointing forwards and an arrow pointing backwards". A 44px press with 24px of drawing in it, which is the tap target the rest of this stylesheet uses. The count sits between them, because that is the line the two presses move. */ .qarrow{width:44px;height:44px;min-width:44px;padding:0;flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center} .qarrow svg{width:24px;height:24px;min-width:24px;flex:none;display:block} /* min-width + flex:none (2026-09-18): inside the flex button the svg was shrunk to 0px wide, so the arrow stroked in ink and painted nothing - Rex's blank white boxes. Proven live by injecting this rule. */ .qnav-count{margin:0;flex:1 1 auto;text-align:center} /* THE STATUS BAR BETWEEN THE ARROWS (Rex, 2026-09-18): "just have a status bar that is slowly completing." It takes the seat the count used to, so it fills the space between the two presses and reads as the line they move. */ .qnav-bar{flex:1 1 auto;margin:0} /* --------------------------------------------------------------------------- * RULING 136 (Rex, 2026-09-09): "so many words on the page. there should be * hardly any descriptions at all. very simple one liners." * * THE `why` CONTROL IS THE VALVE THE SWEEP NEEDED. An explanation that is * genuinely load-bearing folds in here instead of being deleted: collapsed by * default, one word to open it, the paragraph in place beside the control it * is about. A `
` and NOT a script, which is this product's standing * rule: a control that only exists after a script runs does not exist at all. * * IT IS DELIBERATELY PLAIN. No box, no tint, no icon, no border. Rex has * rejected busy screens twice; a valve that decorated itself would put back * in ink what the sweep took out in words. It is a small teal word and * nothing else until it is opened. * ------------------------------------------------------------------------- */ .why{margin:6px 0 0} .why > summary{display:inline-block;list-style:none;cursor:pointer; font-size:12.5px;font-weight:620;color:var(--accent-ink); border-bottom:1px dotted var(--accent-ink);line-height:1.2} .why > summary::-webkit-details-marker{display:none} .why > summary:hover{color:var(--total);border-bottom-color:var(--total)} .why > p{margin:8px 0 0;font-size:13px;color:var(--muted);max-width:56ch} /* --------------------------------------------------------------------------- * GLASS, 2026-09-09. Rex approved the renderings on the TrimOut redesign * canvas ("Glass"), so this is the fourth skin and, like the three before * it, IT IS VALUES ONLY ABOVE THIS LINE: not one selector or class name in * the frozen block was renamed, and every rule below either re-declares a * custom property or restyles a class the contract already names. New class * names appear only for the two dropdowns and the theme switch, which are * markup this file had no state for. * * THE TOKENS, from the boards: * * dark ground #0f1412, two soft glows (teal #5aa39a, blue #1A5FA8), * panels rgba(255,255,255,.06) with a 1px rgba(255,255,255,.12) * line and an 18px backdrop blur, 22px radii, accent #5aa39a, * totals #8fe0d2, ink #e9f0ed, muted #93a29d, the mark in white * light ground #f6f7f5, the same two glows at low opacity, panels white * at 70 per cent with a 1px rgba(23,33,31,.10) line, accent * #3d7068 with #2f5a54 for hover and for a total, ink #17211f, * muted #6f7b79, the mark in ink * * Outfit for titles, IBM Plex Sans for body, IBM Plex Mono unchanged for * figures. Every face keeps a full fallback stack, so the 401 gate and an * offline box render without the fetch, which is base.html's standing rule. * * DARK IS THE DEFAULT AND LIGHT IS THE FALLBACK. `:root` with no attribute * takes the light values on purpose: a page rendered outside the signed-in * shell has no stored answer to read, and unreadable dark text on white is * the one failure that cannot be recovered from on screen. * * NO PRINT RULE IS ADDED OR CHANGED. Documents stay light; the only * `@media print` block in the app is check_report.html's own and this file * has none, so a themed screen cannot reach a printed page. * ------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- * THE PAINT AGAIN, 2026-09-15: INDIGO. Rex ruled the marketing site's new * paint tonight - light is "indigo on white", dark is "glass, indigo * atmosphere" - and asked the question this file has answered four times * already: "obviously the app will follow the main page right?" Yes. So this * is the fifth skin and, like the four before it, IT IS VALUES ONLY: not one * selector or class name changed, the frosted panels, the 18px blur, the * 22px radii and the 48px buttons are the ones GLASS drew, the faces are * still Outfit / IBM Plex Sans / IBM Plex Mono, dark is still the default * and the switch is still in the initials menu. Only the colour moved. * * light ground #f7f8fc, panels white at 70 per cent on a * rgba(23,33,31,.10) line, accent #3b42ff with #1d73e8 for hover, * a figure #1d3fb8, chips and selected fills #eef0ff, ink #17211f * dark ground #0e1130, the same frosted panel on a * rgba(255,255,255,.13) line, accent #4c53ff with #6b71ff for * hover, a figure #a7abff, ink #f1f3ff, the header pill at * rgba(255,255,255,.04) * * TWO VALUES ARE NOT THE ONES HE TYPED, both for contrast and both said out * loud rather than quietly: * * `--ground` in light is #f7f8fc and not #ffffff. A white-at-70-per-cent * panel on a pure white page is not a panel: the glass this skin is * named for disappears and every card becomes an outline. He allowed for * it ("if the pure white kills the glass panels' contrast, use #f7f8fc"). * * `--muted` is #636b8a and not #6f7b79. The old green-grey reads 4.39:1 * on white, under the 4.5 a dealer needs, and it was the one token in the * sheet still carrying the teal skin's hue. #636b8a is 5.25:1 on the * page, 4.95:1 on the ground and 4.64:1 on a chip. * * `--glow-teal` KEEPS ITS NAME AND LOSES ITS COLOUR. It is the left-hand * glow, it is now indigo, and the name is the one `body::before` and * `tests/test_0909_glass_theme.py` both read: renaming it would be a * selector change in a values-only order, which this file has never made. * * TEAL SURVIVES IN THE COMMENTS ABOVE AND NOWHERE ELSE. The history block * is the record of why every value in this file is what it is, and * test_29f's own rule is that the prose is left alone and the rules are * what get checked. * ------------------------------------------------------------------------- */ :root, :root[data-theme="light"]{ --ink:#17211f; --mid:#414a5e; --muted:#636b8a; --bg:#ffffff; --ground:#f7f8fc; --tint:#eef0ff; --panel:#eef0ff; --rule:rgba(23,33,31,.10); --accent:#3b42ff; --accent-d:#1d73e8; --accent-bg:rgba(59,66,255,.12); --accent-ink:#3b42ff; --blue:#3b42ff; --blue-d:#1d73e8; --total:#1d3fb8; --glass:rgba(255,255,255,.70); --glass-soft:rgba(255,255,255,.55); --glass-line:rgba(23,33,31,.10); /* `--line` IS `--glass-line` UNDER THE SITE'S NAME, and it is declared because seven hairlines in the app ask for it: `_proposal_check.html`, `_your_houses.html`, `_change_draft.html`, `defaults.html`, and the two self-contained proposal partials all write `border-top:1px solid var(--line)`. They were written against site/index.html's token names, this sheet has never had that name, and an undefined var makes the whole shorthand invalid: the border was not a faint line, it was no line at all. One alias is cheaper than seven edits and keeps those partials portable. */ --line:rgba(23,33,31,.10); --glass-shadow:0 18px 46px rgba(23,33,31,.10); --glass-inset:inset 0 1px 0 rgba(255,255,255,.70); --shadow:0 18px 46px rgba(23,33,31,.10); --pill-on:rgba(59,66,255,.08); --sheet:rgba(255,255,255,.94); --header:rgba(255,255,255,.70); --btn-face:linear-gradient(180deg,#4a51ff,#3b42ff); --btn-ink:#ffffff; --btn-glow:0 10px 26px rgba(59,66,255,.26); --brand-ink:#17211f; --glow-teal:rgba(59,66,255,.12); --glow-blue:rgba(29,115,232,.10); --ok:#2f7d4f; --okbg:rgba(47,125,79,.12); --warn:#8a6d1f; --warnbg:rgba(138,109,31,.12); --bad:#9c3b22; --badbg:rgba(156,59,34,.12); --said:#c24d2f; --radius:22px; --font-title:Outfit,"Trebuchet MS",-apple-system,BlinkMacSystemFont, "Segoe UI",Helvetica,Arial,sans-serif; --font-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI", Helvetica,Arial,sans-serif; } :root[data-theme="dark"]{ --ink:#f1f3ff; --mid:#cdd3f5; --muted:#b8bde0; --bg:#161a3c; --ground:#0e1130; --tint:rgba(255,255,255,.05); --panel:rgba(255,255,255,.05); --rule:rgba(255,255,255,.13); --accent:#4c53ff; --accent-d:#6b71ff; --accent-bg:rgba(76,83,255,.16); --accent-ink:#8e94ff; --blue:#4c53ff; --blue-d:#6b71ff; --total:#a7abff; --glass:rgba(255,255,255,.06); --glass-soft:rgba(255,255,255,.05); --glass-line:rgba(255,255,255,.13); --line:rgba(255,255,255,.13); --glass-shadow:0 18px 46px rgba(0,0,0,.45); --glass-inset:inset 0 1px 0 rgba(255,255,255,.10); --shadow:0 18px 46px rgba(0,0,0,.45); --pill-on:rgba(255,255,255,.09); --sheet:rgba(20,24,60,.88); --header:rgba(255,255,255,.04); --btn-face:linear-gradient(180deg,#5d64ff,#4c53ff); --btn-ink:#ffffff; --btn-glow:0 10px 26px rgba(76,83,255,.38); --brand-ink:#ffffff; --glow-teal:rgba(59,66,255,.35); --glow-blue:rgba(29,115,232,.28); /* GREEN AND NOT THE OLD MINT (2026-09-15). Done has been green in every skin; #7fd3c6 was a teal-green chosen to sit beside a teal accent, and on the indigo ground it was the last surface in the app that still read as teal. */ --ok:#62d996; --okbg:rgba(98,217,150,.14); --warn:#e0c273; --warnbg:rgba(224,194,115,.14); --bad:#e79b84; --badbg:rgba(231,155,132,.14); --said:#e79b84; } /* THE GROUND AND THE TWO GLOWS. The ground is painted on `html` and the body is transparent, which is what lets the two glows sit at z-index -1 and still be seen. They are FIXED rather than absolute so a long page does not drag them off screen: the boards draw one glow at the top left and one at the top right of the VIEWPORT, and a scrolled page that lost them would be a different paint job halfway down. `pointer-events:none` because they are paint and must never eat a click. */ html{background:var(--ground);color-scheme:light} :root[data-theme="dark"]{color-scheme:dark} body{background:transparent;color:var(--ink);font-family:var(--font-body)} body::before,body::after{content:"";position:fixed;pointer-events:none; z-index:-1;top:0;left:0;right:0;height:520px} body::before{background:radial-gradient(900px 420px at 18% -8%, var(--glow-teal),transparent 70%)} body::after{background:radial-gradient(760px 380px at 86% 4%, var(--glow-blue),transparent 70%)} h1,h2,h3,.stage-q,.finish h2,.stage-card .q .h h3{font-family:var(--font-title)} h1,h2,h3{color:var(--ink)} h1{font-weight:700} h2,h3{font-weight:600} /* THE FLOATING PILL. `.top` keeps its sticky rule and gives up its bar: the paint moves to `.top .in`, which is the pill, so nothing that imports the chrome macro has to change. */ .top{background:transparent;border-bottom:0;box-shadow:none; padding:16px 24px 0} .top .in{max-width:1180px;height:64px;padding:0 14px 0 20px; border-radius:999px;background:var(--header,var(--glass)); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); box-shadow:var(--glass-shadow),var(--glass-inset);gap:10px} .brand{font-family:var(--font-title);font-weight:700;font-size:20px; letter-spacing:-.01em;color:var(--brand-ink)} .brand svg{height:20px;width:20px;color:var(--brand-ink)} .tabs{gap:6px;margin-left:18px} .tabs a{color:var(--muted);height:44px;padding:0 16px;border-radius:12px; border-bottom:0;font-size:14.5px;font-weight:600;display:flex; align-items:center} .tabs a:hover{color:var(--ink);background:var(--pill-on)} .tabs a.cur{color:var(--ink);background:var(--pill-on);border-bottom:0} .who{gap:12px;font-size:13px;color:var(--muted)} .av{width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.12);border:1px solid var(--glass-line); color:var(--brand-ink);font-size:12px;font-weight:600;letter-spacing:.03em} :root,:root[data-theme="light"]{--av-face:rgba(59,66,255,.10)} .av{background:var(--av-face,rgba(255,255,255,.12))} :root[data-theme="dark"] .av{background:rgba(255,255,255,.12)} main{max-width:1180px} /* FROSTED PANELS. One rule reaches every card on every screen because `.card` is the contract's own name for a panel. */ .card,.kpi div,.dl-tile,.q,.punch,.steps{background:var(--glass); border:1px solid var(--glass-line);border-radius:var(--radius); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); box-shadow:var(--glass-shadow),var(--glass-inset)} .q .h{border-bottom:1px solid var(--glass-line)} .steps{overflow:hidden} .steps div,.steps a{border-right:1px solid var(--glass-line); color:var(--muted)} .steps div.done,.steps a.done{color:var(--ok);background:transparent} .steps div.cur{color:var(--ink);background:var(--accent-bg); box-shadow:inset 0 -2px 0 var(--accent)} .steps a:hover{background:var(--pill-on);color:var(--ink)} .steps i{background:var(--pill-on);color:var(--muted)} .steps .done i{background:var(--ok);color:var(--ground)} .steps .cur i{background:var(--accent);color:var(--ground)} /* CONTROLS. The primary button is the boards' teal gradient; the secondary is a glass panel with a brighter line, which is how the boards draw "Back". */ .btn{background:var(--btn-face);color:var(--btn-ink);border:0; border-radius:14px;height:48px;padding:0 26px;font-weight:600; box-shadow:var(--btn-glow)} .btn:hover{background:var(--accent-d);color:var(--btn-ink)} .btn.g{background:var(--glass);color:var(--ink); border:1px solid var(--glass-line); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); box-shadow:var(--glass-shadow),var(--glass-inset)} .btn.g:hover{background:var(--pill-on)} .btn.sm{height:36px;padding:0 16px;font-size:13px;border-radius:11px} .field label{color:var(--muted)} .field input,.field select,.field textarea,td input,td select{ background:var(--glass-soft);border:1px solid var(--glass-line); border-radius:12px;color:var(--ink)} .field input:focus,.field select:focus,.field textarea:focus, td input:focus,td select:focus{border-color:var(--accent); background:var(--glass)} td input:hover,td select:hover{border-color:var(--glass-line); background:var(--glass-soft)} td input.edited{background:var(--accent-bg);border-color:var(--accent)} th,td{border-bottom:1px solid var(--glass-line)} th{background:transparent;color:var(--muted)} code{background:var(--glass-soft);border:1px solid var(--glass-line); color:var(--ink)} /* THE ACCENT AS A WORD. `--accent` is a FILL - the button, the ring around a chosen tile, the line under the current step - and against the dark ground #4c53ff does all three well while reading only 3.49:1 as text, under the 4.5 a dealer standing in a mechanical room needs. So every rule below that paints a WORD with the accent reads `--accent-ink` instead (#8e94ff in dark, 6.86:1; in light it IS the accent, so nothing there moves), and the hover on such a word takes the figure colour, which passes in both. */ a{color:var(--accent-ink)} a:hover{color:var(--total)} /* CHIPS, PILLS AND THE TILE THAT IS A CHIP. `.opt` and `.opt-tile` are the boards' answer tiles: a 14px radius, a glass face, and the chosen one ringed in the accent with its own glow. */ .opt,.opt-tile{background:var(--glass);border:1px solid var(--glass-line); border-radius:14px;color:var(--ink); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} .opt:hover,.opt-tile:hover{border-color:var(--accent)} .opt.sel,.opt-tile:has(input:checked){border-color:var(--accent); background:var(--accent-bg);color:var(--ink); box-shadow:0 0 0 1px var(--accent-bg),0 14px 36px var(--accent-bg)} .pill{border-radius:999px} .p-mute{background:var(--pill-on);color:var(--muted)} .note{background:var(--glass-soft);border-left:3px solid var(--accent); border-radius:0 12px 12px 0;color:var(--mid)} .drop{border:2px dashed var(--glass-line);border-radius:18px; background:var(--glass-soft);color:var(--muted)} .card.doc .drop{border-color:var(--glass-line)} .card.doc .drop:hover{border-color:var(--accent);background:var(--accent-bg)} /* PROGRESS. Every bar in the app: the thin job bar, the build timeline, the facts ratio inside a step and the upload bar. */ .prog,.busybar,.steps .fbar,.punch .fbar{background:var(--pill-on)} .prog .fill,.busybar i,.steps .fbar span,.punch .fbar span{ background:var(--accent)} .prog .fill{box-shadow:0 0 16px var(--accent-bg)} .prog .fill.done{background:var(--ok)} .upbar progress::-webkit-progress-bar{background:var(--pill-on)} .upbar progress::-webkit-progress-value{background:var(--accent)} .upbar progress::-moz-progress-bar{background:var(--accent)} /* THE SHEET behind the initials and behind a row's actions. */ .menu .sheet{background:var(--sheet);border:1px solid var(--glass-line); border-radius:18px;padding:6px;min-width:264px; -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); box-shadow:var(--glass-shadow),var(--glass-inset)} .menu .sheet button,.menu .sheet a{color:var(--ink);min-height:44px; display:flex;align-items:center;padding:0 12px;border-radius:12px; font-size:14.5px} .menu .sheet button:hover,.menu .sheet a:hover{background:var(--pill-on)} .menu .sheet a.cur{background:var(--accent-bg);color:var(--total); font-weight:600} .menu .sheet form.signout{border-top:1px solid var(--glass-line)} .menu>summary{color:var(--muted)} .menu>summary:hover{background:var(--pill-on);color:var(--ink)} .menu[open]>summary{background:var(--pill-on)} .who .menu>summary:hover .av{background:var(--accent-bg); border-color:var(--accent)} /* FIGURES. A total is the one number the boards paint. */ .kpi b{color:var(--total)} .total,.money-total{color:var(--total)} .qbar{background:transparent} .rail-say,.stage-count,.stage-skip,.stage-back,.dots{color:var(--muted)} .acting{background:var(--warnbg);border-bottom:1px solid var(--warn); color:var(--warn)} /* --------------------------------------------------------------------------- * THE TWO DROPDOWNS AND THE THEME SWITCH, 2026-09-09. The only new class * names this skin adds, because they are markup the app did not have. * * A DROPDOWN IS A `
`, never a script. This product's standing rule * is that a control which only exists after a script runs does not exist at * all, and the top bar is the one control a dealer cannot do without. * ------------------------------------------------------------------------- */ .tabs .nav{position:relative} .tabs .nav>summary{list-style:none;cursor:pointer;user-select:none; display:flex;align-items:center;gap:7px;height:44px;padding:0 16px; border-radius:12px;font-size:14.5px;font-weight:600;color:var(--muted)} .tabs .nav>summary::-webkit-details-marker{display:none} .tabs .nav>summary:hover{color:var(--ink);background:var(--pill-on)} .tabs .nav[open]>summary,.tabs .nav.cur>summary{color:var(--ink); background:var(--pill-on)} .tabs .nav>summary svg{width:14px;height:14px;flex:none;display:block} .tabs .nav .sheet{position:absolute;left:0;top:100%;margin-top:8px; z-index:30;background:var(--sheet);border:1px solid var(--glass-line); border-radius:18px;padding:6px;min-width:264px; -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px); box-shadow:var(--glass-shadow),var(--glass-inset); display:flex;flex-direction:column;gap:2px} .tabs .nav .sheet a{display:flex;align-items:center;min-height:44px; padding:0 12px;border-radius:12px;font-size:14.5px;color:var(--ink); text-decoration:none} .tabs .nav .sheet a:hover{background:var(--pill-on)} .tabs .nav .sheet a.cur{background:var(--accent-bg);color:var(--total); font-weight:600} /* THE DARK / LIGHT SWITCH, first in the initials menu. Two submit buttons in one form: a segmented control that works with the script switched off, because the answer is stored on the server and not in the browser. */ .themeswitch{display:flex;gap:4px;padding:4px;border-radius:14px; background:var(--glass-soft);border:1px solid var(--glass-line); margin:0 0 4px} .themeswitch button{flex:1;display:flex;align-items:center; justify-content:center;height:44px;border:0;border-radius:12px; background:none;font:inherit;font-size:13.5px;font-weight:600; color:var(--muted);cursor:pointer} .themeswitch button:hover{color:var(--ink)} .themeswitch button[aria-pressed="true"]{color:var(--ink); background:var(--accent-bg);border:1px solid var(--accent); box-shadow:0 0 0 1px var(--accent-bg),0 10px 24px var(--accent-bg)} /* THE ACCOUNT ROWS. The board draws the page as a label, a value and a Change: one panel, hairline rows, nothing else. */ .arow{display:flex;gap:16px;align-items:center;padding:14px 0; min-height:44px;border-bottom:1px solid var(--glass-line)} .arow:last-child{border-bottom:0} .arow>.k{width:180px;flex:none;font-size:12.5px;font-weight:600; color:var(--muted)} .arow>.v{flex:1;min-width:0;font-size:15px;color:var(--ink)} .arow>.c{font-size:13px;font-weight:600;color:var(--accent-ink); text-decoration:none;flex:none} .arow>.c:hover{color:var(--total)} .arow-form{padding:0 0 16px} /* A ROW WHOSE CHANGE OPENS A FORM IS ONE `
`, and its summary IS the row, so the closed page reads as a plain list of answers. `list-style` off on both engines, or the browser draws its own triangle in the label column. */ .arow-d{border-bottom:1px solid var(--glass-line)} .arow-d:last-child{border-bottom:0} .arow-d>summary{list-style:none;cursor:pointer;border-bottom:0} .arow-d>summary::-webkit-details-marker{display:none} .arow-d>summary:hover .c{color:var(--total)} .arow-d[open]>summary .c{color:var(--muted)} @media(max-width:640px){ .arow{flex-wrap:wrap;gap:6px} .arow>.k{width:100%} } /* THE PILL BAR ON A PHONE. Four things have to fit across 390 points: the mark, the wordmark, two dropdown pills and the initials. The company name is what gives way, which is the rule the 08-14o media query already set; everything else gives up padding rather than presence, because a door a dealer cannot see is a door he does not have. */ @media(max-width:560px){ .top{padding:10px 10px 0} .top .in{padding:0 8px 0 12px;gap:6px;height:58px} .brand{font-size:17px;gap:8px} .brand svg{height:18px;width:18px} .tabs{margin-left:6px;gap:2px} .tabs .nav>summary{padding:0 9px;font-size:13px;gap:5px;height:40px} /* THE SHEET SPANS THE PHONE rather than hanging off its right edge: at this width a 264px panel opened under the second pill runs past the screen, and a menu a thumb cannot reach is a menu that is not there. */ .tabs .nav .sheet{position:fixed;left:10px;right:10px;top:70px; min-width:0} .av{width:30px;height:30px} main{padding:20px 14px 64px} } /* AND BELOW 430 THE WORDMARK GIVES WAY TOO. The 08-14o media query already set the order of sacrifice - the company name goes first, because the doors are what a dealer came for - and this is the next thing down that list. The MARK stays, because it is how he knows which app he is in, and the word stays in the DOM as the link's accessible name. */ @media(max-width:430px){ .brand{font-size:0;gap:0} .brand svg{height:20px;width:20px} .tabs{margin-left:8px} } /* ==================================================================== THE PROJECTS FLOW, 2026-09-09. Rex's NewProject, ProjectSource, MyProjects and ProjectQuestions boards. APPENDED IN ITS OWN SECTION, exactly as the Glass skin above was, and for the same reason: not one selector or class name declared earlier in this file is renamed or redefined here, so the frozen class contract `tests/test_0909_glass_theme.py` holds is untouched and a merge from another strand lands beside this block rather than inside it. EVERY VALUE IS A TOKEN. The boards are drawn in the dark palette; the tokens above carry both, so these rules are written once and both looks come out right. ==================================================================== */ /* The two page widths the boards use. `main` is 1080 by default; New project is drawn at 600 and Add a proposal at 1000, so they say so rather than every board being re-measured against the default. */ main.pnarrow{max-width:648px} main.pwide{max-width:1048px} /* A LIST ROW, WHICH IS THE SHAPE BOTH LISTS SHARE. Name, date, a status cell and one figure on the right: My projects prints a room count there and Add a proposal prints nothing, and the cells are named for what they hold rather than for which list they are on. Hairlines between, none under the last, which is `.arow`'s rule one card along. */ .plist{display:flex;flex-direction:column} .prow{display:flex;gap:16px;align-items:center;padding:14px 0; min-height:44px;border-bottom:1px solid var(--glass-line)} .prow:last-child{border-bottom:0} .prow .nm{flex:1;min-width:0;font-size:15px;font-weight:600;color:var(--ink)} .prow .nm a{color:var(--ink);text-decoration:none} .prow .nm a:hover{color:var(--accent-ink)} .prow .dt{width:130px;flex:none;font-size:13.5px;color:var(--muted)} .prow .st{width:130px;flex:none} .prow .st .fin{font-size:13.5px;font-weight:600;color:var(--muted)} .prow .fig{width:110px;flex:none;text-align:right;font-size:14px; color:var(--ink)} .prow .more{flex:none} /* THE PICKABLE ROW on Add a proposal. It is a radio and it looks like a row, because the board draws rows: the control is real (a keyboard reaches it, a form posts it) and the ring is what says which one is chosen. */ .pickrow{cursor:pointer;margin:0} .pickrow input[type=radio]{width:auto;flex:none;accent-color:var(--accent)} .pickrow:hover .nm{color:var(--accent-ink)} .pickrow:has(input:checked) .nm{color:var(--accent-ink)} /* THE COMPACT DROP BOX. One line, one sub-line and the button, in a dashed frame, at the height the board draws it. `.drop` above is the documents screen's full-width dropzone and is left alone. */ .dropbox{display:flex;align-items:center;gap:14px;padding:16px 18px; min-height:76px;border:1px dashed var(--glass-line);border-radius:18px; background:var(--glass-soft);color:var(--muted)} .dropsay{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .dropsay b{font-size:14px;font-weight:600;color:var(--ink)} .dropsay .sub{font-size:12.5px;margin:0} /* The file input rides inside its own label, so the label IS the button and there is no second control to style or to explain. */ .dropbox .btn input[type=file]{position:absolute;width:1px;height:1px; opacity:0;pointer-events:none} .dropbox .btn{position:relative;flex:none} /* TWO TILES SIDE BY SIDE, one under the other on a phone. */ .ptiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px;align-items:start;margin-bottom:20px} @media(max-width:820px){ .ptiles{grid-template-columns:1fr} } /* THE ESTIMATE BUILDER'S OWN FURNITURE: the bar, and the tiles a question is answered with. The bar itself is `.prog`, which this stylesheet has drawn since 22i; only the tile grid is new. `.qcount` WENT WITH THE NUMBER, 2026-09-18. Rex: "It would be better not to list the amount of questions and just have a status bar that is slowly completing." No template renders that line on any board now, so the rule that dressed it is gone rather than left to dress nothing. */ .qtiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;margin-top:14px} .qtiles .opt-tile{margin-bottom:0;align-items:flex-start; padding:16px 18px;font-size:15.5px;font-weight:600} @media(max-width:640px){ .qtiles{grid-template-columns:1fr} .prow{flex-wrap:wrap;gap:8px} .prow .dt,.prow .st,.prow .fig{width:auto;text-align:left} } /* THE QUESTIONS BOARD. `.stage` is the guided frame's own block and is centred and 640 wide; Rex's ProjectQuestions rendering is left aligned and wider, with the title, the count and the bar stacked over one card. A modifier rather than an edit, so the walk and every other `.stage` screen is untouched. */ .stage.qboard{max-width:880px;text-align:left;margin:0 auto} .stage.qboard .qtitle{font-family:var(--font-title);font-weight:700; font-size:32px;line-height:1.15;letter-spacing:-.02em;color:var(--ink); margin:0 0 10px} .stage.qboard .prog{height:4px;margin-bottom:22px} .stage.qboard .stage-card{margin-top:0} .stage.qboard .stage-nav{margin-top:22px} .stage.qboard .stage-skip{margin-top:18px;font-size:13px} .stage.qboard .note{text-align:left} /* =================================================================== THE DEALER CONFIGURATION BOARDS, 2026-09-09 (Rex's approved renderings). New rules at the bottom under their own comment, which is this file's own standing rule; not one selector above the frozen line was touched. THREE SHAPES AND NO MORE: a table of a label and a figure (Rates), a line of chips (both Standards pages), and a two-column grid of cards (the Dealer configuration landing). Everything else on these pages is `card`, `field`, `btn` and `note`, which the contract already holds. */ .ratetable>.r{display:flex;gap:16px;align-items:center;min-height:44px; padding:10px 0;border-bottom:1px solid var(--glass-line)} .ratetable>.r:last-child{border-bottom:0} .ratetable>.r>label{flex:1;min-width:0;font-size:14.5px;color:var(--ink); font-weight:400} .ratetable>.r>span{flex:none;display:flex;align-items:center;gap:6px} /* The gap count beside a category name (2026-09-12, the ranked hours table). Small, grey and never the control: see `setup_rates.html`. */ .ratetable>.r>i{flex:none;font-size:12.5px;color:var(--muted); font-style:normal;white-space:nowrap} .ratetable>.r input{width:84px;text-align:right; font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; font-size:14px} .ratetable>.r b{font-size:13px;color:var(--muted);font-weight:500;width:10px} /* A LINE OF CHIPS. A chip that changes an answer is a `