/* ============ TOKENS ============ */
:root{
  --bg:#f5f6f9; --surface:#ffffff; --surface-2:#eef1f5; --surface-3:#e3e8ee;
  --border:#dde2e9; --border-strong:#c7cedb;
  --text:#12161d; --text-muted:#5c6675; --text-faint:#8892a0;
  --accent:#1c4f92; --accent-strong:#123a6e; --accent-soft:#e5edf8; --on-accent:#ffffff;
  --racing:#d94e17; --racing-strong:#b13e10; --racing-soft:#fdece2;
  --founder:#6a4fd9; --founder-strong:#5138b0; --founder-soft:#efeaff;
  --consulting:#0d8f7f; --consulting-strong:#0a7367; --consulting-soft:#e1f6f2;
  --life:#c93f7c; --life-strong:#a72f65; --life-soft:#fae6f0;
  --success:#178a4c; --success-soft:#e1f5e9;
  --warning:#b5730b; --warning-soft:#fbead0;
  --critical:#c9302c; --critical-soft:#fbe4e3;
  --shadow-1:0 1px 2px rgba(15,23,42,.05), 0 6px 16px -10px rgba(15,23,42,.12);
  --shadow-2:0 8px 24px -8px rgba(15,23,42,.22);
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a0d12; --surface:#12161e; --surface-2:#171c26; --surface-3:#1e2530;
    --border:#262e3b; --border-strong:#323c4b;
    --text:#e9edf3; --text-muted:#9aa5b5; --text-faint:#69748a;
    --accent:#6ea1e0; --accent-strong:#8fb7ea; --accent-soft:#152337; --on-accent:#0a0d12;
    --racing:#ff8a55; --racing-strong:#ffa679; --racing-soft:#2a1710;
    --founder:#b3a1ff; --founder-strong:#c7b9ff; --founder-soft:#1d1938;
    --consulting:#4fd6c0; --consulting-strong:#73e3d1; --consulting-soft:#0d2621;
    --life:#f087b3; --life-strong:#f5a8c8; --life-soft:#2b1620;
    --success:#57d493; --success-soft:#0f2a1d;
    --warning:#e8b34a; --warning-soft:#2e2210;
    --critical:#f37b78; --critical-soft:#301616;
    --shadow-1:0 1px 2px rgba(0,0,0,.3), 0 6px 20px -10px rgba(0,0,0,.5);
    --shadow-2:0 10px 30px -8px rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a0d12; --surface:#12161e; --surface-2:#171c26; --surface-3:#1e2530;
  --border:#262e3b; --border-strong:#323c4b;
  --text:#e9edf3; --text-muted:#9aa5b5; --text-faint:#69748a;
  --accent:#6ea1e0; --accent-strong:#8fb7ea; --accent-soft:#152337; --on-accent:#0a0d12;
  --racing:#ff8a55; --racing-strong:#ffa679; --racing-soft:#2a1710;
  --founder:#b3a1ff; --founder-strong:#c7b9ff; --founder-soft:#1d1938;
  --consulting:#4fd6c0; --consulting-strong:#73e3d1; --consulting-soft:#0d2621;
  --life:#f087b3; --life-strong:#f5a8c8; --life-soft:#2b1620;
  --success:#57d493; --success-soft:#0f2a1d;
  --warning:#e8b34a; --warning-soft:#2e2210;
  --critical:#f37b78; --critical-soft:#301616;
  --shadow-1:0 1px 2px rgba(0,0,0,.3), 0 6px 20px -10px rgba(0,0,0,.5);
  --shadow-2:0 10px 30px -8px rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ============ RESET / BASE ============ */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.font-display{font-family:'Space Grotesk','IBM Plex Sans',sans-serif; letter-spacing:-0.01em; text-wrap:balance; margin:0;}
.num,.font-mono{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:8px}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ============ SHELL LAYOUT ============ */
#app{display:flex; min-height:100%; background:var(--bg);}
#sidebar{
  width:236px; flex:none; background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; height:100dvh; z-index:40;
  padding-top:env(safe-area-inset-top,0px);
}
#sidebar .brand{display:flex; align-items:center; gap:.6rem; padding:1.1rem 1.1rem .8rem;}
#sidebar .brand .mark{width:30px;height:30px;border-radius:9px;background:linear-gradient(140deg,var(--accent),var(--racing));display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:.85rem;flex:none;}
#sidebar .brand .t{font-family:'Space Grotesk';font-weight:700;font-size:1.02rem;}
#sidebar .brand .t small{display:block;font-family:'IBM Plex Sans';font-weight:500;font-size:.66rem;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em;}
#navScroll{flex:1;overflow-y:auto;padding:.25rem .7rem 1rem;}
.nav-group{margin-top:1.1rem;}
.nav-group:first-child{margin-top:0;}
.nav-group-label{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);padding:0 .5rem .35rem;}
.nav-btn{
  display:flex; align-items:center; gap:.6rem; width:100%; text-align:left; background:none; border:none;
  padding:.5rem .55rem; border-radius:9px; cursor:pointer; color:var(--text-muted); font-weight:500; font-size:.85rem;
  margin-bottom:1px;
}
.nav-btn:hover{background:var(--surface-2); color:var(--text);}
.nav-btn.active{background:var(--accent-soft); color:var(--accent-strong); font-weight:600;}
.nav-btn .ic{width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center;}
.nav-btn .count{margin-left:auto;font-family:'IBM Plex Mono';font-size:.68rem;background:var(--surface-3);color:var(--text-muted);padding:.05rem .4rem;border-radius:99px;}
.nav-btn.active .count{background:var(--accent);color:var(--on-accent);}
.nav-btn .dot{width:7px;height:7px;border-radius:99px;margin-left:auto;flex:none;}
#sidebarFoot{padding:.8rem 1rem 1rem;border-top:1px solid var(--border);font-size:.72rem;color:var(--text-faint);}

#main{flex:1; min-width:0; display:flex; flex-direction:column;}
#topbar{
  position:sticky; top:0; z-index:30; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.7rem;
  padding:.65rem 1.2rem; padding-top:calc(.65rem + env(safe-area-inset-top,0px));
}
#menuToggle{display:none;background:var(--surface-2);border:1px solid var(--border);border-radius:8px;width:34px;height:34px;align-items:center;justify-content:center;cursor:pointer;flex:none;}
#captureForm{flex:1;display:flex;align-items:center;gap:.5rem;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:.4rem .6rem;min-width:0;}
#captureForm input{flex:1;background:none;border:none;min-width:0;font-size:.85rem;}
#captureForm input:focus{outline:none;}
#captureForm button{background:var(--accent);color:var(--on-accent);border:none;border-radius:7px;padding:.35rem .7rem;font-size:.78rem;font-weight:600;cursor:pointer;flex:none;}
.topbar-pill{display:flex;align-items:center;gap:.4rem;background:var(--surface-2);border:1px solid var(--border);padding:.4rem .65rem;border-radius:99px;font-size:.72rem;color:var(--text-muted);white-space:nowrap;flex:none;}
.topbar-pill b{color:var(--text);font-weight:600;}
#adhdToggle{display:flex;align-items:center;gap:.4rem;cursor:pointer;flex:none;}
.switch{width:34px;height:19px;border-radius:99px;background:var(--surface-3);border:1px solid var(--border-strong);position:relative;transition:background .15s;flex:none;}
.switch::after{content:"";position:absolute;top:1px;left:1px;width:15px;height:15px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s;}
.switch.on{background:var(--accent);border-color:var(--accent);}
.switch.on::after{transform:translateX(15px); background:#fff;}

#views{flex:1; padding:1.3rem 1.3rem 3rem; max-width:1240px; width:100%; margin:0 auto;}
.view{display:none;}
.view.active{display:block;animation:viewIn .28s cubic-bezier(.16,1,.3,1) both;}
@keyframes viewIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ============ TYPE ============ */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem;}
.eyebrow{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin-bottom:.2rem;}
.page-title{font-size:1.5rem;font-weight:700;}
.page-sub{color:var(--text-muted);font-size:.85rem;margin-top:.25rem;max-width:56ch;}
h2.section-title{font-size:1.02rem;font-weight:700;margin-bottom:.7rem;}
h3.card-title{font-size:.92rem;font-weight:700;}

/* ============ MOTION / MICRO-INTERACTIONS (applies app-wide) ============ */
/* A handful of shared, cheap interactions — consistent hover/press feedback
   and an entrance animation on every modal — since every view in the app
   reuses these same primitives (.row-item, .chip, buttons, openModal()).
   Respects the existing prefers-reduced-motion:reduce rule above, which
   already disables all animations/transitions globally for anyone who's
   asked for that. */
.row-item,.chip,.nav-btn,.btn,.btn-icon,.pin-slot,.lib-card,.media-tile,.account-card{transition:transform .12s cubic-bezier(.16,1,.3,1),border-color .12s ease,background-color .12s ease,box-shadow .12s ease;}
.row-item:hover{border-color:var(--border-strong);background:var(--surface-2);}
.btn:active,.btn-icon:active,.chip:active{transform:scale(.96);}
@keyframes overlayIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:scale(.97) translateY(6px)}to{opacity:1;transform:none}}
.modal-overlay{animation:overlayIn .15s ease both;}
.modal-box{animation:modalIn .16s cubic-bezier(.16,1,.3,1) both;}
@keyframes pulseCrit{0%,100%{opacity:1}50%{opacity:.3}}
.pulse-crit{animation:pulseCrit 1.6s ease-in-out infinite;}

/* ============ GRID / CARD PRIMITIVES ============ */
.grid{display:grid;gap:.9rem;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}
.g-12{grid-template-columns:repeat(12,1fr);}
.span-4{grid-column:span 4;} .span-5{grid-column:span 5;} .span-6{grid-column:span 6;} .span-7{grid-column:span 7;} .span-8{grid-column:span 8;} .span-12{grid-column:span 12;} .span-3{grid-column:span 3;} .span-9{grid-column:span 9;}
@media (max-width:980px){ .g-4,.g-3,.g-2{grid-template-columns:1fr 1fr} .g-12>[class*=span-]{grid-column:span 12 !important} }
@media (max-width:640px){ .g-4,.g-3,.g-2{grid-template-columns:1fr} }

.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:1.1rem;box-shadow:var(--shadow-1);}
.card.flush{padding:0;}
.card-row{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.7rem;}
.stat-tile{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:.95rem 1.1rem;box-shadow:var(--shadow-1);}
.stat-tile .n{font-family:'Space Grotesk';font-size:1.55rem;font-weight:700;line-height:1;}
.stat-tile .l{color:var(--text-muted);font-size:.75rem;margin-top:.35rem;}
.stat-tile .d{font-size:.7rem;margin-top:.3rem;font-weight:600;}

/* ============ BADGES / CHIPS ============ */
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:700;padding:.18rem .5rem;border-radius:99px;white-space:nowrap;letter-spacing:.01em;}
.b-founder{background:var(--founder-soft);color:var(--founder-strong);}
.b-consulting{background:var(--consulting-soft);color:var(--consulting-strong);}
.b-life{background:var(--life-soft);color:var(--life-strong);}
.b-success{background:var(--success-soft);color:var(--success);}
.b-warning{background:var(--warning-soft);color:var(--warning);}
.b-critical{background:var(--critical-soft);color:var(--critical);}
.b-neutral{background:var(--surface-3);color:var(--text-muted);}
.dot-sm{width:7px;height:7px;border-radius:99px;flex:none;display:inline-block;}

.chip{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem;font-weight:600;padding:.32rem .7rem;border-radius:99px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);cursor:pointer;white-space:nowrap;}
.chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.chip-row{display:flex;flex-wrap:wrap;gap:.4rem;}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:.4rem;border-radius:9px;padding:.5rem .85rem;font-size:.8rem;font-weight:600;cursor:pointer;border:1px solid transparent;}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover{background:var(--accent-strong);}
.btn-ghost{background:var(--surface-2);border-color:var(--border);color:var(--text);}
.btn-ghost:hover{background:var(--surface-3);}
.btn-sm{padding:.3rem .6rem;font-size:.72rem;border-radius:7px;}
.btn-icon{width:30px;height:30px;padding:0;justify-content:center;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);}
.btn-icon:hover{background:var(--surface-3);}
.btn[disabled]{opacity:.4;cursor:not-allowed;}

/* ============ LISTS / ROWS ============ */
.list{display:flex;flex-direction:column;gap:.5rem;}
.row-item{display:flex;align-items:center;gap:.65rem;padding:.6rem .7rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);}
.row-item:hover{border-color:var(--border-strong);}
.check{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--border-strong);flex:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--surface);}
.check.done{background:var(--success);border-color:var(--success);color:#fff;}
.item-title{font-size:.85rem;font-weight:600;}
.item-title.done{text-decoration:line-through;color:var(--text-faint);font-weight:500;}
.item-meta{font-size:.72rem;color:var(--text-faint);display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.15rem;}

/* progress bar */
.bar-track{height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden;}
.bar-fill{height:100%;border-radius:99px;}

/* avatars */
.avatar{width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk';font-weight:700;font-size:.8rem;color:#fff;}

/* tabs */
.tabbar{display:flex;gap:.3rem;border-bottom:1px solid var(--border);margin-bottom:1rem;overflow-x:auto;}
.tab-btn{background:none;border:none;padding:.6rem .3rem;font-size:.82rem;font-weight:600;color:var(--text-faint);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;margin-right:1rem;}
.tab-btn.active{color:var(--text);border-color:var(--accent);}
.tabpanel{display:none;}
.tabpanel.active{display:block;animation:viewIn .2s ease both;}

/* forms */
.field{display:flex;flex-direction:column;gap:.3rem;}
.field label{font-size:.72rem;font-weight:600;color:var(--text-muted);}
.field input,.field select,.field textarea{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:.5rem .6rem;font-size:.82rem;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}

/* modal */
.modal-overlay{position:fixed;inset:0;background:rgba(10,13,18,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem;}
.modal-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-2);width:480px;max-width:100%;max-height:88vh;overflow-y:auto;padding:1.3rem;}
[hidden]{display:none!important;}

/* empty / helper */
.muted{color:var(--text-muted);}
.faint{color:var(--text-faint);}
.small{font-size:.74rem;}
.hr{height:1px;background:var(--border);margin:.9rem 0;}
.scroll-x{overflow-x:auto;}
.sparkline{display:block;}
.section-note{background:var(--surface-2);border:1px dashed var(--border-strong);border-radius:10px;padding:.6rem .8rem;font-size:.76rem;color:var(--text-muted);}

/* mobile bottom nav */
body.focus-mode #views{max-width:760px;}
body.focus-mode .card, body.focus-mode .stat-tile{box-shadow:none;}
body.focus-mode .badge{filter:saturate(.65);}
#bottomNav{display:none;}
@media (max-width:900px){
  #sidebar{position:fixed;left:0;top:0;bottom:0;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow-2);}
  #sidebar.open{transform:translateX(0);}
  #menuToggle{display:flex;}
  #sidebarScrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:39;display:none;}
  #sidebarScrim.show{display:block;}
}
@media (max-width:640px){
  #views{padding:1rem .9rem 5rem;}
  .page-title{font-size:1.25rem;}
  #topbar{padding:.55rem .8rem;}
  .topbar-pill span.hide-sm{display:none;}
}

/* ============ LIVE-APP ADDITIONS (auth gate, settings, connection cards) ============ */
#authGate{position:fixed;inset:0;background:var(--bg);z-index:500;display:flex;align-items:center;justify-content:center;padding:1rem;}
#authGate .box{background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-2);padding:2rem;max-width:380px;width:100%;text-align:center;}
#authGate .mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(140deg,var(--accent),var(--racing));display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Space Grotesk';font-weight:700;font-size:1.2rem;margin:0 auto 1rem;}
#authGate h1{font-size:1.2rem;margin-bottom:.4rem;}
#authGate p{color:var(--text-muted);font-size:.85rem;margin-bottom:1.3rem;}
.gsi-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:.65rem 1rem;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface);font-weight:600;font-size:.85rem;cursor:pointer;}
.gsi-btn:hover{background:var(--surface-2);}
.banner{border-radius:12px;padding:.7rem 1rem;font-size:.82rem;margin-bottom:1rem;display:flex;align-items:center;gap:.6rem;}
.banner-demo{background:var(--warning-soft);color:var(--warning);border:1px solid var(--warning);}
.banner-error{background:var(--critical-soft);color:var(--critical);border:1px solid var(--critical);}
.banner-success{background:var(--success-soft);color:var(--success);border:1px solid var(--success);}
.account-card{display:flex;align-items:center;gap:.8rem;padding:.9rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);margin-bottom:.6rem;}
.account-card .prov-badge{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:'Space Grotesk';color:#fff;flex:none;}
.sync-status{font-size:.7rem;padding:.15rem .5rem;border-radius:99px;}
.sync-ok{background:var(--success-soft);color:var(--success);}
.sync-pending{background:var(--surface-3);color:var(--text-muted);}
.sync-error{background:var(--critical-soft);color:var(--critical);}

/* ============ LIBRARY (notes/quotes/journal/books/inventory) ============ */
.lib-filter-group{margin-bottom:1.1rem;}
.lib-filter-label{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);padding:0 .1rem .45rem;}
.lib-filter-item{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.4rem .55rem;border-radius:8px;cursor:pointer;font-size:.82rem;color:var(--text-muted);}
.lib-filter-item:hover{background:var(--surface-2);color:var(--text);}
.lib-filter-item.active{background:var(--accent-soft);color:var(--accent-strong);font-weight:600;}
.lib-filter-item .n{font-family:'IBM Plex Mono';font-size:.68rem;color:var(--text-faint);}
.lib-filter-item.active .n{color:var(--accent-strong);}
.lib-tag-pill{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:600;padding:.3rem .6rem;border-radius:99px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);cursor:pointer;margin:0 .3rem .3rem 0;}
.lib-tag-pill.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
.lib-masonry{column-count:3;column-gap:1rem;}
@media (max-width:980px){.lib-masonry{column-count:2;}}
@media (max-width:640px){.lib-masonry{column-count:1;}}
.lib-card{break-inside:avoid;margin-bottom:1rem;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-1);cursor:pointer;}
.lib-card:hover{border-color:var(--border-strong);}
.lib-card img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;}
.lib-card .body{padding:.9rem 1rem;}
.lib-card .eyebrow-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.4rem;}
.lib-card .eyebrow-row .kind{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);display:flex;align-items:center;gap:.3rem;}
.lib-card .eyebrow-row .date{font-size:.7rem;color:var(--text-faint);}
.lib-card .quote-text{font-family:'Space Grotesk';font-style:italic;font-size:.95rem;line-height:1.4;color:var(--text);}
.lib-card .body-text{font-size:.84rem;line-height:1.5;color:var(--text);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;}
.lib-card .body-title{font-weight:700;font-size:.92rem;margin-bottom:.25rem;}
.lib-card .body-author{font-size:.76rem;color:var(--text-muted);margin-top:.35rem;}
.lib-empty{grid-column:1/-1;text-align:center;padding:3rem 1rem;color:var(--text-faint);}

/* ============ MEDIA LIBRARY (photos/videos) ============ */
.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem;}
.media-tile{position:relative;border-radius:12px;overflow:hidden;background:var(--surface-2);border:1px solid var(--border);aspect-ratio:1/1;cursor:pointer;}
.media-tile img,.media-tile video{width:100%;height:100%;object-fit:cover;display:block;}
.media-tile .video-badge{position:absolute;top:.4rem;right:.4rem;background:rgba(0,0,0,.55);color:#fff;border-radius:99px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
.media-tile .caption-overlay{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);color:#fff;font-size:.68rem;padding:.5rem .5rem .35rem;opacity:0;transition:opacity .15s;}
.media-tile:hover .caption-overlay{opacity:1;}
.media-upload-drop{border:1.5px dashed var(--border-strong);border-radius:12px;padding:1.6rem 1rem;text-align:center;color:var(--text-muted);font-size:.82rem;cursor:pointer;background:var(--surface-2);}
.media-upload-drop:hover{background:var(--surface-3);}
.media-progress{height:5px;border-radius:99px;background:var(--surface-3);overflow:hidden;margin-top:.5rem;}
.media-progress .fill{height:100%;background:var(--accent);transition:width .2s;}

/* ============ BRIEFING (Today view) ============ */
.attn-row{display:flex;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid var(--border);}
.attn-row:last-child{border-bottom:none;}
.attn-dot{width:8px;height:8px;border-radius:99px;flex:none;}
.attn-row .attn-title{font-size:.86rem;font-weight:600;}
.attn-row .attn-meta{font-size:.72rem;color:var(--text-faint);margin-top:.1rem;}
.attn-actions{display:flex;gap:.9rem;font-size:.72rem;flex:none;}
.attn-actions a{color:var(--text-muted);font-weight:600;cursor:pointer;}
.attn-actions a:hover{color:var(--accent);}
.reflection-card{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.2rem;}
.reflection-card .quote{font-family:'Space Grotesk';font-style:italic;font-size:1.02rem;line-height:1.45;}
.reflection-card .attrib{font-size:.72rem;color:var(--text-faint);margin-top:.6rem;text-transform:uppercase;letter-spacing:.04em;}
.routine-group-label{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);margin:.7rem 0 .35rem;}
.routine-group-label:first-child{margin-top:0;}
.routine-row{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;}
.routine-row .rr-label{flex:1;font-size:.84rem;}
.routine-row .rr-label.done{text-decoration:line-through;color:var(--text-faint);}
.routine-streak{display:flex;align-items:center;gap:.2rem;font-family:'IBM Plex Mono';font-size:.72rem;color:var(--warning);flex:none;}
.pin-slot{display:flex;align-items:center;gap:.6rem;padding:.55rem .1rem;border-bottom:1px solid var(--border);cursor:pointer;}
.pin-slot:last-child{border-bottom:none;}
.pin-slot.empty{color:var(--text-faint);border-bottom:1px dashed var(--border);}
.pin-slot.empty:last-child{border-bottom:none;}
.reflection-card.compact{background:var(--surface);padding:.9rem 1rem;}
.reflection-card.compact .quote{font-size:.86rem;}
.mc-panel-body .reflection-card.compact .eyebrow{display:none;}

/* ============ MISSION CONTROL (Briefing, desktop no-scroll layout) ============
   Below ~1100px wide, none of this applies — the page falls back to a
   normal stacked, scrolling layout (small screens don't have the width to
   show seven domains, a lane row and a three-column feed at once without
   turning into illegible confetti). At desktop width, body.view-today-active
   sizes #views to exactly the viewport below the topbar and turns the whole
   Briefing into one flex column that fills it — see the one rule-set at the
   bottom of this block. */
.mc-pill-row{display:flex;flex-wrap:wrap;gap:.4rem;}
.mc-pill{display:flex;align-items:center;gap:.4rem;padding:.42rem .7rem;border-radius:10px;border:1px solid var(--border);background:var(--surface-2);font-size:.76rem;font-weight:600;color:var(--text-muted);cursor:pointer;white-space:nowrap;}
.mc-pill:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.mc-pill .mc-pill-n{font-family:'IBM Plex Mono';font-size:.66rem;background:var(--surface-3);color:inherit;padding:.05rem .42rem;border-radius:99px;}
.mc-pill.has-critical{border-color:var(--critical);color:var(--critical);background:var(--critical-soft);}
.mc-pill.has-critical .mc-pill-n{background:var(--surface);}
.mc-pill.has-warning{border-color:var(--warning);color:var(--warning);background:var(--warning-soft);}
.mc-pill.has-warning .mc-pill-n{background:var(--surface);}

.mc-lane-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;}
@media (max-width:900px){.mc-lane-row{grid-template-columns:repeat(2,1fr);}}
.mc-lane{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:.55rem .7rem;cursor:pointer;min-width:0;}
.mc-lane:hover{border-color:var(--border-strong);transform:translateY(-1px);}
.mc-lane-title{font-size:.8rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}

.mc-grid{display:flex;flex-direction:column;gap:.9rem;min-width:0;}
.mc-col{display:flex;flex-direction:column;gap:.7rem;min-width:0;}
.mc-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-1);display:flex;flex-direction:column;min-width:0;}
.mc-panel-head{flex:none;padding:.75rem .9rem .5rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.mc-panel-body{padding:0 .9rem .8rem;display:flex;flex-direction:column;gap:.45rem;}
.mc-more{text-align:center;font-size:.72rem;font-weight:700;color:var(--accent);cursor:pointer;padding:.4rem 0 .1rem;}
.mc-more:hover{text-decoration:underline;}

.alert-row{display:flex;align-items:center;gap:.55rem;padding:.5rem 0;border-bottom:1px solid var(--border);cursor:pointer;}
.alert-row:last-child{border-bottom:none;}
.alert-row:hover .attn-title{color:var(--accent);}
.alert-row .attn-title{font-size:.82rem;font-weight:600;}
.alert-row .attn-meta{font-size:.7rem;color:var(--text-faint);margin-top:.1rem;}
.alert-row .attn-actions{display:flex;gap:.7rem;font-size:.7rem;flex:none;}
.alert-row .attn-actions a{color:var(--text-muted);font-weight:600;cursor:pointer;}
.alert-row .attn-actions a:hover{color:var(--accent);}
.alert-row-ic{display:flex;flex:none;}

@media (min-width:1101px){
  /* #main normally has no height of its own — it just grows as tall as
     whatever #views contains, same as every other (scrolling) view. Giving
     it an explicit viewport height here, only while the Briefing is active,
     is what makes "flex:1" below actually have something definite to fill
     instead of hugging content height — the one load-bearing rule in this
     whole block. */
  body.view-today-active #main{height:100vh;height:100dvh;overflow:hidden;}
  body.view-today-active #views{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding-bottom:1rem;}
  body.view-today-active #view-today.active{flex:1;min-height:0;display:flex;flex-direction:column;}
  body.view-today-active .mc-grid{flex-direction:row;flex:1;min-height:0;}
  body.view-today-active .mc-col{min-height:0;}
  body.view-today-active .mc-panel{min-height:0;}
  body.view-today-active .mc-panel-body{flex:1;min-height:0;overflow-y:auto;}
}