/* ═══════════ Reset + shell layout ═══════════ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: var(--primary-text); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { line-height: var(--lh-tight); font-weight: 650; letter-spacing: -0.014em; text-wrap: balance; }
h1 { font-size: var(--fs-2xl); letter-spacing: -0.026em; }
h2 { font-size: var(--fs-xl); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--primary-soft); color: var(--text); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

.skip-link {
  position: fixed; top: -100px; left: var(--s-4); z-index: 200;
  background: var(--primary); color: var(--on-primary);
  padding: var(--s-2) var(--s-4); border-radius: var(--r-md); font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--s-4); text-decoration: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ═══════════ Shell ═══════════ */

.app-shell {
  display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100dvh;
  transition: grid-template-columns var(--dur) var(--ease);
}
/* Rail mode: icons only, ~3× more room for the content column. */
.app-shell[data-rail="1"] { grid-template-columns: var(--rail-w) 1fr; }

.sidebar {
  position: sticky; top: 0; height: 100dvh;
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-5) var(--s-3) var(--s-4);
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  z-index: 40;
}

.sidebar__brand { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-2) var(--s-2); }
.brand__mark {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: var(--r-md); color: #fff;
  background: linear-gradient(140deg, var(--primary), hsl(var(--hue-accent) 90% 58%));
  box-shadow: var(--shadow-sm);
}
.brand__mark svg { stroke-width: 1.9; }

/* Icons inherit text colour, so they theme themselves. */
.ico, [data-icon] { display: inline-flex; align-items: center; justify-content: center; flex: none; }
[data-icon] svg { display: block; }

.sidebar__rail-btn { margin-left: auto; width: 32px; height: 32px; }
@media (max-width: 900px) { .sidebar__rail-btn { display: none; } }
.brand__text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.brand__text strong { font-size: var(--fs-md); letter-spacing: -0.02em; }
.brand__text small {
  font-size: var(--fs-xs); color: var(--text-faint); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Not overflow-x:hidden — that would clip the active-item indicator (which sits
   at a negative left offset) and, in rail mode, the hover tooltips. */
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.sidebar__nav a {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-3) var(--s-3); border-radius: var(--r-md);
  color: var(--text-muted); font-weight: 520; font-size: var(--fs-sm);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  position: relative;
}
.sidebar__nav a:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.sidebar__nav a.is-active { background: var(--primary-soft); color: var(--primary-text); font-weight: 620; }
.sidebar__nav a.is-active::before {
  content: ""; position: absolute; left: calc(var(--s-3) * -1 + 1px);
  top: 50%; translate: 0 -50%; width: 3px; height: 20px;
  background: var(--primary); border-radius: 0 3px 3px 0;
}
.nav__ico { width: 20px; }
.nav__label { white-space: nowrap; }

.sidebar__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--border); }

/* ── Rail mode (desktop only) ── */
@media (min-width: 901px) {
  .app-shell[data-rail="1"] .brand__text,
  .app-shell[data-rail="1"] .nav__label,
  .app-shell[data-rail="1"] .theme-label { display: none; }

  .app-shell[data-rail="1"] .sidebar { padding-inline: var(--s-2); overflow: visible; }
  .app-shell[data-rail="1"] .sidebar__brand { justify-content: center; padding-inline: 0; }
  .app-shell[data-rail="1"] .sidebar__rail-btn {
    position: absolute; top: var(--s-5); right: -14px; margin: 0;
    width: 28px; height: 28px; z-index: 1;
    background: var(--surface); border: 1px solid var(--border); border-radius: 50%;
    box-shadow: var(--shadow-sm);
  }
  /* Seven items never scroll, and `overflow-y:auto` would clip the tooltips
     (and count them toward scrollWidth, producing a phantom scrollbar). */
  .app-shell[data-rail="1"] .sidebar__nav { overflow: visible; }
  .app-shell[data-rail="1"] .sidebar__nav a { justify-content: center; padding-inline: 0; }
  .app-shell[data-rail="1"] .sidebar__foot { flex-direction: column; gap: var(--s-2); }
  .app-shell[data-rail="1"] .level-chip { padding: 4px 7px; font-size: 10px; }
  .app-shell[data-rail="1"] #themeToggle { width: 40px; padding: 0; }

  /* Icon-only nav needs its name back on hover. */
  .app-shell[data-rail="1"] .sidebar__nav a::after {
    content: attr(title);
    position: absolute; left: calc(100% + 10px); top: 50%; translate: 0 -50%;
    padding: 5px var(--s-3); border-radius: var(--r-sm);
    background: var(--text); color: var(--bg);
    font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease);
    box-shadow: var(--shadow); z-index: 50;
  }
  .app-shell[data-rail="1"] .sidebar__nav a:hover::after,
  .app-shell[data-rail="1"] .sidebar__nav a:focus-visible::after { opacity: 1; }
}

.main-col { display: flex; flex-direction: column; min-width: 0; }

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s-3);
  height: var(--topbar-h); padding: 0 var(--s-5);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--border);
}
.topbar__menu { display: none; }
.topbar__title { font-weight: 650; font-size: var(--fs-md); letter-spacing: -0.015em; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__stats { display: flex; gap: var(--s-2); }

.stat-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--s-3); border-radius: var(--r-full);
  background: var(--surface); border: 1px solid var(--border);
  font-size: var(--fs-xs); color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.stat-pill b { color: var(--text); font-weight: 640; }
/* --accent is a bright orange fill colour; as small text it fails AA. */
.stat-pill--due b { color: var(--warn-text); }
.stat-pill--due[data-zero="1"] b { color: var(--text-faint); }

.view {
  flex: 1; width: 100%; max-width: 1140px; margin-inline: auto;
  padding: var(--s-6) var(--s-5) var(--s-8);
  animation: viewIn var(--dur) var(--ease-out);
}
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.tabbar { display: none; }
.scrim { display: none; }

/* ═══════════ Mobile ═══════════ */
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed; inset: 0 auto 0 0; width: min(84vw, 300px);
    transform: translateX(-102%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-lg); z-index: 60;
    padding-top: max(var(--s-5), env(safe-area-inset-top));
  }
  .sidebar.is-open { transform: none; }

  .scrim {
    display: block; position: fixed; inset: 0; z-index: 50;
    background: hsl(250 30% 6% / .5);
    backdrop-filter: blur(2px);
    animation: fadeIn var(--dur-fast) var(--ease);
  }
  .scrim[hidden] { display: none; }
  @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

  .topbar { padding: 0 var(--s-4); padding-top: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); }
  .topbar__menu { display: grid; }
  .topbar__stats .stat-pill { padding: 4px var(--s-2); }

  .view { padding: var(--s-5) var(--s-4) calc(var(--tabbar-h) + var(--s-6)); }

  .tabbar {
    position: fixed; inset: auto 0 0 0; z-index: 45;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    height: var(--tabbar-h);
    padding-bottom: env(safe-area-inset-bottom);
    background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
    backdrop-filter: saturate(1.6) blur(14px);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-top: 1px solid var(--border);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    /* --text-faint fails WCAG AA against the bar background; --text-muted passes. */
    color: var(--text-muted); font-size: 15px; text-decoration: none;
    transition: color var(--dur-fast) var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar a em { font-style: normal; font-size: 11px; font-weight: 560; letter-spacing: .01em; }
  .tabbar a.is-active { color: var(--primary-text); }
  .tabbar a:active { scale: .94; }

  /* Sidebar's own nav is the drawer on mobile — keep all 7 links. */
}

@media (min-width: 901px) {
  .sidebar { transform: none !important; }
}