/* Base: type, links and the few shared pieces the kit has no class for.
   Components come from the kit (.btn .card .field .badge …); values come
   from the theme's tokens. */
:root {
  --edge: clamp(16px, 4vw, 56px);
  --edge-app: clamp(16px, 2.4vw, 32px);
  /* The public pages' content stops widening at --page-max; a band's color
     still runs to the window's edges. --gutter is a full-width section's
     side padding (100% is the section's containing block). */
  --page-max: 1280px;
  --gutter: max(var(--edge), calc((100% - var(--page-max)) / 2));
}

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
body {
  margin: 0;
  background: var(--app-bg);
  color: var(--app-ink);
  font: var(--app-text)/1.55 var(--app-font);
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--app-font-display);
  font-weight: var(--app-font-display-weight);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
p { margin: 0 }
/* Titles come from file names and links, which can be one long word. */
h1, h2, h3, p { overflow-wrap: anywhere }
ul, ol { margin: 0; padding: 0; list-style: none }
img { max-width: 100%; display: block }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px }
.view { min-height: 100dvh }

.figures {
  font-family: var(--app-font-figures);
  font-variant-numeric: tabular-nums;
  font-size: 0.9em;
  letter-spacing: -0.01em;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible { outline: var(--app-focus-ring); outline-offset: 2px }
:focus:not(:focus-visible) { outline: none }

/* The brand: mark + name. The mark's frame takes the text color. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--app-font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--app-ink);
  white-space: nowrap;
  min-height: 44px;
}
.mark { flex: none; color: var(--app-ink) }

/* Selection is the highlighter, everywhere. */
::selection { background: var(--app-field); color: var(--app-field-ink) }

/* A segmented control: the chosen segment is highlighted, like a selection. */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-control);
  background: var(--app-surface);
}
.segmented button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: calc(var(--app-radius-control) - 2px);
  background: transparent;
  color: var(--app-ink-muted);
  font: inherit;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.segmented button:is([aria-pressed='true'], [aria-selected='true']) {
  background: var(--app-field);
  color: var(--app-field-ink);
}
.segmented-sm button { min-height: 32px; padding: 0 10px; font-size: 0.93em }
@media (hover: hover) and (pointer: fine) {
  .segmented button:not([aria-pressed='true'], [aria-selected='true']):hover { color: var(--app-ink); background: var(--app-surface-2) }
}
@media (pointer: coarse) {
  .segmented button { min-height: 40px }
}

/* The plan you're on is "selected", so it wears the highlighter. */
.plan-chip {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--app-radius-chip);
  background: var(--app-field);
  color: var(--app-field-ink);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.plan-chip-lg { font-size: 18px; padding: 2px 10px }

/* Moment scores: five pips. */
.pips { display: inline-flex; gap: 3px; vertical-align: middle }
.pips i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--app-surface-2);
  box-shadow: inset 0 0 0 1px var(--app-border);
}
.pips i.on { background: var(--app-ink); box-shadow: none }

.state-panel {
  max-width: 60ch;
  padding: 40px 0;
  display: grid;
  gap: 12px;
}
.state-panel h1, .state-panel h2 { font-size: 22px }
.live-notice { margin-bottom: 12px; color: var(--app-ink-muted); font-size: 14px }

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--app-ink-muted);
  text-decoration: none;
  font-size: 14px;
  min-height: 32px;
}
@media (hover: hover) and (pointer: fine) {
  .back:hover { color: var(--app-ink) }
}

.form-end { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important }
}