/* ───────────────────────────────────────────────────────────────────────────
   section-shell.css — the shared section list (app IA, PR 1;
   docs/design/app-ia-2026-10-11.md §5 option B). Routing and visibility:
   /js/section-router.js. Tokens only (css/penna-tokens.css).

   Desktop: a left column of grouped sections beside the open section. Phones
   (≤767px, the router's phoneQuery): the list on its own (.is-list), then one
   section at a time with a Back button.

   Neutral class names for every page:          Settings' markup, same rules:
     .section-shell   the two-column layout       .settings-layout
     .section-nav     the list (+ __group,        .settings-nav
                      __heading, __list, __link)
     .section-content the column of sections      .settings-content
     .section-panel   one section (+ __title)     .settings-section
     .section-back    the phone Back button       .settings-back
   Settings keeps its names until it is switched over, so this file carries
   both; css/settings-layout.css keeps what only Settings has.
   ─────────────────────────────────────────────────────────────────────────── */

.section-shell,
.settings-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

/* `hidden` must win over the display a class gives (the profile form is
   .u-flex-col-12). */
.section-panel[hidden],
.settings-section[hidden],
.section-shell [data-section-group][hidden],
.settings-layout [data-section-group][hidden],
.section-nav [data-nav-section][hidden],
.settings-nav [data-nav-section][hidden] { display: none; }

/* ── Section list ── */
.section-nav__group + .section-nav__group,
.settings-nav__group + .settings-nav__group { margin-top: 24px; }

.section-nav__heading,
.settings-nav__heading {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  padding: 0 12px;
  margin: 0 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-nav__list,
.settings-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Same look as the app sidebar's .nav-link (css/dashboard.css). */
.section-nav__link,
.settings-nav__link {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  color: var(--ink-2);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  transition: background .12s, color .12s, border-color .12s;
}
.section-nav__link:hover,
.settings-nav__link:hover { background: var(--paper-hi); color: var(--ink); }
.section-nav__link[aria-current="page"],
.settings-nav__link[aria-current="page"] {
  background: var(--paper-hi);
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--gold);
}

/* ── Sections ── */
.section-panel__title,
.settings-section__title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 16px;
}
.section-panel__title:focus:not(:focus-visible),
.settings-section__title:focus:not(:focus-visible) { outline: none; }

/* The phone Back button; desktop has the list beside every section. */
.section-back,
.settings-back {
  display: none;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  padding: 6px 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}

/* ── Phones: the list, or one section ── */
@media (max-width: 767px) {
  .section-shell,
  .settings-layout { display: block; }
  .section-shell.is-list .section-content,
  .settings-layout.is-list .settings-content { display: none; }
  .section-shell:not(.is-list) .section-nav,
  .settings-layout:not(.is-list) .settings-nav { display: none; }

  .section-nav__list,
  .settings-nav__list {
    gap: 0;
    background: var(--paper-hi);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
  }
  .section-nav__list > li + li,
  .settings-nav__list > li + li { border-top: 1px solid var(--rule); }
  .section-nav__link,
  .settings-nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-left: 0;
    border-radius: 0;
    font-size: .95rem;
  }
  .section-nav__link::after,
  .settings-nav__link::after { content: "\203A"; color: var(--muted); font-size: 1.1rem; }

  .section-back,
  .settings-back { display: inline-flex; }
}

/* ── Top tabs (phoneQuery: null; app IA PR 8, PennaVentory) ──────────────────
   The same router, a row of tabs instead of the list. The look is the one the
   page's own tab bar had: bold labels on a rule, the open one underlined in
   the accent colour. Settings does not use these. */
.section-tabs {
  margin-bottom: 22px;
  border-bottom: 1.5px solid var(--slate-200);
}
.section-tabs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}
.section-tabs [data-nav-section][hidden] { display: none; }
.section-tabs__link {
  display: block;
  padding: 10px 16px;
  margin-bottom: -1.5px;
  border-bottom: 2.5px solid transparent;
  color: var(--slate-500);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.section-tabs__link:hover { color: var(--slate-700); }
.section-tabs__link[aria-current="page"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}