/* Page chrome: header, nav, body wrapper, blocks, footer. */

/* ---------- header ---------- */
/* The header and nav form one sticky block that auto-hides while scrolling down
   (ui/chromeAutoHide.js toggles .chrome-hidden on <html>). Both are sticky so the pair
   stays on screen while reading; the hide is a transform, not display:none, so the page
   content never reflows. z-index 100 keeps them under the modal (1000) and toast (900)
   but above page content and the floating stop button (40).
   The header sits one layer higher than the nav: both create stacking contexts, and on a
   tie the later sibling (the nav) would paint over the header's dropdown menus, which open
   downwards across the nav's band. */
.p-header {
  position: sticky;
  top: 0;
  z-index: 110;
  background: var(--header-bg);
  color: var(--header-fg);
  transition: transform .2s ease;
}
/* Lifted by its own height so it leaves the viewport entirely; the nav below shifts by the
   combined height (it starts at --header-h and must clear the top edge). */
:root.chrome-hidden .p-header {
  transform: translateY(calc(-1 * var(--header-h, 100%)));
}
.p-header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 12px;
}
/* voz.vn sizes the same file by width (98px, height auto). Ours is scaled by height so the
   aspect ratio sets the width; the bar is only 6px-padded, so 26px keeps the wordmark
   legible without eating the whole strip. */
.p-header-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.p-header-logo img {
  display: block;
  height: 26px;
  width: auto;
  /* The source artwork is white (#f2f4f7), which is what the dark header needs, so no filter
     or colour override is applied. */
}
.p-header-logo:hover { opacity: .85; }
.p-header-account {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: calc(14px * var(--ui-scale));
}
.p-header-account .avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--chrome-avatar-bg);
}
.p-header-account .username { color: var(--on-dark); font-weight: var(--fw-bold); }
.p-header-account .badge {
  background: var(--nav-active);
  color: var(--on-dark);
  border-radius: 10px;
  padding: 0 6px;
  font-size: calc(12px * var(--ui-scale));
  font-weight: var(--fw-bold);
}

/* ---------- nav ---------- */
.p-nav {
  position: sticky;
  /* Parks the nav directly under the header; --header-h is set by ui/chromeAutoHide.js. */
  top: var(--header-h, 0px);
  z-index: 100;
  background: var(--nav-bg);
  /* No border-top: the header and nav share the same --nav-bg, and any hairline here reads as
     a white line cutting the two bars apart. Separation comes from the active tab underline. */
  transition: transform .2s ease;
}
:root.chrome-hidden .p-nav {
  /* Starts at --header-h, so it needs the full pair height to clear the viewport. */
  transform: translateY(calc(-1 * var(--chrome-h, 100%)));
}
@media (prefers-reduced-motion: reduce) {
  .p-header, .p-nav { transition: none; }
}
.p-nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 12px;
}
.p-nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Shortcuts can be added without limit; the cap is a safety valve, not a layout limit. */
  max-height: 40vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.p-nav-list > li { min-width: 0; max-width: 100%; }
.p-nav-list a {
  display: block;
  padding: 6px 12px;
  color: var(--nav-fg);
  font-size: calc(14px * var(--ui-scale));
  font-weight: var(--fw-bold);
  border-bottom: 3px solid transparent;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.p-nav-list a:hover { color: var(--on-dark); background: var(--overlay-hairline); }
.p-nav-list a.is-active {
  color: var(--on-dark);
  border-bottom-color: var(--nav-active);
}

/* ---------- page body ---------- */
.p-body {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 14px 12px 40px;
}
.p-breadcrumbs {
  font-size: calc(14px * var(--ui-scale));
  color: var(--nav-fg);
  margin-bottom: 10px;
  min-height: 1px;
}
.p-breadcrumbs a { color: var(--nav-fg); }
.p-breadcrumbs a:hover { color: var(--on-dark); }
.p-breadcrumbs .sep { margin: 0 6px; color: var(--chrome-dimmed); }

/* ---------- blocks ---------- */
.block {
  background: var(--content-bg);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}
.block-header {
  margin: 0;
  background: var(--block-header-bg);
  color: var(--block-header-fg);
  padding: 7px 12px;
  font-size: calc(19px * var(--ui-scale));
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 10px;
}
.block-header a { color: var(--block-header-fg); }
.block-header .block-header-extra {
  margin-left: auto;
  font-size: calc(13px * var(--ui-scale));
  font-weight: 400;
  opacity: .9;
}
.block-body { padding: 0; }
.block-body--pad { padding: 12px; }
.block-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  font-size: calc(14px * var(--ui-scale));
  color: var(--dimmed);
}

/* ---------- footer ---------- */
.p-footer {
  background: var(--footer-bg);
  color: var(--footer-fg);
  font-size: calc(14px * var(--ui-scale));
}
.p-footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 18px 12px;
}
.p-footer a { color: var(--on-chrome-link); }
.p-footer .u-dimmed, .p-footer .u-muted { color: var(--chrome-dimmed); }
/* Single line by default; the bottom margin only matters once a second paragraph is added. */
.p-footer p { margin: 0; }
.p-footer p + p { margin-top: 6px; }