/* 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: 60px;
  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;
}

/* The header's measure follows the surface underneath it. The kit does this
   too — its homepage header is 960px and its Tools header is 1100px — and the
   tool stylesheets pin their page to "the site header's measure" and have a
   system test that fails when the two drift. A tool surface wider than the menu
   above it reads as a broken page, so a tool sets --zw-chrome-measure to its
   own width and everything else gets the 960px content measure. */
.zw-chrome-header__inner {
  width: 100%;
  max-width: var(--zw-chrome-measure, var(--zw-measure));
  margin: 0 auto;
  padding: 0 var(--zw-gutter);
  display: flex;
  align-items: center;
  gap: 12px;
}

.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: 6px 10px;
  border-radius: 9px;
  font-size: 14px;
  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;
}

/* --- Email dock ------------------------------------------------------------ */

.zw-chrome-dock {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--zw-radius-md);
  background: transparent;
  border: 1px solid transparent;
  transition:
    background var(--dur-3) var(--zw-ease-out),
    border-color var(--dur-3) var(--zw-ease-out),
    box-shadow var(--dur-3) var(--zw-ease-out);
}

/* The hero carries its own signup form. The dock rests collapsed while that
   form is on screen and expands once it scrolls away, so exactly one signup
   affordance is visible at a time. */
.zw-chrome-dock__input {
  width: 0;
  opacity: 0;
  padding: 0;
  height: 34px;
  font-size: 14px;
  color: var(--zw-ink-warm);
  background: transparent;
  border: none;
  outline: none;
  overflow: hidden;
  transition:
    width var(--dur-3) var(--zw-ease-out),
    opacity var(--dur-2) var(--zw-ease-out),
    padding var(--dur-3) var(--zw-ease-out);
}

.zw-chrome-dock--open {
  background: var(--zw-paper-3);
  border-color: var(--zw-border-warm-soft);
  box-shadow: var(--zw-shadow-dock);
}

.zw-chrome-dock--open .zw-chrome-dock__input {
  width: 180px;
  opacity: 1;
  padding: 0 10px;
}

.zw-chrome-dock__submit {
  flex: none;
  height: 34px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--zw-blue-700);
  border: none;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--dur-2) var(--zw-ease-out),
    transform var(--dur-1) var(--zw-ease-out);
}

.zw-chrome-dock__submit:hover { background: var(--zw-blue-800); }
.zw-chrome-dock__submit:active { transform: scale(0.98); }

/* --- Donate ---------------------------------------------------------------- */

.zw-chrome-donate {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 15px;
  font-size: 14px;
  font-weight: 600;
  color: var(--zw-blue-700);
  background: transparent;
  border: 1px solid var(--zw-blue-200);
  border-radius: 9px;
  white-space: nowrap;
  transition:
    background var(--dur-2) var(--zw-ease-out),
    border-color var(--dur-2) var(--zw-ease-out);
}

.zw-chrome-donate: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: 820px) {
  .zw-chrome-nav__label { display: none; }
  .zw-chrome-nav { gap: 0; }
  .zw-chrome-dock--open .zw-chrome-dock__input { width: 120px; }
}

.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: 60px;
  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-dock { 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,
  .zw-chrome-dock,
  .zw-chrome-dock__input {
    transition: none;
  }
}