/* Market research: Chat, Radar and Map. Palette and type match the PDF report. Light theme only. */ :root { --ink: #0A2A2F; --teal: #0F6E6B; --teal-hover: #0C5D5A; --teal-press: #0A4E4C; --seafoam: #7CC5B8; --mist: #E4F1EE; --mist-2: #D7EAE5; --coral: #EF6A4C; --coral-soft: #FCE7E1; --sand: #FAF6F0; --sand-2: #F4EFE6; --sand-3: #ECE5D8; --white: #FFFFFF; --text-2: #3F5A5E; --muted: #5A6D70; /* grey small print: 5.45:1 on white, 5.06:1 on sand (was #6E8285, 4.04 / 3.75) */ --rule: #E3DCD0; --rule-2: #EFEAE1; --font: "Manrope", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; --r-sm: 8px; --r: 12px; --r-lg: 18px; --shadow-sm: 0 1px 2px rgba(10, 42, 47, .05); --shadow: 0 1px 2px rgba(10, 42, 47, .04), 0 8px 28px -12px rgba(10, 42, 47, .16); --shadow-lg: 0 30px 70px -24px rgba(10, 42, 47, .38); --side-w: 284px; --col: 760px; --ease: cubic-bezier(.2, .7, .2, 1); --tabbar-h: 64px; /* v2 names (same palette) used by the Radar, the Map and the chat cards */ --surface: var(--white); --surface-2: var(--sand-2); --surface-3: var(--sand-3); --teal-text: var(--teal); --on-teal: var(--white); --coral-ink: #9E3D26; /* "Watch" text: 5.61:1 on coral-soft (was #B9492F, 4.35) */ --band: var(--ink); --band-muted: rgba(255, 255, 255, .72); --shadow-up: 0 -6px 20px -14px rgba(10, 42, 47, .35); /* map */ --map-land: #F1ECE3; --map-area: #FBF8F3; --map-area-line: #D9CFBF; --map-road: #E2D6C3; --map-road-major: #D4C4AB; --map-coast: #9CCFC6; --map-bldg: #0F6E6B; --map-label: #3F5A5E; --line-red: #D8473B; --line-green: #2E9A5B; --line-blue: #2F6FC4; --seq-0: #E9F3F0; --seq-1: #BFE0D8; --seq-2: #7CC5B8; --seq-3: #2E908A; --seq-4: #0F5F5C; --heat-0: #EEF4F1; --heat-1: #F7E3C9; --heat-2: #F5C3A4; --heat-3: #F09A7C; --heat-4: #E2654A; /* time machine: 7-step price ramp, change-since-first-year diverging pair (teal down, coral up), "too few deals" hatch */ --tm-0: #D3EBE4; --tm-1: #ACD9CD; --tm-2: #84C4B7; --tm-3: #5AAB9F; --tm-4: #348F88; --tm-5: #17706D; --tm-6: #0A4F4E; --dv-d3: #1B706B; --dv-d2: #5FA89F; --dv-d1: #B4DCD3; --dv-0: #ECE8E1; --dv-u1: #F4C7B6; --dv-u2: #EA8E6F; --dv-u3: #C94A2E; --tm-hatch: #D9CFC0; --tm-halo: rgba(241, 236, 227, .92); color-scheme: light; /* colours outside the palette (one each): change them with the palette */ --black: #000000; --coral-hover: #E85D3E; --rule-strong: #D3CABB; --amber-ink: #8A5A12; --rule-dash: #CDBFA8; --rule-dash-2: #C9BBA4; /* derived: shades and see-through versions of the palette above, so a palette change carries them */ --ink-a4: color-mix(in srgb, var(--ink) 4%, transparent); --ink-a28: color-mix(in srgb, var(--ink) 28%, transparent); --teal-a18: color-mix(in srgb, var(--teal) 18%, transparent); --seafoam-a20: color-mix(in srgb, var(--seafoam) 20%, transparent); --teal-a50: color-mix(in srgb, var(--teal) 50%, transparent); --ink-a6: color-mix(in srgb, var(--ink) 6%, transparent); --teal-a15: color-mix(in srgb, var(--teal) 15%, transparent); --teal-a45: color-mix(in srgb, var(--teal) 45%, transparent); --teal-a0: color-mix(in srgb, var(--teal) 0%, transparent); --seafoam-a16: color-mix(in srgb, var(--seafoam) 16%, transparent); --mist-a50: color-mix(in srgb, var(--mist) 50%, transparent); --seafoam-a50: color-mix(in srgb, var(--seafoam) 50%, transparent); --seafoam-a0: color-mix(in srgb, var(--seafoam) 0%, transparent); --sand-a0: color-mix(in srgb, var(--sand) 0%, transparent); --seafoam-a28: color-mix(in srgb, var(--seafoam) 28%, transparent); --white-a60: color-mix(in srgb, var(--white) 60%, transparent); --ink-a38: color-mix(in srgb, var(--ink) 38%, transparent); --white-a70: color-mix(in srgb, var(--white) 70%, transparent); --seafoam-a14: color-mix(in srgb, var(--seafoam) 14%, transparent); --seafoam-a55: color-mix(in srgb, var(--seafoam) 55%, transparent); --ink-a32: color-mix(in srgb, var(--ink) 32%, transparent); --teal-a35: color-mix(in srgb, var(--teal) 35%, transparent); --white-a85: color-mix(in srgb, var(--white) 85%, transparent); --white-a25: color-mix(in srgb, var(--white) 25%, transparent); --teal-a55: color-mix(in srgb, var(--teal) 55%, transparent); --white-a7: color-mix(in srgb, var(--white) 7%, transparent); --white-a16: color-mix(in srgb, var(--white) 16%, transparent); --black-a50: color-mix(in srgb, var(--black) 50%, transparent); --white-a74: color-mix(in srgb, var(--white) 74%, transparent); --ink-a20: color-mix(in srgb, var(--ink) 20%, transparent); --teal-a22: color-mix(in srgb, var(--teal) 22%, transparent); --ink-a70: color-mix(in srgb, var(--ink) 70%, transparent); --white-a96: color-mix(in srgb, var(--white) 96%, transparent); --teal-a20: color-mix(in srgb, var(--teal) 20%, transparent); --sand-a94: color-mix(in srgb, var(--sand) 94%, transparent); --teal-a70: color-mix(in srgb, var(--teal) 70%, transparent); --ink-a8: color-mix(in srgb, var(--ink) 8%, transparent); --white-a8: color-mix(in srgb, var(--white) 8%, transparent); --teal-a80: color-mix(in srgb, var(--teal) 80%, transparent); --white-a86: color-mix(in srgb, var(--white) 86%, transparent); --ink-a25: color-mix(in srgb, var(--ink) 25%, transparent); --sand-a95: color-mix(in srgb, var(--sand) 95%, transparent); --teal-a14: color-mix(in srgb, var(--teal) 14%, transparent); --white-a55: color-mix(in srgb, var(--white) 55%, transparent); --coral-a45: color-mix(in srgb, var(--coral) 45%, transparent); --coral-a70: color-mix(in srgb, var(--coral) 70%, transparent); --coral-a0: color-mix(in srgb, var(--coral) 0%, transparent); --coral-a50: color-mix(in srgb, var(--coral) 50%, transparent); --coral-light: color-mix(in srgb, var(--coral) 86%, var(--white)); --seafoam-a40: color-mix(in srgb, var(--seafoam) 40%, transparent); --seafoam-a30: color-mix(in srgb, var(--seafoam) 30%, transparent); --white-a72: color-mix(in srgb, var(--white) 72%, transparent); --teal-sand-2-45: color-mix(in srgb, var(--teal) 45%, var(--sand-2)); --rule-2-tint-15: color-mix(in srgb, var(--rule-2) 15%, var(--white)); --danger-ink: color-mix(in srgb, var(--coral) 7%, var(--coral-ink)); --sand-sand-2-42: color-mix(in srgb, var(--sand) 42%, var(--sand-2)); --rule-hover: color-mix(in srgb, var(--mist) 76%, var(--coral-ink)); --mist-tint-53: color-mix(in srgb, var(--mist) 53%, var(--white)); --coral-soft-tint-14: color-mix(in srgb, var(--coral-soft) 14%, var(--white)); --muted-tint-70: color-mix(in srgb, var(--muted) 70%, var(--white)); --muted-tint-81: color-mix(in srgb, var(--muted) 81%, var(--white)); --coral-soft-tint-22: color-mix(in srgb, var(--coral-soft) 22%, var(--white)); --coral-sand-2-23: color-mix(in srgb, var(--coral) 23%, var(--sand-2)); --sand-muted-39: color-mix(in srgb, var(--sand) 39%, var(--muted)); --ink-seafoam-86: color-mix(in srgb, var(--ink) 86%, var(--seafoam)); --sand-tint-61: color-mix(in srgb, var(--sand) 61%, var(--white)); --sand-coral-soft-70: color-mix(in srgb, var(--sand) 70%, var(--coral-soft)); --seafoam-mist-27: color-mix(in srgb, var(--seafoam) 27%, var(--mist)); --muted-tint-52: color-mix(in srgb, var(--muted) 52%, var(--white)); --seafoam-sand-40: color-mix(in srgb, var(--seafoam) 40%, var(--sand)); --muted-tint-47: color-mix(in srgb, var(--muted) 47%, var(--white)); --muted-warm: color-mix(in srgb, var(--coral-ink) 2%, var(--muted)); --sand-tint-49: color-mix(in srgb, var(--sand) 49%, var(--white)); --muted-tint-60: color-mix(in srgb, var(--muted) 60%, var(--white)); --ink-mist-33: color-mix(in srgb, var(--ink) 33%, var(--mist)); } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--sand); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.6; font-feature-settings: "ss01" 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } button:disabled { cursor: default; } a { color: var(--teal); } [hidden] { display: none !important; } img, svg { display: block; } h1, h2, h3, h4, h5, h6, p { margin: 0; } :focus { outline: none; } :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .muted { color: var(--muted); } .eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); } /* ----------------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: var(--r); border: 1px solid transparent; background: none; font-weight: 700; font-size: 15px; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease; } .btn:active:not(:disabled) { transform: translateY(1px); } .btn-primary { background: var(--teal); color: var(--white); } .btn-primary:hover:not(:disabled) { background: var(--teal-hover); } .btn-primary:active:not(:disabled) { background: var(--teal-press); } .btn-primary:disabled { background: var(--teal-sand-2-45); } .btn-ghost { background: var(--white); border-color: var(--rule); color: var(--ink); } .btn-ghost:hover:not(:disabled) { border-color: var(--seafoam); background: var(--rule-2-tint-15); } .btn-danger { background: var(--coral); color: var(--ink); } .btn-danger:hover:not(:disabled) { background: var(--coral-hover); } .btn-quiet-danger { background: transparent; border-color: var(--rule); color: var(--ink); } .btn-quiet-danger:hover:not(:disabled) { border-color: var(--coral); background: var(--coral-soft); } .btn-block { width: 100%; } .btn-sm { height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; gap: 6px; } .btn-icon { display: inline-flex; } .btn-icon svg { width: 16px; height: 16px; } .icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 0; background: transparent; color: var(--text-2); text-decoration: none; transition: background-color .15s ease, color .15s ease; } .icon-btn:hover { background: var(--sand-3); color: var(--ink); } .link-btn { border: 0; background: none; padding: 0; color: var(--teal); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .spinner { width: 16px; height: 16px; border-radius: 50%; flex: none; border: 2px solid currentColor; border-right-color: transparent; opacity: .85; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .boot { min-height: 100dvh; display: grid; place-items: center; color: var(--teal); } .boot .spinner { width: 22px; height: 22px; } /* ------------------------------------------------------- dot motif */ .dotfield { width: 100%; height: auto; } .dotfield.animate .d { opacity: 0; animation: dot-in .9s var(--ease) forwards; animation-delay: var(--d); } .dotfield .ring { transform-box: fill-box; transform-origin: center; animation: ring 4.8s ease-in-out infinite; } @keyframes dot-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } @keyframes ring { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .45; } } /* ------------------------------------------------------------- auth */ .auth { min-height: 100dvh; position: relative; display: flex; flex-direction: column; } .auth-band { position: absolute; inset: 0 0 auto 0; height: 300px; background: var(--ink); overflow: hidden; } .auth-motif { position: absolute; right: -30px; top: 8px; width: 420px; max-width: 95vw; opacity: .95; } .auth-main { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 0 auto; padding: 56px 16px 48px; } .auth-eyebrow { color: var(--seafoam); margin-bottom: 18px; } .auth-card { background: var(--white); border-radius: 20px; padding: 32px 28px 28px; box-shadow: 0 2px 4px var(--ink-a4), 0 18px 48px -18px var(--ink-a28); animation: rise .5s var(--ease) both; } @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .auth-title { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.025em; } .auth-lede { color: var(--text-2); margin-top: 8px; font-size: 15.5px; } .auth-card > .btn { margin-top: 24px; } .auth-form { margin-top: 24px; display: grid; gap: 16px; } .auth-form .btn { margin-top: 6px; height: 48px; } .auth-loading { display: flex; align-items: center; gap: 12px; color: var(--text-2); padding: 8px 0; } .field { display: grid; gap: 6px; } .field label { font-size: 14px; font-weight: 700; } .input-wrap { position: relative; } .field input, .fresh-url, .conv-input { width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r); background: var(--white); border: 1px solid var(--rule); font-size: 16px; transition: border-color .15s ease, box-shadow .15s ease; } .field input:hover { border-color: var(--rule-strong); } .field input:focus-visible, .fresh-url:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-a18); } .field input[aria-invalid="true"] { border-color: var(--coral); } .input-wrap input { padding-inline-end: 48px; } .input-wrap input:only-child { padding-inline-end: 14px; } .input-toggle { position: absolute; inset-inline-end: 4px; top: 4px; width: 40px; height: 40px; border-radius: 9px; border: 0; background: transparent; color: var(--muted); display: grid; place-items: center; } .input-toggle:hover { color: var(--ink); background: var(--sand-2); } .field-hint { font-size: 13px; color: var(--muted); } .field-error { font-size: 13.5px; color: var(--ink); display: flex; gap: 6px; align-items: center; } .field-error::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); flex: none; } .form-error { display: flex; gap: 10px; align-items: flex-start; background: var(--coral-soft); border-inline-start: 3px solid var(--coral); padding: 10px 12px; border-radius: 8px; font-size: 14.5px; line-height: 1.45; } .form-error-icon { color: var(--danger-ink); flex: none; margin-top: 1px; } /* ------------------------------------------------------------ shell */ .shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); height: 100dvh; overflow: hidden; } .sidebar { background: var(--sand-2); border-inline-end: 1px solid var(--rule); display: flex; flex-direction: column; min-height: 0; min-width: 0; } .side-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px 16px; } .mark { display: inline-flex; border-radius: 9px; } .side-close { display: none; } .new-chat { margin: 4px 12px 10px; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 12px; background: var(--white); border: 1px solid var(--rule); color: var(--ink); font-weight: 700; font-size: 14.5px; text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color .15s ease, box-shadow .15s ease; } .new-chat:hover { border-color: var(--seafoam); box-shadow: 0 0 0 3px var(--seafoam-a20); } .new-chat-icon { width: 24px; height: 24px; border-radius: 7px; background: var(--teal); color: var(--white); display: grid; place-items: center; } .new-chat-icon svg { width: 16px; height: 16px; } .convs { flex: 1; overflow-y: auto; padding: 4px 8px 16px; overscroll-behavior: contain; } .convs-group + .convs-group { margin-top: 14px; } .convs-label { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 8px 10px 6px; } .convs-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; } .conv { position: relative; display: flex; align-items: center; border-radius: 10px; } .conv:hover { background: var(--sand-3); } .conv.is-active { background: var(--mist); } .conv.is-active::before { content: ""; position: absolute; inset-inline-start: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--teal); } .conv-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 8px 4px 8px 12px; color: var(--ink); text-decoration: none; font-size: 14.5px; font-weight: 500; border-radius: 10px; } .conv.is-active .conv-link { font-weight: 700; } .conv-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-live { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex: none; box-shadow: 0 0 0 0 var(--teal-a50); animation: pulse 1.6s ease-out infinite; } .conv-more { width: 32px; height: 32px; margin-inline-end: 4px; opacity: 0; flex: none; } .conv:hover .conv-more, .conv.is-active .conv-more, .conv-more:focus-visible, .conv-more[aria-expanded="true"] { opacity: 1; } .conv-more:hover { background: var(--ink-a6); } .conv.is-editing { background: var(--white); } .conv-input { height: 38px; font-size: 14.5px; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-a15); } .convs-note { padding: 12px 10px; color: var(--muted); font-size: 14px; display: grid; gap: 6px; justify-items: start; } .convs-skeleton { display: grid; gap: 10px; padding: 14px 10px; } .convs-skeleton span { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--sand-3), var(--sand-sand-2-42), var(--sand-3)); background-size: 200% 100%; animation: sheen 1.4s linear infinite; } .convs-skeleton span:nth-child(2) { width: 70%; } .convs-skeleton span:nth-child(4) { width: 55%; } .side-foot { border-top: 1px solid var(--rule); padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 10px; } .me { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 4px; } .avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--seafoam); font-weight: 800; font-size: 14px; position: relative; } .avatar::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--coral); border: 2px solid var(--sand-2); } .me-text { min-width: 0; flex: 1; } .me-name { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.3; } .me-role { font-size: 12.5px; color: var(--muted); } .usage { display: grid; gap: 5px; margin-top: 2px; } .usage-text { font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; } .usage-bar { height: 3px; border-radius: 3px; background: var(--sand-3); overflow: hidden; } .usage-bar > span { display: block; height: 100%; background: var(--teal); border-radius: 3px; transition: width .4s var(--ease); } .usage.is-full .usage-bar > span { background: var(--coral); } .foot-actions { display: flex; gap: 6px; } .foot-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; border-radius: 10px; border: 1px solid var(--rule); background: transparent; color: var(--text-2); font-size: 13.5px; font-weight: 700; text-decoration: none; } .foot-btn:hover { background: var(--white); color: var(--ink); border-color: var(--rule-hover); } .foot-btn svg { width: 16px; height: 16px; } .scrim { display: none; } /* ------------------------------------------------------------- chat */ .chat { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; } .topbar { flex: none; display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 16px; position: relative; z-index: 2; } .menu-btn, .top-new { display: none; } .top-title { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.005em; padding-inline-start: 8px; text-align: left; } .chat.is-empty .top-title { visibility: hidden; } .top-title.fade-in { animation: fade-in .5s var(--ease); } @keyframes fade-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } .scroller { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-padding-bottom: 24px; } .thread { max-width: var(--col); margin: 0 auto; padding: 8px 16px 40px; display: flex; flex-direction: column; gap: 28px; } /* empty state */ .empty { max-width: var(--col); margin: 0 auto; padding: 0 16px; text-align: center; display: flex; flex-direction: column; align-items: center; } .empty-motif { width: 216px; margin-bottom: 18px; } .greet { font-size: clamp(26px, 4.2vw, 36px); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: var(--ink); text-wrap: balance; } .greet-sub { margin-top: 10px; color: var(--text-2); font-size: 16px; } .chat.is-empty .scroller { flex: 0 1 auto; margin-top: auto; overflow: visible; } .chat.is-empty .dock { margin-bottom: auto; padding-top: 28px; } .chat.is-empty .thread { display: none; } .chat.is-empty { padding-bottom: 7vh; } /* messages */ .msg { min-width: 0; } .msg-user { display: flex; justify-content: flex-end; animation: msg-in .35s var(--ease) both; } .bubble { max-width: min(85%, 600px); background: var(--mist); color: var(--ink); padding: 10px 16px; border-radius: 20px 20px 6px 20px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 16px; line-height: 1.55; } .bubble:dir(rtl) { border-radius: 20px 20px 20px 6px; } @keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .msg-assistant { animation: msg-in .35s var(--ease) both; } .msg-note { margin-top: 10px; font-size: 13.5px; color: var(--muted); font-style: italic; } /* rendered markdown */ .md { font-size: 16px; line-height: 1.7; color: var(--ink); overflow-wrap: anywhere; } .md > * + * { margin-top: 14px; } .md h2, .md h3, .md h4, .md h5, .md h6 { line-height: 1.3; letter-spacing: -.015em; font-weight: 800; } .md h2 { font-size: 21px; margin-top: 26px; } .md h3 { font-size: 18px; margin-top: 24px; } .md h4, .md h5, .md h6 { font-size: 16px; margin-top: 20px; } .md > :first-child { margin-top: 0; } .md h2 + *, .md h3 + *, .md h4 + * { margin-top: 8px; } .md strong { font-weight: 750; } .md a { color: var(--teal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--teal-a45); font-weight: 600; } .md a:hover { text-decoration-color: var(--teal); } .md ul, .md ol { padding-inline-start: 24px; margin-bottom: 0; } .md li + li { margin-top: 6px; } .md li > ul, .md li > ol { margin-top: 6px; } .md ul > li::marker { color: var(--teal); } .md ol > li::marker { color: var(--teal); font-weight: 700; font-variant-numeric: tabular-nums; } .md blockquote { margin-inline: 0; padding: 10px 16px; background: var(--mist); border-inline-start: 3px solid var(--seafoam); border-radius: 4px 10px 10px 4px; color: var(--text-2); } .md blockquote > * + * { margin-top: 8px; } .md hr { border: 0; height: 1px; background: var(--rule); margin: 22px 0; } .md code { font-family: var(--mono); font-size: .86em; background: var(--mist); color: var(--ink); padding: .12em .4em; border-radius: 6px; } .md pre { background: var(--ink); color: var(--mist); border-radius: 12px; padding: 14px 16px; overflow-x: auto; font-size: 13.5px; line-height: 1.6; } .md pre code { background: none; color: inherit; padding: 0; font-size: inherit; } .table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); max-width: 100%; } .table-wrap:focus-visible { outline-offset: 2px; } .md table { border-collapse: collapse; width: 100%; font-size: 14.5px; font-variant-numeric: tabular-nums lining-nums; } .md th { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: start; padding: 11px 14px 9px; border-bottom: 1px solid var(--rule); white-space: nowrap; background: var(--white); } .md td { padding: 9px 14px; border-bottom: 1px solid var(--rule-2); vertical-align: top; } .md tbody tr:nth-child(even) td { background: var(--mist-tint-53); } .md tbody tr:last-child td { border-bottom: 0; } .md td:first-child { font-weight: 650; } .md .a-right { text-align: end; } .md .a-center { text-align: center; } .md td.a-right, .md td.a-center { white-space: nowrap; } /* live status */ .status { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 14.5px; font-weight: 600; min-height: 26px; } .md:not([hidden]) + .status { margin-top: 12px; } .status-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--teal); flex: none; animation: pulse 1.6s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--teal-a45); } 70% { box-shadow: 0 0 0 9px var(--teal-a0); } 100% { box-shadow: 0 0 0 0 var(--teal-a0); } } .status-text, .shimmer { background: linear-gradient(90deg, var(--text-2) 0%, var(--text-2) 40%, var(--seafoam) 50%, var(--text-2) 60%, var(--text-2) 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 2.2s linear infinite; } .status-text.swap { animation: sheen 2.2s linear infinite, fade-in .4s var(--ease); } @keyframes sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } } /* report card */ .reports { display: grid; gap: 10px; } .reports:not(:empty) { margin-top: 18px; } .report { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; max-width: 580px; padding: 14px 14px 14px 14px; border-radius: 16px; background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); animation: msg-in .35s var(--ease) both; } .report-icon { position: relative; width: 46px; height: 54px; flex: none; border-radius: 10px; background: var(--mist); color: var(--teal); display: grid; place-items: center; } .report-icon::after { content: ""; position: absolute; top: 7px; right: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); } .report-meta { flex: 1; min-width: 0; } .report-title { font-weight: 750; font-size: 15px; line-height: 1.35; letter-spacing: -.005em; } .report-sub { font-size: 13.5px; color: var(--text-2); margin-top: 2px; line-height: 1.45; } .report-actions { display: flex; gap: 8px; flex: none; } .report.is-building::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 20%, var(--seafoam-a16) 45%, var(--mist-a50) 50%, var(--seafoam-a16) 55%, transparent 80%); background-size: 250% 100%; animation: sheen 1.8s linear infinite; } .report.is-building .report-icon::after { display: none; } .report.is-building .report-icon svg { animation: breathe 1.8s ease-in-out infinite; } @keyframes breathe { 50% { opacity: .45; } } .report.is-failed { background: var(--coral-soft-tint-14); } .report.is-failed .report-icon { background: var(--coral-soft); color: var(--coral-ink); } .report.is-failed .report-icon::after { display: none; } .report.is-failed .report-sub { color: var(--ink); } .report.changed { animation: settle .5s var(--ease); } .report.is-ready.changed { animation: settle .5s var(--ease), glow 1.8s ease-out; } @keyframes settle { from { transform: scale(.985); } to { transform: none; } } @keyframes glow { from { box-shadow: 0 0 0 4px var(--seafoam-a50); } to { box-shadow: 0 0 0 4px var(--seafoam-a0); } } /* inline notices */ .notice { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; animation: msg-in .3s var(--ease) both; } .notice-text { flex: 1; min-width: 0; } .notice-icon { flex: none; display: inline-flex; } .notice-error { background: var(--coral-soft); } .notice-error .notice-icon { color: var(--danger-ink); } .notice-limit { background: var(--mist); } .notice-limit .notice-icon { color: var(--teal); } /* feedback under an answer: quiet thumbs, a small comment box on thumbs down */ .fb-wrap:empty { display: none; } .fb { margin-top: 10px; } .reports:not(:empty) ~ .fb-wrap .fb { margin-top: 12px; } .fb-row { display: flex; align-items: center; gap: 2px; min-height: 30px; margin-inline-start: -6px; } .fb-btn { width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--muted-tint-70); display: grid; place-items: center; transition: background-color .15s ease, color .15s ease, transform .1s ease; } .fb-btn svg { width: 15px; height: 15px; } .fb-btn svg .fill { transition: fill .15s ease; } .fb-btn:hover { background: var(--sand-2); color: var(--ink); } .fb-btn:active { transform: scale(.92); } .fb-btn[aria-pressed="true"] { color: var(--teal); } .fb-btn[aria-pressed="true"] svg .fill { fill: currentColor; } .fb-btn[aria-pressed="true"] svg .cut { stroke: var(--sand); } .fb-btn.fb-down[aria-pressed="true"] { color: var(--danger-ink); } .fb-more { border: 0; background: none; padding: 4px 8px; margin-inline-start: 4px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); } .fb-more:hover { color: var(--ink); background: var(--sand-2); } .fb-thanks { font-size: 12.5px; color: var(--muted); margin-inline-start: 6px; opacity: 0; transition: opacity .3s ease; } .fb-thanks.show { opacity: 1; } .fb-panel { margin-top: 6px; max-width: 520px; padding: 12px 12px 10px 14px; border-radius: 14px; background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); display: grid; gap: 10px; animation: msg-in .25s var(--ease) both; } .fb-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .fb-q { font-size: 14px; font-weight: 700; } .fb-close { width: 30px; height: 30px; margin: -4px -4px -4px 0; } .fb-close svg { width: 16px; height: 16px; } .fb-chips { display: flex; flex-wrap: wrap; gap: 6px; } .fb-chip { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--white); font-size: 13px; font-weight: 600; color: var(--text-2); transition: border-color .15s ease, background-color .15s ease, color .15s ease; } .fb-chip:hover { border-color: var(--seafoam); color: var(--ink); } .fb-chip[aria-pressed="true"] { background: var(--mist); border-color: var(--seafoam); color: var(--teal); } .fb-text { width: 100%; resize: vertical; min-height: 60px; max-height: 200px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--rule); background: var(--rule-2-tint-15); font-size: 14.5px; line-height: 1.5; } .fb-text:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-a15); background: var(--white); } .fb-text::placeholder { color: var(--muted-tint-81); } .fb-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .fb-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; margin-inline-end: auto; } /* read-only feedback (admin chat review) */ .fb-view { margin-top: 12px; max-width: 580px; padding: 10px 14px; border-radius: 12px; font-size: 14px; border: 1px solid var(--rule); background: var(--white); } .fb-view-head { display: flex; align-items: center; gap: 8px; font-weight: 700; } .fb-view-icon { display: inline-flex; } .fb-view-icon svg .fill { fill: currentColor; } .fb-view-icon svg .cut { stroke: var(--white); } .fb-view.is-up .fb-view-icon { color: var(--teal); } .fb-view.is-down { background: var(--coral-soft-tint-22); border-color: var(--coral-sand-2-23); } .fb-view.is-down .fb-view-icon { color: var(--danger-ink); } .fb-view-comment { margin-top: 4px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; } /* "chats are saved" line */ .composer-note { max-width: var(--col); margin: 8px auto 0; text-align: center; font-size: 12px; line-height: 1.4; color: var(--muted); } .chat.is-empty .composer-note { order: 1; } .auth-note { margin-top: 18px; text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--muted); } .thread-msg { text-align: center; padding: 64px 16px; display: grid; gap: 10px; justify-items: center; } .thread-msg h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; } .thread-msg p { color: var(--text-2); } .thread-msg .btn { margin-top: 10px; } .fatal { min-height: 100dvh; display: grid; place-items: center; } .thread-skeleton { display: grid; gap: 12px; padding-top: 16px; } .thread-skeleton span { display: block; height: 14px; border-radius: 7px; width: 100%; background: linear-gradient(90deg, var(--sand-3), var(--sand-sand-2-42), var(--sand-3)); background-size: 200% 100%; animation: sheen 1.4s linear infinite; } .thread-skeleton .sk-bubble { width: 40%; height: 40px; border-radius: 18px; justify-self: end; margin-bottom: 18px; } .thread-skeleton .sk-short { width: 60%; } /* dock + composer */ .dock { position: relative; flex: none; padding: 0 16px max(16px, env(safe-area-inset-bottom)); } .dock::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 28px; pointer-events: none; background: linear-gradient(to bottom, var(--sand-a0), var(--sand)); } .chat.is-empty .dock::before { display: none; } .composer { position: relative; width: 100%; max-width: var(--col); margin: 0 auto; display: flex; align-items: flex-end; gap: 8px; background: var(--white); border: 1px solid var(--rule); border-radius: 22px; padding: 8px 8px 8px 18px; box-shadow: var(--shadow); transition: border-color .15s ease, box-shadow .15s ease; } .composer:focus-within { border-color: var(--seafoam); box-shadow: 0 0 0 3px var(--seafoam-a28), var(--shadow); } .composer-input { flex: 1; min-width: 0; border: 0; outline: none; resize: none; background: transparent; font-size: 16px; line-height: 1.5; padding: 8px 0; max-height: 220px; min-height: 40px; color: var(--ink); overflow-y: hidden; } .composer-input:focus-visible { outline: none; } .composer-input::placeholder { color: var(--muted-tint-81); } .composer.is-busy .composer-input { color: var(--muted); } .composer-side { display: flex; align-items: center; gap: 8px; flex: none; } .composer-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .composer-count.is-over { color: var(--danger-ink); font-weight: 700; } .send-btn, .stop-btn { width: 40px; height: 40px; border-radius: 14px; border: 0; display: grid; place-items: center; flex: none; transition: background-color .15s ease, transform .1s ease, color .15s ease; } .send-btn { background: var(--teal); color: var(--white); } .send-btn:hover:not(:disabled) { background: var(--teal-hover); } .send-btn:active:not(:disabled) { transform: scale(.95); } .send-btn:disabled { background: var(--sand-3); color: var(--sand-muted-39); } .stop-btn { background: var(--ink); color: var(--white); } .stop-btn:hover { background: var(--ink-seafoam-86); } .chips { width: 100%; max-width: var(--col); margin: 0 auto 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .chat.is-empty .chips { order: 2; margin: 14px auto 0; } .dock { display: flex; flex-direction: column; } .chat.is-empty .composer { order: 1; width: 100%; } .chip { display: flex; align-items: center; gap: 10px; text-align: start; min-height: 48px; padding: 10px 12px 10px 16px; border-radius: 14px; border: 1px solid var(--rule); background: var(--white-a60); color: var(--text-2); font-size: 14.5px; font-weight: 600; line-height: 1.35; transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease; animation: msg-in .5s var(--ease) both; } .chip:nth-child(2) { animation-delay: .05s; } .chip:nth-child(3) { animation-delay: .1s; } .chip:nth-child(4) { animation-delay: .15s; } .chip:hover { border-color: var(--seafoam); background: var(--white); color: var(--ink); } .chip-text { flex: 1; min-width: 0; } .chip-arrow { color: var(--seafoam); flex: none; transition: color .15s ease, transform .15s ease; } .chip:hover .chip-arrow { color: var(--teal); transform: translate(1px, -1px); } .chip:dir(rtl) .chip-arrow { transform: scaleX(-1); } .jump { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--white); border: 1px solid var(--rule); color: var(--ink); font-size: 13.5px; font-weight: 700; box-shadow: var(--shadow); animation: fade-in .25s var(--ease); } .jump:hover { border-color: var(--seafoam); } .jump svg { width: 16px; height: 16px; color: var(--teal); } /* menu + dialog + toast */ .menu { position: fixed; z-index: 50; min-width: 168px; padding: 6px; border-radius: 12px; background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow-lg); animation: pop .14s var(--ease); } @keyframes pop { from { opacity: 0; transform: scale(.97) translateY(-2px); } to { opacity: 1; transform: none; } } .menu-item { width: 100%; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font-size: 14.5px; font-weight: 600; text-align: start; } .menu-item:hover, .menu-item:focus-visible { background: var(--sand-2); outline: none; } .menu-item svg { color: var(--text-2); } .menu-item.is-danger svg { color: var(--danger-ink); } .menu-item.is-danger:hover, .menu-item.is-danger:focus-visible { background: var(--coral-soft); } .dialog { border: 0; padding: 0; border-radius: 18px; background: var(--white); color: var(--ink); width: min(420px, calc(100vw - 32px)); box-shadow: var(--shadow-lg); } .dialog[open] { animation: rise .2s var(--ease); } .dialog::backdrop { background: var(--ink-a38); } .dialog-inner { padding: 24px; } .dialog-title { font-size: 19px; font-weight: 800; letter-spacing: -.015em; } .dialog-body { margin-top: 8px; color: var(--text-2); font-size: 15px; overflow-wrap: anywhere; } .dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; } .toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: var(--ink); color: var(--white); padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg); transition: opacity .2s ease, transform .2s var(--ease); max-width: calc(100vw - 32px); } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ------------------------------------------------------------ admin */ .admin { min-height: 100dvh; } .admin-head { display: flex; align-items: center; justify-content: space-between; max-width: 1000px; margin: 0 auto; padding: 16px 16px 0; } .back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); text-decoration: none; font-weight: 700; font-size: 14.5px; padding: 8px 12px 8px 8px; border-radius: 10px; } .back-link:hover { background: var(--sand-2); color: var(--ink); } .admin-mark { display: inline-flex; } .admin-main { max-width: 1000px; margin: 0 auto; padding: 20px 16px 72px; } .admin-title { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .admin-section { margin-top: 36px; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; } .section-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -.015em; } .section-sub { color: var(--text-2); font-size: 14.5px; margin-top: 2px; } .panel { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; } .panel-loading { display: flex; align-items: center; gap: 10px; padding: 22px 18px; color: var(--text-2); font-size: 14.5px; } .panel-loading .spinner { color: var(--teal); } .panel-empty { padding: 22px 18px; color: var(--text-2); font-size: 14.5px; } .admin-table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; } .admin-table th { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: start; padding: 13px 18px 11px; border-bottom: 1px solid var(--rule); white-space: nowrap; } .admin-table td { padding: 12px 18px; border-bottom: 1px solid var(--rule-2); vertical-align: middle; } .admin-table tbody tr:last-child td { border-bottom: 0; } .admin-table tbody tr:hover td { background: var(--sand-tint-61); } .admin-table .num { text-align: end; } .admin-table .cell-action { text-align: end; width: 1%; white-space: nowrap; } .admin-table tr.is-off td:not(.cell-action) { color: var(--muted); } .cell-user { font-weight: 700; } .tag { display: inline-block; margin-inline-start: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; border: 1px solid var(--seafoam); color: var(--teal); vertical-align: 1px; } .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 3px 10px 3px 8px; border-radius: 999px; white-space: nowrap; } .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pill-on { background: var(--mist); color: var(--teal); } .pill-off { background: var(--sand-2); color: var(--muted); } .pill-wait { background: var(--sand-coral-soft-70); color: var(--amber-ink); } .fresh-invite { margin-bottom: 14px; padding: 18px; border-radius: 16px; background: var(--mist); border: 1px solid var(--seafoam-mist-27); animation: rise .3s var(--ease); } .fresh-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .fresh-top h3 { font-size: 16px; font-weight: 800; } .fresh-note { color: var(--text-2); font-size: 14.5px; margin-top: 4px; } .fresh-note strong { color: var(--ink); } .fresh-close { margin: -6px -6px 0 0; } .fresh-close:hover { background: var(--white-a70); } .fresh-row { display: flex; gap: 8px; margin-top: 14px; } .fresh-url { flex: 1; min-width: 0; font-family: var(--mono); font-size: 14px; border-color: var(--seafoam-mist-27); } .fresh-row .btn { height: 48px; } /* admin: tabs, pickers, chat review, feedback list */ .tabs { display: flex; gap: 4px; margin-top: 24px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tab { position: relative; height: 42px; padding: 0 14px; border: 0; background: none; white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--muted); border-radius: 10px 10px 0 0; } .tab:hover { color: var(--ink); background: var(--sand-2); } .tab[aria-selected="true"] { color: var(--ink); } .tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--teal); } .tab:focus-visible { outline-offset: -2px; } .admin-section[role="tabpanel"] { margin-top: 20px; } .section-lede { margin-bottom: 14px; } .section-head .section-sub { margin-top: 0; } .table-scroll { overflow-x: auto; } .cell-sub { font-size: 12.5px; color: var(--muted); } .cell-person, .admin-table td.num { white-space: nowrap; } .cell-buttons { display: inline-flex; gap: 6px; } .cell-title { max-width: 360px; } .cell-link { color: var(--ink); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; } .cell-link:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; } .admin-table tr.is-link { cursor: pointer; } .count-thumbs { display: inline-flex; gap: 10px; font-variant-numeric: tabular-nums; } .count-thumb { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13.5px; } .count-thumb-icon { display: inline-flex; } .count-thumb-icon svg { width: 14px; height: 14px; } .count-thumb.is-up { color: var(--teal); } .count-thumb.is-down { color: var(--danger-ink); } .count-thumb.is-zero { color: var(--muted-tint-52); font-weight: 600; } .select-wrap { display: inline-flex; align-items: center; gap: 8px; } .select-label { font-size: 13.5px; font-weight: 700; color: var(--text-2); } .select { height: 38px; min-width: 190px; padding: 0 34px 0 12px; border-radius: 10px; border: 1px solid var(--rule); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233F5A5E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; appearance: none; -webkit-appearance: none; font-size: 14.5px; font-weight: 600; } .select:hover { border-color: var(--rule-strong); } .select:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-a18); } .seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--sand-2); border: 1px solid var(--rule); } .seg-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; border-radius: 9px; background: none; font-size: 13.5px; font-weight: 700; color: var(--text-2); } .seg-btn:hover { color: var(--ink); } .seg-btn[aria-pressed="true"] { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); } .seg-icon { display: inline-flex; } .seg-icon svg { width: 14px; height: 14px; } .seg-n { font-variant-numeric: tabular-nums; color: var(--muted); font-weight: 600; } .fb-list { list-style: none; margin: 0; padding: 0; } .fb-item { display: flex; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--rule-2); } .fb-item:last-child { border-bottom: 0; } .fb-item-icon { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; margin-top: 1px; } .fb-item-icon svg .fill { fill: currentColor; } .fb-item-icon svg .cut { stroke: var(--mist); } .fb-item.is-up .fb-item-icon { background: var(--mist); color: var(--teal); } .fb-item.is-down .fb-item-icon { background: var(--coral-soft); color: var(--danger-ink); } .fb-item.is-down .fb-item-icon svg .cut { stroke: var(--coral-soft); } .fb-item-main { flex: 1; min-width: 0; display: grid; gap: 4px; } .fb-item-meta { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fb-item-comment { font-size: 15px; font-weight: 600; white-space: pre-wrap; overflow-wrap: anywhere; } .fb-item-comment.is-empty { font-weight: 500; color: var(--muted); font-style: italic; font-size: 14px; } .fb-item-ctx { font-size: 13.5px; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; } .fb-item-k { display: inline-block; margin-inline-end: 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .fb-item-link { justify-self: start; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13.5px; font-weight: 700; color: var(--teal); text-decoration: none; } .fb-item-link:hover { text-decoration: underline; text-underline-offset: 3px; } .review-main { max-width: calc(var(--col) + 32px); margin: 0 auto; padding: 20px 0 72px; } .review-top { padding: 0 16px 20px; margin-bottom: 20px; border-bottom: 1px solid var(--rule); } .review-top .eyebrow { margin-bottom: 8px; } .review-title { font-size: 28px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; overflow-wrap: anywhere; } .review-meta { margin-top: 6px; color: var(--text-2); font-size: 14.5px; } .review-thread { padding-bottom: 0; } .review-thread .msg { animation: none; } .msg.is-focus { position: relative; } .msg.is-focus::before { content: ""; position: absolute; inset: -12px -14px; border-radius: 16px; background: var(--seafoam-a14); border: 1px solid var(--seafoam-a55); z-index: -1; } .review-thread { position: relative; z-index: 0; } /* ----------------------------------------------------------- phones */ @media (max-width: 767px) { .sidebar { position: fixed; z-index: 40; inset: 0 auto 0 0; width: min(86vw, 320px); transform: translateX(-102%); transition: transform .28s var(--ease); box-shadow: none; } .ask4.drawer-open .sidebar { transform: none; box-shadow: var(--shadow-lg); } .scrim { display: block; position: fixed; inset: 0; z-index: 30; background: var(--ink-a32); animation: fade .2s ease; } .scrim[hidden] { display: none !important; } .side-close { display: inline-grid; } .menu-btn, .top-new { display: inline-grid; } .topbar { padding: 0 8px; border-bottom: 1px solid transparent; } .top-title { text-align: center; padding: 0; font-size: 14.5px; } .conv-more { opacity: 1; } } @keyframes fade { from { opacity: 0; } to { opacity: 1; } } @media (max-width: 640px) { .thread { gap: 24px; padding-top: 4px; } .bubble { max-width: 88%; } .chips { grid-template-columns: minmax(0, 1fr); gap: 6px; } .chip { min-height: 44px; font-size: 14px; } .chat.is-empty { padding-bottom: 0; } .chat.is-empty .scroller { flex: 1 1 auto; margin-top: 0; display: flex; flex-direction: column; justify-content: center; overflow-y: auto; } .chat.is-empty .empty { padding-bottom: 8px; } .chat.is-empty .dock { margin-bottom: 0; padding-top: 20px; } .chat.is-empty .chips { order: 0; margin: 0 auto 12px; } .empty-motif { width: 170px; margin-bottom: 14px; } .greet-sub { font-size: 15px; } .composer { border-radius: 20px; padding-left: 14px; } .report { flex-wrap: wrap; align-items: flex-start; } .report-meta { flex-basis: calc(100% - 60px); } .report-actions { width: 100%; padding-inline-start: 60px; } .report-actions .btn { flex: 1; } .md table { font-size: 13.5px; } .md th, .md td { padding-inline: 10px; } .auth-band { height: 240px; } .auth-motif { width: 340px; right: -60px; } .auth-main { padding-top: 36px; } .auth-card { padding: 26px 20px 22px; border-radius: 18px; } .auth-title { font-size: 25px; } .admin-title { font-size: 28px; } .fb-item { padding: 14px 16px; gap: 12px; } .fb-item-meta { white-space: normal; } .review-title { font-size: 24px; } .msg.is-focus::before { inset: -10px -8px; } .fb-panel { max-width: none; } .composer-note { font-size: 11.5px; margin-top: 6px; } } /* admin tables turn into cards below tablet width */ @media (max-width: 860px) { .admin-table thead { display: none; } .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; } .admin-table tr { padding: 12px 16px; border-bottom: 1px solid var(--rule-2); display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; } .admin-table tbody tr:last-child { border-bottom: 0; } .admin-table td { padding: 0; border: 0; } .admin-table td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .admin-table .num { text-align: start; } .admin-table .cell-action { grid-column: 1 / -1; width: auto; text-align: start; margin-top: 4px; } .admin-table .cell-action .btn { width: 100%; } .admin-table .cell-action:has(> .muted) { display: none; } .admin-table tbody tr:hover td { background: none; } .fresh-row { flex-direction: column; } .admin-table .cell-buttons { display: flex; width: 100%; } .admin-table .cell-buttons .btn { flex: 1; } .admin-table .cell-title { grid-column: 1 / -1; max-width: none; } .admin-table .cell-link { font-size: 15.5px; } .section-head { align-items: stretch; } .select-wrap { width: 100%; } .select { flex: 1; min-width: 0; } .seg { width: 100%; } .seg-btn { flex: 1; justify-content: center; padding: 0 8px; } } /* ================================================================= v2 */ /* Shell: sections in the sidebar on desktop, a bottom tab bar on phones; three panes share the space. */ .panes { position: relative; min-width: 0; min-height: 0; height: 100%; } .pane { height: 100%; min-height: 0; } .num, .tbl td, .tbl th { font-variant-numeric: tabular-nums lining-nums; } .side-nav { display: grid; gap: 2px; padding: 0 10px 10px; } .side-tab { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px; border-radius: 10px; color: var(--text-2); font-weight: 700; font-size: 14.5px; text-decoration: none; transition: background-color .15s ease, color .15s ease; } .side-tab:hover { background: var(--sand-3); color: var(--ink); } .side-tab[aria-current="page"] { background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm); } .side-tab-ico { display: inline-grid; place-items: center; color: var(--muted); } .side-tab-ico svg { width: 20px; height: 20px; } .side-tab[aria-current="page"] .side-tab-ico { color: var(--teal); } .side-nav + .new-chat { margin-top: 2px; } .tabbar { display: none; } /* --------------------------------------------------------------- radar */ .pane-radar { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: var(--sand); } .r-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding-inline: 16px; } .r-hero { background: var(--band); color: var(--white); position: relative; overflow: hidden; } .r-hero-motif { position: absolute; right: -24px; top: 6px; width: 352px; max-width: 70%; opacity: .95; pointer-events: none; } .r-hero-in { position: relative; padding-block: 26px 74px; } .r-hero .eyebrow { color: var(--seafoam); } .r-hero h1 { margin-top: 10px; font-size: clamp(27px, 5.6vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -.028em; max-width: 18ch; text-wrap: balance; } .r-hero p { margin-top: 10px; color: var(--band-muted); max-width: 46ch; font-size: 15px; line-height: 1.5; } .r-menu { display: none; } .kpis { position: relative; margin-top: -53px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; } .kpi { padding: 14px 16px; min-width: 0; } .kpi + .kpi { border-inline-start: 1px solid var(--rule-2); } .kpi-l { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .kpi-v { display: block; margin-top: 4px; font-size: clamp(21px, 4.4vw, 28px); font-weight: 800; letter-spacing: -.02em; color: var(--teal); line-height: 1.1; } .kpi-s { margin-top: 4px; font-size: 13px; color: var(--text-2); line-height: 1.4; } .kpi.is-skel { display: grid; gap: 8px; } .kpi.is-skel span, .rcard.is-skel > span, .sheet-skel span { display: block; height: 11px; border-radius: 6px; width: 60%; background: linear-gradient(90deg, var(--sand-3), var(--sand-sand-2-42), var(--sand-3)); background-size: 200% 100%; animation: sheen 1.4s linear infinite; } .kpi.is-skel .big { height: 24px; width: 45%; } .kpis[hidden] + .feed { margin-top: -53px; position: relative; } .feed { display: grid; gap: 16px; margin-top: 20px; padding-bottom: 40px; grid-template-columns: minmax(0, 1fr); align-items: start; } .rcard { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 18px 16px 16px; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .rcard.is-skel { gap: 12px; min-height: 230px; } .rcard.is-skel > span { width: 100%; } .rcard.is-skel .tagline { width: 34%; height: 9px; } .rcard.is-skel .title { width: 70%; height: 20px; } .rcard.is-skel .short { width: 48%; } .rcard.r-msg { align-items: flex-start; } .rcard h2 { font-size: 19.5px; line-height: 1.25; font-weight: 800; letter-spacing: -.018em; text-wrap: balance; overflow-wrap: anywhere; } .rcard .lede { color: var(--text-2); font-size: 14.5px; line-height: 1.55; } .rcard-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .r-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); } .r-tag i { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); } .r-tag.warn { color: var(--coral-ink); } .r-tag.warn i { background: var(--coral); } .ctrls { display: flex; gap: 8px; flex-wrap: wrap; } .rcard .seg, .tm .seg { width: auto; } .rcard .seg-btn, .tm .seg-btn { flex: none; height: 30px; padding: 0 11px; font-size: 13px; } .rank { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; } .rank li { min-width: 0; } .rank-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px; align-items: center; text-align: start; padding: 9px 8px; border-radius: 10px; border: 0; background: none; color: inherit; } button.rank-row:hover { background: var(--sand-2); } .rank-name { font-weight: 700; font-size: 15px; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; } .rank-name small { font-weight: 500; color: var(--muted); font-size: 13px; margin-inline-start: 6px; } .rank-val { font-weight: 800; font-size: 15px; } .rank-val.warn { color: var(--coral-ink); } .rank-bar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--rule-2); overflow: hidden; display: flex; } .rank-bar span { display: block; height: 100%; } .b1, .legend-inline i.b1 { background: var(--teal); } .b2, .legend-inline i.b2 { background: var(--seafoam); } .b3, .legend-inline i.b3 { background: var(--mist-2); } .b4, .legend-inline i.b4 { background: var(--seafoam-sand-40); } .b-neg { background: var(--coral); opacity: .7; } .rank-sub { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); line-height: 1.4; } .legend-inline { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 8px; } .legend-inline span { display: inline-flex; align-items: center; gap: 6px; } .legend-inline i { width: 11px; height: 7px; border-radius: 99px; display: inline-block; } .lease-grid { display: grid; gap: 12px; } .lease-side { display: grid; gap: 12px; align-content: start; } .callout { display: flex; gap: 10px; align-items: flex-start; padding: 11px 13px; border-radius: 12px; background: var(--mist); color: var(--ink); font-size: 14px; line-height: 1.5; } .callout b { font-weight: 800; } .subhead { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 2px; } .spark-wrap { grid-column: 1 / -1; display: grid; gap: 2px; } .spark { display: block; height: 32px; } .spark svg { width: 100%; height: 100%; display: block; } .spark rect { fill: var(--mist-2); } .spark rect.hi { fill: var(--coral); } .spark-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); } .spark-list { gap: 8px; } .dumb { grid-column: 1 / -1; position: relative; height: 20px; display: block; } .dumb svg { width: 100%; height: 100%; display: block; overflow: visible; } .dumb .trk { stroke: var(--rule); stroke-width: 2; vector-effect: non-scaling-stroke; } .dumb .seg-up { stroke: var(--seafoam); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; } .dumb .seg-down { stroke: var(--coral); stroke-opacity: .55; stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; } .dumb i { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; } .dumb .d0 { background: var(--white); border: 2px solid var(--muted); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; } .dumb .d1 { background: var(--teal); } .dumb .d1.down { background: var(--coral); } .tbl-wrap { overflow-x: auto; margin-inline: -4px; } .tbl { width: 100%; border-collapse: collapse; font-size: 14px; } .tbl th { text-align: start; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--rule); white-space: nowrap; } .tbl td { padding: 9px 8px; border-bottom: 1px solid var(--rule-2); vertical-align: top; } .tbl tr:last-child td { border-bottom: 0; } .tbl .r { text-align: end; white-space: nowrap; } .tbl .cell-n { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; } .tbl td.name { font-weight: 700; min-width: 7.5rem; } .tbl td.name small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; } .tbl.is-narrow { font-size: 13px; } .tbl.is-narrow td { padding-inline: 6px; } .tbl.is-narrow td.name { min-width: 0; } .tbl .few { font-size: 12px; font-weight: 600; } .msheet .tbl td.name { min-width: 0; white-space: nowrap; } .msheet .tbl td, .msheet .tbl th { padding-inline: 6px; } .cell-btn { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-align: start; text-decoration: underline; text-decoration-color: var(--teal-a35); text-underline-offset: 3px; } .cell-btn:hover { color: var(--teal); } .card-foot { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-top: 2px; } .card-foot .btn:disabled { opacity: .5; } .r-note { flex-basis: 100%; } .r-note summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--muted); width: max-content; max-width: 100%; border-radius: 6px; } .r-note summary:hover { color: var(--ink); } .r-note[open] summary { margin-bottom: 4px; } .fine { font-size: 12.5px; color: var(--muted); line-height: 1.5; } /* ----------------------------------------------------------------- map */ .pane-map { position: relative; isolation: isolate; overflow: hidden; background: var(--map-land); container: map / inline-size; } .map-boot { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--text-2); font-weight: 600; } .map-boot .spinner { color: var(--teal); width: 20px; height: 20px; } .map-canvas { position: absolute; inset: 0; z-index: 0; } .mp { overflow: hidden; touch-action: none; cursor: grab; background: var(--map-land); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; } .mp.is-grabbing { cursor: grabbing; } .mp.is-pointing:not(.is-grabbing) { cursor: pointer; } .mp:focus-visible { outline: 3px solid var(--teal); outline-offset: -3px; } .mp-pane { position: absolute; left: 0; top: 0; transform-origin: 0 0; } /* will-change only while moving (engine.js) */ .mp-svg { position: absolute; overflow: hidden; pointer-events: none; } path.ar { fill: var(--map-area); fill-opacity: .9; stroke: var(--map-area-line); stroke-width: 1; fill-rule: evenodd; } path.ar.cz { fill-opacity: .55; stroke-dasharray: 3 3; } path.ar.f0 { fill: var(--seq-0); } path.ar.f1 { fill: var(--seq-1); } path.ar.f2 { fill: var(--seq-2); } path.ar.f3 { fill: var(--seq-3); } path.ar.f4 { fill: var(--seq-4); } path.ar.h0 { fill: var(--heat-0); } path.ar.h1 { fill: var(--heat-1); } path.ar.h2 { fill: var(--heat-2); } path.ar.h3 { fill: var(--heat-3); } path.ar.h4 { fill: var(--heat-4); } path.ar.t0 { fill: var(--tm-0); } path.ar.t1 { fill: var(--tm-1); } path.ar.t2 { fill: var(--tm-2); } path.ar.t3 { fill: var(--tm-3); } path.ar.t4 { fill: var(--tm-4); } path.ar.t5 { fill: var(--tm-5); } path.ar.t6 { fill: var(--tm-6); } path.ar.v0 { fill: var(--dv-d3); } path.ar.v1 { fill: var(--dv-d2); } path.ar.v2 { fill: var(--dv-d1); } path.ar.v3 { fill: var(--dv-0); } path.ar.v4 { fill: var(--dv-u1); } path.ar.v5 { fill: var(--dv-u2); } path.ar.v6 { fill: var(--dv-u3); } path.ar.tx { fill: url(#tm-hatch); } path.ar.sel { stroke: var(--ink); stroke-width: 2; } .tm-on path.ar { transition: fill .6s var(--ease); } .tm-on path.ar.cz { fill-opacity: .85; } .tm-hb { fill: var(--map-area); } .tm-hl { stroke: var(--tm-hatch); stroke-width: 1.1; } path.coast { fill: none; stroke: var(--map-coast); stroke-width: 2.2; stroke-linejoin: round; } path.road { fill: none; stroke: var(--map-road); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } path.road.m { stroke: var(--map-road-major); stroke-width: 2.6; } path.mline { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } path.mline.red { stroke: var(--line-red); } path.mline.green { stroke: var(--line-green); } path.mline.blue { stroke: var(--line-blue); stroke-dasharray: 7 6; } path.tline { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 2 3; } path.mst { fill: var(--white); stroke-width: 2.2; } path.mst.red { stroke: var(--line-red); } path.mst.green { stroke: var(--line-green); } path.mst.both { stroke: var(--ink); } path.mst.blue { stroke: var(--line-blue); stroke-dasharray: 2 2; } path.tram { fill: var(--white); stroke: var(--muted); stroke-width: 1.6; } path.bl { fill: var(--map-bldg); fill-opacity: .55; } /* v5: a building at an estimated spot (its project's or community's middle): an open ring, never a solid dot */ path.bl.bl-approx { fill: none; stroke: var(--map-bldg); stroke-width: 1.3; stroke-opacity: .75; } circle.bl-sel { fill: var(--coral); stroke: var(--white); stroke-width: 2.5; } path.school { fill: var(--teal); stroke: var(--white); stroke-width: 1.2; } path.school.lo { fill: var(--white); stroke: var(--teal); stroke-width: 1.4; } path.mosque { fill: var(--ink); fill-opacity: .7; } path.hosp { fill: var(--white); stroke: var(--coral-ink); stroke-width: 1.8; } path.mall { fill: var(--seafoam); stroke: var(--ink); stroke-width: 1; } path.lease { fill: var(--coral); fill-opacity: .3; stroke: var(--coral); stroke-width: 1; stroke-opacity: .8; } path.lease.is-area { fill-opacity: .22; } text.alabel { font: 700 11px var(--font); fill: var(--map-label); letter-spacing: .02em; paint-order: stroke; stroke: var(--map-land); stroke-width: 3px; stroke-linejoin: round; } .map-top { position: absolute; z-index: 500; left: 0; right: 0; top: 0; padding-top: 10px; pointer-events: none; } .map-title { display: flex; padding-inline: 16px; } .map-title h1 { font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; background: var(--white); padding: 4px 10px; border-radius: 10px; box-shadow: var(--shadow-sm); pointer-events: auto; line-height: 1.4; } .map-title h1 small { font-size: 12px; font-weight: 600; color: var(--muted); margin-inline-start: 7px; letter-spacing: 0; } .lchips { display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px 10px; scrollbar-width: none; pointer-events: auto; scroll-padding-inline: 16px; } .lchips::-webkit-scrollbar { display: none; } .lchip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--rule); background: var(--white); color: var(--text-2); font-size: 13.5px; font-weight: 700; box-shadow: var(--shadow-sm); transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .lchip:hover { border-color: var(--seafoam); color: var(--ink); } .lchip i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); flex: none; } .lchip svg { width: 16px; height: 16px; flex: none; } .lchip[aria-pressed="true"] { background: var(--ink); color: var(--sand); border-color: var(--ink); } .lchip[aria-pressed="true"] i { background: var(--seafoam); } .lchip.is-loading i, .lchip.is-loading svg { animation: breathe 1s ease-in-out infinite; } .map-legend { position: absolute; z-index: 500; left: 10px; bottom: 10px; max-width: min(272px, calc(100% - 20px)); background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 8px 10px; box-shadow: var(--shadow); font-size: 11.5px; line-height: 1.4; color: var(--text-2); } .lg-title { font-weight: 800; color: var(--ink); font-size: 12px; margin-bottom: 4px; display: flex; gap: 2px 6px; flex-wrap: wrap; align-items: baseline; } .lg-title small { font-weight: 600; color: var(--muted); font-size: 11px; } .lg-scale { display: flex; gap: 2px; } .lg-scale span { flex: 1; height: 8px; border-radius: 2px; } .lg-ends { display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; color: var(--muted); } .lg-keys { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 6px; } .lg-keys span, .tm-keys span { display: inline-flex; align-items: center; gap: 5px; } .lg-line { width: 19px; height: 0; border-top: 3px solid; display: inline-block; } .lg-line.dash { border-top-style: dashed; } .lg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } .lg-dot.ring { background: var(--white); border: 2px solid; } .lg-attr { margin-top: 5px; font-size: 10px; color: var(--muted); } .map-hint { font-size: 11.5px; color: var(--muted); margin-top: 5px; } .map-zoom { position: absolute; z-index: 500; right: 12px; bottom: 12px; display: none; flex-direction: column; background: var(--white); border: 1px solid var(--rule); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; } .mz-btn { width: 36px; height: 36px; border: 0; background: var(--white); color: var(--ink); display: grid; place-items: center; } .mz-btn + .mz-btn { border-top: 1px solid var(--rule-2); } .mz-btn:hover { background: var(--sand-2); } .mz-btn svg { width: 17px; height: 17px; } .mz-btn:focus-visible { outline-offset: -3px; } .map-tip { position: absolute; z-index: 650; pointer-events: none; padding: 4px 8px; background: var(--white); color: var(--ink); border: 1px solid var(--rule); border-radius: 8px; box-shadow: var(--shadow-sm); font: 700 12px/1.3 var(--font); white-space: nowrap; max-width: calc(100% - 12px); overflow: hidden; text-overflow: ellipsis; } .map-tip.blue { color: var(--line-blue); border-color: var(--line-blue); } .map-status { position: absolute; z-index: 700; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 10px; background: var(--white); border: 1px solid var(--rule); border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 14px; font-weight: 600; color: var(--text-2); max-width: calc(100% - 32px); } .map-status .spinner { color: var(--teal); } .map-status.is-flash { top: auto; bottom: 90px; transform: translateX(-50%); background: var(--ink); color: var(--white); border-color: var(--ink); animation: fade-in .25s var(--ease); } /* time machine */ .tm { position: absolute; z-index: 520; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; background: var(--white); border-top: 1px solid var(--rule); border-radius: 18px 18px 0 0; box-shadow: var(--shadow-up); padding: 10px 16px 11px; } .tm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tm-beds-l { font-size: 12px; font-weight: 700; color: var(--muted); } .tm-switch { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px 0 6px; border-radius: 999px; border: 1px solid var(--rule); background: var(--white); color: var(--text-2); font-size: 12.5px; font-weight: 700; } .tm-switch .knob { position: relative; width: 30px; height: 18px; border-radius: 99px; background: var(--rule); flex: none; transition: background-color .2s ease; } .tm-switch .knob::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 13px; height: 13px; border-radius: 50%; background: var(--white); box-shadow: var(--shadow-sm); transition: transform .2s var(--ease); } .tm-switch[aria-checked="true"] { color: var(--ink); border-color: var(--seafoam); } .tm-switch[aria-checked="true"] .knob { background: var(--teal); } .tm-switch[aria-checked="true"] .knob::after { transform: translateX(12px); } .tm-play { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start; } .tm-pbtn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--teal); color: var(--white); display: grid; place-items: center; } .tm-pbtn:hover:not(:disabled) { background: var(--teal-hover); } .tm-pbtn:disabled { background: var(--teal-sand-2-45); } .tm-pbtn svg { width: 18px; height: 18px; } .tm-track { min-width: 0; padding-top: 5px; } .tm-range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; } .tm-range::-webkit-slider-runnable-track { height: 5px; border-radius: 99px; background: linear-gradient(to right, var(--teal) 0 var(--p, 100%), var(--rule) var(--p, 100%) 100%); } .tm-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -6.5px; border-radius: 50%; background: var(--teal); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--teal), var(--shadow-sm); } .tm-range::-moz-range-track { height: 5px; border-radius: 99px; background: var(--rule); } .tm-range::-moz-range-progress { height: 5px; border-radius: 99px; background: var(--teal); } .tm-range::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--teal); border: 3px solid var(--white); box-shadow: 0 0 0 1px var(--teal); } .tm-range:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; } .tm-ticks { position: relative; height: 28px; margin-inline: 9px; font-size: 10.5px; font-weight: 600; color: var(--muted); } .tm-ticks span { position: absolute; top: 2px; transform: translateX(-50%); text-align: center; line-height: 1.2; white-space: nowrap; } .tm-ticks span small { display: block; font-size: 9.5px; font-weight: 700; } .tm-ticks span.on { color: var(--ink); font-weight: 800; } .tm-lg { display: grid; gap: 4px; font-size: 11.5px; color: var(--text-2); } .tm-lg-title { display: flex; align-items: baseline; gap: 2px 7px; flex-wrap: wrap; font-size: 13px; font-weight: 800; color: var(--ink); } .tm-lg-title small { font-size: 11.5px; font-weight: 600; color: var(--muted); } .tm-lg-scale { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; } .tm-lg-scale span { height: 9px; border-radius: 2px; } .tm-lg-scale.is-loading span { background: var(--sand-3); animation: breathe 1.2s ease-in-out infinite; } .tm-lg-scale span:first-child { border-radius: 4px 2px 2px 4px; } .tm-lg-scale span:last-child { border-radius: 2px 4px 4px 2px; } .tm-lg-ticks { position: relative; height: 15px; font-size: 10.5px; color: var(--muted); } .tm-lg-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; } .tm-lg-foot { display: flex; flex-wrap: wrap; gap: 3px 13px; color: var(--muted); } .tm-lg-foot .rng { color: var(--text-2); font-weight: 700; flex-basis: 100%; } .tm-key { display: inline-flex; align-items: center; gap: 5px; } .tm-key i { width: 14px; height: 9px; border-radius: 2px; display: inline-block; flex: none; } .tm-key i.hatch { background: repeating-linear-gradient(135deg, var(--tm-hatch) 0 1.5px, var(--map-area) 1.5px 4.5px); box-shadow: inset 0 0 0 1px var(--map-area-line); } .tm-note { font-size: 11.5px; line-height: 1.4; color: var(--muted); } .tm-keys { display: flex; flex-wrap: wrap; gap: 4px 13px; font-size: 10.5px; color: var(--muted); } .tm-err { font-size: 13px; color: var(--ink); } .tm-year { position: absolute; z-index: 450; left: 16px; top: 104px; pointer-events: none; color: var(--ink); font-size: clamp(52px, 14vw, 96px); font-weight: 800; line-height: .9; letter-spacing: -.045em; font-variant-numeric: tabular-nums lining-nums; text-shadow: 0 0 2px var(--tm-halo), 0 0 10px var(--tm-halo), 0 0 24px var(--tm-halo); transition: opacity .45s ease; } .tm-year.fade { opacity: 0; } .tm-year small { display: block; margin-top: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); } .tm-card { position: absolute; z-index: 560; left: 10px; width: min(448px, calc(100% - 20px)); bottom: calc(var(--tm-h, 240px) + 8px); max-height: calc(100% - var(--tm-h, 240px) - 104px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 8px; padding: 12px 14px 14px; background: var(--white); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-lg); } .tm-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .tm-card-head { display: flex; align-items: flex-start; gap: 10px; } .tm-card-head > div { flex: 1; min-width: 0; } .tm-card-head h2 { font-size: 17px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; overflow-wrap: anywhere; } .tm-card-head p { font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; } .tm-card .x-btn { width: 34px; height: 34px; } .tm-fig { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; } .tm-fig b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--teal); } .tm-fig b.up { color: var(--coral-ink); } .tm-fig b.few { font-size: 18px; color: var(--text-2); } .tm-fig .u { font-size: 13px; font-weight: 600; color: var(--text-2); } .tm-fig .s { flex-basis: 100%; font-size: 12px; color: var(--muted); } .tm-spark { display: grid; gap: 2px; } .tm-spark .lbl { font-size: 11px; font-weight: 700; color: var(--muted); } .tm-spark svg { display: block; width: 100%; height: auto; overflow: visible; } .tm-spark .sp-base { stroke: var(--rule); stroke-width: 1; } .tm-spark .sp-area { fill: var(--mist); } .tm-spark .sp-line { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .tm-spark .sp-dot { fill: var(--teal); } .tm-spark .sp-miss { fill: var(--white); stroke: var(--muted); stroke-width: 1.2; } .tm-spark .sp-mark { stroke: var(--coral); stroke-width: 1.5; stroke-dasharray: 3 3; } .tm-spark .sp-sel { fill: var(--coral); stroke: var(--white); stroke-width: 2.5; } .tm-axis { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); } .tm-card-actions { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; } .tm-card-actions .btn svg { width: 15px; height: 15px; } .tm-hint { font-size: 11.5px; color: var(--muted); } /* building and area card: a bottom sheet on phones, a side panel on desktop */ .msheet { position: absolute; z-index: 600; left: 0; right: 0; bottom: 0; max-height: min(64%, calc(100% - 150px)); overflow-y: auto; overscroll-behavior: contain; background: var(--white); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-lg); border: 1px solid var(--rule); border-bottom: 0; padding: 6px 16px 0; animation: sheet-in .28s var(--ease); } @keyframes sheet-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } } .msheet:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; } .sheet-grip { width: 42px; height: 5px; border-radius: 99px; background: var(--rule); margin: 3px auto 9px; } .sheet-head { display: flex; align-items: flex-start; gap: 12px; } .sheet-head-text { flex: 1; min-width: 0; } .sheet-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; overflow-wrap: anywhere; } .sheet-head p { font-size: 13px; color: var(--muted); margin-top: 3px; font-weight: 500; } .x-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--rule); background: var(--white); display: grid; place-items: center; flex: none; color: var(--text-2); } .x-btn:hover { background: var(--sand-2); color: var(--ink); } .x-btn svg { width: 18px; height: 18px; } .badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .badge { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--mist); color: var(--ink); font-size: 12.5px; font-weight: 700; } .badge.blue { background: transparent; border: 1px dashed var(--line-blue); color: var(--line-blue); } .badge.coral { background: var(--coral-soft); } .badge.muted-b { background: var(--sand-2); color: var(--text-2); } .deals-line { margin-top: 12px; font-size: 13.5px; color: var(--text-2); font-weight: 600; } .bc-sec { margin-top: 16px; display: grid; gap: 8px; } .bc-sec .deals-line { margin-top: 0; } .bc-sec h3 { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .fact { background: var(--sand-2); border-radius: 12px; padding: 10px 11px; min-width: 0; } .fact.wide { grid-column: 1 / -1; } .fact.mist { background: var(--mist); } .fact .fl { font-size: 12px; color: var(--muted); font-weight: 600; } .fact .fv { font-size: 19px; font-weight: 800; letter-spacing: -.01em; margin-top: 2px; } .fact .fs { font-size: 12px; color: var(--text-2); line-height: 1.4; margin-top: 3px; } .yb { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-top: 3px; } .meter { height: 8px; border-radius: 99px; background: var(--rule-2); position: relative; margin-top: 7px; } .meter span { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--teal); } .meter b { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: var(--ink); border-radius: 2px; } .near { display: grid; } .near-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--rule-2); font-size: 14px; } .near-row:last-child { border-bottom: 0; } .near-row .ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--teal); color: var(--white); } .near-row .ic svg { width: 13px; height: 13px; } .near-row .ic.ink { background: var(--ink); color: var(--sand); } .near-row .ic.sea { background: var(--seafoam); color: var(--ink); } .near-row .ic.coral { background: var(--coral-soft); color: var(--coral-ink); font-size: 15px; } .near-row .ic.blue { background: transparent; border: 1.5px dashed var(--line-blue); color: var(--line-blue); } .near-main { min-width: 0; display: grid; } .near-main b { font-weight: 700; overflow-wrap: anywhere; line-height: 1.3; } .near-main small { color: var(--muted); font-weight: 500; font-size: 12px; line-height: 1.35; } .near-d { font-weight: 700; color: var(--text-2); white-space: nowrap; } .commute { display: grid; gap: 9px; } .cm-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 54px; gap: 8px; align-items: center; font-size: 13.5px; } .cm-row .lbl { font-weight: 700; line-height: 1.25; min-width: 0; } .cm-sub { grid-column: 2 / -1; margin-top: -4px; font-size: 11.5px; color: var(--muted); } .cm-bar { height: 9px; border-radius: 99px; background: var(--rule-2); position: relative; } .cm-bar span { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--teal); } .cm-bar i { position: absolute; top: -3px; width: 2px; height: 15px; margin-left: -1px; background: var(--muted); border-radius: 1px; } .cm-row .v { text-align: end; font-weight: 800; } .sheet-skel { display: grid; gap: 12px; padding: 16px 0 24px; } .sheet-skel span { width: 100%; height: 13px; } .sheet-skel .short { width: 55%; } .sheet-msg { padding: 18px 0 8px; color: var(--text-2); font-size: 14.5px; display: grid; gap: 10px; justify-items: start; } .as-of { margin-top: 14px; } .sheet-notice { margin-top: 10px; padding: 8px 11px; border-radius: 10px; background: var(--sand-2); font-size: 13px; color: var(--text-2); } .sheet-actions { display: flex; gap: 8px; position: sticky; bottom: 0; margin: 16px -16px 0; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, var(--white-a85), var(--white) 30%); border-top: 1px solid var(--rule-2); } .sheet-actions .btn { flex: 1; } .sheet-actions .btn svg { width: 16px; height: 16px; } /* -------------------------------------------------- rich cards in chat */ .cards { display: grid; gap: 12px; } .cards:empty { display: none; } .md:not([hidden]) + .cards:not(:empty) { margin-top: 16px; } .card-group { display: grid; gap: 12px; min-width: 0; } .rich { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 14px; min-width: 0; display: grid; gap: 11px; animation: msg-in .35s var(--ease) both; } .rich-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; } .rich-title { font-weight: 800; font-size: 15.5px; letter-spacing: -.01em; } .rich-sub { font-size: 12.5px; color: var(--muted); } p.rich-sub { margin-top: -6px; } .rich-body { font-size: 14.5px; color: var(--text-2); line-height: 1.55; } .swipe-hint { font-size: 12px; color: var(--muted); } .shortlist { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 80%); gap: 11px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin-inline: -2px; overscroll-behavior-x: contain; scrollbar-width: thin; } .shortlist:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 12px; } .sl-card { scroll-snap-align: start; background: var(--white); border: 1px solid var(--rule); border-radius: 14px; padding: 13px; display: grid; gap: 9px; align-content: start; min-width: 0; } .sl-top { display: flex; gap: 10px; align-items: flex-start; } .pin-no { width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: var(--white); display: grid; place-items: center; font-size: 12.5px; font-weight: 800; flex: none; } .sl-name { font-weight: 800; font-size: 15.5px; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; } .sl-name small { display: block; font-weight: 500; color: var(--muted); font-size: 12.5px; } .sl-price { font-size: 21px; font-weight: 800; letter-spacing: -.015em; color: var(--teal); line-height: 1.15; } .sl-price small { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; } .sl-facts { display: grid; gap: 4px; font-size: 13px; color: var(--text-2); line-height: 1.4; } .sl-facts span { display: flex; gap: 7px; align-items: baseline; } .sl-facts span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--seafoam); flex: none; transform: translateY(-1px); } .sl-actions { display: flex; gap: 6px; flex-wrap: wrap; } .sl-foot { display: flex; gap: 8px; flex-wrap: wrap; } .mm-svg svg { width: 100%; max-width: 440px; height: auto; display: block; margin-inline: auto; border-radius: 12px; background: var(--map-land); } .mm-area { fill: var(--map-area); stroke: var(--teal); stroke-width: 1.4; stroke-dasharray: 5 4; fill-opacity: .9; } .mm-other { fill: var(--map-area); stroke: var(--map-area-line); stroke-width: 1; fill-opacity: .7; } .mm-road { fill: none; stroke: var(--map-road-major); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .mm-road.minor { stroke: var(--map-road); stroke-width: 2; } .mm-coast { fill: none; stroke: var(--map-coast); stroke-width: 2.4; } .mm-p-mosque { fill: var(--ink); } .mm-school { fill: var(--white); stroke: var(--teal); stroke-width: 2; } .mm-p-metro { fill: var(--white); stroke: var(--line-red); stroke-width: 2.4; } .mm-p-tram { fill: var(--white); stroke: var(--muted); stroke-width: 2; } .mm-p-mall { fill: var(--seafoam); stroke: var(--ink); stroke-width: 1; } .mm-p-hospital { fill: var(--white); stroke: var(--coral-ink); stroke-width: 2; } .mm-p-other { fill: var(--muted); } .mm-pin-g { cursor: pointer; } .mm-pin { fill: var(--teal); stroke: var(--white); stroke-width: 2.5; } .mm-pin-t { fill: var(--white); font: 800 12px var(--font); pointer-events: none; } .mm-lbl { fill: var(--teal); font: 800 14px var(--font); letter-spacing: .08em; paint-order: stroke; stroke: var(--map-land); stroke-width: 3px; } .mm-plabel { fill: var(--text-2); font: 700 11px var(--font); paint-order: stroke; stroke: var(--map-land); stroke-width: 3px; } .mm-key { display: flex; flex-wrap: wrap; gap: 5px 14px; font-size: 12px; color: var(--muted); } .mm-key span { display: inline-flex; gap: 6px; align-items: center; } .mm-key i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; box-sizing: border-box; } .insight-fig { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .insight-fig .big { font-size: 38px; font-weight: 800; letter-spacing: -.03em; color: var(--teal); line-height: 1; } .insight-fig .cap { font-size: 14.5px; color: var(--text-2); max-width: 34ch; line-height: 1.45; } .ib { display: grid; gap: 8px; } .ib-row { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 9px; align-items: center; font-size: 13.5px; } .ib-row .lbl { color: var(--text-2); font-weight: 600; min-width: 0; } .ib-bar { height: 11px; border-radius: 99px; background: var(--rule-2); position: relative; } .ib-bar span { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--seafoam); } .ib-bar span.hi { background: var(--teal); } .ib-row .v, .ib-li .v { text-align: end; font-weight: 800; white-space: nowrap; } .ib-list { display: grid; } .ib-li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule-2); font-size: 14px; } .ib-li:last-child { border-bottom: 0; } .ib-li .lbl { color: var(--text-2); } .nego-msg { white-space: pre-wrap; font-size: 15px; line-height: 1.55; background: var(--sand-2); border-radius: 4px 14px 14px 14px; padding: 12px 14px; border: 1px solid var(--rule-2); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; } .nego-msg:dir(rtl) { border-radius: 14px 4px 14px 14px; } .copy-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .copy-status { font-size: 13px; color: var(--muted); } /* listing range: the suggested range as a teal band, the owner's price as an ink pin (coral is only for warnings) */ .lr-fig { display: flex; align-items: baseline; gap: 4px 9px; flex-wrap: wrap; color: var(--teal); } .lr-fig .big { font-size: 27px; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; white-space: nowrap; } .lr-to { font-size: 14px; font-weight: 700; color: var(--muted); } .lr-psf { font-size: 13.5px; color: var(--text-2); font-weight: 600; margin-top: -6px; } .lr { position: relative; padding: 6px 0 22px; } .lr.has-own { padding-top: 30px; } .lr-track { position: relative; height: 12px; border-radius: 99px; background: var(--rule-2); } .lr-band { position: absolute; top: 0; bottom: 0; min-width: 8px; border-radius: 99px; background: var(--teal); box-shadow: inset 0 0 0 2px var(--white-a25); } .lr-pin { position: absolute; top: -7px; width: 4px; height: 26px; margin-left: -2px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 2px var(--white); } .lr-own, .lr-ends span { position: absolute; transform: translateX(-50%); white-space: nowrap; } .lr-own { top: 4px; font-size: 12.5px; color: var(--ink); } .lr-own b { font-weight: 800; } .lr-ends { position: absolute; left: 0; right: 0; bottom: 0; height: 17px; font-size: 12.5px; font-weight: 800; color: var(--teal); } .lr-own.is-start, .lr-ends .is-start { transform: none; } .lr-own.is-end, .lr-ends .is-end { transform: translateX(-100%); } .lr-owner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; color: var(--text-2); padding: 9px 11px; border-radius: 12px; background: var(--sand-2); } .lr-owner b { color: var(--ink); font-weight: 800; } .lr-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); flex: none; align-self: center; } .lr-verdict { font-weight: 700; } .lr-owner.is-within .lr-verdict { color: var(--teal); } .lr-owner.is-above .lr-verdict, .lr-owner.is-below .lr-verdict { color: var(--coral-ink); } /* ------------------------------------------------------------ wider */ @media (min-width: 720px) { .r-wrap { padding-inline: 24px; } .rcard { padding: 21px 21px 19px; } .shortlist { grid-auto-columns: minmax(240px, 46%); } } @media (min-width: 861px) { .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feed .wide { grid-column: 1 / -1; } .r-hero-in { padding-block: 34px 80px; } } /* the map lays itself out by its own width (the desktop sidebar takes part of the window) */ @keyframes panel-in { from { transform: translateX(16px); opacity: .6; } to { transform: none; opacity: 1; } } @container map (min-width: 760px) { .map-zoom { display: flex; } .msheet { left: auto; right: 16px; top: 104px; bottom: 16px; width: 384px; max-height: none; border-radius: 18px; border-bottom: 1px solid var(--rule); animation-name: panel-in; padding-top: 16px; } .sheet-grip { display: none; } .sheet-actions { padding-bottom: 14px; } .map-legend { bottom: 16px; left: 16px; } .map-status.is-flash { bottom: 24px; } } @container map (min-width: 900px) { .tm { left: 16px; right: auto; bottom: 16px; width: min(448px, calc(100% - 32px)); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow); padding: 13px 16px; } .tm-card { right: auto; left: 16px; width: min(448px, calc(100% - 32px)); bottom: calc(var(--tm-h, 290px) + 24px); max-height: calc(100% - var(--tm-h, 290px) - 128px); } .tm-year { left: auto; right: 24px; top: 102px; text-align: right; } .tm-on .map-zoom { display: none; } } @container map (max-width: 899px) { .tm-card-open .tm-lg-foot, .tm-card-open .tm-note, .tm-card-open .tm-keys { display: none; } .tm-on .map-legend { display: none; } .tm .tm-note { display: none; } } @container map (max-width: 759px) { .map-legend .map-hint { display: none; } .map-legend { padding: 7px 9px; } } @media (min-width: 1240px) { .lease-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start; } } /* ----------------------------------------------------------- phones */ @media (max-width: 860px) { .side-nav { display: none; } } @media (max-width: 480px) { .kpis { grid-template-columns: minmax(0, 1fr); } .kpi + .kpi { border-inline-start: 0; border-top: 1px solid var(--rule-2); } .kpi { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 13px; align-items: baseline; padding: 11px 14px; } .kpi-l { grid-column: 2; grid-row: 1; } .kpi-v { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; font-size: 22px; } .kpi-s { grid-column: 2; } .cm-row { grid-template-columns: 96px minmax(0, 1fr) 50px; } .ib-row { grid-template-columns: 104px minmax(0, 1fr) auto; } } /* ================================================================= v3 */ /* Sales | Rentals switch (Radar and Map), sales cards, sales map layers, the building card's two halves, the listing pitch pack form and Settings. */ .mode-sw { position: relative; isolation: isolate; flex: none; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 999px; background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); pointer-events: auto; } .mode-sw::before { content: ""; position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: var(--teal); box-shadow: 0 4px 12px -4px var(--teal-a55); transition: transform .34s var(--ease); } .mode-sw[data-mode="rent"]::before { transform: translateX(100%); } .mode-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 16px; min-width: 0; border: 0; border-radius: 999px; background: none; color: var(--text-2); font-size: 14px; font-weight: 800; letter-spacing: -.005em; white-space: nowrap; transition: color .25s ease; } .mode-btn:hover { color: var(--ink); } .mode-btn[aria-checked="true"] { color: var(--white); } .mode-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .mode-ico { display: inline-flex; } .mode-ico svg { width: 15px; height: 15px; } .mode-sw.on-dark { background: var(--white-a7); border-color: var(--white-a16); box-shadow: none; } .mode-sw.on-dark::before { box-shadow: 0 0 0 1px var(--seafoam-a55), 0 4px 14px -4px var(--black-a50); } .on-dark .mode-btn { color: var(--white-a74); } .on-dark .mode-btn:hover, .on-dark .mode-btn[aria-checked="true"] { color: var(--white); } .on-dark .mode-btn:focus-visible { outline-color: var(--seafoam); } /* radar: the switch sits on the ink band above the title; on phones the band sticks to the top */ .r-top { background: var(--band); color: var(--white); position: relative; z-index: 3; } .r-top-in { display: flex; align-items: center; gap: 10px; padding-top: 18px; } .r-top .r-menu { position: static; } .r-hero-in { padding-top: 16px; } .r-swap .kpis, .r-swap .feed { animation: r-swap .4s var(--ease) both; } .r-swap .feed { animation-delay: .05s; } @keyframes r-swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* sales cards */ .move { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; white-space: nowrap; background: var(--mist); color: var(--teal); font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .move.down { background: var(--coral-soft); color: var(--coral-ink); } .move-ico { display: inline-flex; } .move-ico svg { width: 10px; height: 10px; } .move.big { height: 32px; padding: 0 12px 0 9px; font-size: 19px; } .move.big .move-ico svg { width: 13px; height: 13px; } .rank-val .move { margin-inline-start: 8px; height: 20px; font-size: 12px; padding: 0 7px 0 5px; vertical-align: 1px; } .rank-val .move .move-ico svg { width: 8px; height: 8px; } .gain-bar { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 99px; background: var(--rule-2); overflow: hidden; display: block; } .gain-bar i { position: absolute; top: 0; bottom: 0; display: block; } .gain-bar .was { left: 0; background: var(--seafoam); opacity: .5; border-radius: 99px 0 0 99px; } .gain-bar .up { background: var(--teal); border-radius: 0 99px 99px 0; } .gain-bar .dn { background: var(--coral); opacity: .7; border-radius: 0 99px 99px 0; } .pair { grid-column: 1 / -1; display: grid; gap: 3px; } .pair-t { display: block; height: 6px; border-radius: 99px; background: var(--rule-2); overflow: hidden; } .pair-t i { display: block; height: 100%; border-radius: 99px; } .pair-t .now { background: var(--teal); } .pair-t .prev { background: var(--muted-tint-47); } .legend-inline i.k-was { background: var(--seafoam); opacity: .5; } .legend-inline i.k-up, .legend-inline i.k-now { background: var(--teal); } .legend-inline i.k-prev { background: var(--muted-tint-47); } .legend-inline i.k-med { width: 2px; height: 11px; border-radius: 1px; background: var(--ink); } .legend-inline i.k-rec { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); } .legend-inline i.k-old { width: 8px; height: 8px; border-radius: 50%; background: var(--white); border: 2px solid var(--muted); } .ribbon { display: inline-flex; align-items: center; height: 20px; padding: 0 12px 0 8px; margin-inline-end: 8px; flex: none; background: var(--coral); color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 1; border-radius: 4px 0 0 4px; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%); vertical-align: 2px; } .rec-strip { grid-column: 1 / -1; position: relative; height: 14px; display: block; } .rec-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 2px; background: var(--rule); } .rec-strip i { position: absolute; top: 50%; transform: translate(-50%, -50%); display: block; } .rec-strip .med { width: 2px; height: 12px; border-radius: 1px; background: var(--ink); } .rec-strip .old { width: 8px; height: 8px; border-radius: 50%; background: var(--white); border: 2px solid var(--muted); } .rec-strip .rec { width: 11px; height: 11px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 3px var(--coral-soft); } .meter-row { grid-column: 1 / -1; display: block; height: 8px; border-radius: 99px; background: var(--rule-2); overflow: hidden; } .meter-row i { display: block; height: 100%; border-radius: 99px; background: var(--teal); } .meter-row.is-behind i { background: var(--coral); opacity: .7; } .r-asof { margin: -4px 0 0; } .r-caveat { margin-top: -4px; } .kpis.is-one { grid-template-columns: minmax(0, 1fr); max-width: 440px; } /* map: switch next to the title, chip groups, recent sales dots, legend steps and sizes */ .map-title { align-items: center; gap: 8px; flex-wrap: wrap; } .map-title .mode-sw { box-shadow: var(--shadow); } .lchip-sep { flex: none; width: 1px; margin: 8px 3px; border-radius: 1px; background: var(--ink-a20); } .pane-map:not(.tm-on) path.ar { transition: fill .45s var(--ease); } path.recent { fill: var(--teal); fill-opacity: .22; stroke: var(--teal); stroke-width: 1.3; stroke-opacity: .85; } .lg-ticks { position: relative; height: 14px; margin-top: 2px; font-size: 10.5px; color: var(--muted); } .lg-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; } .lg-ends { font-weight: 600; } .lg-sub-title { margin-top: 8px; } .lg-sizes { display: flex; align-items: center; gap: 14px; } .lg-sizes span { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--text-2); } .lg-size { display: inline-block; border-radius: 50%; background: var(--teal-a22); border: 1.3px solid var(--teal); flex: none; } @container map (max-width: 520px) { .map-title h1 small { display: none; } } /* building card: the Sales and Rentals halves */ .bc-part { display: flex; align-items: center; gap: 10px; margin-top: 22px; } .bc-part::after { content: ""; flex: 1; height: 1px; background: var(--rule); } .bc-part-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); } .bc-part-tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); } .bc-part + .bc-sec, .bc-part + .velocity { margin-top: 10px; } .velocity { margin-top: 12px; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--mist); } .velocity b { display: block; font-size: 14.5px; font-weight: 800; line-height: 1.4; } .velocity .fine { margin-top: 2px; } .vel-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: var(--white); display: grid; place-items: center; flex: none; } .vel-ico svg { width: 16px; height: 16px; } .rec-ribbon { margin-top: 8px; display: flex; align-items: center; padding: 8px 12px 8px 0; border-radius: 12px; background: var(--coral-soft); font-size: 13.5px; line-height: 1.4; overflow: hidden; } .rec-ribbon .ribbon { height: 24px; border-radius: 0; margin-inline-end: 10px; padding-inline-start: 12px; } .rec-ribbon b { font-weight: 800; } .psf-head { display: flex; align-items: center; justify-content: space-between; gap: 6px 10px; flex-wrap: wrap; } .psf-now { font-size: 19px; font-weight: 800; letter-spacing: -.01em; } .psf-now small { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: 0; } .fact .fv .move { vertical-align: middle; } /* sheet actions: in Sales mode the pitch pack leads, Ask AI and Make report sit under it */ .sheet-actions.is-sale { flex-direction: column; gap: 8px; } .sheet-actions.is-sale > .btn { flex: none; } .sa-row { display: flex; gap: 8px; } .sa-row .btn { flex: 1; } .sheet-actions.is-form { position: static; background: var(--white); padding-top: 16px; } .pack-form { display: grid; gap: 12px; width: 100%; animation: rise .3s var(--ease) both; } .pack-head h3 { font-size: 16px; font-weight: 800; letter-spacing: -.01em; } .pack-head p { margin-top: 3px; font-size: 13px; color: var(--text-2); line-height: 1.45; } .pack-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; } .pack-form .field { gap: 5px; } .pack-form .field label { font-size: 13px; } .pack-form .field input { height: 44px; } .pack-form .select { width: 100%; min-width: 0; height: 44px; font-size: 15px; } .pack-form .field-hint { margin-top: -6px; font-size: 12.5px; } .pack-grid + .field-hint { margin-top: -4px; } .pack-actions { display: flex; gap: 8px; } .pack-actions .btn { flex: 1; } .pack-actions .btn:first-child { flex: 1.6; } /* settings */ .settings .admin-head, .set-main { max-width: 760px; } .section-title { font-size: 20px; font-weight: 800; letter-spacing: -.015em; } .set-form { padding: 20px 18px 18px; display: grid; gap: 18px; } .set-grid { display: grid; gap: 16px 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); } .set-grid .field { align-content: start; } .set-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .set-actions .btn { min-width: 120px; } .set-status { font-size: 14px; font-weight: 700; color: var(--teal); } .foot-actions .foot-btn { flex: 1 1 auto; min-width: 0; padding: 0 8px; gap: 5px; font-size: 13px; white-space: nowrap; } @media (min-width: 861px) { .r-hero-in { padding-block: 18px 80px; } } @media (min-width: 1100px) { /* the wide first card lays its rows out in two columns */ .feed .wide:not([data-kind="lease_expiry"]) > .rank { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 4px; } } @media (max-width: 860px) { .r-top { position: sticky; top: 0; z-index: 6; box-shadow: 0 8px 18px -14px var(--ink-a70); } .r-top-in { padding-block: 8px; gap: 6px; } .r-hero-in { padding-top: 10px; } .mode-btn { height: 36px; } } @media (max-width: 640px) { .set-grid { grid-template-columns: minmax(0, 1fr); } .set-form { padding: 18px 16px 16px; } } /* --------------------------------------------------- reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .dotfield.animate .d { opacity: 1; } .status-text, .shimmer { color: var(--text-2); background: none; } .report.is-building::after { display: none; } .status-dot, .conv-live { box-shadow: 0 0 0 3px var(--teal-a18); } .tm-on path.ar { transition: none; } } /* ================================================================= v4 */ /* Today · Ask · Radar · Map · Clients. The answer stack (answer, key facts, Show the numbers, source line), the detail pages, the guided flows, the search, sheets, Clients and the client share page. From design/prototype-v4.html, adapted to the shell: each pane scrolls inside itself, so sticky bars stick to the pane. */ /* ---------- shell */ .shell4 { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; } .panes4 { position: relative; flex: 1; min-height: 0; min-width: 0; } .pane4 { height: 100%; min-height: 0; } .pane-page { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-padding-top: 64px; } .pane-page:focus { outline: none; } .pane-ask { overflow: hidden; } .skip { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--ink); color: var(--white); padding: 8px 12px; border-radius: 10px; font-weight: 700; text-decoration: none; } .skip:focus { top: 8px; } .v4-top { display: none; } .avatar-btn { border: 0; cursor: pointer; padding: 0; } .avatar-btn::after { display: none; } .avatar-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .page-wait { min-height: 40vh; display: grid; place-items: center; color: var(--teal); } .page-wait .spinner { width: 22px; height: 22px; } .self-start { justify-self: start; } .btn-tall { height: 52px; border-radius: 15px; font-size: 16px; } /* phones: the bottom tab bar (5 tabs); hidden while typing and in the guided flows */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px)); background: var(--white); border-top: 1px solid var(--rule); box-shadow: var(--shadow-up); } .tbar-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 11.5px; font-weight: 700; text-decoration: none; border-radius: 12px; -webkit-tap-highlight-color: transparent; min-width: 0; } .tbar-tab .tab-ico { display: grid; place-items: center; width: 48px; height: 30px; border-radius: 999px; transition: background-color .2s ease; } .tbar-tab svg { width: 22px; height: 22px; } .tbar-tab[aria-current="page"] { color: var(--teal); } .tbar-tab[aria-current="page"] .tab-ico { background: var(--mist); } .tbar-tab:focus-visible { outline-offset: -2px; } /* the chat is the main action (11 Oct 2026): its tab is a coral pill (ink icon 4.9:1, coral-ink label 6.7:1 on white) */ .tbar-ask { color: var(--coral-ink); } .tbar-ask .tab-ico { position: relative; width: 54px; height: 32px; background: var(--coral); color: var(--ink); box-shadow: 0 6px 14px -8px var(--coral-a50); } .tbar-ask[aria-current="page"] { color: var(--ink); } .tbar-ask[aria-current="page"] .tab-ico { background: var(--coral); box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--coral); } /* a small dot until the first message from this browser (mr.asked, v4.8). v4.9, Ahmed: the Ask icon pulses, a soft coral ring that grows out of the pill and fades every 2 s, for everyone, on every screen except the chat itself (it stops while the Ask tab is open and comes back on leaving it); no reduced-motion exception, his call. The ring is its own layer, so the pill keeps its look. */ .ask-dot { display: none; position: absolute; top: -3px; right: -3px; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: var(--teal); border: 2px solid var(--white); } .ask-new .ask-dot { display: block; } .tbar-ask:not([aria-current="page"]) .tab-ico::after, .tt.tt-ask:not([aria-current="page"])::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; animation: ask-ring 2s cubic-bezier(.25, .6, .35, 1) .4s infinite; } @keyframes ask-ring { 0% { box-shadow: 0 0 0 0 var(--coral-a70); } 75%, 100% { box-shadow: 0 0 0 13px var(--coral-a0); } } /* the app-wide reduced-motion rule (top of this file) stops every animation: the Ask ring is kept on purpose */ @media (prefers-reduced-motion: reduce) { .tbar-ask:not([aria-current="page"]) .tab-ico::after, .tt.tt-ask:not([aria-current="page"])::after { animation-duration: 2s !important; animation-iteration-count: infinite !important; } } @media (max-width: 767px) { .shell4 { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); } .shell4.kb-open, .shell4[data-chrome="flow"] { padding-bottom: 0; } .shell4.kb-open .tabbar, .shell4[data-chrome="flow"] .tabbar { display: none; } .shell4:not(.kb-open) .dock { padding-bottom: 12px; } .toast { bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom, 0px)); } .shell4[data-chrome="flow"] ~ .toast, body:has(.shell4[data-chrome="flow"]) .toast { bottom: 96px; } body:has(.shell4[data-chrome="detail"]) .toast { bottom: calc(var(--tabbar-h) + 84px + env(safe-area-inset-bottom, 0px)); } } /* desktop: the white top bar with the tabs, the compact search box and the account menu */ @media (min-width: 768px) { .tabbar { display: none; } .v4-top { display: flex; align-items: center; gap: 4px; flex: none; height: 60px; padding: 0 16px; background: var(--white-a96); border-bottom: 1px solid var(--rule); position: relative; z-index: 30; } .top-mark { display: inline-flex; margin-inline-end: 12px; border-radius: 9px; } .top-mark .mark { width: 30px; height: 30px; } .tt-nav { display: flex; gap: 2px; } .tt { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 10px; color: var(--text-2); font-weight: 700; font-size: 14.5px; text-decoration: none; } .tt svg { width: 18px; height: 18px; } .tt:hover { background: var(--sand-2); color: var(--ink); } .tt[aria-current="page"] { background: var(--mist); color: var(--teal); } .tt.tt-ask { position: relative; background: var(--coral); color: var(--ink); font-weight: 800; margin-inline: 2px; } .tt.tt-ask:hover { background: var(--coral-light); color: var(--ink); } .tt.tt-ask[aria-current="page"] { background: var(--coral); color: var(--ink); box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--coral); } .tt.tt-ask:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .top-sbox { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; max-width: 320px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--rule); background: var(--sand); color: var(--muted-warm); font-size: 14px; font-weight: 600; text-align: start; } .top-sbox svg { width: 17px; height: 17px; color: var(--teal); flex: none; } .top-sbox span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .top-sbox:hover { border-color: var(--seafoam); } .v4-top > .avatar { margin-inline-start: 10px; } .on-today .top-sbox { visibility: hidden; } .pane-avatar { display: none !important; } .pane-page { scroll-padding-top: 64px; } } @media (min-width: 768px) and (max-width: 940px) { .tt { padding: 0 9px; font-size: 14px; gap: 6px; } .tt svg { display: none; } } /* ---------- Ask: its chats as a column on desktop, a drawer on phones */ .ask4 { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; min-height: 0; } .ask4 .chat { height: 100%; } .side-top { padding: 14px 12px 8px 16px; } .side-h { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .topbar .pane-avatar { flex: none; width: 34px; height: 34px; font-size: 13px; } @media (min-width: 768px) { .ask4 { grid-template-columns: var(--side-w) minmax(0, 1fr); } .ask4 .sidebar { min-height: 0; } .side-top { display: none; } .ask4 .new-chat { margin-top: 14px; } .menu-btn, .top-new { display: none; } } @media (max-width: 767px) { .ask4 .scrim { display: block; position: fixed; inset: 0; z-index: 30; background: var(--ink-a32); animation: fade .2s ease; } .ask4 .scrim[hidden] { display: none !important; } .side-close { display: inline-grid; } .menu-btn, .top-new { display: inline-grid; } .topbar { padding: 0 8px; gap: 4px; } .top-title { text-align: center; padding: 0; font-size: 14.5px; } .conv-more { opacity: 1; } .ask-chips .chip-wide { display: none; } } @media (min-width: 768px) { .ask-chips .chip-wide { grid-column: 1 / -1; } } .composer { display: block; padding: 8px; } .composer-row { display: flex; align-items: flex-end; gap: 8px; } .composer.is-drop { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-a20); } .pic-btn { width: 40px; height: 40px; border-radius: 12px; border: 0; background: var(--sand-2); color: var(--text-2); display: grid; place-items: center; flex: none; } .pic-btn:hover:not(:disabled) { background: var(--sand-3); color: var(--ink); } .pic-btn:disabled { opacity: .5; } .attach { width: 100%; max-width: var(--col); margin: 0 auto 8px; } .attach-chip { display: inline-flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 14px; background: var(--white); border: 1px solid var(--rule); font-size: 13.5px; font-weight: 700; color: var(--text-2); box-shadow: var(--shadow-sm); } .attach-chip img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; } .attach-x { width: 30px; height: 30px; border-radius: 9px; border: 0; background: var(--sand-2); display: grid; place-items: center; color: var(--text-2); } .attach-x svg { width: 15px; height: 15px; } .bubble-shot { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: 12px; margin-bottom: 6px; } .bubble-shot.is-ph { display: grid; place-items: center; background: var(--white); color: var(--muted); border: 1px solid var(--rule); } .bubble-withshot .shot-line { display: block; } .bubble-withshot .shot-reading { color: var(--muted); } .bubble-withshot .shot-typed { display: block; margin-top: 4px; } .credit { max-width: var(--col); width: 100%; margin: 0 auto 10px; } /* ---------- the answer stack */ .col { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 16px 28px; } .col-wide { max-width: 1040px; } .ans-eb { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); } .ans-eb a { color: inherit; text-decoration: none; } .ans-eb a:hover { text-decoration: underline; } .d-head { padding-top: 6px; } .d-title { font-size: clamp(26px, 7vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin-top: 6px; overflow-wrap: anywhere; } .d-sub { font-size: 14.5px; color: var(--text-2); margin-top: 4px; } .d-sub a { font-weight: 700; text-decoration: none; } .d-sub a:hover { text-decoration: underline; } .ans { font-size: clamp(20px, 5.4vw, 25px); line-height: 1.25; font-weight: 800; letter-spacing: -.022em; text-wrap: pretty; margin-top: 14px; } .ans.is-card { font-size: 18px; line-height: 1.3; margin-top: 4px; letter-spacing: -.015em; } .ans.small-ans { font-size: 19px; margin-top: 0; } .ans-skel { display: grid; gap: 10px; } .ans-skel span, .skel-line { display: block; height: 18px; border-radius: 8px; background: linear-gradient(90deg, var(--sand-3), var(--sand-sand-2-42), var(--sand-3)); background-size: 200% 100%; animation: sheen 1.4s linear infinite; } .ans-skel span + span { width: 64%; } .skel-line { height: 12px; width: 80%; margin-top: 6px; } .gchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .gchip { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px 0 10px; border-radius: 999px; font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; } .gchip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .gchip.good { background: var(--mist); color: var(--teal); } .gchip.neutral { background: var(--sand-2); color: var(--ink); border: 1px solid var(--rule); } .gchip.watch { background: var(--coral-soft); color: var(--coral-ink); } .gchip.watch-o { background: var(--white); color: var(--coral-ink); border: 1.5px solid var(--coral); } .gchip.lg { min-height: 36px; font-size: 16px; padding: 0 14px 0 12px; justify-self: start; } .kf { display: grid; gap: 8px; margin-top: 16px; grid-template-columns: minmax(0, 1fr); } .kf-i { background: var(--white); border: 1px solid var(--rule); border-radius: 14px; padding: 10px 13px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: baseline; min-width: 0; } .kf-l { font-size: 13px; font-weight: 700; color: var(--text-2); } .kf-v { font-size: 17px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-align: end; overflow-wrap: anywhere; } .kf-s { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); line-height: 1.4; } .kf-v.few { font-size: 14px; color: var(--muted); } @media (min-width: 600px) { .kf { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .kf-i { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; align-content: start; } .kf-v { text-align: start; font-size: 19px; margin-top: 2px; } } details.nums > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 2px; font-size: 14px; font-weight: 800; color: var(--teal); cursor: pointer; border-radius: 8px; } details.nums > summary::-webkit-details-marker, details.sec > summary::-webkit-details-marker { display: none; } details.nums > summary svg { width: 16px; height: 16px; transition: transform .2s var(--ease); } details.nums[open] > summary svg { transform: rotate(180deg); } details.nums .nums-c, details.nums[open] .nums-o { display: none; } details.nums[open] .nums-c { display: inline; } .nums-b { display: grid; gap: 10px; padding: 6px 0 4px; animation: fade .2s ease; } .src { font-size: 12.5px; color: var(--muted); line-height: 1.5; } .src-foot { margin-top: 16px; } .note { font-size: 13.5px; color: var(--text-2); line-height: 1.5; } .mnote { padding: 11px 13px; border-radius: 12px; background: var(--mist); font-size: 14px; line-height: 1.5; } .mnote.sand { background: var(--sand-2); color: var(--text-2); } .sub-h { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .rule { height: 1px; background: var(--rule-2); } /* ---------- sections of a detail page */ .secs { display: grid; gap: 10px; margin-top: 22px; } details.sec, .sec-empty { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-sm); min-width: 0; scroll-margin-top: 64px; } details.sec > summary, .sec-sum { list-style: none; display: grid; grid-template-columns: 38px minmax(0, 1fr) 20px; gap: 2px 12px; padding: 14px; cursor: pointer; border-radius: 16px; } .sec-sum { cursor: default; grid-template-columns: 38px minmax(0, 1fr); } details.sec > summary:hover .sec-s { color: var(--teal); } .sec-ic { grid-row: span 2; width: 38px; height: 38px; border-radius: 11px; background: var(--mist); color: var(--teal); display: grid; place-items: center; } .sec-ic svg { width: 19px; height: 19px; } .sec-t { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); align-self: end; line-height: 1.4; } .sec-s { grid-column: 2; font-size: 15.5px; font-weight: 700; line-height: 1.42; color: var(--ink); transition: color .15s; } .sec-empty .sec-s { color: var(--text-2); font-weight: 600; } .sec-chev { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--muted); transition: transform .2s var(--ease); } .sec-chev svg { width: 18px; height: 18px; } details.sec[open] .sec-chev { transform: rotate(180deg); } .sec-b { padding: 0 14px 16px; display: grid; gap: 14px; animation: fade .2s ease; min-width: 0; } .card4 { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 16px; display: grid; gap: 14px; min-width: 0; scroll-margin-top: 64px; } .card4 > h2 { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } @media (min-width: 768px) { details.sec > summary { padding: 16px 18px; } .sec-b { padding: 0 18px 18px 68px; } } /* the detail header bar and the sticky action bar (inside the scrolling page) */ .dbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 4px; height: 52px; padding: 0 6px; background: var(--sand-a94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s; } .dbar.scrolled { border-bottom-color: var(--rule); } .dbar .dt { flex: 1; min-width: 0; font-weight: 800; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0; transition: opacity .2s; } .dbar.scrolled .dt { opacity: 1; } .dbar .icon-btn:first-child:dir(rtl) svg { transform: scaleX(-1); } .sact { position: sticky; bottom: 0; z-index: 15; display: flex; gap: 8px; padding: 14px 16px 12px; margin: 18px -16px -28px; background: linear-gradient(to bottom, var(--sand-a0), var(--sand) 34%); } .sact .btn { height: 52px; border-radius: 15px; font-size: 16px; } .sact .btn-primary { flex: 1; box-shadow: 0 8px 20px -10px var(--teal-a70); } .sact .btn-more { width: 52px; padding: 0; flex: none; } .sact .btn-more svg { width: 20px; height: 20px; } .sact .btn svg { width: 18px; height: 18px; } /* ---------- sheets: a native dialog, a bottom sheet on phones and a centred card on desktop */ dialog.sheet4 { border: 0; padding: 0; margin: auto 0 0; width: 100%; max-width: 100%; max-height: 88dvh; background: var(--white); color: var(--ink); border-radius: 22px 22px 0 0; box-shadow: var(--shadow-lg); overflow-y: auto; } dialog.sheet4[open] { animation: sheet-in .28s var(--ease); } dialog.sheet4::backdrop { background: var(--ink-a38); } .sheet4-in { padding: 6px 16px calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 0; } .sheet4 .sheet-grip { width: 42px; height: 5px; border-radius: 99px; background: var(--rule); margin: 4px auto 12px; } .sheet4 h2 { font-size: 19px; font-weight: 800; letter-spacing: -.015em; overflow-wrap: anywhere; } .sheet4 .sheet-sub { font-size: 14px; color: var(--text-2); margin-top: 4px; } .sheet-list { display: grid; margin: 10px -4px 0; } .sheet-item { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 8px; border: 0; border-radius: 12px; background: none; text-align: start; font-size: 15.5px; font-weight: 700; color: var(--ink); text-decoration: none; width: 100%; } .sheet-item:hover, .sheet-item:focus-visible { background: var(--sand-2); } .sheet-item .si-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--mist); color: var(--teal); display: grid; place-items: center; flex: none; } .sheet-item .si-ic svg { width: 18px; height: 18px; } .sheet-item small { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); } .sheet-item[aria-disabled="true"] { opacity: .5; } .sheet-item[aria-busy="true"] { opacity: .6; pointer-events: none; } .sheet-actions { display: flex; gap: 8px; margin-top: 16px; } .sheet-actions .btn { flex: 1; height: 50px; } .sheet-form { display: grid; gap: 14px; margin-top: 14px; } .sheet-form .sub-h { margin-top: 4px; } .cav-sm { width: 36px !important; height: 36px !important; font-size: 13px !important; } @media (min-width: 768px) { dialog.sheet4 { margin: auto; width: 470px; max-height: 84dvh; border-radius: 20px; } dialog.sheet4[open] { animation: fade .18s ease; } .sheet4-in { padding: 22px 22px 20px; } .sheet4 .sheet-grip { display: none; } dialog.sheet4.is-menu { margin: 64px 16px auto auto; width: 300px; } dialog.sheet4.is-menu::backdrop { background: var(--ink-a8); } dialog.sheet4.is-menu .sheet4-in { padding: 14px 12px 10px; } dialog.sheet4.is-menu h2 { font-size: 16px; padding: 0 8px; } dialog.sheet4.is-menu .sheet-sub { padding: 0 8px; font-size: 13px; } } /* ---------- toast with an action */ .toast { display: flex; align-items: center; gap: 12px; } .toast.show { pointer-events: auto; } .toast.has-act { padding: 8px 8px 8px 16px; } .toast-act { color: var(--seafoam); font-weight: 800; text-decoration: none; padding: 6px 10px; border: 0; background: var(--white-a8); border-radius: 999px; font-size: 14px; white-space: nowrap; } .toast-act:hover { background: var(--white-a16); color: var(--white); } /* ---------- Today */ .today-top { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; min-height: 52px; } .date-eb { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--teal); } .hello { font-size: clamp(27px, 7.4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.12; margin-top: 2px; } /* Today's "Ask me anything" box: the first thing on the page (the chat is the heart of the app) */ .askbox { margin-top: 16px; padding: 18px 16px 16px; border-radius: 20px; background: var(--ink); color: var(--white); box-shadow: 0 16px 34px -20px var(--ink-a70); } .askbox-h { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; color: var(--white); } .askbox-ic { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--coral); color: var(--ink); } .askbox-ic svg { width: 19px; height: 19px; } .askbox-sub { margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--white-a74); } .askbox-form { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 6px 6px 6px 14px; border-radius: 16px; background: var(--white); } .askbox-form:focus-within { box-shadow: 0 0 0 3px var(--seafoam); } .askbox-in { flex: 1; min-width: 0; height: 44px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; } .askbox-in::placeholder { color: var(--muted); font-weight: 500; } .askbox-in:focus-visible { outline: none; } .askbox-send { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 0; display: grid; place-items: center; background: var(--coral); color: var(--ink); cursor: pointer; } .askbox-send svg { width: 20px; height: 20px; } .askbox-send:hover:not(:disabled) { background: var(--coral-light); } .askbox-send:disabled { background: var(--sand-2); color: var(--muted); cursor: default; } .askbox-send:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .askbox-try { display: grid; gap: 8px; margin-top: 12px; } .askchip { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 9px 12px 9px 14px; border-radius: 13px; border: 1px solid var(--white-a16); background: var(--white-a8); color: var(--white); font: inherit; font-size: 14.5px; font-weight: 700; line-height: 1.3; text-align: start; cursor: pointer; } .askchip svg { flex: none; width: 16px; height: 16px; color: var(--seafoam); } .askchip svg:dir(rtl) { transform: scaleX(-1); } .askchip:hover { background: var(--white-a16); } .askchip:focus-visible { outline: 2px solid var(--seafoam); outline-offset: 2px; } .askchip:active, .askbox-send:active:not(:disabled) { transform: scale(.985); } @media (min-width: 768px) { .askbox { padding: 22px 22px 20px; } .askbox-h { font-size: 23px; } .askbox-try { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .askchip:active, .askbox-send:active { transform: none; } } .jobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; } .job { min-height: 118px; padding: 14px; border-radius: 18px; background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; text-align: start; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .1s; } .job:hover { border-color: var(--seafoam); } .job:active { transform: scale(.985); } .job .ji { width: 38px; height: 38px; border-radius: 12px; background: var(--mist); color: var(--teal); display: grid; place-items: center; } .job .ji svg { width: 20px; height: 20px; } .job b { display: block; font-size: 16px; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; } .job span span { display: block; font-size: 13px; color: var(--text-2); line-height: 1.35; margin-top: 3px; } .job.is-primary { background: var(--teal); border-color: var(--teal); color: var(--white); box-shadow: 0 12px 26px -14px var(--teal-a80); } .job.is-primary span span { color: var(--white-a86); } .job.is-primary .ji { background: var(--white-a16); color: var(--white); } .job.is-primary:focus-visible { outline-color: var(--ink); } .h2row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 30px; } .h2 { font-size: 18.5px; font-weight: 800; letter-spacing: -.015em; } .h2row a, .h2row button { font-size: 14px; font-weight: 800; text-decoration: none; border: 0; background: none; color: var(--teal); padding: 0; } .patch-areas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .patch-areas a { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--sand-2); border: 1px solid var(--rule); font-size: 12.5px; font-weight: 700; color: var(--text-2); text-decoration: none; } .patch-areas a:hover { border-color: var(--seafoam); color: var(--ink); } .pings { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; margin-top: 10px; box-shadow: var(--shadow-sm); } .ping { display: grid; grid-template-columns: 10px minmax(0, 1fr) 18px; gap: 12px; align-items: start; width: 100%; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--rule-2); background: none; text-align: start; text-decoration: none; font-size: 15px; line-height: 1.45; color: var(--ink); } .ping:last-child { border-bottom: 0; } a.ping:hover { background: var(--sand-tint-49); } .ping .pc { color: var(--muted); margin-top: 2px; } .ping .pc svg { width: 17px; height: 17px; } .ping .pc:dir(rtl) svg { transform: scaleX(-1); } .ping .cav { width: 34px; height: 34px; font-size: 13px; } .ping.has-av { grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; } .ping small { display: block; font-size: 12.5px; color: var(--muted); } .ping.saved-item { grid-template-columns: auto minmax(0, 1fr) 40px; align-items: center; } .ping.saved-item a { font-weight: 800; text-decoration: none; } .tdot { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; flex: none; display: inline-block; } .tdot.good { background: var(--teal); } .tdot.neutral { background: var(--ink); } .tdot.watch { background: var(--coral); } .data-line { text-align: center; font-size: 12.5px; color: var(--muted); margin: 30px 0 4px; } .picker-card { background: var(--white); border: 1px solid var(--rule); border-radius: 18px; padding: 18px 16px 16px; margin-top: 10px; display: grid; gap: 14px; box-shadow: var(--shadow-sm); } .picker-card h3 { font-size: 18px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; } .picker-card .note { margin-top: 4px; } .shake { animation: shake .35s ease; } @keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .skel { display: grid; gap: 12px; padding: 16px 14px; } .skel span { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--sand-3), var(--sand-sand-2-42), var(--sand-3)); background-size: 200% 100%; animation: sheen 1.4s linear infinite; } .skel span:nth-child(2n) { width: 72%; } .skel-strip { padding: 4px 0; } .err-line { display: grid; gap: 10px; justify-items: start; padding: 16px 14px; font-size: 14.5px; color: var(--text-2); } @media (min-width: 768px) { .jobs { grid-template-columns: repeat(4, minmax(0, 1fr)); } .today-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; } } /* ---------- search */ dialog.so { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; background: var(--sand); color: var(--ink); display: flex; flex-direction: column; } dialog.so:not([open]) { display: none; } dialog.so[open] { animation: fade .15s ease; } dialog.so::backdrop { background: var(--ink-a25); } .so-top { display: flex; gap: 6px; align-items: center; padding: 10px 10px 10px 12px; background: var(--white); border-bottom: 1px solid var(--rule); flex: none; } .so-field { flex: 1; min-width: 0; position: relative; } .so-field svg { position: absolute; inset-inline-start: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--teal); pointer-events: none; } .so-in { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--teal); padding: 0 12px 0 40px; padding-inline: 40px 12px; font-size: 16px; background: var(--white); box-shadow: 0 0 0 3px var(--teal-a15); } .so-in:focus-visible { outline: none; } .so-in::-webkit-search-cancel-button { cursor: pointer; } .so-cancel { border: 0; background: none; font-weight: 800; color: var(--teal); padding: 0 8px; height: 44px; font-size: 15px; } .so-prog { display: block; height: 3px; background: linear-gradient(90deg, var(--mist), var(--teal), var(--mist)); background-size: 200% 100%; animation: sheen 1s linear infinite; flex: none; } .so-body { flex: 1; overflow-y: auto; padding: 8px 12px 24px; } .so-h { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 12px 6px 6px; } .res { display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 2px 10px; align-items: center; width: 100%; padding: 10px 8px; border: 0; border-radius: 12px; background: none; text-align: start; text-decoration: none; color: var(--ink); } .res:hover, .res.is-active { background: var(--white); box-shadow: var(--shadow-sm); } .res.is-active { outline: 2px solid var(--seafoam); outline-offset: -2px; } .res-top { display: flex; align-items: center; gap: 8px; min-width: 0; } .res-kind { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 6px; background: var(--sand-2); color: var(--text-2); } .res-kind.k-licence { background: var(--coral-soft); color: var(--coral-ink); } .res-kind.k-area { background: var(--mist); color: var(--teal); } .res-name { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .res-name mark { background: none; color: var(--teal); font-weight: 800; } .res-sub { grid-column: 1; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .res > svg { grid-row: 1 / span 2; grid-column: 2; width: 17px; height: 17px; color: var(--muted); } .res > svg:dir(rtl) { transform: scaleX(-1); } .so-hint { margin: 10px 6px; padding: 12px 14px; border-radius: 14px; background: var(--white); border: 1px solid var(--rule); font-size: 14px; color: var(--text-2); line-height: 1.5; } .so-empty { padding: 26px 8px; display: grid; gap: 12px; font-size: 15px; color: var(--text-2); } @media (min-width: 768px) { dialog.so { margin: 68px auto auto; width: min(580px, calc(100vw - 32px)); height: auto; max-height: min(600px, calc(100dvh - 96px)); border-radius: 18px; border: 1px solid var(--rule); box-shadow: var(--shadow-lg); overflow: hidden; } } /* ---------- guided flows */ .flow { min-height: 100%; display: flex; flex-direction: column; } .shell4[data-chrome="flow"] .page { min-height: 100%; display: flex; flex-direction: column; } .shell4[data-chrome="flow"] .page > .flow { flex: 1; } .flow-form { display: contents; } .flow-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 6px; height: 56px; padding: 0 8px; background: var(--sand-a95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .flow-title { flex: 1; min-width: 0; font-weight: 800; font-size: 15.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flow-steps { display: flex; gap: 5px; align-items: center; padding-inline-end: 8px; } .flow-steps i { width: 20px; height: 5px; border-radius: 99px; background: var(--rule); } .flow-steps i.on { background: var(--teal); } .flow-steps small { font-size: 12px; font-weight: 700; color: var(--muted); margin-inline-end: 6px; white-space: nowrap; } .flow-body { flex: 1; width: 100%; max-width: 580px; margin: 0 auto; padding: 4px 16px 28px; } .flow-q { font-size: clamp(25px, 7vw, 30px); font-weight: 800; letter-spacing: -.026em; line-height: 1.14; margin-top: 14px; } .flow-q:focus, .ans:focus { outline: none; } .flow-sub { color: var(--text-2); margin-top: 6px; font-size: 15px; line-height: 1.5; } .flow-after { margin-top: 14px; } .flow-foot { position: sticky; bottom: 0; z-index: 10; width: 100%; max-width: 580px; margin: 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to bottom, var(--sand-a0), var(--sand) 30%); display: flex; gap: 8px; } .flow-foot .btn { height: 54px; border-radius: 15px; font-size: 16.5px; } .flow-foot .btn-primary { flex: 1; } .flow-foot .btn svg { width: 18px; height: 18px; } .sumchips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; } .sumchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; background: var(--white); border: 1px solid var(--rule); font-size: 13px; font-weight: 700; color: var(--text-2); max-width: 100%; } .sumchip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sumchip svg { width: 13px; height: 13px; color: var(--muted); flex: none; } .sumchip:hover { border-color: var(--seafoam); color: var(--ink); } .bigc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; } .bigc button { min-height: 116px; border-radius: 18px; background: var(--white); border: 1.5px solid var(--rule); display: grid; place-items: center; align-content: center; gap: 10px; font-size: 17px; font-weight: 800; color: var(--ink); box-shadow: var(--shadow-sm); } .bigc button svg { width: 28px; height: 28px; color: var(--teal); } .bigc button small { display: block; font-size: 13px; font-weight: 600; color: var(--muted); margin-top: -6px; } .bigc button:hover { border-color: var(--seafoam); } .bigc button[aria-pressed="true"] { border-color: var(--teal); background: var(--mist); box-shadow: 0 0 0 3px var(--teal-a14); } .alt-card { display: grid; gap: 10px; margin-top: 26px; padding: 16px; border-radius: 16px; border: 1px dashed var(--rule-dash); background: var(--white-a55); } .alt-card p { font-size: 14.5px; color: var(--text-2); } .alt-card .btn { justify-self: start; } .pchips { display: flex; flex-wrap: wrap; gap: 8px; } .pchip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 54px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--white); font-size: 15px; font-weight: 700; color: var(--text-2); text-decoration: none; } .pchip svg { width: 16px; height: 16px; flex: none; } .pchip:hover { border-color: var(--seafoam); color: var(--ink); } .pchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); } .fld { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 24px; } .fld-l { font-size: 14.5px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .fld-l small { font-weight: 600; color: var(--muted); font-size: 13px; } .fld-l .seg { font-weight: 700; } .money { display: flex; align-items: center; gap: 8px; height: 58px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 15px; background: var(--white); } .money:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-a18); } .money .pre { font-weight: 800; color: var(--muted); font-size: 15px; } .money .post { font-weight: 700; color: var(--muted); font-size: 14px; white-space: nowrap; } .money input { flex: 1; min-width: 0; width: 100%; border: 0; outline: none; background: transparent; font-size: 21px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .money input::placeholder { color: var(--muted-tint-60); font-weight: 700; } .hint { font-size: 13.5px; color: var(--muted); line-height: 1.45; } .hint b { color: var(--text-2); } .ttag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--sand-2); color: var(--muted); } .ttag.yours { background: var(--mist); color: var(--teal); } .inline-search { position: relative; } .inline-search .so-in { height: 54px; border-color: var(--rule); box-shadow: none; font-size: 17px; font-weight: 700; } .inline-search .so-in:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-a15); } .inline-search .so-prog { position: absolute; left: 12px; right: 12px; top: 51px; border-radius: 3px; } .inline-res { margin-top: 6px; background: var(--white); border: 1px solid var(--rule); border-radius: 14px; padding: 4px; box-shadow: var(--shadow); } .inline-none { padding: 10px; } .picked { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 15px; background: var(--mist); border: 1px solid var(--seafoam-mist-27); } .picked svg { width: 20px; height: 20px; color: var(--teal); flex: none; } .picked b { display: block; font-size: 16px; font-weight: 800; } .picked small { display: block; font-size: 13px; color: var(--text-2); } .picked > div { flex: 1; min-width: 0; } .slider { width: 100%; accent-color: var(--teal); height: 28px; } .seg-wide { display: flex; width: 100%; } .seg-wide .seg-btn { flex: 1; justify-content: center; } .flow-body > .seg-wide { margin-top: 16px; } /* ---------- results and the price strip */ .result-card { background: var(--white); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--shadow); padding: 18px 16px 16px; margin-top: 14px; display: grid; gap: 16px; animation: rise .35s var(--ease) both; min-width: 0; } .result-card .ans { margin-top: 6px; } .result-card .gchips { margin-top: 0; } .result-card .kf { margin-top: 0; } .pc-head { display: flex; } .pc-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 1px solid var(--rule); } .pstrip { --L: 92px; position: relative; padding: 30px 0 4px; } .pstrip.is-compact { --L: 84px; } .ps-row { position: relative; display: grid; grid-template-columns: var(--L) minmax(0, 1fr); gap: 10px; align-items: center; min-height: 44px; } .ps-row + .ps-row { border-top: 1px dashed var(--rule-2); } .ps-name b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; } .ps-name small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; } .ps-track { position: relative; height: 22px; } .ps-track::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 2px; border-radius: 2px; background: var(--rule-2); } .ps-band { position: absolute; top: 5px; height: 12px; border-radius: 99px; background: var(--seq-1); } .ps-med { position: absolute; top: 1px; width: 3px; height: 20px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); } .ps-few { font-size: 13px; color: var(--muted); font-weight: 700; padding: 4px 0; } .ps-ask { position: absolute; top: 22px; bottom: 26px; width: 2.5px; margin-left: -1.25px; background: var(--teal); border-radius: 2px; z-index: 2; pointer-events: none; } .ps-ask::before { content: ""; position: absolute; top: -5px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--teal); } .ps-ask-l { position: absolute; top: 0; z-index: 2; transform: translateX(-50%); font-size: 12.5px; font-weight: 800; color: var(--teal); white-space: nowrap; } .ps-ask-l.is-end { transform: translateX(calc(-100% + 6px)); } .ps-ask-l.is-start { transform: translateX(-6px); } .ps-axis { position: relative; margin-inline-start: calc(var(--L) + 10px); height: 20px; margin-top: 4px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } .ps-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; } .ps-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); } .ps-key span { display: inline-flex; align-items: center; gap: 6px; } .ps-key i { display: inline-block; } .ps-key .k-band { width: 16px; height: 8px; border-radius: 99px; background: var(--seq-1); } .ps-key .k-med { width: 3px; height: 12px; border-radius: 2px; background: var(--ink); } .ps-key .k-ask { width: 2.5px; height: 12px; background: var(--teal); } .act-row { display: flex; flex-wrap: wrap; gap: 8px; } .act-row .btn { flex: 1 1 auto; } @media (min-width: 768px) { .result-card { padding: 22px 22px 20px; } .pstrip { --L: 130px; } } /* ---------- the screenshot check */ .drop { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 210px; margin-top: 22px; padding: 22px; border-radius: 20px; border: 2px dashed var(--rule-dash-2); background: var(--white-a60); text-align: center; } .drop.is-over { border-color: var(--teal); background: var(--mist); } .drop svg { width: 34px; height: 34px; color: var(--teal); } .drop b { font-size: 17px; font-weight: 800; } .drop span { font-size: 14px; color: var(--muted); } .shot-privacy { margin-top: 14px; } @media (hover: none) and (pointer: coarse) { .drop-desk, .paste-btn { display: none !important; } } .shot-img { width: 120px; max-height: 200px; object-fit: cover; object-position: top; border-radius: 14px; border: 1px solid var(--rule); box-shadow: var(--shadow); flex: none; } .read-head { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; } .read-head .flow-q { margin-top: 0; font-size: 25px; } .read-head .shot-img { width: 88px; } .readrows { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; margin-top: 18px; overflow: hidden; } .rr { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--rule-2); font-size: 15px; } .rr:last-child { border-bottom: 0; } .rr .k { font-size: 13px; font-weight: 700; color: var(--muted); } .rr .v { font-weight: 800; min-width: 0; overflow-wrap: anywhere; } .rr .unsure { display: block; font-size: 12.5px; font-weight: 700; color: var(--coral-ink); } .rr .unsure::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--coral); vertical-align: 1px; } .rr.is-fixing { background: var(--sand-tint-49); } .rr-edit { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .rr-edit .money { flex: 1; height: 50px; } .rr-edit .fix-search { flex: 1 1 100%; } .mtag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--mist); color: var(--teal); vertical-align: 2px; } .mtag.grey { background: var(--sand-2); color: var(--muted); } .reading { display: grid; justify-items: center; gap: 16px; margin-top: 40px; text-align: center; } .reading .bar { width: 180px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--rule-2), var(--seafoam), var(--rule-2)); background-size: 200% 100%; animation: sheen 1.2s linear infinite; } /* ---------- value a listing: the pitch pack preview */ .pack-prev { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px; border-radius: 16px; background: var(--sand-2); } .pp-cover { aspect-ratio: 210 / 297; border-radius: 6px; background: var(--ink); color: var(--white); padding: 9px 8px; display: grid; align-content: space-between; box-shadow: var(--shadow); overflow: hidden; position: relative; } .pp-cover::after { content: ""; position: absolute; right: 8px; top: 30px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); box-shadow: -14px 6px 0 -1px var(--seafoam-a50), -6px 16px 0 -1px var(--seafoam-a40), -22px 18px 0 -1.5px var(--seafoam-a30); } .pp-cover i { font-style: normal; font-size: 6.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--seafoam); font-weight: 800; } .pp-cover b { font-size: 11px; line-height: 1.15; font-weight: 800; } .pp-cover small { font-size: 6.5px; line-height: 1.3; color: var(--white-a72); } .pp-list { display: grid; gap: 5px; font-size: 13.5px; color: var(--text-2); line-height: 1.4; } .pp-list b { font-size: 14px; color: var(--ink); font-weight: 800; } .pp-list span { display: flex; gap: 7px; align-items: baseline; } .pp-list span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--seafoam); flex: none; transform: translateY(-1px); } /* ---------- building sheet */ .type-bars { display: grid; gap: 10px; } .tbr { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; } .tbr .lbl { font-weight: 700; } .tbr .bar { height: 14px; border-radius: 5px; background: var(--rule-2); overflow: hidden; } .tbr .bar i { display: block; height: 100%; border-radius: 5px; background: var(--seafoam); } .tbr .v { text-align: end; font-weight: 800; line-height: 1.2; } .tbr .v small { display: block; font-size: 11.5px; font-weight: 600; color: var(--muted); } .frows { display: grid; } .frow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 1px 14px; padding: 10px 0; border-bottom: 1px solid var(--rule-2); font-size: 14.5px; align-items: baseline; } .frow:last-child { border-bottom: 0; } .frow .fl { color: var(--text-2); min-width: 0; overflow-wrap: anywhere; } .frow .fl-link, .frow .fl a { font-weight: 700; text-decoration: none; color: var(--ink); } .frow .fl-link:hover { color: var(--teal); } .frow .fv { font-weight: 800; text-align: end; max-width: 62vw; overflow-wrap: anywhere; } .frow .fv a { text-decoration: none; } .frow .fv a:hover { text-decoration: underline; } .frow .fv .link-btn { display: inline-flex; align-items: center; gap: 2px; text-decoration: none; font-size: inherit; } .frow .fv .link-btn svg { width: 15px; height: 15px; } .frow .fs { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); line-height: 1.4; } .frow .fv.nr { color: var(--muted); font-weight: 700; } .calc { display: grid; gap: 10px; transition: opacity .2s; } .calc.is-busy .calc-out { opacity: .55; } .calc-out { display: grid; gap: 10px; transition: opacity .2s; } .calc-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 12px; align-items: center; } .calc-in label { font-size: 14px; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .calc-in .money { height: 46px; border-radius: 12px; padding: 0 10px; } .calc-in .money input { font-size: 16.5px; } .calc-in .money .pre, .calc-in .money .post { font-size: 12.5px; } .ypair { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--sand-2); } .yp-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; font-size: 14px; align-items: baseline; } .yp-r b { font-size: 20px; font-weight: 800; letter-spacing: -.015em; } .yp-bar { grid-column: 1 / -1; height: 12px; border-radius: 99px; background: var(--white); overflow: hidden; } .yp-bar i { display: block; height: 100%; border-radius: 99px; background: var(--seafoam); transition: width .35s var(--ease); } .yp-r.net .yp-bar i { background: var(--teal); } .yp-gap { font-size: 12.5px; color: var(--text-2); } .buy-tbl td { padding-block: 7px; } .buy-tbl tr.tot td { font-weight: 800; border-top: 1.5px solid var(--rule); } .signs { display: grid; } .sign { display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 1px 12px; padding: 11px 0; border-bottom: 1px solid var(--rule-2); } .sign:last-child { border-bottom: 0; } .sign .tdot { grid-row: span 2; margin-top: 5px; } .sign b { font-size: 12.5px; font-weight: 800; color: var(--muted); letter-spacing: .01em; } .sign span { font-size: 15px; font-weight: 700; line-height: 1.4; } .legend4 { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); } .legend4 span { display: inline-flex; align-items: center; gap: 6px; } .legend4 .tdot { width: 8px; height: 8px; margin: 0; } .spark4 { display: grid; gap: 4px; } .spark-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; } .spark-top b { font-size: 19px; font-weight: 800; } .spark4 .bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; height: 64px; } .spark4 .bars i { display: block; border-radius: 5px 5px 2px 2px; background: var(--seq-1); min-height: 4px; } .spark4 .bars i:last-child { background: var(--teal); } .spark4 .bars i.ytd { background: repeating-linear-gradient(135deg, var(--seafoam) 0 4px, var(--seq-1) 4px 8px); } .spark4 .yrs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; font-size: 11px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; } .move.down { background: var(--coral-soft); color: var(--coral-ink); } .near4 { display: grid; } .near4 .nr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 9px 0; border-bottom: 1px solid var(--rule-2); font-size: 14.5px; } .near4 .nr:last-child { border-bottom: 0; } .near4 .nr small { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); } .near4 .nr span:last-of-type { font-weight: 800; white-space: nowrap; } .two-lists { display: grid; gap: 14px; } @media (min-width: 600px) { .two-lists { grid-template-columns: 1fr 1fr; } } /* ---------- project page */ .built { display: grid; gap: 6px; margin-top: 16px; } .built-t { position: relative; height: 12px; border-radius: 99px; background: var(--rule-2); } .built-t i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 99px; background: var(--teal); } .built-row { display: flex; justify-content: space-between; gap: 4px 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); } .built-row b { color: var(--ink); font-weight: 800; } .stat { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--sand-2); border: 1px solid var(--rule); font-size: 12.5px; font-weight: 800; color: var(--text-2); } .m3-word { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; } .m3-word.watch { color: var(--coral-ink); } .m3-word.good { color: var(--teal); } .m3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; } .m3 i { height: 12px; border-radius: 99px; background: var(--rule-2); } .m3 i.on.good { background: var(--teal); } .m3 i.on.neutral { background: var(--ink); } .m3 i.on.watch { background: var(--coral); } .m3-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; font-size: 12px; font-weight: 700; color: var(--muted); margin-top: -8px; } .m3-l span:nth-child(2) { text-align: center; } .m3-l span:nth-child(3) { text-align: end; } .m3-l span.on { color: var(--ink); font-weight: 800; } .edge { font-size: 12.5px; color: var(--muted); margin-top: -8px; } .rz { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .rz li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 10px; font-size: 14.5px; line-height: 1.5; } .rz .mk { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; grid-row: span 2; } .rz li.flat .mk { grid-row: auto; } .rz .mk svg { width: 14px; height: 14px; } .rz small { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .rz .up .mk { background: var(--coral-soft); color: var(--coral-ink); } .rz .up small { color: var(--coral-ink); } .rz .down .mk { background: var(--mist); color: var(--teal); } .rz .down small { color: var(--teal); } .rz .flat .mk { background: var(--sand-2); color: var(--text-2); } .grade-head { display: grid; gap: 8px; } .grade-why { font-size: 15px; color: var(--ink); font-weight: 600; line-height: 1.45; } .parts { display: grid; gap: 12px; } .part { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; font-size: 14px; align-items: baseline; } .part .pl { font-weight: 600; color: var(--ink); line-height: 1.35; } .part .pw { font-weight: 800; font-size: 13px; text-align: end; white-space: nowrap; } .part .pb { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--rule-2); overflow: hidden; } .part .pb i { display: block; height: 100%; border-radius: 99px; } .part .pt { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); } .part.good .pw { color: var(--teal); } .part.good .pb i { background: var(--teal); } .part.neutral .pw { color: var(--text-2); } .part.neutral .pb i { background: var(--ink-mist-33); } .part.watch .pw { color: var(--coral-ink); } .part.watch .pb i { background: var(--coral); } .ev-sum { font-size: 14.5px; line-height: 1.5; padding: 12px 13px; border-radius: 12px; background: var(--sand-2); } .ev-sum b { font-weight: 800; } .evs { display: grid; } .ev { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; padding: 11px 0; border-bottom: 1px solid var(--rule-2); font-size: 13.5px; align-items: baseline; } .ev:last-child { border-bottom: 0; } .ev a { font-size: 15px; font-weight: 800; text-decoration: none; color: var(--ink); overflow-wrap: anywhere; } .ev a:hover { color: var(--teal); } .ev .r { font-weight: 800; text-align: end; white-space: nowrap; } .ev small { grid-column: 1 / -1; color: var(--muted); font-size: 12.5px; } .escrow { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 14px; border-radius: 16px; background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); } .escrow .shield { width: 42px; height: 42px; border-radius: 12px; background: var(--mist); color: var(--teal); display: grid; place-items: center; grid-row: span 2; } .escrow .shield svg { width: 22px; height: 22px; } .escrow.off .shield { background: var(--sand-2); color: var(--text-2); } .escrow b { font-size: 15.5px; font-weight: 800; line-height: 1.4; } .escrow small { font-size: 12.5px; color: var(--muted); line-height: 1.45; } .linkcard { display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; gap: 2px 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--white); border: 1px solid var(--rule); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); } .linkcard:hover { border-color: var(--seafoam); } .linkcard .cav { grid-row: span 2; width: 42px; height: 42px; } .linkcard .cav-mist { background: var(--mist); color: var(--teal); } .linkcard .cav-mist svg { width: 20px; height: 20px; } .linkcard b { font-size: 15.5px; font-weight: 800; } .linkcard small { font-size: 13px; color: var(--text-2); grid-column: 2; } .linkcard > svg { grid-row: 1 / span 2; grid-column: 3; width: 18px; height: 18px; color: var(--muted); } /* ---------- developer page */ .dev-note { margin-top: 14px; } .prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule-2); align-items: baseline; text-decoration: none; color: var(--ink); } .prow:last-child { border-bottom: 0; } .prow:hover b { color: var(--teal); } .prow b { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; } .prow .pct { font-weight: 800; font-size: 14px; text-align: end; } .prow .pbar { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: var(--rule-2); overflow: hidden; } .prow .pbar i { display: block; height: 100%; border-radius: 99px; background: var(--teal); } .prow.late .pbar i { background: var(--coral); opacity: .8; } .prow .meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--text-2); } .ltag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 800; background: var(--coral-soft); color: var(--coral-ink); } .ltag.grey { background: var(--sand-2); color: var(--muted); } /* ---------- area page */ .fscale { position: relative; padding-top: 30px; } .fs-bands { display: grid; grid-template-columns: 25fr 25fr 50fr; gap: 3px; } .fs-bands i { height: 12px; } .fs-bands i:nth-child(1) { background: var(--sand-3); border-radius: 99px 3px 3px 99px; } .fs-bands i:nth-child(2) { background: var(--seq-1); border-radius: 3px; } .fs-bands i:nth-child(3) { background: var(--seafoam); border-radius: 3px 99px 99px 3px; } .fs-labels { display: grid; grid-template-columns: 25fr 25fr 50fr; gap: 3px; font-size: 11.5px; color: var(--muted); font-weight: 700; margin-top: 6px; } .fs-labels span:nth-child(3) { text-align: end; } .fs-labels span.on { color: var(--ink); font-weight: 800; } .fs-mark { position: absolute; top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; font-size: 12.5px; font-weight: 800; color: var(--ink); white-space: nowrap; } .fs-mark::after { content: ""; width: 3px; height: 26px; border-radius: 2px; background: var(--ink); } .ybars { display: grid; gap: 8px; } .yb4 { display: grid; grid-template-columns: minmax(52px, 34%) minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 14px; } .yb4 .bar { height: 14px; border-radius: 5px; background: var(--rule-2); overflow: hidden; } .yb4 .bar i { display: block; height: 100%; background: var(--teal); border-radius: 5px; opacity: .8; } .yb4 b { font-weight: 800; text-align: end; } /* ---------- clients */ .cl-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .cl-n { font-size: 20px; font-weight: 700; } .cl-filter { margin-top: 14px; } .clist { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; overflow: hidden; margin-top: 14px; box-shadow: var(--shadow-sm); } .crow { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; width: 100%; min-height: 72px; padding: 14px; border-bottom: 1px solid var(--rule-2); background: none; text-align: start; text-decoration: none; color: var(--ink); } .crow:last-child { border-bottom: 0; } .crow:hover { background: var(--sand-tint-49); } .cav { width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--seafoam); display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; } .crow .cn { font-size: 16px; font-weight: 800; min-width: 0; overflow-wrap: anywhere; } .crow .cb { grid-column: 2; font-size: 13.5px; color: var(--text-2); line-height: 1.4; } .crow .cav { grid-row: span 2; } .crow .cr { grid-row: 1 / span 2; grid-column: 3; display: grid; justify-items: end; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--text-2); text-align: end; } .obadge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; } .obadge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .obadge.on { background: var(--mist); color: var(--teal); } .obadge.off { background: var(--sand-2); color: var(--muted); } .empty4 { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 48px 20px; } .empty4 p { font-size: 16px; color: var(--text-2); max-width: 32ch; line-height: 1.5; } .empty-mark .mark { width: 72px; height: 72px; } .shareblock { background: var(--mist); border: 1px solid var(--seafoam-mist-27); border-radius: 18px; padding: 16px; display: grid; gap: 12px; margin-top: 18px; } .shareblock .big { font-size: 20px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; } .shareblock .act-row .btn { flex: 1 1 140px; } .danger-link { color: var(--coral-ink); justify-self: start; } .urlbox { display: flex; gap: 8px; } .urlbox input { flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 1px solid var(--seafoam-mist-27); background: var(--white); padding: 0 12px; font-family: var(--mono); font-size: 13.5px; } .wa-line { display: inline-flex; align-items: center; gap: 6px; } .wa-line svg { width: 16px; height: 16px; } .briefs { display: grid; gap: 10px; margin-top: 10px; } .brief { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; padding: 16px; display: grid; gap: 12px; box-shadow: var(--shadow-sm); } .brief[aria-busy="true"] { opacity: .7; } .brief-top { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; } .brief .bs { font-size: 16.5px; font-weight: 800; line-height: 1.35; } .brief .bm { font-size: 13px; color: var(--muted); } .brief .icon-btn { margin: -8px -8px 0 0; flex: none; } .mini-list { display: grid; } .mini-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 0 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule-2); text-decoration: none; color: var(--ink); font-size: 14.5px; } .mini-row:last-child { border-bottom: 0; } .mini-row b { font-weight: 800; } .mini-row:hover b { color: var(--teal); } .mini-row small { grid-column: 2; font-size: 12.5px; color: var(--muted); } .mini-row .pin-no { grid-row: span 2; width: 24px; height: 24px; font-size: 12px; } .mini-row .pr { grid-row: span 2; font-weight: 800; white-space: nowrap; } .notes-field { margin-top: 10px; } .field textarea { width: 100%; min-height: 110px; padding: 10px 14px; border-radius: var(--r); background: var(--white); border: 1px solid var(--rule); font-size: 16px; line-height: 1.5; resize: vertical; } .field textarea:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-a18); } .ticks { display: grid; gap: 6px; font-size: 14px; color: var(--text-2); margin-top: -6px; } .ticks span { display: flex; gap: 8px; align-items: flex-start; } .ticks svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--teal); } .ticks.no svg { color: var(--coral-ink); } /* ---------- licence and settings */ .lic-form { display: grid; gap: 12px; margin-top: 18px; } .lic-left { font-size: 12.5px; color: var(--muted); } .set-form4 { display: grid; gap: 14px; } .cover-line { padding: 10px 12px; border-radius: 10px; background: var(--sand-2); color: var(--text-2); } /* ---------- chat cards (v4) */ .c4 { background: var(--white); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-sm); padding: 15px; display: grid; gap: 12px; max-width: 580px; min-width: 0; animation: msg-in .35s var(--ease) both; } .c4 .c4-eb { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); } .c4 .gchips, .c4 .kf { margin-top: 0; } .c4 .pstrip { padding-top: 26px; } .c4-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .c4-rows div { background: var(--sand-2); border-radius: 12px; padding: 9px 11px; min-width: 0; } .c4-rows span { display: block; font-size: 12px; font-weight: 700; color: var(--muted); } .c4-rows b { display: block; font-size: 15px; font-weight: 800; margin-top: 1px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .c4-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; text-decoration: none; justify-self: start; } .c4-link:hover { text-decoration: underline; } .c4-link svg { width: 16px; height: 16px; } .c4-link svg:dir(rtl) { transform: scaleX(-1); } .esc-line { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text-2); } .esc-line svg { width: 18px; height: 18px; color: var(--teal); flex: none; margin-top: 1px; } .esc-line.off svg { color: var(--text-2); } .cards > .c4 + .c4, .cards > .c4 + .card-group, .cards > .card-group + .c4 { margin-top: 12px; } .sl-foot { display: flex; flex-wrap: wrap; gap: 8px; } /* ---------- radar rows and the map sheet: "Open the full page" */ .rank li { display: grid; } .rank-full { justify-self: start; margin: -2px 0 6px; padding: 2px 10px; font-size: 12.5px; font-weight: 800; color: var(--teal); text-decoration: none; border-radius: 6px; } .rank-full:hover { text-decoration: underline; } .tbl .rank-full { display: inline-block; margin: 2px 0 0; padding: 0; } .sheet-full { margin: 4px 0 6px; } .r-top-in .r-avatar { margin-inline-start: auto; flex: none; } .map-title .map-avatar { margin-inline-start: auto; pointer-events: auto; flex: none; box-shadow: var(--shadow-sm); } /* ---------- the client's share page (public, no app chrome) */ body.is-share { overflow: auto; } .sp { min-height: 100dvh; border-top: 4px solid var(--teal); } .sp-col { max-width: 580px; margin: 0 auto; padding: 22px 16px 40px; } .sp h1 { font-size: clamp(26px, 7.6vw, 32px); font-weight: 800; letter-spacing: -.028em; line-height: 1.12; margin-top: 8px; overflow-wrap: anywhere; } .sp-brief { font-size: 15px; color: var(--text-2); margin-top: 8px; line-height: 1.5; } .sp-agent { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px; background: var(--white); border: 1px solid var(--rule); border-radius: 18px; margin-top: 18px; box-shadow: var(--shadow-sm); } .sp-agent .cav { width: 48px; height: 48px; } .sp-agent b { display: block; font-size: 16px; font-weight: 800; } .sp-agent small { display: block; font-size: 13px; color: var(--text-2); } .sp-agent .act-row { grid-column: 1 / -1; } .sp-agent .btn { height: 50px; border-radius: 14px; font-size: 16px; } .sp-agent .btn-primary { flex: 2 1 auto; } .sp-homes { display: grid; gap: 12px; margin-top: 20px; } .sp-home { background: var(--white); border: 1px solid var(--rule); border-radius: 18px; padding: 16px; display: grid; gap: 10px; box-shadow: var(--shadow-sm); } .sp-home h2.sl-name { font-size: 16.5px; } .sp-fact { font-size: 13px; color: var(--text-2); padding-top: 10px; border-top: 1px solid var(--rule-2); } .sp-map { margin-top: 18px; } .sp-map .rich { box-shadow: none; } .sp-foot { margin-top: 24px; font-size: 12.5px; color: var(--muted); line-height: 1.55; text-align: center; } .sp-off { min-height: 100dvh; display: grid; place-items: center; padding: 24px; border-top: 4px solid var(--teal); } .sp-off .card4 { max-width: 380px; text-align: center; justify-items: center; padding: 28px 22px; } .sp-off p { font-size: 17px; font-weight: 700; line-height: 1.45; } @media (prefers-reduced-motion: reduce) { .shake { animation: none; } .so-prog, .reading .bar, .skel span, .ans-skel span, .skel-line { animation: none; } } /* ---------- v4: "?" buttons, the Today tip, the feature video cards, the welcome and the Guide list */ .qhelp { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-inline-start: 8px; border-radius: 50%; border: 1.5px solid var(--rule); background: var(--white); color: var(--teal); font: 800 12.5px/1 var(--font); vertical-align: 2px; cursor: pointer; flex: none; letter-spacing: 0; text-transform: none; } .qhelp:hover { border-color: var(--seafoam); background: var(--mist); } .qhelp:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .qhelp.on-dark { background: var(--white-a8); border-color: var(--white-a25); color: var(--seafoam); } .sec-t .qhelp, .card4 > h2 .qhelp { width: 20px; height: 20px; font-size: 11.5px; vertical-align: 0; } .flow-title .qhelp { vertical-align: 1px; } .greet .qhelp { vertical-align: 6px; } .r-title-row { display: flex; align-items: center; gap: 4px; } .map-title .map-q { pointer-events: auto; box-shadow: var(--shadow-sm); margin-inline-start: 0; } .hello .qhelp { vertical-align: 8px; } .coach { position: fixed; z-index: 70; left: 50%; bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(420px, calc(100vw - 24px)); display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 12px 12px 14px; border-radius: 16px; background: var(--ink); color: var(--white); box-shadow: var(--shadow-lg); animation: rise .3s var(--ease) both; } .coach p { font-size: 14px; line-height: 1.45; } .coach-ic { color: var(--seafoam); display: grid; } .coach-ic svg { width: 20px; height: 20px; } .coach .btn-ghost { background: var(--white-a8); border-color: var(--white-a25); color: var(--white); } @media (min-width: 768px) { .coach { bottom: 24px; } } .homes-line { font-size: 15px; font-weight: 800; } .real-note { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); line-height: 1.45; padding: 10px 12px; border-radius: 12px; background: var(--sand-2); } .real-note svg { width: 17px; height: 17px; color: var(--teal); flex: none; margin-top: 1px; } .fa-list { display: grid; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; } .fa-row { display: grid; grid-template-columns: minmax(0, 1fr) 18px; gap: 2px 10px; align-items: center; padding: 11px 13px; border-bottom: 1px solid var(--rule-2); text-decoration: none; color: var(--ink); } .fa-row:last-child { border-bottom: 0; } a.fa-row:hover { background: var(--sand); } .fa-name { font-size: 16px; font-weight: 800; } .fa-sub { grid-column: 1; font-size: 13px; color: var(--text-2); } .fa-row > svg { grid-row: 1 / span 2; grid-column: 2; width: 17px; height: 17px; color: var(--muted); } /* the welcome */ .wz-top { gap: 10px; } .wz-top .flow-title { flex: none; } .wz-dots { flex: 1; display: flex; justify-content: center; gap: 5px; min-width: 0; } .wz-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); transition: width .25s var(--ease), background-color .25s; } .wz-dots i.done { background: var(--seafoam); } .wz-dots i.on { width: 20px; border-radius: 99px; background: var(--teal); } .wz-skip { padding: 0 8px; text-decoration: none; white-space: nowrap; font-size: 14.5px; } .wz-body { padding-bottom: 18px; } .wz-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; } .wz-who button { min-height: 132px; padding: 14px; border-radius: 18px; background: var(--white); border: 1.5px solid var(--rule); box-shadow: var(--shadow-sm); display: grid; align-content: start; justify-items: start; gap: 4px; text-align: start; color: var(--ink); } .wz-who button:hover { border-color: var(--seafoam); } .wz-who button[aria-pressed="true"] { border-color: var(--teal); background: var(--mist); box-shadow: 0 0 0 3px var(--teal-a14); } .wz-who .wz-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--mist); color: var(--teal); display: grid; place-items: center; margin-bottom: 8px; } .wz-who .wz-ic svg { width: 21px; height: 21px; } .wz-who b { font-size: 17px; font-weight: 800; } .wz-who small { font-size: 13px; color: var(--text-2); line-height: 1.35; } /* a video's poster, small, with a play mark */ .vthumb { position: relative; display: block; flex: none; width: 84px; aspect-ratio: 9 / 16; border: 0; padding: 0; border-radius: 12px; overflow: hidden; background: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm); } .vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .vthumb-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: var(--white); color: var(--teal); display: grid; place-items: center; font-size: 12px; padding-inline-start: 3px; box-shadow: 0 4px 14px -4px var(--ink-a38); } .vplay { font-size: 11px; } /* a feature's video card: a small bottom sheet on phones (above the tab bar, a flow's buttons or Ask's box), a corner card on desktop. Never modal: the page works behind it; a tap outside or a swipe puts it away. */ .fcard { position: fixed; z-index: 75; left: 8px; right: 8px; bottom: calc(var(--tabbar-h) + 8px + env(safe-area-inset-bottom, 0px)); max-width: 460px; margin-inline: auto; padding: 8px 14px 14px; border-radius: 22px; background: var(--white); color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--shadow-lg); touch-action: none; -webkit-user-select: none; user-select: none; animation: fc-in .3s var(--ease) backwards; } body:has(.shell4[data-chrome="flow"]) .fcard { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); } body:has(.shell4[data-chrome="detail"]) .fcard { bottom: calc(var(--tabbar-h) + 84px + env(safe-area-inset-bottom, 0px)); } body:has(.shell4[data-pane="ask"]) .fcard { bottom: calc(var(--tabbar-h) + 104px + env(safe-area-inset-bottom, 0px)); } body:has(.shell4.kb-open) .fcard { display: none; } @keyframes fc-in { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } } .fc-grip { width: 38px; height: 5px; border-radius: 99px; background: var(--rule); margin: 0 auto 10px; } .fc-line { padding: 9px 12px; border-radius: 12px; background: var(--mist); font-size: 14px; line-height: 1.45; margin-bottom: 12px; } .fc-main { display: flex; gap: 14px; align-items: center; } .fc-body { flex: 1; min-width: 0; } .fc-title { font-size: 17px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; } .fc-text { margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--text-2); } .fc-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .fc-acts .btn { height: 44px; border-radius: 12px; font-size: 14.5px; padding: 0 14px; gap: 7px; white-space: nowrap; } .fc-acts .fc-watch { flex: 1 1 auto; } @media (min-width: 768px) { .fcard, body:has(.shell4[data-chrome]) .fcard { left: auto; right: 24px; bottom: 24px; width: 400px; margin: 0; padding: 16px; } body:has(.shell4[data-chrome="flow"]) .fcard, body:has(.shell4[data-chrome="detail"]) .fcard { bottom: 100px; } body:has(.shell4[data-pane="ask"]) .fcard { bottom: 120px; } .fc-grip { display: none; } } /* the Guide (menu): every video in one list */ .glist { display: grid; gap: 12px; margin-top: 18px; } .gl-item { display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 18px; background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); } .gl-thumb { width: 92px; } .gl-pic { flex: none; width: 92px; aspect-ratio: 9 / 16; border-radius: 12px; background: var(--sand-2); display: grid; place-items: center; padding: 6px; } .gl-pic svg { width: 100%; height: auto; display: block; } .gl-body { flex: 1; min-width: 0; } .gl-title { font-size: 17px; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; } .gl-text { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); } .gl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .gl-acts .btn { height: 40px; gap: 6px; } /* the video player: full screen, captions on, close and next */ dialog.gv { border: 0; padding: 0; margin: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; background: var(--ink); color: var(--white); } dialog.gv::backdrop { background: var(--ink); } .gv-in { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; } .gv-top { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; } .gv-t { flex: 1; min-width: 0; display: grid; } .gv-t small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--seafoam); } .gv-top b { min-width: 0; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gv-n { font-size: 13px; color: var(--white-a72); white-space: nowrap; } .gv-x { width: 44px; height: 44px; border-radius: 12px; border: 0; background: var(--white-a8); color: var(--white); display: grid; place-items: center; } .gv-x svg { width: 22px; height: 22px; } .gv-stage { position: relative; min-height: 0; } /* centred and fitted inside the stage (percentages need the stage's box: a grid cell's auto row won't do) */ .gv-stage video { position: absolute; inset: 0; margin: auto; max-width: calc(100% - 16px); max-height: 100%; border-radius: 12px; background: var(--black); } .gv-cap { min-height: calc(2 * 1.4em + 10px); margin: 0 auto; padding: 8px 16px 0; max-width: 560px; width: 100%; font-size: 16px; font-weight: 600; line-height: 1.4; text-align: center; color: var(--white); text-wrap: balance; } .gv-nav { display: flex; gap: 8px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); justify-content: center; } .gv-nav .btn { flex: 1; max-width: 200px; } .gv-nav .btn-ghost { background: var(--white-a8); border-color: var(--white-a25); color: var(--white); } .gv-nav .btn svg { width: 16px; height: 16px; } /* sound stays off until the viewer asks for it */ .gv-sound { position: absolute; z-index: 2; top: 12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 99px; border: 0; background: var(--white); color: var(--ink); font: 700 15px/1 var(--font); white-space: nowrap; box-shadow: 0 8px 24px -8px var(--black); cursor: pointer; } .gv-sound[hidden] { display: none; } .gv-sound svg { color: var(--coral); } .gv-sound:focus-visible { outline: 3px solid var(--seafoam); outline-offset: 2px; } dialog.gv.is-single .gv-in { grid-template-rows: auto minmax(0, 1fr) auto; } dialog.gv.is-single .gv-in > :last-child { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } /* phones: five tabs, "Radar" fits; long labels shrink rather than overflow */ .tbar-tab > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .fcard, .coach { animation: none; } } .h2row .qhelp, .h2 .qhelp { display: inline-grid; width: 22px; height: 22px; border: 1.5px solid var(--rule); border-radius: 50%; background: var(--white); color: var(--teal); font-size: 12.5px; font-weight: 800; vertical-align: 3px; padding: 0; } .callout > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--teal); } /* clients list on phones: the match count and the opened badge sit under the brief, so names keep one line */ @media (max-width: 599px) { .crow { grid-template-columns: 44px minmax(0, 1fr); align-items: start; } .crow .cav { grid-row: span 3; } .crow .cr { grid-row: auto; grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; justify-items: start; gap: 6px 10px; margin-top: 4px; text-align: start; } } a.chip { text-decoration: none; } @media (max-width: 420px) { .composer-input::placeholder { font-size: 14.5px; } } .r-top .avatar { background: var(--white-a8); color: var(--seafoam); box-shadow: inset 0 0 0 1px var(--white-a25); } .r-title-row { justify-content: flex-start; flex-wrap: nowrap; } .r-title-row h1 { flex: 0 1 auto; min-width: 0; } .r-title-row .qhelp { align-self: flex-end; margin-bottom: 6px; } /* phones: the map's title row keeps the switch, the "?" and the menu on one line (the switch already says Sales or Rentals) */ @container map (max-width: 459px) { .map-title { flex-wrap: nowrap; } .map-title h1 { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; } } .ask4 .sidebar { overflow: hidden; } .ask4 .convs { overflow-x: hidden; } .coach { left: 12px; right: 12px; width: auto; max-width: 420px; margin-inline: auto; transform: none; } /* ===================================================================== v4.1: the investment score (score.js) */ /* Ahmed's bands: green 70-100 Good, yellow 40-69 Fair, red 0-39 Weak. The three differ in lightness as well as hue (dark teal-green, light amber, mid red) and always come with their word, so they read without colour vision. */ :root { --sc-green: #0E7C66; --sc-green-soft: #DDF1EA; --sc-green-ink: #0A5A4A; --sc-yellow: #E8A317; --sc-yellow-soft: #FCF1D6; --sc-yellow-ink: #6E4A05; --sc-red: #D4473A; --sc-red-soft: #FBE3DF; --sc-red-ink: #9E2F23; --sc-off: #A3B1B3; } .b-green { --sc-c: var(--sc-green); --sc-soft: var(--sc-green-soft); --sc-ink: var(--sc-green-ink); } .b-yellow { --sc-c: var(--sc-yellow); --sc-soft: var(--sc-yellow-soft); --sc-ink: var(--sc-yellow-ink); } .b-red { --sc-c: var(--sc-red); --sc-soft: var(--sc-red-soft); --sc-ink: var(--sc-red-ink); } .score4 { margin-top: 16px; background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-sm); display: grid; gap: 14px; min-width: 0; } .score4.is-skel { grid-template-columns: auto minmax(0, 1fr); align-items: center; } .score4.is-skel .sring { border-radius: 50%; border: 14px solid var(--sand-2); } .score4.is-err { display: block; font-size: 14px; color: var(--text-2); } .sc-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; min-width: 0; } .sring { position: relative; width: var(--ring); height: var(--ring); flex: none; } .sring svg { display: block; width: 100%; height: 100%; } .rg-track { fill: none; stroke: var(--sand-3); stroke-width: 14; } .rg-fill { fill: none; stroke: var(--sc-c, var(--sc-off)); stroke-width: 14; animation: ring-in .7s var(--ease) both; } @keyframes ring-in { from { stroke-dasharray: 0 400; } } .rg-n { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; line-height: 1; } .rg-n b { font-size: calc(var(--ring) * .3); font-weight: 800; color: var(--ink); letter-spacing: -.03em; } .rg-n small { font-size: max(11px, calc(var(--ring) * .1)); font-weight: 700; color: var(--muted); margin-top: 3px; } .sring.is-none .rg-n b { color: var(--muted); } .sc-txt { min-width: 0; } .sc-h { font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; margin: 0; } .sband { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px 0 11px; border-radius: 999px; font-weight: 800; font-size: 17px; margin-top: 8px; background: var(--sc-soft); color: var(--sc-ink); } .sband i { width: 11px; height: 11px; border-radius: 50%; background: var(--sc-c); flex: none; } .sband.is-none { background: var(--sand-2); color: var(--ink); font-size: 14.5px; line-height: 1.3; padding: 6px 12px; } .sc-past { font-size: 13.5px; font-weight: 600; color: var(--text-2); margin: 5px 0 0; } .sc-basis, .sc-why { font-size: 13.5px; color: var(--text-2); margin: 6px 0 0; line-height: 1.45; } /* v4.10: the score's unit-type switch: the type over its score in each segment, never wrapped; studio to 4+ beds fit a phone side by side, and if they ever don't, the switch scrolls sideways inside itself (never the page) */ .seg-score { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); justify-self: start; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; } .seg-score::-webkit-scrollbar { display: none; } .seg-score .seg-btn { flex-direction: column; justify-content: center; gap: 1px; height: auto; min-height: 46px; padding: 5px 14px; line-height: 1.15; white-space: nowrap; } .seg-score .seg-l { font-size: 12.5px; font-weight: 700; } .seg-score .num { font-size: 16px; font-weight: 800; color: var(--muted); } .seg-score .seg-btn[aria-pressed="true"] .num { color: var(--teal); } .seg-score .num.is-none { font-weight: 700; } @media (max-width: 860px) { .seg-score { justify-self: stretch; } .seg-score .seg-btn { padding: 5px 6px; } } /* 320 px phones: five types still side by side; the band pill wraps like the "Based on" chip under it instead of pushing past the card */ @media (max-width: 360px) { .seg-score .seg-btn { padding: 5px 2px; } .score4 .sband:not(.is-none) { white-space: normal; border-radius: 14px; padding: 6px 12px 6px 10px; line-height: 1.2; font-size: 15px; } } .sc-parts { min-width: 0; } .sbars { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .sbar { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr) 2.4em; gap: 4px 10px; align-items: center; } .sb-l { font-size: 13.5px; font-weight: 700; } .sb-t { height: 9px; border-radius: 5px; background: var(--sand-2); overflow: hidden; } .sb-t i { display: block; height: 100%; border-radius: 5px; background: var(--sc-c, var(--sc-off)); } .sbar.off { --sc-c: var(--sc-off); } .sbar.off .sb-l, .sbar.off .sb-n { color: var(--muted); } .sb-n { font-size: 14px; font-weight: 800; text-align: end; } .sb-r { grid-column: 1 / -1; font-size: 13px; color: var(--text-2); line-height: 1.4; } .sb-h { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 16px 0 9px; } .sc-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px 12px; flex-wrap: wrap; } .sc-foot .link-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; } .sc-foot .link-btn svg { width: 17px; height: 17px; } .sc-foot .src { margin: 0; } .sc-track { margin: 0; } .sc-card { margin-top: 10px; } .c4-score .sc-parts { margin-top: 2px; } .c4-score .sbar { grid-template-columns: minmax(0, 9em) minmax(0, 1fr) 2.2em; } .ms-bands { display: grid; gap: 8px; margin: 14px 0 6px; } .ms-bands > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ms-bands .sband { margin: 0; font-size: 14.5px; } .is-method h3 { font-size: 15px; font-weight: 800; margin: 18px 0 6px; } .ms-parts { margin: 0; display: grid; gap: 4px; } .ms-parts dt { font-weight: 800; font-size: 14px; margin-top: 6px; } .ms-parts dd { margin: 0; font-size: 14px; color: var(--text-2); line-height: 1.45; } @media (max-width: 400px) { .sc-top { gap: 12px; } .sbar { grid-template-columns: minmax(0, 8em) minmax(0, 1fr) 2.2em; } } @media (prefers-reduced-motion: reduce) { .rg-fill { animation: none; } } /* ===================================================================== v4.1: Verify (verify.js) */ .verify4 .d-sub { margin-top: 6px; } .vf-form { display: grid; gap: 10px; margin-top: 18px; } .vf-in input { font-size: 20px; font-weight: 700; letter-spacing: .02em; } .vf-card { margin-top: 16px; background: var(--white); border: 1.5px solid var(--rule); border-radius: 20px; padding: 18px 16px 16px; display: grid; gap: 12px; box-shadow: var(--shadow); animation: rise .35s var(--ease) both; min-width: 0; } .vf-card.is-valid { border-color: color-mix(in srgb, var(--teal) 45%, var(--rule)); } .vf-card.is-ended, .vf-card.is-not_found, .vf-card.is-not_listed { border-color: var(--rule); } .vf-card.is-msg { box-shadow: none; } .vf-head { display: flex; align-items: center; gap: 14px; } .vf-ic { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--white); } .vf-ic svg { width: 28px; height: 28px; stroke-width: 2.8; } .vf-ic.ok { background: var(--teal); } .vf-t { font-size: 25px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; margin: 2px 0 0; } .vf-t.small { font-size: 16px; line-height: 1.4; } .vf-t:focus { outline: none; } .vf-s { font-size: 15px; line-height: 1.5; margin: 0; } .vf-legend { margin-top: 26px; display: grid; gap: 12px; } .vf-legend .h2 { margin: 0; } .vf-lg { display: flex; gap: 12px; align-items: flex-start; } .vf-lg .vf-ic { width: 28px; height: 28px; margin-top: 1px; } .vf-lg .vf-ic svg { width: 16px; height: 16px; } .vf-lg p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); } .vf-lg b { display: block; color: var(--ink); } .vf-office { margin-top: 20px; background: var(--white); border: 1px solid var(--rule); border-radius: 14px; padding: 0 14px; } .vf-office summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-weight: 800; cursor: pointer; } .vf-office summary::-webkit-details-marker { display: none; } .vf-office summary svg { width: 18px; height: 18px; transition: transform .2s var(--ease); } .vf-office[open] summary svg { transform: rotate(180deg); } .vf-office .vf-form { margin: 0 0 14px; } /* ===================================================================== v4.1: tours (tour.js) */ .tour { position: fixed; inset: 0; z-index: 3000; } .tour-block { position: absolute; inset: 0; } .tour-spot { position: fixed; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 3px var(--seafoam), 0 0 0 9999px rgba(10, 42, 47, .64); transition: top .28s var(--ease), left .28s var(--ease), width .28s var(--ease), height .28s var(--ease); } .tour-spot::after { content: ""; position: absolute; inset: -3px; border-radius: 14px; box-shadow: 0 0 0 0 rgba(124, 197, 184, .7); animation: tour-pulse 1.8s ease-out infinite; } @keyframes tour-pulse { 0% { box-shadow: 0 0 0 0 rgba(124, 197, 184, .7); } 70%, 100% { box-shadow: 0 0 0 12px rgba(124, 197, 184, 0); } } /* 15 Oct 2026: never taller than the visible screen (tour.js sets --tour-maxh from it; 100svh is the height with every browser bar showing); the header (step, close) and the buttons stay put and the words scroll between them */ .tour-tip { position: fixed; background: var(--white); color: var(--ink); border-radius: 16px; padding: 14px 16px 12px; box-shadow: var(--shadow-lg); outline: none; transition: top .28s var(--ease), left .28s var(--ease); display: flex; flex-direction: column; box-sizing: border-box; max-height: var(--tour-maxh, calc(100vh - 24px)); } @supports (height: 100svh) { .tour-tip { max-height: min(var(--tour-maxh, 100svh), calc(100svh - 24px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); } } .tour-probe { position: fixed; top: 0; left: 0; width: 0; height: 100vh; height: 100svh; box-sizing: content-box; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); } .tour-head { position: relative; flex: none; min-height: 24px; padding-right: 36px; } .tour-close { position: absolute; top: -10px; right: -12px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 10px; background: transparent; color: var(--text-2); cursor: pointer; } .tour-close:hover { background: var(--sand-2); color: var(--ink); } .tour-close:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; } .tour-close svg { width: 18px; height: 18px; } .tour-body { position: relative; flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .tour-foot { position: relative; flex: none; } .tour-tip[data-side="over"] .tour-arrow { display: none; } .tour-arrow { position: absolute; width: 16px; height: 16px; background: var(--white); left: calc(var(--px, 30px) - 8px); transform: rotate(45deg); border-radius: 3px; } .tour-tip[data-side="below"] .tour-arrow { top: -7px; } .tour-tip[data-side="above"] .tour-arrow { bottom: -7px; } .tour-n { position: relative; font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--teal); margin: 0; } .tour-t { position: relative; font-size: 18px; font-weight: 800; margin: 3px 0 0; line-height: 1.25; } .tour-x { position: relative; font-size: 15px; line-height: 1.45; color: var(--text-2); margin: 5px 0 0; } .tour-dots { display: flex; gap: 6px; margin-top: 12px; } .tour-dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--rule-strong); transition: width .2s var(--ease); } .tour-dots i.on { width: 20px; background: var(--teal); } .tour-acts { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .tour-acts > span { flex: 1; } .tour-acts .btn { min-height: 40px; } .tour-skip { font-weight: 700; color: var(--muted); } .tour.still .tour-spot, .tour.still .tour-tip { transition: none; } .tour.still .tour-spot::after { animation: none; } @media (prefers-reduced-motion: reduce) { .tour-spot, .tour-tip, .tour-dots i { transition: none; } .tour-spot::after { animation: none; } } /* v4.1: a mini ring per part (score.js miniRings): 2 a row on phones, 3 from 640px; a tapped one opens across the row */ .mrings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } @media (min-width: 640px) { .mrings { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .page-building .mrings { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .mr { background: var(--sand); border: 1px solid var(--rule-2); border-radius: 14px; padding: 10px 10px 9px; min-width: 0; display: grid; align-content: start; gap: 7px; } .mr.is-open { grid-column: 1 / -1; background: var(--white); border-color: var(--rule); box-shadow: var(--shadow-sm); } .mr-btn { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; width: 100%; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ring chev" "txt txt"; gap: 7px 8px; border-radius: 10px; } .mr-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .mr-btn .sring { grid-area: ring; } .mr-chev { grid-area: chev; justify-self: end; align-self: start; color: var(--muted); } .mr-chev svg { width: 18px; height: 18px; transition: transform .2s var(--ease); } .mr.is-open .mr-chev svg { transform: rotate(180deg); } .mr-t { grid-area: txt; display: grid; gap: 3px; min-width: 0; } .mr.is-open .mr-btn { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ring txt chev"; align-items: center; gap: 12px; } .mr-l { font-size: 13.5px; font-weight: 800; line-height: 1.25; } .mr-w { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--sc-ink, var(--muted)); } .mr-w i { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-c, var(--sc-off)); flex: none; } .mr-nc { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .mr-r { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .mr.is-open .mr-r { display: block; -webkit-line-clamp: unset; font-size: 14px; color: var(--ink); } .mr-x { border-top: 1px solid var(--rule-2); padding-top: 6px; } .mr-xh { margin: 0 0 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); } .mr-x .frow { padding: 8px 0; } .mrings.is-compact .mr { padding: 8px; } .mrings.is-compact .mr-l { font-size: 12.5px; } .sring .rg-track, .sring .rg-fill { stroke-width: var(--sw, 14); } /* v4.3: the "Based on ..." label, the basis tag on each part, the muted "Not measurable here" ring */ .sc-based { margin: 6px 0 0; } .sbased { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 10px; font-size: 13px; font-weight: 800; line-height: 1.3; background: var(--mist); color: var(--teal); } .sbased i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; } .sbased.b-mixed { background: var(--sand-2); color: var(--ink); } .sbased.b-area { background: var(--sc-yellow-soft); color: var(--sc-yellow-ink); } /* v4.6: "Measured on 2 of 4 parts; the others count as average." next to the donut */ .sc-meas { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--text-2); line-height: 1.4; } .mr-tag { justify-self: start; display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 6px; border: 1px solid var(--rule); background: var(--white); font-size: 11px; font-weight: 800; letter-spacing: .03em; color: var(--text-2); white-space: nowrap; } .mr.is-nm { background: var(--white); border-style: dashed; } .mr.is-nm .mr-l, .mr.is-nm .mr-w { color: var(--muted); } .mr.is-nm .rg-track { stroke: var(--sand-2); } .sring.is-none .rg-none { font-size: max(11px, calc(var(--ring) * .1)); font-weight: 800; color: var(--muted); text-align: center; max-width: 70%; line-height: 1.2; } .tour.center .tour-block, .tour.lost .tour-block { background: rgba(10, 42, 47, .64); } .tour.center .tour-spot, .tour.lost .tour-spot { display: none; } .tour-tip[data-side="center"] .tour-arrow { display: none; } .sband:not(.is-none) { white-space: nowrap; } @media (max-width: 440px) { .score4 .sc-top > .sring { --ring: 108px !important; } .score4 .sc-top { gap: 14px; } .sband:not(.is-none) { font-size: 16px; } } /* ===================================================================== v4.2: charts in chat (charts.js) */ /* chart steps of the palette (validated: chroma, colour-blind separation and contrast on white all pass) */ :root { --chart-1: #008C84; --chart-2: #E05A3A; --chart-grid: #ECE7DE; } .cards-charts { display: grid; gap: 12px; margin-top: 12px; } .cards-charts:empty { display: none; } .md-rest { margin-top: 12px; } .ch { margin: 0; gap: 8px; } .ch figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; } .ch-t { font-size: 15px; font-weight: 800; line-height: 1.3; color: var(--ink); } .ch-u { font-size: 12px; font-weight: 700; color: var(--muted); } .ch-plot { position: relative; } .ch-plot svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; } .ch-grid { stroke: var(--chart-grid); stroke-width: 1; } .ch-tick { font-size: 10.5px; fill: var(--muted); font-family: var(--font); font-variant-numeric: tabular-nums; } .ch-tick.strong { fill: var(--ink); font-weight: 800; } .ch-end { font-size: 11.5px; font-weight: 800; fill: var(--ink); font-family: var(--font); font-variant-numeric: tabular-nums; } .ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .ch-wash { opacity: .1; } .ch-dot { stroke: var(--white); stroke-width: 2; } .ch-cross { stroke: var(--ink-a28); stroke-width: 1; } .ch-band { fill: color-mix(in srgb, var(--chart-1) 22%, transparent); } .ch-med { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; } .ch-mark { stroke: var(--teal); stroke-width: 2; stroke-dasharray: 0; } /* the asking/quoted price: teal, as the price strip and the PDF */ .ch-tip { position: absolute; top: -6px; z-index: 2; background: var(--ink); color: var(--white); border-radius: 10px; padding: 7px 10px; font-size: 12.5px; line-height: 1.4; pointer-events: none; display: grid; gap: 2px; box-shadow: var(--shadow); white-space: nowrap; } .ch-tip i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; box-shadow: 0 0 0 1.5px var(--white); } .ch-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; font-weight: 700; color: var(--text-2); } .ch-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; } .ch-bars { display: grid; gap: 10px; } .ch-row { display: grid; gap: 4px; } .ch-cat { font-size: 13px; font-weight: 700; color: var(--text-2); overflow-wrap: anywhere; } .ch-bar { display: flex; align-items: center; gap: 8px; min-height: 18px; } .ch-bar i { display: block; height: 14px; border-radius: 0 4px 4px 0; flex: none; max-width: calc(100% - 92px); } .ch-bar b { font-size: 13px; font-weight: 800; color: var(--ink); white-space: nowrap; } .ch-bar.none span { font-size: 12.5px; color: var(--muted); font-style: italic; } .ch-donut { display: flex; align-items: center; gap: 16px; } .ch-donut svg { width: 120px; height: 120px; flex: none; } .ch-track { fill: none; stroke: var(--mist-2); stroke-width: 14; } .ch-arc { fill: none; stroke: var(--chart-1); stroke-width: 14; stroke-linecap: butt; } .ch-cv { font-size: 24px; font-weight: 800; fill: var(--ink); font-family: var(--font); } .ch-cl { font-size: 10px; font-weight: 700; fill: var(--muted); font-family: var(--font); } .ch-dl { display: grid; gap: 8px; font-size: 13px; color: var(--text-2); min-width: 0; } .ch-dl span { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; } .ch-dl i { width: 12px; height: 12px; border-radius: 3px; } .ch-dl i.arc { background: var(--chart-1); } .ch-dl i.track { background: var(--mist-2); } .ch-dl b { color: var(--ink); font-weight: 800; } .ch-basis { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; } .ch-basis span { color: var(--muted); } /* ===================================================================== v4.2: Verify (verify.js) and the chat licence card */ .vf-search { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px; border: 1px solid var(--rule); border-radius: 15px; background: var(--white); } .vf-search:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-a18); } .vf-search svg { color: var(--muted); flex: none; } .vf-search input { flex: 1; min-width: 0; width: 100%; border: 0; outline: none; background: transparent; font-size: 18px; font-weight: 700; } .vf-search input::placeholder { color: var(--muted); font-weight: 600; font-size: 15.5px; } .vf-chips { display: flex; flex-wrap: wrap; gap: 6px; } .vf-chip { min-height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--rule); background: var(--white); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; } .vf-chip:hover { border-color: var(--seafoam); } .vf-chip.on { background: var(--ink); border-color: var(--ink); color: var(--white); } .vf-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .vf-ic.info { background: var(--sand-3); color: var(--ink); } .vf-asof { font-size: 12.5px; color: var(--muted); align-self: center; } .vf-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } .vf-back svg { width: 16px; height: 16px; } .vf-confirm { display: grid; gap: 6px; } .vf-confirm .btn svg { width: 18px; height: 18px; margin-right: 8px; } .vf-list { gap: 8px; } .vf-rows { list-style: none; margin: 0; padding: 0; display: grid; } .vf-rows li + li { border-top: 1px solid var(--rule-2); } .vf-row { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 18px; align-items: center; gap: 10px; padding: 12px 2px; background: none; border: 0; text-align: start; font: inherit; color: var(--ink); cursor: pointer; } .vf-row:hover .vf-rn { color: var(--teal); } .vf-row > svg { width: 16px; height: 16px; color: var(--muted); } .vf-row .gchip { min-height: 26px; font-size: 12.5px; } .vf-rn { font-weight: 800; font-size: 15px; min-width: 0; overflow-wrap: anywhere; } .vf-rn small { display: block; font-weight: 600; font-size: 12.5px; color: var(--muted); margin-top: 2px; } .lic-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.01em; } .lic-res { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .lic-res li { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--sand-2); border-radius: 12px; padding: 8px 10px; } .lic-res b { display: block; font-size: 14px; } .lic-res small { display: block; font-size: 12px; color: var(--muted); } .lic-res .gchip { min-height: 26px; font-size: 12px; flex: none; } .c4 .act-row .btn svg { width: 16px; height: 16px; margin-right: 6px; } /* admin: AI engine (v4.4) */ .ai-card { padding: 20px 18px; display: grid; gap: 16px; } .ai-card-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; } .ai-status { display: grid; gap: 6px; justify-items: start; } .ai-note { color: var(--text-2); font-size: 14px; } .ai-choice { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .ai-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--white); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); } .ai-opt:hover { border-color: var(--seafoam); } .ai-opt.is-on { border-color: var(--teal); background: var(--mist); } .ai-opt.is-off { cursor: not-allowed; background: var(--sand); } .ai-opt.is-off .ai-opt-title { color: var(--muted); } .ai-radio { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--teal); flex: none; } .ai-opt-main { display: grid; gap: 3px; min-width: 0; } .ai-opt-title { font-weight: 800; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ai-opt-sub { color: var(--text-2); font-size: 13.5px; } .ai-opt-pill { font-size: 12px; } .ai-cap { max-width: 420px; } .ai-cap-row { display: flex; gap: 8px; align-items: center; } .ai-cap-row input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--rule); background: var(--white); font: inherit; font-size: 16px; font-variant-numeric: tabular-nums; } .ai-cap-row input:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-a18); } .ai-h { font-size: 16px; font-weight: 800; margin-top: 26px; } .ai-sub { margin-bottom: 10px; } /* ===================================================================== v4.7: Same budget (same.js) */ /* Under the investment score on the building page, the full list (/same-budget) and the chat card: where a building ranks among every building selling at the same price. The ring is the same score donut (off-plan rows: the off-plan score). */ .sb4 { gap: 12px; } .sb4.is-skel { display: grid; } .sb-lead { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.35; color: var(--ink); } .sb-best { margin: 0; justify-self: start; display: inline-block; padding: 6px 11px; border-radius: 10px; background: var(--sand-2); color: var(--ink); font-size: 14.5px; font-weight: 800; line-height: 1.35; } .sb-best.yes { background: var(--sc-green-soft); color: var(--sc-green-ink); } /* the open building isn't in the list on screen (a shared or filtered key): why, and the way back to its own list */ .sb-out { display: grid; gap: 10px; justify-items: start; padding: 12px 14px; border-radius: 14px; background: var(--sand-2); border: 1px solid var(--rule); } .sb-out p { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.45; color: var(--ink); } .sb-out b { font-weight: 800; } .sb-own { white-space: normal; text-align: start; } .sb-page .sb-out { margin-top: 10px; } .sblist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; } .sbrow { min-width: 0; } .sb-a { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "rank ring main price"; gap: 4px 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 14px; background: var(--sand); color: inherit; text-decoration: none; min-width: 0; } .sb-a:hover { background: var(--white); border-color: var(--rule); } .sb-a:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .sb-a .sring { grid-area: ring; } .sbrow.is-me .sb-a { background: var(--mist); border-color: var(--teal-a35); } .sb-rank { grid-area: rank; font-size: 14px; font-weight: 800; color: var(--muted); min-width: 2.2em; font-variant-numeric: tabular-nums; } .sbrow.is-me .sb-rank { color: var(--teal); } .sb-main { grid-area: main; display: grid; gap: 2px; min-width: 0; } .sb-name { font-weight: 800; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; } .sb-you { display: inline-block; margin-inline-start: 4px; padding: 0 7px; border-radius: 6px; background: var(--teal); color: var(--white); font-size: 11px; font-weight: 800; letter-spacing: .03em; vertical-align: 1px; white-space: nowrap; } .sb-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; font-size: 13px; font-weight: 600; color: var(--text-2); } .sb-tag { display: inline-flex; align-items: center; min-height: 18px; padding: 0 6px; border: 1px solid var(--rule); border-radius: 6px; background: var(--white); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); } .sb-tag.off { background: var(--coral-soft); border-color: var(--coral-soft); color: var(--coral-ink); } .sb-facts { font-size: 12.5px; color: var(--muted); line-height: 1.35; } .sb-price { grid-area: price; display: grid; justify-items: end; text-align: end; } .sb-price b { font-size: 15px; font-weight: 800; white-space: nowrap; } .sb-price small { font-size: 11.5px; font-weight: 700; color: var(--muted); } .sb-filters { display: flex; flex-wrap: wrap; gap: 8px; } .sb-filters .seg { width: auto; } .sb-filters .seg-btn { flex: none; } .sb-types .pchip { min-height: 38px; font-size: 14px; padding: 0 13px; white-space: nowrap; } .sb-types .pchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); } .sb-all { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; } .sb-all svg { width: 16px; height: 16px; } .sb4 .sc-why, .sb4 .fine { margin: 0; } .sb-page .sb-filters { margin: 16px 0 12px; } .sb-page .sb-best { margin-top: 10px; } .sb-page .fine { margin: 12px 0 0; } .sblist.is-card .sb-a { padding: 8px 10px; } /* v4.9: the short list's heading under the building's own row when it is #1 ("Next best at this price") */ .sub-h.sb-next { margin: 2px 0 -4px; } @media (max-width: 560px) { .sb-a { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "rank ring main" "rank ring price"; } .sb-price { justify-items: start; text-align: start; display: flex; align-items: baseline; gap: 6px; } .sb-rank { min-width: 1.8em; font-size: 13px; } .sb-filters .seg { width: 100%; } .sb-filters .seg-btn { flex: 1; } } /* ----------------------------------------------------------- v4.11: Check a property */ /* Today: Ahmed's line right over the building box it points at; the box opens the three parts */ .propbox { margin-top: 14px; padding: 16px 16px 14px; border-radius: 20px; background: var(--white); border: 1px solid var(--rule); border-top: 4px solid var(--teal); box-shadow: var(--shadow); } .propbox-line { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.4; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; } .propbox-slot { margin-top: 12px; } .propbox-slot .so-in { height: 52px; } .propbox-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); } .propbox-hint span { color: var(--text-2); font-weight: 700; } /* v4.12: Today's one box. While it's empty and has the focus: Recent and the search's hint, inside its results panel */ .inline-res[data-idle] .so-h { padding: 8px 8px 4px; } .inline-res[data-idle] .so-hint { margin: 4px; padding: 8px; border: 0; background: none; font-size: 13.5px; color: var(--muted); } /* "Building name (or an area)" on one line down to 320 px (the box's own text stays 17 px, so no zoom on focus; the clear button keeps its room only once something is typed) */ @media (max-width: 359px) { .propbox-slot .so-in::placeholder { font-size: 15px; } .propbox-slot .so-in:placeholder-shown::-webkit-search-cancel-button { display: none; } } /* the tile's description: three short pieces, wrapping at the dots */ .job-d i { font-style: normal; } .job-d i:not(:last-child) { white-space: nowrap; } /* checker, Phase 1: on a 320 px phone "Investment score /100" is wider than the tile; there a piece may wrap inside */ @media (max-width: 365px) { .job-d i:not(:last-child) { white-space: normal; } } a.askchip { text-decoration: none; } /* the result: a header, then Price, Investment score, Same money (in that order), each a card with a numbered heading */ .pr-head { margin-top: 14px; } .pr-title { font-size: clamp(24px, 6.6vw, 30px); font-weight: 800; letter-spacing: -.026em; line-height: 1.15; margin: 6px 0 0; } .pr-title:focus { outline: none; } .pr-desc { margin: 6px 0 0; font-size: 13.5px; font-weight: 700; color: var(--text-2); line-height: 1.45; } .pparts { display: grid; gap: 12px; margin-top: 14px; min-width: 0; } .pp { background: var(--white); border: 1px solid var(--rule); border-radius: 20px; box-shadow: var(--shadow); padding: 16px; display: grid; gap: 14px; min-width: 0; animation: rise .35s var(--ease) both; } .pp-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; } .pp-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: var(--white); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } .pp-ht { min-width: 0; } .pp-h { margin: 3px 0 0; font-size: 19px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; color: var(--ink); } .pp-sub { margin: 3px 0 0; font-size: 13px; line-height: 1.4; color: var(--muted); } .pp-b { display: grid; gap: 14px; min-width: 0; } .pp-b > * { margin-top: 0; margin-bottom: 0; } .pp-b .kf { margin-top: 0; } .pp-ans { font-size: clamp(18px, 4.8vw, 21px); } .pp-wait { font-weight: 700; } .pp-reason { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.45; color: var(--ink); } .pp .sc-card { margin-top: 0; } .pp .score4.is-skel { margin: 0; box-shadow: none; border: 0; padding: 0; } .pp .sb4 { display: grid; gap: 12px; min-width: 0; } .pp-ask { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--mist); } .pp-ask-row { display: flex; gap: 8px; align-items: stretch; } .pp-ask .money { flex: 1; min-width: 0; height: 52px; } .pp-ask .money input { font-size: 19px; } .pp-ask .btn { height: 52px; flex: none; } /* the sticky bar's description: under the label from 768 px; on phones (the bar is tight) a tooltip, and read out */ .sact .btn.has-desc { flex-direction: column; gap: 2px; line-height: 1.15; } .sact-l { display: block; } .sact-d { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (min-width: 768px) { .propbox { padding: 20px 22px 18px; } .propbox-line { font-size: 17px; } .sact .btn.has-desc, .sact .has-desc + .btn-more { height: 62px; } .sact-d { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; font-size: 12.5px; font-weight: 600; color: var(--white-a86); } .pp { padding: 20px 22px; } } /* ------------------------------------------------------------------ v5 Part B: the rental score and the home score */ .rs-top { display: grid; gap: 10px; margin-top: 16px; } .rs-seg .seg-btn { min-height: 42px; gap: 7px; font-weight: 800; font-size: 14.5px; } .rs-seg .seg-btn svg { width: 17px; height: 17px; } .rs-purpose { gap: 6px; } .rs-purpose .pchip { min-height: 36px; font-size: 13.5px; padding: 0 13px; } .rs-box { display: grid; gap: 14px; min-width: 0; } .rs-box > .score4 { margin-top: 0; } .rs-top + .rs-box, .rs-top + .score4 { margin-top: 12px; } .rs-ask { gap: 12px; } .rs-ask .rs-ask-h { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.01em; } .rs-ask .rs-ask-p { margin: 0; color: var(--text-2); font-size: 14px; } .rs-ask .bigc, .rs-q .bigc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 0; } .rs-q .bigc.three { grid-template-columns: 1fr 1fr 1fr; } .rs-ask .bigc button, .rs-q .bigc button { min-height: 104px; border-radius: 18px; background: var(--white); border: 1.5px solid var(--rule); display: grid; place-items: center; align-content: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--ink); box-shadow: var(--shadow-sm); cursor: pointer; padding: 10px 6px; text-align: center; } .rs-ask .bigc button small, .rs-q .bigc button small { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-top: 2px; } .rs-ask .bigc button[aria-pressed="true"], .rs-q .bigc button[aria-pressed="true"] { border-color: var(--teal); background: var(--mist); box-shadow: 0 0 0 2px var(--teal) inset; } @media (max-width: 400px) { .rs-q .bigc.three { grid-template-columns: 1fr; } .rs-q .bigc.three button { min-height: 62px; grid-template-columns: auto 1fr; place-items: center start; text-align: start; padding: 10px 14px; } } .rs-q { gap: 12px; } .rs-steps { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .rs-step { font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--teal); } .rs-dots { display: inline-flex; align-items: center; gap: 5px; } .rs-dots i { width: 20px; height: 5px; border-radius: 99px; background: var(--rule); } .rs-dots i.on { background: var(--teal); } .rs-dots small { font-size: 12px; font-weight: 700; color: var(--muted); margin-inline-start: 4px; white-space: nowrap; } .rs-qh { margin: 2px 0 0; font-size: clamp(22px, 6.4vw, 26px); font-weight: 800; letter-spacing: -.022em; line-height: 1.16; text-wrap: balance; } .rs-qs { margin: 0; color: var(--text-2); font-size: 15px; } .rs-privacy { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-2); background: var(--mist); border-radius: 12px; padding: 9px 11px; margin: 0; } .rs-privacy svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--teal); } .rs-search { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 14px; border: 1.5px solid var(--rule); border-radius: 14px; background: var(--white); } .rs-search:focus-within { border-color: var(--teal); } .rs-search svg { width: 18px; height: 18px; color: var(--teal); flex: none; } .rs-search input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; flex: 1; min-width: 0; color: var(--ink); } .opts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .opts li { list-style: none; } .opt { width: 100%; display: grid; justify-items: start; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: start; padding: 11px 12px; border-radius: 14px; background: var(--white); border: 1.5px solid var(--rule); cursor: pointer; font-weight: 700; font-size: 15px; color: var(--ink); } .opt small { display: block; font-weight: 600; font-size: 12.5px; color: var(--muted); } .opt .dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--rule-strong); } .opt[aria-pressed="true"] { border-color: var(--teal); background: var(--mist); } .opt[aria-pressed="true"] .dot { border-color: var(--teal); background: var(--teal); box-shadow: inset 0 0 0 3px var(--white); } .opt.all { border-style: dashed; } .opt .rs-tag { font-size: 11.5px; font-weight: 800; color: var(--teal); white-space: nowrap; } .opts-h { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 4px 0 0; } .rs-scroll { max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding-inline-end: 2px; } .rs-foot { display: flex; gap: 8px; } .rs-foot .btn-primary { flex: 1; } .rs-me { justify-self: start; } .sc-h.rs-you { color: var(--teal); } .rs-why1 { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 8px 0 0; line-height: 1.4; } .rs-for { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; background: var(--mist); border-radius: 12px; padding: 9px 11px; font-size: 13.5px; font-weight: 700; color: var(--ink); margin: 0; } .rs-inv { display: flex; align-items: center; gap: 12px; background: var(--sand); border: 1px solid var(--rule-2); border-radius: 14px; padding: 10px 12px; } .rs-inv p { margin: 0; font-size: 14px; font-weight: 700; flex: 1; } .rs-inv p small { display: block; font-weight: 600; color: var(--text-2); font-size: 12.5px; } .rs-weights { font-size: 12.5px; color: var(--text-2); margin: 0; } .rs-honest { font-size: 12.5px; color: var(--text-2); margin: 0; line-height: 1.45; border-top: 1px solid var(--rule-2); padding-top: 10px; } .rs-locnote { margin: 0; } .rs-rings .mr-btn { position: relative; } .rs-w { position: absolute; top: 2px; inset-inline-end: 2px; font-size: 11px; font-weight: 800; color: var(--muted); } .mr.is-compact .mr-btn { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; } .rs-rings .mr.is-new { border-color: var(--seafoam); background: color-mix(in srgb, var(--mist) 60%, var(--white)); } .mr-tag.rs-approx { background: var(--sand-2); } /* v5.2: a long tag ("Typical traffic, for testing") wraps inside a narrow part card instead of running past its edge */ .rs-rings .mr-tag { max-width: 100%; white-space: normal; line-height: 1.25; padding-block: 2px; } .rs-row .rs-cm { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--teal); } .rs-row .rs-cm svg { width: 14px; height: 14px; flex: none; } .rs-chat { display: grid; gap: 12px; min-width: 0; } .rs-make { background: var(--mist); border-radius: 12px; padding: 10px 12px; display: grid; gap: 8px; } .rs-make p { margin: 0; font-size: 13.5px; color: var(--ink); } .rs-chat-live { display: grid; gap: 14px; } /* a long band word ("Good rental for Priya") wraps inside the card instead of running past it */ .rs-card .sband:not(.is-none), .rs-chat .sband:not(.is-none) { white-space: normal; max-width: 100%; min-height: 34px; height: auto; padding: 5px 12px 5px 10px; line-height: 1.22; border-radius: 14px; font-size: 16px; } /* v5.1: what the commute costs, the real monthly cost, the budget */ .rs-real { font-size: 14px; font-weight: 700; color: var(--teal); margin: 6px 0 0; line-height: 1.4; } .rs-over { font-size: 13.5px; font-weight: 800; color: var(--coral-ink); background: var(--coral-soft); border-radius: 10px; padding: 6px 10px; margin: 6px 0 0; line-height: 1.35; } .rs-row .rs-vs, .rs-chat .rs-vs { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-2); line-height: 1.35; } .sb-price .rs-month { color: var(--ink); font-weight: 800; } /* v5.2: the monthly household income ranges, the range a typed amount falls in, a row's share of the income */ .rs-incomes { display: flex; flex-wrap: wrap; gap: 6px; } .rs-incomes .pchip { min-height: 38px; font-size: 14px; padding: 0 14px; } .rs-iband { font-size: 13.5px; font-weight: 700; color: var(--teal); margin: 6px 0 0; line-height: 1.35; } .sb-price .rs-share { color: var(--text-2); font-weight: 700; } .rs-money .rs-aed, .rs-money .rs-yr { font-size: 14px; font-weight: 800; color: var(--muted); flex: none; } .rs-rings .frow { grid-template-columns: minmax(92px, auto) minmax(0, 1fr); } .rs-rings .frow .fl { overflow-wrap: normal; } .rs-rings .frow .fv { max-width: none; } @media (max-width: 560px) { .rs-row .sb-price { flex-wrap: wrap; row-gap: 0; } .rs-row .sb-price .rs-month, .rs-row .sb-price .rs-share { flex-basis: 100%; } } /* inside Check a property's part box: one card, not a card in a card */ .pp .rs-box > .score4 { border: 0; box-shadow: none; padding: 0; background: transparent; margin-top: 0; } .pp .rs-box { gap: 18px; } /* v5.6 (testing): Google Maps results. The attribution is Google's own rule (policies, 8 Oct 2026): the words "Google Maps", Roboto or a sans-serif fallback, weight 400, 12-16 px, #5E5E5E on a light background, one line, not translated. */ .gmaps-attr { font-family: Roboto, Arial, Helvetica, sans-serif; font-weight: 400; font-size: 12px; line-height: 16px; color: #5E5E5E; white-space: nowrap; letter-spacing: 0; text-transform: none; } .g-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 6px 0 0; } .g-line .g-mark { font-size: 12px; color: var(--text-2); line-height: 1.35; } .g-foot { padding-top: 8px; border-top: 1px solid var(--rule); } .rs-gnote { margin: 4px 0 0; } .rs-row .rs-gk, .rs-row .rs-typ { display: block; font-size: 12px; line-height: 1.35; color: var(--text-2); } .rs-row .rs-gk { font-weight: 700; } .rs-office { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); } .rs-office-l { font-weight: 800; font-size: 14px; } .rs-office-l small { font-weight: 600; color: var(--text-2); } .rs-office-row { display: flex; gap: 8px; align-items: center; min-width: 0; } .rs-office-row .rs-search { flex: 1 1 auto; min-width: 0; min-height: 46px; } .rs-office-row .rs-search input { min-width: 0; width: 100%; } .rs-office-row .btn { flex: none; } .rs-office-found, .rs-office-set { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text); overflow-wrap: anywhere; } .g-usage .g-usage-line { margin: 6px 0 0; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; } .g-usage .field-hint { display: block; margin-top: 8px; } /* v5.9 (14 Oct): the score cards' foot is one short line and "How it's calculated ›" (rental / home and investment alike); the full wording opens in a panel: a bottom sheet on phones, a dialog from 768 px, Esc / "Got it" / a tap outside close it */ .calc-foot { display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--rule-2); } .calc-line { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.45; } .calc-row { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; } .calc-link { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; font-size: 14px; font-weight: 800; text-decoration: none; } .calc-link:hover { text-decoration: underline; } .calc-link svg { width: 16px; height: 16px; } .is-calc .calc-sub { margin: 12px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); } .is-calc .note, .is-calc .fine, .is-calc .src { margin: 6px 0 0; } .is-calc .calc-w .frow { padding: 7px 0; font-size: 14px; } .calc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; } .calc-list b { color: var(--ink); font-weight: 800; } /* v5.10 (14 Oct): over 75% of the income the rental score is forced red ("Can't afford"); its reason is the affordability line (the money left over), shown right under the label in the band's red */ .rs-real.rs-cant { color: var(--sc-red-ink); background: var(--sc-red-soft); border-radius: 10px; padding: 6px 10px; font-weight: 800; overflow-wrap: anywhere; } /* v5.13 (14 Oct): the investor's "What's nearby" card under the investment score (building page, Check a property, the chat); the same rows as the rental score's daily life, the metro walk, the best school, the rush-hour drives to four hubs */ .nb4 { gap: 4px; } .nb4 .sc-h { margin: 0; } .nb4 .nb-h { margin: 12px 0 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .nb4 .nb-h .mr-tag { text-transform: none; letter-spacing: 0; } .nb4 .nb-approx { margin: 4px 0 0; } .nb4 .nb-rows .frow { grid-template-columns: minmax(96px, auto) minmax(0, 1fr); padding: 8px 0; font-size: 14px; } .nb4 .nb-rows .frow .fv { max-width: none; font-weight: 700; line-height: 1.4; } .nb4 .calc-foot { margin-top: 8px; } .nb4.is-compact { margin-top: 12px; box-shadow: none; padding: 12px 14px; } .nb4.is-card { display: grid; gap: 2px; } .c4-nearby .nb4.is-card .nb-h:first-child { margin-top: 4px; } /* ---------- v5.15 Feedback (/feedback, Ahmed 14 Oct 2026): 1-5 stars, what to improve, which part, OK to contact; the admin's list */ .fb4-slot { margin-top: 18px; } .fb4-form { gap: 22px; padding: 18px 16px; } .fb4-rate { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 8px; } .fb4-rate legend { padding: 0; margin-bottom: 8px; } .fb4-form .fb4-q { font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; } .fb4-q small { font-size: 13px; font-weight: 600; color: var(--muted); margin-inline-start: 6px; letter-spacing: 0; } .fb4-stars { display: flex; gap: 4px; } .fb4-stars label { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; cursor: pointer; color: var(--rule-strong); -webkit-tap-highlight-color: transparent; transition: color .12s ease, background-color .12s ease; } .fb4-stars label svg { width: 34px; height: 34px; stroke-width: 1.6; } .fb4-stars label.on { color: var(--coral); } .fb4-stars label.on svg { fill: currentColor; } .fb4-stars label:hover { background: var(--sand-2); } .fb4-stars input:focus-visible + label { outline: 2px solid var(--teal); outline-offset: 1px; } .fb4-rate[aria-invalid="true"] .fb4-stars label:not(.on) { color: var(--coral-ink); } .fb4-word { font-size: 14px; font-weight: 600; color: var(--text-2); min-height: 20px; } .fb4-count { text-align: end; } .fb4-count.is-near { color: var(--coral-ink); font-weight: 700; } .fb4-part { display: grid; gap: 10px; } .fb4-part .pchip { min-height: 40px; padding: 0 14px; font-size: 14px; } .fb4-check { display: flex; align-items: center; gap: 12px; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; } .fb4-check input { width: 22px; height: 22px; accent-color: var(--teal); flex: none; margin: 0; } .fb4-done { justify-items: start; padding: 22px 18px; } .fb4-done:focus { outline: none; } .fb4-done-ic { width: 52px; height: 52px; border-radius: 50%; background: var(--mist); color: var(--teal); display: grid; place-items: center; } .fb4-done-ic svg { width: 26px; height: 26px; stroke-width: 2.4; } .fb4-thanks { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 4px; } .fb4-done-actions { display: flex; gap: 10px; flex-wrap: wrap; } /* five stars in a row: the thank-you and the admin list */ .fb4-srow { display: inline-flex; gap: 1px; vertical-align: middle; } .fb4-srow i { display: inline-grid; color: var(--rule-strong); } .fb4-srow i svg { width: 16px; height: 16px; } .fb4-srow i.on { color: var(--coral); } .fb4-srow i.on svg { fill: currentColor; } .fb4-done-stars i svg { width: 22px; height: 22px; } /* admin: Feedback (newest first, the average and the count) */ .afb-sum { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 16px 18px; border-bottom: 1px solid var(--rule-2); } .afb-avg { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); line-height: 1; } .afb-sum-t { font-size: 14px; font-weight: 700; color: var(--text-2); } .afb-list { list-style: none; margin: 0; padding: 0; } .afb-item { padding: 14px 18px; border-bottom: 1px solid var(--rule-2); display: grid; gap: 8px; min-width: 0; } .afb-item:last-child { border-bottom: 0; } .afb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; } .afb-who { font-weight: 800; font-size: 15px; overflow-wrap: anywhere; } .afb-when { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; } .afb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .afb-tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--sand-2); color: var(--text-2); } .afb-tag svg { width: 13px; height: 13px; } .afb-tag.is-none, .afb-tag.is-no { background: none; border: 1px solid var(--rule); color: var(--muted); } .afb-tag.is-yes { background: var(--mist); color: var(--teal); } .afb-text { font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; color: var(--ink); } .afb-text.is-empty { color: var(--muted); font-style: italic; } /* the way in. Phones: a sixth bottom tab cut "Feedback" and squeezed the Ask pill at 320 px (dev-mock/feedback/0-trial-*), so the bar keeps five tabs and a small pill sits on its top edge, right side; the panes end above it (--fb-room), so it never covers anything; it hides with the bar (keyboard up, guided flows). Desktop: a tab in the top bar. Everywhere: the account menu. */ :root { --fb-room: 22px; } .fb-pill { display: none; } @media (max-width: 767px) { .shell4 { padding-bottom: calc(var(--tabbar-h) + var(--fb-room) + env(safe-area-inset-bottom, 0px)); } .shell4.kb-open, .shell4[data-chrome="flow"] { padding-bottom: 0; } .fb-pill { display: inline-flex; align-items: center; gap: 5px; position: absolute; inset-inline-end: 10px; top: calc(-1 * var(--fb-room) + 1px); height: 25px; padding: 0 11px 0 9px; border-radius: 999px; background: var(--white); border: 1px solid var(--rule); box-shadow: 0 2px 8px -4px var(--ink-a28); color: var(--teal); font-size: 12.5px; font-weight: 800; text-decoration: none; letter-spacing: -.005em; -webkit-tap-highlight-color: transparent; } .fb-pill svg { width: 14px; height: 14px; stroke-width: 2.2; } /* a bigger tap area than it looks (the pill stays small) */ .fb-pill::before { content: ""; position: absolute; inset: -9px -6px -2px; } .fb-pill:hover { border-color: var(--seafoam); } .fb-pill[aria-current="page"] { background: var(--teal); border-color: var(--teal); color: var(--white); } .fb-pill[aria-current="page"] svg { fill: currentColor; } .fb-pill:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .toast { bottom: calc(var(--tabbar-h) + var(--fb-room) + 16px + env(safe-area-inset-bottom, 0px)); } body:has(.shell4[data-chrome="detail"]) .toast { bottom: calc(var(--tabbar-h) + var(--fb-room) + 84px + env(safe-area-inset-bottom, 0px)); } } /* ---------- v6.1 (SPEC-v6.md e.1-e.4, e.8, e.9): account types. The client's bar has 3 tabs (Today · Ask · Map); the agent card on a client's Today with the WhatsApp button; the invite page's consent box and the Turnstile slot; "What I know about you" (sharing); the agent's account pill and block on Clients; Admin's type tags, agent invites and the audit list. */ @media (max-width: 767px) { .shell4.tabs-3 .tabbar { grid-template-columns: repeat(3, minmax(0, 1fr)); } .shell4.tabs-4 .tabbar { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .agentcard { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 12px; align-items: center; padding: 14px; margin-top: 16px; background: var(--white); border: 1px solid var(--rule); border-radius: 18px; box-shadow: var(--shadow-sm); min-width: 0; } .agentcard .ac-av { width: 48px; height: 48px; font-size: 16px; } .agentcard .ac-av.is-blank { background: var(--mist); color: var(--teal); } .cl-nudge { margin: 12px 0 0; } .ac-body { min-width: 0; } .ac-eb { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); } .ac-name { font-size: 16px; line-height: 1.35; font-weight: 600; color: var(--text-2); margin-top: 2px; overflow-wrap: anywhere; } .ac-name b { font-weight: 800; color: var(--ink); } .agentcard .ac-wa { grid-column: 1 / -1; margin-top: 10px; min-height: 46px; justify-content: center; } .agentcard .ac-wa span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ac-share { grid-column: 1 / -1; margin-top: 6px; font-size: 13px; color: var(--muted); } .ac-share a { color: var(--teal); font-weight: 800; text-decoration: none; display: inline-block; padding: 6px 2px; } .ac-share a:hover { text-decoration: underline; } .today-client .today-grid { display: grid; gap: 0; } .today-client .today-grid > .propbox { order: 1; } .today-client .today-grid > .askbox { order: 2; } .today-client .today-grid > .jobs { order: 3; } .jobs.jobs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .agentcard { grid-template-columns: 52px minmax(0, 1fr) auto; } .agentcard .ac-av { width: 52px; height: 52px; } .agentcard .ac-wa { grid-column: 3; grid-row: 1; margin-top: 0; } .ac-share { grid-column: 2 / -1; margin-top: 0; } .today-client .today-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; } .today-client .today-grid > .jobs { grid-column: 1 / -1; } .jobs.jobs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .auth-eb { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); margin-bottom: 8px; } .ts-slot { min-height: 65px; margin-top: 4px; } .ts-slot[hidden] { display: none; } /* checker, Phase 1: one column that never grows past the card (a wide child, like Turnstile's 300 px widget on a 320 px phone, used to widen every field and the button with it); the compact widget is picked for narrow slots (v6/turnstile.js) */ .auth-form { grid-template-columns: minmax(0, 1fr); } .ts-slot { max-width: 100%; } .consent-box { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: var(--mist); border: 1px solid var(--seafoam-mist-27); } .consent-h { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); } .consent-text { font-size: 14px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; } .consent-tick { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--ink); cursor: pointer; } .consent-tick input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; accent-color: var(--teal); } .share6 .sh-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: start; } .share6 h2 { font-size: 18px; font-weight: 800; letter-spacing: -.015em; overflow-wrap: anywhere; } .share6 .note { margin-top: 4px; } .switch6 { position: relative; width: 64px; height: 40px; border-radius: 999px; border: 0; padding: 0; background: var(--sand-3); cursor: pointer; flex: none; margin-top: 2px; transition: background-color .2s; } .switch6 .sw-knob { position: absolute; top: 4px; inset-inline-start: 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 3px var(--ink-a28); transition: transform .2s var(--ease); } .switch6[aria-checked="true"] { background: var(--teal); } .switch6[aria-checked="true"] .sw-knob { transform: translateX(24px); } .switch6[aria-checked="true"]:dir(rtl) .sw-knob { transform: translateX(-24px); } .switch6:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; } .sh-what summary { cursor: pointer; font-size: 14px; font-weight: 800; color: var(--teal); min-height: 40px; display: flex; align-items: center; } .sh-what .consent-text { margin-top: 6px; padding: 12px; border-radius: 12px; background: var(--sand-2); } #agent { scroll-margin-top: 64px; } #agent .agentcard { margin-top: 18px; } .page-aboutme .secs, .page-aboutme .share6 { margin-top: 12px; } .apill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; } .apill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .apill.grey { background: var(--sand-2); color: var(--muted); } .apill.teal { background: var(--mist); color: var(--teal); } .apill.ink { background: var(--ink); color: var(--white); } .acct6 { background: var(--white); border: 1px solid var(--rule); border-radius: 18px; padding: 16px; display: grid; gap: 12px; margin-top: 18px; box-shadow: var(--shadow-sm); } .acct6 .h2 { font-size: 16px; } .acct-line { font-size: 15px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; } .acct6 .act-row { display: flex; flex-wrap: wrap; gap: 8px; } .acct6 .act-row .btn { flex: 1 1 150px; min-height: 44px; } .inv-make { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .inv-first { height: 42px; min-width: 0; flex: 1 1 180px; border-radius: 12px; border: 1px solid var(--rule); padding: 0 12px; font: inherit; font-size: 15px; background: var(--white); color: var(--ink); } .inv-first:focus { outline: 2px solid var(--teal); outline-offset: 1px; } .tag.tag-client { border-color: var(--rule); color: var(--text-2); margin-inline-start: 0; } .tag.tag-agent { margin-inline-start: 0; } .tag.tag-admin { margin-inline-start: 0; background: var(--ink); border-color: var(--ink); color: var(--white); } .audit-filters { display: flex; flex-wrap: wrap; gap: 10px; } .audit-more { margin: 12px auto 4px; display: flex; } .audit-table td { overflow-wrap: anywhere; } /* v6.1.1: the join page's one Terms tick, and the Terms and Conditions page (/terms) */ .terms-agree { display: grid; gap: 6px; } .terms-agree .consent-tick { padding-top: 4px; } .terms-agree a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; } .auth-terms .auth-main { max-width: 600px; } .terms-ver { margin-top: 8px; font-size: 13.5px; color: var(--muted); } .terms-sec { margin-top: 22px; } .terms-sec h2 { font-size: 17px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; color: var(--ink); } .terms-sec p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; } .terms-card > .btn { margin-top: 28px; min-height: 48px; } /* ---------- v6.2 (SPEC-v6.md e.3-e.6): the questions (/questions: a full-screen flow like /check, the explanation always under the question, big buttons for one answer and chips with Done for several), "Finish your answers" on Today and on "What I know about you", the grouped answers with Edit and Delete, "What Sara told us" on an agent's client page, and the building page's note for an agent's flipped view. */ .q6 .flow-top { gap: 4px; } .q6 .flow-top .icon-btn { width: 44px; height: 44px; } .q6-skip { min-height: 40px; padding: 0 12px; font-size: 15px; font-weight: 800; flex: none; } .q6-prog { width: 100%; max-width: 580px; margin: 0 auto; padding: 2px 16px 0; display: flex; align-items: center; gap: 10px; } .q6-prog small { font-size: 12.5px; font-weight: 800; color: var(--muted); white-space: nowrap; } .q6-dots { flex: 1; display: flex; gap: 4px; min-width: 0; } .q6-dots i { flex: 1; max-width: 28px; height: 5px; border-radius: 99px; background: var(--rule); } .q6-dots i.on { background: var(--teal); } .q6-body .flow-q { margin-top: 12px; overflow-wrap: anywhere; } .q6-help { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--muted); } .q6-opts { display: grid; gap: 8px; margin-top: 20px; } .q6-opts.q6-none { margin-top: 14px; } .q6-opt { width: 100%; min-height: 58px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: center; text-align: start; padding: 12px 16px; border-radius: 16px; background: var(--white); border: 1.5px solid var(--rule); box-shadow: var(--shadow-sm); font: inherit; font-size: 16.5px; font-weight: 800; color: var(--ink); cursor: pointer; } .q6-opt small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--muted); } .q6-opt:hover:not(:disabled) { border-color: var(--seafoam); } .q6-opt:disabled { opacity: .6; cursor: default; } .q6-opt .q6-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--rule-strong, var(--rule)); } .q6-opt[aria-pressed="true"] { border-color: var(--teal); background: var(--mist); } .q6-opt[aria-pressed="true"] .q6-dot { border-color: var(--teal); background: var(--teal); box-shadow: inset 0 0 0 3px var(--white); } .q6-opt.is-none { border-style: dashed; box-shadow: none; background: transparent; } .q6-opt.is-none[aria-pressed="true"] { background: var(--mist); } .q6-chips { margin-top: 20px; } .q6-hint { margin-top: 10px; font-size: 13.5px; color: var(--muted); min-height: 1em; } .q6-sel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .q6-chip { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; max-width: 100%; padding-inline-start: 14px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 14.5px; font-weight: 700; } .q6-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .q6-x { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; background: transparent; color: inherit; border-radius: 50%; cursor: pointer; } .q6-x svg { width: 15px; height: 15px; } .q6-search { margin-top: 14px; } .q6-search .inline-search { width: 100%; } .q6-sub { margin-top: 22px; font-size: 15px; font-weight: 800; color: var(--ink); } .q6-sub small { font-size: 12.5px; font-weight: 700; color: var(--muted); margin-inline-start: 6px; } .q6-months { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 20px; } .q6-months .pchip { padding: 0 6px; min-width: 0; } .q6-label { display: block; margin-top: 20px; font-size: 13px; font-weight: 800; color: var(--muted); } .q6-select { width: 100%; min-height: 50px; margin-top: 6px; padding: 0 12px; border-radius: 14px; border: 1.5px solid var(--rule); background: var(--white); font: inherit; font-size: 16px; color: var(--ink); } .q6-or { margin-top: 18px; } .q6-typed { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 8px; align-items: center; } .q6-typed .btn { min-height: 50px; border-radius: 14px; } /* checker, Phase 2: on a phone the typed box gets the full width and its button goes under it (the income box's "e.g. 25,000" was cut at 375 px and left a sliver to type in at 320 px) */ @media (max-width: 480px) { .q6-typed { grid-template-columns: minmax(0, 1fr); } } .q6-filter { margin-top: 18px; } .q6-hubs { margin-top: 10px; } .q6-err { margin-top: 14px; } .q6-end { display: grid; justify-items: start; align-content: center; gap: 4px; padding-top: 40px; } .q6-tick { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--teal); } .q6-tick svg { width: 28px; height: 28px; } .q6-end-foot { flex-wrap: wrap; } .q6-end-foot .btn { flex: 1 1 200px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .finish6 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: var(--mist); border: 1px solid var(--mist-2); } .finish6-h { font-size: 16px; font-weight: 800; color: var(--ink); } .finish6-p { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; } .finish6-go { min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .finish6-list { margin-top: 18px; } @media (max-width: 420px) { .finish6 { grid-template-columns: minmax(0, 1fr); } .finish6-go { width: 100%; } } .knows6 { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; gap: 10px; align-items: center; margin-top: 16px; min-height: 52px; padding: 8px 14px; border-radius: 16px; background: var(--white); border: 1px solid var(--rule); color: var(--text-2); font-size: 14.5px; text-decoration: none; box-shadow: var(--shadow-sm); } .knows6:hover { border-color: var(--seafoam); } .knows6-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--teal); } .knows6-ic svg { width: 18px; height: 18px; } .knows6 b { color: var(--ink); font-weight: 800; } .knows6-go { color: var(--teal); font-weight: 800; } .knows6 > svg { width: 18px; height: 18px; color: var(--muted); } .about6 { margin-top: 26px; } .about6-h { font-size: 20px; font-weight: 800; letter-spacing: -.015em; } .about6 > .note { margin-top: 6px; } .ans6-group { margin-top: 18px; } .ans6-gh { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); } .ans6-line { margin-top: 4px; font-size: 13.5px; line-height: 1.45; color: var(--muted); } .ans6-list { list-style: none; margin: 8px 0 0; padding: 0; background: var(--white); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-sm); overflow: hidden; } .ans6-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 12px 14px; } .ans6-row + .ans6-row { border-top: 1px solid var(--rule-2); } .ans6-main { display: grid; gap: 2px; min-width: 0; } .ans6-l { font-size: 12.5px; font-weight: 700; color: var(--muted); } .ans6-v { font-size: 15.5px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; } .ans6-v.is-none { font-weight: 600; color: var(--muted); } .ans6-tag { justify-self: start; margin-top: 3px; padding: 2px 8px; border-radius: 999px; background: var(--sand-2); font-size: 12px; font-weight: 700; color: var(--text-2); } .ans6-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .ans6-acts .btn { min-height: 40px; height: auto; text-decoration: none; display: inline-flex; align-items: center; } @media (max-width: 359px) { .ans6-row { grid-template-columns: minmax(0, 1fr); } .ans6-acts { justify-content: flex-start; } } .del6 { margin-top: 26px; } .del6 h2 { font-size: 16px; font-weight: 800; } .btn-danger-ghost { color: var(--coral-ink); border-color: var(--coral-soft); justify-self: start; min-height: 44px; } .btn-danger-ghost svg { width: 16px; height: 16px; } .told6 { margin-top: 6px; } .told6 > .note { margin-top: 4px; } .told6-go { margin-top: 14px; min-height: 46px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .told6-go svg { width: 16px; height: 16px; } .rs-flip { margin-top: 16px; font-size: 13.5px; color: var(--text-2); } .rs-flip .link-btn { min-height: 40px; } /* v6.5: "Cash you'd need" (an estimate: the cash upfront and the monthly payment) and the move-in lists */ .cash-box { min-width: 0; } .cash-box:not(:first-child) { margin-top: 14px; } .c4 .cash-box, .pp-b .cash-box { margin-top: 4px; } .cash6 { background: var(--white); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow-sm); display: grid; gap: 10px; min-width: 0; } .cash6.is-compact { border: 0; box-shadow: none; padding: 0; } .cash-eb { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); } .cash-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 15px; color: var(--text-2); } .cash-big b { font-size: 27px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--ink); } .cash-month { font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.45; } .cash-or, .cash-pre { font-size: 14px; color: var(--text-2); line-height: 1.5; } .cash-ctl { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; } .cash-seg .seg-btn { min-height: 40px; } .cash-years { display: flex; flex-wrap: wrap; gap: 6px; } .cash-years .pchip { min-height: 40px; min-width: 0; padding: 0 12px; font-size: 14px; } .cash-nums .nums-b { display: grid; gap: 8px; } .cash-price, .cash-loan { font-size: 13.5px; color: var(--text-2); line-height: 1.5; overflow-wrap: anywhere; } .cash-total { border-top: 2px solid var(--ink); } .cash-total .fl { font-weight: 800; color: var(--ink); } .cash-foot { font-size: 12.5px; color: var(--muted); line-height: 1.5; } .cash-foot .link-btn { font-size: 12.5px; font-weight: 800; min-height: 40px; } .cash-ask-h { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; } .cash-q { display: grid; gap: 6px; padding-top: 4px; } .cash-qt { font-size: 15.5px; font-weight: 800; color: var(--ink); line-height: 1.35; } .cash-qh { font-size: 14px; color: var(--muted); line-height: 1.45; } .cash-opts { display: flex; flex-wrap: wrap; gap: 8px; } .cash-opts .pchip { min-height: 44px; } .cash6.is-skel { min-height: 110px; } .cash-lines, .cash-src { display: grid; gap: 6px; padding-inline-start: 18px; margin: 6px 0 10px; font-size: 14px; line-height: 1.5; color: var(--text-2); } .cash-src a { color: var(--teal); overflow-wrap: anywhere; } .c4-mortgage .cash6 { gap: 8px; } .mi-bline { display: grid; gap: 6px; margin-top: 12px; } .mi-bline p { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--mist); font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; } .mi-bline svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--teal); } .mi-bline a { font-weight: 800; color: var(--teal); display: inline-block; padding: 11px 0; } .page-movein .d-head { margin-bottom: 6px; } .mi-for { font-size: 13px; font-weight: 800; color: var(--teal); } .mi-month { font-size: 15px; color: var(--text-2); margin-top: 10px; } .mi-month a { color: var(--teal); font-weight: 800; display: inline-block; padding: 8px 2px; } .mi-pick { display: grid; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 800; color: var(--muted); } .mi-pick select { min-height: 44px; border-radius: 12px; border: 1px solid var(--rule); background: var(--white); padding: 0 12px; font: inherit; font-size: 15.5px; font-weight: 700; color: var(--ink); max-width: 100%; } .mi-ctl { display: grid; gap: 10px; margin-top: 12px; min-width: 0; } .mi-beds { display: flex; flex-wrap: wrap; gap: 6px; } .mi-beds .pchip { min-height: 40px; min-width: 0; padding: 0 12px; font-size: 14px; } .mi-where { max-width: 100%; } .mi-where .seg-btn { min-height: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; } .mi-filt { margin-top: 10px; font-size: 13.5px; color: var(--text-2); line-height: 1.5; } .mi-sec { margin-top: 22px; display: grid; gap: 8px; min-width: 0; } .mi-secsub { font-size: 13.5px; color: var(--muted); } .mi-line { font-size: 15px; line-height: 1.5; color: var(--ink); } .mi-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; } .mi-a { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 12px; align-items: start; padding: 12px; border-radius: 14px; background: var(--white); border: 1px solid var(--rule); text-decoration: none; color: inherit; min-width: 0; } .mi-a:hover { border-color: var(--seafoam); } .mi-main { display: grid; gap: 3px; min-width: 0; } .mi-name { font-size: 15.5px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; } .mi-sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; } .mi-lead { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.4; } .mi-free { font-size: 14.5px; font-weight: 800; color: var(--teal); } .mi-facts { font-size: 13px; color: var(--text-2); line-height: 1.45; overflow-wrap: anywhere; } .mi-a .gchips { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; } .mi-go { color: var(--muted); align-self: center; } .mi-go svg { width: 18px; height: 18px; } .mi-go svg:dir(rtl) { transform: scaleX(-1); } .mi-list.is-card .mi-a { padding: 10px; } .c4 .c4-title { font-size: 15.5px; font-weight: 800; color: var(--ink); } .mi-more { justify-self: start; min-height: 44px; } .cash-off { display: grid; gap: 4px; padding-inline-start: 18px; font-size: 13.5px; line-height: 1.45; color: var(--text-2); } @media (min-width: 768px) { .mi-ctl { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .mi-where .seg-btn { max-width: 280px; } } /* ---------- v6.6 (SPEC-v6.md l, e.6, k.6): two buildings side by side (/compare), the header's Compare, Same budget's ticks, the chat's compare card, a client's Compare tile. Phone: a sticky header with both names and rings, each row = its label, then the two values 50/50 with the tick beside the better one. Desktop: a 760 px table, label · A · B. */ .dbar-act { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--rule); background: var(--white); color: var(--teal); font-size: 14px; font-weight: 800; text-decoration: none; white-space: nowrap; flex: none; } .dbar-act:hover { border-color: var(--seafoam); } .dbar-act:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; } .dbar-act svg { width: 18px; height: 18px; flex: none; } .dbar .dt + .dbar-act { margin-inline-start: auto; } .cmp-page .d-title { overflow-wrap: anywhere; } .cmp-vs { font-size: .62em; font-weight: 700; color: var(--seafoam); margin: 0 .2em; vertical-align: .12em; } .cmp-switch { display: grid; gap: 10px; margin-top: 14px; } .cmp-switch .seg-wide { max-width: 420px; } .cmp-switch .seg-btn { min-height: 40px; } .cmp-beds { margin-top: 12px; } .cmp-beds .pchip, .cmp-purpose .pchip { min-height: 40px; font-size: 14px; padding: 0 14px; } .cmp-verdict { font-size: clamp(18px, 4.8vw, 22px); } .cmp-for { margin-top: 8px; } .cmp { margin-top: 18px; display: grid; min-width: 0; } .cmp-head { position: sticky; top: 52px; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 10px 8px; margin: 0 -8px; background: var(--sand); border-bottom: 1px solid var(--rule); } .cmp-hl { display: none; } .cmp-hb { display: flex; align-items: center; gap: 8px; min-width: 0; } .cmp-hn { display: grid; min-width: 0; } .cmp-hn a { font-size: 14.5px; font-weight: 800; line-height: 1.2; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; } .cmp-hn a:hover { text-decoration: underline; } .cmp-hn small { font-size: 12px; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; } .cmp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; padding: 11px 0; border-bottom: 1px solid var(--rule-2); min-width: 0; } .cmp-l { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .cmp-v { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 4px 8px; margin: 0 -8px; border-radius: 10px; } .cmp-v.is-better { background: var(--mist); } .cmp-t { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .cmp-t b { font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .cmp-v.is-better .cmp-t b { color: var(--teal); } .cmp-v.is-na .cmp-t b { color: var(--muted); } .cmp-v small { font-size: 12.5px; color: var(--text-2); line-height: 1.35; overflow-wrap: anywhere; } .cmp-v.is-na small { color: var(--muted); } .cmp-tk { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--teal); color: var(--white); flex: none; } .cmp-tk svg { width: 14px; height: 14px; stroke-width: 2.6; } .cmp-open { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--teal); cursor: pointer; } .cmp-open:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 6px; } .cmp-chev svg { width: 16px; height: 16px; transition: transform .15s; } .cmp-open[aria-expanded="true"] .cmp-chev svg { transform: rotate(180deg); } .cmp-part { background: var(--sand-2); padding-left: 10px; padding-right: 10px; border-bottom-color: var(--rule); } .cmp-part .cmp-l { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text-2); } .cmp-mr { display: inline-flex; align-items: center; gap: 8px; } .cmp-mr .cmp-na { font-size: 16px; color: var(--muted); } .cmp-how { margin-top: 14px; } .cmp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 18px; } .cmp-pdf { min-height: 46px; } .cmp-pdf .spinner { width: 16px; height: 16px; border-width: 2px; } .cmp-change { margin-top: 10px; } .cmp-change .link-btn { min-height: 40px; text-align: start; } .cmp-search { margin-top: 14px; } .cmp-sugg { margin-top: 18px; } .cmp-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; } .cmp-pickrow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 56px; padding: 8px 12px; border: 1px solid var(--rule-2); border-radius: 14px; background: var(--white); color: inherit; text-decoration: none; } .cmp-pickrow:hover { border-color: var(--seafoam); } .cmp-pickrow span { display: grid; min-width: 0; } .cmp-pickrow b { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; } .cmp-pickrow small { font-size: 12.5px; color: var(--muted); } .cmp-pickrow > svg { width: 18px; height: 18px; color: var(--muted); } .cmp-saved, .cmp-recent { margin-top: 8px; } .cmp-saved .pchip, .cmp-recent .pchip { min-height: 40px; font-size: 14px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Same budget's tick boxes and the sticky "Compare these 2" bar */ .sbrow.has-tick { display: flex; align-items: center; gap: 6px; } .sbrow.has-tick > .sb-a { flex: 1; min-width: 0; } .cmp-tickbox { position: relative; display: grid; place-items: center; width: 40px; height: 40px; flex: none; cursor: pointer; } .cmp-tickbox input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .cmp-tickbox span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--rule); background: var(--white); color: transparent; } .cmp-tickbox span svg { width: 15px; height: 15px; stroke-width: 2.8; } .cmp-tickbox input:checked + span { background: var(--teal); border-color: var(--teal); color: var(--white); } .cmp-tickbox input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; } .sb-tickhint { margin-top: 2px; } .cmp-bar { position: sticky; bottom: 12px; z-index: 6; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px 12px; margin: 14px auto 0; max-width: 728px; padding: 10px 12px; border-radius: 16px; background: var(--ink); color: var(--white); box-shadow: var(--shadow-lg); } .cmp-bar[hidden] { display: none; } .cmp-bar-t { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; min-width: 0; font-size: 14px; font-weight: 700; flex: 1 1 auto; } .cmp-bar .btn { flex: none; } .cmp-bar .btn { min-height: 44px; } .cmp-bar .btn svg { width: 18px; height: 18px; } .cmp-bar .link-btn { color: var(--white); min-height: 40px; } /* the chat's compare card (15 Oct 2026): the two sides, the verdict, each key row as its label then the two values side by side (50/50, in the order of the sides above), the tick on the better one; Open full comparison and the PDF */ .cc-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; margin: 10px 0 6px; } .cc-side { display: flex; align-items: center; gap: 8px; min-width: 0; } .cc-side .sring { flex: none; } .cc-who { display: grid; min-width: 0; } .cc-name { font-size: 15px; font-weight: 800; line-height: 1.25; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; overflow-wrap: anywhere; padding: 4px 0; } .cc-name:hover { text-decoration-color: currentColor; } .cc-name:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 4px; } .cc-who small { font-size: 12px; color: var(--muted); line-height: 1.3; overflow-wrap: anywhere; } .cc-who .cc-note { color: var(--text-2); } .cc-vs { font-size: 13px; font-weight: 800; color: var(--seafoam); } .cc-verdict { margin-top: 4px; } .cc-rows { display: grid; margin: 10px 0 4px; border-top: 1px solid var(--rule-2); min-width: 0; } .cc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-2); min-width: 0; } .cc-l { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .cc-v { display: grid; gap: 2px; align-content: start; min-width: 0; padding: 4px 8px; margin: 0 -4px; border-radius: 10px; } .cc-v.is-better { background: var(--mist); } .cc-t { display: inline-flex; align-items: center; gap: 6px; min-width: 0; } .cc-t b { font-size: 15.5px; font-weight: 800; color: var(--ink); line-height: 1.25; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .cc-v.is-better .cc-t b { color: var(--teal); } .cc-v.is-na .cc-t b { color: var(--muted); } .cc-v small { font-size: 12.5px; color: var(--text-2); line-height: 1.35; overflow-wrap: anywhere; } .cc-v .cmp-tk { width: 20px; height: 20px; } .cc-v .cmp-tk svg { width: 13px; height: 13px; } .cc-how { margin-top: 8px; } .cc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; } .cc-open, .cc-pdf { min-height: 44px; } .cc-open svg, .cc-pdf svg { width: 18px; height: 18px; } .cc-pdf .spinner { width: 16px; height: 16px; border-width: 2px; } .cc-pdf-err { flex-basis: 100%; font-size: 13px; color: var(--text-2); } /* checker, Phase 6: on a narrow card (a 320 px phone) each side stacks its ring above the name, so names wrap between words ("Park Central"), never inside one ("Centr al") */ .c4-compare { container: cc / inline-size; } @container cc (max-width: 300px) { .cc-top { align-items: start; } .cc-vs { align-self: center; } .cc-side { flex-direction: column; align-items: flex-start; gap: 4px; } .cc-name, .cc-who small { overflow-wrap: break-word; } } @media (min-width: 768px) { .cmp { max-width: 760px; } .cmp-head { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; } .cmp-hl { display: block; } .cmp-row { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 4px 16px; align-items: start; } .cmp-l { grid-column: auto; padding-top: 6px; } .cmp-part { padding-left: 12px; padding-right: 12px; } } /* ---------- v6.3 (SPEC-v6.md g.3, e.4, e.6-e.8, m.5, h.4): the "Remember this?" card under a chat answer, the notes ("Things you told me"; the agent's "In Sara's words" / "Your notes for Sara"), Saved (the tab, the page, Today's block, the building page's Save), the agent's AI summary and activity, and the "Filtered for you" line over a suggestion list. */ .mem6 { border: 1.5px solid var(--seafoam); background: var(--mist); } .mem6-q { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-text, var(--teal)); } .mem6-l { margin-top: 6px; font-size: 16px; font-weight: 800; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; } .mem6-note { margin-top: 6px; font-size: 13.5px; line-height: 1.4; color: var(--text-2); } .mem6-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; } .mem6-acts .btn { min-height: 44px; } .mem6-acts .link-btn { min-height: 40px; padding: 0 6px; } .mem6-done { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--teal-text, var(--teal)); } .mem6-done svg { width: 18px; height: 18px; } .mem6 .fine { margin-top: 8px; } .notes6 { margin-top: 22px; } .notes6 > .note { margin-top: 4px; } .notes6-list { list-style: none; margin: 10px 0 12px; padding: 0; border: 1px solid var(--rule); border-radius: 16px; background: var(--white); } .note6 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 12px 14px; } .note6 + .note6 { border-top: 1px solid var(--rule-2); } .note6-t { grid-column: 1; font-size: 15px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; } .note6-m { grid-column: 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); } .note6 .ans6-acts { grid-column: 2; grid-row: 1 / span 2; } @media (max-width: 359px) { .note6 { grid-template-columns: minmax(0, 1fr); } .note6 .ans6-acts { grid-column: 1; grid-row: auto; justify-content: flex-start; } } .dbar-act.save6.is-on { color: var(--teal-text, var(--teal)); } .dbar-act.save6.is-on svg { fill: currentColor; } .sv6-list { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--rule); border-radius: 16px; background: var(--white); } .sv6-row { display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) 44px; gap: 10px; align-items: center; padding: 10px 8px 10px 10px; } .sv6-row + .sv6-row { border-top: 1px solid var(--rule-2); } .sv6-row .cmp-tickbox { margin: 0; } .sv6-gap { width: 34px; } .sv6-ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--teal); } .sv6-main { min-width: 0; display: grid; gap: 2px; text-decoration: none; color: inherit; min-height: 44px; align-content: center; } .sv6-name { font-size: 15.5px; font-weight: 800; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sv6-sub { font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sv6-x { width: 44px; height: 44px; } .sv6-empty { margin-top: 18px; } .sv6-today { margin-top: 22px; } .sv6-today .sv6-row { grid-template-columns: 0 40px minmax(0, 1fr); padding-inline-start: 4px; } .sv6-today .sv6-gap { width: 0; } .sum6, .act6 { margin-top: 18px; padding: 16px; border-radius: 18px; background: var(--white); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); } .sum6-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sum6-h .link-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 800; } .sum6-h .link-btn svg { width: 16px; height: 16px; } .sum6-sub { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--muted); } .sum6-head { margin-top: 12px; font-size: 18px; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; } .sum6-grid { display: grid; gap: 12px; margin-top: 12px; } .sum6-l ul { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; font-size: 14.5px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; } .sum6-l a { color: var(--teal-text, var(--teal)); font-weight: 700; } .sum6-ask { margin-top: 12px; font-size: 14px; color: var(--text-2); } .sum6-ask span { font-weight: 800; color: var(--ink); } .sum6-ask a { display: inline-block; min-height: 32px; line-height: 32px; font-weight: 700; color: var(--teal-text, var(--teal)); } .sum6-next { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--mist); font-size: 14.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; } .act6-facts { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--text-2); } .act6-tl { margin-top: 14px; } .act6-tl summary { min-height: 44px; display: flex; align-items: center; font-weight: 800; color: var(--teal-text, var(--teal)); cursor: pointer; } .act6-day { margin-top: 10px; } .act6-day ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; } .act6-day li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; color: var(--text-2); overflow-wrap: anywhere; } .act6-day li a { color: var(--ink); font-weight: 700; } .act6-ic { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--mist); color: var(--teal); } .act6-ic svg { width: 14px; height: 14px; } @media (min-width: 768px) { .sum6-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------- v6.4 (SPEC-v6.md h.1-h.6, e.6): "Your score" (an investor's own weighting, the tested score one tap away), the personal filters' line over Same budget / Same rent / shortlists, the person's tags, plots, offices and whole buildings */ .yours4 .sc-h.rs-you { color: var(--teal); } .yr-std { margin: 6px 0 0; font-size: 13.5px; font-weight: 700; color: var(--text-2); line-height: 1.45; } .yr-std .link-btn { display: inline-flex; align-items: center; min-height: 40px; vertical-align: middle; font-size: 13.5px; font-weight: 800; } /* the personal band pill ("Fair investment for you") wraps inside the card like the rental card's */ .yours4 .sband:not(.is-none), .sc-card .sband:not(.is-none) { white-space: normal; max-width: 100%; height: auto; min-height: 34px; padding: 5px 12px 5px 10px; line-height: 1.22; border-radius: 14px; } .yr-w { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; } .yr-w b { color: var(--ink); font-weight: 800; } .yours4 + .score4 { margin-top: 10px; } .yw-tbl td.r, .yw-tbl th.r { white-space: nowrap; } .pf-bar { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--mist); font-size: 13.5px; line-height: 1.5; color: var(--ink); min-width: 0; } .pf-bar p { margin: 0; overflow-wrap: anywhere; } .pf-bar.is-off { background: var(--sand-2); color: var(--text-2); } .pf-rank { font-weight: 800; } .pf-acts { display: flex; flex-wrap: wrap; gap: 0 16px; } .pf-bar .link-btn { min-height: 40px; font-size: 13.5px; font-weight: 800; justify-self: start; } .pf-line { margin: 4px 0 8px; } .badge.yours-tag { background: var(--teal-soft, var(--mist)); color: var(--teal); } .ot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .ot-row { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--white); font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.45; overflow-wrap: anywhere; } .ot-row.is-few { font-weight: 600; color: var(--text-2); background: var(--sand-2); border-color: transparent; } .ot-sub { font-size: 12.5px; font-weight: 600; color: var(--muted); } /* v6.7 (SPEC-v6.md k.4, k.5): the quick-question card under a chat answer, and the score badge on list rows */ .qc7 { border: 1.5px solid var(--seafoam); background: var(--mist); } .qc7-eb { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-text, var(--teal)); } .qc7-q { margin-top: 6px; font-size: 16px; font-weight: 800; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; } .qc7-h { margin-top: 4px; font-size: 13.5px; line-height: 1.4; color: var(--text-2); } .qc7-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .qc7-opts .pchip { min-height: 44px; min-width: 0; padding: 0 14px; font-size: 14.5px; } .qc7-opts .pchip[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: var(--white); } .qc7-opts .pchip.is-none { border-style: dashed; } .qc7-save { margin-top: 10px; min-height: 44px; } .qc7-more { display: inline-flex; margin-top: 10px; min-height: 40px; align-items: center; } .qc7-later { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; } .qc7-later .link-btn { min-height: 40px; padding: 0 4px; font-size: 14px; } .qc7-done { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-weight: 800; color: var(--teal-text, var(--teal)); overflow-wrap: anywhere; } .qc7-done svg { width: 18px; height: 18px; flex: none; } .qc7-done.is-muted { font-weight: 700; color: var(--text-2); } .qc7-done a { min-height: 40px; display: inline-flex; align-items: center; } .bdg6 { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 12px; font-weight: 800; color: var(--text-2); white-space: nowrap; } .bdg6 .sring { flex: none; } .bdg6 .rg-n b { font-size: 11px; } .sl-top .bdg6 { margin-left: auto; flex-direction: column; gap: 2px; font-size: 10.5px; text-align: center; } .sb-bdg { display: block; margin-top: 4px; } .pf-acts .pf-water { min-height: 40px; min-width: 0; padding: 0 14px; font-size: 14px; margin-top: 6px; } .pf-acts .pf-water[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: var(--white); } /* checker, Phase 7: Admin > AI engine > Switches (the kill switches) */ .sw-list { display: grid; gap: 0; } .sw-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); } .sw-row:first-child { border-top: 0; padding-top: 0; } .sw-main { display: grid; gap: 3px; min-width: 0; } .sw-label { font-weight: 800; font-size: 15px; } .sw-help { color: var(--text-2); font-size: 13.5px; overflow-wrap: anywhere; } .sw-when { color: var(--muted); font-size: 12.5px; } .sw-row.is-off .sw-label::after { content: " · off"; color: var(--coral-ink); font-weight: 700; } /* checker, Phase 7: the chat cards that now show by default (the rental / home card, the shortlist's rows) get 40 px tap targets */ .rs-chat .btn-sm, .sl-actions .btn-sm { height: auto; min-height: 40px; } /* 18 Oct 2026 (Carys couldn't add a client): the Clients page leads with "+ Invite a client"; a pending invite can be sent again or cancelled from its row; the invite link's Copy / WhatsApp / share block */ .cl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .cl-acts .btn { min-height: 48px; } .cl-acts .btn-primary { flex: 1 1 220px; max-width: 360px; } .cl-acts .btn svg, .cl-empty .btn svg, .crow-acts .btn svg, .inv-ready .btn svg { width: 18px; height: 18px; flex: none; } .cl-empty { margin-top: 14px; padding: 36px 20px; background: var(--white); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-sm); } .crow-w { border-bottom: 1px solid var(--rule-2); } .crow-w:last-child { border-bottom: 0; } .crow-w .crow { border-bottom: 0; } .crow-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 0 14px 14px 70px; } .crow-until { font-size: 12.5px; font-weight: 600; color: var(--muted); } .crow-btns { display: flex; flex-wrap: wrap; gap: 8px; } .crow-acts .btn-sm { height: auto; min-height: 40px; } .apill.amber { background: var(--sc-yellow-soft); color: var(--amber-ink); } .inv-ready { display: grid; gap: 10px; margin-top: 14px; } .acct6 .inv-ready { margin-top: 0; } .inv-ready .urlbox .btn { flex: none; } .inv-ready .fine { overflow-wrap: anywhere; } @media (max-width: 599px) { .crow-acts { padding-left: 14px; } } /* ===================================================================== 19 Oct 2026: usage (the AI question and PDF limits) */ /* v6/usage.js. Quiet while there's plenty left (seafoam on mist), amber from 80% used, coral at the limit; text stays in the ink colours (no coral or yellow text: AA), the colour lives in the bars and dots. */ .u-box { width: 100%; max-width: var(--col); margin: 0 auto 6px; display: flex; justify-content: flex-end; } .u-box[hidden] { display: none; } .u-meter { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 2px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color .15s ease, color .15s ease; } .u-meter:hover, .u-meter:focus-visible { background: var(--white-a60); color: var(--ink); } .u-meter b { font-weight: 800; color: var(--text-2); font-variant-numeric: tabular-nums; } .u-meter.t-warn, .u-meter.t-warn b { color: var(--sc-yellow-ink); } .u-track { position: relative; width: 44px; height: 4px; border-radius: 99px; background: var(--mist-2); overflow: hidden; flex: none; } .u-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: inherit; background: var(--seafoam); transition: width .4s var(--ease); } .t-warn .u-fill { background: var(--sc-yellow); } .t-full .u-fill { background: var(--coral); } @media (max-width: 340px) { .u-long { display: none; } } /* the soft banner: 3 or fewer left */ .u-near { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--sc-yellow-soft); border-radius: 14px; background: color-mix(in srgb, var(--sc-yellow-soft) 55%, var(--white)); color: var(--ink); font: inherit; font-size: 13.5px; line-height: 1.4; text-align: start; cursor: pointer; } .u-near b { font-weight: 800; } .u-near:hover, .u-near:focus-visible { border-color: var(--sc-yellow); } .u-near-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc-yellow); flex: none; } .u-near > span:nth-child(2) { flex: 1; min-width: 0; } .u-near-more { flex: none; font-size: 12.5px; font-weight: 700; color: var(--teal); } /* the card in place of the chat box at the limit */ .u-full { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 18px; background: var(--white); box-shadow: var(--shadow); } .u-full-ic { width: 36px; height: 36px; border-radius: 11px; background: var(--mist); color: var(--teal); display: grid; place-items: center; flex: none; } .u-full-b { flex: 1; min-width: 0; } .u-full-h { font-size: 15px; font-weight: 800; color: var(--ink); } .u-full-s { font-size: 13.5px; line-height: 1.45; color: var(--text-2); margin-top: 3px; } .u-full-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .u-full-act .btn-sm { height: auto; min-height: 40px; } .chat.is-empty .u-box { order: 1; } /* the Usage sheet */ .u-rows { display: grid; gap: 18px; margin-top: 16px; } .u-row, .u-mini { display: grid; gap: 7px; } .u-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .u-label { font-size: 14.5px; font-weight: 800; color: var(--ink); } .u-pct { font-size: 13px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; } .u-bar { position: relative; height: 8px; border-radius: 99px; background: var(--mist); overflow: hidden; } .u-row.t-ok .u-fill, .u-mini.t-ok .u-fill { background: var(--teal); } .u-line { font-size: 13px; color: var(--text-2); line-height: 1.45; } /* a 40 px tall tap area that doesn't push the line apart */ .u-reset { display: inline-block; border: 0; padding: 11px 2px; margin: -11px -2px; background: none; font: inherit; color: var(--teal); font-weight: 700; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; } .u-row.t-none .u-pct { color: var(--muted); } .u-row-pdf { padding-top: 14px; border-top: 1px solid var(--rule-2); } .u-foot { margin-top: 14px; font-size: 12px; color: var(--muted); line-height: 1.45; } .u-mini { margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: var(--sand-2); } .u-mini .u-label { font-size: 13.5px; } .u-mini .u-bar { height: 6px; background: var(--white); } /* Admin > People: the limits per type and one person's own */ .lim-panel { margin-bottom: 14px; } .lim-body { padding: 16px 18px; display: grid; gap: 12px; } .lim-h { font-size: 16px; font-weight: 800; } .lim-head .section-sub { margin-top: 4px; } .lim-row { display: grid; grid-template-columns: minmax(110px, 160px) 1fr auto; gap: 12px; align-items: end; padding-top: 12px; border-top: 1px solid var(--rule-2); } .lim-name { display: grid; gap: 2px; align-self: center; } .lim-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .lim-fields-col { grid-template-columns: 1fr; margin-top: 14px; } .lim-field { display: grid; gap: 4px; } .lim-l { font-size: 12.5px; font-weight: 700; color: var(--text-2); } .lim-in { height: 40px; padding: 0 10px; border: 1px solid var(--rule); border-radius: 10px; background: var(--white); font: inherit; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 0; } .lim-in:focus-visible { outline: none; border-color: var(--seafoam); box-shadow: 0 0 0 3px var(--seafoam-a28); } .lim-net { line-height: 1.5; } .cell-usage .tag { margin-top: 2px; } @media (max-width: 767px) { .lim-row { grid-template-columns: 1fr; } .lim-row .btn { justify-self: start; min-height: 40px; } } /* ===================================================================== 19 Oct 2026: sign-up, sign-in by email or phone */ /* views/signup.js and views/auth.js: first and last name side by side, the phone's country code beside the number, "Forgot password?", the links between sign-in and sign-up, an agent's sign-up link card; the Clients page's sign-up link block. */ .auth-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 339px) { .auth-row2 { grid-template-columns: minmax(0, 1fr); gap: 16px; } } .input-row { display: flex; gap: 8px; min-width: 0; } .input-row .input-wrap { flex: 1; min-width: 0; } .cc-select { flex: none; width: 124px; height: 48px; padding: 0 28px 0 12px; border-radius: var(--r); border: 1px solid var(--rule); background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233F5A5E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; font: inherit; font-size: 16px; color: var(--ink); appearance: none; -webkit-appearance: none; text-overflow: ellipsis; cursor: pointer; } .cc-select:hover { border-color: var(--rule-strong); } .cc-select:focus-visible { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-a18); } .auth-forgot { justify-self: end; display: inline-flex; align-items: center; min-height: 40px; margin: -6px 0 -10px; font-size: 14px; font-weight: 700; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; } .auth-alt { margin-top: 18px; text-align: center; font-size: 15px; color: var(--text-2); } .auth-alt a { display: inline-block; padding: 8px 2px; color: var(--teal); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } .auth-codeway { margin-top: 12px; } .auth-codeway .btn { min-height: 48px; } .auth-slot > .auth-card + .auth-card { margin-top: 16px; } .auth-card > .btn + .btn { margin-top: 10px; } .auth-note-left { text-align: left; margin-top: 14px; font-size: 13.5px; } .form-error a { display: inline-block; padding: 6px 0; color: var(--ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } .fe-links { display: block; margin-top: 4px; } @media (max-width: 359px) { .cc-select { width: 100px; padding-right: 24px; background-position: right 8px center; } } .ref-agent { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--mist); border: 1px solid var(--seafoam-mist-27); } .ref-av { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--teal); color: var(--white); font-weight: 800; font-size: 15px; letter-spacing: .02em; } .ref-who { display: grid; gap: 2px; min-width: 0; } .ref-who b { font-size: 16.5px; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; } .ref-role { font-size: 13.5px; color: var(--text-2); overflow-wrap: anywhere; } .ref-line { margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink); } /* the agent's sign-up link on the Clients page, under "+ Invite a client" */ .reflink { margin-top: 14px; padding: 16px; display: grid; gap: 10px; background: var(--white); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow-sm); } .reflink-h { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; letter-spacing: -.01em; } .reflink-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex: none; } .reflink-p { margin-top: -6px; font-size: 14px; line-height: 1.45; color: var(--text-2); } .reflink .urlbox .btn { flex: none; min-height: 46px; } .reflink-acts { display: flex; flex-wrap: wrap; gap: 8px; } .reflink-acts .btn { flex: 1 1 180px; min-height: 44px; } .reflink .btn svg { width: 18px; height: 18px; flex: none; } .cell-ref { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }