/* The header and footer, on every page. The rules behind it are in docs/design.md (Module and color: the header; Layout: the
   footer). Colors, sizes and timing come from tokens.css. */

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

/* On a phone: the mark, three band tiles, a gap and the account tile in one
   row. The name is set apart from page titles: uppercase with wide tracking. */
.rhdr { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, var(--tile)); grid-template-rows: var(--tile); background: var(--surface); border-bottom: 1px solid var(--rule); }
.hdr-logo { grid-column: 1; display: flex; align-items: center; min-height: var(--tile); padding-left: var(--space-s); font: 600 1rem/1.25 var(--font); letter-spacing: 0.36em; text-transform: uppercase; color: var(--ink); text-decoration: none; white-space: nowrap; gap: var(--space-xs); container: mark / inline-size; }
/* The mark (docs/design.md, The icon): the small icon at 27, 10 after it, and the name at
   0.36em. As the name's space runs out the name shows alone, then the icon alone,
   measured on that space with no script: the full mark from 160 pixels (27,
   10 and the name's 123), the name from 123. Alone, the icon keeps the name for a
   screen reader, hidden the way .visually-hidden hides, since the link has no
   other words. */
.hdr-icon { display: block; flex: none; width: var(--space-m); height: var(--space-m); }
@container mark (width < 160px) { .hdr-icon { display: none; } }
@container mark (width < 123px) {
  .hdr-icon { display: block; }
  .hdr-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.rband { grid-column: 2 / span 3; display: grid; grid-template-columns: repeat(3, var(--tile)); grid-template-rows: var(--tile); overflow: hidden; }
.rband > svg, .rband > span { display: block; width: var(--tile); height: var(--tile); --tile-ground: var(--surface); }
/* The band breathes (docs/design.md, Motion; services/band.js draws it and
   this page's keyframes): each column holds four deals, stacked, the first
   on screen and the rest out until a breath brings them. Each tile turns
   about its own point (--pivot). With Stop motion pressed, or a device that
   asks for less motion, the first deal is all there is; the keyframes run
   only where motion is welcome (services/band.js, breathCss). */
/* A phone's band is its three columns and no more (services/band.js), each
   as tall as the row. */
.rband > .col { position: relative; height: auto; }
.rband > .col > svg { position: absolute; inset: 0; width: 100%; height: 100%; --tile-ground: var(--surface); transform-origin: var(--pivot); opacity: 0; }
.rband > .col > .k0 { opacity: 1; }

/* The wide band (services/band.js, wideOf), shown from 704 (below): tiles of
   one and two, every one resting on the header's bottom edge (Ty, October 16,
   448). Its four deals are layers in one place, each a row of items two tiles
   tall: a tile of two fills its item, a tile of one sits in the bottom half
   of its own. An item past the window's width wraps onto a row of no height,
   where its tile, sized by the item, has none, so a tile is never cut in two.
   The deals after the first are out until a breath brings them, as above. */
.wband { display: none; }
.wband > .deal { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; grid-template-rows: calc(2 * var(--tile)); grid-auto-rows: 0; overflow: hidden; }
.wband .it { position: relative; }
.wband .it.two { grid-column: span 2; }
.wband .it > svg { position: absolute; top: 50%; left: 0; width: 100%; height: 50%; --tile-ground: var(--surface); transform-origin: var(--pivot); opacity: 0; }
.wband .it.two > svg { top: 0; height: 100%; }
.wband .it > .k0 { opacity: 1; }

/* The arrival, the first breath, on the page a sign-in opens
   (services/motion.js): the icon's cells turn in along the stroke, an eighth
   of a turn from a point, a beat apart; the name's letters come out of the G
   from the fourth beat, unseen and then a quick fade; the band's first deal
   turns in from a quarter back about each tile's point (band-arrive, started
   by the page's own CSS). After sign-out it all waits for the last page's
   way out (--arrive-after, components.css, Between pages). */
@keyframes band-arrive { from { transform: rotate(calc(var(--dir) * -90deg)) scale(1); opacity: 0; } }
@keyframes icon-turn-in { from { rotate: -45deg; } }
@keyframes icon-grow-in { from { scale: 0; } }
@keyframes icon-fade-in { from { opacity: 0; } }
@keyframes letter-in { 0% { transform: translateX(var(--from)); opacity: 0; } 55% { opacity: 0; } 80% { opacity: 1; } 100% { transform: none; opacity: 1; } }
.hdr-letters > span { display: inline-block; }
.arriving .hdr-icon { position: relative; z-index: 1; }
.arriving .hdr-icon use { transform-box: view-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .arriving .hdr-icon use { animation: icon-turn-in var(--dur-inhale) var(--ease-inhale) both, icon-grow-in var(--dur-inhale) var(--ease-inhale) both, icon-fade-in var(--dur-inhale) var(--ease-inhale) both; animation-delay: calc(var(--arrive-after, 0ms) + var(--beat) * var(--dur-arrival-beat)); }
  .arriving .hdr-letters > span { animation: letter-in var(--dur-letter) var(--ease-inhale) both; animation-delay: calc(var(--arrive-after, 0ms) + 4 * var(--dur-arrival-beat) + var(--i) * var(--dur-letter-beat)); }
}

.hdr-acct { grid-column: 6; position: relative; display: grid; place-items: center; width: var(--tile); height: var(--tile); }
/* Signed out, Sign in takes the blank tile beside the account tile too
   (Ty, October 21), and ends where the avatar's tile does. */
.hdr-acct.hdr-out { grid-column: 5 / span 2; width: auto; justify-items: end; }

/* The account menu: a <details>, so it works without script. Open, the
   avatar's tile and the panel are one shape: a 3-pixel ink edge around both,
   open where they meet. */
.menu { position: static; }
.menu summary { display: grid; place-items: center; width: var(--tile); height: var(--tile); list-style: none; cursor: pointer; transition: background-color var(--dur-press) var(--ease-standard); }
.menu summary::-webkit-details-marker { display: none; }
.hdr-logo:focus-visible, .menu summary:focus-visible { outline-offset: -2px; }
/* 28, not the scale's 27: 14 pixels a cell, so the avatar's cells meet on whole pixels. */
.menu summary svg.av { width: 28px; height: 28px; }
/* The ring on the header's own avatar while admin mode is on (Ty, October 21,
   490: "blue border: header only. only when admin mode is active."), the one
   avatar that carries an edge; the menu's label says it in words. A gap of
   the page's own ground keeps it a ring on an avatar that's blue itself. */
.hdr-acct.admin-on summary svg.av, .hdr-acct.admin-on .hdr-look svg.av { outline: var(--edge) solid var(--blue-fill); outline-offset: 2px; }
/* View as's avatar (routes/view-as.js; 546 a): the person's, where the menu would be, with nothing to open. */
.hdr-look { display: grid; place-items: center; width: var(--tile); height: var(--tile); }
.hdr-look svg.av { width: 28px; height: 28px; }
.menu[open] summary { position: relative; z-index: 4; background: var(--surface-3); box-shadow: inset var(--space-3xs) 0 0 var(--ink), inset calc(-1 * var(--space-3xs)) 0 0 var(--ink), inset 0 var(--space-3xs) 0 var(--ink); }
.menu-panel { position: absolute; right: 0; top: 100%; z-index: 3; min-width: calc(4 * var(--tile)); display: grid; background: var(--surface-3); border: var(--space-3xs) solid var(--ink); box-shadow: var(--shadow-down); }
.menu-panel::before { content: ""; position: absolute; top: calc(-1 * var(--space-3xs)); right: 0; width: calc(var(--tile) - 2 * var(--space-3xs)); height: var(--space-3xs); background: var(--surface-3); }
.menu-panel a, .menu-panel button { display: flex; align-items: center; width: 100%; min-height: var(--tile); padding: 0 var(--space-s); font: 400 var(--text-reading)/1.25 var(--font); color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; }
/* a + a too: the reset above would otherwise take the rule off a link after a link. */
.menu-panel > * + *, .menu-panel > a + a { border-top: 1px solid var(--rule); }
.menu-panel form { margin: 0; }

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

/* One quiet line, 44 below the page's content (the page's own bottom padding). */
.site-footer { padding: 0 var(--space-s) var(--space-l); color: var(--ink-2); font-size: var(--text-tertiary); font-weight: 300; line-height: 1.4; }
/* The support address, Privacy and Terms: one line where they fit, wrapping where they don't. */
.site-footer p { margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-s); }
.site-footer a { color: inherit; }
/* Stop motion (services/motion.js): a button drawn as the footer's links
   are, last in the line. Where the device asks for less motion nothing
   moves, so it isn't shown. */
.motion-button { -webkit-appearance: none; appearance: none; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: text-decoration-thickness var(--dur-press) var(--ease-standard); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .motion-button { display: none; } }

@media (hover: hover) {
  /* The whole 44-pixel tile takes the tint, not the avatar alone (Ty, October 3). Open, it keeps the panel's ground. */
  .menu:not([open]) summary:hover { background: color-mix(in srgb, var(--pattern-gray) 12%, var(--surface)); }
  .menu-panel a:hover, .menu-panel button:hover { background: color-mix(in srgb, var(--pattern-gray) 12%, var(--surface-3)); }
}

/* From 704 (16 tiles): one row two tiles tall, as tall as the two rows it
   replaced, on a grid of 44-pixel columns (Ty, October 16, 448 to 450: "The
   double row desktop/tablet header strikes me now as too busy."). The mark
   has the first five columns, 44 in from the left edge as before (Ty, October
   9, 278: "leave them"), and a blank one after; the wide band; a blank column
   and the account tile in the last, kept when nobody is signed in. The mark
   and the account tile are centered in the row's height, and the open menu
   hangs from the tile, as one shape with it. */
@media (min-width: 704px) {
  .rhdr { grid-template-columns: repeat(auto-fill, var(--tile)); grid-template-rows: calc(2 * var(--tile)); }
  .rband { display: none; }
  .wband { display: grid; grid-column: 7 / -3; grid-row: 1; grid-template-columns: subgrid; grid-template-rows: calc(2 * var(--tile)); }
  .hdr-logo { grid-column: 1 / span 5; grid-row: 1; padding-left: var(--space-l); }
  .hdr-acct { grid-column: -2 / -1; grid-row: 1; align-self: center; }
  .hdr-acct.hdr-out { grid-column: -3 / -1; }
  .site-footer { padding: 0 var(--space-l) var(--space-l); }
  .site-footer p { max-width: calc(15 * var(--tile)); margin-inline: auto; }
}

/* Windows' high contrast (682): the open menu's tile is drawn by shadows, which it drops. */
@media (forced-colors: active) {
  .menu[open] summary:not(:focus-visible) { outline: var(--space-3xs) solid CanvasText; outline-offset: calc(-1 * var(--space-3xs)); }
}