/* =====================================================================
   LAYOUT — the shell.

     .app        the grid: navigation rail + main column
     .rail       brand, grouped navigation, account
     .topbar     sticky header of the main column
     .content    the page itself, held to a readable measure

   Below 1000px the rail becomes a drawer over the page.
   ===================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
}

/* --------------------------------------------------------------- rail */
.rail {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s4) var(--s3) var(--s3);
  background: var(--surface);
  border-inline-end: 1px solid var(--line);
  overflow-y: auto;
  z-index: 30;
}

.rail__brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s2) var(--s3);
}
.rail__brand strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.15;
}
.rail__brand small {
  display: block;
  color: var(--ink-3);
  font-size: var(--text-xs);
}

.rail__nav {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}
.navgroup__title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 var(--s2) var(--s2);
}
.navgroup__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.navlink {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 8px var(--s3);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}
.navlink:hover {
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
}
.navlink svg {
  width: 17px;
  height: 17px;
  flex: none;
  opacity: 0.85;
}
.navlink__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navlink[aria-current="page"] {
  background: var(--ochre-tint);
  color: var(--ochre-deep);
  font-weight: 600;
}
/* Ochre deep is too dark to read on a dark ground, so the lighter brand
   colour carries the selected item there. */
:root[data-theme="dark"] .navlink[aria-current="page"] {
  color: var(--ochre);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .navlink[aria-current="page"] {
    color: var(--ochre);
  }
}

/* The rail's own account block sits at the bottom. */
.rail__foot {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.whoami {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2);
  border-radius: var(--r-sm);
}
.whoami__name {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whoami__meta {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar);
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 0 var(--s5);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}
.topbar--scrolled {
  border-bottom-color: var(--line);
}
.topbar__title {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.content {
  padding: var(--s6) var(--s5) var(--s8);
  width: 100%;
  max-width: var(--measure);
}

/* ------------------------------------------------------- drawer mode */
.rail__scrim {
  display: none;
}

@media (max-width: 999px) {
  .app {
    grid-template-columns: minmax(0, 1fr);
  }
  .rail {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(86vw, var(--rail));
    transform: translateX(-102%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-lg);
  }
  [dir="rtl"] .rail {
    transform: translateX(102%);
  }
  .app[data-drawer="open"] .rail {
    transform: none;
  }
  .app[data-drawer="open"] .rail__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 25;
    background: rgba(26, 23, 20, 0.45);
    animation: fade var(--dur) var(--ease);
  }
  .content {
    padding: var(--s5) var(--s4) var(--s8);
  }
}

/* The drawer button exists only while the rail is a drawer. The selector is
   more specific than `.btn` in components.css, which would otherwise win. */
@media (min-width: 1000px) {
  .topbar .drawer-toggle {
    display: none;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}