/* ---- The phone's menu, bar and icons, beside Meta's Muse (the Founder, 17 October 2026, 02:15, his iPhone) ----
   "I really like how the menu opens on the left side… it's nicer, cooler"; "their bottom navigation bar is better: no
   text, stuck on the bottom, the shade, the shadow, its proportions"; "their icons are rounded, everything looks neat".
   The page slides aside as a rounded card while the menu is revealed under it (muse-shell.js holds the page still while
   it is aside, the window at its top, so it slides back to where the person left it).
   17 October 2026, 07:00–07:12 (his iPhone): the drawer's top was cut off and a grey piece showed at the card's corner;
   the sections are unlabelled, Work, Staff and Account; the foot is his own row opening Settings (settings-sheet.css)
   with Ask Symba beside it, no Shortcuts star and no Search field. */

/* Icons: round ends and joins on every stroke, one weight across the set (the shapes are rounded in their paths). */
.icon{stroke-width:1.8}
svg.icon,svg.icon :is(path,line,polyline,polygon,rect,circle,ellipse){stroke-linecap:round;stroke-linejoin:round}

body{--drawer-w:min(79vw,330px);--drawer-bg:#fbfbfc;--drawer-ink:#1c1b20;--drawer-muted:#8a8a93;--drawer-line:#e6e6ea;--drawer-pill:#ececef;--drawer-field:#fff;--bar-bg:#fff;--bar-line:#0000000d;--bar-pill:#ececef;--bar-ink:#1c1b20;--bar-shadow:0 8px 28px #0000001a,0 1px 3px #0000000f;--card-veil:#ffffff73;--edge-shade:#0000001f;--card-shade:#00000024}
body[data-theme=dark]{--drawer-bg:#101115;--drawer-ink:#f0f1f5;--drawer-muted:#9a9dab;--drawer-line:#2b2d36;--drawer-pill:#262832;--drawer-field:#1a1b21;--bar-bg:#1e2028;--bar-line:#ffffff14;--bar-pill:#30323d;--bar-ink:#f0f1f5;--bar-shadow:0 8px 28px #00000080,0 1px 3px #00000066;--card-veil:#0000005c;--edge-shade:#00000099;--card-shade:#000000b3}

/* The drawer's own words (labels, the person's row) belong to the phone; the wide left menu stays as it was. */
.drawer-label,.drawer-search,.drawer-card,.sidebar-bottom>.drawer-settings{display:none}

@media (max-width:700px){
 /* The drawer: drawn in beside the page as it slides, on a near-white ground, its top under the phone's own top. */
 body .sidebar,body.collapsed .sidebar{top:0;bottom:0;height:auto;width:var(--drawer-w);max-width:none;background:var(--drawer-bg);color:var(--drawer-ink);border:0;box-shadow:none;transform:translateX(-100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);padding:calc(14px + env(safe-area-inset-top,0px)) 10px 0;gap:0;overflow-y:auto;overscroll-behavior:contain;z-index:40}
 body.menu-open .sidebar{transform:none}
 [dir=rtl] body .sidebar,[dir=rtl] body.collapsed .sidebar{transform:translateX(100%)}
 [dir=rtl] body.menu-open .sidebar{transform:none}

 /* While the page is aside nothing under it scrolls: the document is held to the screen (muse-shell.js puts the window
    at its top first), so nothing fixed is drawn above the glass. Behind the card's rounded corners is the drawer's
    own ground, never the page's grey. */
 html:has(body.menu-open),body.menu-open{background:var(--drawer-bg)!important}
 /* !important: an agent's page tints the body (agent-colour.css), and that tint showed in the corners' cut on an agent's
    page (the Founder, 22 October 2026, ~23:45: "you fixed it before and then ruined it again"). */
 body.drawer-held{position:fixed;inset:0;width:100%;overflow:hidden;overscroll-behavior:none}
 body.drawer-held .app-shell{position:fixed;inset:0;width:100%;height:auto;overflow:hidden;z-index:41;background:var(--canvas,#f7f8fa);margin:0;transform:translateX(0)}
 /* The bar is fixed inside the card, which is scrolled to where the person was: it is set back by that much. */
 body.drawer-held .app-shell>.bottom-nav.agent-dock{bottom:calc(max(10px,calc(env(safe-area-inset-bottom,0px) - 10px)) - var(--drawer-held-y,0px))!important}

 /* The page: a rounded card that slides aside, a soft shade on the drawer's edge beside it, a light veil over it (Muse's,
    the Founder, 17 October 2026, 07:51); a press on it closes the menu. Its corners are cut by a clip, which cuts
    everything in the card, the top bar too: a radius alone left Safari drawing a dark square behind each corner. */
 body .app-shell{transition:transform .32s cubic-bezier(.2,.8,.2,1),clip-path .32s cubic-bezier(.2,.8,.2,1)}
 body.menu-open .app-shell{transform:translateX(var(--drawer-w))}
 body.drawer-held .app-shell{clip-path:inset(0 round 0)}
 body.drawer-held.menu-open .app-shell{clip-path:inset(0 round 40px)}
 [dir=rtl] body.menu-open .app-shell{transform:translateX(calc(-1 * var(--drawer-w)))}
 body .app-shell::after{content:"";position:absolute;left:0;right:0;top:var(--drawer-held-y,0px);height:100%;background:var(--card-veil);opacity:0;pointer-events:none;transition:opacity .32s;z-index:60}
 body.drawer-held.menu-open .app-shell::after{opacity:1}
 body.menu-open .app-shell .topbar{backdrop-filter:none;-webkit-backdrop-filter:none}
 /* The card as Muse's (the Founder, 21 October 2026, beside Muse's drawer): 40px corners on its edge, and a wide, light
    shadow cast from that edge onto the menu, darker in dark. The clip that cuts the corners would cut a shadow on the
    card itself, so the shadow is the press-to-close layer's, which lies exactly over the card; it fades in as the card
    slides. */
 body.menu-open .drawer-backdrop{display:block;position:fixed;inset:0 0 0 var(--drawer-w);background:transparent;border:0;border-radius:40px 0 0 40px;z-index:42;cursor:pointer;box-shadow:-12px 0 40px var(--card-shade);animation:drawer-shade .32s cubic-bezier(.2,.8,.2,1)}
 [dir=rtl] body.menu-open .drawer-backdrop{inset:0 var(--drawer-w) 0 0;border-radius:0 40px 40px 0;box-shadow:12px 0 40px var(--card-shade)}
 body.menu-open .agent-dock{visibility:visible}

 /* The top: the mark small and a round close; the account (its logo and name) under it. The person is at the foot. */
 body .sidebar .sidebar-top{padding:0 8px;min-height:44px;flex:none}
 body .sidebar .brand{gap:8px;font-size:11px;letter-spacing:.18em;color:var(--drawer-muted)}
 body .sidebar .brand img{width:22px;height:22px}
 body .sidebar .sidebar-top .mobile-only{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--drawer-line);background:var(--drawer-field);color:var(--drawer-ink)}
 body .sidebar .sidebar-top .mobile-only .icon{width:18px;height:18px}
 body .sidebar :is(.account-button,.person-group-items){display:none!important}
 body .sidebar .name-card{margin:12px 8px 4px;flex:none}
 body .sidebar .name-card>.account-layer{padding:0}

 /* Sections: a small grey label in capitals; a hairline between sections; the first run has none. */
 body .sidebar .drawer-label{display:block;margin:14px 12px 6px;font-size:12px;line-height:1.3;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--drawer-muted)}
 body .sidebar .drawer-label:not(:first-child){border-top:1px solid var(--drawer-line);padding-top:16px;margin-top:12px;margin-inline:12px}
 body .sidebar .nav-stack{gap:2px;padding-top:8px}
 body .sidebar .nav-stack>a.nav-item[href="#/settings"]{display:none}
 body .sidebar :is(.nav-stack,.person-group-items)>.nav-item{min-height:44px;padding:0 12px;gap:14px;border-radius:14px;color:var(--drawer-ink);font-size:17px;font-weight:450;background:transparent}
 body .sidebar :is(.nav-stack,.person-group-items)>.nav-item .icon{width:22px;height:22px;color:var(--drawer-ink)}
 body .sidebar :is(.nav-stack,.person-group-items)>.nav-item:hover{background:color-mix(in srgb,var(--drawer-pill) 60%,transparent)}
 body .sidebar :is(.nav-stack,.person-group-items)>.nav-item.active,body .sidebar :is(.nav-stack,.person-group-items)>.nav-item.active:hover,body[data-theme=dark] .sidebar :is(.nav-stack,.person-group-items)>.nav-item.active{background:var(--drawer-pill);color:var(--drawer-ink);font-weight:500}
 body .sidebar :is(.nav-stack,.person-group-items)>.nav-item.active .icon,body[data-theme=dark] .sidebar .nav-item.active .icon{color:var(--drawer-ink)}

 /* The foot: the Settings gear, and Ask Symba round beside it. */
 body .sidebar .sidebar-bottom{position:sticky;bottom:0;margin-top:auto;display:flex;align-items:center;gap:8px;border-top:0;padding:14px 4px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--drawer-bg) 14px)}
 body .sidebar .sidebar-bottom>:is([data-shortcuts-open],.desktop-only,.drawer-search){display:none!important}
 body .sidebar .sidebar-bottom>.nav-item{flex:none;position:relative;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;border:1px solid var(--drawer-line);background:var(--drawer-field);color:var(--drawer-ink);box-shadow:0 1px 3px #0000000d}
 body .sidebar .sidebar-bottom>.nav-item>span:not(.badge){position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 body .sidebar .sidebar-bottom>.nav-item .icon{width:21px;height:21px;color:var(--drawer-ink)}
 body .sidebar>.drawer-card{display:flex;align-items:center;gap:12px;flex:none;min-width:0;margin:6px 8px 4px;padding:6px 14px 6px 6px;border-radius:999px;border:1px solid var(--drawer-line);background:var(--drawer-field);color:var(--drawer-ink);text-decoration:none;box-shadow:0 1px 3px #0000000d}
 body .sidebar .sidebar-bottom>.drawer-settings{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--drawer-line);background:var(--drawer-field);color:var(--drawer-ink);box-shadow:0 1px 3px #0000000d;cursor:pointer}
 body .sidebar .sidebar-bottom>.drawer-settings .icon{width:21px;height:21px;color:var(--drawer-ink)}
 body .sidebar .drawer-card .human-photo{flex:0 0 42px;width:42px;height:42px;min-width:42px;border-radius:50%;overflow:hidden;font-size:14px}
 body .sidebar .drawer-card-copy{display:flex;flex-direction:column;min-width:0}
 body .sidebar .drawer-card-copy strong{font-size:16px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body .sidebar .drawer-card-copy small{font-size:13px;line-height:1.3;color:var(--drawer-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

 /* A finger leaves no ring on anything in the drawer; the keyboard's ring stays. */
 body .sidebar :focus:not(:focus-visible){outline:none}
 body .sidebar .nav-item:focus-visible{outline:2px solid var(--purple,#6d28b5);outline-offset:-2px}
 body .sidebar :is(.drawer-card,.sidebar-bottom>:is(.nav-item,.drawer-settings),.sidebar-top .mobile-only):focus-visible{outline:2px solid var(--purple,#6d28b5);outline-offset:2px}

 /* Denser (18 October 2026): each control owns 44px, the rows edge to edge. Each section's label sits over
    its run, full width, and the rows take the whole width under it (the Founder, 21 October 2026: no column of
    labels beside the rows). Needs you is not in the drawer (the Founder, 21 October 2026). */
 body .sidebar,body.collapsed .sidebar{padding-top:calc(8px + env(safe-area-inset-top,0px))}
 body .sidebar .sidebar-top{min-height:44px}
 body .sidebar .sidebar-top .mobile-only{width:44px;height:44px}
 body .sidebar .name-card{margin:4px 8px 0}
 body .sidebar .drawer-label{margin:6px 12px 0;font-size:11px;line-height:1.2}
 body .sidebar .drawer-label:not(:first-child){padding-top:4px;margin-top:4px}
 body .sidebar .nav-stack{display:flex;flex-direction:column;gap:0;padding-top:2px}
 body .sidebar .nav-stack>.drawer-label,body .sidebar .nav-stack>.drawer-label:not(:first-child){flex:none;margin:6px 12px 0;padding:0;border:0;font-size:11px;line-height:12px;letter-spacing:.06em}
 body .sidebar .nav-stack>.drawer-label:first-child{margin-top:0}
 body .sidebar .nav-stack>.nav-item{flex:none}
 body .sidebar .nav-stack>a.nav-item[href="#/inbox"]{display:none}
 body .sidebar :is(.nav-stack,.person-group-items)>.nav-item{position:relative;min-height:44px;gap:12px;border-radius:12px;font-size:15px}
 body .sidebar .nav-stack>.nav-item+.nav-item{margin-top:0}
 body .sidebar :is(.nav-stack,.person-group-items)>.nav-item .icon{width:20px;height:20px}
 body .sidebar .sidebar-bottom{padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
 body .sidebar>.drawer-card{min-height:44px;margin:2px 8px 0;padding:3px 12px 3px 3px;gap:10px}
 body .sidebar .drawer-card .human-photo{flex:0 0 36px;width:36px;height:36px;min-width:36px;font-size:13px}
 body .sidebar .drawer-card-copy strong{font-size:15px;line-height:1.2}
 body .sidebar .drawer-card-copy small{font-size:12px;line-height:1.2}
 /* The three marks on one centre line, 40px from the drawer's edge: Symbionia's, the account's logo and the person's face
    (the Founder, 21 October 2026). */
 body .sidebar .brand img{margin-inline-start:11px}
 body .sidebar .name-card>.account-layer{padding-inline-start:2px}
}

/* The page's top bar sits under the phone's own top (a Home Screen app is drawn under the status bar). */
@media (max-width:900px){
 body:not([data-call-on]):not(:has(.group-call-pill)) .app-shell>.topbar{padding-top:max(6px,env(safe-area-inset-top,0px))!important}
}

/* The bar: a floating rounded pill near the bottom edge; icons alone; the current one on a grey ellipse. */
@media (max-width:900px){
 body{--terminal-dock-height:60px;--terminal-dock-gap:10px}
 body .bottom-nav.agent-dock.tab-bar,body .bottom-nav.agent-dock.tab-bar.compact:not(:focus-within){grid-template-columns:repeat(5,minmax(0,1fr))!important;width:calc(100% - 32px);max-width:420px;height:60px;min-height:60px;padding:5px;gap:2px;bottom:max(10px,calc(env(safe-area-inset-bottom,0px) - 10px));border:1px solid var(--bar-line);border-radius:999px;background:var(--bar-bg);box-shadow:var(--bar-shadow);backdrop-filter:none}
 body .bottom-nav.agent-dock.tab-bar:not(.feed-dock){grid-template-columns:repeat(4,minmax(0,1fr))!important}
 body .bottom-nav.tab-bar>:is(a,button){position:relative;flex-direction:row;gap:0;height:48px;min-height:44px;min-width:44px;border-radius:999px;color:var(--bar-ink);background:transparent;transition:background-color .15s}
 body .bottom-nav.tab-bar>:is(a,button).active,body .bottom-nav.tab-bar>a.tab-feed.active,body .bottom-nav.tab-bar>:is(a,button):active{color:var(--bar-ink);background:var(--bar-pill)}
 body .bottom-nav.tab-bar .tab-label{display:none}
 body .bottom-nav.tab-bar .icon{width:25px;height:25px;stroke-width:1.8}
 body .bottom-nav.tab-bar>:is(a,button):focus:not(:focus-visible){outline:none}
 body .bottom-nav.tab-bar>:is(a,button):focus-visible{outline:2px solid var(--purple,#6d28b5);outline-offset:-2px}
 /* The Feed: the Symbionia mark in the bar itself, no raised circle; its count an iPhone badge at the mark's corner. */
 body .bottom-nav.tab-bar>a.tab-feed>.icon,body[data-theme=dark] .bottom-nav.tab-bar>a.tab-feed>.icon{box-sizing:border-box;width:28px;height:28px;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;object-fit:contain}
 /* In dark the mark's black half sat on a dark bar and the button vanished (the Founder, 17 October 2026, 07:32): a
    thin light outline traces the mark there. Light is unchanged. */
 body[data-theme=dark] .bottom-nav.tab-bar>a.tab-feed>img.icon{filter:drop-shadow(0 0 .7px #fff) drop-shadow(0 0 .7px #fff) drop-shadow(0 0 .5px #fff)}
 /* The count a circle centred over the mark's top edge, as the Feed's rows say theirs (the Founder, 22 October 2026: "keep
    the amount… in the center and also in a circle, like you did on the feed"): one size for 1, 12 and 99+, the figures
    smaller as they grow. */
 body .bottom-nav.tab-bar>a.tab-feed [data-messages-count]{top:-2px;inset-inline-start:50%;inset-inline-end:auto;transform:translateX(-50%);display:grid;place-items:center;box-sizing:border-box;width:22px;min-width:22px;height:22px;padding:0;border-radius:50%;font:700 12px/1 system-ui,sans-serif;letter-spacing:0;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;box-shadow:0 0 0 2px var(--bar-bg)}
 body .bottom-nav.tab-bar>a.tab-feed [data-messages-count][data-digits="2"]{font-size:11px}
 body .bottom-nav.tab-bar>a.tab-feed [data-messages-count][data-digits="3"]{font-size:8px;letter-spacing:-.02em;padding:0}
 [dir=rtl] body .bottom-nav.tab-bar>a.tab-feed [data-messages-count]{transform:translateX(50%)}
}
@keyframes drawer-shade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){body.menu-open .drawer-backdrop{animation:none}body .sidebar,body.menu-open .sidebar,body .app-shell,body .app-shell::after{transition:none!important}}
.reduced-motion .sidebar,.reduced-motion .app-shell,.reduced-motion .app-shell::after{transition:none!important}
.reduced-motion .drawer-backdrop{animation:none!important}
/* Symbionia's mark on the same left edge as the account's logo and the face (the Founder, 22 October 2026, 00:30). */
/* The titles as ElevenLabs sets its own (the Founder, 22 October 2026, 03:00, on his iPhone): no lines; each title in
   sentence case, the size of the rows, a touch bolder and in the page's ink; room above each title, so a title reads as
   the head of the rows under it. */
body .sidebar .nav-stack>.drawer-label,body .sidebar .nav-stack>.drawer-label:not(:first-child){border:0;padding:0 0 2px;margin:18px 12px 0;font-size:15px;line-height:20px;font-weight:650;letter-spacing:0;text-transform:none;color:inherit;opacity:1}
body .sidebar .nav-stack>.drawer-label:first-child{margin-top:12px}
body .sidebar .brand img{margin-inline-start:0}
/* The page itself takes the focus after a move (tabindex -1) and a tap on its words gives it the focus too; Safari drew
   its blue ring round it, a blue line across the screen over the bar (the Founder, 22 October 2026: "There's a blue line
   on the button"). The page is never a control: no ring. */
#main:focus,#main:focus-visible{outline:none}
/* The Feed's count at the mark's top right, in the colour the person chose (Graphite reads graphite, Purple purple), and
   the mark 14% larger (the Founder, 22 October 2026, 02:39, on his iPhone). */
body .bottom-nav.tab-bar>a.tab-feed>.icon,body[data-theme=dark] .bottom-nav.tab-bar>a.tab-feed>.icon{width:32px;height:32px;stroke-width:1.4}
/* The mark is a line icon since 23 October 2026 (terminal-ui.js `feed`): drawn 32px, its stroke thinned so the line reads
   as heavy as the bar's 25px icons. */
body .bottom-nav.tab-bar>a.tab-feed [data-messages-count]{top:-4px;inset-inline-start:calc(50% + 4px);transform:none;background:var(--purple,#6d28b5);color:#fff}
body[data-theme=dark] .bottom-nav.tab-bar>a.tab-feed [data-messages-count]{color:#14151a}
[dir=rtl] body .bottom-nav.tab-bar>a.tab-feed [data-messages-count]{transform:none}
/* The account and the person as two pills of one kind (the Founder, 22 October 2026, 19:48 and after, on his iPhone): each
   its mark, its name and what it is on one line ("Ben's Fantasyland · Enterprise", "Ben Almagor · Admin"), the account's
   black; both slim, 44px for the finger and no taller, the marks and words about 15% smaller than before; a thin line
   under the two with as much room above it as below it, before General. A name runs out in an ellipsis before its kind
   does. The collapsed rail on a computer is untouched: it is the wide menu's, not the drawer's. */
@media (max-width:700px){
 /* Room for it taken from the header's top and between the two pills, never from the titles' own room below. */
 body .sidebar,body.collapsed .sidebar{padding-top:calc(4px + env(safe-area-inset-top,0px))}
 body .sidebar .name-card{margin:0 8px;gap:0}
 /* Symbionia's mark over the account's logo and the face, on their one left edge. */
 body .sidebar .brand img{margin-inline-start:6px}
 body .sidebar .name-card>.account-layer,body .sidebar .name-card>button.account-layer.account-layer-press{display:flex;align-items:center;gap:9px;min-height:44px;margin:0;padding:5px;padding-inline-end:14px;border:1px solid var(--account-layer-bg);border-radius:999px;background:var(--account-layer-bg);color:var(--account-layer-ink)}
 body .sidebar .name-card>.account-layer .account-logo{flex:0 0 32px;width:32px;height:32px;min-width:32px;box-shadow:inset 0 0 0 1px var(--account-layer-ring)}
 body .sidebar .name-card>.account-layer .account-logo .icon{width:17px;height:17px}
 body .sidebar :is(.account-layer-copy,.drawer-card-copy){display:flex;flex-direction:row;align-items:baseline;gap:0;min-width:0;flex:1 1 auto}
 body .sidebar .name-card>.account-layer .account-layer-name{flex:0 1 auto;display:block;min-width:0;padding:0;border-radius:0;background:none;color:inherit;font-size:14px;font-weight:600;line-height:1.2;text-box:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body .sidebar .account-layer-kind{display:inline;flex:none;font-size:12.5px;line-height:1.2;opacity:.7;white-space:nowrap}
 body .sidebar>.drawer-card{min-height:44px;margin:4px 8px 0;padding:5px;padding-inline-end:14px;gap:9px}
 body .sidebar .drawer-card .human-photo{flex:0 0 32px;width:32px;height:32px;min-width:32px;font-size:12px}
 body .sidebar .drawer-card-copy strong{flex:0 1 auto;min-width:0;font-size:14px;line-height:1.2}
 body .sidebar .drawer-card-copy small{flex:none;font-size:12.5px;line-height:1.2;overflow:visible}
 body .sidebar :is(.account-layer-kind,.drawer-card-copy small)::before{content:"\00b7"/"";margin:0 5px}
 body .sidebar .nav-stack{margin-top:12px;padding-top:0;border-top:1px solid var(--drawer-line)}
 body .sidebar .nav-stack>.drawer-label:first-child{margin-top:9px}
 body .sidebar .sidebar-bottom{padding-top:4px}
}
.account-layer-kind{display:none}
/* Off the phone the words' wrapper is no box: the wide menu's account row and its collapsed rail stay as they were. */
.account-layer-copy{display:contents}