/* The menu (src/app/side-menu.mjs): ☰ at the left of either top bar, and the
   panel it slides in down the left edge while the page dims behind it. */
.menu-button{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-color:var(--stone-850);border-radius:var(--ledger-radius);background:var(--surface);color:var(--accent)}
.menu-button .material-symbols-outlined{font-size:24px}
.menu-button:hover{border-color:var(--accent-700)}
dialog.side-menu{margin:0;inset:0 auto 0 0;width:min(320px,86vw);max-width:none;height:100dvh;max-height:none;padding:0;border:0;border-right:1px solid var(--accent-700);background:var(--surface);color:var(--text);box-shadow:12px 0 32px rgb(var(--black-rgb) / .5);overflow:hidden}
dialog.side-menu[open]{animation:side-menu-in .22s cubic-bezier(.2,.8,.2,1)}
dialog.side-menu.closing{animation:side-menu-out .18s ease-in forwards}
dialog.side-menu::backdrop{background:rgb(var(--black-rgb) / .62);backdrop-filter:none}
@keyframes side-menu-in{from{transform:translateX(-100%)}}
@keyframes side-menu-out{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){dialog.side-menu[open],dialog.side-menu.closing{animation:none}}
.side-menu-card{display:flex;flex-direction:column;height:100%;overflow-y:auto;overscroll-behavior:contain;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom) env(safe-area-inset-left)}
.side-menu-head{flex:none;display:flex;align-items:center;justify-content:space-between;min-height:61px;padding:0 8px 0 18px;border-bottom:1px solid var(--line)}
.side-menu-brand{font:600 var(--size-label) var(--head);letter-spacing:.14em;color:var(--text)}
.side-menu-brand span{color:var(--accent)}
.side-menu .side-menu-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;color:var(--text)}
.side-menu-close .material-symbols-outlined{font-size:24px}
/* Who is signed in, then the sections: each a full-width row. */
.side-menu-items{list-style:none;margin:0;padding:8px 0}
.side-menu .side-menu-you,.side-menu-items button{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:12px 18px;border:0;border-radius:0;background:none;color:var(--text);text-align:left}
.side-menu .side-menu-you{flex:none;padding-block:14px;border-bottom:1px solid var(--line)}
.side-menu .side-menu-you:hover,.side-menu-items button:hover{background:var(--surface-warm)}
.side-menu-items button[aria-current=page]{background:var(--accent-950);box-shadow:inset 3px 0 0 var(--accent)}
.side-menu-items .material-symbols-outlined{flex:none;font-size:24px;color:var(--accent)}
.side-menu-label{display:flex;flex-direction:column;gap:2px;min-width:0}
.side-menu-label b{font:600 var(--size-lead) var(--head);color:var(--text)}
.side-menu-label small{font:var(--size-small)/1.3 var(--body);color:var(--muted)}
.side-menu-initials{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--accent-700);border-radius:var(--radius-round);background:var(--accent-950);color:var(--accent);font:600 var(--size-label) var(--head)}
.side-menu-initials.empty::before{content:"person";font:24px/1 'Material Symbols Outlined'}
.side-menu-you .side-menu-label b{font-size:var(--size-ui)}
.side-menu-you .side-menu-label small{font-family:var(--head)}
[data-menu-quills]:not(:empty)+[data-connection]:not(:empty)::before{content:" · "}
/* Account and Help, under a rule and a little smaller. */
.side-menu-minor{border-top:1px solid var(--line);margin-inline:18px;padding-inline:0}
.side-menu-minor button{min-height:48px;padding-inline:0;padding-block:8px}
.side-menu-minor .material-symbols-outlined{color:var(--muted);font-size:22px}
.side-menu-minor .side-menu-label b{font-size:var(--size-ui)}
/* Back to the open adventure or story. */
.side-menu-now{flex:none;margin-top:auto;display:flex;flex-direction:column;gap:2px;padding:12px 18px 16px;border-top:1px solid var(--line)}
.side-menu-now[hidden]{display:none}
.side-menu-now small{font:var(--size-caption) var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.side-menu .side-menu-now button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:0;border:0;background:none;color:var(--accent);font:600 var(--size-ui) var(--head);text-align:left}
.side-menu-now [data-menu-now-name]{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The pages (v8.76.0, v8.77.0): Explore, Create and Play (#campaign-dialog),
   Settings, Account and Help. Each fills the screen: ☰, its title and ×
   over a scrolling column. */
dialog.page-dialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;inset:0}
.page-dialog>.dialog-card{display:flex;flex-direction:column;gap:0;width:100%;height:100%;max-height:none;min-width:0;padding:0;border:0;border-radius:0;overflow:hidden;background:var(--bg)}
.page-dialog .page-head{flex:none;display:flex;align-items:center;justify-content:flex-start;gap:var(--space-5);min-height:calc(61px + env(safe-area-inset-top));padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));border-bottom:2px solid var(--accent-700)}
.page-dialog .page-head h2{flex:1 1 auto;min-width:0;margin:0;color:var(--accent);font:600 var(--size-lead) var(--head);letter-spacing:.12em;text-transform:uppercase}
.page-head .page-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;color:var(--text)}
.page-close .material-symbols-outlined{font-size:24px}
.page-head .page-head-action{flex:none;min-height:40px;padding:0 14px;border-radius:var(--ledger-radius,2px);font:500 var(--size-caption) var(--head)}
.page-head-action[hidden]{display:none}
.page-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px max(16px,env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.page-body>*{max-width:980px;margin-inline:auto}
.page-narrow .page-body>*{max-width:720px}
/* Settings as a page: the tabs stay at the top while a section scrolls, Save at the foot. */
.page-dialog>.settings-card{width:100%;height:100%;gap:0}
.page-dialog .page-body>.settings-tabs{position:sticky;top:-16px;margin:-16px auto 16px;border-inline:1px solid var(--line)}
.page-dialog .settings-panel{margin-bottom:12px}
.page-dialog .settings-card footer{position:static;flex:none;margin:0;padding:12px max(16px,calc((100% - 720px) / 2)) calc(12px + env(safe-area-inset-bottom))}
.page-dialog .settings-save-error{margin:0;padding:8px max(16px,calc((100% - 720px) / 2)) 0}
/* Account and Help: groups of rows, each a label (and a line) with its button or link. */
.account-who{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.account-who .side-menu-initials{width:48px;height:48px}
.account-who .side-menu-label b{font-size:var(--size-lead)}
.account-who .side-menu-label small{font-family:var(--head);overflow-wrap:anywhere}
#account-status:empty{display:none}
#account-status{margin:8px auto}
#account-status.error{color:var(--danger)}
.page-rows{border:1px solid var(--line);background:var(--surface)}
.page-row{display:flex;align-items:center;gap:var(--space-5);min-height:60px;padding:10px 12px}
.page-row+.page-row{border-top:1px solid var(--line)}
.page-row[hidden],.page-row>[hidden]{display:none}
.page-row-label{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0}
.page-row-label b{font:600 var(--size-ui) var(--head);color:var(--text)}
.page-row-label small{color:var(--muted);font:var(--size-small)/1.4 var(--body);overflow-wrap:anywhere}
.page-row-label small a{color:var(--accent)}
.page-row>button,.page-row>.page-row-link{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:var(--ledger-radius,2px);font:600 var(--size-label) var(--head)}
.page-row>.page-row-link{border:1px solid var(--line);background:var(--surface-warm);color:var(--text);text-decoration:none}
.page-row>.page-row-link:hover{border-color:var(--accent-700)}
.page-danger{margin-top:28px;border-color:var(--danger-700)}
.page-note{margin:8px auto 0}
.help-credits{margin-top:12px}
.help-credits p{margin:0}
.help-credits a{color:var(--accent);text-underline-offset:3px}