/* ═══════════════════════════════════════════════════════════════════════════
   liquid-shell.css — the dashboard shell in the contentpad.io liquid look,
   plus the navigation that never leaves.                         2026-10-11

   Dex: "all of the tools … go full screen and the navigation disappears …
   they should all keep the sidebar and the top bar … make the sidebar
   collapsible so you can expand every tool to full width, but the sidebar
   should never leave … themed in the colors and the feel of the new
   ContentPad site and liquid theme."

   1. TOOLS OPEN INSIDE THE SHELL. #app-overlay used to be position:fixed;
      inset:0 at z-index 9999, covering the sidebar and the top bar. On
      tablet and desktop it now starts at the sidebar's right edge and the top
      bar's bottom edge (--cpd-ov-l / --cpd-ov-t, measured live by
      liquid-shell.js), and sits at z-index 60 so the top bar's menus, the
      Concierge, Maverick and every modal still open above it. Phones are
      untouched: they have their own header, drawer and tab bar.
   2. A COLLAPSIBLE SIDEBAR. html.cpd-sb-mini folds it to a 68px icon rail —
      never away. Every tool, with or without its own overlay, gets the width.
   3. THE LIQUID SKIN on the sidebar, the top bar and the tool header, in both
      themes — the shell is the brand's frame, like contentpad.io and the
      LaunchPad. Pages and tools inside keep their own theme.

   Loaded at the END of index.html's body so it follows every inline <style>.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,600..900&family=Instrument+Sans:wght@400;500;600;700&display=swap");

:root{
  --cpd-ov-l:210px; --cpd-ov-t:40px;
  --lq-ink:#050611; --lq-paper:#eef1fb; --lq-mute:#a3abc8; --lq-dim:#c4cbe3;
  --lq-cyan:#5ee0ff; --lq-blue:#2e7cf6; --lq-lilac:#b8a8ff; --lq-tally:#ff3d5a;
  --lq-line:rgba(201,214,255,.12); --lq-line2:rgba(201,214,255,.24);
  --lq-body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --lq-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --lq-display:"Archivo","Helvetica Neue",Arial,sans-serif;
}

/* ── 1. tools open inside the shell (tablet + desktop) ───────────────────── */
@media (min-width:601px){
  html body #app-overlay{
    inset:auto !important;
    left:var(--cpd-ov-l) !important; top:var(--cpd-ov-t) !important;
    right:0 !important; bottom:0 !important;
    width:auto !important; height:auto !important;
    z-index:60 !important;
    transition:left .22s cubic-bezier(.2,.7,.3,1);
  }
}

/* ── 2. the collapsible sidebar ──────────────────────────────────────────── */
@media (min-width:601px){
  /* z-index 70 > the tool frame's 60, so the round toggle that straddles the
     sidebar's edge is never covered by an open tool. */
  html body aside.sidebar{position:relative;z-index:70;overflow:visible !important;transition:width .22s cubic-bezier(.2,.7,.3,1)}
  .sidebar .s-nav,.sidebar .s-logo{overflow-x:hidden}
  #cpd-sb-toggle{
    position:absolute;z-index:30;top:30px;right:-13px;width:26px;height:26px;border-radius:50%;
    display:grid;place-items:center;cursor:pointer;padding:0;
    border:1px solid var(--lq-line2);background:#0b0d22;color:var(--lq-dim);
    box-shadow:0 4px 14px rgba(0,0,0,.5),0 0 0 3px rgba(5,6,17,.9);
    transition:color .15s,border-color .15s,transform .22s;
  }
  #cpd-sb-toggle:hover{color:#fff;border-color:var(--lq-cyan)}
  #cpd-sb-toggle:focus-visible{outline:2px solid var(--lq-cyan);outline-offset:2px}
  #cpd-sb-toggle svg{width:12px;height:12px}
  html.cpd-sb-mini #cpd-sb-toggle{transform:rotate(180deg)}

  html.cpd-sb-mini body aside.sidebar{width:68px !important;min-width:68px !important}
  html.cpd-sb-mini .sidebar .s-logo{padding:20px 0 16px !important;display:flex;justify-content:center}
  /* The wordmark doesn't fit 68px; a chrome CP chip stands in for it. */
  html.cpd-sb-mini .sidebar .s-logo img{display:none !important}
  html.cpd-sb-mini .sidebar .s-logo::before{content:"CP";display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
    font-family:var(--lq-display);font-weight:900;font-size:15px;letter-spacing:-.02em;color:#07080f;
    background:linear-gradient(180deg,#ffffff,#d9deea 55%,#b9c1d6);box-shadow:0 1px 0 #fff inset,0 8px 22px -10px rgba(94,224,255,.7)}
  html.cpd-sb-mini .sidebar .s-logo-sub{display:none !important}
  html.cpd-sb-mini .sidebar .s-nav{padding:10px 8px !important}
  /* Section headings become hairlines; every row shows, so the rail is the
     whole menu as icons rather than five folded headings. */
  html.cpd-sb-mini[data-cpd-theme] body .sidebar .s-sec,
  html.cpd-sb-mini body .sidebar .s-sec{font-size:0 !important;letter-spacing:0 !important;height:1px;min-height:0;padding:0 !important;margin:10px 6px !important;
    background:var(--lq-line2);pointer-events:none;overflow:hidden;color:transparent !important}
  html.cpd-sb-mini .sidebar .s-sec::after,html.cpd-sb-mini .sidebar .s-sec::before{display:none !important}
  html.cpd-sb-mini .sidebar .nav-i.cpd-sec-hidden{display:flex !important}
  html.cpd-sb-mini .sidebar .nav-i{font-size:0 !important;justify-content:center;padding:10px 0 !important;gap:0 !important;min-height:40px}
  html.cpd-sb-mini .sidebar .nav-i svg{width:17px !important;height:17px !important;opacity:.95 !important}
  html.cpd-sb-mini .sidebar .nav-i *:not(svg):not(svg *){display:none !important}
}

/* ── 3. the liquid skin ──────────────────────────────────────────────────── */
html body aside.sidebar{
  background:
    radial-gradient(120% 40% at 0% 0%,rgba(46,124,246,.16),transparent 70%),
    radial-gradient(120% 30% at 100% 100%,rgba(143,125,255,.10),transparent 70%),
    linear-gradient(180deg,#0a0c1e,#050611) !important;
  border-right:1px solid var(--lq-line) !important;
  font-family:var(--lq-body);
}
.sidebar .s-logo{border-bottom:1px solid var(--lq-line) !important}
.sidebar .s-logo.cpd-home-reset:hover{background:rgba(94,224,255,.05) !important}
.sidebar .s-logo-sub{font-family:var(--lq-mono) !important;font-size:10px !important;letter-spacing:.24em !important;color:#8b93aa !important}
.sidebar .s-logo.cpd-home-reset:hover .s-logo-sub{color:var(--lq-cyan) !important}

/* Section headings: mono, lilac — beats nav.css's per-theme !important rules. */
html[data-cpd-theme] body .sidebar .s-sec,
html body .sidebar .s-sec{
  font-family:var(--lq-mono) !important;font-size:10.5px !important;letter-spacing:.22em !important;
  color:var(--lq-lilac) !important;font-weight:500 !important}
html[data-cpd-theme] body .sidebar .s-sec:hover,html body .sidebar .s-sec:hover{color:#fff !important}

/* Rows: soft paper, a lit pill when active. */
html[data-cpd-theme] .sidebar .nav-i,html .sidebar .nav-i{
  font-family:var(--lq-body) !important;font-size:14.5px;font-weight:500;color:var(--lq-dim) !important;
  border:1px solid transparent !important;border-radius:999px !important;transition:background .15s,color .15s,border-color .15s}
html body .sidebar .nav-i:hover{background:rgba(94,224,255,.06) !important;color:#fff !important}
html body .sidebar .nav-i.active{
  background:rgba(94,224,255,.10) !important;color:#fff !important;border-color:rgba(94,224,255,.55) !important;
  box-shadow:0 0 0 1px rgba(94,224,255,.25) inset,0 0 18px -6px var(--lq-cyan)}
html body .sidebar .nav-i.active svg{color:var(--lq-cyan) !important;opacity:1 !important}
html body .sidebar .nav-i:focus-visible{outline:2px solid var(--lq-cyan);outline-offset:1px}
.sidebar .s-nav::-webkit-scrollbar{width:6px}
.sidebar .s-nav::-webkit-scrollbar-thumb{background:rgba(201,214,255,.14);border-radius:6px}

/* The top bar. */
html body .community-bar{
  background:rgba(5,6,17,.96) !important;border-bottom:1px solid var(--lq-line) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
html body #cpd-header-search{
  background:rgba(10,12,30,.8) !important;border:1px solid var(--lq-line2) !important;border-radius:999px !important;
  color:var(--lq-paper) !important;font-family:var(--lq-body) !important}
html body #cpd-header-search:focus{border-color:var(--lq-cyan) !important;box-shadow:0 0 0 3px rgba(94,224,255,.14) !important;outline:none}
html body #community-bar > button{
  border-radius:999px !important;background:rgba(10,12,30,.7) !important;border:1px solid var(--lq-line2) !important;
  color:var(--lq-dim) !important;font-family:var(--lq-body) !important;font-weight:600 !important;transition:border-color .15s,color .15s}
html body #community-bar > button:hover{border-color:var(--lq-cyan) !important;color:#fff !important}
html body #community-bar > #cpd-cc-header-btn{
  background:linear-gradient(180deg,#ffffff,#d9deea 55%,#b9c1d6) !important;color:#07080f !important;border:0 !important;
  box-shadow:0 1px 0 #fff inset,0 8px 22px -12px rgba(94,224,255,.7) !important}
html body .cb-credits-val{background:rgba(10,12,30,.8) !important;border-color:var(--lq-line2) !important;border-radius:999px !important;color:var(--lq-cyan)}
html body .cb-acct-avatar{background:linear-gradient(135deg,#ffffff,#c9d6ff 50%,#8f7dff) !important;color:#07080f !important;border:0 !important}
html body .cb-acct-name{color:var(--lq-paper) !important;font-family:var(--lq-body) !important}
html body .cb-acct-tier{color:var(--lq-mute) !important}
html body .nb-bell{color:var(--lq-dim) !important;border-radius:999px !important}

/* The tool header that sits over every open tool. */
html body .ao-bar{
  height:48px !important;background:rgba(5,6,17,.97) !important;border-bottom:1px solid var(--lq-line) !important;
  padding:0 14px !important;gap:12px !important}
html body .ao-title{
  font-family:var(--lq-display) !important;font-stretch:115%;font-variation-settings:'wdth' 115;font-weight:800 !important;
  font-size:16px !important;letter-spacing:.02em !important;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(180deg,#fff 0%,#e8ebf2 36%,#8f97ad 52%,#f4f6fa 58%,#fff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent !important}
html body .ao-close{
  border-radius:999px !important;background:rgba(10,12,30,.7) !important;border:1px solid var(--lq-line2) !important;
  color:var(--lq-dim) !important;font-size:11px !important;padding:7px 13px !important;white-space:nowrap}
html body .ao-close:hover{border-color:var(--lq-cyan) !important;color:#fff !important}
html body .ao-nav-sep{background:var(--lq-line2) !important}
html body .ao-nav-btn{border-radius:999px !important;border-color:var(--lq-line) !important;color:var(--lq-mute) !important}
html body .ao-nav-btn:hover{border-color:var(--lq-line2) !important;color:#fff !important}
html body .ao-nav-btn.active{border-color:var(--lq-cyan) !important;color:#fff !important;background:rgba(94,224,255,.10) !important}
#cpd-ao-sb{
  flex:0 0 auto;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;cursor:pointer;padding:0;
  border:1px solid var(--lq-line2);background:rgba(10,12,30,.7);color:var(--lq-dim)}
#cpd-ao-sb:hover{border-color:var(--lq-cyan);color:#fff}
#cpd-ao-sb svg{width:15px;height:15px}
@media (max-width:600px){#cpd-ao-sb,#cpd-sb-toggle{display:none !important}}

/* Phone drawer: same palette as the rail it clones. */
#cpdMobNavDrawer,#cpdMobNavDrawer .cmnd-hd{background:#070818 !important}

@media (prefers-reduced-motion:reduce){
  html body #app-overlay,html body aside.sidebar,#cpd-sb-toggle{transition:none !important}
}