/* ============================================================================ portal.css β€” THE portal stylesheet (vendor portal now; customer portal phase 7 adopts this file β€” portal-pattern rule: screens COMPOSE these classes and never declare their own styles). VISUAL DIRECTION (operator-approved mockup, 2026-08-14): a BUSINESS TOOL, the admin dashboard as the bar β€” dense, quiet, hairlines, small radii, 14px base, text-only navigation. πŸ”΄ 48px tap targets are a PHONE rule, not a font-size rule: --touch is 32px on desktop and 48px under 900px. Mobile-first physics stay; the admin's app.css is still never shared (different physics) β€” only its restraint is. ========================================================================== */ :root{ --fs-0:14px; --fs-1:16px; --fs-2:20px; /* quiet scale */ --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:20px; --sp-5:28px; --r:4px; --touch:32px; --ink:#1a1d21; --muted:#6b7280; --line:#e4e4e2; --bg:#f7f7f5; --card:#fff; --accent:#35598f; --accent-bg:#eaf1fa; /* the accent, and a tint of it for a surface that must not read as page */ /* πŸ”΄ THE INK THAT SITS ON THE ACCENT, NAMED (2026-09-09, the filled tag chip). It was written inline as `color:#fff`, which is how this stylesheet's third blue got in β€” every finding here says the same thing: a colour with no name drifts. Naming it also makes the admin's copy of the chip byte-identical rather than "identical except one value", because that surface has the same token for the same job. */ --accent-ink:#fff; /* CHIP-ON = the ticked photo-tag chip. Same blue as today (--accent), named so the admin can resolve its own affirmative colour without a second declaration. --chip-tick none = no checkmark on this surface. */ --chip-on:#35598f; --chip-on-ink:#fff; --chip-tick:none; --go:#2f855a; --go-bg:#e9f3ee; --stop:#c0392b; --stop-bg:#faeae7; --warn:#b7791f; --warn-bg:#faf3e3; --off:#eceff1; /* πŸ”΄ A STRONGER STEP FOR STATE BADGES (operator, 2026-09-02). The existing pairs do NOT support one: there is exactly one amber ink + one amber surface and no darker variant, so a badge could only be strengthened by inventing a colour inline β€” which is how .btn-assist's hardcoded #2b6cb0 became this page's third blue. These are NAMED TOKENS on the SAME hues, added beside their originals, and the originals are untouched for every other use. Chosen arithmetically, not by eye (WCAG relative luminance): Needs pricing ink/bg 3.29:1 -> 6.22:1 Β· bg vs card white 1.11:1 -> 1.58:1 Active brand ink/bg 4.01:1 -> 6.34:1 Β· bg vs card white 1.13:1 -> 1.63:1 A surface at 1.11:1 against a white card is barely a surface β€” that is why the badge did not register across the grid. The two are matched to within 0.12 and 0.05 so the states read with EQUAL weight, which is the other half of the ruling. */ --warn-bg-strong:#ecca7a; --warn-ink:#5f3c07; --go-bg-strong:#aed3c0; --go-ink:#17492f; /* πŸ”΄ "Needs pricing" IS RED (operator, 2026-09-02): amber did not register against nine other cards, and the fleet caps at ~10 concepts β€” the other ~50 planned sites are GEO AGGREGATORS, not brands β€” so a vendor sees a handful of these at most, never a wall. ⚠️ --stop DOES NOT FIT AS THE INK, which is worth stating because reusing it was the first instruction: #c0392b maxes at 3.54:1 (below AA) on a surface only 1.54:1 against the card, so it cannot be both readable AND sit on a surface strong enough to see. Same shape as the amber finding: the palette has one red ink and one pale red surface, and no darker step. These are named tokens on the SAME hue; --stop itself is untouched and still carries "Leave this brand". Matched to the green so the two states read with EQUAL weight: Needs pricing ink/bg 6.78:1 Β· surface vs card 1.63:1 Active brand ink/bg 6.34:1 Β· surface vs card 1.63:1 (deltas 0.44 and 0.00) */ --stop-bg-strong:#f1bfb9; --stop-ink:#75190f; /* πŸ”΄ STREET-LIGHT YELLOW FOR A SIGNAL BAR (operator, 2026-09-08 round 5): "I don't want amber for expiring, I want street light yellow β€” amber is hard to tell and I could go either red or yellow." ⚠️ --warn CANNOT BE THE BAR, and the reason is measurable rather than aesthetic. #b7791f sits at L* 55.9 against --stop's L* 44.7 β€” ELEVEN lightness points apart β€” and its hue is ALREADY 72.7Β°, i.e. yellow. So the confusion was never hue: two dark warm colours at a 2px line read as one thing. Every street-light yellow clears 24-42 L* points from red, which is what makes it obvious. ⚠️ AND THE SWAP CANNOT BE THE WHOLE FIX. No yellow reaches 3:1 against a white card β€” yellow is intrinsically light (this one is 1.82:1) β€” so a THIN bright bar trades one confusion for the opposite one: too faint to tell from NO bar, which is what "current" looks like. Measured Ξ”E2000 from --line (the no-edge appearance) is 29.4, so the COLOUR is unmistakable; it is the AREA that had to grow. Hence the 4px bar below, and this stylesheet's own prior finding one screen up: "a 3px left edge alone read as almost nothing β€” the eye needs the block". Chosen by measurement over eleven candidates (L*, Ξ”E2000 from red, Ξ”E2000 from the plain border, WCAG contrast on both surfaces), landing in the traffic-yellow region rather than picked by eye: #f2b705 L* 77.7 Β· hue 83.5Β° Β· Ξ”E from --stop 45.0 Β· Ξ”L* from --stop 33.1 Β· Ξ”E from --line 29.4 #b7791f L* 55.9 Β· hue 72.7Β° Β· Ξ”E from --stop 26.7 Β· Ξ”L* from --stop 11.3 (what was rejected) πŸ”΄ NOT AN INK. It never carries text β€” 1.82:1 would be unreadable. --warn still owns every amber word and chip; this is the same hue at a different ROLE, exactly like --warn-ink above, and qa/paperwork-group-weight-check.php asserts the two stay in ONE hue family (within 25Β°) so the bar and the chip can never come to mean different things. */ --warn-edge:#f2b705; } @media(max-width:899.98px){:root{--touch:48px}} /* the tap-target rule */ *{box-sizing:border-box} [hidden]{display:none !important} /* honour the attribute even if an element sets its own display */ body{margin:0;font:var(--fs-0)/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased} h1{font-size:var(--fs-2);font-weight:650;margin:var(--sp-3) 0 var(--sp-1)} h2{font-size:var(--fs-1);margin:var(--sp-3) 0 var(--sp-1)} .muted{color:var(--muted)} a{color:var(--accent)} /* ── CONTENT WIDTH β€” capped at 1040px, centred (operator walkthrough, 2026-08-21) ────────────── ⚠️ THIS REVERSES the 2026-08-20 round-2 removal of the 66rem cap, deliberately and with the reason recorded so it is not flipped back on a third pass. That removal was correct about its own symptom (the old cap plus `margin:0 auto` inside the 200px+1fr shell read as an off-centre float with a dead left gutter) and wrong about the remedy: full bleed puts a label and the control it governs a foot apart on a wide monitor, which is the root cause of the pricing-form complaints β€” the radios, the field pairs, all of it. The fix is the cap AND the centring together, sized to the mockup: 1040px is ~66rem, so this lands where the original cap was, but inside the content column rather than the whole shell, which is what made it look off-centre. If a future walkthrough wants this reopened, the thing to change is the SHELL, not the cap. */ /* πŸ”΄ WIDENED 1040 β†’ 1500 (operator, 2026-09-01). At 1040 the column rendered 1040px wide on a 1920 viewport β€” MEASURED, not eyeballed β€” leaving ~680px of window empty beside a sidebar that only takes 200. Cards were 1012px and card grids had room for two columns where five fit. πŸ”΄ NOT FULL-BLEED, deliberately: an unbounded column is what the 2026-08-20 pass removed, because it put a label and its own control a foot apart. 1500 is the band the operator set (1400–1600). πŸ”΄ THE CAP ALONE IS NOT ENOUGH β€” a 1500px column makes body copy unreadable (a ~170-character line; the typographic measure people actually read is 45–85). So the WIDTH and the MEASURE are two different constraints: the container gets 1500 for grids and tables, and prose is capped at its own readable measure just below. Change one and you must think about the other. */ main{max-width:1500px;margin:0 auto;padding:0 var(--sp-3) calc(var(--sp-5) * 2)} /* πŸ”΄ THE READABLE MEASURE β€” ONE RULE, PORTAL-WIDE. Applies to block prose only: a paragraph sitting directly in a card or a box. Never to grid cells, table cells or flex rows, whose width IS their layout. `ch` tracks the font, so this stays a measure rather than a pixel guess. ⚠️ If a future pass widens `main` again, this is the line that keeps the widening safe. πŸ”΄ WIDENED 80ch β†’ 105ch (operator, 2026-09-02). At 80ch short card copy rendered ~611px inside a ~1470px card and read as broken layout rather than as a considered measure. NOT removed and NOT full-bleed: 1470px of prose is a ~170-character line. ⚠️ `ch` OVER-DELIVERS, AND THE NUMBER IN THIS RULE IS NOT THE LINE LENGTH. `ch` is the advance width of "0", which is wider than the average glyph, so an N-ch container renders roughly 1.15Γ—N characters per line. MEASURED, not assumed: at 80ch the longest paragraph on /business rendered 90 chars/line; at 105ch it renders ~118. Anyone tuning this must measure the LINE, not read the property β€” qa/portal-prose-measure-check.php does exactly that with Range.getClientRects(). */ main .card > p, main .card > .hint, main .fl-box > p, main .fl-box > .hint{max-width:105ch} :focus-visible{outline:2px solid var(--accent);outline-offset:1px} /* ── CHROME: LEFT SIDEBAR (operator ruling 2026-08-13 β€” the admin's shape; grows downward forever). TEXT ONLY β€” no emoji (ruling 2026-08-14). Phones: the SAME sidebar as a hamburger drawer, pure-CSS checkbox toggle (nav never needs JS). */ .nav-toggle{display:none} .shell{min-height:100vh} .side{display:flex;flex-direction:column;background:var(--card);border-right:1px solid var(--line)} .side-brand{font-weight:700;font-size:13px;letter-spacing:.02em; padding:var(--sp-3);border-bottom:1px solid var(--line)} .side-nav{display:flex;flex-direction:column;padding:var(--sp-1) 0;flex:1} .side-nav a{display:flex;align-items:center;min-height:var(--touch); padding:0 var(--sp-3);color:var(--muted);text-decoration:none;font-weight:500; border-left:2px solid transparent} .side-nav a:hover{color:var(--ink)} .side-nav a.on{color:var(--ink);font-weight:600;background:var(--bg);border-left-color:var(--accent)} .side-foot{padding:var(--sp-2) var(--sp-3);border-top:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);font-size:12px} .side-foot .muted{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0} .bar{display:flex;gap:var(--sp-3);align-items:center; padding:var(--sp-1) var(--sp-3);background:var(--card);border-bottom:1px solid var(--line)} .bar .spacer{margin-left:auto} .hamb{display:inline-flex;align-items:center;justify-content:center;min-width:var(--touch); min-height:var(--touch);font-size:18px;cursor:pointer;border-radius:var(--r)} @media(min-width:900px){ .shell{display:grid;grid-template-columns:200px minmax(0,1fr)} .side{position:sticky;top:0;height:100vh} .phone-bar{display:none} .nav-scrim{display:none !important} } @media(max-width:899.98px){ .phone-bar{position:sticky;top:0;z-index:5} .side{position:fixed;top:0;bottom:0;left:0;width:min(72vw,280px);z-index:11; transform:translateX(-105%);transition:transform .15s ease; box-shadow:4px 0 20px rgba(26,29,33,.14)} .nav-toggle:checked ~ .shell .side{transform:none} .nav-scrim{display:none;position:fixed;inset:0;background:rgba(26,29,33,.3);z-index:10} .nav-toggle:checked ~ .shell .nav-scrim{display:block} } @media(prefers-reduced-motion:reduce){.side{transition:none}} /* ── buttons: quiet by default; semantic colors mean commit/destructive only ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1); min-height:var(--touch);padding:0 var(--sp-2);border:1px solid var(--line);border-radius:var(--r); background:var(--card);color:var(--ink);font:inherit;font-size:13px;font-weight:600; cursor:pointer;text-decoration:none} .btn:hover{border-color:var(--muted)} .btn-go{background:var(--go);border-color:var(--go);color:#fff} /* πŸ”΄ THE CONTROL VOCABULARY (operator rulings 2026-08-20/21) β€” four kinds, four looks, NO new ones: solid green (.btn-go) β€” THE one primary save per page solid blue (.btn-up) β€” an UPLOAD (a different kind of action) outlined blue (.btn-assist) β€” an ASSIST: fills, copies, or reveals; never saves or uploads ("anything clickable that fills, copies, or reveals should LOOK clickable" β€” plain-text assists don't get clicked) quiet (.btn-quiet) β€” secondary navigation / stay-here Never two same-green siblings; never a new treatment invented for one control. */ .btn-up{background:#2b6cb0;border-color:#2b6cb0;color:#fff} .btn-assist{background:transparent;border:1px solid #2b6cb0;color:#2b6cb0} .btn-assist:hover{background:#eaf2fb;border-color:#2b6cb0} .btn-stop{background:var(--stop);border-color:var(--stop);color:#fff} .btn-quiet{border-color:transparent;background:transparent;color:var(--muted)} .btn-wide{display:flex;width:100%} .btn-sticky{position:fixed;left:var(--sp-3);right:var(--sp-3);bottom:calc(var(--sp-3) + env(safe-area-inset-bottom)); margin:0;z-index:6} /* ── cards: hairline, small radius, compact ─────────────────────────────────── */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0} .card h2{font-size:13px;font-weight:650;margin:0 0 2px} .card .hint{margin:0 0 var(--sp-1)} .hint{color:var(--muted);font-size:12px} .row{display:flex;align-items:center;gap:var(--sp-2);min-height:var(--touch)} .row .grow{flex:1;min-width:0} /* FIELD GRIDS STACK ON A PHONE (2026-08-19, operator: "city/state/zip stack on top of each other … any multi-column row must stack cleanly on a phone, not overlap"). Structural, not per-view: only a .row that actually holds a text-like input/select collapses to one column β€” nav (β€Ή β€Ί), the "Repeats weekly" checkbox, and list lines () also use .row and are SPARED. :has() is baseline since 2023 (safe on any truck owner's phone). */ @media(max-width:560px){ .row:has(> label > input:not([type=checkbox]):not([type=radio]):not([type=button])), .row:has(> label > select), .row:has(> input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit])), .row:has(> select){flex-direction:column;align-items:stretch;min-height:0} .row:has(> label > input:not([type=checkbox]):not([type=radio]):not([type=button])) > *, .row:has(> label > select) > *, .row:has(> input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit])) > *, .row:has(> select) > *{width:100%;flex:none} } .rowcard{border-left:3px solid var(--line)} .dot{display:inline-block;width:.55em;height:.55em;border-radius:50%;flex:none} /* πŸ”΄ BRAND CARD GRID (2026-09-01, rebuilt from the loose stacks it replaced). auto-fit + a 270px minimum: the column count FOLLOWS the width and is never declared β€” 5 across at the 1500px cap, fewer as it narrows, 1 on a phone. ⚠️ THE MINIMUM IS 270, NOT THE ~190 FIRST SKETCHED. Both were specified β€” "minmax(~190px)" and "5 across at 1500px" β€” and they are not compatible: at 190 the 1444px inner width fits SEVEN columns (measured), which also leaves each card too narrow for a logo, a name, a description and a full-width button. 270 is the value that delivers the stated OUTCOME (1444/270 = 5.3 β†’ 5, and six would need ≀240). The outcome was taken as the intent; the number followed from it. πŸ”΄ The fleet is heading for ~62 concepts, so nothing here may assume ten: no nth-child rules, no fixed track list, no per-brand CSS. ⚠️ auto-FIT here (not auto-fill, which the earlier stack-grid used): these cards should share the row evenly rather than leave phantom empty tracks, and a card is never alone on this screen β€” the brand catalogue always has several. */ .bgrid{display:grid;gap:var(--sp-2);grid-template-columns:repeat(auto-fit,minmax(270px,1fr));align-items:stretch} /* πŸ”΄ THE VENDOR GRID FILLS, IT DOES NOT FIT. `auto-fit` collapses empty tracks, so a vendor with ONE brand got a single card stretched to the full 1442px row β€” a banner beside ten 280px cards, which is the opposite of the "same shape" the ruling asks for. `auto-fill` keeps the empty tracks, so the first card is the same width as one of ours whether the vendor owns one brand or six. (Measured: 1442px -> 280px, identical to an FTA card.) */ #mine .bgrid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))} /* πŸ”΄ TWO DIFFERENT ALIGNMENTS, TWO DIFFERENT PROPERTIES β€” corrected 2026-09-01 by a plant that found no teeth, which is the only reason the mistake was caught: Β· EQUAL CARD HEIGHT across a row is `align-items:stretch` on the GRID (above). Grid items stretch to the tallest in their row on their own. Β· ALIGNED BUTTONS across a row is `.bcard__desc{flex:1}` below. The description absorbs the slack inside an already-equal-height card, so every action sits on the same line. The first draft of this comment credited the flexing description with the card height. It does not do that: removing flex:1 leaves the heights equal and only ragged the buttons. Both properties are load-bearing, for different claims β€” qa/brand-cards-check.php asserts them separately (B3 height, B3b buttons) with a plant each. */ .bcard{display:flex;flex-direction:column;gap:var(--sp-1); border:1px solid var(--line);border-radius:12px;background:var(--card);padding:var(--sp-3);min-width:0} .bcard--active{border-color:var(--go)} .bcard__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-1)} /* Fixed square tile β€” a wide logo and a narrow one occupy the SAME footprint, which is what keeps the names and buttons on a row aligned. contain, so neither is cropped. */ .bcard__tile{width:40px;height:40px;flex:0 0 40px;border-radius:8px;background:var(--off); display:flex;align-items:center;justify-content:center;overflow:hidden} .bcard__tile img{max-width:32px;max-height:32px;object-fit:contain} .bcard__name{font-size:var(--fs-0);font-weight:650;margin:0;line-height:1.3} /* flex:1 IS the equal-height mechanism β€” see the .bcard note. Keep it. */ .bcard__desc{flex:1;margin:0;color:var(--muted);font-size:12px;line-height:1.4;min-height:2.8em} /* πŸ”΄ THE DESCRIPTION RESERVES TWO LINES, and that is what makes the two grids agree. `align-items: stretch` equalises cards WITHIN a grid; it cannot reach across two. Our brands' blurbs wrap to two lines and a vendor's one-line status did not, so vendor cards measured 17px shorter β€” exactly one line β€” and their button sat 16px higher. A floor on the description equalises them structurally rather than pinning a card height that would go stale. ⚠️ If a blurb ever wraps to THREE lines the two grids diverge again and V6 goes red. That is the leg working: it means the shapes really have parted, not that the tolerance is wrong. */ .bcard__note{margin:0;font-size:11px;line-height:1.35;color:var(--warn)} .bcard__note--quiet{color:var(--muted)} .bcard__act{margin-top:var(--sp-1)} /* 2026-09-08: a badge WRAPS inside its card at every width (it ran past the edge with the "N to price" text) β€” never nowrap */ .bbadge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:650;white-space:normal;max-width:100%;min-width:0;overflow-wrap:anywhere;line-height:1.3} .bcard__top .bbadge{flex:1 1 auto;text-align:right} /* πŸ”΄ STILL A BADGE, NOT A BUTTON β€” a pill with no border, no hover, no cursor change. It is a STATE. And amber, not red: "Needs pricing" means incomplete, never broken. */ .bbadge--go{background:var(--go-bg-strong);color:var(--go-ink)} /* πŸ”΄ RED, and STILL A BADGE β€” a pill with no border, no hover, no cursor change. A state, not an action. (.bbadge--warn keeps its name: the class is the STATE it marks, not the colour it uses.) */ .bbadge--warn{background:var(--stop-bg-strong);color:var(--stop-ink)} .cardgrid{display:grid;gap:var(--sp-2);grid-template-columns:1fr} @media(min-width:700px){.cardgrid{grid-template-columns:1fr 1fr;align-items:start} .cardgrid .card{margin:0}} .truckline{display:flex;align-items:baseline;gap:var(--sp-1);color:var(--muted); min-height:auto;flex-wrap:wrap;font-size:13px;margin:2px 0} .actline{margin:3px 0;font-size:13px;color:var(--muted)} /* attention lines: inline flow, marker never orphans */ .side-foot .btn{white-space:nowrap} .stat{font-size:var(--fs-2);font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums} .dims{display:flex;align-items:center;gap:var(--sp-1)} .dims input{width:5.5em;text-align:center} /* ── verdict chips: small, quiet, semantic ──────────────────────────────────── */ .chip{display:inline-block;border-radius:3px;padding:1px 7px; font-size:11px;font-weight:600;background:var(--off);color:var(--muted)} .chip-open{background:var(--go-bg);color:var(--go)} .chip-booked{background:var(--stop-bg);color:var(--stop)} .chip-mine{background:var(--warn-bg);color:var(--warn)} .chip-off{background:var(--off);color:var(--muted)} .chip-past{background:transparent;color:var(--muted);border:1px solid var(--line)} /* ── card-state banners (operator rules 2026-08-20/21) ────────────────────────── THREE states, three visual treatments, all PROMINENT and FIRST on the card β€” a vendor scans the page and knows instantly which items are done, which are waiting on us, and which need them. Full words, never the initials "FTA": .waitline (amber) β€” waiting on Food Truck Avenue .okline (green) β€” approved, nothing more needed .fixline (red) β€” needs the vendor's action .dueline (amber) β€” renewal due soon (the admin's own 60-day expiring window + colour, mirrored vendor-side β€” operator 2026-08-21); renders BENEATH the state banner: approved-and-expiring keeps the green truth and adds the amber warning, never replaces it */ .waitline,.okline,.fixline,.dueline{display:block;margin:0 0 var(--sp-2);padding:10px 14px; border-radius:10px;color:var(--ink);font-weight:650;line-height:1.35} /* πŸ”΄ WAITING ON US IS A STATUS, NOT A WARNING (operator ruling 2026-09-08). .waitline was amber β€” the same amber as .dueline, which IS a prompt to act. On the Paperwork step the two stacked: "waiting on Food Truck Avenue to review" (nothing to do) directly above "renewal due soon" (something to do), in identical colour. Two states that ask opposite things of a vendor cannot share a colour, or the colour stops meaning anything and both get ignored. Neutral: the card's own ground and a plain rule, so it reads as information. Amber is now reserved for .dueline and the badges that genuinely want a response. ⚠️ GLOBAL, deliberately β€” .waitline carries every waiting-on-us banner in the portal (W-9, liability, photos, brand photos, paperwork). Leaving the other seven amber would contradict the ruling's own reasoning the moment a vendor saw one beside a real prompt. */ .waitline{background:var(--bg);border:1px solid var(--line);font-weight:600} .okline{background:var(--go-bg);border:1px solid var(--go)} .fixline{background:var(--stop-bg);border:1px solid var(--stop)} .dueline{background:var(--warn-bg);border:1px solid var(--warn)} .waitline .sub,.okline .sub,.fixline .sub,.dueline .sub{display:block;font-weight:400;color:var(--muted);font-size:.88em;margin-top:2px} /* ── "Getting set up" onboarding strip (approved 2026-08-21) β€” visible everywhere while incomplete, gone when done. The CURRENT step is the one live link. ─────────────── */ .onb-strip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 var(--sp-3); padding:8px 14px;border:1px solid var(--line);border-radius:10px;background:var(--panel,#fafafa); font-size:.86em} .onb-strip__t{font-weight:700;color:var(--muted);text-transform:uppercase;font-size:.78em;letter-spacing:.04em} .onb-step{color:var(--muted);white-space:nowrap} .onb-step.is-done{color:var(--go)} .onb-step.is-unk{color:var(--warn)} a.onb-step.is-cur{color:var(--accent,#1a6);font-weight:700;text-decoration:underline} /* Completed steps became links 2026-09-01 (breadcrumbs clickable for done + current only). They carry an underline so the affordance is VISIBLE β€” a green tick that happens to be clickable and looks identical to one that is not teaches the vendor nothing. Weight stays normal so `β†’ current` remains the loudest thing in the strip; the β—‹ not-yet-reached steps stay plain s and get no underline because there is no link to give them. */ a.onb-step.is-done{text-decoration:underline} /* ── INLINE BRAND PRICING PANEL (operator ruling 2026-09-02) ───────────────────────────────────── πŸ”΄ THE HOST SITS AFTER .bgrid AND IS NOT A GRID ITEM. That is the whole mechanism: the panel is appended here, outside the grid's box, so no card's geometry changes when it opens. Putting the panel inside .bgrid would make it a grid item and reflow every card β€” the exact defect the ruling names ("cards do not collapse, reflow, or reorder when a panel opens"). No transition on height and no scroll behaviour is declared: an animation that moves the page is how the vendor loses their place, and holding scroll position is part of the ruling. */ /* πŸ”΄ THE DIVIDER BETWEEN THE TWO WAYS TO SELL (operator, 2026-09-02) β€” a rule with generous space, never the word "or": a vendor can build their own brand AND run ours, so "or" would state a choice that does not exist. The space either side is doing as much work as the line. */ .brand-split{border:0;border-top:1px solid var(--line);margin:var(--sp-5) 0} /* the one-line pricing summary near the intro; the full copy sits below BOTH sections */ .pricing-line{margin-top:var(--sp-2)} .brand-panel-host{margin-top:var(--sp-4)} .brand-panel-host:empty{display:none} /* πŸ”΄ WHERE A STEP CHANGE LANDS (operator standing rule 2026-09-16: "pin the transition to the top of the section"). Both wizards scroll their panel into view with block:'start' on a step change; this is the only place that says how much air to leave and what has to stay clear. --touch is the phone's sticky .phone-bar (48px under 900px, 32px above it), so the arrival is never tucked under it. πŸ”΄ THE NUMBER LIVES HERE, NEVER IN A MODULE: truck-panel.js and brand-wizard.js both call scrollIntoView and nothing else, so a layout change is one edit, not three. It is sliced into the admin's own stylesheet from this rule (.pt-panel is in FTA_BW_CSS_CLASSES), which is what keeps the two surfaces landing in the same place. */ .pt-panel{scroll-margin-top:calc(var(--touch, 48px) + var(--sp-3, 14px))} /* πŸ”΄ THE OPEN PANEL IS ITS OWN BLOCK, NOT MORE PAGE (operator ruling 2026-09-02). Bare `.pt-panel` is styled for the TRUCK page β€” a dashed top rule on a near-white ground, which is right inside an accordion and wrong here: on /brands it read as another slab of page content rather than as the thing that just opened. The dimmed cards receded and nothing came forward. Everything below is scoped to .brand-panel-host so the truck page is untouched, by ruling. πŸ”΄ BLUE IS var(--accent) β€” THE PORTAL'S EXISTING BLUE, not a new one. It is already the link and focus colour, so it reads as informational; green (--go) is the action colour on every button and would compete, red (--stop) reads as error. A SECOND blue would be worse than reusing this one. */ .brand-panel-host .pt-panel{ display:block; /* πŸ”΄ A TINTED SURFACE, NOT WHITE. White-on-off-white measured 255 vs 246 β€” technically distinct and visually nothing, because every CARD on the page is white too, so the panel read as one more of them. The tint is a wash of the SAME accent, so surface and border are one idea. ⚠️ ITS LUMINANCE IS CLOSE TO WHITE ON PURPOSE (the page stays light) β€” which is exactly why qa/brand-panel-check.php D3 compares COLOUR, not mean grey: a grey-only test would pass a tint nobody can see. */ background:var(--accent-bg); /* πŸ”΄ ALL FOUR SIDES, ~2px. A 3px left edge alone read as almost nothing β€” the eye needs the block to be enclosed before it reads as a block. */ border:2px solid var(--accent); border-radius:var(--r); padding:var(--sp-4); box-shadow:0 2px 8px rgba(26,29,33,.10); } /* the package table and menu keep a white ground so their rows stay legible against the tint */ .brand-panel-host .pkgs,.brand-panel-host .pfields{background:var(--card)} /* room to breathe inside β€” the menu grid and the package table were sitting on the edges */ .brand-panel-host .pkg-menu{margin-bottom:var(--sp-3);padding-bottom:var(--sp-3)} .brand-panel-host .pkgs,.brand-panel-host .pfields{margin-top:var(--sp-3)} .brand-panel-host form>.hint:first-child{margin-top:0} /* πŸ”΄ THE OPEN CARD IS BLUE, THE SAME BLUE AS ITS PANEL (operator ruling 2026-09-02). It was green, which put a green card above a blue panel and read as two unrelated things β€” the card and the panel it opened have to read as ONE unit. `border-color` moves too, so a card that is BOTH priced (.bcard--active, green) and open does not show a green ring around a blue-anchored panel. ⚠️ THE BADGES DO NOT CHANGE: "Active brand" stays green and "Needs pricing" stays amber. Those carry STATE, which is a different job from showing which card is open. */ /* πŸ”΄ WEIGHT WITHOUT LAYOUT. The card's border stays 1px β€” widening it to 2px would change the box and REFLOW the grid, which the ruling forbids outright. An OUTSET ring paints 2px of accent around the card and occupies no space, so the card reads at the same weight as the panel border while every rect stays byte-identical (asserted by G4 and by D-r1). */ .bcard.is-open{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)} /* πŸ”΄ "Change pricing" IS AN ACTION AND MUST LOOK LIKE ONE (operator, 2026-09-02). It rendered as .btn-quiet β€” bare text beside solid-green Join brand / Set pricing β€” so scanning the grid, every joined card looked like it had no action at all. OUTLINED, not filled: it stays secondary to the green primary actions, and it is the SAME var(--accent) as the panel it opens, so the button, the card ring and the panel are one idea. ⚠️ .btn-assist already exists as an outlined blue, but on a hardcoded #2b6cb0 β€” a THIRD blue. Not reused, and not changed here: it belongs to another surface and is out of scope. */ .btn-accent{background:transparent;border-color:var(--accent);color:var(--accent);font-weight:650} .btn-accent:hover{background:var(--accent-bg);border-color:var(--accent)} /* OUTLINED STOP (operator ruling 2026-09-06): "Remove from this truck" wore .btn-quiet β€” transparent border on transparent ground in --muted ink β€” which read as caption text, not a control. It is a real action and must look like one, but NOT solid --stop: removing a menu from a truck is reversible (flip-never-delete), and the solid fill is reserved for the destructive weight. Same construction as .btn-accent above, on the stop hue β€” outline, hue-matched ink, tinted hover. */ .btn-stop-outline{background:transparent;border-color:var(--stop);color:var(--stop);font-weight:650} .btn-stop-outline:hover{background:var(--stop-bg);border-color:var(--stop)} /* The opt-out. Secondary weight, well below the pricing button β€” this is not an action we push. */ .bcard__leave{margin:var(--sp-2) 0 0;text-align:center;font-size:11.5px;line-height:1.3} /* πŸ”΄ RED TEXT, COLOUR ONLY (operator, 2026-09-02). Same size, same underline, same position β€” this is a destructive action we do not want encouraged, and button weight would make it the most prominent thing on a joined card, competing with Change pricing. Red text signals destructive without pulling the eye. ⚠️ var(--stop) IS THE EXISTING DANGER TOKEN β€” the same one this link already used on :hover, and the one .bcard__confirm borders with. No new hex: a fourth ad-hoc colour on this page is exactly how the third blue (.btn-assist's hardcoded #2b6cb0) happened. */ .bcard__leave a{color:var(--stop);text-decoration:underline} .bcard__leave a:hover{color:var(--stop);text-decoration-thickness:2px} /* the confirm block replaces the action while it is open, so the card cannot be left by one click */ .bcard__confirm{margin-top:var(--sp-2);padding:var(--sp-2);border:1px solid var(--stop); border-radius:var(--r);background:var(--stop-bg)} .bcard__confirm p{margin:0 0 var(--sp-2);font-size:11.5px;line-height:1.35;color:var(--ink)} .bcard__confirm .row{display:flex;gap:var(--sp-1)} .bcard__confirm .row form,.bcard__confirm .row a{flex:1} .bcard__confirm .btn{width:100%} /* THE VENDOR LOGO CARD (2026-09-18, operator: "make it look more like a card … I can't tell if or when my file is taken"). ONE shared partial on both dashboards (tools/lib/brand-wizard/views/_vendor_logo_card.php): a preview slot BESIDE the uploader, the uploader itself the SAME markup as the photo uploader (photo-form.js reads dz-count / dz-previews / photo-status / uploader__progress β€” the card used to carry the paperwork uploader's element names, so a picked file showed nothing at all). Existing tokens only. */ .vlogo{padding:var(--sp-3);border-radius:10px;box-shadow:0 1px 3px rgba(20,30,40,.08)} .vlogo__body{display:flex;gap:var(--sp-3);align-items:flex-start;flex-wrap:wrap;margin-top:var(--sp-2)} .vlogo__preview{flex:0 0 220px;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-1); border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:var(--sp-2);text-align:center} .vlogo__preview img{max-width:196px;max-height:100px;display:block} .vlogo__preview .vlogo__cap{font-size:11.5px;color:var(--muted);margin:0} .vlogo__form{flex:1 1 320px;min-width:0} .vlogo__form .dropzone{padding:var(--sp-2) var(--sp-3)} /* ── DIM THE NON-ACTIVE CARDS WHILE A PANEL IS OPEN (operator ruling 2026-09-02) ────────────────── The open card is the anchor for the panel below it, so everything else recedes. πŸ”΄ OPACITY ONLY. No `pointer-events`, no `filter`, no `display` β€” a dimmed card MUST stay clickable (opening another brand still works and still closes the first), and pointer-events:none would break that silently while looking identical in a screenshot. πŸ”΄ 0.55 IS A FLOOR, NOT A TASTE. Below ~0.5 the amber "Needs pricing" badge stops being legible at a glance, which is the thing the ruling explicitly protects. qa/brand-panel-check.php D3 asserts the band, so a later "just a bit more" cannot quietly cross it. The transition lives on .bcard itself, not on the dimmed state, so it applies in BOTH directions β€” on a state-only transition the restore would snap. */ .bcard{transition:opacity .14s ease} .bgrid--dimmed .bcard{opacity:.55} .bgrid--dimmed .bcard.is-open{opacity:1} @media (prefers-reduced-motion: reduce){ .bcard{transition:none} } [data-panel-ok]{color:var(--go)} [data-panel-err]{color:var(--stop)} a.onb-step.is-done:hover,a.onb-step.is-cur:hover{text-decoration-thickness:2px} .onb-forward{margin:0 0 var(--sp-2)} /* ── brand ROWS + panel extras (operator-approved 2026-08-21: the LIST kept β€” "tiles look better and scan worse" β€” upgraded with information; admin DENSITY matched with portal-own rules, never the admin stylesheet). No amber on this list on purpose: nothing here ever waits on us β€” the marketplace ruling made visible. ─────────────────────────────── */ .pt-brow{display:grid;grid-template-columns:40px minmax(0,1fr) max-content;align-items:center; gap:12px;padding:8px 0;border-bottom:1px solid var(--line)} .pt-brow form{justify-self:end} .pt-brow form .btn{min-width:6.5em;justify-content:center} .pt-brow:last-child{border-bottom:0} .pt-bdisc{width:40px;height:40px;border-radius:10px;flex:0 0 40px;object-fit:cover; display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.95em} .pt-menu{margin-top:var(--sp-2)} .pt-menu>summary{cursor:pointer;color:var(--muted);font-weight:600} /* the recoverable feed link (Sync) β€” monospace, masked until Reveal */ .linkbox{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px; padding:6px 8px;border:1px solid var(--line);border-radius:var(--r); background:var(--bg);color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis} /* locked address components β€” filled by a pick or the explicit manual escape */ .geo-locked{background:var(--bg);color:var(--muted);cursor:not-allowed} /* ── inputs ─────────────────────────────────────────────────────────────────── */ input,select{font:inherit;font-size:13px;min-height:var(--touch);padding:0 var(--sp-2); border:1px solid var(--line);border-radius:var(--r);background:var(--card); color:var(--ink);width:100%} label{display:block;margin:var(--sp-1) 0;font-weight:600;font-size:12px} label small{display:block;font-weight:400;color:var(--muted)} /* ── the 3-step sheet (schedule) ────────────────────────────────────────────── */ .sheet{position:fixed;inset:auto 0 0 0;z-index:10;background:var(--card); border-radius:6px 6px 0 0;box-shadow:0 -6px 24px rgba(26,29,33,.16); padding:var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom)); max-height:88vh;overflow:auto} .sheet[hidden]{display:none} .scrim{position:fixed;inset:0;background:rgba(26,29,33,.3);z-index:9} .scrim[hidden]{display:none} .dots{display:flex;gap:5px;justify-content:center;margin-bottom:var(--sp-2)} .dots i{width:7px;height:7px;border-radius:50%;background:var(--line)} .dots i.on{background:var(--accent)} .choice{display:flex;flex-direction:column;gap:var(--sp-2)} .choice .btn{min-height:52px;justify-content:flex-start;text-align:left} .choice .btn em{font-style:normal;font-weight:400;color:var(--muted);display:block;font-size:.9em} .choice .btn.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .pills{display:flex;gap:var(--sp-1);flex-wrap:wrap} .pills .btn{min-width:var(--touch);padding:0 var(--sp-2)} .pills .btn.on{background:var(--accent);border-color:var(--accent);color:#fff} .suggest{position:relative} .suggest .out{margin-top:var(--sp-1)} .suggest .out .btn{width:100%;justify-content:flex-start;font-weight:400;margin:3px 0} /* ── calendar: week strip + agenda + month grid ─────────────────────────────── */ .strip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:var(--sp-2) 0} .strip a{display:flex;flex-direction:column;align-items:center;gap:1px;min-height:var(--touch); padding:4px 0;border-radius:var(--r);text-decoration:none;color:inherit;font-size:12px} .strip a.today{box-shadow:inset 0 0 0 1px var(--accent)} .strip a.sel{background:var(--card);border:1px solid var(--line)} .strip .d{font-size:.78em;color:var(--muted)} .strip .dots-row{display:flex;gap:2px;min-height:7px} .mgrid{display:none} @media(min-width:700px){ .mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .mgrid .cell{background:var(--card);border:1px solid var(--line);border-radius:var(--r); min-height:74px;padding:4px 5px;font-size:.8em;overflow:hidden} .agenda-only{display:none} } .empty{padding:var(--sp-4) var(--sp-3);text-align:center} .empty p{color:var(--muted)} /* ── money ledger (2026-08-17) β€” the portal's first table; business-tool treatment: hairlines, right-aligned money, and the WRAPPER scrolls on phones, never the page. */ .tablewrap{overflow-x:auto;padding:var(--sp-1) 0} table.ledger{width:100%;border-collapse:collapse;font-size:var(--fs-0);min-width:640px} table.ledger th,table.ledger td{padding:5px var(--sp-2);text-align:left;vertical-align:top; border-bottom:1px solid var(--line);white-space:nowrap} /* Column 3 was Truck (a text column) until 2026-09-14; it is now Vendor payable, which is numeric and must not be given a text column's 11em min-width or wrapping. Only the Job column (2) is prose now. */ table.ledger td:nth-child(2){white-space:normal;min-width:11em} table.ledger th{font-weight:600;color:var(--muted);font-size:12px; text-transform:uppercase;letter-spacing:.03em} /* per-column sort arrows: the arrows ARE the controls (labels are plain text) */ table.ledger th .sortarrows{display:inline-flex;flex-direction:column;vertical-align:middle; margin-left:4px;line-height:.85} table.ledger th .sortarrows a{color:#c3c7cc;text-decoration:none;font-size:8px; padding:0 3px;text-transform:none} table.ledger th .sortarrows a:hover{color:var(--accent)} table.ledger th .sortarrows a.on{color:var(--accent)} table.ledger .num{text-align:right;font-variant-numeric:tabular-nums} table.ledger tr.voided td{color:var(--muted);text-decoration:line-through} table.ledger tr.voided td .muted{text-decoration:none} table.ledger tr.totals td{font-weight:650;border-top:2px solid var(--ink);border-bottom:0} /* the ONE document-history list (shared renderer with the admin, 2026-08-14) */ .doc-hist{margin:4px 0 8px;font-size:12px} .doc-hist summary{cursor:pointer;color:var(--muted);font-weight:600} .doc-hist ul{margin:4px 0 0;padding-left:1.1em} .doc-hist li{margin:2px 0} .doc-hist-meta{color:var(--muted)} /* geo-suggest (2026-08-14) β€” THE address autocomplete's dropdown (vendored geo-suggest.js; inline suggests deleted, one-component ruling). Portal tokens: surface = --card, error = --stop (this sheet has no --panel/--err β€” map, don't invent). The three states (hits / note / err) must stay visually distinct β€” the white-on-white round's ruling, both apps. */ .geo-suggest-out{position:relative;z-index:20} .geo-suggest-out:empty{display:none} .geo-suggest-hit{display:block;width:100%;text-align:left;padding:.45em .6em;border:1px solid var(--line); border-top:none;background:var(--card);color:var(--ink);cursor:pointer;font:inherit;font-weight:400} .geo-suggest-hit:first-child{border-top:1px solid var(--line)} .geo-suggest-hit:hover{background:var(--bg)} .geo-suggest-note{display:block;padding:.45em .6em;border:1px solid var(--line); background:var(--card);color:var(--muted);font-style:italic} .geo-suggest-err{display:block;padding:.45em .6em;border:1px solid var(--stop); background:var(--card);color:var(--stop)} /* "Did you mean…?" β€” step 2 (2026-09-12), the portal twin of the admin's block. A proposed correction is its own state: not a result, not an error. Accepting it runs the same applyHit() a suggestion click runs, so it leaves the same pick evidence the server checks on save. */ .geo-suggest-dym{display:block;border:1px solid var(--accent);border-radius:6px;overflow:hidden} .geo-suggest-dym-q{padding:.45em .6em;background:var(--bg);color:var(--ink);font-weight:600} .geo-suggest-dym .geo-suggest-hit{border-left:none;border-right:none} .geo-suggest-dym-no{display:block;width:100%;text-align:left;padding:.4em .6em;border:none; border-top:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;font:inherit;font-size:.92em} .geo-suggest-dym-no:hover{background:var(--bg);color:var(--ink)} /* ══ Pricing card (gate 6, 2026-08-18) β€” the completeness banner, both-states commission box, and worked example. Text-only surfaces: every string is server-built (Pricing::previewPayload). */ .price-banner{border-radius:var(--r);padding:var(--sp-2) var(--sp-3);margin:var(--sp-2) 0;font-weight:600} .price-banner--gap{background:#fdf3d6;border:1px solid #e0a800} .price-banner--ok{background:var(--go-bg);border:1px solid var(--go)} .price-banner--err{background:var(--stop-bg);border:1px solid var(--stop)} .price-live{border:1px solid var(--go);border-radius:var(--r);padding:var(--sp-2) var(--sp-3); margin:var(--sp-2) 0 var(--sp-1);background:var(--go-bg)} .price-live__basis{font-size:var(--fs-0)} .price-live__line{margin:2px 0;opacity:.55} .price-live__line.is-active{opacity:1} .price-live__tag{display:inline-block;min-width:7em;text-align:center;font-size:.72em; text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--go);border-radius:4px; padding:.05em .4em;margin-right:.5em} .price-live__line.is-active .price-live__tag{background:var(--go);color:#fff} .price-example__body{border-left:3px solid var(--go);padding:2px var(--sp-3);margin-top:var(--sp-1)} /* the brand panel's worked example + the sized-brand explanation (2026-09-03) β€” same 720px column as the package table above them, so the example reads as part of the table, not a footer */ .pkg-example{max-width:720px;margin-top:var(--sp-2)} .pkg-example__h{text-transform:uppercase;letter-spacing:.05em;font-size:.75em} .pkg-example__body div+div{margin-top:2px} .pkg-sized{max-width:720px;margin:var(--sp-1) 0 var(--sp-2);font-size:13px;line-height:1.45} .price-form .row{gap:var(--sp-3)} /* ══ Get-listed checklist (2026-08-19) β€” the path a new vendor follows, derived from the readiness registry. NEXT prominent, the rest below; FTA-owned gaps read as waiting, not failure. */ .getlisted{border:2px solid var(--go);background:var(--go-bg)} .getlisted h2{font-size:15px} .gl-next{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);margin:var(--sp-2) 0; font-size:var(--fs-1);padding:var(--sp-2) var(--sp-3);background:#fff;border-radius:var(--r);border:1px solid var(--go)} .gl-next .btn{margin-left:auto} .gl-mark{color:var(--go);font-weight:700;font-size:1.2em} .gl-done{color:var(--go);font-weight:600;margin:var(--sp-2) 0} .gl-wait{color:var(--muted);margin:var(--sp-2) 0} .gl-truck{margin:var(--sp-2) 0;padding-top:var(--sp-1)} .gl-truck h3{font-size:13px;font-weight:650;margin:var(--sp-2) 0 2px} .gl-list{list-style:none;padding:0;margin:var(--sp-1) 0} .gl-list li{padding:3px 0;line-height:1.5} .gl-list li a{margin-left:.4em} .gl-list li.gl-check{color:var(--muted)} .gl-list li.gl-dim{color:var(--muted);font-style:italic} .gl-arm-note{margin-top:var(--sp-3);border-top:1px solid var(--line);padding-top:var(--sp-2)} /* ══ Document card + drop-zone pattern (2026-08-19) β€” the liability/paperwork upload, refreshed within the portal's own density. Theme tokens only; mobile-first (a truck owner on a phone). */ .doc-card__head{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap} .doc-card__head h2{margin:0;flex:1;min-width:0} .doc-card__state{margin:var(--sp-1) 0 var(--sp-2)} .dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:var(--sp-1);text-align:center;padding:var(--sp-4) var(--sp-3);margin:var(--sp-2) 0; border:2px dashed var(--line);border-radius:var(--r);background:var(--bg);color:var(--muted); cursor:pointer;transition:border-color .12s,background .12s} .dropzone:hover,.dropzone.is-over{border-color:var(--go);background:var(--go-bg);color:var(--ink)} .dropzone.has-file{border-style:solid;border-color:var(--go);background:var(--go-bg)} .dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer} .dropzone__icon{font-size:1.4em;color:var(--go)} .dropzone__prompt u{color:var(--go);text-underline-offset:2px} .dz-picked{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;justify-content:center} .dz-picked:empty{display:none} .dz-thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;border:1px solid var(--line)} .dz-meta{font-weight:700;color:var(--go);word-break:break-all} /* βœ“ Attached: β€” green, unmissable */ .dz-swap{flex-basis:100%;text-align:center;color:var(--muted);font-size:11px;font-weight:400} /* Once a file is picked, the "drag here" prompt is REPLACED by the βœ“ Attached state β€” so the card visibly changes at a glance (operator 2026-08-19: "I can't see if anything uploaded"). */ .dropzone.has-file .dropzone__prompt{display:none} /* Upload status was tiny muted .hint text β€” easy to miss mid-upload on a phone. Make it a bold block; failures read in the stop colour. */ .js-doc-state:not(:empty){display:block;margin-top:var(--sp-2);font-style:normal;font-weight:600; color:var(--go);font-size:13px} .js-doc-state.dz-err{color:var(--stop)} /* ══ #2 per-item decline rows + inline field errors (2026-08-19, operator walkthrough fixes) ══ */ /* BUG 2: the pair is the unit β€” a field and ITS "I don't have this" bound together, one flex line, checkbox beside its own words, tucked under the input it governs. Generic label/input rules gave the checkbox touch-height block layout, which is why it floated away from its label. */ .decl-pair{margin:0 0 var(--sp-3)} .decl-pair>label{margin-bottom:2px} .decl-opt{display:flex;align-items:center;gap:6px;margin:2px 0 0 2px; font-weight:400;font-size:12px;color:var(--muted);cursor:pointer} .decl-opt input[type=checkbox]{min-height:0;height:auto;width:auto;margin:0;padding:0;flex:none} .decl-opt .decl-when{color:var(--muted)} /* ── TEAM (operator, 2026-09-14): a ROLE IS ONE ROW. The first cut reused .decl-opt, whose input rule covers only [type=checkbox]; the radios inherited the generic input rule (touch height, 100% width, padding) and rendered as bare circles floating mid-form with their words pushed into a second column. This block owns both radio and checkbox: 16px control on the left, bold name + description stacked on the right, the whole list flush with the fields above it (no inherited label margin, no 2px indent). */ .role-list{display:flex;flex-direction:column;gap:var(--sp-2);margin:2px 0 var(--sp-2)} .role-opt{display:grid;grid-template-columns:16px 1fr;column-gap:var(--sp-2);align-items:start; margin:0;padding:0;font-weight:400;font-size:13px;color:var(--ink);cursor:pointer;text-align:left} .role-opt input[type=radio],.role-opt input[type=checkbox]{appearance:auto;-webkit-appearance:auto; min-height:0;height:16px;width:16px;margin:2px 0 0;padding:0;border:0;background:none;box-shadow:none} .role-opt>span{display:block;min-width:0} .role-opt strong{display:block;font-weight:650;line-height:1.3} .role-opt .muted{display:block;font-size:12px;line-height:1.35} .role-opt.is-off{color:var(--muted);cursor:default} /* Inline field error β€” rendered AT the offending field; the banner repeats it but names nothing. */ .field-err{display:block;font-weight:600;font-size:12px;color:var(--stop);margin:2px 0 var(--sp-1)} /* Prompt β‰  failure (BUG 4, 2026-08-19): the address guard ASKS for provenance β€” amber, at the field, with manual entry offered inside the message. Only real validation errors are red. */ .field-prompt{display:block;font-weight:400;font-size:12px;border:1px solid #d9a441;background:#fdf6e7; color:#6b4e0e;border-radius:var(--r);padding:var(--sp-2);margin:2px 0 var(--sp-2)} .field-prompt div{margin-top:var(--sp-1)} /* BUG 6 guard note: guidance, not an error β€” amber like the prompt family. */ .decl-note{display:block;font-size:12px;font-weight:600;color:#6b4e0e;background:#fdf6e7; border:1px solid #d9a441;border-radius:var(--r);padding:var(--sp-1) var(--sp-2);margin:2px 0 var(--sp-2)} /* ══ The substitute-W-9 FACE (2026-08-20, walkthrough finding 5): the page reads as the DOCUMENT a vendor already knows β€” monochrome, thin borders, numbered line boxes, Part bands β€” not a web app. Desktop = the recognizable form grid; mobile = the same boxes stacked (a rendered form may reflow β€” ruled). IRS wording is verbatim (see the view header); .w9-ours marks OUR guidance. */ .w9face{border:2px solid var(--ink,#1a1d21);background:var(--bg)} /* uncapped with the container (walkthrough round 2) */ .w9-head{display:grid;grid-template-columns:auto 1fr auto;border-bottom:2px solid currentColor} .w9-head>div{padding:var(--sp-2);border-right:1px solid currentColor} .w9-head>div:last-child{border-right:0} .w9-head__w9{font-size:26px} .w9-head__title h2{margin:0 0 4px;font-size:17px;text-align:center} .w9-head__title{text-align:center} .w9-head__give{max-width:11em;font-weight:700;font-size:12px;align-self:center} .w9-small{font-size:11px;line-height:1.35} .w9-sub{margin-top:4px} .w9-line{position:relative;border-bottom:1px solid currentColor;padding:var(--sp-1) var(--sp-2) var(--sp-2) 34px} .w9-num{position:absolute;left:10px;top:7px;font-weight:700;font-size:12px} .w9-lbl{display:block;font-weight:600;font-size:12px} .w9-lbl input[name],.w9-csz input,.w9-tinbox{width:100%;margin-top:4px} .w9-boxes{display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 0;font-weight:400} .w9-box{display:inline-flex;align-items:center;gap:6px;font-weight:400;font-size:12px;cursor:pointer} .w9-box input[type=radio],.w9-3b input[type=checkbox]{appearance:none;width:13px;height:13px;min-height:0;flex:none; border:1px solid currentColor;border-radius:0;margin:0;padding:0;display:inline-block;position:relative} .w9-box input[type=radio]:checked::after,.w9-3b input[type=checkbox]:checked::after{content:"βœ•";position:absolute; inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;line-height:1} .w9-llc{width:4em !important;display:inline-block;margin-left:6px} .w9-3b{font-weight:400;display:flex;gap:8px;align-items:flex-start} .w9-3b input{margin-top:2px} .w9-exempt{display:flex;flex-wrap:wrap;gap:var(--sp-2);font-weight:400} .w9-exempt label{flex:1;min-width:16em;font-size:12px} .w9-exempt input{width:6em;display:block;margin-top:4px} .w9-csz{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--sp-1);margin-top:4px} .w9-part{border-bottom:2px solid currentColor;padding:4px var(--sp-2);font-weight:700;font-size:13px} .w9-part__tag{display:inline-block;background:var(--ink,#1a1d21);color:var(--bg,#fff);padding:1px 8px;margin-right:8px} .w9-tin{border-bottom:1px solid currentColor} .w9-tinrow{display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 0} .w9-or{font-style:italic;font-size:12px;align-self:center} .w9-tinbox{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.18em;max-width:18em} .w9-cert{padding:var(--sp-1) var(--sp-2) var(--sp-2)} .w9-cert>p:first-child{font-weight:700;font-size:12px;margin:4px 0} .w9-cert ol{margin:0 0 var(--sp-1) var(--sp-3);font-size:12px} .w9-cert ol li{margin-bottom:4px} .w9-sign{display:flex;gap:var(--sp-2);border-top:2px solid currentColor;border-bottom:1px solid currentColor; padding:var(--sp-1) 0;margin:var(--sp-2) 0;align-items:stretch} .w9-sign__here{font-weight:800;font-size:15px;padding:2px 6px 0 2px} .w9-sign__line{flex:1} .w9-sign__labels{display:flex;justify-content:space-between;border-top:1px solid currentColor; font-size:11px;padding-top:2px} /* The typed name IS the signature: it sits ON the IRS signature line, sized to read as one. Plain italic serif, no fake-handwriting webfont β€” the page stays self-contained. */ .w9-sig-input{width:100%;border:0;border-radius:0;background:transparent;outline:0; font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:20px; padding:2px 4px 4px;box-shadow:none} .w9-sig-input:focus{background:rgba(127,127,127,.06)} .w9-sigboxes{border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-2);margin-top:var(--sp-2)} .w9-sigbox{display:flex;gap:8px;align-items:flex-start;font-size:12px;font-weight:600;margin:0 0 var(--sp-1)} /* Same reset .decl-opt needs: the generic input rule's min-height/padding makes a checkbox huge. */ .w9-sigbox input[type=checkbox]{min-height:0;height:auto;width:auto;margin:2px 0 0;padding:0;flex:none} .w9-ours{font-weight:400;font-size:12px;color:var(--muted);margin:4px 0} /* Required-field marking (operator, 2026-08-21). Three rules, three jobs: .req-star β€” the PERSISTENT indicator: a red asterisk on the label, subtle, never an outline. A symbol, not a colour, so the meaning survives colour-blindness and print. .field-bad β€” needs-your-action: the red outline appears ONLY on fields a refused submit actually named (server-side $bad()), beside the .field-err message naming what's needed. The inline script clears it the moment the field is filled. Red therefore keeps its one meaning; a fresh form shows quiet asterisks, never a page of red. */ .req-star{color:var(--stop);font-weight:700;padding-left:2px;font-size:12px} .field-bad:not(:focus-visible){outline:2px solid var(--stop);outline-offset:1px} div.field-bad,label.field-bad{outline-offset:4px;border-radius:var(--r)} .w9face .btn-wide{margin:var(--sp-2)} .w9face+.muted a{font-weight:600} @media(max-width:700px){ .w9-head{grid-template-columns:1fr} .w9-head>div{border-right:0;border-bottom:1px solid currentColor} .w9-head>div:last-child{border-bottom:0} .w9-csz{grid-template-columns:1fr} .w9-boxes{flex-direction:column;gap:8px} } /* ══ Brand pricing panel at ADMIN DENSITY, portal tokens only (operator walk, 2026-08-21) ══════ The admin's .fl-bpm modal got the SHAPE right β€” packages left, the brand's menu right, both visible while you decide a price. Reproduced here with this stylesheet's own vocabulary; the admin sheet is never imported (standing ruling). No new colours, no new control kinds. */ /* The row's action column: the panel link and the opt control, one unit, wrapping on a phone. */ .pt-bacts{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-1);flex-wrap:wrap} .pt-bacts .btn{min-width:6.5em;justify-content:center} /* A jump lands the panel under the sticky page top instead of flush against it. */ .pkg-panel{scroll-margin-top:var(--sp-4)} .pkg-head{display:flex;align-items:center;gap:var(--sp-2);margin:0 0 var(--sp-2)} .pkg-head h3{margin:0;font-size:13px;font-weight:650} /* ══ Brand rows with INLINE panels (operator walkthrough, 2026-08-21) ══════════════════════════ The panel opens UNDER the row that was clicked instead of being appended at the page bottom, and the open row is highlighted so it is obvious which brand you are pricing. Panels are OPEN by default and only collapsible once .js-collapsible is added by script β€” a vendor whose JS failed sees everything rather than a page of dead buttons. */ .pt-brand{border-bottom:1px solid var(--line)} .pt-brand:last-child{border-bottom:0} .pt-brands.js-collapsible .pt-panel{display:none} .pt-brands.js-collapsible .pt-brand.is-open .pt-panel{display:block} .pt-brand.is-open .pt-brow{background:var(--go-bg)} .pt-panel{padding:0 var(--sp-3) var(--sp-3);background:#fcfdfc;border-top:1px dashed var(--line)} /* ══ Package rows β€” three columns, a header, unpriced muted ════════════════════════════════════ */ /* πŸ”΄ ONE GRID, TWO SURFACES (2026-08-22, operator: the pricing card must "match the density of the brand pricing table"). .pfields/.pf are the truck Pricing card's rows and they share THIS rule with .pkgs/.pkg rather than copying its column template β€” a parallel copy would drift the moment either is tuned, and the whole point is that the money column lines up down the page. */ /* πŸ”΄ THE TABLE IS CAPPED, AND THE CAP IS THE POINT. The row template is `minmax(0,1fr) 140px 92px`, so every pixel of extra container width lands on the NAME track and nowhere else. When main{} went 1040px -> 1500px (2026-09-01) this table went with it: the rows measured 1412px and the name track 1124px, leaving thirteen short labels ("EntrΓ©e", "EntrΓ©e + side") each sitting at the left of a near-empty 1124px track under a full-width rule. The rules are deliberate ROW SEPARATORS β€” there is not an
on the page β€” but at that width they read as rules drawn across the whole section, which is what was reported. Capping the CONTAINER (not the name track) shortens the box, the rows and the separators together; capping the track alone would leave the border-bottom spanning the full width and fix nothing that was actually complained about. Measured in qa/portal-package-table-check.php. */ .pkgs,.pfields{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin-top:var(--sp-1);max-width:720px} .pkghead,.pkg,.pfhead,.pf{display:grid;grid-template-columns:minmax(0,1fr) 140px 92px;gap:var(--sp-3);align-items:center} .pkghead,.pfhead{padding:6px var(--sp-3);border-bottom:1px solid var(--line);background:var(--bg); font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700} .pkg,.pf{padding:8px var(--sp-3);border-bottom:1px solid var(--line)} .pkg:last-child,.pf:last-child{border-bottom:0} .pkg.is-off{background:#fcfcfb} .pkg.is-off .pkgname b{color:var(--muted)} .pkgname b,.pfname b{font-size:12.5px} .pkgname span,.pfname span{display:block;color:var(--muted);font-size:11.5px} .pkg .price,.pf .pfval{position:relative} .pkg .price input,.pf .pfval input,.pf .pfval select{text-align:right;width:100%} /* the $ prefix only indents a MONEY field β€” a mileage box with an 18px gutter and no currency sign reads as a broken money field, which is what "no field wider than it needs" is about. */ .pkg .price input,.pf .pfval.money input{padding-left:18px} .pkg .price .cur,.pf .pfval.money .cur{position:absolute;left:7px;top:7px;color:var(--muted);font-size:12px} .pkg .price .per,.pf .pfval .per{font-size:10.5px;color:var(--muted);text-align:right;margin-top:2px} .pf .pfunit{font-size:11px;color:var(--muted)} /* the row's opt-out sits in the third column, same slot as a package's status */ .pf .notoffer{font-size:11px;margin:0} .pkg .status{font-size:11px;font-weight:700} .pkg .status .on{color:var(--go)} .pkg .status .no{color:var(--muted);font-weight:400} /* pass C (2026-09-03): the brand-minimum choice inside the package panel β€” same card width as .pkgs */ .pkg-min{border:1px solid var(--line);border-radius:var(--r);background:var(--card);margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-3);max-width:720px} .pkg-min__h{margin:0 0 var(--sp-1);font-size:14px} .pkg-min__opt{display:flex;align-items:center;gap:var(--sp-2);margin:6px 0;font-size:14px} .pkg-min__opt input[type=radio]{margin:0;flex:0 0 auto} .pkg-min__amt{display:inline-flex;align-items:center;gap:4px;margin-left:var(--sp-1)} .pkg-min__amt input{width:120px} .pkg-min__help{margin:var(--sp-1) 0 0;font-size:13px;line-height:1.45} .pkg-empty{border:1px dashed var(--line);border-radius:var(--r);padding:var(--sp-4);text-align:center; color:var(--muted);background:var(--card);font-size:13px;margin-top:var(--sp-2)} @media(max-width:560px){ .pkghead{display:none} .pkg{grid-template-columns:1fr;gap:var(--sp-1)} } /* ONE COLUMN, ALWAYS β€” menu first, then the fields (operator ruling 2026-08-21, reversing the side-by-side pass). Reading order IS the design here; a two-pane layout at admin density is the thing that was rejected. No max-height and no inner scroller: nothing about what a vendor is committing to should sit below a fold inside a box. */ .pkg-cols{display:grid;grid-template-columns:1fr;gap:var(--sp-3)} .pkg-col{min-width:0} .pkg-menu{border-bottom:1px solid var(--line);padding-bottom:var(--sp-2)} .pkg-menu__h{margin:0 0 var(--sp-1);font-size:12px;font-weight:650;color:var(--muted)} .pkg-menu__g{margin:var(--sp-2) 0 var(--sp-1);font-size:12px;font-weight:650} .pkg-menu__g:first-of-type{margin-top:var(--sp-1)} /* ══ Pricing field pairs β€” the field and the one control that disables it, on one line ═════════ (operator walkthrough 2026-08-21; shape from the mockup, portal tokens only.) The grid caps the field column so a label and its input stay together even at the 1040px content width, and puts the single "Not offered" radio immediately to its right instead of at the far edge. */ /* .fieldpair is now only the SEMANTIC marker (one control per row) that qa/portal-pricing-radios-check.php pins; when it is also a .pf the grid above wins. */ .fieldpair:not(.pf){display:grid;grid-template-columns:minmax(0,300px) auto;gap:var(--sp-3); align-items:center;margin-bottom:var(--sp-3)} .fieldpair:last-of-type{margin-bottom:0} .fieldpair__f{min-width:0} .fieldpair label.f{display:block;font-size:12px;font-weight:650;margin-bottom:3px} .fieldpair label.f input[type=number]{margin-top:3px;width:100%} .fieldpair .unit{color:var(--muted);font-size:11px;margin-top:3px} .notoffer{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted); white-space:nowrap;font-weight:400;cursor:pointer;min-height:0} .notoffer input[type=radio],.notoffer input[type=checkbox]{min-height:0;height:auto;width:auto;margin:0;padding:0;flex:none} /* "NOT OFFERED" TICKED (operator ruling 2026-09-03): the row must read unmistakably as "you cannot type here" β€” muted text + muted ground + not-allowed cursor on the rate, and the helper text and unit go quiet with it. The input is READONLY (never disabled) so the kept value still posts on save. */ .pf.is-off .pfval input{color:var(--muted);background:var(--bg);cursor:not-allowed;border-color:var(--line)} .pf.is-off .pfval .cur,.pf.is-off .pfval .per,.pf.is-off .pfname span,.pf.is-off .pfunit{color:#a3a8b0} .pf.is-off .pfname b{color:var(--muted)} /* THE BRAND PRICING REFERENCE on the truck panel's Brands step (operator ruling 2026-09-04): read-only, one line, quiet β€” the truck ASSIGNS a brand; prices and the minimum are set once on /brands. Deliberately NOT a table: a table here would re-invite the per-truck pricing habit this ruling removed. */ .brand-ref{margin:3px 0 0;font-size:11.5px;color:var(--muted);line-height:1.45} .brand-ref a{color:var(--accent)} /* THE PRICING CHANGE LOG (operator ruling 2026-09-03): a collapsed
card β€” findable, not loud. */ .phist>summary{cursor:pointer;font-size:12.5px;color:var(--muted);list-style:none} .phist>summary::before{content:"β–Έ ";color:var(--muted)} .phist[open]>summary::before{content:"β–Ύ "} .phist__t{width:100%;border-collapse:collapse;margin-top:var(--sp-2);font-size:12px} .phist__t th{text-align:left;color:var(--muted);font-weight:500;border-bottom:1px solid var(--line);padding:4px 6px} .phist__t td{padding:5px 6px;border-bottom:1px solid var(--line);vertical-align:top} .phist__theirs td:nth-child(2){color:var(--accent);font-weight:600} .phist__mine td:nth-child(2){color:var(--muted)} .phist__old{color:var(--muted)} .phist__new{font-weight:600} @media(max-width:560px){ .fieldpair:not(.pf){grid-template-columns:1fr;gap:var(--sp-1)} /* phones: the three-column grid becomes label / field, with the unit tucked under the field β€” 140px + 92px beside a label does not fit at 390px. */ .pkghead,.pfhead{display:none} .pkg,.pf{grid-template-columns:minmax(0,1fr) 132px;row-gap:var(--sp-1)} .pf .pfunit,.pf .notoffer,.pkg .status{grid-column:2;justify-self:end;text-align:right} .notoffer{padding-left:2px} } /* ══ Pricing: bind each control to the field it governs (operator walk, 2026-08-21) ════════════ CSS-ONLY BY DESIGN. The markup posts `extra_hours_offered` / `ayce_extra_hours_offered` as a two-member radio group β€” value=1 owns the rate field beside it, value=0 is "Not offered". Both are load-bearing; NEITHER is orphaned. What was wrong was purely presentation: .row's flex put the "yes" radio at the far left of a wide .grow label (reading as decoration on the number input) and stranded "Not offered" against the right edge, so nothing on screen said the two were one choice. Identical defect to the /business "I don't have this" checkbox, and this is that fix β€” the opt-out drops onto its own line directly beneath the field it governs, tucked and muted, in .decl-opt's exact vocabulary. πŸ”΄ Kept to CSS deliberately: no markup change means the POSTED CONTRACT is byte-identical, so portal-refusal-preserves-input-check still means what it meant before the change. */ .price-form .row:has(input[type=radio]){flex-wrap:wrap;row-gap:2px} .price-form .row:has(input[type=radio])>label:last-child{flex-basis:100%;display:flex;align-items:center; gap:6px;margin:2px 0 0 2px;font-weight:400;font-size:12px;color:var(--muted);cursor:pointer;min-height:0} .price-form .row:has(input[type=radio])>label:last-child input[type=radio]{min-height:0;height:auto; width:auto;margin:0;padding:0;flex:none} /* The commission choice was a BARE