/* ═══════════════════════════════════════════════════════════════════════════
   ilmbee parent app — same shell mechanics as /admin/css/admin.css (grid
   sidebar, tab router, card/field/table system), a light cream sidebar
   instead of admin's dark navy dashboard: this is customer-facing warmth,
   not an internal ops tool, so it should feel like the marketing site
   wearing a slightly more functional hat, not a back office.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --navy-900:#0B1229; --navy-800:#121A3A; --navy-700:#141C3D;
  --navy-500:#2C3A6B; --navy-300:#5C6585; --navy-200:#8A92AC;
  --gold-700:#A8842F; --gold-600:#C09640; --gold-500:#D6AF57;
  --gold-400:#E3C579; --gold-200:#F2E3BE; --gold-100:#FAF3E0;
  --cream-50:#FDFBF5; --cream-100:#F8F3E7; --cream-200:#EFE7D4;
  --ok:#2E7D4F; --warn:#B0651F; --bad:#B23B3B;
  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --sh-1:0 1px 2px rgba(20,28,61,.06), 0 4px 10px rgba(20,28,61,.06);
  --sh-2:0 2px 4px rgba(20,28,61,.06), 0 10px 24px rgba(20,28,61,.10);
  --ease:cubic-bezier(.22,1,.36,1);
  --sidew:230px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px; line-height:1.5;
  color:var(--navy-700);
  background:var(--cream-100);
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
table{border-collapse:collapse;width:100%}

/* ── Sign-in gate ── */
.gate-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--cream-100)}
.gate{
  max-width:400px; width:100%; padding:36px 32px;
  background:#fff; color:var(--navy-800);
  border-radius:var(--r-lg); box-shadow:var(--sh-2); border:1px solid var(--cream-200);
  display:flex; flex-direction:column; gap:14px;
}
.gate__mark{font-family:"Fraunces",Georgia,serif; font-weight:800; font-size:1.375rem; color:var(--gold-700)}
.gate h1{font-family:"Fraunces",Georgia,serif; font-size:1.5rem}
.gate p{color:var(--navy-300); font-size:13px}
.gate-tabs{display:flex; gap:4px; background:var(--cream-100); border-radius:12px; padding:4px}
.gate-tabs button{flex:1; padding:9px 10px; border-radius:9px; font-weight:600; font-size:12.5px; color:var(--navy-300)}
.gate-tabs button.active{background:#fff; color:var(--navy-900); box-shadow:var(--sh-1)}
.gate .err{color:var(--bad); font-size:13px; min-height:1em}
.gate .ok{color:var(--ok); font-size:13px}

/* ── Buttons ── */
.btn{
  height:40px; padding:0 18px; border-radius:10px;
  background:var(--gold-500); color:var(--navy-800); font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease), opacity .15s;
  box-shadow:0 3px 0 var(--gold-700);
  text-decoration:none; /* .btn is used on <a> too (Read, Buy) — kill the UA underline */
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px); box-shadow:0 1px 0 var(--gold-700)}
.btn:disabled{opacity:.5; cursor:not-allowed; transform:none}
.btn.wide{width:100%}
.btn.ghost{background:transparent; color:var(--navy-700); box-shadow:none; border:1.5px solid var(--cream-200)}
.btn.ghost:hover{border-color:var(--gold-500)}
.btn.sm{height:32px; padding:0 12px; font-size:12.5px}

/* ── Shell ── */
.shell{display:grid; grid-template-columns:var(--sidew) minmax(0,1fr); min-height:100vh}
.side{
  position:sticky; top:0; height:100vh;
  background:#fff; color:var(--navy-500);
  display:flex; flex-direction:column;
  border-right:1px solid var(--cream-200);
}
.side-brand{
  padding:22px 20px 16px; display:flex; align-items:center; gap:8px;
  font-family:"Fraunces",Georgia,serif; font-weight:800; font-size:1.0625rem;
  color:var(--navy-900);
}
.side-brand span{color:var(--gold-600); font-weight:600; font-size:.8em}
.side-nav{flex:1; overflow-y:auto; padding:10px}
.tab{
  display:flex; align-items:center; gap:10px;
  width:100%; text-align:left; padding:11px 12px; border-radius:10px;
  font-size:13.5px; font-weight:600; color:var(--navy-300); margin-bottom:2px;
}
.tab:hover{background:var(--cream-100); color:var(--navy-800)}
.tab.active{background:var(--gold-100); color:var(--gold-700)}
.side-foot{padding:12px 10px; border-top:1px solid var(--cream-200)}
.side-foot .tab{color:var(--navy-300)}

.main{padding:26px 30px 60px; min-width:0; max-width:820px}
.view{display:none}
.view.active{display:block}

/* ── Banners ── */
.note{padding:12px 16px; border-radius:10px; font-size:13px; margin-bottom:14px; line-height:1.5}
.note.bad{background:#FCEAEA; color:#7A2020; border:1px solid #F0C6C6}
.note.ok{background:#EAF6EE; color:#1F5C36; border:1px solid #C7E7D2}
.note.warn{background:var(--gold-100); color:var(--warn); border:1px solid var(--gold-400)}

/* ── Page furniture ── */
.pg-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap}
.pg-title{font-family:"Fraunces",Georgia,serif; font-weight:800; font-size:1.5rem; color:var(--navy-900)}
.pg-lead{color:var(--navy-300); font-size:13.5px; margin:-14px 0 20px}

/* ── Cards / tables ── */
.card{background:#fff; border:1px solid var(--cream-200); border-radius:var(--r-lg); box-shadow:var(--sh-1); overflow:hidden}
.card + .card{margin-top:16px}
.card__head{padding:16px 20px; border-bottom:1px solid var(--cream-200); font-weight:700; font-size:14.5px}
.card__body{padding:18px 20px}

table.grid th, table.grid td{padding:10px 14px; text-align:left; border-bottom:1px solid var(--cream-200); font-size:13px}
table.grid th{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-200); background:var(--cream-50)}
table.grid tbody tr:last-child td{border-bottom:0}
.empty{padding:36px 20px; text-align:center; color:var(--navy-200); font-size:13.5px}

/* ── Chips ── */
.chip{display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; font-size:11.5px; font-weight:700}
.chip.ok{background:#EAF6EE; color:var(--ok)}
.chip.warn{background:var(--gold-100); color:var(--warn)}
.chip.muted{background:var(--cream-100); color:var(--navy-300)}

/* ── Stats / progress (Library dashboard) ── */
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px}
.stat{background:#fff; border:1px solid var(--cream-200); border-radius:var(--r-lg); box-shadow:var(--sh-1); padding:16px 18px}
.stat--wide{grid-column:span 2; display:flex; flex-direction:column; justify-content:center}
.stat__n{font-family:"Fraunces",Georgia,serif; font-weight:800; font-size:1.9rem; color:var(--navy-900); line-height:1}
.stat__l{font-size:12px; font-weight:600; color:var(--navy-300); margin-top:6px}
.bar{height:8px; border-radius:999px; background:var(--cream-100); overflow:hidden}
.bar__fill{height:100%; border-radius:999px; background:var(--gold-500); transition:width .3s var(--ease)}

/* ── Segmented filter ── */
.seg{display:inline-flex; gap:2px; background:var(--cream-100); border-radius:999px; padding:3px}
.seg button{
  border:0; background:transparent; cursor:pointer; padding:5px 12px; border-radius:999px;
  font-size:12px; font-weight:700; color:var(--navy-300); font-family:inherit;
}
.seg button.active{background:#fff; color:var(--navy-900); box-shadow:var(--sh-1)}

@media (max-width:560px){ .stat--wide{grid-column:span 1} }

/* ── Forms ── */
.field{display:flex; flex-direction:column; gap:5px; margin-bottom:14px}
.field label{font-size:12px; font-weight:700; letter-spacing:.03em; color:var(--navy-300)}
.field input, .field select, .field textarea{
  padding:9px 12px; border-radius:9px; border:1.5px solid var(--cream-200); background:var(--cream-50);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold-500); background:#fff}
.form-row{display:flex; gap:12px; flex-wrap:wrap}
.form-row .field{flex:1; min-width:160px}
.muted{color:var(--navy-300)}

/* ── Book grid (Library tab) ── */
.book-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px}
.book-tile{
  display:flex; flex-direction:column; gap:6px; padding:14px 16px; border-radius:14px;
  background:var(--cream-50); border:1px solid var(--cream-200); text-decoration:none; color:inherit;
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.book-tile:hover{transform:translateY(-2px); box-shadow:var(--sh-1)}
.book-tile strong{font-family:"Fraunces",Georgia,serif; font-size:1.02rem; color:var(--navy-900)}
.book-tile span{font-size:.8rem; color:var(--navy-300)}

@media (max-width:900px){
  /* display:block, not display:grid + grid-template-columns:1fr: the grid
     container's min-height:100vh (from the base rule, unset here) was
     distributing its leftover height into .side's auto row — grid rows
     don't just size to content the way block boxes do once the container
     has extra height to give away. Block sidesteps that whole mechanism. */
  .shell{display:block; min-height:0}
  /* Each piece (brand, tabs, footer actions) stacks as its own compact
     block row rather than all competing to wrap together on shared lines
     — that nested-flex-wrap approach fought itself and pushed tabs off
     the right edge instead of onto a new line. */
  /* .side is still `display:flex; flex-direction:column` from the base
     rule (only position/height/border are overridden below), so .side-nav
     keeps its base `flex:1` — a flex-grow item stretching to fill the
     column's cross-axis. `flex:none` here is what actually stops it. */
  .side{position:static; height:auto; border-right:0; border-bottom:1px solid var(--cream-200); padding:10px 14px}
  .side-brand{padding:0; margin-bottom:8px}
  .side-nav{flex:none; display:flex; flex-wrap:wrap; gap:4px; padding:0; overflow:visible}
  .tab{width:auto; padding:7px 10px; font-size:12.5px; flex:none}
  .side-foot{padding:8px 0 0; border-top:0; display:flex; flex-wrap:wrap; gap:4px}
  .side-foot .tab{color:var(--navy-300)}
  .main{padding:16px 16px 40px; max-width:none}
}
@media (max-width:480px){
  .side-brand{font-size:.95rem}
  .pg-title{font-size:1.25rem}
}