/* Mobius -- the shell: sidebar, page body, dashboard, phone dock and drawer.
   ---------------------------------------------------------------------------
   Geometry is the design's. Where a number looks arbitrary it came from the
   artboard and is left alone.

   Flat by rule (2026-09-05): every surface is an opaque neutral from
   1-tokens.css with a hairline border. Nothing here paints a backdrop-filter,
   a gradient or a text-shadow, and the sidebar is flush with the viewport
   edge like Obsidian's and Notion's. Shadows belong only to things that
   float: the phone dock, the phone drawer, popovers and the toast.

   Pure ASCII.

     1 breakpoints + shell frame     2 sidebar
     3 page body                     4 dashboard
     5 mobile dock + drawer          6 tablet
--------------------------------------------------------------------------- */

/* ---------- 1. shell frame ---------------------------------------------------
   The design's breakpoints: mobile < 768, tablet 768-1179, desktop >= 1180. */
:root{
  --mob-menu-open:264px;
  --mob-menu-rail:68px;
}
@media (max-width:1179px){
  :root{ --mob-menu-open:244px; --mob-menu-rail:64px; }
}

/* The base reset. */
*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;overflow:hidden;
  background:var(--bg-0);color:var(--text-1);
  font-family:var(--font-sans);font-size:var(--text-body);
  line-height:var(--leading-body);font-weight:var(--weight-body);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button,input,textarea,select{font:inherit;color:inherit;}
button{cursor:pointer;}
/* a tap acts at once: no 300ms double-tap wait on anything that acts (6.4) */
button,[data-act]{touch-action:manipulation;}
html{-webkit-text-size-adjust:100%;}
:focus-visible{outline:2px solid var(--awol-operations);outline-offset:2px;}
h1,h2,h3{margin:0;font-weight:inherit;}
p{margin:0;}
img{max-width:100%;}

.mob-app{
  position:relative; isolation:isolate;
  height:100dvh; display:flex; overflow:hidden;
  background:var(--bg-0);
}

/* ---------- 2. sidebar -------------------------------------------------------
   Flush with the left edge, full height, one hairline against the page. On a
   phone the SAME element becomes the drawer (section 5). */
.mob-menu{
  position:absolute; left:0; top:0; bottom:0;
  width:var(--mob-menu-open); z-index:70;
  transition:width 240ms var(--ease-out);
}
body.menu-rail .mob-menu{width:var(--mob-menu-rail);}
.mob-menu-in{
  height:100%;
  overflow:hidden; display:flex; flex-direction:column;
  box-sizing:border-box; padding:18px 12px 0;
  background:var(--bg-1); border-right:1px solid var(--border-1);
}
body.menu-rail .mob-menu-in{padding:18px 0 0; align-items:center;}

/* the collapse chevron rides the hairline */
.mob-menu-tog{
  position:absolute; right:0; top:34px; transform:translate(50%,-50%);
  width:24px; height:24px; border-radius:999px; z-index:2;
  display:grid; place-items:center; cursor:pointer; padding:0;
  color:var(--text-2);
  background:var(--bg-1); border:1px solid var(--border-2);
  opacity:0; transition:opacity 160ms var(--ease-out),transform 240ms var(--ease-out);
}
.mob-menu:hover .mob-menu-tog,.mob-menu-tog:focus-visible,body.menu-rail .mob-menu-tog{opacity:1;}
.mob-menu-tog:hover{color:var(--text-1);background:var(--surface-2);}
.mob-menu-tog svg{width:13px;height:13px;transition:transform 240ms var(--ease-out);}
body.menu-rail .mob-menu-tog svg{transform:rotate(180deg);}

.side-brand{display:flex;align-items:center;gap:9px;flex-shrink:0;padding:0 2px 14px;}
/* The mark is 480x242, close to 2:1. HEIGHT plus auto width -- boxing it
   into a square is what squashed it into a lopsided blob. */
.side-brand img{width:auto;height:22px;display:block;}
.side-brand b{font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:-.02em;}
body.menu-rail .side-brand{justify-content:center;padding:0 0 14px;}
body.menu-rail .side-brand b{display:none;}

.side-search{
  display:flex;align-items:center;gap:9px;flex-shrink:0;
  height:34px;padding:0 11px;border-radius:999px;
  border:1px solid var(--border-1);background:var(--surface-2);
  color:var(--text-3);font-size:13.5px;cursor:pointer;width:100%;
  box-sizing:border-box;text-align:left;
}
.side-search svg{width:14px;height:14px;flex-shrink:0;}
.side-search kbd{
  margin-left:auto;font-family:var(--font-mono);font-size:9.5px;
  border:1px solid var(--border-1);border-radius:5px;padding:2px 4px;
}
body.menu-rail .side-search{width:40px;height:40px;border-radius:999px;justify-content:center;padding:0;}
body.menu-rail .side-search span,body.menu-rail .side-search kbd{display:none;}

/* the one solid accent control in the sidebar */
.side-new{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;
  height:34px;margin-top:8px;padding:0 12px;border-radius:999px;border:0;
  background:var(--awol-marketing);color:#fff;font-size:13.5px;font-weight:500;
  cursor:pointer;width:100%;box-sizing:border-box;
}
.side-new svg{width:14px;height:14px;}
.side-new:hover{background:var(--marketing-deep);}
.side-new:active{transform:var(--press);}
body.menu-rail .side-new{width:40px;height:40px;padding:0;margin:8px auto 0;}
body.menu-rail .side-new span{display:none;}

.side-nav{display:flex;flex-direction:column;gap:2px;flex-shrink:0;padding-top:14px;}
.navrow{
  display:flex;align-items:center;gap:12px;
  padding:8px 9px;border-radius:999px;
  color:var(--text-1);font-size:14.5px;cursor:pointer;
  border:0;background:none;width:100%;box-sizing:border-box;text-align:left;
  transition:background 140ms var(--ease-out);
}
.navrow svg{width:18px;height:18px;flex-shrink:0;opacity:.85;}
.navrow:hover{background:color-mix(in srgb, var(--text-1) 8%, transparent);}
/* the active row inverts -- the design's one high-contrast element */
.navrow[aria-current="page"]{background:var(--text-1);color:var(--bg-0);}
.navrow[aria-current="page"] svg{opacity:1;}
body.menu-rail .navrow{width:40px;height:40px;padding:0;justify-content:center;border-radius:999px;}
body.menu-rail .navrow span{display:none;}

.side-sec{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
  padding:20px 4px 8px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);
}
.side-sec i{flex:1;height:1px;background:var(--border-1);font-style:normal;}
.side-sec button{
  width:22px;height:22px;border-radius:6px;border:0;background:none;
  color:var(--text-3);cursor:pointer;display:grid;place-items:center;
}
.side-sec button:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 8%, transparent);}
.side-sec button svg{width:13px;height:13px;}
body.menu-rail .side-sec{display:none;}

.side-scroll{flex:1;min-height:0;overflow-y:auto;padding-bottom:42px;}
.side-scroll::-webkit-scrollbar{width:0;}
.side-scroll{scrollbar-width:none;}

.spacecard{
  display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  padding:9px 11px;margin-bottom:6px;border-radius:13px;
  border:1px solid var(--border-1);background:var(--surface-1);
  color:var(--text-1);font-size:14px;cursor:pointer;text-align:left;
}
.spacecard i{
  width:27px;height:27px;border-radius:9px;flex-shrink:0;
  display:grid;place-items:center;font-style:normal;
  font-family:var(--font-mono);font-size:12px;
  background:color-mix(in srgb, var(--sc,var(--awol-marketing)) 18%, transparent);
  color:var(--sc,var(--awol-marketing));
}
.spacecard em{font-style:normal;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.spacecard b{font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--text-3);}
.spacecard svg{width:14px;height:14px;color:var(--text-3);flex-shrink:0;}
.spacecard[aria-current="true"]{
  background:color-mix(in srgb, var(--sc,var(--awol-marketing)) 14%, transparent);
  border-color:color-mix(in srgb, var(--sc,var(--awol-marketing)) 40%, var(--border-1));
}
body.menu-rail .spacecard{width:36px;height:36px;padding:0;justify-content:center;border-radius:12px;margin:0 auto 8px;}
body.menu-rail .spacecard em,body.menu-rail .spacecard b,body.menu-rail .spacecard svg{display:none;}

.side-foot{flex-shrink:0;border-top:1px solid var(--border-1);padding:10px 2px 12px;}
.side-me{
  display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  padding:6px 6px;border-radius:12px;border:0;background:none;
  color:var(--text-1);cursor:pointer;text-align:left;
}
.side-me img,.side-me i{
  width:32px;height:32px;border-radius:999px;flex-shrink:0;
  font-style:normal;display:grid;place-items:center;overflow:hidden;
  background:var(--surface-2);font-family:var(--font-mono);font-size:13px;
  object-fit:cover;
}
.side-me div{flex:1;min-width:0;}
.side-me strong{display:block;font-size:13.5px;font-weight:500;}
.side-me small{display:block;font-size:11.5px;color:var(--text-3);}
.side-me svg{width:14px;height:14px;color:var(--text-3);}
body.menu-rail .side-me div,body.menu-rail .side-me svg{display:none;}
body.menu-rail .side-me{justify-content:center;}

.side-tools{display:flex;align-items:center;gap:2px;padding-top:6px;}
.side-tools button{
  width:28px;height:28px;border-radius:8px;border:0;background:none;
  color:var(--text-3);cursor:pointer;display:grid;place-items:center;position:relative;
}
.side-tools button:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 8%, transparent);}
.side-tools button svg{width:15px;height:15px;}
.side-tools button[data-dot]::after{
  content:"";position:absolute;top:3px;right:4px;width:6px;height:6px;
  border-radius:999px;background:var(--awol-leadership);
}
body.menu-rail .side-tools{flex-direction:column;}

/* ---------- 3. page body ----------------------------------------------------- */
.mob-body{
  position:relative;flex:1;min-width:0;
  padding-left:var(--mob-menu-open);
  transition:padding-left 240ms var(--ease-out);
  display:flex;flex-direction:column;overflow:hidden;
}
body.menu-rail .mob-body{padding-left:var(--mob-menu-rail);}
.mob-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.mob-page{
  max-width:var(--container-lg);
  padding:calc(var(--top-air,22px) + 10px) 28px 40px;
  box-sizing:border-box;
}

/* ---------- 4. dashboard -----------------------------------------------------
   Home and Space are the same body; the seam is which data it reads. */
.dash-head{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.dash-head h1{
  font-family:var(--font-display);font-weight:400;font-size:38px;
  line-height:1.06;letter-spacing:-.022em;margin:0;min-width:240px;flex:1;
}
.dash-meta{display:flex;align-items:center;gap:14px;padding-top:8px;}
.dash-kick{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--text-3);white-space:nowrap;}
.dash-cust{
  display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;
  border-radius:999px;border:1px solid var(--border-1);background:none;
  color:var(--text-1);font-size:13px;cursor:pointer;white-space:nowrap;
}
.dash-cust svg{width:14px;height:14px;}
.dash-sub{font-size:15.5px;line-height:1.5;color:var(--text-2);margin:10px 0 0;}

.dash-stats{display:grid;gap:16px;margin-top:26px;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));}
.stat{padding:18px 20px;border-radius:14px;background:var(--surface-1);border:1px solid var(--border-1);}
.stat span{
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-3);
}
.stat b{display:block;font-family:var(--font-mono);font-size:30px;font-weight:400;letter-spacing:-.02em;margin-top:8px;}

.dash-grid{display:grid;gap:20px;margin-top:20px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));align-items:stretch;}
.dcard{border-radius:16px;padding:20px 22px 8px;min-height:320px;display:flex;flex-direction:column;background:var(--surface-1);border:1px solid var(--border-1);}
.dcard-hd{display:flex;align-items:baseline;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--border-1);}
.dcard-hd h2{font-size:16px;font-weight:500;margin:0;flex:1;}
.dcard-hd em{font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--text-3);}
.dcard-body{flex:1;min-height:0;}
.dcard-ft{display:flex;align-items:center;gap:10px;padding:12px 0;margin-top:auto;border-top:1px solid var(--border-1);}
.dcard-ft a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--text-2);cursor:pointer;}
.dcard-ft a svg{width:14px;height:14px;}
.dcard-ft button{
  margin-left:auto;width:26px;height:26px;border-radius:8px;border:0;background:none;
  color:var(--text-3);cursor:pointer;display:grid;place-items:center;
}
.dcard-ft button:hover{color:var(--text-1);background:color-mix(in srgb, var(--text-1) 8%, transparent);}

.trow{display:flex;align-items:flex-start;gap:11px;padding:10px 0;}
.tbox{
  width:19px;height:19px;border-radius:6px;flex-shrink:0;margin-top:1px;
  border:1.5px solid var(--border-2);background:none;cursor:pointer;
  display:grid;place-items:center;color:transparent;
  transition:all 160ms var(--ease-out);
}
.tbox svg{width:11px;height:11px;}
.tbox[aria-pressed="true"]{
  background:var(--sc,var(--awol-marketing));
  border-color:var(--sc,var(--awol-marketing));color:#fff;
}
.trow-main{flex:1;min-width:0;}
.trow-main strong{display:block;font-size:15px;font-weight:400;}
.trow-main small{display:block;font-size:12.5px;color:var(--text-3);margin-top:2px;}
.trow-main [data-act]{cursor:pointer;}
.trow-main [data-act]:hover{text-decoration:underline;text-underline-offset:3px;}
.trow[data-done="1"] .trow-main strong{text-decoration:line-through;color:var(--text-3);}
.trow-end{display:flex;align-items:center;gap:8px;flex-shrink:0;padding-top:1px;}
.chip{
  padding:3px 9px;border-radius:999px;font-size:12px;white-space:nowrap;
  max-width:120px;overflow:hidden;text-overflow:ellipsis;
  background:color-mix(in srgb, var(--sc,var(--awol-marketing)) 16%, transparent);
  color:var(--fnc,var(--text-2));
}
.due{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--text-3);white-space:nowrap;}
.due[data-late="1"]{color:var(--fn-text-leadership);}

.prow{padding:11px 0;}
.prow-top{display:flex;align-items:center;gap:9px;}
.prow-top strong{font-size:15px;font-weight:400;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
.prow-top strong:hover{text-decoration:underline;text-underline-offset:3px;}

/* tasks grouped by the note they live in (the Tasks tab) */
.ngrp{padding:4px 0 6px;}
.ngrp+.ngrp{border-top:1px solid var(--border-1);}
.ngrp-hd{
  display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;
  padding:10px 0 2px;border:0;background:none;color:var(--text-1);
  text-align:left;cursor:pointer;
}
.ngrp-hd strong{font-size:14.5px;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ngrp-hd small{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:var(--text-3);white-space:nowrap;}
.ngrp-hd svg{width:13px;height:13px;color:var(--text-3);flex-shrink:0;}
.ngrp .trow{padding:7px 0;}
.dash-empty code{font-family:var(--font-mono);font-size:12px;background:var(--surface-2);padding:1px 5px;border-radius:5px;}
.pstat{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;white-space:nowrap;
  background:color-mix(in srgb, var(--sc,var(--awol-insight)) 18%, transparent);
  color:var(--fnc,var(--text-2));
}
.pratio{font-family:var(--font-mono);font-size:11px;color:var(--text-3);}
.pmile{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin:6px 0 7px;}
.pbar{height:4px;border-radius:999px;background:var(--surface-3);overflow:hidden;}
.pbar i{display:block;height:100%;border-radius:999px;background:var(--sc,var(--awol-marketing));}

/* first run: one card, one thing to do */
.dcard-first{min-height:0;padding:28px 28px 26px;max-width:640px;margin-top:22px;align-items:flex-start;}
.dcard-first h2{font-family:var(--font-display);font-weight:400;font-size:26px;letter-spacing:-.015em;}
.dcard-first p{color:var(--text-2);font-size:15px;line-height:1.55;margin:8px 0 18px;}

.dash-empty{padding:26px 0;color:var(--text-3);font-size:14px;}
.dash-empty button{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  height:30px;padding:0 12px;border-radius:999px;
  border:1px solid var(--border-1);background:none;color:var(--text-1);
  font-size:13px;cursor:pointer;
}
.dash-empty button svg{width:13px;height:13px;}

/* ---------- 5. mobile: dock and drawer --------------------------------------
   Below 768 the menu stops being a panel beside the page and becomes a drawer
   over it, with a three-piece dock at the bottom. Same markup, one nav. */
@media (max-width:767px){
  .mob-body{padding-left:0;}
  /* the top inset is the notch's (6.1); the bottom clears the dock */
  .mob-page{padding:calc(var(--top-air,12px) + 46px + env(safe-area-inset-top,0px)) 16px calc(118px + env(safe-area-inset-bottom,0px));}
  /* 16px or iOS Safari zooms on focus (6.3); the page title keeps its own size in 9-page.css */
  input,textarea,select{font-size:16px;}
  .dash-head h1{font-size:30px;min-width:0;}
  .dash-stats{grid-template-columns:1fr 1fr;}
  .dash-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
  .dash-cust{display:none;}
  .side-new{display:none;}          /* the dock's + does this on a phone */

  .mob-menu{
    left:0;top:0;bottom:0;
    width:min(304px,84vw);z-index:76;
    transform:translateX(-104%);
    transition:transform 280ms var(--ease-out);
  }
  body.drawer-open .mob-menu{transform:none;}
  .mob-menu-in{
    padding-top:calc(18px + env(safe-area-inset-top,0px));
    box-shadow:var(--shadow-3);
  }
  .mob-menu-tog{display:none;}
  .navrow{padding:13px 12px;font-size:16px;}
  .spacecard{padding:13px 12px;font-size:15.5px;}

  .mob-scrim{
    position:absolute;inset:0;z-index:75;border:0;padding:0;
    background:var(--scrim);
    opacity:0;pointer-events:none;transition:opacity 240ms var(--ease-out);
  }
  body.drawer-open .mob-scrim{opacity:1;pointer-events:auto;}

  .mob-dock{
    position:absolute;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:90;
    display:flex;align-items:center;gap:10px;
    transition:transform 260ms var(--ease-out),opacity 260ms var(--ease-out);
  }
  body.drawer-open .mob-dock{transform:translateY(96px);opacity:0;pointer-events:none;}
  /* the dock would sit under the keyboard; the keyboard bar (9-page.css) takes its place */
  body.kb-open .mob-dock{display:none;}
  .dock-logo,.dock-plus{
    width:54px;height:54px;border-radius:999px;flex-shrink:0;
    display:grid;place-items:center;cursor:pointer;color:var(--text-1);
    transition:transform 120ms var(--ease-out);
  }
  .dock-logo,.dock-pill{
    background:var(--bg-1);border:1px solid var(--border-1);box-shadow:var(--shadow-float);
  }
  .dock-logo img{width:auto;height:18px;}
  .dock-plus{background:var(--awol-marketing);color:#fff;border:0;box-shadow:var(--shadow-float);}
  .dock-plus svg{width:23px;height:23px;}
  .dock-logo:active,.dock-plus:active{transform:scale(.94);}
  .dock-pill{
    flex:1;min-width:0;height:54px;border-radius:999px;
    display:flex;align-items:center;gap:2px;padding:0 5px;box-sizing:border-box;
    overflow:hidden;
  }
  .dock-item{
    height:44px;padding:0 13px;border-radius:999px;border:0;background:none;
    color:var(--text-2);cursor:pointer;display:flex;align-items:center;
    flex-shrink:0;
  }
  .dock-item svg{width:19px;height:19px;}
  .dock-item span{
    max-width:0;overflow:hidden;white-space:nowrap;margin-left:0;font-size:14px;
    transition:max-width 280ms var(--ease-out),margin-left 280ms var(--ease-out);
  }
  .dock-item[aria-current="page"]{
    background:color-mix(in srgb, var(--text-1) 10%, transparent);
    color:var(--text-1);
  }
  .dock-item[aria-current="page"] span{max-width:92px;margin-left:7px;}
}
@media (min-width:768px){
  .mob-dock,.mob-scrim{display:none;}
}

/* ---------- 6. tablet --------------------------------------------------------
   The sidebar is beside the page again, narrower. */
@media (min-width:768px) and (max-width:1179px){
  .mob-page{padding:calc(var(--top-air,22px) + 10px) 22px 32px;}
  .dash-head h1{font-size:34px;}
}

@media (prefers-reduced-motion:reduce){
  .mob-menu,.mob-body,.mob-dock,.dock-item span,.mob-menu-tog,.mob-menu-tog svg,.dock-logo,.dock-plus{transition:none;}
}

/* Notes runs full width under the two-up grid: it is a database view, not a
   summary, so it gets the room a table needs. */
.dcard-wide{margin-top:20px;min-height:0;}
.dcard-hd h2.nbig{font-size:24px;font-weight:400;font-family:var(--font-display);letter-spacing:-.015em;}
.nlist{display:flex;flex-direction:column;}
.nrow{
  display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;
  padding:11px 12px;border-radius:12px;border:0;background:none;
  color:var(--text-1);text-align:left;cursor:pointer;
}
.nrow:hover{background:color-mix(in srgb, var(--text-1) 6%, transparent);}
.nrow i{width:7px;height:7px;border-radius:2px;flex-shrink:0;background:var(--sc,var(--awol-marketing));}
.nrow strong{font-size:14.5px;font-weight:400;flex-shrink:0;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nrow small{font-size:13px;color:var(--text-3);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}