/* Navigation and shared controls, ported from PR #34. */
@layer components {
  .app {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    min-height: 100dvh;
  }

  /* ---- navigation ---- */
  .nav-primary {
    position: sticky; top: 0; align-self: start;
    min-height: 100dvh;
    display: flex; flex-direction: column; gap: var(--space-4);
    padding: var(--space-3) var(--space-2);
    border-inline-end: 0;
    background: var(--surface-navigation);
    color: var(--on-navigation);
  }
  .nav-primary__brand {
    display: inline-flex; align-items: center; gap: 8px;
    padding-inline: var(--space-2); color: inherit; text-decoration: none;
    font-family: var(--font-sans); font-size: 22px; line-height: 1.2;
    font-weight: 650; letter-spacing: -.035em;
  }
  .wordmark__symbol { inline-size: 28px; block-size: 28px; flex: 0 0 auto; }
  .wordmark__name { white-space: nowrap; }
  .nav-primary__list { display: flex; flex-direction: column; gap: 2px; }
  .nav-primary__content { display: flex; flex-direction: column; gap: var(--space-4); }
  .nav-primary__toggle {
    align-items: center; justify-content: center; gap: var(--space-1);
    min-height: 2.75rem; padding: 0 var(--space-2);
    border: 1px solid var(--navigation-line); border-radius: var(--radius-sm);
    background: transparent; color: var(--on-navigation); font-size: var(--text-sm);
    cursor: pointer;
  }
  .nav-primary__toggle[aria-expanded='true'] .disclosure-arrow { transform: rotate(180deg); }
  .nav-primary__link {
    display: block; padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm); line-height: 1.5; font-weight: 400;
    color: var(--on-navigation-muted); text-decoration: none;
    transition: background-color 120ms var(--ease-standard), color 120ms var(--ease-standard);
  }
  .nav-primary__link:hover { background: var(--navigation-active); color: var(--on-navigation); }
  .nav-primary__link[aria-current='page'] { background: var(--navigation-active); color: var(--on-navigation); font-weight: 700; }
  .nav-primary__note {
    margin-top: auto; padding-inline: var(--space-2);
    font-size: var(--text-xs); line-height: 1.5; color: var(--on-navigation-muted);
  }
  .nav-primary .field__hint { color: var(--on-navigation-muted); }
  .nav-primary .filter-chip { color: var(--on-navigation-muted); border-color: var(--navigation-line); }
  .nav-primary .filter-chip[aria-pressed='true'] { background: var(--on-navigation); color: var(--surface-navigation); border-color: var(--on-navigation); }
  .nav-primary :focus-visible { outline-color: var(--on-navigation); }

  /* ---- main + study header ---- */
  .main { min-width: 0; padding: var(--space-3) var(--space-5) var(--space-6); }

  .study-bar { display: flex; flex-direction: column; gap: var(--space-1); }
  .study-bar__crumbs {
    display: flex; flex-wrap: wrap; gap: var(--space-1);
    font-size: var(--text-sm); line-height: 1.5; color: var(--on-surface-muted);
  }
  .study-bar__crumbs a { color: inherit; text-decoration: none; }
  .study-bar__crumbs a:hover { color: var(--on-surface); text-decoration: underline; }
  .study-bar__meta {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3);
    font-size: var(--text-sm); line-height: 1.5; color: var(--on-surface-muted);
  }
  .study-bar__name { font-size: var(--text-md); font-weight: 700; color: var(--on-surface); }

  .study-tabs {
    display: flex; gap: var(--space-3);
    margin-top: var(--space-3);
    box-shadow: inset 0 -1px 0 var(--line);
    overflow-x: auto; overscroll-behavior: contain; scrollbar-width: none;
  }
  .study-tabs__tab {
    flex-shrink: 0; white-space: nowrap;
    padding-block: var(--space-2);
    font-size: var(--text-sm); line-height: 1.5; font-weight: 400;
    color: var(--on-surface-muted); text-decoration: none;
    border-bottom: 2px solid transparent;
  }
  .study-tabs__tab:hover { color: var(--on-surface); }
  .study-tabs__tab[aria-current='page'] { color: var(--on-surface); font-weight: 700; border-bottom-color: var(--on-surface); }

  .view { margin-top: var(--space-5); }
  .view--top { margin-top: var(--space-2); }

  /* ---- shared buttons ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
    min-height: 2.75rem; padding: 0 var(--space-3);
    border-radius: var(--radius-sm); text-decoration: none;
    font-size: var(--text-sm); line-height: 1; font-weight: 700;
    transition: background-color 120ms var(--ease-standard), color 120ms var(--ease-standard), border-color 120ms var(--ease-standard);
  }
  .btn--primary { background: var(--accent); color: var(--on-accent); }
  .btn--primary:hover { background: var(--accent-hover); }
  .btn--secondary { border: 1px solid var(--line-strong); color: var(--on-surface); background: var(--surface-raised); }
  .btn--secondary:hover { border-color: var(--on-surface-muted); }
  .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
  .link-action {
    font-size: var(--text-sm); line-height: 1.5; font-weight: 700; color: var(--accent);
    text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  }
  .link-action:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }


}

@media (max-width: 60rem) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .nav-primary { position: static; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .nav-primary__list { flex-direction: row; flex-wrap: wrap; }
  .nav-primary__content { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .nav-primary__note { display: none; }
  .main { padding: var(--space-3) var(--space-3) var(--space-6); }
}

@media (max-width: 40rem) {
  .nav-primary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: var(--space-2); }
  .nav-primary__brand { padding: 0; }
  .nav-primary__toggle:not([hidden]) { display: inline-flex; }
  .nav-primary__content { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .nav-primary__list { flex-direction: column; }
  .nav-primary .layout-preference { width: auto; padding: var(--space-2) 0 0; border-top: 1px solid var(--navigation-line); }
  .nav-primary__link { min-height: 2.75rem; display: flex; align-items: center; }
  .nav-primary .filter-chip { min-height: 2.75rem; }
}

.nav-primary__content[hidden], .nav-primary__toggle[hidden] { display: none; }