@import url("/ds/styles.css"); /* ============================================================================= Fleming Life Group — agent console ============================================================================= The console runs LIGHT. `data-theme="light"` sits on in every console page, and navy is a block colour applied per section with `data-theme="dark"` — the rail and the page-header band, together roughly a third of page height. Never put navy on the page ground. Order matters and is deliberate: 1 Base ground, shared atoms, icons 2 Shell rail (both states), account popup, scrim, page header, view-as bar, phone tab bar. Owned entirely by shell.js. 3 Call console /dashboard/ 4 Licensing /dashboard/licensing/ 5 Settings, stub /dashboard/settings/, /dashboard/admin/ 6 Auth /login/, /reset/ 7 Form controls the custom select chevron. LAST of the non-responsive sections on purpose: several component rules set their own padding at equal specificity, so this has to come after them to keep text clear of the chevron. 8 Responsive every media query, widest breakpoint first A media query adds NO specificity. Anything in section 8 only wins because it comes last, so put responsive overrides there and nowhere else. ========================================================================== */ /* ============================================================================= 1. BASE ========================================================================== */ html,body{ min-height:100% } /* The console is a working surface, not a reading page: it fills a wide screen rather than stopping at the 1240px prose measure (--measure-page) and leaving a third of the monitor empty. The onboarding hub keeps the reading width. */ :root{ --measure-console:1720px } /* --surface-raised is the paper-200 ground the cards sit on. --surface-page is white, which is reserved for the cards themselves. */ body{ background:var(--surface-raised); color:var(--text-body) } /* ---- Icons ---------------------------------------------------------------- Lucide v0.460.0, vendored in /icons/. A span masked by the real SVG with currentColor behind it, matching the design system's Icon.jsx: authentic geometry, colour follows text. Never a Unicode glyph standing in for one. */ .ic{ display:block; flex:none; width:18px; height:18px; background:currentColor; -webkit-mask:var(--ic) center / contain no-repeat; mask:var(--ic) center / contain no-repeat } .ic-phone-call{ --ic:url("/icons/phone-call.svg") } .ic-users { --ic:url("/icons/users.svg") } .ic-file-text { --ic:url("/icons/file-text.svg") } .ic-list-checks{ --ic:url("/icons/list-checks.svg") } .ic-building{ --ic:url("/icons/building.svg") } .ic-house{ --ic:url("/icons/house.svg") } .ic-settings { --ic:url("/icons/settings.svg") } .ic-power { --ic:url("/icons/power.svg") } .ic-plus { --ic:url("/icons/plus.svg") } .ic-phone { --ic:url("/icons/phone.svg") } .ic-message-square{ --ic:url("/icons/message-square.svg") } .ic-mail { --ic:url("/icons/mail.svg") } .ic-user-plus { --ic:url("/icons/user-plus.svg") } .ic-arrow-left{ --ic:url("/icons/arrow-left.svg") } .ic-arrow-right{ --ic:url("/icons/arrow-right.svg") } .ic-sliders-horizontal{ --ic:url("/icons/sliders-horizontal.svg") } .ic-flag { --ic:url("/icons/flag.svg") } .ic-map-pin { --ic:url("/icons/map-pin.svg") } .ic-layers { --ic:url("/icons/layers.svg") } .ic-user { --ic:url("/icons/user.svg") } /* Every file in /icons/ needs a line here, and the list had drifted: zap.svg and check.svg shipped with no mapping. The failure is loud but misleading - with --ic unset the mask resolves to nothing, so `background:currentColor` fills the whole 18x18 box and the icon renders as a SOLID SQUARE. That is what the Sales rail item was (Truman, 2026-09-14), and nothing in the build catches it because there is no build. Adding an icon file? Add it here too. */ .ic-zap { --ic:url("/icons/zap.svg") } .ic-check { --ic:url("/icons/check.svg") } .ic-calendar { --ic:url("/icons/calendar.svg") } .ic-link { --ic:url("/icons/link.svg") } .ic-pencil { --ic:url("/icons/pencil.svg") } .ic-x { --ic:url("/icons/x.svg") } .ic-eye { --ic:url("/icons/eye.svg") } .ic-eye-off { --ic:url("/icons/eye-off.svg") } .ic-chevron-right{ --ic:url("/icons/chevron-right.svg") } .chev{ --ic:url("/icons/chevron-down.svg"); width:16px; height:16px; transition:transform var(--dur-fast) var(--ease-standard) } /* FLG monogram. The wordmark's initials on flash red, per the brand marks. The wordmark is the mark; this square is only the collapsed and small-space stand-in for it. */ .flg-square{ display:inline-grid; place-items:center; width:42px; height:42px; background:var(--flash-500); flex:none } .flg-square span{ font-family:var(--font-display); font-size:15px; line-height:1; letter-spacing:-.01em; color:#fff; text-transform:uppercase } .sector{ height:2px; width:48px; background:var(--flash-500) } .eyebrow{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted) } .msg{ margin-top:var(--space-5); font-size:var(--body-sm); display:none } .msg.on{ display:block } .msg.ok{ color:var(--text-positive) } .msg.bad{ color:var(--text-alert) } .hint{ font-size:var(--body-xs); color:var(--text-muted); margin-top:var(--space-2) } .empty{ font-size:var(--body-sm); color:var(--text-muted); padding:var(--space-6) 0 } /* Cards. One shape for the whole console: white, hairline, 2px radius. */ .card{ background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-sm); box-shadow:var(--shadow-card) } /* Buttons. Exactly one flash button per view; everything else is secondary. */ .btn{ display:inline-flex; align-items:center; gap:var(--space-3); font-family:var(--font-sans); font-weight:600; font-size:var(--body-md); border:1px solid var(--line-rule); border-radius:var(--radius-xs); background:var(--surface-card); color:var(--text-heading); padding:12px 20px; cursor:pointer; transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard) } .btn:hover{ border-color:var(--flash-500); background:var(--surface-accent-soft) } .btn:active{ transform:scale(var(--press-scale)) } .btn[disabled]{ opacity:.45; cursor:not-allowed } .btn.primary{ background:var(--flash-500); border-color:var(--flash-500); color:#fff } .btn.primary:hover{ background:var(--flash-600); border-color:var(--flash-600) } .btn.sm{ padding:10px 16px; font-size:var(--body-sm) } /* The class's display rule would otherwise outrank the hidden attribute. */ .btn[hidden]{ display:none } /* Inputs. 16px everywhere, not just on phones: iOS Safari zooms the viewport when a focused control is under 16px, and the console is used mid-call. */ .fld{ width:100%; font-family:var(--font-sans); font-size:var(--body-lg); color:var(--text-heading); background:var(--surface-raised); border:1px solid var(--line-rule); border-radius:var(--radius-xs); padding:12px 13px } .fld:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px } .lbl{ display:block; font-size:var(--body-xs); font-weight:600; color:var(--text-heading); margin:0 0 var(--space-2) } .badge{ display:inline-block; font-family:var(--font-sans); font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; padding:4px 9px; border-radius:var(--radius-pill); white-space:nowrap } .badge.ok{ background:var(--jade-100); color:var(--text-positive) } .badge.wait{ background:var(--amber-100); color:var(--text-caution) } .badge.res{ background:var(--surface-accent-soft); color:var(--text-alert) } /* Section heading: sector rule, Archivo Black title, muted sub. */ .sec-rule{ height:2px; width:48px; background:var(--flash-500); margin-bottom:var(--space-4) } .sec-h2{ font-family:var(--font-display); font-size:18px; line-height:1; letter-spacing:-.01em; text-transform:uppercase; color:var(--text-display); margin:0 } .sec-sub{ font-size:var(--body-sm); color:var(--text-muted); margin:var(--space-3) 0 var(--space-5) } /* ============================================================================= 2. CONSOLE SHELL ============================================================================= Rendered by shell.js, which wraps the page's own #shell element. Pages ship content only — no rail, no header — so a change here lands on all four at once. --rail-w is the single source of truth for the rail width; the account popup and the collapsed state both read it. ========================================================================== */ .app{ position:relative; display:flex; align-items:stretch; min-height:100vh; --rail-w:236px } .app[data-rail="0"]{ --rail-w:76px } .main{ flex:1; display:flex; flex-direction:column; min-width:0 } /* Dismiss scrim. Transparent and scoped to the app, so it can catch a click anywhere without dimming the page. It must sit BELOW the rail (z-index 60) or the popup — a child of the rail — renders behind its own backdrop. */ .scrim{ position:absolute; inset:0; z-index:55; background:transparent } .scrim[hidden]{ display:none } /* ---- Rail ---------------------------------------------------------------- */ .rail{ width:var(--rail-w); flex:none; box-sizing:border-box; background:var(--surface-page); position:sticky; top:0; height:100vh; z-index:60; display:flex; flex-direction:column; gap:var(--space-7); padding:var(--space-6) var(--space-5); transition:width var(--dur-base) var(--ease-standard) } .rail[data-open="0"]{ align-items:center; gap:var(--space-6); padding:var(--space-5) 0 } .rail-spacer{ flex:1 } .rail-top{ display:flex; align-items:flex-start; gap:var(--space-4) } .wordmark{ flex:1; min-width:0; text-decoration:none; display:block } .wordmark .wm-n{ display:block; font-family:var(--font-display); font-size:21px; line-height:.86; letter-spacing:-.015em; text-transform:uppercase; color:#fff } .wordmark .wm-g{ display:block; font-weight:700; font-size:9px; letter-spacing:.32em; text-transform:uppercase; color:var(--mid-300); margin-top:5px } .rail-toggle{ flex:none; width:26px; height:26px; display:grid; place-items:center; background:transparent; border:1px solid var(--line-rule); border-radius:var(--radius-xs); cursor:pointer; color:var(--mid-300); font-size:11px; font-family:var(--font-sans); transition:border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard) } .rail-toggle:hover{ border-color:var(--mid-500); color:#fff } /* Collapsed: the FLG square IS the expand button. */ .rail-mark{ display:none; width:42px; height:42px; flex:none; padding:0; border:0; background:var(--flash-500); cursor:pointer; place-items:center } .rail-mark span{ font-family:var(--font-display); font-size:14px; line-height:1; letter-spacing:-.01em; color:#fff; text-transform:uppercase } .rail[data-open="0"] .rail-top{ display:contents } .rail[data-open="0"] .wordmark, .rail[data-open="0"] .rail-toggle{ display:none } .rail[data-open="0"] .rail-mark{ display:grid } /* Nav rows are full-bleed: negative side margins so the active fill and the 3px marker reach the rail edges rather than floating inside the padding. */ .rail-nav{ display:flex; flex-direction:column; gap:2px; margin:0 calc(var(--space-5) * -1) } .rail-item{ position:relative; display:flex; align-items:center; gap:var(--space-4); width:100%; box-sizing:border-box; padding:12px var(--space-5); background:transparent; border:0; cursor:pointer; text-decoration:none; font-family:var(--font-sans); transition:background var(--dur-fast) var(--ease-standard) } .rail-item .mark{ position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent } .rail-item .ic{ color:var(--mid-300) } .rail-item .lb{ flex:1; text-align:left; font-size:var(--body-md); font-weight:500; color:var(--mid-200) } /* Phone tab bars get 78px a column, which "Call console" does not fit into, so each item carries a short label too. Only one is ever shown. */ .rail-item .lb-tab{ display:none } .rail-item:hover{ background:var(--mid-900) } .rail-item[aria-current="page"]{ background:var(--mid-800) } .rail-item[aria-current="page"] .mark{ background:var(--flash-500) } .rail-item[aria-current="page"] .ic{ color:var(--flash-400) } .rail-item[aria-current="page"] .lb{ color:#fff; font-weight:600 } /* Count badge — licences needing action. Hidden until there is something. */ .rail-item .cnt{ flex:none; min-width:20px; box-sizing:border-box; padding:2px 6px; border-radius:var(--radius-pill); background:var(--flash-500); color:#fff; font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:10px; font-weight:700; line-height:14px; text-align:center } .rail-item .cnt:empty{ display:none } .rail[data-open="0"] .rail-nav{ align-self:stretch; margin:0 } .rail[data-open="0"] .rail-item{ justify-content:center; padding:14px 0 } .rail[data-open="0"] .rail-item .ic{ width:20px; height:20px } .rail[data-open="0"] .rail-item .lb, .rail[data-open="0"] .rail-item .lb-tab{ display:none } .rail[data-open="0"] .rail-item .cnt{ position:absolute; top:8px; right:14px; min-width:16px; padding:1px 4px; font-size:9px; line-height:13px } /* ---- Identity chip and account popup ------------------------------------- */ .me{ position:relative } .me-btn{ display:flex; flex-direction:column; align-items:flex-start; width:100%; box-sizing:border-box; padding:var(--space-5) 0 0; background:transparent; border:0; border-top:1px solid var(--line-rule); cursor:pointer; text-align:left; font-family:var(--font-sans) } .me-row{ display:flex; align-items:center; gap:var(--space-4); width:100% } /* The account chip. A , not an : it holds the agent's INITIALS and only becomes a photo once their headshot has loaded, so an agent with no headshot gets their own initials rather than somebody else's face. */ .me-av{ display:inline-grid; place-items:center; width:36px; height:36px; flex:none; border-radius:var(--radius-pill); background:var(--mid-600) center/cover no-repeat; color:var(--paper-100); font-family:var(--font-sans); font-weight:700; font-size:13px; letter-spacing:.01em; line-height:1; user-select:none } .me-av[data-photo="1"]{ color:transparent } .me-av-lg{ width:42px; height:42px; font-size:15px } .me-who{ flex:1; min-width:0 } .me-who .nm{ display:block; font-size:var(--body-sm); font-weight:600; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .me-who .rl{ display:block; font-weight:700; font-size:9px; letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--flash-400); margin-top:4px } .me-row2{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); width:100%; margin-top:var(--space-4) } .me-row2 .np{ font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:var(--body-xs); color:var(--mid-300) } .me-row2 .mn{ font-weight:600; font-size:var(--body-xs); color:var(--mid-300) } .me-tab-lb{ display:none } /* Collapsed rail: just the avatar, ringed, flash when the popup is open. */ .rail[data-open="0"] .me-btn{ padding:0; border-top:0; width:44px; height:44px; border-radius:var(--radius-pill); overflow:hidden; box-shadow:0 0 0 2px var(--mid-600); transition:box-shadow var(--dur-fast) var(--ease-standard) } .rail[data-open="0"] .me-btn[aria-expanded="true"], .rail[data-open="0"] .me-btn:hover{ box-shadow:0 0 0 2px var(--flash-500) } .rail[data-open="0"] .me-av{ width:44px; height:44px } .rail[data-open="0"] .me-who, .rail[data-open="0"] .me-row2{ display:none } /* The popup is a LIGHT card even against the navy rail — it belongs to the page, not to the rail. */ .me-menu{ position:absolute; left:calc(100% + 14px); bottom:-6px; z-index:70; width:284px; background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-md); box-shadow:var(--shadow-overlay); overflow:hidden } .me-menu[hidden]{ display:none } .me-sheet-head{ display:none } /* grab handle, phone sheet only */ .me-id{ display:flex; align-items:flex-start; gap:var(--space-4); padding:var(--space-6); background:var(--surface-raised); border-bottom:1px solid var(--line-hairline) } .me-id .wrap2{ min-width:0; flex:1 } .me-id .nm{ font-size:var(--body-md); font-weight:600; color:var(--text-display); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .me-id .np{ font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:var(--body-xs); color:var(--text-muted); margin-top:4px } .me-id .rl{ flex:none; font-weight:700; font-size:9px; letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-alert); margin-top:3px } /* Rows carry no boxed icon chips — that was the specific thing that read as antiquated. Icon, label, and a 3px marker when the row is the current page. */ .me-items{ display:flex; flex-direction:column; padding:var(--space-3) 0 } .me-items a,.me-items button{ position:relative; display:flex; align-items:center; gap:var(--space-4); width:100%; box-sizing:border-box; background:transparent; border:0; cursor:pointer; text-decoration:none; padding:13px var(--space-6); font-family:var(--font-sans); font-size:var(--body-md); font-weight:500; color:var(--text-display); transition:background var(--dur-fast) var(--ease-standard) } .me-items .mark{ position:absolute; left:0; top:0; bottom:0; width:3px; background:transparent } .me-items .ic{ width:17px; height:17px; color:var(--paper-500) } .me-items span.lb{ flex:1; text-align:left } .me-items a:hover,.me-items button:hover{ background:var(--surface-raised) } .me-items a[aria-current="page"]{ background:var(--surface-accent-soft); font-weight:600 } .me-items a[aria-current="page"] .mark{ background:var(--flash-500) } .me-items a[aria-current="page"] .ic{ color:var(--flash-500) } .me-items .signout{ color:var(--text-alert) } .me-items .signout .ic{ color:currentColor } .me-items .signout:hover{ background:var(--surface-accent-soft) } /* ---- Page header: the second navy block --------------------------------- */ .page-head{ background:var(--surface-page); padding:var(--space-7) var(--space-8) } .page-head-in{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-7); flex-wrap:wrap; max-width:var(--measure-console) } .page-head .ph-l{ min-width:0 } .page-head .sector{ margin-bottom:var(--space-5) } .page-head .eyebrow{ color:var(--mid-300); margin:0 0 var(--space-4) } .page-head h1{ font-family:var(--font-display); font-size:clamp(28px,3vw,40px); line-height:.9; letter-spacing:-.015em; text-transform:uppercase; color:#fff; margin:0 } /* Mobile-only alternate title. Pages write a live value into it — the call console puts the open stage there, because on a phone the header IS the stepper and the page title has to give way. */ .page-head .ph-alt{ display:none } .page-head .ph-wm{ display:none } .ph-r{ display:flex; align-items:center; gap:var(--space-6); flex-wrap:wrap } .ph-r .pair{ display:inline-flex; align-items:baseline; gap:var(--space-3) } .ph-r .pair > span{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--mid-300) } .ph-r .pair > b{ font-family:var(--font-data); font-variant-numeric:tabular-nums; letter-spacing:var(--data-tracking); font-weight:600; font-size:var(--body-md); color:#fff } .ph-r .dot{ width:7px; height:7px; border-radius:var(--radius-pill); background:var(--flash-500); align-self:center } /* ---- Admin "view as" bar ------------------------------------------------- */ .viewbar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); background:var(--surface-accent-soft); border-bottom:2px solid var(--flash-500); padding:var(--space-4) var(--space-8); font-size:var(--body-sm); color:var(--text-body) } .viewbar[hidden]{ display:none } .viewbar b{ color:var(--text-display) } .viewbar .tag{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-alert) } .viewbar button{ margin-left:auto; background:var(--flash-500); border:0; color:#fff; border-radius:var(--radius-xs); padding:8px 14px; cursor:pointer; font-family:var(--font-sans); font-weight:600; font-size:var(--body-sm) } .viewbar button:hover{ background:var(--flash-600) } /* ---- Page body wrapper --------------------------------------------------- */ /* The console is a working surface, not a reading page: it fills the screen up to --measure-console rather than stopping at the 1240px prose measure and leaving a third of a wide monitor empty on the right. */ .page{ padding:var(--space-7) var(--space-8) var(--space-9); max-width:var(--measure-console) } .page.narrow{ max-width:var(--measure-narrow); display:grid; gap:var(--space-5) } /* ---- Boot splash --------------------------------------------------------- */ /* Console entry only, never on navigation between pages. Unmounts at 1.4s. */ .boot{ position:fixed; inset:0; z-index:500; background:var(--surface-page); display:grid; place-items:center; text-align:center; animation:flgOut 1.4s var(--ease-standard) forwards } .boot .flg-square{ width:52px; height:52px; animation:flgRise .28s var(--ease-standard) both } .boot .flg-square span{ font-size:17px } .boot .wm{ margin-top:var(--space-6); font-family:var(--font-display); font-size:12px; line-height:1; letter-spacing:.3em; text-transform:uppercase; color:var(--mid-300); animation:flgRise .28s var(--ease-standard) .1s both } .boot .track{ width:180px; height:2px; margin:var(--space-6) auto 0; background:var(--mid-800); overflow:hidden } .boot .track i{ display:block; height:100%; background:var(--flash-500); transform-origin:left center; animation:flgWipe 1s var(--ease-standard) .12s both } .boot .foot{ margin-top:var(--space-5); font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:var(--body-xs); letter-spacing:var(--data-tracking); color:var(--mid-400); animation:flgRise .28s var(--ease-standard) .2s both } @keyframes flgRise{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:none } } @keyframes flgWipe{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } } @keyframes flgOut{ 0%,72%{ opacity:1 } 100%{ opacity:0; visibility:hidden } } @keyframes flgShimmer{ from{ background-position:120% 0 } to{ background-position:-120% 0 } } @keyframes flgBar{ from{ transform:translateX(-100%) } to{ transform:translateX(250%) } } /* ---- Error state --------------------------------------------------------- */ .errbox{ border-left:3px solid var(--flash-500); padding:var(--space-7) } .errbox h2{ margin:0; font-size:var(--body-lg); font-weight:600; color:var(--text-display) } .errbox p{ margin:var(--space-3) 0 var(--space-5); font-size:var(--body-sm); color:var(--text-muted) } /* ---- Loading skeleton ---------------------------------------------------- */ .skel-head{ display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-6) } .skel-track{ flex:1; max-width:200px; height:2px; background:var(--paper-300); overflow:hidden } .skel-track i{ display:block; width:40%; height:100%; background:var(--flash-500); animation:flgBar 1.1s var(--ease-standard) infinite } .skel{ border-radius:var(--radius-xs); background-size:280% 100%; background-image:linear-gradient(90deg,var(--paper-200) 0%,var(--paper-300) 35%,var(--paper-200) 70%); animation:flgShimmer 1.4s var(--ease-standard) infinite } .skel-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-4); margin-bottom:var(--space-7) } .skel-tiles .card{ padding:var(--space-6) } .skel-row{ display:flex; align-items:center; gap:var(--space-7); padding:var(--space-5) var(--space-6); border-bottom:1px solid var(--line-hairline) } .skel-row:last-child{ border-bottom:0 } /* ============================================================================= 3. CALL CONSOLE — /dashboard/ ========================================================================== */ /* A wrapping flex row, not a fixed grid: `minmax(0,1fr) 380px` crushed the script column at mid widths, which is the column you actually read from. */ .call{ display:flex; flex-wrap:wrap; gap:var(--space-7); align-items:flex-start } .call-script{ flex:1 1 520px; min-width:0 } /* The rail is sticky, so it never scrolls with the page: open two panels and everything past the fold was unreachable — no scrollbar, nothing to drag (Truman, 2026-09-15). A sticky column has to carry its own height and its own scroll. The panels also start SHUT for the same reason: the rail is a reference you reach for, not six things open at once. */ .tools{ position:sticky; top:var(--space-5); flex:1 1 320px; max-width:360px; min-width:0; display:grid; gap:var(--space-4); align-content:start; max-height:calc(100vh - var(--space-5) * 2); overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable } /* One line, not a bordered callout. It repeated on every screen and ate the vertical space the script needs. */ .pii{ display:flex; align-items:baseline; gap:var(--space-3); margin:0 0 var(--space-5); font-size:var(--body-sm); color:var(--text-muted) } .pii::before{ content:""; flex:none; width:5px; height:5px; border-radius:var(--radius-pill); background:var(--flash-500); transform:translateY(-2px) } .pii strong{ color:var(--text-alert); font-weight:600 } /* ---- Stepper: the whole call at a glance, click to jump ------------------- Eight fixed columns so it never wraps 6+2, and sticky so you keep your place on a long script. It bleeds to the page gutters — negative margins matching the .page padding — so no card edge shows through while scrolling under it. */ .stepper{ display:flex; align-items:stretch; gap:var(--space-5); position:sticky; top:0; z-index:30; background:var(--surface-raised); padding:var(--space-4) var(--space-7) var(--space-4) var(--space-8); margin:calc(var(--space-4) * -1) calc(var(--space-7) * -1) var(--space-5) calc(var(--space-8) * -1) } .stepper-steps{ flex:1; min-width:0; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:var(--space-3) } .step{ min-width:0; background:transparent; border:0; cursor:pointer; text-align:left; padding:var(--space-4) var(--space-2) var(--space-4) 0; font-family:var(--font-sans); border-top:3px solid var(--paper-400); color:var(--text-muted); transition:color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard) } .step:hover{ color:var(--text-heading); border-top-color:var(--paper-500) } .step .sn{ display:block; font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:var(--data-sm); letter-spacing:var(--data-tracking) } .step .st{ display:block; margin-top:4px; font-size:var(--body-xs); font-weight:600; line-height:1.25 } .step[aria-current="true"]{ border-top-color:var(--flash-500); color:var(--text-display) } .step[data-done="1"]{ border-top-color:var(--jade-500); color:var(--text-body) } /* ---- Stage cards --------------------------------------------------------- */ .stage{ background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-sm); box-shadow:var(--shadow-raise); margin-bottom:var(--space-3); overflow:hidden; transition:border-color var(--dur-fast) var(--ease-standard) } .stage:hover{ border-color:var(--paper-500) } /* overflow:visible on the OPEN stage only: the base rule's overflow:hidden exists to keep .stage-head's square corners from showing past the card's own border-radius, which costs nothing visually here since both share the same white ground. Left as hidden it also crops the conditions picker's suggestion list (.cond-list, position:absolute under the search box) — capped at max-height:300px but still only ~40px short of the stage's own bottom edge with the current note+linkouts content beneath it, so it was one shorter line of copy away from getting cut off (measured at 375px). */ .stage[data-open="1"]{ box-shadow:var(--shadow-card); margin-bottom:var(--space-5); overflow:visible } .stage-head{ display:flex; align-items:center; gap:var(--space-5); width:100%; background:transparent; border:0; cursor:pointer; padding:var(--space-5) var(--space-6); text-align:left; color:inherit; font-family:var(--font-sans) } .stage-head .num{ flex:none; width:48px; font-family:var(--font-statement); font-variant-numeric:tabular-nums; font-size:30px; line-height:.82; color:var(--paper-500) } .stage-head .tt{ flex:1; min-width:0 } .stage-head h2{ margin:0; font-family:var(--font-display); font-size:17px; line-height:1; letter-spacing:-.01em; text-transform:uppercase; color:var(--text-display) } .stage-head .why{ margin:5px 0 0; font-size:var(--body-sm); color:var(--text-muted) } .stage-head .chev{ flex:none; color:var(--text-muted) } /* Only the open stage gets the accent. A page of flash numbers is noise. */ .stage[data-open="1"] .stage-head{ padding:var(--space-6); border-bottom:1px solid var(--line-hairline) } .stage[data-open="1"] .stage-head .num{ font-size:34px; color:var(--flash-500) } .stage[data-open="1"] .stage-head h2{ font-size:18px } .stage[data-open="1"] .stage-head .chev{ transform:rotate(180deg) } /* Accordion: one stage open at a time. Without this the bodies all stack. */ .stage:not([data-open="1"]) .stage-body{ display:none } .stage-body{ padding:var(--space-7) var(--space-7) var(--space-6) } .stage-body > :first-child{ margin-top:0 } .stage-foot{ display:flex; justify-content:flex-end; align-items:center; gap:var(--space-4); margin-top:var(--space-7); padding-top:var(--space-5); border-top:1px solid var(--line-hairline) } .stage-foot .done{ margin-right:auto; font-size:var(--body-xs); color:var(--text-muted) } /* ---- "Say this": the words that come out of your mouth -------------------- 19px because it is read aloud, under pressure, off a screen you are not looking straight at. */ .say{ border-left:3px solid var(--flash-500); background:var(--surface-raised); padding:var(--space-6) var(--space-7); margin:0 0 var(--space-6); border-radius:var(--radius-xs) } .say p{ margin:0; font-size:19px; line-height:1.5; color:var(--text-display); text-wrap:pretty } .say p + p{ margin-top:var(--space-4) } .say .beat{ display:inline-block; font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-accent); margin-top:var(--space-5) } .warn{ border-left:3px solid var(--amber-600); background:var(--amber-100); padding:var(--space-5) var(--space-6); border-radius:var(--radius-xs); margin:var(--space-5) 0; font-size:var(--body-sm); color:var(--text-body) } .warn strong{ color:var(--text-caution) } /* ---- Branch tables ------------------------------------------------------- */ table.branch{ width:100%; border-collapse:collapse; font-size:var(--body-md) } table.branch th{ text-align:left; font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted); padding:0 var(--space-5) var(--space-4) 0; border-bottom:2px solid var(--flash-500) } table.branch th:last-child{ padding-right:0 } table.branch td{ padding:var(--space-5) var(--space-5) var(--space-5) 0; vertical-align:top; border-bottom:1px solid var(--line-hairline); color:var(--text-body); line-height:1.55 } table.branch td:last-child{ padding-right:0 } table.branch td:first-child{ color:var(--text-display); font-weight:600; width:30% } /* ---- The numbered script steps (rebuilt 2026-09-14) ---------------------- A stage body is an ordered list of steps: the line you say, the field(s) that line fills, then the one note that belongs to it. There is no second checklist underneath repeating the same thing — the form IS the script. Numbering restarts inside every stage; the stage's own 01–08 stays in the header. A CSS counter rather than typed digits, so inserting a step can never leave the numbers disagreeing with the order. On a phone this is one column, one step after another, by construction. */ ol.steps{ list-style:none; margin:0; padding:0; counter-reset:stp } .stp{ counter-increment:stp; position:relative; padding:var(--space-6) 0 var(--space-6) 44px; border-top:1px solid var(--line-hairline) } .stp:first-child{ border-top:0; padding-top:var(--space-2) } .stp:last-child{ padding-bottom:0 } .stp::before{ content:counter(stp); position:absolute; left:0; top:var(--space-6); width:32px; text-align:right; font-family:var(--font-statement); font-variant-numeric:tabular-nums; font-size:18px; line-height:1.1; letter-spacing:-.01em; color:var(--paper-500) } .stp:first-child::before{ top:var(--space-2) } .stp > :first-child{ margin-top:0 } .stp > :last-child{ margin-bottom:0 } .stp .say{ margin-bottom:var(--space-5) } .stp .intake{ margin-bottom:var(--space-4) } .stp .warn{ margin-bottom:0 } /* The one note that belongs to this step: the draft-date rule, the bank-or-credit-union line, the payee/POA line. Folded in, not collected into a list at the bottom of the stage. */ .stp-note{ margin:var(--space-3) 0 0; font-size:var(--body-sm); line-height:1.5; color:var(--text-muted) } .stp-note b{ color:var(--text-heading); font-weight:600 } .stp-h{ margin:0 0 var(--space-4); font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted) } /* No call live: one banner at the top of the stage body, and the fields below it plainly disabled. Not an overlay floating halfway down the section. */ .nocall{ display:flex; align-items:center; gap:var(--space-3); margin:0 0 var(--space-5); padding:var(--space-4) var(--space-5); border-left:3px solid var(--flash-500); background:var(--surface-accent-soft); border-radius:var(--radius-xs); font-size:var(--body-sm); color:var(--text-alert) } .call-script[data-live="1"] .nocall{ display:none } /* ---- Tool panels --------------------------------------------------------- */ .tool{ background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-sm); box-shadow:var(--shadow-raise); transition:border-color var(--dur-fast) var(--ease-standard) } .tool:hover{ border-color:var(--paper-500) } .tool > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5) var(--space-6) } .tool > summary::-webkit-details-marker{ display:none } .tool[open]{ box-shadow:var(--shadow-card) } .tool[open] > summary{ border-bottom:1px solid var(--line-hairline) } .tool summary h3{ flex:1; min-width:0; margin:0 } /* The answer stays visible after you collapse the panel. */ .tool .tool-val{ font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:var(--body-sm); font-weight:600; color:var(--text-alert); white-space:nowrap } .tool .tool-val:empty{ display:none } .tool .chev{ flex:none; color:var(--text-muted) } .tool[open] .chev{ transform:rotate(180deg) } .tool-body{ padding:var(--space-6) } .tool summary h3{ margin:0 0 var(--space-2); font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted) } .tool-body .lede{ margin:0 0 var(--space-5); font-size:var(--body-sm); color:var(--text-muted); line-height:1.5 } .tool-body label{ display:block; font-size:var(--body-xs); font-weight:600; color:var(--text-heading); margin:0 0 var(--space-2) } .tool-body input,.tool-body select{ width:100%; font-family:var(--font-sans); font-size:var(--body-lg); color:var(--text-heading); background:var(--surface-raised); border:1px solid var(--line-rule); border-radius:var(--radius-xs); padding:11px 12px } .tool-body .row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3) } .tool-body .fldwrap + .fldwrap{ margin-top:var(--space-4) } .tool-body .out:first-child{ margin-top:0; padding-top:0; border-top:0 } .out{ margin-top:var(--space-6); padding-top:var(--space-5); border-top:1px solid var(--line-hairline) } .out .big{ font-family:var(--font-statement); font-variant-numeric:tabular-nums; font-size:32px; line-height:.9; letter-spacing:-.02em; color:var(--text-display) } .out .big.flash{ color:var(--flash-500) } .out .cap{ font-size:var(--body-sm); color:var(--text-muted); margin:var(--space-3) 0 0; line-height:1.5 } .out .cap b{ color:var(--text-heading) } .pills{ display:flex; gap:var(--space-2); margin-bottom:var(--space-4) } .pill{ flex:1; background:var(--surface-raised); border:1px solid var(--line-rule); color:var(--text-muted); border-radius:var(--radius-xs); padding:9px 6px; font-family:var(--font-sans); font-weight:600; font-size:var(--body-xs); cursor:pointer } .pill[aria-pressed="true"]{ background:var(--flash-500); border-color:var(--flash-500); color:#fff } /* ---- Quote ladder -------------------------------------------------------- Three editable amounts, a premium typed from the rater beside each, and the cost per $1,000 with a fits/over read against the affordability ceiling. No rate table lives here, so no premium is ever filled in for the agent. */ .lad-ceil{ margin:0 0 var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid var(--line-hairline) } .lad-ceil b{ display:block; font-family:var(--font-statement); font-variant-numeric:tabular-nums; font-size:20px; line-height:1; letter-spacing:-.02em; color:var(--flash-500) } .lad-ceil .cap{ display:block; margin-top:var(--space-2); font-size:var(--body-xs); color:var(--text-muted); line-height:1.45 } .ladder{ width:100%; border-collapse:collapse; font-size:var(--body-sm); table-layout:fixed } .ladder th{ text-align:left; font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted); padding:0 var(--space-2) var(--space-3) 0; border-bottom:2px solid var(--flash-500) } .ladder th:first-child{ width:22px } .ladder th:last-child{ text-align:right; padding-right:0; width:78px; white-space:normal } /* The column heading is "#" on screen and "Option" to a screen reader: at the panel's 320px there is no room for the word, and the row already reads as a numbered option. */ .ladder .vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap } .ladder td{ padding:var(--space-3) var(--space-2) var(--space-3) 0; border-bottom:1px solid var(--line-hairline); vertical-align:middle } .ladder td:last-child{ padding-right:0 } .ladder tr[data-fit] td{ border-bottom-color:var(--line-rule) } .ladder .lr-n{ font-family:var(--font-statement); font-variant-numeric:tabular-nums; font-size:15px; color:var(--paper-500) } .ladder .fld{ width:100%; font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:var(--body-sm); padding:8px 9px; background:var(--surface-raised); border:1px solid var(--line-rule); border-radius:var(--radius-xs); color:var(--text-display) } .ladder .lr-k{ text-align:right; font-family:var(--font-data); font-variant-numeric:tabular-nums; color:var(--text-display); font-weight:600; white-space:nowrap } .lr-fit{ display:block; font-style:normal; font-family:var(--font-sans); font-weight:700; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; margin-top:3px } tr[data-fit="fits"] .lr-fit{ color:var(--text-positive) } tr[data-fit="over"] .lr-fit{ color:var(--text-caution) } tr[data-fit="fits"] .lr-prem{ border-color:var(--jade-500) } tr[data-fit="over"] .lr-prem{ border-color:var(--amber-600) } .lad-acts{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-4) } .mono{ font-family:var(--font-data); font-size:var(--body-xs); letter-spacing:var(--data-tracking) } .ko{ display:flex; flex-wrap:wrap; gap:var(--space-2) } .ko button{ background:var(--surface-raised); border:1px solid var(--line-rule); color:var(--text-body); border-radius:var(--radius-xs); padding:9px 11px; font-family:var(--font-sans); font-size:var(--body-xs); font-weight:600; cursor:pointer; text-align:left } .ko button[aria-pressed="true"]{ background:var(--flash-500); border-color:var(--flash-500); color:#fff } .verdict{ margin-top:var(--space-5); padding:var(--space-5); border-radius:var(--radius-xs); border-left:3px solid var(--jade-500); background:var(--surface-jade-soft); font-size:var(--body-sm); color:var(--text-positive) } .verdict[data-ko="1"]{ border-left-color:var(--flash-500); background:var(--surface-accent-soft); color:var(--text-alert) } /* Objections. Scoped to the body's OWN class, not to the .tool around it: the panel is itself a
with its own , so `.obj summary` would restyle the header, and the body moves out of .obj into the phone sheet. */ .obj-body details{ border-bottom:1px solid var(--line-hairline) } .obj-body summary{ cursor:pointer; list-style:none; padding:var(--space-4) 0; font-size:var(--body-sm); font-weight:600; color:var(--text-heading) } .obj-body summary::-webkit-details-marker{ display:none } .obj-body summary:hover{ color:var(--text-accent) } .obj-body details[open] summary{ color:var(--text-accent) } .obj-body p{ margin:0 0 var(--space-4); font-size:var(--body-sm); color:var(--text-body) } /* ---- Phone-only: tool chips and bottom sheets ---------------------------- */ /* Rendered by call.js and hidden above 760px. See section 8. */ .toolbar-phone{ display:none } .sheet{ display:none } .sheet-scrim{ display:none } /* ============================================================================= 4. LICENSING — /dashboard/licensing/ ========================================================================== */ /* ---- Summary tiles ------------------------------------------------------- */ .lic-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:var(--space-4); margin-bottom:var(--space-7) } .lic-stat{ padding:var(--space-6); display:flex; flex-direction:column } .lic-stat .k{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted); margin:0 } /* margin-bottom:auto pushes the caption to the foot of every tile. */ .lic-stat .v{ font-family:var(--font-statement); font-variant-numeric:tabular-nums; font-size:clamp(32px,4vw,44px); line-height:.92; letter-spacing:-.02em; color:var(--text-display); margin:var(--space-4) 0 auto; white-space:nowrap } /* Long values — a date, the NPN — step down rather than wrapping. */ .lic-stat .v.long{ font-size:clamp(20px,3vw,28px) } .lic-stat .v.flash{ color:var(--flash-500) } .lic-stat .s{ font-size:var(--body-xs); color:var(--text-muted); margin:var(--space-4) 0 0; line-height:1.45 } /* ---- Toolbar ------------------------------------------------------------- */ .lic-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-bottom:var(--space-6) } .lic-bar .grow{ flex:1 } .lic-bar .lbl-short{ display:none } /* short labels are phone-only */ /* ---- October renewal cluster --------------------------------------------- */ /* Real, recurring, and previously invisible: the register keys most renewals to the owner's birth month, so they land together. */ .renew{ border-left:3px solid var(--amber-600); padding:var(--space-6) var(--space-7); margin-bottom:var(--space-8) } .renew-head{ display:flex; align-items:baseline; gap:var(--space-5); flex-wrap:wrap } .renew-head p{ flex:1; min-width:220px; margin:0; font-size:var(--body-sm); color:var(--text-muted) } .renew-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:var(--space-5); margin-top:var(--space-6) } .renew-col{ border-top:2px solid var(--paper-400); padding-top:var(--space-4) } .renew-col .top{ display:flex; align-items:baseline; gap:var(--space-4) } .renew-col .n{ font-family:var(--font-statement); font-variant-numeric:tabular-nums; font-size:26px; line-height:1; letter-spacing:-.02em; color:var(--text-display) } .renew-col .n.soon{ color:var(--flash-500) } .renew-col .d{ font-family:var(--font-data); font-variant-numeric:tabular-nums; letter-spacing:var(--data-tracking); font-size:var(--body-sm); font-weight:600; color:var(--text-heading) } .renew-col .ss{ margin:var(--space-3) 0 0; font-family:var(--font-data); font-size:var(--body-xs); letter-spacing:var(--data-tracking); color:var(--text-muted); line-height:1.5 } /* ---- Collapsible sections ------------------------------------------------ */ .lic-section{ margin-bottom:var(--space-8) } .lic-section:last-child{ margin-bottom:0 } .sec-toggle{ display:flex; align-items:center; gap:var(--space-4); width:100%; background:transparent; border:0; padding:0; cursor:pointer; text-align:left; font-family:var(--font-sans) } .sec-toggle .n{ font-family:var(--font-statement); font-variant-numeric:tabular-nums; font-size:18px; line-height:1; color:var(--paper-500) } .sec-toggle .grow{ flex:1 } .sec-toggle .chev{ flex:none; color:var(--text-muted) } .sec-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg) } .sec-toggle .pillbadge{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; padding:4px 9px; border-radius:var(--radius-pill); background:var(--surface-accent-soft); color:var(--text-alert) } .lic-section[data-open="0"] .lic-scroll{ display:none } /* ---- Register table ------------------------------------------------------ */ .lic-scroll{ background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-sm); box-shadow:var(--shadow-card); overflow-x:auto } .lic-table{ width:100%; min-width:760px; border-collapse:collapse; font-size:var(--body-sm) } .lic-table th{ text-align:left; font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted); padding:var(--space-5) var(--space-6) var(--space-5) 0; background:var(--surface-raised); border-bottom:1px solid var(--line-rule); white-space:nowrap } .lic-table td{ padding:var(--space-5) var(--space-6) var(--space-5) 0; vertical-align:middle; border-bottom:1px solid var(--line-hairline); color:var(--text-body); white-space:nowrap } .lic-table tr:last-child td{ border-bottom:0 } .lic-table tr:hover td{ background:var(--surface-raised) } .lic-table td.st{ font-family:var(--font-statement); font-variant-numeric:tabular-nums; font-size:17px; color:var(--text-display); width:1% } .lic-table td.num{ font-family:var(--font-data); font-variant-numeric:tabular-nums; letter-spacing:var(--data-tracking); color:var(--text-heading) } .lic-table td.pick,.lic-table th.pick{ width:1%; padding-left:var(--space-6); padding-right:var(--space-4) } .lic-table input[type=checkbox]{ width:16px; height:16px; accent-color:var(--flash-500); cursor:pointer } /* Rows where the blocker is on you, not the state. */ .lic-table tr[data-action="1"] td{ background:var(--surface-accent-soft) } .lic-table tr[data-action="1"] td.pick{ box-shadow:inset 3px 0 0 var(--flash-500) } .lic-table tr[data-sel="1"] td{ background:var(--surface-accent-soft) } .lic-note{ display:block; font-size:var(--body-sm); color:var(--text-muted); white-space:normal } .lic-note.act{ color:var(--text-alert) } .lic-note + .lic-note{ margin-top:4px } /* Cell contents are wrapped so multi-part cells stack inside the phone card. */ .cv{ display:inline } /* ---- Selection bar, shown only while rows are ticked --------------------- */ .selbar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); background:var(--surface-accent-soft); border-left:3px solid var(--flash-500); border-radius:var(--radius-xs); padding:var(--space-4) var(--space-5); margin-bottom:var(--space-5) } .selbar[hidden]{ display:none } .selbar .n{ font-weight:600; font-size:var(--body-sm); color:var(--text-display); margin-right:var(--space-3) } .selbar button{ background:var(--surface-card); border:1px solid var(--line-rule); color:var(--text-heading); border-radius:var(--radius-xs); padding:8px 12px; cursor:pointer; font-family:var(--font-sans); font-weight:600; font-size:var(--body-sm) } .selbar button:hover{ border-color:var(--flash-500) } /* ---- Add licence / log CE drawers ---------------------------------------- */ .drawer{ background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-sm); box-shadow:var(--shadow-card); padding:var(--space-7); margin-bottom:var(--space-7) } .drawer[hidden]{ display:none } .drawer h2{ font-family:var(--font-display); font-size:16px; line-height:1; letter-spacing:-.01em; text-transform:uppercase; color:var(--text-display); margin:0 0 var(--space-5) } .drawer .fields{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--space-5) } .drawer label{ display:block; font-size:var(--body-xs); font-weight:600; color:var(--text-heading); margin-bottom:var(--space-2) } .drawer input,.drawer select{ width:100%; font-family:var(--font-sans); font-size:var(--body-lg); color:var(--text-heading); background:var(--surface-raised); border:1px solid var(--line-rule); border-radius:var(--radius-xs); padding:11px 12px } .drawer .acts{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); align-items:center } .drawer .acts .msg{ margin-top:0 } /* ---- Continuing education ------------------------------------------------ */ .ce-card{ overflow:hidden } .ce-sum{ display:flex; flex-wrap:wrap; gap:var(--space-8); padding:var(--space-6) var(--space-7); background:var(--surface-raised); border-bottom:1px solid var(--line-rule) } .ce-sum .k{ display:block; font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted) } .ce-sum .v{ display:block; font-family:var(--font-statement); font-variant-numeric:tabular-nums; font-size:26px; line-height:1; color:var(--text-display); margin-top:var(--space-3) } .ce-sum .v.long{ font-size:20px; line-height:1.3 } .ce-empty{ padding:var(--space-8) var(--space-7); display:flex; gap:var(--space-7); align-items:center; flex-wrap:wrap } /* A designed nothing: the livery plate says "zero" in the system's own voice rather than leaving a paragraph of grey text on its own. */ .ce-plate{ flex:none; display:grid; place-items:center; width:88px; height:88px; border:1px dashed var(--line-rule); border-top:2px solid var(--flash-500); background:var(--surface-raised); font-family:var(--font-statement); font-variant-numeric:tabular-nums; font-size:34px; line-height:1; letter-spacing:-.02em; color:var(--paper-500) } .ce-empty .txt{ flex:1; min-width:240px } .ce-empty .txt p:first-child{ margin:0; font-size:var(--body-lg); font-weight:600; color:var(--text-display) } .ce-empty .txt p + p{ margin:var(--space-3) 0 0; font-size:var(--body-sm); color:var(--text-muted); line-height:1.55; max-width:var(--body-measure) } .ce-table-wrap{ overflow-x:auto } /* ---- Admin agent switcher, hung off the NPN in the header ---------------- */ .ph-r .switch{ position:relative; display:inline-flex; align-items:center } button.npn{ background:transparent; border:0; padding:2px 0; cursor:pointer; font-family:var(--font-data); font-variant-numeric:tabular-nums; letter-spacing:var(--data-tracking); font-weight:600; font-size:var(--body-md); color:#fff; border-bottom:1px dashed var(--mid-500) } button.npn:hover{ color:var(--flash-400); border-bottom-color:var(--flash-500) } button.npn .car{ font-size:10px; margin-left:6px; color:var(--mid-300) } .switch-menu{ position:absolute; top:calc(100% + 10px); left:0; z-index:70; min-width:250px; background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-md); box-shadow:var(--shadow-overlay); padding:var(--space-3) } .switch-menu[hidden]{ display:none } .switch-menu .hd{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted); padding:var(--space-3) var(--space-4) } .switch-menu button{ display:flex; align-items:baseline; gap:var(--space-3); width:100%; background:transparent; border:0; text-align:left; cursor:pointer; padding:10px var(--space-4); border-radius:var(--radius-xs); font-family:var(--font-sans); font-size:var(--body-md); color:var(--text-body) } .switch-menu button:hover{ background:var(--surface-raised); color:var(--text-display) } .switch-menu button[aria-current="true"]{ color:var(--text-display); font-weight:600 } .switch-menu button[aria-current="true"]::after{ content:"\2022"; color:var(--flash-500); margin-left:auto } .switch-menu .r{ font-size:var(--body-xs); color:var(--text-muted) } /* ============================================================================= 5. SETTINGS AND STUBS ========================================================================== */ .set-card{ padding:var(--space-7) } .set-card.action{ border-left:3px solid var(--flash-500) } .set-card .eyebrow{ display:block; color:var(--text-alert) } .set-card h2{ margin:var(--space-4) 0 0; font-family:var(--font-display); font-size:18px; line-height:1; letter-spacing:-.01em; text-transform:uppercase; color:var(--text-display) } .set-card > p{ margin:var(--space-4) 0 var(--space-6); font-size:var(--body-md); color:var(--text-body); line-height:1.6; max-width:var(--body-measure) } .set-card form{ display:grid; gap:var(--space-4); max-width:360px } .set-card form button{ justify-self:start; margin-top:var(--space-2) } .id-card{ overflow:hidden } .id-head{ display:flex; align-items:center; gap:var(--space-5); padding:var(--space-6) var(--space-7); background:var(--surface-raised); border-bottom:1px solid var(--line-rule) } .id-head img{ width:46px; height:46px; flex:none; border-radius:var(--radius-pill); object-fit:cover; transform:scale(1.14) } .id-head .wrap2{ flex:1; min-width:0 } .id-head .nm{ font-size:var(--body-lg); font-weight:600; color:var(--text-display) } .id-head .em{ font-size:var(--body-sm); color:var(--text-muted); margin-top:3px; overflow-wrap:anywhere } .id-head .rl{ flex:none; font-weight:700; font-size:9px; letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-alert) } .id-row{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-6); padding:var(--space-5) var(--space-7); border-bottom:1px solid var(--line-hairline) } .id-row .k{ font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted) } .id-row .v{ font-family:var(--font-data); font-variant-numeric:tabular-nums; letter-spacing:var(--data-tracking); font-size:var(--body-md); color:var(--text-heading); text-align:right } .id-foot{ margin:0; padding:var(--space-5) var(--space-7); font-size:var(--body-sm); color:var(--text-muted); line-height:1.55 } .stub{ padding:var(--space-8) } .stub h2{ margin:0; font-family:var(--font-display); font-size:20px; line-height:1; letter-spacing:-.01em; text-transform:uppercase; color:var(--text-display) } .stub p{ margin:var(--space-5) 0 0; color:var(--text-body); font-size:var(--body-lg); line-height:1.6; max-width:var(--body-measure) } .stub p.foot{ color:var(--text-muted); font-size:var(--body-sm) } /* ============================================================================= 6. AUTH — /login/, /reset/ ========================================================================== */ .auth{ min-height:100vh; display:grid; place-items:center; padding:var(--space-9) var(--space-5); background:var(--surface-raised) } .auth-card{ width:100%; max-width:430px } .auth-head{ display:flex; align-items:center; gap:var(--space-4); margin-bottom:var(--space-7) } .auth-head .n{ display:block; font-family:var(--font-display); font-size:20px; line-height:.86; letter-spacing:-.015em; text-transform:uppercase; color:var(--text-display) } .auth-head .g{ display:block; font-weight:700; font-size:9px; letter-spacing:.34em; text-transform:uppercase; color:var(--text-muted); margin-top:3px } .auth-panel{ background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-sm); box-shadow:var(--shadow-card); padding:var(--space-8) } .auth-panel .sector{ margin-bottom:var(--space-5) } .auth-panel h1{ font-family:var(--font-display); font-size:28px; line-height:.9; letter-spacing:-.015em; text-transform:uppercase; color:var(--text-display); margin:0 0 var(--space-4) } .auth-panel .sub{ font-size:var(--body-md); color:var(--text-muted); margin:0 0 var(--space-7) } .auth-panel label{ display:block; font-weight:600; font-size:var(--body-sm); color:var(--text-heading); margin-bottom:var(--space-2) } .auth-panel .f{ margin-bottom:var(--space-5) } .auth-panel input{ width:100%; font-family:var(--font-sans); font-size:var(--body-lg); color:var(--text-heading); background:var(--surface-raised); border:1px solid var(--line-rule); border-radius:var(--radius-xs); padding:13px 14px } .auth-panel input:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:2px } .auth-btn{ display:flex; width:100%; align-items:center; justify-content:center; font-family:var(--font-sans); font-weight:600; font-size:var(--body-lg); line-height:1.1; padding:15px 20px; border:0; border-radius:var(--radius-xs); cursor:pointer; background:var(--flash-500); color:#fff; transition:background var(--dur-fast) var(--ease-standard) } .auth-btn:hover{ background:var(--flash-600) } .auth-btn:active{ transform:scale(var(--press-scale)) } .auth-btn[disabled]{ opacity:.4; cursor:not-allowed } .auth-alt{ margin-top:var(--space-6); text-align:center; font-size:var(--body-sm) } .auth-alt a{ text-decoration:none } .auth-alt a:hover{ color:var(--text-display) } .auth-foot{ margin-top:var(--space-6); text-align:center; font-size:var(--body-xs); color:var(--text-muted) } /* ---- Show password (2026-09-15) ------------------------------------------- Built by /pw-eye.js over markup that already worked: the input keeps its id, name and autocomplete so password managers see no change, and all this adds is a wrapper and a sibling button. `.pw-input` carries the extra class the script sets, which is what lets the right-hand padding beat the page's own input rule without an !important. The icon is masked here rather than through the .ic system, so the same twelve lines drop into any stylesheet on the site unchanged. */ .pw-wrap{ position:relative; display:block } .pw-wrap > input.pw-input{ padding-right:46px } .pw-eye{ position:absolute; top:0; right:0; width:44px; height:100%; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0; background:transparent; cursor:pointer; color:var(--text-muted); transition:color var(--dur-fast) var(--ease-standard) } .pw-eye:hover{ color:var(--text-heading) } .pw-eye:focus-visible{ outline:2px solid var(--focus-ring); outline-offset:-3px } .pw-eye[aria-pressed="true"]{ color:var(--flash-500) } .pw-eye i{ --pw-ic:url("/icons/eye.svg"); display:block; width:19px; height:19px; background:currentColor; -webkit-mask:var(--pw-ic) center / contain no-repeat; mask:var(--pw-ic) center / contain no-repeat } .pw-eye[aria-pressed="true"] i{ --pw-ic:url("/icons/eye-off.svg") } /* ============================================================================= 7. FORM CONTROLS ============================================================================= Must stay after sections 3-6: several component rules set their own padding at equal specificity, so the chevron's padding-right only survives by coming later. Move this up and text runs under the arrow. ========================================================================== */ .tsel, .drawer select, .tool-body select, .auth-panel select, .set-card select{ appearance:none; -webkit-appearance:none; background-repeat:no-repeat; background-position:right 12px center; background-size:16px 16px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6B7E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); padding-right:38px } select.tsel{ background-color:var(--surface-card); border:1px solid var(--line-rule); color:var(--text-heading); border-radius:var(--radius-xs); padding:11px 38px 11px 14px; font-family:var(--font-sans); font-weight:600; font-size:var(--body-sm); width:auto } select.tsel:hover{ border-color:var(--flash-500) } select::-ms-expand{ display:none } /* ============================================================================= 8. RESPONSIVE ============================================================================= Every media query lives here, widest breakpoint first. A media query adds no specificity, so these rules win purely by coming last in the file. ========================================================================== */ /* ---- 1120px: the tools rail drops below the script ---------------------- */ /* ---- Credentials tab strip ------------------------------------------- Scoped to .cred-tabs on purpose. The bare .onb-tab is shared with the onboarding, admin and contacts pages, so restyling it would reach three screens this change has no business touching. Two problems being fixed (Truman, 2026-09-13): .onb-tabs carries no bottom margin, so the strip sat flush against the stat cards with no air at all; and two separately-bordered boxes of unequal width never read as one control - they read as two loose buttons that happen to be near each other. So: one segmented track, both halves the same width, the active half filled navy. Navy as a block is the brand rule and it makes the state unmistakable at a glance, which a border-colour change did not. */ .onb-tabs.cred-tabs{ display:inline-flex; gap:0; margin:0 0 var(--space-6); padding:3px; background:var(--surface-sunken); border:1px solid var(--line-rule); border-radius:var(--radius-sm) } .cred-tabs .onb-tab{ flex:1 1 0; min-width:112px; text-align:center; background:transparent; border:0; border-radius:var(--radius-xs); padding:8px 18px; color:var(--text-muted); font-weight:600 } .cred-tabs .onb-tab:hover{ background:var(--surface-card); border:0; color:var(--text-heading) } .cred-tabs .onb-tab.on{ background:var(--mid-900); border:0; color:var(--text-inverse) } /* Keyboard users get a real ring; the fill alone is a mouse affordance. */ .cred-tabs .onb-tab:focus-visible{ outline:2px solid var(--flash-500); outline-offset:1px } /* The carrier panel brings onboarding.css with it, whose .onb-wrap owns page padding of its own. Inside Credentials the .page wrapper already supplies it, so cancel the second helping rather than let the panel sit indented relative to the licence panel beside it. */ #cred-car.onb-wrap{ padding:0; margin:0 } @media (max-width:1120px){ /* Below the split the rail is just more page, so it scrolls with the page and must not keep a height or a scroller of its own. */ .tools{ position:static; flex:1 1 100%; max-width:none; max-height:none; overflow:visible; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); align-items:start } /* The rail carries eight labelled stages and the call's controls in the same row here, with no rail beside it to borrow from. Both tighten; the stage labels stay readable and End call keeps its words. */ .stepper{ gap:var(--space-4); padding-left:var(--space-7) } .stepper{ margin-left:calc(var(--space-7) * -1) } .stepper-steps{ gap:var(--space-2) } .step .st{ font-size:11px } .call-acts{ gap:var(--space-3); padding-left:var(--space-4) } } /* ---- 900px: the page gutter narrows, and the stepper bleed with it ------- */ @media (max-width:900px){ .page{ padding:var(--space-6) var(--space-5) var(--space-8) } .page-head{ padding:var(--space-6) var(--space-5) } .viewbar{ padding:var(--space-4) var(--space-5) } .stepper{ padding:var(--space-4) var(--space-5); margin:calc(var(--space-4) * -1) calc(var(--space-5) * -1) var(--space-5) } .stage-body{ padding:var(--space-6) } .say{ padding:var(--space-5) var(--space-6) } /* iOS Safari zooms the whole page on focus of any input/select/textarea computing under 16px, and this console is worked mid-call, one-handed. Most controls already sit on --body-lg (16px) via .fld, but a few desktop-density overrides drop under it: .cond-chip .fld and .ladder .fld both read --body-sm (13.5px) outside the 760px sheet breakpoint, which still applies in the 761-900px band where the tools panel is a full-width block rather than a sheet. One high-specificity rule beats chasing every override — #shell plus the attribute selector outranks the two-class rules that set the smaller sizes, so it wins without an !important and without touching the desktop (>900px) density at all. */ #shell[data-shell-page="call"] input, #shell[data-shell-page="call"] select, #shell[data-shell-page="call"] textarea{ font-size:16px } /* Same fix, same reasoning, for the rest of the console (2026-09-14 mobile audit). Each of these pages has its own scattered --body-sm/--body-xs controls (a week-of select, a status select in a table row, a carrier's appointment fields, a Sort select shared with other screens via .tsel). Chasing every one of those shared/base classes individually risks restyling a screen this pass has no business touching, same as .onb-tab below - one page-scoped, high-specificity rule per page closes all of them at once without touching the classes themselves. Excludes checkbox/ radio: a native checkbox stretched by a blanket font-size can render oversized in some browsers, and font-size does nothing for its own tap target anyway. */ #shell[data-shell-page="overview"] input, #shell[data-shell-page="overview"] select, #shell[data-shell-page="overview"] textarea, #shell[data-shell-page="contacts"] input:not([type="checkbox"]):not([type="radio"]), #shell[data-shell-page="contacts"] select, #shell[data-shell-page="contacts"] textarea, #shell[data-shell-page="sales"] input:not([type="checkbox"]):not([type="radio"]), #shell[data-shell-page="sales"] select, #shell[data-shell-page="sales"] textarea, #shell[data-shell-page="credentials"] input:not([type="checkbox"]):not([type="radio"]), #shell[data-shell-page="credentials"] select, #shell[data-shell-page="credentials"] textarea, #shell[data-shell-page="settings"] input:not([type="checkbox"]):not([type="radio"]), #shell[data-shell-page="settings"] select, #shell[data-shell-page="settings"] textarea{ font-size:16px } } /* ---- 760px: phone. The rail becomes a bottom tab bar, the account popup a bottom sheet, and the tools move into sheets driven from a chip row. -- */ @media (max-width:760px){ .app{ flex-direction:column; --rail-w:auto; --tabbar-h:64px; padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)) } /* Rail → tab bar. Same DOM, so the account popup stays a child of it and the dismissal rules do not have to be rewritten for a second element. iOS runs the visual viewport past bottom:0 into the home-indicator strip, so the bar grows into it or page content shows underneath. */ .rail{ position:fixed; left:0; right:0; bottom:0; top:auto; order:2; width:100%; height:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); flex-direction:row; align-items:stretch; gap:0; padding:0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); border-top:1px solid var(--line-rule); z-index:60 } .rail[data-open="0"]{ padding:0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) } .rail-top,.rail-spacer{ display:none } .rail[data-open="0"] .rail-top{ display:none } .rail-nav{ display:contents } /* min-width:0 is the whole fix for the 375px collision (2026-09-13). A flex item defaults to min-width:auto, which floors it at its own content width, so `flex:1` did NOT give equal cells: OVERVIEW, LICENCES and CARRIERS held their full nowrap text width and the short labels absorbed the difference. Cells came out 61.5/48.9/49/49/58.1/59.5/49 - summing to exactly 375.0, a bar packed edge to edge with no gutter, which is why PEOPLE LICENCES CARRIERS read as one word and the icons sat on centres that did not line up with each other. With min-width:0 every tab is width/count exactly. */ .rail-item,.rail[data-open="0"] .rail-item{ flex:1; min-width:0; flex-direction:column; justify-content:center; gap:4px; padding:var(--space-3) 0 var(--space-2); border-top:2px solid transparent } .rail-item .mark{ display:none } .rail-item .ic,.rail[data-open="0"] .rail-item .ic{ width:20px; height:20px; margin:0 auto } .rail-item .lb,.rail[data-open="0"] .rail-item .lb{ display:none } /* The label has to fit the cell it is given rather than set it. 9.5px/.12em needed 61.5px for OVERVIEW, which no phone can give six tabs. The clamp scales with the viewport and the tracking comes in to .06em - still clearly tracked uppercase, just not paying .12em for eight characters. overflow:hidden is a guard, not the mechanism: if a future label is too long it clips inside its own cell, because a clipped word is a far better failure than one that runs into its neighbour. */ .rail-item .lb-tab,.rail[data-open="0"] .rail-item .lb-tab{ display:block; flex:none; max-width:100%; overflow:hidden; text-align:center; font-weight:700; font-size:clamp(7.2px, 2.3vw, 9.5px); letter-spacing:.06em; text-transform:uppercase; color:var(--mid-300); white-space:nowrap } /* Six cells or more. CREDENTIALS is eleven characters and clipped to CREDENTIAL the moment Sales took a rail slot (2026-09-13). The clamp comes down rather than the label going away: the count is on the rail as data-tabs, set in shell.js, so this keeps working for whatever the rail holds next without anybody having to remember to come back here. */ .rail[data-tabs="6"] .lb-tab, .rail[data-tabs="6"] .me-tab-lb{ font-size:clamp(6.6px, 2.0vw, 9px); letter-spacing:.04em } .rail[data-tabs="7"] .lb-tab, .rail[data-tabs="7"] .me-tab-lb{ font-size:clamp(6.2px, 1.75vw, 8.5px); letter-spacing:.03em } .rail-item:hover{ background:transparent } .rail-item[aria-current="page"]{ background:transparent; border-top-color:var(--flash-500) } .rail-item[aria-current="page"] .lb-tab{ color:#fff } .rail-item .cnt,.rail[data-open="0"] .rail-item .cnt{ position:absolute; top:4px; right:calc(50% - 22px); min-width:16px; padding:1px 4px; font-size:9px; line-height:13px } /* Identity chip becomes the fourth tab: avatar over "You". */ .me{ flex:1; min-width:0; display:flex } .me-btn,.rail[data-open="0"] .me-btn{ flex:1; width:auto; height:auto; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:var(--space-3) 0 var(--space-2); border-top:2px solid transparent; border-radius:0; overflow:visible; box-shadow:none } .me-btn[aria-expanded="true"], .rail[data-open="0"] .me-btn[aria-expanded="true"]{ box-shadow:none; border-top-color:var(--flash-500) } .me-row{ width:auto } .me-av,.rail[data-open="0"] .me-av{ width:22px; height:22px; box-shadow:0 0 0 1.5px var(--mid-600) } .me-who,.me-row2,.rail[data-open="0"] .me-who{ display:none } /* Matches .lb-tab exactly. "You" never needed the room, but a tab bar whose last label is set differently from the other five reads as a mistake. */ .me-tab-lb{ display:block; max-width:100%; overflow:hidden; font-weight:700; font-size:clamp(7.2px, 2.3vw, 9.5px); letter-spacing:.06em; text-transform:uppercase; color:var(--mid-300); white-space:nowrap } .me-btn[aria-expanded="true"] .me-tab-lb{ color:#fff } /* Account popup becomes a bottom sheet. */ .me-menu{ position:fixed; left:0; right:0; bottom:0; width:auto; border:0; border-radius:var(--radius-md) var(--radius-md) 0 0; z-index:70; padding-bottom:env(safe-area-inset-bottom, 0px) } .me-sheet-head{ display:block; padding:var(--space-4) 0 0; text-align:center } .me-sheet-head span{ display:inline-block; width:38px; height:4px; border-radius:var(--radius-pill); background:var(--paper-400) } .me-id{ padding:var(--space-5) var(--space-6) } .me-items{ padding:var(--space-3) 0 var(--space-6) } .me-items a,.me-items button{ padding:16px var(--space-6); font-size:var(--body-lg) } /* The sheet needs a real backdrop on a phone, unlike the desktop popup — but it still has to sit BELOW the rail, because the sheet is a child of the rail's stacking context and cannot escape upward past it. */ .scrim{ position:fixed; z-index:55; background:var(--scrim-flat) } .main{ order:1 } /* Page header: wordmark line, then the live title. */ .page-head{ padding:calc(var(--space-5) + env(safe-area-inset-top, 0px)) var(--space-5) var(--space-5) } .page-head .sector,.page-head .eyebrow{ display:none } .page-head .ph-wm{ display:block; font-family:var(--font-display); font-size:10px; line-height:1; letter-spacing:.26em; text-transform:uppercase; color:var(--mid-400); margin-bottom:var(--space-4) } .page-head-in{ align-items:center; gap:var(--space-4); flex-wrap:nowrap } .page-head h1{ font-size:20px } /* When a page supplies a live title, it replaces the static one. */ .page-head .ph-alt:not(:empty){ display:block; font-family:var(--font-display); font-size:20px; line-height:.9; letter-spacing:-.015em; text-transform:uppercase; color:#fff } .page-head .ph-alt:not(:empty) + h1{ display:none } .ph-r{ gap:var(--space-4); flex-wrap:nowrap } .ph-r .pair > span:not(.dot){ display:none } .ph-r .pair[data-k="line"] > b{ font-size:var(--body-xs) } .ph-r .pair[data-k="stage"],.ph-r .pair[data-k="resident"]{ display:none } button.npn{ font-size:var(--body-xs) } .switch-menu{ left:auto; right:0 } /* Call console. The header is the stepper: digits only, navy, pinned. The stepper sits after the PII line in the DOM — correct reading order — but visually it belongs welded to the header, so order moves it. */ .call{ gap:var(--space-6) } .call-script{ display:flex; flex-direction:column } .stepper{ order:-1 } .stepper{ background:var(--mid-1000); padding:var(--space-4) var(--space-5); margin:calc(var(--space-6) * -1) calc(var(--space-5) * -1) var(--space-5) } .stepper-steps{ gap:4px } .step{ text-align:center; padding:7px 0 var(--space-3); border-top-width:3px; border-top-color:var(--mid-600); color:var(--mid-400) } .step:hover{ border-top-color:var(--mid-500); color:var(--mid-200) } .step .sn{ font-size:10px } .step .st{ display:none } .step[aria-current="true"]{ border-top-color:var(--flash-500); color:#fff } .step[data-done="1"]{ border-top-color:var(--jade-500); color:var(--mid-200) } .say p{ font-size:17px } .stage-head{ padding:var(--space-5) } .stage[data-open="1"] .stage-head{ padding:var(--space-5) } .stage-head .num{ width:auto; font-size:26px } .stage[data-open="1"] .stage-head .num{ font-size:26px } .stage-head h2,.stage[data-open="1"] .stage-head h2{ font-size:16px } .stage-body{ padding:var(--space-5) } /* A branch table cannot hold two columns at 390px, so each row stacks into a labelled pair — the same information, none of it hidden off-screen. */ table.branch,table.branch tbody,table.branch tr,table.branch td{ display:block; width:auto } table.branch thead{ position:absolute; left:-9999px } table.branch tr{ padding-bottom:var(--space-4); margin-bottom:var(--space-4); border-bottom:1px solid var(--line-hairline) } table.branch td{ border:0; padding:0 } table.branch td:first-child{ width:auto; font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted); margin-bottom:4px } /* Tools: the desktop panels give way to a chip row over a bottom sheet. */ .tools{ display:none } .toolbar-phone{ display:grid; gap:var(--space-4); z-index:35; position:sticky; bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding:var(--space-5) var(--space-5) var(--space-4); margin:var(--space-5) calc(var(--space-5) * -1) calc(var(--space-8) * -1); background:var(--surface-raised); border-top:1px solid var(--line-hairline) } /* THE CALL'S CONTROLS RIDE THE STAGE-ADVANCE ROW (Truman, 2026-09-15: move them to the bottom "without reducing the screen real estate", then: let "the next section button share a line with the add applicant and end call buttons so that the pills above can have the full line"). They sat beside the chips first, which left seven tools about 150px to scroll through. The stage advance never needed the whole width, so the three share the second row and the chip row gets the first one whole. The acts are the same node as the desktop rail's — call.js moves it across the 900px break. Still no row added: the tool bar had two already. */ .chiprow{ display:flex; gap:var(--space-3); overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--space-5) * -1); padding:0 var(--space-5) } .chiprow::-webkit-scrollbar{ display:none } .tb-row{ display:flex; align-items:stretch; gap:var(--space-3); min-width:0 } /* margin-left:auto so the acts stay on the right edge even at the end of the call, when syncNextButton() hides the advance button entirely. */ .tb-acts{ flex:none; margin-left:auto; display:flex; align-items:stretch } .tb-acts .call-acts{ align-items:stretch; gap:var(--space-3); padding-left:var(--space-3) } /* One band: all three controls take the advance button's height rather than floating at 44px beside it. The 44px floor still holds underneath, because this is tapped one-handed, mid-call. */ .tb-acts .acts-ava{ align-self:stretch } .tb-acts .ava{ width:44px; height:auto; min-height:44px; font-size:var(--body-md) } .tb-acts .ava.add .ic{ width:19px; height:19px } .tb-acts .acts-end{ width:44px; height:auto; min-height:44px; align-self:stretch; border-color:var(--flash-500) } .tb-acts .acts-end .ic{ width:20px; height:20px } .tb-acts .acts-save.bad{ order:-1; align-self:center; margin-right:var(--space-2) } /* 44px minimum: this is tapped one-handed, mid-call. */ .chip{ flex:none; display:inline-flex; align-items:center; gap:var(--space-3); min-height:44px; border-radius:var(--radius-pill); padding:10px 16px; cursor:pointer; font-family:var(--font-sans); font-weight:600; font-size:var(--body-sm); box-shadow:var(--shadow-raise); background:var(--surface-card); border:1px solid var(--line-rule); color:var(--text-heading) } .chip[aria-expanded="true"]{ background:var(--surface-accent-soft); border-color:var(--flash-500) } .chip b{ font-family:var(--font-data); font-variant-numeric:tabular-nums; color:var(--text-alert) } .chip b:empty{ display:none } .nextbtn-phone{ flex:1; min-width:0; background:var(--flash-500); color:#fff; border:0; border-radius:var(--radius-xs); padding:15px 20px; font-family:var(--font-sans); font-weight:600; font-size:var(--body-lg); cursor:pointer } .nextbtn-phone:hover{ background:var(--flash-600) } .stage-foot{ display:none } .sheet-scrim{ display:block; position:fixed; inset:0; z-index:65; background:var(--scrim-flat) } .sheet-scrim[hidden]{ display:none } .sheet{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:70; background:var(--surface-card); border-top:2px solid var(--flash-500); border-radius:var(--radius-md) var(--radius-md) 0 0; box-shadow:var(--shadow-overlay); max-height:82vh; overflow-y:auto; padding-bottom:env(safe-area-inset-bottom, 0px); transform:translateY(102%); transition:transform var(--dur-base) var(--ease-standard) } .sheet[data-open="1"]{ transform:translateY(0) } .sheet-grab{ padding:var(--space-4) 0 0; text-align:center } .sheet-grab span{ display:inline-block; width:38px; height:4px; border-radius:var(--radius-pill); background:var(--paper-400) } .sheet-in{ padding:var(--space-6) var(--space-6) var(--space-7) } .sheet-head{ display:flex; align-items:baseline; gap:var(--space-4); margin-bottom:var(--space-4) } .sheet-head h3{ flex:1; margin:0; font-family:var(--font-display); font-size:16px; line-height:1; letter-spacing:-.01em; text-transform:uppercase; color:var(--text-display) } /* min-height:44px: at 8px/8px this measured 31px tall, the smallest target in the whole sheet and the one that dismisses it. */ .sheet-close{ background:transparent; border:0; padding:8px 0 8px 12px; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; font-family:var(--font-sans); font-weight:600; font-size:var(--body-sm); color:var(--text-muted) } .sheet .out .big{ font-size:38px } /* While a sheet is open the script behind must not move. */ body.sheet-open{ overflow:hidden } /* Licensing: filter chips and one card per state. The label-per-cell table transform worked but was heavier, and a horizontally scrolling table hides "what is outstanding", which is the column that matters most. */ .lic-stats{ grid-template-columns:1fr 1fr; gap:var(--space-4) } .lic-stat{ padding:var(--space-5) } .lic-stat .v{ font-size:26px; margin-top:var(--space-3) } .lic-stat .v.long{ font-size:17px } .lic-stat .s{ display:none } .lic-bar .lbl-full{ display:none } .lic-bar .lbl-short{ display:inline } .lic-bar .grow{ display:none } .btn{ padding:11px 14px; font-size:var(--body-sm) } .renew{ padding:var(--space-5) var(--space-6) } .renew-grid{ grid-template-columns:1fr; gap:var(--space-4) } .lic-scroll{ background:transparent; border:0; box-shadow:none; overflow:visible } .lic-table{ min-width:0 } .lic-table thead{ position:absolute; left:-9999px } .lic-table,.lic-table tbody,.lic-table tr,.lic-table td{ display:block; width:auto } .lic-table tr{ position:relative; background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-sm); box-shadow:var(--shadow-raise); padding:var(--space-5); margin-bottom:var(--space-4) } .lic-table tr[data-action="1"]{ border-left:3px solid var(--flash-500) } .lic-table tr[data-sel="1"]{ border-color:var(--flash-500) } .lic-table td{ border:0; padding:var(--space-3) 0 0; display:flex; gap:var(--space-5); align-items:baseline; justify-content:space-between; text-align:right; white-space:normal } .lic-table tr:last-child td{ border-bottom:0 } .lic-table td > .cv{ display:block; min-width:0 } .lic-table td::before{ content:attr(data-l); flex:none; text-align:left; font-weight:700; font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted) } .lic-table td:empty{ display:none } .lic-table td.st{ width:auto; font-size:22px; padding:0 0 var(--space-4) 32px; border-bottom:1px solid var(--line-hairline); margin-bottom:var(--space-2) } .lic-table td.st::before{ content:none } /* The checkbox belongs in the card header beside the state, with no label. */ .lic-table td.pick{ position:absolute; top:var(--space-5); left:var(--space-5); padding:0; display:block; width:auto } .lic-table td.pick::before{ content:none } .lic-table td.pick .cv{ display:block; line-height:0 } .lic-table td.pick input[type=checkbox]{ width:20px; height:20px } /* The card already carries the red border, so suppress the row markers or a second red line appears beside the checkbox. */ .lic-table tr:hover td, .lic-table tr[data-action="1"] td,.lic-table tr[data-sel="1"] td{ background:transparent } .lic-table tr[data-action="1"] td.pick{ box-shadow:none } .lic-note{ text-align:right } .ce-sum{ gap:var(--space-6); padding:var(--space-5) } .ce-empty{ padding:var(--space-6) var(--space-5); gap:var(--space-5) } .ce-plate{ width:64px; height:64px; font-size:26px } .ce-empty .txt{ min-width:0; flex:1 1 100% } .set-card{ padding:var(--space-6) } /* The role badge and a long address cannot share a 390px row without breaking the address mid-word, so the badge takes its own line. */ .id-head{ flex-wrap:wrap } .id-head .wrap2{ flex:1 1 100% } .id-head .rl{ flex:1 1 100% } .id-head,.id-row,.id-foot{ padding-left:var(--space-6); padding-right:var(--space-6) } .id-row{ flex-direction:column; align-items:flex-start; gap:var(--space-2) } .id-row .v{ text-align:left } .stub{ padding:var(--space-6) } } /* ============================================================================= 3b. CALL CONSOLE — the script as the form (2026-09-14, CUSTOMERS.md) The call bar, the self-saving fields under each stage, the quote and application blocks, and the end-of-call sheet. Same tokens as the rest. ========================================================================== */ .callbar{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-4); margin:0 0 var(--space-5); padding:var(--space-4) var(--space-5); background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-sm); box-shadow:var(--shadow-raise) } .callbar[data-lead="1"]{ border-left:3px solid var(--flash-500) } .callbar-new{ display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:var(--space-3) } .callbar-new[hidden]{ display:none } .callbar-new .fld{ width:auto; flex:1 1 180px; min-width:0 } .callbar-new select.fld{ flex:0 1 160px } .callbar-live{ display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-4); min-width:0 } .callbar-live[hidden]{ display:none } /* The id is the link to the full record (2026-09-15): the Record button next to it was a second control for a thing already on screen. Underlined only on hover so the line still reads as a livery number rather than a link. */ .callbar-id{ font-family:var(--font-statement); font-variant-numeric:tabular-nums; font-size:22px; letter-spacing:-.01em; color:var(--flash-500); line-height:.9; text-decoration:none; border-bottom:1.5px solid transparent } .callbar-id:hover, .callbar-id:focus-visible{ border-bottom-color:var(--flash-500) } .callbar-name{ font-weight:600; color:var(--text-display); font-size:var(--body-md) } .callbar-meta{ font-size:var(--body-xs); color:var(--text-muted); font-family:var(--font-data); font-variant-numeric:tabular-nums; letter-spacing:var(--data-tracking) } .callbar-in{ flex-basis:100%; display:flex; flex-wrap:wrap; gap:var(--space-2) } .callbar-in[hidden]{ display:none } .callbar-in .btn{ border-color:var(--flash-500); background:var(--surface-accent-soft) } .callbar-msg{ flex-basis:100%; margin:0 } .callbar-msg:not(.on){ display:none } /* ---- The lead source, which is the script (2026-09-15) -------------------- Its own row across the top of the call bar, above the number and above the live lead, because the source is known before the phone rings and it stays tappable while a call is live. One segmented group, the same control the whole intake uses, so it needs no vocabulary of its own. */ .srcbar{ flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-4); padding-bottom:var(--space-4); border-bottom:1px solid var(--line-hairline) } .srcbar-l{ font-size:var(--eyebrow); letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; font-weight:700; color:var(--text-muted) } .srcbar-n{ flex:1 1 220px; min-width:0; font-size:var(--body-xs); color:var(--text-muted) } #nc-plan button{ display:flex; flex-direction:column; align-items:flex-start; gap:1px; line-height:1.15; text-align:left } #nc-plan button b{ font-family:var(--font-data); font-variant-numeric:tabular-nums; font-weight:700; font-size:var(--body-sm) } #nc-plan button small{ font-size:10px; letter-spacing:.04em; text-transform:uppercase; opacity:.75 } /* ---- The call's own controls, at the end of the rail (2026-09-15) --------- Truman: the call bar "shows a bunch of unneeded stuff". Saving, ending and the second person left the bar and came here, to the right-hand end of the sticky stage rail — always on screen, never on top of the script. On a phone call.js moves this same node into the bottom tool bar; the styling below the 900px break is in that media query, not here. */ .call-acts{ position:relative; flex:none; display:flex; align-items:center; gap:var(--space-4); padding-left:var(--space-5) } .call-acts[hidden]{ display:none } /* THE DIVIDER IS THE SAVE STATE (2026-09-15). A green dot reporting that nothing had gone wrong was the same unneeded reassurance as "Saved 21:23", one size smaller. The hairline that separates the stages from the controls does the job instead: it is a rule at rest, flashes amber for the third of a second a keystroke is in flight, and holds flash red when a save failed. Nothing added to the row, and no state that only says "fine". It is a VERTICAL rule and never jade, so it cannot be misread as one of the stepper's own jade "stage done" rules above it. */ .call-acts::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--line-rule); transition:background var(--dur-base) var(--ease-standard) } .call-acts[data-save="busy"]::before{ background:var(--amber-400) } .call-acts[data-save="bad"]::before{ background:var(--flash-500) } /* A failure is the one save state with words, because it is the one an agent has to do something about. */ .acts-save{ display:none; flex:none; font-size:var(--body-xs); font-weight:600; color:var(--text-alert); white-space:nowrap } .acts-save.bad{ display:block } /* One call, two people. Husband and wife are two leads — two dates of birth, two health blocks — and these squares move between them without the call ending. The person on screen is pressed; the dashed + starts the second one. The face is an initial once a name has been taken and the lead's own digits until then. */ /* ONE CONTROL, NOT THREE LOOSE BOXES. The people and the way to add one are a single segmented control — one border, one radius, hairlines between the cells — which is the same idiom as the lead-source toggle above it. Three squares floating at even gaps read as three unrelated buttons; one segment reads as "who is on this call", which is what it is. */ .acts-ava{ flex:none; display:flex; align-items:center; background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-xs); box-shadow:var(--shadow-raise) } .ava{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; cursor:pointer; background:transparent; border:0; border-left:1px solid var(--line-rule); color:var(--text-body); font-family:var(--font-data); font-variant-numeric:tabular-nums; font-weight:700; font-size:var(--body-sm); letter-spacing:var(--data-tracking); line-height:1; transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard) } .ava:first-child{ border-left:0 } /* The segment's own radius has to reach its end cells or the fill squares off against the rounded border. */ .ava:first-child{ border-radius:calc(var(--radius-xs) - 1px) 0 0 calc(var(--radius-xs) - 1px) } .ava:last-child{ border-radius:0 calc(var(--radius-xs) - 1px) calc(var(--radius-xs) - 1px) 0 } .ava:only-child{ border-radius:calc(var(--radius-xs) - 1px) } .ava:hover{ background:var(--surface-raised) } .ava[aria-pressed="true"]{ background:var(--flash-500); color:#fff } .ava[aria-pressed="true"]:hover{ background:var(--flash-600) } /* Add someone: the icon is literally a + with an avatar (Truman's words), so it needs no dashed border to say "this one is different" — muted until you reach for it, flash red when you do. */ .ava.add{ color:var(--text-muted) } .ava.add .ic{ width:17px; height:17px } .ava.add:hover{ background:var(--surface-accent-soft); color:var(--flash-500) } .ava.add:disabled{ opacity:.5; cursor:wait } /* END CALL IS A RED X (Truman, 2026-09-15). It sits outside the people segment, with the save rule and a full gap between them, because it must never read as "remove this person". It is NOT a filled red button at rest: the one filled flash-red control in this view is the stage-advance ("Intake →"), and the brand allows one. So: white square, red X, hairline — and the fill arrives on hover, which is also the weight the action deserves at the moment you commit to it. */ .acts-end{ flex:none; display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; cursor:pointer; border-radius:var(--radius-xs); box-shadow:var(--shadow-raise); background:var(--surface-card); border:1px solid var(--line-rule); color:var(--flash-500); transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard) } .acts-end .ic{ width:18px; height:18px } .acts-end:hover{ background:var(--flash-500); border-color:var(--flash-500); color:#fff } /* ---- Fields --------------------------------------------------------------- A field is a label above a control, in a fluid grid. Segmented groups are the common control: one tap, no keyboard, the answer visible after. */ .intake{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:var(--space-4) var(--space-5); margin:0 0 var(--space-6) } .intake:empty{ display:none } /* No call live. The old overlay printed "Start a call to fill this in." across the middle of whichever section happened to be open; the banner at the top of the stage body says it once, and the controls below are really disabled rather than dimmed and inert. Design-system disabled: 40%, not-allowed. */ .intake.off .fld, .intake.off .if-seg button, .intake.off button, .intake.off input, .intake.off select{ opacity:.4; cursor:not-allowed } .intake.off .if-l, .intake.off .if-n, .intake.off .hq-l{ opacity:.6 } .if{ display:block; min-width:0 } label.if{ max-width:100% } /* ---- Native date inputs ---------------------------------------------- Truman's phone screenshot: the DOB field in Intake ran off the right edge at 375px. iOS Safari sizes from its own internal date chrome and ignores width:100% / the grid column it sits in unless appearance is turned off explicitly; min-width:0 keeps the grid cell itself (label.if) from being floored at that same intrinsic width. Every date input on the console shares this — DOB (Intake), #ap-eff (Approved) and #oc-cb-date (the callback sheet, already absolute+inset:0 over its .btn but still needs the reset so its own measured content cannot push the label wider than the pill it hides behind). */ input[type="date"]{ min-width:0; width:100%; max-width:100%; box-sizing:border-box; -webkit-appearance:none; appearance:none; display:block; } input[type="date"]::-webkit-date-and-time-value{ text-align:left } /* iOS Safari renders an EMPTY date input as a blank box once -webkit-appearance is reset, so the console marks a blank date field data-empty="1" and draws a placeholder here. Chrome does NOT ignore ::before on a date input — it drew ours over its own mm/dd/yyyy — so shell.js measures which kind of browser this is and only stamps data-dateph="drawn" on the ones that need it. */ input[type="date"][data-empty="1"], .if[data-empty="1"] input[type="date"]{ position:relative } /* ...but NOT the invisible pickers laid over a button or a pill. shell.js stamps data-empty on every date input, and that selector out-specifies `.oc-date input` / `.ct-pill-date input`, which dropped those inputs back into the flow: the "Pick a day" pill grew to 213px and wrapped its own label onto three lines (Truman's phone screenshot, 2026-09-15). */ .oc-date input[type="date"][data-empty], .ct-pill-date input[type="date"][data-empty]{ position:absolute; inset:0; width:100%; height:100%; display:block; } /* Absolutely placed so it overlays the (empty) value line instead of stacking above it, which doubled the field's height on the phone. shell.js stamps data-empty on every date input; call.js also stamps its wrapper. */ :root[data-dateph="drawn"] input[type="date"][data-empty="1"]::before, :root[data-dateph="drawn"] .if[data-empty="1"] input[type="date"]::before{ content:"mm / dd / yyyy"; color:var(--text-muted); pointer-events:none; position:absolute; left:12px; top:50%; transform:translateY(-50%); line-height:1 } /* Invisible overlay pickers (a date input laid over a "Pick" button) keep no placeholder. */ :root .oc-date input[type="date"]::before, :root .ct-pill-date input[type="date"]::before{ content:none } input[type="date"]::-webkit-date-and-time-value{ min-height:1.25em; line-height:1.25em } .if-l{ display:flex; align-items:baseline; gap:var(--space-2); font-size:var(--body-xs); font-weight:600; color:var(--text-heading); margin:0 0 var(--space-2) } .if-priv{ font-style:normal; font-weight:700; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); border:1px solid var(--line-rule); border-radius:var(--radius-pill); padding:1px 6px } .if-n{ display:block; margin-top:var(--space-2); font-size:var(--body-xs); color:var(--text-muted); line-height:1.45 } .if-n.bad{ color:var(--text-alert) } .if .fld{ font-size:16px; padding:10px 12px } .if[data-locked="1"] .fld, .if[data-locked="1"] .if-seg{ opacity:.55 } .if-seg{ display:flex; flex-wrap:wrap; gap:var(--space-2) } .if-seg button{ background:var(--surface-raised); border:1px solid var(--line-rule); color:var(--text-body); border-radius:var(--radius-xs); padding:9px 11px; font-family:var(--font-sans); font-size:var(--body-xs); font-weight:600; cursor:pointer; text-align:left; min-height:38px } .if-seg button:hover{ border-color:var(--paper-500) } .if-seg button[aria-pressed="true"]{ background:var(--flash-500); border-color:var(--flash-500); color:#fff } .if-group{ grid-column:1 / -1 } .if-group[hidden]{ display:none } .if-sub{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:var(--space-3) } .if-sub label span{ display:block; font-size:var(--body-xs); color:var(--text-muted); margin-bottom:4px } /* Feet and inches read as one measurement, so they stay side by side at every width rather than stacking the way the auto-fill grid would at 375px. */ .if-ftin .if-sub{ grid-template-columns:repeat(2,minmax(0,1fr)) } /* Health: one row per question, the question first, yes/no, then the note. */ .hq-grid{ display:grid; gap:0; grid-column:1 / -1; border-top:1px solid var(--line-hairline) } .hq{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-2) var(--space-5); align-items:center; padding:var(--space-4) 0; border-bottom:1px solid var(--line-hairline) } .hq.ko .hq-l{ font-weight:600; color:var(--text-display) } .hq-l{ font-size:var(--body-sm); color:var(--text-body); line-height:1.45 } .hq .if-seg button{ min-width:52px; text-align:center } .hq-note{ grid-column:1 / -1; font-size:16px } .hq-note[hidden]{ display:none } #verdict-stage{ grid-column:1 / -1 } /* Conditions picker (A0). Chips for what was heard, a type-ahead under them, the two rater link-outs last. A chip's left edge carries its first read. */ .if-cond{ grid-column:1 / -1; padding-top:var(--space-4) } .cond-chips{ display:grid; gap:var(--space-2); margin-bottom:var(--space-3) } .cond-chips:empty{ display:none } .cond-chip{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(140px,1fr) auto; gap:var(--space-2) var(--space-3); align-items:center; padding:var(--space-2) var(--space-3); border:1px solid var(--line-rule); border-left:3px solid var(--line-rule); border-radius:var(--radius-xs); background:var(--surface-raised) } .cond-chip[data-place="graded"]{ border-left-color:var(--amber-600) } .cond-chip[data-place="gi"]{ border-left-color:var(--flash-500) } .cond-name{ font-size:var(--body-sm); font-weight:600; color:var(--text-display); min-width:0; overflow-wrap:anywhere } .cond-name small{ display:block; font-size:var(--body-xs); font-weight:400; color:var(--text-muted) } .cond-chip .fld{ font-size:var(--body-sm); padding:7px 9px } .cond-x{ background:none; border:0; color:var(--text-muted); font-size:20px; line-height:1; cursor:pointer; padding:4px 8px; border-radius:var(--radius-xs) } .cond-x:hover{ color:var(--text-alert); background:var(--surface-accent-soft) } .cond-search{ position:relative } .cond-list{ position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; display:grid; max-height:300px; overflow:auto; background:var(--surface-card); border:1px solid var(--line-rule); border-radius:var(--radius-xs); box-shadow:var(--shadow-lift) } .cond-list[hidden]{ display:none } .cond-list button{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--line-hairline); padding:10px 12px; font-family:var(--font-sans); font-size:var(--body-sm); color:var(--text-body); cursor:pointer } .cond-list button:last-child{ border-bottom:0 } .cond-list button:hover, .cond-list button:focus{ background:var(--surface-accent-soft); outline:0 } .cond-list button small{ font-size:var(--body-xs); color:var(--text-muted); white-space:nowrap } .cond-list .cond-med span{ color:var(--text-heading) } /* The medication dictionary (2026-09-15). A brand name matches and the generic is what gets stored, so both are on the row: the caller says Eliquis, the record says apixaban, and the agent can see why. */ .cond-cat{ margin:0; padding:6px var(--space-4) 4px; font-size:var(--eyebrow); font-weight:700; letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted); background:var(--surface-sunken,var(--surface-raised)); border-bottom:1px solid var(--line-hairline) } .cond-list .med-b{ font-style:normal; font-weight:400; color:var(--text-muted) } .cond-list .cond-raw span{ color:var(--text-muted) } /* The second tap, never taken for them: a drug implies a condition, the agent asks, and only then does the placement class move. */ .cond-also{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-top:var(--space-3); padding:var(--space-3) var(--space-4); border-left:3px solid var(--amber-600); background:var(--amber-100); border-radius:var(--radius-xs); font-size:var(--body-sm) } .cond-also[hidden]{ display:none } .cond-also span{ flex:1 1 220px; min-width:0; color:var(--text-body) } /* ---- Going round again without ending the call (2026-09-15) -------------- */ .again{ margin-top:var(--space-7); padding:var(--space-5) var(--space-6); border:1px dashed var(--line-rule); border-radius:var(--radius-xs); background:var(--surface-raised) } .again-h{ margin:0 0 var(--space-3); font-size:var(--eyebrow); font-weight:700; letter-spacing:var(--eyebrow-tracking); text-transform:uppercase; color:var(--text-muted) } .again-acts{ display:flex; flex-wrap:wrap; gap:var(--space-3) } .again-n{ margin:var(--space-4) 0 0; font-size:var(--body-sm); line-height:1.5; color:var(--text-muted) } .again-n b{ color:var(--text-heading); font-weight:600 } .linkouts{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-top:var(--space-4) } .linkouts .if-n{ margin:0 } /* The e-app (A4): one carrier choice shared by Close, Approved and the panel. */ .if-eapp{ grid-column:1 / -1 } .eapp-row{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) } .eapp-row .fld{ flex:1 1 200px; min-width:0 } [data-eapp-open][aria-disabled="true"]{ opacity:.45; cursor:not-allowed } .app-grid .ap-eapp{ margin-top:var(--space-2) } /* The BUILT copy sheet — the lines themselves. Deliberately not `.sheet`: that class belongs to the phone bottom-sheet container call.js builds, and sharing it meant this block inherited `display:none` above 900px (invisible on a laptop) and `position:fixed; bottom:0` below it (a second overlay, edge to edge, on top of the panel that owns it). Found 2026-09-15. */ .copysheet{ margin-top:var(--space-4) } .copysheet .eyebrow{ margin:var(--space-4) 0 var(--space-2) } .sheet-lines{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line-hairline) } .sheet-lines li{ display:grid; grid-template-columns:minmax(0,38%) minmax(0,1fr); gap:var(--space-3); padding:6px 0; border-bottom:1px solid var(--line-hairline); font-size:var(--body-sm) } .sheet-lines li span{ color:var(--text-muted) } .sheet-lines li b{ font-weight:600; color:var(--text-display); overflow-wrap:anywhere; user-select:all } .copysheet .cap.never{ margin-top:var(--space-4); padding:var(--space-3) var(--space-4); border-left:3px solid var(--flash-500); background:var(--surface-accent-soft); color:var(--text-alert) } .copysheet .cap.bad{ color:var(--text-alert) } @media (max-width:640px){ .cond-chip{ grid-template-columns:minmax(0,1fr) auto } .cond-chip .cond-note{ grid-column:1 / -1 } } .warn.never{ border-left-color:var(--flash-500); background:var(--surface-accent-soft) } .warn.never strong{ color:var(--text-alert) } /* Quote and application blocks span the grid. */ .if-quote, .if-app{ grid-column:1 / -1 } .qgrid{ display:grid; gap:var(--space-3) } .qrow{ display:grid; grid-template-columns:78px minmax(0,1fr) minmax(0,1fr) auto; gap:var(--space-3); align-items:center } .qn{ font-family:var(--font-data); font-size:var(--data-sm); letter-spacing:var(--data-tracking); text-transform:uppercase; color:var(--text-muted); font-weight:700 } .qpick{ background:var(--surface-raised); border:1px solid var(--line-rule); color:var(--text-body); border-radius:var(--radius-xs); padding:9px 11px; font-family:var(--font-sans); font-size:var(--body-xs); font-weight:600; cursor:pointer; white-space:nowrap } .qpick[aria-pressed="true"]{ background:var(--jade-500); border-color:var(--jade-500); color:#fff } .qacts{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-top:var(--space-4) } .qacts .if-n{ margin:0 } .app-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--space-3) var(--space-4) } .app-grid label span{ display:block; font-size:var(--body-xs); font-weight:600; color:var(--text-heading); margin-bottom:4px } .app-done{ grid-column:1 / -1; margin:0 0 var(--space-5); padding:var(--space-4) var(--space-5); border-left:3px solid var(--jade-500); background:var(--surface-jade-soft); border-radius:var(--radius-xs) } .app-done p{ margin:0; font-size:var(--body-sm); color:var(--text-positive) } .app-done p + p{ margin-top:var(--space-2) } /* ---- The end-of-call sheet ---------------------------------------------- */ .call-scrim{ position:fixed; inset:0; z-index:65; background:var(--scrim-flat) } .call-scrim[hidden]{ display:none } .call-sheet{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:70; width:min(520px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow-y:auto; background:var(--surface-card); border-top:2px solid var(--flash-500); border-radius:var(--radius-md); box-shadow:var(--shadow-overlay) } .call-sheet[hidden]{ display:none } .call-sheet-in{ padding:var(--space-6) } .call-sheet-in .eyebrow{ margin:0 0 var(--space-3) } .call-sheet-in h3{ margin:0 0 var(--space-5); font-family:var(--font-display); font-size:18px; line-height:1; letter-spacing:-.01em; text-transform:uppercase; color:var(--text-display) } /* Six ruled rows, each with its eyebrow label: result / how far / how warm / why / call back / note. Same spacing on every one, a hairline between, so the sheet reads as a form rather than a pile of loose buttons. */ .oc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2) } .oc-grid .btn{ justify-content:center; min-height:48px; padding:10px 8px; font-size:var(--body-sm); text-align:center } .oc-grid .btn[aria-pressed="true"]{ border-color:var(--flash-500); background:var(--surface-accent-soft); color:var(--text-alert) } .oc-row{ display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--space-3) var(--space-5); align-items:start; padding:var(--space-5) 0; border-top:1px solid var(--line-hairline) } .oc-row[hidden]{ display:none } .oc-row:first-of-type{ border-top:0; padding-top:0 } /* The row a missing pick refers to says so with the flash marker, not a colour change buried somewhere else on the sheet. */ .oc-row[data-need="1"]{ border-left:3px solid var(--flash-500); padding-left:var(--space-4); margin-left:calc(var(--space-4) * -1 - 3px); background:var(--surface-accent-soft) } .oc-row .k{ padding-top:6px; font-size:var(--body-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted) } .oc-row .oc-v{ min-width:0 } .oc-row .fld{ font-size:16px } .oc-hint, .oc-why{ margin:var(--space-3) 0 0; font-size:var(--body-xs); line-height:1.45 } .oc-hint{ color:var(--text-muted) } .oc-why{ color:var(--text-alert); font-weight:600 } .oc-why[hidden]{ display:none } .oc-chips{ display:flex; flex-wrap:wrap; gap:var(--space-2) } /* Multi-select. Pressed is the flash fill, unmistakable at a glance, and the first one picked — the one that gets counted — carries the marker dot. */ .oc-chips .btn[aria-pressed="true"]{ background:var(--flash-500); border-color:var(--flash-500); color:#fff } .oc-obj .btn[data-first="1"]::before{ content:""; width:5px; height:5px; margin-right:var(--space-2); border-radius:var(--radius-pill); background:#fff } .oc-date{ position:relative; overflow:hidden } /* Invisible overlay input over the "Pick" pill — no .fld class, so it never picked up the 16px floor and could still zoom the page when tapped. */ .oc-date input{ position:absolute; inset:0; opacity:0; cursor:pointer; font-size:16px } .oc-effect{ margin:var(--space-5) 0 var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--line-hairline); font-size:var(--body-xs); color:var(--text-muted); min-height:1.4em; line-height:1.5 } .oc-effect.bad{ color:var(--text-alert); font-weight:600 } .call-sheet .fld{ font-size:16px } .oc-acts{ display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-5) } .oc-acts .grow{ flex:1 } .oc-acts .btn[hidden]{ display:none } @media (max-width:760px){ /* New call on a phone (Truman, 2026-09-14): one line, as little height as possible. The number takes the room, the plan is a compact select, and the button drops its label and keeps the phone icon (aria-label carries the name). Two rows was the first cut and he wanted less real estate. */ .callbar{ padding:var(--space-3) } .srcbar{ gap:var(--space-2) } .srcbar-l{ flex-basis:100% } .srcbar-n{ flex-basis:100% } #nc-plan{ width:100%; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-2) } #nc-plan button{ min-height:44px; padding:6px 4px; align-items:center; text-align:center } .again-acts .btn{ width:100%; justify-content:center } .callbar-new{ display:grid; grid-template-columns:minmax(0,1fr) 48px; gap:var(--space-2); align-items:stretch } .callbar-new[hidden]{ display:none } .callbar-new .fld, .callbar-new select.fld{ flex:none; width:100%; min-width:0; min-height:44px; padding:8px 10px } .callbar-new select.fld{ padding-right:20px; font-size:16px } .callbar-new .btn{ width:100%; min-height:44px; padding:0; justify-content:center; gap:0 } .callbar-new .btn .btn-t{ display:none } .callbar-new #nc-ref[hidden]{ display:none } .qrow{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .qrow .qn{ grid-column:1 / -1 } .qrow .qpick{ grid-column:1 / -1 } .oc-grid{ grid-template-columns:repeat(2,1fr) } /* The label sits above its control at 375px; the hairline still separates one question from the next, so the sheet keeps its sections. */ .oc-row{ grid-template-columns:1fr; gap:var(--space-3) } .oc-row .k{ padding-top:0 } .oc-row[data-need="1"]{ margin-left:0; padding-left:var(--space-4) } .call-sheet{ left:0; right:0; top:auto; bottom:0; transform:none; width:auto; max-height:88vh; border-radius:var(--radius-md) var(--radius-md) 0 0 } /* One column, one step after another. The number keeps its own gutter so the step it belongs to is never in doubt, just a narrower one. */ .stp{ padding-left:30px } .stp::before{ width:22px; font-size:15px } .ladder th:last-child{ width:72px } .ladder .fld{ font-size:16px } /* ---- Tap targets, phone only -------------------------------------- 44px is Apple's own minimum for a one-handed, mid-call tap; 40px is the fallback the audit allowed where neighbours already give it spacing. These sat at 28-38px, sized for a mouse on the desktop density scale. Desktop keeps the tighter sizes — this block only. */ .if-seg button{ min-height:44px } .qpick{ min-height:44px } .pill{ min-height:44px } .ko button{ min-height:44px } .cond-chip .fld{ min-height:40px } .cond-x{ min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; padding:0 } /* End call: reachable one-handed on every stage, at 37px before this. */ #cb-end{ min-height:44px } /* The outcome sheet's own chips and actions — result, heat, objection, callback, Back/Log — all sat at 37-39px on the same desktop density. */ .oc-chips .btn, .oc-acts .btn{ min-height:44px } /* The remaining under-40px buttons are all named IDs/attributes rather than a bare .btn.sm — narrower targets than the blanket class so this does not also resize every action button in Licensing or Settings, which share .btn.sm but were never part of this audit. */ #cond-copy, #q-ladder, #q-log, #ap-log, #sheet-copy, [data-sheet-open], #lad-reset, #lad-rater{ min-height:44px } } /* ---- The rater (A3) ------------------------------------------------------- One card per carrier product, in the order the engine ranked them: what issues first, what pays best second. The flash marker is the 3px selected-row rule from the brand guide and it marks exactly one card — the recommendation. Money is tabular, as everywhere else data is read out loud on a call. */ .rater{ margin-top:var(--space-4) } .rater .rp{ border:1px solid var(--line-rule); border-radius:var(--radius-xs); border-left:3px solid var(--line-rule); padding:var(--space-4); margin-bottom:var(--space-3); background:var(--surface-raised) } .rater .rp[data-best="1"]{ border-left-color:var(--flash-500) } .rater .rp[data-verdict="no"]{ opacity:.6 } .rater .rp-h{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2) var(--space-3) } .rater .rp-h h4{ margin:0; font-size:var(--body-sm); font-weight:700; color:var(--text-display) } .rater .rp-h .rp-c{ font-family:var(--font-data); font-size:var(--data-sm); letter-spacing:var(--data-tracking); text-transform:uppercase; font-weight:700; color:var(--text-muted) } .rater .rp-h .rp-pay{ margin-left:auto; font-family:var(--font-data); font-variant-numeric:tabular-nums; font-size:var(--body-sm); font-weight:700; color:var(--text-display) } .rater .v{ display:inline-block; border-radius:var(--radius-pill); padding:2px 9px; font-family:var(--font-sans); font-size:var(--body-xs); font-weight:700; white-space:nowrap } .rater .v[data-v="issues"]{ background:var(--jade-100); color:var(--text-positive) } .rater .v[data-v="likely"]{ background:var(--jade-100); color:var(--text-positive) } .rater .v[data-v="only_if"]{ background:var(--amber-100); color:var(--text-caution) } .rater .v[data-v="no"]{ background:var(--surface-accent-soft); color:var(--text-alert) } .rater .rp-why{ margin:var(--space-3) 0 0; padding:0; list-style:none } .rater .rp-why li{ font-size:var(--body-xs); color:var(--text-muted); padding:2px 0 } .rater .rp-opts{ width:100%; border-collapse:collapse; margin-top:var(--space-3) } .rater .rp-opts th{ text-align:left; font-family:var(--font-data); font-size:var(--data-sm); letter-spacing:var(--data-tracking); text-transform:uppercase; color:var(--text-muted); font-weight:700; padding:0 0 4px; border-bottom:1px solid var(--line-hairline) } .rater .rp-opts td{ padding:5px 0; border-bottom:1px solid var(--line-hairline); font-size:var(--body-sm) } .rater .rp-opts .n{ font-family:var(--font-data); font-variant-numeric:tabular-nums; text-align:right } .rater .rp-opts .a{ text-align:right; width:1%; white-space:nowrap } .rater .rp-src{ margin:var(--space-3) 0 0; font-size:var(--body-xs); color:var(--text-muted) } .rater .rp-none{ margin:var(--space-3) 0 0; padding:var(--space-3) var(--space-4); border-left:3px solid var(--line-rule); background:var(--surface-sunken); font-size:var(--body-xs); color:var(--text-muted) } .rater .rp-cb{ color:var(--text-caution) } .rater .rater-foot{ margin-top:var(--space-4); font-size:var(--body-xs); color:var(--text-muted) } @media (max-width:900px){ .rater .rp-h .rp-pay{ margin-left:0; flex-basis:100% } } /* ---- The copy sheet dock ------------------------------------------------- Floats over the console so the agent can read it into the carrier's e-app with the console still on whatever stage they were on. Minimise parks it as the chip; the chip brings it back. Square corners, two-layer navy shadow, one accent — the same rules as every other panel. */ .sheetdock{ position:fixed; right:var(--space-5); bottom:var(--space-5); z-index:60; width:min(440px, calc(100vw - var(--space-5) * 2)); max-height:min(70vh, 640px); display:flex; flex-direction:column; background:var(--surface-page); border:1px solid var(--line-strong); border-radius:var(--radius-xs); box-shadow:0 1px 2px rgba(8,18,34,.18), 0 18px 40px rgba(8,18,34,.22) } .sheetdock .sd-head{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding:var(--space-3) var(--space-4); border-bottom:1px solid var(--line-rule); background:var(--surface-raised) } /* Three actions and a carrier name do not fit one 375px row — "Copy all" wrapped to two lines and the title truncated to an ellipsis. Never let the buttons wrap; on a phone the title takes its own line instead. */ .sheetdock .sd-head .btn{ white-space:nowrap } .sheetdock .sd-head b{ font-size:var(--body-sm); color:var(--text-display); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .sheetdock .sd-head .grow{ flex:1 } .sheetdock .sd-msg{ margin:0; padding:6px var(--space-4); font-size:var(--body-xs); color:var(--text-muted) } .sheetdock .sd-msg:empty{ display:none } .sheetdock .sd-body{ margin:0; padding:0 var(--space-4) var(--space-4); overflow-y:auto } .sheetchip{ position:fixed; right:var(--space-5); bottom:var(--space-5); z-index:60; display:inline-flex; align-items:center; gap:var(--space-2); background:var(--mid-900, #081222); color:#fff; border:0; border-radius:var(--radius-xs); padding:11px var(--space-4); font-family:var(--font-sans); font-size:var(--body-xs); font-weight:700; cursor:pointer; box-shadow:0 1px 2px rgba(8,18,34,.18), 0 10px 24px rgba(8,18,34,.22) } .sheetchip:hover{ filter:brightness(1.15) } /* HIDING THEM ACTUALLY HAS TO WORK. `display:flex` and `display:inline-flex` above are author styles and they beat the user-agent sheet's `[hidden]{display:none}` — so `el.hidden = true` set the attribute, the JS read it back correctly, and both the dock AND the chip stayed on screen, stacked on each other. Found on a phone, 2026-09-15. Any element whose visibility is toggled by `hidden` needs this the moment its display is set by a class. */ .sheetdock[hidden], .sheetchip[hidden]{ display:none } /* ---- Recommendations on the rater --------------------------------------- Green is earned: appointed, priced, and a confidence band of good or better. At most two, off the top of the ranking. */ .rater .rp[data-rec="1"]{ border-left-color:var(--jade-500); background:var(--jade-50, var(--surface-raised)) } .rater .rp-rec{ display:inline-block; border-radius:var(--radius-pill); padding:2px 9px; background:var(--jade-500); color:#fff; font-family:var(--font-sans); font-size:var(--body-xs); font-weight:700 } .rater .rp-conf{ font-family:var(--font-data); font-variant-numeric:tabular-nums; font-weight:700 } .rater .rp-conf[data-band="strong"], .rater .rp-conf[data-band="good"]{ color:var(--text-positive) } .rater .rp-conf[data-band="workable"], .rater .rp-conf[data-band="long_shot"]{ color:var(--text-caution) } .rater .rp-conf[data-band="no"]{ color:var(--text-muted) } .rater .rp-acts{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); margin-top:var(--space-3) } .rater .rp-adv{ margin:var(--space-3) 0 0; padding:var(--space-3) var(--space-4); border-left:3px solid var(--flash-500); background:var(--surface-accent-soft); font-size:var(--body-xs); color:var(--text-alert) } .rater .rp-adv label{ display:flex; gap:var(--space-2); align-items:flex-start; margin-top:var(--space-2); font-weight:600; cursor:pointer } .rater .rp-why-conf{ margin:var(--space-2) 0 0; font-size:var(--body-xs); color:var(--text-muted) } .rater .rater-attempt{ margin:0 0 var(--space-3); padding:var(--space-3) var(--space-4); border-left:3px solid var(--flash-500); background:var(--surface-accent-soft); font-size:var(--body-xs) } /* Phone. The breakpoint is 760px to match the shell's own — that is where the navy rail becomes a fixed bottom tab bar (`.rail`, z-index 60, height `--tabbar-h` plus the iOS home-indicator inset). Sitting at `bottom:0` put the dock and the chip underneath it. `--tabbar-h` is declared on `.app` and these two are siblings of it, not descendants, so the 64px fallback is the value that actually applies — it is not decoration. */ @media (max-width:760px){ .sheetdock{ right:0; left:0; width:auto; max-height:64vh; border-radius:0; border-left:0; border-right:0; bottom:calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px)) } /* Title on its own line, the three actions right-aligned underneath it. */ .sheetdock .sd-head b{ flex:1 1 100%; white-space:normal } .sheetchip{ right:var(--space-4); bottom:calc(var(--tabbar-h, 64px) + env(safe-area-inset-bottom, 0px) + var(--space-3)) } /* Mid-call, one-handed: 44px minimum, the same rule as every other tap target on this page. */ #sd-min, #sd-close, #sd-copy, .sheetchip{ min-height:44px } } /* A product below the caller's own tier: visible, dimmed, never green. It pays more and it is worse for the client — the rater shows it and says so. */ .rater .rp[data-over="1"]{ opacity:.72; border-left-color:var(--amber-500, var(--line-rule)) } /* An estimated price is never allowed to look like a book rate. Amber, not the flash red (that accent belongs to one primary action per view), and the `≈` carries the meaning on its own for anyone who cannot see the colour. */ .rater .v.est-chip{ background:var(--amber-100); color:var(--text-caution) } .rater .rp-opts td.n.est{ color:var(--text-caution) } .rater .rp-est{ margin:var(--space-3) 0 0; padding:var(--space-3) var(--space-4); border-left:3px solid var(--amber-500, var(--line-rule)); background:var(--amber-100); font-size:var(--body-xs); color:var(--text-caution) }