/* ============================================================ muds-apple27.css v1.4.0 (2026 09 14) THE APPLE 27 LAYER 1.4.0 STEP 9, the loading veil: glass over the page while data loads, a small house hopping in place with a gold window that blinks, shown by mudsLoading (muds-ui.js 1.4.0) only past 250ms; reduced motion pulses. 1.3.0 the full surface sweep (43 pages, four widths): on touch the top bar's wordmark and account capsule are 44 tall (they measured 27 and 36), the stage picker chips are 44 on a touch tablet (25 at 820), the tab badge is 12px (11). Nothing on a mouse moves. 1.2.2 the switch keeps its 64 by 28 inside a .field (the kit's field input rule stretched it to the row's width and pushed a phone sheet sideways). Rides the 1.2.1 query; the next app cut moves it. 1.2.1 Nurture's lead ladder (.ladder) becomes the same segmented track as a pill row [10456:17039], so its five steps sit on one row in a 330px column; 44 tall on touch, 28 on a mouse. 1.2.0 the full pass from the kits, read over the paid Figma account the same night. Every estimate is replaced by the file's number and its node: grabber 58 by 4 radius 2 cream 23 percent, 5 under the sheet top [5827:57567, 10525:1690]; phone sheet shadow 0 15 75 black 18 [10525:1640]; tab bar 21 from the sides and the bottom [10508:1833], selection cream 8.5 [5568:3931]; iPad tab bar 44 tall with 36 tabs, 15/20 labels, 700 when selected [2524:7957]; iPhone bars 54 [1:54520], macOS 52 [4365:31924]; segmented track 2 of padding, cream 10, 13/18 labels, segment pad 3 by 12 with 1 by 20 separators [10456:17039, 10456:16916, 4363:11734]; switch off track cream 28 [5433:20197]; rail selection inset 10 [4356:15434], rail section 700 13/16 [4397:25881]; page bar padding 8 8 8 18 gap 8 [4365:31924]; search capsule padding 10 gap 6 [4363:12315]; desktop bars blur 30 (macOS 60 at half) and phones 50 (iOS 100 at half). Kept on purpose and recorded: glass control fills cream 8 and 12 where Apple's read 5.3 and 9.8 (the contrast logged in 1.0.0), the 1px hairline where Apple's is .67, capsule buttons at 44 where macOS pushes are 24, the cream identity fill on a picked segment, gold for the switch. The blur scale is settled by Figma's own CSS export: the iOS Thick material, stored at 100, exports as backdrop blur 50px [510:78341]; the macOS sidebar, stored at 80, exports as 40px [4361:22112]. Half, on both files, which is what the layer uses. Liquid Glass itself records no blur, only fills and shadows [5584:31858]. Also 3C: the 901 to 999 band reads as the drawer, which ends the sideways scroll on a phone held sideways. 1.1.0 same night: an installed tablet in portrait floats the tab bar at the top like iPadOS 27 (step 3B); phones keep it at the bottom. 1.0.1 same evening: the name's inline type label holds the 22px line (layout sweep, Clients at 1280 and 1440). Served under the 1.0.0 query: the edge cache holds ten minutes and the workers refresh behind, so no app cut was spent on two pixels; the next cut of either app moves the query to 1.0.1. Muds, Sep 13 2026: make PropOS and Nurture look like the perfect iOS, iPadOS and macOS web app. Every number comes from Apple's iOS and iPadOS 27 and macOS 27 Figma kits, traced to node ids in PKA/design-system/APPLE_27_SPEC.md, rebuilt inside the brand law: gold #f2b705 is the action color only, the ground is #161b1d, text is cream, no new hues, DM Sans with Bebas for the large title. Loaded AFTER muds-ui.css by PropOS and Nurture only, so hellomuds.com is not reskinned; it folds into muds-ui.css 3.0 when Muds rules on the public site. Eight steps, each measured at 390, 820 and 1280. Every 1.0.0 assumption was trued in 1.2.0 (see above); none remain. ============================================================ */ /* ---------- STEP 0. TOKENS ---------- */ :root{ --font-text:'DM Sans',system-ui,sans-serif; --font-display:'Bebas Neue','DM Sans',sans-serif; --t-large-title:400 2.125rem/2.5625rem var(--font-display); --t-title1:700 1.75rem/2.125rem var(--font-text); --t-title2:700 1.375rem/1.75rem var(--font-text); --t-title3:600 1.25rem/1.5625rem var(--font-text); --t-headline:600 1.0625rem/1.375rem var(--font-text); --t-body:400 1rem/1.375rem var(--font-text); --t-body-em:600 1rem/1.375rem var(--font-text); --t-callout:400 1rem/1.3125rem var(--font-text); --t-subhead:400 .9375rem/1.25rem var(--font-text); --t-footnote:400 .8125rem/1.125rem var(--font-text); --t-caption:600 .75rem/1rem var(--font-text); --mat-ultrathin:rgba(22,27,29,.32); --mat-thin:rgba(22,27,29,.51); --mat-regular:rgba(22,27,29,.63); --mat-thick:rgba(22,27,29,.78); --mat-chrome:rgba(33,39,41,.90); /* the tab bar: thick measured 3.76 to 1 for the gold label on its pill over a cream backdrop; .86 clears 4.8 over cream and 5.3 over a gold button */ --mat-bar:rgba(22,27,29,.86); --blur-ios:saturate(1.6) blur(50px); --blur-mac:saturate(1.6) blur(30px); --blur-edge:blur(3px); --rim:0 0 0 .5px rgba(247,242,230,.14); --hair:rgba(247,242,230,.10); --stroke-float:rgba(247,242,230,.20); --lg-shadow:0 8px 48px rgba(0,0,0,.45); --sheet-shadow:0 18px 54px rgba(0,0,0,.57),0 0 1px rgba(0,0,0,.8); --fill-control:rgba(247,242,230,.08); --fill-control-on:rgba(247,242,230,.12); --fill-select:rgba(247,242,230,.10); --fill-tab:rgba(247,242,230,.085); --fill-track:rgba(247,242,230,.10); --switch-off:rgba(247,242,230,.28); --r-capsule:999px; --r-glass:34px; --r-menu:12px; --r-float:16px; --r-sheet-touch:38px; --r-btn:var(--r-capsule); --tab-h:62px; --tab-gap:max(16px,min(21px,env(safe-area-inset-bottom,0px))); --bar-h:52px; } /* iPhone and iPad bars are 54 [1:54520, 5564:41843]; the macOS unified toolbar is 52 [4365:31924] */ @media(max-width:999px){:root{--bar-h:54px}} /* ---------- STEP 1. CAPSULE BUTTONS AND GLASS SECONDARIES ---------- The iOS 27 and macOS toolbar shape is the capsule [4363:11823]. The secondary is Liquid Glass small in the ground's own tint: cream 8% with a cream hairline rim (cream text 12.63 to 1 on the composite). A secondary never turns gold, a gold secondary reads as a second primary. Apple does not lift controls, so the primary loses its lift and glow and keeps the .97 press. Heights do not move. */ .btn-yellow,.btn-dark,.btn-ghost,.btn-red{border-radius:var(--r-btn)!important} .btn-dark{background:var(--fill-control);border:0;box-shadow:var(--rim);color:var(--ink)} .btn-dark:hover{background:var(--fill-control-on);border:0;color:var(--ink);box-shadow:var(--rim)} .btn-ghost{border:0;background:transparent;color:var(--grey)} .btn-ghost:hover{border:0;background:rgba(247,242,230,.06);color:var(--ink)} .btn-red{border:0;background:rgba(255,49,49,.14);color:var(--red-t)} .btn-red:hover{border:0;background:rgba(255,49,49,.22);color:var(--red-t)} @media(hover:hover) and (pointer:fine){.btn-yellow:hover{transform:none;box-shadow:none}} .btn-yellow:active{box-shadow:none} .fsum-btn{border-radius:var(--r-capsule)} .choices:not(.list) span{border-radius:var(--r-capsule)} .topbar .acct,.rail-foot .acct{border:0;border-radius:var(--r-capsule);background:var(--fill-control);box-shadow:var(--rim)} input[type=search]{border-radius:var(--r-capsule)!important} /* ---------- STEP 2. THE ROSTER LIST, APPLE'S MEASUREMENTS ---------- The anatomy stays by Muds's ruling (tile, name, facts, one gold action, More). A one line row is Apple's Tall row, 12 + 44 + 12 = 68 [550:50515], 16 on the sides; the separator starts where the text starts and stops 16 short [5534:22992]; the group loses its border (elevation is the card on the ground, borders last). */ .rr-group{border:0} .rr-row{position:relative;padding:12px 16px;gap:12px;border-top:0} .rr-row+.rr-row::before{content:"";position:absolute;top:0;left:72px;right:16px;height:1px;background:var(--hair);pointer-events:none} .rr-row+.rr-row:has(>.rr-dotcol)::before{left:92px} .rr-row+.rr-row:has(>.rr-pick)::before{left:98px} .rr-name{font:var(--t-headline);color:var(--ink)} /* 1.0.1: a smaller inline label inside the name (SELLER, BUYER) sat on its own baseline and stretched the 22px line to 24, which put four Clients rows at 261px in the layout sweep; at line height 1 the name holds 22 */ .rr-name .dc-type{line-height:1} .rr-fact{font:var(--t-subhead);color:var(--grey)} .rr-fact.rr-next{color:var(--ink)} .rr-fact.rr-warn{color:var(--red-t)} .rr-fact.rr-why{color:var(--yellow)} .rr-fact::before{background:var(--ink-dim);top:.55em} .rr-fact.rr-why::before{background:var(--yellow)} .rr-right{font:var(--t-subhead)} .rr-right.rr-money{font:500 .9375rem/1.25rem 'DM Mono',monospace} .rr-chev{color:var(--ink-dim)} .rr-dotcol{padding-top:18px} .rr-sec-lbl{font:var(--t-headline);letter-spacing:0;text-transform:none;color:var(--grey)} /* the kind header (Residential, Commercial) carries an inline size and tracking from its page; tracked mixed case at 16 read smaller than its own groups, so it takes Title 3 in cream and the groups under it stay Headline in grey */ .rr-sec-lbl[style*="letter-spacing"]{font:var(--t-title3)!important;letter-spacing:0!important;color:var(--ink)} .rr-seemore{border-top:0;box-shadow:inset 0 1px 0 var(--hair)} @media(max-width:480px){.rr-row{padding:12px 16px;gap:12px}} @media(hover:none){.rr-row:hover{background:transparent}} .rr-row:active{background:var(--fill-control)} .rr-more{border:0;box-shadow:var(--rim);border-radius:var(--r-menu)} .rr-more a,.rr-more button{border-top:0;box-shadow:inset 0 1px 0 var(--hair)} .rr-more a:first-child,.rr-more button:first-child{box-shadow:none} @media(min-width:1000px){ .rr-group.rr-table .rr-row,.rr-group.rr-table .rr-row.rr-wrap{min-height:52px;padding:8px 16px} .rr-group.rr-table .rr-row+.rr-row::before{left:16px} .rr-group.rr-table .rr-name{font:var(--t-body-em)} } @media(min-width:1280px){ body.has-rail .two-pane .rr-row.rr-open{margin:0 10px;border-radius:8px;background:var(--fill-select);box-shadow:none} body.has-rail .two-pane .rr-row.rr-open::before,body.has-rail .two-pane .rr-row.rr-open+.rr-row::before{display:none} } /* ---------- STEP 3. THE LIQUID GLASS TAB BAR ---------- iPhone [3:70967]: a floating capsule 25 from each side and 25 above the bottom edge (16 with no device inset), 62 tall with 4 of glass around a 54 tab row, the selection a capsule as tall as the tab. Thick fill, so the gold active label clears 4.5 to 1 over the brightest backdrop. The clearance under a page is derived from the bar, never guessed. Phones and tablets only, per the navigation law. */ @media(max-width:999px){ html.pwa .pwa-tabs,.pwa-tabs.always{width:min(calc(100% - 42px),620px);padding:4px;gap:0;bottom:var(--tab-gap); background:var(--mat-bar);-webkit-backdrop-filter:var(--blur-ios);backdrop-filter:var(--blur-ios); border:0;box-shadow:var(--lg-shadow),var(--rim),inset 0 1px 0 rgba(247,242,230,.10)} .pwa-tabs button,.pwa-tabs button.btn-ghost,.pwa-tabs a{min-height:54px!important;padding:6px 8px 7px!important;font:600 .75rem/1rem var(--font-text)!important;letter-spacing:0;border-radius:var(--r-capsule)!important;background:transparent} .pwa-pill{top:4px;bottom:4px;background:var(--fill-tab);box-shadow:none} html.pwa body,body.has-bar{padding-bottom:calc(var(--tab-h) + var(--tab-gap) + 16px)} body.has-bar .toast-stack,html.pwa .toast-stack{bottom:calc(var(--tab-h) + var(--tab-gap) + 8px)} } @media(max-width:999px) and (display-mode:standalone){ .pwa-tabs{width:min(calc(100% - 42px),620px);padding:4px;gap:0;bottom:var(--tab-gap); background:var(--mat-bar);-webkit-backdrop-filter:var(--blur-ios);backdrop-filter:var(--blur-ios); border:0;box-shadow:var(--lg-shadow),var(--rim),inset 0 1px 0 rgba(247,242,230,.10)} body{padding-bottom:calc(var(--tab-h) + var(--tab-gap) + 16px)} } /* ---------- STEP 3B. THE IPAD TAB BAR SITS AT THE TOP (1.1.0) ---------- Muds left the iPad ruling to the council, Sep 13 2026. iPadOS 27 puts the tab bar at the top in portrait and turns it into the sidebar when the screen is wide, which PropOS and Nurture already do from 1000px (the rail). So an installed tablet in portrait, 700 to 999 wide and at least 600 tall, floats the same glass capsule under the brand bar. A phone held sideways (956 by 440) fails the height floor and keeps the bottom bar. The clearance is derived from the bar: 10 above, the 62 bar, 10 below. The brand bar carries the clearance as its bottom margin so the page starts under the capsule; the drawer opens under it; toasts and the page foot go back to the bottom edge. Both pill scripts measure sideways only, and the Nurture frame fit reads a bar in the lower half only, so no script changes. */ :root{--tab-top-clear:calc(var(--tab-h) + 20px)} @media(min-width:700px) and (max-width:999px) and (min-height:600px){ :root{--tab-h:44px} html.pwa .pwa-tabs,.pwa-tabs.always{top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 10px);bottom:auto;width:min(491px,calc(100% - 80px))} html.pwa .pwa-tabs button,html.pwa .pwa-tabs button.btn-ghost,.pwa-tabs.always a{min-height:36px!important;padding:8px 18px!important;font:500 .9375rem/1.25rem var(--font-text)!important} html.pwa .pwa-tabs button.active,.pwa-tabs.always a.active,.pwa-tabs.always a.on{font-weight:700!important} html.pwa .topbar,body:has(>.pwa-tabs.always) .topbar{margin-bottom:var(--tab-top-clear)} html.pwa body,body:has(>.pwa-tabs.always){padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))} html.pwa .toast-stack,body:has(>.pwa-tabs.always) .toast-stack{bottom:calc(24px + env(safe-area-inset-bottom,0px))} html.pwa .mobile-nav,body:has(>.pwa-tabs.always) .mobile-nav{top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + var(--tab-top-clear));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))} } @media(display-mode:standalone) and (min-width:700px) and (max-width:999px) and (min-height:600px){ .pwa-tabs{top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 10px);bottom:auto;width:min(491px,calc(100% - 80px))} .pwa-tabs button{min-height:36px!important;padding:8px 18px!important;font:500 .9375rem/1.25rem var(--font-text)!important} .pwa-tabs button.active{font-weight:700!important} .topbar{margin-bottom:var(--tab-top-clear)} body{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))} .toast-stack{bottom:calc(24px + env(safe-area-inset-bottom,0px))} .mobile-nav{top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + var(--tab-top-clear));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))} } /* ---------- STEP 3C. THE TOP BAR BETWEEN THE DRAWER AND THE RAIL (1.2.0) ---------- The kit's drawer takes over up to 900 and the rail from 1000. Between them PropOS drew the whole desktop top bar (eight nav buttons, Search, Sign out) and Sign out ran 107px past the edge of a phone held sideways (956 by 440, measured live). That band reads as the drawer too. Nurture has no top nav, so nothing changes there. */ @media(min-width:901px) and (max-width:999px){ .topbar-nav,.topbar-divider,.topbar-sub{display:none} .hamburger{display:flex} } /* ---------- STEP 3D. TOUCH FLOORS THE SWEEP FOUND (1.3.0) ---------- */ @media(pointer:coarse),(max-width:900px){ .topbar .wordmark,.topbar .acct,.topbar #topbar-search{min-height:44px;display:inline-flex;align-items:center} .pill-select{min-height:44px} } .pwa-tabs .pwa-badge{font-size:12px} /* ---------- STEP 4. THE TYPE RAMP ON TITLES AND META ---------- One ramp for phone, tablet and desktop, iOS sizes, the 16px reading floor and the 12px label floor held; Bebas keeps the large title. */ .page-title{font:var(--t-large-title);text-transform:uppercase;letter-spacing:.06em} .pane-name{font:var(--t-title2)} .stat-l{font:var(--t-subhead)} .stat-s{font:var(--t-footnote)} .card-hdr-sub{font:var(--t-subhead)} .page-status{font:var(--t-subhead)} .prose h3{font:var(--t-headline)} .toast{font:var(--t-callout)} .pane-sub{font:var(--t-subhead)} .pane-when{font:var(--t-footnote)} /* ---------- STEP 5. BARS AND THE DESKTOP SHELL ---------- The top bar is Apple's unified toolbar height, 52 [I4373:48605;4365:31924], a thick glass with a hairline instead of a border. Nav buttons are capsules, 36 on a mouse and 44 on touch, the active one a cream wash with its gold label. The desktop page bar sticks like a macOS toolbar over a hard scroll edge; its controls are 36 glass capsules. The rail is the macOS sidebar, 240 wide [4398:30637], items 36 [4358:6867], the wordmark aligned to the bar, the active item a cream wash so gold stays the action color. The pane is a macOS window: 16 radius, a light stroke, a 52 bar, 20 padding. */ .topbar{height:var(--bar-h);background:var(--mat-thick);-webkit-backdrop-filter:var(--blur-ios);backdrop-filter:var(--blur-ios);border-bottom:0;box-shadow:inset 0 -1px 0 var(--hair)} @media(min-width:1000px){.topbar{-webkit-backdrop-filter:var(--blur-mac);backdrop-filter:var(--blur-mac)}} .mobile-nav{top:var(--bar-h)} /* the top bar's Search sits beside the account capsule, so it is a glass capsule too; a plain word beside a filled pill read as two kits */ .topbar #topbar-search{background:var(--fill-control);box-shadow:var(--rim);border:0;color:var(--ink);padding-left:10px;padding-right:10px} .topbar #topbar-search:hover{background:var(--fill-control-on)} .nav-btn{border:0;border-radius:var(--r-capsule);min-height:36px} .nav-btn:hover{border:0;background:var(--fill-control)} .nav-btn.active{border:0;background:var(--fill-select)} @media(pointer:coarse),(max-width:900px){.nav-btn{min-height:44px}} .mobile-nav .nav-btn{border:0;border-radius:var(--r-menu);background:transparent} .mobile-nav .nav-btn.active{background:var(--fill-select);border:0} @media(min-width:1000px){ body.has-rail{padding-left:240px} .rail{width:240px;padding:0 10px 20px;border-right:0} .rail-mark{display:flex;align-items:center;height:var(--bar-h);padding:0 12px;margin:0 0 8px} .rail-nav a,.rail-nav .nav-btn{min-height:36px;padding:0 16px;font:500 .9375rem/1.25rem var(--font-text);letter-spacing:0;border:0;border-radius:8px} .rail-nav a.active,.rail-nav .nav-btn.active{background:var(--fill-select);color:var(--ink);border:0} .rail-nav a:hover,.rail-nav .nav-btn:hover{background:var(--fill-control);color:var(--ink)} .rail-sec{padding:18px 16px 9px;font:700 .8125rem/1rem var(--font-text);text-transform:none;letter-spacing:0;color:rgba(247,242,230,.55)} .rail-mark{padding:0 16px} body.has-rail .pagebar{position:sticky;top:0;z-index:90;height:var(--bar-h);padding:8px 8px 8px 18px;gap:8px;margin:0 auto; background:var(--mat-thick);-webkit-backdrop-filter:var(--blur-edge);backdrop-filter:var(--blur-edge);box-shadow:inset 0 -1px 0 var(--hair)} .pb-title{line-height:1} .pb-search{min-height:36px;height:36px;padding:0 10px;gap:6px;border:0;border-radius:var(--r-capsule);background:var(--fill-control);box-shadow:var(--rim)} .pb-search:hover{border:0;background:var(--fill-control-on)} .pb-bell,.pb-avatar{width:36px;height:36px;border:0;border-radius:50%;background:var(--fill-control);box-shadow:var(--rim)} .pb-avatar{line-height:36px;font-size:13px} .pb-bell:hover{border:0;background:var(--fill-control-on)} .pb-avatar:hover{border:0;background:var(--fill-control-on);color:var(--ink)} } @media(min-width:1000px) and (pointer:coarse){ .rail-nav a,.rail-nav .nav-btn{min-height:44px;border-radius:var(--r-capsule)} .pb-search{min-height:44px;height:44px} .pb-bell,.pb-avatar{width:44px;height:44px} .pb-avatar{line-height:44px} } @media(min-width:1280px){ body.has-rail .two-pane>.pane{top:64px;height:calc(100dvh - 82px);border:1px solid var(--stroke-float)} .pane-bar{min-height:var(--bar-h);border-bottom:0;box-shadow:inset 0 -1px 0 var(--hair)} .pane-body{padding:20px} } /* ---------- STEP 6. THE SEGMENTED CONTROL ---------- A plain pill row becomes one capsule track: the macOS toolbar XL, a 36 track with 28 segments on a mouse [4363:11730], 44 segments on touch. The selected segment keeps the cream fill with dark text, the brand's identity fill, where Apple uses a dark grey. Tabs and facets keep their own look. A long set scrolls inside the track, never the page. */ .stage-pills:not(.tabs):not(.facets){display:inline-flex;flex-wrap:nowrap;gap:4px;padding:2px;border-radius:var(--r-capsule); background:var(--fill-track);box-shadow:var(--rim);max-width:100%;overflow-x:auto;scrollbar-width:none} .stage-pills:not(.tabs):not(.facets)::-webkit-scrollbar{display:none} .stage-pills:not(.tabs):not(.facets) .stage-pill{position:relative;border:0;background:transparent;min-height:28px;padding:3px 12px;font:600 .8125rem/1.125rem var(--font-text);white-space:nowrap;flex:0 0 auto;border-radius:var(--r-capsule)} /* the 1 by 20 separator between two unpicked segments [4363:11734]; it hides beside the picked one */ .stage-pills:not(.tabs):not(.facets) .stage-pill+.stage-pill::before{content:"";position:absolute;left:-2.5px;top:50%;width:1px;height:20px;margin-top:-10px;background:rgba(247,242,230,.20)} .stage-pills:not(.tabs):not(.facets) .stage-pill.active+.stage-pill::before,.stage-pills:not(.tabs):not(.facets) .stage-pill.active::before{display:none} .stage-pills:not(.tabs):not(.facets) .stage-pill:hover{border:0;color:var(--ink);background:rgba(247,242,230,.06)} .stage-pills:not(.tabs):not(.facets) .stage-pill.active{background:#f7f2e6;color:#161b1d;border:0} .stage-pills.facets .stage-pill{border:0;background:var(--fill-control);box-shadow:var(--rim)} .stage-pills.facets .stage-pill:hover{border:0;background:var(--fill-control-on)} .stage-pills.facets .stage-pill.active{background:rgba(247,242,230,.16);box-shadow:0 0 0 .5px rgba(247,242,230,.35);border:0} /* the Nurture lead ladder is a segmented control too */ .ladder{display:flex;flex-wrap:nowrap;gap:4px;padding:2px;border-radius:var(--r-capsule);background:var(--fill-track);box-shadow:var(--rim);margin:10px 0 4px} .ladder-step{flex:1 1 0;min-width:0;justify-content:center;min-height:28px!important;padding:3px 6px!important;border:0!important;background:transparent;color:var(--grey);font:600 .75rem/1rem var(--font-text)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ladder-step:hover{color:var(--ink);background:rgba(247,242,230,.06)} .ladder-step.done{color:var(--ink)} .ladder-step.now{background:#f7f2e6!important;color:#161b1d!important} @media(max-width:900px),(pointer:coarse){.ladder-step{min-height:44px!important}} /* ---------- STEP 7. SHEETS ---------- Phones: a real bottom sheet, full width, 38 top corners, a grabber, Apple's light overlay (black 20% [5551:18479]); the footer keeps the device inset inside it. Desktop keeps Muds Glass by the brand ruling, and gains the macOS sheet's light stroke and deep shadow [4358:15436]. */ .modal-bg{background:rgba(0,0,0,.2);-webkit-backdrop-filter:none;backdrop-filter:none} @media(max-width:599px){ .modal-bg.show{align-items:flex-end} .modal-bg>.modal{position:relative;width:100%;max-width:none;max-height:calc(100dvh - 24px);border-radius:var(--r-sheet-touch) var(--r-sheet-touch) 0 0;border-bottom:0;padding-top:28px;box-shadow:0 15px 75px rgba(0,0,0,.18)} .modal-bg>.modal::before{content:"";position:absolute;top:5px;left:50%;width:58px;height:4px;margin-left:-29px;border-radius:2px;background:rgba(247,242,230,.23)} } @media(min-width:1000px){ .modal{border:1px solid var(--stroke-float);border-radius:var(--r-float);box-shadow:var(--sheet-shadow)} .drawer-bg>.drawer{border-left:1px solid var(--stroke-float)!important;box-shadow:var(--sheet-shadow)} } .modal-actions{border-top:0;box-shadow:inset 0 1px 0 var(--hair)} /* ---------- STEP 8. MENUS AND THE SWITCH ---------- The desktop More board is a macOS menu: rows 32 on a mouse with an 8 radius hover capsule [4353:3044], 15px text (Apple's 13 sits under our floor), a mixed case 13 bold header [4353:3149]. Phone chips become capsules. The switch is the iOS 64 by 28 track with a 38 by 24 knob [5660:39603], gold when on with a dark knob (cream on gold measures 1.63, dark on gold 9.56), in a 44 row. Markup: */ .rr-more-sec{font:700 .8125rem/1.125rem var(--font-text);letter-spacing:0;text-transform:none;color:var(--ink-dim);border-top:0} .mg{border-top:0;box-shadow:inset 0 1px 0 var(--hair)} .mg-col .mg-rows a,.mg-col .mg-rows button{min-height:32px;padding:6px 8px;border-radius:8px;font:var(--t-subhead)} .mg-col .mg-rows a:hover,.mg-col .mg-rows button:hover{background:var(--fill-select)} .mg-phone .mg-rows a,.mg-phone .mg-rows button{border:0;border-radius:var(--r-capsule);background:var(--fill-control);box-shadow:var(--rim);min-height:44px} @media(max-width:900px),(pointer:coarse){.mg-col .mg-rows a,.mg-col .mg-rows button{min-height:44px}} .switch,.field .switch,.field input.switch{-webkit-appearance:none;appearance:none;position:relative;flex:none;width:64px!important;min-width:64px;height:28px!important;min-height:28px!important;padding:0!important;margin:8px 0;border-radius:var(--r-capsule)!important;border:0!important;box-shadow:none; background:var(--switch-off);cursor:pointer;transition:background .2s ease;vertical-align:middle} .switch::after{content:"";position:absolute;top:2px;left:2px;width:38px;height:24px;border-radius:var(--r-capsule); background:#f7f2e6;box-shadow:0 3px 36px rgba(0,0,0,.05);transition:transform .25s cubic-bezier(.23,1,.32,1),background .2s ease} .switch:checked{background:var(--yellow)} .switch:checked::after{transform:translateX(22px);background:#161b1d} .switch:focus-visible{outline:2px solid var(--yellow);outline-offset:2px} .switch:disabled{opacity:.5;cursor:default} @media(prefers-reduced-motion:reduce){.switch,.switch::after{transition:none}} /* ---------- STEP 9. THE LOADING VEIL ---------- Apple blurs what is behind a wait and shows one small mark. Ours is a little house that hops in place, a gold window blinking, over a glass veil. mudsLoading.show() adds .on after 250ms and keeps it 400ms at least, so a fast load never flashes it. Reduced motion: a soft pulse. */ .ld-veil{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(22,27,29,.38);-webkit-backdrop-filter:saturate(1.3) blur(18px);backdrop-filter:saturate(1.3) blur(18px);opacity:0;pointer-events:none;transition:opacity .22s cubic-bezier(.23,1,.32,1)} .ld-veil.on{opacity:1;pointer-events:auto} .ld-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 26px 18px;border-radius:22px;background:rgba(33,39,41,.72);border:1px solid rgba(247,242,230,.10);box-shadow:0 18px 60px rgba(0,0,0,.35)} .ld-house{width:64px;height:64px;overflow:visible;display:block} .ld-house .body{fill:#f7f2e6} .ld-house .roof{fill:#f2b705} .ld-house .door{fill:#161b1d} .ld-house .win{fill:#f2b705;animation:ld-blink 1.4s steps(1) infinite} .ld-house .hop{transform-origin:32px 56px;animation:ld-hop 1.1s cubic-bezier(.34,1.56,.64,1) infinite} .ld-house .shadow{fill:rgba(0,0,0,.35);transform-origin:32px 60px;animation:ld-shadow 1.1s cubic-bezier(.34,1.56,.64,1) infinite} .ld-lbl{font:600 13px/1 'DM Sans',sans-serif;letter-spacing:.02em;color:#d8d4c8} @keyframes ld-hop{0%,100%{transform:translateY(0) scale(1,1)}22%{transform:translateY(0) scale(1.06,.92)}50%{transform:translateY(-12px) scale(.96,1.06)}78%{transform:translateY(0) scale(1.04,.94)}} @keyframes ld-shadow{0%,100%{transform:scale(1,1);opacity:.9}50%{transform:scale(.6,.7);opacity:.45}} @keyframes ld-blink{0%,55%{opacity:1}56%,72%{opacity:.25}73%{opacity:1}} @media(prefers-reduced-motion:reduce){.ld-house .hop,.ld-house .shadow,.ld-house .win{animation:ld-pulse 1.6s ease-in-out infinite}@keyframes ld-pulse{0%,100%{opacity:1}50%{opacity:.55}}}