/*
 * Theme tokens: light-dark(light value, dark value). The theme follows the OS
 * setting unless Settings saved an override on this device (`data-theme` on
 * <html>, set by js/theme-init.js before the page renders).
 */
:root {
  color-scheme: light dark;

  --text: light-dark(#1d1a1c, #f7f2f9);
  --text-muted: light-dark(#5c5360, #bfb5c8);
  --accent: light-dark(#b83a64, #ff8fb5);
  --accent-soft: light-dark(rgb(184 58 100 / 0.12), rgb(255 143 181 / 0.16));
  /* Small accent text (links, the active tab): glass over the light glows is
     pinker than white, so it needs a darker shade for 4.5:1. */
  --accent-text: light-dark(#9a2c55, #ff8fb5);
  --on-accent: light-dark(#ffffff, #250f1a);
  --error: light-dark(#b42318, #e5484d);
  --on-error: #ffffff;
  --separator: light-dark(rgb(31 26 29 / 0.08), rgb(255 255 255 / 0.1));

  /* Frosted glass: cards, and the navigation bar floating above them. */
  --glass: light-dark(rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.07));
  --glass-border: light-dark(rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.11));
  /* light-dark() takes colours only: a shadow that differs in size per theme
     is two shadows, each transparent in the other theme. */
  --glass-shadow:
    0 6px 24px light-dark(rgb(90 40 70 / 0.08), transparent),
    0 8px 32px light-dark(transparent, rgb(0 0 0 / 0.3));
  --glass-blur: blur(24px) saturate(170%);
  --bar: light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.09));
  --bar-border: light-dark(rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.18));
  --bar-shadow: 0 10px 30px light-dark(rgb(90 40 70 / 0.18), rgb(0 0 0 / 0.45));
  --bar-blur: blur(28px) saturate(180%);
  /* The desktop sidebar is a little lighter than the tab bar in dark mode. */
  --sidebar: light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.08));
  --sidebar-border: light-dark(rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.16));
  --sidebar-shadow: 0 10px 30px light-dark(rgb(90 40 70 / 0.14), rgb(0 0 0 / 0.35));
  /* Dialogs: glass, but more opaque, over a dimmed page. */
  --dialog: light-dark(rgb(255 255 255 / 0.86), rgb(36 30 42 / 0.88));
  --dialog-shadow: 0 24px 70px light-dark(rgb(60 20 45 / 0.25), rgb(0 0 0 / 0.5));
  --scrim: light-dark(rgb(29 16 26 / 0.34), rgb(0 0 0 / 0.5));

  /* Inputs and controls inside the glass */
  --field: light-dark(rgb(255 255 255 / 0.6), rgb(255 255 255 / 0.07));
  --field-border: light-dark(rgb(255 255 255 / 0.9), rgb(255 255 255 / 0.1));
  --segmented: light-dark(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.08));
  --segmented-active: light-dark(rgb(255 255 255 / 0.95), rgb(255 255 255 / 0.2));
  --segmented-shadow: 0 1px 3px light-dark(rgb(0 0 0 / 0.1), transparent);
  --chart-dot: light-dark(rgb(184 58 100 / 0.4), rgb(255 143 181 / 0.5));
  --switch-off: light-dark(rgb(31 26 29 / 0.2), rgb(255 255 255 / 0.18));

  /* Cycle phases. The soft colours are translucent: they sit on glass. */
  --period: light-dark(#d14468, #ff7aa0);
  --period-soft: light-dark(rgb(209 68 104 / 0.18), rgb(255 122 160 / 0.24));
  --on-period: light-dark(#ffffff, #250f1a);
  --fertile: light-dark(#16897e, #5ee3d1);
  --fertile-soft: light-dark(rgb(22 137 126 / 0.16), rgb(94 227 209 / 0.18));
  --on-fertile: light-dark(#ffffff, #04241f);
  --follicular: light-dark(#b7791f, #ffc46e);
  --follicular-soft: light-dark(rgb(214 150 40 / 0.17), rgb(255 196 110 / 0.17));
  --luteal: light-dark(#6f5bb5, #b4a6ff);
  --luteal-soft: light-dark(rgb(111 91 181 / 0.16), rgb(170 150 255 / 0.2));

  --radius: 24px;
  --control-radius: 12px;
  /* Between a screen's cards (.columns and the lists of cards in them). */
  --gap: 14px;
  /* Hover: a light tint over a control's own background (see the end of this file). */
  --hover: light-dark(rgb(31 26 29 / 0.07), rgb(255 255 255 / 0.09));
  /* The phone tab bar: its height (48px items, 5px padding, 1px border) and gap
     to the bottom. With a home indicator (iOS) it sits inside that area, like the
     system's own tab bars, instead of on top of it. */
  --nav-height: 60px;
  --nav-bottom: max(20px, calc(env(safe-area-inset-bottom) - 12px));
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;

  /* The base colour behind the page (the glow's spots sit on it, see
     body::before). The neutral one; screens pick another with `data-glow`. */
  --bg: light-dark(#f7f2f6, #0c0a12);

  @media (min-width: 768px) {
    --gap: 20px;
  }
}

:root[data-glow="rose"] {
  --bg: light-dark(#f8f1f4, #100a10);
}

:root[data-glow="amber"] {
  --bg: light-dark(#faf5ee, #110d09);
}

:root[data-glow="teal"] {
  --bg: light-dark(#f0f7f6, #08100f);
}

:root[data-glow="lilac"] {
  --bg: light-dark(#f4f1f9, #0b0a14);
}

/* The glow's three colour spots. They live on the glow layer only and are
   registered as colours so they can animate: switching screens cross-fades
   them, and each frame restyles just that layer, not the page. --bg switches
   at once (js/theme.js reads it for the status bar right away; the base
   colours barely differ anyway). */
@property --glow-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --glow-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --glow-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

/* The neutral spots are on body::before itself (below); these are the others. */
:root[data-glow="rose"] body::before {
  --glow-1: light-dark(rgb(240 120 165 / 0.5), rgb(220 70 130 / 0.45));
  --glow-2: light-dark(rgb(255 160 190 / 0.4), rgb(170 50 110 / 0.35));
  --glow-3: light-dark(rgb(255 180 150 / 0.35), rgb(200 90 90 / 0.22));
}

:root[data-glow="amber"] body::before {
  --glow-1: light-dark(rgb(245 180 90 / 0.5), rgb(210 140 40 / 0.42));
  --glow-2: light-dark(rgb(255 205 140 / 0.42), rgb(190 110 50 / 0.32));
  --glow-3: light-dark(rgb(240 150 170 / 0.25), rgb(200 80 120 / 0.18));
}

:root[data-glow="teal"] body::before {
  --glow-1: light-dark(rgb(80 200 185 / 0.45), rgb(30 170 155 / 0.42));
  --glow-2: light-dark(rgb(130 215 205 / 0.4), rgb(40 130 160 / 0.32));
  --glow-3: light-dark(rgb(165 145 235 / 0.25), rgb(110 85 220 / 0.18));
}

:root[data-glow="lilac"] body::before {
  --glow-1: light-dark(rgb(165 140 235 / 0.5), rgb(110 85 220 / 0.48));
  --glow-2: light-dark(rgb(200 170 245 / 0.42), rgb(150 100 230 / 0.35));
  --glow-3: light-dark(rgb(240 150 190 / 0.28), rgb(200 80 150 / 0.2));
}

/* Without transparency (a system setting; Chromium only so far), the glass is solid. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass: light-dark(#fdfafc, #1b1820);
    --bar: light-dark(#fdfafc, #1f1c25);
    --sidebar: light-dark(#fdfafc, #1f1c25);
    --dialog: light-dark(#fdfafc, #1f1c25);
    --glass-blur: none;
    --bar-blur: none;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

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

html {
  -webkit-text-size-adjust: 100%;
  /* Keyboard focus scrolls into view above the floating tab bar, not under it. */
  scroll-padding-bottom: calc(var(--nav-height) + var(--nav-bottom));

  /* The sidebar doesn't cover anything. */
  @media (min-width: 768px) {
    scroll-padding-bottom: 0;
  }
}

/* The body keeps the plain base colour: js/theme.js reads it for the
   theme-color meta (the installed app's status bar). */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 var(--font);
}

/* The glow, on its own fixed layer behind everything (iOS ignores
   `background-attachment: fixed`). Its spots are the neutral ones unless
   `data-glow` picks another set (see the tokens). */
body::before {
  --glow-1: light-dark(rgb(240 130 170 / 0.45), rgb(214 70 128 / 0.42));
  --glow-2: light-dark(rgb(165 145 235 / 0.42), rgb(98 76 210 / 0.4));
  --glow-3: light-dark(rgb(255 186 140 / 0.38), rgb(30 150 160 / 0.28));
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 8%, var(--glow-1), transparent 45%),
    radial-gradient(circle at 95% 35%, var(--glow-2), transparent 45%),
    radial-gradient(circle at 20% 85%, var(--glow-3), transparent 45%);
  transition: --glow-1 0.6s, --glow-2 0.6s, --glow-3 0.6s;

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }

  @media (min-width: 768px) {
    background:
      radial-gradient(circle at 18% 6%, var(--glow-1), transparent 40%),
      radial-gradient(circle at 92% 30%, var(--glow-2), transparent 42%),
      radial-gradient(circle at 40% 95%, var(--glow-3), transparent 42%);
  }
}

h1 {
  margin: 0 0 1rem;
  font-size: 2.125rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.2px;
}

a {
  color: var(--accent-text);
}

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

/* Headings get programmatic focus after navigation; no ring for that. */
[tabindex="-1"]:focus {
  outline: none;
}

/* Icons: SVG files used as masks, so they take the current text color. */
.icon {
  display: inline-block;
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.icon-weight { mask-image: url("../icons/weight.svg"); }
.icon-cycle { mask-image: url("../icons/cycle.svg"); }
.icon-drop { mask-image: url("../icons/drop.svg"); }
.icon-sprout { mask-image: url("../icons/sprout.svg"); }
.icon-ovulation { mask-image: url("../icons/ovulation.svg"); }
.icon-repeat { mask-image: url("../icons/repeat.svg"); }
.icon-info { mask-image: url("../icons/info.svg"); }
.icon-chevron-left { mask-image: url("../icons/chevron-left.svg"); }
.icon-chevron-right { mask-image: url("../icons/chevron-right.svg"); }
.icon-history { mask-image: url("../icons/history.svg"); }
.icon-close { mask-image: url("../icons/close.svg"); }
.icon-trash { mask-image: url("../icons/trash.svg"); }
.icon-plus { mask-image: url("../icons/plus.svg"); }

/* Layout: mobile first, a floating tab bar */
.app {
  min-height: 100dvh;
}

/* Room at the bottom so the last card can scroll up above the tab bar. */
.main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1rem calc(var(--nav-height) + var(--nav-bottom) + 1.5rem);
}

/* Phone: a frosted pill floating above the content, centred. It just gets
   narrower when the Cycle tab is turned off. Sized by its own content: a
   fixed element at `left: 50%` would otherwise only get the other half of
   the screen, and longer labels would wrap. */
.nav {
  position: fixed;
  bottom: var(--nav-bottom);
  left: 50%;
  z-index: 10;
  width: max-content;
  padding: 5px;
  background: var(--bar);
  border: 1px solid var(--bar-border);
  border-radius: 999px;
  box-shadow: var(--bar-shadow);
  transform: translateX(-50%);
  -webkit-backdrop-filter: var(--bar-blur);
  backdrop-filter: var(--bar-blur);
}

.nav-brand {
  display: none;
}

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

.nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 86px;
  height: 48px;
  padding: 0 0.5rem;
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 999px;

  &[aria-current="page"] {
    color: var(--accent-text);
    font-weight: 600;
    background: var(--accent-soft);
  }
}

/* The account entry: the user's picture instead of an icon. Name and email only show on desktop. */
.nav-account .avatar {
  --size: 24px;
}

.nav-account[aria-current="page"] .avatar {
  outline: 1.5px solid var(--accent);
  outline-offset: 1.5px;
}

.nav-person {
  display: none;
}

/* Desktop: a floating frosted sidebar, inset from the window's edges */
@media (min-width: 768px) {
  .app:has(> .nav) {
    padding-left: calc(240px + 2 * 16px);
  }

  .main {
    width: 100%;
    padding: 2.75rem 3.5rem;
  }

  /* The wide layout (1056px of content), from the width where the second
     column appears (see .columns). */
  @media (min-width: 1280px) {
    .main {
      max-width: calc(1056px + 2 * 3.5rem);
    }
  }

  .nav {
    inset: 16px auto 16px 16px;
    display: flex;
    flex-direction: column;
    padding: 20px 12px 12px;
    background: var(--sidebar);
    border-color: var(--sidebar-border);
    border-radius: 28px;
    box-shadow: var(--sidebar-shadow);
    width: 240px;
    transform: none;
  }

  .nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px 22px;
    color: var(--accent);
    font-size: 1.25rem;
    font-weight: 700;
  }

  .nav-list {
    flex: 1;
    flex-direction: column;
    gap: 4px;

    /* The account entry sits at the bottom of the sidebar. */
    & li:has(.nav-account) {
      margin-top: auto;
    }
  }

  .nav-link {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    height: 44px;
    padding: 0 12px;
    font-size: 1rem;
    border-radius: 14px;

    & .icon {
      width: 22px;
      height: 22px;
    }
  }

  /* The person block: picture, name and email. */
  .nav-account {
    gap: 10px;
    height: auto;
    padding: 10px;
    border-radius: 16px;

    & .avatar {
      --size: 36px;
    }

    &[aria-current="page"] {
      color: var(--text);
    }
  }

  /* Hidden visually, still part of the link's accessible name. */
  .nav-account-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nav-person {
    display: grid;
    min-width: 0;
    line-height: 1.3;

    & span {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .nav-person-name {
    color: var(--text);
    font-size: 0.9375rem;
    font-weight: 600;
  }

  .nav-person-email {
    color: var(--text-muted);
    font-size: 0.8125rem;
  }
}


/* Hidden on screen, still read by screen readers. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  /* Takes no room: below a full-height app it would add a scrollbar. */
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Components */
/* Frosted glass over the glow: cards, the offline banner and the Sign out
   button (.button.glass, which outranks .button). Safari 17.5 needs the prefix. */
.card,
.offline-banner,
.button.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

.card {
  margin: 0;
  padding: 1rem;
}

h2,
h3 {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 600;
}

.field {
  display: grid;
  gap: 0.5rem;

  & label {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
  }

  & input,
  & select {
    width: 100%;
    min-height: 44px;
    padding: 0 0.75rem;
    color: var(--text);
    font: inherit;
    background: var(--field);
    border: 1px solid var(--field-border);
    border-radius: var(--control-radius);
  }

  & input[readonly] {
    color: var(--text-muted);
  }

  /* iOS Safari gives date fields a native look with a minimum width that
     overflows narrow cards, and centres the date. */
  & input[type='date'] {
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
  }

  & input[type='date']::-webkit-date-and-time-value {
    text-align: start;
  }
}

/* The user's picture, or their initial in a circle. */
.avatar {
  --size: 28px;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  object-fit: cover;
}

/* The download is 384px, over 5x this size; raise it in avatar.rs if this grows. */
.avatar-large {
  --size: 64px;

  @media (min-width: 768px) {
    --size: 72px;
  }
}

.avatar-monogram {
  color: var(--accent-text);
  font-size: calc(var(--size) * 0.45);
  font-weight: 700;
  line-height: 1;
  background: var(--accent-soft);
}

/* Account's fine print: the disclaimer, the privacy notice and terms, the version. */
.about {
  display: grid;
  gap: 0.75rem;
}

.app-version {
  margin: 0;
  font-size: 0.875rem;
  text-align: center;
}

.danger-zone {
  border-color: color-mix(in srgb, var(--error) 40%, transparent);
}

/* Account: the two columns' cards (on phones the first column, then the second). */
.account-column {
  display: grid;
  align-content: start;
  gap: var(--gap);
}

/* A card of setting rows: the label left, the value or switch right,
   separators between the rows, a hint under a row where it has one. */
.settings {
  display: grid;
  padding: 6px 16px;

  & h2 {
    padding: 10px 0 4px;
  }

  @media (min-width: 768px) {
    padding: 8px 20px;

    & h2 {
      padding: 12px 0 6px;
    }
  }
}

.setting {
  border-top: 1px solid var(--separator);
}

.setting-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;

  & label {
    flex: 1 1 auto;
    cursor: pointer;
  }

  @media (min-width: 768px) {
    min-height: 56px;
  }
}

.setting-hint {
  padding-bottom: 12px;
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* A native select shown as the row's value: muted, with an up/down chevron. */
.setting-select {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--text-muted);

  & select {
    min-height: 44px;
    padding: 0 26px 0 8px;
    color: inherit;
    font: inherit;
    text-align: end;
    text-align-last: end;
    background: none;
    border: none;
    border-radius: var(--control-radius);
    cursor: pointer;
    appearance: none;
  }

  &::after {
    content: "";
    position: absolute;
    right: 2px;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    mask: url("../icons/chevron-up-down.svg") center / contain no-repeat;
    pointer-events: none;
  }
}

/* A checkbox drawn as a switch. The knob is a background layer that slides
   over, so no pseudo-elements on the input are needed. */
.switch {
  flex: none;
  width: 51px;
  height: 31px;
  margin: 0;
  background:
    radial-gradient(circle, #ffffff 0 12.5px, rgb(0 0 0 / 0.14) 13px, transparent 14px) 0 0 / 31px 31px no-repeat,
    var(--switch-off);
  border-radius: 999px;
  cursor: pointer;
  appearance: none;
  transition: background-position 0.2s, background-color 0.2s;

  &:checked {
    background-color: var(--accent);
    background-position: 20px 0;
  }

  @media (prefers-reduced-motion: reduce) {
    transition: none;
  }

  /* High-contrast mode replaces background colours, which would hide the
     track and the knob: draw both in system colours instead. */
  @media (forced-colors: active) {
    forced-color-adjust: none;
    background:
      radial-gradient(circle, CanvasText 0 10.5px, transparent 11px) 0 0 / 31px 31px no-repeat,
      Canvas;
    border: 1px solid CanvasText;

    &:checked {
      background:
        radial-gradient(circle, HighlightText 0 10.5px, transparent 11px) 20px 0 / 31px 31px no-repeat,
        Highlight;
      border-color: Highlight;
    }
  }
}

.stack {
  display: grid;
  gap: 1rem;
}

.muted {
  margin: 0;
  color: var(--text-muted);
}

.error {
  margin: 0;
  color: var(--error);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.25rem;
  color: var(--on-accent);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--control-radius);
  cursor: pointer;

  &.secondary {
    color: var(--text);
    background: var(--field);
    border-color: var(--separator);
  }

  &.danger {
    color: var(--on-error);
    background: var(--error);
    border-color: var(--error);
  }

  /* Full width, glass like a card (see .card): Sign out. */
  &.glass {
    width: 100%;
    min-height: 52px;
    color: var(--accent-text);
    font-size: 1.0625rem;
  }

  /* The screen's main action: the quick action, signing in. */
  &.large {
    min-height: 50px;
    font-size: 1.0625rem;
    border-radius: 14px;
  }

  /* Less padding, same 44px touch height. */
  &.small {
    padding: 0 0.75rem;
  }
}

/* Controls that save are disabled while offline. */
:is(.button, .link-button, .flow-option, select, .switch):disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.offline-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  color: var(--text);
  /* Amber-tinted glass (see .card) */
  background: color-mix(in srgb, var(--follicular) 18%, var(--glass));
  border-color: color-mix(in srgb, var(--follicular) 45%, transparent);

  & p {
    flex: 1 1 16rem;
    margin: 0;
  }
}

/* A dialog (<dialog data-modal>, opened as a modal by app.js): a centred
   panel; on phones a sheet from the bottom. The page behind is dimmed. */
.dialog {
  width: min(600px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 1.5rem;
  color: var(--text);
  background: var(--dialog);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  box-shadow: var(--dialog-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);

  &::backdrop {
    background: var(--scrim);
  }

  @media (max-width: 767px) {
    width: 100%;
    max-height: 92dvh;
    margin: auto 0 0;
    padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    border-bottom: none;
    border-radius: 28px 28px 0 0;
  }
}

.dialog-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  & h2 {
    flex: 1;
    font-size: 1.375rem;
  }

  /* Pulled into the corner, so its round hover sits in the padding. */
  & .icon-button {
    margin: -0.5rem -0.5rem -0.5rem 0;
  }
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;

  /* Phones: two equal buttons across the sheet, pinned to its bottom edge
     while the rows scroll (out to the sheet's edges, over its padding). */
  @media (max-width: 767px) {
    position: sticky;
    /* Sticky stops at the sheet's padding; this takes it down over it. */
    bottom: calc(-1.25rem - env(safe-area-inset-bottom));
    margin: 0 -1.25rem calc(-1.25rem - env(safe-area-inset-bottom));
    padding: 0.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    /* Translucent like the sheet, so the text scrolling under it is blurred
       (solid, unblurred, with reduced transparency). */
    background: var(--dialog);
    border-top: 1px solid var(--separator);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);

    & .button {
      flex: 1;
    }
  }
}

/* "Add another ...": a dashed outline where the next row would go. */
.button.add-row {
  gap: 0.5rem;
  color: var(--accent-text);
  background: none;
  border: 1.5px dashed color-mix(in srgb, var(--accent) 45%, transparent);

  & .icon {
    width: 18px;
    height: 18px;
  }
}

/* Text-style button for low-emphasis row actions. */
.link-button {
  min-height: 44px;
  padding: 0 0.5rem;
  color: var(--accent-text);
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* Signed-out screens: one centered card, no nav. */
.main-centered {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 1.5rem 1rem;
}

.login-card {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 360px;
  padding: 1.5rem 1.25rem 1.25rem;
  text-align: center;

  & h1 {
    margin: 0;
    color: var(--accent);
  }
}

.login-logo {
  justify-self: center;
}

.login-terms {
  font-size: 0.8125rem;
}

/* The consent screen (after the first sign-in): like the login card, wider
   and left-aligned, since it's text to read. */
.consent-card {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 480px;
  padding: 1.5rem 1.25rem 1.25rem;

  & h1,
  & p {
    margin: 0;
  }
}

.consent-points {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.25rem;
}

/* The whole box is the checkbox's label, so it's one big touch target. */
.consent-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.75rem;
  padding: 0.875rem;
  background: var(--field);
  border: 1px solid var(--field-border);
  border-radius: 16px;
  cursor: pointer;

  & input {
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--accent);
  }
}

/* The privacy notice's and the terms' text, in a dialog or on its own page. */
.legal {
  display: grid;
  gap: 1.25rem;
  line-height: 1.5;

  & p,
  & ul {
    margin: 0;
  }

  & section {
    display: grid;
    gap: 0.5rem;
  }

  & ul {
    display: grid;
    gap: 0.375rem;
    padding-left: 1.25rem;
  }
}

.legal-contact {
  font-weight: 600;
}

/* The links to the privacy notice and the terms, side by side. */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.25rem;
  margin: 0;
  font-size: 0.875rem;

  .consent-card & {
    justify-content: start;
  }
}

/* The privacy notice and the terms as pages of their own (/privacy, /terms). */
.legal-page {
  display: grid;
  gap: var(--gap);
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
}

.legal-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-self: start;
  min-height: 44px;
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 700;
  text-decoration: none;
}

.legal-card {
  padding: 1.5rem 1.25rem;
}

/* The title, and the language select at the card's right end (on a line of
   its own, still on the right, when a long title needs the whole width). */
.legal-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  margin-bottom: 1rem;

  & h1 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 1.75rem;
  }

  & .setting-select {
    margin-left: auto;
  }
}

/* A link inside text (opens the privacy notice or the terms).
   Inline, so it's exempt from the 44px target like any text link. */
.inline-link {
  padding: 0;
  color: var(--accent-text);
  font: inherit;
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
}

/* Forms */
.form-row {
  display: grid;
  gap: 1rem;

  @media (min-width: 480px) {
    grid-template-columns: 1fr 1fr;
  }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* The header under the title (views/hero.js): the key value, big, and two
   plain lines. Phone: the lines under the value; desktop: to its right,
   bottom-aligned with it. */
.hero {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: -2px 0 22px;

  & p {
    margin: 0;
  }

  @media (min-width: 768px) {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px 24px;
    margin: -10px 0 24px;
  }
}

.hero-value {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -1px;

  @media (min-width: 768px) {
    font-size: 4rem;
    line-height: 1.0625;
    letter-spacing: -1.5px;
  }
}

/* A value in words ("Cycle day 28") is longer than a number: smaller on
   phones, and when it wraps (Hungarian), into two even lines. */
.hero-value-words {
  font-size: 2.75rem;
  line-height: 1.14;
  letter-spacing: -0.5px;
  text-wrap: balance;

  @media (min-width: 768px) {
    font-size: 4rem;
    line-height: 1.0625;
    letter-spacing: -1.5px;
  }
}

/* A person's name, next to their picture (Account). */
.hero-value-name {
  font-size: 1.75rem;
  line-height: 1.21;
  letter-spacing: -0.3px;
  overflow-wrap: anywhere;

  @media (min-width: 768px) {
    font-size: 3rem;
    line-height: 1.17;
    letter-spacing: -1px;
  }
}

/* The header with a picture: picture left, the name and lines beside it. */
.hero-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: -2px 0 22px;

  & .hero {
    flex: 1 1 auto;
    min-width: 0;
    gap: 2px;
    margin: 0;
  }

  @media (min-width: 768px) {
    gap: 20px;
    margin: -6px 0 24px;

    & .hero {
      gap: 2px 24px;
    }
  }
}

.hero-unit {
  color: var(--text-muted);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;

  @media (min-width: 768px) {
    font-size: 1.625rem;
  }
}

/* The lines can hold user data (an email address): let long words break
   instead of widening the page. */
.hero-lines {
  display: grid;
  gap: 2px;
  overflow-wrap: anywhere;

  @media (min-width: 768px) {
    padding-bottom: 10px;
  }
}

.hero-line1 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.hero-line2 {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.33;
}

/* A screen's cards. On phones one column; on wide screens the main card
   (chart, calendar) on the left and a 360px column on the right. Each
   screen places its cards (e.g. .weight-columns). */
.columns {
  display: grid;
  gap: var(--gap);

  @media (min-width: 1280px) {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
  }
}

/* Cycle: the calendar on the left; the quick action, the events and the
   disclaimer on the right at their natural height. The last row takes the
   calendar's extra height, so it doesn't spread gaps between the side cards.
   Without a quick action the side cards just move up a row. */
@media (min-width: 1280px) {
  .cycle-columns {
    grid-template-rows: auto auto auto 1fr;
  }

  .cycle-main {
    grid-column: 1;
    grid-row: 1 / -1;
  }

  .cycle-columns > :not(.cycle-main) {
    grid-column: 2;
  }

  /* One event per row in the narrow column. */
  .cycle-columns .events {
    grid-template-columns: none;
  }

  /* Bigger day cells; the markers scale with the grid (see .calendar-day). */
  .cycle-main {
    & .calendar-weekdays,
    & .calendar-grid {
      gap: 6px;
    }

    & .calendar-day {
      aspect-ratio: auto;
      height: 64px;
      border-radius: 16px;
    }
  }

  /* The selected day in one row: its text left, the actions right. When the
     actions don't fit next to at least 12rem of text (e.g. the delete
     confirmation), they wrap under it. The flow picker and errors follow. */
  .day-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 16px;

    & > * {
      flex: 1 1 100%;
      order: 2;
    }

    & > .day-panel-text {
      flex: 1 1 12rem;
      order: 0;
    }

    & > .actions {
      flex: 0 1 auto;
      order: 1;
      margin-left: auto;
      justify-content: flex-end;
    }
  }
}

/* Weight: the chart on the left across both rows; the form and the history
   on the right. The history ends level with the chart and scrolls inside:
   `contain: size` keeps its length from stretching the rows. */
@media (min-width: 1280px) {
  .weight-columns {
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "main form"
      "main history";
  }

  .weight-main {
    grid-area: main;

    /* Wide: the range switch sits top right, at most 380px. */
    & .segmented {
      justify-self: end;
      width: min(380px, 100%);
    }
  }

  .weight-form {
    grid-area: form;
  }

  .weight-history {
    display: flex;
    flex-direction: column;
    grid-area: history;
    align-self: stretch;
    min-height: 15rem;
    contain: size;

    & .entry-list {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      scrollbar-width: thin;
    }
  }
}

/* Segmented control (range switcher) */
.segmented {
  display: flex;
  padding: 3px;
  background: var(--segmented);
  border-radius: 13px;

  & button {
    flex: 1;
    min-height: 44px;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    background: none;
    border: none;
    border-radius: 10px;
    cursor: pointer;

    &[aria-pressed="true"] {
      color: var(--text);
      font-weight: 600;
      background: var(--segmented-active);
      box-shadow: var(--segmented-shadow);
    }
  }
}

/* Chart: SVG lines stretched to the plot; labels and dots are HTML on top. */
.chart {
  margin: 0;
}

.chart-plot {
  position: relative;
  height: 200px;
  margin: 0.5rem 0 0 3.25rem;

  @media (min-width: 1280px) {
    height: 340px;
  }

  & svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
}

.chart-grid {
  stroke: var(--separator);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.chart-line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;

  @media (min-width: 1280px) {
    stroke-width: 3.5;
  }
}

.chart-tick {
  position: absolute;
  right: 100%;
  padding-right: 0.5rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  white-space: nowrap;
  transform: translateY(-50%);
}

/* Weigh-ins: quieter than the trend line, which is what to read. */
.chart-dot,
.chart-legend-dot {
  width: 6px;
  height: 6px;
  background: var(--chart-dot);
  border-radius: 50%;
}

@media (min-width: 1280px) {
  .chart-dot,
  .chart-legend-dot {
    width: 7px;
    height: 7px;
  }
}

.chart-dot {
  position: absolute;
  transform: translate(-50%, -50%);
}

.chart-axis {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0 0 3.25rem;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 1rem;
  margin: 0.75rem 0 0 3.25rem;
  padding: 0;
  color: var(--text-muted);
  font-size: 0.8125rem;
  list-style: none;

  & li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }
}

.chart-legend-line {
  width: 16px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

/* History list */
.entry-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
  padding: 0.25rem 0;
  border-top: 1px solid var(--separator);

  &:first-child {
    border-top: none;
  }
}

.entry-date {
  flex: 1;
  min-width: 7rem;
  color: var(--text-muted);
}

.entry-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.entry-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
}

/* --- Cycle screen ------------------------------------------------------- */

.quick-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;

  & .button {
    flex: 1 1 auto;
  }

  & .icon {
    width: 20px;
    height: 20px;
    margin-right: 0.5rem;
  }
}

.quick-action-label {
  flex: 1 1 auto;
  padding-left: 6px;
  font-size: 1.0625rem;
  font-weight: 600;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--text);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

/* Calendar */
.calendar-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.calendar-title {
  flex: 1;
  margin: 0;
  font-size: 1.125rem;

  /* Hungarian month names are lowercase. */
  &::first-letter {
    text-transform: uppercase;
  }
}

.calendar-weekdays,
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

/* Day contents scale with the grid width (cqi = 1% of it), so markers stay in
   proportion from phone to desktop. */
.calendar-grid {
  container-type: inline-size;
}

.calendar-weekdays {
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: center;
}

.calendar-day {
  /* About a fifth of a day's width: 11px on phones, up to 20px on desktop. */
  --marker-size: clamp(11px, 3cqi, 20px);

  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  /* 44px tall even where seven columns leave less width. Through the aspect
     ratio that would also make it 44px wide, and seven of those don't fit a
     phone: min-width lets the columns shrink, width fills one. */
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  color: var(--text);
  font: inherit;
  font-variant-numeric: tabular-nums;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--control-radius);
  cursor: pointer;

  &.is-future {
    color: var(--text-muted);
  }

  /* Background = phase. Each day has exactly one of these classes. Menstrual
     days are always logged or predicted bleeding, styled below. */
  &.phase-follicular {
    color: var(--text);
    background: var(--follicular-soft);
  }

  &.phase-ovulation {
    color: var(--on-fertile);
    font-weight: 700;
    background: var(--fertile);
  }

  &.phase-luteal {
    color: var(--text);
    background: var(--luteal-soft);
  }

  &.is-predicted-period {
    color: var(--text);
    background: var(--period-soft);
    border: 2px dashed var(--period);
  }

  /* Logged bleeding: stronger colour for stronger flow. */
  &.is-period {
    color: var(--on-period);
    font-weight: 600;
    background: color-mix(in srgb, var(--period) var(--flow-strength, 70%), transparent);
  }
  &.flow-1 { --flow-strength: 30%; color: var(--text); }
  &.flow-2 { --flow-strength: 50%; color: var(--text); }
  &.flow-3 { --flow-strength: 70%; }
  &.flow-4 { --flow-strength: 85%; }
  &.flow-5 { --flow-strength: 100%; }

  &.is-today .calendar-date {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }

  /* An outline leaves a see-through gap; a box-shadow ring would need a fill
     colour, and nothing matches the glass behind it. */
  &[aria-pressed="true"] {
    outline: 2px solid var(--text);
    outline-offset: 2px;
  }
}

/* Fertility marker: one sprout (fertile) or two (high fertility),
   on its own layer above the phase colour. */
.calendar-marker {
  display: flex;
  gap: 1px;
  color: var(--fertile);

  & .icon {
    width: 11px;
    height: 11px;
  }

  .calendar-day & {
    position: absolute;
    bottom: calc(var(--marker-size) / 4);
    gap: calc(var(--marker-size) / 8);
  }

  .calendar-day & .icon {
    width: var(--marker-size);
    height: var(--marker-size);
  }

  /* On the ovulation day's solid background. */
  .phase-ovulation & {
    color: var(--on-fertile);
  }

  /* On bleeding days (short cycles), a thin outline keeps the teal readable on
     rose. --on-period contrasts with the period colour in both themes. */
  .is-period & {
    filter: drop-shadow(0 0 1px var(--on-period)) drop-shadow(0 0 1px var(--on-period));
  }
}

/* Make room for the marker below the date. */
.calendar-day.has-marker .calendar-date {
  margin-bottom: calc(var(--marker-size) * 0.8);
}

.legend {
  display: grid;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.8125rem;

  & ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
  }
}

.legend-group {
  display: grid;
  gap: 0.25rem;
}

.legend-title {
  color: var(--text);
  font-weight: 600;
}

.legend-swatch {
  width: 14px;
  height: 14px;
  border: 2px solid transparent;
  border-radius: 4px;

  &.is-period { background: var(--period); }
  &.is-predicted-period { background: var(--period-soft); border: 2px dashed var(--period); }
  &.phase-follicular { background: var(--follicular-soft); }
  &.phase-ovulation { background: var(--fertile); }
  &.phase-luteal { background: var(--luteal-soft); }
}

/* Selected day */
.day-panel {
  padding-top: 1rem;
  border-top: 1px solid var(--separator);
  /* The flow picker's layout depends on the panel's width (see .flow-options). */
  container-type: inline-size;
}

.day-panel-text {
  display: grid;
  gap: 2px;
}

.day-panel-title::first-letter {
  text-transform: uppercase;
}

.flow-picker {
  margin: 0;
  padding: 0;
  border: none;

  & legend {
    margin-bottom: 0.5rem;
    padding: 0;
    font-weight: 600;
  }
}

/* Five equal buttons in a row where the longest label fits ("Pecsételő",
   about 51px when selected: (304 - 4 gaps) / 5 - padding and border = 51.6);
   narrower than that (360px phones and below), 3 + 2. Equal columns, so no
   button shrinks below its share. */
.flow-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;

  @container (min-width: 304px) {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.flow-option {
  display: grid;
  place-items: center;
  gap: 2px;
  min-height: 56px;
  padding: 0.25rem 2px;
  color: var(--text);
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.2;
  /* Never wider than its column, even with a longer translation. */
  overflow-wrap: anywhere;
  background: var(--field);
  border: 1px solid var(--field-border);
  border-radius: var(--control-radius);
  cursor: pointer;

  &[aria-pressed="true"] {
    font-weight: 600;
    background: var(--period-soft);
    border-color: var(--period);
  }
}

.flow-drops {
  color: var(--period);
  font-size: 0.5rem;
  letter-spacing: 1px;
}

.confirm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* Event cards: a coloured icon bubble per kind of event. */
.events {
  display: grid;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;

  @media (min-width: 640px) {
    grid-template-columns: 1fr 1fr;
  }
}

.event {
  --kind: var(--accent);
  --kind-soft: var(--accent-soft);
  display: flex;
  align-items: flex-start;
  gap: 1rem;

  & p {
    margin: 0;
  }
}

.event-period,
.event-phase-menstrual {
  --kind: var(--period);
  --kind-soft: var(--period-soft);
}

.event-fertile,
.event-ovulation,
.event-phase-ovulation {
  --kind: var(--fertile);
  --kind-soft: var(--fertile-soft);
}

.event-phase-follicular {
  --kind: var(--follicular);
  --kind-soft: var(--follicular-soft);
}

.event-phase-luteal {
  --kind: var(--luteal);
  --kind-soft: var(--luteal-soft);
}

.event-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--kind);
  background: var(--kind-soft);
  border-radius: 50%;
}

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

.disclaimer {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.875rem;

  & .icon {
    width: 18px;
    height: 18px;
    margin-top: 2px;
  }
}

/* Add past periods: the card (with fewer than 3 periods logged) and the
   dialog's rows. The card's icon bubble is the event cards' one. */
.history-prompt {
  --kind: var(--accent);
  --kind-soft: var(--accent-soft);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;

  & h2 {
    margin-bottom: 2px;
  }

  & .button {
    grid-column: 1 / -1;
  }
}

.history-rows {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
  padding: 12px 6px 12px 12px;
  background: var(--field);
  border: 1px solid var(--field-border);
  border-radius: 16px;

  &.has-error {
    background: color-mix(in srgb, var(--error) 6%, var(--field));
    border-color: color-mix(in srgb, var(--error) 45%, transparent);
  }

  /* The hint or error under the dates. */
  & p {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
  }
}

/* The two dates side by side where they fit (a date field needs about 9.5rem),
   else one above the other. */
.history-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 10px;
}

/* Hover, for mice only. A control gets a light tint over its own background,
   so one rule works on every colour (accent, glass, a calendar day's phase)
   in both themes. */
@media (hover: hover) {
  :is(.button, .segmented button, .flow-option, .calendar-day, .icon-button):not(:disabled):hover {
    background-image: linear-gradient(var(--hover), var(--hover));
  }

  .link-button:not(:disabled):hover {
    text-decoration: underline;
  }

  /* Not the current page's: it keeps its accent colour. */
  .nav-link:not([aria-current="page"]):hover {
    color: var(--text);
  }
}