/* ============================================================================ MNR — glass.css · Liquid Glass single shared stylesheet Source of truth: LIQUID-GLASS-DESIGN-SYSTEM-2026-06-20.md (§2–§3, §8–§9) Built: 2026-06-23 · For: Guido (build) / Relay (architecture) ORDER (§5): tokens → base/reset → layout → components → utilities THEMING LAW (§9.1): :root = LIGHT (no attribute). [data-theme="dark"] = dark overrides only. Light-only overrides use html:not([data-theme='dark']). Two themes only — dim removed. Selectors stay FLAT single-class (§5). SCOPE: presentation only. No data/sync/behavior changes (§0, §5). ── STATUS LEGEND ─────────────────────────────────────────────────────────── [SPEC] lifted verbatim from blueprint §2–§3/§8 — do not re-derive. [DERIVED] Apple-blue literal re-derived from brand #5B8DEF per §2 note. [SCAFFOLD] blueprint defers to a prototype's CSS that Claude can't read; token-driven stand-in built to system — VERIFY against the named prototype before sign-off. [TODO] out of CSS scope — tracked at bottom of file. ============================================================================ */ /* ============================================================================ 1. TOKENS (§2 + §8 new tokens + §9.9 additions) ============================================================================ */ :root{ /* ── DAY (light) — no attribute ── */ --bg:#eef0f6; --ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#8a8a8e; --blue:#5B8DEF; --green:#34c759; /* [SPEC] --blue = brand accent (LOCKED) rgb(91,141,239) */ --amber:#ff9f0a; /* [SPEC §8] lock-explainer accent */ --hairline:rgba(0,0,0,.07); --edge:var(--glass-edge); /* alias — Rule 15 person ring references --edge */ /* legacy --color-accent:#c0c7d0 INTENTIONALLY ABSENT — retired per §421 / decision #3 */ --glass:rgba(255,255,255,.55); /* [SPEC] base panel surface */ --glass-edge:rgba(255,255,255,.75); /* specular rim */ --inset:rgba(255,255,255,.6); /* top inner highlight */ --shadow:0 8px 30px rgba(20,20,43,.10), 0 2px 8px rgba(20,20,43,.06); --pop:rgba(255,255,255,.72); /* menus / calendars */ --pop-edge:rgba(255,255,255,.85); --pop-shadow:0 16px 44px rgba(20,20,43,.22),0 4px 12px rgba(20,20,43,.12); --field-bg:rgba(255,255,255,.65); /* inputs — more opaque than panels (Rule 4) */ --focus-ring:rgba(91,141,239,.18); --seg-bg:rgba(255,255,255,.4); --seg-on:#fff; --seg-on-ink:var(--ink); --seg-on-sh:0 2px 8px rgba(20,20,43,.12),inset 0 1px 0 rgba(255,255,255,.9); --btn-bg:rgba(255,255,255,.5); --btn-bg-h:rgba(255,255,255,.72); --row-h:rgba(0,0,0,.035); /* table row hover — cheap, no blur */ --opt-soft:rgba(91,141,239,.1); /* calendar-day / soft hover */ --scrim:rgba(20,20,40,.25); /* modal backdrop */ --r-lg:24px; --r-md:16px; --r-sm:12px; --aurora-op:.7; --aurora-blur:64px; --c1:#ffd9c0; --c2:#cbe0ff; --c3:#e3d4ff; --c4:#cdf3e8; /* sky background token — swap filenames here to switch variant */ --sky-img: image-set( url('/img/sky-bright-muted.webp') type('image/webp'), url('/img/sky-bright-muted.jpg') type('image/jpeg') ); /* ── theme-invariant overlays (§9.3) — deliberately do NOT flip ── */ --bar-solid:rgba(30,41,59,.96); /* [SPEC §8] action bars, both themes (Rule 11) */ --bar-ink:#fff; --overlay-solid:rgba(30,41,59,.96); /* tooltips / floating pills that read over anything */ --solid-fallback:rgba(244,245,250,.92); /* @supports-not fallback surface (§9.7) */ /* ── semantic pill fills (§9.4) — solid in light; white text always ── */ --pill-pos:#1f9e54; /* current / positive (green) */ --pill-warn:#c07d09; /* notice (amber) */ --pill-neg:#d83a3c; /* vacant / danger (red) */ --pill-info:#3f6fd8; /* info (brand blue) */ /* ── motion easings (§9.8) ── */ --ease-spring:cubic-bezier(0.32,0.72,0,1); --dur-micro:120ms; --dur-std:200ms; --dur-modal:240ms; } [data-theme="dark"]{ /* ── NIGHT (dark) overrides ── */ --bg:#08080d; --ink:#f5f5f7; --ink-2:#a1a1a6; --ink-3:#76767e; --green:#30d158; --hairline:rgba(255,255,255,.08); --glass:rgba(22,22,30,.5); --glass-edge:rgba(255,255,255,.14); --inset:rgba(255,255,255,.12); --shadow:0 10px 40px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.4); --pop:rgba(34,34,44,.72); --pop-edge:rgba(255,255,255,.16); --pop-shadow:0 18px 50px rgba(0,0,0,.6),0 4px 14px rgba(0,0,0,.5); --field-bg:rgba(255,255,255,.06); --focus-ring:rgba(91,141,239,.32); --seg-bg:rgba(255,255,255,.06); --seg-on:rgba(255,255,255,.16); --seg-on-ink:#fff; --seg-on-sh:inset 0 1px 0 rgba(255,255,255,.2),0 2px 8px rgba(0,0,0,.4); --btn-bg:rgba(255,255,255,.09); --btn-bg-h:rgba(255,255,255,.16); --row-h:rgba(255,255,255,.05); --opt-soft:rgba(91,141,239,.22); --scrim:rgba(0,0,0,.55); --aurora-op:.14; --aurora-blur:90px; --c1:#dfe5f0; --c2:#b8c0d4; --c3:#eef1f7; --c4:#aab2c6; /* moon background token — swap filenames here to change variant */ --dark-bg-img: image-set( url('/img/moon-dark.webp') type('image/webp'), url('/img/moon-dark.jpg') type('image/jpeg') ); --solid-fallback:rgba(16,16,22,.92); /* semantic pills — LESS alpha in dark (§9.4); white text still */ --pill-pos:rgba(48,209,88,.36); --pill-warn:rgba(255,159,10,.36); --pill-neg:rgba(255,77,79,.36); --pill-info:rgba(91,141,239,.36); /* --bar-solid / --bar-ink / --overlay-solid intentionally inherited (do not flip) */ } /* ============================================================================ 2. BASE / RESET ============================================================================ */ *,*::before,*::after{box-sizing:border-box} html,body{height:100%} body{ margin:0;background:var(--bg);color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Arial,sans-serif; font-size:14px;line-height:1.45; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; } /* type scale (§2/§97) */ h1,.page-title{font-size:24px;font-weight:650;letter-spacing:-.02em;margin:0} h2,.section-title{font-size:15px;font-weight:650;letter-spacing:-.01em;margin:0} .label{font-size:12px;font-weight:600;color:var(--ink-2)} .caption{font-size:11.5px;color:var(--ink-3)} a{color:var(--blue);text-decoration:none} img{display:block;max-width:100%} button{font:inherit} /* ============================================================================ 3. AMBIENT BACKGROUND — .aurora + tiers (§3.2, Rule 2/8) [SCAFFOLD] blob positions are illustrative — VERIFY against prototype. ============================================================================ */ .aurora{position:fixed;inset:-20% -10% -10% -10%;z-index:0;pointer-events:none; filter:blur(var(--aurora-blur)) saturate(140%);opacity:var(--aurora-op);transition:opacity .5s} .aurora span{position:absolute;border-radius:50%;animation:drift 26s ease-in-out infinite} .aurora span:nth-child(1){width:46vmax;height:46vmax;top:-8%;left:-6%;background:var(--c1)} .aurora span:nth-child(2){width:40vmax;height:40vmax;top:-4%;right:-8%;background:var(--c2);animation-delay:-6s} .aurora span:nth-child(3){width:42vmax;height:42vmax;bottom:-12%;left:18%;background:var(--c3);animation-delay:-12s} .aurora span:nth-child(4){width:38vmax;height:38vmax;bottom:-10%;right:4%;background:var(--c4);animation-delay:-18s} @keyframes drift{ 0%,100%{transform:translate(0,0) scale(1)} 33%{transform:translate(4%,-3%) scale(1.06)} 66%{transform:translate(-3%,4%) scale(.96)} } /* tiers (Rule 2/8): body class drives opacity + motion */ .surface-showcase .aurora{--aurora-op:.7} /* lush + animated */ .surface-data .aurora, .bg-calm .aurora{--aurora-op:.28;--aurora-blur:84px} /* whisper, static */ .surface-data .aurora span, .bg-calm .aurora span{animation:none} @media (prefers-reduced-motion:reduce){.aurora span{animation:none}} /* Rule 8 */ /* ============================================================================ 4. SURFACE — .glass + glass-weight tiers (§3.1, §9.2) Tiers change ONLY blur/saturate; all read the same --glass/--glass-edge tokens (one token set, Rule 7). ============================================================================ */ .glass{background:var(--glass); -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%); border:1px solid var(--glass-edge);border-radius:var(--r-lg); box-shadow:var(--shadow), inset 0 1px 0 var(--inset); transition:background .5s,border-color .5s,box-shadow .5s} .glass-thin{-webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%)} /* nav, top bars, chips */ .glass-regular{-webkit-backdrop-filter:blur(28px) saturate(175%);backdrop-filter:blur(28px) saturate(175%)} /* = base .glass */ .glass-thick{-webkit-backdrop-filter:blur(36px) saturate(180%);backdrop-filter:blur(36px) saturate(180%)} /* modals, popovers, menus */ .glass-heavy{-webkit-backdrop-filter:blur(44px) saturate(180%);backdrop-filter:blur(44px) saturate(180%)} /* sheets, lightbox */ /* @supports-not fallback (§9.7 / Rule 5 safety net) */ @supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .glass,.glass-thin,.glass-regular,.glass-thick,.glass-heavy, .input,.textarea,.trigger,.pop,.btn,.toast{background:var(--solid-fallback)!important} } /* ============================================================================ 5. BUTTONS (§3.3) [DERIVED] .primary gradient/shadow re-derived from #5B8DEF (was #2b95ff/#0a84ff). ============================================================================ */ .btn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13.5px;font-weight:600; padding:9px 17px;border-radius:var(--r-sm);cursor:pointer;border:1px solid var(--glass-edge); background:var(--btn-bg);-webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%); color:var(--ink);box-shadow:inset 0 1px 0 var(--inset),0 2px 8px rgba(0,0,0,.08); transition:transform .14s,box-shadow .2s,background .2s} .btn:hover{background:var(--btn-bg-h);transform:translateY(-1px)} .btn:active{transform:scale(.985)} .btn.primary{background:linear-gradient(180deg,#7BA3F3,#4478E6);color:#fff;border-color:rgba(255,255,255,.4); box-shadow:0 4px 14px rgba(91,141,239,.45),inset 0 1px 0 rgba(255,255,255,.4)} /* [DERIVED] */ .btn.ghost{background:transparent;border-color:transparent;box-shadow:none;color:var(--ink-2)} .btn.ghost:hover{background:var(--row-h);color:var(--ink)} .btn.sm{padding:7px 13px;font-size:12.5px} /* ============================================================================ 6. SEGMENTED CONTROL — .seg (§3.4) [SCAFFOLD] blueprint says "copy prototype CSS verbatim" — VERIFY against liquid-glass-component-kit.html. Token-driven stand-in below. ============================================================================ */ .seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-sm);background:var(--seg-bg); border:1px solid var(--glass-edge); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%)} .seg button{border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:13px;font-weight:600; padding:6px 14px;border-radius:9px;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s} .seg button:hover{color:var(--ink)} .seg button.on{background:var(--seg-on);color:var(--seg-on-ink);box-shadow:var(--seg-on-sh)} /* ============================================================================ 7. DATA TABLE — glass container, PLAIN rows (§3.5, Rule 1) Container is .glass; rows are NOT glass. Hover = bg change only, no per-row backdrop-filter (jank-proofs a 273-row table). ============================================================================ */ table{width:100%;border-collapse:collapse} thead th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3); font-weight:650;padding:11px 20px;border-block:1px solid var(--hairline);cursor:pointer;user-select:none} tbody td{padding:13px 20px;font-size:13.5px;border-bottom:1px solid var(--hairline)} tbody tr{transition:background .14s} tbody tr:hover{background:var(--row-h)} tbody tr:last-child td{border-bottom:0} /* rounded-card header corner fix (§9.7) — radius on first/last th, NOT overflow:hidden */ thead th:first-child{border-top-left-radius:var(--r-md)} thead th:last-child{border-top-right-radius:var(--r-md)} /* density (decision #5 / §392) — table-scoped class, never a global flip */ .dense thead th{padding:8px 14px} .dense tbody td{padding:8px 14px;font-size:13px} /* ============================================================================ 8. STATUS PILLS — .pill (§3.6, §9.4) Translucent colored fill + dot, WHITE text always. Per-theme alpha via token. ============================================================================ */ .pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px; font-size:11.5px;font-weight:600;color:#fff;line-height:1.4} .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9} .pill.cur{background:var(--pill-pos)} /* current / positive */ .pill.notice{background:var(--pill-warn)} /* notice */ .pill.vacant{background:var(--pill-neg)} /* vacant / danger */ .pill.info{background:var(--pill-info)} /* info */ /* ============================================================================ 9. FORM FIELDS — .input / .textarea (§3.7, Rule 4) ============================================================================ */ .input,.textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--field-bg); border:1px solid var(--glass-edge);border-radius:var(--r-sm);padding:10px 13px;width:100%; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .2s,background .2s} .textarea{min-height:84px;resize:vertical} .input:focus,.textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--focus-ring)} .input::placeholder,.textarea::placeholder{color:var(--ink-3)} /* iOS no-zoom: keep effective input font-size >= 16px on touch (§9.6) */ @media (pointer:coarse){.input,.textarea,.trigger{font-size:16px}} /* ============================================================================ 10. CUSTOM SELECT — .ctrl / .trigger / .pop / .opt (§3.8, Rule 3) Replaces native via glass-select.js. ARIA/keyboard handled in JS module (see [TODO]). ============================================================================ */ .ctrl{position:relative} .trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;font:inherit;font-size:14px; color:var(--ink);background:var(--field-bg);border:1px solid var(--glass-edge);border-radius:var(--r-sm); padding:10px 13px;width:100%;cursor:pointer;text-align:left; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .2s} .ctrl.open .trigger{border-color:var(--blue);box-shadow:0 0 0 4px var(--focus-ring)} .pop{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:30;background:var(--pop); -webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%); border:1px solid var(--pop-edge);border-radius:var(--r-md);box-shadow:var(--pop-shadow),inset 0 1px 0 var(--inset); padding:6px;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity .2s,transform .2s} .ctrl.open .pop{opacity:1;transform:none;pointer-events:auto} .opt{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:10px;font-size:14px;cursor:pointer; color:var(--ink);transition:background .12s,color .12s} .opt.sel{font-weight:600} .opt .ck{width:15px;color:var(--blue);opacity:0} .opt.sel .ck{opacity:1} .opt:hover,.opt.active{background:var(--blue);color:#fff} /* blue accent fill, never orange */ .opt:hover .ck,.opt.active .ck{color:#fff} /* ============================================================================ 11. CUSTOM DATE PICKER — .cal* (§3.9, Rule 3) [DERIVED] .day.sel shadow re-derived from #5B8DEF. Replaces native date input. Month-grid build + keyboard in glass-datepicker.js (see [TODO]). ============================================================================ */ .cal-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 10px} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .day{aspect-ratio:1;display:grid;place-items:center;font-size:13px;border-radius:9px;cursor:pointer; transition:background .12s,color .12s;color:var(--ink)} .day:hover{background:var(--opt-soft)} .day.muted{color:var(--ink-3);opacity:.45} .day.today{box-shadow:inset 0 0 0 1.5px var(--blue);font-weight:650} .day.sel{background:var(--blue);color:#fff;font-weight:650;box-shadow:0 3px 10px rgba(91,141,239,.4)} /* [DERIVED] */ /* ============================================================================ 12. SWITCH / THEME TOGGLE / MODAL / STAT CARD (§3.10) [SCAFFOLD] blueprint says "copy prototype CSS verbatim" — VERIFY against liquid-glass-component-kit.html / -desktop-shell.html. ============================================================================ */ /* switch — .sw */ .sw{position:relative;width:42px;height:25px;border-radius:999px;background:var(--seg-bg); border:1px solid var(--glass-edge);cursor:pointer;transition:background .2s} .sw::after{content:"";position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%; background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .2s var(--ease-spring)} .sw.on{background:var(--blue)} .sw.on::after{transform:translateX(17px)} /* modal — .scrim + .modal (§3.10) — scrim blur is the one place heavy blur is correct */ .scrim{position:fixed;inset:0;z-index:50;background:var(--scrim); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity var(--dur-std)} .scrim.open{opacity:1;pointer-events:auto} .modal{background:var(--pop); -webkit-backdrop-filter:blur(36px) saturate(180%);backdrop-filter:blur(36px) saturate(180%); border:1px solid var(--pop-edge);border-radius:var(--r-lg);box-shadow:var(--pop-shadow),inset 0 1px 0 var(--inset); padding:22px;width:min(520px,92vw);max-height:86vh;overflow:auto; transform:scale(.96);opacity:0;transition:transform var(--dur-modal) var(--ease-spring),opacity var(--dur-modal)} .scrim.open .modal{transform:none;opacity:1} /* stat card — .stat + mini bars — .bars */ .stat{padding:18px 20px} .stat .stat-num{font-size:28px;font-weight:680;letter-spacing:-.02em} .stat .stat-lbl{font-size:12px;color:var(--ink-2);margin-top:2px} .bars{display:flex;align-items:flex-end;gap:3px;height:34px} .bars i{flex:1;background:var(--blue);border-radius:3px 3px 0 0;opacity:.85} @media (prefers-reduced-motion:reduce){ .modal,.scrim,.sw::after{transition:opacity var(--dur-std)} /* kill transforms, keep opacity (§9.8) */ } /* ============================================================================ 13. PERSON TOKEN — .person (Rule 15 / §Rule 15) Avatar + full name everywhere. Initials fallback hue is JS-computed (hash full_name → hue) and set inline as --pt-hue (see [TODO] note). ============================================================================ */ .person{display:inline-flex;align-items:center;gap:8px;min-width:0} .person .avatar{flex:none;border-radius:50%;object-fit:cover; box-shadow:0 0 0 1px var(--edge);background:var(--field-bg)} .person .name{color:var(--ink);font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .person .sub{color:var(--ink-3);font-size:12px} /* role/email/"you" — never replaces name */ /* initials fallback — deterministic tint via inline --pt-hue */ .person .avatar.initials{display:grid;place-items:center;color:#fff;font-weight:650; background:hsl(var(--pt-hue,220) 55% 55%)} /* size variants */ .person.sm .avatar{width:21px;height:21px} .person.sm .name{font-size:13px} /* dense tables, pick-list, mentions */ .person.md .avatar{width:29px;height:29px} .person.md .name{font-size:14px} /* lists, cards, page-layout fields */ .person.lg .avatar{width:42px;height:42px} .person.lg .name{font-size:15px} /* record headers, detail panels */ .person.sm .avatar.initials{font-size:9px} .person.md .avatar.initials{font-size:12px} .person.lg .avatar.initials{font-size:16px} /* group / multi-user — stacked avatars + +N (§Rule 15) */ .person-group{display:inline-flex;align-items:center} .person-group .avatar{margin-left:-7px;box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--edge)} .person-group .avatar:first-child{margin-left:0} .person-group .more{margin-left:-7px;display:grid;place-items:center;border-radius:50%; background:var(--field-bg);color:var(--ink-2);font-size:11px;font-weight:650; box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--edge)} /* ============================================================================ 14. RECORD-PAGE SURFACES (§8 — styles surfaces whose BEHAVIOR is governed by the Field-Editing + Photos specs; appearance only here) ============================================================================ */ /* 14.1 inline-edit field row — .ie-row (§8.1) */ .ie-row{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid var(--hairline)} .ie-affA{width:18px;flex:none;display:grid;place-items:center} /* pencil OR lock slot */ .ie-pencil{opacity:0;border:0;background:none;color:var(--ink-3);cursor:pointer;transition:opacity .15s,color .15s} .ie-row:hover .ie-pencil{opacity:1} .ie-pencil:hover{color:var(--blue)} .ro-lock{border:0;background:none;color:var(--ink-3);cursor:help} .ie-label{color:var(--ink-2);font-size:13.5px;width:160px;flex:none} .ie-value{font-size:14px;font-weight:550} .ie-edit{display:none;flex:1;gap:8px;align-items:center} /* → flex when editing */ .ie-row.editing .ie-edit{display:flex} .ie-row.editing .ie-value{display:none} /* lock explainer — reuses .pop with amber left-accent (NOT a one-off box) */ .lock-pop{border-left:3px solid var(--amber);max-width:260px;pointer-events:none} /* 14.2 action bar — .actionbar — SOLID, not glass (§8.2, Rule 11/13) */ .actionbar{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:60; background:var(--bar-solid);color:var(--bar-ink);border-radius:14px;padding:10px 14px; display:flex;align-items:center;gap:14px;box-shadow:0 12px 36px rgba(0,0,0,.45)} .actionbar .btn{color:var(--bar-ink);background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22); -webkit-backdrop-filter:none;backdrop-filter:none} /* explicit surface — legible on dark bar */ .actionbar .btn.primary{background:linear-gradient(180deg,#7BA3F3,#4478E6);border-color:rgba(255,255,255,.4)} /* 14.3 photo grid + tile — .photo-grid / .tile (§8.3) — tiles are images, NOT glass */ .photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px} .tile{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;cursor:pointer;border:1px solid var(--glass-edge)} .tile img{width:100%;height:100%;object-fit:cover;display:block} .tile.cover{box-shadow:0 0 0 2px var(--green)} /* --accent-cover: var(--green) LOCKED */ .tile .cover-badge{position:absolute;top:8px;left:8px;font-size:10.5px;font-weight:700;padding:3px 8px; border-radius:999px;background:var(--green);color:#fff} /* 14.4 lightbox — .lightbox (§8.4) — page blurs behind; style only */ .lightbox{position:fixed;inset:0;z-index:70;background:var(--scrim); -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:grid;place-items:center} .lightbox img{max-width:90vw;max-height:82vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)} /* 14.5 toast — .toast (§8.5) — single, non-stacking (Rule 14) */ .toast{position:fixed;bottom:18px;right:18px;z-index:80;background:var(--pop); -webkit-backdrop-filter:blur(30px) saturate(200%);backdrop-filter:blur(30px) saturate(200%); border:1px solid var(--pop-edge);border-radius:13px;padding:11px 15px;font-size:13.5px; box-shadow:var(--pop-shadow),inset 0 1px 0 var(--inset)} /* ============================================================================ 15. UTILITIES ============================================================================ */ .flex{display:flex} .ai-c{align-items:center} .jc-sb{justify-content:space-between} .gap-8{gap:8px} .gap-12{gap:12px} .gap-16{gap:16px} .muted{color:var(--ink-2)} .muted-3{color:var(--ink-3)} .hairline{border-bottom:1px solid var(--hairline)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ============================================================================ 16. F1 NAMED API — glass-prefixed class aliases for page-level adoption These mirror the §3–§13 primitives under the "glass-" naming convention used by the per-page restyle work (tenants pilot onward). They are alongside, not in place of, the canonical .glass / .pop / .seg / .input names. ============================================================================ */ /* 16.1 .glass-panel — surface alias of .glass (Rule 1 container) */ .glass-panel{background:var(--glass); -webkit-backdrop-filter:blur(20px) saturate(160%);backdrop-filter:blur(20px) saturate(160%); border:1px solid var(--glass-edge);border-radius:var(--r-lg); box-shadow:var(--shadow), inset 0 1px 0 var(--inset); transition:background .5s,border-color .5s,box-shadow .5s} /* 16.2 .glass-field — input/value-display alias of .input (Rule 4) */ .glass-field{font:inherit;font-size:14px;color:var(--ink);background:var(--field-bg); border:1px solid var(--glass-edge);border-radius:var(--r-sm);padding:10px 13px; -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); transition:border-color .2s,box-shadow .2s,background .2s} .glass-field:focus,.glass-field:focus-within{outline:none;border-color:var(--blue); box-shadow:0 0 0 4px var(--focus-ring)} .glass-field::placeholder{color:var(--ink-3)} /* 16.3 .glass-pop — popover/menu/calendar surface alias of .pop (§3.8) */ .glass-pop{background:var(--pop); -webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%); border:1px solid var(--pop-edge);border-radius:var(--r-md); box-shadow:var(--pop-shadow),inset 0 1px 0 var(--inset)} /* 16.4 .glass-seg — segmented control alias of .seg (§3.4) */ .glass-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-sm);background:var(--seg-bg); border:1px solid var(--glass-edge); -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%)} .glass-seg button,.glass-seg [role="tab"]{border:0;background:transparent;color:var(--ink-2);font:inherit; font-size:13px;font-weight:600;padding:6px 14px;border-radius:9px;cursor:pointer; transition:background .18s,color .18s,box-shadow .18s} .glass-seg button:hover,.glass-seg [role="tab"]:hover{color:var(--ink)} .glass-seg button.on,.glass-seg [role="tab"][aria-selected="true"],.glass-seg .on{ background:var(--seg-on);color:var(--seg-on-ink);box-shadow:var(--seg-on-sh)} /* ============================================================================ 17. GLASS SELECT — .glass-select-wrap / .glass-select / .glass-option (§3.8) PE pattern: a real sits invisibly over the wrapper — keyboard + a11y preserved */ .glass-select-wrap .glass-select, .glass-select-wrap > select.glass-select{ position:absolute;inset:0;width:100%;height:100%; opacity:0;cursor:pointer;font-size:16px; /* 16px = iOS no-zoom */ -webkit-appearance:none;-moz-appearance:none;appearance:none; border:0;background:transparent;color:transparent;z-index:1} /* JS-driven custom panel (rendered as a sibling .glass-pop) */ .glass-select-wrap + .glass-pop.glass-select-panel, .glass-pop.glass-select-panel{ position:absolute;top:calc(100% + 6px);left:0;min-width:100%;z-index:30;padding:6px; opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none; transition:opacity .2s,transform .2s} .glass-select-wrap.open + .glass-pop.glass-select-panel, .glass-pop.glass-select-panel.open{opacity:1;transform:none;pointer-events:auto} .glass-option{display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:10px; font-size:14px;line-height:1.4;color:var(--ink);cursor:pointer; transition:background .12s,color .12s} .glass-option:hover{background:var(--row-h)} .glass-option.selected,.glass-option[aria-selected="true"]{ background:var(--opt-soft);color:var(--blue);font-weight:600} .glass-option.active{background:var(--blue);color:#fff} /* ============================================================================ 18. GLASS DATE PICKER — .glass-datepicker / .glass-cal / .glass-day (§3.9) ============================================================================ */ .glass-datepicker{position:relative;display:inline-block;width:100%} .glass-datepicker .glass-field{cursor:pointer;width:100%} .glass-cal{position:absolute;top:calc(100% + 6px);left:0;z-index:30; background:var(--pop); -webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%); border:1px solid var(--pop-edge);border-radius:var(--r-md); box-shadow:var(--pop-shadow),inset 0 1px 0 var(--inset); padding:14px;width:280px; opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none; transition:opacity .2s,transform .2s} .glass-datepicker.open .glass-cal,.glass-cal.open{opacity:1;transform:none;pointer-events:auto} .glass-cal-head{display:flex;align-items:center;justify-content:space-between; padding:2px 4px 10px;color:var(--ink);font-weight:600;font-size:14px} .glass-cal-head button{border:0;background:transparent;color:var(--ink-2);cursor:pointer; width:28px;height:28px;border-radius:8px;display:grid;place-items:center; transition:background .12s,color .12s} .glass-cal-head button:hover{background:var(--row-h);color:var(--ink)} .glass-cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px; font-size:11px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em; text-align:center;padding-bottom:4px} .glass-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .glass-day{aspect-ratio:1;display:grid;place-items:center;font-size:13px;border-radius:50%; cursor:pointer;color:var(--ink);transition:background .12s,color .12s,box-shadow .12s} .glass-day:hover{background:var(--opt-soft)} .glass-day.muted{color:var(--ink-3);opacity:.45} .glass-day.today{box-shadow:inset 0 0 0 1px var(--blue);font-weight:650} .glass-day.selected,.glass-day[aria-selected="true"]{ background:var(--blue);color:#fff;font-weight:650;border-radius:50%; box-shadow:0 3px 10px rgba(91,141,239,.4)} /* ============================================================================ 19. PERSON TOKEN — .person-token (Rule 15) — named-class variant of §13 .person Deterministic hue by last-name letter (set inline via --person-hue at render). ============================================================================ */ .person-token{display:inline-flex;align-items:center;gap:8px;min-width:0} .person-token .person-avatar{flex:none;width:28px;height:28px;border-radius:50%; display:grid;place-items:center; background:var(--person-hue,var(--blue));color:#fff; font-size:11px;font-weight:600;letter-spacing:.02em; box-shadow:0 0 0 1px var(--edge);overflow:hidden} .person-token .person-avatar img{width:100%;height:100%;object-fit:cover;display:block} .person-token .person-name{color:var(--ink);font-size:14px;font-weight:550; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .person-token .person-sub{color:var(--ink-3);font-size:12px} /* compact (dense tables) */ .person-token.compact{gap:6px} .person-token.compact .person-avatar{width:22px;height:22px;font-size:10px} .person-token.compact .person-name{font-size:12px} /* large (record header) */ .person-token.lg{gap:12px} .person-token.lg .person-avatar{width:48px;height:48px;font-size:18px} .person-token.lg .person-name{font-size:22px;font-weight:650;letter-spacing:-.01em} /* ============================================================================ 20. AURORA TIERS — surface classes (Rule 2/8) — finalize per F1 spec ============================================================================ */ .surface-showcase{} /* token defaults already lush */ .surface-showcase .aurora{--aurora-op:.7} .surface-data .aurora{--aurora-op:.15;--aurora-blur:84px} .surface-data .aurora span{animation:none} /* whisper + static */ /* light-mode only: raise pastel aurora to .34 so iridescence reads */ html:not([data-theme="dark"]) .surface-data .aurora{--aurora-op:.34} /* ── sky background (LIGHT mode only — §21 sky layer) ── */ .sky-bg{position:fixed;inset:0;z-index:0;pointer-events:none;display:none; background-image:var(--sky-img);background-size:cover; background-position:center;background-attachment:fixed} /* light: show sky photo, hide aurora blobs */ html:not([data-theme="dark"]) .sky-bg{display:block} html:not([data-theme="dark"]) .aurora{display:none} /* dark: sky stays hidden, aurora (white fog) unchanged — no rules needed */ /* ── moon background (DARK mode only — §22 moon layer) ── */ .moon-bg{position:fixed;inset:0;z-index:0;pointer-events:none;display:none; background-image:var(--dark-bg-img);background-size:cover; background-position:center bottom;background-attachment:fixed} /* dark: show moon, hide white-fog aurora blobs */ html[data-theme="dark"] .moon-bg{display:block} html[data-theme="dark"] .aurora{display:none} /* light: moon stays hidden, no change needed */ .surface-static .aurora{display:none} /* modals, popovers, print views */ /* Rule 8 — global motion kill for accessibility (in addition to §3 narrow rule) */ @media (prefers-reduced-motion:reduce){ .aurora span, .surface-showcase .aurora span, .surface-data .aurora span{animation:none!important} } /* ============================================================================ 22. LEAD RECORD — liquid-glass page components (v3.160.0) Built from docs/design/lead-record-mockup-v3.html. Tokens canonical. ============================================================================ */ /* 22.1 Breadcrumbs */ .crumbs{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3);margin:0 4px 16px} .crumbs a{color:var(--blue)} .crumbs .sep{opacity:.5} /* 22.2 Lead Hero Header */ /* overflow:visible + z-index so dropdowns escape hero and float above sibling cards */ .lead-hero{position:relative;padding:24px 26px 20px;margin-bottom:18px;overflow:visible;z-index:20} .lead-hero::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 160% at 0% 0%,rgba(91,141,239,.10),transparent 46%); will-change:transform} .hero-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:20px} .id-block{display:flex;gap:16px;min-width:0} .id-main{min-width:0} .src-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--ink-2); background:var(--field-bg);border:1px solid var(--glass-edge);padding:3px 10px;border-radius:999px;margin-bottom:7px} .src-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--blue)} .lc-never-pill{display:inline-flex;align-items:center;font-size:11px;font-weight:600;color:var(--amber); background:rgba(255,159,10,.12);border:1px solid rgba(255,159,10,.30);padding:3px 10px;border-radius:999px;vertical-align:middle;margin-left:4px} .lead-name{font-size:26px;font-weight:680;letter-spacing:-.02em;line-height:1.1;margin:0 0 6px} .ccontacts{display:flex;flex-wrap:wrap;gap:7px} .cchip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2); background:var(--field-bg);border:1px solid var(--glass-edge);padding:5px 11px;border-radius:999px; transition:color .15s,background .15s,transform .15s;text-decoration:none} .cchip:hover{color:var(--blue);transform:translateY(-1px)} .cchip svg{width:13px;height:13px;opacity:.75} [data-theme="dark"] .cchip{color:#fff} [data-theme="dark"] .cchip svg{color:#fff;opacity:.9} html:not([data-theme="dark"]) .cchip{color:var(--ink)} html:not([data-theme="dark"]) .cchip svg{color:var(--ink)} .meta-cells{display:flex;gap:10px;flex-none} .meta-cell{background:var(--field-bg);border:1px solid var(--glass-edge);border-radius:var(--r-md); padding:10px 14px;min-width:172px;box-shadow:inset 0 1px 0 var(--inset);cursor:pointer; transition:border-color .18s,box-shadow .18s,transform .15s} .meta-cell:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 var(--inset),0 4px 14px rgba(20,20,43,.08)} .meta-cell .mk{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3); margin-bottom:5px;display:flex;align-items:center;justify-content:space-between;gap:8px} .meta-cell .mk .rea{font-weight:600;letter-spacing:0;text-transform:none;color:var(--blue);font-size:10.5px;opacity:0;transition:opacity .15s} .meta-cell:hover .mk .rea{opacity:1} .meta-cell .mv{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600} .warn-dot{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800; color:#fff;background:var(--amber);flex:none} .hero-stat-pill{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:650;color:#fff; border-radius:999px;padding:5px 13px} .hero-stat-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff;opacity:.95} /* 22.3 Pipeline Path Bar */ .pathbar{display:flex;align-items:stretch;flex-wrap:nowrap;margin:22px 0 4px;border-radius:13px; overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin; border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--inset),0 2px 10px rgba(20,20,43,.06)} .pbseg{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:6px; font-size:11px;font-weight:600;padding:10px 18px;white-space:nowrap;flex-shrink:0; background:var(--field-bg);color:var(--ink-3);border-right:1px solid var(--hairline); cursor:pointer;transition:background .14s,color .14s;border-top:0;border-bottom:0;border-left:0} .pbseg .tk{width:13px;height:13px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:8px; background:rgba(0,0,0,.07);color:var(--ink-3)} .pbseg.done{background:rgba(29,29,31,.92);color:#fff;border-right-color:rgba(255,255,255,.10)} .pbseg.done .tk{background:rgba(255,255,255,.24);color:#fff} .pbseg.cur{flex:0 0 auto;padding:10px 26px;background:linear-gradient(180deg,#7BA3F3,#4478E6);color:#fff; border-right-color:rgba(255,255,255,.30);box-shadow:inset 0 1px 0 rgba(255,255,255,.4);font-weight:680} .pbseg.cur .tk{background:rgba(255,255,255,.30);color:#fff} .pbseg:hover:not(.cur):not(.done){background:rgba(91,141,239,.10);color:var(--blue)} .pbseg.lost{flex:0 0 auto;background:rgba(255,77,79,.12);color:#ff4d4f;border-right:0;border-left:2px solid var(--hairline)} .pbseg.lost .tk{background:rgba(255,77,79,.14);color:#ff4d4f} .pbseg.lost:hover{background:rgba(255,77,79,.08)} /* lost stage is the active stage — red fill */ .pbseg.lost.cur{flex:1.6 0 auto;background:linear-gradient(180deg,#ff6b6b,#dc2626);color:#fff;border-left:0;border-right:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.3);font-weight:680} .pbseg.lost.cur .tk{background:rgba(255,255,255,.28);color:#fff} .pbseg:last-child{border-right:0} /* Converted segment — faint green tint when unselected; active state is handled by .conv-lead override in lead.html */ .pbseg.conv{background:rgba(52,199,89,.12);color:#34c759} .pbseg.conv .tk{background:rgba(52,199,89,.14);color:#34c759} [data-theme="dark"] .pbseg.done{background:rgba(255,255,255,.16);color:var(--ink);border-right-color:rgba(255,255,255,.06)} [data-theme="dark"] .pbseg.done .tk{background:rgba(255,255,255,.26);color:var(--ink)} [data-theme="dark"] .pbseg:hover:not(.cur):not(.done){background:rgba(91,141,239,.18)} /* 22.4 Upcoming Showing Strip */ .showstrip{display:flex;align-items:center;gap:13px;margin-top:16px;padding:12px 16px;border-radius:14px; background:linear-gradient(180deg,rgba(91,141,239,.12),rgba(91,141,239,.07)); border:1px solid rgba(91,141,239,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)} .showstrip .ico{width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;color:#fff; background:linear-gradient(180deg,#7BA3F3,#4478E6);box-shadow:0 3px 10px rgba(91,141,239,.4)} .showstrip .ico svg{width:17px;height:17px} .showstrip .body{flex:1;min-width:0} .showstrip .lab{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);margin-bottom:2px} .showstrip .det{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .showstrip .det .dt{opacity:.4} .showstrip .det .prop{color:var(--blue);font-weight:600} .showstrip .upd{font-size:12.5px;font-weight:600;color:var(--blue);cursor:pointer;flex:none; display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:9px; border:1px solid rgba(91,141,239,.3);background:var(--field-bg);transition:background .15s,transform .15s} .showstrip .upd:hover{background:rgba(91,141,239,.14);transform:translateY(-1px)} [data-theme="dark"] .showstrip{background:linear-gradient(180deg,rgba(91,141,239,.10),rgba(91,141,239,.05));border-color:rgba(91,141,239,.28)} /* Variant B — amber (requested) */ .showstrip.req{background:linear-gradient(180deg,rgba(255,159,10,.12),rgba(255,159,10,.07));border-color:rgba(255,159,10,.30)} .showstrip.req .ico{background:linear-gradient(180deg,#FFB84D,#F59E0B);box-shadow:0 3px 10px rgba(245,158,11,.4)} .showstrip.req .lab{color:var(--amber)} .showstrip.req .det .prop{color:var(--amber)} .showstrip.req .upd{color:var(--amber);border-color:rgba(245,158,11,.3)} .showstrip.req .upd:hover{background:rgba(245,158,11,.14)} [data-theme="dark"] .showstrip.req{background:linear-gradient(180deg,rgba(255,159,10,.10),rgba(255,159,10,.05));border-color:rgba(255,159,10,.28)} /* Variant C — multiple (column layout: header row + expandable list) */ .showstrip.multi{flex-direction:column;align-items:stretch;gap:0} .showstrip.multi .ss-hrow{display:flex;align-items:center;gap:13px;width:100%} .ss-list{width:100%;margin-top:9px;display:flex;flex-direction:column;gap:0} .ss-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 2px;border-top:1px solid rgba(91,141,239,.15);font-size:12.5px} .ss-row-main{display:flex;align-items:center;gap:8px;flex:1;min-width:0;flex-wrap:wrap} .ss-row-dt{color:var(--ink);font-weight:600} .ss-row-addr{color:var(--blue);font-weight:600} .ss-row-upd{font-size:11.5px;padding:4px 9px;border-radius:7px} .ss-tag{font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 7px;border-radius:999px;background:var(--pill-info);color:#fff;flex:none} .ss-tag.amber{background:rgba(245,158,11,.25);color:var(--amber)} .ss-chev{font-size:13px;color:var(--blue);cursor:pointer;padding:6px 8px;border-radius:8px;flex:none;transition:background .15s} .ss-chev:hover{background:rgba(91,141,239,.10)} /* 22.5 Meta line + KPI line + follow-up .mck-when control */ .metaline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:16px;font-size:12.5px;color:var(--ink-3)} .metaline .md{opacity:.5} .kpiline{display:flex;gap:26px;margin-top:11px;flex-wrap:wrap} .kpi-i{display:inline-flex;align-items:baseline;gap:8px} .kpi-k{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)} .kpi-v{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em} .mck-when{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink);font-weight:550; padding:3px 8px 3px 6px;border-radius:8px;margin-left:-6px;white-space:nowrap;cursor:pointer} .mck-when svg{width:14px;height:14px;opacity:.7;flex-shrink:0} .mck-when .rsm-pencil{opacity:0;transition:opacity .14s;flex-shrink:0} .mck-when:hover{background:rgba(91,141,239,.10);color:var(--ink)} .mck-when:hover .rsm-pencil{opacity:.8} /* 22.6 Hero action row divider */ .hero-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:18px; padding-top:18px;border-top:1px solid var(--hairline)} .adiv{width:1px;height:22px;background:var(--hairline);margin:0 3px} /* 22.7 Glass Tab Bar */ .glass-tabs{display:flex;align-items:center;gap:4px;padding:5px;margin:18px 0 18px;width:fit-content;overflow:hidden} /* end-tab corner rounding matches container radius */ .glass-tab:first-child{border-top-left-radius:calc(var(--r-lg) - 5px);border-bottom-left-radius:calc(var(--r-lg) - 5px)} .glass-tab:last-child{border-top-right-radius:calc(var(--r-lg) - 5px);border-bottom-right-radius:calc(var(--r-lg) - 5px)} .glass-tab{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600; color:var(--ink-2);padding:8px 15px;border-radius:11px;cursor:pointer; transition:background .16s,color .16s;border:0;background:transparent} .glass-tab:hover{color:var(--ink);background:var(--row-h)} .glass-tab.on{background:#fff;color:var(--ink); box-shadow:0 2px 8px rgba(20,20,43,.12),inset 0 1px 0 rgba(255,255,255,.9)} [data-theme="dark"] .glass-tab.on{background:rgba(255,255,255,.16);color:var(--ink); box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} .glass-tab .tcnt{font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px;min-width:18px;text-align:center;background:var(--blue);color:#fff} .glass-tab:not(.on) .tcnt{background:rgba(0,0,0,.10);color:var(--ink-2)} [data-theme="dark"] .glass-tab:not(.on) .tcnt{background:rgba(255,255,255,.12);color:var(--ink-2)} /* 22.8 Showings Table LP-3 */ .sh-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;border-bottom:1px solid var(--hairline)} .sh-title{font-size:15px;font-weight:680;display:flex;align-items:center;gap:10px} .cnt-lg{font-size:12px;font-weight:700;background:rgba(91,141,239,.14);color:var(--blue);border-radius:999px;padding:2px 10px} .sh-table{width:100%;border-collapse:collapse} .sh-table thead th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em; color:var(--ink-3);font-weight:700;padding:13px 22px;border-bottom:1px solid var(--hairline)} .sh-table tbody td{padding:14px 22px;border-bottom:1px solid var(--hairline);font-size:13.5px;vertical-align:middle} .sh-table tbody tr.main{transition:background .14s;cursor:pointer} .sh-table tbody tr.main:hover{background:var(--row-h)} .sh-table tbody tr:last-child td{border-bottom:0} .sh-dt .sd{font-weight:650}.sh-dt .st{font-size:12px;color:var(--ink-3);margin-top:1px} .unit-lnk{color:var(--blue);font-weight:550;text-decoration:none} .dur-chip{display:inline-block;font-size:12px;font-weight:600;color:var(--ink-2); background:var(--field-bg);border:1px solid var(--glass-edge);padding:2px 9px;border-radius:999px} .spill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px; font-size:11.5px;font-weight:600;color:#fff} .spill::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;opacity:.9} .spill.sched{background:var(--pill-info)} .spill.done-s{background:var(--pill-pos)} .spill.cancel{background:rgba(118,118,128,.55)} .sh-detail>td{padding:0 22px 16px;border-bottom:1px solid var(--hairline)} .detail-card{background:rgba(255,255,255,.7);border:1px solid var(--glass-edge);border-radius:14px; padding:14px 16px;box-shadow:inset 0 1px 0 var(--inset)} [data-theme="dark"] .detail-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)} .detail-card .dc-notes{font-size:13px;color:var(--ink-3);margin-bottom:13px} .detail-card .dc-acts{display:flex;gap:9px;flex-wrap:wrap} .dbtn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:600; padding:8px 13px;border-radius:10px;cursor:pointer;border:1px solid var(--glass-edge); background:var(--btn-bg);color:var(--ink);transition:background .15s,transform .14s,border-color .15s} .dbtn:hover{background:var(--btn-bg-h);transform:translateY(-1px)} .dbtn svg{width:13px;height:13px;opacity:.8} .dbtn.upd{border-color:rgba(91,141,239,.35);color:var(--blue)} .dbtn.upd:hover{background:rgba(91,141,239,.10)} .dbtn.cancel-sh{border-color:rgba(255,77,79,.3);color:#ff4d4f} .dbtn.cancel-sh:hover{background:rgba(255,77,79,.08)} .dbtn .soon-tag{font-size:9.5px;font-weight:700;background:rgba(118,118,128,.18);color:var(--ink-3); padding:1px 6px;border-radius:999px;letter-spacing:.03em} /* 22.9 Activity feed nodes */ .tl-item{position:relative;display:flex;gap:15px;padding:13px 0} .timeline{position:relative;margin-top:8px} .timeline::before{content:"";position:absolute;left:18px;top:14px;bottom:14px; width:2px;background:var(--hairline)} .tl-node{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center; color:#fff;z-index:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)} .tl-node svg{width:18px;height:18px} .tl-node.tn-stage{background:linear-gradient(180deg,#7BA3F3,#4478E6);box-shadow:0 3px 10px rgba(91,141,239,.35)} .tl-node.tn-showing{background:linear-gradient(180deg,#b69bff,#8e7bff);box-shadow:0 3px 10px rgba(142,123,255,.35)} .tl-node.tn-followup{background:linear-gradient(180deg,#ffc266,#ff9f0a);box-shadow:0 3px 10px rgba(255,159,10,.35)} .tl-node.tn-comm{background:linear-gradient(180deg,#5ad97f,#34c759);box-shadow:0 3px 10px rgba(52,199,89,.35)} .tl-node.tn-note{background:var(--field-bg);border:1px solid var(--glass-edge);color:var(--ink-2);box-shadow:none} .tl-node.tn-user{position:relative;width:38px;height:38px;border-radius:50%;padding:0;overflow:visible; background:linear-gradient(150deg,#9db4e8,#6f8fe6);display:grid;place-items:center; color:#fff;box-shadow:0 2px 8px rgba(20,20,43,.18)} .tl-node.tn-user>img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover} [data-theme="dark"] .tl-badge{box-shadow:0 0 0 2px rgba(16,16,22,.96)} .tl-badge{position:absolute;right:-3px;bottom:-3px;width:18px;height:18px;border-radius:50%; display:grid;place-items:center;color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.92)} .tl-badge svg{width:10px;height:10px} .tl-badge.tb-showing{background:#8e7bff} .tl-badge.tb-followup{background:#ff9f0a} .tl-badge.tb-note{background:#76767e} .tl-badge.tb-comm{background:#34c759} .tl-body{flex:1;min-width:0;padding-top:1px} .tl-meta{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .tl-meta b{font-size:14px;font-weight:650} .tl-actor-tag{font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase; background:rgba(118,118,128,.16);color:var(--ink-3);padding:1px 7px;border-radius:999px} .tl-time{font-size:12px;color:var(--ink-3);margin-left:auto;flex:none} .tl-text{font-size:13.5px;color:var(--ink-2);margin-top:3px;line-height:1.5} .tl-text b{color:var(--ink);font-weight:600} .tl-note-body{background:var(--field-bg);border:1px solid var(--glass-edge);border-radius:12px; padding:10px 13px;margin-top:6px;font-size:13.5px;color:var(--ink);line-height:1.5} .tl-replies{margin-top:12px;padding-left:16px;border-left:2px solid var(--hairline); display:flex;flex-direction:column;gap:12px} .mention{color:var(--blue);font-weight:600;background:rgba(91,141,239,.1);padding:1px 6px;border-radius:6px} /* 22.10 Property interest pills + spec chips */ .interests{display:flex;flex-direction:column;gap:8px;flex:1} .ipill{display:flex;align-items:center;justify-content:space-between;gap:10px; background:rgba(91,141,239,.10);border:1px solid rgba(91,141,239,.22);border-radius:12px; padding:9px 12px;font-size:13.5px;font-weight:550;color:var(--blue); transition:background .15s,transform .12s} .ipill:hover{background:rgba(91,141,239,.16);transform:translateY(-1px)} .ipill .ix{color:var(--ink-3);cursor:pointer;font-size:15px;line-height:1;opacity:.7} .ipill .ix:hover{color:#ff4d4f;opacity:1} .add-prop{display:flex;align-items:center;gap:8px;background:var(--field-bg); border:1px dashed var(--glass-edge);border-radius:12px;padding:9px 12px; font-size:13px;color:var(--ink-3);cursor:pointer;transition:border-color .15s,color .15s} .add-prop:hover{border-color:var(--blue);color:var(--blue)} .spec-chips{display:flex;gap:7px;flex-wrap:wrap} .spec-chip{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600; background:var(--field-bg);border:1px solid var(--glass-edge);padding:5px 11px;border-radius:999px} .spec-chip svg{width:13px;height:13px;opacity:.7} /* 22.11 Responsive overrides for hero */ @media (max-width:920px){ .hero-top{flex-direction:column} .meta-cells{flex-direction:row;flex-wrap:wrap} .meta-cell{min-width:0;flex:1} } /* ============================================================================ 21. @SUPPORTS FALLBACK — backdrop-filter-less browsers (§9.7 / Rule 5) ============================================================================ */ @supports not (backdrop-filter: blur(1px)){ .glass-panel{background:rgba(255,255,255,.92)!important} [data-theme="dark"] .glass-panel{background:rgba(30,30,40,.95)!important} .glass-pop{background:rgba(255,255,255,.97)!important} [data-theme="dark"] .glass-pop{background:rgba(28,28,38,.98)!important} .glass-field{background:rgba(255,255,255,.95)!important} [data-theme="dark"] .glass-field{background:rgba(40,40,52,.95)!important} .glass-select-wrap{background:rgba(255,255,255,.95)!important} [data-theme="dark"] .glass-select-wrap{background:rgba(40,40,52,.95)!important} .glass-cal{background:rgba(255,255,255,.97)!important} [data-theme="dark"] .glass-cal{background:rgba(28,28,38,.98)!important} } /* ============================================================================ 23. LEGACY TOKEN COMPATIBILITY SHIM Maps old --color-* tokens (used by pre-existing modal HTML + JS-rendered content) to their glass.css equivalents. Keeps those surfaces functional after the inline