/* The portal shell (js/portal-shell.js): a signed-in portal as an app inside
   TrybeDaily. A left menu on a second neutral layer, one page at a time, a
   page bar with the title and a status slot, and "Jump to" (Cmd/Ctrl+K).
   Tokens only from app.css, so both themes follow on their own. Under 900px
   the menu becomes a drawer behind a Menu button. */
.ps{--ps-side-w:252px;--ps-top:calc(var(--mast-h,58px) + 16px);--ps-alert:#d81b4a;--ps-alert-ink:#fff;
  position:relative;display:grid;grid-template-columns:var(--ps-side-w) minmax(0,1fr);gap:var(--s-5);align-items:start;margin-top:var(--s-4)}
:root:not([data-theme="light"]) .ps{--ps-alert:#ff5c7f;--ps-alert-ink:#1c0610}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .ps{--ps-alert:#d81b4a;--ps-alert-ink:#fff}}
:root[data-theme="light"] .ps{--ps-alert:#d81b4a;--ps-alert-ink:#fff}
.ps-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- the menu ---- */
.ps-side{position:sticky;top:var(--ps-top);display:flex;flex-direction:column;gap:var(--s-3);max-height:calc(100vh - var(--ps-top) - 16px);max-height:calc(100dvh - var(--ps-top) - 16px);overflow:auto;overscroll-behavior:contain;
  padding:var(--s-3);border:1px solid var(--rule);border-radius:var(--r-lg);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--pane)) 0,var(--pane) 220px);box-shadow:var(--elev-2);scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.ps-side-top{display:flex;align-items:flex-start;gap:var(--s-2)}
.ps-ident{flex:1;min-width:0}
.ps-jump{display:flex;align-items:center;gap:var(--s-2);width:100%;min-height:40px;padding:0 10px;border:1px solid var(--rule);border-radius:var(--r-sm);background:color-mix(in srgb,var(--paper) 50%,var(--pane));color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:550;cursor:pointer;transition:border-color .15s var(--ease-out),color .15s var(--ease-out)}
.ps-jump span{flex:1;text-align:left}
.ps-jump:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--rule));color:var(--ink)}
.ps-jump:focus-visible,.ps-link:focus-visible,.ps-iconbtn:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.ps kbd,.ps-palette kbd{display:inline-flex;align-items:center;gap:2px;min-width:20px;padding:1px 6px;border:1px solid var(--rule);border-bottom-width:2px;border-radius:6px;background:var(--pane);font:600 11px/1.5 var(--mono);color:var(--ink-2)}
.ps-svg{width:20px;height:20px;flex:0 0 20px}
.ps-nav{display:grid;gap:var(--s-3)}
.ps-group{display:grid;gap:2px}
.ps-group-name{margin:0 0 4px;padding:0 10px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ps-link{position:relative;display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px 0 6px;border-radius:var(--r-sm);color:var(--ink-2);font-size:14.5px;font-weight:600;text-decoration:none;transition:background-color .15s var(--ease-out),color .15s var(--ease-out)}
.ps-link[hidden]{display:none}
.ps-ico{display:grid;place-items:center;width:32px;height:32px;flex:0 0 32px;border-radius:9px;color:var(--ink-2);transition:background-color .15s var(--ease-out),color .15s var(--ease-out),box-shadow .2s var(--ease-out)}
.ps-label{flex:1;min-width:0}
.ps-link:hover{background:color-mix(in srgb,var(--accent) 7%,transparent);color:var(--ink)}
.ps-link:hover .ps-ico{color:var(--accent)}
.ps-link[aria-current="page"]{background:color-mix(in srgb,var(--accent) 12%,var(--pane));color:var(--ink)}
.ps-link[aria-current="page"] .ps-ico{background:var(--accent-fill);color:#fff;box-shadow:0 6px 16px -8px color-mix(in srgb,var(--accent-fill) 90%,transparent)}
.ps-badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 7px;border-radius:var(--r-pill);background:var(--ps-alert);color:var(--ps-alert-ink);font:700 12px/1 var(--sans);font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--pane)}
.ps-badge[hidden]{display:none}
.ps-foot{margin-top:auto;padding-top:var(--s-3);border-top:1px solid var(--rule);font-size:13px;color:var(--ink-2)}
.ps-foot:empty{display:none}

/* ---- the page ---- */
.ps-body{min-width:0;display:grid;gap:var(--s-4)}
.ps-bar{display:flex;align-items:center;gap:var(--s-3);min-height:52px}
.ps-title{flex:1;min-width:0}
.ps-title h1{margin:0;font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.025em;color:var(--ink);outline:0}
.ps-title p{margin:4px 0 0;font-size:14px;color:var(--ink-2)}
.ps-title p[hidden]{display:none}
.ps-status{display:flex;align-items:center;gap:var(--s-2);font-size:13px;color:var(--ink-2);white-space:nowrap}
.ps-status:empty{display:none}
.ps-iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 10px;border:1px solid var(--rule);border-radius:var(--r-sm);background:var(--pane);color:var(--ink);font:inherit;font-size:14px;font-weight:650;cursor:pointer}
.ps-iconbtn:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--rule));color:var(--accent)}
.ps-iconbtn.ps-menu,.ps-iconbtn.ps-jump-sm,.ps-iconbtn.ps-close{display:none}
.ps-banner{display:grid;gap:var(--s-3)}
.ps-banner:empty,.ps-banner[hidden]{display:none}
.ps-page{display:grid;gap:var(--s-4);min-width:0;animation:ps-in .22s var(--ease-out)}
.ps-page[hidden]{display:none}
@keyframes ps-in{from{opacity:.4;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ps-page{animation:none}.ps-link,.ps-ico,.ps-jump{transition:none}}

/* ---- Jump to ---- */
.ps-palette{width:min(560px,calc(100vw - 32px));max-height:min(520px,calc(100vh - 96px));margin:12vh auto auto;padding:0;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--pane);color:var(--ink);box-shadow:var(--elev-3)}
.ps-palette::backdrop{background:color-mix(in srgb,#0b0a19 45%,transparent);backdrop-filter:blur(3px)}
.ps-pal-form{display:flex;flex-direction:column;max-height:inherit}
.ps-pal-field{display:flex;align-items:center;gap:var(--s-2);padding:0 var(--s-4);border-bottom:1px solid var(--rule);color:var(--ink-2)}
.ps-pal-field input{flex:1;min-width:0;min-height:56px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;outline:0;box-shadow:none}
.ps-pal-field input:focus,.ps-pal-field input:focus-visible{outline:0;box-shadow:none;border:0}
.ps-pal-field:focus-within{color:var(--accent)}
.ps-pal-list{flex:1;margin:0;padding:var(--s-2);overflow:auto;list-style:none}
.ps-pal-list li{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 10px 0 6px;border-radius:var(--r-sm);font-size:14.5px;font-weight:600;cursor:pointer}
.ps-pal-list li[aria-selected="true"]{background:color-mix(in srgb,var(--accent) 12%,var(--pane))}
.ps-pal-list li[aria-selected="true"] .ps-ico{background:var(--accent-fill);color:#fff}
.ps-pal-label{flex:1;min-width:0}
.ps-pal-hint-row{font-size:12px;font-weight:550;color:var(--ink-3)}
.ps-pal-none{padding:var(--s-4) var(--s-3)!important;color:var(--ink-2);cursor:default!important}
.ps-pal-hint{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:10px var(--s-4);border-top:1px solid var(--rule);font-size:12px;color:var(--ink-3)}

/* ---- phone: the menu is a drawer ---- */
@media (max-width:899.98px){
  .ps{grid-template-columns:minmax(0,1fr);gap:var(--s-3);margin-top:var(--s-3)}
  .ps-side{position:fixed;z-index:60;top:0;bottom:0;left:0;width:min(320px,86vw);max-height:none;border-radius:0 var(--r-lg) var(--r-lg) 0;transform:translateX(-104%);transition:transform .24s var(--ease-out);visibility:hidden}
  .ps.is-drawer .ps-side{transform:none;visibility:visible}
  .ps-scrim{position:fixed;inset:0;z-index:59;border:0;background:color-mix(in srgb,#0b0a19 45%,transparent)}
  .ps-scrim[hidden]{display:none}
  .ps-iconbtn.ps-close,.ps-iconbtn.ps-menu,.ps-iconbtn.ps-jump-sm{display:inline-flex}
  .ps-bar{flex-wrap:wrap;gap:var(--s-2)}
  .ps-menu{order:1}.ps-status{order:2}.ps-jump-sm{order:3}
  .ps-title{order:4;flex:1 0 100%;margin-top:var(--s-1)}
  .ps-title h1{font-size:24px}
  .ps-status{margin-left:auto}
}
@media (max-width:899.98px) and (prefers-reduced-motion:reduce){.ps-side{transition:none}}
/* A press reads as a press. */
.ps-link:active,.ps-jump:active,.ps-iconbtn:active{transform:scale(.98)}
@media (prefers-reduced-motion:reduce){.ps-link:active,.ps-jump:active,.ps-iconbtn:active{transform:none}}