/* Phone shell first. Legacy page rules remain in base.css and components.css. */
html { min-height: 100%; }
body { min-height: 100dvh; overflow-x: clip; }
.app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  padding: var(--safe-top) var(--safe-right) 0 var(--safe-left);
  transition: transform var(--motion-base) var(--motion-ease);
}
/* #784: reading pushes chrome aside — scroll down hides the bar, scroll up restores it
   (phone only; the JS never adds this class at ≥900px). */
.app-header.is-hidden { transform: translateY(calc(-100% - var(--safe-top))); }
.app-header__inner {
  min-height: var(--topbar-h);
  padding: 0 var(--space-3);
  gap: var(--space-2);
}
.app-header__title { min-width: 0; flex: 1; text-align: center; }
.app-header__title .page-type-pill { margin: 0; }
.shell-icon, .avatar-link, .shell-back {
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--tap-min);
  position: relative;
}
.shell-back { color: var(--fg-muted); white-space: nowrap; }
/* The in-page text form ("← Profile", "← Lists" — change-password, list detail, reading
   history) is a row of words, not the header's 44 px icon square: the fixed inline-size
   above wrapped the arrow onto its own line. Keep the tap floor, let the words run. */
.app-main .shell-back {
  inline-size: auto; min-inline-size: var(--tap-min); flex: 0 0 auto;
  align-self: flex-start; justify-content: flex-start;
  padding-inline: 0;
}
.avatar-link .nav-unread { position: absolute; top: 4px; right: 4px; pointer-events: none; }
/* The header's round controls share ONE 32px visual inside their tap box. base.html draws
   the bell's chrome on `.avatar-link` itself, so the 44px tap box above turned it into a
   44px grey disc beside the 32px avatar and the 31px tickets pill (owner report
   2026-10-03). The chrome moves to a centred 32px disc behind the icon; the box stays the
   hit area. */
.app-header .avatar-link { background: transparent; border-color: transparent; isolation: isolate; }
.app-header .avatar-link:not(:has(.avatar))::before {
  content: ""; position: absolute; z-index: -1;
  inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: 32px; block-size: 32px; translate: -50% -50%;
  border-radius: 50%; background: var(--bg-elev-2); border: 1px solid var(--border);
  transition: background var(--motion-fast) var(--motion-ease);
}
.app-header .avatar-link:not(:has(.avatar)):hover::before { background: var(--bg-elev); border-color: var(--border-strong); }
.app-header .guide-context { display: inline-flex; align-items: center; }
.shell-back:hover { text-decoration: none; color: var(--accent); }
/* R-547 rework: the shared .shell-icon rule above cages its content in a fixed 44px
   square, centred — fine for a single glyph, but the brand link is glyph + "smut", and at
   402px width the centred overflow spilled left past x=0 (#726 review). The brand isn't an
   icon-only tap target like the avatar/back button, so let it size to its content instead
   of the square, keeping the tap floor as a block-size minimum only. */
.brand.shell-icon {
  inline-size: auto;
  flex: 0 0 auto;
  justify-content: flex-start;
  min-block-size: var(--tap-min);
}
.app-main {
  padding: var(--space-4) var(--space-4) calc(var(--tabbar-h) + var(--safe-bottom) + var(--space-5));
}
.bottom-tabs {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-tabbar);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  min-height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
  background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgb(0 0 0 / 8%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.bottom-tabs__item {
  min-inline-size: 0;
  min-block-size: var(--tabbar-h);
  display: grid;
  place-content: center;
  gap: 1px;
  color: var(--fg-muted);
  font-size: var(--fs-caption);
  font-weight: 650;
  text-align: center;
}
.bottom-tabs__item svg { inline-size: 20px; block-size: 20px; margin-inline: auto; }
.bottom-tabs__item[aria-current="page"] { color: var(--accent); }
.bottom-tabs__more { border: 0; background: none; position: relative; }
.more-sheet {
  inline-size: min(100%, 42rem);
  max-block-size: var(--sheet-max-h);
  margin: auto 0 0;
  padding: var(--space-2) var(--space-4) calc(var(--space-4) + var(--safe-bottom));
  border: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--bg-elev);
  color: var(--fg);
  box-shadow: var(--shadow-lg);
}
.bottom-tabs.is-hidden { transform: translateY(calc(100% + var(--safe-bottom))); }
.bottom-tabs { transition: transform var(--motion-base) var(--motion-ease); }
.more-sheet[open] { display: flex; flex-direction: column; overscroll-behavior: contain; animation: sheet-in var(--motion-base) var(--motion-ease); }
.more-sheet__body { overflow-y: auto; overscroll-behavior: contain; }
.more-sheet__footer { margin-top: auto; padding-top: var(--space-3); }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.more-sheet::backdrop { background: rgb(0 0 0 / 45%); }
.more-sheet__handle { inline-size: 38px; block-size: 4px; margin: var(--space-1) auto var(--space-3); border-radius: var(--radius-pill); background: var(--border-strong); }
.more-sheet__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.more-sheet__head h2 { margin: 0; font-size: var(--fs-h2); }
.more-sheet__group { margin-top: var(--space-4); }
.more-sheet__controls { padding: var(--space-2); background: var(--bg-elev-2); border-radius: var(--radius); margin-top: var(--space-2); }
.more-sheet__label { margin: 0 0 var(--space-1); color: var(--fg-faint); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.more-sheet__link { display: flex; align-items: center; color: var(--fg); padding-inline: var(--space-2); }
.more-sheet__link:hover { background: var(--bg-elev-2); text-decoration: none; }
.more-sheet form { margin: var(--space-3) 0 0; }
.more-sheet form button { inline-size: 100%; text-align: start; }
.env-banner { position: sticky; top: 0; z-index: calc(var(--z-header) + 1); padding: calc(var(--safe-top) + 4px) var(--space-3) 4px; }
/* The desktop top navigation (#784, DESIGN-SYSTEM §3.10: "tab bar becomes top
   navigation" at md). Hidden on phones — the bottom tab bar owns navigation there. */
.header-nav { display: none; }
@media (min-width: 900px) {
  /* Desktop is secondary: the phone tab bar is REPLACED by the header's top navigation
     (`.header-nav` in base.html) — it used to persist as a floating bottom island on a
     1440px screen. Every destination it carried, including the More sheet, lives in the
     header row now, so nothing becomes unreachable. */
  .bottom-tabs { display: none; }
  .header-nav { display: flex; align-items: stretch; gap: var(--space-1); margin-inline: var(--space-3); }
  .header-nav__item {
    display: inline-flex; align-items: center;
    padding: 0 var(--space-3);
    min-block-size: var(--tap-min);
    font-size: var(--fs-body); font-weight: 600;
    color: var(--fg-muted); text-decoration: none;
    border: 0; background: none; cursor: pointer;
    border-radius: var(--radius-sm);
    position: relative;
  }
  .header-nav__item:hover { color: var(--fg); background: var(--bg-elev-2); text-decoration: none; }
  .header-nav__item[aria-current="page"] { color: var(--accent); }
  .header-nav__item[aria-current="page"]::after {
    content: ""; position: absolute; inset-inline: var(--space-3); inset-block-end: 0;
    block-size: 2px; border-radius: 1px; background: var(--accent);
  }
  .app-main { padding-block-end: var(--space-7); }
  .app-header__inner { max-width: var(--page-max); margin-inline: auto; }
  .more-sheet { margin-inline: auto; }
  /* With the tab bar gone, the toast region anchors to the viewport bottom. */
  .toast-region { inset-block-end: var(--space-4); }
}
@media (orientation: landscape) and (max-height: 499px) {
  .bottom-tabs { grid-template-columns: repeat(4, auto); justify-content: space-around; }
  .bottom-tabs__item { font-size: 0; }
  .bottom-tabs__item > :first-child { font-size: var(--fs-caption); }
  .more-sheet { max-block-size: 92dvh; }
}

/* ==========================================================================
   Composition utilities
   ========================================================================== */

/* Stack — vertical rhythm */
.stack--s { display: flex; flex-direction: column; gap: var(--space-2); }
.stack--m { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--l { display: flex; flex-direction: column; gap: var(--space-6); }
.stack--tight { display: flex; flex-direction: column; gap: 0; }

/* Cluster — horizontal wrap */
.cluster--s { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cluster--m { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Grid shorthand */
.grid--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Spacing */
.p-s { padding: var(--space-3); }
.p-m { padding: var(--space-4); }
.p-l { padding: var(--space-6); }
.p-lr { padding-inline: var(--space-4); }
.pt-s { padding-top: var(--space-3); }
.pb-l { padding-bottom: var(--space-8); }
.mt-s { margin-top: var(--space-3); }
.mt-m { margin-top: var(--space-4); }
.mb-s { margin-bottom: var(--space-3); }
.mb-l { margin-bottom: var(--space-8); }

/* Text */
.t-xs { font-size: var(--fs-caption); }
.t-sm { font-size: var(--fs-small); }
.t-base { font-size: var(--fs-base); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 700; }
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 700; letter-spacing: -0.02em; }
.tc { text-align: center; }
.tl { text-align: left; }
.muted { color: var(--fg-muted); }
.accent { color: var(--accent); }

/* Overflow helpers */
.w-full { inline-size: 100%; }
.min-w0 { min-inline-size: 0; }
.overflow-hidden { overflow: hidden; }
.overflow-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Display */
.hidden { display: none; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }

/* Accessibility: focus-visible */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; } }