:root {
  --app-css-loaded: 1; /* checked by the asset-failure guard in the layout */
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-title: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-family: var(--font-body);
  font-synthesis: none;

  /* Colour tokens. These are the "Original" theme values; the Colors
     settings page overrides them through an inline :root block rendered by
     the layout (see inrange::Themes). Every other colour in this file is
     derived from these tokens with color-mix(), so presets and custom colours
     re-tint the whole interface consistently. */

  /* Page & surfaces */
  --blue-bg: #334c6a;          /* page background */
  --violet: #7971a4;           /* card gradient start, background glow */
  --violet-deep: #7a5f8f;      /* card gradient middle */
  --plum: #845578;             /* card gradient end */
  --navy: #102236;             /* dark surfaces: alternate cards, menu */
  --navy-soft: #223246;        /* dark surface gradient end */
  --light-panel: #e1eaf3;      /* light workflow panels */
  --mist: #e8e2f1;             /* borders & dividers */
  --shadow-color: #091523;     /* shadows & overlays */
  --status-surface: #ffffff;  /* pale status badge background */
  --sheen: #ffffff;            /* subtle highlights (internal) */

  /* Text */
  --title-color: #f5f2f7;      /* page titles (h1) */
  --heading-color: #f5f2f7;    /* section titles (h2/h3) */
  --muted: #d4cfdf;            /* subtitles & descriptions */
  --paper: #f5f2f7;            /* base for derived light tones (internal) */
  --text-strong: #ffffff;      /* emphasis, hover and active text */
  --link: #ddd7ec;             /* links */
  --card-heading-color: #f5f2f7; /* coloured cards: titles */
  --card-text: #f5f2f7;        /* coloured cards: text */
  --card-muted: #d4cfdf;       /* coloured cards: secondary text */
  --card-accent-text: #aea9c6; /* coloured cards: small labels */
  --card-strong: #ffffff;      /* coloured cards: emphasis text */
  --card-link: #ddd7ec;        /* coloured cards: links */
  --text: #f5f2f7;             /* regular text in cards, tables, charts */
  --subtitle-color: #d4cfdf;   /* line under the page title */
  --accent-text: #aea9c6;      /* small coloured panel labels */
  --label-color: #f5f2f7;      /* form field labels */
  --nav-text: #ddd7e9;         /* quick-input bar and menu links */
  --table-head: #ddd7e9;       /* table column headers */
  --field-border: #f5f2f7;     /* input borders (used at partial opacity) */

  /* Controls */
  --field: #e0dcec;            /* input background */
  --ink: #152237;              /* input text, text on light panels */
  --lavender: #aea9c6;         /* accent: focus, selection, highlights */
  --highlight-text: #152237;
  --button-bg: #102236;
  --button-bg-end: #223246;
  --button-text: #ffffff;

  /* Status */
  --success: #29694d;
  --warning: #9d701b;
  --danger: #913d3d;
  --rose: #e79ead;             /* soft alert highlight */
  --info: #1d4f78;

  /* Data series (charts, legends) */
  --series-bg: #7971a4;
  --series-basal: #aea9c6;
  --food-bolus: #845578;
  --correction-bolus: #b57686;
  --fast-carbs: #b9899d;
  --food-carbs: #b7a58a;
  --activity: #c3bbd7;
  --series-context: #845578;

  /* Derived (literal fallbacks; re-derived from tokens in the @supports
     block at the end of this file). */
  --grid: rgba(214, 207, 225, .24);
  --border: rgba(232, 226, 241, .23);
  --shadow: rgba(9, 21, 35, .22);

  color: var(--text);
  background: var(--blue-bg);
}

* { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, h4, h5, h6, .pv-title, .pv-card-title { font-family: var(--font-title); }
html {
  min-height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background: var(--blue-bg);
}
body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  position: relative;
  color: var(--text);
  background:
    radial-gradient(circle at 86% 8%, rgba(121, 113, 164, .24), transparent 27rem),
    linear-gradient(145deg, #334c6a 0%, #304965 55%, #2c435d 100%);
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--violet) 24%, transparent), transparent 27rem),
    linear-gradient(145deg, var(--blue-bg) 0%, color-mix(in oklab, var(--blue-bg) 92.5%, var(--navy)) 55%, color-mix(in oklab, var(--blue-bg) 79%, var(--navy)) 100%);
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--text-strong); text-decoration: none; }

.menu-anchor {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  z-index: 900;
}
.menu-toggle {
  position: relative;
  z-index: 903;
  display: grid;
  place-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(232, 226, 241, .26);
  border: 1px solid color-mix(in srgb, var(--mist) 26%, transparent);
  border-radius: 14px;
  background: rgba(16, 34, 54, .94);
  background: color-mix(in srgb, var(--navy) 94%, transparent);
  box-shadow: 0 10px 28px rgba(9, 21, 35, .28);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-color) 28%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  touch-action: manipulation;
}
.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 99px;
  background: var(--paper);
  transition: transform .17s ease, opacity .17s ease;
}
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.menu-toggle:focus-visible {
  outline: 3px solid rgba(174, 169, 198, .46);
  outline: 3px solid color-mix(in srgb, var(--lavender) 46%, transparent);
  outline-offset: 2px;
}
.menu-scrim {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(6, 16, 27, .38);
  background: color-mix(in srgb, color-mix(in oklab, var(--shadow-color) 88%, black) 38%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.menu-scrim[hidden], .menu-panel[hidden] { display: none; }
.menu-panel {
  position: fixed;
  z-index: 902;
  top: calc(max(12px, env(safe-area-inset-top)) + 58px);
  right: max(12px, env(safe-area-inset-right));
  width: min(310px, calc(100vw - 24px));
  max-height: calc(100vh - 90px - env(safe-area-inset-bottom));
  overflow-y: auto;
  padding: 14px;
  border: 1px solid rgba(232, 226, 241, .25);
  border: 1px solid color-mix(in srgb, var(--mist) 25%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 90% 0%, rgba(121, 113, 164, .20), transparent 13rem),
    linear-gradient(145deg, rgba(23, 43, 66, .99), rgba(16, 34, 54, .99));
  background:
    radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 13rem),
    linear-gradient(145deg, color-mix(in srgb, color-mix(in oklab, var(--navy) 77.5%, var(--blue-bg)) 99%, transparent), color-mix(in srgb, var(--navy) 99%, transparent));
  box-shadow: 0 24px 64px rgba(5, 15, 26, .44);
  box-shadow: 0 24px 64px color-mix(in srgb, color-mix(in oklab, var(--shadow-color) 85.5%, black) 44%, transparent);
  -webkit-overflow-scrolling: touch;
}
.menu-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 2px 8px;
  padding: 7px 9px 10px;
  border-bottom: 1px solid rgba(232, 226, 241, .11);
  border-bottom: 1px solid color-mix(in srgb, var(--mist) 11%, transparent);
  color: rgba(232, 226, 241, .62);
  color: color-mix(in srgb, var(--mist) 62%, transparent);
  font-size: .75rem;
  line-height: 1;
}
.menu-version-name {
  min-width: 0;
  font-weight: 700;
  letter-spacing: .02em;
}
.menu-version-badge {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid rgba(232, 226, 241, .15);
  border: 1px solid color-mix(in srgb, var(--mist) 15%, transparent);
  border-radius: 999px;
  background: rgba(174, 169, 198, .08);
  background: color-mix(in srgb, var(--lavender) 8%, transparent);
  color: rgba(255, 255, 255, .82);
  color: color-mix(in srgb, var(--text-strong) 82%, transparent);
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.menu-section-label {
  padding: 6px 10px 5px;
  color: #aaa4bc;
  color: color-mix(in oklab, var(--lavender) 95%, var(--blue-bg));
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.menu-section-spaced { margin-top: 9px; }
.menu-link {
  display: block;
  padding: 12px 12px;
  border-radius: 11px;
  color: var(--nav-text);
  font-weight: 720;
  transition: background .14s ease, color .14s ease, transform .14s ease;
}
.menu-link:hover,
.menu-link:focus-visible {
  color: var(--text-strong);
  background: rgba(174, 169, 198, .11);
  background: color-mix(in srgb, var(--lavender) 11%, transparent);
  outline: none;
}
.menu-link.active {
  color: var(--highlight-text);
  background: var(--lavender);
  box-shadow: inset 0 0 0 1px var(--lavender);
}
.menu-link:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
.menu-logout-form {
  margin: 13px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(232, 226, 241, .14);
  border-top: 1px solid color-mix(in srgb, var(--mist) 14%, transparent);
}
.menu-logout {
  width: 100%;
  min-height: 43px;
  border: 1px solid rgba(232, 226, 241, .18);
  border: 1px solid color-mix(in srgb, var(--mist) 18%, transparent);
  border-radius: 11px;
  background: rgba(132, 85, 120, .18);
  background: color-mix(in srgb, var(--plum) 18%, transparent);
  color: var(--mist);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.menu-logout:hover,
.menu-logout:focus-visible { background: rgba(132, 85, 120, .31); background: color-mix(in srgb, var(--plum) 31%, transparent); outline: none; }
body.navigation-open { overflow: hidden; }

.page-shell { width: min(1080px, calc(100% - 28px)); max-width: 100%; margin: 30px auto 60px; }
.authenticated-shell { margin-top: 78px; }
.login-shell { min-height: 80vh; display: grid; place-items: center; }
.page-heading { margin-bottom: 18px; }
h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin: 0 0 5px; letter-spacing: -.02em; color: var(--title-color); }
h2 { font-size: 1.15rem; margin: 0 0 16px; }
h2, h3 { color: var(--heading-color); }
/* Light surfaces keep their headings in the surface's own dark text colour. */
.alert.success, .basal-test-status, .basal-test-warning, .basal-test-bg-form,
.basal-test-segment-option.is-selected, .basal-test-auto-segment-note,
.basal-test-check-text, .basal-test-method-note, .update-mode-banner,
.ic-test-period-preview, .ic-test-step, .ic-test-final-form {
  --heading-color: currentColor;
  --title-color: currentColor;
  --label-color: currentColor;
}
.muted { color: var(--muted); margin: 0; }
.page-heading .muted { color: var(--subtitle-color); }

.card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: linear-gradient(145deg, rgba(121, 113, 164, .94), rgba(122, 95, 143, .94) 48%, rgba(132, 85, 120, .94));
  background: linear-gradient(145deg, color-mix(in srgb, var(--violet) 94%, transparent), color-mix(in srgb, var(--violet-deep) 94%, transparent) 48%, color-mix(in srgb, var(--plum) 94%, transparent));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 12px 34px var(--shadow);
  margin-bottom: 20px;
  overflow: hidden;
}
.card:nth-of-type(even) {
  background: linear-gradient(145deg, rgba(16, 34, 54, .98), rgba(34, 50, 70, .98));
  background: linear-gradient(145deg, color-mix(in srgb, var(--navy) 98%, transparent), color-mix(in srgb, var(--navy-soft) 98%, transparent));
}
.login-card { width: min(460px, 100%); }

.entry-form label { display: block; font-weight: 700; margin: 0 0 7px; }
.entry-form input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(245, 242, 247, .62);
  border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent);
  border-radius: 11px;
  font: inherit;
  background: rgba(224, 220, 236, .88);
  background: color-mix(in srgb, var(--field) 88%, transparent);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sheen) 42%, transparent);
}
.entry-form input:focus {
  border-color: var(--sheen);
  outline: 3px solid rgba(174, 169, 198, .34);
  outline: 3px solid color-mix(in srgb, var(--lavender) 34%, transparent);
  background: rgba(239, 236, 245, .96);
  background: color-mix(in srgb, color-mix(in oklab, var(--sheen) 46.5%, var(--field)) 96%, transparent);
}
.entry-form small { display: block; color: #e1ddec; color: color-mix(in oklab, var(--muted) 59.5%, var(--text)); margin-top: 6px; }
.form-grid { display: grid; grid-template-columns: minmax(150px, .7fr) minmax(260px, 1.3fr); gap: 18px; margin-bottom: 18px; }
.primary-button {
  border: 1px solid rgba(255,255,255,.23);
  border: 1px solid color-mix(in srgb, var(--sheen) 23%, transparent);
  border-radius: var(--button-radius, 11px);
  background: linear-gradient(135deg, var(--button-bg), var(--button-bg-end));
  color: var(--button-text);
  font: inherit;
  font-weight: 750;
  padding: 11px 24px;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(9, 21, 35, .20);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--shadow-color) 20%, transparent);
}
.primary-button:hover { background: linear-gradient(135deg, #172d45, #2a3d54); background: linear-gradient(135deg, color-mix(in oklab, var(--button-bg) 33%, var(--button-bg-end)), color-mix(in oklab, var(--sheen) 6%, var(--button-bg-end))); }

.alert { padding: 11px 13px; border-radius: 11px; margin-bottom: 16px; box-shadow: 0 8px 22px rgba(9,21,35,.12); box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow-color) 12%, transparent); }
.alert.success { background: rgba(174, 169, 198, .94); background: color-mix(in srgb, var(--lavender) 94%, transparent); color: var(--highlight-text); border: 1px solid rgba(255,255,255,.35); border: 1px solid color-mix(in srgb, var(--sheen) 35%, transparent); }
.alert.error { background: rgba(92, 40, 63, .94); background: color-mix(in srgb, color-mix(in oklab, var(--navy) 46.5%, var(--danger)) 94%, transparent); color: #fff2f5; color: color-mix(in oklab, var(--text-strong) 87%, var(--rose)); border: 1px solid rgba(245,194,214,.35); border: 1px solid color-mix(in srgb, color-mix(in oklab, var(--paper) 45%, var(--rose)) 35%, transparent); }
.section-title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; }

.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
table { border-collapse: collapse; width: 100%; min-width: 0; }
th, td { text-align: left; border-bottom: 1px solid rgba(232, 226, 241, .18); border-bottom: 1px solid color-mix(in srgb, var(--mist) 18%, transparent); padding: 11px 10px; }
th { font-size: .86rem; text-transform: uppercase; letter-spacing: .035em; color: #ddd7e9; color: var(--table-head); }
tbody tr:hover { background: rgba(238, 232, 244, .06); background: color-mix(in srgb, color-mix(in oklab, var(--sheen) 22%, var(--mist)) 6%, transparent); }
tbody tr:last-child td { border-bottom: 0; }
.empty-state { margin: 5px 0 0; color: var(--muted); }

.chart-scroll {
  overflow-x: auto;
  width: 100%;
  padding: 10px 8px 5px;
  border-radius: 14px;
  background: rgba(16, 34, 54, .24);
  background: color-mix(in srgb, var(--navy) 24%, transparent);
  border: 1px solid rgba(232, 226, 241, .10);
  border: 1px solid color-mix(in srgb, var(--mist) 10%, transparent);
}
.chart-canvas { display: block; min-height: 370px; }

@media (max-width: 680px) {
  .page-shell { width: min(1080px, calc(100% - 20px)); margin-top: 20px; }
  .authenticated-shell { margin-top: 74px; }
  .card { padding: 17px; border-radius: 17px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* Accessible text that remains available to screen readers without being
   repeated visually. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Login */
.login-form { margin-top: 18px; }
.login-form .primary-button {
  display: block;
  margin: 16px auto 0;
}

/* Bolus +/- control */
.number-stepper {
  display: grid;
  grid-template-columns: 48px minmax(76px, 1fr) 48px;
  align-items: stretch;
  gap: 8px;
}
.number-stepper .stepper-button {
  min-width: 48px;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.28);
  border: 1px solid color-mix(in srgb, var(--sheen) 28%, transparent);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--button-bg), var(--button-bg-end));
  color: var(--button-text);
  font: inherit;
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: 0 7px 18px rgba(9, 21, 35, .18);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--shadow-color) 18%, transparent);
}
.number-stepper .stepper-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #172d45, #2a3d54);
  background: linear-gradient(135deg, color-mix(in oklab, var(--button-bg) 33%, var(--button-bg-end)), color-mix(in oklab, var(--sheen) 6%, var(--button-bg-end)));
}
.number-stepper .stepper-button:disabled {
  opacity: .34;
  cursor: default;
  box-shadow: none;
}
.number-stepper input {
  min-width: 0;
  text-align: center;
  font-weight: 750;
  font-size: 1.08rem;
  -moz-appearance: textfield;
}
.number-stepper input::-webkit-inner-spin-button,
.number-stepper input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Segmented date/time editor. Each segment behaves like a small numeric
   field and advances automatically when its expected number of digits has
   been entered. */
.field-label {
  display: block;
  font-weight: 700;
  margin: 0 0 7px;
  color: var(--label-color);
}
:where(.entry-form) label:not([class]) { color: var(--label-color); }
.datetime-editor { width: 100%; }
.datetime-segments {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 5px 7px;
  border: 1px solid rgba(245, 242, 247, .62);
  border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent);
  border-radius: 11px;
  background: rgba(224, 220, 236, .88);
  background: color-mix(in srgb, var(--field) 88%, transparent);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sheen) 42%, transparent);
  overflow: hidden;
}
.datetime-segments:focus-within {
  border-color: var(--sheen);
  outline: 3px solid rgba(174, 169, 198, .34);
  outline: 3px solid color-mix(in srgb, var(--lavender) 34%, transparent);
  background: rgba(239, 236, 245, .96);
  background: color-mix(in srgb, color-mix(in oklab, var(--sheen) 46.5%, var(--field)) 96%, transparent);
}
.entry-form .datetime-segment {
  width: 2.65em;
  min-width: 0;
  padding: 7px 3px;
  border: 0;
  border-radius: 7px;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  text-align: center;
  font: inherit;
  font-size: 16px; /* avoids automatic zoom on iPhone */
  font-variant-numeric: tabular-nums;
}
.entry-form .datetime-segment.datetime-year { width: 4.55em; }
.entry-form .datetime-segment:focus {
  border: 0;
  outline: 0;
  background: rgba(121, 113, 164, .18);
  background: color-mix(in srgb, var(--violet) 18%, transparent);
  box-shadow: none;
}
.datetime-separator {
  flex: 0 0 auto;
  color: #5d5b6c;
  color: color-mix(in oklab, var(--ink) 62.5%, var(--muted));
  font-weight: 700;
  line-height: 1;
}
.datetime-date-time-gap {
  flex: 0 0 .7em;
}

@media (max-width: 430px) {
  .datetime-segments { padding-left: 4px; padding-right: 4px; }
  .entry-form .datetime-segment { width: 2.35em; padding-left: 1px; padding-right: 1px; }
  .entry-form .datetime-segment.datetime-year { width: 4.2em; }
  .datetime-date-time-gap { flex-basis: .35em; }
  .number-stepper { grid-template-columns: 52px minmax(72px, 1fr) 52px; }
  .number-stepper .stepper-button { min-height: 52px; }
}

/* Entry deletion */
.action-column,
.action-cell {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}
.delete-entry-form { margin: 0; }
.delete-button {
  border: 1px solid rgba(255, 232, 239, .24);
  border: 1px solid color-mix(in srgb, color-mix(in oklab, var(--sheen) 77.5%, var(--rose)) 24%, transparent);
  border-radius: 9px;
  background: rgba(16, 34, 54, .34);
  background: color-mix(in srgb, var(--navy) 34%, transparent);
  color: #f4eaf0;
  color: color-mix(in oklab, var(--text) 90.5%, var(--rose));
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  padding: 7px 11px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.delete-button:hover,
.delete-button:focus-visible {
  background: rgba(92, 40, 63, .75);
  background: color-mix(in srgb, color-mix(in oklab, var(--navy) 46.5%, var(--danger)) 75%, transparent);
  border-color: rgba(255, 225, 235, .42);
  border-color: color-mix(in srgb, color-mix(in oklab, var(--rose) 29.5%, var(--sheen)) 42%, transparent);
  outline: none;
}
.delete-button:active { transform: translateY(1px); }

body.modal-open { overflow: hidden; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(7, 18, 30, .68);
  background: color-mix(in srgb, color-mix(in oklab, var(--shadow-color) 92.5%, black) 68%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .16s ease;
}
.modal-backdrop[hidden] { display: none; }
.modal-backdrop.is-visible { opacity: 1; }
.delete-modal {
  width: min(430px, 100%);
  border: 1px solid rgba(231, 224, 241, .30);
  border: 1px solid color-mix(in srgb, var(--mist) 30%, transparent);
  border-radius: 22px;
  padding: 24px;
  color: var(--text);
  background:
    radial-gradient(circle at 85% 0%, rgba(174, 169, 198, .16), transparent 12rem),
    linear-gradient(145deg, #172b42, #102236 72%);
  background:
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--lavender) 16%, transparent), transparent 12rem),
    linear-gradient(145deg, color-mix(in oklab, var(--navy) 77.5%, var(--blue-bg)), var(--navy) 72%);
  box-shadow: 0 26px 70px rgba(4, 12, 20, .45);
  box-shadow: 0 26px 70px color-mix(in srgb, color-mix(in oklab, var(--shadow-color) 77.5%, black) 45%, transparent);
  transform: translateY(10px) scale(.985);
  transition: transform .16s ease;
  text-align: center;
}
.modal-backdrop.is-visible .delete-modal { transform: translateY(0) scale(1); }
.modal-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 15px;
  border-radius: 50%;
  border: 1px solid rgba(255, 226, 236, .26);
  border: 1px solid color-mix(in srgb, color-mix(in oklab, var(--sheen) 71.5%, var(--rose)) 26%, transparent);
  background: linear-gradient(145deg, rgba(132, 85, 120, .95), rgba(92, 40, 63, .95));
  background: linear-gradient(145deg, color-mix(in srgb, var(--plum) 95%, transparent), color-mix(in srgb, color-mix(in oklab, var(--navy) 46.5%, var(--danger)) 95%, transparent));
  color: var(--text-strong);
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1;
}
.delete-modal h2 { margin: 0 0 9px; font-size: 1.35rem; }
.delete-modal p { margin: 0; color: var(--muted); }
.delete-modal-entry {
  margin: 14px 0 8px !important;
  padding: 12px 14px;
  border: 1px solid rgba(232, 226, 241, .16);
  border: 1px solid color-mix(in srgb, var(--mist) 16%, transparent);
  border-radius: 12px;
  background: rgba(121, 113, 164, .20);
  background: color-mix(in srgb, var(--violet) 20%, transparent);
  color: var(--text-strong) !important;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.delete-modal-note { font-size: .88rem; }
.modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}
.modal-button {
  min-height: 46px;
  border-radius: 11px;
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
}
.modal-cancel {
  border: 1px solid rgba(232, 226, 241, .24);
  border: 1px solid color-mix(in srgb, var(--mist) 24%, transparent);
  background: rgba(174, 169, 198, .12);
  background: color-mix(in srgb, var(--lavender) 12%, transparent);
  color: #eeeaf4;
  color: color-mix(in oklab, var(--text) 78%, var(--muted));
}
.modal-cancel:hover,
.modal-cancel:focus-visible { background: rgba(174, 169, 198, .21); background: color-mix(in srgb, var(--lavender) 21%, transparent); outline: none; }
.modal-confirm {
  border: 1px solid rgba(255, 226, 236, .26);
  border: 1px solid color-mix(in srgb, color-mix(in oklab, var(--sheen) 71.5%, var(--rose)) 26%, transparent);
  background: linear-gradient(135deg, #845578, #66364f);
  background: linear-gradient(135deg, var(--plum), color-mix(in oklab, color-mix(in oklab, var(--plum) 38%, var(--danger)) 66%, var(--navy)));
  color: var(--text-strong);
  box-shadow: 0 7px 18px rgba(9, 21, 35, .22);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--shadow-color) 22%, transparent);
}
.modal-confirm:hover:not(:disabled),
.modal-confirm:focus-visible:not(:disabled) {
  background: linear-gradient(135deg, #945f87, #743d5a);
  background: linear-gradient(135deg, color-mix(in oklab, var(--plum) 91.5%, var(--sheen)), color-mix(in oklab, color-mix(in oklab, var(--plum) 54%, var(--danger)) 79%, var(--navy)));
  outline: none;
}
.modal-confirm:disabled { opacity: .58; cursor: wait; }

@media (max-width: 520px) {
  .page-shell { width: calc(100% - 16px); }
  .card { padding: 15px; }

  /* History tables fit inside an iPhone viewport instead of creating a
     second horizontal scrolling surface. */
  .table-wrap { overflow-x: hidden; }
  table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
  }
  th, td {
    padding: 8px 4px;
    vertical-align: middle;
  }
  th {
    font-size: .70rem;
    letter-spacing: .018em;
  }
  th:first-child, td:first-child {
    width: 52%;
    white-space: nowrap;
  }
  th:nth-child(2), td:nth-child(2) {
    width: 21%;
    text-align: center;
  }
  th:last-child, td:last-child {
    width: 27%;
  }
  .action-cell {
    padding-left: 2px;
    padding-right: 0;
  }
  .delete-button {
    display: block;
    width: 100%;
    max-width: 66px;
    min-height: 34px;
    margin-left: auto;
    padding: 6px 6px;
    font-size: .74rem;
    border-radius: 8px;
  }
  .delete-modal { padding: 21px 18px 18px; border-radius: 19px; }
  .modal-actions { gap: 8px; }
}

/* v12: compact AM/PM segmented control. This deliberately avoids the
   native <select>, whose internal arrow/padding differs on iPhone Safari and
   can clip the final "M" even when the element itself is wide enough. */
.datetime-ampm-toggle {
  flex: 0 0 76px;
  width: 76px;
  min-width: 76px;
  margin-left: .20em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: rgba(121, 113, 164, .12);
  background: color-mix(in srgb, var(--violet) 12%, transparent);
}
.entry-form .datetime-ampm-option {
  min-width: 0;
  min-height: 34px;
  padding: 0 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #4e4b5d;
  color: color-mix(in oklab, var(--ink) 72%, var(--muted));
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}
.entry-form .datetime-ampm-option.is-active {
  background: rgba(121, 113, 164, .90);
  background: color-mix(in srgb, var(--violet) 90%, transparent);
  color: var(--text-strong);
  box-shadow: 0 1px 4px rgba(16, 34, 54, .18);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--navy) 18%, transparent);
}
.entry-form .datetime-ampm-option:focus-visible {
  outline: 2px solid var(--sheen);
  outline-offset: 1px;
}

@media (max-width: 430px) {
  .datetime-segments {
    gap: 0;
    padding-left: 3px;
    padding-right: 3px;
  }
  .entry-form .datetime-segment {
    width: 2.12em;
    padding-left: 0;
    padding-right: 0;
  }
  .entry-form .datetime-segment.datetime-year { width: 3.76em; }
  .datetime-date-time-gap { flex-basis: .12em; }
  .datetime-separator { font-size: .90em; }
  .datetime-ampm-toggle {
    flex-basis: 72px;
    width: 72px;
    min-width: 72px;
    margin-left: .06em;
  }
  .entry-form .datetime-ampm-option {
    font-size: 11.5px;
    padding-left: 1px;
    padding-right: 1px;
  }
}

@media (max-width: 350px) {
  .datetime-segments { padding-left: 2px; padding-right: 2px; }
  .entry-form .datetime-segment { width: 1.98em; font-size: 15px; }
  .entry-form .datetime-segment.datetime-year { width: 3.62em; }
  .datetime-date-time-gap { flex-basis: .04em; }
  .datetime-ampm-toggle {
    flex-basis: 68px;
    width: 68px;
    min-width: 68px;
  }
  .entry-form .datetime-ampm-option { font-size: 11px; }
}

/* v11: persistent default values */
.defaults-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: end;
}
.default-field { min-width: 0; }
.default-field > label { margin-bottom: 8px; }
.default-field-bg input { min-height: 48px; text-align: center; font-weight: 750; font-size: 1.05rem; }
.settings-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: .90rem;
}
.settings-save { display: block; margin: 18px auto 0; }

/* v11: combined 14-day hourly timeline */
.timeline-card { overflow: hidden; }
.timeline-title-row h2 { margin-bottom: 5px; }
.timeline-explainer {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: .90rem;
  line-height: 1.45;
}
.timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 9px 16px;
  margin: 17px 0 12px;
  color: #eeeaf4;
  color: color-mix(in oklab, var(--text) 78%, var(--muted));
  font-size: .84rem;
  font-weight: 700;
}
.legend-item { display: inline-flex; align-items: center; gap: 7px; }
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.24);
  border: 1px solid color-mix(in srgb, var(--sheen) 24%, transparent);
}
.legend-basal { background: var(--series-basal); }
.legend-food-bolus { background: var(--food-bolus); }
.legend-correction-bolus { background: var(--correction-bolus); }
.legend-bg {
  height: 4px;
  border: 0;
  border-radius: 99px;
  background: var(--series-bg);
}
.legend-normal-bg, .legend-near-bg {
  height: 10px;
  border: 1px solid rgba(84, 148, 113, .38);
  border-radius: 3px;
  background: linear-gradient(rgba(84, 148, 113, .12), rgba(84, 148, 113, .12)), #ffffff;
}
.legend-near-bg { background: linear-gradient(rgba(84, 148, 113, .05), rgba(84, 148, 113, .05)), #ffffff; }
.legend-alert-bg {
  height: 10px;
  border: 1px dashed #d32626;
  border-radius: 3px;
  background: #ffffff;
}
.timeline-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(232, 226, 241, .12);
  border: 1px solid color-mix(in srgb, var(--mist) 12%, transparent);
  border-radius: 14px;
  background: rgba(16, 34, 54, .28);
  background: color-mix(in srgb, var(--navy) 28%, transparent);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-color: rgba(174,169,198,.45) rgba(16,34,54,.22);
  scrollbar-color: color-mix(in srgb, var(--lavender) 45%, transparent) color-mix(in srgb, var(--navy) 22%, transparent);
}
.timeline-canvas-wrap {
  position: relative;
  width: max-content;
  min-width: 100%;
}
.timeline-canvas { display: block; max-width: none; }
.timeline-tooltip {
  position: absolute;
  z-index: 4;
  width: 172px;
  padding: 10px 11px;
  border: 1px solid rgba(232, 226, 241, .24);
  border: 1px solid color-mix(in srgb, var(--mist) 24%, transparent);
  border-radius: 11px;
  background: rgba(16, 34, 54, .96);
  background: color-mix(in srgb, var(--navy) 96%, transparent);
  color: var(--text);
  box-shadow: 0 10px 28px rgba(7, 18, 30, .36);
  box-shadow: 0 10px 28px color-mix(in srgb, color-mix(in oklab, var(--shadow-color) 92.5%, black) 36%, transparent);
  pointer-events: none;
  font-size: .78rem;
  line-height: 1.35;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.timeline-tooltip[hidden] { display: none; }
.timeline-tooltip strong { display: block; margin-bottom: 6px; font-size: .82rem; }
.timeline-tooltip span { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.tip-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.tip-basal { background: var(--lavender); }
.tip-food-bolus { background: var(--food-bolus); }
.tip-correction-bolus { background: var(--correction-bolus); }
.tip-bg { background: var(--violet); }
.timeline-hint {
  margin: 9px 2px 0;
  color: var(--muted);
  font-size: .80rem;
}

@media (max-width: 720px) {
  .defaults-grid { grid-template-columns: 1fr; gap: 16px; }
  .settings-card { max-width: 520px; }
}

@media (max-width: 520px) {
  .timeline-card { padding-left: 12px; padding-right: 12px; }
  .timeline-legend { gap: 8px 13px; margin-top: 14px; }
  .timeline-explainer { font-size: .84rem; }
  .timeline-hint { font-size: .76rem; }
}

/* BG history readability */
.bg-chart-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px 13px;
  color: var(--muted);
  font-size: .78rem;
  white-space: nowrap;
}
.bg-key-item { display: inline-flex; align-items: center; gap: 6px; }
.bg-key-line {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: var(--series-bg);
}
.bg-key-range {
  width: 22px;
  height: 10px;
  border: 1px solid rgba(174, 169, 198, .62);
  border: 1px solid color-mix(in srgb, var(--lavender) 62%, transparent);
  border-radius: 3px;
  background: rgba(174, 169, 198, .14);
  background: color-mix(in srgb, var(--lavender) 14%, transparent);
}
.chart-note {
  margin: -2px 0 10px;
  color: var(--muted);
  font-size: .80rem;
}
.bg-history-scroll {
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
}

@media (max-width: 520px) {
  .bg-chart-key {
    justify-content: flex-start;
    width: 100%;
    font-size: .72rem;
  }
  .bg-history-heading {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .chart-note { font-size: .74rem; }
}

/* v14: dedicated iPhone layout pass.
   Keep Safari from inflating typography, make form controls truly fluid,
   and split the date and time portions into two compact rows on phones. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.number-stepper {
  width: 100%;
  min-width: 0;
}
.number-stepper > * { min-width: 0; }
.number-stepper .stepper-button { width: 100%; }

@media (max-width: 520px) {
  .page-shell {
    width: calc(100% - 24px);
    margin-left: 12px;
    margin-right: 12px;
    margin-bottom: calc(88px + env(safe-area-inset-bottom));
  }
  .authenticated-shell { margin-top: 64px; }
  .page-heading { margin-bottom: 14px; }
  h1 { font-size: 1.75rem; }
  h2 { font-size: 1.05rem; }
  .muted { font-size: .96rem; }

  .menu-anchor {
    top: max(10px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }
  .menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }
  .menu-toggle span { width: 20px; }
  .menu-panel {
    top: calc(max(10px, env(safe-area-inset-top)) + 54px);
  }

  .card {
    padding: 14px;
    border-radius: 18px;
    margin-bottom: 16px;
  }
  .entry-form label,
  .field-label {
    margin-bottom: 6px;
    font-size: .96rem;
  }
  .form-grid { gap: 15px; margin-bottom: 15px; }

  .number-stepper {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    gap: 7px;
  }
  .number-stepper .stepper-button {
    min-width: 0;
    min-height: 46px;
    height: 46px;
    border-radius: 11px;
    font-size: 1.45rem;
  }
  .number-stepper input {
    height: 46px;
    padding: 8px 10px;
    font-size: 1rem;
  }

  /* Two rows on iPhone: YYYY-MM-DD, then hh:mm AM/PM. This avoids the
     fragile one-line squeeze while preserving the same segmented keyboard
     and auto-advance behaviour. */
  .datetime-segments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 2px;
    row-gap: 5px;
    min-height: 0;
    padding: 6px 7px;
    overflow: visible;
  }
  .entry-form .datetime-segment,
  .entry-form .datetime-segment.datetime-year {
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    height: 34px;
    padding: 4px 2px;
    font-size: 16px;
  }
  .entry-form .datetime-segment { inline-size: 2.45em; }
  .entry-form .datetime-segment.datetime-year { inline-size: 4.55em; }
  .datetime-separator { font-size: .92rem; }
  .datetime-date-time-gap {
    display: block;
    flex: 0 0 100%;
    width: 100%;
    height: 0;
  }
  .datetime-ampm-toggle {
    flex: 0 0 78px;
    width: 78px;
    min-width: 78px;
    margin-left: 4px;
  }
  .entry-form .datetime-ampm-option {
    min-height: 32px;
    font-size: 12px;
  }
  .entry-form small {
    margin-top: 7px;
    font-size: .79rem;
    line-height: 1.35;
  }

  .primary-button {
    min-height: 44px;
    padding: 9px 20px;
    font-size: .95rem;
  }
  .section-title-row { gap: 10px; }
  .section-title-row h2 { margin-bottom: 12px; }
}

@media (max-width: 370px) {
  .page-shell {
    width: calc(100% - 18px);
    margin-left: 9px;
    margin-right: 9px;
  }
  .card { padding: 12px; }
  .datetime-segments { padding-left: 4px; padding-right: 4px; }
  .entry-form .datetime-segment { inline-size: 2.30em; }
  .entry-form .datetime-segment.datetime-year { inline-size: 4.30em; }
  .datetime-ampm-toggle {
    flex-basis: 74px;
    width: 74px;
    min-width: 74px;
  }
}

/* v15: structural iPhone date/time layout.
   Do not rely on flex wrapping: date and time are separate rows in the DOM,
   so Safari cannot squeeze everything back onto one line. */
.datetime-segments {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  overflow: hidden;
}
.datetime-date-row,
.datetime-time-row {
  display: grid;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin-inline: auto;
}
.datetime-date-row {
  width: min(100%, 275px);
  grid-template-columns: minmax(74px, 1.5fr) 14px minmax(42px, .8fr) 14px minmax(42px, .8fr);
}
.datetime-time-row {
  width: min(100%, 235px);
  grid-template-columns: minmax(44px, .8fr) 14px minmax(44px, .8fr) minmax(94px, 1.5fr);
  column-gap: 2px;
}
.entry-form .datetime-date-row .datetime-segment,
.entry-form .datetime-time-row .datetime-segment,
.entry-form .datetime-date-row .datetime-segment.datetime-year {
  width: 100%;
  inline-size: auto;
  min-width: 0;
  height: 36px;
  padding: 5px 3px;
  font-size: 16px;
}
.datetime-date-row .datetime-separator,
.datetime-time-row .datetime-separator {
  text-align: center;
}
.datetime-date-time-gap { display: none !important; }
.datetime-time-row .datetime-ampm-toggle {
  width: 100%;
  min-width: 0;
  margin-left: 2px;
  flex: none;
}
.entry-form .datetime-time-row .datetime-ampm-option {
  min-width: 0;
  width: 100%;
  padding-inline: 3px;
  font-size: 12px;
}

@media (max-width: 520px) {
  /* iPhone 14 Plus is 428 CSS px wide. These rules leave breathing room
     inside the card without any child depending on viewport-sized units. */
  .authenticated-shell {
    margin-top: 58px;
  }
  .page-heading {
    padding-right: 52px;
  }
  h1 {
    font-size: 1.65rem;
  }
  .datetime-segments {
    display: grid;
    gap: 5px;
    padding: 6px 7px;
  }
  .datetime-date-row {
    width: min(100%, 258px);
    grid-template-columns: minmax(70px, 1.45fr) 12px minmax(40px, .78fr) 12px minmax(40px, .78fr);
  }
  .datetime-time-row {
    width: min(100%, 222px);
    grid-template-columns: minmax(42px, .75fr) 12px minmax(42px, .75fr) minmax(92px, 1.45fr);
  }
  .datetime-ampm-toggle {
    flex-basis: auto;
    width: 100%;
    min-width: 0;
  }
  .number-stepper {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    width: 100%;
  }
  .number-stepper .stepper-button {
    width: 44px;
    min-width: 44px;
  }
}

@media (max-width: 390px) {
  .datetime-date-row { width: min(100%, 245px); }
  .datetime-time-row { width: min(100%, 214px); }
}

/* v16: iPhone-stable date/time rows + persistent quick input actions.
   The date/time editor intentionally uses flex only here. This avoids the
   nested CSS-grid sizing behaviour that rendered each segment on its own row
   in iPhone Safari. */
.top-actions {
  position: fixed;
  z-index: 900;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 24px);
}
.top-actions .menu-anchor {
  position: static;
  top: auto;
  right: auto;
  z-index: auto;
}
.quick-input-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 4px;
  border: 1px solid rgba(232, 226, 241, .20);
  border: 1px solid color-mix(in srgb, var(--mist) 20%, transparent);
  border-radius: 14px;
  background: rgba(16, 34, 54, .88);
  background: color-mix(in srgb, var(--navy) 88%, transparent);
  box-shadow: 0 10px 28px rgba(9, 21, 35, .22);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-color) 22%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.quick-input-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  min-width: 52px;
  padding: 0 10px;
  border-radius: 10px;
  color: #ddd7e9;
  color: var(--nav-text);
  font-size: .80rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  touch-action: manipulation;
}
.quick-input-link:hover,
.quick-input-link:focus-visible {
  color: var(--text-strong);
  background: rgba(174, 169, 198, .13);
  background: color-mix(in srgb, var(--lavender) 13%, transparent);
  outline: none;
}
.quick-input-link.active {
  color: var(--highlight-text);
  background: var(--lavender);
  box-shadow: inset 0 0 0 1px var(--lavender);
}
.quick-input-link:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }

/* Reset the combined pale container: the two rows own their surfaces. */
.datetime-segments {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.datetime-segments:focus-within {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
}
.datetime-date-row,
.datetime-time-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 5px 7px !important;
  border: 1px solid rgba(245, 242, 247, .62) !important;
  border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent) !important;
  border-radius: 11px !important;
  background: rgba(224, 220, 236, .88) !important;
  background: color-mix(in srgb, var(--field) 88%, transparent) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sheen) 42%, transparent) !important;
}
.datetime-date-row:focus-within,
.datetime-time-row:focus-within {
  border-color: var(--sheen) !important;
  outline: 3px solid rgba(174, 169, 198, .34) !important;
  outline: 3px solid color-mix(in srgb, var(--lavender) 34%, transparent) !important;
  background: rgba(239, 236, 245, .96) !important;
  background: color-mix(in srgb, color-mix(in oklab, var(--sheen) 46.5%, var(--field)) 96%, transparent) !important;
}
.entry-form .datetime-date-row .datetime-segment,
.entry-form .datetime-time-row .datetime-segment,
.entry-form .datetime-date-row .datetime-segment.datetime-year {
  display: block !important;
  width: auto !important;
  inline-size: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 38px !important;
  padding: 5px 2px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 16px !important;
  line-height: 1.1 !important;
  text-align: center !important;
}
.entry-form .datetime-date-row [data-datetime-part="year"] {
  flex: 1.55 1 0 !important;
}
.entry-form .datetime-date-row [data-datetime-part="month"],
.entry-form .datetime-date-row [data-datetime-part="day"] {
  flex: 1 1 0 !important;
}
.entry-form .datetime-time-row [data-datetime-part="hour"],
.entry-form .datetime-time-row [data-datetime-part="minute"] {
  flex: 1 1 0 !important;
}
.datetime-date-row .datetime-separator,
.datetime-time-row .datetime-separator {
  display: block !important;
  flex: 0 0 18px !important;
  width: 18px !important;
  min-width: 18px !important;
  text-align: center !important;
  font-size: .95rem !important;
}
.datetime-time-row .datetime-ampm-toggle {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  flex: 0 0 112px !important;
  width: 112px !important;
  min-width: 112px !important;
  margin: 0 0 0 6px !important;
  padding: 2px !important;
}
.entry-form .datetime-time-row .datetime-ampm-option {
  min-height: 34px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 4px !important;
  font-size: 12px !important;
}

@media (max-width: 520px) {
  .top-actions {
    top: max(9px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    gap: 6px;
  }
  .quick-input-nav {
    gap: 3px;
    padding: 3px;
    border-radius: 12px;
  }
  .quick-input-link {
    min-width: 46px;
    min-height: 38px;
    padding: 0 7px;
    font-size: .74rem;
    border-radius: 9px;
  }
  .top-actions .menu-toggle {
    width: 44px;
    height: 44px;
  }
  .menu-panel {
    top: calc(max(9px, env(safe-area-inset-top)) + 54px);
  }
  .authenticated-shell {
    margin-top: 78px;
  }
  .page-heading {
    padding-right: 0;
  }
  .datetime-date-row,
  .datetime-time-row {
    padding: 4px 6px !important;
  }
  .datetime-time-row .datetime-ampm-toggle {
    flex-basis: 104px !important;
    width: 104px !important;
    min-width: 104px !important;
    margin-left: 4px !important;
  }
}

@media (max-width: 370px) {
  .quick-input-link {
    min-width: 42px;
    padding: 0 5px;
    font-size: .70rem;
  }
  .top-actions { gap: 4px; }
  .datetime-date-row .datetime-separator,
  .datetime-time-row .datetime-separator {
    flex-basis: 14px !important;
    width: 14px !important;
    min-width: 14px !important;
  }
  .datetime-time-row .datetime-ampm-toggle {
    flex-basis: 96px !important;
    width: 96px !important;
    min-width: 96px !important;
  }
}


/* v17: deterministic iPhone date/time geometry.
   Each row has fixed grid tracks so year/month/day and hour/minute/AM-PM
   can never push one another outside the visible control. */
.datetime-date-row,
.datetime-time-row {
  display: grid !important;
  flex: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  align-items: center !important;
  justify-content: stretch !important;
}
.datetime-date-row {
  grid-template-columns: minmax(0, 1.65fr) 14px minmax(0, 1fr) 14px minmax(0, 1fr) !important;
  column-gap: 0 !important;
}
.datetime-time-row {
  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) minmax(112px, 1.65fr) !important;
  column-gap: 4px !important;
}
.entry-form .datetime-date-row .datetime-segment,
.entry-form .datetime-time-row .datetime-segment,
.entry-form .datetime-date-row .datetime-segment.datetime-year {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  inline-size: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: none !important;
  margin: 0 !important;
  padding: 5px 2px !important;
  text-align: center !important;
}
.datetime-date-row .datetime-separator,
.datetime-time-row .datetime-separator {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  flex: none !important;
  text-align: center !important;
  margin: 0 !important;
}
.datetime-time-row .datetime-ampm-toggle {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 !important;
}

@media (max-width: 520px) {
  .datetime-date-row {
    grid-template-columns: minmax(0, 1.55fr) 12px minmax(0, .9fr) 12px minmax(0, .9fr) !important;
  }
  .datetime-time-row {
    grid-template-columns: minmax(0, .9fr) 12px minmax(0, .9fr) minmax(106px, 1.55fr) !important;
    column-gap: 3px !important;
  }
}

@media (max-width: 360px) {
  .datetime-date-row {
    grid-template-columns: minmax(0, 1.45fr) 10px minmax(0, .85fr) 10px minmax(0, .85fr) !important;
  }
  .datetime-time-row {
    grid-template-columns: minmax(0, .85fr) 10px minmax(0, .85fr) minmax(96px, 1.45fr) !important;
    column-gap: 2px !important;
  }
  .entry-form .datetime-date-row .datetime-segment,
  .entry-form .datetime-time-row .datetime-segment,
  .entry-form .datetime-date-row .datetime-segment.datetime-year {
    padding-left: 1px !important;
    padding-right: 1px !important;
  }
}


/* v19: carbohydrate tracking + timeline sensitivity summary */
.carbs-type-field { margin-bottom: 18px; }
.carbs-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.carbs-type-option { display: block; min-width: 0; margin: 0 !important; cursor: pointer; }
.carbs-type-option > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.carbs-type-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid rgba(245,242,247,.24);
  border: 1px solid color-mix(in srgb, var(--paper) 24%, transparent);
  border-radius: 13px;
  background: rgba(16,34,54,.36);
  background: color-mix(in srgb, var(--navy) 36%, transparent);
  color: var(--text);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.carbs-type-option > input:checked + .carbs-type-card {
  background: var(--navy);
  background: color-mix(in srgb, var(--lavender) 14%, var(--navy));
  border-color: var(--lavender);
  box-shadow: inset 0 0 0 1px var(--lavender);
}
.carbs-type-option > input:checked + .carbs-type-card::after {
  content: '\2713';
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--highlight-text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.carbs-type-option > input:focus-visible + .carbs-type-card {
  outline: 3px solid var(--lavender);
  outline-offset: 2px;
}
.carbs-icon { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
.carbs-type-card strong { display: block; font-size: .96rem; }
.carbs-type-card small { display: block; margin-top: 3px; color: var(--muted); font-size: .76rem; }
.carbs-type-inline { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.settings-subheading { margin-top: 24px; }

.carbs-chart-key {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 13px;
  color: var(--muted);
  font-size: .78rem;
}
.carbs-key-fast,
.carbs-key-food {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,.20);
  border: 1px solid color-mix(in srgb, var(--sheen) 20%, transparent);
}
.carbs-key-fast { background: var(--fast-carbs); }
.carbs-key-food { background: var(--food-carbs); }

.legend-fast-carbs { background: var(--fast-carbs); }
.legend-food-carbs { background: var(--food-carbs); }
.tip-fast-carbs { background: var(--fast-carbs); }
.tip-food-carbs { background: var(--food-carbs); }

.sensitivity-card { background: linear-gradient(145deg, rgba(16,34,54,.98), rgba(34,50,70,.98)); background: linear-gradient(145deg, color-mix(in srgb, var(--navy) 98%, transparent), color-mix(in srgb, var(--navy-soft) 98%, transparent)); }
.sensitivity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 17px;
}
.sensitivity-metric {
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(232,226,241,.15);
  border: 1px solid color-mix(in srgb, var(--mist) 15%, transparent);
  border-radius: 13px;
  background: rgba(121,113,164,.16);
  background: color-mix(in srgb, var(--violet) 16%, transparent);
}
.sensitivity-period { display: block; color: var(--muted); font-size: .78rem; font-weight: 700; }
.sensitivity-metric strong {
  display: block;
  margin-top: 5px;
  color: var(--text-strong);
  font-size: 1.18rem;
  font-variant-numeric: tabular-nums;
}
.sensitivity-metric small { display: block; margin-top: 4px; color: var(--accent-text); font-size: .72rem; }
.sensitivity-note {
  margin: 12px 1px 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.42;
}

@media (max-width: 720px) {
  .sensitivity-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .carbs-type-grid { gap: 8px; }
  .carbs-type-card { min-height: 60px; padding: 8px 9px; gap: 8px; }
  .carbs-icon { font-size: 1.45rem; }
  .carbs-type-card strong { font-size: .86rem; }
  .carbs-type-card small { font-size: .68rem; }
  .carbs-history-heading { align-items: flex-start; flex-wrap: wrap; }
  .carbs-chart-key { justify-content: flex-start; width: 100%; font-size: .72rem; }

  /* Four-column carbohydrate tables stay within the iPhone card. */
  .carbs-table th:first-child, .carbs-table td:first-child { width: 43%; }
  .carbs-table th:nth-child(2), .carbs-table td:nth-child(2) { width: 19%; text-align: center; }
  .carbs-table th:nth-child(3), .carbs-table td:nth-child(3) { width: 12%; text-align: center; }
  .carbs-table th:last-child, .carbs-table td:last-child { width: 26%; }
  .carbs-table .carbs-type-inline { gap: 2px; font-size: .76rem; }

  .sensitivity-grid { gap: 8px; margin-top: 13px; }
  .sensitivity-metric { padding: 10px 11px; }
  .sensitivity-metric strong { font-size: 1.02rem; }
  .sensitivity-note { font-size: .70rem; }
}


/* v20: four quick-access input buttons on iPhone-sized screens. */
@media (max-width: 520px) {
  .quick-input-nav {
    gap: 2px;
    padding: 3px;
  }
  .quick-input-link {
    min-width: 42px;
    padding: 0 6px;
    font-size: .71rem;
  }
  .quick-input-link:last-child {
    min-width: 49px;
  }
}

@media (max-width: 390px) {
  .quick-input-link {
    min-width: 38px;
    padding: 0 5px;
    font-size: .68rem;
  }
  .quick-input-link:last-child {
    min-width: 45px;
  }
  .top-actions { gap: 4px; }
}


/* v22: 14-day daily insulin/carbohydrate metrics table on Timeline & Metrics. */
.daily-metrics-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(214,207,225,.18);
  border-top: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
}
.daily-metrics-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.daily-metrics-heading h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}
.daily-metrics-heading p {
  margin: 0;
  max-width: 580px;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.45;
  text-align: right;
}
.daily-metrics-wrap {
  border: 1px solid rgba(214,207,225,.14);
  border: 1px solid color-mix(in srgb, var(--muted) 14%, transparent);
  border-radius: 13px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.daily-metrics-table {
  min-width: 640px;
  table-layout: fixed;
  background: rgba(16,34,54,.28);
  background: color-mix(in srgb, var(--navy) 28%, transparent);
}
.daily-metrics-table th,
.daily-metrics-table td {
  padding: 8px 7px;
  text-align: center;
  white-space: nowrap;
  font-size: .78rem;
}
.daily-metrics-table thead th {
  color: var(--accent-text);
  font-size: .70rem;
  line-height: 1.2;
}
.daily-metrics-table thead th span {
  color: var(--muted);
  font-size: .64rem;
  font-weight: 600;
}
.daily-metrics-table th:first-child,
.daily-metrics-table td:first-child {
  width: 82px;
  text-align: left;
}
.daily-metrics-table tbody th {
  color: var(--text);
  font-weight: 700;
}
.daily-metrics-table tbody td:nth-child(5) {
  color: var(--text);
  font-weight: 750;
}
.daily-metrics-table tbody td:last-child {
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.daily-metrics-today {
  background: rgba(121,113,164,.12);
  background: color-mix(in srgb, var(--violet) 12%, transparent);
}
.daily-metrics-note {
  margin: 8px 2px 0;
  color: var(--muted);
  font-size: .70rem;
  line-height: 1.4;
}

@media (max-width: 520px) {
  .daily-metrics-section { margin-top: 18px; padding-top: 16px; }
  .daily-metrics-heading { display: block; margin-bottom: 9px; }
  .daily-metrics-heading h3 { font-size: .94rem; }
  .daily-metrics-heading p { margin-top: 4px; font-size: .70rem; text-align: left; }
  .daily-metrics-wrap {
    margin-left: -2px;
    margin-right: -2px;
    overflow-x: hidden;
  }
  .daily-metrics-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }
  .daily-metrics-table th,
  .daily-metrics-table td {
    padding: 7px 2px;
    font-size: .66rem;
    overflow: hidden;
    text-overflow: clip;
  }
  .daily-metrics-table thead th { font-size: .59rem; }
  .daily-metrics-table thead th span { font-size: .55rem; }
  .daily-metrics-table th:first-child,
  .daily-metrics-table td:first-child { width: 16%; }
  .daily-metrics-table th:not(:first-child),
  .daily-metrics-table td:not(:first-child) { width: 14%; }
  .daily-metrics-note { font-size: .66rem; }
}



/* v67: daily BG low/high summary card. */
.daily-range-card { overflow: hidden; }
.daily-range-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.daily-range-metric {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(214,207,225,.15);
  border: 1px solid color-mix(in srgb, var(--muted) 15%, transparent);
  border-radius: 14px;
  background: rgba(16,34,54,.28);
  background: color-mix(in srgb, var(--navy) 28%, transparent);
}
.daily-range-period {
  display: block;
  margin-bottom: 10px;
  color: var(--accent-text);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .01em;
}
.daily-range-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.daily-range-value {
  min-width: 0;
}
.daily-range-value small {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: .67rem;
  font-weight: 700;
}
.daily-range-value strong {
  display: block;
  color: var(--text);
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.daily-range-low strong { color: #e8c3c6; color: color-mix(in oklab, color-mix(in oklab, var(--text) 82%, var(--danger)) 73%, var(--rose)); }
.daily-range-high strong { color: #efb4b9; color: color-mix(in oklab, var(--text) 26%, var(--rose)); }
.daily-range-meta {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-size: .66rem;
  line-height: 1.35;
}
@media (max-width: 680px) {
  .daily-range-grid { grid-template-columns: 1fr; gap: 9px; }
  .daily-range-metric { padding: 12px 13px; }
  .daily-range-pair { gap: 8px; }
  .daily-range-value strong { font-size: 1rem; }
}


/* v27: body metrics and Nadler blood-volume estimate */
.default-field select {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  background: color-mix(in srgb, var(--sheen) 82%, transparent);
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  font: inherit;
  font-weight: 700;
  padding: 0 12px;
}

.body-metrics-grid {
  margin-top: 14px;
  align-items: stretch;
}

.blood-volume-metric {
  min-width: 0;
  border: 1px solid rgba(121,113,164,.26);
  border: 1px solid color-mix(in srgb, var(--violet) 26%, transparent);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(174,169,198,.18), rgba(132,85,120,.09));
  background: linear-gradient(145deg, color-mix(in srgb, var(--lavender) 18%, transparent), color-mix(in srgb, var(--plum) 9%, transparent));
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.blood-volume-metric span {
  color: var(--muted);
  font-size: .78rem;
  font-weight: 700;
}

.blood-volume-metric strong {
  margin-top: 4px;
  color: var(--navy);
  font-size: 1.35rem;
  line-height: 1.15;
}

.blood-volume-metric small {
  margin-top: 4px;
  color: var(--muted);
  font-size: .72rem;
}

@media (max-width: 520px) {
  .body-metrics-grid {
    grid-template-columns: 1fr 1fr;
  }
  .blood-volume-metric {
    grid-column: 1 / -1;
    min-height: 82px;
  }
}

@media (max-width: 360px) {
  .body-metrics-grid {
    grid-template-columns: 1fr;
  }
  .blood-volume-metric {
    grid-column: auto;
  }
}


.body-summary-card {
  padding-top: 14px;
  padding-bottom: 14px;
}

.body-summary-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 14px;
}

.body-summary-copy span {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.body-summary-copy strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--navy);
  font-size: 1.45rem;
  line-height: 1;
}

.body-summary-copy small {
  color: var(--muted);
  font-size: .74rem;
}

@media (max-width: 420px) {
  .body-summary-copy {
    grid-template-columns: 1fr;
  }
  .body-summary-copy strong {
    grid-column: 1;
    grid-row: auto;
    margin-top: 2px;
    font-size: 1.35rem;
  }
}


/* v28: Nadler grouping */
.nadler-settings-heading {
  margin-top: 24px;
}

@media (max-width: 520px) {
  .nadler-settings-heading { margin-top: 20px; }
}

/* v29: keep the derived Nadler value readable on the dark settings surface. */
.blood-volume-metric strong {
  color: var(--text);
}


/* v30: Timeline blood-volume contrast + five-item quick-access strip. */
.body-summary-copy strong {
  color: var(--text);
}

@media (max-width: 520px) {
  .quick-input-nav {
    gap: 2px;
    padding: 3px;
  }
  .quick-input-link {
    min-width: 0;
    padding: 0 6px;
    font-size: .69rem;
  }
  .quick-input-link:last-child {
    min-width: 0;
  }
  .quick-metrics-link {
    padding-left: 7px;
    padding-right: 7px;
  }
}

@media (max-width: 390px) {
  .quick-input-link {
    padding: 0 4px;
    font-size: .65rem;
  }
  .quick-metrics-link {
    padding-left: 5px;
    padding-right: 5px;
  }
}


/* v31: keep the Nadler Sex selector value as dark/readable as the weight and height fields. */
.default-field select,
.default-field select option {
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
}
.default-field select { background-color: rgba(255,255,255,.82); background-color: color-mix(in srgb, var(--sheen) 82%, transparent); }

/* v32: bolus purpose (Correction / Food / Mixed) */
.bolus-purpose-field { margin-bottom: 18px; }
.bolus-purpose-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.bolus-purpose-option {
  display: block;
  min-width: 0;
  margin: 0 !important;
  cursor: pointer;
}
.bolus-purpose-option > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.bolus-purpose-card {
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 9px 7px;
  border: 1px solid rgba(232, 226, 241, .24);
  border: 1px solid color-mix(in srgb, var(--mist) 24%, transparent);
  border-radius: 11px;
  background: rgba(16, 34, 54, .34);
  background: color-mix(in srgb, var(--navy) 34%, transparent);
  color: var(--muted);
  font-size: .88rem;
  font-weight: 800;
  text-align: center;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.bolus-purpose-option > input:checked + .bolus-purpose-card {
  color: var(--text-strong);
  border-color: rgba(226, 220, 239, .52);
  border-color: color-mix(in srgb, var(--mist) 52%, transparent);
  background: linear-gradient(135deg, rgba(121, 113, 164, .82), rgba(132, 85, 120, .72));
  background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 82%, transparent), color-mix(in srgb, var(--plum) 72%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sheen) 12%, transparent);
}
.bolus-purpose-option > input:focus-visible + .bolus-purpose-card {
  outline: 3px solid rgba(174, 169, 198, .38);
  outline: 3px solid color-mix(in srgb, var(--lavender) 38%, transparent);
  outline-offset: 2px;
}
.mixed-correction-panel {
  margin-top: 14px;
  padding: 13px;
  border: 1px solid rgba(232, 226, 241, .16);
  border: 1px solid color-mix(in srgb, var(--mist) 16%, transparent);
  border-radius: 13px;
  background: rgba(16, 34, 54, .22);
  background: color-mix(in srgb, var(--navy) 22%, transparent);
}
.mixed-correction-panel[hidden] { display: none !important; }
.mixed-correction-panel label { margin-bottom: 7px; }
.mixed-correction-panel small {
  margin-top: 7px;
  color: var(--muted);
  font-size: .76rem;
  text-align: center;
}
.compact-stepper {
  grid-template-columns: 44px minmax(68px, 1fr) 44px;
}
.compact-stepper .stepper-button {
  min-width: 44px;
  min-height: 44px;
}
.bolus-units-cell strong {
  display: block;
  color: var(--text);
  font-size: .94rem;
  line-height: 1.15;
}
.bolus-units-cell small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.15;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .bolus-purpose-field { margin-bottom: 15px; }
  .bolus-purpose-grid { gap: 6px; }
  .bolus-purpose-card {
    min-height: 42px;
    padding: 7px 4px;
    font-size: .78rem;
  }
  .mixed-correction-panel { margin-top: 11px; padding: 10px; }
  .bolus-table th:first-child, .bolus-table td:first-child { width: 47%; }
  .bolus-table th:nth-child(2), .bolus-table td:nth-child(2) { width: 27%; text-align: center; }
  .bolus-table th:last-child, .bolus-table td:last-child { width: 26%; }
  .bolus-units-cell small { font-size: .63rem; }
}


/* v33: configurable bolus IOB and activity tracking. */
.field-help {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .72rem;
}

.iob-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(174,169,198,.28);
  border: 1px solid color-mix(in srgb, var(--lavender) 28%, transparent);
  border-radius: 14px;
  background: rgba(121,113,164,.14);
  background: color-mix(in srgb, var(--violet) 14%, transparent);
}
.iob-summary > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.iob-summary span { color: var(--accent-text); font-weight: 700; font-size: .82rem; }
.iob-summary strong { color: var(--text); font-size: 1.25rem; white-space: nowrap; }
.iob-summary small { color: var(--muted); font-size: .72rem; text-align: right; }
#bolus-iob-settings { display: none; }

.activity-intensity-field { margin-bottom: 18px; }
.activity-intensity-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.activity-intensity-option { position: relative; min-width: 0; cursor: pointer; }
.activity-intensity-option > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.activity-intensity-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 5px;
  border: 1px solid rgba(174,169,198,.30);
  border: 1px solid color-mix(in srgb, var(--lavender) 30%, transparent);
  border-radius: 12px;
  background: rgba(16,34,54,.45);
  background: color-mix(in srgb, var(--navy) 45%, transparent);
  color: var(--lavender);
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.activity-intensity-option > input:checked + .activity-intensity-card {
  background: color-mix(in srgb, var(--lavender) 14%, var(--navy));
  border-color: var(--lavender);
  box-shadow: inset 0 0 0 1px var(--lavender);
  color: var(--text);
}
.activity-intensity-card::before {
  content: '';
  flex: 0 0 6px;
  width: 6px;
  height: 10px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  visibility: hidden;
}
.activity-intensity-option > input:checked + .activity-intensity-card::before { visibility: visible; }
.activity-intensity-option > input:focus-visible + .activity-intensity-card {
  outline: 3px solid var(--lavender);
  outline-offset: 3px;
}
.activity-detail-cell strong,
.activity-detail-cell small { display: block; }
.activity-detail-cell small { margin-top: 2px; color: var(--accent-text); font-size: .70rem; }

@media (max-width: 520px) {
  .iob-summary { padding: 10px 11px; margin-bottom: 15px; }
  .iob-summary > div { display: block; }
  .iob-summary span { display: block; font-size: .72rem; }
  .iob-summary strong { display: block; margin-top: 2px; font-size: 1.12rem; }
  .iob-summary small { max-width: 45%; font-size: .65rem; }
  .activity-intensity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-intensity-card { min-height: 44px; font-size: .76rem; }
  .activity-table th, .activity-table td { padding-left: 4px; padding-right: 4px; }
}


/* v34: six quick-access actions + visually aligned Mixed correction stepper. */
.mixed-correction-panel {
  margin-top: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.mixed-correction-panel label {
  margin-bottom: 7px;
}
.mixed-correction-panel .number-stepper {
  width: 100%;
  grid-template-columns: 48px minmax(76px, 1fr) 48px;
  gap: 8px;
}
.mixed-correction-panel .number-stepper .stepper-button {
  min-width: 48px;
  min-height: 48px;
}

@media (max-width: 520px) {
  .quick-input-nav {
    gap: 2px;
    padding: 3px;
  }
  .quick-input-link {
    min-width: 42px;
    min-height: 36px;
    padding: 0 5px;
    font-size: .68rem;
  }
  .quick-metrics-link {
    min-width: 50px;
  }
  .mixed-correction-panel {
    margin-top: 13px;
    padding: 0;
  }
  .mixed-correction-panel .number-stepper {
    grid-template-columns: 46px minmax(0, 1fr) 46px;
    gap: 7px;
  }
  .mixed-correction-panel .number-stepper .stepper-button {
    min-width: 0;
    min-height: 46px;
    height: 46px;
  }
}

@media (max-width: 390px) {
  .quick-input-link {
    min-width: 38px;
    padding: 0 4px;
    font-size: .64rem;
  }
  .quick-metrics-link {
    min-width: 46px;
  }
  .top-actions { gap: 3px; }
}

/* v35: per-entry carbohydrate absorption speed. */
.carbs-speed-field { margin: 0 0 18px; }
.carbs-speed-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 3px;
  border: 1px solid rgba(245,242,247,.18);
  border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  border-radius: 12px;
  background: rgba(16,34,54,.30);
  background: color-mix(in srgb, var(--navy) 30%, transparent);
}
.carbs-speed-option { display: block; margin: 0 !important; min-width: 0; cursor: pointer; }
.carbs-speed-option > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.carbs-speed-option > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 7px 6px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 800;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.carbs-speed-option > input:checked + span {
  background: var(--navy);
  background: color-mix(in srgb, var(--lavender) 14%, var(--navy));
  border-color: var(--lavender);
  color: var(--text-strong);
  box-shadow: inset 0 0 0 1px var(--lavender);
}
.carbs-speed-option > input:focus-visible + span {
  outline: 2px solid var(--lavender);
  outline-offset: 1px;
}
.carbs-speed-inline {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.15;
}
@media (max-width: 520px) {
  .carbs-speed-grid { gap: 4px; }
  .carbs-speed-option > span { min-height: 36px; padding: 5px 3px; font-size: .78rem; }
  .carbs-speed-inline { font-size: .61rem; }
}


/* v36: activity-aware ISF, 94/TDI comparison, and time-of-day sensitivity. */
.legend-activity {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--activity);
}
.tip-activity { background: var(--activity); }
.sensitivity-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.sensitivity-source { min-width: 0; }
.sensitivity-source-tdi {
  padding-left: 10px;
  border-left: 1px solid rgba(232,226,241,.15);
  border-left: 1px solid color-mix(in srgb, var(--mist) 15%, transparent);
}
.sensitivity-source-label {
  display: block;
  color: var(--accent-text);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.sensitivity-source strong {
  margin-top: 4px;
  font-size: 1.02rem;
}
.sensitivity-source small {
  line-height: 1.25;
}
.time-isf-section {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(232,226,241,.13);
  border-top: 1px solid color-mix(in srgb, var(--mist) 13%, transparent);
}
.time-isf-heading h3 { margin: 0 0 3px; color: var(--text-strong); font-size: .98rem; }
.time-isf-heading p { margin: 0; color: var(--muted); font-size: .74rem; line-height: 1.4; }
.time-isf-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
}
.time-isf-metric {
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(232,226,241,.12);
  border: 1px solid color-mix(in srgb, var(--mist) 12%, transparent);
  border-radius: 11px;
  background: rgba(174,169,198,.08);
  background: color-mix(in srgb, var(--lavender) 8%, transparent);
}
.time-isf-metric > span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}
.time-isf-metric > span small { color: var(--accent-text); font-size: .64rem; font-weight: 700; }
.time-isf-metric > strong {
  display: block;
  margin-top: 4px;
  color: var(--text-strong);
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
}
.time-isf-metric > small {
  display: block;
  margin-top: 3px;
  color: var(--accent-text);
  font-size: .66rem;
  line-height: 1.25;
}
@media (max-width: 720px) {
  .time-isf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .sensitivity-pair { gap: 7px; }
  .sensitivity-source-tdi { padding-left: 7px; }
  .sensitivity-source-label { font-size: .61rem; }
  .sensitivity-source strong { font-size: .88rem; }
  .sensitivity-source small { font-size: .64rem; }
  .time-isf-grid { gap: 6px; }
  .time-isf-metric { padding: 8px; }
  .time-isf-metric > strong { font-size: .82rem; }
}


/* v37: activity end-time semantics and centered input confirmations. */
.authenticated-shell .entry-form > .primary-button:not(.settings-save) {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* v39: separate bolus/basal action-duration metrics. */
.action-duration-card {
  background: linear-gradient(145deg, rgba(16,34,54,.98), rgba(34,50,70,.98));
  background: linear-gradient(145deg, color-mix(in srgb, var(--navy) 98%, transparent), color-mix(in srgb, var(--navy-soft) 98%, transparent));
}
.action-duration-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.action-duration-metric {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(245,242,247,.14);
  border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  background: color-mix(in srgb, var(--sheen) 6%, transparent);
}
.action-duration-metric > span {
  color: var(--accent-text);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.action-duration-metric > span small {
  margin-left: 4px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 700;
}
.action-duration-metric > strong {
  color: var(--text);
  font-size: 1.22rem;
  line-height: 1.15;
}
.action-duration-metric > small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}
.action-duration-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.48;
}
@media (max-width: 520px) {
  .action-duration-grid { grid-template-columns: 1fr; gap: 8px; }
  .action-duration-metric { padding: 10px 11px; }
}


/* v40: observed I:C metrics + correction suggestion. */
.correction-suggestion {
  margin: -4px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(174,169,198,.28);
  border: 1px solid color-mix(in srgb, var(--lavender) 28%, transparent);
  border-radius: 14px;
  background: rgba(132,85,120,.13);
  background: color-mix(in srgb, var(--plum) 13%, transparent);
}
.correction-suggestion[hidden] { display: none; }
.correction-suggestion-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.correction-suggestion-head > span {
  flex: 1;
  color: var(--accent-text);
  font-size: .82rem;
  font-weight: 800;
}
.correction-suggestion-head > strong {
  color: var(--text);
  font-size: 1.24rem;
  white-space: nowrap;
}
.correction-suggestion > small,
.correction-suggestion-help > small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}

.suggestion-inline-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 5px 9px;
  border: 1px solid rgba(245,242,247,.18);
  border: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
  border-radius: 999px;
  background: rgba(245,242,247,.08);
  background: color-mix(in srgb, var(--paper) 8%, transparent);
  color: var(--text);
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}
.suggestion-inline-action:hover,
.suggestion-inline-action:focus-visible {
  background: rgba(245,242,247,.14);
  background: color-mix(in srgb, var(--paper) 14%, transparent);
  outline: none;
}
.suggestion-inline-action[hidden] { display: none; }
.correction-suggestion-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 12px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(245,242,247,.11);
  border-top: 1px solid color-mix(in srgb, var(--paper) 11%, transparent);
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.35;
}
.correction-suggestion-breakdown[hidden] { display: none; }
.correction-suggestion-breakdown span { min-width: 0; }
.correction-suggestion-breakdown strong { color: var(--text); font-weight: 800; }

.ic-ratio-card {
  background: linear-gradient(145deg, rgba(16,34,54,.98), rgba(47,50,74,.98));
  background: linear-gradient(145deg, color-mix(in srgb, var(--navy) 98%, transparent), color-mix(in srgb, color-mix(in oklab, var(--violet) 24%, var(--navy)) 98%, transparent));
}
.time-ic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}
.time-ic-metric {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(232,226,241,.12);
  border: 1px solid color-mix(in srgb, var(--mist) 12%, transparent);
  border-radius: 11px;
  background: rgba(174,169,198,.08);
  background: color-mix(in srgb, var(--lavender) 8%, transparent);
}
.time-ic-metric > span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}
.time-ic-metric > span small {
  color: var(--accent-text);
  font-size: .64rem;
  font-weight: 700;
}
.time-ic-metric > strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: 1.03rem;
  font-variant-numeric: tabular-nums;
}
.time-ic-metric > small {
  display: block;
  margin-top: 3px;
  color: var(--accent-text);
  font-size: .66rem;
  line-height: 1.25;
}
.ic-ratio-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.48;
}

@media (max-width: 720px) {
  .time-ic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .correction-suggestion { padding: 10px 11px; margin-bottom: 15px; }
  .correction-suggestion-head > span { font-size: .72rem; }
  .correction-suggestion-head > strong { font-size: 1.12rem; }
  .correction-suggestion > small,
  .correction-suggestion-help > small { font-size: .67rem; }
  .correction-suggestion-breakdown { grid-template-columns: 1fr; gap: 4px; font-size: .66rem; }
  .time-ic-grid { gap: 6px; }
  .time-ic-metric { padding: 8px; }
}


/* v41: implicit Fast-Carbs absorption + Autoset Basal settings. */
.carbs-speed-field[hidden] { display: none !important; }
.settings-checkbox {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  background: color-mix(in srgb, var(--sheen) 82%, transparent);
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.settings-checkbox input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--navy);
}


/* v43: align the insulin/glucose settings rows and normalize Autoset Basal checkbox geometry. */
.insulin-settings-grid {
  align-items: start;
}

.settings-checkbox {
  box-sizing: border-box;
  padding: 0 14px;
  justify-content: flex-start;
}

.settings-checkbox input[type="checkbox"] {
  box-sizing: border-box;
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  box-shadow: none;
  align-self: center;
}

.settings-checkbox span {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  line-height: 1;
}

@media (max-width: 752px) {
  .settings-checkbox {
    min-height: 48px;
    padding-left: 14px;
    padding-right: 14px;
  }
}


/* v49: compact confidence display for short-term BG trend used by correction suggestions. */
.trend-confidence {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(245,242,247,.12);
  border: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  border-radius: 999px;
  background: rgba(16,34,54,.24);
  background: color-mix(in srgb, var(--navy) 24%, transparent);
  color: var(--muted);
  font-size: .68rem;
  line-height: 1;
}
.trend-confidence[hidden] { display: none; }
.trend-confidence > span:first-child { font-weight: 700; }
.trend-confidence > strong {
  color: var(--text);
  font-size: .68rem;
  font-weight: 800;
}
.trend-confidence-meter {
  display: inline-grid;
  grid-template-columns: repeat(3, 9px);
  gap: 2px;
  align-items: end;
  height: 12px;
}
.trend-confidence-meter i {
  display: block;
  width: 9px;
  border-radius: 2px;
  background: rgba(245,242,247,.16);
  background: color-mix(in srgb, var(--paper) 16%, transparent);
}
.trend-confidence-meter i:nth-child(1) { height: 4px; }
.trend-confidence-meter i:nth-child(2) { height: 8px; }
.trend-confidence-meter i:nth-child(3) { height: 12px; }
.trend-confidence-meter[data-level="low"] i:nth-child(1),
.trend-confidence-meter[data-level="medium"] i:nth-child(-n+2),
.trend-confidence-meter[data-level="high"] i:nth-child(-n+3) {
  background: var(--lavender);
}
@media (max-width: 520px) {
  .trend-confidence { font-size: .64rem; gap: 6px; }
  .trend-confidence > strong { font-size: .64rem; }
}


/* v51: visible clean-correction readiness and provisional ISF confidence. */
.isf-readiness {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(245,242,247,.11);
  border-top: 1px solid color-mix(in srgb, var(--paper) 11%, transparent);
}
.isf-readiness-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .69rem;
}
.isf-readiness-row > span:first-child { font-weight: 700; }
.isf-readiness-row > strong {
  color: var(--text);
  font-size: .74rem;
  font-weight: 800;
}
.isf-readiness > small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: .66rem;
  line-height: 1.38;
}
.isf-confidence-badge {
  margin-left: auto;
  padding: 4px 7px;
  border: 1px solid rgba(245,242,247,.12);
  border: 1px solid color-mix(in srgb, var(--paper) 12%, transparent);
  border-radius: 999px;
  background: rgba(16,34,54,.24);
  background: color-mix(in srgb, var(--navy) 24%, transparent);
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
}
.isf-confidence-badge[data-level="low"] { opacity: .78; }
.isf-confidence-badge[data-level="medium"] { opacity: .9; }
.isf-confidence-badge[data-level="high"] { opacity: 1; }
.isf-confidence-badge[data-level="insufficient"] { color: var(--muted); }
@media (max-width: 520px) {
  .isf-readiness-row { gap: 6px; font-size: .64rem; }
  .isf-readiness-row > strong { font-size: .67rem; }
  .isf-readiness > small { font-size: .62rem; }
  .isf-confidence-badge { margin-left: 0; }
}

/* v53: configurable prospective BG-trend window/spacing and confidence ceiling. */
.trend-setting-cap {
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid rgba(174,169,198,.28);
  border: 1px solid color-mix(in srgb, var(--lavender) 28%, transparent);
  border-radius: 12px;
  background: rgba(121,113,164,.10);
  background: color-mix(in srgb, var(--violet) 10%, transparent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.trend-setting-cap strong { font-size: .78rem; }
.trend-setting-cap span { color: var(--muted); font-size: .72rem; line-height: 1.35; }
.trend-setting-cap.is-warning {
  border-color: rgba(132,85,120,.48);
  border-color: color-mix(in srgb, var(--plum) 48%, transparent);
  background: rgba(132,85,120,.12);
  background: color-mix(in srgb, var(--plum) 12%, transparent);
}
.trend-setting-cap.is-warning strong { color: var(--plum); }

/* v55: selected ISF basis status inside the Bolus correction readiness block. */
.isf-basis-row {
  margin-top: 5px;
}
.isf-basis-row > span:last-child {
  color: var(--muted);
  font-size: .66rem;
}


/* v56: keep TDI readiness visually primary and demote clean corrections to reference-only status when TDI is selected. */
.clean-corrections-row {
  margin-top: 5px;
}
.clean-corrections-row.is-reference {
  margin-top: 6px;
  opacity: .58;
  font-size: .62rem;
}
.clean-corrections-row.is-reference > span:first-child {
  font-weight: 600;
}
.clean-corrections-row.is-reference > strong {
  font-size: .65rem;
  font-weight: 700;
}
.isf-readiness > small.is-reference {
  opacity: .56;
  font-size: .61rem;
}
.isf-basis-row .isf-confidence-badge {
  margin-left: auto;
}
@media (max-width: 520px) {
  .isf-basis-row .isf-confidence-badge { margin-left: 0; }
  .clean-corrections-row.is-reference { font-size: .59rem; }
  .isf-readiness > small.is-reference { font-size: .58rem; }
}

/* v57: Food + Correction Mixed Bolus input mode. */
.mixed-components-panel .mixed-component + .mixed-component {
  margin-top: 13px;
}
.mixed-components-panel > small {
  display: block;
}


/* v58: post-basal default update prompt and future timestamp warning. */
.basal-default-prompt {
  border-color: rgba(174, 169, 198, .34);
  border-color: color-mix(in srgb, var(--lavender) 34%, transparent);
}
.basal-default-prompt h2 { margin-bottom: 8px; }
.basal-default-prompt p { margin: 0; }
.basal-default-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.basal-default-actions form { margin: 0; }
.basal-default-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border: 1px solid rgba(232, 226, 241, .24);
  border: 1px solid color-mix(in srgb, var(--mist) 24%, transparent);
  border-radius: 11px;
  background: rgba(174, 169, 198, .12);
  background: color-mix(in srgb, var(--lavender) 12%, transparent);
  color: var(--text);
  font-weight: 750;
  text-decoration: none;
}
.basal-default-no:hover,
.basal-default-no:focus-visible {
  background: rgba(174, 169, 198, .21);
  background: color-mix(in srgb, var(--lavender) 21%, transparent);
  outline: none;
}
.future-entry-icon {
  font-size: 1.45rem;
  font-weight: 800;
}
.future-entry-note {
  margin-top: 12px !important;
}
@media (max-width: 520px) {
  .basal-default-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .basal-default-actions .primary-button,
  .basal-default-no { width: 100%; }
}

/* v59: basal stability / background BG drift metric. */
.basal-stability-card {
  background: linear-gradient(145deg, rgba(16,34,54,.98), rgba(34,50,70,.98));
  background: linear-gradient(145deg, color-mix(in srgb, var(--navy) 98%, transparent), color-mix(in srgb, var(--navy-soft) 98%, transparent));
}
.basal-stability-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.basal-stability-metric {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(245,242,247,.14);
  border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  background: color-mix(in srgb, var(--sheen) 6%, transparent);
}
.basal-stability-metric > span {
  color: var(--accent-text);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.basal-stability-metric > strong {
  color: var(--text);
  font-size: 1.22rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.basal-stability-metric > small {
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.4;
}
.basal-stability-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.48;
}
@media (max-width: 520px) {
  .basal-stability-grid { grid-template-columns: 1fr; gap: 8px; }
  .basal-stability-metric { padding: 10px 11px; }
}


/* v60: make the basal-stability analysis window explicit and flag dose-change truncation. */
.basal-stability-window {
  display: inline-flex;
  align-items: center;
  margin: 10px 0 0;
  padding: 6px 9px;
  border: 1px solid rgba(245,242,247,.14);
  border: 1px solid color-mix(in srgb, var(--paper) 14%, transparent);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  background: color-mix(in srgb, var(--sheen) 5%, transparent);
  color: var(--muted);
  font-size: .72rem;
  line-height: 1.3;
}
.basal-stability-window.is-shortened {
  border-color: rgba(174,169,198,.38);
  border-color: color-mix(in srgb, var(--lavender) 38%, transparent);
  color: var(--accent-text);
}

/* v62: day-based Context input, daily continuation prompt and Timeline shading. */
.context-type-field { margin-bottom: 18px; }
.context-type-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.context-type-option { position: relative; min-width: 0; cursor: pointer; }
.context-type-option > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.context-type-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 8px 5px;
  border: 1px solid rgba(174,169,198,.30);
  border: 1px solid color-mix(in srgb, var(--lavender) 30%, transparent);
  border-radius: 12px;
  background: rgba(16,34,54,.45);
  background: color-mix(in srgb, var(--navy) 45%, transparent);
  color: var(--lavender);
  font-size: .78rem;
  font-weight: 700;
  text-align: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.context-type-option > input:checked + .context-type-card {
  background: linear-gradient(145deg, var(--violet), var(--plum));
  border-color: rgba(255,255,255,.34);
  border-color: color-mix(in srgb, var(--sheen) 34%, transparent);
  color: var(--text);
}
.context-type-option > input:focus-visible + .context-type-card {
  outline: 2px solid rgba(255,255,255,.78);
  outline: 2px solid color-mix(in srgb, var(--sheen) 78%, transparent);
  outline-offset: 2px;
}
.context-form select,
.context-form textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(245,242,247,.62);
  border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent);
  border-radius: 11px;
  background: rgba(224,220,236,.88);
  background: color-mix(in srgb, var(--field) 88%, transparent);
  color: var(--ink);
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sheen) 42%, transparent);
}
.context-form select { min-height: 48px; }
.context-form textarea { min-height: 90px; resize: vertical; line-height: 1.4; }
.context-form select:focus,
.context-form textarea:focus {
  border-color: var(--sheen);
  outline: 3px solid rgba(174,169,198,.34);
  outline: 3px solid color-mix(in srgb, var(--lavender) 34%, transparent);
  background: rgba(239,236,245,.96);
  background: color-mix(in srgb, color-mix(in oklab, var(--sheen) 46.5%, var(--field)) 96%, transparent);
}
.context-note-field { margin: 0 0 18px; }
.field-optional { color: var(--muted); font-size: .70rem; font-weight: 600; }
.active-context-list { display: grid; gap: 9px; }
.active-context-chip {
  width: 100%;
  min-width: 0;
  padding: 11px 13px;
  border: 1px solid rgba(232,226,241,.18);
  border: 1px solid color-mix(in srgb, var(--mist) 18%, transparent);
  border-left: 4px solid var(--lavender);
  border-radius: 12px;
  background: rgba(16,34,54,.20);
  background: color-mix(in srgb, var(--navy) 20%, transparent);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.active-context-chip:hover { background: rgba(174,169,198,.10); background: color-mix(in srgb, var(--lavender) 10%, transparent); }
.active-context-chip:focus-visible { outline: 3px solid rgba(174,169,198,.34); outline: 3px solid color-mix(in srgb, var(--lavender) 34%, transparent); outline-offset: 2px; }
.active-context-chip.is-selected { background: rgba(174,169,198,.16); background: color-mix(in srgb, var(--lavender) 16%, transparent); border-color: rgba(232,226,241,.34); border-color: color-mix(in srgb, var(--mist) 34%, transparent); }
.active-context-chip > span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.active-context-chip strong { color: var(--text-strong); }
.active-context-chip small { color: var(--accent-text); font-size: .72rem; white-space: nowrap; }
.active-context-chip p { margin: 6px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.35; }
.active-context-chip.context-illness { border-left-color: var(--plum); }
.active-context-chip.context-stress { border-left-color: var(--fast-carbs); }
.active-context-chip.context-hormonal { border-left-color: var(--violet); }
.active-context-chip.context-poor_sleep { border-left-color: var(--food-carbs); }
.context-detail-cell strong,
.context-detail-cell small { display: block; }
.context-detail-cell small {
  margin-top: 2px;
  color: var(--accent-text);
  font-size: .70rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.context-period-cell { font-variant-numeric: tabular-nums; }

.context-reminder-backdrop {
  background: rgba(7,18,30,.45);
  background: color-mix(in srgb, color-mix(in oklab, var(--shadow-color) 92.5%, black) 45%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.context-reminder-modal {
  width: min(390px, 100%);
  padding: 20px;
}
.context-reminder-kicker {
  margin-bottom: 7px;
  color: var(--accent-text);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.context-reminder-modal h2 { margin-bottom: 8px; font-size: 1.16rem; }
.context-reminder-modal #context-reminder-message { color: var(--text); font-weight: 700; }
.context-reminder-note {
  margin: 10px 0 0 !important;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(174,169,198,.10);
  background: color-mix(in srgb, var(--lavender) 10%, transparent);
  color: var(--muted) !important;
  font-size: .78rem;
  line-height: 1.35;
}
.context-reminder-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 17px;
}
.context-answer-yes {
  border: 1px solid rgba(232,226,241,.26);
  border: 1px solid color-mix(in srgb, var(--mist) 26%, transparent);
  background: rgba(121,113,164,.48);
  background: color-mix(in srgb, var(--violet) 48%, transparent);
  color: var(--text-strong);
}
.context-answer-no {
  border: 1px solid rgba(232,226,241,.22);
  border: 1px solid color-mix(in srgb, var(--mist) 22%, transparent);
  background: rgba(132,85,120,.35);
  background: color-mix(in srgb, var(--plum) 35%, transparent);
  color: var(--text-strong);
}
.context-answer-later {
  grid-column: 1 / -1;
  border: 1px solid rgba(232,226,241,.20);
  border: 1px solid color-mix(in srgb, var(--mist) 20%, transparent);
  background: rgba(174,169,198,.10);
  background: color-mix(in srgb, var(--lavender) 10%, transparent);
  color: var(--muted);
}
.context-reminder-actions .modal-button:disabled { opacity: .55; cursor: wait; }

.legend-context {
  background: linear-gradient(135deg, rgba(132,85,120,.34), rgba(121,113,164,.24));
  background: linear-gradient(135deg, color-mix(in srgb, var(--series-context) 34%, transparent), color-mix(in srgb, var(--violet) 24%, transparent));
  border-color: rgba(232,226,241,.42);
  border-color: color-mix(in srgb, var(--mist) 42%, transparent);
}
.tip-context { background: var(--series-context); }

@media (max-width: 520px) {
  .context-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .context-type-card { min-height: 44px; font-size: .76rem; }
  .context-form-grid { gap: 14px; }
  .active-context-chip > span { display: block; }
  .active-context-chip small { display: block; margin-top: 2px; }
  .context-table th:first-child, .context-table td:first-child { width: 42%; white-space: normal; }
  .context-table th:nth-child(2), .context-table td:nth-child(2) { width: 34%; text-align: left; }
  .context-table th:last-child, .context-table td:last-child { width: 24%; }
  .context-period-cell { font-size: .70rem; line-height: 1.25; }
  .context-detail-cell strong { font-size: .77rem; }
  .context-detail-cell small { font-size: .64rem; }
  .quick-input-link { min-width: 39px; padding-left: 4px; padding-right: 4px; font-size: .64rem; }
  .quick-context-link { min-width: 48px; }
  .quick-metrics-link { min-width: 47px; }
}

@media (max-width: 390px) {
  .quick-input-link { min-width: 35px; padding-left: 3px; padding-right: 3px; font-size: .60rem; }
  .quick-context-link { min-width: 44px; }
  .quick-metrics-link { min-width: 43px; }
  .top-actions .menu-toggle { width: 42px; height: 42px; }
}

/* v63: Other is a peer Context category with its own custom name. */
.context-type-other { grid-column: 1 / -1; }
.context-type-other .context-type-card { min-height: 44px; }
.context-custom-field { margin: -7px 0 18px; }
.context-custom-field[hidden] { display: none !important; }
.context-form input[type="text"] {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid rgba(245,242,247,.62);
  border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent);
  border-radius: 11px;
  background: rgba(224,220,236,.88);
  background: color-mix(in srgb, var(--field) 88%, transparent);
  color: var(--ink);
  font: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sheen) 42%, transparent);
}
.context-form input[type="text"]:focus {
  border-color: var(--sheen);
  outline: 3px solid rgba(174,169,198,.34);
  outline: 3px solid color-mix(in srgb, var(--lavender) 34%, transparent);
  background: rgba(239,236,245,.96);
  background: color-mix(in srgb, color-mix(in oklab, var(--sheen) 46.5%, var(--field)) 96%, transparent);
}
.active-context-chip.context-other { border-left-color: var(--lavender); }

/* v65: reorganized Default Settings sections. */
.settings-section-intro {
  margin: -3px 0 14px;
  color: var(--muted);
  font-size: .80rem;
  line-height: 1.4;
}
.app-settings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
@media (max-width: 720px) {
  .app-settings-grid { grid-template-columns: 1fr; }
  .settings-section-intro { font-size: .76rem; }
}

/* v69: 14-day recorded-range statistics and Scheiner-style pattern review. */
.recorded-range-card,
.patterns-card { overflow: hidden; }
.recorded-range-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.recorded-range-metric {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(214,207,225,.15);
  border: 1px solid color-mix(in srgb, var(--muted) 15%, transparent);
  border-radius: 13px;
  background: rgba(16,34,54,.28);
  background: color-mix(in srgb, var(--navy) 28%, transparent);
}
.recorded-range-metric > span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 750;
}
.recorded-range-metric > span small {
  color: var(--accent-text);
  font-size: .65rem;
  font-weight: 700;
}
.recorded-range-metric > strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 1.04rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.recorded-range-below > strong { color: #e7c0b8; color: color-mix(in oklab, color-mix(in oklab, var(--rose) 68%, var(--warning)) 50%, var(--text)); }
.recorded-range-in > strong { color: #ddd8e8; color: color-mix(in oklab, var(--text) 26.5%, var(--muted)); }
.recorded-range-above > strong { color: #e8b8aa; color: color-mix(in oklab, color-mix(in oklab, var(--rose) 52%, var(--text-strong)) 79%, var(--warning)); }
.recorded-range-meta {
  margin: 11px 1px 0;
  color: var(--muted);
  font-size: .70rem;
}
.pattern-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.pattern-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  column-gap: 14px;
  row-gap: 4px;
  align-items: baseline;
  padding: 12px 13px;
  border: 1px solid rgba(214,207,225,.15);
  border: 1px solid color-mix(in srgb, var(--muted) 15%, transparent);
  border-radius: 13px;
  background: rgba(16,34,54,.25);
  background: color-mix(in srgb, var(--navy) 25%, transparent);
}
.pattern-question {
  color: var(--text);
  font-size: .82rem;
  font-weight: 800;
}
.pattern-row > strong {
  color: var(--accent-text);
  font-size: .92rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.pattern-row > small {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: .69rem;
  line-height: 1.4;
}
@media (max-width: 680px) {
  .recorded-range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .recorded-range-metric { padding: 10px 11px; }
  .recorded-range-metric > strong { font-size: .96rem; }
  .pattern-row { grid-template-columns: 1fr; gap: 5px; }
  .pattern-row > strong { text-align: left; }
}


/* v71: configured I:C ratios, meal-carbohydrate handoff and complete bolus equation. */
/* v79: Scheiner 500/TDI I:C starting reference. */
.ic-tdi-reference {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(232,226,241,.14);
  border: 1px solid color-mix(in srgb, var(--mist) 14%, transparent);
  border-radius: 12px;
  background: rgba(174,169,198,.08);
  background: color-mix(in srgb, var(--lavender) 8%, transparent);
}
.ic-tdi-reference > div { min-width: 0; }
.ic-tdi-reference span {
  display: block;
  color: var(--muted);
  font-size: .69rem;
  font-weight: 800;
}
.ic-tdi-reference strong {
  display: block;
  margin-top: 2px;
  color: var(--text);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.ic-tdi-reference > small {
  max-width: 58%;
  color: var(--accent-text);
  font-size: .67rem;
  line-height: 1.35;
  text-align: right;
}

.configured-ic-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.ic-config-field {
  padding: 11px;
  border: 1px solid rgba(232,226,241,.14);
  border: 1px solid color-mix(in srgb, var(--mist) 14%, transparent);
  border-radius: 12px;
  background: rgba(16,34,54,.24);
  background: color-mix(in srgb, var(--navy) 24%, transparent);
}
.ic-config-field > label {
  color: var(--text);
  font-weight: 800;
}
.ic-config-field > label small { color: var(--accent-text); font-size: .68rem; }
.ic-config-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.ic-config-input > span { color: var(--muted); font-size: .78rem; font-weight: 800; }
.ic-config-input input { min-width: 0; text-align: center; font-weight: 800; }
.ic-calibration-line { display: block; margin-top: 7px; color: var(--muted); font-size: .68rem; line-height: 1.35; }
.ic-calibration-line strong { color: var(--text); }
.ic-calibration-line span { display: block; margin-top: 2px; color: var(--accent-text); }
.ic-settings-note { margin-top: 10px; }

.meal-ic-panel {
  margin: 0 0 16px;
  padding: 12px 13px;
  border: 1px solid rgba(174,169,198,.22);
  border: 1px solid color-mix(in srgb, var(--lavender) 22%, transparent);
  border-radius: 13px;
  background: rgba(16,34,54,.24);
  background: color-mix(in srgb, var(--navy) 24%, transparent);
}
.meal-ic-panel[hidden] { display: none !important; }
.meal-ic-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 12px;
  align-items: end;
}
.meal-ic-grid label small { color: var(--muted); font-size: .68rem; font-weight: 700; }
.meal-ic-grid input { min-height: 46px; }
.meal-ic-comparison {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 10px;
  padding: 9px 10px;
  border: 1px solid rgba(232,226,241,.11);
  border: 1px solid color-mix(in srgb, var(--mist) 11%, transparent);
  border-radius: 10px;
  background: rgba(174,169,198,.07);
  background: color-mix(in srgb, var(--lavender) 7%, transparent);
}
.meal-ic-comparison span { color: var(--muted); font-size: .71rem; font-weight: 750; }
.meal-ic-comparison strong { display: block; margin-top: 2px; color: var(--text); font-size: .94rem; }
.meal-ic-comparison small { grid-column: 1 / -1; color: var(--accent-text); font-size: .65rem; }
.meal-food-dose-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(245,242,247,.10);
  border-top: 1px solid color-mix(in srgb, var(--paper) 10%, transparent);
}
.meal-food-dose-row > div > span { display: block; color: var(--muted); font-size: .69rem; font-weight: 750; }
.meal-food-dose-row > div > strong { display: inline-block; margin-top: 2px; color: var(--text); font-size: 1.06rem; }
.meal-food-dose-row > div > small { display: block; margin-top: 2px; color: var(--accent-text); font-size: .65rem; line-height: 1.3; }
.meal-use-dose { flex: 0 0 auto; margin-top: 0; }
.meal-ic-note { display: block; margin-top: 8px; color: var(--muted); font-size: .66rem; line-height: 1.35; }

.bolus-equation {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 5px;
  margin-top: 9px;
  padding: 8px;
  border: 1px solid rgba(245,242,247,.11);
  border: 1px solid color-mix(in srgb, var(--paper) 11%, transparent);
  border-radius: 10px;
  background: rgba(16,34,54,.20);
  background: color-mix(in srgb, var(--navy) 20%, transparent);
}
.bolus-equation[hidden] { display: none !important; }
.bolus-equation > span {
  flex: 1 1 105px;
  min-width: 0;
  padding: 6px 7px;
  border-radius: 8px;
  background: rgba(245,242,247,.05);
  background: color-mix(in srgb, var(--paper) 5%, transparent);
}
.bolus-equation > span small { display: block; color: var(--muted); font-size: .61rem; font-weight: 750; }
.bolus-equation > span strong { display: block; margin-top: 2px; color: var(--text); font-size: .82rem; font-variant-numeric: tabular-nums; }
.bolus-equation > b { align-self: center; color: var(--accent-text); font-size: .85rem; }
.bolus-equation .equation-result { background: rgba(132,85,120,.18); background: color-mix(in srgb, var(--plum) 18%, transparent); }

.carbs-bolus-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.carbs-bolus-next h2 { margin-bottom: 4px; }
.carbs-bolus-next p { margin: 0; }
.carbs-bolus-next .primary-button { margin: 0; white-space: nowrap; text-decoration: none; }

@media (max-width: 720px) {
  .configured-ic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meal-ic-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ic-tdi-reference { align-items: flex-start; flex-direction: column; gap: 4px; }
  .ic-tdi-reference > small { max-width: none; text-align: left; }
  .configured-ic-grid { gap: 7px; }
  .ic-config-field { padding: 9px; }
  .meal-ic-panel { padding: 10px; }
  .meal-ic-comparison { gap: 4px 7px; }
  .meal-food-dose-row { align-items: flex-start; flex-direction: column; }
  .bolus-equation { gap: 4px; }
  .bolus-equation > span { flex-basis: 92px; }
  .carbs-bolus-next { align-items: stretch; flex-direction: column; }
  .carbs-bolus-next .primary-button { text-align: center; }
}

/* v72: structured basal-test workflow.
   v73: use a dedicated dark-on-light text palette for the pale surfaces
   inside the basal-test workflow. */
.basal-test-active-card,
.basal-test-start-card {
  --basal-light-ink: #1f2f43;
  --basal-light-muted: #3f4d61;
}
.basal-test-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.basal-test-launch .primary-button { margin: 0; text-decoration: none; white-space: nowrap; }
.basal-test-kicker {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.basal-test-active-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.basal-test-active-head h2 { margin: 0 0 4px; }
.basal-test-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  background: color-mix(in srgb, var(--sheen) 72%, transparent);
  color: var(--basal-light-ink);
  font-size: .72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.basal-test-status.status-active { border-color: rgba(29,79,120,.28); border-color: color-mix(in srgb, var(--info) 28%, transparent); background: rgba(224,239,252,.75); background: color-mix(in srgb, color-mix(in oklab, var(--info) 10%, var(--status-surface)) 75%, transparent); }
.basal-test-status.status-completed { border-color: rgba(41,105,77,.25); border-color: color-mix(in srgb, var(--success) 25%, transparent); background: rgba(226,244,235,.78); background: color-mix(in srgb, color-mix(in oklab, var(--success) 9.5%, var(--status-surface)) 78%, transparent); }
.basal-test-status.status-confounded { border-color: rgba(157,112,27,.28); border-color: color-mix(in srgb, var(--warning) 28%, transparent); background: rgba(251,242,218,.85); background: color-mix(in srgb, color-mix(in oklab, var(--warning) 10.5%, var(--status-surface)) 85%, transparent); }
.basal-test-status.status-aborted { border-color: rgba(145,61,61,.25); border-color: color-mix(in srgb, var(--danger) 25%, transparent); background: rgba(250,229,229,.8); background: color-mix(in srgb, color-mix(in oklab, var(--danger) 12%, var(--status-surface)) 80%, transparent); }
.basal-test-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.basal-test-summary-item {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255,255,255,.7);
  background: color-mix(in srgb, var(--sheen) 70%, transparent);
}
.basal-test-summary-item > span {
  display: block;
  color: var(--basal-light-muted);
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: 4px;
}
.basal-test-summary-item > strong { display: block; font-size: 1.05rem; color: var(--ink); }
.basal-test-summary-item > small { display: block; margin-top: 4px; color: var(--basal-light-muted); line-height: 1.35; }
.basal-test-result.stable { border-color: rgba(41,105,77,.25); border-color: color-mix(in srgb, var(--success) 25%, transparent); }
.basal-test-result.rising,
.basal-test-result.falling { border-color: rgba(157,112,27,.32); border-color: color-mix(in srgb, var(--warning) 32%, transparent); }
.basal-test-warning {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(157,112,27,.3);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
  border-radius: 13px;
  background: rgba(251,242,218,.75);
  background: color-mix(in srgb, color-mix(in oklab, var(--warning) 10.5%, var(--text-strong)) 75%, transparent);
  color: var(--basal-light-ink);
}
.basal-test-warning ul { margin: 7px 0; padding-left: 20px; }
.basal-test-warning p { margin: 6px 0 0; color: var(--basal-light-muted); }
.basal-test-schedule { margin: 16px 0; }
.basal-test-schedule h3,
.basal-test-reading-grid h3,
.basal-test-checklist h3 { margin: 0 0 6px; }
.basal-test-checkpoint-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.basal-test-checkpoint-list span {
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  background: color-mix(in srgb, var(--sheen) 72%, transparent);
  color: var(--basal-light-ink);
  font-size: .72rem;
  font-weight: 700;
}
.basal-test-reading-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 16px;
  align-items: start;
}
.basal-test-bg-form {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  background: color-mix(in srgb, var(--sheen) 72%, transparent);
  color: var(--basal-light-ink);
}
.basal-test-bg-form h3,
.basal-test-bg-form label,
.basal-test-bg-form .field-label { color: var(--basal-light-ink); }
.basal-test-bg-form small { color: var(--basal-light-muted); }
.basal-test-stop-note { margin: 10px 0; color: var(--basal-light-muted); font-size: .78rem; line-height: 1.45; }
.basal-test-finish-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 16px;
}
.basal-test-finish-actions form { margin: 0; }
.basal-test-finish-actions .primary-button { margin: 0; }
.basal-test-abort-button {
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid rgba(145,61,61,.35);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  border-radius: 11px;
  background: rgba(255,255,255,.78);
  background: color-mix(in srgb, var(--sheen) 78%, transparent);
  color: #7d3434;
  color: color-mix(in oklab, var(--danger) 84.5%, var(--shadow-color));
  font-weight: 800;
  cursor: pointer;
}
.basal-test-segment-fieldset { border: 0; margin: 0 0 16px; padding: 0; }
.basal-test-segment-fieldset legend { margin-bottom: 8px; font-weight: 800; }
.basal-test-segment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.basal-test-segment-option {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  min-height: 64px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.55);
  background: color-mix(in srgb, var(--sheen) 55%, transparent);
  color: var(--basal-light-muted);
  opacity: .76;
  transition: border-color .16s ease, background .16s ease, opacity .16s ease, transform .16s ease;
}
.basal-test-segment-option.is-selected {
  border-color: rgba(49,74,118,.5);
  border-color: color-mix(in srgb, color-mix(in oklab, color-mix(in oklab, var(--info) 74%, var(--navy)) 80%, var(--violet)) 50%, transparent);
  background: rgba(225,234,243,.94);
  background: color-mix(in srgb, var(--light-panel) 94%, transparent);
  color: var(--basal-light-ink);
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(111,99,144,.12);
  box-shadow: 0 0 0 2px color-mix(in srgb, color-mix(in oklab, var(--violet) 88%, var(--shadow-color)) 12%, transparent);
}
.basal-test-segment-option span { display: grid; gap: 2px; }
.basal-test-segment-option small { color: var(--basal-light-muted); font-size: .69rem; line-height: 1.3; }
.basal-test-auto-segment-note {
  display: grid;
  gap: 3px;
  margin-top: 9px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(225,234,243,.52);
  background: color-mix(in srgb, var(--light-panel) 52%, transparent);
  color: var(--basal-light-ink);
  font-size: .76rem;
  line-height: 1.4;
}
.basal-test-auto-segment-note span { color: var(--basal-light-muted); }
.basal-test-start-grid { margin-bottom: 16px; }
.basal-test-checklist {
  display: grid;
  gap: 7px;
  margin: 6px 0 16px;
}
.basal-test-checklist > p { margin: 0 0 4px; color: var(--muted); font-size: .78rem; }
/* v82: use a native label-wrapped checkbox with a separate visual box.
   The real checkbox remains focusable/form-valid but is visually hidden; tapping anywhere
   on the card delegates to the native label behavior, which is reliable on mobile. */
.entry-form label.basal-test-check {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: stretch;
  min-height: 58px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,.64);
  background: color-mix(in srgb, var(--sheen) 64%, transparent);
  color: var(--basal-light-ink);
  font-size: .8rem;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
.entry-form label.basal-test-check > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.basal-test-check-box {
  grid-column: 1;
  align-self: start;
  justify-self: center;
  display: grid;
  place-content: center;
  width: 22px;
  height: 22px;
  margin-top: 8px;
  border: 2px solid rgba(31,47,67,.58);
  border: 2px solid color-mix(in srgb, color-mix(in oklab, var(--ink) 92%, var(--muted)) 58%, transparent);
  border-radius: 6px;
  background: rgba(255,255,255,.9);
  background: color-mix(in srgb, var(--sheen) 90%, transparent);
  box-shadow: 0 1px 2px rgba(16,34,54,.12);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--navy) 12%, transparent);
  transition: border-color .14s ease, background .14s ease, box-shadow .14s ease, transform .14s ease;
}
.basal-test-check-box::before {
  content: "";
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--sheen);
  border-bottom: 2px solid var(--sheen);
  transform: translateY(-1px) rotate(-45deg) scale(0);
  transform-origin: center;
  transition: transform .12s ease;
}
.basal-test-check-text {
  grid-column: 2;
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 11px 12px 11px 14px;
  border-left: 1px solid rgba(31,47,67,.12);
  border-left: 1px solid color-mix(in srgb, color-mix(in oklab, var(--ink) 92%, var(--muted)) 12%, transparent);
  color: var(--basal-light-ink);
}
.entry-form label.basal-test-check > input[type="checkbox"]:checked + .basal-test-check-box {
  border-color: var(--navy);
  background: var(--navy);
  box-shadow: 0 1px 3px rgba(16,34,54,.22);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--navy) 22%, transparent);
}
.entry-form label.basal-test-check > input[type="checkbox"]:checked + .basal-test-check-box::before {
  transform: translateY(-1px) rotate(-45deg) scale(1);
}
.entry-form label.basal-test-check > input[type="checkbox"]:focus-visible + .basal-test-check-box {
  outline: 3px solid rgba(111,99,144,.28);
  outline: 3px solid color-mix(in srgb, color-mix(in oklab, var(--violet) 88%, var(--shadow-color)) 28%, transparent);
  outline-offset: 2px;
}
.entry-form label.basal-test-check:hover {
  border-color: rgba(49,74,118,.32);
  border-color: color-mix(in srgb, color-mix(in oklab, color-mix(in oklab, var(--info) 74%, var(--navy)) 80%, var(--violet)) 32%, transparent);
  background: rgba(255,255,255,.72);
  background: color-mix(in srgb, var(--sheen) 72%, transparent);
}
.entry-form label.basal-test-check:has(> input[type="checkbox"]:checked) {
  border-color: rgba(49,74,118,.28);
  border-color: color-mix(in srgb, color-mix(in oklab, color-mix(in oklab, var(--info) 74%, var(--navy)) 80%, var(--violet)) 28%, transparent);
  background: rgba(236,241,247,.82);
  background: color-mix(in srgb, color-mix(in oklab, var(--light-panel) 65.5%, var(--sheen)) 82%, transparent);
}
.basal-test-check-safety { border-color: rgba(145,61,61,.24); border-color: color-mix(in srgb, var(--danger) 24%, transparent); }
.basal-test-method-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 0 16px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(225,234,243,.52);
  background: color-mix(in srgb, var(--light-panel) 52%, transparent);
  color: var(--ink);
  font-size: .79rem;
  line-height: 1.4;
}
.basal-test-method-note span { color: var(--basal-light-muted); }
.basal-test-history-result { display: block; min-width: 220px; font-size: .77rem; line-height: 1.35; }
.basal-test-history-table td small { display: block; margin-top: 4px; color: var(--muted); max-width: 300px; }

@media (max-width: 900px) {
  .basal-test-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .basal-test-segment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .basal-test-reading-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .basal-test-launch { align-items: stretch; flex-direction: column; }
  .basal-test-launch .primary-button { text-align: center; }
  .basal-test-active-head { align-items: flex-start; }
  .basal-test-summary-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .basal-test-summary-item { padding: 9px; }
  .basal-test-segment-grid { grid-template-columns: 1fr; }
  .basal-test-finish-actions { align-items: stretch; flex-direction: column; }
  .basal-test-finish-actions form,
  .basal-test-finish-actions button { width: 100%; }
  .basal-test-method-note { grid-template-columns: 1fr; gap: 3px; }
}

/* v75: Food/Mixed boluses read the latest Food Carbs record from the
   preceding 30 minutes instead of accepting a second carbohydrate input. */
.recent-meal-carbs {
  position: relative;
  min-height: 82px;
  padding: 10px 11px;
  border: 1px solid rgba(232,226,241,.11);
  border: 1px solid color-mix(in srgb, var(--mist) 11%, transparent);
  border-radius: 10px;
  background: rgba(174,169,198,.07);
  background: color-mix(in srgb, var(--lavender) 7%, transparent);
}
.recent-meal-carbs > .field-label {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: .71rem;
  font-weight: 750;
}
.recent-meal-carbs > strong {
  display: block;
  color: var(--text);
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
}
.recent-meal-carbs > small {
  display: block;
  margin-top: 3px;
  padding-right: 1px;
  color: var(--accent-text);
  font-size: .65rem;
  line-height: 1.35;
}
.recent-meal-carbs.is-missing > strong { color: var(--muted); }
.meal-carbs-link {
  display: inline-block;
  margin-top: 6px;
  color: var(--text);
  font-size: .65rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* v77: in-place entry editing and compact mobile history rows. */
.update-mode-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.42);
  border: 1px solid color-mix(in srgb, var(--sheen) 42%, transparent);
  border-radius: 13px;
  background: rgba(174,169,198,.92);
  background: color-mix(in srgb, var(--lavender) 92%, transparent);
  color: var(--ink);
  box-shadow: 0 8px 22px rgba(7,18,30,.14);
  box-shadow: 0 8px 22px color-mix(in srgb, color-mix(in oklab, var(--shadow-color) 92.5%, black) 14%, transparent);
}
.update-mode-banner > div { min-width: 0; }
.update-mode-kicker {
  display: block;
  margin-bottom: 3px;
  color: #4d4961;
  color: color-mix(in oklab, var(--ink) 74%, var(--field));
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.update-mode-banner strong {
  display: block;
  color: var(--ink);
  font-size: 1rem;
}
.update-mode-banner small {
  display: block;
  margin-top: 3px;
  color: #465267;
  color: color-mix(in oklab, var(--ink) 71.5%, var(--field));
  line-height: 1.35;
}
.cancel-update-button,
.update-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid rgba(255,255,255,.25);
  border: 1px solid color-mix(in srgb, var(--sheen) 25%, transparent);
  border-radius: 9px;
  background: rgba(16,34,54,.72);
  background: color-mix(in srgb, var(--button-bg) 72%, transparent);
  color: var(--button-text);
  font: inherit;
  font-size: .80rem;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.cancel-update-button { flex: 0 0 auto; padding: 8px 12px; }
.update-button { padding: 7px 10px; }
.cancel-update-button:hover,
.cancel-update-button:focus-visible,
.update-button:hover,
.update-button:focus-visible {
  background: rgba(91,76,118,.92);
  background: color-mix(in srgb, color-mix(in oklab, var(--violet-deep) 76%, var(--shadow-color)) 92%, transparent);
  border-color: rgba(255,255,255,.42);
  border-color: color-mix(in srgb, var(--sheen) 42%, transparent);
  outline: none;
}
.cancel-update-button:active,
.update-button:active { transform: translateY(1px); }
.entry-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
}
.entry-actions .delete-entry-form { flex: 0 0 auto; }
.entry-datetime-cell .entry-date,
.entry-datetime-cell .entry-time { white-space: nowrap; }
.entry-datetime-cell .entry-time::before { content: ' '; }
.context-edit-end-date[hidden] { display: none !important; }

@media (max-width: 520px) {
  .update-mode-banner {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }
  .cancel-update-button { align-self: flex-start; min-height: 36px; }

  /* Date on the first line, clock time directly below it. This preserves
     horizontal room for values and the new Update/Delete action stack. */
  .entry-datetime-cell .entry-date,
  .entry-datetime-cell .entry-time {
    display: block;
  }
  .entry-datetime-cell .entry-time {
    margin-top: 2px;
    color: var(--muted);
    font-size: .74rem;
  }
  .entry-datetime-cell .entry-time::before { content: none; }

  .entry-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
  }
  .entry-actions .update-button,
  .entry-actions .delete-button {
    width: 100%;
    max-width: 68px;
    min-height: 31px;
    margin-left: auto;
    padding: 5px 5px;
    font-size: .70rem;
  }

  /* Reclaim some width from the date column now that time is stacked. */
  .basal-entry-table th:first-child, .basal-entry-table td:first-child,
  .bg-entry-table th:first-child, .bg-entry-table td:first-child,
  .activity-table th:first-child, .activity-table td:first-child { width: 43%; }
  .basal-entry-table th:nth-child(2), .basal-entry-table td:nth-child(2),
  .bg-entry-table th:nth-child(2), .bg-entry-table td:nth-child(2),
  .activity-table th:nth-child(2), .activity-table td:nth-child(2) { width: 25%; }
  .basal-entry-table th:last-child, .basal-entry-table td:last-child,
  .bg-entry-table th:last-child, .bg-entry-table td:last-child,
  .activity-table th:last-child, .activity-table td:last-child { width: 32%; }

  .bolus-table th:first-child, .bolus-table td:first-child { width: 42%; }
  .bolus-table th:nth-child(2), .bolus-table td:nth-child(2) { width: 27%; }
  .bolus-table th:last-child, .bolus-table td:last-child { width: 31%; }

  .carbs-table th:first-child, .carbs-table td:first-child { width: 34%; }
  .carbs-table th:nth-child(2), .carbs-table td:nth-child(2) { width: 23%; }
  .carbs-table th:nth-child(3), .carbs-table td:nth-child(3) { width: 11%; }
  .carbs-table th:last-child, .carbs-table td:last-child { width: 32%; }

  .context-table th:first-child, .context-table td:first-child { width: 35%; }
  .context-table th:nth-child(2), .context-table td:nth-child(2) { width: 33%; }
  .context-table th:last-child, .context-table td:last-child { width: 32%; }
}

/* v83: structured clean-meal I:C evaluation. */
.ic-test-active-card,
.ic-test-start-card {
  --basal-light-ink: #1f2f43;
  --basal-light-muted: #3f4d61;
}
.ic-test-period-preview {
  display: grid;
  gap: 3px;
  margin: 0 0 16px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(225,234,243,.68);
  background: color-mix(in srgb, var(--light-panel) 68%, transparent);
  color: var(--basal-light-ink);
}
.ic-test-period-preview > span {
  color: var(--basal-light-muted);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ic-test-period-preview > strong { font-size: .94rem; }
.ic-test-period-preview > small { color: var(--basal-light-muted); line-height: 1.35; }
.ic-test-steps {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}
.ic-test-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: rgba(255,255,255,.68);
  background: color-mix(in srgb, var(--sheen) 68%, transparent);
  color: var(--basal-light-ink);
}
.ic-test-step.is-complete { border-color: rgba(41,105,77,.3); border-color: color-mix(in srgb, var(--success) 30%, transparent); background: rgba(226,244,235,.76); background: color-mix(in srgb, color-mix(in oklab, var(--success) 9.5%, var(--text-strong)) 76%, transparent); }
.ic-test-step.is-pending { opacity: .78; }
.ic-test-step-number {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--text-strong);
  font-size: .8rem;
  font-weight: 900;
}
.ic-test-step-body { min-width: 0; }
.ic-test-step-body h3 { margin: 1px 0 5px; color: var(--basal-light-ink); }
.ic-test-step-body p { margin: 0; color: var(--basal-light-muted); font-size: .8rem; line-height: 1.48; }
.ic-test-step-warning { margin-top: 7px !important; font-weight: 800; color: #7d3434 !important; color: color-mix(in oklab, var(--danger) 84.5%, var(--shadow-color)) !important; }
.ic-test-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.ic-test-step-actions .primary-button { margin: 0; text-decoration: none; }
.secondary-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 15px;
  border: 1px solid rgba(49,74,118,.34);
  border: 1px solid color-mix(in srgb, color-mix(in oklab, color-mix(in oklab, var(--info) 74%, var(--navy)) 80%, var(--violet)) 34%, transparent);
  border-radius: 11px;
  background: rgba(255,255,255,.78);
  background: var(--field);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.ic-test-timing-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.ic-test-timing-row span {
  padding: 7px 9px;
  border: 1px solid rgba(31,47,67,.14);
  border: 1px solid color-mix(in srgb, color-mix(in oklab, var(--ink) 92%, var(--muted)) 14%, transparent);
  border-radius: 9px;
  background: rgba(225,234,243,.58);
  background: color-mix(in srgb, var(--light-panel) 58%, transparent);
  color: var(--basal-light-muted);
  font-size: .72rem;
}
.ic-test-timing-row strong { color: var(--basal-light-ink); }
.ic-test-final-form {
  margin-top: 10px;
  padding: 12px;
  border: 1px solid rgba(31,47,67,.12);
  border: 1px solid color-mix(in srgb, color-mix(in oklab, var(--ink) 92%, var(--muted)) 12%, transparent);
  border-radius: 12px;
  background: rgba(225,234,243,.52);
  background: color-mix(in srgb, var(--light-panel) 52%, transparent);
}
.ic-test-final-form label,
.ic-test-final-form .field-label { color: var(--basal-light-ink); }
.ic-test-input-banner {
  display: grid;
  gap: 3px;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px solid rgba(49,74,118,.25);
  border: 1px solid color-mix(in srgb, color-mix(in oklab, color-mix(in oklab, var(--info) 74%, var(--navy)) 80%, var(--violet)) 25%, transparent);
  border-radius: 12px;
  background: rgba(225,234,243,.9);
  background: color-mix(in srgb, var(--light-panel) 90%, transparent);
  color: #1f2f43;
  color: color-mix(in oklab, var(--ink) 92%, var(--muted));
  font-size: .78rem;
  line-height: 1.4;
}
.ic-test-input-banner span { color: #3f4d61; color: color-mix(in oklab, var(--ink) 74.5%, var(--field)); }
.ic-test-settings-launch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(232,226,241,.12);
  border: 1px solid color-mix(in srgb, var(--mist) 12%, transparent);
  border-radius: 12px;
  background: rgba(174,169,198,.08);
  background: color-mix(in srgb, var(--lavender) 8%, transparent);
}
.ic-test-settings-launch span { color: var(--muted); font-size: .74rem; line-height: 1.4; }
.ic-test-settings-launch a { white-space: nowrap; }
@media (max-width: 560px) {
  .ic-test-step { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; padding: 10px; }
  .ic-test-step-number { width: 28px; height: 28px; }
  .ic-test-step-actions { flex-direction: column; }
  .ic-test-step-actions a { width: 100%; text-align: center; }
  .ic-test-timing-row { display: grid; grid-template-columns: 1fr; }
  .ic-test-settings-launch { align-items: stretch; flex-direction: column; }
  .ic-test-settings-launch a { text-align: center; }
}


/* v84: the I:C evaluation history remains a table on larger screens, but
   becomes a labelled card list on phones. Seven columns cannot be made
   legible at mobile widths without collapsing their content. */
@media (max-width: 640px) {
  .ic-test-history-card .table-wrap {
    overflow: visible;
  }

  .ic-test-history-table,
  .ic-test-history-table tbody,
  .ic-test-history-table tr,
  .ic-test-history-table td {
    display: block;
    width: 100%;
  }

  .ic-test-history-table {
    border-collapse: separate;
    border-spacing: 0;
  }

  .ic-test-history-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .ic-test-history-table tbody {
    display: grid;
    gap: 12px;
  }

  .ic-test-history-table tr {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.20);
    border: 1px solid color-mix(in srgb, var(--sheen) 20%, transparent);
    border-radius: 13px;
    background: rgba(28,47,70,.26);
    background: color-mix(in srgb, color-mix(in oklab, var(--blue-bg) 32.5%, var(--navy)) 26%, transparent);
  }

  .ic-test-history-table td {
    position: relative;
    box-sizing: border-box;
    min-width: 0;
    min-height: 42px;
    padding: 10px 12px 10px 104px;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-bottom: 1px solid color-mix(in srgb, var(--sheen) 12%, transparent);
    color: var(--text);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .ic-test-history-table td::before {
    content: attr(data-label);
    position: absolute;
    top: 10px;
    left: 12px;
    width: 82px;
    color: rgba(244,241,249,.72);
    color: color-mix(in srgb, color-mix(in oklab, var(--text) 98.5%, var(--lavender)) 72%, transparent);
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .035em;
    line-height: 1.25;
    text-transform: uppercase;
  }

  .ic-test-history-table td:last-child {
    border-bottom: 0;
  }

  .ic-test-history-table .basal-test-status {
    display: inline-flex;
    max-width: 100%;
  }

  .ic-test-history-table .basal-test-history-result {
    min-width: 0;
    color: var(--text);
    font-size: .79rem;
    line-height: 1.42;
  }

  .ic-test-history-table td small {
    max-width: none;
    color: rgba(244,241,249,.72);
    color: color-mix(in srgb, color-mix(in oklab, var(--text) 98.5%, var(--lavender)) 72%, transparent);
    line-height: 1.4;
  }

  .ic-test-history-table .ic-test-history-value {
    font-weight: 800;
  }

  .ic-test-history-table .action-cell {
    padding-top: 9px;
    padding-bottom: 9px;
  }

  .ic-test-history-table .action-cell .delete-entry-form,
  .ic-test-history-table .action-cell .delete-button {
    width: 100%;
  }

  .ic-test-history-table .action-cell .delete-button {
    min-height: 38px;
    margin: 0;
  }
}

@media (max-width: 380px) {
  .ic-test-history-table td {
    padding-left: 92px;
  }
  .ic-test-history-table td::before {
    width: 70px;
  }
}

/* v85: Web Push notification settings and per-device status. */
.notification-settings-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}
.notification-settings-grid .default-field select:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.notification-device-card {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(214,207,225,.24);
  border: 1px solid color-mix(in srgb, var(--muted) 24%, transparent);
  border-radius: 13px;
  background: rgba(16,34,54,.30);
  background: color-mix(in srgb, var(--navy) 30%, transparent);
}
.notification-device-card > div { min-width: 0; }
.notification-device-kicker {
  display: block;
  margin-bottom: 3px;
  color: #cbc5d6;
  color: color-mix(in oklab, var(--muted) 93.5%, var(--blue-bg));
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.notification-device-card strong {
  display: block;
  color: var(--text);
  font-size: .90rem;
}
.notification-device-card small {
  display: block;
  margin-top: 4px;
  color: #c8c2cf;
  color: color-mix(in oklab, var(--muted) 91%, var(--blue-bg));
  font-size: .74rem;
  line-height: 1.4;
}
.notification-enable-button {
  flex: 0 0 auto;
  min-width: 170px;
}
.notification-settings-note { margin-top: 10px; }
@media (max-width: 720px) {
  .notification-settings-grid { grid-template-columns: 1fr; }
  .notification-device-card {
    flex-direction: column;
    align-items: stretch;
  }
  .notification-enable-button { width: 100%; min-width: 0; }
}
.notification-child-muted { opacity: .62; }
.notification-child-muted select { opacity: .86; }
.ic-test-notification-note {
  display: block;
  margin-top: 7px;
  color: var(--basal-light-muted);
  font-size: .72rem;
  line-height: 1.4;
}

/* v87: likely-missing-data reconciliation. */
.missing-data-backdrop {
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
  background: rgba(7,18,30,.56);
  background: color-mix(in srgb, color-mix(in oklab, var(--shadow-color) 92.5%, black) 56%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.missing-data-modal {
  width: min(590px, 100%);
  max-height: calc(100vh - 28px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  text-align: left;
}
.missing-data-modal h2 { margin-bottom: 8px; text-align: left; font-size: 1.24rem; }
.missing-data-question {
  color: var(--text) !important;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.48;
}
.missing-data-day-card {
  margin-top: 15px;
  padding: 11px 10px 9px;
  border: 1px solid rgba(232,226,241,.16);
  border: 1px solid color-mix(in srgb, var(--mist) 16%, transparent);
  border-radius: 14px;
  background: rgba(16,34,54,.48);
  background: color-mix(in srgb, var(--navy) 48%, transparent);
}
.missing-data-day-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 8px;
}
.missing-data-day-heading strong { color: var(--text-strong); font-size: .84rem; }
.missing-data-day-heading span { color: var(--muted); font-size: .72rem; text-align: right; }
.missing-data-chart-wrap {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(232,226,241,.10);
  border: 1px solid color-mix(in srgb, var(--mist) 10%, transparent);
  border-radius: 10px;
  background: var(--navy);
}
.missing-data-day-chart { display: block; width: 100%; height: 240px; }
.missing-data-mini-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 8px;
  color: var(--muted);
  font-size: .64rem;
  line-height: 1.2;
}
.missing-data-mini-legend span { display: inline-flex; align-items: center; gap: 4px; }
.missing-data-mini-legend i {
  display: inline-block;
  width: 10px;
  height: 5px;
  border-radius: 999px;
  flex: 0 0 auto;
}
.missing-data-mini-legend .legend-bg { background: var(--series-bg); }
.missing-data-mini-legend .legend-activity { background: var(--activity); }
.missing-data-mini-legend .legend-context { background: var(--series-context); opacity: .72; }
.missing-data-entry-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, .72fr);
  gap: 10px;
  margin-top: 14px;
}
.missing-data-field {
  display: block;
  min-width: 0;
  margin: 0 !important;
  padding: 10px;
  border: 1px solid rgba(232,226,241,.14);
  border: 1px solid color-mix(in srgb, var(--mist) 14%, transparent);
  border-radius: 12px;
  background: rgba(174,169,198,.07);
  background: color-mix(in srgb, var(--lavender) 7%, transparent);
}
.missing-data-field > span {
  display: block;
  margin-bottom: 6px;
  color: var(--text);
  font-size: .75rem;
  font-weight: 800;
}
.missing-data-field input,
.missing-data-field select {
  width: 100%;
  min-width: 0;
  min-height: 43px;
  padding: 8px 10px;
  border: 1px solid rgba(232,226,241,.22);
  border: 1px solid color-mix(in srgb, var(--mist) 22%, transparent);
  border-radius: 10px;
  background: rgba(245,242,247,.90);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: .86rem;
}
.missing-data-field small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: .67rem;
  line-height: 1.35;
}
.missing-data-grams-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 7px; }
.missing-data-grams-row strong { color: var(--text); font-size: .78rem; }
.missing-data-field[data-missing-speed-field] { grid-column: 1 / -1; }
.missing-data-record-note {
  margin-top: 11px !important;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(174,169,198,.09);
  background: color-mix(in srgb, var(--lavender) 9%, transparent);
  color: var(--muted) !important;
  font-size: .72rem;
  line-height: 1.4;
}
.missing-data-error {
  margin-top: 9px !important;
  padding: 8px 10px;
  border: 1px solid rgba(231,158,173,.30);
  border: 1px solid color-mix(in srgb, var(--rose) 30%, transparent);
  border-radius: 9px;
  background: rgba(132,55,76,.22);
  background: color-mix(in srgb, color-mix(in oklab, color-mix(in oklab, var(--plum) 18%, var(--danger)) 89%, var(--navy)) 22%, transparent);
  color: #ffe7ed !important;
  color: color-mix(in oklab, var(--text-strong) 76.5%, var(--rose)) !important;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.35;
}
.missing-data-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.missing-data-actions [data-missing-answer="later"] { grid-column: 1 / -1; }
.missing-data-actions .modal-button:disabled { opacity: .55; cursor: wait; }

@media (max-width: 520px) {
  .missing-data-backdrop { place-items: start center; overflow-y: auto; }
  .missing-data-modal {
    width: 100%;
    max-height: none;
    margin: max(4px, env(safe-area-inset-top)) 0 max(4px, env(safe-area-inset-bottom));
    padding: 16px 13px 14px;
    border-radius: 18px;
  }
  .missing-data-modal h2 { font-size: 1.12rem; }
  .missing-data-question { font-size: .86rem; line-height: 1.43; }
  .missing-data-day-card { margin-top: 12px; padding: 9px 7px 7px; }
  .missing-data-day-heading { display: block; }
  .missing-data-day-heading span { display: block; margin-top: 2px; text-align: left; font-size: .66rem; }
  .missing-data-day-chart { height: 230px; }
  .missing-data-mini-legend { gap: 4px 8px; font-size: .59rem; }
  .missing-data-entry-fields { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .missing-data-field[data-missing-speed-field] { grid-column: auto; }
  .missing-data-field { padding: 9px; }
  .missing-data-field input,
  .missing-data-field select { min-height: 42px; font-size: .82rem; }
  .missing-data-record-note { font-size: .68rem; }
}

/* v92: Fast-Carb response metric. */
.fast-carb-response-card {
  background: linear-gradient(145deg, rgba(16,34,54,.98), rgba(47,50,74,.98));
  background: linear-gradient(145deg, color-mix(in srgb, var(--navy) 98%, transparent), color-mix(in srgb, color-mix(in oklab, var(--violet) 24%, var(--navy)) 98%, transparent));
}
.fast-carb-response-summary {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
}
.fast-carb-response-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 13px;
}
.fast-carb-response-metric {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(232,226,241,.12);
  border: 1px solid color-mix(in srgb, var(--mist) 12%, transparent);
  border-radius: 11px;
  background: rgba(174,169,198,.08);
  background: color-mix(in srgb, var(--lavender) 8%, transparent);
}
.fast-carb-response-metric > span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
  font-weight: 800;
}
.fast-carb-response-metric > span small {
  color: var(--accent-text);
  font-size: .64rem;
  font-weight: 700;
}
.fast-carb-response-metric > strong {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-size: .98rem;
  line-height: 1.25;
  font-variant-numeric: tabular-nums;
}
.fast-carb-response-metric > small {
  display: block;
  margin-top: 4px;
  color: var(--accent-text);
  font-size: .66rem;
  line-height: 1.3;
}
.fast-carb-response-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.48;
}
@media (max-width: 720px) {
  .fast-carb-response-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .fast-carb-response-grid { gap: 6px; }
  .fast-carb-response-metric { padding: 8px; }
  .fast-carb-response-metric > strong { font-size: .91rem; }
}

/* v93: structured workflows hub. */
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
.workflow-grid .workflow-card {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
}
.workflow-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.workflow-card-head h2 { margin: 2px 0 0; }
.workflow-kicker {
  display: block;
  color: rgba(245,242,247,.72);
  color: color-mix(in srgb, var(--text) 72%, transparent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.workflow-ready-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(232,226,241,.24);
  border: 1px solid color-mix(in srgb, var(--mist) 24%, transparent);
  border-radius: 999px;
  background: rgba(232,226,241,.1);
  background: color-mix(in srgb, var(--mist) 10%, transparent);
  color: var(--text);
  font-size: .72rem;
  font-weight: 800;
}
.workflow-card p {
  margin: 0 0 14px;
  color: rgba(245,242,247,.82);
  color: color-mix(in srgb, var(--text) 82%, transparent);
  line-height: 1.5;
}
.workflow-steps {
  margin: 0 0 18px 1.25rem;
  padding: 0;
  color: rgba(245,242,247,.88);
  color: color-mix(in srgb, var(--text) 88%, transparent);
  font-size: .84rem;
  line-height: 1.55;
}
.workflow-steps li + li { margin-top: 4px; }
.workflow-open-button {
  margin: auto 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  text-decoration: none;
}
.workflow-history-note {
  margin: 18px 2px 0;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}

@media (max-width: 700px) {
  .workflow-grid { grid-template-columns: 1fr; gap: 14px; }
  .workflow-open-button { width: 100%; }
}



/* v94: compact help popover for clean-correction reference text. */
.clean-correction-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.clean-correction-info-button {
  width: 17px;
  height: 17px;
  min-width: 17px;
  padding: 0;
  border: 1px solid rgba(245,242,247,.30);
  border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  border-radius: 50%;
  background: rgba(245,242,247,.06);
  background: color-mix(in srgb, var(--paper) 6%, transparent);
  color: var(--text);
  font: inherit;
  font-size: .62rem;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
  cursor: pointer;
}
.clean-correction-info-button:hover,
.clean-correction-info-button:focus-visible {
  border-color: rgba(245,242,247,.58);
  border-color: color-mix(in srgb, var(--paper) 58%, transparent);
  background: rgba(245,242,247,.12);
  background: color-mix(in srgb, var(--paper) 12%, transparent);
  outline: none;
}
.clean-correction-help-popover {
  margin-top: 7px;
  padding: 9px 10px;
  border: 1px solid rgba(245,242,247,.16);
  border: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
  border-radius: 9px;
  background: rgba(12,25,40,.78);
  background: color-mix(in srgb, var(--navy) 78%, transparent);
  color: var(--muted);
  font-size: .66rem;
  font-weight: 500;
  line-height: 1.42;
}
.clean-correction-help-popover[hidden] { display: none; }
.clean-correction-help-popover.is-reference { opacity: .88; }
.clean-corrections-row.is-reference .clean-correction-info-button {
  opacity: 1;
}
@media (max-width: 520px) {
  .clean-correction-info-button { width: 16px; height: 16px; min-width: 16px; font-size: .59rem; line-height: 14px; }
  .clean-correction-help-popover { font-size: .62rem; }
}


/* v96: compact help for the dynamic hourly Timeline card title. */
.timeline-heading-with-help {
  display: flex;
  align-items: center;
  gap: 7px;
}
.timeline-heading-with-help h2 { margin-bottom: 0; }
.timeline-info-button { flex: 0 0 auto; }
.timeline-help-popover {
  max-width: 920px;
  margin-top: 8px;
}
@media (max-width: 520px) {
  .timeline-heading-with-help { gap: 6px; }
  .timeline-help-popover { font-size: .66rem; }
}

/* Theme-derived custom properties (colour settings). Engines without
   color-mix() keep the literal values declared above. */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --grid: color-mix(in srgb, var(--muted) 24%, transparent);
    --border: color-mix(in srgb, var(--mist) 23%, transparent);
    --shadow: color-mix(in srgb, var(--shadow-color) 22%, transparent);
  }
  .basal-test-active-card,
.basal-test-start-card { --basal-light-ink: color-mix(in oklab, var(--ink) 92%, var(--muted)); }
  .basal-test-active-card,
.basal-test-start-card { --basal-light-muted: color-mix(in oklab, var(--ink) 74.5%, var(--field)); }
  .ic-test-active-card,
.ic-test-start-card { --basal-light-ink: color-mix(in oklab, var(--ink) 92%, var(--muted)); }
  .ic-test-active-card,
.ic-test-start-card { --basal-light-muted: color-mix(in oklab, var(--ink) 74.5%, var(--field)); }
}

/* ------------------------------------------------------------------------
   Colors settings (v97)
   ------------------------------------------------------------------------ */
.colors-form { padding-bottom: 92px; }
.colors-card .settings-section-intro { margin-top: -8px; }

.theme-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.theme-preset {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--mist) 22%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--navy) 30%, transparent);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.theme-preset:hover { border-color: color-mix(in srgb, var(--mist) 45%, transparent); }
.theme-preset:focus-visible { outline: 3px solid color-mix(in srgb, var(--lavender) 60%, transparent); outline-offset: 2px; }
.theme-preset[aria-checked="true"] {
  border-color: var(--lavender);
  box-shadow: 0 0 0 2px var(--lavender), 0 10px 26px var(--shadow);
}
.theme-preset[aria-checked="true"]::after {
  content: "✓";
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lavender);
  color: var(--highlight-text);
  font-size: .78rem;
  font-weight: 900;
}
.theme-preset-sample {
  position: relative;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: 1fr auto;
  gap: 6px;
  height: 92px;
  padding: 8px;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.theme-preset-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 7px;
  border-radius: 8px;
}
.theme-preset-card i { display: block; height: 5px; border-radius: 3px; }
.theme-preset-card i:first-child { width: 72%; }
.theme-preset-card i:last-child { width: 48%; opacity: .85; }
.theme-preset-card-alt { flex-direction: row; align-items: flex-end; justify-content: space-between; }
.theme-preset-card-alt b { display: block; width: 14%; border-radius: 2px 2px 0 0; }
.theme-preset-card-alt b:nth-child(1) { height: 70%; }
.theme-preset-card-alt b:nth-child(2) { height: 45%; }
.theme-preset-card-alt b:nth-child(3) { height: 85%; }
.theme-preset-card-alt b:nth-child(4) { height: 35%; }
.theme-preset-card-alt b:nth-child(5) { height: 60%; }
.theme-preset-field { grid-column: 1 / -1; height: 14px; border-radius: 5px; border-left: 22px solid; }
.theme-preset-text { display: grid; gap: 2px; padding: 0 2px 2px; }
.theme-preset-text strong { font-size: .98rem; }
.theme-preset-text small { color: var(--muted); font-size: .78rem; line-height: 1.3; }
.theme-preset-badge {
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--lavender) 22%, transparent);
  color: var(--text-strong);
  font-size: .70rem;
  font-weight: 800;
}
.theme-preset-badge[hidden] { display: none; }

.cp-chart-band { fill: color-mix(in srgb, var(--lavender) 12%, transparent); }
.cp-chart-grid { stroke: var(--grid); stroke-width: 1; }
.cp-series-basal { fill: var(--series-basal); }
.cp-series-food-bolus { fill: var(--food-bolus); }
.cp-series-correction { fill: var(--correction-bolus); }
.cp-series-fast { fill: var(--fast-carbs); }
.cp-series-food { fill: var(--food-carbs); }
.cp-series-activity { fill: var(--activity); }
.cp-series-context { fill: color-mix(in srgb, var(--series-context) 16%, transparent); }
.cp-series-bg { fill: none; stroke: var(--series-bg); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* Token list */
.colors-text-button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--mist) 26%, transparent);
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
  touch-action: manipulation;
}
.colors-text-button:hover:not(:disabled),
.colors-text-button:focus-visible { background: color-mix(in srgb, var(--lavender) 14%, transparent); outline: none; }
.colors-text-button:disabled { opacity: .45; cursor: default; }
.colors-text-button[hidden] { display: none; }

.colors-groups { display: grid; gap: 10px; }
.colors-group {
  border: 1px solid color-mix(in srgb, var(--mist) 18%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--navy) 22%, transparent);
  overflow: hidden;
}
.colors-group > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 14px;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}
.colors-group > summary::-webkit-details-marker { display: none; }
.colors-group > summary::after { content: "▾"; margin-left: 6px; color: var(--muted); transition: transform .15s ease; }
.colors-group:not([open]) > summary::after { transform: rotate(-90deg); }
.colors-group > summary > span { flex: 1 1 auto; }
.colors-group > summary small { color: var(--lavender); font-size: .76rem; font-weight: 800; }
.colors-group > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--lavender) 50%, transparent); outline-offset: -3px; }

.colors-token-list { list-style: none; margin: 0; padding: 0 6px 6px; }
.colors-token { display: flex; align-items: center; gap: 4px; }
.colors-token + .colors-token { border-top: 1px solid color-mix(in srgb, var(--mist) 12%, transparent); }
.colors-token-button {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 9px 8px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}
.colors-token-button:hover,
.colors-token-button:focus-visible { background: color-mix(in srgb, var(--lavender) 12%, transparent); outline: none; }
.colors-token-swatch {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mist) 40%, transparent), 0 3px 10px var(--shadow);
}
.colors-token-text { display: grid; gap: 1px; min-width: 0; }
.colors-token-text strong { font-size: .92rem; }
.colors-token-text small { color: var(--muted); font-size: .76rem; line-height: 1.3; }
.colors-token-hex { color: var(--muted); font-size: .76rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.colors-token-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lavender); }
.colors-token-dot[hidden] { display: none; }
.is-custom .colors-token-hex { color: var(--text-strong); }
.colors-token-reset {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--mist) 24%, transparent);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
}
.colors-token-reset[hidden] { display: none; }
.colors-token-reset:hover, .colors-token-reset:focus-visible { background: color-mix(in srgb, var(--lavender) 16%, transparent); outline: none; }

/* Save bar */
.colors-savebar {
  position: fixed;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: min(1080px, calc(100% - 24px));
  padding: 10px 10px 10px 16px;
  border: 1px solid color-mix(in srgb, var(--mist) 25%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--navy) 94%, transparent);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--shadow-color) 40%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transform: translateX(-50%);
}
.colors-savebar-status { margin: 0; color: var(--muted); font-size: .86rem; font-weight: 650; }
.is-dirty .colors-savebar-status { color: var(--text-strong); }
.colors-savebar-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.colors-savebar .primary-button { padding: 10px 18px; }
.colors-savebar .primary-button:disabled { opacity: .5; cursor: default; }

/* Colour picker */
body.cp-open {
  position: fixed;
  top: var(--cp-page-top, 0px);
  left: 0;
  right: 0;
  overflow: hidden;
}
.cp-backdrop {
  /* Keep the live sample visible and tappable, but hold the page in place. */
  position: fixed;
  inset: 0 0 auto;
  height: 100vh;
  height: 100dvh;
  z-index: 1000;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: end center;
  pointer-events: none;
}
.cp-backdrop[hidden] { display: none; }
.cp {
  pointer-events: auto;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: min(400px, 100%);
  min-height: 0;
  max-height: calc(100% - 32px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mist) 28%, transparent);
  border-radius: 22px;
  background: linear-gradient(160deg, var(--navy), var(--navy-soft));
  color: var(--text);
  box-shadow: 0 28px 70px color-mix(in srgb, var(--shadow-color) 55%, transparent);
}
.cp-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: max-content;
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}
.cp-body > * { min-width: 0; }
.cp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cp-head h2 { margin: 0; font-size: 1.12rem; }
.cp-head p { margin: 3px 0 0; color: var(--muted); font-size: .82rem; }
.cp-head p[hidden] { display: none; }
.cp-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--mist) 24%, transparent);
  border-radius: 11px;
  background: transparent;
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.cp-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mist) 30%, transparent);
}
.cp-compare-old, .cp-compare-new {
  display: flex;
  align-items: flex-end;
  padding: 6px 9px;
  border: 0;
  font: inherit;
  font-size: .70rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.cp-compare-old { cursor: pointer; }
.cp-compare-new { justify-content: flex-end; }
.cp-area {
  --cp-hue: hsl(0, 100%, 50%);
  position: relative;
  height: 190px;
  border-radius: 14px;
  background:
    linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
    linear-gradient(to right, #fff, rgba(255, 255, 255, 0)),
    var(--cp-hue);
  cursor: crosshair;
  touch-action: none;
}
.cp-area:focus-visible, .cp-hue:focus-visible { outline: 3px solid color-mix(in srgb, var(--lavender) 70%, transparent); outline-offset: 3px; }
.cp-area-thumb, .cp-hue-thumb {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 3px 8px rgba(0, 0, 0, .35);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.cp-hue {
  position: relative;
  height: 18px;
  margin: 0 10px;
  border-radius: 999px;
  background: linear-gradient(to right, #f00 0%, #ff0 16.66%, #0f0 33.33%, #0ff 50%, #00f 66.66%, #f0f 83.33%, #f00 100%);
  cursor: pointer;
  touch-action: none;
}
.cp-hue-thumb { top: 50%; }
.cp-modes { display: flex; align-items: center; gap: 6px; }
.cp-modes [role="tab"] {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--mist) 22%, transparent);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 800;
  cursor: pointer;
}
.cp-modes [role="tab"][aria-selected="true"] { background: color-mix(in srgb, var(--lavender) 22%, transparent); color: var(--text-strong); border-color: color-mix(in srgb, var(--lavender) 60%, transparent); }
.cp-eyedropper {
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--mist) 22%, transparent);
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.cp-eyedropper[hidden] { display: none; }
.cp-eyedropper svg { width: 18px; height: 18px; }
.cp-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cp-field { display: grid; gap: 4px; }
.cp-field[hidden] { display: none; }
.cp-field-wide { grid-column: 1 / -1; }
.cp-field span { color: var(--muted); font-size: .72rem; font-weight: 800; }
.cp-field input {
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid color-mix(in srgb, var(--field-border) 50%, transparent);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* avoids automatic zoom on iPhone */
  font-variant-numeric: tabular-nums;
}
.cp-field input:focus { outline: 3px solid color-mix(in srgb, var(--lavender) 45%, transparent); border-color: var(--lavender); }
.cp-contrast { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.cp-contrast[hidden] { display: none; }
.cp-contrast-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--mist) 18%, transparent);
  border-radius: 11px;
}
.cp-contrast-chip.is-low { border-color: color-mix(in srgb, var(--rose) 60%, transparent); }
.cp-contrast-sample {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 32px;
  border-radius: 8px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mist) 25%, transparent);
}
.cp-contrast-sample i { width: 24px; height: 5px; border-radius: 3px; }
.cp-contrast-text { display: grid; min-width: 0; }
.cp-contrast-text strong { font-size: .82rem; }
.cp-contrast-text small { color: var(--muted); font-size: .72rem; }
.is-low .cp-contrast-text strong { color: color-mix(in oklab, var(--rose) 70%, var(--text-strong)); }
.cp-swatches p { margin: 0 0 6px; color: var(--muted); font-size: .74rem; font-weight: 800; }
.cp-swatches p[hidden] { display: none; }
.cp-swatch-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cp-swatch {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mist) 35%, transparent);
  cursor: pointer;
}
.cp-swatch:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }
.cp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cp-foot > div { display: flex; gap: 8px; margin-left: auto; }
.cp-foot .primary-button { padding: 10px 20px; }

@media (max-width: 680px) {
  .theme-preset-grid { grid-template-columns: 1fr; }
  .theme-preset { grid-template-columns: 118px minmax(0, 1fr); align-items: center; }
  .theme-preset-sample { height: 74px; }
  .theme-preset[aria-checked="true"]::after { top: 10px; right: 10px; }
  .theme-preset-badge { grid-column: 2; }
  .colors-token-text small { display: none; }
  .colors-savebar { flex-wrap: wrap; }
  .colors-savebar-status { flex: 1 1 100%; font-size: .8rem; }
  .colors-savebar-actions { width: 100%; }
  .colors-savebar-actions > * { flex: 1 1 0; }
  .cp { width: 100%; max-height: min(60vh, calc(100% - 8px)); max-height: min(60dvh, calc(100% - 8px)); border-radius: 22px 22px 0 0; }
  .cp-area { height: 140px; }
  .cp-head p[data-cp-hint] { display: none; }
  .cp-swatch-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cp-swatch { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-preset, .colors-group > summary::after { transition: none; }
}
.cp-foot {
  padding: 12px 16px 16px;
  border-top: 1px solid color-mix(in srgb, var(--mist) 16%, transparent);
  background: var(--navy-soft);
}
@media (max-width: 680px) {
  .cp-foot { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (max-width: 680px) and (max-height: 500px) {
  .cp { max-height: calc(100% - 8px); }
}

@media (min-width: 681px) {
  .cp-backdrop { place-items: stretch end; padding: 16px; }
  .cp { align-self: stretch; max-height: none; }
}

/* Interactive sample (Colors settings, v99) */
.pv-page {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--violet) 24%, transparent), transparent 45%),
    linear-gradient(180deg, var(--blue-bg), color-mix(in oklab, var(--blue-bg) 82%, var(--navy)));
  color: var(--text);
}
.pv-page [data-edit], .pv-page[data-edit] { cursor: pointer; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .12s ease; }
.pv-page [data-edit]:hover:not(:has([data-edit]:hover)),
.pv-page[data-edit]:hover:not(:has([data-edit]:hover)) { outline: 2px dashed color-mix(in srgb, var(--lavender) 85%, transparent); }
.pv-page [data-edit]:focus-visible, .pv-page[data-edit]:focus-visible { outline: 2px solid var(--lavender); }
.pv-page .is-editing, .pv-page.is-editing { outline: 2px solid var(--lavender) !important; }
.pv-page svg [data-edit] { outline: none; }
.pv-page svg [data-edit]:hover, .pv-page svg .is-editing { filter: drop-shadow(0 0 2px var(--text-strong)) drop-shadow(0 0 1px var(--text-strong)); }

.pv-nav {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: color-mix(in srgb, var(--navy) 82%, transparent);
}
.pv-nav-link { padding: 8px 9px; border-radius: 9px; color: var(--nav-text); font-size: .74rem; font-weight: 800; }
.pv-nav-link.is-active {
  color: var(--highlight-text);
  background: var(--lavender);
}
.pv-nav-menu { display: grid; gap: 3px; margin-left: auto; padding: 9px 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--navy); }
.pv-nav-menu i { display: block; width: 14px; height: 2px; border-radius: 1px; background: var(--text); }
.pv-heading { display: grid; justify-items: start; gap: 2px; padding: 2px 2px 0; }
.pv-title { color: var(--title-color); font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.pv-subtitle { color: var(--subtitle-color); font-size: .9rem; }

.pv-card {
  display: grid;
  justify-items: start;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--violet) 94%, transparent), color-mix(in srgb, var(--violet-deep) 94%, transparent) 48%, color-mix(in srgb, var(--plum) 94%, transparent));
  box-shadow: 0 10px 26px var(--shadow);
  color: var(--text);
}
.pv-card > * { max-width: 100%; }
.pv-card-dark { background: linear-gradient(145deg, color-mix(in srgb, var(--navy) 98%, transparent), color-mix(in srgb, var(--navy-soft) 98%, transparent)); }
.pv-card-title { color: var(--heading-color); font-size: 1.02rem; font-weight: 800; }
.pv-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; }
.pv-panel {
  display: grid;
  justify-items: start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--navy) 58%, transparent);
}
.pv-kicker { color: var(--accent-text); font-size: .76rem; font-weight: 800; }
.pv-value { color: var(--text); font-size: 1.1rem; font-weight: 800; }
.pv-note { color: var(--muted); font-size: .76rem; }
.pv-text { margin: 0; color: var(--text); font-size: .86rem; }
.pv-label { margin-top: 2px; color: var(--label-color); font-size: .92rem; font-weight: 700; }
.pv-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.pv-choice {
  padding: 9px 4px;
  border: 1px solid color-mix(in srgb, var(--mist) 24%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--navy) 34%, transparent);
  color: var(--text);
  font-size: .84rem;
  font-weight: 750;
  text-align: center;
}
.pv-choice.is-selected {
  border-color: color-mix(in srgb, var(--lavender) 55%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 82%, transparent), color-mix(in srgb, var(--plum) 72%, transparent));
  color: var(--text-strong);
}
.pv-stepper { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; width: 100%; }
.pv-step, .pv-button {
  border: 1px solid color-mix(in srgb, var(--sheen) 23%, transparent);
  border-radius: 11px;
  background: linear-gradient(135deg, var(--button-bg), var(--button-bg-end));
  color: var(--button-text);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--shadow-color) 20%, transparent);
}
.pv-step { display: grid; place-items: center; height: 42px; font-size: 1.2rem; font-weight: 700; }
.pv-field {
  display: grid;
  place-items: center;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--field) 88%, transparent);
  color: var(--ink);
  font-weight: 700;
}
.pv-field > span { padding: 2px 10px; }
.pv-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; }
.pv-button { padding: 10px 22px; font-weight: 750; }
.pv-link { color: var(--link); font-weight: 700; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--link) 45%, transparent); text-underline-offset: 3px; }
.pv-table { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
.pv-th, .pv-td { padding: 8px 4px; border-bottom: 1px solid color-mix(in srgb, var(--mist) 18%, transparent); }
.pv-th { color: var(--table-head); font-size: .7rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.pv-td { color: var(--text); font-size: .82rem; }
.pv-td small { color: var(--muted); font-size: .72rem; }
.pv-chart { padding: 10px; }
.pv-chart svg { display: block; width: 100%; height: 110px; }
.pv-messages, .pv-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-alert { margin: 0; padding: 7px 11px; font-size: .82rem; font-weight: 700; box-shadow: none; }
.pv-light { padding: 10px 12px; border-radius: 12px; background: var(--light-panel); color: var(--ink); font-size: .84rem; }

/* Toolkit: component name and its colours */
.cp-kicker { margin: 0 0 2px; color: var(--accent-text); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cp-head p.cp-kicker { margin-top: 0; color: var(--accent-text); font-size: .72rem; }
.cp-shared { margin: 4px 0 0; color: var(--muted); font-size: .76rem; }
.cp-shared[hidden] { display: none; }
.cp-parts {
  display: flex;
  gap: 6px;
  margin: 0 -16px;
  padding: 0 16px 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cp-parts::-webkit-scrollbar { display: none; }
.cp-parts[hidden] { display: none; }
.cp-part {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 5px;
  border: 1px solid color-mix(in srgb, var(--mist) 22%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  white-space: nowrap;
  cursor: pointer;
}
.cp-part i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mist) 45%, transparent); }
.cp-part[aria-selected="true"] { border-color: var(--lavender); background: color-mix(in srgb, var(--lavender) 18%, transparent); color: var(--text-strong); }
.cp-part:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
.cp-backdrop { grid-template-columns: minmax(0, 1fr); }
.cp { grid-template-columns: minmax(0, 1fr); justify-self: center; }
.cp > * { min-width: 0; }
@media (min-width: 681px) { .cp { justify-self: end; } }

/* ------------------------------------------------------------------------
   Prepare Meal (v100)
   ------------------------------------------------------------------------ */
.carbs-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.carbs-icon-img img { display: block; width: 30px; height: 30px; }
@media (max-width: 560px) {
  .carbs-type-card { flex-direction: column; justify-content: center; gap: 6px; min-height: 92px; padding: 10px 6px; text-align: center; }
  .carbs-type-card strong { font-size: .86rem; }
  .carbs-type-card small { font-size: .70rem; }
}
.meal-inline-items {
  display: block;
  max-width: 220px;
  overflow: hidden;
  color: var(--muted);
  font-size: .72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meal-builder {
  display: grid;
  gap: 12px;
  margin: 4px 0 18px;
}
.meal-builder[hidden] { display: none; }
.meal-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.meal-head .field-label { margin: 0; }
.meal-count { color: var(--muted); font-size: .82rem; font-weight: 700; }
.meal-empty { margin: 0; padding: 14px; border: 1px dashed color-mix(in srgb, var(--mist) 35%, transparent); border-radius: 13px; color: var(--muted); font-size: .88rem; text-align: center; }
.meal-empty[hidden] { display: none; }
.meal-items { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.meal-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px;
  border: 1px solid color-mix(in srgb, var(--mist) 20%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--navy) 34%, transparent);
}
.meal-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 2px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.meal-item-main:focus-visible { outline: 2px solid var(--lavender); }
.meal-item-main img { flex: 0 0 auto; width: 44px; height: 44px; }
.meal-item-text { display: grid; gap: 2px; min-width: 0; }
.meal-item-text strong { overflow: hidden; font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.meal-item-text small { color: var(--muted); font-size: .72rem; }
.meal-item-qty { display: grid; grid-template-columns: 74px minmax(0, 230px); gap: 5px; }
.entry-form .meal-item-qty input,
.meal-item-qty select {
  width: 100%;
  min-width: 0;
  padding: 8px 8px;
  border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--field) 88%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.meal-item-qty select { font-size: .82rem; }
.meal-item-remove {
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--mist) 24%, transparent);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
}
.meal-item-remove:hover, .meal-item-remove:focus-visible { background: color-mix(in srgb, var(--danger) 30%, transparent); outline: none; }
@media (max-width: 560px) {
  .meal-item { grid-template-columns: minmax(0, 1fr) auto; }
  .meal-item-main { grid-column: 1; grid-row: 1; }
  .meal-item-remove { grid-column: 2; grid-row: 1; }
  .meal-item-qty { grid-column: 1 / -1; grid-row: 2; grid-template-columns: 64px minmax(0, 1fr); }
}
.meal-add-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px dashed color-mix(in srgb, var(--lavender) 70%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--lavender) 12%, transparent);
  color: var(--text-strong);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.meal-add-button:hover, .meal-add-button:focus-visible { background: color-mix(in srgb, var(--lavender) 22%, transparent); outline: none; }
.meal-summary { display: grid; gap: 10px; padding: 12px; border: 1px solid color-mix(in srgb, var(--mist) 22%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--navy) 42%, transparent); }
.meal-summary[hidden] { display: none; }
.meal-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.meal-totals div { display: grid; gap: 2px; text-align: center; }
.meal-totals span { color: var(--accent-text); font-size: .72rem; font-weight: 800; }
.meal-totals strong { font-size: 1.02rem; }
.meal-basis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .86rem; }
.meal-basis-label { color: var(--muted); font-weight: 700; }
.entry-form .meal-basis label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 650; }
.entry-form .meal-basis input { width: auto; padding: 0; accent-color: var(--lavender); }
.meal-basis small { color: var(--muted); }
.meal-record { margin: 0; font-size: .92rem; }
.meal-record strong { color: var(--text-strong); font-size: 1.1rem; }
.meal-error { margin: 0; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--rose) 60%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--danger) 26%, transparent); font-weight: 700; }

/* Aliment browser sheet */
body.food-sheet-open { overflow: hidden; }
.food-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--shadow-color) 60%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.food-sheet-backdrop[hidden] { display: none; }
.food-sheet {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: min(620px, 100%);
  height: min(780px, calc(100vh - 32px));
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--mist) 26%, transparent);
  border-radius: 22px;
  background: linear-gradient(165deg, var(--navy), var(--navy-soft));
  color: var(--text);
  box-shadow: 0 28px 70px color-mix(in srgb, var(--shadow-color) 55%, transparent);
}
@media (max-width: 680px) {
  .food-sheet-backdrop { padding: 0; place-items: end center; }
  .food-sheet { width: 100%; height: calc(100vh - 28px); height: calc(100dvh - 28px); border-radius: 22px 22px 0 0; }
}
.food-sheet-head { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; gap: 8px; padding: 12px 12px 8px; }
.food-sheet-titles { min-width: 0; text-align: center; }
.food-sheet-titles h2 { overflow: hidden; margin: 0; font-size: 1.08rem; text-overflow: ellipsis; white-space: nowrap; }
.food-sheet-crumb { overflow: hidden; margin: 0 0 1px; color: var(--accent-text); font-size: .72rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.food-sheet-crumb[hidden] { display: none; }
.food-sheet-icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--mist) 24%, transparent);
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.food-search { padding: 0 14px 10px; }
.food-search[hidden] { display: none; }
.food-search input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--field-border) 50%, transparent);
  border-radius: 12px;
  background: var(--field);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.food-sheet-body { overflow-y: auto; padding: 4px 14px calc(18px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.food-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
@media (max-width: 420px) { .food-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.food-tile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  min-height: 140px;
  padding: 14px 8px 12px;
  border: 1px solid color-mix(in srgb, var(--mist) 20%, transparent);
  border-radius: 16px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--violet) 40%, transparent), color-mix(in srgb, var(--plum) 26%, transparent));
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.food-tile:hover, .food-tile:focus-visible { border-color: var(--lavender); outline: none; }
.food-tile img { width: 64px; height: 64px; filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--shadow-color) 35%, transparent)); }
.food-tile-text { display: grid; gap: 3px; }
.food-tile-text strong { font-size: .88rem; line-height: 1.2; }
.food-tile-text small { color: var(--muted); font-size: .72rem; }
.food-group-title { margin: 16px 2px 6px; color: var(--accent-text); font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.food-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.food-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--mist) 14%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--navy-soft) 60%, transparent);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.food-row:hover, .food-row:focus-visible { border-color: color-mix(in srgb, var(--lavender) 70%, transparent); outline: none; }
.food-row img { flex: 0 0 auto; width: 48px; height: 48px; }
.food-row-text { display: grid; flex: 1 1 auto; gap: 2px; min-width: 0; }
.food-row-text strong { font-size: .9rem; }
.food-row-text small { color: var(--muted); font-size: .74rem; }
.food-badge { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: color-mix(in srgb, var(--lavender) 22%, transparent); color: var(--text-strong); font-size: .66rem; font-weight: 800; }
.food-badge-menu { background: color-mix(in srgb, var(--success) 45%, transparent); }
.food-star { flex: 0 0 auto; color: var(--warning); color: color-mix(in oklab, var(--warning) 60%, var(--text-strong)); font-size: 1.1rem; }
.food-empty { margin: 14px 2px; color: var(--muted); }
.food-create {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed color-mix(in srgb, var(--mist) 40%, transparent);
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.food-create:hover, .food-create:focus-visible { border-color: var(--lavender); outline: none; }

.food-detail { display: grid; gap: 16px; }
.food-hero { display: flex; align-items: center; gap: 14px; }
.food-hero img { flex: 0 0 auto; width: 96px; height: 96px; filter: drop-shadow(0 8px 14px color-mix(in srgb, var(--shadow-color) 40%, transparent)); }
.food-per100 { margin: 0 0 4px; font-size: .9rem; }
.food-source { margin: 0; color: var(--muted); font-size: .76rem; }
.food-link-button { padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-weight: 750; text-decoration: underline; cursor: pointer; }
.food-field { display: grid; gap: 8px; }
.food-field .field-label { margin: 0; }
.food-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.food-chip {
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--mist) 24%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--navy) 40%, transparent);
  color: var(--text);
  font: inherit;
  font-size: .84rem;
  font-weight: 750;
  cursor: pointer;
}
.food-chip small { color: var(--muted); font-weight: 600; }
.food-chip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--lavender) 60%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 82%, transparent), color-mix(in srgb, var(--plum) 72%, transparent));
  color: var(--text-strong);
}
.food-chip[aria-pressed="true"] small { color: inherit; }
.food-qty { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 8px; }
.food-qty input {
  width: 100%;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--field) 88%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 18px;
  font-weight: 750;
  text-align: center;
}
.food-qty-hint { min-height: 1em; color: var(--muted); font-size: .8rem; }
.food-nutrients { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.food-nutrients div {
  display: grid;
  gap: 3px;
  padding: 10px 6px;
  border: 1px solid color-mix(in srgb, var(--mist) 18%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--navy-soft) 70%, transparent);
  text-align: center;
}
.food-nutrients div.is-main { border-color: color-mix(in srgb, var(--lavender) 55%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--violet) 55%, transparent), color-mix(in srgb, var(--plum) 40%, transparent)); }
.food-nutrients span { color: var(--accent-text); font-size: .72rem; font-weight: 800; }
.food-nutrients strong { font-size: 1.05rem; }
.food-nutrients .is-main strong { color: var(--text-strong); font-size: 1.2rem; }
@media (max-width: 420px) { .food-nutrients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.food-favorite {
  justify-self: start;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--mist) 26%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.food-favorite[aria-pressed="true"] { border-color: color-mix(in oklab, var(--warning) 60%, var(--text-strong)); color: var(--text-strong); }
.food-favorite[aria-pressed="true"] span { color: color-mix(in oklab, var(--warning) 60%, var(--text-strong)); }
.food-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.food-actions .primary-button:disabled { opacity: .5; cursor: default; }

.food-form { display: grid; gap: 12px; }
.food-form-field { display: grid; gap: 5px; margin: 0; padding: 0; border: 0; font-weight: 700; }
.food-form-field > span, .food-form-field legend { color: var(--label-color); font-size: .86rem; }
.food-form-field small { color: var(--muted); font-weight: 600; }
.food-form-field input:not([type="radio"]), .food-form-field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--field) 88%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
}
.food-form-unit { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.food-form-unit legend { margin-bottom: 5px; }
.food-form-unit label { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; }
.food-form-unit input { accent-color: var(--lavender); }
.food-form-note { margin: 0; color: var(--muted); font-size: .78rem; }
.food-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.food-form-portion { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.food-form-error { margin: 0; color: var(--text-strong); color: color-mix(in oklab, var(--rose) 70%, var(--text-strong)); font-weight: 700; }
.food-form-error[hidden] { display: none; }
/* Keep the visually hidden type radios inside their cards. */
.carbs-type-option { position: relative; }
.carbs-type-option > input { top: 0; left: 0; width: 1px !important; height: 1px; }
/* Meal rows in carbs tables: names wrap on two lines inside the type cell. */
.carbs-type-inline > span:last-child { min-width: 0; }
.meal-inline-items {
  display: -webkit-box;
  max-width: 11rem;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}
td:has(> .carbs-type-inline .meal-inline-items) .carbs-type-inline { white-space: normal; align-items: flex-start; }
/* Total / net carbs choice as a two-option toggle. */
.meal-basis { gap: 8px; }
.entry-form .meal-basis label {
  position: relative;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--mist) 26%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--navy) 40%, transparent);
  cursor: pointer;
}
.entry-form .meal-basis label input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.entry-form .meal-basis label:has(input:checked) {
  border-color: var(--lavender);
  background: var(--navy);
  background: color-mix(in srgb, var(--lavender) 14%, var(--navy));
  box-shadow: inset 0 0 0 1px var(--lavender);
  color: var(--text-strong);
}
.entry-form .meal-basis label:has(input:focus-visible) { outline: 2px solid var(--lavender); outline-offset: 2px; }
.entry-form .meal-basis label:has(input:checked) small { color: inherit; }

/* ------------------------------------------------------------------------
   Food settings (v101)
   ------------------------------------------------------------------------ */
.fs-add-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.fs-add-row h2 { margin-bottom: 10px; }
.fs-add-row .settings-section-intro { margin: 0; max-width: 46ch; }
.fs-count { color: var(--muted); font-size: .84rem; font-weight: 700; }
.fs-filters { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; margin-bottom: 14px; }
.fs-search, .fs-filter {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--field-border) 55%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--field) 92%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.fs-show { display: flex; grid-column: 1 / -1; gap: 6px; }
.fs-show label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--mist) 26%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--navy) 36%, transparent);
  font-size: .84rem;
  font-weight: 750;
  cursor: pointer;
}
.fs-show input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fs-show label:has(input:checked) { border-color: color-mix(in srgb, var(--lavender) 60%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 82%, transparent), color-mix(in srgb, var(--plum) 72%, transparent)); color: var(--text-strong); }
.fs-show label:has(input:focus-visible) { outline: 2px solid var(--lavender); outline-offset: 2px; }
@media (max-width: 560px) { .fs-filters { grid-template-columns: 1fr; } }
.fs-high + .fs-high { margin-top: 18px; }
.fs-high-title { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 1.02rem; }
.fs-high-title img { width: 32px; height: 32px; }
.fs-low-title { margin: 12px 2px 6px; color: var(--accent-text); font-size: .76rem; letter-spacing: .03em; text-transform: uppercase; }
.fs-edit-hint { flex: 0 0 auto; color: var(--link); font-size: .78rem; font-weight: 750; }

.fs-sheet .food-sheet-head > span { width: 40px; }
.fs-sheet { grid-template-rows: auto minmax(0, 1fr); }
.fs-form { display: grid; align-content: start; gap: 16px; }
.fs-picture { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid color-mix(in srgb, var(--mist) 18%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--navy-soft) 55%, transparent); }
.fs-picture > img { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 16px; object-fit: cover; background: color-mix(in srgb, var(--violet) 25%, transparent); }
.fs-picture-text { display: grid; gap: 6px; min-width: 0; }
.fs-label { font-weight: 800; }
.fs-label small, .fs-picture-text > small { color: var(--muted); font-weight: 600; }
.fs-picture-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fs-picture-actions .colors-text-button { min-height: 36px; padding: 6px 10px; font-size: .82rem; }
.fs-upload { position: relative; display: inline-flex; align-items: center; overflow: hidden; }
.fs-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fs-upload:focus-within { outline: 2px solid var(--lavender); outline-offset: 2px; }
.fs-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px;
  /* An explicit height: inside the scrolling form grid a max-height alone
     let the gallery collapse to a sliver on desktop. */
  height: min(260px, 45vh);
  flex: 0 0 auto;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--mist) 18%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--navy-soft) 55%, transparent);
}
.fs-gallery[hidden] { display: none; }
.fs-gallery-item { display: grid; place-items: center; aspect-ratio: 1; padding: 4px; border: 2px solid transparent; border-radius: 11px; background: color-mix(in srgb, var(--navy) 40%, transparent); cursor: pointer; }
.fs-gallery-item img { width: 40px; height: 40px; }
.fs-gallery-item[aria-pressed="true"] { border-color: var(--lavender); background: color-mix(in srgb, var(--lavender) 20%, transparent); }
.fs-gallery-item:focus-visible { outline: 2px solid var(--text-strong); }
.fs-req { color: color-mix(in oklab, var(--rose) 75%, var(--text-strong)); font-weight: 900; }
.fs-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 480px) { .fs-grid-2 { grid-template-columns: 1fr; } }
.food-form-field select:disabled { opacity: .6; }
.fs-unit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.fs-unit legend { grid-column: 1 / -1; margin-bottom: 6px; color: var(--label-color); font-size: .86rem; }
.fs-unit-option { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--mist) 24%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--navy) 36%, transparent); cursor: pointer; }
.fs-unit-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fs-unit-option span { display: grid; gap: 1px; }
.fs-unit-option small { color: var(--muted); font-weight: 600; }
.fs-unit-option:has(input:checked) { border-color: color-mix(in srgb, var(--lavender) 60%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 82%, transparent), color-mix(in srgb, var(--plum) 72%, transparent)); color: var(--text-strong); }
.fs-unit-option:has(input:checked) small { color: inherit; }
.fs-unit-option:has(input:focus-visible) { outline: 2px solid var(--lavender); outline-offset: 2px; }
.fs-num { position: relative; display: grid; gap: 4px; font-weight: 700; }
.fs-num small { color: var(--label-color); font-size: .8rem; }
.fs-num input {
  width: 100%;
  padding: 10px 30px 10px 12px;
  border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--field) 88%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.fs-num i { position: absolute; right: 11px; bottom: 11px; color: var(--ink); font-size: .82rem; font-style: normal; opacity: .65; pointer-events: none; }
.fs-help { color: var(--muted); font-size: .76rem; font-weight: 600; }
.fs-portions { display: grid; gap: 8px; }
.fs-portion { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 36px; align-items: center; gap: 8px; }
.fs-portion > input {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent);
  border-radius: 11px;
  background: color-mix(in srgb, var(--field) 88%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.fs-portion .fs-num i { bottom: 12px; }
.fs-add-portion { justify-self: start; min-height: 36px; padding: 6px 12px; font-size: .84rem; }
.fs-add-portion[hidden] { display: none; }
.fs-required-note { margin: 0; color: var(--muted); font-size: .78rem; }
.fs-actions { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); margin: 0 -14px; padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid color-mix(in srgb, var(--mist) 16%, transparent); background: var(--navy-soft); }
.fs-danger { margin-right: auto; }
.fs-danger[hidden] { display: none; }
.fs-danger { border-color: color-mix(in srgb, var(--rose) 65%, transparent); background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--text-strong); }
.fs-danger:hover { background: color-mix(in srgb, var(--danger) 45%, transparent); }
.fs-actions { flex-wrap: wrap; }
[data-fs-restore][hidden] { display: none; }
.fs-confirm-backdrop { z-index: 1200; }
.fs-confirm-dialog { max-height: calc(100dvh - 40px); overflow-y: auto; }
.fs-confirm-dialog .delete-modal-entry { overflow-wrap: anywhere; }
.fs-confirm-dialog .fs-confirm-error { margin-top: 14px; color: var(--rose); }
.fs-confirm-dialog button:focus-visible { outline: 3px solid var(--lavender); outline-offset: 3px; }
.fs-toast {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 1100;
  max-width: calc(100% - 32px);
  padding: 11px 16px;
  border: 1px solid color-mix(in srgb, var(--lavender) 50%, transparent);
  border-radius: 13px;
  background: var(--navy);
  color: var(--text-strong);
  font-weight: 750;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow-color) 45%, transparent);
  transform: translateX(-50%);
}
.fs-toast[hidden] { display: none; }
/* Uploaded photos are square images: round them like the illustrations' tiles. */
.food-row img, .food-hero img, .meal-item-main img { border-radius: 12px; object-fit: cover; }

/* iPhone Safari zooms into any focused field whose text is smaller than
   16 px, and the zoom then stays. Keep every field at 16 px or more on touch
   screens (v102). */
@media (hover: none) and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea {
    font-size: max(16px, 1em) !important;
  }
}
.meal-item-qty select { font-size: 16px; }

/* Favourites in Food settings (v102) */
.fs-row { display: flex; align-items: stretch; gap: 6px; }
.fs-row > .food-row { flex: 1 1 auto; min-width: 0; }
.fs-fav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 48px;
  border: 1px solid color-mix(in srgb, var(--mist) 14%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--navy-soft) 60%, transparent);
  color: var(--muted);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .12s ease, color .12s ease;
}
.fs-fav:hover, .fs-fav:focus-visible { border-color: color-mix(in srgb, var(--lavender) 70%, transparent); outline: none; }
.fs-fav:active { transform: scale(.9); }
/* Favourite stars are always yellow, whatever the colour theme. */
.fs-fav[aria-pressed="true"],
.food-star,
.food-favorite[aria-pressed="true"] span {
  color: #ffc83d;
  text-shadow: 0 0 1px rgba(120, 80, 0, .55), 0 1px 3px rgba(0, 0, 0, .25);
}
.food-favorite[aria-pressed="true"] { border-color: #ffc83d; }

/* Unreadable data file warning (v103) */
.data-file-alert small { display: block; margin-top: 6px; opacity: .9; overflow-wrap: anywhere; }
.data-file-alert code, .data-error-steps code { overflow-wrap: anywhere; }
.data-error-steps { padding-left: 20px; }
.data-error-steps li { margin-bottom: 8px; }

/* v105: home summary and explicit scheduled-basal confirmation. */
.home-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-heading h1 { margin-bottom: 6px; }
.home-sync { font-size: .85rem; margin: 0 0 18px; }
.home-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.home-status-grid .card { margin: 0; padding: 24px; }
.home-status-grid h2 { font-size: 1.05rem; margin: 0 0 16px; }
.home-status-grid h2 small { font-size: .8rem; font-weight: 400; }
.home-status-grid p { line-height: 1.5; margin: 9px 0; }
.home-value { font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 750; letter-spacing: -.03em; }
.home-value small { font-size: 1rem; font-weight: 500; letter-spacing: 0; }
.home-glucose { background: linear-gradient(135deg, var(--navy), var(--navy-soft)); }
.home-glucose .home-value { font-size: 3.4rem; }
.home-data-note { font-size: .86rem; color: var(--muted); }
.home-quality { font-weight: 650; font-size: .92rem; }
.home-reminder-title { font-size: 1.1rem; font-weight: 650; }
.home-pending { border-top: 1px solid color-mix(in srgb, var(--mist) 35%, transparent); margin-top: 15px; padding-top: 8px; }
.home-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 24px 0 18px; }
.home-actions > * { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 20px 16px; min-height: 105px; border: 1px solid color-mix(in srgb, var(--mist) 45%, transparent); border-radius: 16px; background: var(--navy); color: var(--text-strong); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.home-actions strong { font-size: 1.15rem; }
.home-actions span { font-size: .82rem; color: var(--muted); }
.home-actions > *:hover, .home-actions > *[aria-expanded="true"] { background: var(--navy-soft); border-color: var(--lavender); }
.home-actions > *:focus-visible, .home-record-links a:focus-visible { outline: 3px solid var(--lavender); outline-offset: 3px; }
.home-record-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.home-record-links a { padding: 12px 16px; background: var(--navy); color: var(--text-strong); border-radius: 10px; text-decoration: none; }
.home-action-panel[hidden], .home-pending[hidden] { display: none; }
.home-stale .home-status-grid { border: 2px solid var(--rose); border-radius: 22px; }
.basal-status { display: block; font-size: .75rem; margin-top: 5px; white-space: normal; }
.basal-status[data-state="pending"] { color: var(--rose); font-weight: 700; }
.basal-confirmation-dialog p { margin-bottom: 16px; }
.basal-confirmation-dialog .basal-confirmation-dose { color: var(--text-strong); font-weight: 750; font-size: 1.15rem; }
.basal-confirmation-actions { display: grid; gap: 10px; margin: 22px 0; }
.basal-confirmation-actions button { width: 100%; min-height: 48px; }
.basal-confirmation-dialog [data-basal-error] { color: var(--rose); }
@media (max-width: 640px) {
  .home-status-grid { grid-template-columns: 1fr; gap: 14px; }
  .home-status-grid .card { padding: 21px; }
  .home-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .home-actions > * { min-height: 95px; padding: 16px 12px; }
}
/* Keep the eight navigation links usable on narrow phones. */
.quick-input-nav { overflow-x: auto; overscroll-behavior-x: contain; }
.quick-input-link { flex: 0 0 auto; }
.quick-input-link.quick-home-link { width: 32px; min-width: 32px; padding: 0; }
.quick-home-link svg { display: block; flex: 0 0 auto; }
.top-actions .menu-anchor { flex: 0 0 auto; }
.home-actions { margin-top: 0; }
.home-action-panel { margin-top: 18px; }

/* v107: personal glucose outlook, deliberately explicit about evidence. */
/* Low-handling workflow (v120). */
[data-low-handling] [hidden], [data-high-handling] [hidden] { display: none; }
.hh-dose-label { display: block; margin: 18px 0 8px; font-weight: 700; }
[data-high-advice] .iob-summary { margin-bottom: 14px; }
.lh-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.lh-actions .primary-button { white-space: normal; }
.lh-analysis-link { margin: 22px 0 0; text-align: right; font-size: .875rem; }
.lh-analysis-link a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.lh-analysis-link a:hover, .lh-analysis-link a:focus-visible { color: var(--text-strong); }
.lh-last-low > summary { cursor: pointer; color: var(--text-strong); font-size: 1.1rem; font-weight: 750; }
.lh-last-low[open] > summary { margin-bottom: 16px; }

.lh-peak { color: var(--text-strong); font-size: 1.1rem; font-weight: 750; }
.lh-readings { display: grid; gap: 6px; list-style: none; margin: 14px 0; padding: 0; }
.lh-readings li { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: space-between; padding: 9px 12px; border-radius: 10px; background: var(--navy); }
.lh-readings time { color: var(--muted); }
.lh-recheck { display: flex; align-items: end; flex-wrap: wrap; gap: 12px; }
.lh-recheck label, .lh-confirm label { display: grid; gap: 6px; min-width: 0; font-weight: 700; }
.lh-recheck input, .lh-confirm input { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--field-border); border-radius: 10px; background: var(--field); color: var(--ink); font: inherit; font-size: 16px; }
.lh-recheck label { flex: 1 1 170px; }
[data-high-diagnostics] { overflow-wrap: anywhere; }
@media (max-width: 520px) {
  [data-high-handling] .lh-recheck { display: grid; grid-template-columns: minmax(0, 1fr); }
}
body.lh-dialog-open { overflow: hidden; }
.lh-confirm { padding: 0; width: min(480px, calc(100% - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border: 1px solid var(--border); border-radius: 20px; background: var(--navy); color: var(--text); box-shadow: 0 24px 70px var(--shadow); }
.lh-confirm::backdrop { background: rgba(0, 0, 0, .6); }
.lh-confirm[open] { display: flex; }
.lh-confirm form { display: flex; flex-direction: column; min-height: 0; width: 100%; }
[data-high-dialog] [hidden] { display: none; }
.lh-confirm-body { display: grid; gap: 14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 22px; }
.lh-confirm-body h2, .lh-confirm-body p { margin: 0; }
.lh-confirm-foot { display: flex; flex: 0 0 auto; justify-content: end; gap: 12px; padding: 14px 22px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--navy-soft); }
.lh-confirm input[type="datetime-local"] { padding-inline: 8px; font-weight: 400; }
@media (max-width: 370px) { .lh-confirm-body { padding: 16px; } }
[data-low-followup][hidden], [data-low-new][hidden] { display: none; }

[data-forecast] { max-width: 1060px; margin: 0 auto; }
[data-forecast] .card { margin-top: 20px; padding: 24px; }
[data-forecast] p { line-height: 1.6; }
[data-forecast] .home-sync { margin-top: 20px; }
.forecast-safety { border-left: 4px solid var(--rose); padding: 15px 18px; background: var(--navy); border-radius: 0 12px 12px 0; }
.forecast-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.forecast-range { background: var(--navy); border: 1px solid color-mix(in srgb, var(--mist) 35%, transparent); border-radius: 16px; padding: 22px; }
.forecast-range h3 { font-size: 1rem; margin: 0 0 8px; }
.forecast-value { font-weight: 750; font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.02em; overflow-wrap: anywhere; }
.forecast-confidence { color: var(--lavender); font-weight: 700; }
.forecast-note { font-size: .87rem; color: var(--muted); }
.forecast-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 650; }
.forecast-mode select { max-width: 100%; min-height: 46px; }
.forecast-scroll { max-width: 100%; overflow-x: auto; margin: 20px 0; }
.forecast-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .9rem; }
.forecast-table th, .forecast-table td { padding: 14px 12px; border-bottom: 1px solid color-mix(in srgb, var(--mist) 25%, transparent); vertical-align: top; }
.forecast-table td { font-variant-numeric: tabular-nums; }
.forecast-table th { font-weight: 600; }
[data-forecast] details { margin-top: 18px; }
[data-forecast] summary { cursor: pointer; font-weight: 650; padding: 10px 0; min-height: 44px; }
[data-forecast] summary:focus-visible, .forecast-scroll:focus-visible { outline: 2px solid var(--lavender); outline-offset: 4px; }
.forecast-decision { padding: 8px 16px; border-radius: 12px; background: var(--navy); }
[data-forecast] [hidden] { display: none; }
@media (max-width: 640px) {
  .forecast-grid { grid-template-columns: 1fr; }
  [data-forecast] .card { padding: 18px; }
  .forecast-range { padding: 18px; }
  .forecast-table { min-width: 540px; }
}

/* ------------------------------------------------------------------------
   Home dashboard (v108): automatic updates, glucose first, direct record
   tiles, situation sheets.
   ------------------------------------------------------------------------ */
.hm-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.hm-heading h1 { margin-bottom: 4px; }
.hm-live {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--mist) 26%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--navy) 70%, transparent);
  color: var(--text);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hm-live:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
.hm-home-heading { flex-wrap: wrap; }
.hm-home-heading > div { flex: 1 1 14rem; min-width: 0; }
.hm-live[data-home-live] { box-sizing: border-box; width: 15rem; max-width: 100%; height: 2.125rem; }
.hm-live[data-home-live] .hm-live-dot { flex: 0 0 9px; }
.hm-live[data-home-live] [data-home-sync] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hm-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 30%, transparent); }
.hm-live[data-state="ok"] .hm-live-dot { background: color-mix(in oklab, var(--success) 70%, var(--text-strong)); }
.hm-live[data-state="syncing"] .hm-live-dot { background: var(--lavender); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lavender) 30%, transparent); animation: hm-pulse 1s ease-in-out infinite; }
.hm-live[data-state="stale"] .hm-live-dot { background: color-mix(in oklab, var(--warning) 75%, var(--text-strong)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 30%, transparent); }
.hm-live[data-state="error"] { border-color: color-mix(in srgb, var(--rose) 60%, transparent); }
.hm-live[data-state="error"] .hm-live-dot { background: var(--rose); box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose) 30%, transparent); }
@keyframes hm-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .hm-live[data-state="syncing"] .hm-live-dot { animation: none; } }

.hm { display: grid; gap: 16px; }
.hm-error { margin: 0; }
.hm-attention {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent);
  border-radius: 16px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--warning) 32%, var(--navy)), color-mix(in srgb, var(--warning) 14%, var(--navy-soft)));
  box-shadow: 0 10px 26px var(--shadow);
  color: var(--text);
}
.hm-attention[hidden] { display: none; }
.hm-attention img { flex: 0 0 auto; }
.hm-attention p { display: grid; flex: 1 1 auto; gap: 2px; margin: 0; }
.hm-attention span { color: var(--muted); font-size: .84rem; }
.hm-attention .primary-button { flex: 0 0 auto; padding: 10px 18px; }

.hm-layout { display: grid; gap: 16px; }
@media (min-width: 960px) {
  .hm-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
}
.hm-status, .hm-actions { display: grid; gap: 14px; align-content: start; }
.hm-actions { gap: 18px; }

.hm-glucose {
  position: relative;
  display: grid;
  gap: 6px;
  overflow: hidden;
  padding: 20px 22px 18px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--hm-accent, var(--lavender)) 34%, transparent), transparent 55%),
    linear-gradient(145deg, color-mix(in srgb, var(--violet) 94%, transparent), color-mix(in srgb, var(--violet-deep) 94%, transparent) 50%, color-mix(in srgb, var(--plum) 94%, transparent));
  box-shadow: 0 14px 34px var(--shadow);
  color: var(--text);
}
.hm-glucose::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 6px; background: var(--hm-accent, transparent); }
.hm-glucose[data-range="low"] { --hm-accent: var(--rose); }
.hm-glucose[data-range="high"] { --hm-accent: color-mix(in oklab, var(--warning) 80%, var(--text-strong)); }
.hm-glucose[data-range="band"] { --hm-accent: color-mix(in oklab, var(--success) 75%, var(--text-strong)); }
.hm-glucose[data-range="outside"] { --hm-accent: var(--lavender); }
.hm-glucose-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hm-glucose h2, .hm-stat h2 { margin: 0; color: var(--accent-text); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }
.hm-glucose h2 { color: var(--text); opacity: .85; }
.hm-range {
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--hm-accent, var(--lavender)) 30%, var(--navy));
  border: 1px solid color-mix(in srgb, var(--hm-accent, var(--lavender)) 70%, transparent);
  color: var(--text-strong);
  font-size: .76rem;
  font-weight: 800;
  white-space: nowrap;
}
.hm-range[hidden] { display: none; }
.hm-glucose-value { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin: 2px 0 0; }
.hm-glucose-value > span:first-child { color: var(--text-strong); font-size: clamp(3.4rem, 13vw, 4.6rem); font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.hm-glucose-value small { color: var(--muted); font-size: 1rem; font-weight: 650; }
.hm-trend { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--navy) 45%, transparent); color: var(--text-strong); font-size: .9rem; font-weight: 800; }
.hm-trend[hidden] { display: none; }
.hm-glucose-age { margin: 0; font-weight: 700; }
.hm-glucose.is-old .hm-glucose-value > span:first-child { opacity: .62; }
.hm-glucose.is-old .hm-glucose-age::before { content: "⚠ "; }
.hm-fine { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.hm-fine:empty { display: none; }
.hm-glucose-action {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 8px;
  margin-top: 8px;
  padding: 9px 14px;
  border: 1px solid color-mix(in srgb, var(--sheen) 25%, transparent);
  border-radius: 12px;
  background: linear-gradient(135deg, var(--button-bg), var(--button-bg-end));
  color: var(--button-text);
  font-weight: 750;
  text-decoration: none;
}
.hm-glucose-action:hover, .hm-glucose-action:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }

.hm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hm-stat {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--navy) 96%, transparent), color-mix(in srgb, var(--navy-soft) 96%, transparent));
  box-shadow: 0 10px 26px var(--shadow);
  color: var(--text);
}
.hm-stat-value { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 0; color: var(--text-strong); font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hm-stat-value small { color: var(--muted); font-size: .9rem; font-weight: 650; }
.hm-stat-sub { margin: 0; font-size: .82rem; font-weight: 650; }
.hm-about { margin-top: 6px; font-size: .78rem; }
.hm-about summary { color: var(--link); font-weight: 700; cursor: pointer; }
.hm-about p { margin: 6px 0 0; color: var(--muted); line-height: 1.4; }

.hm-reminder {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--navy) 96%, transparent), color-mix(in srgb, var(--navy-soft) 96%, transparent));
  box-shadow: 0 10px 26px var(--shadow);
  color: var(--text);
  text-decoration: none;
}
.hm-reminder:hover, .hm-reminder:focus-visible { border-color: color-mix(in srgb, var(--lavender) 70%, transparent); outline: none; }
.hm-reminder.is-due { border-color: color-mix(in srgb, var(--warning) 70%, transparent); }
.hm-reminder img { flex: 0 0 auto; }
.hm-reminder-text { display: grid; flex: 1 1 auto; gap: 1px; min-width: 0; }
.hm-reminder-text small { color: var(--accent-text); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hm-reminder-text strong { color: var(--text-strong); }
.hm-reminder-text > span { font-size: .84rem; }
.hm-reminder.is-due .hm-reminder-text > span:not(.hm-fine) { color: color-mix(in oklab, var(--warning) 55%, var(--text-strong)); font-weight: 750; }
.hm-chevron { flex: 0 0 auto; color: var(--muted); font-size: 1.6rem; line-height: 1; }

.hm-section-title { margin: 0 2px 10px; color: var(--title-color); font-size: 1rem; }
.hm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hm-tile {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  min-height: 120px;
  padding: 14px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--navy) 96%, transparent), color-mix(in srgb, var(--navy-soft) 96%, transparent));
  box-shadow: 0 8px 22px var(--shadow);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  transition: transform .14s ease, border-color .14s ease;
  -webkit-tap-highlight-color: transparent;
}
.hm-tile img { width: 44px; height: 44px; margin-bottom: 4px; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--shadow-color) 35%, transparent)); }
.hm-tile strong { color: var(--text-strong); font-size: .92rem; line-height: 1.2; }
.hm-tile span { color: var(--muted); font-size: .72rem; line-height: 1.25; }
.hm-tile:hover, .hm-tile:focus-visible { border-color: color-mix(in srgb, var(--lavender) 75%, transparent); outline: none; transform: translateY(-2px); }
.hm-tile:active { transform: scale(.97); }

.hm-situations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hm-situation {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--navy) 96%, transparent), color-mix(in srgb, var(--navy-soft) 96%, transparent));
  color: var(--text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.hm-situation:last-child:nth-child(odd) { grid-column: 1 / -1; }
.hm-situation img { flex: 0 0 auto; }
.hm-situation span { display: grid; gap: 1px; min-width: 0; }
.hm-situation strong { color: var(--text-strong); }
.hm-situation small { color: var(--muted); font-size: .76rem; }
.hm-situation-low { background: linear-gradient(145deg, color-mix(in srgb, var(--danger) 36%, var(--navy)), color-mix(in srgb, var(--danger) 16%, var(--navy-soft))); border-color: color-mix(in srgb, var(--rose) 45%, transparent); }
.hm-situation-high { background: linear-gradient(145deg, color-mix(in srgb, var(--warning) 32%, var(--navy)), color-mix(in srgb, var(--warning) 14%, var(--navy-soft))); border-color: color-mix(in srgb, var(--warning) 50%, transparent); }
.hm-situation:hover, .hm-situation:focus-visible { border-color: var(--lavender); outline: none; }

.hm-stale .hm-glucose, .hm-stale .hm-stat { opacity: .82; }

/* Situation sheets */
body.hm-sheet-open { overflow: hidden; }
.hm-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: color-mix(in srgb, var(--shadow-color) 60%, transparent);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.hm-sheet-backdrop[hidden], .hm-sheet[hidden] { display: none; }
.hm-sheet {
  display: grid;
  gap: 14px;
  width: min(460px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 18px 18px 20px;
  border: 1px solid color-mix(in srgb, var(--mist) 26%, transparent);
  border-radius: 22px;
  background: linear-gradient(165deg, var(--navy), var(--navy-soft));
  color: var(--text);
  box-shadow: 0 28px 70px color-mix(in srgb, var(--shadow-color) 55%, transparent);
}
.hm-sheet:focus { outline: none; }
.hm-sheet-head { display: flex; align-items: center; gap: 12px; }
.hm-sheet-head h2 { flex: 1 1 auto; margin: 0; font-size: 1.25rem; }
.hm-sheet-close { width: 40px; height: 40px; border: 1px solid color-mix(in srgb, var(--mist) 24%, transparent); border-radius: 12px; background: transparent; color: var(--text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.hm-sheet > p { margin: 0; line-height: 1.5; }
.hm-sheet-actions { display: grid; gap: 8px; }
.hm-sheet-actions a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--mist) 20%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--navy-soft) 70%, transparent);
  color: var(--text-strong);
  font-weight: 750;
  text-decoration: none;
}
.hm-sheet-actions a::after { content: "›"; margin-left: auto; color: var(--muted); font-size: 1.4rem; }
.hm-sheet-actions a:hover, .hm-sheet-actions a:focus-visible { border-color: var(--lavender); outline: none; }

@media (max-width: 680px) {
  .hm-heading { align-items: center; }
  .hm-live { margin-top: 0; padding: 6px 10px; }
  .hm-glucose { padding: 18px 18px 16px; }
  .hm-stat { padding: 14px; }
  .hm-stat-value { font-size: 1.45rem; }
  .hm-attention { flex-wrap: wrap; }
  .hm-attention p { flex-basis: calc(100% - 60px); }
  .hm-attention .primary-button { width: 100%; }
  .hm-sheet-backdrop { place-items: end center; padding: 0; }
  .hm-sheet { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
}
@media (max-width: 370px) {
  .hm-tile span { display: none; }
  .hm-tile { min-height: 96px; }
}

/* Phones: glucose, then IOB / last insulin, then urgent actions and
   record tiles; the reminder last. */
@media (max-width: 959px) {
  .hm-layout, .hm-status, .hm-actions { display: contents; }
  .hm { grid-template-columns: minmax(0, 1fr); }
  .hm-glucose { order: 1; }
  .hm-stats { order: 2; }
  .hm-actions > section:first-child { order: 3; }
  .hm-actions > section:last-child { order: 4; }
  .hm-reminder { order: 5; }
  .hm-attention, .hm-error { order: 0; }
}

/* ------------------------------------------------------------------------
   Glucose outlook (v109)
   ------------------------------------------------------------------------ */
.go { display: grid; gap: 16px; }
.go .card { margin: 0; }
.go-safety {
  margin: 0;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--warning) 50%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--warning) 18%, var(--navy));
  color: var(--text);
  font-size: .86rem;
  line-height: 1.45;
}
.go-help { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.go-now { display: grid; gap: 12px; }
.go-now-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.go-now-head h2 { margin: 0; }
.go-input { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.go-input label { width: 100%; color: var(--label-color); font-size: .82rem; font-weight: 700; }
.go-input-field { position: relative; }
.go-input-field input {
  width: 9.5rem;
  padding: 10px 62px 10px 14px;
  border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--field) 92%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 1.35rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.go-input-field input:focus { outline: 3px solid color-mix(in srgb, var(--lavender) 45%, transparent); border-color: var(--lavender); }
.go-input .go-input-field { max-width: 100%; }
.go-input .go-input-field input { width: 12rem; max-width: 100%; }
.go-input-field span { position: absolute; right: 12px; top: 50%; color: var(--ink); font-size: .8rem; opacity: .65; transform: translateY(-50%); pointer-events: none; }
.go-input .primary-button { padding: 13px 18px; }
.go-result { display: grid; gap: 12px; }
.go-result[hidden], .go-empty[hidden] { display: none; }
.go-headline { margin: 0; font-size: 1.02rem; line-height: 1.5; }
.go-headline strong { color: var(--text-strong); }
.go-caution { display: block; margin-top: 6px; color: color-mix(in oklab, var(--rose) 75%, var(--text-strong)); font-size: .88rem; font-weight: 700; }
.go-chart, .go-item svg { width: 100%; }
.go-result:not([hidden]) .go-chart { min-height: 1px; }
.go-svg { display: block; width: 100%; height: auto; overflow: visible; }
.go-chart { padding: 8px 6px 2px; border: 1px solid color-mix(in srgb, var(--mist) 16%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--navy) 55%, transparent); }
.go-target { fill: color-mix(in srgb, var(--success) 12%, transparent); }
.go-grid { stroke: var(--grid); stroke-width: 1; }
.go-grid-v { stroke-dasharray: 2 4; }
.go-axis { fill: var(--muted); font-size: 12px; font-family: inherit; }
.go-axis-zero { fill: var(--text); font-weight: 700; }
.go-axis-clock { font-size: 11px; opacity: .8; }
.go-lowline { stroke: var(--rose); stroke-width: 1.5; stroke-dasharray: 6 4; }
.go-band80 { fill: color-mix(in srgb, var(--series-bg) 30%, transparent); }
.go-band50 { fill: color-mix(in srgb, var(--series-bg) 55%, transparent); }
.go-median { fill: none; stroke: var(--text-strong); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.go-start { fill: var(--rose); stroke: var(--text-strong); stroke-width: 2.5; }
.go-carb { stroke: var(--fast-carbs); stroke-width: 2; stroke-dasharray: 3 3; }
.go-carb-label { fill: var(--fast-carbs); font-size: 12px; font-weight: 800; font-family: inherit; }
.go-reading-line { fill: none; stroke: color-mix(in srgb, var(--text) 55%, transparent); stroke-width: 1.5; }
.go-reading { stroke: var(--navy); stroke-width: 1.5; }
.go-reading-before, .go-reading-none { fill: color-mix(in srgb, var(--text) 70%, transparent); }
.go-reading-origin { fill: var(--rose); stroke: var(--text-strong); stroke-width: 2; }
.go-reading-in { fill: color-mix(in oklab, var(--success) 65%, var(--text-strong)); }
.go-reading-out { fill: color-mix(in oklab, var(--warning) 70%, var(--text-strong)); }
.go-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--muted); font-size: .78rem; }
.go-legend span { display: inline-flex; align-items: center; gap: 6px; }
.go-legend i { display: inline-block; width: 18px; height: 10px; border-radius: 3px; }
.go-key-80 { background: color-mix(in srgb, var(--series-bg) 30%, transparent); }
.go-key-50 { background: color-mix(in srgb, var(--series-bg) 55%, transparent); }
.go-key-mid { height: 3px !important; background: var(--text-strong); }
.go-key-low { height: 0 !important; border-top: 2px dashed var(--rose); }
.go-key-carb { width: 0 !important; height: 12px !important; border-left: 2px dashed var(--fast-carbs); border-radius: 0 !important; }
.go-dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; }
.go-dot-in { background: color-mix(in oklab, var(--success) 65%, var(--text-strong)); }
.go-dot-out { background: color-mix(in oklab, var(--warning) 70%, var(--text-strong)); }
.go-points { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.go-point { display: grid; gap: 2px; padding: 9px 6px; border: 1px solid color-mix(in srgb, var(--mist) 16%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--navy-soft) 65%, transparent); text-align: center; }
.go-point span { color: var(--accent-text); font-size: .72rem; font-weight: 800; }
.go-point strong { color: var(--text-strong); font-size: .95rem; font-variant-numeric: tabular-nums; }
.go-point small { color: var(--muted); font-size: .72rem; }
@media (max-width: 680px) { .go-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.go-basis { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.go-empty { margin: 0; padding: 14px; border: 1px dashed color-mix(in srgb, var(--mist) 35%, transparent); border-radius: 14px; color: var(--muted); }
.go-record { display: flex; flex-wrap: wrap; gap: 8px; }
.go-record a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid color-mix(in srgb, var(--mist) 22%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--navy) 50%, transparent); color: var(--text-strong); font-weight: 700; text-decoration: none; }
.go-record a:hover, .go-record a:focus-visible { border-color: var(--lavender); outline: none; }

.go-past { display: grid; gap: 12px; }
.go-past .section-title-row h2 { margin: 0; }
.go-settings-link { color: var(--link); font-size: .84rem; font-weight: 700; }
.go-score { display: grid; gap: 8px; }
.go-score-main { display: flex; align-items: baseline; gap: 10px; }
.go-score-main strong { color: var(--text-strong); font-size: 2rem; font-weight: 800; letter-spacing: -.02em; }
.go-score-main span { font-weight: 650; }
.go-score-side { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: .84rem; }
.go-score-side strong { color: var(--text-strong); }
.go-timeline { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.go-item { display: grid; gap: 8px; padding: 12px 12px 8px; border: 1px solid color-mix(in srgb, var(--mist) 16%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--navy) 50%, transparent); }
.go-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.go-item-when { margin-right: auto; font-size: .9rem; }
.go-item-when strong { color: var(--text-strong); }
.go-chip, .go-badge { padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.go-chip-low { background: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--text-strong); }
.go-chip-carb { background: color-mix(in srgb, var(--fast-carbs) 30%, transparent); color: var(--text-strong); }
.go-badge { border: 1px solid color-mix(in srgb, var(--mist) 26%, transparent); color: var(--muted); }
.go-badge.is-good { border-color: color-mix(in srgb, var(--success) 70%, transparent); background: color-mix(in srgb, var(--success) 25%, transparent); color: var(--text-strong); }
.go-badge.is-mixed { border-color: color-mix(in srgb, var(--warning) 60%, transparent); color: var(--text-strong); }
.go-badge.is-bad { border-color: color-mix(in srgb, var(--rose) 70%, transparent); background: color-mix(in srgb, var(--danger) 25%, transparent); color: var(--text-strong); }
.go-more { justify-self: center; }
.go-more[hidden], .go-excluded[hidden] { display: none; }
.go-excluded summary { color: var(--link); font-weight: 700; cursor: pointer; }
.go-excluded ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: .84rem; }
.go-method summary { font-weight: 800; cursor: pointer; }
.go-method p { color: var(--text); font-size: .88rem; line-height: 1.55; }

/* High / unwell outlook additions (v110) */
.go-highline { stroke: color-mix(in oklab, var(--warning) 80%, var(--text-strong)); stroke-width: 1.5; stroke-dasharray: 6 4; }
.go-dose { stroke: var(--correction-bolus); stroke-width: 2; stroke-dasharray: 3 3; }
.go-dose-label { fill: var(--correction-bolus); font-size: 12px; font-weight: 800; font-family: inherit; }
.go-key-high { height: 0 !important; border-top: 2px dashed color-mix(in oklab, var(--warning) 80%, var(--text-strong)); }
.go-key-dose { width: 0 !important; height: 12px !important; border-left: 2px dashed var(--correction-bolus); border-radius: 0 !important; }
.go-chip-high { background: color-mix(in srgb, var(--warning) 35%, transparent); color: var(--text-strong); }
.go-chip-dose { background: color-mix(in srgb, var(--correction-bolus) 30%, transparent); color: var(--text-strong); }
.go-inputs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.go-inputs > div { display: grid; gap: 4px; }
.go-inputs label { color: var(--label-color); font-size: .82rem; font-weight: 700; }
.go-unwell { margin: 0; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--rose) 50%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--danger) 20%, var(--navy)); color: var(--text); font-size: .86rem; line-height: 1.45; }
.go-ill-note { margin: 0; color: color-mix(in oklab, var(--warning) 55%, var(--text-strong)); font-size: .86rem; font-weight: 700; }
.go-ill-note[hidden] { display: none; }
.go-chip { border: 1px solid color-mix(in srgb, var(--mist) 28%, transparent); color: var(--text); }
.go-chip-low, .go-chip-carb, .go-chip-high, .go-chip-dose { border-color: transparent; }

/* Favourite meals (v112) */
.fav-star { color: #ffc83d; text-shadow: 0 0 1px rgba(120, 80, 0, .55); }
.fav-meals { display: grid; gap: 8px; }
.fav-meals[hidden], .fav-confirm[hidden], .fav-save[hidden], .fav-save-form[hidden], .fav-saved[hidden], .fav-save-open[hidden] { display: none; }
.fav-meals-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fav-meals-head .field-label { margin: 0; }
.fav-meals-head a { color: var(--link); font-size: .82rem; font-weight: 700; }
.fav-meals-row { display: flex; gap: 8px; margin: 0 -4px; padding: 2px 4px 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.fav-meal {
  display: grid;
  flex: 0 0 auto;
  justify-items: start;
  gap: 3px;
  width: 158px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #ffc83d 45%, transparent);
  border-radius: 14px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--navy) 85%, transparent), color-mix(in srgb, var(--navy-soft) 85%, transparent));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  scroll-snap-align: start;
}
.fav-meal:hover, .fav-meal:focus-visible { border-color: #ffc83d; outline: none; }
.fav-meal-pics { display: flex; gap: 2px; min-height: 28px; }
.fav-meal-pics img { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }
.fav-meal strong { overflow: hidden; width: 100%; color: var(--text-strong); font-size: .9rem; text-overflow: ellipsis; white-space: nowrap; }
.fav-meal small { color: var(--muted); font-size: .74rem; }
.fav-confirm { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--lavender) 50%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--navy) 50%, transparent); }
.fav-confirm p { margin: 0; font-weight: 650; }
.fav-confirm-actions, .fav-save-row { display: flex; flex-wrap: wrap; gap: 8px; }
.fav-save { display: grid; gap: 8px; }
.fav-save-open { justify-self: start; }
.fav-save-form { display: grid; gap: 6px; }
.entry-form .fav-save-form label { margin: 0; color: var(--label-color); font-size: .84rem; }
.fav-save-row input { flex: 1 1 180px; min-width: 0; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--field) 88%, transparent); color: var(--ink); font: inherit; font-size: 16px; }
.fav-saved { margin: 0; color: var(--text-strong); font-size: .86rem; font-weight: 700; }
.fs-meals { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.fs-meal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: center; padding: 12px; border: 1px solid color-mix(in srgb, var(--mist) 16%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--navy-soft) 60%, transparent); }
.fs-meal-main { display: grid; gap: 2px; min-width: 0; }
.fs-meal-main strong { color: var(--text-strong); }
.fs-meal-carbs { color: var(--accent-text); font-size: .82rem; font-weight: 800; }
.fs-meal-main small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.fs-meal-actions { display: flex; gap: 6px; }
.fs-meal-actions .colors-text-button { min-height: 34px; padding: 6px 10px; font-size: .82rem; }
.fs-meal-rename { display: flex; flex-wrap: wrap; grid-column: 1 / -1; gap: 6px; }
.fs-meal-rename[hidden] { display: none; }
.fs-meal-rename input { flex: 1 1 180px; min-width: 0; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--field) 88%, transparent); color: var(--ink); font: inherit; font-size: 16px; }
.fs-meal .food-form-error { grid-column: 1 / -1; }
@media (max-width: 560px) { .fs-meal { grid-template-columns: 1fr; } }
.fav-meal { width: 170px; }
.fav-meal strong { display: -webkit-box; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }

/* ------------------------------------------------------------------------
   Coloured cards have their own text colours (v113). Cards alternate
   between the coloured style and the dark style; inside a coloured card the
   shared text tokens are re-pointed to the coloured-card tokens, so every
   descendant follows them. Dark panels nested in a coloured card go back to
   the dark-card colours (kept in --base-* aliases computed at the root).
   ------------------------------------------------------------------------ */
:root {
  --base-heading-color: var(--heading-color);
  --base-text: var(--text);
  --base-muted: var(--muted);
  --base-accent-text: var(--accent-text);
  --base-text-strong: var(--text-strong);
  --base-link: var(--link);
}
.card:not(:nth-of-type(even)), .pv-card:not(.pv-card-dark) {
  --heading-color: var(--card-heading-color);
  --text: var(--card-text);
  --muted: var(--card-muted);
  --accent-text: var(--card-accent-text);
  --text-strong: var(--card-strong);
  --link: var(--card-link);
  color: var(--text);
}
:is(.card:not(:nth-of-type(even)), .pv-card:not(.pv-card-dark)) :is(
  .pv-panel, .go-item, .go-chart, .go-point, .go-record a, .fav-meal, .fav-confirm, .fs-meal, .fs-fav,
  .clean-correction-help-popover, .ic-ratio-card, .sensitivity-card, .action-duration-card, .basal-stability-card,
  .fast-carb-response-card, .missing-data-chart-wrap, .missing-data-error, .timeline-tooltip, .forecast-decision, .forecast-range) {
  --heading-color: var(--base-heading-color);
  --text: var(--base-text);
  --muted: var(--base-muted);
  --accent-text: var(--base-accent-text);
  --text-strong: var(--base-text-strong);
  --link: var(--base-link);
  color: var(--text);
}
.pv-tag {
  justify-self: end;
  margin: -4px -4px -2px auto;
  padding: 2px 8px;
  border: 1px dashed color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 999px;
  color: var(--muted);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pv-card > .pv-tag:first-child { grid-row: 1; }
.pv-card-row .pv-tag { margin: 0; }
.pv-strong { color: var(--text-strong); font-weight: 800; }

/* Timeline PDF export (v115) */
.tx-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.tx-heading > div { flex: 1 1 320px; min-width: 0; }
.tx-open { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; white-space: nowrap; }
.tx-sheet { width: min(520px, 100%); }
.tx-intro { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.tx-form { display: grid; gap: 14px; }
.tx-field { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.tx-field legend { margin-bottom: 6px; color: var(--label-color); font-weight: 800; }
.tx-days { display: flex; align-items: center; gap: 12px; }
.tx-days input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--lavender); }
.tx-days-number { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.tx-days-number input { width: 4.6rem; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--field-border) 62%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--field) 92%, transparent); color: var(--ink); font: inherit; font-size: 16px; font-weight: 800; text-align: center; }
.tx-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.tx-preset { padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--mist) 26%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--navy) 40%, transparent); color: var(--text); font: inherit; font-size: .8rem; font-weight: 750; cursor: pointer; }
.tx-preset[aria-pressed="true"] { border-color: color-mix(in srgb, var(--lavender) 60%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 82%, transparent), color-mix(in srgb, var(--plum) 72%, transparent)); color: var(--text-strong); }
.tx-help { margin: 0; color: var(--muted); font-size: .8rem; }
.tx-check { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--mist) 22%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--navy-soft) 60%, transparent); cursor: pointer; }
.tx-check input { width: 20px; height: 20px; accent-color: var(--lavender); }
.tx-check span { display: grid; gap: 1px; }
.tx-check strong { color: var(--text-strong); }
.tx-check small { color: var(--muted); font-size: .76rem; }
.tx-check:has(input:checked) { border-color: color-mix(in srgb, var(--lavender) 55%, transparent); }
.tx-actions { display: flex; justify-content: flex-end; gap: 8px; }
.tx-actions .primary-button:disabled { opacity: .6; }
@media print { .tx-open { display: none; } }

/* v128: compact correction results and expandable high-handling guidance. */
.info-disclosure-button {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--lavender) 55%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--lavender) 10%, transparent);
  color: var(--accent-text);
  font: 700 .9rem/1 Georgia, serif;
  cursor: pointer;
}
.info-disclosure-button:hover,
.info-disclosure-button[aria-expanded="true"] {
  background: color-mix(in srgb, var(--lavender) 23%, transparent);
  color: var(--text-strong);
}
.info-disclosure-button:focus-visible {
  outline: 2px solid var(--lavender);
  outline-offset: 3px;
}
.info-disclosure-panel { min-width: 0; }
[data-info-panel][hidden],
[data-correction-suggestion-status][hidden],
[data-correction-suggestion-value][hidden] { display: none; }
.correction-suggestion-help {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--mist) 18%, transparent);
}
.correction-reference-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: .75rem;
  line-height: 1.45;
}
.hh-title-line, .lh-title-line { display: flex; align-items: center; gap: 12px; }
.hh-title-line h1, .lh-title-line h1 { min-width: 0; margin: 0; }
.high-projection-help {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--lavender) 28%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--navy-soft) 70%, transparent);
}
.high-projection-help > p { margin: 0; }
.high-projection-help .go-basis:empty { display: none; }
.meal-speed-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; color: var(--muted); }
.meal-speed-controls[hidden], [data-meal-speed-auto][hidden] { display: none; }
.meal-speed-help { margin: 8px 0 12px; color: var(--muted); font-size: .8rem; line-height: 1.45; }
@media (max-width: 520px) {
  [data-high-handling] > .hm-heading,
  [data-low-handling] > .hm-heading { flex-wrap: wrap; align-items: flex-start; gap: 10px; }
  [data-high-handling] > .hm-heading > div,
  [data-low-handling] > .hm-heading > div { flex: 1 1 100%; }
}

/* Theme and typography settings (v131). */
.colors-advanced-link { display: flex; justify-content: flex-end; margin: 22px 0; }
.colors-advanced-link a { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; }
.colors-back-link { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin: 0 0 20px; }
.colors-back-link a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.colors-back-link span { color: var(--muted); font-size: .88rem; }
.colors-font-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.colors-font-grid label { display: grid; gap: 8px; color: var(--label-color); font-weight: 700; min-width: 0; }
.colors-font-grid select { width: 100%; min-width: 0; padding: 12px; border: 1px solid var(--field-border); border-radius: 11px; background: var(--field); color: var(--ink); font: inherit; font-size: 16px; }
.colors-font-grid select:focus-visible { outline: 3px solid var(--lavender); outline-offset: 2px; }
.colors-font-preview { margin-top: 20px; padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--navy); color: var(--text); }
.colors-font-preview h3 { margin: 0 0 10px; color: var(--heading-color); font-size: 1.3rem; }
.colors-font-preview p { margin: 6px 0; }
.colors-font-numbers { font-variant-numeric: tabular-nums; }
.colors-font-note { margin: 12px 0 0; color: var(--muted); font-size: .8rem; }
@media (max-width: 480px) {
  .colors-font-grid { grid-template-columns: 1fr; }
  .colors-savebar .primary-button { padding-inline: 12px; }
}

/* BG logging handoff (v132). */
.bg-measurement-field, #bg-value { text-align: center; }
#bg-value { font-weight: 750; }
.bg-handling-prompt-content { display: flex; flex-direction: column; min-height: 0; width: 100%; }
.bg-handling-reading { display: grid; gap: 6px; }
.bg-handling-reading strong { color: var(--text-strong); font-size: 1.6rem; }
.bg-handling-reading span { font-size: .85rem; }
.bg-handling-prompt .lh-confirm-foot { flex-wrap: wrap; align-items: center; }
.bg-handling-prompt .primary-button { text-align: center; }

/* Timeline event shapes match the chart, including in hover details (v133). */
.timeline-legend :is(.legend-basal, .legend-food-bolus, .legend-correction-bolus, .legend-fast-carbs, .legend-food-carbs),
.timeline-tooltip :is(.tip-basal, .tip-food-bolus, .tip-correction-bolus, .tip-fast-carbs, .tip-food-carbs) {
  position: relative; width: 14px; height: 16px; flex: 0 0 14px;
  background: none; border: 0; border-radius: 0; color: var(--event-color);
}
:is(.legend-basal, .tip-basal) { --event-color: var(--series-basal); }
:is(.legend-food-bolus, .tip-food-bolus) { --event-color: var(--food-bolus); }
:is(.legend-correction-bolus, .tip-correction-bolus) { --event-color: var(--correction-bolus); }
:is(.legend-fast-carbs, .tip-fast-carbs) { --event-color: var(--fast-carbs); }
:is(.legend-food-carbs, .tip-food-carbs) { --event-color: var(--food-carbs); }
.timeline-legend :is(.legend-basal, .legend-food-bolus, .legend-correction-bolus, .legend-fast-carbs)::before,
.timeline-tooltip :is(.tip-basal, .tip-food-bolus, .tip-correction-bolus, .tip-fast-carbs)::before {
  content: ''; position: absolute; width: 2px; height: 12px; left: 6px; bottom: 0; background: currentColor;
}
.timeline-legend :is(.legend-basal, .legend-food-bolus, .legend-correction-bolus, .legend-fast-carbs, .legend-food-carbs)::after,
.timeline-tooltip :is(.tip-basal, .tip-food-bolus, .tip-correction-bolus, .tip-fast-carbs, .tip-food-carbs)::after {
  content: ''; position: absolute; width: 6px; height: 6px; top: 0; left: 4px; background: currentColor;
}
.timeline-legend :is(.legend-food-bolus, .legend-correction-bolus)::after,
.timeline-tooltip :is(.tip-food-bolus, .tip-correction-bolus)::after { border-radius: 50%; }
.timeline-legend .legend-correction-bolus::after, .timeline-tooltip .tip-correction-bolus::after { border: 2px solid currentColor; background: var(--navy); }
.timeline-legend .legend-fast-carbs::after, .timeline-tooltip .tip-fast-carbs::after { width: 10px; height: 10px; left: 2px; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.timeline-legend .legend-food-carbs::after, .timeline-tooltip .tip-food-carbs::after { width: 10px; height: 16px; left: 2px; border-radius: 4px 4px 0 0; }
.timeline-legend :is(.legend-basal, .legend-food-bolus, .legend-correction-bolus)::before,
.timeline-tooltip :is(.tip-basal, .tip-food-bolus, .tip-correction-bolus)::before { width: 3px; left: 5.5px; }

/* Only shown for a repeated local time during a daylight-saving rollback. */
.entry-form .record-time-occurrence { display: grid; gap: .45rem; margin-top: .75rem; font-size: .9rem; line-height: 1.4; }
.record-time-occurrence[hidden] { display: none !important; }
.record-time-occurrence select { width: 100%; min-width: 0; padding: .65rem; border: 1px solid var(--field-border); border-radius: .6rem; background: var(--field); color: var(--ink); font: inherit; }

.insulin-day summary { cursor: pointer; line-height: 1.6; }
.insulin-day-entries { padding-left: 1.2rem; }
.insulin-day-entries li { display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; padding: .4rem 0; }
.insulin-day-form label { display: flex; align-items: flex-start; gap: .65rem; margin: 1rem 0; line-height: 1.5; }
.insulin-day-form input[type="checkbox"] { width: 1.2rem; height: 1.2rem; flex-shrink: 0; margin-top: .2rem; }


/* v141: meal composition, unknown nutrients and traceable food properties. */
.food-nutrition-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.food-profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.food-profile-fields { display: grid; gap: 12px; padding-top: 12px; }
.food-profile-fields textarea { width: 100%; box-sizing: border-box; min-height: 70px; padding: 10px 12px; border: 1px solid var(--field-border); border-radius: 10px; background: var(--field); color: var(--ink); font: inherit; resize: vertical; }
.food-profile-sources { margin: 12px 0; color: var(--text); }
.food-profile-sources summary, .meal-snapshot-details summary { cursor: pointer; color: var(--accent-text); font-size: .85rem; font-weight: 700; }
.food-profile-sources p, .food-profile-sources small, .meal-source-reference { overflow-wrap: anywhere; line-height: 1.45; }
.food-profile-description { display: grid; gap: 4px; padding: 12px; border: 1px solid color-mix(in srgb, var(--mist) 28%, transparent); border-radius: 12px; }
.food-profile-description > small { color: var(--muted); }
.food-profile-description p { margin: 4px 0; }
.food-profile-description .food-profile-sources { margin: 6px 0 0; }
.food-profile-note { margin: 2px 0; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.meal-totals, .food-nutrients { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.meal-item-text small { white-space: normal; line-height: 1.4; }
.food-row-text small { white-space: normal; }
.meal-snapshot-details { margin: 6px 0; max-width: 560px; white-space: normal; }
.meal-snapshot-details ul { display: grid; gap: 12px; list-style: none; margin: 10px 0; padding: 0; }
.meal-snapshot-details li { display: grid; gap: 4px; font-size: .8rem; }
.meal-snapshot-details small { color: var(--muted); line-height: 1.4; }
.fs-num small span { font-size: .7rem; }
@media (max-width: 600px) {
  .food-nutrition-grid, .meal-totals, .food-nutrients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .food-profile-grid { grid-template-columns: minmax(0, 1fr); }
}

.carbs-table .meal-details-row td { width: auto; text-align: left; padding-top: 0; }
.meal-details-row .meal-snapshot-details { max-width: 100%; }
@media (max-width: 520px) {
  .carbs-table .meal-inline-items { display: none; }
}

/* CGM setup: uses theme tokens and normal page scrolling on mobile. */
.cgm-settings { max-width: 1060px; margin: 0 auto; color: var(--text); }
.cgm-settings [hidden] { display: none !important; }
.cgm-status-card, .cgm-card { padding: clamp(18px, 3vw, 28px); border: 1px solid var(--border); border-radius: 20px; background: color-mix(in srgb, var(--navy) 52%, var(--blue-bg)); margin-bottom: 20px; }
.cgm-status-card { display: flex; justify-content: space-between; gap: 24px; align-items: center; }
.cgm-status-card h2 { margin: 8px 0; color: var(--heading-color); }
.cgm-status-card p { margin: 0; max-width: 58ch; line-height: 1.6; }
.cgm-eyebrow, .cgm-step { color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .05em; }
.cgm-setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.cgm-card h2 { margin: 10px 0 20px; font-size: 1.35rem; color: var(--heading-color); }
.cgm-instructions { padding-left: 1.3rem; line-height: 1.65; }
.cgm-instructions li { padding-left: 5px; margin: 16px 0; }
.cgm-soft-note, .cgm-worker-note { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; line-height: 1.6; font-size: .9rem; }
.cgm-worker-note { border-left: 4px solid var(--warning); }
.cgm-field { display: grid; gap: 8px; margin-bottom: 19px; min-width: 0; }
.cgm-field label { color: var(--label-color); font-weight: 650; font-size: .95rem; }
.cgm-field input, .cgm-field select { width: 100%; min-width: 0; padding: 12px 14px; min-height: 48px; border-radius: 11px; border: 1px solid var(--field-border); background: var(--field); color: var(--ink); font-size: 16px; }
.cgm-field small, .cgm-save-note { font-size: .8rem; line-height: 1.55; color: var(--muted); }
.cgm-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.cgm-buttons button { min-height: 44px; white-space: normal; }
.cgm-settings button:disabled { opacity: .5; cursor: not-allowed; }
.cgm-settings :focus-visible { outline: 3px solid var(--lavender); outline-offset: 3px; }
.cgm-details { margin-top: 20px; color: var(--muted); font-size: .875rem; line-height: 1.65; }
.cgm-details summary { cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.cgm-current { display: grid; gap: 7px; flex: 0 0 auto; max-width: 100%; }
.cgm-current strong { font-size: 1.65rem; font-variant-numeric: tabular-nums; }
.cgm-current span, .cgm-current small { color: var(--muted); font-size: .8rem; }
.cgm-person-field { max-width: 480px; }
.cgm-stats { display: flex; flex-wrap: wrap; gap: 24px; }
.cgm-stats dd { margin: 4px 0; color: var(--text); }
.cgm-disconnect { background: transparent; border: 0; padding: 12px 0; margin-top: 15px; color: var(--link); text-decoration: underline; cursor: pointer; }
.cgm-dialog { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px; border: 1px solid var(--border); border-radius: 18px; background: var(--navy); color: var(--text); box-shadow: 0 20px 70px var(--shadow); }
.cgm-dialog::backdrop { background: #0009; }
.cgm-dialog h2 { color: var(--heading-color); margin-top: 0; }
.cgm-dialog p { line-height: 1.65; }
.hm-cgm-status { display: block; margin-top: 10px; font-size: .8rem; line-height: 1.5; }
@media(max-width: 720px) { .cgm-setup-grid { grid-template-columns: 1fr; gap: 0; } .cgm-status-card { align-items: stretch; flex-direction: column; gap: 16px; } .cgm-stats { display: grid; gap: 10px; } }
.cgm-settings .secondary-link-button { color: var(--text); background: var(--blue-bg); border: 1px solid var(--border); }
.cgm-settings .secondary-link-button:hover:not(:disabled) { color: var(--text); background: color-mix(in srgb, var(--navy) 65%, var(--blue-bg)); }
.cgm-card > p { margin: 12px 0 18px; }

/* v144: email/password accounts, comfortable on narrow phone screens. */
.account-card { width: min(100%, 440px); margin: 3vh auto; padding: clamp(22px, 5vw, 38px); }
.account-brand { display: inline-block; font-size: 1.65rem; font-weight: 750; text-decoration: none; margin-bottom: 24px; color: var(--text); }
.account-brand span { color: var(--card-link); }
.account-card h1 { font-size: 1.6rem; margin-bottom: 8px; }
.account-form { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-top: 24px; }
.account-form label { margin-top: 6px; font-weight: 600; }
.account-form input { width: 100%; min-width: 0; min-height: 48px; box-sizing: border-box; font-size: 16px; }
.account-form small { line-height: 1.5; }
.account-form button { margin-top: 12px; min-height: 48px; width: 100%; }
.password-field { position: relative; min-width: 0; }
.account-form .password-field input { padding-right: 54px; }
.account-form .password-toggle {
  position: absolute;
  top: 50%; right: 3px;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 44px; min-height: 44px; height: 44px;
  margin: 0; padding: 0;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--ink);
  box-shadow: none; cursor: pointer;
  touch-action: manipulation;
}
.account-form .password-toggle:hover { background: color-mix(in srgb, var(--lavender) 12%, var(--field)); }
.account-form .password-toggle:focus-visible { outline: 2px solid var(--lavender); outline-offset: 1px; }
.account-switch { margin: 24px 0 0; text-align: center; line-height: 1.7; }
.account-email { display: block; overflow-wrap: anywhere; font-size: .85rem; padding: 8px 12px; }

/* Native hidden must win over a component's display:flex/inline-flex. */
[hidden] { display: none !important; }
.preferences-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.preferences-grid .timezone-setting-field { grid-column: 1 / -1; }
.preferences-grid input, .preferences-grid select { min-width: 0; width: 100%; }
.account-setup-card { max-width: 680px; margin: 0 auto; }
.account-setup-card .settings-save { width: 100%; }
.timezone-detect { margin-top: 8px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.secondary-link-button:hover:not(:disabled) { background: var(--light-panel); color: var(--ink); }
.secondary-link-button:focus-visible { outline: 3px solid var(--lavender); outline-offset: 3px; }
@media (max-width: 520px) { .preferences-grid { grid-template-columns: minmax(0, 1fr); } }

.verification-code { text-align: center; letter-spacing: .28em; font-size: 1.4rem; }
.verification-action { margin-top: 18px; display: grid; gap: 8px; text-align: center; }
.verification-action small { font-size: .8rem; }
.account-card strong { overflow-wrap: anywhere; }

/* v150: shared preference dropdowns, including their expanded menus. */
.preference-select { position: relative; min-width: 0; }
.preference-select-native { position: absolute; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.entry-form .preference-select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 48px; margin: 0; padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: 12px;
  background: var(--field); color: var(--ink); font: inherit; font-weight: 600;
  text-align: left; box-shadow: none; cursor: pointer; transform: none;
}
.preference-select-trigger::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); flex-shrink: 0; margin: -4px 2px 0 8px; }
.entry-form .preference-select-trigger[aria-expanded="true"], .entry-form .preference-select-trigger:focus-visible { outline: 2px solid var(--lavender); outline-offset: 2px; }
.entry-form .preference-select-trigger[aria-invalid="true"] { border-color: #ba2727; }
.preference-select-menu { position: fixed; z-index: 10000; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 6px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); background: var(--field); color: var(--ink); box-shadow: 0 12px 32px #0003; }
.preference-select-menu [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.preference-select-menu [role="option"]:hover, .preference-select-menu .is-active { background: color-mix(in srgb, var(--lavender) 13%, var(--field)); }
.preference-select-menu [aria-selected="true"] { font-weight: 700; }
.preference-select-menu [aria-selected="true"]::after { content: '✓'; color: var(--lavender); }

/* Delegation management and shared-data context. */
.delegate-row { display:flex; justify-content:space-between; gap:20px; padding:20px 0; border-bottom:1px solid color-mix(in srgb,var(--ink) 15%,transparent); }
.delegate-row p { margin:6px 0; overflow-wrap:anywhere; }
.delegate-status { display:inline-block; padding:4px 10px; border-radius:20px; background:color-mix(in srgb,var(--lavender) 12%,var(--field)); font-weight:700; margin-right:10px; }
.delegate-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.delegate-switch { display:grid; gap:8px; padding:12px; }
.delegate-switch select { padding:12px; border-radius:10px; background:var(--field); color:var(--ink); width:100%; font:inherit; }
.delegate-banner { display:flex; align-items:center; flex-wrap:wrap; gap:16px; background:var(--light-panel); padding:16px; border:1px solid var(--lavender); border-radius:14px; margin-bottom:20px; color:var(--text); }
.delegate-banner form { margin-left:auto; }
.delegate-readonly-fields { border:0; padding:0; margin:0; min-width:0; }
.delegate-readonly-fields input:disabled, .delegate-readonly-fields select:disabled { opacity:1; color:var(--ink); -webkit-text-fill-color:var(--ink); }
.delegate-dialog { width:calc(100% - 40px); max-width:480px; box-sizing:border-box; border:1px solid var(--field-border); border-radius:20px; padding:28px; background:var(--navy); color:var(--text); }
.delegate-dialog::backdrop { background:#13291f80; }
.delegate-dialog p { line-height:1.6; overflow-wrap:anywhere; }
.delegate-dialog form { display:flex; gap:12px; margin:24px 0 16px; }
@media(max-width:600px) { .delegate-row { flex-direction:column; } }
.delegate-readonly-fields button:disabled, .delegate-readonly-fields .update-button { opacity:.45; cursor:not-allowed; box-shadow:none; }
.delegate-readonly-fields .update-button { pointer-events:none; }
.invitation-signup-note { margin-top:18px; line-height:1.5; }

/* Account controls keep the checkbox and label visible in every theme. */
.account-form .account-remember {display:flex;align-items:center;gap:12px;margin:12px 0 0;cursor:pointer;line-height:1.45;}
.account-form .account-remember input {width:20px;height:20px;min-width:20px;margin:0;accent-color:var(--button-bg,#087f62);}
.account-forgot {justify-self:end;margin:6px 0;text-underline-offset:3px;}

/* Supplied brand asset: preserve proportions and reserve space before load. */
.account-brand img { display: block; width: 280px; max-width: 100%; height: auto; }
.account-brand { max-width: 100%; }