/* ==========================================================================
   GlucoLog theme: the tokens and primitives shared by every page that uses
   the new design language (landing, login, register, password reset).

   Colour: one accent (cobalt) for anything the user can act on, one data
   green for "in range", ink on warm paper for everything else.
   Radius: surfaces 20px, inner elements 12px, controls are pills.

   Theme resolution, in order:
     1. html[data-theme="light" | "dark"] - an explicit choice, stored by
        main/js/theme.js and applied before first paint.
     2. prefers-color-scheme - the system setting, when no choice is stored.
   ========================================================================== */

:root {
  /* palettes */
  --paper-l: #f6f5f2;
  --paper-2-l: #eeece7;
  --surface-l: #fdfdfb;
  --ink-l: #14161a;
  --ink-2-l: #565c66;
  --ink-3-l: #787f8a;
  --line-l: rgba(20, 22, 26, 0.12);
  --line-soft-l: rgba(20, 22, 26, 0.07);
  --accent-l: #1f4bd8;
  --accent-hover-l: #17389f;
  --accent-ink-l: #ffffff;
  --accent-soft-l: rgba(31, 75, 216, 0.08);
  --range-l: #12775a;
  --range-soft-l: rgba(18, 119, 90, 0.13);
  --warn-l: #9c5f0d;
  --warn-soft-l: rgba(156, 95, 13, 0.1);
  --danger-l: #b3261e;
  --danger-soft-l: rgba(179, 38, 30, 0.08);
  --shadow-sm-l: 0 1px 2px rgba(20, 22, 26, 0.05);
  --shadow-lg-l: 0 1px 2px rgba(20, 22, 26, 0.04), 0 22px 48px -24px rgba(20, 22, 26, 0.28);

  --paper-d: #0e1013;
  --paper-2-d: #14171c;
  --surface-d: #171a20;
  --ink-d: #edeff3;
  --ink-2-d: #a4abb6;
  --ink-3-d: #838b96;
  --line-d: rgba(255, 255, 255, 0.13);
  --line-soft-d: rgba(255, 255, 255, 0.07);
  --accent-d: #7f9dff;
  --accent-hover-d: #9db4ff;
  --accent-ink-d: #0c0f14;
  --accent-soft-d: rgba(127, 157, 255, 0.13);
  --range-d: #40d2a2;
  --range-soft-d: rgba(64, 210, 162, 0.14);
  --warn-d: #e0a349;
  --warn-soft-d: rgba(224, 163, 73, 0.14);
  --danger-d: #ff9a92;
  --danger-soft-d: rgba(255, 154, 146, 0.13);
  --shadow-sm-d: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lg-d: 0 1px 2px rgba(0, 0, 0, 0.45), 0 24px 56px -26px rgba(0, 0, 0, 0.85);

  /* light is the default binding */
  --paper: var(--paper-l);
  --paper-2: var(--paper-2-l);
  --surface: var(--surface-l);
  --ink: var(--ink-l);
  --ink-2: var(--ink-2-l);
  --ink-3: var(--ink-3-l);
  --line: var(--line-l);
  --line-soft: var(--line-soft-l);
  --accent: var(--accent-l);
  --accent-hover: var(--accent-hover-l);
  --accent-ink: var(--accent-ink-l);
  --accent-soft: var(--accent-soft-l);
  --range: var(--range-l);
  --range-soft: var(--range-soft-l);
  --warn: var(--warn-l);
  --danger: var(--danger-l);
  --danger-soft: var(--danger-soft-l);
  --warn-soft: var(--warn-soft-l);
  --shadow-sm: var(--shadow-sm-l);
  --shadow-lg: var(--shadow-lg-l);

  color-scheme: light;

  --r-lg: 20px;
  --r-md: 12px;
  --r-pill: 999px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --maxw: 1160px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: var(--paper-d);
    --paper-2: var(--paper-2-d);
    --surface: var(--surface-d);
    --ink: var(--ink-d);
    --ink-2: var(--ink-2-d);
    --ink-3: var(--ink-3-d);
    --line: var(--line-d);
    --line-soft: var(--line-soft-d);
    --accent: var(--accent-d);
    --accent-hover: var(--accent-hover-d);
    --accent-ink: var(--accent-ink-d);
    --accent-soft: var(--accent-soft-d);
    --range: var(--range-d);
    --range-soft: var(--range-soft-d);
    --warn: var(--warn-d);
    --danger: var(--danger-d);
    --danger-soft: var(--danger-soft-d);
    --warn-soft: var(--warn-soft-d);
    --shadow-sm: var(--shadow-sm-d);
    --shadow-lg: var(--shadow-lg-d);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: var(--paper-d);
  --paper-2: var(--paper-2-d);
  --surface: var(--surface-d);
  --ink: var(--ink-d);
  --ink-2: var(--ink-2-d);
  --ink-3: var(--ink-3-d);
  --line: var(--line-d);
  --line-soft: var(--line-soft-d);
  --accent: var(--accent-d);
  --accent-hover: var(--accent-hover-d);
  --accent-ink: var(--accent-ink-d);
  --accent-soft: var(--accent-soft-d);
  --range: var(--range-d);
  --range-soft: var(--range-soft-d);
  --warn: var(--warn-d);
  --danger: var(--danger-d);
  --danger-soft: var(--danger-soft-d);
  --warn-soft: var(--warn-soft-d);
  --shadow-sm: var(--shadow-sm-d);
  --shadow-lg: var(--shadow-lg-d);

  color-scheme: dark;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  text-wrap: balance;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--accent-soft);
}

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* Two very soft washes so the paper is not flat. Fixed and pointer-inert, so
   it never repaints during scroll. */
.ambience {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 78% -8%, var(--accent-soft), transparent 68%),
    radial-gradient(38rem 26rem at 4% 32%, var(--range-soft), transparent 70%);
}

/* -------------------------------- topbar --------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 68px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.topbar.is-stuck {
  background: var(--paper); /* fallback where color-mix is unsupported */
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom-color: var(--line-soft);
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* the brand mark is the target-range band, reduced to a single dot */
.brand-mark {
  width: 12px;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.menu {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.9vw, 1.5rem);
  font-size: 0.94rem;
  white-space: nowrap;
}

.menu > a:not(.btn) {
  color: var(--ink-2);
  padding-block: 0.35rem;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: color 0.25s var(--ease), background-size 0.35s var(--ease);
}

.menu > a:not(.btn):hover {
  color: var(--ink);
  background-size: 100% 1.5px;
}

.menu-btn {
  display: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.45rem 1rem;
  cursor: pointer;
}

/* Watched by the topbar: while this strip is in view the page is at the top,
   so the bar stays transparent. */
.top-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 68px;
  pointer-events: none;
}

/* -------------------------- segmented controls ---------------------------- */
/* Used for the theme switch and the unit switch, so both read as the same
   kind of control. */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--paper-2);
  border-radius: var(--r-pill);
}

.segmented button {
  font: inherit;
  font-size: 0.84rem;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: color 0.25s var(--ease), background 0.25s var(--ease);
}

.segmented button[aria-pressed="true"] {
  color: var(--accent-ink);
  background: var(--accent);
}

.segmented button:hover:not([aria-pressed="true"]) {
  color: var(--ink);
}

/* ----------------------------- theme switch ------------------------------ */
/* A two-state switch: sun on the left, moon on the right, thumb slides. */
/* Bare `button { ... }` rules in the app stylesheets would otherwise paint a
   filled box behind the switch, so hold the reset through every state. */
.theme-switch,
.theme-switch:hover,
.theme-switch:active,
.theme-switch:focus {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  cursor: pointer;
  line-height: 0;
}

.theme-switch-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  width: 58px;
  height: 30px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
}

.theme-icon {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  color: var(--ink-3);
  transition: color 0.25s var(--ease);
}

:root[data-theme="light"] .theme-switch .is-sun,
:root[data-theme="dark"] .theme-switch .is-moon,
.theme-switch[aria-checked="false"] .is-sun,
.theme-switch[aria-checked="true"] .is-moon {
  color: var(--accent-ink);
}

.theme-switch-thumb {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: var(--r-pill);
  background: var(--accent);
  box-shadow: var(--shadow-sm);
  transition: transform 0.28s var(--ease);
}

:root[data-theme="dark"] .theme-switch-thumb,
.theme-switch[aria-checked="true"] .theme-switch-thumb {
  transform: translateX(28px);
}

:root[data-theme="light"] .theme-switch-thumb {
  transform: none;
}

.theme-switch:hover .theme-switch-track {
  border-color: var(--line);
}

.theme-switch:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-pill);
}

.theme-switch:active .theme-switch-thumb {
  width: 26px;
}

/* -------------------------------- buttons -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  font: inherit;
  font-size: 0.98rem;
  font-weight: 500;
  padding: 0.8rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
    border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn-sm {
  font-size: 0.9rem;
  padding: 0.5rem 1.05rem;
}

.btn-full {
  width: 100%;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--accent-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-quiet {
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
}

.btn-quiet:hover {
  border-color: var(--ink-3);
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(1px);
}

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

/* --------------------------------- forms --------------------------------- */
/* Label above the input, help text under the label, error under the field. */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field > label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
}

.field-help {
  font-size: 0.8rem;
  color: var(--ink-2);
}

.field input,
.field select,
.field textarea {
  font: inherit;
  width: 100%;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

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

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-errors {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.84rem;
  color: var(--danger);
}

.field.has-error input,
.field.has-error select {
  border-color: var(--danger);
}

.form-errors {
  margin: 0 0 1.25rem;
  padding: 0.85rem 1rem;
  list-style: none;
  font-size: 0.9rem;
  color: var(--danger);
  background: var(--surface);
  border: 1px solid var(--danger);
  border-radius: var(--r-md);
}

/* ----------------------------- reduced motion ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}

/* ------------------------------- responsive ------------------------------ */
@media (max-width: 860px) {
  .menu-btn {
    display: inline-flex;
  }

  /* A full-screen drawer, not a small dropdown: at phone widths there isn't
     room for a card floating over the hero, and a short card left the hero's
     own "Create account"/"Sign in" buttons visible (and overlapping) right
     behind it. Fixed to the viewport, below the topbar, with its own scroll,
     so every item is reachable without the page needing to zoom or scroll. */
  .menu {
    position: fixed;
    inset: 68px 0 0 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    margin: 0;
    padding: 1rem var(--gutter) 1.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }

  .menu.open {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  /* Stops the page from scrolling behind the open drawer. `:has()` covers
     modern browsers; `.nav-open` (toggled in script.js) is the fallback. */
  html:has(#menu.open),
  html.nav-open {
    overflow: hidden;
  }

  .menu > a:not(.btn) {
    padding: 0.65rem 0.75rem;
    background-size: 0 0;
  }

  .menu .theme-switch {
    align-self: flex-start;
    margin: 0.35rem 0.25rem;
  }

  .menu .btn {
    margin-top: 0.25rem;
    padding-block: 0.7rem;
  }
}