/*
 * Whoop Studio design system: tokens, base type, the app frame and every shared
 * component and story class (SPEC.md sections 7 and 8, SPEC-PRODUCTION section E,
 * SPEC-INTERFACES section 6).
 *
 * Dark (the default) is true black for the owner's OLED screens: the ground is #000,
 * panels are barely lifted, borders are hairlines, there are no shadows, and data
 * colors are vivid. Light is the alternative. Theme follows the system unless
 * <html data-theme="dark|light"> forces one.
 *
 * Frame by width:  < 900 bottom tab bar (compact 44px when height <= 500),
 *                  900-1279 compact 80px rail, >= 1280 full 232px rail,
 *                  >= 1600 content widens to 1360px.
 *
 * Notes for view authors:
 * - Margins on headings, paragraphs and lists are reset to 0; spacing comes from gaps.
 * - [hidden] always wins over component display rules.
 * - Hover colors apply only on devices that can hover, so taps never leave a stuck
 *   hover state on iPhone and iPad.
 * - Opt-ins: .table.stack collapses a table to stacked rows under 600px (cells need
 *   data-label); .touch-only / .hover-only show text for one kind of pointer;
 *   .section-head is a title row with an action on the right.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: dark;
  --bg: #000000;
  --surface: #0A0B0F;
  --surface-2: #14161C;
  --hairline: #1F222B;
  --grid: #15171E;
  --axis: #2A2E39;
  --ink: #F5F7FA;
  --ink-2: #A6ADBB;
  --ink-3: #858C99;
  --focus: #5AA9FF;
  --c-green: #1DE9A0;
  --c-yellow: #FFCC33;
  --c-red: #FF3B5C;
  --c-strain: #3D8BFF;
  --c-hrv: #00D4F0;
  --c-rhr: #FF7A2F;
  --c-fitness: #3D8BFF;
  --c-fatigue: #FF7A2F;
  --c-pos: #3D8BFF;
  --c-neg: #FF4D6D;
  --c-band: rgba(0, 212, 240, 0.16);
  --c-sleep-awake: #E4DCFF;
  --c-sleep-rem: #B59EFF;
  --c-sleep-light: #8B6BFF;
  --c-sleep-deep: #6440F5;
  --c-z1: #1E5BD8;
  --c-z2: #2F7BFF;
  --c-z3: #5C9DFF;
  --c-z4: #8EBDFF;
  --c-z5: #C4DCFF;
  --status-good: #30D158;
  --status-warn: #FFD60A;
  --status-serious: #FF9F0A;
  --status-critical: #FF453A;
  --radius-panel: 16px;
  --radius-control: 10px;
  --radius-pill: 999px;
  --font: "Archivo", "Segoe UI Variable Text", "Segoe UI Variable", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Frame (not theme dependent). */
  --bar-bg: color-mix(in oklab, var(--bg) 84%, transparent);
  --status-scrim: #000000;
  --backdrop: rgba(0, 0, 0, 0.66);
  --rail-width: 232px;
  --rail-compact: 80px;
  --rail-w: calc(var(--rail-width) + env(safe-area-inset-left, 0px));
  --content-max: 1180px;
  --gutter: 32px;
  --tabbar-height: 58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* Print also uses the light palette (unless the user forced dark). */
@media print, (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F2F4F8;
    --surface: #FFFFFF;
    --surface-2: #F6F8FB;
    --hairline: #E1E5EC;
    --grid: #ECEFF4;
    --axis: #CBD2DC;
    --ink: #121826;
    --ink-2: #4A5466;
    --ink-3: #5F6878;
    --focus: #2A78D6;
    --c-green: #12955C;
    --c-yellow: #C98A00;
    --c-red: #D63B4B;
    --c-strain: #2A78D6;
    --c-hrv: #0E8A9A;
    --c-rhr: #EB6834;
    --c-fitness: #2A78D6;
    --c-fatigue: #EB6834;
    --c-pos: #2A78D6;
    --c-neg: #E34948;
    --c-band: rgba(14, 138, 154, 0.12);
    --c-sleep-awake: #9D90F3;
    --c-sleep-rem: #7B68EC;
    --c-sleep-light: #5D48D8;
    --c-sleep-deep: #3F2BA8;
    --c-z1: #86B6EF;
    --c-z2: #5598E7;
    --c-z3: #2A78D6;
    --c-z4: #1C5CAB;
    --c-z5: #104281;
    --status-good: #0CA30C;
    --status-warn: #FAB219;
    --status-serious: #EC835A;
    --status-critical: #D03B3B;
    /* The iOS status bar is black-translucent (white text) in both themes. */
    --status-scrim: #121826;
    --backdrop: rgba(18, 24, 38, 0.4);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F2F4F8;
  --surface: #FFFFFF;
  --surface-2: #F6F8FB;
  --hairline: #E1E5EC;
  --grid: #ECEFF4;
  --axis: #CBD2DC;
  --ink: #121826;
  --ink-2: #4A5466;
  --ink-3: #5F6878;
  --focus: #2A78D6;
  --c-green: #12955C;
  --c-yellow: #C98A00;
  --c-red: #D63B4B;
  --c-strain: #2A78D6;
  --c-hrv: #0E8A9A;
  --c-rhr: #EB6834;
  --c-fitness: #2A78D6;
  --c-fatigue: #EB6834;
  --c-pos: #2A78D6;
  --c-neg: #E34948;
  --c-band: rgba(14, 138, 154, 0.12);
  --c-sleep-awake: #9D90F3;
  --c-sleep-rem: #7B68EC;
  --c-sleep-light: #5D48D8;
  --c-sleep-deep: #3F2BA8;
  --c-z1: #86B6EF;
  --c-z2: #5598E7;
  --c-z3: #2A78D6;
  --c-z4: #1C5CAB;
  --c-z5: #104281;
  --status-good: #0CA30C;
  --status-warn: #FAB219;
  --status-serious: #EC835A;
  --status-critical: #D03B3B;
  --status-scrim: #121826;
  --backdrop: rgba(18, 24, 38, 0.4);
}

@media (min-width: 1600px) {
  :root {
    --content-max: 1360px;
  }
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Thin, quiet scrollbars (Windows); macOS and iOS keep their overlay bars. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--axis) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--axis);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--ink-3);
}

::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 400;
  font-stretch: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

h1 {
  font-size: 28px;
  font-weight: 650;
  font-stretch: 112%;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h2 {
  font-size: 15px;
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.35;
}

h3 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

a {
  color: var(--ink);
  text-decoration-color: var(--ink-3);
  text-underline-offset: 3px;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a,
button,
summary,
label,
select,
input,
textarea,
[role="button"],
[role="switch"],
[role="tab"] {
  touch-action: manipulation;
}

img,
svg {
  display: block;
}

svg.icon {
  flex-shrink: 0;
}

[hidden] {
  display: none !important;
}

::selection {
  background: color-mix(in oklab, var(--focus) 35%, transparent);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Programmatic focus targets (page title, main) don't need a ring. */
[tabindex="-1"]:focus {
  outline: none;
}

/* ------------------------------------------------------------ utilities */

.num {
  font-stretch: 72%;
  font-weight: 600;
}

.fine {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}

.muted {
  color: var(--ink-2);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: calc(8px + var(--safe-top));
  left: calc(8px + var(--safe-left));
  z-index: 100;
  padding: 8px 14px;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-300%);
}

.skip-link:focus {
  transform: none;
}

/* ----------------------------------------------------------------- frame */

.app {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* Keeps the black-translucent iOS status bar legible over scrolled content.
   Zero height everywhere without a top safe area. */
.app::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45;
  height: var(--safe-top);
  background: var(--status-scrim);
  pointer-events: none;
}

.app > .signin {
  grid-column: 1 / -1;
}

.rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding: calc(22px + var(--safe-top)) 14px calc(18px + var(--safe-bottom)) calc(14px + var(--safe-left));
  border-right: 1px solid var(--hairline);
  background: var(--bg);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 4px 10px 4px 8px;
  border-radius: var(--radius-control);
  color: var(--ink);
  text-decoration: none;
}

.wordmark-text {
  font-size: 21px;
  font-weight: 700;
  font-stretch: 125%;
  letter-spacing: -0.015em;
  line-height: 1;
}

.bezel-mark .lit {
  stroke: var(--c-green);
}

.bezel-mark .dim {
  stroke: var(--axis);
}

.bezel-mark .face {
  stroke: var(--ink-2);
}

.rail-nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin-top: 30px;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Settings sits at the bottom of the rail, apart from the pages. */
.rail .nav-list {
  flex: 1 1 auto;
}

.rail .nav-list .nav-end {
  margin-top: auto;
  padding-top: 14px;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.nav-link svg {
  position: relative;
  z-index: 1;
}

.nav-link .nav-label {
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-link[aria-current="page"] {
  border-color: var(--hairline);
  background: var(--surface-2);
  color: var(--ink);
}

.rail .nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 50%;
  width: 3px;
  height: 18px;
  margin-top: -9px;
  border-radius: 0 3px 3px 0;
  background: var(--ink);
}

.rail-foot {
  margin-top: 16px;
  padding: 16px 4px 0;
  border-top: 1px solid var(--hairline);
}

.main-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: var(--safe-top);
}

.main {
  flex: 1;
  min-width: 0;
}

.topbar {
  display: none;
}

.tabbar {
  display: none;
}

/* ------------------------------------------------------------ sync status */

.sync-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sync-copy {
  flex: 1;
  min-width: 0;
}

.sync-text {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
}

.sync-detail {
  display: -webkit-box;
  margin-top: 1px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-3);
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.sync-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
}

.sync-dot.good { background: var(--status-good); }
.sync-dot.warn { background: var(--status-warn); }
.sync-dot.serious { background: var(--status-serious); }
.sync-dot.critical { background: var(--status-critical); }

/* Live (SPEC-DATABASE section 3): the event stream is open and the data is fresh. A soft
   halo marks it; the dot breathes while a background sync runs. */
.sync-dot.live {
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--status-good) 22%, transparent),
    0 0 10px color-mix(in oklab, var(--status-good) 50%, transparent);
}

.sync-dot.pulse {
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
  50% { opacity: 0.35; }
}

.sync-spinner {
  flex-shrink: 0;
  color: var(--ink-2);
  animation: spin 1.1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink-2);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.icon-btn:active {
  background: var(--surface-2);
}

.icon-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------ page */

.page {
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  padding: 32px max(var(--gutter), var(--safe-right)) 64px var(--gutter);
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 28px;
}

.page-titles {
  flex: 1 1 auto;
  min-width: 0;
}

.page-head h1 {
  font-size: 28px;
  font-weight: 650;
  font-stretch: 112%;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.page-sub {
  margin-top: 6px;
  font-size: 15px;
  color: var(--ink-2);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.page-actions:empty {
  display: none;
}

.page-view-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.page-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 24px 0;
  color: var(--ink-3);
  font-size: 14px;
}

.loading-mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  50% { opacity: 0.25; }
}

.boot-error {
  max-width: 640px;
  margin: 15vh auto 0;
  padding: 0 16px;
}

.noscript {
  max-width: 560px;
  margin: 20vh auto 0;
  padding: 24px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
}

.noscript h1 {
  font-size: 22px;
  margin-bottom: 8px;
}

/* --------------------------------------------------------------- banners */

.banners:empty {
  display: none;
}

.banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px max(var(--gutter), var(--safe-right)) 11px var(--gutter);
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.45;
}

.banner > .icon {
  margin-top: 2px;
  color: var(--ink-2);
}

.banner.good > .icon { color: var(--status-good); }
.banner.warn > .icon { color: var(--status-warn); }
.banner.serious > .icon { color: var(--status-serious); }
.banner.critical > .icon { color: var(--status-critical); }

.banner-text {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 920px;
}

.banner-actions {
  display: flex;
  flex-shrink: 0;
  gap: 16px;
  margin-left: 6px;
}

.link-btn {
  position: relative;
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}

/* ---------------------------------------------------------------- layout */

.section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.grid-2,
.grid-3,
.grid-wide {
  display: grid;
  gap: 24px;
  min-width: 0;
}

.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-wide {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

/* Auto-fit, but never more than six across. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(max(150px, calc((100% - 5 * 12px) / 6)), 1fr));
  gap: 12px;
  min-width: 0;
}

/* ----------------------------------------------------------------- panel */

.panel {
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 16px;
}

.panel-heading {
  flex: 1 1 160px;
  min-width: 0;
}

.panel-title {
  font-size: 15px;
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.35;
}

.panel-sub {
  margin-top: 3px;
  max-width: 76ch;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.panel-body {
  min-width: 0;
}

.panel-foot {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-3);
}

.panel-table {
  min-width: 0;
}

/* ------------------------------------------------------------------ tile */

.tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.tile-label {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
}

.tile-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 5px;
  margin-top: 2px;
}

.tile-value {
  font-size: 34px;
  font-stretch: 72%;
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
}

.tile-unit {
  font-size: 15px;
  color: var(--ink-2);
}

.tile-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink-2);
}

.tile-delta .icon { color: var(--ink-3); }
.tile-delta.good .icon { color: var(--status-good); }
.tile-delta.bad .icon { color: var(--status-critical); }
.tile-delta.neutral .icon { color: var(--ink-3); }

.tile-trend {
  position: relative;
  height: 36px;
  margin-top: 8px;
}

.tile-hint {
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- status */

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* Pills wrap instead of overflowing a narrow tile or column. */
  max-width: 100%;
  min-height: 28px;
  padding: 4px 12px 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  --tone: var(--ink-3);
}

.status.good { --tone: var(--status-good); }
.status.warn { --tone: var(--status-warn); }
.status.serious { --tone: var(--status-serious); }
.status.critical { --tone: var(--status-critical); }
.status.neutral { --tone: var(--ink-3); }

.status-mark {
  flex: none;
}

.status-label {
  min-width: 0;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tone);
}

.status .icon {
  color: var(--tone);
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--axis);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 14px;
  font-weight: 550;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn.primary {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.btn.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--ink-2);
}

.btn.danger {
  color: var(--ink);
  border-color: color-mix(in oklab, var(--status-critical) 55%, var(--axis));
}

.btn.small {
  height: 30px;
  padding: 0 10px;
  gap: 6px;
  font-size: 13px;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ------------------------------------------------------------- segmented */

.segmented {
  display: inline-flex;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface);
  overflow-x: auto;
  scrollbar-width: none;
}

.segmented::-webkit-scrollbar {
  display: none;
}

.segmented > button {
  flex: 1 0 auto;
  height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}

.segmented > button[aria-pressed="true"],
.segmented > button[aria-selected="true"] {
  border-color: var(--axis);
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
}

.segmented > button:focus-visible {
  outline-offset: 0;
}

/* ---------------------------------------------------------------- legend */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-2);
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.swatch {
  --sw: var(--ink-3);
  display: inline-block;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--sw);
}

.swatch.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.swatch.line {
  width: 16px;
  height: 2px;
  border-radius: 1px;
}

.swatch.bar {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ----------------------------------------------------------------- table */

.table-wrap {
  max-height: 420px;
  overflow: auto;
  border-top: 1px solid var(--hairline);
}

.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.table th,
.table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  vertical-align: middle;
}

.table th:first-child,
.table td:first-child {
  padding-left: 0;
}

.table th:last-child,
.table td:last-child {
  padding-right: 0;
}

.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table .align-right { text-align: right; }
.table .align-center { text-align: center; }
.table .align-left { text-align: left; }

/* ----------------------------------------------------------------- empty */

.empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 32px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.panel .empty {
  padding: 8px 0;
  border: 0;
  background: none;
}

.empty-title {
  font-size: 17px;
  font-weight: 600;
  font-stretch: 100%;
  line-height: 1.35;
}

.empty-body {
  max-width: 62ch;
  color: var(--ink-2);
}

.empty-body > * + * {
  margin-top: 8px;
}

.empty-action {
  margin-top: 8px;
}

.error-detail {
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- toasts */

.toasts {
  position: fixed;
  right: calc(24px + var(--safe-right));
  bottom: calc(24px + var(--safe-bottom));
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  max-width: min(440px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px 10px 14px;
  border: 1px solid var(--axis);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  pointer-events: auto;
  animation: toast-in 160ms ease-out;
}

.toast-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--ink-3);
}

.toast.good .toast-dot { background: var(--status-good); }
.toast.warn .toast-dot { background: var(--status-warn); }
.toast.serious .toast-dot { background: var(--status-serious); }
.toast.critical .toast-dot { background: var(--status-critical); }

.toast-text {
  flex: 1;
  min-width: 0;
}

/* A one-line toast with an action centers everything on the button. */
.toast:has(.toast-action) {
  align-items: center;
}

.toast:has(.toast-action) .toast-dot {
  margin-top: 0;
}

/* An action inside a toast, e.g. "Reload" when a new version is ready. */
.toast-action {
  flex-shrink: 0;
  align-self: center;
  height: 28px;
  margin: -2px 0;
  padding: 0 10px;
  border: 1px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.toast-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-3);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* ================================================================ story */
/* SPEC-INTERFACES section 6: pages read top to bottom like a briefing. The hero,
   section titles, leads and the why-cards sit on the black ground; panels hold
   charts and tables. */

.story {
  display: flex;
  flex-direction: column;
  gap: 48px;
  min-width: 0;
}

.story-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.section-title {
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  font-stretch: 105%;
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-wrap: balance;
}

/* Inside a flex column the gap already spaces things; keep the 12px rhythm. */
.story-section > .section-title,
.chapter > .section-title {
  margin-bottom: -4px;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.section-head .section-title {
  margin-bottom: 0;
}

.lead {
  max-width: 36em;
  color: var(--ink-2);
  font-size: clamp(22px, 0.9vw + 13px, 26px);
  font-weight: 450;
  font-stretch: 100%;
  letter-spacing: -0.005em;
  line-height: 1.32;
  text-wrap: pretty;
}

.lead strong,
.lead b {
  color: var(--ink);
  font-weight: 650;
}

.takeaway {
  margin-top: 4px;
  max-width: 76ch;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
  text-wrap: pretty;
}

.bridge {
  display: inline-flex;
  align-items: flex-start;
  align-self: flex-start;
  gap: 8px;
  max-width: 100%;
  padding: 6px 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  transition: color 120ms ease;
}

.bridge .icon,
.bridge svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--ink-3);
  transition: color 120ms ease;
}

.chapter {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
  /* Land below the sticky chapter switcher when scrolled to. */
  scroll-margin-top: calc(var(--safe-top) + 76px);
}

.chapter-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.chapter-title {
  color: var(--ink);
  font-size: 24px;
  font-weight: 650;
  font-stretch: 110%;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}

.chapter-nav {
  position: sticky;
  top: var(--safe-top);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--hairline);
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
}

details.more {
  min-width: 0;
  border-top: 1px solid var(--hairline);
}

details.more > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 12px 0 4px;
  border-radius: var(--radius-control);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: color 120ms ease;
}

details.more > summary::-webkit-details-marker {
  display: none;
}

details.more > summary::marker {
  content: "";
}

details.more > summary svg:last-of-type {
  color: var(--ink-3);
  transition: transform 180ms ease;
}

details.more[open] > summary {
  margin-bottom: 20px;
  color: var(--ink);
}

details.more[open] > summary svg:last-of-type {
  transform: rotate(180deg);
}

/* A drawn chevron when the summary brings no icon of its own. */
details.more > summary:not(:has(svg))::after {
  content: "";
  width: 7px;
  height: 7px;
  margin: -3px 0 0 4px;
  border-right: 1.75px solid var(--ink-3);
  border-bottom: 1.75px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

details.more[open] > summary:not(:has(svg))::after {
  margin-top: 4px;
  transform: rotate(225deg);
}

details.more > :not(summary) + :not(summary) {
  margin-top: 24px;
}

.more-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.why-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

a.card,
button.card {
  cursor: pointer;
}

div.card {
  cursor: auto;
}

a.card:active,
button.card:active {
  transform: scale(0.99);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A static chip (e.g. a note's tag); links and toggles below. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  max-width: 100%;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}

a.chip,
button.chip,
.chip[aria-pressed] {
  min-height: 36px;
  padding: 0 14px;
  border-color: var(--axis);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.chip[aria-pressed="true"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.chip .icon {
  color: currentColor;
}

.highlight-once {
  animation: highlight-once 1.2s ease-out 1 both;
}

@keyframes highlight-once {
  0% { outline: 2px solid transparent; outline-offset: 10px; }
  20% { outline: 2px solid var(--focus); outline-offset: 3px; }
  65% { outline: 2px solid var(--focus); outline-offset: 3px; }
  100% { outline: 2px solid transparent; outline-offset: 3px; }
}

.page-enter {
  animation: page-enter 150ms ease-out both;
}

@keyframes page-enter {
  from { opacity: 0; }
}

/* Full-screen sign-in and setup layout. auth.css styles what goes inside. */
.signin {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  padding: calc(32px + var(--safe-top)) max(16px, var(--safe-right)) calc(32px + var(--safe-bottom)) max(16px, var(--safe-left));
  background: var(--bg);
  color: var(--ink);
}

/* ------------------------------------------------------- form controls */

.input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--axis);
  border-radius: var(--radius-control);
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
}

textarea.input {
  height: auto;
  min-height: 96px;
  padding: 10px 12px;
  line-height: 1.45;
  resize: vertical;
}

select.input {
  padding-right: 32px;
}

.input::placeholder {
  color: var(--ink-3);
}

.input:focus-visible {
  border-color: var(--focus);
  outline: 3px solid color-mix(in oklab, var(--focus) 30%, transparent);
  outline-offset: 0;
}

.input[readonly] {
  background: var(--surface-2);
  border-color: var(--hairline);
}

.input[aria-invalid="true"] {
  border-color: var(--status-critical);
}

input[type="date"].input,
input[type="time"].input {
  min-width: 0;
}

/* Sliders (ui.js slider(): .slider > .slider-head (.slider-label, .slider-value) +
   input.slider-input + .slider-hint). ui.js sets --fill (0%-100%) and may set
   --slider-color; any other range input gets the same look. */
.slider {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.slider-label {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.35;
}

.slider-value {
  color: var(--ink);
  font-size: 24px;
  font-stretch: 72%;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.slider-hint {
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.45;
}

input[type="range"] {
  --fill: 0%;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

input[type="range"]:focus-visible {
  outline: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: linear-gradient(to right, var(--slider-color, var(--ink)) 0 var(--fill), var(--axis) var(--fill) 100%);
}

input[type="range"]::-webkit-slider-thumb {
  width: 24px;
  height: 24px;
  margin-top: -9px;
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--slider-color, var(--ink));
  -webkit-appearance: none;
  appearance: none;
  transition: transform 120ms ease;
}

input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(1.1);
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--axis);
}

input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--slider-color, var(--ink));
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--slider-color, var(--ink));
}

input[type="range"]:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ink);
}

/* Switches (ui.js toggle(): button.toggle[role=switch] > .toggle-text (.toggle-label,
   .toggle-desc) + .toggle-track > .toggle-thumb). On is the status green, like iOS. */
.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.toggle:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.toggle[aria-busy="true"] {
  cursor: progress;
}

.toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.toggle-label {
  font-size: 15px;
  line-height: 1.35;
}

.toggle-desc {
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.toggle-track {
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--axis);
  transition: background-color 160ms ease;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  transition: transform 160ms ease;
}

.toggle[aria-checked="true"] .toggle-track {
  background: var(--status-good);
}

.toggle[aria-checked="true"] .toggle-thumb {
  transform: translateX(20px);
}

.toggle:focus-visible {
  outline: none;
}

.toggle:focus-visible .toggle-track {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Native dialogs (ui.js dialog(): dialog.dialog > form.dialog-card > header.dialog-head
   (.dialog-title, .dialog-close) + .dialog-body + .dialog-error + footer.dialog-actions).
   A centered card on wide screens, a bottom sheet on phones. */
html.has-dialog {
  overflow: hidden;
}

dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px - var(--safe-top) - var(--safe-bottom));
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  overflow: auto;
  overscroll-behavior: contain;
}

dialog::backdrop {
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

dialog[open] {
  animation: dialog-in 180ms ease-out;
}

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
}

.dialog-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 20px 24px 24px;
}

.dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dialog-title {
  padding-top: 4px;
  font-size: 19px;
  font-weight: 650;
  font-stretch: 105%;
  letter-spacing: -0.005em;
  line-height: 1.3;
}

.dialog-close {
  margin: -2px -6px 0 0;
}

.dialog-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  color: var(--ink-2);
}

.dialog-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
}

.dialog-error .icon {
  margin-top: 2px;
  color: var(--status-critical);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ------------------------------------------------------------ day sheet */
/* SPEC-DATABASE section 5: the day is an overlay over the page, not a page.
   app.js builds div.sheet-layer > div.sheet-backdrop + section.sheet[role=dialog] >
   div.sheet-bar (.sheet-grab, .sheet-close) + div.sheet-body > div.sheet-content; views/day.js
   fills .sheet-content and day.css styles what goes inside. Right-hand sheet 480px wide
   (560px on touch tablets), full-height bottom sheet on phones. */

html.has-sheet {
  overflow: hidden;
}

.sheet-layer {
  position: fixed;
  inset: 0;
  z-index: 46;
}

.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: var(--backdrop);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  touch-action: none;
  animation: sheet-fade-in 200ms ease-out backwards;
}

.sheet {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(480px, 100%);
  max-width: 100%;
  border-left: 1px solid var(--hairline);
  background: var(--bg);
  color: var(--ink);
  outline: none;
  animation: sheet-in-right 260ms cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.sheet-bar {
  position: relative;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  min-height: 52px;
  padding: calc(8px + var(--safe-top)) max(12px, var(--safe-right)) 0 16px;
}

.sheet-grab {
  display: none;
}

.sheet-close {
  width: 40px;
  height: 40px;
  border-color: var(--hairline);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-2);
}

.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px max(24px, var(--safe-right)) calc(40px + var(--safe-bottom)) 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  will-change: transform;
}

.sheet-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

/* The close button shares the top row with the view's own bar; a loading or error state
   (no bar) starts below it. */
.sheet-content > .empty,
.sheet-content > .loading {
  margin-top: 60px;
}

.sheet-layer.is-closing .sheet-backdrop {
  animation: sheet-fade-out 200ms ease-in forwards;
}

.sheet-layer.is-closing .sheet {
  animation: sheet-out-right 200ms ease-in forwards;
}

@keyframes sheet-fade-in {
  from { opacity: 0; }
}

@keyframes sheet-fade-out {
  to { opacity: 0; }
}

@keyframes sheet-in-right {
  from { transform: translateX(100%); }
}

@keyframes sheet-out-right {
  to { transform: translateX(100%); }
}

@keyframes sheet-in-up {
  from { transform: translateY(100%); }
}

@keyframes sheet-out-down {
  to { transform: translateY(100%); }
}

/* Host mode: the view draws its own scrim and sheet (day.js), so the shell's chrome steps
   aside and nothing here creates a containing block for its fixed layers. */
.sheet-layer.is-host > .sheet-backdrop,
.sheet-layer.is-host .sheet-bar {
  display: none;
}

.sheet-layer.is-host .sheet {
  position: static;
  display: block;
  width: auto;
  border: 0;
  border-radius: 0;
  background: none;
  animation: none;
}

.sheet-layer.is-host .sheet-body {
  padding: 0;
  overflow: visible;
  will-change: auto;
}

.sheet-layer.is-host .sheet-content {
  display: block;
}

/* Touch tablets (iPad): a wider sheet. */
@media (hover: none) and (min-width: 600px) {
  .sheet {
    width: min(560px, 100%);
  }
}

/* Side sheets: the close button sits in the top row beside the view's own bar (day.js's
   previous/next row, which leaves room for it) instead of taking a row of its own. */
@media (min-width: 600px) {
  .sheet-layer:not(.is-host) .sheet-bar {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
    min-height: 0;
    height: calc(52px + var(--safe-top));
    padding: var(--safe-top) max(12px, var(--safe-right)) 0 0;
    pointer-events: none;
  }

  .sheet-layer:not(.is-host) .sheet-close {
    pointer-events: auto;
  }

  .sheet-layer:not(.is-host) .sheet-body {
    padding-top: var(--safe-top);
  }
}

@media (min-width: 600px) and (max-height: 500px) {
  .sheet-layer:not(.is-host) .sheet-bar {
    height: calc(44px + var(--safe-top));
  }
}

/* Phones: a full-height bottom sheet with a grab handle. */
@media (max-width: 599.98px) {
  .sheet {
    top: calc(var(--safe-top) + 10px);
    left: 0;
    width: 100%;
    border-top: 1px solid var(--hairline);
    border-left: 0;
    border-radius: 20px 20px 0 0;
    animation-name: sheet-in-up;
    animation-duration: 300ms;
  }

  .sheet-layer.is-closing .sheet {
    animation-name: sheet-out-down;
  }

  .sheet-bar {
    min-height: 48px;
    padding: 8px max(10px, var(--safe-right)) 0 max(16px, var(--safe-left));
    touch-action: none;
  }

  .sheet-grab {
    position: absolute;
    top: 8px;
    left: 50%;
    display: block;
    width: 40px;
    height: 5px;
    margin-left: -20px;
    border-radius: var(--radius-pill);
    background: var(--axis);
  }

  .sheet-body {
    padding: 0 max(16px, var(--safe-right)) calc(32px + var(--safe-bottom)) max(16px, var(--safe-left));
  }

  /* The bar shrinks to the grab strip; the close button joins the view's top row (day.js
     leaves room for it), as in a native sheet. Pull-down still closes from the strip or
     from the content when it is scrolled to the top. */
  .sheet-layer:not(.is-host) .sheet-bar {
    z-index: 5;
    min-height: 20px;
    padding: 0;
  }

  .sheet-layer:not(.is-host) .sheet-close {
    position: absolute;
    top: 24px;
    right: max(10px, var(--safe-right));
  }
}

@media (any-pointer: coarse) {
  .sheet-close {
    width: 44px;
    height: 44px;
  }
}

@media (hover: hover) {
  .sheet-close:hover {
    border-color: var(--axis);
    background: var(--surface-2);
    color: var(--ink);
  }
}

/* -------------------------------------------------------------- settings */
/* Round 1 settings layout; settings.css may refine it. */

.settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 880px;
}

.settings-lead {
  max-width: 76ch;
  color: var(--ink-2);
}

.settings-privacy {
  max-width: 68ch;
}

.steps {
  display: flex;
  flex-direction: column;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 0 16px;
  padding-bottom: 28px;
}

.step:last-child {
  padding-bottom: 0;
}

/* The thin rail joining step markers. */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13.5px;
  top: 34px;
  bottom: 6px;
  width: 1px;
  background: var(--hairline);
}

.step-marker {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--axis);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.step.current .step-marker {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

.step.done .step-marker {
  color: var(--status-good);
}

.step-main {
  min-width: 0;
}

.step-title {
  margin-top: 3px;
  font-size: 15px;
  font-weight: 600;
}

.step.todo .step-title {
  color: var(--ink-2);
}

.step-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 14px;
}

.step-body > *,
.credentials-form,
.saved-credentials {
  max-width: 100%;
}

.credentials-form,
.saved-credentials {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

.copy-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 560px;
}

.copy-row .input {
  flex: 1 1 220px;
  min-width: 0;
}

.copy-row .btn {
  height: 40px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  width: 100%;
  max-width: 640px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}

.form-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--ink);
  font-size: 14px;
}

.form-error .icon {
  margin-top: 2px;
  color: var(--status-critical);
}

.hint-chip {
  padding: 1px 7px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink);
}

.ext-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 550;
}

.ext-link .icon {
  color: var(--ink-3);
}

.notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 8px 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 14px;
  --tone: var(--ink-3);
}

.step-body .notice {
  margin-bottom: 0;
  padding-right: 14px;
}

.notice.good { --tone: var(--status-good); }
.notice.warn { --tone: var(--status-warn); }
.notice.critical { --tone: var(--status-critical); }

.notice > .icon {
  margin-top: 2px;
  color: var(--tone);
}

.notice-text {
  flex: 1;
  min-width: 0;
}

.notice-text > * + * {
  margin-top: 2px;
}

.notice-title {
  font-weight: 600;
}

.notice .icon-btn {
  width: 28px;
  height: 28px;
  margin: -4px 0;
}

.settings-connection .panel-body > p,
.settings-connection .panel-body > .sync-line {
  max-width: 76ch;
}

.settings-connection .panel-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.settings-connection .panel-body > .notice {
  margin-bottom: 0;
}

.sync-line {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
}

.count-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.count {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-control);
  background: var(--surface-2);
}

.count dt {
  font-size: 13px;
  color: var(--ink-2);
}

.count dd {
  font-size: 28px;
  line-height: 1.1;
}

.kv {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 10px 24px;
  margin-bottom: 20px;
  font-size: 14px;
}

.kv-row {
  display: contents;
}

.kv dt {
  color: var(--ink-2);
}

.kv dd {
  min-width: 0;
  color: var(--ink);
}

.path-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.path {
  overflow-wrap: anywhere;
}

.path-row .btn.small {
  height: 26px;
}

/* ============================================================ hover */
/* Only where a pointer can hover (mouse, trackpad, Yoga pen and touchpad), so a
   tap on iPhone or iPad never leaves an element stuck in its hover color. */

@media (hover: hover) {
  a:hover {
    text-decoration-color: currentColor;
  }

  .nav-link:hover {
    background: var(--surface-2);
    color: var(--ink);
  }

  .icon-btn:hover {
    background: var(--surface-2);
    color: var(--ink);
  }

  .link-btn:hover {
    text-decoration-color: currentColor;
  }

  .btn:hover {
    border-color: var(--ink-3);
  }

  .btn.primary:hover {
    border-color: color-mix(in oklab, var(--ink) 86%, var(--bg));
    background: color-mix(in oklab, var(--ink) 86%, var(--bg));
  }

  .btn.ghost:hover {
    background: var(--surface-2);
    color: var(--ink);
  }

  .btn:disabled:hover {
    border-color: var(--axis);
  }

  .btn.primary:disabled:hover {
    border-color: var(--ink);
    background: var(--ink);
  }

  .btn.ghost:disabled:hover {
    border-color: transparent;
    background: transparent;
  }

  .segmented > button:hover {
    color: var(--ink);
  }

  .table tbody tr:hover td {
    background: var(--surface-2);
  }

  .toast-close:hover {
    color: var(--ink);
  }

  .input:hover:not(:focus-visible) {
    border-color: var(--ink-3);
  }

  .input[readonly]:hover {
    border-color: var(--hairline);
  }

  .bridge:hover {
    color: var(--ink);
  }

  .bridge:hover .icon,
  .bridge:hover svg {
    color: var(--ink-2);
  }

  details.more > summary:hover {
    color: var(--ink);
  }

  a.card:hover,
  button.card:hover {
    border-color: var(--axis);
    background: var(--surface-2);
  }

  button.chip:hover,
  .chip[aria-pressed="false"]:hover {
    border-color: var(--ink-3);
    color: var(--ink);
  }
}

/* ============================================================ breakpoints */

/* ---- >= 1280: full rail (defaults above). grid-3 three across. */

/* ---- 900-1279: compact 80px rail with labels under the icons. */
@media (min-width: 900px) and (max-width: 1279.98px) {
  :root {
    --rail-w: calc(var(--rail-compact) + env(safe-area-inset-left, 0px));
  }

  .rail {
    align-items: stretch;
    padding: calc(18px + var(--safe-top)) 8px calc(14px + var(--safe-bottom)) calc(8px + var(--safe-left));
  }

  .rail .wordmark {
    align-self: center;
    justify-content: center;
    padding: 6px;
  }

  .rail .wordmark-text {
    display: none;
  }

  .rail-nav {
    margin-top: 22px;
  }

  .rail .nav-list {
    gap: 4px;
  }

  .rail .nav-list .nav-end {
    padding-top: 12px;
  }

  .rail .nav-link {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    height: 60px;
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: color-mix(in oklab, var(--ink-2) 62%, var(--ink-3));
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-align: center;
  }

  .rail .nav-link .nav-label {
    max-width: 100%;
  }

  /* Pill behind the icon marks the current page (and hover). */
  .rail .nav-link::before,
  .rail .nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 52px;
    height: 30px;
    margin: 0 0 0 -26px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    transition: background-color 120ms ease;
  }

  .rail .nav-link[aria-current="page"]::before {
    border-color: var(--hairline);
    background: var(--surface-2);
  }

  .rail .nav-link[aria-current="page"] {
    background: transparent;
    color: var(--ink);
    font-weight: 600;
  }

  .rail-foot {
    padding: 12px 0 0;
  }

  .rail-foot .sync-status {
    flex-direction: column;
    gap: 6px;
  }

  .rail-foot .sync-copy {
    flex: 0 0 auto;
    width: 100%;
    text-align: center;
  }

  .rail-foot .sync-text {
    display: -webkit-box;
    color: var(--ink-2);
    font-size: 11px;
    line-height: 1.25;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .rail-foot .sync-detail {
    display: none;
  }

  .rail-foot .btn.small {
    padding: 0 8px;
    font-size: 12px;
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-wide {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

@media (min-width: 900px) {
  .why-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  /* Rows of four to six tiles stay on one balanced row instead of leaving an orphan. */
  .tiles:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tiles:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .tiles:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .tiles:has(> :nth-child(6):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (min-width: 900px) and (hover: hover) {
  .rail .nav-link:hover {
    color: var(--ink);
  }
}

@media (min-width: 900px) and (max-width: 1279.98px) and (hover: hover) {
  .rail .nav-link:hover {
    background: transparent;
  }

  .rail .nav-link:not([aria-current="page"]):hover::before {
    background: var(--surface-2);
  }
}

/* ---- < 900: bottom tab bar. */
@media (max-width: 899.98px) {
  :root {
    --gutter: 24px;
  }

  .app {
    grid-template-columns: minmax(0, 1fr);
  }

  .rail {
    display: none;
  }

  /* The shell's phone header, when present: it sits on the black ground. */
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 0 max(var(--gutter), var(--safe-right)) 0 max(var(--gutter), var(--safe-left));
  }

  .topbar .wordmark {
    align-self: center;
    padding-left: 0;
  }

  .topbar .wordmark-text {
    font-size: 19px;
  }

  .sync-status.compact {
    justify-content: flex-end;
    gap: 8px;
  }

  .sync-status.compact .sync-copy {
    flex: 0 1 auto;
  }

  .sync-status.compact .sync-text {
    color: var(--ink-2);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: block;
    padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
    border-top: 1px solid var(--hairline);
    background: var(--bar-bg);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    backdrop-filter: blur(20px) saturate(1.5);
  }

  .tabbar .nav-list {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0;
    max-width: 560px;
    margin: 0 auto;
  }

  .tabbar .nav-list .nav-end {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .tabbar .nav-link {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: var(--tabbar-height);
    padding: 4px 2px 2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: color-mix(in oklab, var(--ink-2) 62%, var(--ink-3));
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  /* Every tab shows icon and label (4 tabs). */
  .tabbar .nav-link > .nav-label.visually-hidden {
    position: relative !important;
    width: auto;
    height: auto;
    margin: 0;
    overflow: hidden;
    clip: auto;
    clip-path: none;
  }

  .tabbar .nav-link[aria-current="page"] {
    background: transparent;
    color: var(--ink);
    font-weight: 600;
  }

  .tabbar .nav-link[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 56px;
    height: 30px;
    margin-left: -28px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-pill);
    background: var(--surface-2);
  }

  .tabbar .nav-link:focus-visible {
    outline-offset: -4px;
    border-radius: var(--radius-control);
  }

  .main-col:not(:has(> .topbar:not([hidden]))) {
    padding-top: var(--safe-top);
  }

  .main-col:has(> .topbar:not([hidden])) {
    padding-top: 0;
  }

  .topbar {
    padding-top: var(--safe-top);
    min-height: calc(52px + var(--safe-top));
  }

  .page {
    padding: 20px max(var(--gutter), var(--safe-right)) calc(var(--tabbar-height) + 40px + var(--safe-bottom)) max(var(--gutter), var(--safe-left));
  }

  .page-head {
    margin-bottom: 24px;
  }

  .page-head h1 {
    font-size: 24px;
  }

  .page-sub {
    font-size: 14px;
  }

  /* A range control takes the full row; a lone button stays beside the title. */
  .page-actions:has(.segmented:not([hidden])) {
    width: 100%;
  }

  .page-actions .segmented {
    width: 100%;
  }

  .page-actions .segmented > button {
    padding: 0 6px;
  }

  .page-content,
  .section {
    gap: 16px;
  }

  .grid-2,
  .grid-3,
  .grid-wide {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .chapter-nav .segmented {
    flex: 1 1 auto;
  }

  .banner {
    padding: 10px max(var(--gutter), var(--safe-right)) 10px max(var(--gutter), var(--safe-left));
  }

  .toasts {
    left: calc(16px + var(--safe-left));
    right: calc(16px + var(--safe-right));
    bottom: calc(var(--tabbar-height) + 12px + var(--safe-bottom));
    align-items: stretch;
    max-width: none;
  }

  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .count-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kv {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .kv dd {
    margin-bottom: 10px;
  }

  .step {
    gap: 0 12px;
  }
}

@media (max-width: 899.98px) and (hover: hover) {
  .tabbar .nav-link:hover {
    background: transparent;
    color: var(--ink);
  }
}

/* ---- 720-899: two-column grids come back. */
@media (min-width: 720px) and (max-width: 899.98px) {
  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- < 600: phones and narrow split view. */
@media (max-width: 599.98px) {
  :root {
    --gutter: 16px;
  }

  .story {
    gap: 32px;
  }

  .lead {
    font-size: 20px;
    line-height: 1.35;
  }

  .chapter-title {
    font-size: 22px;
  }

  .section-title {
    font-size: 19px;
  }

  .tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .banner {
    flex-wrap: wrap;
  }

  .banner-text {
    flex: 1 1 calc(100% - 26px);
  }

  .banner-actions {
    margin-left: 0;
    padding-left: 26px;
  }

  .panel {
    padding: 16px;
  }

  .tile {
    padding: 14px;
  }

  .empty {
    padding: 24px 20px;
  }

  .chapter-nav .segmented {
    display: flex;
    width: 100%;
  }

  .chapter-nav .segmented > button {
    flex: 1 1 0;
    padding: 0 8px;
  }

  /* Bottom sheet dialogs. */
  dialog {
    width: 100%;
    max-height: calc(100dvh - var(--safe-top) - 24px);
    margin: auto 0 0;
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
  }

  @keyframes dialog-in {
    from { transform: translateY(24px); opacity: 0; }
  }

  .dialog-card {
    padding: 18px max(16px, var(--safe-right)) calc(20px + var(--safe-bottom)) max(16px, var(--safe-left));
  }

  .dialog-actions > .btn {
    flex: 1 1 0;
  }

  /* Opt-in: tables collapse to stacked rows (cells carry data-label). */
  .table.stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .table.stack,
  .table.stack tbody,
  .table.stack tr,
  .table.stack td {
    display: block;
    width: 100%;
  }

  .table.stack tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
  }

  .table.stack tbody tr:last-child {
    border-bottom: 0;
  }

  .table.stack td {
    padding: 0;
    border: 0;
    text-align: left;
  }

  .table.stack td:first-child {
    grid-column: 1 / -1;
    font-weight: 600;
  }

  .table.stack td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    color: var(--ink-3);
    font-size: 12px;
  }
}

/* ---- Landscape phone (short): compact 44px tab bar, icon and label side by side. */
@media (max-width: 899.98px) and (max-height: 500px) {
  :root {
    --tabbar-height: 44px;
  }

  .tabbar .nav-list {
    max-width: 640px;
  }

  .tabbar .nav-link {
    flex-direction: row;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    height: var(--tabbar-height);
    margin: 0 auto;
    padding: 0 16px;
    font-size: 12px;
  }

  .tabbar .nav-link[aria-current="page"]::before {
    top: 5px;
    bottom: 5px;
    left: 0;
    right: 0;
    width: auto;
    height: auto;
    margin: 0;
  }

  .page {
    padding-top: 16px;
  }

  .page-head {
    margin-bottom: 16px;
  }

  .topbar {
    min-height: calc(44px + var(--safe-top));
  }
}

/* ============================================================ pointer */
/* Touch screens (iPhone, iPad, the Yoga's touch panel): 44px targets, 16px inputs
   so iOS never zooms on focus. */

@media (any-pointer: coarse) {
  .btn {
    height: 44px;
  }

  /* Small buttons keep a 36px look; an invisible margin brings the target to 44px. */
  .btn.small {
    position: relative;
    height: 36px;
    padding: 0 12px;
  }

  .btn.small::after {
    content: "";
    position: absolute;
    inset: -5px -2px;
  }

  .copy-row .btn {
    height: 44px;
  }

  .path-row .btn.small {
    height: 36px;
  }

  .icon-btn {
    width: 44px;
    height: 44px;
  }

  .notice .icon-btn {
    width: 44px;
    height: 44px;
    margin: -10px -4px -10px 0;
  }

  /* Options look 38px tall; the hit area reaches into the control's padding (44px). */
  .segmented > button {
    position: relative;
    min-width: 44px;
    height: 38px;
    padding: 0 14px;
    font-size: 14px;
  }

  /* The inset is measured from inside the 1px border: 36 + 2 × 4 = 44px. */
  .segmented > button::after {
    content: "";
    position: absolute;
    inset: -4px -1px;
  }

  .rail .nav-link {
    height: 44px;
  }

  a.chip,
  button.chip,
  .chip[aria-pressed] {
    min-height: 44px;
  }

  .bridge {
    padding: 12px 0;
  }

  details.more > summary {
    min-height: 48px;
    padding-bottom: 6px;
  }

  .toast-close {
    width: 44px;
    height: 44px;
    margin: -10px -6px -10px 0;
  }

  .toast-action {
    height: 36px;
    margin: -4px 0;
  }

  /* Inline text buttons and links keep their look but get a 44px hit area. */
  .link-btn::after,
  .ext-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -6px;
    left: -6px;
    height: max(44px, calc(100% + 24px));
    transform: translateY(-50%);
  }

  .ext-link {
    position: relative;
  }

  .wordmark {
    min-height: 44px;
    min-width: 44px;
  }

  .skip-link {
    min-height: 44px;
    padding: 12px 16px;
  }

  input[type="range"] {
    height: 44px;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 26px;
    height: 26px;
    margin-top: -11px;
  }

  input[type="range"]::-moz-range-thumb {
    width: 26px;
    height: 26px;
  }

  .input,
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .input {
    height: 44px;
  }

  textarea.input {
    height: auto;
  }

  .table td .btn,
  .panel-actions .btn {
    min-width: 44px;
  }
}

@media (any-pointer: coarse) and (min-width: 900px) and (max-width: 1279.98px) {
  .rail .nav-link {
    height: 60px;
  }
}

@media (any-pointer: coarse) and (max-width: 899.98px) {
  .page-actions .segmented > button {
    padding: 0 6px;
  }
}

/* Text that only makes sense for one kind of pointer. */
@media (hover: hover) {
  .touch-only {
    display: none !important;
  }
}

@media (hover: none) {
  .hover-only {
    display: none !important;
  }
}

/* ============================================================ standalone */
/* Installed to the home screen (iPhone, iPad) or as an app window (Windows). */

@media (display-mode: standalone) {
  html,
  body,
  .app {
    overscroll-behavior: none;
  }

  .nav-link,
  .wordmark,
  .btn,
  .card,
  .chip {
    -webkit-touch-callout: none;
  }
}

/* --------------------------------------------------------- motion, print */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .highlight-once,
  .page-enter,
  dialog[open] {
    animation: none !important;
  }

  a.card:active,
  button.card:active,
  .btn:active:not(:disabled) {
    transform: none;
  }
}

@media print {
  .rail,
  .topbar,
  .tabbar,
  .banners,
  .page-actions,
  .panel-actions,
  .chapter-nav,
  .toasts,
  .skip-link {
    display: none !important;
  }

  .app {
    display: block;
  }

  .app::before {
    content: none;
  }

  html,
  body {
    background: #FFFFFF;
  }

  .page {
    max-width: none;
    padding: 0;
  }

  details.more > :not(summary) {
    display: block;
  }

  /* An open day sheet prints on its own. */
  html.has-sheet .app,
  .sheet-backdrop,
  .sheet-bar {
    display: none !important;
  }

  .sheet-layer,
  .sheet {
    position: static;
    width: auto;
    border: 0;
    animation: none;
  }

  .sheet-body {
    overflow: visible;
    padding: 0;
  }

  .panel,
  .tile,
  .card,
  .empty {
    break-inside: avoid;
  }
}