/* Daron Hub · the shared shell: top bar and the Gemini-style left menu, in the hub's blue.
   Everything is prefixed hs- so it never clashes with a page's own classes. Drawn by app/shell.js. */
:root{--hs-blue:#205F9E;--hs-blue-d:#174A7C;--hs-blue-l:#E7EDF5;--hs-blue-xl:#F3F7FB;--hs-ink:#222;--hs-muted:#6B7280;--hs-line:#DCE3EC;--hs-amber:#9A5A00;--hs-amber-bg:#FFF4E0;--hs-amber-bd:#F0C27A;--hs-top:56px;--hs-side:264px}
body.hs-on{margin:0;overflow-x:hidden}
.hs-page{padding-top:var(--hs-top);margin-left:var(--hs-side);min-width:0;min-height:100vh}

/* top bar across the full width, like Gemini's title line */
.hs-top{position:fixed;top:0;left:0;right:0;height:var(--hs-top);z-index:25;background:#fff;border-bottom:1px solid var(--hs-line);display:flex;align-items:center;gap:14px;padding:0 20px;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:15px;line-height:1.5}
.hs-burger{display:none;border:0;background:var(--hs-blue-xl);color:var(--hs-blue-d);width:40px;height:40px;border-radius:10px;cursor:pointer;font-size:20px;line-height:1;flex:0 0 40px;align-items:center;justify-content:center}
.hs-mark{display:flex;align-items:baseline;gap:12px;text-decoration:none;flex:0 0 auto;width:calc(var(--hs-side) - 40px)}
.hs-mark b{font-size:22px;font-weight:800;color:var(--hs-ink);letter-spacing:-.01em;white-space:nowrap}
.hs-mark span{font-size:13px;color:var(--hs-muted);border-left:1px solid var(--hs-line);padding-left:12px}
.hs-search{flex:1 1 auto;max-width:520px;min-width:0;display:flex;align-items:center;gap:8px;border:1px solid var(--hs-line);border-radius:999px;padding:0 14px;background:var(--hs-blue-xl);height:38px;margin:0}
.hs-search:focus-within{border-color:var(--hs-blue);background:#fff}
.hs-search svg{flex:0 0 16px;color:var(--hs-muted)}
.hs-search input{all:unset;flex:1;min-width:0;font:inherit;font-size:14px;color:var(--hs-ink)}
.hs-search input::placeholder{color:var(--hs-muted)}
.hs-sp{flex:1}
.hs-demo{background:var(--hs-amber-bg);color:var(--hs-amber);border:1px solid var(--hs-amber-bd);border-radius:999px;padding:3px 12px;font-weight:700;font-size:12px;white-space:nowrap}
.hs-who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--hs-muted);white-space:nowrap}
.hs-who b{color:var(--hs-ink);overflow:hidden;text-overflow:ellipsis;max-width:220px}
.hs-who button,.hs-who a{border:0;background:transparent;color:var(--hs-blue);font:inherit;font-weight:600;cursor:pointer;padding:6px 4px;text-decoration:none}

/* the sidebar: Gemini's groups, modern dress */
.hs-side{position:fixed;top:var(--hs-top);bottom:0;left:0;width:var(--hs-side);z-index:24;background:var(--hs-blue);color:#fff;padding:14px 10px 0;display:flex;flex-direction:column;gap:4px;overflow-y:auto;font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:15px;line-height:1.35;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.hs-grp{display:flex;flex-direction:column}
.hs-gh{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:10px;font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:#D6E3F1}
.hs-gh:hover{background:rgba(255,255,255,.08)}.hs-gh:focus-visible{outline:2px solid #fff}
.hs-gh .hs-chev{transition:transform .15s ease;font-size:10px}.hs-grp.hs-closed .hs-chev{transform:rotate(-90deg)}
.hs-items{display:flex;flex-direction:column;gap:2px;padding:2px 0 8px}.hs-grp.hs-closed .hs-items{display:none}
.hs-row{position:relative}
.hs-item{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 14px;border-radius:10px;color:#fff;text-decoration:none;font-weight:600;font-size:14px;opacity:.92;min-height:42px}
a.hs-item{padding-right:34px}
a.hs-item:hover{background:rgba(255,255,255,.1);opacity:1}a.hs-item:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.hs-item.hs-on{background:#fff;color:var(--hs-blue-d);opacity:1}
.hs-item.hs-in{background:rgba(255,255,255,.12);opacity:1}
.hs-ic{width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:0 0 26px}
.hs-on .hs-ic{background:var(--hs-blue-l);color:var(--hs-blue-d)}
.hs-l{min-width:0}
.hs-pl{margin-left:auto;font-size:11px;font-weight:700;color:#B8D0EA;background:rgba(255,255,255,.1);border-radius:999px;padding:1px 8px;white-space:nowrap}
.hs-pl.hs-lock{color:#FFE2B0;background:rgba(255,226,176,.14)}
.hs-soon{opacity:.5;cursor:default}
.hs-soon.hs-noacc{cursor:help}
/* second level: a module's own pages, open while you are in that module */
.hs-kids{display:flex;flex-direction:column;gap:2px;margin:2px 0 4px 26px;padding-left:10px;border-left:1px solid rgba(255,255,255,.22)}
.hs-kids .hs-item{min-height:34px;padding-top:6px;padding-bottom:6px;font-size:13.5px}
.hs-star{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:#fff;opacity:0;cursor:pointer;font-size:15px;width:26px;height:26px;border-radius:6px;padding:0;line-height:1}
.hs-row:hover .hs-star,.hs-star:focus-visible{opacity:.55}.hs-star:hover{opacity:1!important;background:rgba(255,255,255,.12)}
.hs-star.hs-fav{opacity:.9;color:#FFD66B}
.hs-row .hs-on ~ .hs-star{color:var(--hs-blue)}.hs-row .hs-on ~ .hs-star.hs-fav{color:#D69A00}
@media (hover:none){.hs-star{opacity:.45}}
.hs-gap{flex:1;min-height:12px}
.hs-foot{font-size:12px;color:#B8D0EA;padding:12px 12px 16px;border-top:1px solid rgba(255,255,255,.18)}
.hs-scrim{display:none}

/* narrow screens: the menu slides in over the content from a button in the top bar */
@media (max-width:860px){
  .hs-page{margin-left:0}
  .hs-burger{display:inline-flex}
  .hs-mark{width:auto}
  .hs-side{transform:translateX(-100%);transition:transform .22s ease;width:min(var(--hs-side),86vw);box-shadow:none}
  body.hs-open .hs-side{transform:none;box-shadow:10px 0 30px rgba(20,32,46,.25)}
  .hs-scrim{display:block;position:fixed;inset:var(--hs-top) 0 0 0;background:rgba(20,32,46,.35);z-index:23;opacity:0;pointer-events:none;transition:opacity .2s ease}
  body.hs-open .hs-scrim{opacity:1;pointer-events:auto}
  .hs-who .hs-t,.hs-who b{display:none}
}
@media (max-width:640px){
  .hs-top{padding:0 12px;gap:8px}
  .hs-mark span{display:none}.hs-mark b{font-size:18px}
  .hs-search{padding:0 10px}
  .hs-demo{padding:2px 8px}.hs-dl{display:none}
}
@media (max-width:420px){.hs-mark{display:none}}
.hs-search[hidden],.hs-demo[hidden]{display:none}
/* views are switched by #view: never let the browser's jump to that anchor scroll the page */
.hs-page .view{scroll-margin-top:100vh}