/* Header
 * Sticky glass header, week navigation, streak line and connection notice.
 *
 * Lifted from the prototype's single stylesheet, unchanged apart from
 * indentation. Every colour resolves through a token in tokens.css.
 */

/* ---------- header ---------- */
/* The top inset is the status bar in an installed PWA.
 *
 * The viewport meta carries viewport-fit=cover, so in standalone the page
 * begins at the physical top of the screen rather than below the clock and
 * battery. Nothing accounted for that, so the title and the three header
 * buttons rendered underneath the status bar — visible but untappable, because
 * iOS owns touches up there.
 *
 * Padding rather than `top`, so the header's gradient still fills the area
 * behind the status bar instead of leaving a strip of body showing. The
 * fallback is 0px, which is every browser that has no notch — nothing changes
 * off an iPhone. */
header.hero {
  position: sticky; top: 0; z-index: 30;
  background:
    radial-gradient(1100px 680px at 20% -10%, var(--accent-glow), transparent 62%),
    var(--ground-wash);
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  padding-block: calc(20px + env(safe-area-inset-top, 0px)) 16px;
}
/* And the sides, which are the notch in landscape. */
.hero-inner {
  max-width: 900px; margin: 0 auto;
  padding-left: calc(18px + env(safe-area-inset-left, 0px));
  padding-right: calc(18px + env(safe-area-inset-right, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* Centred between the menu button and the spacer that balances it. One line
   now: the mark beside the name rather than above a paragraph. */
.brand { display: flex; align-items: center; justify-content: center; gap: 10px; flex: 1; min-width: 0; }
.brand-mark { flex: none; width: 34px; height: 34px; }
.brand h1 {
  margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Under the centred name, and short. This was three lines of italic prose at
   phone width — 51px of a 385px header, read once. */
.tagline {
  margin: 4px 0 0; font-size: 13px; color: var(--ink-faint);
  font-style: italic; text-align: center;
}
/* The header actions. Two 44px circles, which is also the minimum comfortable
   tap target — they sit in the corner of a page people use on a phone. */
.hero-actions { flex: none; display: flex; align-items: center; gap: 8px; }

.theme-toggle {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-soft); cursor: pointer; font-size: 19px;
  display: flex; align-items: center; justify-content: center;
}

/* Settings. Deliberately the same shape as the theme toggle rather than a
   text link: it is a peer of it, not a navigation item, and the two read as a
   pair sitting in the corner.

   An <a> rather than a <button> because it goes somewhere — which also means
   middle-click, open-in-new-tab and the browser's own affordances work for
   free, none of which a button would give. */
.gear-link {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-soft); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
}
.gear-link:hover { color: var(--ink); border-color: var(--accent); }
.gear-link svg { width: 21px; height: 21px; display: block; }
/* currentColor so it themes itself — no second colour to keep in step. */
.gear-link svg path, .gear-link svg circle { stroke: currentColor; }

/* Week navigation.
 *
 * A horizontal scroll container with snap points — the same mechanism as the
 * stat row below it, and for the same reason.
 *
 * It used to be three buttons plus a touchstart/touchend gesture: nothing
 * moved while your finger was down, and on release the week swapped and the
 * row re-rendered. That is why it jumped rather than flowed. Handing the drag
 * to the browser gets 1:1 tracking, momentum and rubber-banding for free, and
 * none of it is code we maintain.
 */
.weeknav {
  max-width: 900px; margin: 14px auto 0;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Snap to the centre of the container rather than its left edge. */
  scroll-padding: 0 50%;
  overscroll-behavior-x: contain;
}
.weeknav::-webkit-scrollbar { display: none; }

/* The leading and trailing padding is what lets the first and last weeks
   reach the centre — without it they can only ever sit at the edges. */
.weekstrip {
  display: flex;
  width: max-content;
  padding-left: calc(50% - var(--weekcell) / 2);
  padding-right: calc(50% - var(--weekcell) / 2);
}

.weeknav { --weekcell: 190px; }

.weekcell {
  flex: 0 0 var(--weekcell);
  scroll-snap-align: center;
  scroll-snap-stop: always;        /* one week per flick, not four */
  min-height: 42px;
  border: none; background: none; padding: 4px 6px; margin: 0;
  font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  /* Only the colour and weight change, so the text does not reflow as it
     passes the centre — that would make the strip shimmer while scrolling. */
  transition: color .18s ease, opacity .18s ease;
}
@media (prefers-reduced-motion: reduce) {
  .weekcell { transition: none; }
  .weeknav { scroll-behavior: auto; }
}

.weekcell .datepart {
  display: inline-block;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
}

/* The week you are on. Larger and darker, underlined in the accent, matching
   the reference's way of marking the current one. */
.weekcell[aria-current] {
  color: var(--ink);
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
}
.weekcell[aria-current] .datepart { border-bottom-color: var(--accent); }
.weekcell:active { opacity: .55; }

.streakline {
  max-width: 900px; margin: 12px auto 0; padding: 0 18px; font-size: 14.5px; color: var(--accent-ink);
}
.conncard {
  max-width: 900px; margin: 12px auto 0; padding: 10px 18px; font-size: 14.5px; color: var(--neg);
  background: var(--neg-tint); border-radius: 0;
}

section { margin-top: 30px; }
h2.sectiontitle { font-size: 21px; font-weight: 700; margin: 0 0 4px; font-family: 'Karla', system-ui, sans-serif; letter-spacing: -0.01em; }
p.sectionhint { font-size: 14.5px; color: var(--ink-soft); margin: 0 0 14px; }

/* A week-peek button with nowhere to go. Hidden with visibility rather than
   display so it keeps its flex basis — removing it from layout would let the
   centre week label slide out of position. */