/* ============================================================ muds-ui.css v2.2.3 (2026 09 03) 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} .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} } /* ---------- 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 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} /* 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}}