/* ============================================================
muds-ui.css v2.7.3 (2026 09 10) 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.
============================================================ */
/* v2.7.3 (2026 09 10): the fonts live here. The @import of Google Fonts
that opened this file was a render blocking chain on every page of
every app (the sheet, then Google's css, then the files from a third
origin). The four families plus the signature script are now served
from /ui/fonts/ on the same origin, latin and latin ext, swap. No app
needs a Google Fonts link or a preconnect any more. OFL licensed. */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/ui/fonts/bebas-neue-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url(/ui/fonts/bebas-neue-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/ui/fonts/dm-mono-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/ui/fonts/dm-mono-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/ui/fonts/dm-mono-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/ui/fonts/dm-mono-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:300;font-display:swap;src:url(/ui/fonts/dm-sans-300i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:300;font-display:swap;src:url(/ui/fonts/dm-sans-300i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/ui/fonts/dm-sans-400i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:italic;font-weight:400;font-display:swap;src:url(/ui/fonts/dm-sans-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/ui/fonts/dm-sans-300-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/ui/fonts/dm-sans-300-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/ui/fonts/dm-sans-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/ui/fonts/dm-sans-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/ui/fonts/dm-sans-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/ui/fonts/dm-sans-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/ui/fonts/dm-sans-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/ui/fonts/dm-sans-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/ui/fonts/dm-sans-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/ui/fonts/dm-sans-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url(/ui/fonts/dm-serif-display-400i-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Serif Display';font-style:italic;font-weight:400;font-display:swap;src:url(/ui/fonts/dm-serif-display-400i-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/ui/fonts/dm-serif-display-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;src:url(/ui/fonts/dm-serif-display-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Dancing Script';font-style:normal;font-weight:700;font-display:swap;src:url(/ui/fonts/dancing-script-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Dancing Script';font-style:normal;font-weight:700;font-display:swap;src:url(/ui/fonts/dancing-script-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* 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.5 prose: a reading surface (the pulse, a brief, a guide body).
Body 16px on a 1.6 line, a 68ch measure, one space scale: 12px between
paragraphs, 6px between list items, 20px above a heading. Bullets sit
at 22px with the marker in the dim ink so the text leads. Nested folds
(details.pfold) carry the disclosure row and a 12px gap. */
.prose{font-size:16px;line-height:1.6;color:var(--ink);max-width:68ch}
.prose p{margin:0 0 12px}
.prose p:last-child{margin-bottom:0}
.prose ul,.prose ol{margin:0 0 12px;padding-left:22px}
.prose li{margin:0 0 6px;padding-left:2px}
.prose li::marker{color:var(--ink-dim)}
.prose h3{font:700 17px/1.3 'DM Sans',sans-serif;color:var(--ink);margin:20px 0 6px;letter-spacing:0}
.prose h3:first-child{margin-top:0}
.prose h4{font:600 16px/1.4 'DM Sans',sans-serif;color:var(--ink);margin:14px 0 4px}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--yellow);word-break:break-word}
.prose hr{border:0;border-top:1px solid var(--border);margin:14px 0}
.prose .mono{font-family:'DM Mono',monospace;font-size:14px;white-space:pre-wrap;color:var(--ink-dim)}
.prose details.pfold{margin:10px 0 0;border-top:1px solid var(--border);padding-top:2px}
.prose details.pfold[open]{padding-bottom:6px}
.prose details.pfold>summary.disclose{font-size:16px}
.prose details.pfold>*:not(summary){margin-top:8px}
/* 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}}
/* ── v2.5.0 (Sep 9 2026) THE MORE BOARD. The quiet actions of a roster row
open as a board, never inline: on a desktop one column per group, side
by side, everything seen at once, nothing to scroll (NN/g mega menu
rules); on a phone a bottom sheet with the groups stacked and the rows
two across as 44px chips. Behavior in muds-ui.js, mudsMore. ── */
.rr-more-sec{display:block;padding:12px 16px 4px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);border-top:1px solid var(--border)}
.rr-more-sec:first-child{border-top:none}
.more-panel{background:var(--card);margin:0}
.more-panel a,.more-panel button:not(.btn-sm){min-height:44px}
.mg{display:grid;gap:4px 18px;padding:4px 14px 14px;border-top:1px solid var(--border)}
.mg-col .rr-more-sec{border-top:none;padding:12px 4px 4px}
.mg-col .mg-rows a,.mg-col .mg-rows button{border-top:none;padding:9px 8px;border-radius:8px;font-size:15px;display:block;width:100%;text-align:left;background:none;border:none;color:var(--ink);font-family:inherit;cursor:pointer}
.mg-col .mg-rows a:hover,.mg-col .mg-rows button:hover{background:rgba(247,242,230,.06)}
.mg-phone{grid-template-columns:1fr;gap:6px}
.mg-phone .mg-rows{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mg-phone .mg-rows a,.mg-phone .mg-rows button{border:1px solid var(--border);border-radius:10px;padding:10px 12px;min-height:44px;display:flex;align-items:center}
.mg-phone .mg-rows a:only-child,.mg-phone .mg-rows button:only-child{grid-column:1/-1}
/* ── v2.6.0 (Sep 9 2026) THE SHELL, one for every app. Born on PropOS
1.148.0 to 1.150.1 (the Planix, BankDash and Base borrows, Muds's
"steal like an artist") and moved here the night Nurture got the same
shell, per his standing order that similar elements stay the same
across Nurture and PropOS. Four pieces.
1. Rail icons: an inline SVG before the label in every rail link
(PropOS uses .nav-btn buttons, Nurture uses anchors, same rule).
2. The page bar (desktop only, has-rail): the page title as the one
big word, Search as a field with the slash key shown, the bell
with a count, the owner's initials. Markup:
An in page title carrying .pg-title hides under the bar on desktop
so the word is not printed twice.
3. The stat tile icon: .stat.has-ico puts a tinted circle left of the
number; .stat-ico.gold is for money and the headline count only.
Phones get a 36px circle so the label keeps its line.
4. Text tabs: .stage-pills.tabs turns the pill row into underlined
text tabs (BankDash), gold underline on the active one. Pills stay
pills everywhere else; tabs are for switching views on one page. */
.rail-nav a svg,.rail-nav .nav-btn svg{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.rail-nav .nav-btn{display:flex;align-items:center;gap:10px}
.pagebar{display:none}
@media(min-width:1000px){
body.has-rail .pagebar{display:flex;align-items:center;gap:12px;max-width:1280px;margin:0 auto;padding:18px 28px 0}
body.has-rail .pg-title{display:none}
.pb-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px;color:var(--ink);margin-right:12px;white-space:nowrap}
.pb-search{display:flex;align-items:center;gap:10px;min-height:44px;width:min(400px,40%);padding:0 14px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--grey);font:400 15px 'DM Sans',sans-serif;cursor:text;text-align:left}
.pb-search:hover{border-color:var(--border2);color:var(--ink)}
.pb-search svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.pb-search span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pb-search kbd{font:600 12px 'DM Mono',monospace;color:var(--grey);border:1px solid var(--border);border-radius:6px;padding:2px 7px}
.pb-bell{position:relative;width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--card);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.pb-bell:hover{border-color:var(--border2)}
.pb-bell svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pb-n{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--yellow);color:#161b1d;font:700 12px/20px 'DM Sans',sans-serif;text-align:center}
.pb-avatar{width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--elevated);color:var(--ink);font:700 14px/42px 'DM Sans',sans-serif;letter-spacing:.04em;text-align:center;text-decoration:none;cursor:pointer;padding:0}
.pb-avatar:hover{border-color:var(--yellow);color:var(--yellow)}
}
.stat.has-ico{display:grid;grid-template-columns:44px 1fr;column-gap:12px;row-gap:2px;align-content:start}
.stat-ico{grid-row:1/4;width:44px;height:44px;border-radius:50%;background:rgba(247,242,230,.08);display:flex;align-items:center;justify-content:center;align-self:start}
.stat-ico.gold{background:rgba(242,183,5,.14)}
.stat-ico svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.stat-ico.gold svg{stroke:var(--yellow)}
@media(max-width:599px){.stat.has-ico{grid-template-columns:36px 1fr;column-gap:10px}.stat-ico{width:36px;height:36px}.stat-ico svg{width:18px;height:18px}}
.stage-pills.tabs{gap:0;border-bottom:1px solid var(--border)}
.stage-pills.tabs .stage-pill{background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;color:var(--grey);padding:10px 16px;margin-bottom:-1px;font-size:15px;text-decoration:none}
.stage-pills.tabs .stage-pill:hover{color:var(--ink);border-color:transparent}
.stage-pills.tabs .stage-pill.active{color:var(--yellow);border-bottom-color:var(--yellow);font-weight:700;background:transparent}
/* ── v2.7.0 (Sep 9 2026) THE BASE BORROWS, Muds: GO on all five. Four
shell pieces from the Base SaaS kit, in our palette.
1. The detail pane. A list page on a desktop (1280 and up, has-rail)
becomes two panes: the roster on the left, the record on the right,
loaded into an iframe so the record's own page serves both. Markup
is made by mudsPane.mount(main): main gets .two-pane, its children
move into .pane-list, an aside.pane joins with a bar (title, Open
full page, Close), an empty line and the iframe. A row that is open
carries .rr-open. Phones never see the pane; the row navigates.
2. Embed mode. A page inside the pane carries body.embed: no rail, no
top bar, no bottom bar, no page bar, no left padding. The app sets
the class when the request came from an iframe (Sec-Fetch-Dest) or
carries ?embed=1.
3. The drawer. An overlay carrying .drawer-bg with a child .drawer
slides the sheet to the right edge at full height on desktop; on a
phone it is the same centered sheet it always was.
4. See more. mudsSeeMore(group, 8) hides rows past the cap inside an
.rr-group and appends one .rr-seemore button, See N more, that
shows them. Long sections stay scannable; nothing is paginated. */
.two-pane{display:block}
.pane{display:none}
.pane-list{min-width:0}
@media(min-width:1280px){
body.has-rail .two-pane{display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);gap:20px;align-items:start;max-width:none}
body.has-rail .two-pane>.pane{display:flex;flex-direction:column;position:sticky;top:18px;height:calc(100dvh - 36px);border:1px solid var(--border);border-radius:16px;background:var(--card);overflow:hidden;min-width:0}
.pane iframe{flex:1;width:100%;border:0;background:transparent;display:none}
.pane.on:not(.html) iframe{display:block}
.pane-body{flex:1;overflow:auto;padding:18px 20px;display:none;min-width:0}
.pane.on.html .pane-body{display:block}
.pane.on .pane-empty{display:none}
.pane-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--grey);font-size:16px;line-height:1.5;text-align:center;padding:24px}
.pane-bar{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--border);font-size:14px;color:var(--grey);min-height:44px}
.pane-bar .pane-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-weight:600}
.pane-bar a,.pane-bar button{color:var(--yellow);background:transparent;border:0;font:600 14px 'DM Sans',sans-serif;cursor:pointer;text-decoration:none;padding:0}
body.has-rail .two-pane .rr-row.rr-open{background:var(--elevated);box-shadow:inset 3px 0 0 var(--yellow)}
}
body.embed .rail,body.embed .topbar,body.embed .pwa-tabs,body.embed .pwa-tabs.always,body.embed #pagebar{display:none!important}
body.embed{padding-left:0!important;padding-bottom:0!important}
body.embed main{padding-bottom:24px}
body.embed .pg-title{display:block!important}
@media(min-width:1000px){
.drawer-bg{align-items:stretch!important;justify-content:flex-end!important;padding:0!important}
.drawer-bg>.drawer{height:100dvh;max-height:none!important;border-radius:0!important;width:min(560px,100%)!important;max-width:none!important;margin:0 0 0 auto!important;overflow-y:auto;overscroll-behavior:contain;border-top:0!important;border-bottom:0!important;border-right:0!important}
}
.rr-seemore{display:flex;justify-content:center;align-items:center;min-height:44px;width:100%;margin:0;border:0;border-top:1px solid var(--border);background:transparent;color:var(--yellow);font:600 15px 'DM Sans',sans-serif;cursor:pointer;border-radius:0 0 var(--r) var(--r)}
.rr-seemore:hover{background:var(--elevated)}
/* v2.7.1 the record inside a pane (openHtml), and the month grid. The
grid is the fifth Base borrow: a desktop calendar for the appointment
book, Sunday first, chips with the time and the first name, three per
day then a count. Phones keep the day list; .cal-desk never shows
under 1000px. */
.pane-hd{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.pane-name{font-size:20px;font-weight:700;color:var(--ink);line-height:1.2}
.pane-sub{font-size:14px;color:var(--grey);margin-top:2px}
.pane-kv{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:15px}
.pane-kv span{color:var(--grey);flex:0 0 auto}
.pane-kv b{color:var(--ink);font-weight:600;text-align:right;overflow-wrap:anywhere;min-width:0}
.pane-act{padding:10px 0;border-bottom:1px solid var(--border);font-size:15px;color:var(--ink);line-height:1.45}
.pane-when{font-size:13px;color:var(--grey);margin-top:2px}
.cal-desk{display:none}
@media(min-width:1000px){body.has-rail .cal-desk{display:block;margin:0 0 22px}}
.cal-head{display:flex;align-items:center;gap:12px;margin:0 0 10px;flex-wrap:wrap}
.cal-title{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:1px;color:var(--ink);flex:1}
.cal-nav{display:flex;gap:8px}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card)}
.cal-dow{padding:10px 8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);border-bottom:1px solid var(--border);text-align:center}
.cal-cell{min-height:104px;padding:8px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:4px;min-width:0}
.cal-cell:nth-child(7n){border-right:0}
.cal-cell:nth-last-child(-n+7){border-bottom:0}
.cal-d{font:500 15px 'DM Mono',monospace;color:var(--ink)}
.cal-cell.out .cal-d{color:var(--ink-dim)}
.cal-cell.today{box-shadow:inset 0 2px 0 var(--yellow)}
.cal-cell.today .cal-d{color:var(--yellow);font-weight:700}
.cal-chip{display:block;font-size:12px;line-height:1.3;padding:3px 7px;border-radius:6px;background:rgba(242,183,5,.14);color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-chip b{color:var(--yellow);font-weight:600}
a.cal-chip:hover{background:rgba(242,183,5,.28)}
.cal-more{font-size:12px;color:var(--grey);padding-left:7px}
/* v2.7.2 (Sep 9 2026) TABS THEN CHIPS, the YouTube channel page borrow
(Muds: the clean separation between the filter row and the sort row).
A list page with two rows reads as one thing: the IDENTITY row (which
list) is .stage-pills.tabs, underlined text tabs on one rule; the
FACET or SORT row under it is .stage-pills.facets, small chips, 32px,
13px, the picked one a cream tint with a hairline, never a fill, with
an optional small caps .facet-lbl in front (Kind, Where they stand,
Sort by). Identity fills, facets tint (PropOS law 1.114.2), now one
kit rule for every app. */
.stage-pills.tabs{margin-bottom:14px}
.stage-pills.facets{gap:6px;align-items:center;margin:0 0 16px}
.stage-pills.facets .facet-lbl{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grey);margin-right:6px}
.stage-pills.facets .stage-pill{min-height:32px;padding:4px 12px;font-size:13px;font-weight:600;border-radius:999px;background:transparent;border:1px solid var(--border);color:var(--grey);text-decoration:none;line-height:1.2}
.stage-pills.facets .stage-pill:hover{color:var(--ink);border-color:var(--border2)}
.stage-pills.facets .stage-pill.active{background:rgba(247,242,230,.10);color:var(--ink);border-color:rgba(247,242,230,.35)}
.stage-pills.facets .stage-pill.red{color:#fca5a5;border-color:rgba(204,0,0,.4)}
@media(max-width:900px){.stage-pills.facets .stage-pill{min-height:32px!important}}