/* ============================================================
   Mirath: Views / shell layout
   App-body layout (sidebar + main), the Scribe's Chamber ledger
   index (desktop sidebar), bottom-nav overrides (mobile), view
   transition, view-header pattern, responsive grid.
   Breakpoints: stack ≤600px · sidebar + 2-col ≥900px · 3-col ≥1200px.
   All colors via css/tokens.css custom properties.
   Owner: SHELL agent.
   ============================================================ */

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  top: -100vh;
  left: var(--space-4);
  z-index: 300;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-raised);
  font-size: var(--text-subhead);
}

.skip-link:focus {
  top: var(--space-4);
}

/* ---------- Shell body: sidebar + main ---------- */

.app-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.view-root {
  width: 100%;
  margin-inline: auto;
}

.view-root:focus {
  outline: none;
}

/* ---------- View transition: 260ms fade/slide ----------
   prefers-reduced-motion collapses this via the global rule
   in css/base.css. */

.view-anim {
  animation: mirath-view-enter 260ms var(--ease-ios-push) both;
}

@keyframes mirath-view-enter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Bottom nav (mobile, ≤900px) ----------
   Five destinations: Home · Calculator · Estate · Documents · Learn. */

.bottom-nav {
  grid-template-columns: repeat(5, 1fr);
}

a.nav-item {
  text-decoration: none;
  min-width: 0; /* let grid columns shrink below the label's natural width */
}

.nav-icon {
  display: block;
  width: 22px;
  height: 22px;
}

/* The five labels ("Calculator", "Documents") must never wrap or clip
   at 320px: truncate safely and step the size down on narrow screens. */
.nav-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 360px) {
  .nav-label {
    font-size: var(--text-legal);
    letter-spacing: -0.01em;
  }
}

.nav-item.is-active {
  color: var(--color-accent);
}

/* ---------- Sidebar: the Scribe's Chamber ledger index ----------
   Hidden on mobile; the primary navigation on desktop. */

.sidebar {
  display: none;
}

.sidebar-ledger-label {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding-inline: var(--space-3);
  margin-bottom: var(--space-5);
}

.sidebar-group {
  margin-bottom: var(--space-6);
}

.sidebar-group-label {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  padding-inline: var(--space-3);
  margin-bottom: var(--space-2);
}

.sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min);
  padding-inline: var(--space-3);
  border-radius: var(--radius-sm);
  border-inline-start: 2px solid transparent;
  font-family: var(--font-serif);
  font-size: var(--text-callout);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition:
    color var(--dur-micro) ease,
    background var(--dur-micro) ease,
    border-color var(--dur-micro) ease;
}

@media (hover: hover) and (pointer: fine) {
  .sidebar-link:hover {
    color: var(--color-text-primary);
    background: var(--color-surface);
  }
}

.sidebar-link.is-active {
  color: var(--color-accent);
  border-inline-start-color: var(--color-accent);
  background: var(--color-surface);
  background: color-mix(in srgb, var(--color-accent) 7%, transparent);
  font-weight: 600;
}

.sidebar-link-gloss {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  color: var(--color-text-faint);
}

/* ---------- View header pattern (shared by views) ---------- */

.view-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.view-title {
  font-size: var(--text-display);
}

.view-lede {
  font-size: var(--text-body);
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 38rem;
}

/* ---------- Responsive grid ----------
   Stacked by default (≤600px and all mobile), 2-col ≥900px,
   3-col ≥1200px, per BUILD-CONTRACT.md §Views. */

.grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}

/* ---------- ≥900px: the desktop chamber ---------- */

@media (min-width: 900px) {
  .bottom-nav {
    display: none;
  }

  .sidebar {
    display: block;
    width: 264px;
    flex-shrink: 0;
    overflow-y: auto;
    border-inline-end: 1px solid var(--color-separator);
    background: var(--color-bg);
    padding: var(--space-6) var(--space-4) var(--space-10);
  }

  .main-content {
    padding-inline: var(--space-8);
    padding-block: var(--space-8);
  }

  .view-root {
    width: min(92%, 1400px);
  }

  .grid--2,
  .grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- ≥1200px ---------- */

@media (min-width: 1200px) {
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}