/* Design System 3.0 global chrome — the docked header and the rounded footer.
 *
 * Scoped to the application layout. program.html.erb carries its own header and
 * footer; session/embed/forms/admin carry none. test/integration/
 * site_chrome_scope_test.rb pins that split.
 *
 * No colour, radius, shadow or timing literals: every value below already had a
 * token. --zw-radius-page is even commented "page bottom corners over the dark
 * base", and --zw-shadow-page is the comp's footer shadow exactly.
 */

/* --- Header ---------------------------------------------------------------- */

.zw-chrome-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 72px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--zw-paper-3) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--zw-border-warm);
  transform: translateY(0);
  opacity: 1;
  transition:
    transform var(--dur-3) var(--zw-ease-out),
    opacity var(--dur-3) var(--zw-ease-out);
}

/* Scrolling down docks the header out; scrolling up brings it back. Height is
   60px, so -100% clears the hairline too. */
.zw-chrome-header--out {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* While impersonating, the banner sits in normal flow above the header. A
   sticky header would cover it on scroll, so it stays in flow instead. */
.zw-chrome-header--in-flow {
  position: relative;
}

/* ONE measure, every surface. An earlier cut let each page set its own, which
   visibly moved the emblem when you navigated from the homepage to a tool and
   read as a broken page. The spec settles it at line 120 — "pages are
   max-w-7xl = 1280px" — so 960 is the homepage's *content column*, not the
   page, and the tool surfaces already sit at this width. */
.zw-chrome-header__inner {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Mirrors the tool pages' px-4 / sm:px-6 / lg:px-8. Sharing the measure is only
   half of lining up — with a different gutter the emblem still sits off the
   page's own left edge. */
@media (min-width: 640px) {
  .zw-chrome-header__inner { padding-inline: 1.5rem; }
}

@media (min-width: 1024px) {
  .zw-chrome-header__inner { padding-inline: 2rem; }
}

.zw-chrome-header__logo {
  flex: none;
  display: flex;
  align-items: center;
}

.zw-chrome-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* --- Tool nav -------------------------------------------------------------- */

.zw-chrome-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}

.zw-chrome-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--zw-radius-sm);
  font-size: 15px;
  font-weight: 600;
  color: var(--zw-muted);
  white-space: nowrap;
  transition:
    background var(--dur-2) var(--zw-ease-out),
    color var(--dur-2) var(--zw-ease-out);
}

.zw-chrome-nav__link:hover {
  background: var(--zw-border-warm-grid);
  color: var(--zw-ink-warm);
}

.zw-chrome-nav__icon {
  display: flex;
  flex: none;
  color: var(--zw-chrome-tone);
  opacity: 0.6;
  transition: opacity var(--dur-2) var(--zw-ease-out);
}

.zw-chrome-nav__link:hover .zw-chrome-nav__icon {
  opacity: 1;
}

/* The active tint matches the icon colour, but the LABEL takes the -ink variant
   of the same hue, not the stroke. The strokes do not reach 4.5:1 on their own
   tints (actions 4.17:1, wiki 3.89:1, map 3.54:1) and this label is 14px/600,
   which WCAG treats as normal text. brand_tokens.css:183 and
   test/assets/component_tone_contrast_test.rb already pin the pairs.
   Same construction as .zw-tag--calendar in zw_components.css. */
.zw-chrome-nav__link--active {
  background: var(--zw-chrome-tint);
  color: var(--zw-chrome-ink);
}

.zw-chrome-nav__link--active .zw-chrome-nav__icon {
  opacity: 1;
}

.zw-chrome-nav__link--active:hover {
  background: var(--zw-chrome-tint);
  color: var(--zw-chrome-ink);
}

/* Per-tool tones, assigned by modifier so the three values always travel
   together and a tint can never be paired with the wrong ink. */
.zw-chrome-nav__link--actions {
  --zw-chrome-tone: var(--zw-tool-actions);
  --zw-chrome-tint: var(--zw-tool-actions-tint);
  --zw-chrome-ink:  var(--zw-tool-actions-ink);
}

.zw-chrome-nav__link--calendar {
  --zw-chrome-tone: var(--zw-tool-calendar);
  --zw-chrome-tint: var(--zw-tool-calendar-tint);
  --zw-chrome-ink:  var(--zw-tool-clay);
}

.zw-chrome-nav__link--map {
  --zw-chrome-tone: var(--zw-tool-map);
  --zw-chrome-tint: var(--zw-tool-map-tint);
  --zw-chrome-ink:  var(--zw-tool-map-ink);
}

.zw-chrome-nav__link--wiki {
  --zw-chrome-tone: var(--zw-tool-wiki);
  --zw-chrome-tint: var(--zw-tool-wiki-tint);
  --zw-chrome-ink:  var(--zw-tool-wiki-ink);
}

/* The admin gear is a utility, not a fifth tool, so it stays neutral and never
   takes an active state — /admin renders through admin.html.erb, not this one. */
.zw-chrome-nav__link--admin {
  --zw-chrome-tone: var(--zw-faint);
  padding: 6px 8px;
}

/* --- Sign In --------------------------------------------------------------- */

/* The whole right-hand side. The email dock and the outlined Donate that used to
   live here both came out: either side of the bar they read as two competing
   calls to action, and each has a home elsewhere. */
.zw-chrome-signin {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--zw-blue-700);
  background: transparent;
  border: 1px solid var(--zw-blue-200);
  border-radius: var(--zw-radius-sm);
  white-space: nowrap;
  transition:
    background var(--dur-2) var(--zw-ease-out),
    border-color var(--dur-2) var(--zw-ease-out);
}

.zw-chrome-signin:hover {
  background: var(--zw-blue-50);
  border-color: var(--zw-blue-700);
}

/* --- Signed-in cluster ----------------------------------------------------- */

.zw-chrome-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--zw-radius-pill);
  background: var(--zw-blue-700);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  list-style: none;
  transition: background var(--dur-2) var(--zw-ease-out);
}

.zw-chrome-avatar::-webkit-details-marker { display: none; }
.zw-chrome-avatar:hover { background: var(--zw-blue-800); }

/* --- Mobile ---------------------------------------------------------------- */

/* The comp's own rule: below 820px the labels go and the icons carry the nav. */
@media (max-width: 720px) {
  .zw-chrome-nav__label { display: none; }
  .zw-chrome-nav { gap: 0; }
}

.zw-chrome-menu-toggle {
  display: none;
  flex: none;
  padding: 6px;
  border: none;
  background: none;
  color: var(--zw-muted);
  border-radius: 9px;
  cursor: pointer;
}

.zw-chrome-menu {
  display: none;
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  background: var(--zw-paper-3);
  border-bottom: 1px solid var(--zw-border-warm);
  box-shadow: var(--zw-shadow-float);
  padding: 12px var(--zw-gutter) 20px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

.zw-chrome-menu--open { display: block; }

.zw-chrome-menu__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--zw-ink-warm);
  border-radius: 9px;
}

.zw-chrome-menu__link:hover { background: var(--zw-border-warm-grid); }

.zw-chrome-menu__divider {
  margin: 10px 0;
  border: 0;
  border-top: 1px solid var(--zw-border-warm-inner);
}

/* Below 560 the four icons plus the dock plus Donate cannot share 375px, so the
   tools move into the panel and the bar keeps only Donate and the toggle. The
   comp has no phone state; this is the app's answer to it. */
@media (max-width: 560px) {
  .zw-chrome-header__nav { display: none; }
  .zw-chrome-menu-toggle { display: flex; }
}

/* --- Footer ---------------------------------------------------------------- */

.zw-chrome-footer {
  background: var(--zw-base);
}

/* The warm panel sits ON the dark ground and rounds off its bottom corners —
   the page appears to end, and the dark band beneath it is the ground showing
   through. */
.zw-chrome-footer__panel {
  background: var(--zw-paper-3);
  border-bottom-left-radius: var(--zw-radius-page);
  border-bottom-right-radius: var(--zw-radius-page);
  box-shadow: var(--zw-shadow-page);
}

.zw-chrome-footer__panel-inner {
  max-width: var(--zw-measure);
  margin: 0 auto;
  padding: 36px var(--zw-gutter) 40px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.zw-chrome-footer__blurb {
  font-size: var(--zw-text-xs);
  color: var(--zw-muted);
}

.zw-chrome-footer__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: var(--zw-text-xs);
}

.zw-chrome-footer__links a { color: var(--zw-muted); }
.zw-chrome-footer__links a:hover { color: var(--zw-ink-warm); }

.zw-chrome-footer__signin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 8px;
  transition:
    background var(--dur-2) var(--zw-ease-out),
    color var(--dur-2) var(--zw-ease-out);
}

.zw-chrome-footer__signin:hover { background: var(--zw-border-warm-grid); }

.zw-chrome-footer__band {
  max-width: var(--zw-measure);
  margin: 0 auto;
  padding: 20px var(--zw-gutter) 26px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.zw-chrome-footer__eyebrow {
  font-size: var(--zw-text-xs);
  letter-spacing: var(--zw-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--zw-base-quiet);
}

.zw-chrome-footer__band-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.zw-chrome-footer__band-links a {
  font-size: var(--zw-text-xs);
  color: var(--zw-base-link);
}

.zw-chrome-footer__band-links a:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .zw-chrome-header {
    transition: none;
  }
}