/* ========================================================================= Normandy WC Portal — central theme (design tokens + component vocabulary) ========================================================================= Single source of truth for every screen AND the Phase 5 proposal PDF. No screen hardcodes a color: everything reads these custom properties. TOKEN PROVENANCE ---------------- [brand] = hex taken verbatim from brand/brand colors.pdf [derived] = proposed derivation for states the brand guide doesn't cover (hover, disabled, focus, tint/ink pairs for contrast). Listed for owner approval in portal/README.md — change the token here and every screen follows. COLOR DISCIPLINE (non-negotiable, from the design brief) -------------------------------------------------------- - Navy owns the hero and primary actions. - Green means money saved or Quoted. Amber means Referred / Indicative. Red means Declined. Nothing else is colored. - The interactive accent (brand blue) marks selection/focus/links only. ========================================================================= */ /* ---------- THE ONE FONT, SERVED BY THE APP (one font everywhere, owner ruling 2026-10-09, option B). Inter 4.1, the variable face: one file covers every weight the screens ask for (400 to 800, 650 and 750 included). SIL Open Font License 1.1, unmodified, licence beside it in portal/fonts/. Until this rule the stack named Segoe UI first, which the app cannot serve (Microsoft forbids self-hosting Windows fonts), so each machine drew its own: Segoe UI on Windows, DejaVu Sans on the cloud's Linux, 13% wider. Served from here, every machine draws the same letters. The two screens that do not import this file (the workbench and the placement page) carry this same rule; the stack guard pins all three identical. ---------- */ @font-face { font-family: "Inter"; src: url("/portal/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { /* ---------- brand primaries ---------- */ --navy: #213e7c; /* [brand] Primary Blue — hero, primary buttons */ --gray: #8a898d; /* [brand] Primary Gray — secondary text */ --gray-mid: #bbbbbb; /* [brand] medium gray — disabled fg, hairlines */ --gray-light: #eeeeee; /* [brand] light gray — disabled bg */ --blue-pale: #8cc9e7; /* [brand] very light blue — pills on navy */ --tint-blue: #cfe9f7; /* [brand] transparent blue — info/cross-sell bg */ --tint-green: #e0f0df; /* [brand] transparent green — success badge bg */ /* ---------- brand secondaries in service roles ---------- */ --blue: #068fc9; /* [brand] button color 2 — interactive accent */ --green: #009347; /* [brand] button color 1 — savings / Quoted */ --amber: #f7b623; /* [brand] — Referred / Indicative */ --red: #e12925; /* [brand] — Declined */ /* ---------- derived neutrals (proposed) ---------- */ --ink: #141c30; /* [derived] near-black biased toward the navy */ --ink-soft: #4a5265; /* [derived] long-form secondary text */ --page: #f6f7f9; /* [derived] page ground, cool-biased */ --card: #ffffff; --border: #e4e7ee; /* [derived] card + table hairlines */ --border-strong:#c9cedb; /* [derived] input borders */ /* ---------- derived interaction states (proposed) ---------- */ --navy-hover: #1a3266; /* [derived] navy darkened ~12% */ --navy-deep: #18306a; /* [derived] hero gradient end */ --blue-hover: #0577a7; /* [derived] */ --green-hover: #007a3b; /* [derived] */ --focus-ring: rgba(6, 143, 201, .40); /* [derived] from --blue */ --disabled-fg: var(--gray-mid); --disabled-bg: var(--gray-light); /* ---------- derived semantic tint/ink pairs (proposed) ---------- Badge text on a pale tint needs more contrast than the raw brand hue; each semantic color gets a darkened "ink" for text and its tint for bg. */ --green-ink: #00682f; /* [derived] on --tint-green */ --bound-green: #0b6634; /* [derived] deep --green, the bound hero (2026-09-23) */ --bound-green-deep: #06492a; /* [derived] its gradient end */ --amber-tint: #fdf3d8; /* [derived] from --amber */ --amber-ink: #805c00; /* [derived] on --amber-tint */ --red-tint: #fcebea; /* [derived] from --red */ --red-ink: #b21611; /* [derived] on --red-tint */ --neutral-tint:#eef0f4; /* [derived] Draft / Imported / neutral chips */ --purple: #6a4bb0; /* [derived] Pending UW (WC authority, 2026-09-23) */ --purple-tint: #eee9f8; /* [derived] from --purple */ --purple-ink: #4a2d8a; /* [derived] on --purple-tint */ --neutral-ink: #4a5265; /* ---------- on-navy (hero) ---------- */ --on-navy: #ffffff; --on-color: #ffffff; /* [derived] text on any filled brand colour (2026-09-23) */ --sky-onnavy: #8cc9e7; /* [approved] plancards mockup v4 tagline on navy */ --on-navy-soft: rgba(255,255,255,.78); /* [derived] hero secondary text */ --on-navy-pill: rgba(255,255,255,.14); /* [derived] pill bg on navy */ --on-navy-border: rgba(255,255,255,.26); /* [derived] pill border on navy */ /* ---------- reward-points gold (agent status pages, 2026-08-20) -------- The points figure is BARE GLOWING TEXT on the navy hero, not a chip in a container, so it needs gradient stops rather than one fill. Derived from the brand --amber (#f7b623) by lightening and darkening it; the brand guide covers a single amber, and a two-stop gradient cannot be expressed with one token. Used ONLY by the points block. */ --gold-hi: #ffd977; /* [derived] --amber lightened, gradient start */ --gold-lo: #f0a63a; /* [derived] --amber warmed, gradient end */ --gold-label: #e8c98a; /* [derived] the caption under the figure */ --gold-spark: #ffe9b8; /* [derived] the twinkles */ --gold-glow: rgba(240,166,58,.35); /* [derived] text-shadow bloom */ /* ---------- the workbench's gold and the avatar palette (workbench v3, items 1 and 10, 2026-10-31) -------- `--av-*` are the five colours a person's avatar is picked from; each carries white initials at AA. */ --gold: #f2c14e; /* [approved] workbench v3 mockup */ --gold-hover: #ffd56e; /* [derived] --gold lightened */ --gold-tint: #fffaf0; /* [derived] from --gold */ --gold-border:#f3e3b8; /* [derived] from --gold */ --av-navy: #16305c; --av-royal: #2d4fb5; --av-teal: #0d6f6e; --av-green: #0b6634; --av-violet: #6a4bb0; /* ---------- typography ---------- */ --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --fs-hero: 52px; --lh-hero: 1.0; /* the premium — largest thing on page */ /* THE ONE STEP BETWEEN A HEADING AND THE PREMIUM (bind-clarity item 1, owner walkthrough 2026-08-28). It exists because the scale had a hole exactly where a confirmation headline needs to sit: every step from 11 to 22 is a 1.1-1.3 ratio and then it JUMPS 2.36x to the premium, so a headline that must out-shout a 24px number had nowhere to go but the premium's own token - which is spoken for and says so on the line above. 34px is the geometric mean of 22 and 52 (33.8), which is the step the scale would have had if it had one. */ --fs-h1-hero: 34px; --lh-h1-hero: 1.12; --fs-h1: 22px; --lh-h1: 1.25; --fs-h2: 17px; --lh-h2: 1.3; --fs-body: 14px; --lh-body: 1.55; --fs-small:12.5px; --lh-small:1.45; --fs-label:11px; /* uppercase eyebrows / column heads */ --ls-label:.08em; --fw-hero: 750; --fw-semibold: 600; --fw-medium: 500; /* ---------- geometry ---------- */ --r-card: 16px; /* card radius (brief) */ --r-ctl: 10px; /* inputs, small controls */ --r-pill: 999px; /* badges, toggles, switchers — pill-shaped */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 40px; --sp-8: 64px; --content-max: 1100px; --shadow-card: 0 1px 2px rgba(20,28,48,.05), 0 4px 16px rgba(20,28,48,.06); --shadow-hero: 0 8px 28px rgba(24,48,106,.28); --shadow-pop: 0 2px 6px rgba(20,28,48,.08), 0 12px 32px rgba(20,28,48,.14); } /* ========================================================================= Base ========================================================================= */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--lh-body); } /* EVERY GLYPH IN THE SERVED FACE (land.py list 5, item 4, 2026-10-15): form controls and code do not inherit the page font by default, so buttons drew in Arial and code in Consolas on Windows (other faces elsewhere). They take the page's font like everything else. */ button, input, select, textarea, code, kbd, samp, pre, input::file-selector-button { font-family: inherit; } h1, h2, h3 { margin: 0; text-wrap: balance; } a { color: var(--blue); text-decoration: none; } a:hover { color: var(--blue-hover); text-decoration: underline; } :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } .money, .num { font-variant-numeric: tabular-nums; } /* uppercase micro-label (eyebrows, column heads, pill labels) */ .label { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray); } /* ========================================================================= App chrome — white header (the logo is navy-on-white; it never sits on navy) ========================================================================= */ .chrome { background: var(--card); border-bottom: 1px solid var(--border); } /* THE CHROME ROW WRAPS AT EVERY WIDTH (2026-08-16). IT USED TO WRAP ONLY BELOW 900px AND THAT IS WHY IT CLIPPED. `flex-wrap: wrap` lived solely inside `@media (max-width: 900px)`, so above that the base rule applied and the row was `nowrap`. `.chrome-inner` is capped at 1100px; the admin row wants 1369px; the excess spilled right. At a 1280px viewport the signed-in identity landed at 1285 and the SIGN-OUT BUTTON at 1375 - both entirely past the viewport edge. **Sessions are revocable and the control that revokes them was off-screen.** Wrapping at every width costs nothing when the row fits: a wrap container lays a fitting row out exactly as a nowrap one does. It engages only when the alternative was clipping. THE BAND IS STATIC FLOW, so a wrapped row makes the header taller and pushes the page down. It cannot overlap content, and that is asserted rather than assumed. */ .chrome-inner { max-width: var(--content-max); margin: 0 auto; padding: 14px var(--sp-5); display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; row-gap: var(--sp-3); } .chrome .logo img { height: 30px; display: block; } .chrome-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: var(--sp-4); } /* chrome nav links are pill-links (blue outline, empty fill); the current page keeps the outline treatment — no filled state (owner ruling). */ /* `min-width: 0` and `overflow-wrap: anywhere` are what make "any name length" true rather than "any name we happened to try". A flex item's default `min-width: auto` refuses to shrink below its content, so a long unbroken token would push the row wide again; these let the name break instead of the layout. */ .chrome-user { margin-left: auto; text-align: right; font-size: var(--fs-small); color: var(--gray); min-width: 0; overflow-wrap: anywhere; } /* flexible middle zone (e.g. draft-save status) — grows to fill the space between the nav and the right-side actions, centering its content there rather than crowding either side. */ .chrome-center { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; } .chrome-user b { display: block; color: var(--ink); font-weight: var(--fw-semibold); } /* Chrome pill links — blue outline, empty fill (Dashboard, Rewards, Quote Other Lines). Blue = interactive, consistent with the accent rule. */ .pill-link { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--blue); background: transparent; border: 1.5px solid var(--blue); border-radius: var(--r-pill); padding: 6px 16px; white-space: nowrap; } .pill-link:hover { background: var(--tint-blue); color: var(--blue-hover); border-color: var(--blue-hover); text-decoration: none; } /* filled variant — external destinations (Rewards, Quote Other Lines) */ .pill-link-filled { background: var(--blue); color: #fff; border-color: var(--blue); } .pill-link-filled:hover { background: var(--blue-hover); border-color: var(--blue-hover); color: #fff; } .chrome-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; min-width: 0; } /* ITEM 2 (owner walkthrough 2026-08-27): on the AGENT chrome the mount moves `.chrome-nav` INSIDE this row so the header is one line rather than two (the measurement and the reasoning are in session.js). The nav's 16px left inset is what separated it from the logo when it was a sibling; inside the action row the row's own gap does that job, and the inset would read as a stray space before the first pill. Everything else about the nav is untouched, deliberately - including the phones rule below, which still finds it. */ .chrome-actions .chrome-nav { margin-left: 0; } /* THE CHROME WRAPS BEFORE IT PUSHES THE PAGE SIDEWAYS (spec 1.6; front-door entry item 5, 2026-08-15). FOUND BY MEASURING, NOT BY READING, and the measurement is worth recording because the answer was not what it looked like. The agent board at 768px was already scrolling sideways by 79px BEFORE this entry - two promotion pills, an identity chip and a logo on one nowrap row - and adding the sign-out control took it to 183px. So this is a pre-existing 1.6 defect that item 5 widened rather than one item 5 introduced, and both halves are closed here. The pills carry `white-space: nowrap` deliberately (a wrapped "Quote Other Lines" reads as two links), so the row cannot shrink and must WRAP instead. 900px rather than 768px: the overflow starts well above the tablet breakpoint, and a rule that only fixes the width somebody measured is a rule that leaves the widths nobody did. */ /* WRAPPING MOVED TO THE BASE RULES ABOVE ON 2026-08-16, so what is left here is only what is genuinely about NARROW widths: a tighter gap, the nav losing its left inset, the identity reading left rather than right. The `flex-wrap: wrap` declarations that used to live here are gone rather than duplicated - a property set in two places is a property somebody will change in one of them. */ @media (max-width: 900px) { .chrome-inner { gap: var(--sp-3); } .chrome-nav { margin-left: 0; } .chrome-actions { row-gap: var(--sp-2); } .chrome-user { text-align: left; } } .content { max-width: var(--content-max); margin: 0 auto; padding: var(--sp-6) var(--sp-5) var(--sp-8); } /* ========================================================================= Buttons ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: var(--fw-semibold); font-size: 15px; border-radius: var(--r-ctl); padding: 12px 22px; border: 1px solid transparent; cursor: pointer; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease; white-space: nowrap; } .btn-primary { background: var(--green); color: #fff; } .btn-primary:hover { background: var(--green-hover); } .btn-secondary-onnavy { background: transparent; color: var(--on-navy); border-color: var(--on-navy-border); } .btn-secondary-onnavy:hover { background: var(--on-navy-pill); } .btn-secondary { background: var(--card); color: var(--navy); border-color: var(--border-strong); } .btn-secondary:hover { border-color: var(--navy); } /* item 6b (2026-08-26): the SMALL step of the button scale, named. The dashboard's New quote pill has worn exactly this size inline since C2 (9px 18px, 14px) - this is that de-facto small tier as a class, so a green action can rank below the page's primary without leaving the scale. */ .btn-sm { padding: 9px 18px; font-size: 14px; } .btn[disabled], .btn.is-disabled { background: var(--disabled-bg); color: var(--disabled-fg); border-color: transparent; cursor: not-allowed; box-shadow: none; } /* ========================================================================= Status badges — pill + icon; the only colored elements outside the hero ========================================================================= */ .badge { display: inline-flex; align-items: center; gap: 7px; border-radius: var(--r-pill); padding: 5px 13px; font-size: var(--fs-small); font-weight: var(--fw-semibold); white-space: nowrap; } .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .badge-quoted { background: var(--tint-green); color: var(--green-ink); } .badge-indicative { background: var(--amber-tint); color: var(--amber-ink); } .badge-referred { background: var(--amber-tint); color: var(--amber-ink); } .badge-declined { background: var(--red-tint); color: var(--red-ink); } .badge-bound { background: var(--tint-green); color: var(--green-ink); } .badge-bindreq { background: var(--tint-blue); color: var(--navy); } .badge-draft { background: var(--neutral-tint); color: var(--neutral-ink); } .badge-imported { background: var(--neutral-tint); color: var(--neutral-ink); } /* on-navy variants (inside the hero) */ .badge-onnavy-quoted { background: rgba(224,240,223,.95); color: var(--green-ink); } .badge-onnavy-indicative { background: rgba(253,243,216,.95); color: var(--amber-ink); } .badge-onnavy-referred { background: rgba(253,243,216,.95); color: var(--amber-ink); } /* ========================================================================= Hero band (quote result) — navy owns this ========================================================================= */ .hero { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); color: var(--on-navy); border-radius: var(--r-card); box-shadow: var(--shadow-hero); padding: var(--sp-6); } .hero-top { display: flex; align-items: flex-start; gap: var(--sp-4); } .hero-eyebrow { color: var(--on-navy-soft); } .hero-meta { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; justify-content: flex-end; } .hero-expiry { color: var(--on-navy-soft); font-size: var(--fs-small); white-space: nowrap; } /* on a phone the expiry line may take two lines (standing rule 366: it ran to 350 at 320 on the cloud's widest letters) */ @media (max-width: 480px) { .hero-expiry { white-space: normal; } } .hero-expiry b { color: var(--on-navy); font-weight: var(--fw-semibold); } .hero-premium { font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: var(--fw-hero); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; margin-top: var(--sp-3); } .hero-premium .cents { font-size: .45em; font-weight: var(--fw-semibold); color: var(--on-navy-soft); } .hero-sub { color: var(--on-navy-soft); font-size: var(--fs-small); margin-top: var(--sp-1); } .hero-pills { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); } .pill { display: inline-flex; align-items: center; gap: 7px; background: var(--on-navy-pill); border: 1px solid var(--on-navy-border); color: var(--on-navy); border-radius: var(--r-pill); padding: 5px 13px; font-size: var(--fs-small); } .pill .k { color: var(--blue-pale); font-weight: var(--fw-semibold); } /* THE DIVIDEND CHIP'S CHECK (owner ruling 2026-09-23, item 4). Green is the money colour on this platform and a dividend is money back, so the mark is green - `--tint-green`, not `--green`, because the chip sits on the navy hero and the solid green does not carry there. The MEANING is in the words beside it ("Dividend included"): the mark is decorative, carries `aria-hidden`, and nothing about this chip is colour alone. */ .pill .k.pill-ok { color: var(--tint-green); } .pill .k.pill-ok .pill-ok-svg { display: inline-block; vertical-align: -1px; } .hero-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--on-navy-border); align-items: center; flex-wrap: wrap; } .hero-actions .hint { color: var(--on-navy-soft); font-size: var(--fs-small); margin-left: auto; } /* ---- quoted-hero landing layout (owner rulings 2-4, 2026-08-03) ---- "Get my quote" now lands directly here (the in-flow result box is retired), so the quoted hero is the accomplishment moment: left column = premium with the bind action directly under it (the ruled first-time-user failure: the action must be unmistakable on arrival); right column = the rewards/commission panel, grown from the retired box's presentation. Only renderQuoted uses .hero-cols — other status heroes keep the plain stacked hero and its bordered .hero-actions row. */ .hero-cols { display: flex; gap: var(--sp-6); align-items: stretch; } .hero-main { flex: 1 1 auto; min-width: 0; } .hero-cols .hero-actions { border-top: 0; padding-top: 0; margin-top: var(--sp-5); } .btn-bind-hero { font-size: 16.5px; padding: 14px 30px; } .hero-bind-hint { color: var(--on-navy-soft); font-size: var(--fs-small); margin-top: var(--sp-2); } .hero-cols + .hero-pills { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--on-navy-border); } /* rewards — the exciting one, right side of the hero; commission sits quietly beneath it (deliberately separated presentations, owner direction carried over from the retired box) */ .hero-incentive { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3); max-width: 300px; border-left: 1px solid var(--on-navy-border); padding-left: var(--sp-6); } .hero-incentive .reward { display: flex; gap: 14px; align-items: flex-start; } .reward-star { font-size: 28px; line-height: 1.1; color: var(--amber); animation: reward-pop .5s ease; } @keyframes reward-pop { 0% { transform: scale(.4) rotate(-20deg); opacity: 0; } 70% { transform: scale(1.15) rotate(4deg); } 100% { transform: none; opacity: 1; } } .reward-lines { display: grid; gap: 1px; } .reward-lead { color: var(--on-navy-soft); font-size: var(--fs-small); } .reward-points { font-size: 30px; font-weight: 750; letter-spacing: -0.01em; color: #fff; line-height: 1.1; } .reward-what { font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--blue-pale); text-transform: uppercase; letter-spacing: .06em; } .reward-note { color: var(--on-navy-soft); font-size: var(--fs-small); } .hero-commission { font-size: var(--fs-small); color: var(--on-navy-soft); } .hero-commission b { color: #fff; font-weight: var(--fw-semibold); } .hero-incentive-note { color: var(--on-navy-soft); font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .05em; opacity: .8; } @media (max-width: 760px) { .hero-cols { flex-direction: column; gap: var(--sp-4); } .hero-incentive { border-left: 0; padding-left: 0; max-width: none; border-top: 1px solid var(--on-navy-border); padding-top: var(--sp-4); } } /* inline message (right above the plan cards) when Request bind / Download proposal is clicked before a payment plan is chosen — solid amber so it's impossible to miss. .is-info is the calmer navy-on-tint-blue note. */ .action-msg { margin: 0 0 var(--sp-4); padding: 13px 18px; border-radius: var(--r-card); font-weight: var(--fw-semibold); font-size: 15px; color: var(--ink); background: var(--amber); box-shadow: var(--shadow-card); } .action-msg:not(.is-info)::before { content: "\26A0"; margin-right: 9px; } .action-msg.is-info { color: var(--navy); background: var(--tint-blue); border-left: 4px solid var(--blue); font-size: var(--fs-body); } /* RULING 15b (2026-08-06): the bind-requested COMPLETION experience — a state that reads "done and in good hands" at a glance, clearly different from the quote page: green check disc, completion statement, the three-step journey strip, condensed facts, and the rewards energy band. Tokens only; green = success per the color discipline. */ .hero--done { display: flex; gap: var(--sp-5); align-items: flex-start; } .done-check { flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff; font-size: 34px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-card); } .done-body { flex: 1; min-width: 0; } .done-title { font-size: var(--fs-h1); font-weight: var(--fw-semibold); margin-top: 4px; } .done-sub { color: var(--on-navy-soft); margin-top: 8px; max-width: 62ch; } .done-sub b { color: var(--on-navy, #fff); } .done-steps { display: flex; gap: 0; list-style: none; padding: 0; margin: 18px 0 0; flex-wrap: wrap; } .done-steps li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--on-navy-soft); padding: 7px 14px; border: 1px solid var(--on-navy-border); background: var(--on-navy-pill); } .done-steps li:first-child { border-radius: var(--r-pill) 0 0 var(--r-pill); } .done-steps li:last-child { border-radius: 0 var(--r-pill) var(--r-pill) 0; } .done-steps li + li { border-left: 0; } .done-steps .ic { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 2px solid var(--on-navy-border); font-size: 10px; line-height: 12px; text-align: center; } .done-steps .is-done { color: var(--on-navy, #fff); } .done-steps .is-done .ic { background: var(--green); border-color: var(--green); color: #fff; } .done-steps .is-now { color: var(--on-navy, #fff); } .done-steps .is-now .ic { border-color: var(--amber); background: var(--amber); } .done-facts { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: 18px; } .done-fact .k { display: block; font-size: var(--fs-label); color: var(--on-navy-soft); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--fw-semibold); } .done-fact .v { display: block; font-size: 19px; font-weight: var(--fw-semibold); margin-top: 2px; font-variant-numeric: tabular-nums; } .done-yr { font-size: .6em; color: var(--on-navy-soft); } .done-reward { display: flex; gap: 14px; align-items: center; margin-top: 18px; background: var(--on-navy-pill); border: 1px solid var(--on-navy-border); border-radius: var(--r-card); padding: 14px 18px; max-width: 560px; } .done-reward-star { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--amber); color: var(--amber-ink); font-size: 20px; display: flex; align-items: center; justify-content: center; } .done-reward-lead { font-size: 17px; font-weight: var(--fw-semibold); } .done-reward-note { color: var(--on-navy-soft); font-size: var(--fs-small); margin-top: 2px; } @media (max-width: 640px) { .hero--done { flex-direction: column; gap: var(--sp-3); } .done-steps li { flex: 1 1 auto; justify-content: center; } } /* Rulings 15c + A2 (2026-08-06): the shared other-lines promotion — the obvious next step, one component, three registers (celebrate | pivot | review) so the surfaces that carry it never drift. D4 (owner defect 2026-08-06) added "review" for the referred screen: navy, the informational family — under review is neither a win nor a dead end, so it borrows neither the green nor the pivot blue. */ .olp { display: flex; align-items: center; gap: var(--sp-5); background: var(--card); border: 1px solid var(--border); border-left: 5px solid var(--green); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--sp-5) var(--sp-6); flex-wrap: wrap; } .olp--celebrate { border-left-color: var(--green); } .olp--pivot { border-left-color: var(--blue); } .olp--review { border-left-color: var(--navy); } .olp-body { flex: 1; min-width: 260px; } .olp-eyebrow { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .12em; font-weight: var(--fw-semibold); color: var(--green-ink); } .olp--pivot .olp-eyebrow { color: var(--blue); } .olp--review .olp-eyebrow { color: var(--navy); } .olp h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); margin-top: 4px; } .olp-lead { color: var(--ink-soft); margin-top: 6px; } .olp-lines { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: 12px; } .olp-line { display: inline-flex; align-items: baseline; gap: 7px; background: var(--tint-blue); color: var(--navy); border-radius: var(--r-pill); padding: 6px 14px; font-weight: 700; font-size: 15px; } .olp-line span { font-weight: var(--fw-regular, 400); font-size: var(--fs-small); color: var(--ink-soft); } .olp-acord { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-soft); } .olp-acord::before { content: "\2913"; margin-right: 7px; color: var(--blue); font-weight: 700; } .olp-cta { flex: none; } @media (max-width: 640px) { .olp-cta { width: 100%; text-align: center; } } /* THE BROKERAGE TRIGGER AND ECHO on the declined page (brokerage entry 1a, 2026-09-05). The pivot register's visual language - the eyebrow, the h2, the soft lead, the blue rule - in its own class family so the pivot's own rules are not touched and a switched-off page renders exactly as before. `.brk-actions .btn` takes the row on a phone, the `.olp-cta` rule's own breakpoint. */ .brk-card { padding: 20px 24px; border-left: 4px solid var(--blue); } .brk-eyebrow { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; color: var(--blue); } .brk-card h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); margin-top: 4px; } .brk-lead { color: var(--ink-soft); margin-top: 6px; } .brk-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .brk-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .brk-facts { color: var(--ink-soft); margin-top: 8px; } .brk-facts b { color: var(--ink); } @media (max-width: 640px) { .brk-actions .btn { width: 100%; text-align: center; } } /* THE ONE CARD (brokerage entry 1b, item 1, 2026-09-06): the decline in one line at the top of the card (and, after a send, on its own beneath the echo), and the second look as a QUIET tertiary - a text button in the link colour, no box, so it cannot outrank the two buttons above it. The field it opens is master's own .sl-row. */ .brk-decline { font-size: var(--fs-small); color: var(--ink-soft); margin: 0 0 12px; } .brk-decline-lead { color: var(--red-ink); font-weight: var(--fw-semibold); } .brk-decline-section { margin-top: 12px; } .brk-decline-section .brk-decline { margin: 0; padding: 0 4px; } .brk-tertiary { margin-top: 14px; } .brk-quiet { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-small); color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .brk-quiet:hover, .brk-quiet:focus-visible { color: var(--navy); } /* THE NO-MARKET TWIN'S INLINE LINK (item 8): brk-quiet's look, but it flows inside a sentence, so it keeps the paragraph's own size. */ .brk-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .brk-linkbtn:hover, .brk-linkbtn:focus-visible { color: var(--navy); } .brk-sl-form { margin-top: 10px; } /* THE ECHO'S FOUR BEATS (entry 1b, item 3): one row per line - code, chip, the sentence for now, the facts - each its own element with whitespace between (the spacing defect of 1a was two adjacent inline spans); then the two labelled beats. At 640 the row stacks. */ .brk-lines { list-style: none; margin: 10px 0 0; padding: 0; } .brk-line-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 0; border-top: 1px solid var(--line, #e6e8ec); } .brk-line-row:first-child { border-top: 0; padding-top: 4px; } .brk-line-code { font-size: var(--fs-label); font-weight: var(--fw-semibold); letter-spacing: .06em; color: var(--navy); min-width: 2.2em; } .brk-line-now { color: var(--ink); flex: 1 1 260px; } .brk-line-row .brk-facts { margin-top: 0; flex-basis: 100%; font-size: var(--fs-small); } .brk-beat { margin-top: 14px; } .brk-beat-label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); } .brk-beat-text { margin: 4px 0 0; color: var(--ink); } /* ADD A LINE AT SEND (entry 1b, item 4): the ticks in a row, each ticked line's panel beneath with the blue rule the card family uses, the questions two-up on a desk and one-up on a phone, the money field with its dollar sign, the excess underlying rows with their status word. */ .brk-add { margin-top: 16px; } .brk-ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; } .brk-tick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--ink); } .brk-tick input { width: 18px; height: 18px; margin: 0; } .brk-panel { margin-top: 12px; padding: 12px 0 4px 14px; border-left: 3px solid var(--tint-blue); } .brk-qs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; } .brk-q label { display: block; margin-bottom: 4px; } .brk-q .brk-sub { margin-top: 6px; } /* THE MONEY AND THE ASK ON A LINE ROW (brokerage entry 1c, 2026-09-07): the indication's softer variant, the firm-up action item, and the firm quote's total-cost block - each a block of its own below the line's facts, full width on the row. */ .brk-indication { flex-basis: 100%; margin-top: 4px; padding: 8px 12px; border-radius: 8px; background: var(--amber-tint, #fff6e5); color: var(--ink-soft); font-size: var(--fs-small); } .brk-indication b { color: var(--ink); } .brk-ask { flex-basis: 100%; margin-top: 8px; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--tint-blue, #dbe7f6); background: var(--tint-blue, #eef4fb); } .brk-ask-list { margin: 6px 0 0; padding-left: 20px; } .brk-ask-list li { margin: 2px 0; } .brk-ask-text { margin: 6px 0 0; color: var(--ink); } .brk-ask-how { color: var(--ink-soft); font-size: var(--fs-small); } .brk-quote { flex-basis: 100%; margin-top: 8px; padding: 12px 14px; border-radius: 8px; background: var(--tint-green, #e9f5ee); } .brk-quote-total { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .brk-quote-total b { font-size: var(--fs-h2); } .brk-quote-per { color: var(--ink-soft); font-size: var(--fs-small); } .brk-quote-lines { list-style: none; margin: 8px 0 0; padding: 0; } .brk-quote-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-top: 1px solid rgba(0,0,0,.06); font-size: var(--fs-small); } .brk-quote-meta { margin-top: 8px; color: var(--ink-soft); font-size: var(--fs-small); } .brk-subj li.is-done { text-decoration: line-through; color: var(--ink-soft); } /* THE PROPOSAL CARD (proposal engine v1, item 4, 2026-09-16): the link the agent hands their insured, on the quote block's own footing. */ .brk-proposal { flex-basis: 100%; margin-top: 10px; padding: 12px 14px; border-radius: 8px; background: var(--tint-blue, #cfe9f7); } .brk-proposal-url { display: block; width: 100%; margin-top: 8px; font: inherit; font-size: var(--fs-small); padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; background: #fff; color: var(--ink); } .brk-proposal-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .brk-money { display: flex; align-items: center; gap: 6px; } .brk-money span { color: var(--ink-soft); } .brk-money input { flex: 1 1 auto; } .brk-field-label { display: block; font-weight: var(--fw-semibold); margin-bottom: 6px; } .brk-limits { margin-top: 12px; } .brk-limits .brk-tick { margin-right: 18px; } .brk-limits .hint { display: block; margin-top: 6px; } .brk-under-list { margin-top: 12px; } .brk-under { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 0; } .brk-under-status { font-size: var(--fs-small); color: var(--ink-soft); } .brk-under-status[data-status="held"] { color: var(--green-ink); } .brk-under-status[data-status="pending"] { color: var(--navy); } @media (max-width: 640px) { .brk-qs { grid-template-columns: 1fr; } .brk-ticks { flex-direction: column; gap: 10px; } } /* ATTACHMENTS AT SEND (entry 1b, item 5): the picker row and the list of what is waiting to go with the click; an underlying line's own picker sits in its row when that line is placed elsewhere. */ .brk-attach { margin-top: 16px; } .brk-attach-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .brk-attach-row select { flex: 0 1 220px; } .brk-attach-list { list-style: none; margin: 8px 0 0; padding: 0; } .brk-attach-list li { padding: 4px 0; } .brk-attach-kind { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--neutral-tint); color: var(--neutral-ink); font-size: var(--fs-small); margin-right: 6px; } .brk-under-file { flex-basis: 100%; } /* THE ROW'S CHIPS (entry 1b, item 2; RE-CUT by the agent-side polish, items 6 and 9, rulings 137 and 140, 2026-09-22): one chip per line sent, EVERY chip prefixed with its line code (the WC's too), stacked vertically in a column - one line per chip, left-aligned - never wrapping side by side. */ .brk-row-stack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; vertical-align: top; } .brk-row-chip { margin-top: 0; white-space: nowrap; } /* ONE LINE'S CHIP IS ITS WORDS (ruling 174, 2026-09-23): "WC · quoted · Normandy" in the chip, and a firm quote past its date says so BESIDE it rather than inside, so the chip's words stay the inbox pill's */ .brk-row-line-wrap { display: inline-flex; align-items: center; gap: 6px; } .brk-row-expired { font-size: var(--fs-small); color: var(--ink-soft); white-space: nowrap; } /* THE SHOPPING STORY (agent-side brokerage polish, item 4, ruling 135, 2026-09-22). The echo read flat: one bordered card, a list of rows. It is the home of the story now - a head that names what is being shopped, ONE CARD PER LINE (the line's code as a navy pill, its name, the status chip; the sentence for now; the facts; then the money, the package, the underwriter's ask and the proposal as blocks of the card), the lead that says whether anything is wanted, and the two beats side by side. The ruled vocabulary is untouched - this is presentation. Three widths: the beats and the card head reflow at 640, buttons take the row on a phone. The card keeps `display:flex; flex-wrap:wrap` (the 1a spacing-defect pin) - a wrapping flex column is a card. */ .brk-story-card { border-left: 0; padding: 22px 24px 20px; background: linear-gradient(180deg, var(--card) 0, var(--card) 72px, var(--page, #f6f7f9) 72px, var(--page, #f6f7f9) 100%); } .brk-story-head { padding-bottom: 14px; } .brk-story-head h2 { margin-top: 4px; } .brk-story-sub { margin: 4px 0 0; color: var(--ink-soft); font-size: var(--fs-small); } /* one column that may shrink (standing rule 366: a line card came to 359px in a 309px list at 375 on the cloud's fonts, gate 37136165972) */ .brk-story .brk-lines { display: grid; gap: 12px; margin-top: 6px; grid-template-columns: minmax(0, 1fr); } .brk-line-card { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; padding: 14px 16px 14px; border: 1px solid var(--border); border-left: 4px solid var(--blue); border-radius: 12px; background: var(--card); box-shadow: var(--shadow-card); } .brk-line-card:first-child { border-top: 1px solid var(--border); padding-top: 14px; } .brk-line-card[data-status="firm_quote"], .brk-line-card[data-status="bind_requested"], .brk-line-card[data-status="bound"] { border-left-color: var(--green-ink); } .brk-line-card[data-status="indication"] { border-left-color: var(--amber-ink); } .brk-line-card[data-status="lost"], .brk-line-card[data-status="declined_by_markets"] { border-left-color: var(--border-strong, #c9ced6); } .brk-line-head { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .brk-line-card .brk-line-code { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--navy); color: #fff; min-width: 0; line-height: 1.4; } .brk-line-name { font-weight: var(--fw-semibold); color: var(--ink); } /* the card's chips STACK (ruling 140): the status chip, then the items-needed overlay beneath it, right-aligned on a desk */ .brk-line-chips { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .brk-items-needed { font-size: 11px; } /* the head's line pills (ruling 138): a grouping device, no status */ .brk-head-lines { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; } .brk-head-lines .brk-line-code { display: inline-block; padding: 2px 8px; border-radius: 6px; background: var(--navy); color: #fff; min-width: 0; line-height: 1.4; } .brk-line-card .brk-line-now { flex-basis: 100%; margin: 2px 0 0; } .brk-line-card .brk-facts { margin-top: 0; } .brk-line-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .brk-line-card .brk-quote, .brk-line-card .brk-ask, .brk-line-card .brk-indication, .brk-line-card .brk-proposal { margin-top: 10px; } .brk-line-card .brk-quote { background: var(--tint-green, #e9f5ee); border: 1px solid rgba(0,0,0,.05); } .brk-line-card .brk-quote-total b { font-size: 28px; line-height: 1.1; } .brk-package { flex-basis: 100%; margin-top: 10px; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); } /* the ACORD 125/126 downloads (ruling 232): a label wraps rather than widen the card at 375 */ .brk-acord .btn { white-space: normal; text-align: left; max-width: 100%; } .brk-lead--ask { color: var(--amber-ink, #a15c00); font-weight: var(--fw-semibold); } /* SEND A DOCUMENT (item 5, ruling 136): the zone on the story's soft ground, the ask beneath it, the sent list as line pill + kind + name. */ .brk-upload { margin-top: 14px; padding: 14px 16px; border-radius: 12px; border: 1px dashed var(--border-strong, #c9cedb); background: var(--card); } .brk-upload-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .brk-upload-caption { margin: 2px 0 10px; color: var(--ink); font-weight: var(--fw-semibold); } .brk-upload .dz-ask { margin-top: 10px; } .brk-sent-list { list-style: none; margin: 6px 0 0; padding: 0; } .brk-sent-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-top: 1px solid var(--border); font-size: var(--fs-small); } .brk-sent-list .brk-line-code { display: inline-block; padding: 1px 7px; border-radius: 6px; background: var(--navy); color: #fff; min-width: 0; } .brk-sent-name { color: var(--ink); } .brk-sent-date { color: var(--ink-soft); margin-left: auto; } .brk-beats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-top: 4px; } .brk-beats .brk-beat { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: var(--card); border: 1px solid var(--border); } @media (max-width: 640px) { .brk-beats { grid-template-columns: 1fr; gap: 0; } .brk-line-chips { margin-left: 0; align-items: flex-start; flex-basis: 100%; } .brk-line-acts .btn { width: 100%; text-align: center; } .brk-quote-acts .btn { width: 100%; text-align: center; } .brk-story-card { padding: 18px 16px 16px; } } /* RULING 7 (owner, 2026-08-06): the celebrate register — the bind confirmation's "Keep going" — is rebuilt as the NEXT STEP rather than a footer ad: take the completed application, drop it in, go. Two numbered steps in quiet navy discs (no colour blocks, no second CTA competing with the portal link, no exclamation marks: cool, not loud), and the ACORD 130 slot inside step one. The slot degrades GRACEFULLY until 4C ships the generator — the coming-soon state is not an at all, so there is no link to break; it reads as a shelf with the file's name already on it. Token-only. */ .olp--next .olp-steps { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: var(--sp-3); } .olp--next .olp-steps li { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); } .olp-step-n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--navy); color: var(--on-navy, #fff); font-size: var(--fs-label); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; } .olp-acord-slot { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 11px 14px; background: var(--page); border: 1px solid var(--border); border-radius: var(--r-ctl); flex-wrap: wrap; } .olp-acord-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tint-blue); color: var(--blue); font-weight: 700; } .olp-acord-text { flex: 1; min-width: 12rem; display: grid; } .olp-acord-text b { font-weight: var(--fw-semibold); color: var(--ink); } .olp-acord-text span { font-size: var(--fs-small); color: var(--ink-soft); } /* .olp-soon / .olp-acord-slot.is-soon REMOVED 2026-08-07 (batch 4C Part 3): they styled the ACORD slot's coming-soon pill and greyed icon. The download is live and that branch is gone from quote_result.html, so the rules had no selector left to match. */ /* Amendment A3 (2026-08-06): the referred hero's review band — the state reads in the hero itself: amber presence on navy, icon-dot + text (never color alone), the one-business-day expectation up front */ .hero-review-band { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; padding: 9px 16px; border-radius: var(--r-pill); background: var(--on-navy-pill); border: 1px solid var(--amber); color: var(--on-navy, #fff); font-size: var(--fs-small); font-weight: var(--fw-semibold); } .hero-review-band .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); flex: none; } /* ========================================================================= Referred: helping the underwriter (owner rulings 1/2/3/5, 2026-08-06) ------------------------------------------------------------------------- Ruling 2 — the note is SUBSTANTIALLY bigger. A single-line input said "a few words"; what actually moves a referral is a paragraph, so the control now looks like one and can be dragged taller. Ruling 5 — "Send to underwriter" is the primary action of its card, not a white secondary indistinguishable from "Back to dashboard". Ruling 3 — the loss-runs encouragement leaves .callout-note, which is this app's "this is optional / doesn't affect the premium" pill and is therefore exactly what an agent has learned to skim. It becomes a warm amber field in the REFERRAL family (not the informational blue), badge- anchored, headline-first, with the upload control inside it so the encouragement and the doing are one object. Token-only; no new colour. ========================================================================= */ .rn-note { width: 100%; min-height: 7.5rem; resize: vertical; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-ctl); padding: 11px 13px; line-height: var(--lh-body); } .rn-note:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--blue); } .rn-actions { display: flex; align-items: flex-end; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); } .rn-target { max-width: 12rem; } /* .btn-lg retired with the 2026-08-07 re-flow (owner ruling 2): "Send to underwriter" stepped back to the regular green primary, and nothing else used the size. */ @media (max-width: 640px) { .rn-actions { display: grid; } .rn-target { max-width: none; } .rn-actions .btn { width: 100%; } } /* THE LOSS-RUNS PANEL FAMILY IS RETIRED (owner ruling 5, 2026-08-20). `.speedup` styled the loss-runs encouragement and its own upload door on the referred page. That page now carries ONE combined upload zone, shared with the bind page and living inside the forms panel, so this family had no users left. IT IS DELETED RATHER THAN LEFT, which is the opposite of what was done with the retired otherLinesPromo registers - deliberately. Those registers are still PINNED BY TESTS for their copy, so leaving them byte-identical keeps a live subject readable. Nothing pins these rules, so leaving them would only tell the next editor that a `.speedup` panel still renders somewhere. What ruling 3 protected is unchanged and is pinned in test_referred_experience_r1_r2_r3_r5: the encouragement is not a callout-note an agent has learned to skim, and the door sits where the agent is being asked for things. */ /* referral panel inside the amber-status hero geometry */ .refer-panel { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--amber); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: var(--sp-5) var(--sp-6); } .refer-panel h2 { font-size: var(--fs-h2); } /* ruling 9 (batch three, 2026-08-05): the referred state reads immediately — prominent but sleek: the lead panel warms to the amber tint and the ruled sentence renders at full body ink, not the soft grey */ .refer-panel--lead { background: linear-gradient(180deg, var(--amber-tint), var(--card) 55%); border-left-width: 5px; } .refer-panel--lead h2 { display: flex; align-items: center; gap: 8px; } .refer-lead-body { color: var(--ink); margin: 6px 0 0; font-size: var(--fs-body); line-height: var(--lh-body); max-width: 72ch; } /* rulings 4/5 (2026-08-05): the commission % line sits under the binding-review sentence in the hero */ .hero-main .hero-commission { margin-top: 4px; } /* Batch-three ruling 14 (2026-08-05): dashboard return recognition — the row the agent just worked greets them back: a soft navy-tint highlight fading over ~2s plus a "just now" chip. CSS-driven (one animation, no polling); the chip carries the signal for reduced-motion users — never color alone. D5 (owner ruling 2026-08-06): the signal FADES AND VANISHES. The chip used to stay wedged between the insured name and the id until the next reload, breaking the column's alignment down the list; it now fades out and is removed, leaving the row exactly as it was. The signal is decoration only — it never changes the board's sort order. */ @keyframes rowReturn { from { background: var(--tint-blue); } to { background: transparent; } } .row-return td { animation: rowReturn 2s ease-out 1; } .chip-justnow { display: inline-block; margin-left: 8px; font-size: var(--fs-label); font-weight: var(--fw-semibold); color: var(--navy); background: var(--tint-blue); border-radius: var(--r-pill); padding: 2px 9px; white-space: nowrap; } @keyframes chipGoing { from { opacity: 1; } to { opacity: 0; } } .chip-justnow.is-going { animation: chipGoing .4s ease-out forwards; } @media (prefers-reduced-motion: reduce) { .row-return td { animation: none; } /* no fade to watch — the script's fallback timer removes the chip */ .chip-justnow.is-going { animation: none; opacity: 0; } } /* item 4 (2026-08-26): the agent board's mail icon - beside an account name whose thread holds a message the agent has not read. Renders from the same GET /messages/unread the nav badge reads. MADE NOTICEABLE (owner walkthrough 2026-08-27), AND THE ESTABLISH FOUND A SECOND DEFECT UNDERNEATH THE FIRST. The rule below used to say `color: var(--navy)` and the icon RENDERED GREY - measured in the pane at rgb(138,137,141). `.board .insured > span` (0,2,1) out-specifies a bare `.row-mail` (0,1,0) and was setting both the colour and a 12.5px size, so the navy this rule declared never reached the screen. The icon was the same grey as the submission number under it, which is why it read as decoration rather than as mail. Scoping the rule inside the cell (0,3,0) is what makes it win, and it would win even if the icon moved back outside the . THE COLOUR IS `--amber-ink`, AND THE OWNER HAS CONFIRMED IT (2026-08-30). The theme's colour discipline reserves red for Declined, green for money and Quoted, blue for selection and links - so attention without danger is the amber family. Raw `--amber` (#f7b623) is 1.9:1 on white and fails the 3:1 floor for a graphic that carries meaning, which this one does: it has a title and an aria-label. `--amber-ink` (#805c00) is 7.4:1 and is the same token the Referred badge already speaks in. THE CONFIRMATION WAS TAKEN FROM PAINTED PIXELS RATHER THAN FROM THIS RULE, and that matters for the next person who wants to change the token. `✉` is a codepoint, and a host that renders it in EMOJI PRESENTATION paints a colour picture while ignoring `color` entirely - so a declaration is not evidence of what an agent sees. The glyph was screenshotted at 4x and sampled: ink rgb(128,92,0) on white, a solid two-tone envelope, at 1280, 768 and 375. At READ there is no glyph at all - absent, not dimmed, which is this board's vocabulary and not the Desk's (that one has a quiet state). The harness is `phase2/measure_polish4_20260830.py --board --shots`. `display: inline-block` is not decoration: the row's hover underlines the name, and an inline-block child does not take an ancestor's text-decoration line - so the glyph stays clean while the name underlines. */ .board .insured .row-mail { color: var(--amber-ink); margin-left: 7px; font-size: 17px; line-height: 1; display: inline-block; vertical-align: -1px; text-decoration: none; } /* item 4B (2026-08-26): the unread-messages summary pill above the board. Since the agent inbox entry (2026-09-23) it OPENS THE INBOX rather than toggling the unread filter, so its pressed state retired with the toggle. */ .msg-summary { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--navy); background: var(--tint-blue); border: 1px solid var(--blue); border-radius: var(--r-pill); padding: 7px 16px; cursor: pointer; margin-bottom: var(--sp-3); } .msg-summary:hover { border-color: var(--navy); } .refer-reasons { margin: var(--sp-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); } .refer-reasons li { display: flex; gap: 10px; align-items: baseline; color: var(--ink-soft); } .refer-reasons .rule { flex: none; font-size: var(--fs-label); letter-spacing: var(--ls-label); font-weight: var(--fw-semibold); color: var(--amber-ink); background: var(--amber-tint); border-radius: var(--r-pill); padding: 3px 10px; text-transform: uppercase; } /* THE CONTACT-CONFIRMATION CARD'S THREE FIELDS (item 6, owner walkthrough 2026-08-30, from his screenshot) — "Does everything look correct?". WHAT WAS WRONG, AND IT IS A CONSEQUENCE OF WHERE THE STYLES LIVED. All three fields were written INLINE in the renderer, and only two of them shared a spelling: the name and the phone were 11.5px uppercase labels over 600-weight text, and the email was the same label over a browser-default input in a fainter box than the platform's own field treatment — `--border` rather than `--border-strong`, an 8px radius nothing else on the screen uses, and no weight or colour of its own. Standing beside its two siblings it read as a different species. SO THE THREE SHARE ONE STYLE AND THE STYLE MOVED OUT OF THE MARKUP — which is the only version of "make them match" that stays matched: one label rule, one value rule, and the email taking the value rule INSIDE its box. THE BASELINES ARE MATCHED ON PURPOSE. `align-items: flex-end` lines the three boxes up at the bottom, and an input with 10px of padding and a 1px border sits its text 11px above that edge while bare text sits on it. The two static values take the same 11px, so the three read as one line rather than as two things and a control. IT STAYS AN INPUT (ruled): the whole point of the field is that an agent can add the address here without leaving the page. */ .bc-fields { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: flex-end; } .bc-f-lab { display: block; font-size: var(--fs-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--gray); } .bc-f-val { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); padding: 11px 0; } .bc-f-email { flex: 1; min-width: 220px; } /* AND `font: inherit` IS NOT ENOUGH, WHICH THE BROWSER WALK CAUGHT AND READING DID NOT. The shorthand resets every font longhand, and `input.bc-f-input` (0,1,1) out-ranks `.bc-f-val` (0,1,0) - so the value rule's weight never reached the box and the email rendered at 400 beside two siblings at 600. Measured on the served page: value 'Dana Reyes' 14px/600 value '' (the input) 14px/400 which is the EXACT defect this item is about, still there after the fix that was supposed to close it. The three text properties are restated on the winning rule rather than left to a shorthand. */ input.bc-f-input { width: 100%; font-family: inherit; font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--ink); padding: 10px 14px; background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-ctl); } input.bc-f-input:focus { outline: 3px solid var(--focus-ring); outline-offset: 0; border-color: var(--blue); } /* THE MISSING-EMAIL NOTICE (item 6b). It was `--gray` at 13px — the quietest thing on the card, for the one fact on it that asks for something. The owner named the treatment: the amber "!" the forms rows use for "somebody is waiting on this". IT IS THE SAME COMPONENT, NOT A SECOND AMBER. The glyph is `.ap-doc-ico.is-need`, unchanged, so the two surfaces cannot drift into two attention colours — and a scale override lives here rather than in that rule, because the forms rows' 34px ring beside one line of text would be a badge rather than a marker. THE COPY STAYS IN ITS CURRENT HELPFUL REGISTER (ruled): the request can still go, binding will need the address, adding it now saves a step. A marker makes it findable; it does not make it a refusal — so the block takes the amber TINT and keeps the platform's reading ink rather than turning the sentence amber too. */ .bc-notice { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--sp-3); padding: 10px 14px; font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink); background: var(--amber-tint); border: 1px solid var(--amber); border-radius: var(--r-ctl); } /* THE DISC HAS TO OUT-RANK `.is-need`, AND THE FIRST CUT DID NOT - also found by the walk rather than by reading. `.bc-notice .ap-doc-ico` (0,2,0) ties `.ap-doc-ico.is-need` (0,2,0) and loses on order, because this rule sits earlier in the file, so the amber disc stayed amber on an amber block: measured `glyphBg rgb(253,243,216)` against a block background of the same value. The SIZE won (the base rule is only (0,1,0)), which is what made it look deliberate. Three classes state the intent where it can actually take effect. THE COLOUR STILL BELONGS TO THE SHARED RULE: this changes the disc the glyph sits on, not the amber it is drawn in. */ .bc-notice .ap-doc-ico { width: 22px; height: 22px; font-size: 13px; } .bc-notice .ap-doc-ico.is-need { background: var(--card); } /* THE FOLDED THREAD'S SUMMARY ROW (item 2, owner design 2026-08-30) — the one line that stands where the message block stood on the quoted page, so the payment plans are not pushed down by an exchange the agent has already had. TWO STATES, AND NEITHER IS COLOUR ALONE. Unread wears the amber attention family — the same `--amber-ink` on `--amber-tint` the board's mail icon and the forms rows' "somebody is waiting for this" glyph already speak in — and the row's own words say "unread". Read is quiet: the platform's neutral tint and soft ink, a row that reports a fact rather than asking for anything. A reader who sees no colour reads the same two sentences. IT IS A BUTTON, so the keyboard reaches it and `aria-expanded` says what it does, and it is full width because the thing it replaced was. `text-align: left` and the inherited font are there because a bare `