/* base.css — Theme variables, auth screen, sidebar, header, profile popover, bottom nav, page layout. */

:root {
  --bg0:#060c07; --bg1:#0b1a0d; --bg2:#132618; --bg3:#1d3a22;
  --border:#263f2a; --green:#52c45a; --green2:#2d7a33;
  --gold:#d4a843; --cream:#f2ebd8; --text:#c8dcc0; --muted:#6b8f65;
  --red:#e05252; --amber:#d4a843;
  --font-display:'Sora',system-ui,sans-serif;
  --font-sans:'Inter',system-ui,sans-serif;
  --shadow-sm:0 1px 6px rgba(0,0,0,.35);
  --shadow-md:0 4px 18px rgba(0,0,0,.45);
}
/* ── LIGHT THEME — exact match with strainr-public palette ── */
body[data-theme="light"] {
  --bg0:#f5f1ea;   /* --bg on public site */
  --bg1:#ffffff;   /* --bg-card */
  --bg2:#eeebe4;   /* --bg-input */
  --bg3:#e4e0d8;   /* slightly darker than input, for hover/active states */
  --border:#ddd8ce;
  --text:#1c2e1e;
  --muted:#6b7c6d;
  --cream:#1c2e1e; /* headings flip to dark in light mode */
  --shadow-sm:0 1px 4px rgba(0,0,0,.07);
  --shadow-md:0 4px 18px rgba(0,0,0,.12);
}
body[data-theme="light"]::after{background:radial-gradient(ellipse 70% 50% at 5% 15%,rgba(100,160,80,.06) 0%,transparent 60%);}
/* Light theme: product type overrides */
body[data-theme="light"].theme-hash #page-discover,
body[data-theme="light"].theme-hash #page-browse,
body[data-theme="light"].theme-hash #page-wishlist,
body[data-theme="light"].theme-hash #page-journal{--green:#a07830;--green2:#7a5a20;}
body[data-theme="light"].theme-extract #page-discover,
body[data-theme="light"].theme-extract #page-browse,
body[data-theme="light"].theme-extract #page-wishlist,
body[data-theme="light"].theme-extract #page-journal{--green:#888820;--green2:#666610;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
button,input,select,textarea{font-family:inherit;}
body{font-family:var(--font-sans);font-size:.88rem;background:var(--bg0);color:var(--text);min-height:100vh;overflow-x:hidden;}
body::after{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 70% 50% at 5% 15%,rgba(20,70,25,.12) 0%,transparent 60%);pointer-events:none;z-index:0;}
/* ── AUTH SCREEN ── */
#auth-screen{position:fixed;inset:0;background:var(--bg0);z-index:9999;display:flex;align-items:center;justify-content:center;}
.auth-box{background:var(--bg1);border:1px solid var(--border);border-radius:4px;padding:2.5rem;width:90%;max-width:400px;position:relative;z-index:1;}
.auth-brand{font-family:var(--font-display);font-size:2rem;color:var(--cream);text-align:center;margin-bottom:.5rem;}
.auth-brand span{color:var(--green);}
.auth-sub{font-size:.65rem;color:var(--muted);text-align:center;margin-bottom:2rem;}
.auth-input{width:100%;background:var(--bg2);border:1px solid var(--border);color:var(--text);font-family:var(--font-sans);font-size:.82rem;padding:.7rem .9rem;border-radius:6px;outline:none;margin-bottom:.8rem;transition:border-color .15s,box-shadow .15s;}
.auth-input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(82,196,90,.1);}
.auth-btn{width:100%;background:linear-gradient(135deg,var(--green2),var(--green));color:var(--bg0);font-family:var(--font-sans);font-size:.67rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;border:none;padding:.75rem;border-radius:2px;cursor:pointer;margin-bottom:.6rem;}
.auth-toggle{text-align:center;font-size:.65rem;color:var(--muted);margin-top:1rem;}
.auth-toggle-btn{background:none;border:none;color:var(--green);cursor:pointer;font:inherit;padding:0;}
.auth-error{background:rgba(224,82,82,.1);border:1px solid var(--red);border-radius:2px;padding:.6rem .8rem;font-size:.65rem;color:var(--red);margin-bottom:.8rem;display:none;}
.auth-error.show{display:block;}
.auth-notice{background:rgba(82,196,90,.08);border:1px solid var(--green);border-radius:2px;padding:.6rem .8rem;font-size:.65rem;color:var(--green);margin-bottom:.8rem;display:none;line-height:1.5;}
.auth-notice.show{display:block;}
/* ── SIDEBAR (desktop only) ── */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:240px;background:#0b1a0d;border-right:1px solid #263f2a;padding:1.5rem 0;z-index:100;display:flex;flex-direction:column;}
@media(max-width:768px) {
  .sidebar{display:none;}
}
.sidebar-logo{font-family:var(--font-display);font-size:1.8rem;color:#f2ebd8;padding:0 1.5rem;margin-bottom:2rem;}
.sidebar-logo span{color:var(--green);}
.nav-menu{list-style:none;display:flex;flex-direction:column;flex:1;overflow-y:auto;}
.nav-item{padding:.6rem 1rem;cursor:pointer;font-size:.72rem;letter-spacing:.07em;text-transform:uppercase;color:#6b8f65;transition:background .15s,color .15s;border-left:none;border-radius:6px;margin:0 .6rem .1rem;display:flex;align-items:center;gap:.7rem;}
.nav-item:hover{background:#1d3a22;color:#c8dcc0;}
.nav-item.active{background:rgba(82,196,90,.15);color:var(--green);}
.nav-item.logout{border-radius:0;border-top:1px solid #263f2a;color:var(--red);padding:.75rem 1.5rem;margin:0;}
.nav-icon{font-size:1rem;}
.nav-badge{background:#1d3a22;border:1px solid #263f2a;border-radius:10px;padding:.05rem .4rem;font-size:.55rem;margin-left:auto;}
.sidebar-user-footer{padding:1rem 1.5rem;border-top:1px solid #263f2a;margin-top:auto;}
.sidebar-username{font-size:.75rem;color:#c8dcc0;font-weight:600;margin-bottom:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-buds{font-size:.65rem;color:#6b8f65;display:flex;align-items:center;gap:.35rem;margin-bottom:.6rem;}
.sidebar-buds svg{color:var(--green);}
.sidebar-theme-btn{background:#132618;border:1px solid #263f2a;border-radius:20px;padding:.3rem .75rem;cursor:pointer;font-size:.62rem;color:#6b8f65;font-family:var(--font-sans);display:flex;align-items:center;gap:.4rem;transition:border-color .15s,color .15s;}
.sidebar-theme-btn:hover{border-color:var(--green);color:#c8dcc0;}
/* ── PROFILE CHIP (mobile only) ── */
.profile-chip{display:none;width:30px;height:30px;border-radius:50%;background:var(--green);border:none;cursor:pointer;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:.65rem;font-weight:700;color:#060c07;flex-shrink:0;margin:auto .6rem auto 0;transition:opacity .15s;}
@media(max-width:768px) {
  .profile-chip{display:flex;}
}
#profile-chip-initials{pointer-events:none;}
/* ── PROFILE POPOVER ── */
.profile-popover.open{display:block;animation:popIn .15s ease both;}
@keyframes popIn{from{opacity:0;transform:scale(.95) translateY(-6px);}to{opacity:1;transform:scale(1) translateY(0);}}
.ppop-header{display:flex;align-items:center;gap:.75rem;padding:.85rem 1rem;}
.ppop-initials-lg{width:36px;height:36px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:.75rem;font-weight:700;color:#060c07;flex-shrink:0;}
.ppop-username{font-size:.78rem;font-weight:600;color:var(--text);}
.ppop-buds{font-size:.65rem;color:var(--muted);display:flex;align-items:center;gap:.3rem;margin-top:.15rem;}
.ppop-buds svg{color:var(--green);}
.ppop-divider{height:1px;background:var(--border);margin:0;}
.ppop-theme-row{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1rem;cursor:pointer;transition:background .12s;}
.ppop-theme-row:hover{background:var(--bg2);}
.ppop-theme-label{font-size:.72rem;color:var(--text);font-family:var(--font-sans);}
.ppop-toggle{display:inline-flex;align-items:center;width:32px;height:18px;border-radius:9px;background:#263f2a;border:1px solid #3d5c43;transition:background .2s,border-color .2s;flex-shrink:0;}
.ppop-toggle[aria-checked="true"]{background:var(--green);border-color:var(--green);}
.ppop-toggle-knob{width:12px;height:12px;border-radius:50%;background:#fff;margin-left:2px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.ppop-toggle[aria-checked="true"] .ppop-toggle-knob{transform:translateX(14px);}
.ppop-item{width:100%;background:none;border:none;cursor:pointer;text-align:left;padding:.6rem 1rem;font-size:.72rem;color:var(--text);font-family:var(--font-sans);display:flex;align-items:center;gap:.6rem;transition:background .12s;}
.ppop-item:hover{background:var(--bg2);}
.ppop-item svg{color:var(--muted);flex-shrink:0;}
.ppop-logout{color:var(--red);}
.ppop-logout svg{color:var(--red);}
.ppop-tiers{display:flex;gap:0;margin-top:.55rem;border-top:1px solid var(--border);padding-top:.55rem;width:100%;}
.ppop-tier-col{width:33.333%;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:0 .25rem;}
.ppop-tier-col+.ppop-tier-col{border-left:none;}
.ppop-tier-label{font-size:.55rem;font-family:var(--font-sans);letter-spacing:.04em;text-transform:uppercase;opacity:.8;text-align:center;}
.ppop-tier-medal{display:flex;align-items:center;justify-content:center;min-height:18px;}
/* Popover backdrop (invisible, closes popover on outside tap) */
.ppop-backdrop{display:none;position:fixed;inset:0;z-index:199;}
.ppop-backdrop.open{display:block;}
/* ── BOTTOM NAV (always dark) ── */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:100;background:#0b1a0d;border-top:1px solid #263f2a;padding:0;height:58px;}
@media(max-width:768px) {
  .bottom-nav{display:flex;}
}
.bnav-btn{flex:1;background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:.4rem 0;color:#6b8f65;font-family:var(--font-sans);font-size:.55rem;letter-spacing:.04em;text-transform:uppercase;transition:color .15s;}
.bnav-btn svg{stroke:#6b8f65;transition:stroke .15s;}
.bnav-btn.active{color:var(--green);}
.bnav-btn.active svg{stroke:var(--green);}
/* ── MAIN LAYOUT ── */
.app{max-width:1280px;margin:0 auto;padding:72px 1.5rem 5rem;position:relative;z-index:1;}
@media(max-width:768px) {
  .app{padding:64px 1rem 74px;}
}
@media(min-width:769px) {
  .app{margin-left:280px;padding-top:72px;}
}
/* ── PAGES ── */
.page{display:none;}
.page.active{display:block;animation:pageIn .18s ease both;}
@keyframes pageIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.page-header{margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border);}
.page-title{font-family:var(--font-display);font-size:2.1rem;color:var(--cream);letter-spacing:-.01em;}
.page-sub{font-size:.82rem;color:var(--muted);margin-top:.4rem;line-height:1.6;}
/* ── GLOBAL INPUT FOCUS ── */
input[type=text]:focus,input[type=number]:focus,input[type=email]:focus,input[type=password]:focus{border-color:var(--green)!important;box-shadow:0 0 0 3px rgba(82,196,90,.1);outline:none;}