/* The Study — shared app shell: header, Style switch, tab bar / rail, quick add.
   Link after tokens.css on every page that loads /app/shell.js.
   Rules that must beat a module's own inline <style> are prefixed body.study-shell. */
:root { --study-header-h:56px; --study-tabbar-h:58px; --study-rail-w:220px; }

body.study-shell { padding-bottom:calc(var(--study-tabbar-h) + env(safe-area-inset-bottom)); }

/* ── Header ── */
.study-header {
  position:sticky; top:0; z-index:790;
  display:flex; align-items:center; gap:8px;
  min-height:calc(var(--study-header-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 8px 0 16px;
  background:var(--ink); color:var(--surface); font-family:var(--font-text);
}
.study-header h1 {
  flex:1; margin:0; font-family:var(--font-display); font-weight:400;
  font-size:22px; line-height:1.2; letter-spacing:0.02em; color:var(--surface);
}
.study-back {
  width:44px; height:44px; margin-left:-12px; display:grid; place-items:center;
  color:var(--accent-hi); font-size:30px; line-height:1; text-decoration:none;
}
.study-avatar {
  width:44px; height:44px; border-radius:50%; flex:none; display:grid; place-items:center;
  border:1px solid var(--accent); color:var(--accent-hi); text-decoration:none;
  font-family:var(--font-display); font-size:16px;
}

/* ── Style switch (Closet | Wardrobe) ── */
.study-segmented {
  display:flex; gap:3px; margin:12px 16px; padding:3px;
  background:var(--surface-2); border:1px solid var(--border); font-family:var(--font-text);
}
.study-segmented a {
  flex:1; min-height:40px; display:flex; align-items:center; justify-content:center;
  font-size:15px; color:var(--secondary); text-decoration:none;
}
.study-segmented a[aria-current="page"] { background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(36,31,27,.15); }

/* ── Tab bar (phone) ── */
.study-tabbar {
  position:fixed; left:0; right:0; bottom:0; z-index:800;
  display:grid; grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--ink); border-top:1px solid #3a3530; font-family:var(--font-text);
}
.study-tab {
  min-height:var(--study-tabbar-h); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--muted); font-size:12px; letter-spacing:0.04em; text-decoration:none;
}
.study-tab svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.5; }
.study-tab[aria-current="page"] { color:var(--accent-hi); }

/* ── Quick add ── */
.study-fab {
  position:fixed; right:16px; bottom:calc(var(--study-tabbar-h) + 16px + env(safe-area-inset-bottom)); z-index:810;
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background:var(--accent); color:var(--accent-on); font-size:28px; line-height:1;
  box-shadow:0 4px 12px rgba(36,31,27,.3);
}
.study-sheet-backdrop { position:fixed; inset:0; z-index:950; background:rgba(36,31,27,.45); }
.study-sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:951; max-width:560px; margin:0 auto;
  padding:8px 16px calc(16px + env(safe-area-inset-bottom));
  background:var(--surface); border-top:2px solid var(--accent); font-family:var(--font-text);
}
.study-sheet[hidden], .study-sheet-backdrop[hidden] { display:none; }
.study-grabber { width:40px; height:4px; margin:4px auto 12px; background:var(--rule); border-radius:2px; }
.study-sheet h2 { margin:0 0 8px; font-family:var(--font-display); font-weight:400; font-size:20px; color:var(--ink); }
.study-list { list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.study-list a, .study-list button {
  display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:0 2px;
  border:0; border-bottom:1px solid var(--border); background:none; text-align:left; cursor:pointer;
  font-family:var(--font-text); font-size:17px; color:var(--ink); text-decoration:none;
}

/* ── Helpers for module pages ── */
/* A row of tabs or buttons that scrolls inside itself on a phone instead of widening the page. */
body.study-shell .study-scroll-row {
  display:flex; flex-wrap:nowrap; overflow-x:auto; max-width:100%;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
body.study-shell .study-scroll-row::-webkit-scrollbar { display:none; }
body.study-shell .study-scroll-row > * { flex:none; }
/* Module actions that used to live in the masthead. */
.study-toolbar { display:flex; gap:8px; padding:8px 16px; background:var(--surface-2); border-bottom:1px solid var(--border); }
.study-toolbar button {
  min-height:40px; padding:0 14px; border:1px solid var(--border); border-radius:var(--radius);
  background:var(--surface); color:var(--ink); cursor:pointer; white-space:nowrap;
  font-family:var(--font-text); font-size:15px;
}
.study-toolbar button:hover { border-color:var(--accent); }
.study-toolbar button.busy { opacity:.55; pointer-events:none; }

.study-header a:focus-visible, .study-segmented a:focus-visible, .study-tab:focus-visible,
.study-fab:focus-visible, .study-list a:focus-visible, .study-list button:focus-visible,
.study-toolbar button:focus-visible { outline:2px solid var(--accent-hi); outline-offset:2px; }

/* On a phone, lift module toasts clear of the tab bar. */
@media (max-width:899px) {
  body.study-shell .toast {
    bottom:calc(var(--study-tabbar-h) + env(safe-area-inset-bottom) + 16px);
  }
}

/* The corner #toast (Cellar, Training, Wardrobe) shares the bottom-right
   corner with the "+" quick-add button (z-index 810) — keep it above the
   button, and on a phone lift it clear of the button's own lift.
   Scoped to these pages by data-page so Closet and Diary's centred toasts
   (class .toast with higher z-index) are not out-specified by id selector. */
body.study-shell[data-page="cellar"] #toast,
body.study-shell[data-page="training"] #toast,
body.study-shell[data-page="wardrobe"] #toast { z-index:820; }
@media (max-width:899px) {
  body.study-shell[data-page="cellar"] #toast,
  body.study-shell[data-page="training"] #toast,
  body.study-shell[data-page="wardrobe"] #toast {
    bottom:calc(var(--study-tabbar-h) + env(safe-area-inset-bottom) + 88px);
  }
}

/* ── Desktop: the tab bar becomes a left rail with the wordmark ── */
@media (min-width:900px) {
  body.study-shell { padding-bottom:0; padding-left:var(--study-rail-w); }
  .study-tabbar {
    top:0; right:auto; width:var(--study-rail-w);
    grid-template-columns:1fr; grid-auto-rows:min-content; align-content:start;
    padding:20px 0; border-top:0; border-right:1px solid #3a3530;
  }
  .study-tabbar::before {
    content:'The Study'; padding:4px 24px 24px;
    font-family:var(--font-display); font-size:24px; letter-spacing:0.08em; color:var(--surface);
  }
  .study-tab { flex-direction:row; justify-content:flex-start; gap:12px; min-height:48px; padding:0 24px; font-size:16px; }
  .study-tab[aria-current="page"] { background:rgba(255,255,255,.05); box-shadow:inset 3px 0 var(--accent); }
  .study-fab { right:24px; bottom:24px; }
  .study-segmented { max-width:420px; }
}