/* ============================================================
muds-ui.css v2.4.4 (2026 09 04) THE HELLOMUDS DESIGN SYSTEM
PropOS is the North Star. Tokens and components below are PropOS's
shell rules verbatim; the additions after them are the system's
own (compact button, page title, chips, the sheet). Spec:
PKA/design-system/DESIGN.md. Kitchen sink: /ui/ on every host.
LAW: no app defines a button, row, card, pill, field, bar, chip,
sheet or page head in its own file. Missing? Add it HERE first.
Aliases at the end are transitional and dated; each one leaves the
day its app finishes migrating.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');
/* v2.1.1: the system's components size by border-box (min-height is the
whole control). PropOS, Nurture and Studio each carried this reset in
their own file; the system owns it now so the kitchen sink and any new
app render the same numbers. */
*,*::before,*::after{box-sizing:border-box}
/* ---------- TOKENS ---------- */
:root {
/* ── Muds the Realtor Brand Kit, official dark theme ── */
--bg: #161b1d; /* Background, primary for ALL designs */
--card: #212729; /* Card surface, cards, panels, containers */
--elevated: #2c3234; /* Elevated, modals, dropdowns, raised elements */
--inset: #111517; /* Inset wells, sits BELOW the page plane */
/* Glass, v1.80.0. Only for surfaces with content behind them.
A card sits on flat colour, so it gets --card and no blur. */
--glass-bar: rgba(33,39,41,.82); /* sticky top bar, app tab bar */
--glass-panel: rgba(44,50,52,.88); /* drawer, modal panels */
--glass-fx: saturate(1.3) blur(18px);
--glass-fx-lg: saturate(1.3) blur(24px);
--border: #263136; /* subtle border on dark */
--border2: #354348; /* stronger border for inputs/hover */
/* Brand colors */
--yellow: #f2b705; /* primary accent, headlines, CTAs, stats */
--yellow-d: #c99a0f; /* deeper yellow, footer text accents */
--yellow-h: #f7c93d; /* hover gold: brightness up, saturation down, dark text 10.3 to 1 */
--yellow-l: rgba(242,183,5,.12);
--red: #ff3131; /* one high-impact element per design only, FILLS and borders */
--red-t: #ff6b6b; /* red as TEXT on the raised card: 5.46 to 1. #ff3131 measures 4.14 there */
/* Text */
--ink: #F7F2E6; /* Warm White, body text, headlines on dark */
--ink-mid: #C9C4B8; /* slightly dimmed warm white */
--grey: #D8D4C8; /* Grey, supporting copy, descriptions, metadata */
--ink-dim: #a39e91; /* Tertiary, counters and chevrons. Dimmed cream,
H42 S11 B64. Clears 4.5 to 1 on page, card and
overlay. Replaced #5a6a70, cold grey, v1.80.1 */
--grey2: #a6b3b8; /* placeholders, disabled */
--white: #F7F2E6; /* Warm White */
/* Shadows, deep on dark */
--shadow: 0 4px 20px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3);
--shadow-lg: 0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
--teal: #f7f2e6;
--r: 12px; /* default card and control radius */
--r-xs: 4px; /* chips, small tags */
--r-sm: 8px; /* buttons, inputs */
--r-lg: 16px; /* large surfaces, modals */
--r-pill: 999px; /* pills */
}
/* ---------- COMPONENTS, PropOS verbatim ---------- */
.topbar{background:var(--glass-bar);-webkit-backdrop-filter:var(--glass-fx);backdrop-filter:var(--glass-fx);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;height:60px;gap:12px;position:sticky;top:0;z-index:100}
.topbar-brand{display:flex;flex-direction:column;flex-shrink:0}
.topbar-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;color:var(--yellow);line-height:1}
.topbar-sub{font-size:13px;color:var(--grey);letter-spacing:.18em;text-transform:uppercase;margin-top:1px}
.topbar-divider{width:1px;height:28px;background:var(--border);margin:0 2px;flex-shrink:0}
.topbar-nav{display:flex;gap:2px;margin-left:auto;flex-shrink:0}
.nav-btn{padding:7px 14px;font-size:15px;font-weight:600;border:1px solid transparent;background:transparent;color:var(--grey);cursor:pointer;border-radius:var(--r-sm);transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s cubic-bezier(.23,1,.32,1),box-shadow .15s ease;letter-spacing:.04em;font-family:'DM Sans',sans-serif;white-space:nowrap}
.nav-btn:hover{background:var(--elevated);color:var(--ink);border-color:var(--border)}
.nav-btn.active{background:rgba(242,183,5,.1);color:var(--yellow);border-color:rgba(242,183,5,.35);font-weight:700}
.nav-badge{background:var(--red);color:white;font-size:13px;padding:1px 5px;border-radius:var(--r-pill);margin-left:4px;font-weight:700}
.card{background:rgba(22,27,29,.44);-webkit-backdrop-filter:saturate(1.6) blur(40px);backdrop-filter:saturate(1.6) blur(40px);border:1px solid rgba(247,242,230,.12);box-shadow:0 8px 48px rgba(0,0,0,.45),inset 0 1px 0 rgba(247,242,230,.10);border-radius:var(--r);overflow:hidden;}
.card-hdr{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:var(--card)}
.card-hdr-title{font-family:'Bebas Neue',sans-serif;font-size:16px;letter-spacing:1.5px;color:var(--yellow)}
.card-hdr-sub{font-size:15px;color:var(--grey);margin-left:auto}
.card-body{padding:20px;background:var(--card)}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.field label{font-size:15px;font-weight:600;color:var(--ink-mid);letter-spacing:.04em}
.field input,.field select,.field textarea{font-family:'DM Sans',sans-serif;font-size:16px;padding:10px 12px;background:var(--elevated);border:1.5px solid var(--border2);border-radius:var(--r-sm);color:var(--ink);transition:border-color .15s,box-shadow .15s;width:100%;box-shadow:inset 0 1px 2px rgba(0,0,0,.25)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--yellow);background:var(--elevated);box-shadow:0 0 0 3px rgba(242,183,5,.18)}
.field input[type=date]{cursor:pointer;color-scheme:dark}
.field select option{background:var(--elevated);color:var(--ink)}
.field textarea{min-height:60px;resize:vertical;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--grey2);font-style:italic}
.field .hint{font-size:16px;color:var(--grey);margin-top:3px;line-height:1.5}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.fr4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}
.sec-label{font-size:14px;font-weight:700;color:var(--yellow);text-transform:uppercase;letter-spacing:.12em;margin:16px 0 10px;display:flex;align-items:center;gap:8px}
.sec-label::after{content:'';flex:1;height:1px;background:var(--border)}
.btn-yellow{background:var(--yellow);color:#161b1d;border:none;border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:16px;font-weight:700;cursor:pointer;padding:10px 20px;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s cubic-bezier(.23,1,.32,1),box-shadow .15s ease;display:inline-flex;align-items:center;gap:6px;}
@media(hover:hover)and(pointer:fine){.btn-yellow:hover{background:var(--yellow-h);box-shadow:0 4px 14px rgba(242,183,5,.4);transform:translateY(-1px)}}
.btn-yellow:active{transform:translateY(0);box-shadow:0 1px 4px rgba(242,183,5,.25)}
.btn-yellow:disabled{background:var(--border);color:var(--grey);cursor:wait;box-shadow:none;transform:none}
.btn-dark{background:var(--card);color:var(--ink);border:1.5px solid var(--border);border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;cursor:pointer;padding:10px 20px;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s cubic-bezier(.23,1,.32,1),box-shadow .15s ease;display:inline-flex;align-items:center;gap:6px;}
.btn-dark:hover{border-color:var(--yellow);color:var(--yellow);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.btn-red{background:rgba(204,0,0,.15);color:#fca5a5;border:1px solid rgba(204,0,0,.3);border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;cursor:pointer;padding:7px 14px;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s cubic-bezier(.23,1,.32,1),box-shadow .15s ease}
.btn-red:hover{background:rgba(204,0,0,.28);border-color:rgba(255,49,49,.55);color:#fecaca}
.btn-ghost{background:transparent;color:var(--grey);border:1px solid var(--border);border-radius:var(--r);font-family:'DM Sans',sans-serif;font-size:15px;font-weight:500;cursor:pointer;padding:7px 14px;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s cubic-bezier(.23,1,.32,1),box-shadow .15s ease}
.btn-ghost:hover{color:var(--ink);border-color:var(--border2);background:var(--elevated)}
@media(hover:hover)and(pointer:fine){.btn-generate:hover{background:#f0c020;transform:translateY(-2px);box-shadow:0 8px 24px rgba(242,183,5,.45)}}
.btn-yellow:active,.btn-generate:active,.btn-dark:active,.btn-ghost:active,.btn-red:active,.mode-btn:active,.nav-btn:active{transform:scale(.97)}
.btn-row{display:flex;gap:8px;margin-top:8px}
.btn-row .btn-dark{flex:1;justify-content:center}
.nav-row{display:flex;gap:8px;margin-top:16px}
.nav-row .btn-dark{flex:1;justify-content:center}
.nav-row .btn-yellow{flex:2;justify-content:center}
/* v2.1.3: the action line and role label stand on their own outside a deal
card too (homeowners, clients, admin lists). Additive, no link bump. */
.dc-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dc-type{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--grey)}
.deal-card .dc-type{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--grey);margin-bottom:6px}
.rr-status{font-size:15px;color:var(--grey);margin:2px 0 0}
.rr-sec{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:22px auto 8px;max-width:880px;padding:0 2px}
.rr-sec:first-of-type{margin-top:8px}
.rr-sec-lbl{font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.rr-sec-meta{font-size:14px;color:var(--grey)}
.rr-group{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;max-width:880px;margin:0 auto}
.rr-row{display:flex;align-items:flex-start;gap:12px;padding:14px 14px 14px 12px;border-top:1px solid var(--border);cursor:pointer;transition:background .15s ease}
.rr-row:first-child{border-top:none}
.rr-row:hover{background:var(--elevated)}
.rr-row.rr-dim{opacity:.72}
.rr-dotcol{width:8px;flex:0 0 8px;align-self:stretch;display:flex;align-items:flex-start;padding-top:18px}
.rr-dot{width:8px;height:8px;border-radius:50%;background:var(--yellow)}
.rr-tile{position:relative;flex:0 0 44px;width:44px;height:44px;border-radius:10px;background:rgba(247,242,230,.10);color:var(--ink);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.rr-badge{position:absolute;right:-5px;bottom:-5px;width:17px;height:17px;border-radius:50%;border:2px solid var(--card);font-size:10px;line-height:13px;text-align:center;font-weight:900}
.rr-badge.wait{background:var(--yellow);color:#161b1d}
.rr-badge.done{background:#f7f2e6;color:#161b1d}
.rr-badge.risk{background:var(--red);color:#fff}
.rr-body{flex:1 1 auto;min-width:0}
.rr-top{display:flex;align-items:baseline;gap:10px}
.rr-name{flex:1 1 auto;min-width:0;font-size:16px;font-weight:700;color:var(--ink);line-height:1.35;overflow-wrap:anywhere}
.rr-right{flex:0 0 auto;font-size:14px;color:var(--grey);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap}
.rr-right.rr-money{font-family:'DM Mono',monospace;font-size:15px;color:var(--ink)}
.rr-chev{flex:0 0 auto;color:#6E7578;font-size:20px;line-height:1;margin-top:1px}
.rr-fact{font-size:15px;color:var(--grey);line-height:1.45;margin-top:3px;padding-left:12px;position:relative}
.rr-fact::before{content:"";position:absolute;left:0;top:.62em;width:4px;height:4px;border-radius:50%;background:#6E7578}
.rr-fact.rr-next{color:var(--ink)}
.rr-fact.rr-warn{color:#ff6b6b}
.rr-row .dc-actions{margin-top:10px}
@media(max-width:480px){.rr-row .stg-dots{display:none !important}}
@media(max-width:480px){.rr-row{padding:12px 10px 12px 8px;gap:10px}.rr-top{flex-wrap:wrap}.rr-right{order:3;flex-basis:100%}}
.empty-state{text-align:center;padding:60px 40px;color:var(--grey)}
.empty-state .es-icon{font-size:36px;opacity:.25;margin-bottom:12px}
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:200;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.modal-bg.show{display:flex}
/* v2.4.3 the modal panel and its footer. The panel scrolls inside the
viewport; the actions row is sticky at its foot, so Cancel and the
primary never scroll away (Muds, Sep 4: the footer button was below
the fold on the stage sheet). Phones: near full width, device inset
inside the footer. */
.modal{background:var(--glass-panel);-webkit-backdrop-filter:saturate(1.6) blur(40px);backdrop-filter:saturate(1.6) blur(40px);border:1px solid rgba(247,242,230,.12);box-shadow:var(--shadow-lg),inset 0 1px 0 rgba(247,242,230,.10);border-radius:var(--r-lg);padding:24px;width:90%;max-width:480px;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.modal-title{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:1.5px;color:var(--yellow);margin-bottom:16px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;position:sticky;bottom:0;margin:16px -24px -24px;padding:12px 24px;background:var(--elevated);border-top:1px solid var(--border)}
@media(max-width:900px){.modal{width:calc(100% - 16px);max-width:none;max-height:calc(100dvh - 16px)}.modal-actions{padding-bottom:calc(12px + env(safe-area-inset-bottom))}}
.stage-pill{padding:5px 14px;border-radius:var(--r-pill);font-size:14px;font-weight:600;border:1px solid var(--border);background:var(--card);color:var(--grey);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s cubic-bezier(.23,1,.32,1),box-shadow .15s ease;font-family:'DM Sans',sans-serif;}
.stage-pill:hover{border-color:var(--yellow);color:var(--ink)}
.stage-pill.active{background:#f7f2e6;color:#161b1d;border-color:#f7f2e6}
.stage-pill.red{border-color:rgba(204,0,0,.4);color:#fca5a5;background:rgba(204,0,0,.12)}
.field .hint,.helper{font-size:16px!important}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;
width:40px;height:40px;background:none;border:none;cursor:pointer;
padding:8px;border-radius:var(--r-sm);margin-left:auto;flex-shrink:0}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);
border-radius:var(--r-xs);transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s cubic-bezier(.23,1,.32,1),box-shadow .25s ease}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.pwa-tabs{display:none}
.pwa-tabs button{flex:1 1 0;min-width:0;background:none;border:none;
cursor:pointer;font-family:'DM Sans',sans-serif;font-size:13px;
font-weight:600;letter-spacing:.02em;color:#D8D4C8;
padding:14px 6px;border-radius:999px;
display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;
white-space:nowrap;overflow:hidden;min-height:56px;
position:relative;z-index:1;
transition:color .2s ease}
.pwa-tabs button.active{color:var(--yellow)}
.pwa-pill{position:absolute;top:8px;bottom:8px;left:0;width:0;
border-radius:999px;background:rgba(242,183,5,.16);
box-shadow:inset 0 1px 0 rgba(242,183,5,.2);
transition:transform .32s cubic-bezier(.23,1,.32,1),
width .32s cubic-bezier(.23,1,.32,1);
z-index:0}
.pwa-tabs .pwa-badge{background:var(--yellow);color:#161b1d;border-radius:999px;
padding:0 6px;font-size:11px;font-weight:700;line-height:16px;min-width:16px}
html.pwa .pwa-tabs{display:flex;position:fixed;left:50%;transform:translateX(-50%);
bottom:calc(12px + env(safe-area-inset-bottom,0px));
width:min(94%,620px);gap:4px;padding:8px;
z-index:120;background:rgba(22,27,29,.62);
-webkit-backdrop-filter:saturate(1.6) blur(40px);backdrop-filter:saturate(1.6) blur(40px);
border:1px solid rgba(247,242,230,.12);border-top-color:rgba(247,242,230,.18);
border-radius:999px;align-items:stretch;
box-shadow:0 8px 48px rgba(0,0,0,.5),inset 0 1px 0 rgba(247,242,230,.08)}
html.pwa body{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}
html.pwa .mobile-nav{bottom:0;padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
@media (display-mode: standalone){
.pwa-tabs{display:flex;position:fixed;left:50%;transform:translateX(-50%);
bottom:calc(12px + env(safe-area-inset-bottom,0px));
width:min(94%,620px);gap:4px;padding:8px;
z-index:120;background:rgba(22,27,29,.62);
-webkit-backdrop-filter:saturate(1.6) blur(40px);backdrop-filter:saturate(1.6) blur(40px);
border:1px solid rgba(247,242,230,.12);border-top-color:rgba(247,242,230,.18);
border-radius:999px;align-items:stretch;
box-shadow:0 8px 48px rgba(0,0,0,.5),inset 0 1px 0 rgba(247,242,230,.08)}
body{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}
.mobile-nav{bottom:0;padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}
.mobile-nav{display:none;position:fixed;top:60px;left:0;right:0;bottom:0;
background:var(--glass-panel);
-webkit-backdrop-filter:var(--glass-fx-lg);backdrop-filter:var(--glass-fx-lg);
z-index:99;flex-direction:column;padding:16px;
gap:6px;border-top:1px solid var(--border);overflow-y:auto}
.mobile-nav.open{display:flex}
.mobile-nav .nav-btn{width:100%;text-align:left;padding:14px 16px;
font-size:16px;border-radius:var(--r);justify-content:flex-start;
border:1px solid var(--border)}
.mobile-nav .nav-btn.active{background:var(--yellow-l);
border-color:rgba(242,183,5,.35);color:var(--yellow)}
/* v2.1.2: the phone block below is PropOS's @media(max-width:900px) block.
The wrapper was lost when the block was lifted out of the shell (v2.0.0)
and desktop got phone rules for one day: topbar nav hidden, two column
grids collapsed, cards cramped. Found by the landing page walk. */
@media(max-width:900px){
.topbar-nav{display:none}
.topbar-divider{display:none}
.hamburger{display:flex}
.fr3{grid-template-columns:1fr 1fr}
.fr4{grid-template-columns:1fr 1fr}
.fr2,.fr3,.fr4{grid-template-columns:1fr}
.field-grid-2col{grid-template-columns:1fr!important}
.topbar{padding:0 14px;height:52px}
.topbar-title{font-size:20px}
.topbar-sub{display:none}
.mobile-nav{top:52px}
.btn-row{flex-direction:column}
.btn-row .btn-dark{width:100%}
.card-body{padding:14px 12px}
.card-hdr{padding:12px 14px}
.btn-yellow,.btn-dark,.btn-ghost,.btn-red{min-height:44px}
.nav-btn{min-height:44px}
}
/* v2.2.5 the laptop band. At 1180 to 1366 the bar is nowrap and the
brand tagline, the autosave pill, eight nav links and the account
pill add up past the viewport (measured 1311 at 1280, a 31px
sideways scroll on every PropOS page). The tagline yields first,
then nav padding. Nothing changes above 1366 or under 769. */
@media (min-width:769px) and (max-width:1366px){
.topbar-sub{display:none}
.topbar{gap:10px}
.topbar-nav{gap:0}
.nav-btn{padding:7px 9px;font-size:14px}
}
/* ---------- TOAST (v2.2.0) ----------
A toast is a short confirmation of something that already happened. It
never blocks, never asks, never covers the one primary action, and
never carries the action color as a fill (gold is for buttons). One
idea, under 60 characters, no exclamation mark. Rendered by
/ui/muds-ui.js mudsToast(); markup shape:
Reminder sent.
Kinds: (none) information, .success (gold rule), .error (red rule, stays
until dismissed). Sits above the bottom bar and the device inset, at most
three deep, newest at the bottom. */
.toast-stack{position:fixed;left:0;right:0;bottom:calc(16px + env(safe-area-inset-bottom));z-index:400;display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 16px;pointer-events:none}
body.has-bar .toast-stack{bottom:calc(108px + env(safe-area-inset-bottom))} /* v2.2.1: the bar reserves 108px (3.4), measured overlap at 84 */
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;width:100%;max-width:440px;min-height:52px;padding:12px 14px 12px 16px;background:var(--elevated);color:var(--ink);border:1px solid var(--border2);border-left:3px solid var(--ink-dim);border-radius:var(--r);box-shadow:0 8px 28px rgba(0,0,0,.45);font:400 16px/1.35 'DM Sans',sans-serif;opacity:0;transform:translateY(12px);transition:opacity .18s ease,transform .18s cubic-bezier(.23,1,.32,1);touch-action:pan-x}
.toast.in{opacity:1;transform:none}
.toast.success{border-left-color:var(--yellow)}
.toast.error{border-left-color:var(--red);}
.toast-msg{flex:1 1 auto;min-width:0}
.toast-act{flex:0 0 auto;background:none;border:none;padding:6px 8px;margin:-6px -4px -6px 0;min-height:44px;color:var(--yellow);font:700 15px 'DM Sans',sans-serif;cursor:pointer;border-radius:8px}
.toast-act:hover{background:var(--yellow-l)}
.toast-x{flex:0 0 auto;width:44px;height:44px;margin:-8px -10px -8px 0;background:none;border:none;color:var(--grey);font-size:0;cursor:pointer;border-radius:8px;position:relative}
.toast-x::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/18px no-repeat;mask:url("data:image/svg+xml;utf8,") center/18px no-repeat}
.toast-x:hover{color:var(--ink);background:var(--border)}
.toast-act:focus-visible,.toast-x:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
@media(min-width:768px){.toast-stack{align-items:flex-end;right:24px;left:auto;padding:0}.toast{width:auto;min-width:320px}}
@media(prefers-reduced-motion:reduce){.toast{transition:none;transform:none}}
/* ---------- THE DESKTOP SHELL (v2.3.0) ----------
Phones keep the top bar and the bottom bar. From 1000px up an app may
render the left rail instead: body.has-rail hides the bottom bar, the
rail carries the wordmark, the same links and the account, and the page
sits beside it. Markup:
...
Stat tiles:
A roster group becomes a table on desktop with .rr-table on the group and
a .rr-thead row of labels before it; the phone keeps the rows. */
.rail{display:none}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 20px}
.stat{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);color:var(--ink);text-decoration:none;min-height:88px}
.stat:hover{border-color:var(--border2)}
.stat-n{font:500 28px/1.1 'DM Mono',monospace;font-variant-numeric:tabular-nums;color:var(--ink)}
.stat-n.gold{color:var(--yellow)}
.stat-l{font-size:14px;color:var(--grey)}
.stat-s{font-size:13px;color:var(--ink-dim)}
.rr-thead{display:none}
.rr-fact:empty{display:none}
.cols-2{display:block}
@media(min-width:1000px){
body.has-rail{padding-left:232px}
body.has-rail .topbar{display:none}
body.has-rail .pwa-tabs,body.has-rail .pwa-tabs.always{display:none}
body.has-rail main{padding-bottom:48px}
.rail{display:flex;flex-direction:column;position:fixed;top:0;left:0;bottom:0;width:232px;padding:20px 14px;background:var(--card);border-right:1px solid var(--border);z-index:100}
.rail-mark{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:.08em;color:var(--yellow);text-decoration:none;padding:6px 12px 22px}
.rail-nav{display:flex;flex-direction:column;gap:2px}
.rail-nav a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:var(--r-sm);color:var(--grey);font-size:15px;font-weight:600;text-decoration:none}
.rail-nav a:hover{background:var(--elevated);color:var(--ink)}
.rail-nav a.active{background:var(--yellow-l);color:var(--yellow)}
.rail-nav a .nav-badge{margin-left:auto}
.rail-sec{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);padding:18px 12px 6px}
.rail-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:0 4px}
.rail-foot .acct{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:999px;color:var(--ink);font-size:14px;font-weight:600;text-decoration:none;background:var(--elevated)}
.stat-grid{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
/* the table render: one markup, two renders */
.rr-thead{display:grid;grid-template-columns:auto 44px 1.3fr 1fr 1.7fr 1.4fr 130px 190px;gap:0 14px;padding:0 14px 8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim)}
.rr-group.rr-table .rr-row,.rr-group.rr-table .rr-row.rr-wrap{display:grid;grid-template-columns:auto 44px 1.3fr 1fr 1.7fr 1.4fr 130px 190px;grid-auto-flow:dense;gap:0 14px;align-items:center;padding:10px 14px;min-height:60px}
.rr-group.rr-table .rr-pick,.rr-group.rr-table .rr-tile,.rr-group.rr-table .rr-name,.rr-group.rr-table .rr-fact,.rr-group.rr-table .rr-right,.rr-group.rr-table .rr-row>.dc-actions,.rr-group.rr-table .dc-actions{grid-row:1}
.rr-group.rr-table .rr-more,.rr-group.rr-table .rr-row>.rr-more,.rr-group.rr-table .rr-row>form.quick{grid-row:2}
.rr-group.rr-table .rr-main,.rr-group.rr-table .rr-body,.rr-group.rr-table .rr-top{display:contents}
.rr-group.rr-table .rr-pick{grid-column:1;margin:0;position:static}
.rr-group.rr-table .rr-tile{grid-column:2}
.rr-group.rr-table .rr-name{grid-column:3;font-size:15px}
.rr-group.rr-table .rr-chev{display:none}
.rr-group.rr-table .rr-fact,.rr-group.rr-table .rr-fact:empty{display:block;padding-left:0;font-size:14px;line-height:1.35;margin:0;white-space:normal;min-width:0;color:var(--grey);overflow:visible;text-overflow:clip}
.rr-group.rr-table .rr-fact .chip{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.rr-group.rr-table .rr-fact>span[style*='inline-flex']{display:flex!important;flex-wrap:wrap}
.rr-group.rr-table .rr-fact::before{display:none}
.rr-group.rr-table .rr-fact:nth-of-type(2){grid-column:4} /* rr-top is span 1 */
.rr-group.rr-table .rr-fact:nth-of-type(3){grid-column:5}
.rr-group.rr-table .rr-fact:nth-of-type(4){grid-column:6}
.rr-group.rr-table .rr-fact:nth-of-type(n+5){display:none}
.rr-group.rr-table .rr-right{grid-column:7;text-align:left;font-size:14px;order:0;flex-basis:auto}
.rr-group.rr-table .dc-actions,.rr-group.rr-table .rr-row>.dc-actions{grid-column:8;margin:0;flex:0 0 auto;justify-content:flex-end;position:relative}
.rr-group.rr-table .dc-actions .btn-yellow{min-width:0}
.rr-group.rr-table .rr-more,.rr-group.rr-table .rr-row>.rr-more{grid-column:1/-1;margin:6px 0 4px 58px;max-width:360px}
.rr-group.rr-table .rr-row>form.quick{grid-column:1/-1;margin-left:58px}
.rr-group.rr-table .rr-signal{left:auto}
}
/* ---------- THE SYSTEM'S OWN ADDITIONS ---------- */
/* compact button for header actions beside a title */
/* the four buttons share a floor and a focus ring */
.btn-yellow,.btn-dark,.btn-ghost,.btn-red{min-height:44px;line-height:1.2;text-decoration:none;justify-content:center;white-space:nowrap;display:inline-flex;align-items:center}
.btn-ghost,.btn-red{min-height:36px}
/* compact button for header actions beside a title; declared after the floor so it wins */
.btn-yellow.btn-sm,.btn-dark.btn-sm,.btn-sm{font-size:14px;padding:8px 16px;min-height:36px}
.btn-yellow:focus-visible,.btn-dark:focus-visible,.btn-ghost:focus-visible,.btn-red:focus-visible,
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
.btn-dark:disabled,.btn-ghost:disabled{opacity:.5;cursor:not-allowed}
/* page title */
.page-title{font-family:'Bebas Neue','DM Sans',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:2.1rem;line-height:1;color:var(--ink);margin:0}
.page-title .ver{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--grey);margin-left:8px;vertical-align:middle}
.page-status{font-size:15px;color:var(--grey);margin:6px 0 0}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap}
/* chips */
.chip{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);border:1px solid var(--border2);border-radius:999px;padding:2px 10px;line-height:1.5;white-space:nowrap;background:transparent}
.chip.gold{color:var(--yellow);border-color:var(--yellow)}
.chip.warn{color:var(--red-t);border-color:rgba(255,49,49,.5)}
.chip.ink{color:var(--ink);border-color:var(--grey)}
/* the segmented control row */
.stage-pills{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
/* the filter sheet */
.fsheet{margin:0 0 12px}
.fsheet>summary{list-style:none}
.fsheet>summary::-webkit-details-marker{display:none}
.fsum{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:6px 0;cursor:pointer}
.fsum-text{color:var(--grey);font-size:16px;line-height:1.4}
.fsum-btn{flex:0 0 auto;color:var(--yellow);border:1.5px solid var(--yellow);border-radius:var(--r);padding:8px 16px;font-weight:700;font-size:15px;min-height:36px;display:inline-flex;align-items:center}
.fsheet[open] .fsum-btn{background:var(--yellow);color:#161b1d}
.fsheet-body{padding-top:8px}
/* plain controls outside a .field get the same dress */
main input:not([type=checkbox]):not([type=radio]),main select,main textarea{font-family:'DM Sans',sans-serif;font-size:16px;padding:10px 12px;background:var(--elevated);border:1.5px solid var(--border2);border-radius:var(--r-sm);color:var(--ink);width:100%}
main input:focus,main select:focus,main textarea:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(242,183,5,.18)}
main label{font-size:15px;font-weight:600;color:var(--ink-mid);letter-spacing:.04em;display:block;margin:10px 0 4px}
main textarea{min-height:60px;resize:vertical;line-height:1.5}
/* the bottom bar shown always, outside the installed app (Nurture) */
.pwa-tabs.always{display:flex;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(94%,620px);gap:4px;padding:8px;z-index:120;background:rgba(22,27,29,.62);-webkit-backdrop-filter:saturate(1.6) blur(40px);backdrop-filter:saturate(1.6) blur(40px);border:1px solid rgba(247,242,230,.12);border-top-color:rgba(247,242,230,.18);border-radius:999px;align-items:stretch;box-shadow:0 8px 48px rgba(0,0,0,.5),inset 0 1px 0 rgba(247,242,230,.08)}
.pwa-tabs a{flex:1 1 0;min-width:0;background:none;border:none;text-decoration:none;font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;color:#D8D4C8;padding:14px 6px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap;overflow:hidden;min-height:56px;position:relative;z-index:1;transition:color .2s ease}
.pwa-tabs a.active,.pwa-tabs a.on{color:var(--yellow)}
body.has-bar{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))}
/* the top bar's wordmark */
.topbar .wordmark{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:.12em;color:var(--yellow);text-decoration:none}
.topbar .spacer{flex:1}
.topbar .acct{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border);border-radius:var(--r);color:var(--ink);font-size:15px;font-weight:600;text-decoration:none;background:var(--card)}
/* ---------- BROUGHT IN FROM NURTURE, Sep 3 2026: the parts that were better there ---------- */
/* a roster row whose actions sit under the body: the phone layout */
.rr-row.rr-wrap{flex-wrap:wrap;cursor:default}
.rr-row>.dc-actions,.rr-row>.rr-more,.rr-row>form.quick{flex:0 0 100%}
.rr-main{flex:1 1 0;min-width:0;display:flex;gap:12px;color:inherit;text-decoration:none}
.rr-tile.time{font-size:12px;letter-spacing:.02em}
.rr-signal{position:absolute;right:-4px;top:-4px;width:12px;height:12px;border-radius:50%;background:var(--yellow);border:2px solid var(--card)}
.rr-fact.rr-why{color:var(--yellow)}
.rr-fact.rr-why::before{background:var(--yellow)}
.rr-pick{width:26px;height:26px;margin:9px 0 0;flex:none;accent-color:var(--yellow)}
.rr-row .rr-pick~.dc-actions{margin-left:94px}
.rr-row .dc-actions .btn-yellow{flex:0 0 auto;min-width:112px}
/* More: one quiet trigger, then a stacked list of plain actions */
.rr-morebtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;background:none;border:none;color:var(--grey);font:400 16px 'DM Sans',sans-serif;cursor:pointer}
.rr-morebtn:hover{color:var(--ink)}
.rr-morebtn .chevd{display:inline-block;font-size:14px;transition:transform .2s ease}
.rr-morebtn[aria-expanded="true"] .chevd{transform:rotate(180deg)}
.rr-more{margin-top:8px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--card)}
.rr-more[hidden]{display:none}
.rr-more a,.rr-more button{display:block;width:100%;text-align:left;padding:13px 16px;background:none;border:none;border-top:1px solid var(--border);color:var(--ink);font:400 16px 'DM Sans',sans-serif;text-decoration:none;cursor:pointer;min-height:48px}
.rr-more a:first-child,.rr-more button:first-child{border-top:none}
.rr-more a:hover,.rr-more button:hover{background:var(--elevated)}
.rr-show{display:block;width:100%;text-align:left;padding:12px 16px;background:none;border:none;border-top:1px solid var(--border);color:var(--yellow);font:600 15px 'DM Sans',sans-serif;cursor:pointer}
.rr-show:hover{background:var(--elevated)}
/* choice pills: one of several, the radio that looks like a segmented row */
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choices label{flex:1 1 28%;margin:0}
.choices input{display:none}
.choices span{display:block;text-align:center;padding:11px 4px;border:1px solid var(--border);border-radius:var(--r);color:var(--ink);font-size:16px;min-height:44px;line-height:1.5;cursor:pointer}
.choices input:checked+span{background:var(--yellow);color:#161b1d;border-color:var(--yellow);font-weight:700}
/* v2.4.4 list form: one choice per row, left aligned, for labels longer
than a word (Attorney, Robert). Three of those in one 390 row wrapped
to 96px pills on the stage sheet, Sep 4 2026. */
.choices.list label{flex:1 1 100%}
.choices.list span{text-align:left;padding:11px 14px}
/* key value rows: the contact block on a person */
.kv{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.kv-k{color:var(--grey);font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:700;flex:0 0 64px}
.kv-v{font-size:17px;font-weight:700;color:var(--yellow);text-decoration:none;overflow-wrap:anywhere}
.kv-v.dim{color:var(--grey);font-weight:400;font-size:16px}
/* a two column figures table */
.kv-table{width:100%;border-collapse:collapse;margin-top:10px}
.kv-table td{padding:5px 0;font-size:16px;color:var(--grey);border-top:1px solid var(--border)}
.kv-table td:last-child{text-align:right;color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
/* alerts: a warning band and a notice band */
.alert{padding:12px 14px;border-radius:var(--r);border:1px solid rgba(255,49,49,.45);background:rgba(255,49,49,.10);color:var(--red-t);font-size:16px;margin:0 0 12px}
.alert.notice{border-color:var(--yellow);background:var(--yellow-l);color:var(--ink)}
/* a stage pill count reads as plain text in parentheses, PropOS style; a bold inside is the same colour */
.stage-pill b{font-weight:600;color:inherit}
/* v2.2.2: on a phone every button is a 44px target (Dannaway). The phone
block above sits before the system additions, so .btn-ghost and .btn-sm
(defined later at 36px) were winning at 390; this restates the floor last. */
@media(max-width:900px){.btn-ghost,.btn-red,.btn-sm,.btn-yellow.btn-sm,.btn-dark.btn-sm{min-height:44px}}
/* v2.3.4 NAVIGATION LAW (Muds, Sep 4 2026, after Nielsen and the iOS and
Android guidelines): the bottom bar is a phone and tablet control, inside
thumb reach; on a desktop navigation lives in the rail or the top bar,
never at the bottom. .always keeps the bar on small screens outside the
installed app; from 1000px it is gone on every app. */
@media(min-width:1000px){.pwa-tabs,.pwa-tabs.always,html.pwa .pwa-tabs{display:none!important}body.has-bar{padding-bottom:0}body.has-bar main{padding-bottom:48px}}
/* v2.3.5 a body placed straight in a wrapping row (no rr-main link around
it) takes the remaining width and never pushes the tile onto its own
line; found on Nurture appointments with a long address. */
.rr-row.rr-wrap>.rr-tile{flex:0 0 44px}
.rr-row.rr-wrap>.rr-body{flex:1 1 0;min-width:0}
/* v2.4.0 THE BUTTON DOCTRINE, enforced (Muds, Sep 4 2026: 100 percent across
all apps). A kit button is one size per variant; an inline style on the
element never shrinks it, changes its face, its corners or its padding.
Measured on PropOS 1.117.0: 192 of 330 buttons sat outside the doctrine
through inline overrides. These declarations outrank inline styles. */
.btn-yellow,.btn-dark,.btn-ghost,.btn-red{font-family:'DM Sans',sans-serif!important;border-radius:var(--r)!important;line-height:1.2!important;white-space:nowrap!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important}
.btn-yellow,.btn-dark{font-size:16px!important;padding:10px 20px!important;min-height:44px!important}
.btn-ghost{font-size:15px!important;padding:7px 14px!important}
.btn-red{font-size:15px!important;padding:7px 14px!important}
.btn-sm,.btn-yellow.btn-sm,.btn-dark.btn-sm,.btn-ghost.btn-sm,.btn-red.btn-sm{font-size:14px!important;padding:8px 16px!important;min-height:36px!important}
@media(max-width:900px){.btn-ghost,.btn-red,.btn-sm,.btn-yellow.btn-sm,.btn-dark.btn-sm,.btn-ghost.btn-sm,.btn-red.btn-sm{min-height:44px!important}}
button{font-family:inherit}
/* v2.4.1 DISCLOSURE (Muds, Sep 4: a fold that looks like a caption makes him
guess). A details summary with class disclose is a 44px row in cream 16px
600 with a chevron on the right that turns when open. Captions stay
captions (rr-sec-lbl); anything that opens carries this. */
summary.disclose{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 2px;color:var(--ink);font:600 16px/1.3 'DM Sans',sans-serif;cursor:pointer;list-style:none;border-radius:var(--r-sm)}
summary.disclose::-webkit-details-marker{display:none}
summary.disclose::after{content:"\02C5";flex:0 0 auto;font-size:14px;color:var(--grey);transition:transform .2s ease}
details[open]>summary.disclose::after{transform:rotate(180deg)}
summary.disclose:hover{color:var(--yellow)}
summary.disclose:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
details.card>summary.disclose{margin:-4px 0}
/* v2.4.2 THE LADDER (Muds, Sep 4: the ticks had no color). A row of steps
with three states told by shape and weight, never by a foreign hue:
done carries a gold check on the cream wash, now is the filled cream
pill with dark text like every active pill in the kit, next is dim.
Markup:
*/
.ladder{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.ladder-step{display:inline-flex!important;align-items:center;gap:6px;min-height:36px;padding:6px 12px!important;border-radius:999px!important;border:1px solid var(--border);background:transparent;color:var(--ink-dim);font:600 14px/1.2 'DM Sans',sans-serif!important;cursor:pointer;white-space:nowrap}
.ladder-step.done{background:rgba(247,242,230,.10);border-color:rgba(247,242,230,.22);color:var(--ink)}
.ladder-step.done::before{content:"\2713";color:var(--yellow);font-size:13px;font-weight:700}
.ladder-step.now{background:var(--ink);border-color:var(--ink);color:#161b1d;font-weight:700}
.ladder-step:hover{border-color:var(--border2);color:var(--ink)}
.ladder-step.now:hover{color:#161b1d}
.ladder-step:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
/* v2.4.3 pick is the step chosen in a picker before it is confirmed (gold,
the pending action); lock is a done step the system pinned (a tap
explains, it never moves); a disabled step is simply not offered. */
.ladder-step.pick{background:rgba(242,183,5,.12);border-color:var(--yellow);color:var(--yellow)}
.ladder-step.pick:hover{color:var(--yellow)}
.ladder-step.lock,.ladder-step:disabled{cursor:default}
.ladder-step:disabled:hover{border-color:var(--border);color:var(--ink-dim)}
@media(max-width:900px){.ladder-step{min-height:44px}}