/* the hidden attribute must beat any class that sets display (ship-check law, 08-28) */ [hidden]{display:none !important} /* ============================================================================ rimuru.css — the ONE shared design system for tools.cooperbeitman.com Brand: Hub Realty navy + white + signature blue + gold accent. Themes: light default, dark via prefers-color-scheme AND [data-theme] override (a manual toggle stamps data-theme on and must win in both directions). ========================================================================== */ /* ---- tokens: LIGHT (default) --------------------------------------------- 2026-07-20 Beauty Mandate retoken: the ground is PAPER, not fridge. Warm off-white canvas, warm hairlines, ink navy, ONE brass attention accent. Law: design/HIVE-UI-STANDARD.md Article III. TV boards and public pages do not include this file — their palettes are untouched. 2026-07-21 Brand restore (Cooper verdict A): the retoken above collapsed --brand into a plain alias of --text and muted --accent/--gold until the company's own colors disappeared. Restored here from the verified source — commit 2ec2d54 ("Board wears the hubrealty.com brand") read navy #0a1628 / navy-light #1a2c45 / electric blue #4a90c2 / gold #c9a34a straight off the live hubrealty.com site. Applied ONLY to identity tokens (brand, accent, gold) — the warm paper ground and ink ladder from the Beauty Mandate stand. Every value below still clears WCAG AA 4.5:1 where it is used as text (verified; see design-proofs/BRAND-OPS.md) — full site vividness (e.g. true gold #c9a34a, true electric #4a90c2) was NOT restored where it would have failed contrast on the paper ground. */ :root { --bg: #faf8f4; /* warm paper — the page canvas */ --bg-2: #f2eee6; /* warm fill, one notch below paper */ --surface: #ffffff; /* the earned raised/working surface */ --surface-2: #fffdfaee; --text: #1c2a3a; /* ink navy */ --muted: #5b6472; /* warm-gray secondary */ --dim: #8a8577; /* warm fine print */ --line: #e6e1d8; /* warm hairline */ --line-2: #d5cdc0; --brand: #1a2c45; /* Hub Realty navy-light (site-verified) — an identity color, distinct from body ink */ --brand-strong: #0a1628; /* Hub Realty navy (site-verified exact hex) */ --brand-ink: #ffffff; --accent: #2f6e96; /* Hub Realty signature blue — links / interactive (restored pre-Beauty-Mandate value) */ --accent-2: #3775a2; /* same hue as the site's electric blue #4a90c2, darkened to clear AA text contrast (the retoken's #5b83ab did not) */ --accent-soft: #eaf1f7; /* pale tint of the restored blue — was an off-brand warm sage (#eef0ea), now matches the accent family */ --gold: #916924; /* richer brand gold — the max saturation that still clears AA 4.5:1 as text on paper; true site gold #c9a34a fails at ~2.9:1 */ --ok: #2e6b46; --warn: #9a6d24; --danger:#a8352f; --gate: #916924; /* approval-card brass, matched to the restored gold */ --gate-ink: #7d5a1f; /* darker brass for brass-on-paper TEXT that must clear full AA — the confirm-card "this writes to our books" line. #916924 on --bg-2 is only 4.27:1 (sub-AA); #7d5a1f is 5.41:1. Dark mode keeps --gate (#d4b06a passes). */ --serif: Georgia, 'Times New Roman', serif; /* the editorial voice */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --fs-0:12px; --fs-1:13.5px; --fs-2:15px; --fs-3:17px; --fs-4:21px; --fs-5:28px; --fs-6:38px; --shadow-sm: 0 1px 2px rgba(42,41,36,.05), 0 2px 8px rgba(42,41,36,.04); --shadow-md: 0 4px 14px rgba(42,41,36,.07), 0 12px 30px rgba(42,41,36,.06); --shadow-lg: 0 18px 50px rgba(42,41,36,.12); --ease: cubic-bezier(.2,.6,.2,1); --font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; color-scheme: light; } /* ---- tokens: DARK (system pref) ------------------------------------------ Dark is ELEVATION, not inversion (Article III.6): warm charcoal base — never blue slate — with raised surfaces LIGHTER than the base, desaturated accents, off-white warm text. 2026-07-21 Brand restore: --brand was literally aliased to --gold (both #c8b088) — brass and brand identity had collapsed into one color, which also breaks Article III's "brass means exactly one thing" rule. --brand is now a desaturated Hub Realty blue (its own identity, distinct from the brass "look here" accent); --gold is warmed back toward the site's true gold. Both re-verified for AA contrast against --bg and --surface. 2026-07-27 Dark-red desaturation fix (loop3-regressions): --danger was #d4756c — same ~5° red hue as the fix below, but low saturation/chroma (diff between max/min channel only 104) reads as pale salmon on warm charcoal, breaking the "one red statement per page must survive the theme" rule (aged-debt headline on /ledger overview + collections). Replaced with #ef4444 — true red, high chroma (diff 171), same family, still clears AA: 4.71:1 against --bg #191817, 4.10:1 against --surface #262421 (the aged headline itself sits directly on --bg with no card, and its text is 34px/38px serif — WCAG large-text 3:1 is cleared with room either way). Computed + verified live via Playwright, see design-proofs/DARK-RED-FIX.md. 2026-07-31 Dark --dim AA fix (cross-cutting dark sweep): --dim was #7d776c — 3.48:1 on --surface / 3.99:1 on --bg, sub-AA everywhere it carries real fine-print (dates, source stamps, the 'Ctrl K' hint, nav group labels .gt, nav counts .n — all resolve to --dim). Raised to #979184: 4.94:1 on --surface, 5.31:1 on --bg — clears AA on every dark background at once, still distinctly quieter than --muted #a8a195 (6.04:1). One token bump. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#191817; --bg-2:#211f1c; --surface:#262421; --surface-2:#2b2825cc; --text:#ece8e0; --muted:#a8a195; --dim:#979184; --line:#37342e; --line-2:#4a463e; --brand:#6f9bc4; --brand-strong:#7ba8d4; --brand-ink:#0d1826; --accent:#8fb0d1; --accent-2:#adc6de; --accent-soft:#26292c; --gold:#d4b06a; --ok:#6fb08a; --warn:#c99f56; --danger:#ef4444; --gate:#d4b06a; --gate-ink:#d4b06a; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 6px 20px rgba(0,0,0,.36); --shadow-lg: 0 22px 60px rgba(0,0,0,.5); color-scheme: dark; } } /* ---- tokens: DARK (manual override, wins over system) -------------------- */ :root[data-theme="dark"] { --bg:#191817; --bg-2:#211f1c; --surface:#262421; --surface-2:#2b2825cc; --text:#ece8e0; --muted:#a8a195; --dim:#979184; --line:#37342e; --line-2:#4a463e; --brand:#6f9bc4; --brand-strong:#7ba8d4; --brand-ink:#0d1826; --accent:#8fb0d1; --accent-2:#adc6de; --accent-soft:#26292c; --gold:#d4b06a; --ok:#6fb08a; --warn:#c99f56; --danger:#ef4444; --gate:#d4b06a; --gate-ink:#d4b06a; --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 6px 20px rgba(0,0,0,.36); --shadow-lg: 0 22px 60px rgba(0,0,0,.5); color-scheme: dark; } /* ---- legacy aliases ------------------------------------------------------- Older pages (admin, ledger, ciel) were authored with their own variable names. Mapping them to the shared tokens lets those pages adopt the brand + light/dark instantly by just deleting their own :root and including this file. New code should use the canonical tokens above, not these. */ :root { --panel: var(--surface); --panel-2: var(--bg-2); --glass: var(--surface-2); --paper: var(--surface); --soft: var(--bg-2); --txt: var(--text); --ink: var(--text); --teal: var(--accent); --blue: var(--accent); --sky: var(--accent-2); --violet: var(--accent-2); --amber: var(--gate); --green: var(--ok); --coral: var(--danger); --r: var(--r-lg); --shadow: var(--shadow-md); } /* ---- base ---------------------------------------------------------------- */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .3s var(--ease), color .3s var(--ease); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Two voices, one boss (Article I): h1 is the serif editorial lead everywhere; smaller heads stay in the working sans at a capped weight (no 700s). */ h1 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: 0; } h2,h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; } /* The UA default for strong/b is `bolder`, which lands on 700 or 900 whatever the parent weight is — that alone put most of the working voice over the cap. Emphasis in the sans voice is one step (600), never bold. */ strong, b { font-weight: 600; } ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---- top bar (shared shell, built by rimuru.js) -------------------------- */ .rmz-top { position: sticky; top: 0; z-index: 40; padding: 0 clamp(16px, 3vw, 32px); background: var(--bg); border-bottom: 1px solid var(--line); } .rmz-mainrow { min-height: 64px; display: flex; align-items: center; gap: var(--sp-5); } .rmz-brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -.02em; color: var(--text); } .rmz-mark { width: 32px; height: 32px; border-radius: 8px; flex: none; background: var(--brand-strong); color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 16px; } .rmz-brand small { color: var(--muted); font-weight: 500; font-size: 13px; letter-spacing: 0; } .rmz-nav { display: flex; align-items: center; gap: 24px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .rmz-nav::-webkit-scrollbar { display: none; } .rmz-nav a { position: relative; color: var(--muted); font-weight: 620; font-size: 14px; padding: 0 0 11px; text-decoration: none; transition: color .15s var(--ease); white-space: nowrap; } .rmz-nav a:hover { color: var(--text); text-decoration: none; } .rmz-nav a.active { color: var(--text); } .rmz-nav a.active::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold); } .rmz-spacer { flex: 1 1 auto; } .rmz-user { display: flex; align-items: center; gap: 8px; position: relative; } .rmz-iconbtn { width: 36px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; display: grid; place-items: center; font-size: 15px; transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease); } .rmz-iconbtn:hover { border-color: var(--line-2); background: var(--bg-2); } .rmz-avatar { display: flex; align-items: center; gap: 9px; padding: 5px 6px 5px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease); } .rmz-avatar:hover { border-color: var(--line-2); } .rmz-avatar-initials { display:none; } .rmz-avatar .nm { font-weight: 620; font-size: 13.5px; } .rmz-avatar .rl { font-size: 13px; font-weight: 650; color: var(--muted); padding: 2px 5px; } .rmz-menu { position: absolute; top: 46px; right: 0; min-width: 200px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; display: none; } .rmz-menu.open { display: block; } .rmz-menu-label { padding: 7px 11px 3px; color: var(--muted); font-size: 13px; font-weight: 600; } /* ---- mobile nav hamburger (Genius Panel #10) ----------------------------- Desktop never sees this: the six-item tab row IS the nav there. Below 900px the tab row is replaced by this button + the dropdown panel below, so nothing ever clips to "Operatio" with no way to reach the rest. */ .rmz-navtoggle { display: none; width: 36px; height: 36px; flex: none; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); cursor: pointer; align-items: center; justify-content: center; } .rmz-navtoggle:hover { border-color: var(--line-2); background: var(--bg-2); } .rmz-hbars, .rmz-hbars::before, .rmz-hbars::after { display: block; width: 17px; height: 2px; border-radius: 1px; background: var(--text); } .rmz-hbars { position: relative; } .rmz-hbars::before, .rmz-hbars::after { content: ""; position: absolute; left: 0; } .rmz-hbars::before { top: -5px; } .rmz-hbars::after { top: 5px; } .rmz-navpanel { display: none; position: absolute; left: 12px; right: 12px; top: 56px; z-index: 45; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; } .rmz-navpanel.open { display: flex; } .rmz-navpanel a { padding: 11px 12px; border-radius: var(--r-sm); color: var(--text); font-weight: 600; font-size: 14.5px; text-decoration: none; min-height: 44px; display: flex; align-items: center; } .rmz-navpanel a:hover { background: var(--bg-2); text-decoration: none; } .rmz-navpanel a.active { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); font-weight: 600; } .rmz-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .rmz-search { position:relative; width:min(520px,42vw); } .rmz-search input { width:100%; min-height:42px; padding:9px 60px 9px 38px; border-radius:10px; background:var(--bg-2); border-color:transparent; } .rmz-search input:focus { background:var(--surface); border-color:var(--accent); } .rmz-search-icon { position:absolute; left:13px; top:50%; transform:translateY(-52%); color:var(--muted); font-size:20px; pointer-events:none; } .rmz-search-key { position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--dim); font-size:13px; border:1px solid var(--line); border-radius:5px; padding:1px 5px; pointer-events:none; } .rmz-search-results { position:absolute; left:0; right:0; top:48px; z-index:90; max-height:min(520px,70vh); overflow:auto; background:var(--surface); border:1px solid var(--line-2); border-radius:12px; box-shadow:var(--shadow-lg); padding:8px; } .rmz-search-group { padding:9px 10px 5px; color:var(--muted); font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; } .rmz-search-hit { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; width:100%; min-height:44px; align-items:center; padding:8px 10px; border:0; border-radius:8px; background:none; color:var(--text); font:inherit; text-align:left; cursor:pointer; } .rmz-search-hit:hover, .rmz-search-hit.selected { background:var(--bg-2); } .rmz-search-label { min-width:0; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rmz-search-sub { max-width:220px; color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .rmz-search-state { display:grid; gap:3px; padding:16px 12px; } .rmz-search-state span { color:var(--muted); font-size:13px; } .rmz-search-source { padding:9px 10px 5px; border-top:1px solid var(--line); color:var(--muted); font-size:13px; } .rmz-search-ask { display:block; margin-top:4px; padding:10px; border-top:1px solid var(--line); font-size:13px; font-weight:650; } /* DO-bar verb legend (one-time, dismissible) — names the power verbs the bar otherwise never advertised. Reuses the gold "a human should look here" ink for the badge; the example rides a quiet code chip. */ .rmz-search-legend { padding:6px 4px; } .rmz-legend-head { padding:6px 8px 8px; color:var(--muted); font-size:13px; } .rmz-legend-row { display:grid; grid-template-columns:auto auto minmax(0,1fr); gap:10px; align-items:center; padding:6px 8px; } .rmz-legend-badge { color:var(--gold); font-weight:600; letter-spacing:.06em; font-size:11px; text-transform:uppercase; } .rmz-legend-row code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px; color:var(--text); background:var(--bg-2); padding:2px 7px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .rmz-legend-what { color:var(--muted); font-size:13px; } .rmz-legend-dismiss { margin:8px 8px 2px; padding:7px 13px; min-height:36px; border:1px solid var(--line-2); border-radius:8px; background:var(--surface); color:var(--text); font:inherit; font-size:13px; font-weight:600; cursor:pointer; } .rmz-legend-dismiss:hover { border-color:var(--accent); background:var(--bg-2); } /* phones: the six-tab row collapses into the hamburger + panel above — one nav truth on a phone, not a clipped scrolling strip AND a duplicate copy buried in the account menu. */ @media (max-width: 900px) { .rmz-top { padding:0 12px; position: relative; } .rmz-mainrow { min-height:56px; gap:10px; } .rmz-brand { gap: 0; font-size: 0; } /* hide the wordmark text, keep the mark */ .rmz-brand small { display: none; } .rmz-nav { display: none; } .rmz-navtoggle { display: flex; } .rmz-search { width:auto; flex:1; } .rmz-search input { min-height:40px; padding-right:12px; } .rmz-search input::placeholder { color:transparent; } .rmz-search-key { display:none; } .rmz-search-results { position:fixed; left:12px; right:12px; top:58px; max-height:70vh; } .rmz-avatar { padding: 4px 5px; gap: 5px; } .rmz-avatar .nm { display: none; } /* role chip is enough on a phone */ .rmz-avatar .rl { display:none; } .rmz-avatar-initials { width:30px; height:30px; display:grid; place-items:center; color:var(--brand-ink); background:var(--brand); border-radius:7px; font-size:15px; font-weight:600; } .rmz-iconbtn { width: 32px; height: 32px; } } .rmz-menu button, .rmz-menu a { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; padding: 9px 11px; border: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; border-radius: var(--r-sm); cursor: pointer; text-decoration: none; } .rmz-menu button:hover, .rmz-menu a:hover { background: var(--bg-2); text-decoration: none; } .rmz-menu .sep { height: 1px; background: var(--line); margin: 5px 4px; } /* ---- buttons ------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-md); border: 1px solid transparent; font: inherit; font-weight: 640; font-size: 14px; cursor: pointer; transition: transform .12s var(--ease), background .15s, border-color .15s, box-shadow .15s; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--brand-strong); } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--line); } .btn-ghost:hover { border-color: var(--line-2); background: var(--bg-2); } .btn-danger { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); } .btn-sm { padding: 7px 12px; font-size: 13px; border-radius: var(--r-sm); } /* ---- inputs -------------------------------------------------------------- */ input, select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); } ::placeholder { color: var(--dim); } /* ---- cards / surfaces ---------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: var(--sp-5); } .section-head { display: flex; align-items: baseline; gap: 12px; margin: var(--sp-6) 0 var(--sp-4); } .section-head h2 { font-size: var(--fs-4); font-family: var(--serif); font-weight: 400; letter-spacing: 0; } .section-head .sub { color: var(--muted); font-size: 13px; } .section-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); } /* ---- badges / pills ------------------------------------------------------ */ /* Status chips are small, quiet, and rare (Article III.4) — never uppercase, never a shout; a page with more than five visible is wrong. */ .pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--bg-2); color: var(--muted); } .pill.ok { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); } .pill.warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); } .pill.gate { background: color-mix(in srgb, var(--gate) 20%, transparent); color: var(--gate); } .pill.brand { background: var(--brand); color: var(--brand-ink); } /* ---- app shell (chat column) --------------------------------------------- */ .shell { display: flex; flex-direction: column; min-height: 100dvh; } .chat-main { flex: 1; width: min(760px, calc(100vw - 32px)); margin: 0 auto; display: flex; flex-direction: column; } /* ---- quick-action tiles (chat starter chips) ----------------------------- */ .quick-row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: var(--sp-4) 0; } .quick { display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); font-weight: 600; font-size: 13.5px; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .12s var(--ease), border-color .15s, box-shadow .15s; } .quick:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-md); } .quick .qi { font-size: 16px; } /* ---- composer (glass, sticky) -------------------------------------------- */ .composer { position: sticky; bottom: 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; padding: 10px 10px 10px 16px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-md); } .composer textarea { border: 0; background: none; resize: none; padding: 8px 4px; min-height: 30px; max-height: 180px; box-shadow: none; } .composer textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); } .composer .send { width: 42px; height: 42px; border-radius: var(--r-pill); border: 0; cursor: pointer; background: var(--brand); color: var(--brand-ink); font-size: 18px; display: grid; place-items: center; transition: background .15s, transform .12s var(--ease); } .composer .send:hover { background: var(--brand-strong); } .composer .send:disabled { opacity: .4; cursor: default; } /* house dialog — states what happens, never a browser popup */ .rmz-dialog{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--text); padding:20px;max-width:420px;box-shadow:var(--shadow-lg)} .rmz-dialog::backdrop{background:rgba(6,12,24,.5)} .rmz-dialog-msg{font-size:14.5px;line-height:1.5;margin-bottom:16px} .rmz-dialog-acts{display:flex;justify-content:flex-end;gap:8px} .rmz-dialog-ok{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)} /* toast — one quiet confirmation voice */ #rmz-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(8px);z-index:200; background:var(--brand-strong);color:var(--brand-ink);padding:10px 18px;border-radius:var(--r-pill); font-size:14px;font-weight:640;box-shadow:var(--shadow-md);opacity:0;pointer-events:none; transition:opacity .18s var(--ease),transform .18s var(--ease)} #rmz-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ---- shared loading / empty / error states (one voice, stable geometry) ---- Rimuru.state(kind,msg) renders these; .rmz-skel is the shimmer block used while a panel's real geometry is known. */ .rmz-state{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface); color:var(--muted);font-size:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .rmz-state[data-state="error"]{border-color:color-mix(in srgb,var(--danger) 35%,var(--line));color:var(--text)} .rmz-state[data-state="error"]::before{content:"⚠";color:var(--danger)} .rmz-state[data-state="empty"]::before{content:"·";color:var(--dim);font-weight:600} .rmz-state .rmz-retry{min-height:34px;padding:4px 12px;border:1px solid var(--line-2);border-radius:var(--r-pill); background:var(--surface);color:var(--text);font-size:13px;font-weight:650;cursor:pointer} .rmz-state .rmz-retry:hover{border-color:var(--accent);color:var(--accent)} .rmz-skel{position:relative;overflow:hidden;background:color-mix(in srgb,var(--line) 55%,transparent);border-radius:var(--r-sm);min-height:14px} .rmz-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%); background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--surface) 65%,transparent),transparent); animation:rmzshimmer 1.3s infinite} @keyframes rmzshimmer{to{transform:translateX(100%)}} @media (prefers-reduced-motion:reduce){.rmz-skel::after{animation:none}} .rmz-skelrows{display:flex;flex-direction:column;gap:10px;padding:6px 0} /* ---- named-calm empty state (D1) ------------------------------------------- Rimuru.emptyState(opts) renders these. Same slot/weight family as .rmz-state[data-state="error"] on purpose — a landlord must be able to tell "0 by design" from "0 by failure" at a glance without reading closely; the dot vs. the ⚠ icon is that whole signal, nothing else about the box changes. */ .rmz-state.rmz-empty{display:block;text-align:left;padding:20px 22px} .rmz-state.rmz-empty::before{content:none} .rmz-empty-line{margin:0;color:var(--muted);font-size:14px;line-height:1.55} .rmz-empty-actions{margin-top:12px} .rmz-empty-action{min-height:38px;padding:8px 16px;border:1px solid var(--line-2);border-radius:var(--r-pill); background:var(--surface);color:var(--accent);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer} .rmz-empty-action:hover{border-color:var(--accent);background:var(--bg-2)} .rmz-empty-how{margin-top:10px;font-size:13px;color:var(--dim)} .rmz-empty-how summary{cursor:pointer;font-weight:600;list-style:none;text-decoration:underline;text-underline-offset:2px} .rmz-empty-how summary::-webkit-details-marker{display:none} .rmz-empty-how summary::after{content:" ▸";text-decoration:none;display:inline-block} .rmz-empty-how[open] summary::after{content:" ▾"} .rmz-empty-how div{margin-top:6px;line-height:1.5} /* ---- worked-sample disclosure (occupied-states depth) ---------------------- "See how it works" reveals a hardcoded, obviously fictional record so a first-time user can see the payoff before their first real one. The dashed border + gold tag are the ONLY visual differences from a live row — that contrast is deliberate and load-bearing: it must never be confusable with real data (the no-invented-data law binds even behind a disclosure). */ .rmz-empty-sample-wrap{margin-top:10px;font-size:13px;color:var(--dim)} .rmz-empty-sample-wrap summary{cursor:pointer;font-weight:600;list-style:none;text-decoration:underline;text-underline-offset:2px;color:var(--accent)} .rmz-empty-sample-wrap summary::-webkit-details-marker{display:none} .rmz-empty-sample-wrap summary::after{content:" ▸";text-decoration:none;display:inline-block} .rmz-empty-sample-wrap[open] summary::after{content:" ▾"} .rmz-empty-sample{margin-top:10px;padding:14px 16px;border:1px dashed var(--gold);border-radius:var(--r-md);background:var(--bg-2)} .rmz-sample-tag{display:inline-block;font-weight:600;color:var(--gold);border:1px solid var(--gold);border-radius:var(--r-pill); padding:2px 10px;margin-bottom:10px;font-size:12px} .rmz-empty-sample table.rmz{background:transparent} /* while a compose runs the arrow becomes Stop — visibly a different action */ .composer .send.stop { background: var(--danger); } .composer .send.stop:hover { background: var(--danger); opacity: .9; } /* ---- chat bubbles -------------------------------------------------------- */ .msg { margin: 14px 0; } .msg.you { display: flex; justify-content: flex-end; } .msg.you .bubble { background: var(--brand); color: var(--brand-ink); padding: 11px 15px; border-radius: 20px 20px 6px 20px; max-width: 82%; box-shadow: var(--shadow-sm); } .msg.ciel .bubble { color: var(--text); max-width: 100%; } .avatar-c { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #fff; font-weight: 600; font-size: 14px; } /* ---- stat tiles ---------------------------------------------------------- */ .stats { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; box-shadow: var(--shadow-sm); } .stat .v { font-size: 26px; font-weight: 600; letter-spacing: -.02em; } .stat .k { color: var(--muted); font-size: 13px; margin-top: 3px; } .stat .v .u { font-size: 13px; color: var(--muted); font-weight: 500; margin-left: 3px; } /* ---- tables -------------------------------------------------------------- */ /* Tables: typography over ink (Article V) — plain medium headers, no shaded slabs, no uppercase shouting; the data speaks, the chrome whispers. */ table.rmz { width: 100%; border-collapse: collapse; font-size: 13.5px; } table.rmz th { text-align: left; color: var(--muted); font-weight: 600; font-size: 13px; padding: 10px 14px; border-bottom: 1px solid var(--line-2); } table.rmz td { padding: 12px 14px; border-bottom: 1px solid var(--line); } /* ---- modal --------------------------------------------------------------- */ .modal-backdrop { position: fixed; inset: 0; background: rgba(6,12,24,.55); display: none; place-items: center; z-index: 60; } .modal-backdrop.open { display: grid; } .modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: min(680px, 92vw); max-height: 88vh; overflow: auto; } /* ---- utilities ----------------------------------------------------------- */ .muted { color: var(--muted); } .dim { color: var(--dim); } .mono { font-family: var(--mono); } .stack > * + * { margin-top: var(--sp-3); } .wrap { width: min(1180px, calc(100vw - clamp(32px, 5vw, 72px))); margin: 0 auto; } .wrap-wide { width: min(1440px, calc(100vw - clamp(32px, 4vw, 64px))); margin: 0 auto; } .fade-in { animation: rmzfade .4s var(--ease) both; } @keyframes rmzfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ---- a question from the owner (rimuru.js R.asks) — one band under the header ---- */ .rmz-asks{background:var(--surface);border-bottom:1px solid var(--line)} .rmz-ask{max-width:820px;margin:0 auto;padding:14px 16px 12px;display:grid;gap:8px} .rmz-ask + .rmz-ask{border-top:1px solid var(--line)} .rmz-ask-count{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px} .rmz-ask-q{font:400 19px/1.35 var(--serif);color:var(--text)} .rmz-ask-from{color:var(--muted);font:500 13px/1 var(--font);letter-spacing:.01em;margin-right:6px;vertical-align:middle} .rmz-ask-in{width:100%;font:inherit;font-size:15px;line-height:1.45;padding:10px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);color:var(--text);resize:vertical;min-height:44px} .rmz-ask-in:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent} .rmz-ask-acts{display:flex;gap:8px;justify-content:flex-end;align-items:center} .rmz-ask-send,.rmz-ask-skip{min-height:40px;padding:0 16px;border-radius:var(--r-sm);font:inherit;font-size:14px;cursor:pointer} .rmz-ask-send{background:var(--brand);color:var(--brand-ink);border:1px solid var(--brand)} .rmz-ask-skip{background:none;color:var(--muted);border:1px solid transparent} .rmz-ask-skip:hover{border-color:var(--line-2)} .rmz-ask-note{color:var(--danger);font-size:13.5px} .rmz-ask-fields{display:flex;gap:10px 18px;flex-wrap:wrap} .rmz-ask-f{display:flex;align-items:baseline;gap:6px;font-size:13.5px;color:var(--muted)} .rmz-ask-f input{width:7ch;font:inherit;font-size:16px;padding:8px 10px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--bg);color:var(--text);font-variant-numeric:tabular-nums;min-height:40px} .rmz-ask-f input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent} .rmz-ask-f em{font-style:normal;color:var(--dim)} .rmz-ask-ctx{font-size:14px;line-height:1.5;color:var(--muted);max-width:68ch} /* the veil — sign-in settling on the edge (2026-08-27). One calm screen. */ .rmz-veil{position:fixed;inset:0;z-index:1000;background:var(--bg);display:grid;place-items:center;color:var(--text)} .rmz-veiled body>*:not(#rmz-veil){visibility:hidden} .rmz-veil-in{display:grid;justify-items:center;gap:14px;padding:24px;text-align:center} .rmz-veil-mark{width:44px;height:44px;border-radius:10px;background:var(--text);color:var(--bg);display:grid;place-items:center;font:600 20px/1 var(--serif,Georgia,serif)} .rmz-veil-msg{margin:0;font:400 19px/1.3 var(--serif,Georgia,serif);color:var(--text)} .rmz-veil-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.35;animation:rmz-breathe 1.8s ease-in-out infinite} .rmz-veil-link{font-size:14px;color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:1px} @keyframes rmz-breathe{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:1;transform:scale(1.15)}} @media (prefers-reduced-motion: reduce){.rmz-veil-dot{animation:none;opacity:.8}} /* the demo's seat pill */ .rmz-demo-seat{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:8px auto 0;max-width:1100px;padding:8px 14px;border:1px dashed var(--line);border-radius:12px;font-size:13px;color:var(--muted)} .rmz-demo-seat b{color:var(--text)} .rmz-demo-seat button{font:600 13px/1 inherit;font-family:inherit;padding:8px 12px;border:1px solid var(--accent);border-radius:999px;background:var(--surface);color:var(--text);cursor:pointer}