:root{ /* ---- brand --------------------------------------------------------- * R6 · unchanged hues. The complaint was not the colours, it was that * everything on the page competed at the same weight. Colour is now * RATIONED — status, actions, and the one thing you should look at — * and the work is done by space and type instead. */ --navy:#0D4390; --navy-d:#0A3573; --navy-l:#E9F0FB; --navy-xl:#F3F7FD; /* G1d · no teal on any surface (G1b's rule; the owner, 7 Oct 2026: "no need for that green outlined box"): the token keeps its * name for the older CSS that reads it. CD1a · NO PURPLE either (the owner, 7 Oct 2026: "get rid of the purple color and * replace it with something matching more the platform color pallet. like light blue"): the family is the platform's own * blue now, by reference, so it follows the action blue in both themes (and Rescue Blue inside the EMS scope). */ --teal:var(--accent); --teal-d:var(--on-accent-soft); --teal-l:var(--accent-soft); /* G1d · ONE STACKING ORDER for every surface: the page, its sticky bars, tips, the scrim, the drawer, a question ("Are you * sure?"), a toast. Every new layer takes one of these, never a number of its own (core/glass.php glass_drawer_css()). */ --z-page:0; --z-bar:40; --z-tip:60; --z-scrim:80; --z-drawer:90; --z-ask:95; --z-toast:300; /* the same names the portals used, so their CSS reads unchanged */ --nav:var(--navy); --nav-d:var(--navy-d); --nav-l:var(--navy-l); --card:var(--surface); --mut:var(--muted); /* ---- surfaces ------------------------------------------------------ * A warmer page ground and a pure-white card give the card its edge * without a hard grey outline round every one of them, which is what * made a long page read as a wall of boxes. */ --bg:#F5F6F9; --surface:#FFFFFF; --surface-2:#F7F8FB; --surface-3:#EFF1F6; --paper:#FFFFFF; /* R45 · a document shown as it will look (a sent email): white in BOTH themes, on purpose */ --line:#E4E7EE; --line-s:#EEF0F5; --hair:rgba(16,24,40,.07); --hdr-bg:rgba(255,255,255,.86); --ring:rgba(13,67,144,.16); --chev-img:url("data:image/svg+xml;utf8,"); /* ink */ /* R8 · A-01: --faint was #8C97A8 — 2.95:1 on white, 2.61:1 on --surface-3, * and it is used as 10-12px text in 21 places (timestamps, the build stamp, * breadcrumb separators, keyboard hints, empty-state captions). WCAG AA * wants 4.5:1 for text that size. These two values are the LIGHTEST that * clear 4.5:1 against the darkest surface each theme puts them on * (--surface-3 #EFF1F6 light, #222B3A dark), so the three-tier ink * hierarchy ink > muted > faint is preserved rather than flattened: * light #666F7B → 5.09:1 on white, 4.51:1 on --surface-3 (muted is 5.98) * dark #8692A4 → 5.99:1 on --bg, 4.52:1 on --surface-3 (muted is 6.72) * --faint is also a background in two places (.tdot, .jvd); both carry * white glyphs, so darkening improves those too. */ --ink:#0B1220; --muted:#5A6474; --faint:#666F7B; /* tones */ --ok:#0B7A6F; --ok-bg:#E3F5F2; --warn:#8A4B00; --warn-bg:#FFF1D6; --bad:#B42318; --bad-bg:#FEE4E2; --info:#1849A9; --info-bg:#E9F0FB; /* R16 · text ON a filled accent. White in light mode; in dark mode the accents * turn light, so the text on them turns near-black (DS audit, 6 to 12:1). */ --on-navy:#FFFFFF; --on-teal:#FFFFFF; --on-bad:#FFFFFF; --on-ok:#FFFFFF; /* shape */ --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --pill:999px; --sh:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04); --sh-lg:0 12px 32px rgba(16,24,40,.12),0 2px 6px rgba(16,24,40,.06); --sh-card:0 1px 2px rgba(16,24,40,.04),0 4px 12px rgba(16,24,40,.04); /* ---- rhythm -------------------------------------------------------- * R6 · the single biggest change on every screen. Page padding 20→28 * and the gap between cards 16→22, so a page breathes instead of * stacking. Everything else on the page follows from these two. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --pad:28px; --gap:22px; /* chrome */ --hh:56px; --tabh:60px; --sw:264px; --swc:72px; --tap:44px; --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px); /* ---- type ---------------------------------------------------------- * R6 · a real gap between a heading and the words under it. 24/15 read * as one grey texture; 28/17 against 14.5 body tells the eye where a * section starts without needing a box round it. */ --font:Inter,-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --fs:15.5px; --fs-sm:13.5px; --fs-xs:13px; --fs-2xs:12px; --fs-lg:17px; --fs-h1:28px; --fs-h2:18px; /* Cleanup (2027-02-08.1) · the owner (2 Oct 2026): "a slighter increase in the font size across the board, especially in * agreements boxes". Every step went up about 1px (was 14.5 / 12.5 / 12 / 11 / 16; h2 17). Headings kept their size or * went up 1px, so the hierarchy holds. The ~250 literal sizes the older screens carried (13px, 12px ...) now point at * these steps (tools/lookscan.js "TINY" keeps anything under 12px out). */ /* R58 · --fs-2xs (11px) is the smallest step: the office's uppercase labels, badges and the build stamp (it replaced ten literal sizes from 10px to 11.5px in lib.php). Nothing smaller exists. */ /* R56 · the reading size of a SURFACE. The office keeps --fs (density); the two portals set 16px (nurses on * phones abroad, often outdoors). --fs-page / --fs-card / --fs-row are the three heading steps the UI review * fixed (page 24px on phones and 28px on a computer, card 18px, row title 16px). */ --fs-body:var(--fs); --fs-page:24px; --fs-card:18px; --fs-row:16px; --lh-body:1.5; --lh-head:1.25; --measure:68ch; /* R56 · motion (UI review §2.3, owner 28 Sep 2026: "animations fading cards"). Press, state, entrance. Only * opacity and transform ever animate, nothing loops, and prefers-reduced-motion switches all of it off below. */ --dur-1:120ms; --dur-2:200ms; --dur-3:260ms; --ease:cubic-bezier(.2,.8,.2,1); color-scheme:light; } /* ====================================================================== R6 · DARK MODE. Same token NAMES, different values — which is why this is a block of colours rather than a second stylesheet. Three states, and the order matters: the media query is what an untouched install follows, and the two [data-theme] rules let a person's own choice beat their operating system in both directions. ====================================================================== */ @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --navy:#5B93E8; --navy-d:#7FADEE; --navy-l:#16233A; --navy-xl:#131C2B; --teal:var(--accent); --teal-d:var(--on-accent-soft); --teal-l:var(--accent-soft); --bg:#0C111B; --surface:#151B26; --surface-2:#1B2230; --surface-3:#222B3A; --line:#2A3444; --line-s:#222B3A; --hair:rgba(255,255,255,.07); --hdr-bg:rgba(21,27,38,.88); --ring:rgba(91,147,232,.28); --chev-img:url("data:image/svg+xml;utf8,"); --ink:#E9EDF4; --muted:#A8B3C4; --faint:#8692A4; --ok:#3FCFAE; --ok-bg:#0E2B26; --warn:#F0B45C; --warn-bg:#2E2110; --bad:#F98A80; --bad-bg:#33191A; --info:#7FADEE; --info-bg:#16233A; --on-navy:#0C111B; --on-teal:#0C111B; --on-bad:#0C111B; --on-ok:#0C111B; --sh:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3); --sh-lg:0 12px 32px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4); --sh-card:0 1px 2px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.28); color-scheme:dark; } } :root[data-theme="dark"]{ --navy:#5B93E8; --navy-d:#7FADEE; --navy-l:#16233A; --navy-xl:#131C2B; --teal:var(--accent); --teal-d:var(--on-accent-soft); --teal-l:var(--accent-soft); --bg:#0C111B; --surface:#151B26; --surface-2:#1B2230; --surface-3:#222B3A; --line:#2A3444; --line-s:#222B3A; --hair:rgba(255,255,255,.07); --hdr-bg:rgba(21,27,38,.88); --ring:rgba(91,147,232,.28); --chev-img:url("data:image/svg+xml;utf8,"); --ink:#E9EDF4; --muted:#A8B3C4; --faint:#8692A4; --ok:#3FCFAE; --ok-bg:#0E2B26; --warn:#F0B45C; --warn-bg:#2E2110; --bad:#F98A80; --bad-bg:#33191A; --info:#7FADEE; --info-bg:#16233A; --on-navy:#0C111B; --on-teal:#0C111B; --on-bad:#0C111B; --on-ok:#0C111B; --sh:0 1px 2px rgba(0,0,0,.4),0 1px 3px rgba(0,0,0,.3); --sh-lg:0 12px 32px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.4); --sh-card:0 1px 2px rgba(0,0,0,.35),0 4px 12px rgba(0,0,0,.28); color-scheme:dark; } /* A white brand logo on a dark ground is usually a white BOX. Nudge the few images that are drawn for light backgrounds rather than ban them. */ :root[data-theme="dark"] img.onlight{background:#FFFFFF;border-radius:6px;padding:2px} @media(prefers-color-scheme:dark){:root:not([data-theme="light"]) img.onlight{background:#FFFFFF;border-radius:6px;padding:2px}} /* R59d · the owner (28 Sep 2026): the navy and teal StaffDash logo vanished on the navy client bar and on dark headers. Wherever the app draws its own logo it now sits on a white plate, in BOTH themes (--paper is white in both). */ .logoplate{display:inline-flex;align-items:center;justify-content:center;background:var(--paper);border-radius:8px;padding:3px 6px;box-shadow:0 0 0 1px var(--hair);flex:none;line-height:0} .logoplate img{display:block} @media(min-width:821px){ :root{ --fs-page:28px; } } @media(max-width:820px){ :root{ --fs:16px; --fs-sm:14px; --fs-h1:26px; --fs-h2:18px; --pad:18px; --gap:14px; } } @media(max-width:400px){ :root{ --pad:15px; --gap:12px; } } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} html,body{margin:0;padding:0} body{ background:var(--bg);color:var(--ink); font:400 var(--fs)/1.5 var(--font); -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; font-feature-settings:"cv11","ss01"; } h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.01em;color:var(--ink)} h1{font-size:var(--fs-h1);line-height:1.2;letter-spacing:-.02em} h2{font-size:var(--fs-h2);line-height:1.3} h3{font-size:var(--fs);margin:0 0 6px} p{margin:0 0 10px} a{color:var(--navy);text-decoration:none} a:hover{text-decoration:underline} small,.small{font-size:var(--fs-sm);color:var(--muted)} .muted{color:var(--muted)} code,kbd{font-family:var(--mono);font-size:var(--fs-xs)} img,svg,video{max-width:100%} button,input,select,textarea{font-family:inherit} /* Fourteen pages carry a ".frm input{width:100%}" rule; a checkbox or radio caught by it becomes a 300px-wide box and pushes its label text off the screen. "html input[type=…]" is (0,1,2) and out-ranks any ".x input" rule. (A doubled attribute selector did not, in Chromium.) */ html input[type=checkbox],html input[type=radio]{width:18px;height:18px;min-height:0;padding:0;flex:none;accent-color:var(--navy);-webkit-appearance:auto;appearance:auto;border-radius:0;box-shadow:none} :focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:6px} ::selection{background:var(--navy-l)} /* R56 · the entrance: a card or row fades in and rises 8px on first paint. The first six are staggered 40ms apart (.fx1 to .fx6 from ui_fx(), or data-fx="1" to "6" set on the finished page); nothing after the sixth animates, so a long list never waits. Pure CSS: nothing waits on JavaScript, and "both" means the end state (fully shown) holds if it never runs. */ @keyframes sdfxin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .fx,[data-fx]{animation:sdfxin var(--dur-3) var(--ease) both} .fx2,[data-fx="2"]{animation-delay:40ms}.fx3,[data-fx="3"]{animation-delay:80ms}.fx4,[data-fx="4"]{animation-delay:120ms}.fx5,[data-fx="5"]{animation-delay:160ms}.fx6,[data-fx="6"]{animation-delay:200ms} @media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}} /* a horizontal rail: chips or tabs that scroll sideways on a phone instead of wrapping into three rows */ .rail{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px; mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} .rail::-webkit-scrollbar{display:none} .rail>*{flex:0 0 auto;white-space:nowrap} /* R6 · the theme button. Styled here rather than in any one shell, because the office console, both portals and the public pages all print the same button and each of them names its icon buttons differently. */ .thmb{width:40px;height:40px;min-height:0;margin:0;padding:0;border:0;background:transparent;color:var(--muted); border-radius:10px;display:inline-grid;place-items:center;cursor:pointer;flex:none} .thmb:hover{background:var(--surface-2);color:var(--ink)} .thmb svg{display:block} :root[data-theme="dark"] .thmb svg circle{fill:currentColor} /* R27 · the OPEN dropdown list. The closed box has been rounded since R6, but the list it opens was the operating system's own square menu, which the owner flagged ("all drop downs have a square design"). Browsers that support customizable selects (Chrome and Edge 135+, which is what the office uses) draw it with the page's own look: rounded, the surface color, the theme. Every other browser keeps its native list, which is the safe fallback (and on iPhone the native wheel is the better control anyway). Multi-selects and list boxes (size=N) are left alone: they never open a menu. */ /* Sixty-odd selects carry an inline padding (padding:6px 8px and the like) that wiped out the room for the chevron, so the arrow sat on the text (the Owner picker on a record was the worst). The room is kept here. */ select:not([multiple]):not([size]){padding-right:30px!important} @supports (appearance:base-select){ select:not([multiple]):not([size]),select:not([multiple]):not([size])::picker(select){appearance:base-select} select:not([multiple]):not([size])::picker-icon{display:none} select:not([multiple]):not([size]){white-space:nowrap;text-overflow:ellipsis;overflow:hidden} select:not([multiple]):not([size])::picker(select){border:1px solid var(--line);border-radius:var(--r);background:var(--glass-menu,var(--surface));color:var(--ink); box-shadow:var(--sh-lg);padding:var(--s1);margin-top:var(--s1);max-height:min(360px,60vh);overflow-y:auto} select:not([multiple]):not([size]) option{padding:8px 10px;border-radius:var(--r-sm);min-height:36px;display:flex;align-items:center;gap:8px;color:var(--ink);background:transparent;cursor:pointer} select:not([multiple]):not([size]) option:hover,select:not([multiple]):not([size]) option:focus-visible{background:var(--surface-2);outline:none} select:not([multiple]):not([size]) option:checked{background:var(--navy-xl);color:var(--navy);font-weight:600} select:not([multiple]):not([size]) option:disabled{color:var(--faint);cursor:default} select:not([multiple]):not([size]) option::checkmark{color:var(--navy)} select:not([multiple]):not([size]) optgroup{color:var(--muted);font-weight:600;font-size:var(--fs-sm);padding:6px 0 2px} select:not([multiple]):not([size]) optgroup option{font-weight:400;font-size:var(--fs)} }:root{ --metal-page:var(--bg); --metal-card:linear-gradient(var(--surface),var(--surface)); --metal-glow:var(--sh-card); --metal-pill:var(--surface); --metal-pill-line:transparent; /* the quote's pills: white, so the gold rating stars keep 3:1 */ --metal-tile:var(--glass); --metal-tile-line:transparent; --metal-opt:var(--surface); --metal-opt-line:transparent; --metal-opt-on:var(--navy-l); --metal-btn:linear-gradient(180deg,var(--btn-top),var(--btn)); --metal-btn-line:transparent; --metal-on-btn:#FFFFFF; --metal-btn-sh:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px -12px var(--btn); --metal-deep:linear-gradient(150deg,var(--sdnavy-top),var(--sdnavy)); --metal-on-deep:#FFFFFF; --metal-on-deep-2:#E6EEFB; --metal-band:linear-gradient(90deg,var(--sdnavy),var(--sdnavy-top)); --metal-bar:linear-gradient(90deg,var(--lt2),var(--btn)); --metal-track:var(--soft-2); --metal-ink:var(--ink); --metal-steel:var(--muted); --metal-accent:var(--sd-teal); }/* ===== R62 · glass tokens (the mockup's own values) and the older names re-pointed ===== */ :root{ --glass:rgba(255,255,255,.62); --glass-2:rgba(255,255,255,.82); --glass-work:rgba(255,255,255,.86); --glass-menu:#FFFFFF; --sheen:rgba(255,255,255,.75); --shade:rgba(20,40,80,.10); --shade-2:rgba(20,40,80,.20); --blur:22px; --zebra:rgba(14,21,34,.035); --soft:#E6E9EE; --soft-2:#DCE0E7; --on-soft:#0E1522; --btn:#1F63C9; --btn-top:#3E84EA; --on-btn:#FFFFFF; --accent:#1F63C9; --accent-soft:rgba(31,99,201,.12); --on-accent-soft:#154A99; --sdnavy:#0D4390; --sdnavy-top:#2A63B8; --sd-bg:#E8EFF9; --sd-ink:#0D4390; --sd-teal:var(--sd-ink); /* G1d · no teal on any surface; CD1a · no purple: StaffDash navy */ /* G1b · the SOFT BLUE glow (owner, 5 Oct 2026, claude/ADDENDUM-G-AFTER-G1-STARTED.md item 3): very pale blues blended into the white, no teal (R62's glow was a mid blue, a TEAL and a light blue). The sheets' glow reads --b1 and --b2, so they turn soft blue too. */ --b1:#C3D8FF; --b2:#D3E2FF; --b3:#E0EAFF; --av-1:#39CFC9; --av-2:#1F7FD6; --lt1:#12C4BE; --lt2:#0DA8B0; --lt3:#1C6ED0; --display:"Sora","Segoe UI",system-ui,sans-serif; /* the mockup's display sizes (headings of the greeting, the number tiles), next to the unchanged type scale */ --fs-kpi:30px; --fs-kpi-sm:24px; --fs-display-sm:30px; --fs-card-lg:22px; --spring:cubic-bezier(.34,1.56,.64,1); /* G1 · the slide-up sheets' scrim, the still status light, the solid panel name of the mockup */ --scrim:rgba(14,21,34,.30); --live:#12A150; --solid:var(--surface); --sheet-sh:inset 0 1px 0 var(--sheen),0 -24px 60px -24px var(--shade-2); --glass-sh:inset 0 1px 0 var(--sheen),0 12px 32px -16px var(--shade-2),0 2px 6px -2px var(--shade); /* re-pointed: the ground, the panels, the ink */ --bg:#EDF1F7; --surface:#FFFFFF; --surface-2:#F4F6FA; --surface-3:#E6E9EE; /* NO OUTLINES (the owner's rule): the hairline tokens are transparent, so the ~500 older rules that drew a 1px edge round a card, a chip, a box or under a row draw nothing; surfaces separate by tone, space and soft shadow. Boxes you type in have a soft fill instead (and show an edge when focused). --divider is the visible tone for the few places a line MEANS something (a timeline, a meter's track, a sheet's handle). */ --line:transparent; --line-s:transparent; --hair:transparent; --divider:#DCE0E7; --hdr-bg:var(--glass-work); --ring:rgba(31,99,201,.22); --ink:#0E1522; --muted:#4E596D; --faint:#5E6879; /* --navy has always meant "the action color" in this code (links, selected states, buttons, focus): it is the mockup's accent blue now. StaffDash's own navy is --sdnavy, used on StaffDash things only. */ --navy:#1F63C9; --navy-d:#154A99; --navy-l:#E4ECF8; --navy-xl:#F0F5FC; --ok:#0B7A3E; --ok-bg:#E2F3E9; --warn:#8A5A00; --warn-bg:#F9EEDA; --bad:#A42828; --bad-bg:#F9E2E2; --info:#154A99; --info-bg:#E4ECF8; --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px; --sh:0 2px 6px -2px var(--shade); --sh-card:0 12px 32px -18px var(--shade-2),0 2px 6px -2px var(--shade); --sh-lg:0 24px 48px -20px rgba(20,40,80,.35),0 4px 12px -4px var(--shade); --font:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --glass:rgba(24,33,52,.55); --glass-2:rgba(24,33,52,.80); --glass-work:rgba(20,28,45,.88); --glass-menu:#141D2F; --sheen:rgba(255,255,255,.14); --shade:rgba(0,0,0,.35); --shade-2:rgba(0,0,0,.60); --zebra:rgba(255,255,255,.04); --soft:#222A3A; --soft-2:#2C3547; --on-soft:#EAF0FA; --btn:#2F6FD9; --btn-top:#4F8DF2; --on-btn:#FFFFFF; --accent:#7DB3FF; --accent-soft:rgba(125,179,255,.14); --on-accent-soft:#B9D6FF; --sdnavy:#1E4E9E; --sdnavy-top:#3668BD; --sd-bg:#12284D; --sd-ink:#A9C8FF; --sd-teal:var(--sd-ink); --b1:#1A3A78; --b2:#172F66; --b3:#1C2F63; /* G1b · the recommended dark soft blue: deep, dimmer blues (R62's dark glow had a teal) */ --scrim:rgba(0,0,0,.55); --live:#3DDC84; --lt1:#3FE3D8; --lt2:#1CC6C2; --lt3:#4A94F2; --bg:#060A13; --surface:#101827; --surface-2:#151E30; --surface-3:#1C2638; --line:transparent; --line-s:transparent; --hair:transparent; --divider:#2C3547; --ring:rgba(125,179,255,.30); --ink:#EAF0FA; --muted:#9AA7BD; --faint:#8692A4; --navy:#7DB3FF; --navy-d:#A9CCFF; --navy-l:#1F2E45; --navy-xl:#162235; --ok:#7BE8A8; --ok-bg:#12291F; --warn:#FFD27A; --warn-bg:#2B2212; --bad:#FF9C9C; --bad-bg:#321818; --info:#B9D6FF; --info-bg:#1F2E45; --sh:0 2px 6px -2px rgba(0,0,0,.5); --sh-card:0 12px 32px -18px rgba(0,0,0,.7),0 2px 6px -2px rgba(0,0,0,.4); --sh-lg:0 24px 48px -20px rgba(0,0,0,.8),0 4px 12px -4px rgba(0,0,0,.5); color-scheme:dark } } :root[data-theme="dark"]{ --glass:rgba(24,33,52,.55); --glass-2:rgba(24,33,52,.80); --glass-work:rgba(20,28,45,.88); --glass-menu:#141D2F; --sheen:rgba(255,255,255,.14); --shade:rgba(0,0,0,.35); --shade-2:rgba(0,0,0,.60); --zebra:rgba(255,255,255,.04); --soft:#222A3A; --soft-2:#2C3547; --on-soft:#EAF0FA; --btn:#2F6FD9; --btn-top:#4F8DF2; --on-btn:#FFFFFF; --accent:#7DB3FF; --accent-soft:rgba(125,179,255,.14); --on-accent-soft:#B9D6FF; --sdnavy:#1E4E9E; --sdnavy-top:#3668BD; --sd-bg:#12284D; --sd-ink:#A9C8FF; --sd-teal:var(--sd-ink); --b1:#1A3A78; --b2:#172F66; --b3:#1C2F63; /* G1b · the recommended dark soft blue: deep, dimmer blues (R62's dark glow had a teal) */ --scrim:rgba(0,0,0,.55); --live:#3DDC84; --lt1:#3FE3D8; --lt2:#1CC6C2; --lt3:#4A94F2; --bg:#060A13; --surface:#101827; --surface-2:#151E30; --surface-3:#1C2638; --line:transparent; --line-s:transparent; --hair:transparent; --divider:#2C3547; --ring:rgba(125,179,255,.30); --ink:#EAF0FA; --muted:#9AA7BD; --faint:#8692A4; --navy:#7DB3FF; --navy-d:#A9CCFF; --navy-l:#1F2E45; --navy-xl:#162235; --ok:#7BE8A8; --ok-bg:#12291F; --warn:#FFD27A; --warn-bg:#2B2212; --bad:#FF9C9C; --bad-bg:#321818; --info:#B9D6FF; --info-bg:#1F2E45; --sh:0 2px 6px -2px rgba(0,0,0,.5); --sh-card:0 12px 32px -18px rgba(0,0,0,.7),0 2px 6px -2px rgba(0,0,0,.4); --sh-lg:0 24px 48px -20px rgba(0,0,0,.8),0 4px 12px -4px rgba(0,0,0,.5); color-scheme:dark } /* G2c · the office (work surface) has no teal (G1b's rule). CD1a · and no purple (the owner, 7 Oct 2026): the mint tint, teal edges and teal words G2c turned blue-violet are the platform's light blue now, the same in the office and the signed-in client portal (body.app) as everywhere else. */ html[data-surface="work"],body.app{ --teal:var(--accent); --teal-d:var(--on-accent-soft); --teal-l:var(--accent-soft); --on-teal:var(--on-btn) } /* G3 · and the signed-in client portal (body.app) */ @media(prefers-color-scheme:dark){ html[data-surface="work"]:not([data-theme="light"]),html:not([data-theme="light"]) body.app{ --teal:var(--accent); --teal-d:var(--on-accent-soft); --teal-l:var(--accent-soft); --on-teal:#0C111B } } html[data-surface="work"][data-theme="dark"],html[data-theme="dark"] body.app{ --teal:var(--accent); --teal-d:var(--on-accent-soft); --teal-l:var(--accent-soft); --on-teal:#0C111B } @media(max-width:820px){ :root{ --blur:14px } } /* G3b · EMS COLORS: RESCUE BLUE (the owner's pick, 6 Oct 2026; claude/BRIEF-G3b-TWO-BOARDS-ONE-ENGINE.md section 7). Anything EMS wears it: the EMS board, an EMS job's page, the employer sign-up when its board is EMS (the four EMS tiles, "EMS staff", the setup panel, Continue) and Book staff's EMS card. A scope, on or on one box: only the action and highlight colors change (deep rescue blue buttons, signal orange highlights); --navy is the old name of the action color. Nursing, the office and the Career Profile stay soft blue. Night Shift and Tactical are not built (EMSPalettes.dc.html). */ .ems{ --btn:#0B4FB3; --btn-top:#2E72DA; --on-btn:#FFFFFF; --accent:#0B4FB3; --accent-soft:rgba(11,79,179,.10); --on-accent-soft:#083B86; --navy:#0B4FB3; --navy-d:#083B86; --ring:rgba(11,79,179,.22); --hl:#C2410C; --hl-soft:rgba(234,88,12,.12); --on-hl-soft:#9A3412 } @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]).ems,:root:not([data-theme="light"]) .ems{ --btn:#2563D9; --btn-top:#4A84EE; --on-btn:#FFFFFF; --accent:#8DB6FF; --accent-soft:rgba(141,182,255,.14); --on-accent-soft:#BCD5FF; --navy:#8DB6FF; --navy-d:#BCD5FF; --ring:rgba(141,182,255,.30); --hl:#FF8A4C; --hl-soft:rgba(255,138,76,.16); --on-hl-soft:#FFC09B } } :root[data-theme="dark"].ems,:root[data-theme="dark"] .ems{ --btn:#2563D9; --btn-top:#4A84EE; --on-btn:#FFFFFF; --accent:#8DB6FF; --accent-soft:rgba(141,182,255,.14); --on-accent-soft:#BCD5FF; --navy:#8DB6FF; --navy-d:#BCD5FF; --ring:rgba(141,182,255,.30); --hl:#FF8A4C; --hl-soft:rgba(255,138,76,.16); --on-hl-soft:#FFC09B } /* the EMS board's glow: Rescue Blue's blues with one faint orange (the owner-approved exception to "blue only", EMS board only) */ html.emsglow{ --b1:#BCD2FF; --b2:#FFD9C2; --b3:#D6E3FF } @media(prefers-color-scheme:dark){ html.emsglow:not([data-theme="light"]){ --b1:#123C80; --b2:#5A260C; --b3:#0D2759 } } html.emsglow[data-theme="dark"]{ --b1:#123C80; --b2:#5A260C; --b3:#0D2759 }/* ===== R62 · base: type, the glow, the logo ===== */ body{font-family:var(--font);background-color:var(--bg)} h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.02em} h1{font-weight:300} h2{font-weight:400} /* design-ok: Sora display weights from the approved glass mockup */ h3,h4{font-family:var(--font);font-weight:600;letter-spacing:0} code,kbd,.mono,.num{font-family:var(--mono)} .num,.mono{font-variant-numeric:tabular-nums} .glbl{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} ::selection{background:var(--accent-soft)} /* The glow the glass floats over: three soft colored lights, one fixed layer behind the page (no markup: every shell gets it). Work screens show it faint, portals half, public pages full and drifting. */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background:radial-gradient(42vmax 42vmax at 80% -8%,var(--b1),transparent 64%),radial-gradient(30vmax 30vmax at 100% 40%,var(--b2),transparent 62%),radial-gradient(38vmax 38vmax at 0% 100%,var(--b3),transparent 64%); /* design-ok: the approved glass mockup (buttons, the glow, the bars) */ opacity:.75} html[data-surface="work"] body::before{opacity:.32} html[data-surface="portal"] body::before{opacity:.55} /* G1b · soft blue (addendum item 3): the glow is blurred wide (120px, the layer reaches past the edges so its rim does not show) so it fades into the white instead of showing as patches; its strength per surface, light / dark: public .55 / .40, portals .45 / .32, work .30 / .22 */ body::before{inset:-160px;filter:blur(120px);opacity:.55} html[data-surface="portal"] body::before{opacity:.45} html[data-surface="work"] body::before{opacity:.30} :root[data-theme="dark"] body::before{opacity:.40} :root[data-theme="dark"][data-surface="portal"] body::before{opacity:.32} :root[data-theme="dark"][data-surface="work"] body::before{opacity:.22} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) body::before{opacity:.40} :root:not([data-theme="light"])[data-surface="portal"] body::before{opacity:.32} :root:not([data-theme="light"])[data-surface="work"] body::before{opacity:.22} } @media(max-width:820px){ body::before{background:radial-gradient(52vmax 52vmax at 90% -10%,var(--b1),transparent 62%),radial-gradient(40vmax 40vmax at 0% 100%,var(--b3),transparent 62%)} } /* design-ok: the approved glass mockup (buttons, the glow, the bars) */ @keyframes sdaura{from{transform:none}to{transform:translate3d(-3vmax,2vmax,0) scale(1.06)}} @media(prefers-reduced-motion:no-preference){ html:not([data-surface="work"]):not([data-surface="portal"]) body::before{animation:sdaura 28s var(--ease) infinite alternate} } /* design-ok: approved: the public glow drift and the sign-in card fade, off under reduced motion */ /* The built-in logo has a light and a dark drawing; the one for the theme shows (no white plate needed). */ .sdart{display:inline-flex;align-items:center;line-height:0;flex:none} .sdart img{display:block} .sdart .dk{display:none} :root[data-theme="dark"] .sdart .lt{display:none} :root[data-theme="dark"] .sdart .dk{display:block} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sdart .lt{display:none} :root:not([data-theme="light"]) .sdart .dk{display:block} } /* the sliding pill behind the selected tab (glass_js adds it where there is script; without it the tab is filled) */ .gtrack{position:relative;isolation:isolate} .gpill{position:absolute;left:0;top:0;z-index:-1;border-radius:999px;pointer-events:none;transition:transform .5s var(--spring),width .5s var(--spring),height .3s var(--ease)} /* design-ok: approved: the public glow drift and the sign-in card fade, off under reduced motion */ @media(prefers-reduced-motion:reduce){ .gpill{transition:none} } /* Rows and boxes that older screens separated ONLY with a 1px edge (now transparent) get a faint fill and rounded ends instead, so a list still reads as rows. (A page's own rule sets no background on these, so this applies.) */ .srow,.lrow,.refrow,.ntrow,.scrow,.cprow,.cpjob,.cpro,.cpshare,.cmrec .cmrow,.jrruns li,.ivtpl,.permcaps .permi,.preset label,.opts label,.steps li,.browse li a{background:var(--zebra);border-radius:14px} a.srow:hover,.browse li a:hover{background:var(--soft)} .vtog{background:var(--soft);padding:3px;gap:2px} .vtog a{border-radius:999px} /* the wordmark next to the logo on the public pages and portal bars */ .sdlock{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0} .sdlock:hover{text-decoration:none}/* ===== G1 · shared glass components (claude/BRIEF-G-THE-GLASS-LOOK.md §4) ===== */ @media (prefers-reduced-transparency:reduce){ :root{--glass:var(--surface);--glass-2:var(--surface);--glass-work:var(--surface)} .glass,.side,.hdr,.tabbar,.appbar,.pc,.card,dialog.gsheet,.gtoast{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} } .glass{position:relative;background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(1.7);backdrop-filter:blur(var(--blur)) saturate(1.7);box-shadow:var(--glass-sh);isolation:isolate} .glass::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,var(--sheen),transparent 38%);opacity:.55;pointer-events:none;z-index:-1} /* design-ok: the approved glass mockup (the sheen on a glass panel) */ html[data-surface="work"] .glass{background:var(--glass-work);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:var(--glass-2)} } .gpanel{border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0} .gph{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .gph h2{font-size:var(--fs-card-lg);margin:0} /* buttons (the base is here so a .btn looks right on every surface; the office layer refines its older sizes) */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:0 22px;border:0;border-radius:999px; background-color:var(--btn);background-image:linear-gradient(180deg,var(--btn-top),var(--btn));color:var(--on-btn);font:inherit;font-weight:600;text-decoration:none;cursor:pointer;white-space:nowrap; /* design-ok: the approved glass mockup (buttons, the glow, the bars) */ box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 22px -12px var(--btn);transition:transform .35s var(--spring),box-shadow .3s var(--ease)} /* design-ok: the approved glass mockup (buttons, the glow, the bars) */ .btn:hover{color:var(--on-btn);text-decoration:none} .btn:active{transform:scale(.96)} .btn.soft,.btn.soft:hover{background:var(--soft);background-image:none;color:var(--on-soft);box-shadow:inset 0 1px 0 var(--sheen)} .btn.soft:hover{background:var(--soft-2)} .btn.quiet,.btn.quiet:hover{background:transparent;background-image:none;color:var(--accent);box-shadow:none} .btn.quiet:hover{background:var(--accent-soft)} .btn.block{width:100%} .btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:default;transform:none} /* the owner (5 Oct 2026): the words on a blue button are WHITE, whatever an older "color:inherit" rule says */ .btn:where(:not(.ghost,.soft,.quiet,.danger,.teal)),.btn:where(:not(.ghost,.soft,.quiet,.danger,.teal)) *{color:var(--on-btn)} /* a keyboard-only ring on buttons and links; a field shows focus by brightening (below), never an outline box */ /* G1 · a field you click into: never an outline box (every surface; each shell's layer adds its brightening) */ :where(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea):focus,:where(input:not([type=checkbox],[type=radio],[type=range],[type=file]),select,textarea):focus-visible{outline:none} :where(button,a,summary,[role="button"],[tabindex]:not(input,select,textarea)):focus{outline:none} :where(button,a,summary,[role="button"],[tabindex]:not(input,select,textarea)):focus-visible{outline:2px solid var(--accent);outline-offset:3px} .gicb{width:44px;height:44px;border:0;border-radius:50%;background:var(--soft);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;flex:0 0 auto;padding:0; transition:transform .35s var(--spring),background .2s var(--ease)} .gicb:hover{background:var(--soft-2)} .gicb:active{transform:scale(.92)} .gicb.clear{background:transparent} .gicb.clear:hover{background:var(--soft)} .gicb svg{width:20px;height:20px} /* list rows */ .gqueue{display:flex;flex-direction:column;gap:6px} .gqrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 12px;min-height:var(--tap);border-radius:16px;background:var(--zebra);border:0;width:100%;text-align:left; color:var(--ink);text-decoration:none;font:inherit;cursor:pointer;transition:transform .3s var(--spring),background .2s var(--ease)} .gqrow:hover{background:var(--soft);text-decoration:none} .gqrow:active{transform:scale(.985)} .gqrow.static{cursor:default} .gqrow.static:active{transform:none} .gqrow b{font-weight:600;display:block} .gqrow small{color:var(--muted);font-size:var(--fs-sm);display:block} .gqrow time{font-family:var(--mono);font-size:var(--fs-sm);color:var(--muted);min-width:56px} .gbar{display:block;height:8px;border-radius:999px;background:var(--soft-2);overflow:hidden;min-width:60px} .gbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--lt2),var(--btn))} /* design-ok: the approved glass mockup (buttons, the glow, the bars) */ /* the status light: STILL (owner, 5 Oct 2026: no pulsing anywhere) */ .gdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--live);flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 22%,transparent)} .gdot.soon{background:var(--btn);box-shadow:0 0 0 3px var(--accent-soft)} .gdot.ring{background:var(--faint);box-shadow:none} /* the sliding pill: equal tabs, --n of them, --k the chosen one (0-based); a script sets --k, without one the chosen tab is filled */ .gpills{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);padding:4px;border-radius:999px;background:var(--soft);isolation:isolate} .gpills>.gknob{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / var(--n,2));border-radius:999px;z-index:-1;pointer-events:none; background-color:var(--btn);background-image:linear-gradient(180deg,var(--btn-top),var(--btn));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 18px -10px var(--btn); /* design-ok: the approved glass mockup (buttons, the glow, the bars) */ transform:translateX(calc(100% * var(--k,0)));transition:transform .5s var(--spring)} /* design-ok: the approved sliding pill (G1 brief §4), off under reduced motion */ .gpills>a,.gpills>button{position:relative;border:0;background:none;min-height:40px;padding:0 14px;border-radius:999px;color:var(--muted);font:inherit;font-weight:500;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;text-decoration:none; transition:color .3s var(--ease),transform .3s var(--spring)} .gpills>a:hover,.gpills>button:hover{color:var(--ink);text-decoration:none} .gpills>a:active,.gpills>button:active{transform:scale(.95)} .gpills>.on,.gpills>[aria-pressed="true"],.gpills>[aria-current="page"]{color:var(--on-btn);font-weight:600} .gpills:not(:has(>.gknob))>.on{background-color:var(--btn);background-image:linear-gradient(180deg,var(--btn-top),var(--btn))} /* design-ok: the approved glass mockup (buttons, the glow, the bars) */ /* G1 · the phone tab bars carry the sliding pill too (glass_js): a soft pill behind the current tab; the bar stays fixed */ .tabbar.gtrack{position:fixed} .tabbar .gpill{background:var(--accent-soft);border-radius:18px} .tabbar.gmoving a.on,.tabbar.gmoving>a.on{background:transparent} .gpills.soft>.gknob{background:var(--accent-soft);background-image:none;box-shadow:none} .gpills.soft>.on,.gpills.soft>[aria-pressed="true"],.gpills.soft>[aria-current="page"]{color:var(--on-accent-soft)} /* fields: a soft fill; the focused one BRIGHTENS (no outline box, owner 5 Oct 2026) */ .gfld{display:flex;flex-direction:column;gap:6px;min-width:0} .gfld>span{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500} .gfld input,.gfld select,.gfld textarea{min-height:var(--tap);border:0;border-radius:14px;background:var(--soft);padding:0 14px;font:inherit;width:100%;color:var(--ink);outline:0;box-shadow:none} .gfld textarea{padding:12px 14px;min-height:96px} .gfld input:focus,.gfld select:focus,.gfld textarea:focus{background:var(--glass-2);box-shadow:inset 0 1px 0 var(--sheen),0 8px 20px -12px var(--shade-2);outline:0} .gpair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:10px} .gpick{border:0;min-height:38px;padding:0 14px;border-radius:999px;background:var(--soft);color:var(--muted);font:inherit;font-weight:600;font-size:var(--fs-sm);cursor:pointer; transition:background .2s var(--ease),transform .3s var(--spring)} .gpick:active{transform:scale(.95)} .gpick.on,.gpick[aria-pressed="true"]{background:var(--accent-soft);color:var(--on-accent-soft)} /* the toast (optional Undo) */ .gtoast{position:fixed;left:50%;bottom:calc(24px + var(--sab));transform:translateX(-50%);z-index:300;display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 8px 6px 18px;border-radius:999px; font-weight:500;max-width:calc(100% - 32px);color:var(--ink);background:var(--glass-2);-webkit-backdrop-filter:blur(22px) saturate(1.7);backdrop-filter:blur(22px) saturate(1.7);box-shadow:var(--glass-sh);animation:gtoastIn .45s var(--spring) both} /* design-ok: the approved toast (G1 brief §4), off under reduced motion */ .gtoast .btn{min-height:40px;padding:0 16px} @keyframes gtoastIn{from{opacity:0;transform:translate(-50%,16px)}to{opacity:1;transform:translate(-50%,0)}} @media(max-width:820px){ .gtoast{bottom:calc(96px + var(--sab))} } /* the stacked logo (owner, 5 Oct 2026: the mark with "StaffDash" under it, everywhere, the folded side menu and phone bars too) */ .sdstack{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sdgap,4px);line-height:0;flex:none;text-decoration:none} .sdstack .sdm1,.sdstack .sdw1{display:block} .sdstack .sdm1{filter:drop-shadow(0 4px 8px rgba(31,99,201,.22))} /* design-ok: the approved glass mockup (the logo's soft shadow) */ .sdstack .dk{display:none} :root[data-theme="dark"] .sdstack .lt{display:none} :root[data-theme="dark"] .sdstack .dk{display:block} @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) .sdstack .lt{display:none} :root:not([data-theme="light"]) .sdstack .dk{display:block} } /* ===== G1 · THE SHEET (every menu, confirmation, detail view and form opens as one) ===== */ dialog.gsheet{position:fixed;inset:auto 0 -40px 0;margin:0 auto;width:min(580px,100%);max-width:100%;max-height:calc(88vh + 40px);max-height:calc(88dvh + 40px);overflow-y:auto;overscroll-behavior:contain; border:0;border-radius:30px 30px 0 0;padding:0 22px calc(64px + var(--sab));color:var(--ink);font:inherit; background:var(--glass-2); background:radial-gradient(120% 60% at 100% 0%,color-mix(in srgb,var(--b1) 30%,transparent),transparent 60%),radial-gradient(90% 50% at 0% 0%,color-mix(in srgb,var(--b2) 22%,transparent),transparent 60%),var(--glass-2); /* design-ok: the owner (5 Oct 2026): pop-ups match the glass theme, a soft blue and teal glow at the top */ -webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);box-shadow:var(--sheet-sh); flex-direction:column;gap:16px;--dy:0px;transform:translateY(var(--dy));animation:gsUp .55s var(--spring)} /* design-ok: the approved sheet motion (G1 brief §1: slide up on a spring), off under reduced motion */ dialog.gsheet[open]{display:flex} dialog.gsheet{height:auto;min-height:0;box-sizing:border-box} dialog.gsheet>*{flex:0 0 auto} /* the older sheets and dialogs, now gsheets: their own inner panels give way to the glass */ dialog.gsheet.phsheet .phin{background:transparent;padding:0;max-width:none;max-height:none;overflow:visible;border-radius:0;margin:0} dialog.gsheet.phsheet .phopt{background:color-mix(in srgb,var(--glass-2) 70%,transparent);border:0;box-shadow:inset 0 1px 0 var(--sheen);border-radius:18px} dialog.gsheet.askdlg .askdlg-top{position:static;background:transparent;margin:0;padding:0} dialog.gsheet.askdlg .askdlg-top .cxgrab{display:none} dialog.gsheet.caldlg,dialog.gsheet.jrdlg,dialog.gsheet.iedlg{padding-top:0} dialog.gsheet.wide{width:min(880px,100%)} /* G1b · THE TOP DRAWER (owner, 5 Oct 2026, addendum item 1): Notifications drop down from the top on every bell; the same glass, the handle at the BOTTOM (drag it up past 90px to close); a 440px panel under the bell on a computer, full width on a phone */ dialog.gsheet.top{inset:-40px 14px auto auto;margin:0;width:min(440px,calc(100% - 28px));max-height:calc(80vh + 40px);max-height:calc(80dvh + 40px);border-radius:0 0 28px 28px; padding:calc(56px + var(--sat)) 20px 4px;box-shadow:inset 0 -1px 0 var(--sheen),0 24px 60px -24px var(--shade-2);animation:gsDrop .5s var(--spring)} /* design-ok: the approved drawer motion (G1b addendum item 1), off under reduced motion */ dialog.gsheet.top .ggrab{order:99;padding:6px 0 12px} @keyframes gsDrop{from{transform:translateY(-105%)}to{transform:translateY(0)}} @keyframes gsLift{from{transform:translateY(var(--dy))}to{transform:translateY(-105%)}} @media(max-width:820px){ dialog.gsheet.top{inset:-40px 0 auto 0;width:100%;border-radius:0 0 26px 26px} } dialog.gsheet.drag{animation:none;transition:none} dialog.gsheet.out{animation:gsDown .23s var(--ease) both} dialog.gsheet.top.drag{animation:none} dialog.gsheet.top.out{animation:gsLift .24s var(--ease) both} /* the bell drawer's list: Mark all read dims it (G1b) */ .gbellsheet .gread .npit,.gbellsheet .gread .ckrow,.gbellsheet .gread li,.gbellsheet.gread .npit{opacity:.6} .gbellsheet .gbellall{align-self:flex-start;margin-top:6px} .gbellsheet .gbload{color:var(--muted)} dialog.gsheet::backdrop{background:rgba(14,21,34,.21);-webkit-backdrop-filter:blur(6px) saturate(1.3);backdrop-filter:blur(6px) saturate(1.3);animation:gsFade .3s var(--ease) both} /* design-ok: the scrim (::backdrop cannot read the theme tokens in every browser) */ :root[data-theme="dark"] dialog.gsheet::backdrop{background:rgba(0,0,0,.40)} /* design-ok: the scrim, dark */ @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) dialog.gsheet::backdrop{background:rgba(0,0,0,.40)} } /* design-ok: the scrim, dark */ dialog.gsheet.out::backdrop{animation:gsFadeOut .23s var(--ease) both} @keyframes gsUp{from{transform:translateY(105%)}to{transform:translateY(0)}} @keyframes gsDown{from{transform:translateY(var(--dy))}to{transform:translateY(105%)}} @keyframes gsFade{from{opacity:0}} @keyframes gsFadeOut{to{opacity:0}} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ dialog.gsheet{background:var(--surface)} } .ggrab{align-self:stretch;display:flex;justify-content:center;padding:12px 0 4px;margin:0;border:0;background:none!important;box-shadow:none!important;min-height:0!important;cursor:grab;touch-action:none;flex:0 0 auto;width:100%} .ggrab i{display:block;width:44px;height:5px;border-radius:3px;background:var(--soft-2)} .ggrab:active{transform:none} .ggrab:focus,.ggrab:focus-visible{outline:none} .gsh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .gsh h2{font-family:var(--display);font-size:var(--fs-card-lg);font-weight:300;line-height:1.2;margin:0;letter-spacing:-.02em} /* design-ok: Sora display weights from the approved glass mockup */ .gsh p{color:var(--muted);margin:6px 0 0} .gacts{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .gacts .btn{flex:1 1 160px} .galist{display:flex;flex-direction:column;gap:6px} .garow{display:flex;align-items:center;gap:14px;min-height:56px;padding:8px 16px;border:0;border-radius:18px;cursor:pointer;text-align:left;font:inherit;font-weight:500;width:100%;color:var(--ink);text-decoration:none; background:color-mix(in srgb,var(--glass-2) 70%,transparent);box-shadow:inset 0 1px 0 var(--sheen);transition:background .2s var(--ease),transform .3s var(--spring)} .garow:hover{background:var(--glass-2);text-decoration:none} .garow:active{transform:scale(.98)} .garow .gico{width:36px;height:36px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:var(--accent-soft);color:var(--on-accent-soft);flex:0 0 auto} .garow .gico svg{width:18px;height:18px} .garow.ok .gico{background:var(--ok-bg);color:var(--ok)} .garow.danger{color:var(--bad)} .garow.danger .gico{background:var(--bad-bg);color:var(--bad)} .garow small{display:block;font-size:var(--fs-sm);color:var(--muted);font-weight:400} .garow .grow{flex:1;min-width:0} .gsheet .gfld input,.gsheet .gfld select,.gsheet .gfld textarea{background:var(--glass)} /* the confirm sheet (data-confirm, and SDSheet.confirm()) */ .sdconfirm .gsh h2{font-size:var(--fs-card-lg)} .sdconfirm .btn.danger{background:var(--bad-bg);background-image:none;color:var(--bad);box-shadow:none} /* a menu that opens as a sheet keeps its own markup (moved in while open, put back after): undo its dropdown layout */ .gsheet .gsrc{display:block} .gsheet .gsrc>*{display:flex!important;flex-direction:column;gap:6px;position:static!important;inset:auto!important;transform:none!important;width:auto!important;min-width:0!important;max-width:none!important;max-height:none!important; margin:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important;opacity:1!important;visibility:visible!important;overflow:visible!important} dialog.gsheet.gmenusheet .gsrc>*>a,dialog.gsheet.gmenusheet .gsrc>*>button,dialog.gsheet.gmenusheet .gsrc>*>form>button,dialog.gsheet.gmenusheet .gsrc>*>.umrow{display:flex;align-items:center;gap:14px;min-height:52px;padding:8px 16px;border:0;border-radius:18px;width:100%;text-align:left; font:inherit;font-weight:500;color:var(--ink);text-decoration:none;background:color-mix(in srgb,var(--glass-2) 70%,transparent);box-shadow:inset 0 1px 0 var(--sheen);cursor:pointer} dialog.gsheet.gmenusheet .gsrc>*>a:hover,dialog.gsheet.gmenusheet .gsrc>*>button:hover,dialog.gsheet.gmenusheet .gsrc>*>form>button:hover{background:var(--glass-2)} .gsheet .gsrc>*>form{margin:0;display:block} .gsheet .gsrc .umh{display:flex;flex-direction:column;padding:0 4px 4px} .gsheet .gsrc .umsep{display:none} @media(max-width:600px){ dialog.gsheet{padding-left:16px;padding-right:16px} } @media(prefers-reduced-motion:reduce){ dialog.gsheet,dialog.gsheet::backdrop,dialog.gsheet.out,.gtoast,.gpills>.gknob,.gqrow,.garow,.btn,.gicb,.gpick{animation:none!important;transition:none!important} }/* ===== G1c · drawers from the button's side ===== */ :root{--gios:cubic-bezier(.32,.72,0,1);--gout:cubic-bezier(.4,0,.9,.4)} dialog.gsheet{--dx:0px;transform:translate(var(--dx),var(--dy));transform-origin:50% 100%;animation:gdSlideInB .32s var(--gios) both} /* design-ok: G1d · the drawer slides FLAT from its edge (0.32s, the iOS curve), a fade only under reduced motion */ dialog.gsheet.out{animation:gdSlideOutB .24s var(--gout) both} dialog.gsheet.drag,dialog.gsheet.top.drag,dialog.gsheet.from-top.drag{animation:none;transition:none} /* from the TOP (the top bar: Notifications, New, the account, recent, search): under its button on a computer */ dialog.gsheet.top,dialog.gsheet.from-top{top:-40px;bottom:auto;right:var(--gtr,14px);left:var(--gtl,auto);margin:0;width:min(440px,calc(100% - 28px));max-height:calc(80vh + 40px);max-height:calc(80dvh + 40px); border-radius:0 0 30px 30px;padding:calc(56px + var(--sat)) 20px 4px;box-shadow:inset 0 -1px 0 var(--sheen),0 24px 60px -24px var(--shade-2);transform-origin:50% 0;animation:gdSlideInT .32s var(--gios) both} /* design-ok: G1d · flat slide from the top, a fade only under reduced motion */ dialog.gsheet.top .ggrab,dialog.gsheet.from-top .ggrab{order:99;padding:6px 0 12px} dialog.gsheet.top.out,dialog.gsheet.from-top.out{animation:gdSlideOutT .24s var(--gout) both} dialog.gsheet.palsheet.from-top{width:min(640px,calc(100% - 28px))} @media(max-width:820px){ dialog.gsheet.top,dialog.gsheet.from-top,dialog.gsheet.palsheet.from-top{left:0;right:0;width:100%;border-radius:0 0 26px 26px} } /* from the RIGHT (anything in the page or the middle) and the LEFT (the side menu; the phone's menu) */ dialog.gsheet.from-right,dialog.gsheet.from-left{top:0;bottom:0;margin:0;height:auto;max-height:none;width:min(440px,86vw);gap:14px} dialog.gsheet.from-right{left:auto;right:0;border-radius:30px 0 0 30px;padding:calc(20px + var(--sat)) 22px calc(26px + var(--sab)) 30px;transform-origin:100% 50%;animation:gdSlideInR .32s var(--gios) both; /* design-ok: G1d · flat slide from the right, a fade only under reduced motion */ box-shadow:inset 1px 0 0 var(--sheen),-24px 0 60px -24px var(--shade-2)} dialog.gsheet.from-left{left:0;right:auto;width:min(380px,84vw);border-radius:0 30px 30px 0;padding:calc(20px + var(--sat)) 30px calc(26px + var(--sab)) 22px;transform-origin:0 50%;animation:gdSlideInL .32s var(--gios) both; /* design-ok: G1d · flat slide from the left, a fade only under reduced motion */ box-shadow:inset -1px 0 0 var(--sheen),24px 0 60px -24px var(--shade-2)} dialog.gsheet.from-right.out{animation:gdSlideOutR .24s var(--gout) both} dialog.gsheet.from-left.out{animation:gdSlideOutL .24s var(--gout) both} dialog.gsheet.from-right.wide,dialog.gsheet.from-left.wide{width:min(760px,94vw)} dialog.gsheet.from-right.drag,dialog.gsheet.from-left.drag{animation:none;transition:none} @media(max-width:600px){ dialog.gsheet.from-right{width:86vw;padding-left:26px;padding-right:16px} dialog.gsheet.from-left{width:84vw;padding-left:16px;padding-right:26px} dialog.gsheet.from-right.wide,dialog.gsheet.from-left.wide{width:94vw} } /* the grip on the edge that faces the page: a short vertical bar, kept in the middle while the drawer scrolls */ dialog.gsheet.from-right>.ggrab,dialog.gsheet.from-left>.ggrab{position:sticky;top:calc(50% - 32px);align-self:flex-start;order:-1;width:24px;height:64px;padding:0;margin:0 0 -78px -28px;z-index:3;cursor:grab} dialog.gsheet.from-left>.ggrab{align-self:flex-end;margin:0 -28px -78px 0} @media(max-width:600px){ dialog.gsheet.from-right>.ggrab{margin-left:-25px} dialog.gsheet.from-left>.ggrab{margin-right:-25px} } dialog.gsheet.from-right>.ggrab i,dialog.gsheet.from-left>.ggrab i{width:5px;height:44px} /* G1d (owner, 7 Oct 2026: "the navigation between tabs in the drawer looks like as if you're turning a book page"): FLAT. A pure translate from the edge and back, no perspective, no turn, no fade (G1c rolled in with rotateY 22deg / rotateX 18deg). */ @keyframes gdSlideInB{from{transform:translateY(calc(100% + 48px))}to{transform:translateY(0)}} @keyframes gdSlideOutB{from{transform:translate(var(--dx),var(--dy))}to{transform:translateY(calc(100% + 48px))}} @keyframes gdSlideInT{from{transform:translateY(calc(-100% - 48px))}to{transform:translateY(0)}} @keyframes gdSlideOutT{from{transform:translate(var(--dx),var(--dy))}to{transform:translateY(calc(-100% - 48px))}} @keyframes gdSlideInR{from{transform:translateX(calc(100% + 32px))}to{transform:translateX(0)}} @keyframes gdSlideOutR{from{transform:translate(var(--dx),var(--dy))}to{transform:translateX(calc(100% + 32px))}} @keyframes gdSlideInL{from{transform:translateX(calc(-100% - 32px))}to{transform:translateX(0)}} @keyframes gdSlideOutL{from{transform:translate(var(--dx),var(--dy))}to{transform:translateX(calc(-100% - 32px))}} /* a drawer opened from a drawer on the same edge SWAPS what is inside (a quick crossfade), instead of one rolling out and another in */ @keyframes gdSwapIn{from{opacity:0}to{opacity:1}} @keyframes gdSwapOut{from{opacity:1}to{opacity:0}} dialog.gsheet.gswap,dialog.gsheet.gswap.from-top,dialog.gsheet.gswap.from-right,dialog.gsheet.gswap.from-left,dialog.gsheet.gswap.from-bottom{animation:gdSwapIn .18s var(--ease) both} dialog.gsheet.gswapout,dialog.gsheet.gswapout.from-top,dialog.gsheet.gswapout.from-right,dialog.gsheet.gswapout.from-left,dialog.gsheet.gswapout.from-bottom{animation:gdSwapOut .18s var(--ease) both} dialog.gsheet.gswap::backdrop{animation:none} dialog.gsheet.gswapout::backdrop{animation:none;opacity:0} @keyframes gdFadeIn{from{opacity:0}to{opacity:1}} @keyframes gdFadeOut{from{opacity:1}to{opacity:0}} /* the faded layer: the scrim at 40%, no blur (the page tips back behind it); a tap on it closes */ dialog.gsheet::backdrop{background:rgba(14,21,34,.12);-webkit-backdrop-filter:none;backdrop-filter:none;animation:gsFade .4s var(--ease) both} /* design-ok: the scrim at 40% (::backdrop cannot read the theme tokens in every browser) */ :root[data-theme="dark"] dialog.gsheet::backdrop{background:rgba(0,0,0,.22)} /* design-ok: the scrim at 40%, dark */ @media(prefers-color-scheme:dark){ :root:not([data-theme="light"]) dialog.gsheet::backdrop{background:rgba(0,0,0,.22)} } /* design-ok: the scrim at 40%, dark */ dialog.gsheet.out::backdrop{animation:gsFadeOut .3s var(--ease) both} /* a drawer that stepped aside for an "Are you sure?" (or for a drawer opened from inside it) waits, out of sight */ dialog.gsheet.gsaway{display:none!important;animation:none} dialog.gsheet.gsaway::backdrop{opacity:0;animation:none} /* the X in a drawer's head */ .gsh .gsx{flex:none;margin:-4px -6px 0 0;width:44px;height:44px;min-width:44px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;background-image:none;box-shadow:none;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s var(--ease),transform .3s var(--spring)} .gsh .gsx:hover{background:var(--soft);color:var(--ink);box-shadow:none;transform:none} .gsh .gsx:active{transform:scale(.92)} .gsh .gsx svg{flex:none;width:18px;height:18px} /* the scroll bar inside every drawer and sheet: no track; a thin faded bar inside the glass, kept off the rounded corners */ dialog.gsheet,.drawer,.sheetck~.sheet,.sheetck~.sheet .sheetbody,.moresheet .sheet{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 14%,transparent) transparent} dialog.gsheet:hover,.drawer:hover,.sheetck~.sheet:hover,.sheetck~.sheet .sheetbody:hover,.moresheet .sheet:hover{scrollbar-color:color-mix(in srgb,var(--ink) 26%,transparent) transparent} dialog.gsheet::-webkit-scrollbar,.drawer::-webkit-scrollbar,.sheetck~.sheet ::-webkit-scrollbar,.moresheet .sheet::-webkit-scrollbar{width:10px;height:10px;background:transparent} dialog.gsheet::-webkit-scrollbar-track,.drawer::-webkit-scrollbar-track,.sheetck~.sheet ::-webkit-scrollbar-track,.moresheet .sheet::-webkit-scrollbar-track{background:transparent;margin:32px 0} dialog.gsheet::-webkit-scrollbar-thumb,.drawer::-webkit-scrollbar-thumb,.sheetck~.sheet ::-webkit-scrollbar-thumb,.moresheet .sheet::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 14%,transparent);border:3px solid transparent;background-clip:padding-box;border-radius:999px} dialog.gsheet:hover::-webkit-scrollbar-thumb,.drawer:hover::-webkit-scrollbar-thumb{background-color:color-mix(in srgb,var(--ink) 26%,transparent)} /* G1d · the page behind a drawer. PHONES (820px and under): it does not move, shrink or turn; it only dims (the scrim, at its full strength here because the page no longer fades). COMPUTERS: a very gentle step back (scale .985, opacity .6, no turn), the approved "page fades back" look without the book feeling (fully flat on computers too would be the one line html.gback .gbl{transform:none}). Either way the page's layers are INERT while a drawer is open (core/glass.php glass_sheet_js tip(): nothing behind can be tapped, focused or read); pointer-events:none is the fallback for a browser without inert. */ html.gback,html.gback-out{overflow-x:hidden} html.gback body,html.gback-out body{overflow-x:clip} .gbl{transform-origin:var(--gbo,50% 40%);transition:transform .32s var(--gios),opacity .32s var(--ease)!important;will-change:transform,opacity} /* design-ok: G1d · the gentle step back on a computer, opacity only under reduced motion */ html.gback-out .gbl{transition:transform .24s var(--gout),opacity .24s var(--ease)!important} html.gback .gbl{transform:scale(.985)!important;opacity:.6!important;pointer-events:none} @media(max-width:820px){ html.gback .gbl{transform:none!important;opacity:1!important} .gbl{will-change:auto} dialog.gsheet::backdrop{background:rgba(14,21,34,.30)} /* design-ok: the scrim at full strength on a phone (::backdrop cannot read the theme tokens in every browser) */ :root[data-theme="dark"] dialog.gsheet::backdrop{background:rgba(0,0,0,.55)} /* design-ok: the scrim, dark */ .scrim,.sheetscrim,.moresheet .scrim{background:var(--scrim)} } @media(max-width:820px) and (prefers-color-scheme:dark){ :root:not([data-theme="light"]) dialog.gsheet::backdrop{background:rgba(0,0,0,.55)} } /* design-ok: the scrim, dark */ /* G1d · ONE STACKING ORDER for every surface (the tokens are in core/ui.php): the page, its sticky bars, tips, the scrim, the drawer, a question, a toast. A drawer sits in the browser's top layer above all of them; these place the CSS-only drawers (Career Profile's menu and sheets, the client's More) and everything that floats. */ .scrim,.sheetscrim,.moresheet .scrim{z-index:var(--z-scrim)!important;inset:0;margin:0} /* the whole screen: a tap anywhere outside the drawer closes it (a label scrim took the form labels' 12px bottom margin, leaving a strip of the page live) */ .drawer,body .sheetck~.sheet,.moresheet .sheet{z-index:var(--z-drawer)!important} .tipp,.tiph .tipp,.tour,.tiph.on .tipsheetbg{z-index:var(--z-tip)!important} .gtoast{z-index:var(--z-toast);top:auto;right:auto;margin:0;border:0;overflow:visible} /* G1d · SDSoft: while new results load, the results fade to 60% (usually under 0.3s); the announcer is for screen readers only */ html.sdsoftw [data-soft-busy]{opacity:.6;transition:opacity .15s var(--ease)} .sdsay{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* G1d · a page that used to be a drawer (Career Profile's edit pages, the client's Book staff on its own page): the back arrow with the words of where it goes */ .cxptop{display:flex;align-items:center;gap:var(--s2,8px);margin:0 0 var(--s2,8px)} .cxback{display:inline-flex;align-items:center;gap:6px;min-height:var(--tap,44px);padding:0 16px 0 10px;border-radius:999px;background:var(--soft);color:var(--ink);font-weight:600;text-decoration:none} .cxback:hover{text-decoration:none;background:var(--soft-2)} .cxback svg{width:20px;height:20px;flex:none} details.bookpage>summary{display:none} /* G1d · EVERYTHING LINES UP (owner, 7 Oct 2026): a button inside a bar or a row never carries the public pages' base top margin (core/ui.php: button,.btnl{margin-top:12px}, meant for a button under a form field). It pushed the boards' "Build your Career Profile" button 6px below "For employers" and "Sign in". tools/alignscan.js checks every row on every page. */ :is(nav,header,.bdtop,.acts,.cacts,.gacts,.bdbtns,.tbacts,.tbrfoot,.bkfoot,.g2facts,.bdhrow,.cxdacts,.jacts,.tq,.atsfilb,.savebar,.bdopts,.optc,.fbar,.g2fbar,.g2fgo)>:is(button,.btnl){margin-block:0} form.futype{display:inline-flex;align-items:center;margin:0} /* G1d · a field's label or a tick box inside a centered row keeps no margin above or below (its bottom margin, meant for a field stacked in a column, set it 2 to 8px above the button beside it); a card head's right side lines up its own items */ :is(.tsbar,.sgf,.rfrm,.xacts,form.inline,form[style*="display:flex"],.g2fbar,.tbcmd,.bdcmd,.atsbar,.fbar)>:is(label,.chk,span.small){margin-block:0} .cright>*,.cright form,.chead .cright>*,.cright>.tfilt.g2seg{margin-block:0} :is(.jdetools,.sheethd,.bdcta,.bdcta.gl)>*{margin-block:0} .ptag{white-space:nowrap} /* G1d · a styled select's chosen words sit in the middle of its box (they sat at the top: claude/ADDENDUM-G1d-MODSECURITY-SM1-SAVE.md section 5) */ .gfld select,select{align-items:center;align-content:center} /* the password eye inside its box: a 44px target, centered on the box */ .pwshow{min-height:44px!important;height:44px!important;top:calc(50% - 22px)!important} /* the boards' EMS | Nursing & Allied switch: 44px pills (the switch keeps its 48px with 2px of room round them) */ .bd .tbsw{padding:2px}.bd .tbsw a{min-height:44px} /* G1d · TAP SIZE IN THE OFFICE ON A COMPUTER: the compact office keeps its 36px buttons for the mouse; nothing a person clicks is under 32px (a bare quick-date button, a "More" summary, a link chip, a card head that folds, a field) */ @media(min-width:821px){ :where(html[data-surface="work"]) :where(button,.btn,summary,a.chip,select,input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]),[role="button"]):where(:not(.tipb,.ggrab,.gsx,.gpknat,.lnk)){min-height:32px} /* a floor only: no specificity, so the office's own sizes (the fields' 44px) win */ html[data-surface="work"] button.lnk{min-height:32px;display:inline-flex;align-items:center} } /* G1d · the compose box's merge-tag buttons ({first_name} ...) and Preview: 32px on a computer (they were 28px, inline) */ .mchips{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px} .mchips .btn{min-height:32px;font-size:var(--fs-xs);padding:0 10px} .mchips #cp_prev{margin-left:auto} /* G1d · a fact that is a sentence (the inbox's "Record: (matched the address)") flows as text, one item in the row */ .rfact span.rfrec{display:inline;min-height:0} /* G1d · Sections' column heads are narrow: "Added later" wraps under the name instead of being cut */ .rfact .chip[data-wrap-ok],.secgrid .sechd .chip{white-space:normal;height:auto;line-height:1.25;padding-block:2px;text-align:center;max-width:100%} /* G1d · "Back to sign in" and the other links under the sign-in box: a 44px hit area that moves nothing */ .lgmore a{padding-block:14px;margin-block:-14px} /* G1d · a lead's Owner picker in its header (was 28px, inline) */ .ownsel{width:auto;min-height:32px;padding:2px 8px;font-size:var(--fs-sm)} /* G1d · a chip never shrinks to "…" in a row (it keeps its words; the row wraps); a long label in a list cell wraps instead */ .chip{flex-shrink:0;text-overflow:clip} .chip[data-wrap-ok]{white-space:normal;height:auto;min-height:22px;line-height:1.3;padding-block:2px} /* G1d · TAP SIZE ON A PHONE (820px and under), every surface: every control is at least 44px tall (r56's rule, now on every page; tools/alignscan.js). A link that is the only thing on its line (a name in a list, "Run the self-test") gets a 44px hit area from padding, which an inline box draws without moving anything around it. */ @media(max-width:820px){ /* a FLOOR (no specificity: a control that already asks for more keeps it), then the known small ones raised for sure */ :where(button,.btn,.btnl,summary,a.chip,button.chip,.g2fchip,a.gpick,label.gpick,.gtok,[role="tab"],[role="button"]):where(:not(.tipb,.ggrab,.gsx,.gpknat)){min-height:44px} :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not(.gpknat),select:not(.gpknat)){min-height:44px} :is(.btn.sm,.btn.xs,summary.btn,a.chip,button.chip,.g2fchip,.gtok,.rfmore,.sysx,.vbtn,.pwshow,button.lnk,.gmmd,.gmma,.bttl,button:not([class])):not(.tipb):not(.ggrab):not(.gsx){min-height:44px!important} :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not(.gpknat),select:not(.gpknat)){min-height:44px!important} :is(nav,.tfilt,.g2vm,[role="tablist"],[role="group"],.vtog,.bdview)>a{min-height:44px!important;display:inline-flex;align-items:center} .hdr a.brand{min-height:44px;display:inline-flex;align-items:center} /* a plain link (no class: a name in a list, "Run the self-test"): 12px of padding above and below, taken back by the same negative margin, so a finger finds 44px and nothing on the page moves (an inline link ignores the margin; its padding never moves a line) */ a:is(:not([class]),.small,.ok,.warn,.bad,.bttl,.lnk){padding-block:14px;margin-block:-14px} :is(nav,.tfilt,.g2vm,[role="tablist"],[role="group"])>a:is(:not([class]),.small,.ok,.warn,.bad){padding-block:0;margin-block:0} /* NL1.1 bug: a link that is itself a block row (Today's "Finish setting up" list) is already 44px; the plain link's negative margin pulled each row 28px into the next one (the rows overlapped on a phone and a tablet, both looks) */ .setupc li a{margin-block:0} .srow{flex-wrap:wrap} a.mgnum,.hghd a{min-height:44px;display:inline-flex;align-items:center} } .bookpg>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} /* pickers: a rounded token (label, value, chevron) that opens a drawer of rounded rows; never a native drop-down on a bar */ .gpknat{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;opacity:0!important;pointer-events:none!important;overflow:hidden} .gtok{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;height:var(--tap);padding:0 12px 0 14px;border:0;border-radius:16px;background:var(--soft);color:var(--ink);font:inherit;font-size:var(--fs);cursor:pointer;text-align:left; transition:background .2s var(--ease),transform .3s var(--spring)} .gtok:hover{background:var(--soft-2)} .gtok:active{transform:scale(.96)} .gtok .gtokl{flex:none;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .gtok .gtokv{flex:1 1 auto;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .gtok svg{flex:none;width:16px;height:16px;color:var(--muted)} .gpk{display:flex;flex-direction:column;gap:10px} .gpkq{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;margin:0;border-radius:18px;background:var(--glass-2);color:var(--muted); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 var(--sheen),0 10px 24px -16px var(--shade-2)} .gpkq svg{flex:none;width:18px;height:18px} .gpkq input,.gpkq input:focus{flex:1;min-width:0;height:100%;border:0;background:transparent;box-shadow:none;padding:0;font:inherit;font-size:16px;color:var(--ink)} /* design-ok: 16px keeps a phone from zooming into the type box */ .gpkl{display:flex;flex-direction:column;gap:6px} .gpkl .garow{min-height:50px} .gpkl .garow.on{background:var(--accent-soft);color:var(--on-accent-soft);font-weight:600;box-shadow:none} .gpkl .garow .gpkck{flex:none;width:18px;height:18px;color:var(--on-accent-soft)} .gpkl .garow mark{background:transparent;color:var(--accent);font-weight:700} .gpkl .garow small{display:inline;margin-left:8px} .gpkl .gpkg{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:10px 6px 2px} .gpkno{color:var(--muted);padding:6px 4px} .gpkn{display:inline;margin-left:8px;font-size:var(--fs-xs,12.5px);font-weight:400;color:var(--muted)} /* G3b · a count beside an option ("3 jobs") */ /* JM1 · PHONE PAGES: NO BROWSER SCROLL BAR (owner, 7 Oct 2026, the mockup review, BRIEF-CD1 section 14 item 2). A slim rail drawn inside the layout on the right, between the top bar and the bottom bar, that moves with the page: one pseudo-element of the root (no markup, every surface), its thumb a background layer moved by the page's own scroll timeline (no script, no loop). Shown only where the browser can tie it to the scroll (@supports) AND only while the page can scroll: the animation is what makes it visible, and a page with nothing to scroll has an inactive timeline, so the rail stays at opacity 0. Drawers keep their own thin bar (G1c). */ @media(max-width:820px){ html{scrollbar-width:none} html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0} @supports (animation-timeline:scroll()){ html::after{content:"";position:fixed;z-index:var(--z-bar);right:3px;width:4px;border-radius:999px;pointer-events:none; top:calc(var(--topbar,60px) + 8px);bottom:calc(var(--tabbar,0px) + 10px);opacity:0; background:linear-gradient(color-mix(in srgb,var(--ink) 28%,transparent),color-mix(in srgb,var(--ink) 28%,transparent)) 0 0/100% 24% no-repeat,color-mix(in srgb,var(--ink) 7%,transparent); /* design-ok: a flat color layer (the rail's thumb), not a gradient */ animation:sdRail linear both;animation-timeline:scroll(root block)} @keyframes sdRail{from{opacity:1;background-position:0 0,0 0}to{opacity:1;background-position:0 100%,0 0}} } } @media(prefers-reduced-motion:reduce){ dialog.gsheet,dialog.gsheet.top,dialog.gsheet.from-top,dialog.gsheet.from-right,dialog.gsheet.from-left{animation:gdFadeIn .15s linear both!important;transform:none!important} dialog.gsheet.out,dialog.gsheet.top.out,dialog.gsheet.from-top.out,dialog.gsheet.from-right.out,dialog.gsheet.from-left.out{animation:gdFadeOut .15s linear both!important} dialog.gsheet::backdrop{animation:gdFadeIn .15s linear both!important} dialog.gsheet.gsaway{animation:none!important} .gbl,html.gback-out .gbl{transition:opacity .15s linear!important} html[class*="gback-"] .gbl{transform:none!important} }.npair{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:0 var(--s3);align-items:start}.npair>*{min-width:0}.npair input{width:100%}@media (max-width:820px),(pointer:coarse){input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=reset]):not([type=image]),select,textarea,[contenteditable="true"],[contenteditable=""]{font-size:max(16px,1em)!important}}.sdart,.logoplate,.sdm,.bmark{max-width:100%;min-width:0}.sdart img,.logoplate img,.sdm img,.sdm svg,.lgart img{max-width:100%;max-height:100%;object-fit:contain}.sdm>.sdart{width:72%;height:72%;justify-content:center}.sdm>.sdart img{width:100%!important;height:100%!important}@media (max-width:520px){html .btn,html .btnl{white-space:normal;text-align:center;max-width:100%}}.ratext,.ralines li,.bkterms .psm,.bkterms>span,label.ratick,.consent label.opt,.consentq,.pnote,.declprev,.mustread{font-size:var(--fs-body)!important}/* ====================================================================== H2 · office console. Tokens come from core/ui.php; this is the chrome (header, sidebar, tab bar) and the components the pages already use. ====================================================================== */ body.compact{ --pad:12px; --gap:10px; } /* ---------- header ---------- */ .hdr{ position:fixed;top:0;left:0;right:0;height:calc(var(--hh) + var(--sat));padding-top:var(--sat);z-index:40; display:flex;align-items:center;gap:6px;padding-left:10px;padding-right:10px; background:var(--hdr-bg);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--hair); } .brand{display:flex;align-items:center;gap:9px;color:var(--ink);font-weight:700;padding:4px 6px 4px 2px;border-radius:var(--r-sm)} .brand:hover{text-decoration:none;background:var(--surface-2)} .bmark{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--navy);color:var(--on-navy);font-size:var(--fs-xs);letter-spacing:.04em;font-weight:700} .bname{font-size:var(--fs);letter-spacing:-.01em} .hsp{flex:1} .ibtn{width:40px;height:40px;border-radius:10px;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;position:relative;flex:none} .ibtn:hover{background:var(--surface-2)} .ic{width:20px;height:20px;display:block} .recentd{position:relative} /* R16 · the avatar menu */ .uava{padding:0}.uava .av{pointer-events:none} .umenup{width:270px;padding:6px} .umh{display:flex;flex-direction:column;padding:8px 10px 10px;border-bottom:1px solid var(--line-s);margin:0 0 6px} .umh b{font-size:var(--fs);font-weight:600}.umh em{font-style:normal;font-size:var(--fs-xs);color:var(--muted)} .recentp.umenup a,.umenup .umi,.umenup .umrow{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:var(--r-sm);font:inherit;font-size:var(--fs);color:var(--ink);width:100%;border:0;background:transparent;cursor:pointer;text-align:left} .recentp.umenup a:hover,.umenup .umi:hover{background:var(--surface-2);text-decoration:none} .umenup .ic{width:18px;height:18px;color:var(--muted);flex:none} .umrow .thmb{margin-left:auto;width:34px;height:34px} .umsep{height:1px;background:var(--divider);margin:6px 0} .recentd summary{list-style:none} .recentd summary::-webkit-details-marker{display:none} .recentd .pdot{position:absolute;top:8px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--navy)} .recentp{position:absolute;right:0;top:46px;width:min(340px,calc(100vw - 24px));max-height:70vh;overflow:auto; background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:6px;z-index:60} .recentp .rh{font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);padding:8px 8px 4px;font-weight:600} .recentp a{display:flex;align-items:baseline;gap:8px;padding:8px 10px;border-radius:var(--r-sm);color:var(--ink);font-size:var(--fs);text-decoration:none;min-width:0;overflow:hidden} .recentp a .rl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .recentp a:hover{background:var(--surface-2)} .recentp .rk{font-size:var(--fs-2xs);color:var(--faint);min-width:64px;flex:none} .recentp .rt{margin-left:auto;font-size:var(--fs-2xs);color:var(--faint);flex:none} @media(max-width:600px){ .recentd{position:static} .recentp{position:fixed;left:10px;right:10px;top:calc(var(--hh) + var(--sat) + 6px);width:auto} } .rchip{display:inline-flex;flex-direction:column;gap:2px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);text-decoration:none;font-size:var(--fs);max-width:100%;background:var(--surface)} .rchip span{font-size:var(--fs-2xs);color:var(--faint)} .rchip:hover{background:var(--surface-2);text-decoration:none} .pinf{display:inline} .bell .dot{position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--bad);color:var(--on-bad);font-size:var(--fs-2xs);font-style:normal;display:grid;place-items:center;font-weight:700;border:2px solid var(--surface)} /* DR0 · GATE 14's first find: display:grid above beat the hidden attribute, so an empty dot sat on the bell on every office page with nothing new */ .bell .dot[hidden]{display:none} .ck{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;cursor:pointer;border:1px solid var(--line);border-radius:var(--pill);background:var(--surface-2);color:var(--muted);font:inherit;font-size:var(--fs-sm);min-width:220px} .ck:hover{border-color:var(--faint)} .ck kbd{margin-left:auto;border:1px solid var(--line);border-radius:5px;padding:1px 5px;background:var(--surface);color:var(--faint);font-size:var(--fs-2xs)} .ck .ic{width:16px;height:16px} .navtog{display:grid} /* ---------- sidebar (desktop: rail + flyouts; collapsible to icons) ---------- */ .side{position:fixed;top:calc(var(--hh) + var(--sat));bottom:0;left:0;width:var(--sw);z-index:30; background:var(--surface);border-right:1px solid var(--hair);padding:12px 10px;display:flex;flex-direction:column;gap:2px;overflow:visible} .scatw{position:relative} .ssep{height:1px;background:var(--divider);margin:8px 6px} .sectabs{display:flex;gap:4px;margin:-6px 0 var(--gap);border-bottom:1px solid var(--line)} .sectabs a{padding:10px 12px;color:var(--muted);font-weight:600;font-size:var(--fs);text-decoration:none} .sectabs a:hover{color:var(--ink);text-decoration:none} .sectabs a.on{color:var(--navy);border-bottom-color:var(--navy)} @media(min-width:821px){.sectabs{flex-wrap:wrap;overflow:visible;mask-image:none;-webkit-mask-image:none}} .scat,.snav{display:flex;align-items:center;gap:11px;min-height:40px;padding:0 10px;border-radius:10px;color:var(--ink);font-size:var(--fs);position:relative; border:0;background:transparent;width:100%;text-align:left;cursor:pointer;font-family:inherit;font-weight:500} .scat:hover,.snav:hover{background:var(--surface-2);text-decoration:none} .scat .ic,.snav .ic{color:var(--muted);flex:none} .scat.on,.snav.on{background:var(--navy-l);color:var(--navy);font-weight:600} .scat.on .ic,.snav.on .ic{color:var(--navy)} .scar{margin-left:auto;display:grid;place-items:center;color:var(--faint);flex:none;transition:transform .15s ease} .scar .ic{width:15px;height:15px} .scatw:hover>.scat .scar{color:var(--muted)} .sflyo{position:absolute;left:100%;top:-6px;margin-left:8px;min-width:248px;z-index:45;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg); box-shadow:var(--sh-lg);padding:8px;max-height:calc(100vh - var(--hh) - 24px);overflow-y:auto;opacity:0;visibility:hidden;transform:translateX(-5px); transition:opacity .13s ease,transform .13s ease,visibility 0s .13s} .sflyo::before{content:"";position:absolute;left:-10px;top:0;bottom:0;width:10px} .sflyo.up{top:auto;bottom:-6px} .scatw:hover>.sflyo,.scatw:focus-within>.sflyo{opacity:1;visibility:visible;transform:none;transition-delay:0s} .sfh{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:600;padding:4px 10px 2px} .sfc{font-size:var(--fs-xs);color:var(--muted);margin:0 0 6px;padding:2px 10px 0;line-height:1.45} .sflyo .snav{min-height:36px;font-size:var(--fs)} .soon{font-style:normal;margin-left:auto;font-size:var(--fs-2xs);color:var(--faint);border:1px solid var(--line);border-radius:20px;padding:1px 6px} .sfoot{margin-top:auto;padding-top:10px;border-top:1px solid var(--line-s)} .sbuild{font-size:var(--fs-2xs);color:var(--faint);padding:8px 10px 2px} .suser{display:flex;align-items:center;gap:10px;padding:8px 6px 10px;min-width:0} .suser .sut{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25} .suser b{font-size:var(--fs);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .suser em{font-style:normal;font-size:var(--fs-2xs);color:var(--muted)} body.navmin .suser .sut,body.navmin .suser .ibtn{display:none} body.navmin .suser{justify-content:center;padding:8px 0} body.navmin .side{width:var(--swc);padding:12px 12px} body.navmin .scat span,body.navmin .scar,body.navmin .sbuild,body.navmin .scat .soon,body.navmin #densTog span{display:none} body.navmin .scat,body.navmin #densTog{justify-content:center;padding:0;width:48px;height:44px} body.navmin .main{margin-left:var(--swc)} /* ---------- wayfinding + keyboard ---------- */ .crumb{font-size:var(--fs-sm);color:var(--muted);margin:0 0 6px;font-weight:500} .crumb span{color:var(--faint)} .crumb span::after,.crumb a::after{content:"›";margin:0 6px;color:var(--faint)} .crumb a{color:var(--muted)}.crumb a:hover{color:var(--navy)} .skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:var(--on-navy);padding:10px 16px;border-radius:0 0 var(--r) 0;font-weight:700} .skip:focus{left:0;text-decoration:none} /* ---------- main ---------- */ .main{margin-left:var(--sw);padding:calc(var(--hh) + var(--sat) + var(--pad)) var(--pad) 80px;max-width:1440px} .ptitle{margin:0 0 var(--gap);display:flex;flex-direction:column;gap:2px} .ptitle .sub{color:var(--muted);margin:4px 0 0;max-width:70ch} /* ---------- cards ---------- */ /* R6 · a card is a raised surface now, not a boxed one. The hard grey outline round every card is what made a long page read as a wall; a soft shadow gives the same separation and disappears when you are not looking for it. */ /* R16 · flat sections: a thin line instead of a shadow, so a page reads as one surface with parts rather than a stack of boxes */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:none;padding:calc(var(--pad) - 4px);margin:0 0 var(--gap)} /* R6 · the card header now reads as a chapter heading: a short accent rule, a bigger title, and real air under it. On a page of eight cards this is the difference between scanning and reading. */ .chead{display:flex;align-items:center;gap:12px;margin:0 0 14px;flex-wrap:wrap;position:relative} .chead h2{flex:1 1 12rem;min-width:0;font-size:var(--fs-h2);letter-spacing:-.015em} .chead .csub{flex:1 0 100%;order:3;margin:-6px 0 0;font-size:var(--fs-sm);line-height:1.45;color:var(--muted)} .cright{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .grid{display:grid;gap:var(--gap)} .grid>*,.rcols>*,.two2>*{min-width:0} .g2{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))} .g3{grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr))} .g4{grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr))} /* ---------- stats ---------- */ .statc{display:block;padding:2px 0;color:var(--ink)} .sl2{font-size:var(--fs-2xs);color:var(--faint);margin-top:2px;line-height:1.35} .statc:hover{text-decoration:none} .sv{font-size:var(--fs-page);font-weight:700;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums} .sv.ok{color:var(--ok)} .sv.warn{color:var(--warn)} .sv.bad{color:var(--bad)} .sl{font-size:var(--fs-xs);color:var(--muted);margin-top:2px} /* ---------- chips ---------- */ /* R7T.1 · a chip already had max-width:100%, but with white-space:nowrap and * nothing allowed to shrink it, a long label (an audit line such as "Email * refused (recipient unsubscribed)") pushed past a 320px screen. It now * clips with an ellipsis instead, and carries its full text in the title * attribute where the markup sets one. Found by the edge scan. */ .chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:var(--pill);font-size:var(--fs-xs);font-weight:500;background:var(--surface-2);color:var(--muted);border:1px solid var(--line);white-space:nowrap;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis} .chip.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent} .chip.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent} .chip.bad{background:var(--bad-bg);color:var(--bad);border-color:transparent} .chip.info{background:var(--info-bg);color:var(--info);border-color:transparent} /* ---------- forms ---------- */ label{display:block;font-size:var(--fs-sm);color:var(--muted);font-weight:500;margin:0 0 4px} input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=url], input[type=date],input[type=time],input[type=search],input[type=datetime-local],select,textarea{ width:100%;min-height:40px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--soft);color:var(--ink); font:inherit;font-size:var(--fs-lg);-webkit-appearance:none;appearance:none;transition:border-color .12s,box-shadow .12s} select{background-image:var(--chev-img);background-repeat:no-repeat;background-position:right 10px center;padding-right:30px} select[multiple]{background-image:none;padding-right:12px} input[type=checkbox],input[type=radio]{width:18px;height:18px;accent-color:var(--navy);margin:0 4px 0 0;vertical-align:-3px} @media(min-width:700px){ input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=url], input[type=date],input[type=time],input[type=search],input[type=datetime-local],select,textarea{font-size:var(--fs)} } input:focus,select:focus,textarea:focus{outline:none;box-shadow:0 0 0 3px rgba(13,67,144,.14)} textarea{min-height:90px;resize:vertical;line-height:1.5} .frow{margin:0 0 12px} .frow2{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))} .frow2[hidden]{display:none} /* DR0 · GATE 14: Setup's "Another mail provider" fields showed with Gmail picked (display:grid beat hidden) */ .hint{font-size:var(--fs-xs);color:var(--muted);margin:4px 0 0} .chk{display:flex;align-items:flex-start;gap:8px;font-size:var(--fs);color:var(--ink);margin:0 0 8px;font-weight:400} .chk input{width:18px;height:18px;min-height:0;margin-top:2px;flex:none} .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 16px;border-radius:10px;border:1px solid transparent; background:var(--navy);color:var(--on-navy);font:inherit;font-weight:600;cursor:pointer;line-height:1;white-space:nowrap;transition:background .12s,transform .06s} .btn:hover{background:var(--navy-d);text-decoration:none;color:var(--on-navy)} .btn:active{transform:translateY(1px)} .btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--line)} .btn.ghost:hover{background:var(--surface-2);color:var(--ink)} .btn.teal{background:var(--teal-d)} .btn.teal:hover{background:var(--teal-d);filter:brightness(.92)} .btn.ghost.on{background:var(--navy-l);color:var(--navy);border-color:var(--navy-l);font-weight:600} .btn.danger{background:var(--bad)} .btn.danger:hover{background:var(--bad);filter:brightness(.9)} .btn.ghost.danger{background:transparent;color:var(--bad);border-color:var(--bad)} .btn.ghost.danger:hover{background:var(--bad-bg);color:var(--bad);filter:none} /* R59e · a ghost red button (Delete conversation, Redact) was red text-on-red: ink on the danger fill */ .btn.sm{min-height:34px;padding:0 12px;font-size:var(--fs-sm);border-radius:9px} .btn[disabled]{opacity:.5;cursor:not-allowed} /* ---------- command palette ---------- */ .palov{position:fixed;inset:0;background:rgba(11,18,32,.5);z-index:200;display:none;padding:8vh 16px 0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .palov.open{display:block} .pal{max-width:580px;margin:0 auto;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--sh-lg);overflow:hidden} .pal input{width:100%;border:0;border-bottom:1px solid var(--line);font:inherit;font-size:var(--fs-lg);padding:16px 18px;outline:none;box-sizing:border-box;border-radius:0} .pal input:focus{box-shadow:none} .palrs{max-height:52vh;overflow-y:auto;padding:6px} .palg{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:8px 10px 4px;font-weight:600} .palit{display:block;padding:9px 12px;border-radius:10px;text-decoration:none;color:inherit} .palit strong{display:block;font-weight:600} .palit span{display:block;font-size:var(--fs-xs);color:var(--muted)} .palit:hover,.palit.on{background:var(--navy-l);text-decoration:none} .palrow{border-radius:10px} .palacts{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px 8px} .palact{font:inherit;font-size:var(--fs-xs);padding:4px 9px 4px 6px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:5px} .palact:hover{background:var(--navy-l);} .palact kbd{font-size:var(--fs-2xs);border:1px solid var(--line);border-radius:4px;padding:0 4px;color:var(--faint);background:var(--bg)} .palform{margin:0 10px 10px;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)} .palopts{display:flex;flex-wrap:wrap;gap:10px;font-size:var(--fs-sm);margin-bottom:6px} .palopts label{display:inline-flex;align-items:center;gap:4px} .palopts input{width:auto;min-height:0;margin:0} .palline{display:flex;gap:6px} .palline input{flex:1;min-width:0;font:inherit;font-size:var(--fs-sm);padding:6px 8px;border:1px solid var(--line);border-radius:8px} .palline button{font:inherit;font-size:var(--fs-sm);padding:6px 10px;border:0;border-radius:8px;background:var(--navy);color:var(--on-navy);cursor:pointer} .palline .palcancel{background:transparent;color:var(--muted);border-color:var(--line)} .paltoast{margin:0 10px 10px;font-size:var(--fs-sm);padding:5px 8px;border-radius:8px} .paltoast.ok{background:var(--ok-bg);color:var(--ok)}.paltoast.bad{background:var(--bad-bg);color:var(--bad)} .palhint{padding:14px;color:var(--faint);font-size:var(--fs-sm);text-align:center} /* ---------- bell panel ---------- */ .npanel{position:fixed;top:calc(var(--hh) + var(--sat) + 6px);right:12px;width:min(360px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-lg);z-index:190;display:none;max-height:60vh;overflow-y:auto;padding:6px} .npanel.open{display:block} .nph{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line-s)} .nph button{border:0;background:none;color:var(--navy);cursor:pointer;font:inherit;font-size:var(--fs-xs);font-weight:600} .npit{display:block;padding:10px;border-radius:10px;text-decoration:none;color:inherit;border-bottom:1px solid var(--line-s)} .npit:last-child{border-bottom:0} .npit.unread{background:var(--navy-xl)} .npit strong{display:block;font-weight:600;font-size:var(--fs-sm)} .npit span{display:block;font-size:var(--fs-xs);color:var(--muted)} .npit em{display:block;font-style:normal;font-size:var(--fs-2xs);color:var(--faint);margin-top:2px} .npit:hover{background:var(--surface-2);text-decoration:none} .npact{padding:0 10px 10px;border-bottom:1px solid var(--line-s)}.npact .btn{min-height:var(--tap);display:inline-flex;align-items:center} /* R59d */ /* ---------- timeline ---------- */ .tline{display:flex;flex-direction:column;gap:0;position:relative;padding-left:4px} .tline::before{content:"";position:absolute;left:15px;top:14px;bottom:14px;width:2px;background:var(--divider)} .titem{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-s);position:relative} .titem:last-child{border-bottom:0} .titem.tfhide,tr.tfhide{display:none} .titem:target{background:var(--navy-l);border-radius:var(--r);scroll-margin-top:calc(var(--hh) + var(--sat) + 70px)} /* R47 · the note a mention points at */ .tbody{min-width:0;flex:1} .tdot{width:24px;height:24px;border-radius:99px;background:var(--faint);color:var(--on-navy);margin-top:2px;flex:0 0 24px;display:grid;place-items:center;font-size:var(--fs-xs);line-height:1;position:relative;z-index:1} .tfilt{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px} .tfilt .btn{min-height:32px;padding:0 11px;font-size:var(--fs-sm);border-radius:var(--pill)} .tcomp{margin:0 0 12px} .tcomp summary{cursor:pointer;color:var(--navy);font-weight:500;font-size:var(--fs);list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:36px} .tcomp summary::-webkit-details-marker{display:none} .tcomp summary::before{content:"+";display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--navy-l);font-weight:700} .tcomp[open] summary::before{content:"–"} .tcomp .tcbody{margin-top:8px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2)} .titem.mail .tdot{background:var(--navy)}.titem.sms .tdot{background:var(--teal)} .titem.fu .tdot{background:var(--warn)}.titem.ok .tdot{background:var(--ok)} .titem.bad .tdot{background:var(--bad)}.titem.seq .tdot{background:var(--info)} .tth{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap} .ttx{font-size:var(--fs-sm);color:var(--muted);margin-top:2px;white-space:normal} .abar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 var(--gap)} .abar .btn{white-space:nowrap} .abar form{display:inline-flex;gap:6px;align-items:center;margin:0} .abar select,.abar input{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:10px} /* ---------- tables ---------- */ .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)} .tbl{width:100%;border-collapse:collapse;font-size:var(--fs)} .tbl th{text-align:left;font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;padding:0 10px 8px;border-bottom:1px solid var(--line);white-space:nowrap} .tbl td{padding:11px 10px;border-bottom:1px solid var(--line-s);vertical-align:middle} .tbl tr:last-child td{border-bottom:0} .tbl tr:hover td{background:var(--surface-2)} .tscroll{overflow-x:auto;margin:0 calc(var(--pad) * -1);padding:0 var(--pad)} /* ---------- notes ---------- */ /* ---------------- R6 · notes, tips and the hover hint ---------------- * A note that never goes away stops being read after the second day and * starts being visual noise on the fourth. So a TEACHING note is now a * card you can close, it retires itself after ten days on that screen, * and what is left behind is a small marker that gives the same words * back on hover. A WARNING is not a tip and never does any of this. */ /* R6 · color is rationed. A WARNING should stop you, so it keeps its tint. An explanation should not compete with the work, so info notes are now a quiet left rule and muted text — permanent where they have to be, without being the loudest thing on the screen. */ .note{border-radius:var(--r);padding:12px 15px;margin:0 0 var(--gap);font-size:var(--fs);border:1px solid transparent;line-height:1.55} .note.info{background:var(--surface-2);color:var(--muted);border:0;border-radius:var(--r);padding:10px 12px} .note.info a{color:var(--navy)} .note.ok{background:var(--ok-bg);color:var(--ok)} .note.warn{background:var(--warn-bg);color:var(--warn)} .note.bad{background:var(--bad-bg);color:var(--bad)} .note.quiet{background:var(--surface-2);color:var(--muted);border-color:var(--line)} .empty{text-align:center;color:var(--muted);padding:32px 16px} .empty .ic{width:28px;height:28px;color:var(--faint);margin:0 auto 8px} .empty h3{font-size:var(--fs);margin:0 0 6px;color:var(--ink)} .empty p{margin:0 0 14px;line-height:1.55;max-width:46ch;margin-left:auto;margin-right:auto} .empty .emptyi{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:var(--navy-l);color:var(--navy)} .empty.nomatch .emptyi{background:var(--surface-2);color:var(--muted)} .empty .emptyi .ic{width:21px;height:21px;margin:0;color:inherit} .emptya{display:flex;gap:8px;justify-content:center;flex-wrap:wrap} /* ---------- build refresh pill / stamp ---------- */ .updbar{position:fixed;left:50%;bottom:calc(var(--tabh) + var(--sab) + 12px);transform:translateX(-50%);z-index:60;background:var(--ink);color:var(--surface);border-radius:var(--pill);padding:9px 16px;font-size:var(--fs-sm);box-shadow:var(--sh-lg)} .rstamp.insb{position:static;display:inline-block;margin:4px 10px 0;box-shadow:none} .rstamp{position:fixed;right:8px;bottom:6px;font-size:var(--fs-2xs);color:var(--faint);z-index:10;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:3px 9px;box-shadow:var(--sh);pointer-events:none} /* ---------- record header ---------- */ .rhead{position:relative;z-index:25;background:var(--bg);margin:calc(var(--gap) * -1) 0 var(--gap);padding:10px 0 10px;border-bottom:1px solid var(--line)} /* X2 · the header scrolls; the tab bar below it sticks */ /* R7 · the tab bar used to sit 4px under the last row of facts, so it read as * one more row of the same grid. It now has its own air above it. */ .rhead.tabbed{border-bottom:0;margin-bottom:0;padding-bottom:16px} /* X2 · record tabs: sticky under the header on desktop, a scrolling rail on a phone */ .rtabs{position:sticky;top:calc(var(--hh) + var(--sat));z-index:24;background:var(--bg);margin:0 0 var(--gap);border-bottom:1px solid var(--line)} .rtabs-i{display:flex;gap:2px;mask-image:none;-webkit-mask-image:none;padding:0} .rtabs a{display:inline-flex;align-items:center;gap:6px;padding:10px 9px;font-size:var(--fs);font-weight:500;color:var(--muted);white-space:nowrap;text-decoration:none;min-height:var(--tap)} .rtabs a:hover{color:var(--ink);text-decoration:none} .rtabs a.on{color:var(--navy);border-bottom-color:var(--navy);font-weight:600} /* R18 · the tabs past six */ @media(min-width:821px){.rtabs-i{overflow:visible}} @media(min-width:821px){.rtabs-i{flex-wrap:wrap}} /* R23 · a narrow window wraps the tabs instead of pushing the page sideways · R58 · on any computer width: the tab text moved from 13.5px to --fs (14.5px) and a long set of tabs ran 3px past a 1280 screen (r49_page); wrapping is the fallback, the 9px side padding keeps the usual set on one line (nine tabs for a recruiter: 939px of a 960px column) */ .carddet{scroll-margin-top:calc(var(--hh) + var(--sat) + 64px)} .rtmore{position:relative;display:inline-flex} .rtmore summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:10px 12px;font-size:var(--fs);font-weight:500;color:var(--muted)} .rtmore summary::-webkit-details-marker{display:none} .rtmore summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:4px} .rtmore summary:hover{color:var(--ink)} .rtmorep{position:absolute;top:100%;right:0;z-index:40;min-width:200px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);padding:6px;display:flex;flex-direction:column} .rtmorep a{border:0!important;margin:0!important;border-radius:var(--r-sm);padding:9px 10px!important} .rtmorep a:hover{background:var(--surface-2)} /* R18 · on a wide screen the extra facts sit in a panel beside the record, not behind "+N more" */ .rlay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 var(--gap);align-items:start} .rlaycol{min-width:0} .rside{position:sticky;top:calc(var(--hh) + var(--sat) + 60px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 var(--gap)} .rside h2{font-size:var(--fs-sm);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0} .rsideh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 6px} .rsidee{font-size:var(--fs-sm);font-weight:600;padding:4px 8px;border-radius:var(--r-sm)} .rsidee:hover{background:var(--surface-2);text-decoration:none} .rfedit{flex-basis:100%;margin-top:4px} /* R23 · the side-by-side layout is decided once when the page loads; if the window is then made narrower it stacks instead of squeezing both columns */ @media(max-width:1179px){.rlay{display:block}.rside{position:static}} .rside .rfacts{display:flex;flex-direction:column;align-items:stretch;gap:0;margin:0;background:none;border:0;padding:0} .rside .rfact{width:100%} .rside .rfact{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:12px;padding:9px 0;border-top:1px solid var(--line-s)} .rside .rfact:first-child{border-top:0} .rside .rfact b{flex:none;max-width:45%;padding-top:2px} .rside .rfact span{justify-content:flex-end;text-align:right} body.rsideon .rfmore{display:none!important} .rtn{font-size:var(--fs-2xs);font-weight:700;line-height:1;padding:3px 7px;border-radius:var(--pill);background:var(--surface-2);color:var(--muted)} .rtn.warn{background:var(--warn-bg);color:var(--warn)}.rtn.bad{background:var(--bad-bg);color:var(--bad)}.rtn.ok{background:var(--ok-bg);color:var(--ok)}.rtn.info{background:var(--navy-l);color:var(--navy)} .rsub{margin:calc(var(--gap) * -1 + 4px) 0 var(--gap)} .carddet{margin:0 0 var(--gap)}.carddet:not([open]){margin:0}.carddet:not([open])>summary{display:none}.carddet>summary{list-style:none;display:inline-flex;cursor:pointer;margin-bottom:8px}.carddet>summary::-webkit-details-marker{display:none}.carddet[open]>summary{margin-bottom:10px} .rsub .chip b{margin-left:4px} /* R28 · the current sub-view reads as current (it looked like its neighbour) */ .rsub .chip{text-decoration:none}.rsub .chip.on{background:var(--navy-l);color:var(--navy);font-weight:600} /* R7 · `.rhead.compact` used to hide the whole facts strip and was dead: the * density control puts `compact` on , never on `.rhead`, so nothing has * ever matched it. The two-tier strip is the real answer; the rule is gone * rather than left as a lead that goes nowhere. */ .rtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .rback{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap;font-weight:500;display:inline-flex;align-items:center;min-height:var(--tap)} .racts{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .racts form{margin:0;display:inline} .rmore{position:relative} .rmore summary{list-style:none;cursor:pointer} .rmore summary::-webkit-details-marker{display:none} /* R7 · ONE text origin down the whole panel. A .btn is bordered and a * is not, so identical padding put their text 1px apart and their * own padding put it 8px apart on top of that. --rmx is the inset every item * measures from; the button subtracts its border, the summary does not. */ .rmorep{--rmx:10px;position:absolute;right:0;top:40px;z-index:70;min-width:260px;max-width:min(360px,calc(100vw - 24px));background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-lg);padding:6px} .rmorep>*{display:block;margin:0 0 4px} .rmorep>*:last-child{margin-bottom:0} .rmorep form{display:block} .rmorep .btn{width:100%;justify-content:flex-start;text-align:left;padding-left:calc(var(--rmx) - 1px);padding-right:calc(var(--rmx) - 1px)} /* a section heading looks like a heading, not like an unstyled item */ .rmorep details{border-top:1px solid var(--hair);margin-top:6px;padding-top:6px} .rmorep details:first-child{border-top:0;margin-top:0;padding-top:0} .rmorep details summary{cursor:pointer;font-size:var(--fs-2xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);padding:6px var(--rmx);border-radius:6px;display:flex;align-items:center;gap:6px;min-height:var(--tap)} .rmorep details summary::marker,.rmorep details summary::-webkit-details-marker{display:none;content:''} .rmorep details summary::after{content:'';margin-left:auto;width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .12s} .rmorep details[open] summary::after{transform:rotate(-135deg)} .rmorep details summary:hover{background:var(--surface-2);color:var(--ink)} .rmorep details>div{padding:2px var(--rmx) 8px} .rfacts{display:flex;gap:14px 24px;flex-wrap:wrap;margin-top:10px;align-items:center} /* R7 · two tiers. The primaries and the toggle are one row; the rest is a * second row that starts closed and remembers itself per person. */ .rfrest{margin-top:12px;padding-top:12px;border-top:1px dashed var(--hair)} .rfrest[hidden]{display:none} .rfmore{display:inline-flex;align-items:center;gap:6px;margin-left:auto;background:var(--surface-2);color:var(--muted);border:1px solid var(--line);border-radius:var(--pill); font:inherit;font-size:var(--fs-sm);font-weight:500;padding:0 12px;min-height:32px;cursor:pointer;white-space:nowrap} .rfmore:hover{background:var(--surface);color:var(--ink);border-color:var(--muted)} .rfmore:focus-visible{outline:2px solid var(--ring);outline-offset:2px} .rfmore .rfchev{transition:transform .12s} .rfmore[aria-expanded="true"] .rfchev{transform:rotate(180deg)} @media(max-width:640px){ .rfmore{margin-left:0} } .ravatar{flex:none} .av{display:inline-grid;place-items:center;border-radius:50%;color:var(--paper);font-weight:700;letter-spacing:.02em;overflow:hidden;flex:none;vertical-align:middle;line-height:1} .av img{width:100%;height:100%;object-fit:cover;display:block} .av.sm{font-size:var(--fs-2xs)} .whoav{display:flex;gap:10px;align-items:flex-start} .whoav>.av{margin-top:2px} .rfact{display:flex;flex-direction:column;gap:2px;min-width:0} .rfact b{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600} .rfact span{font-size:var(--fs);color:var(--ink);display:flex;align-items:center;gap:6px;min-height:22px;flex-wrap:wrap;overflow-wrap:anywhere;min-width:0} .rfact span form{margin:0;display:inline} .toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px} .toolbar form{display:contents} .bulkbar{display:none} body.has-sel .bulkbar{display:flex} .rowacts{display:flex;gap:4px;flex-wrap:wrap;opacity:0;transition:opacity .1s} tr:hover .rowacts,tr:focus-within .rowacts{opacity:1} .rowacts form{margin:0;display:inline} .ffx{display:flex;flex-wrap:wrap;gap:8px;width:100%}.ffx>*{flex:1 1 140px}.ffx[hidden]{display:none} /* R20 · folded sections */ .card.acc>.chead{cursor:pointer;margin-bottom:0} .card.acc>.chead h2::before{content:"";display:inline-block;width:8px;height:8px;background:var(--muted);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;transform:rotate(90deg);margin:0 10px 2px 2px;transition:transform .15s} .card.acc.accclosed>.chead h2::before{transform:rotate(0deg)} .card.acc:not(.accclosed)>.chead{margin-bottom:14px} .card.accclosed>:not(.chead){display:none!important} .card.accclosed{padding-top:16px;padding-bottom:16px} .umore .rowmorep form{display:block!important;margin:0} .umore .rowmorep .btn{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--ink);font-weight:500;min-height:36px} .umore .rowmorep .btn:hover{background:var(--surface-2)} .umore .rowmorep details{display:block!important} /* R19 · the row menu */ .rowacts1{flex-wrap:nowrap;align-items:center} .rowmore{position:relative;display:inline-block} .rowmore>summary{list-style:none;cursor:pointer} .rowmore>summary::-webkit-details-marker{display:none} .rowmorep{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);padding:6px;display:flex;flex-direction:column} .rowmorep a,.rowmorep button{display:block;width:100%;text-align:left;padding:9px 10px;border:0;background:transparent;border-radius:var(--r-sm);color:var(--ink);font:inherit;font-size:var(--fs);cursor:pointer;text-decoration:none} .rowmorep a:hover,.rowmorep button:hover{background:var(--surface-2);text-decoration:none} .rowmore[open] ~ *{visibility:visible} tr:has(.rowmore[open]) .rowacts{opacity:1} .rowacts .btn{min-height:28px;padding:0 8px;font-size:var(--fs-xs)} .tnext{font-size:var(--fs-sm);color:var(--muted);white-space:nowrap} .tnext.due{color:var(--bad);font-weight:500} .tnext.today{color:var(--warn);font-weight:500} @media(hover:none){ .rowacts{opacity:1} } .banners{margin:0 0 var(--gap)} .sysbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:9px 14px;border-radius:var(--r);background:var(--warn-bg);color:var(--warn);font-size:var(--fs-sm);margin:0 0 8px} .sysbar form{margin:0;display:inline} .sysbar .btn{min-height:30px;padding:0 10px;font-size:var(--fs-sm)} .sysbar .sp{flex:1} .sysbar.build{background:var(--navy-xl);color:var(--navy);border:0;padding:6px 8px 6px 12px;font-size:var(--fs-sm)} .sysbar.build a{font-weight:600;text-decoration:underline;text-underline-offset:2px} .sysbar .sysx{border:0;background:transparent;color:var(--muted);font:inherit;font-size:var(--fs-card);line-height:1;width:32px;height:32px;border-radius:8px;cursor:pointer} .sysbar .sysx:hover{background:var(--navy-l);color:var(--navy)} .sysbar.viewas{background:var(--warn);color:var(--bg)} .sysbar.viewas .sysq{opacity:.85} .sysbar.viewas .btn{background:var(--surface);color:var(--warn);font-weight:700;border-color:transparent;box-shadow:none;filter:none} .sysbar.support{background:var(--info-bg);color:var(--info)} /* R61 · a platform support session */ .sysbar.support .sysq{color:var(--ink)} .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr));gap:8px} .rgrid .rchip{min-width:0} .rchip b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block} @media(max-width:600px){ .tbl.stack thead{display:none} .tbl.stack,.tbl.stack tbody,.tbl.stack tr{display:block;width:100%} .tbl.stack tr{padding:10px 0;border-bottom:1px solid var(--line)} .tbl.stack tr::after{content:"";display:block;clear:both} .tbl.stack td{display:inline-block;padding:2px 10px 2px 0;border:0;vertical-align:top;min-width:0!important;white-space:normal!important} .tbl.stack td.tck{float:left;width:auto;padding:4px 8px 0 0} .tbl.stack td.blk{display:block} .tbl.stack td:empty{display:none} .tbl.stack tr:hover td{background:transparent} .tbl.stack .rowacts{margin-top:4px} /* R5 · a stacked row hides its header, which is fine when every cell says * what it is ("Dale Hicks", "Austin, TX") and useless when the cells are * bare numbers — "3 5 0% 0 —" tells a person nothing. A cell may carry * data-l to bring its own label down with it. Opt-in: every stack table * written before this one has no data-l and is untouched. */ .tbl.stack td[data-l]{display:block;padding:1px 0} .tbl.stack td[data-l]::before{content:attr(data-l) ": ";color:var(--muted);font-size:var(--fs-xs)} .tbl.stack td[data-l]:empty{display:block} .tbl.stack td.rowname[data-l]::before{content:none} .tbl.stack td.rowname{padding-bottom:4px} } body.navopen::after{content:"";position:fixed;inset:calc(var(--hh) + var(--sat)) 0 0 0;background:rgba(11,18,32,.4);z-index:29;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} /* ---------- phone: drawer, bottom tab bar, tap targets ---------- */ .tabbar{display:none} @media(max-width:820px){ .navtog{display:grid} .side{transform:translateX(-100%);transition:transform .2s cubic-bezier(.2,.8,.2,1);box-shadow:var(--sh-lg);overflow-y:auto;overflow-x:hidden;width:min(300px,84vw); border-radius:0 var(--r-xl) var(--r-xl) 0;padding-bottom:calc(var(--sab) + 16px)} body.navopen .side{transform:none;z-index:56} body.navmin .side{width:min(300px,84vw)} body.navopen::after{z-index:55} body.navmin .suser .sut,body.navmin .suser .ibtn{display:flex} body.navmin .scat span,body.navmin .scar{display:flex} body.navmin .scat{justify-content:flex-start;padding:0 10px;width:100%;height:auto} .scat{min-height:46px;font-size:var(--fs)} .sflyo{position:static;display:none;margin:2px 0 6px 13px;padding:2px 0 2px 7px;min-width:0;max-height:none;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none} .sflyo::before{display:none} .sfh,.sfc{display:none} .scatw.open>.sflyo{display:block} .scatw.open>.scat .scar{transform:rotate(90deg)} .sflyo .snav{min-height:44px;font-size:var(--fs)} .main{margin-left:0;padding-bottom:calc(var(--tabh) + var(--sab) + 24px)} body.navmin .main{margin-left:0} .ck{min-width:0;width:40px;height:40px;padding:0;justify-content:center;border:0;background:transparent;border-radius:10px} .ck span,.ck kbd{display:none} .ck .ic{width:20px;height:20px;color:var(--ink)} .bname{display:none} .crumb{display:none} .ptitle .sub{display:none} .ptitle{margin-bottom:var(--s3)} .banners .sysbar{padding:8px 12px;font-size:var(--fs-sm);border-radius:10px} .banners .sysbar.viewas .sysq{display:none} .card{padding:var(--pad);border-radius:var(--r-lg)} .chead .cright{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px} .chead .cright::-webkit-scrollbar{display:none} .chead .cright>*{flex:none} .tfilt{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .tfilt::-webkit-scrollbar{display:none} .tfilt>*{flex:none} .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;height:calc(var(--tabh) + var(--sab));padding:0 6px var(--sab); background:var(--hdr-bg);-webkit-backdrop-filter:saturate(180%) blur(16px);backdrop-filter:saturate(180%) blur(16px);border-top:1px solid var(--hair)} .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:var(--fs-2xs);font-weight:600;color:var(--muted);min-height:var(--tap);border-radius:12px;letter-spacing:.01em} .tabbar a:hover{text-decoration:none} .tabbar a.on{color:var(--navy)} .tabbar a.on .ic{color:var(--navy)} .tabbar .ic{width:23px;height:23px;transition:transform .12s} .tabbar a:active .ic{transform:scale(.92)} .tabbar .tplus{flex:none;width:52px;height:52px;margin:-14px 6px 0;border-radius:18px;background:var(--navy);color:var(--on-navy);box-shadow:0 6px 16px rgba(13,67,144,.35);align-self:flex-start} .tabbar .tplus .ic{width:26px;height:26px;color:var(--on-navy)} .tabbar .tplus.on{color:var(--on-navy)} /* R11 · A-03 — "a.chip" is the chip that IS the link; ".chip a" is a link INSIDE a chip. Only the second was in this rule, so a chip used as navigation — the count badges on the order views, the tag links on a record — stayed 22px tall on a phone, half the 44px minimum. Two selectors that read almost identically and mean opposite things; that is how it survived three UI sprints. inline-flex so the extra height actually centers the label rather than dropping it to the top. */ .btn,.btn.sm,.chip a,a.chip,.rowacts .btn,.tfilt .btn,.sysbar .btn{min-height:var(--tap)} a.chip{display:inline-flex;align-items:center} .btn.sm{padding:0 14px} .rowacts{opacity:1} .tbl td{padding:12px 10px} .rhead{position:static;margin-top:0;padding-top:0;border-bottom:0} .rfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:12px 14px} .rfacts .ravatar{grid-column:1/-1} .racts{position:fixed;left:0;right:0;bottom:calc(var(--tabh) + var(--sab));z-index:45;background:var(--hdr-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--hair);padding:8px 10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none} .racts::-webkit-scrollbar{display:none} .racts .btn{flex:1;white-space:nowrap;min-height:42px} .racts form{flex:1;display:flex} .racts form .btn{width:100%} .rmore{flex:none} .rmorep{position:fixed;left:10px;right:10px;top:auto;bottom:calc(var(--tabh) + var(--sab) + 64px);max-width:none;max-height:60vh;overflow:auto;border-radius:var(--r-lg)} body.hasrec .main{padding-bottom:calc(var(--sab) + 84px)} /* R18 · on a record the action bar IS the bottom bar; the menu button still reaches everything */ body.hasrec .tabbar{display:none} body.hasrec .racts{bottom:0;padding-bottom:calc(8px + var(--sab))} body.hasrec .rmorep{bottom:calc(var(--sab) + 64px)} body.hasrec .tabbar .tplus{margin-top:6px;width:44px;height:44px;box-shadow:none;border-radius:14px;align-self:center} body.hasrec .tabbar .tplus .ic{width:22px;height:22px} .rstamp{display:none} .ribbon{grid-template-columns:repeat(2,1fr)!important} } /* ---------- sign-in ---------- */ /* R58 · the way in matches the rest: the deep navy metal side (text on it is the checked --metal-on-deep pair), the platinum ground, and a solid card with the silver edge that fades in. Was a hard-coded gradient and white text. */ .lgwrap{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh} .lgside{background:var(--metal-deep);color:var(--metal-on-deep);padding:48px;display:flex;flex-direction:column;justify-content:center} .lgside h2{font-size:var(--fs-h1);line-height:1.2;margin:0 0 14px;font-weight:700;letter-spacing:-.02em;color:var(--metal-on-deep)} .lgside p{color:var(--metal-on-deep-2);max-width:44ch;font-size:var(--fs-lg)} .lgside .lmark{width:44px;height:44px;border-radius:12px;background:var(--teal);color:var(--on-teal);display:grid;place-items:center;font-weight:700;margin:0 0 26px;font-size:var(--fs)} .lgside .lgplate{display:inline-block;align-self:flex-start;background:var(--paper);border-radius:12px;padding:12px 16px;margin:0 0 26px;box-shadow:var(--metal-glow)} .lgside .lglogo{height:48px;width:auto;display:block} .lgcontact{margin-top:22px;font-size:var(--fs-sm);color:var(--metal-on-deep-2)} .lgmain{display:grid;place-items:center;padding:32px 20px calc(32px + var(--sab));background:var(--metal-page);background-attachment:fixed;background-color:var(--bg)} .lgcard{width:100%;max-width:420px;background:var(--metal-card);background-color:var(--surface);border:1px solid transparent;border-radius:var(--r-xl);padding:var(--s8) var(--s6);box-shadow:var(--metal-glow);animation:sdfxin var(--dur-3) var(--ease) both} .lgcard h1{margin:0 0 6px} .lgcard .sub{color:var(--muted);margin:0 0 22px} .lgcard .btn{width:100%;min-height:46px} .lgcard .lgmore{margin-top:var(--s4)} .lgcard .frow input{min-height:46px} @media(max-width:820px){ .lgwrap{grid-template-columns:1fr;grid-template-rows:auto 1fr} .lgside{padding:calc(24px + var(--sat)) 24px 24px;min-height:auto;justify-content:flex-start} .lgside h2{font-size:var(--fs-h2);margin:0} .lgside p{display:none} .lgside .lmark,.lgside .lgplate{margin-bottom:12px} .lgcontact{display:none} .lgmain{align-items:start;padding-top:24px} .lgcard{padding:var(--s6) var(--s5)} } @media(max-width:400px){ .lgmain{padding-left:var(--s3);padding-right:var(--s3)} .lgcard{padding:var(--s5) var(--s4)} }.lcount{font-weight:400;color:var(--muted)}.lcap{margin:0 0 8px;color:var(--muted)}.lpager{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;margin:12px 0 2px}.lpager .small{color:var(--muted);text-align:center;flex:1 1 auto}@media(max-width:480px){.lpager .small{order:-1;flex-basis:100%}.lpager .btn{flex:1 1 40%;justify-content:center}}.pick{position:relative;display:block;min-width:0}.pick .pickq{width:100%;box-sizing:border-box}.pickl{position:absolute;z-index:40;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-lg);max-height:min(320px,50vh);overflow-y:auto}.pickl li{padding:8px 10px;border-radius:var(--r-sm);cursor:pointer;min-height:36px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center}.pickl li small{color:var(--muted);font-size:var(--fs-xs)}.pickl li[aria-selected=true],.pickl li:hover{background:var(--navy-l)}.pickl li.pkn{color:var(--muted);cursor:default;background:none}.lkw{position:relative;display:block;min-width:0}.lkw>input{width:100%;box-sizing:border-box}.pickl.lkl li{min-height:44px}.pickl.lkl li b{font-weight:600;color:var(--ink)}/* ===== R58 · the office console: metallic, subtle, dense (UI review §2.1, §5) ===== */ /* The ground: brushed platinum (gunmetal in dark mode), fixed so it does not scroll with a long table. */ body.app{background:var(--metal-page);background-attachment:fixed;background-color:var(--bg)} /* The top bar and the side menu: frosted over the metal, with a silver hairline instead of a grey one. */ .hdr{border-bottom-color:var(--metal-tile-line)} .side{background:var(--hdr-bg);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px)} .scat.on,.snav.on{background:var(--navy-l);box-shadow:inset 0 0 0 1px var(--metal-tile-line)} /* Cards: SOLID (text never sits on a gradient), with the silver 1px edge. Density unchanged. */ .card{border-color:transparent;background:var(--metal-card);background-color:var(--surface)} .rib{border-color:transparent;background:var(--metal-card);background-color:var(--surface)} a.rib:hover{} /* A record's header sat on a solid --bg strip; on the metal it is see-through. The tabs that stick under the top bar are frosted like the top bar (they must hide what scrolls under them). */ .rhead{background:transparent} .rtabs{background:var(--hdr-bg);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom-color:var(--metal-tile-line)} /* Text straight on the metal (not in a card) is ink: the ground runs to a darker silver in one corner. */ .ptitle .sub,.crumb,.crumb a{color:var(--ink)} .crumb span,.crumb span::after,.crumb a::after{color:var(--muted)} /* The primary button: navy metal. Ghost, teal and danger keep their own looks (they are not the primary). */ .btn:where(:not(.ghost,.teal,.danger)){background:var(--metal-btn);color:var(--metal-on-btn);border-color:var(--metal-btn-line);box-shadow:var(--metal-btn-sh)} .btn:where(:not(.ghost,.teal,.danger)):hover{background:var(--metal-btn);color:var(--metal-on-btn);filter:brightness(1.08)} .btn.sm:where(:not(.ghost,.teal,.danger)),.tfilt .btn:where(:not(.ghost)),.rowacts .btn:where(:not(.ghost)){box-shadow:none} .btn{transition:filter var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),background-color var(--dur-1) var(--ease)} .btn:active{transform:scale(.98)} .tabbar .tplus{background:var(--metal-btn);color:var(--metal-on-btn);box-shadow:var(--metal-btn-sh)} .tabbar .tplus .ic,.tabbar .tplus.on{color:var(--metal-on-btn)} .palline button{background:var(--metal-btn);color:var(--metal-on-btn);border-color:var(--metal-btn-line)} /* The avatar in the top bar (was a style attribute) */ .uava .av{width:32px;height:32px;font-size:var(--fs-sm);background:var(--metal-btn);color:var(--metal-on-btn)} .sysbar form{display:inline} /* ===== R58 · Today's Board ===== */ /* Finish setting up: a checklist card, not a warning strip */ .setupc .chead{margin-bottom:var(--s2)} .setupc .sumline{display:flex;align-items:center;gap:var(--s3);margin:0 0 var(--s3);color:var(--ink);font-weight:600} .setupc .meter{flex:1;max-width:240px;height:8px;border-radius:var(--pill);background:var(--metal-track);overflow:hidden} .setupc .meter i{display:block;height:100%;background:var(--metal-bar);border-radius:var(--pill)} .setupc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px} .setupc li a{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:var(--s3);align-items:start;padding:var(--s2) var(--s2);border-radius:var(--r-sm);color:var(--ink);text-decoration:none;min-height:var(--tap)} .setupc li a:hover{background:var(--surface-2);text-decoration:none} .setupc li b{display:block;font-weight:600} .setupc li span.d{display:block;color:var(--muted);font-size:var(--fs-sm);margin-top:2px} .setupc li.ok span.d{display:none} .setupc .sdot{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;margin-top:1px} .setupc .sdot .ic{width:14px;height:14px} .setupc li.ok .sdot{background:var(--ok-bg);color:var(--ok)} .setupc li.warn .sdot{background:var(--warn-bg);color:var(--warn)} .setupc li.bad .sdot{background:var(--bad-bg);color:var(--bad)} .setupc li .go{color:var(--navy);font-weight:600;font-size:var(--fs-sm);white-space:nowrap;align-self:center} .setupc li.ok .go{color:var(--muted);font-weight:500} /* Needs you now: one status per row, the score in its own column */ .hq{list-style:none;margin:0;padding:0} .hqhd,.hqr{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;gap:var(--s2) var(--s3);align-items:center} .hqhd{padding:0 0 var(--s2);border-bottom:1px solid var(--line);font-size:var(--fs-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .hqhd span:nth-child(3){text-align:right} .hqr{padding:var(--s3) 0;border-bottom:1px solid var(--line-s)} .hqr:last-child{border-bottom:0} .hqm{min-width:0;display:flex;flex-direction:column;gap:2px} .hqm a{font-weight:600;overflow-wrap:anywhere} .hqs{font-size:var(--fs-sm);color:var(--muted)} .hqst{justify-self:end} .hqn{justify-self:end;text-align:right;font-variant-numeric:tabular-nums} .hqsc{font-weight:700;color:var(--ink);font-size:var(--fs)} .tiph.hqtip{margin-left:0} .tiph.hqtip .tipb.hqsc{width:auto;min-width:36px;height:28px;padding:0 8px;border-radius:var(--pill);background:var(--surface-2);color:var(--ink);border:1px solid var(--line)} .tiph.hqtip .tipb.hqsc:hover,.tiph.hqtip.on .tipb.hqsc{background:var(--navy-l);color:var(--navy)} .tiph.hqtip .tipp{right:0;left:auto} @media(max-width:600px){ .hqhd{display:none} .hqr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"m m" "s n"} .hqm{grid-area:m}.hqst{grid-area:s;justify-self:start}.hqn{grid-area:n} .tiph.hqtip .tipb.hqsc{height:var(--tap);min-width:var(--tap)} } /* Today: time, what, one status */ .tdy{list-style:none;margin:0;padding:0} .tdy li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line-s)} .tdy li:last-child{border-bottom:0} .tdy .tt{font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums} .tdy .tw{min-width:0;display:flex;flex-direction:column;gap:2px} .tdy .tw a,.tdy .tw b{font-weight:600;overflow-wrap:anywhere} .tdy .tw span{font-size:var(--fs-sm);color:var(--muted)} .hboard{align-items:start} .hboard .empty .ic{margin-bottom:var(--s2)} /* The ribbon (was a