/* Layout: a quiet white shell with one glowing colour field per moment. Blue holds the household and the
   steady streak, yellow is care and every primary action, berry is night and the first day after a seizure,
   and a dark focus field is for recording one. Pill controls, 32 px panels, 24 px cards, low-contrast paw prints. */
/* Brand fonts, bundled so the app looks the same offline. Both are variable fonts (weights 100 to 900),
   cut to Latin characters, under the SIL Open Font License (assets/fonts/OFL-*.txt). */
@font-face {
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/InterTight-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("./assets/fonts/Raleway-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.6 4.4 14.8 15.4'%3E%3Ccircle cx='6.8' cy='10.2' r='1.7'/%3E%3Ccircle cx='10' cy='6.4' r='1.7'/%3E%3Ccircle cx='14' cy='6.4' r='1.7'/%3E%3Ccircle cx='17.2' cy='10.2' r='1.7'/%3E%3Cpath d='M12 11.5c-2.6 0-5 3.4-5 5.5 0 1.6 1.3 2.5 2.7 2.5 1 0 1.5-.6 2.3-.6s1.3.6 2.3.6c1.4 0 2.7-.9 2.7-2.5 0-2.1-2.4-5.5-5-5.5z'/%3E%3C/svg%3E");
  --blue: #4c84a4;
  --blue-light: #84acc4;
  --blue-deep: #3c7494;
  --yellow: #fccc24;
  --amber: #f4b414;
  --amber-deep: #dc8c04;
  --berry: #ac1c3c;
  --berry-glow: #d43454;
  --berry-deep: #8c1230;
  --ink: #141414;
  --white: #ffffff;
  --mist: #d4ecfc;
  --sky: #c4e4ec;
  --on-white-muted: #56646f;
  --glow-blue: radial-gradient(120% 100% at 68% 38%, #84acc4 0%, #5689ac 46%, #3c7494 100%);
  --glow-yellow: radial-gradient(110% 90% at 50% 42%, #fccc24 0%, #f4b414 58%, #eba00a 100%);
  --glow-berry: radial-gradient(110% 90% at 50% 42%, #d43454 0%, #ac1c3c 55%, #8c1230 100%);
  --glow-focus: radial-gradient(120% 90% at 50% 30%, #31414b 0%, #1a2329 50%, #0d1215 100%);
  --glass: rgba(255, 255, 255, 0.14);
  --glass-line: rgba(255, 255, 255, 0.3);
  --on-color-muted: rgba(255, 255, 255, 0.82);
  --on-color-line: rgba(255, 255, 255, 0.28);
  --y-tone: rgba(120, 70, 0, 0.2);
  --y-tone-2: rgba(255, 255, 255, 0.34);
  --b-tone: rgba(60, 0, 15, 0.36);
  --b-tone-2: rgba(255, 255, 255, 0.12);

  --bg: #ffffff;
  --surface: #f3f6f8;
  --surface-2: #e7edf1;
  --fg: #141414;
  --muted: #56646f;
  --line: #dae3e9;
  --tint: #d4ecfc;
  --on-tint: #141414;
  --accent: #3c7494;
  --chart: #4c84a4;
  --chart-soft: #cfe0ea;
  --scrim: rgba(10, 18, 24, 0.42);
  --ok: #1e7a4c;
  --ok-bg: #e2f2e9;
  --warn: #8a5a00;
  --warn-bg: #fdf1d3;
  --bad: #b42318;
  --bad-bg: #fbe6e3;
  --rose: #ac1c3c;
  --rose-bg: #fbe6ea;
  /* Severity runs blue (mild) through yellow to berry (severe), the same order as the streak field. */
  --sev-1: #84acc4;
  --sev-2: #4c84a4;
  --sev-3: #f4b414;
  --sev-4: #d43454;
  --sev-5: #8c1230;
  --night-band: rgba(60, 116, 148, 0.16);
  --gap-1: #9cc0d6;
  --gap-2: #4c84a4;
  --gap-3: #2b5874;

  --f-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-label: "Avenir Next", "Raleway", "Segoe UI", sans-serif;
  /* Every weight is one of these three, so iOS's Bold Text reaches all of the text (see the end of this file). */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --r-panel: 32px;
  --r-card: 24px;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.45, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --shadow-float: 0 30px 60px -22px rgba(20, 30, 40, 0.45);
  --gutter-left: max(16px, env(safe-area-inset-left, 0px));
  --gutter-right: max(16px, env(safe-area-inset-right, 0px));
  /* The text unit: 16 px at the default text size, and every font size is a multiple of it, so text follows
     the iPhone's Text Size setting and a browser's font size. */
  --u: 1rem;
  /* The top bar, the tab bar and the charts grow with the text only as far as the largest standard size, 23 pt to
     the default's 17, as iOS's own bars stop growing: past it, at the accessibility sizes, they'd no longer fit a
     phone. */
  --u-capped: min(var(--u), 16px * 23 / 17);
  /* How far the text has grown past the default size. Text up to the body's size grows in proportion, and larger
     text, titles and big numbers, grows by this much, as iOS's text styles all grow by about the same number of
     points: so a title stays above the body, and a long word in it still fits a phone. */
  --u-grow: calc(var(--u) - 16px);
  --field-line: #758692;
  --placeholder: #68757f;
  --tint-hover: #c2e2f8;
  --focus-ring: rgba(60, 116, 148, 0.32);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1417;
    --surface: #161e23;
    --surface-2: #1f2930;
    --fg: #edf2f5;
    --muted: #9babb6;
    --line: #2a363e;
    --tint: #1c2c36;
    --on-tint: #edf2f5;
    --accent: #84acc4;
    --chart: #84acc4;
    --chart-soft: #26394a;
    --scrim: rgba(0, 0, 0, 0.6);
    --ok: #5cc48e;
    --ok-bg: #15301f;
    --warn: #f2c15a;
    --warn-bg: #33270c;
    --bad: #ff8b7e;
    --bad-bg: #3a1b18;
    --rose: #ff8aa0;
    --rose-bg: #3a1822;
    --sev-1: #a9cbe0;
    --sev-2: #6fa6c6;
    --sev-3: #fccc24;
    --sev-4: #ff6b86;
    --sev-5: #ff3d64;
    --night-band: rgba(132, 172, 196, 0.14);
    --gap-1: #3d6680;
    --gap-2: #6fa6c6;
    --gap-3: #b9dcf0;
    --field-line: #62727e;
    --placeholder: #87959f;
    --tint-hover: #243846;
    --focus-ring: rgba(132, 172, 196, 0.34);
    color-scheme: dark;
  }
}

@container app (min-width: 760px) and (min-width: 47.5em) {
  .app-shell > * {
    --gutter-left: max(32px, env(safe-area-inset-left, 0px));
    --gutter-right: max(32px, env(safe-area-inset-right, 0px));
  }
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

@supports (-webkit-touch-callout: none) {
  /* iPhone and iPad: -apple-system-body is 17 px at the default Text Size and grows with Larger Text, so
     scaling it by 16/17 keeps the default exactly as designed. */
  html {
    font: -apple-system-body;
  }

  :root {
    --u: calc(1rem * 16 / 17);
  }
}

body {
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: var(--u);
  font-weight: var(--w-regular);
  line-height: 1.55;
  /* A word longer than a line, at the largest text sizes, breaks rather than running off the screen. */
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: var(--w-medium);
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}

p {
  margin: 0;
}

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

button {
  -webkit-tap-highlight-color: transparent;
}

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

.on-color :focus-visible,
.hero :focus-visible,
.vet-hero :focus-visible,
.summary-tiles :focus-visible {
  outline-color: var(--white);
}

.glow-yellow :focus-visible,
.tone-yellow :focus-visible {
  outline-color: var(--ink);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.i {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}

.subtle {
  color: var(--muted);
  font-size: calc(0.90625 * var(--u));
}

.fine {
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
}

.danger-text {
  color: var(--bad);
}

/* Shell */
/* The app's layouts follow its width in ems, which is how much text a line holds. One for a wider screen asks for the
   ems that width holds at the default text size as well as its pixels, so larger text takes a narrower screen's
   layout, and smaller text keeps the screen's own. At the accessibility text sizes every iPhone is under 17 ems wide,
   and at the largest standard size none is, so what sits two to a row at other sizes takes a row each there, as on
   iOS's own screens. */
.app-shell {
  container: app / inline-size;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
}

html.ios-browser,
html.ios-browser body {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

html.ios-browser .app-shell,
html.ios-browser .screen {
  height: auto;
  min-height: 100svh;
  overflow: visible;
}

.loading-screen {
  display: grid;
  min-height: 100svh;
  place-content: center;
  gap: 8px;
  padding: 24px;
  background: var(--glow-blue);
  color: var(--white);
  text-align: center;
}

.loading-screen .mark {
  width: 76px;
  height: 76px;
  margin: 0 auto 12px;
  overflow: hidden;
  border-radius: 28%;
  background: var(--glass);
  animation: settle 1.4s var(--ease-out) both;
}

.loading-screen .mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.loading-screen h1 {
  font-size: calc(34px + var(--u-grow));
  letter-spacing: -0.03em;
}

.loading-screen p {
  color: var(--on-color-muted);
}

.screen {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 100svh;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

.content {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
  transition: transform 320ms var(--ease-out);
}

html.ios-browser .content {
  min-height: 100svh;
  overflow: visible;
}

@container app (min-width: 960px) and (min-width: 60em) {
  .content {
    padding-bottom: 72px;
  }
}

.page {
  display: grid;
  gap: 16px;
  max-width: 1264px;
  margin: 0 auto;
  padding: 20px var(--gutter-right) 0 var(--gutter-left);
}

.view {
  display: none;
  min-width: 0;
}

.view.active {
  display: block;
}

.view.enter {
  animation: view-in 0.46s var(--ease-out) both;
}

/* Pull to refresh: the spinner stays put above the header and the page bounces down to uncover it. Petals
   appear one by one as the pull grows, then the page settles 64 px lower while it spins. */
.pull-refresh {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  left: 50%;
  z-index: 0;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.pull-refresh svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pull-refresh line {
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: clamp(0, calc(var(--pull, 0) * 8 - var(--i)), 1);
}

.pull-refresh.visible,
.pull-refresh.refreshing {
  opacity: 1;
}

.pull-refresh.refreshing line {
  opacity: calc(0.3 + var(--i) * 0.1);
}

.pull-refresh.refreshing svg {
  animation: spin 0.8s steps(8) infinite;
}

.screen.refreshing .content {
  transform: translateY(calc(env(safe-area-inset-top, 0px) + 64px));
}

html.ios-browser .pull-refresh {
  display: none;
}

/* Header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.topbar-in {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1264px;
  height: 64px;
  margin: 0 auto;
  padding: 0 var(--gutter-right) 0 var(--gutter-left);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  cursor: pointer;
}

.brand i {
  display: block;
  flex: none;
  width: 24px;
  height: 24px;
  background: var(--glow-blue);
  -webkit-mask: var(--paw) center / contain no-repeat;
  mask: var(--paw) center / contain no-repeat;
}

.brand b {
  overflow: hidden;
  font: var(--w-semibold) calc(1.1875 * var(--u-capped)) var(--f-label);
  letter-spacing: -0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand small {
  padding-left: 10px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: calc(0.75 * var(--u-capped));
  white-space: nowrap;
}

.topnav {
  display: none;
  gap: 4px;
  margin: 0 auto;
}

.topnav button {
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: var(--w-medium) calc(0.875 * var(--u-capped)) var(--f-sans);
  transition: background 0.2s, color 0.2s;
}

.topnav button:hover {
  background: var(--surface);
  color: var(--fg);
}

.topnav button[aria-current="page"] {
  background: var(--tint);
  color: var(--on-tint);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  font: var(--w-medium) calc(0.8125 * var(--u-capped)) var(--f-sans);
  white-space: nowrap;
}

.sync-pill::before {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--ok);
  content: "";
}

.sync-pill.pending::before {
  background: var(--warn);
}

.sync-pill.busy::before {
  background: var(--accent);
  animation: pulse 1s ease-in-out infinite;
}

.avatar {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--tint);
  color: var(--on-tint);
  cursor: pointer;
  font: var(--w-semibold) calc(0.9375 * var(--u-capped)) var(--f-sans);
}

.desk-only {
  display: none !important;
}

@container app (max-width: 440px) or (max-width: 27.5em) {
  .brand small {
    display: none;
  }
}

@container app (min-width: 960px) and (min-width: 60em) {
  .topnav {
    display: flex;
  }

  .desk-only {
    display: inline-flex !important;
  }

  .brand,
  .top-actions {
    flex: 1 1 0;
  }

  /* The tabs sit in the middle, unless the buttons beside them need more than half what's left: they keep their
     room, and the pet's name gives way. */
  .top-actions {
    min-width: max-content;
    justify-content: flex-end;
  }
}

/* Banners */
.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  border-radius: 20px;
  background: var(--warn-bg);
  color: var(--warn);
  font-size: calc(0.875 * var(--u));
}

.banner p {
  margin-top: 2px;
}

.banner .btn {
  flex: none;
  color: var(--warn);
  box-shadow: inset 0 0 0 1px currentColor;
}

/* Shared pieces */
.paw-print {
  position: absolute;
  z-index: 0;
  width: var(--s);
  height: var(--s);
  background: var(--paw-tint, rgba(255, 255, 255, 0.1));
  -webkit-mask: var(--paw) center / contain no-repeat;
  mask: var(--paw) center / contain no-repeat;
  pointer-events: none;
  rotate: var(--r, 0deg);
  animation: drift var(--d, 24s) ease-in-out var(--age, 0s) infinite alternate;
}

.boot .hero .paw-print {
  animation: settle 1.6s var(--ease-out) var(--age, 0s) both, drift var(--d, 24s) ease-in-out calc(1.6s + var(--age, 0s)) infinite alternate;
}

.orbit {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.orbit ellipse {
  fill: none;
  stroke: rgba(255, 255, 255, 0.098);
  stroke-width: 1;
}

.orbit g {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: spin 140s linear var(--age, 0s) infinite;
}

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

.section-head h2 {
  font-size: calc(clamp(24px, 3vw, 32px) + var(--u-grow));
  letter-spacing: -0.025em;
}

.section-head h3 {
  font-size: calc(20px + var(--u-grow));
  letter-spacing: -0.01em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: calc(0.75 * var(--u));
  font-weight: var(--w-medium);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eyebrow::before {
  width: 12px;
  height: 12px;
  flex: none;
  background: var(--accent);
  content: "";
  -webkit-mask: var(--paw) center / contain no-repeat;
  mask: var(--paw) center / contain no-repeat;
}

.on-color .eyebrow,
.vet-hero .eyebrow {
  color: var(--on-color-muted);
}

.on-color .eyebrow::before,
.vet-hero .eyebrow::before {
  background: var(--white);
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font: var(--w-medium) calc(0.875 * var(--u)) var(--f-sans);
}

.link .i {
  width: 16px;
  height: 16px;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  /* A pill on one line, and a rounded box when larger text wraps it. */
  border-radius: calc(1em + 4px);
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: calc(0.6875 * var(--u));
  font-weight: var(--w-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tag::before {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.tag.plain::before {
  display: none;
}

.tag.ok {
  background: var(--ok-bg);
  color: var(--ok);
}

.tag.warn {
  background: var(--warn-bg);
  color: var(--warn);
}

.tag.bad {
  background: var(--bad-bg);
  color: var(--bad);
}

.tag.glass {
  background: var(--glass);
  color: var(--white);
}

.tag.live {
  background: rgba(212, 52, 84, 0.3);
  color: var(--white);
}

.tag.live::before {
  background: var(--berry-glow);
  animation: pulse 1.2s ease-in-out infinite;
}

.btn {
  display: inline-flex;
  max-width: 100%;
  min-height: 48px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--fg);
  cursor: pointer;
  font: var(--w-medium) calc(0.9375 * var(--u)) / 1.15 var(--f-sans);
  text-align: center;
  text-decoration: none;
  transition: transform 0.18s var(--ease-out), background 0.2s, color 0.2s, box-shadow 0.2s;
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  cursor: default;
  opacity: 0.5;
}

/* Busy buttons in a sheet stay focusable (aria-disabled), so focus doesn't fall back to the page while they work. */
.sheet .btn[aria-disabled="true"] {
  cursor: default;
  opacity: 0.5;
}

.sheet .btn[aria-disabled="true"]:active {
  transform: none;
}

.btn .i {
  width: 20px;
  height: 20px;
}

.btn.big {
  min-height: 56px;
  padding: 6px 26px;
  font-size: var(--u);
}

.btn.small {
  min-height: 36px;
  padding: 4px 14px;
  font-size: calc(0.84375 * var(--u));
}

.btn.small .i {
  width: 16px;
  height: 16px;
}

.btn.block {
  width: 100%;
}

.btn.yellow {
  background: var(--yellow);
  color: var(--ink);
}

.btn.yellow:hover {
  box-shadow: 0 10px 24px -10px rgba(170, 110, 0, 0.6);
}

.btn.white {
  background: var(--white);
  color: var(--ink);
}

.btn.glass {
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  color: var(--white);
}

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

.btn.ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
}

.btn.danger {
  background: var(--bad-bg);
  color: var(--bad);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ibtn {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--fg);
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), background 0.2s;
}

.ibtn:active {
  transform: scale(0.94);
}

.ibtn.glass {
  background: var(--glass);
  color: var(--white);
}

.tone-yellow .ibtn.glass {
  background: var(--y-tone);
  color: var(--ink);
}

.card {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 14px;
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--surface);
}

.stack {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr);
}

/* A row of chips wraps, so every one stays in view, on as many lines as it takes. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 -2px;
  padding: 2px;
}

.chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--tint);
  color: var(--on-tint);
  cursor: pointer;
  font: var(--w-medium) calc(0.875 * var(--u)) var(--f-sans);
  transition: background 0.2s, color 0.2s, transform 0.15s var(--ease-out);
}

.chip small {
  opacity: 0.65;
  font-size: calc(0.75 * var(--u));
}

.chip:active {
  transform: scale(0.95);
}

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

/* A control drawn smaller than 44 points takes a tap anywhere across 44 of them, as iOS's do: what's drawn keeps its
   size, and an invisible box around it takes the tap. A chip that's a box or radio button reaches as far with the
   box itself, which covers it. */
.sync-pill,
.avatar,
.topnav button,
.link,
.btn.small,
.ibtn,
.chip,
.text-chip,
.dose-btn,
.routine-switch button,
.routine-days button,
.stepper button {
  position: relative;
}

.sync-pill::after,
.avatar::after,
.topnav button::after,
.link::after,
.btn.small::after,
.ibtn::after,
.chip::after,
.text-chip:not(:has(> input))::after,
.dose-btn::after,
.routine-switch button::after,
.routine-days button::after,
.stepper button::after {
  position: absolute;
  inset: min(0px, (100% - 44px) / 2);
  content: "";
}

.empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 36px 20px;
  color: var(--muted);
  text-align: center;
}

.empty strong {
  color: var(--fg);
  font-size: calc(17px + var(--u-grow));
  font-weight: var(--w-medium);
}

/* Today hero */
.hero {
  --on: var(--white);
  --on-muted: var(--on-color-muted);
  --on-line: var(--on-color-line);
  --hero-glass: var(--glass);
  --hero-glass-line: var(--glass-line);
  position: relative;
  display: grid;
  gap: 24px;
  overflow: hidden;
  padding: clamp(24px, 5vw, 56px);
  padding-bottom: calc(clamp(24px, 5vw, 56px) + 40px);
  border-radius: var(--r-panel);
  background: var(--glow-blue);
  color: var(--on);
  isolation: isolate;
}

/* The drifting paw prints stay faint so they never pull the eye from the count. */
.hero .paw-print {
  --paw-tint: rgba(255, 255, 255, 0.07);
}

.hero.glow-berry {
  background: var(--glow-berry);
}

.hero.glow-yellow {
  --on: var(--ink);
  --on-muted: rgba(20, 20, 20, 0.74);
  --on-line: rgba(20, 20, 20, 0.2);
  --hero-glass: rgba(255, 255, 255, 0.34);
  --hero-glass-line: rgba(20, 20, 20, 0.14);
  background: var(--glow-yellow);
}

.hero.glow-yellow .paw-print {
  --paw-tint: rgba(255, 255, 255, 0.16);
}

.hero.glow-yellow .orbit ellipse {
  stroke: rgba(255, 255, 255, 0.175);
}

@container app (min-width: 960px) and (min-width: 60em) {
  .hero {
    min-height: 540px;
    align-items: center;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

/* Banners on the field take the top row, across it, and the portrait makes way for them. */
.hero.with-banners {
  grid-template-rows: auto 1fr;
}

.hero-banners {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
}

.hero.with-banners .hero-portrait {
  display: none;
}

.hero-main {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 20px;
}

.notice {
  display: inline-flex;
  /* Clear of the portrait in the hero's corner, wrapping there when the text is larger. */
  max-width: calc(100% - 72px);
  flex-wrap: wrap;
  align-items: center;
  justify-self: start;
  gap: 8px;
  padding: 5px 14px 5px 6px;
  border-radius: calc(1em + 6px);
  background: var(--hero-glass);
  box-shadow: inset 0 0 0 1px var(--hero-glass-line);
  font-size: calc(0.8125 * var(--u));
}

.notice b {
  padding: 2px 9px;
  border-radius: calc(1em + 2px);
  background: var(--white);
  color: var(--blue-deep);
  font-size: calc(0.6875 * var(--u));
  font-weight: var(--w-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.glow-berry .notice b {
  color: var(--berry);
}

.glow-yellow .notice b {
  background: var(--ink);
  color: var(--yellow);
}

.hero h1 {
  /* Larger text grows it only as far as a phone's width allows, which at the default size it already fills. */
  font-size: min(calc(clamp(46px, 12vw, 88px) + var(--u-grow)), max(12vw, 46px));
  letter-spacing: -0.045em;
  line-height: 0.9;
}

.hero h1 .ln {
  display: block;
}

.hero .lede {
  max-width: 42ch;
  color: var(--on-muted);
  font-size: clamp(var(--u), 1.6vw, calc(1.1875 * var(--u)));
}

.streak-hearts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.hearts-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.heart {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  color: var(--on);
}

.heart .i {
  width: 26px;
  height: 26px;
}

.heart.next .i:last-child {
  position: absolute;
  inset: 0;
  clip-path: inset(calc((1 - var(--p, 0)) * 100%) 0 0 0);
}

.boot .heart.earned {
  animation: heart-in 0.6s var(--ease-out) calc(0.7s + var(--i, 0) * 0.09s + var(--age, 0s)) both;
}

.heart-more {
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-semibold);
}

.streak-progress {
  color: var(--on-muted);
  font-size: calc(0.84375 * var(--u));
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero .btn.glass {
  background: var(--hero-glass);
  box-shadow: inset 0 0 0 1px var(--hero-glass-line);
  color: var(--on);
}

.glow-yellow .btn.yellow {
  background: var(--white);
}

.hero-meta {
  display: grid;
  margin: 0;
  padding-top: 18px;
  border-top: 1px solid var(--on-line);
  gap: 12px 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 5em), 1fr));
}

.hero-meta dt {
  color: var(--on-muted);
  font-size: calc(0.6875 * var(--u));
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hero-meta dd {
  margin: 4px 0 0;
  font-size: calc(clamp(17px, 2vw, 22px) + var(--u-grow));
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
}

.hero-meta small {
  color: var(--on-muted);
  font-size: calc(0.75 * var(--u));
}

@container app (max-width: 440px) or (max-width: 27.5em) {
  .hero-meta {
    gap: 12px;
  }

  .hero-meta dt {
    font-size: calc(0.65625 * var(--u));
    letter-spacing: 0.06em;
  }

  .meta-average small,
  .meta-month small {
    display: none;
  }
}

.boot .rise {
  animation: rise 0.9s var(--ease-out) calc(var(--i, 0) * 0.08s + 0.15s + var(--age, 0s)) both;
}

.hero-portrait {
  position: absolute;
  top: clamp(20px, 5vw, 32px);
  right: clamp(20px, 5vw, 32px);
  z-index: 2;
  width: 68px;
  height: 68px;
  margin: 0;
  overflow: hidden;
  border-radius: 32%;
  background: var(--hero-glass);
  box-shadow: inset 0 0 0 1px var(--hero-glass-line);
}

.hero-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.paw-portrait {
  display: grid;
  place-items: center;
}

.paw-portrait::before {
  width: 52%;
  height: 52%;
  background: var(--white);
  -webkit-mask: var(--paw) center / contain no-repeat;
  mask: var(--paw) center / contain no-repeat;
  content: "";
}

.hero-side {
  position: relative;
  z-index: 1;
  display: none;
}

@container app (min-width: 960px) and (min-width: 60em) {
  .hero-portrait {
    top: 9%;
    right: 6%;
    width: min(270px, 26vw);
    height: auto;
    aspect-ratio: 1;
  }

  .hero-side {
    display: block;
    height: 440px;
  }
}

/* As the page scrolls, the hero's text sinks at a fifth of the scroll speed so the panel below slowly
   slides over it. The browser drives this from the scroll position itself, so it cannot lag behind the
   finger the way a scroll listener does on iPhone. Browsers without scroll timelines keep a still hero. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* clip, unlike hidden, does not make the hero a scroll container, so scroll(nearest) finds the page. */
    .hero {
      overflow: clip;
    }

    .hero-main,
    .hero-portrait,
    .hero-side {
      animation: hero-scroll linear both;
      animation-timeline: scroll(nearest block);
      animation-range: 0px 700px;
    }

    .hero-main {
      --hero-scroll: 154px;
    }

    /* In Safari's browser tab the window scrolls rather than the page panel. */
    html.ios-browser .hero-main,
    html.ios-browser .hero-portrait,
    html.ios-browser .hero-side {
      animation-timeline: scroll(root block);
    }
  }
}

@container app (min-width: 960px) and (min-width: 60em) {
  .hero-portrait {
    --hero-scroll: -61.6px;
  }

  .hero-side {
    --hero-scroll: -92.4px;
  }
}

.float-card {
  position: absolute;
  display: grid;
  gap: 4px;
  width: min(250px, 64%);
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-float);
  color: var(--ink);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.float-card .k {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--on-white-muted);
  font-size: calc(0.75 * var(--u));
}

.float-card .k .i {
  width: 16px;
  height: 16px;
}

.float-card b {
  font-size: calc(28px + var(--u-grow));
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.float-card small {
  color: var(--on-white-muted);
  font-size: calc(0.78125 * var(--u));
}

.float-card p {
  font-size: calc(0.90625 * var(--u));
  line-height: 1.4;
}

.fc-one {
  top: 50%;
  left: 0;
  rotate: -5deg;
  animation: bob 7s ease-in-out var(--age, 0s) infinite;
}

.fc-two {
  right: 4%;
  bottom: 0;
  rotate: 3deg;
  animation: bob 8s ease-in-out calc(var(--age, 0s) - 3s) infinite;
}

.lift {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 28px;
  margin-top: -40px;
  padding-top: 24px;
  border-radius: 32px 32px 0 0;
  background: var(--bg);
}

.up-next {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container app (min-width: 960px) and (min-width: 60em) {
  .up-next {
    display: none;
  }
}

.mini {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding: 14px 16px;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  text-align: left;
}

.mini .k {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: calc(0.75 * var(--u));
}

.mini .k .i {
  width: 15px;
  height: 15px;
}

.mini b {
  overflow: hidden;
  font-size: calc(22px + var(--u-grow));
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
  letter-spacing: -0.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini small {
  overflow: hidden;
  color: var(--muted);
  font-size: calc(0.78125 * var(--u));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini.attention b {
  color: var(--warn);
}

@container app (max-width: 17em) {
  .up-next {
    grid-template-columns: minmax(0, 1fr);
  }

  .mini b,
  .mini small {
    white-space: normal;
  }
}

.today-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
}

@container app (min-width: 960px) and (min-width: 60em) {
  .today-grid {
    align-items: start;
    gap: 32px;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

.routines {
  display: grid;
  container-type: inline-size;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.routine-card {
  position: relative;
  display: flex;
  max-width: 100%;
  /* Three wide to four tall, two to a row, and taller when what it says needs the room: a minimum height, as Safari
     holds a box with an aspect ratio to its shape even when its text runs past it. */
  min-height: calc((100cqi - 12px) / 2 * 4 / 3);
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  padding: 16px;
  border: 0;
  border-radius: 28px;
  background: var(--glow-yellow);
  color: var(--ink);
  cursor: pointer;
  isolation: isolate;
  text-align: left;
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s;
}

.routine-card:hover {
  box-shadow: var(--shadow-float);
  transform: translateY(-4px);
}

.routine-card:active {
  transform: scale(0.98);
}

.routine-card.dark {
  background: var(--glow-berry);
  color: var(--white);
}

.routine-card .paw-print {
  --paw-tint: rgba(255, 255, 255, 0.16);
}

.routine-card.dark .paw-print {
  --paw-tint: rgba(255, 255, 255, 0.08);
}

.routine-card > *:not(.paw-print) {
  position: relative;
  z-index: 1;
}

.routine-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.routine-card header b {
  font: var(--w-semibold) calc(clamp(20px, 5.4vw, 26px) + var(--u-grow)) / 1 var(--f-label);
  letter-spacing: -0.01em;
}

.routine-card header small {
  display: block;
  margin-top: 6px;
  font-size: calc(0.78125 * var(--u));
  font-weight: var(--w-medium);
  opacity: 0.85;
}

.count-badge {
  display: grid;
  width: calc(28em / 12);
  height: calc(28em / 12);
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--y-tone);
  font-size: calc(0.75 * var(--u));
  font-weight: var(--w-semibold);
}

.dark .count-badge {
  background: var(--b-tone);
}

.ring {
  position: relative;
  display: grid;
  width: min(108px, 66%);
  aspect-ratio: 1;
  align-self: center;
  place-items: center;
}

.ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  rotate: -90deg;
}

.ring circle {
  fill: none;
  stroke-width: 7;
}

.ring .trk {
  stroke: var(--y-tone);
}

.dark .ring .trk {
  stroke: var(--b-tone);
}

.ring .val {
  stroke: var(--ink);
  stroke-linecap: round;
}

.boot .ring .val {
  animation: ring-in 1.2s var(--ease-out) calc(0.4s + var(--age, 0s)) both;
}

.dark .ring .val {
  stroke: var(--white);
}

/* Assumed doses, after the given ones, fainter, so the ring never counts them as given. */
.ring .assumed {
  stroke: var(--ink);
  stroke-linecap: round;
  opacity: 0.28;
}

.dark .ring .assumed {
  stroke: var(--white);
}

.ring > span {
  font-size: calc(clamp(22px, 6vw, 30px) + var(--u-grow));
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
  letter-spacing: -0.03em;
}

.ring > span small {
  margin-left: 1px;
  font-size: 0.55em;
  opacity: 0.7;
}

/* The Open pill goes under the words when a narrow card hasn't room for both. */
.routine-card footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.routine-card footer p {
  /* As narrow as its longest word beside the pill, so the pill goes under it only when that doesn't fit. */
  flex: 1 1 0;
  max-width: 15ch;
  font-size: calc(0.75 * var(--u));
  line-height: 1.35;
  opacity: 0.9;
}

.details {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: calc(0.75 * var(--u));
  font-weight: var(--w-medium);
}

.details::after {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--amber-deep);
  content: "";
}

/* A card a row each, as tall as what it says. */
@container app (max-width: 17em) {
  .routines {
    grid-template-columns: minmax(0, 1fr);
  }

  .routine-card {
    min-height: 0;
    gap: 16px;
  }
}

.dark .details::after {
  background: var(--berry);
}

@container app (max-width: 360px) or (max-width: 22.5em) {
  .routine-card footer p {
    display: none;
  }
}

/* The handover: a note pinned for the next carer. All of the card's top folds and unfolds it. */
.handover-card {
  gap: 0;
  padding: 0;
  background: var(--tint);
  color: var(--on-tint);
}

/* A day old, it's on the plain card colour, so it reads as older at a glance. */
.handover-card.older {
  background: var(--surface);
}

.handover-card > summary {
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border-radius: var(--r-card);
  cursor: pointer;
  list-style: none;
}

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

.handover-card > summary:focus-visible {
  outline-offset: -3px;
}

.handover-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.handover-head .eyebrow {
  flex: 1;
}

.handover-age {
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  text-align: right;
}

.handover-card.older .handover-age {
  color: var(--warn);
  font-weight: var(--w-medium);
}

.handover-card .chev {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
  transition: rotate 0.25s var(--ease-out);
}

.handover-card[open] .chev {
  rotate: 90deg;
}

.handover-note {
  display: block;
  font-size: calc(clamp(18px, 2.2vw, 21px) + var(--u-grow));
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* Folded, a handover keeps to its first two lines. */
.handover-card:not([open]) .handover-note {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.handover-body {
  display: grid;
  gap: 12px;
  padding: 0 20px 20px;
}

.handover-card.unfolding > .handover-body {
  animation: unfold-in 0.35s var(--ease-out) both;
}

.handover-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.draft-status {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
}

.on-color .draft-status {
  color: var(--on-color-muted);
}

.on-color .draft-status .btn.ghost {
  box-shadow: inset 0 0 0 1px var(--glass-line);
  color: var(--white);
}

.pill-input {
  display: flex;
  min-width: 0;
  flex: 1;
}

.row-list {
  display: grid;
  gap: 8px;
}

.row,
.timeline-item > summary {
  display: grid;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px 12px 12px;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  text-align: left;
  transition: background 0.2s, transform 0.2s var(--ease-out);
}

.card .row,
.card .timeline-item > summary {
  background: var(--bg);
}

.row:hover,
.timeline-item > summary:hover {
  background: var(--surface-2);
}

.row-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--fg);
}

.row-icon.seizure {
  background: var(--glow-focus);
  color: var(--white);
}

.row-icon.dose {
  background: var(--yellow);
  color: var(--ink);
}

.row-icon.note {
  background: var(--tint);
  color: var(--on-tint);
}

.row-icon.vet_visit {
  background: var(--blue);
  color: var(--white);
}

.row-icon.blood_test {
  background: var(--sky);
  color: var(--ink);
}

.row-icon.weight {
  background: var(--ok-bg);
  color: var(--ok);
}

.row-icon.vaccination {
  background: var(--rose-bg);
  color: var(--rose);
}

.row-text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.row-text strong {
  overflow: hidden;
  font-size: calc(0.96875 * var(--u));
  font-weight: var(--w-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A row's own tag, such as whether a vaccine is due, sits under its line; tags beside a row hide on a phone. */
.row-text .tag {
  justify-self: start;
  margin-top: 4px;
}

.row-text small,
.timeline-meta {
  overflow: hidden;
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A phrase kept to one line, such as a medicine's next due day: lines break between phrases. */
.unbroken {
  white-space: nowrap;
}

/* A row's lines wrap at the accessibility text sizes rather than losing their ends, breaking a word too long for
   the line where a dictionary would, and a phrase between its words. */
@container app (max-width: 17em) {
  .row-text strong,
  .row-text small,
  .timeline-meta {
    -webkit-hyphens: auto;
    hyphens: auto;
    white-space: normal;
  }

  .unbroken {
    white-space: normal;
  }
}

.row .chev,
.row-side .chev {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: rotate 0.25s var(--ease-out);
}

.row-side {
  display: flex;
  align-items: center;
  gap: 6px;
}

.row-actions {
  display: flex;
  gap: 6px;
}

@container app (max-width: 420px) or (max-width: 26.25em) {
  .row-side .tag {
    display: none;
  }

  .document-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .document-row .row-actions {
    grid-column: 2;
  }
}

/* Records */
.records-layout {
  display: grid;
  gap: 18px;
}

.records-head {
  display: grid;
  gap: 14px;
}

@container app (min-width: 960px) and (min-width: 60em) {
  .records-layout {
    align-items: start;
    gap: 32px;
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .records-head {
    position: sticky;
    top: 96px;
  }
}

.search {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 6px 0 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.search .i {
  color: var(--muted);
}

.search input {
  min-width: 0;
  flex: 1;
  align-self: stretch;
  height: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.search input:focus {
  box-shadow: none;
}

/* The box's ring shows where typing goes, so the words inside need no ring of their own. */
.search input:focus-visible {
  outline: none;
}

.records-list {
  display: grid;
  min-width: 0;
  gap: 24px;
}

.history-day {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
  padding: 0 4px;
}

.day-head h3 {
  font-size: calc(17px + var(--u-grow));
}

.day-head span {
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  white-space: nowrap;
}

.timeline-item > summary {
  list-style: none;
}

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

.timeline-item[open] > summary {
  border-radius: 20px 20px 0 0;
  background: var(--surface-2);
}

.timeline-item[open] > summary .chev {
  rotate: 90deg;
}

.timeline-item-body {
  display: grid;
  gap: 6px;
  padding: 12px 16px 16px 64px;
  border-radius: 0 0 20px 20px;
  background: var(--surface);
  animation: unfold-in 0.35s var(--ease-out) both;
}

/* A row a redraw draws open again stays as it was, rather than unfolding again. */
.timeline-item[data-kept] > .timeline-item-body {
  animation: none;
}

.card .timeline-item-body {
  background: var(--bg);
}

/* A record changed on another device too opens to its two versions, each on the colour around the row. */
.timeline-item-body .conflict-versions section {
  background: var(--bg);
}

.card .timeline-item-body .conflict-versions section {
  background: var(--surface);
}

.timeline-actions {
  margin-top: 8px;
}

/* A routine's row in All says in a sentence which doses were given, so it wraps rather than lose a missed one off
   its end. */
.dose-routine .timeline-meta {
  overflow-wrap: break-word;
  white-space: normal;
}

/* Its doses, with a line between each, as in a list in iOS. */
.routine-doses {
  margin: 0;
  padding: 0;
  list-style: none;
}

.routine-doses li {
  display: grid;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}

.routine-doses li:first-child {
  padding-top: 0;
  border-top: 0;
}

.routine-dose-name strong {
  font-weight: var(--w-medium);
}

.routine-dose-name span,
.routine-dose-state {
  color: var(--muted);
  font-size: calc(0.90625 * var(--u));
}

@container app (max-width: 420px) or (max-width: 26.25em) {
  .timeline-item-body {
    padding-left: 16px;
  }
}

/* Patterns */
.summary-tiles {
  position: relative;
  display: grid;
  gap: 8px;
  overflow: hidden;
  padding: 8px;
  border-radius: var(--r-panel);
  background: var(--glow-blue);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@container app (max-width: 760px) or (max-width: 47.5em) {
  .summary-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container app (max-width: 17em) {
  .summary-tiles {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tile {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 18px 12px;
  border-radius: 22px;
  background: var(--white);
  color: var(--ink);
  text-align: center;
}

.tile small {
  font-size: calc(0.78125 * var(--u));
}

.tile strong {
  font-size: calc(clamp(22px, 3vw, 30px) + var(--u-grow));
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.tile em {
  color: var(--on-white-muted);
  font-size: calc(0.75 * var(--u));
  font-style: normal;
}

.tile.total {
  background: var(--mist);
}

.tile.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  background: var(--yellow);
  cursor: pointer;
  font: var(--w-semibold) calc(0.9375 * var(--u)) var(--f-sans);
  transition: transform 0.2s var(--ease-out);
}

.tile.cta:active {
  transform: scale(0.97);
}

.charts {
  display: grid;
  gap: 16px;
}

@container app (min-width: 960px) and (min-width: 60em) {
  .charts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .charts .wide {
    grid-column: 1 / -1;
  }
}

.chart-card {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 14px;
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--surface);
}

.chart-card header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
}

.chart-card h3 {
  font-size: calc(20px + var(--u-grow));
  letter-spacing: -0.01em;
}

.chart-card .sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: calc(0.875 * var(--u));
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  color: var(--muted);
  font-size: calc(0.78125 * var(--u));
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: var(--chart);
}

.legend i.striped {
  background: repeating-linear-gradient(45deg, var(--chart) 0 2px, var(--chart-soft) 2px 5px);
}

.legend i.open {
  background: var(--chart-soft);
  box-shadow: inset 0 0 0 1.5px var(--chart);
}

.legend i.night {
  background: var(--night-band);
}

.legend i.short {
  background: var(--sev-3);
}

.legend i.open.short {
  background: color-mix(in srgb, var(--sev-3) 22%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--sev-3);
}

.legend i.tick {
  width: 3px;
  border-radius: 2px;
  background: var(--sev-3);
}

.legend i.band {
  background: color-mix(in srgb, var(--ok) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 55%, transparent);
}

.legend i.dot-off {
  border-radius: 50%;
  background: var(--sev-4);
}

/* Show All Data, under a chart, opens the values the chart draws as lines of text, for anyone who'd rather read
   them, and for a screen reader. In a card it sits as near under the key as the key's lines do to each other. */
.chart-data {
  display: grid;
  justify-items: start;
}

.chart-card > .chart-data {
  margin-top: -6px;
}

.chart-data ul {
  justify-self: stretch;
  margin: 2px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  font-variant-numeric: tabular-nums;
  list-style: none;
}

/* A line between values, as in a list in iOS, so one that wraps stays clearly one. */
.chart-data li {
  padding: 7px 0;
  border-top: 1px solid var(--line);
}

.chart-data ul[hidden] {
  display: none;
}

.legend i.ring {
  background: none;
  box-shadow: inset 0 0 0 2px var(--muted);
  border-radius: 50%;
}

.sev-1 { --sev: var(--sev-1); }
.sev-2 { --sev: var(--sev-2); }
.sev-3 { --sev: var(--sev-3); }
.sev-4 { --sev: var(--sev-4); }
.sev-5 { --sev: var(--sev-5); }
.g1 { --sev: var(--gap-1); }
.g2 { --sev: var(--gap-2); }
.g3 { --sev: var(--gap-3); }

.legend .sev-scale {
  flex-wrap: wrap;
  gap: 3px;
}

.sev-scale i {
  background: var(--sev);
}

.sev-scale i:first-of-type {
  margin-left: 4px;
}

.sev-scale i:last-of-type {
  margin-right: 4px;
}

.legend i.dash {
  width: 16px;
  height: 0;
  border-top: 1.5px dashed var(--fg);
  border-radius: 0;
  background: none;
  opacity: 0.6;
}

.month-detail {
  display: grid;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  background: var(--bg);
}

.month-detail h4 {
  margin: 6px 0 4px;
  font-size: calc(20px + var(--u-grow));
}

.detail-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@container app (max-width: 520px) or (max-width: 32.5em) {
  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container app (max-width: 17em) {
  .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.detail-grid div {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface);
  grid-template-columns: minmax(0, 1fr);
}

.detail-grid span {
  color: var(--muted);
  font-size: calc(0.75 * var(--u));
}

.detail-grid strong {
  font-size: calc(17px + var(--u-grow));
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
  /* A word such as "Afternoon" breaks where a dictionary would, when larger text leaves the tile too narrow. */
  -webkit-hyphens: auto;
  hyphens: auto;
}

.chart {
  min-width: 0;
}

.chart svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: visible;
}

.clock-chart {
  width: 100%;
  margin: 0 auto;
}

.chart text {
  fill: var(--muted);
  font: var(--w-regular) calc(0.75 * var(--u-capped)) var(--f-sans);
  font-variant-numeric: tabular-nums;
}

.chart text.strong {
  fill: var(--fg);
  font-weight: var(--w-medium);
}

.chart .grid,
.chart .axis {
  stroke: var(--line);
  stroke-width: 1;
}

.chart .ref {
  stroke: var(--fg);
  stroke-dasharray: 3 4;
  stroke-width: 1.25;
  opacity: 0.55;
}

.chart .gap-bar {
  fill: var(--sev, var(--chart));
}

.chart .gap-bar.short {
  fill: var(--sev-3);
}

.chart .gap-bar.open {
  fill: var(--chart-soft);
  stroke: var(--chart);
  stroke-dasharray: 4 3;
  stroke-width: 1.5;
}

.chart .gap-bar.open.short {
  fill: color-mix(in srgb, var(--sev-3) 22%, transparent);
  stroke: var(--sev-3);
}

.chart .dot {
  fill: var(--sev, var(--chart));
  stroke: var(--surface);
  stroke-width: 2;
}

.chart .dot.off-target {
  fill: var(--sev-4);
}

.chart text.halo {
  paint-order: stroke;
  stroke: var(--surface);
  stroke-linejoin: round;
  stroke-width: 4px;
}

.blood .chart text.halo {
  stroke: var(--bg);
}

.chart .trend-line,
.chart .avg-line {
  fill: none;
  stroke-dasharray: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: trace 1.3s var(--ease-out) calc(0.1s + var(--age, 0s)) both;
}

.chart .trend-line {
  stroke-width: 2.5;
}

.chart .avg-line {
  stroke-width: 3;
}

.chart .trend-area {
  fill-opacity: 0.16;
  animation: fade-in 0.9s var(--ease-out) calc(0.4s + var(--age, 0s)) both;
}

.chart .rug {
  stroke: var(--sev, var(--chart));
  stroke-linecap: round;
  stroke-width: 2.5;
}

.chart .band {
  fill: var(--ok);
  fill-opacity: 0.1;
}

.chart .band-edge {
  stroke: var(--ok);
  stroke-dasharray: 3 4;
  stroke-opacity: 0.55;
}

.chart text.band-label {
  fill: var(--ok);
  font-weight: var(--w-medium);
}

.chart .cross {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.chart .cross.on {
  opacity: 1;
}

.chart .cross line {
  stroke: var(--fg);
  stroke-opacity: 0.3;
  stroke-width: 1;
}

.chart .cross circle {
  fill: var(--surface);
  stroke: var(--fg);
  stroke-width: 2;
}

.trend-now {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.trend-now strong {
  font: var(--w-semibold) calc(34px + var(--u-grow)) / 1 var(--f-label);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.trend-now strong small {
  margin-left: 4px;
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-medium);
  letter-spacing: 0;
}

.blood .chart .dot {
  stroke: var(--bg);
}

.chart .line {
  fill: none;
  stroke: var(--chart);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.chart .area {
  fill: var(--chart);
  opacity: 0.12;
}

.chart .night {
  fill: var(--night-band);
}

.chart .hit {
  fill: transparent;
  cursor: pointer;
}

.chart .grow-x {
  animation: grow-x 0.8s var(--ease-out) calc(var(--i, 0) * 0.05s + var(--age, 0s)) both;
  transform-box: fill-box;
  transform-origin: 0 50%;
}

.chart .pop {
  animation: dot-in 0.5s var(--ease-out) calc(var(--i, 0) * 0.04s + var(--age, 0s)) both;
  transform-box: fill-box;
  transform-origin: center;
}

/* Patterns' doses by week: a strip of bars for each medicine, given at the bottom and the rest stacked above. */
.dose-weeks-list {
  display: grid;
  gap: 18px;
}

.dose-weeks-row {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.dose-weeks-row header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.dose-weeks-row strong {
  font-weight: var(--w-medium);
}

.dose-weeks-row small {
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
}

.dose-given { --dose: var(--chart); }
.dose-late { --dose: var(--sev-3); }
.dose-assumed,
.dose-unconfirmed { --dose: var(--chart-soft); }
.dose-skipped { --dose: color-mix(in srgb, var(--muted) 60%, var(--surface)); }
.dose-missed { --dose: var(--sev-4); }
.dose-asNeeded { --dose: var(--ok); }

.dose-strip rect[class^="dose-"] {
  fill: var(--dose);
}

.legend i[class^="dose-"] {
  background: var(--dose);
}

.chart-tip {
  position: fixed;
  z-index: 95;
  max-width: 220px;
  padding: 8px 10px;
  border-radius: 12px;
  background: var(--fg);
  color: var(--bg);
  /* A chart's tip grows with the text as far as the chart's own words do. */
  font: var(--w-medium) calc(0.78125 * var(--u-capped)) / 1.35 var(--f-sans);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  translate: -50% calc(-100% - 12px);
}

.chart-tip.show {
  opacity: 1;
}

/* Scrubbing the 30-day chart: the chart keeps vertical swipes for the page and takes horizontal drags. */
.scrub-chart svg {
  cursor: crosshair;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.scrub-chart svg:focus-visible {
  border-radius: 12px;
  outline: 2px solid var(--accent);
  outline-offset: 6px;
}

.chart .cross text.cross-label {
  fill: var(--fg);
  stroke-width: 5px;
}

.trend-card .trend-now .tag {
  transition: opacity 0.2s;
}

.trend-card.scrubbing .trend-now .tag {
  opacity: 0.3;
}

[data-readout-value] {
  display: inline-block;
  min-width: 0.6em;
}

/* Decks: full-bleed rows of cards that snap to the centre. The card in view sits in the middle and
   its neighbours show on both sides, flat, a little smaller and faded, so they stay readable. */
.deck-wrap {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.deck {
  --deck-card: 72vw;
  --deck-gap: 10px;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--deck-gap);
  margin: 0 calc(-1 * var(--gutter-right)) 0 calc(-1 * var(--gutter-left));
  padding: 10px calc((100vw - var(--deck-card)) / 2) 22px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

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

.hl-deck {
  --deck-card: 64vw;
  align-items: stretch;
}

.deck-card {
  position: relative;
  flex: 0 0 var(--deck-card);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transform-origin: 50% 40%;
}

/* At the accessibility text sizes a card takes the screen's width: its words need the room more than its
   neighbours' edges do. */
@container app (max-width: 17em) {
  .deck {
    --deck-card: calc(100vw - var(--gutter-left) - var(--gutter-right));
  }
}

/* A soft lift under the card in focus; only its opacity changes, so the swipe stays smooth. */
.deck-card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 24px 44px -26px rgba(20, 40, 60, 0.4);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.deck-card.is-active::after {
  opacity: 1;
}

.deck-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: -8px;
}

.deck-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  transition: width 0.45s var(--ease-in-out), background 0.45s var(--ease-in-out);
}

.deck-dots i.on {
  width: 22px;
  background: var(--fg);
}

/* As a card slides toward the middle it grows from the smaller, faded size to full size with an
   ease-in-out curve, and the card leaving eases back down. Neighbours are pulled slightly inward so
   a good slice of each shows. The scroll position drives this, so it follows the finger exactly. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .deck-card {
      animation: deck-focus linear both;
      animation-timeline: view(inline);
    }

    .deck-card::after {
      animation: deck-lift linear both;
      animation-timeline: view(inline);
    }
  }
}

@keyframes deck-focus {
  0% {
    opacity: 0.6;
    transform: translateX(-5%) scale(0.9);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }

  50% {
    opacity: 1;
    transform: none;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }

  100% {
    opacity: 0.6;
    transform: translateX(5%) scale(0.9);
  }
}

@keyframes deck-lift {
  0%,
  100% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }

  50% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
}

/* Without scroll-driven animation the same sizes apply, and a card eases between them as it settles. */
@supports not (animation-timeline: view()) {
  .deck-card {
    transition: transform 0.6s var(--ease-in-out), opacity 0.6s var(--ease-in-out);
  }

  .deck-card::after {
    transition: opacity 0.6s var(--ease-in-out);
  }

  .deck-card:not(.is-active) {
    opacity: 0.6;
    transform: scale(0.9);
  }
}

/* With Reduce Motion on, the card in view changes size at once, as Safari before version 26 otherwise eases it. */
@media (prefers-reduced-motion: reduce) {
  .deck-card,
  .deck-card::after {
    transition: none;
  }

  .deck-card:not(.is-active) {
    opacity: 0.6;
    transform: scale(0.9);
  }
}

/* The chart switch: one segment per card, with a thumb that slides to the card in view. */
.segmented {
  position: relative;
  display: grid;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--tint);
  grid-template-columns: repeat(var(--segs), minmax(0, 1fr));
}

.segmented button {
  position: relative;
  z-index: 1;
  height: 44px;
  min-width: 0;
  padding: 0 4px;
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--on-tint);
  cursor: pointer;
  /* Five segments share a phone's width, so their words stay at the default size. */
  font: var(--w-medium) min(calc(0.8125 * var(--u)), 13px) var(--f-sans);
  text-overflow: ellipsis;
  transition: color 0.35s var(--ease-in-out);
  white-space: nowrap;
}

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

.seg-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--segs));
  border-radius: 999px;
  background: var(--fg);
  transform: translateX(calc(var(--seg) * 100%));
  transition: transform 0.5s var(--ease-in-out);
}

@container app (min-width: 960px) and (min-width: 60em) {
  .deck {
    display: grid;
    margin: 0;
    padding: 0;
    overflow: visible;
    grid-auto-flow: dense;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-cards .stats-month-panel {
    grid-column: 1 / -1;
  }

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

  .deck-card {
    flex: none;
    animation: none;
    opacity: 1;
    transform: none;
  }

  .deck-card::after {
    display: none;
  }

  .segmented,
  .deck-dots {
    display: none;
  }
}

/* Month strips: a row per month with a block for every day, coloured by that day's seizures. */
/* A chart of the months, whose words grow with the text only as far as the other charts' do, so a month's days keep
   their room beside its name and count. */
.month-strips {
  display: grid;
  gap: 4px;
}

.month-strip,
.ms-axis {
  display: grid;
  align-items: center;
  gap: 8px;
  grid-template-columns: calc(1.875 * var(--u-capped)) minmax(0, 1fr) calc(1.75 * var(--u-capped));
}

.month-strip {
  min-height: 44px;
  padding: 6px 6px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: var(--w-medium) calc(0.78125 * var(--u-capped)) var(--f-sans);
  text-align: left;
  transition: background 0.25s var(--ease-in-out);
}

.month-strip[aria-pressed="true"] {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--fg);
}

.ms-axis {
  padding: 0 6px;
  color: var(--muted);
  font-size: calc(0.65625 * var(--u-capped));
}

.ms-ticks {
  position: relative;
  height: 12px;
}

.ms-ticks b {
  position: absolute;
  font-weight: var(--w-medium);
  translate: -50% 0;
}

.ms-ticks b:nth-child(1) { left: 1.6%; }
.ms-ticks b:nth-child(2) { left: 30.6%; }
.ms-ticks b:nth-child(3) { left: 62.9%; }
.ms-ticks b:nth-child(4) { left: 98.4%; }

.ms-days {
  display: grid;
  height: 20px;
  gap: 2px;
  grid-template-columns: repeat(31, minmax(0, 1fr));
}

.ms-days i {
  border-radius: 2px;
  background: color-mix(in srgb, var(--chart) 16%, transparent);
  transform-origin: 50% 100%;
  animation: grow 0.6s var(--ease-out) calc(var(--age, 0s) + 0.1s) both;
}

.ms-days i.s1 {
  background: var(--sev-3);
}

.ms-days i.s2 {
  background: var(--sev-4);
}

.ms-days i.s3 {
  background: var(--sev-5);
}

.ms-days i.future {
  background: color-mix(in srgb, var(--chart) 6%, transparent);
}

.ms-days i.today {
  box-shadow: 0 0 0 1.5px var(--fg);
}

.ms-count {
  justify-self: end;
  min-width: calc(1.625 * var(--u-capped));
  padding: 3px 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--sev, var(--line)) 24%, transparent);
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-semibold);
  text-align: center;
}

.legend i.day-one {
  background: var(--sev-3);
}

.legend i.day-two {
  background: var(--sev-4);
}

.legend i.day-today {
  background: none;
  box-shadow: inset 0 0 0 1.5px var(--fg);
}

/* Highlight cards */
.highlights-wrap {
  display: grid;
  gap: 12px;
}

.hl-card {
  display: grid;
  min-height: 248px;
  align-content: start;
  gap: 12px;
  padding: 20px;
  border-radius: var(--r-card);
  background: var(--surface);
  grid-template-rows: auto 1fr auto;
}

.hl-card .hl-visual {
  display: grid;
  align-content: center;
  min-height: 96px;
}

.hl-card .hl-text {
  display: grid;
  gap: 4px;
}

.hl-card .hl-text strong {
  font: var(--w-semibold) calc(21px + var(--u-grow)) / 1.2 var(--f-label);
  letter-spacing: -0.01em;
}

.hl-card .hl-text span {
  color: var(--muted);
  font-size: calc(0.84375 * var(--u));
  line-height: 1.4;
}

.hl-card .link {
  justify-self: start;
}

.hl-blue,
.hl-berry {
  color: var(--white);
}

.hl-blue {
  background: var(--glow-blue);
}

.hl-berry {
  background: var(--glow-berry);
}

.hl-yellow {
  background: var(--glow-yellow);
  color: var(--ink);
}

.hl-blue .eyebrow,
.hl-berry .eyebrow,
.hl-blue .hl-text span,
.hl-berry .hl-text span {
  color: rgba(255, 255, 255, 0.84);
}

.hl-yellow .eyebrow,
.hl-yellow .hl-text span {
  color: rgba(20, 20, 20, 0.72);
}

.hl-badge {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
}

.hl-berry .hl-badge {
  background: rgba(255, 255, 255, 0.22);
  color: var(--white);
}

.hl-badge .i {
  width: 30px;
  height: 30px;
}

.milestone svg {
  display: block;
  width: 104px;
  height: 104px;
}

.milestone .ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.24);
  stroke-width: 9;
}

.milestone .ring-value {
  fill: none;
  stroke: var(--white);
  stroke-linecap: round;
  stroke-width: 9;
  animation: ring-fill 1.2s var(--ease-in-out) calc(0.2s + var(--age, 0s)) both;
}

/* In the badge's own units, so the number stays inside its ring at any text size. */
.milestone svg text {
  fill: var(--white);
  font: var(--w-semibold) 26px var(--f-label);
}

.milestone svg text.ring-unit {
  fill: rgba(255, 255, 255, 0.8);
  font: var(--w-medium) 11px var(--f-sans);
}

@keyframes ring-fill {
  from {
    stroke-dasharray: 0 100;
  }
}

.race .hl-visual {
  gap: 10px;
}

.race-row {
  display: grid;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: calc(0.78125 * var(--u));
  grid-template-columns: 62px minmax(0, 1fr) 40px;
}

.race-row i {
  width: var(--w);
  height: 12px;
  border-radius: 999px;
  background: var(--chart-soft);
  transform-origin: 0 50%;
  animation: grow-x 0.9s var(--ease-in-out) calc(0.15s + var(--age, 0s)) both;
}

.race-row.now i {
  background: var(--sev-2);
}

.race-row.record i {
  background: var(--gap-3);
}

.race-row b {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
  text-align: right;
}

.episode-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.episode-dots i {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 50%;
  background: var(--sev-2);
  color: var(--white);
  /* A cluster's count stays inside its dot: it grows only as far as the largest standard text size. */
  font: var(--w-semibold) calc(0.625 * var(--u-capped)) var(--f-sans);
  font-style: normal;
  animation: dot-in 0.4s var(--ease-out) calc(var(--age, 0s) + var(--i, 0) * 0.03s + 0.1s) both;
}

.episode-dots i.cluster {
  width: 26px;
  height: 26px;
  background: var(--sev-4);
  font-size: calc(0.6875 * var(--u-capped));
}

.levels .gauge {
  display: grid;
  gap: 6px;
  font-size: calc(0.78125 * var(--u));
}

.gauge + .gauge {
  margin-top: 12px;
}

.gauge span {
  color: var(--muted);
}

.gauge span b {
  color: var(--fg);
  font-weight: var(--w-semibold);
}

.gauge-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--chart-soft);
}

.gauge-bar .band {
  position: absolute;
  inset: 0 auto 0 var(--a);
  width: calc(var(--b) - var(--a));
  border-radius: 999px;
  background: color-mix(in srgb, var(--ok) 45%, transparent);
}

.gauge-bar .mark {
  position: absolute;
  top: 50%;
  left: var(--x);
  width: 14px;
  height: 14px;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--sev-2);
  translate: -50% -50%;
}

.gauge.above .mark,
.gauge.below .mark {
  background: var(--sev-4);
}

.levels.warn .hl-text strong {
  color: var(--bad);
}

.observations {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.observations li {
  display: grid;
  gap: 12px;
  font-size: calc(0.9375 * var(--u));
  grid-template-columns: 16px minmax(0, 1fr);
}

.observations li::before {
  width: 12px;
  height: 12px;
  margin-top: 6px;
  background: var(--accent);
  content: "";
  -webkit-mask: var(--paw) center / contain no-repeat;
  mask: var(--paw) center / contain no-repeat;
}

.observations li.flag::before {
  background: var(--warn);
}

.observations strong {
  font-weight: var(--w-semibold);
}

.ai-questions ul {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding-left: 18px;
}

.disclaim {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--surface);
  color: var(--muted);
  font-size: calc(0.84375 * var(--u));
}

.disclaim .i {
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

/* Vet */
.vet-grid {
  display: grid;
  gap: 16px;
}

@container app (min-width: 960px) and (min-width: 60em) {
  .vet-grid {
    align-items: start;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vet-grid .wide {
    grid-column: 1 / -1;
  }
}

.vet-hero {
  position: relative;
  display: grid;
  align-content: start;
  gap: 16px;
  overflow: hidden;
  padding: clamp(22px, 4vw, 36px);
  border-radius: var(--r-panel);
  background: var(--glow-blue);
  color: var(--white);
  isolation: isolate;
}

.vet-hero > *:not(.paw-print) {
  position: relative;
  z-index: 1;
}

.vet-hero h2 {
  font-size: calc(clamp(36px, 6vw, 56px) + var(--u-grow));
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.vet-meta {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--on-color-line);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vet-meta dt {
  color: var(--on-color-muted);
  font-size: calc(0.6875 * var(--u));
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.vet-meta dd {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
  font-size: var(--u);
  font-weight: var(--w-medium);
}

.vet-plan {
  max-width: 52ch;
  color: var(--on-color-muted);
  font-size: calc(0.9375 * var(--u));
}

.summary-card {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 20px;
  background: var(--bg);
}

.summary-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@container app (max-width: 620px) or (max-width: 38.75em) {
  .summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container app (max-width: 17em) {
  .summary-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.summary-grid div {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-radius: 16px;
  background: var(--surface);
}

.summary-grid small {
  color: var(--muted);
  font-size: calc(0.75 * var(--u));
}

.summary-grid strong {
  font-size: calc(20px + var(--u-grow));
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
  letter-spacing: -0.02em;
}

.summary-section {
  display: grid;
  gap: 6px;
}

.summary-section h4 {
  color: var(--muted);
  font-size: calc(0.75 * var(--u));
  font-weight: var(--w-medium);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.summary-section ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 18px;
  font-size: calc(0.90625 * var(--u));
}

/* On a phone, Share Report and Copy Summary share their row, or take the width each where they can't, as a button
   is never narrower than its words. At the accessibility text sizes each takes a row, its words wrapping if they
   must. */
@container app (max-width: 620px) or (max-width: 38.75em) {
  .visit-summary .btn-row .btn {
    flex: 1 1 0;
    padding: 6px 12px;
    white-space: nowrap;
  }
}

@container app (max-width: 17em) {
  .visit-summary .btn-row .btn {
    flex-basis: 100%;
    white-space: normal;
  }
}

/* Records' count, with its export beside it. */
.records-tools {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* The clinic and after-hours hospital, each with its details and one-tap buttons. */
.clinic-card,
.emergency-card {
  display: grid;
  align-content: start;
  gap: 12px;
}

.clinic-place {
  display: grid;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.clinic-place > span {
  display: grid;
  gap: 2px;
}

.clinic-place small:not(.eyebrow) {
  color: var(--muted);
  font-size: calc(0.84375 * var(--u));
}

.emergency-actions {
  display: grid;
  gap: 8px;
}

/* A form's fields under a heading of their own. */
.form-group {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.form-group legend {
  margin-bottom: 4px;
  padding: 0;
  font-size: calc(0.9375 * var(--u));
  font-weight: var(--w-medium);
}

/* The pet's details open the summary, and a note that the owner recorded it closes it. */
.summary-details {
  font-size: calc(0.90625 * var(--u));
}

.summary-note {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.copy-fallback {
  min-height: 160px;
  border-radius: 16px !important;
  font-size: calc(0.8125 * var(--u)) !important;
}

.bloods {
  display: grid;
  gap: 12px;
}

@container app (min-width: 620px) and (min-width: 38.75em) {
  .bloods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.blood {
  display: grid;
  min-width: 0;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  background: var(--bg);
}

.blood h4 {
  font-size: calc(0.875 * var(--u));
  font-weight: var(--w-medium);
}

.blood-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.blood-now {
  font-size: calc(26px + var(--u-grow));
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
  letter-spacing: -0.02em;
}

.blood-now small {
  margin-left: 4px;
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-regular);
}

.vet-documents {
  display: grid;
  gap: 14px;
}

.disclosure {
  border-radius: 20px;
  background: var(--bg);
}

.disclosure > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

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

.disclosure > summary span {
  display: grid;
  min-width: 0;
  flex: 1;
}

.disclosure > summary small {
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
}

.disclosure > summary strong {
  font-weight: var(--w-medium);
}

.disclosure[open] > summary .chev {
  rotate: 90deg;
}

.disclosure .chev {
  width: 16px;
  height: 16px;
  color: var(--muted);
  transition: rotate 0.25s var(--ease-out);
}

.disclosure > .form {
  padding: 4px 16px 16px;
}

.settings-sheet .disclosure {
  background: var(--surface);
}

.document-message {
  padding: 0 4px;
}

/* Forms */
.form {
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.field > label,
.field > .label {
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-medium);
}

.field-help {
  color: var(--muted);
  font-size: calc(0.78125 * var(--u));
}

input,
select,
textarea,
.time-input-shell,
.date-input-shell {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-size: var(--u);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

textarea {
  min-height: 96px;
  border-radius: 22px;
  line-height: 1.5;
  resize: vertical;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 17px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px;
}

input[type="file"] {
  padding: 13px 18px;
  font-size: calc(0.875 * var(--u));
}

input:focus,
select:focus,
textarea:focus,
.time-input-shell:focus-within,
.date-input-shell:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.time-input-shell,
.date-input-shell {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.time-input-value,
.date-input-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.time-input-shell input[type="time"],
.date-input-shell input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  opacity: 0;
}

.row2 {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container app (max-width: 520px) or (max-width: 32.5em) {
  .row2.stack-sm {
    grid-template-columns: 1fr;
  }
}

@container app (max-width: 17em) {
  .row2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.switch-row {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-size: calc(0.9375 * var(--u));
}

.switch-row > span {
  display: grid;
}

.switch-row small {
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
}

.on-color .switch-row small {
  color: var(--on-color-muted);
}

.switch {
  width: 52px;
  min-width: 52px;
  height: 32px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-2) radial-gradient(circle at 16px 50%, var(--white) 12px, transparent 12.5px) no-repeat 0 0;
  cursor: pointer;
  transition: background-color 0.25s, background-position 0.3s var(--ease-out);
}

.switch:checked {
  background-color: var(--ok);
  background-position: 20px 0;
}

.on-color .switch {
  background-color: var(--glass);
}

.on-color .switch:checked {
  background-color: var(--yellow);
}

.lab-level {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 22px;
}

/* A lab test's values: one bordered group for each, removed from its corner. */
.lab-values {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lab-values legend {
  padding: 0;
  font-size: calc(0.9375 * var(--u));
  font-weight: var(--w-medium);
}

.lab-value-list {
  display: grid;
  gap: 10px;
}

.lab-level .lab-remove {
  justify-self: end;
  color: var(--muted);
}

.lab-values [data-add-lab-value] {
  justify-self: start;
}

.lab-level-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@container app (max-width: 520px) or (max-width: 32.5em) {
  .lab-level-grid {
    grid-template-columns: 1fr 1fr;
  }

  .lab-level-grid .field:last-child {
    grid-column: 1 / -1;
  }
}

.on-color input:not([type]),
.on-color input[type="text"],
.on-color textarea,
.on-color select,
.on-color .time-input-shell,
.on-color .date-input-shell {
  border-color: var(--glass-line);
  background: var(--glass);
  color: var(--white);
}

.on-color .field > label,
.on-color .field-help {
  color: var(--on-color-muted);
}

.on-color ::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.on-color input:not([type]):focus,
.on-color textarea:focus,
.on-color .time-input-shell:focus-within,
.on-color .date-input-shell:focus-within {
  border-color: var(--white);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.tone-yellow input:not([type]) {
  border-color: rgba(20, 20, 20, 0.16);
  background: rgba(255, 255, 255, 0.5);
  color: var(--ink);
}

.tone-yellow ::placeholder {
  color: rgba(20, 20, 20, 0.5);
}

.tone-yellow .field > label {
  color: rgba(20, 20, 20, 0.74);
}

.tone-yellow input:not([type]):focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.12);
}

.flabel {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-medium);
}

.on-color .flabel {
  color: var(--on-color-muted);
}

.flabel output {
  color: inherit;
  font-variant-numeric: tabular-nums;
}

.round-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.round-chip {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
  /* Five share a row, so their numbers grow only as far as the largest standard text size. */
  font: var(--w-medium) calc(17px + var(--u-capped) - 16px) var(--f-sans);
  transition: transform 0.15s var(--ease-out), background 0.2s, color 0.2s;
}

.round-chip[aria-pressed="true"] {
  animation: pop 0.3s var(--ease-out);
  background: var(--fg);
  color: var(--bg);
}

.on-color .round-chip {
  background: var(--glass);
  color: var(--on-color-muted);
}

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

/* What the chosen severity looks like, under its buttons. */
.severity-detail {
  margin-top: 10px;
  color: var(--muted);
  font-size: calc(0.875 * var(--u));
}

.severity-detail:empty {
  display: none;
}

.flow-severity .severity-detail {
  text-align: center;
}

.on-color .severity-detail {
  color: var(--on-color-muted);
}

.text-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.text-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 4px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--fg);
  cursor: pointer;
  font: var(--w-medium) calc(0.875 * var(--u)) var(--f-sans);
  transition: background 0.2s, color 0.2s, transform 0.15s var(--ease-out);
}

.text-chip input {
  position: absolute;
  top: min(0px, (100% - 44px) / 2);
  left: min(0px, (100% - 44px) / 2);
  width: max(100%, 44px);
  height: max(100%, 44px);
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
}

.text-chip:active {
  transform: scale(0.95);
}

.text-chip:has(input:checked),
.text-chip[aria-pressed="true"] {
  background: var(--fg);
  color: var(--bg);
}

.text-chip:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.on-color .text-chip {
  background: var(--glass);
  color: var(--white);
}

.on-color .text-chip:has(input:checked),
.on-color .text-chip[aria-pressed="true"] {
  animation: pop 0.3s var(--ease-out);
  background: var(--white);
  color: var(--ink);
}

.on-color .text-chip:has(input:focus-visible) {
  outline-color: var(--white);
}

.duration {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
}

.stepper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stepper button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out);
}

.stepper button:active {
  transform: scale(0.9);
}

.stepper button .i {
  width: 16px;
  height: 16px;
}

.stepper input {
  width: 3ch;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font-size: calc(32px + var(--u-grow));
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
  letter-spacing: -0.02em;
  text-align: center;
  -moz-appearance: textfield;
}

.on-color .stepper input {
  background: transparent;
}

.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.stepper .unit {
  margin-left: -4px;
  font-size: calc(0.875 * var(--u));
  opacity: 0.75;
}

/* Sheets */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.scrim.enter {
  animation: fade-in 0.35s ease both;
}

.scrim.leaving {
  animation: fade-out 0.24s ease both;
}

.sheet {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 61;
  display: flex;
  max-height: 92vh;
  max-height: 92dvh;
  flex-direction: column;
  overflow: hidden;
  border-radius: 32px 32px 0 0;
  background: var(--bg);
  box-shadow: 0 -20px 60px -30px rgba(0, 0, 0, 0.4);
  color: var(--fg);
  isolation: isolate;
}

.sheet.enter {
  animation: sheet-up 0.55s var(--ease-sheet) both;
}

.sheet.leaving {
  animation: sheet-down 0.24s ease-in both;
}

@container app (min-width: 760px) and (min-width: 47.5em) {
  .sheet {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(38.75em, calc(100vw - 48px));
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 32px;
    translate: -50% -50%;
  }

  .sheet.enter {
    animation: sheet-pop 0.5s var(--ease-sheet) both;
  }

  .sheet.leaving {
    animation: sheet-unpop 0.22s ease-in both;
  }
}

.sheet > .layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  transition: opacity 0.9s var(--ease-soft);
}

.layer-yellow {
  background: var(--glow-yellow);
}

.layer-berry {
  background: var(--glow-berry);
}

.sheet .paw-print {
  --paw-tint: rgba(255, 255, 255, 0.15);
}

.tone-berry .paw-print {
  --paw-tint: rgba(255, 255, 255, 0.07);
}

.grab {
  width: 40px;
  height: 5px;
  flex: none;
  margin: 10px auto 0;
  border-radius: 3px;
  background: var(--line);
}

.on-color .grab {
  background: var(--glass-line);
}

@container app (min-width: 760px) and (min-width: 47.5em) {
  .grab {
    display: none;
  }
}

.sheet-head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px max(20px, env(safe-area-inset-right, 0px)) 6px max(20px, env(safe-area-inset-left, 0px));
}

.sheet-head h2 {
  font-size: calc(24px + var(--u-grow));
  letter-spacing: -0.02em;
}

.sheet-body {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 10px max(20px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  overflow: auto;
  overscroll-behavior: contain;
}

.routine-sheet {
  background: transparent;
  color: var(--white);
}

.routine-sheet.tone-yellow {
  color: var(--ink);
}

.menu-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container app (max-width: 17em) {
  .menu-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.menu-tile {
  position: relative;
  display: grid;
  min-height: 132px;
  align-content: start;
  gap: 6px;
  overflow: hidden;
  padding: 18px;
  border: 0;
  border-radius: 24px;
  background: var(--surface);
  color: var(--fg);
  cursor: pointer;
  isolation: isolate;
  text-align: left;
  transition: transform 0.2s var(--ease-out);
}

.menu-tile:active {
  transform: scale(0.98);
}

.menu-tile b {
  font-size: calc(19px + var(--u-grow));
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
}

.menu-tile p {
  font-size: calc(0.8125 * var(--u));
  line-height: 1.35;
  opacity: 0.8;
}

.menu-tile > .i {
  width: 24px;
  height: 24px;
  margin-bottom: 6px;
}

.menu-tile.big {
  min-height: 0;
  gap: 10px;
  background: var(--glow-focus);
  color: var(--white);
  cursor: default;
  grid-column: 1 / -1;
}

.menu-tile.big b {
  font-size: calc(28px + var(--u-grow));
  letter-spacing: -0.025em;
}

.menu-tile.big .paw-print {
  --paw-tint: rgba(255, 255, 255, 0.08);
}

.menu-tile.big > *:not(.paw-print) {
  position: relative;
  z-index: 1;
}

.menu-tile.dose {
  background: var(--glow-yellow);
  color: var(--ink);
}

.menu-tile.note {
  background: var(--tint);
  color: var(--on-tint);
}

.menu-tile.vet {
  background: var(--glow-blue);
  color: var(--white);
}

.menu-tile.blood {
  background: var(--sky);
  color: var(--ink);
}

.menu-tile.weight {
  background: var(--ok-bg);
  color: var(--fg);
}

.menu-tile.vaccination {
  background: var(--rose-bg);
  color: var(--fg);
}

.menu-tile.as-needed {
  background: var(--glow-berry);
  color: var(--white);
}

/* When each was last given, and how each medicine is given, wrap rather than being cut short. */
.when-needed .row-text small,
.medicines-card .row-text small,
.medicine-list .row-text small {
  white-space: normal;
}

/* Vet's medicine list gives each medicine's whole name, and heads medicines, prevention and supplements apart
   when a pet has more than one of these. */
.medicine-list .row-text strong {
  white-space: normal;
}

/* A vaccination's next due date a year or three on, in a tap. */
.due-chips .text-chip {
  min-height: 44px;
}

.medicine-list h4 {
  margin-bottom: -6px;
  color: var(--muted);
  font-size: calc(0.75 * var(--u));
  font-weight: var(--w-medium);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.menu-tile.wide {
  grid-column: 1 / -1;
}

.routine-switch {
  display: flex;
  min-width: 0;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border-radius: 999px;
  background: var(--b-tone);
  scrollbar-width: none;
  transition: background 0.6s;
}

.routine-switch::-webkit-scrollbar {
  display: none;
}

/* Three or four groups of doses: labels without icons, closer together. */
.routine-switch.many button {
  padding: 0 12px;
}

.tone-yellow .routine-switch {
  background: var(--y-tone);
}

.routine-switch button {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  /* The sheet's own bar, beside its close button: its words grow with the text as far as the app's bars do. */
  font: var(--w-medium) calc(0.875 * var(--u-capped)) var(--f-sans);
  opacity: 0.78;
  transition: background 0.4s, color 0.4s, opacity 0.3s;
}

.routine-switch button .i {
  width: 18px;
  height: 18px;
}

.routine-switch button[aria-pressed="true"] {
  background: var(--white);
  color: var(--ink);
  opacity: 1;
}

/* Today or yesterday, so last night's doses can still be logged after midnight. */
.routine-days {
  display: inline-flex;
  justify-self: start;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: var(--b-tone);
}

.tone-yellow .routine-days {
  background: var(--y-tone);
}

.routine-days button {
  min-height: 40px;
  padding: 4px 16px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  /* A switch like the routines above it, whose words grow as far as theirs. */
  font: var(--w-medium) calc(0.875 * var(--u-capped)) var(--f-sans);
  opacity: 0.78;
}

.routine-days button[aria-pressed="true"] {
  background: var(--white);
  color: var(--ink);
  opacity: 1;
}

.routine-title {
  font-size: calc(clamp(36px, 9vw, 52px) + var(--u-grow));
  letter-spacing: -0.035em;
  line-height: 0.98;
}

.routine-sub {
  margin-top: 8px;
  font-size: calc(0.9375 * var(--u));
  opacity: 0.85;
}

.recording-as {
  font-size: calc(0.9375 * var(--u));
  opacity: 0.85;
}

.routine-sheet .fine {
  color: inherit;
  opacity: 0.78;
}

.dose-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.medication-row {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 22px;
  background: var(--b-tone-2);
  grid-template-columns: minmax(0, 1fr);
}

.tone-yellow .medication-row {
  background: var(--y-tone-2);
}

.unfold .medication-row {
  animation: unfold-row 0.55s var(--ease-out) calc(var(--i, 0) * 0.07s + 0.1s) both;
}

.drow-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 10px;
}

.dname {
  font: var(--w-semibold) calc(19px + var(--u-grow)) var(--f-label);
  letter-spacing: -0.01em;
}

.dmeta {
  font-size: calc(0.8125 * var(--u));
  opacity: 0.8;
  text-align: right;
}

.dstate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: calc(0.875 * var(--u));
}

.dstatus {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: var(--w-medium);
}

.dstatus.assumed {
  opacity: 0.78;
}

.dmark {
  display: grid;
  width: 26px;
  height: 26px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--white);
  color: var(--berry);
}

.tone-yellow .dmark {
  background: var(--ink);
  color: var(--yellow);
}

.dmark .i {
  width: 16px;
  height: 16px;
}

.dstatus.missed .dmark,
.dstatus.skipped .dmark {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
  color: inherit;
}

.dstatus.given .dmark path {
  animation: draw 0.45s var(--ease-out) calc(0.05s + var(--age, 0s)) both;
  stroke-dasharray: 24;
}

/* Given more than an hour after its time: the check stays, in an outline. */
.dstatus.late .dmark {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
  color: inherit;
}

.dactions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dose-time {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.dose-time-label {
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-medium);
  opacity: 0.8;
}

.dsync {
  font-size: calc(0.78125 * var(--u));
  opacity: 0.8;
}

.undo {
  padding: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: var(--w-medium) calc(0.8125 * var(--u)) var(--f-sans);
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dose-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dose-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 4px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--b-tone);
  color: inherit;
  cursor: pointer;
  font: var(--w-medium) calc(0.875 * var(--u)) var(--f-sans);
  transition: transform 0.15s var(--ease-out);
}

.tone-yellow .dose-btn {
  background: var(--y-tone);
}

.dose-btn:active {
  transform: scale(0.95);
}

.dose-btn.primary,
.tone-yellow .dose-btn.primary {
  background: var(--white);
  color: var(--ink);
}

.dose-btn .i {
  width: 18px;
  height: 18px;
}

.settings-section {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 24px;
  background: var(--surface);
}

.settings-section h3 {
  font-size: calc(19px + var(--u-grow));
}

.settings-section .form input:not([type="checkbox"]),
.settings-section .form select,
.settings-section .form textarea,
.settings-section .time-input-shell,
.settings-section .date-input-shell {
  background: var(--bg);
}

.danger-zone {
  background: var(--bad-bg);
}

.danger-zone .subtle {
  color: var(--bad);
}

.danger-zone .btn.danger {
  background: var(--bad);
  color: var(--white);
}

/* Settings: a grouped list that opens into pages, as in iOS Settings. */
.settings-group {
  display: grid;
  /* Clipped rather than hidden, which would let the sheet squeeze a group shorter than its rows. */
  overflow: clip;
  border-radius: 20px;
  background: var(--surface);
}

.settings-row,
.settings-profile {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 0;
  background: none;
  color: var(--fg);
  font: var(--w-medium) var(--u) var(--f-sans);
  text-align: left;
}

.settings-row {
  position: relative;
}

/* A hairline between rows, starting where the text does, as in iOS. */
.settings-row + .settings-row::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 16px;
  height: 1px;
  background: var(--line);
  content: "";
}

.settings-row + .settings-row:has(.settings-icon)::before {
  left: 58px;
}

button.settings-row,
.settings-profile {
  cursor: pointer;
  transition: background 0.2s;
}

button.settings-row:active,
.settings-profile:active {
  background: var(--tint);
}

button.settings-row:focus-visible,
.settings-profile:focus-visible,
.settings-back:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.settings-icon {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border-radius: 9px;
  background: var(--accent);
  color: var(--white);
}

.settings-icon .i {
  width: 19px;
  height: 19px;
}

.settings-row.attention .settings-icon {
  background: var(--amber-deep);
}

/* The question about dose reminders: a bell in the doses' yellow, what reminders do, and the choice. */
.reminders-ask {
  display: grid;
  justify-items: start;
  gap: 12px;
}

.reminders-ask .btn-row {
  justify-self: stretch;
}

.reminders-badge {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 16px;
  background: var(--yellow);
  color: var(--ink);
}

.reminders-badge .i {
  width: 28px;
  height: 28px;
}

.reminders-lead {
  font-size: calc(17px + var(--u-grow));
  font-weight: var(--w-semibold);
}

/* A name keeps its words whole, as wide as its longest, and the value beside it gives way. */
.settings-label {
  max-width: 100%;
  flex: 1;
}

/* A second line under a row's name, such as a medicine's dose and times. */
.settings-label small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-regular);
}

/* A pet's row starts its hairline where its name does, past the avatar. */
.settings-row + .pet-row::before {
  left: 62px;
}

/* A row that takes something away, such as removing a medicine, is red, as in iOS. */
.settings-row.destructive {
  color: var(--bad);
}

/* A switch fills its row of a group, saving as it changes. */
.settings-group .switch-row {
  font-size: var(--u);
}

/* The heading of a group, as iOS puts above one. */
.settings-caption {
  margin: 4px 16px -10px;
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* A line under a page's title, such as a medicine's kind and strength. */
.settings-subtitle {
  margin-top: -12px;
}

.settings-value {
  max-width: 55%;
  color: var(--muted);
  overflow-wrap: anywhere;
  text-align: right;
}

/* At the accessibility text sizes a row's value goes under its name, as in iOS's Settings. */
@container app (max-width: 17em) {
  .settings-row {
    flex-wrap: wrap;
  }

  .settings-value {
    max-width: none;
    flex-basis: 100%;
    order: 1;
    text-align: left;
  }

  .settings-row:has(.settings-icon) .settings-value {
    padding-left: 42px;
  }
}

.settings-row.attention .settings-value {
  color: var(--warn);
}

.settings-chev {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--muted);
}

/* As tall as what's in it, which a set minimum would let the sheet squeeze it below when the list scrolls. */
.settings-profile {
  min-height: auto;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 20px;
  background: var(--surface);
}

.settings-avatar {
  display: grid;
  width: 52px;
  height: 52px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: var(--on-tint);
  font: var(--w-semibold) calc(1.3125 * var(--u-capped)) var(--f-sans);
}

.settings-profile .settings-label {
  display: grid;
  gap: 2px;
}

.settings-profile b {
  font-size: calc(18px + var(--u-grow));
  font-weight: var(--w-semibold);
}

.settings-profile small {
  color: var(--muted);
  font-size: calc(0.875 * var(--u));
  overflow-wrap: anywhere;
}

.settings-back {
  display: inline-flex;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 2px;
  padding: 0 10px 0 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--accent);
  cursor: pointer;
  font: var(--w-medium) calc(17px + var(--u-grow)) var(--f-sans);
}

.settings-back .back {
  width: 22px;
  height: 22px;
  flex: none;
  margin-left: -6px;
  rotate: 180deg;
}

/* A long name on the way back, such as a pet's, is cut short rather than pushing Close off the sheet. */
.settings-back span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-title {
  font-size: calc(24px + var(--u-grow));
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

/* A title takes focus when its page opens, or the home comes back, for screen readers, without a ring for a tap. */
.settings-title:focus,
.settings-sheet .sheet-head h2:focus {
  outline: none;
}

/* Every control on a page of Settings is at least 44 points either way. */
.settings-sheet .ibtn {
  width: 44px;
  height: 44px;
}

.settings-sheet .btn.small {
  min-height: 44px;
}

.settings-page.move-forward {
  animation: settings-forward 0.32s var(--ease-out);
}

.settings-home.move-back,
.settings-page.move-back {
  animation: settings-back 0.32s var(--ease-out);
}

@keyframes settings-forward {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}

@keyframes settings-back {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-page.move-forward,
  .settings-home.move-back,
  .settings-page.move-back {
    animation: none;
  }
}

.pending-record {
  display: grid;
  gap: 6px;
  padding: 14px;
  border-radius: 18px;
  background: var(--bg);
}

.conflict-choice {
  display: grid;
  gap: 10px;
}

.conflict-versions {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container app (max-width: 520px) or (max-width: 32.5em) {
  .conflict-versions {
    grid-template-columns: 1fr;
  }
}

.conflict-versions section {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 14px;
  background: var(--surface);
}

.conflict-versions h4 {
  color: var(--muted);
  font-size: calc(0.75 * var(--u));
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.conflict-fields {
  display: grid;
  gap: 6px;
  margin: 2px 0 0;
}

.conflict-fields div {
  display: grid;
  gap: 1px;
}

.conflict-fields dt {
  color: var(--muted);
  font-size: calc(0.75 * var(--u));
}

.conflict-fields dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Focus mode: recording a seizure */
.focus {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--glow-focus);
  color: var(--white);
  color-scheme: dark;
}

.focus.enter {
  animation: reveal 0.8s var(--ease-soft) both;
}

.focus.leaving {
  animation: reveal-out 0.3s var(--ease-soft) both;
}

.focus .paw-print {
  --paw-tint: rgba(255, 255, 255, 0.06);
}

.focus-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.focus-in {
  position: relative;
  z-index: 1;
  display: flex;
  /* As many ems as 560 px at the default size, so its lines hold as much at any text size. */
  max-width: 35em;
  min-height: 100%;
  flex-direction: column;
  gap: 22px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 16px) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 28px) max(20px, env(safe-area-inset-left, 0px));
}

.focus-in.enter {
  animation: rise 0.7s var(--ease-out) both;
}

.fhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ftitle {
  font-size: calc(clamp(38px, 10vw, 56px) + var(--u-grow));
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.fsec {
  display: grid;
}

.focus-actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
}

.focus-confirm {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 20px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-line);
}

.timer-wrap {
  position: relative;
  display: grid;
  width: min(300px, 76vw);
  aspect-ratio: 1;
  align-self: center;
  place-items: center;
  margin-block: 4px;
}

.timer-wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  rotate: -90deg;
}

.arc-trk {
  fill: none;
  stroke: rgba(255, 255, 255, 0.12);
  stroke-width: 1.5;
}

.arc-val {
  fill: none;
  stroke: var(--yellow);
  stroke-linecap: round;
  stroke-width: 2.5;
  transition: stroke-dashoffset 0.3s linear;
}

.breath {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132, 172, 196, 0.22), rgba(132, 172, 196, 0) 70%);
  animation: breath 5s ease-in-out var(--age, 0s) infinite;
}

.timer-center {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.timer {
  /* Larger text grows it only as far as a phone's width allows. */
  font-size: min(calc(clamp(68px, 21vw, 112px) + var(--u-grow)), max(21vw, 68px));
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium);
  letter-spacing: -0.05em;
  line-height: 1;
}

.timer-sub {
  color: var(--on-color-muted);
  font-size: calc(0.875 * var(--u));
}

.plan {
  display: grid;
  align-items: start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 20px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  font-size: calc(0.90625 * var(--u));
  grid-template-columns: 22px minmax(0, 1fr);
  transition: background 0.5s, color 0.5s, box-shadow 0.5s;
}

.plan .i {
  width: 20px;
  height: 20px;
  margin-top: 1px;
}

.plan.alert {
  animation: pop 0.5s var(--ease-out);
  background: var(--yellow);
  box-shadow: none;
  color: var(--ink);
}

/* Says the plan's time has passed, once it has. */
.plan .plan-due {
  display: none;
}

.plan.alert .plan-due {
  display: inline;
}

/* Where on the ring a dose was given. */
.arc-mark {
  fill: var(--white);
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 1;
}

.text-chip [data-since] {
  font-variant-numeric: tabular-nums;
}

.flede {
  color: var(--on-color-muted);
  font-size: calc(0.9375 * var(--u));
  line-height: 1.4;
}

.timer-pill {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 74px);
  left: 50%;
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--glow-focus);
  box-shadow: var(--shadow-float);
  color: var(--white);
  cursor: pointer;
  /* It floats over the page like the tab bar, and grows with the text as far as the tab bar does. */
  font: var(--w-medium) calc(0.9375 * var(--u-capped)) var(--f-sans);
  font-variant-numeric: tabular-nums;
  translate: -50% 0;
  animation: rise 0.5s var(--ease-out) both;
}

.timer-pill .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--berry-glow);
  animation: pulse 1.2s ease-in-out infinite;
}

/* Once the plan's time passes, the hidden timer turns yellow like the plan. */
.timer-pill.alert {
  background: var(--yellow);
  color: var(--ink);
}

.timer-pill .return {
  opacity: 0.7;
}

/* Tab bar */
.tabbar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  pointer-events: none;
}

html.ios-browser .tabbar,
html.ios-browser .toast {
  position: fixed;
}

.tabbar-in {
  position: relative;
  display: grid;
  max-width: 470px;
  height: 66px;
  align-items: center;
  margin: 0 auto;
  padding: 6px;
  border-radius: 999px;
  background: var(--blue-deep);
  background: color-mix(in srgb, var(--blue-deep) 94%, transparent);
  box-shadow: 0 18px 40px -16px rgba(20, 40, 60, 0.55);
  grid-template-columns: 1fr 1fr 66px 1fr 1fr;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.nav-btn {
  display: grid;
  width: calc(100% - 10px);
  height: 54px;
  min-width: 0;
  justify-self: center;
  align-content: center;
  justify-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.84);
  cursor: pointer;
  /* A tab's name grows with the text as far as it fits inside the round ends of its highlight on the narrowest
     iPhone, at 19 pt to the default's 17: iOS's own tab bars don't grow at all. */
  font: var(--w-medium) calc(0.71875 * min(var(--u), 16px * 19 / 17)) var(--f-sans);
  transition: background 0.35s var(--ease-out), color 0.35s;
}

.nav-btn .i {
  width: 22px;
  height: 22px;
}

.nav-btn[aria-current="page"] {
  background: var(--white);
  color: var(--ink);
}

.record-btn {
  display: grid;
  width: 58px;
  height: 58px;
  justify-self: center;
  place-items: center;
  margin-top: -26px;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 12px 24px -8px rgba(160, 110, 0, 0.55), 0 0 0 5px var(--bg);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.2s var(--ease-out);
}

.record-btn:active {
  transform: scale(0.92);
}

.record-btn .i {
  width: 26px;
  height: 26px;
}

@container app (min-width: 960px) and (min-width: 60em) {
  .tabbar {
    display: none;
  }
}

.toast {
  position: absolute;
  bottom: calc(98px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 90;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font: var(--w-medium) calc(0.875 * var(--u)) var(--f-sans);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transition: opacity 0.25s, translate 0.45s var(--ease-sheet);
  translate: -50% 24px;
  width: max-content;
}

.toast.show {
  opacity: 1;
  translate: -50% 0;
}

.toast.steady {
  transition: none;
}

.overlay-open .toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

@container app (min-width: 960px) and (min-width: 60em) {
  .toast {
    bottom: 32px;
  }
}

/* A toast after a delete holds its Undo, which can be tapped only while the toast shows. */
.toast.has-undo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 4px 4px 18px;
  text-align: left;
}

.toast-undo {
  min-height: 44px;
  flex: none;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--yellow);
  color: var(--ink);
  cursor: pointer;
  font: var(--w-semibold) calc(0.875 * var(--u)) var(--f-sans);
}

.toast-undo:focus-visible {
  border-radius: 999px;
  outline-color: var(--bg);
}

.toast.show .toast-undo {
  pointer-events: auto;
}

.toast:not(.show) .toast-undo {
  visibility: hidden;
  transition: visibility 0s 0.25s;
}

/* Asking first, as an action sheet over everything: what will happen, the action, in red where something goes,
   and Cancel on its own. At the foot of a phone's screen, and in the middle of a wider one. */
.action-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade-in 0.3s ease both;
}

.action-sheet {
  position: fixed;
  right: max(10px, env(safe-area-inset-right, 0px));
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  left: max(10px, env(safe-area-inset-left, 0px));
  z-index: 101;
  display: grid;
  max-width: 27.5em;
  margin: 0 auto;
  gap: 8px;
  animation: sheet-up 0.5s var(--ease-sheet) both;
}

.action-layer.leaving {
  pointer-events: none;
}

.action-layer.leaving .action-scrim {
  animation: fade-out 0.22s ease both;
}

.action-layer.leaving .action-sheet {
  animation: sheet-down 0.22s ease-in both;
}

.action-group {
  display: grid;
  overflow: hidden;
  border-radius: 22px;
  background: var(--bg);
}

.action-group p {
  padding: 16px 22px 14px;
  color: var(--muted);
  font: var(--w-regular) calc(0.875 * var(--u)) / 1.4 var(--f-sans);
  text-align: center;
  text-wrap: pretty;
}

.action-choice {
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-top: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
  font: var(--w-medium) calc(17px + var(--u-grow)) var(--f-sans);
}

.action-choice.danger {
  color: var(--bad);
}

.action-choice.cancel {
  border: 0;
  border-radius: 22px;
  font-weight: var(--w-semibold);
}

.action-choice:active {
  background: var(--surface);
}

/* The group clips its button's corners, so the ring is drawn inside. */
.action-choice:focus-visible {
  border-radius: 0 0 22px 22px;
  outline-offset: -4px;
}

.action-choice.cancel:focus-visible {
  border-radius: 22px;
}

@media (prefers-color-scheme: dark) {
  .action-group,
  .action-choice {
    background: var(--surface-2);
  }

  .action-choice:active {
    background: var(--surface);
  }
}

@container app (min-width: 760px) and (min-width: 47.5em) {
  .action-sheet {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    width: min(380px, calc(100vw - 48px));
    animation-name: sheet-pop;
    translate: -50% -50%;
  }

  .action-layer.leaving .action-sheet {
    animation: sheet-unpop 0.2s ease-in both;
  }
}

/* An alert, which tells rather than asks: a title, what happened and OK, in the middle of every screen, as iOS
   shows one. */
.action-sheet.alert {
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  width: min(300px, calc(100vw - 48px));
  animation-name: sheet-pop;
  translate: -50% -50%;
}

.action-layer.leaving .action-sheet.alert {
  animation: sheet-unpop 0.2s ease-in both;
}

/* Focus starts on the alert itself, for a screen reader, and a ring there would mark nothing to tap. */
.action-sheet.alert:focus {
  outline: none;
}

.alert h2 {
  padding: 20px 22px 0;
  color: var(--fg);
  font: var(--w-semibold) calc(17px + var(--u-grow)) / 1.3 var(--f-sans);
  letter-spacing: 0;
  text-align: center;
}

.alert h2 + p {
  padding-top: 6px;
  padding-bottom: 18px;
  color: var(--fg);
}

/* OK is the alert's only answer, so it's the bold one, as iOS shows the answer it expects. */
.alert .action-choice {
  font-weight: var(--w-semibold);
}

.alert .action-choice:focus-visible {
  border-radius: 0 0 22px 22px;
}

/* Sign-in: the pet stands on the company's blue glow with frosted cards showing Quillpaw at work, and a white
   sheet rises from the bottom with the one thing asked for, an email address. */
html:has(.login-screen) {
  /* Pulling past either end shows blue above the picture and the sheet's colour below it. */
  background: linear-gradient(var(--blue-deep) 50%, var(--bg) 50%);
}

.screen.login-screen {
  --f-label: "Raleway", "Avenir Next", "Segoe UI", sans-serif;
  --card: rgba(255, 255, 255, 0.9);
  --card-shadow: 0 24px 44px -24px rgba(12, 34, 50, 0.65);
  --print: rgba(255, 255, 255, 0.08);
  --orbit: rgba(255, 255, 255, 0.34);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --gutter-left: max(16px, env(safe-area-inset-left, 0px));
  --gutter-right: max(16px, env(safe-area-inset-right, 0px));
  /* The light centre of the glow sits behind the pet's head, never behind words, and a Blue Deep band keeps the
     status bar, wordmark and tag on Blue Deep however tall the status bar is. */
  --hero-glow: radial-gradient(84% 56% at 54% 40%, #84acc4 0%, #5689ac 50%, #3c7494 100%);
  --hero-top: linear-gradient(var(--blue-deep) calc(var(--sat) + 60px), rgba(60, 116, 148, 0) calc(var(--sat) + 160px));
  --sheet-min: 0px;
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(var(--blue-deep) 50%, var(--bg) 50%);
  color: var(--fg);
  font-size: var(--u);
  line-height: 1.6;
}

.login-screen .i {
  width: calc(1.25 * var(--u));
  height: calc(1.25 * var(--u));
}

/* The picture: brand bar and stage */
.login-hero {
  position: relative;
  display: flex;
  min-height: 200px;
  flex: 1 1 auto;
  flex-direction: column;
  padding: calc(var(--sat) + 10px) var(--gutter-right) var(--r-panel) var(--gutter-left);
  overflow: hidden;
  isolation: isolate;
  background: var(--hero-top), var(--hero-glow), var(--blue-deep);
  color: var(--white);
}

.login-brand {
  position: relative;
  z-index: 4;
  display: flex;
  min-height: 44px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.login-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: var(--w-semibold) calc(1.25 * var(--u)) / 1 var(--f-sans);
  letter-spacing: -0.03em;
}

/* The mark stays flat: a white tile and a solid paw, with no glow or shadow. */
.login-mark {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border-radius: 10px;
  background: var(--white);
}

.login-mark::before {
  width: 20px;
  height: 20px;
  background: var(--blue);
  -webkit-mask: var(--paw) center / contain no-repeat;
  mask: var(--paw) center / contain no-repeat;
  content: "";
}

/* A tag, not a control, so it has no ring. White on Blue Deep is 5.1:1. */
.login-tag {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 7px;
  padding: 4px 13px 4px 10px;
  border-radius: 999px;
  background: var(--blue-deep);
  color: var(--white);
  font: var(--w-medium) calc(0.8125 * var(--u)) / 1.2 var(--f-label);
  letter-spacing: 0.01em;
}

.login-paw-glyph {
  display: block;
  width: 14px;
  height: 14px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--paw) center / contain no-repeat;
  mask: var(--paw) center / contain no-repeat;
}

/* The stage is illustration only (aria-hidden): the sheet says the same things in words. A zero flex basis lets
   Chromium size the container before it answers its container queries. */
.login-stage {
  position: relative;
  z-index: 1;
  min-height: 0;
  flex: 1 1 0;
  margin: 0 calc(var(--gutter-right) * -1) 0 calc(var(--gutter-left) * -1);
  container: login-stage / size;
  pointer-events: none;
}

.login-orbits {
  position: absolute;
  z-index: 0;
  top: 2%;
  left: 50%;
  width: 150%;
  height: 96%;
  overflow: visible;
  translate: -50% 0;
}

.login-orbits ellipse {
  fill: none;
  stroke: var(--orbit);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* Two oversized paw prints, turned the same way so they walk up and to the right behind the pet. Each is sized
   to the strip the pet leaves beside it (the pet is 90% of the stage tall and its ears span 73% of its width,
   so each strip is about 50cqw - 27cqh), so it stays whole and clear of the pet, the cards and the words. */
.login-print {
  position: absolute;
  z-index: 0;
  width: var(--s);
  height: calc(var(--s) * 1.04);
  background: var(--print);
  -webkit-mask: var(--paw) center / contain no-repeat;
  mask: var(--paw) center / contain no-repeat;
  rotate: 32deg;
  animation: login-drift var(--d, 26s) ease-in-out infinite alternate;
}

.login-print.p1 {
  --s: clamp(52px, 14cqw, 72px);
  top: 2%;
  left: 2px;
}

.login-print.p2 {
  --s: clamp(64px, 22cqw, 104px);
  --d: 31s;
  top: 0;
  right: 12px;
}

/* The chest fades into the blue before the sheet, so the pet is never cut off by a hard edge. */
.login-pet {
  position: absolute;
  z-index: 1;
  bottom: -6px;
  left: 50%;
  height: calc(90% + 6px);
  aspect-ratio: 2040 / 1938;
  translate: -50% 0;
  -webkit-mask-image: linear-gradient(#000 70%, transparent 97%);
  mask-image: linear-gradient(#000 70%, transparent 97%);
}

.login-pet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
}

/* Frosted white cards showing real moments: flat, level, ink on white. */
.login-moments {
  position: absolute;
  z-index: 3;
  inset: 0;
}

.login-moment {
  position: absolute;
  display: flex;
  max-width: calc(100cqw - var(--gutter-left) - var(--gutter-right));
  align-items: center;
  gap: 10px;
  padding: 9px 14px 9px 9px;
  border-radius: var(--r-card);
  background: var(--card);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow: var(--card-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.7);
  color: var(--ink);
  white-space: nowrap;
  animation: login-bob 7s ease-in-out calc(1.4s + var(--k, 0) * 0.9s) infinite alternate;
}

.login-moment .badge {
  display: grid;
  width: 38px;
  height: 38px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--mist);
  color: var(--ink);
}

.login-moment .badge .i {
  width: 20px;
  height: 20px;
}

/* Colour per need: doses are yellow, the seizure timer berry (7.0:1), the household Blue Deep (5.1:1). */
.login-moment .badge.dose {
  background: var(--yellow);
  color: var(--ink);
}

.login-moment .badge.seizure {
  background: var(--berry);
  color: var(--white);
}

.login-moment .badge.home {
  background: var(--blue-deep);
  color: var(--white);
}

.login-moment .badge .login-paw-glyph {
  width: 18px;
  height: 18px;
}

.login-moment .txt {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.login-moment b,
.login-moment small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.login-moment b {
  font: var(--w-medium) calc(0.875 * var(--u)) / 1.2 var(--f-sans);
  letter-spacing: -0.01em;
}

.login-moment small {
  color: var(--on-white-muted);
  font: var(--w-regular) calc(0.78125 * var(--u)) / 1.3 var(--f-sans);
}

.login-moment .done {
  display: grid;
  width: 22px;
  height: 22px;
  flex: none;
  margin-left: 4px;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
}

.login-moment .done .i {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

.login-moment.chip {
  padding: 7px 16px 7px 7px;
  border-radius: 999px;
}

.login-moment.chip .badge {
  width: 32px;
  height: 32px;
}

.login-moment.chip .badge .i {
  width: 18px;
  height: 18px;
}

.login-moment .pets {
  display: flex;
  flex: none;
}

.login-moment .pets .badge {
  width: 34px;
  height: 34px;
  box-shadow: 0 0 0 2px var(--white);
}

.login-moment .pets .badge + .badge {
  margin-left: -8px;
}

.login-moment .pets .badge .i {
  width: 19px;
  height: 19px;
}

/* Phones: the cards sit on the chests, below both chins, so the faces stay clear. The pair is 90% of the stage
   tall, so the cat's chin, the lower of the two, always lands at about 60% of it. */
.login-moment.c1 {
  --k: 0;
  top: calc(61% + 6px);
  right: var(--gutter-right);
}

.login-moment.c2 {
  --k: 1;
  bottom: 6px;
  left: var(--gutter-left);
}

.login-moment.c3 {
  display: none;
}

/* In em, so they follow the text size as the cards do: one card on a real iPhone with its status bar and home
   indicator, none below about 170 px of stage. */
@container login-stage (max-height: 19.5em) {
  .login-moment.c2 {
    display: none;
  }
}

@container login-stage (max-height: 10.6em) {
  .login-moment,
  .login-print {
    display: none;
  }
}

/* The sheet */
.login-sheet {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: var(--sheet-min);
  flex: none;
  flex-direction: column;
  margin-top: calc(var(--r-panel) * -1);
  padding: 28px var(--gutter-right) calc(var(--sab) + 20px) var(--gutter-left);
  border-radius: var(--r-panel) var(--r-panel) 0 0;
  background: var(--bg);
}

.login-sheet-inner {
  display: flex;
  width: 100%;
  max-width: calc(30 * var(--u));
  flex: 1 0 auto;
  flex-direction: column;
  margin: 0 auto;
}

/* Whatever sits at the foot of a view settles there, in thumb reach. */
.login-foot {
  margin-top: auto;
}

.login-eyebrow {
  margin: 0 0 10px;
  color: var(--accent);
  font: var(--w-medium) calc(0.84375 * var(--u)) / 1.25 var(--f-label);
  letter-spacing: 0.02em;
}

.login-title {
  font: var(--w-medium) min(clamp(calc(2.5 * var(--u)), 11.6vw, calc(3 * var(--u))), 12.4vw) / 0.95 var(--f-sans);
  letter-spacing: -0.035em;
}

.login-title:focus {
  outline: none;
}

.login-title .ln {
  display: block;
}

.login-lede {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: var(--u);
  line-height: 1.6;
  text-wrap: pretty;
}

.login-lede strong {
  color: var(--fg);
  font-weight: var(--w-medium);
  overflow-wrap: anywhere;
}

.login-nowrap {
  white-space: nowrap;
}

.login-form {
  display: grid;
  gap: 12px;
  margin: 22px 0 0;
}

/* A full-pill field: the value on the left and the field's name on the right, as the brand guide draws it. */
.login-field {
  position: relative;
  container-type: inline-size;
}

.login-field label {
  position: absolute;
  top: 50%;
  right: 22px;
  color: var(--muted);
  font: var(--w-medium) calc(0.8125 * var(--u)) / 1 var(--f-label);
  pointer-events: none;
  translate: 0 -50%;
}

.login-field input {
  display: block;
  width: 100%;
  height: calc(3.5 * var(--u));
  min-height: 56px;
  padding: 0 calc(5.5 * var(--u)) 0 22px;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  outline: none;
  background: var(--bg);
  color: var(--fg);
  /* 17 px, so iOS doesn't zoom the page when the field takes focus. */
  font: var(--w-regular) calc(1.0625 * var(--u)) / 1.2 var(--f-sans);
  -webkit-appearance: none;
  appearance: none;
}

.login-field.long-label input {
  padding-right: calc(8 * var(--u));
}

.login-field input::placeholder {
  color: var(--placeholder);
  opacity: 1;
}

.login-field input:focus {
  border-color: var(--fg);
  box-shadow: 0 0 0 4px var(--focus-ring);
}

.login-field input:focus-visible {
  outline: none;
}

.login-field input[aria-invalid="true"] {
  border-color: var(--bad);
}

.login-field input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 22%, transparent);
}

/* With larger text the address needs the whole pill, so the label moves above it. */
@container (max-width: 17em) {
  .login-field label {
    position: static;
    display: block;
    margin: 0 0 8px 22px;
    translate: none;
  }

  .login-field input,
  .login-field.long-label input {
    padding-right: 22px;
  }
}

.login-field-error,
.login-note,
.login-hint {
  display: flex;
  gap: 9px;
  font-size: calc(0.875 * var(--u));
  line-height: 1.45;
}

.login-field-error {
  margin: -2px 0 0 18px;
  color: var(--bad);
}

.login-field-error .i,
.login-note .i,
.login-hint .i {
  width: calc(1.1 * var(--u));
  height: calc(1.1 * var(--u));
  margin-top: calc(0.05 * var(--u));
}

.login-field-error span,
.login-note span,
.login-hint span,
.login-message span {
  text-wrap: pretty;
}

.login-message {
  display: flex;
  gap: 10px;
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: var(--r-card);
  background: var(--bad-bg);
  color: var(--bad);
  font-size: calc(0.9375 * var(--u));
  line-height: 1.45;
}

.login-message .i {
  margin-top: 1px;
}

/* Buttons: the app's pills, sized to the text and allowed to wrap at larger text sizes. */
.login-screen .btn {
  display: flex;
  width: 100%;
  height: auto;
  min-height: 56px;
  gap: 10px;
  padding: 10px 24px;
  font: var(--w-medium) calc(1.0625 * var(--u)) / 1.2 var(--f-sans);
  letter-spacing: -0.01em;
  text-align: center;
  white-space: normal;
}

.login-screen .btn:active {
  transform: scale(0.98);
}

.login-screen .btn.yellow:hover {
  background: #fdd23f;
  box-shadow: none;
}

.login-screen .btn[aria-disabled="true"] {
  cursor: default;
}

.login-screen .btn[aria-disabled="true"]:active {
  transform: none;
}

.login-screen .btn.yellow[aria-busy="true"] {
  opacity: 0.8;
}

.btn.tint {
  background: var(--tint);
  color: var(--on-tint);
}

.btn.tint:hover:not([aria-disabled="true"]) {
  background: var(--tint-hover);
}

.login-screen .btn.tint[aria-disabled="true"] {
  background: color-mix(in srgb, var(--tint) 55%, var(--bg));
  color: var(--muted);
}

.login-screen .btn .count {
  font-variant-numeric: tabular-nums;
}

.login-text-btn {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  align-self: center;
  justify-content: center;
  justify-self: center;
  margin-top: 8px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg);
  cursor: pointer;
  font: var(--w-medium) var(--u) / 1.2 var(--f-sans);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.login-actions .login-text-btn {
  margin-top: 0;
}

.login-text-btn[aria-disabled="true"] {
  color: var(--muted);
  cursor: default;
}

.login-spinner {
  width: 18px;
  height: 18px;
  flex: none;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: login-spin 0.8s linear infinite;
}

.login-note {
  margin: 14px 2px 0;
  color: var(--muted);
}

.login-legal {
  margin: 10px 2px 0 calc(1.1 * var(--u) + 11px);
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  line-height: 1.5;
  text-wrap: pretty;
}

/* Check Your Email: three short steps say the link's rules plainly. */
.login-steps {
  display: grid;
  gap: 6px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.login-steps li {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 12px;
  font-size: var(--u);
  line-height: 1.35;
}

.login-steps .num {
  display: grid;
  width: calc(1.75 * var(--u));
  height: calc(1.75 * var(--u));
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--tint);
  color: var(--on-tint);
  font: var(--w-medium) calc(0.875 * var(--u)) / 1 var(--f-sans);
  font-variant-numeric: tabular-nums;
}

.login-actions {
  display: grid;
  gap: 4px;
  padding-top: 14px;
}

.login-hint {
  margin: 0 2px 8px;
  color: var(--muted);
}

.login-hint.ok {
  color: var(--ok);
}

/* Signing You In: a trail of paw prints steps across the sheet as the progress indicator. */
.login-progress {
  margin: auto 0;
  padding: 24px 0 12px;
}

.login-walk {
  display: flex;
  max-width: calc(22 * var(--u));
  height: 72px;
  align-items: center;
  justify-content: space-between;
  color: var(--blue);
}

.login-walk span {
  width: calc(2.125 * var(--u));
  height: calc(2.125 * var(--u));
  background: currentColor;
  opacity: 0.14;
  -webkit-mask: var(--paw) center / contain no-repeat;
  mask: var(--paw) center / contain no-repeat;
  rotate: 90deg;
  translate: 0 var(--y);
  animation: login-step 2.4s ease-in-out calc(var(--n) * 0.2s) infinite;
}

.login-walk span:nth-child(even) {
  --y: 11px;
}

.login-walk span:nth-child(odd) {
  --y: -11px;
}

.login-progress-label {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: calc(0.9375 * var(--u));
}

/* Entrance: the whole screen the first time, only the new view's cards and words after that. A redraw of the
   same view plays nothing. */
.login-screen[data-entering="all"] .login-pet {
  animation: login-pet-in 1s var(--ease-sheet) both;
}

.login-screen[data-entering="all"] .login-sheet {
  animation: login-sheet-in 0.8s var(--ease-sheet) both;
}

.login-screen[data-entering] .login-rise {
  animation: login-rise 0.6s var(--ease-out) calc(0.12s + var(--i, 0) * 0.06s) both;
}

.login-screen[data-entering] .login-moment {
  animation: login-card-in 0.7s var(--ease-out) calc(0.45s + var(--k, 0) * 0.14s) both,
    login-bob 7s ease-in-out calc(1.4s + var(--k, 0) * 0.9s) infinite alternate;
}

/* Typing on a phone: the keyboard covers about 40% of the screen, so the picture folds away and the title,
   field and button sit at the top, clear of it. */
.login-screen.typing .login-stage,
.login-screen.typing .login-tag,
.login-screen.typing .login-eyebrow,
.login-screen.typing .login-lede {
  display: none;
}

.login-screen.typing .login-hero {
  min-height: 0;
  flex: 0 0 auto;
}

.login-screen.typing .login-sheet {
  flex: 1 0 auto;
}

.login-screen.typing .login-title {
  overflow: hidden;
  font-size: min(calc(2 * var(--u)), 8.4vw);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-screen.typing .login-title .ln {
  display: inline;
}

.login-screen.typing .login-form {
  margin-top: 16px;
}

/* Short phones, such as Safari with its toolbars or an iPhone SE */
@container app (max-width: 959px) or (max-width: 59.9375em) {
  @media (max-height: 700px) {
    .login-sheet {
      padding-top: 24px;
    }

    .login-title {
      font-size: min(calc(2.5 * var(--u)), 11vw);
    }

    .login-lede {
      font-size: calc(0.9375 * var(--u));
      line-height: 1.55;
    }

    .login-form {
      margin-top: 18px;
    }
  }
}

/* Phones in landscape: just the brand bar above the sheet */
@container app (max-width: 959px) or (max-width: 59.9375em) {
  @media (max-height: 480px) {
    .login-stage {
      display: none;
    }

    .login-hero {
      min-height: 0;
      flex: none;
    }
  }
}

/* Phones and tablets: one sheet height for every view, so the pet never jumps when the view changes. It is the
   welcome view's own height; every other view fits inside it. */
@container app (max-width: 959px) or (max-width: 59.9375em) {
  @media (min-height: 701px) {
    .screen.login-screen {
      --sheet-min: min(calc(18.5 * var(--u) + 177px + var(--sab)), 64svh);
    }
  }
}

@container app (min-width: 600px) and (min-width: 37.5em) and ((max-width: 959px) or (max-width: 59.9375em)) {
  .screen.login-screen {
    --gutter-left: max(32px, env(safe-area-inset-left, 0px));
    --gutter-right: max(32px, env(safe-area-inset-right, 0px));
  }

  .login-sheet {
    padding-top: 40px;
  }

  .login-sheet-inner {
    max-width: calc(28 * var(--u));
  }

  .login-title {
    font-size: clamp(calc(3.25 * var(--u)), 7.4vw, calc(4 * var(--u)));
  }

  .login-moment.c1 {
    right: 12%;
  }

  .login-moment.c2 {
    left: 12%;
  }

  .login-print.p1 {
    --s: clamp(64px, 12cqw, 110px);
  }

  .login-print.p2 {
    --s: clamp(80px, 18cqw, 150px);
  }
}

/* Desktop: the picture in a 32 px panel, the form on the white page beside it. What shows when the page is pulled
   past its ends goes by the screen's width, as the page behind the app can't ask the app's. */
@media (min-width: 960px) {
  html:has(.login-screen) {
    background: var(--bg);
  }
}

@container app (min-width: 960px) and (min-width: 60em) {
  .screen.login-screen {
    display: grid;
    padding: 20px;
    background: var(--bg);
    grid-template-columns: minmax(0, 1fr) clamp(calc(26 * var(--u)), 40vw, calc(36 * var(--u)));
  }

  .login-hero {
    --hero-glow: radial-gradient(70% 62% at 52% 46%, #84acc4 0%, #5689ac 50%, #3c7494 100%);
    --hero-top: linear-gradient(var(--blue-deep) 20px, rgba(60, 116, 148, 0) 150px);
    position: sticky;
    top: 20px;
    height: calc(100svh - 40px);
    min-height: 520px;
    padding: 30px 36px 0;
    border-radius: var(--r-panel);
  }

  .login-brand {
    justify-content: flex-start;
    gap: 16px;
  }

  .login-mark {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .login-mark::before {
    width: 22px;
    height: 22px;
  }

  .login-lockup {
    font-size: calc(1.375 * var(--u));
  }

  .login-tag {
    min-height: 32px;
    font-size: calc(0.84375 * var(--u));
  }

  .login-stage {
    margin: 0 -36px;
  }

  .login-orbits {
    top: 10%;
    width: 112%;
    height: 84%;
  }

  .login-pet {
    bottom: 0;
    left: 54%;
    height: 80%;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .login-print.p1 {
    --s: clamp(120px, 11vw, 160px);
    top: 2%;
    left: 4%;
  }

  .login-print.p2 {
    --s: clamp(130px, 13vw, 180px);
    top: 4%;
    right: 4%;
  }

  .login-moment {
    gap: 12px;
    padding: 11px 18px 11px 11px;
  }

  .login-moment .badge {
    width: 44px;
    height: 44px;
  }

  .login-moment .badge .i {
    width: 22px;
    height: 22px;
  }

  .login-moment b {
    font-size: calc(0.9375 * var(--u));
  }

  .login-moment small {
    font-size: calc(0.8125 * var(--u));
  }

  .login-moment.chip {
    padding: 8px 18px 8px 8px;
  }

  .login-moment.chip .badge {
    width: 36px;
    height: 36px;
  }

  .login-moment .pets .badge {
    width: 40px;
    height: 40px;
  }

  .login-moment.c1 {
    top: 64%;
    right: auto;
    left: 5%;
  }

  .login-moment.c2 {
    top: auto;
    right: 4%;
    bottom: 8%;
    left: auto;
  }

  /* Above the cat's ears and to the right of the dog's head. */
  .login-moment.c3 {
    --k: 2;
    display: flex;
    top: 20%;
    right: 4%;
    left: auto;
  }

  /* A short window keeps the chip clear of the first print and the pet. */
  @container login-stage (max-height: 30em) {
    .login-moment.c3 {
      display: none;
    }
  }

  .login-sheet {
    z-index: 1;
    min-height: 0;
    justify-content: center;
    margin: 0;
    padding: 40px clamp(32px, 5vw, 72px);
    border-radius: 0;
    background: transparent;
  }

  .login-screen[data-entering="all"] .login-sheet {
    animation: login-rise 0.8s var(--ease-out) both;
  }

  .login-sheet-inner {
    max-width: calc(25 * var(--u));
    flex: 0 0 auto;
    margin: auto 0;
  }

  .login-foot {
    margin-top: 0;
  }

  .login-title {
    font-size: clamp(calc(3.5 * var(--u)), 4.9vw, calc(4.25 * var(--u)));
  }

  .login-lede {
    margin-top: 16px;
    font-size: calc(1.125 * var(--u));
  }

  .login-form {
    margin-top: 30px;
  }

  .login-steps {
    gap: 12px;
    margin-top: 26px;
  }

  .login-actions {
    padding-top: 26px;
  }
}

/* Reduced motion: nothing moves or scales. The signing trail still steps, as a slow fade, so progress shows. */
@media (prefers-reduced-motion: reduce) {
  .login-screen .login-pet,
  .login-screen .login-moment,
  .login-screen .login-print,
  .login-screen .login-sheet,
  .login-screen .login-rise,
  .login-screen .login-spinner {
    animation: none !important;
  }

  .login-screen .btn,
  .login-field input {
    transition: none;
  }

  .login-screen .btn:active {
    transform: none;
  }

  .login-walk span {
    animation: login-fade-step 3.6s linear calc(var(--n) * 0.3s) infinite;
    scale: 1;
  }
}

@keyframes login-pet-in {
  from {
    opacity: 0;
    translate: -50% 24px;
  }
}

@keyframes login-card-in {
  from {
    opacity: 0;
    scale: 0.96;
    translate: 0 14px;
  }
}

@keyframes login-bob {
  to {
    transform: translateY(-6px);
  }
}

@keyframes login-drift {
  to {
    rotate: 37deg;
    translate: 8px -10px;
  }
}

@keyframes login-sheet-in {
  from {
    translate: 0 64px;
  }
}

@keyframes login-rise {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}

@keyframes login-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes login-step {
  0%,
  6% {
    opacity: 0.14;
    scale: 0.86;
  }

  16%,
  56% {
    opacity: 1;
    scale: 1;
  }

  82%,
  100% {
    opacity: 0.14;
    scale: 0.86;
  }
}

@keyframes login-fade-step {
  0%,
  100% {
    opacity: 0.2;
  }

  30%,
  60% {
    opacity: 1;
  }
}

/* Pet and medicine setup: one question a screen, on the company's blue */
.flow-screen {
  justify-content: flex-start;
  isolation: isolate;
  background: var(--glow-blue);
  color: var(--white);
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc(6px + env(safe-area-inset-top, 0px)) var(--gutter-right) calc(20px + env(safe-area-inset-bottom, 0px)) var(--gutter-left);
}

html.ios-browser .flow-screen {
  overflow-y: auto;
}

.flow-content {
  display: flex;
  width: min(100%, 480px);
  flex: 1 0 auto;
  flex-direction: column;
  margin: 0 auto;
}

.flow-head {
  display: grid;
  min-height: 48px;
  align-items: center;
  gap: 16px;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr) minmax(64px, auto);
}

.flow-nav {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-self: start;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  font: var(--w-medium) var(--u) var(--f-sans);
  white-space: nowrap;
}

.flow-nav.end {
  justify-self: end;
}

.flow-nav .back {
  width: 22px;
  height: 22px;
  margin-left: -6px;
  rotate: 180deg;
}

.flow-nav:focus-visible {
  border-radius: 10px;
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

.flow-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
}

.flow-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--white);
  transition: width 0.5s var(--ease-out);
}

.flow-step {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  gap: 24px;
  padding-top: 28px;
}

.flow-step.enter > * {
  animation: rise 0.6s var(--ease-out) both;
}

.flow-step.enter > :nth-child(2) {
  animation-delay: 50ms;
}

.flow-step.enter > :nth-child(n + 3) {
  animation-delay: 100ms;
}

.flow-copy {
  display: grid;
  gap: 10px;
}

.flow-copy h1 {
  font-size: calc(clamp(30px, 8.6vw, 40px) + var(--u-grow));
  letter-spacing: -0.03em;
  line-height: 1.05;
  outline: none;
}

.flow-copy p,
.flow-note {
  color: var(--on-color-muted);
  font-size: calc(17px + var(--u-grow));
  line-height: 1.45;
}

.flow-copy .flow-context {
  color: var(--white);
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flow-note,
.flow-label {
  text-align: center;
}

.flow-label {
  margin-bottom: -16px;
  color: var(--on-color-muted);
  font-size: calc(0.875 * var(--u));
  font-weight: var(--w-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.flow-actions {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
}

.flow-step.typing .flow-actions {
  margin-top: 0;
}

.btn.plain {
  background: transparent;
  box-shadow: none;
  color: var(--white);
}

.btn.plain:active {
  background: rgba(255, 255, 255, 0.1);
}

.flow-step input:not([type="radio"], [type="checkbox"], [type="hidden"]),
.flow-step textarea {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  background: var(--glass);
  color: var(--white);
  font: var(--w-regular) calc(19px + var(--u-grow)) var(--f-sans);
}

.flow-step textarea {
  min-height: 128px;
  padding: 14px 18px;
  font-size: calc(17px + var(--u-grow));
  line-height: 1.45;
  resize: vertical;
}

.flow-step input:focus,
.flow-step textarea:focus {
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16);
  outline: none;
}

.flow-step ::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.flow-fields {
  display: grid;
  gap: 12px;
}

.flow-row {
  min-height: 56px;
  padding: 0 18px;
  border-radius: 16px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  font-size: calc(17px + var(--u-grow));
}

/* A list of answers with a tick on the chosen one, like an iOS settings list */
.choice-list,
.flow-list {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  list-style: none;
}

.choice,
.flow-list > li {
  position: relative;
}

.choice + .choice::before,
.flow-list > li + li::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 18px;
  height: 1px;
  background: var(--glass-line);
  content: "";
}

.choice {
  display: flex;
  min-height: 56px;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.choice:active {
  background: rgba(255, 255, 255, 0.1);
}

.choice input,
.seg-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-text {
  display: grid;
  flex: 1;
  gap: 3px;
}

.choice-text b {
  font-size: calc(17px + var(--u-grow));
  font-weight: var(--w-medium);
}

.choice-text small,
.flow-points small,
.flow-medicine small {
  color: var(--on-color-muted);
  font-size: calc(0.875 * var(--u));
  line-height: 1.4;
}

.choice-check {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.choice:has(input:checked) .choice-check {
  opacity: 1;
}

.choice:has(input:focus-visible) {
  border-radius: 14px;
  outline: 2px solid var(--white);
  outline-offset: -4px;
}

/* Two or three choices side by side, like an iOS segmented control */
.seg-choice {
  position: relative;
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 3px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  grid-template-columns: repeat(var(--segs), minmax(0, 1fr));
}

.seg-choice::before {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc((100% - 6px) / var(--segs));
  border-radius: 9px;
  background: var(--white);
  box-shadow: 0 3px 8px rgba(10, 40, 60, 0.18);
  content: "";
  opacity: 0;
  transform: translateX(calc(var(--seg, 0) * 100%));
  transition: transform 0.35s var(--ease-out), opacity 0.2s;
}

.seg-choice:has(input:checked)::before {
  opacity: 1;
}

.seg-choice:has(label:nth-of-type(2) input:checked) {
  --seg: 1;
}

.seg-choice:has(label:nth-of-type(3) input:checked) {
  --seg: 2;
}

.seg-choice label {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 40px;
  place-items: center;
  border-radius: 9px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.seg-choice span {
  color: var(--white);
  font: var(--w-medium) calc(0.9375 * var(--u)) var(--f-sans);
  transition: color 0.25s;
}

.seg-choice label:has(input:checked) span {
  color: #2f5f7b;
}

.seg-choice label:has(input:focus-visible) {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

/* In a record form, on the sheet's own background rather than a colour field. */
.record-form .seg-choice {
  background: var(--surface-2);
}

.record-form .seg-choice span {
  color: var(--muted);
}

.record-form .seg-choice label:has(input:checked) span {
  color: var(--ink);
}

.record-form .seg-choice label:has(input:focus-visible) {
  outline-color: var(--accent);
}

/* A weight and its unit side by side. */
.weight-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  align-items: end;
  gap: 8px 12px;
}

.weight-field .seg-choice label {
  min-height: 46px;
}

.weight-field .fine {
  grid-column: 1 / -1;
}

.flow-points li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
}

.flow-points .i {
  width: 26px;
  height: 26px;
  flex: none;
}

.flow-points span,
.flow-medicine span {
  display: grid;
  flex: 1;
  gap: 2px;
}

.flow-points b {
  font-size: var(--u);
  font-weight: var(--w-semibold);
}

.flow-review button,
.flow-medicine,
.flow-time-row {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  font: var(--w-regular) calc(17px + var(--u-grow)) var(--f-sans);
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

.flow-review button:active,
.flow-medicine:active,
.flow-time-row:active {
  background: rgba(255, 255, 255, 0.1);
}

.flow-review span {
  flex: 1;
  color: var(--on-color-muted);
}

.flow-review b,
.flow-medicine b,
.flow-time-row b {
  font-weight: var(--w-medium);
}

.flow-review b {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.flow-review .i,
.flow-medicine .i {
  width: 16px;
  height: 16px;
  flex: none;
  opacity: 0.6;
}

.flow-time {
  display: flex;
  align-items: center;
}

.flow-time-row {
  flex: 1;
  justify-content: space-between;
}

.flow-time-row b {
  font-variant-numeric: tabular-nums;
}

.flow-times li.open .flow-time-row b {
  color: var(--yellow);
}

/* The red minus iOS uses to take an item out of a list */
.flow-remove {
  display: grid;
  width: 44px;
  height: 44px;
  flex: none;
  margin-right: 6px;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}

.flow-remove span,
.flow-add {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  color: var(--white);
}

.flow-remove span {
  background: #ff3b30;
}

.flow-add {
  background: #34c759;
}

.flow-remove .i,
.flow-add .i {
  width: 16px;
  height: 16px;
  stroke-width: 2.4;
}

.flow-add-time {
  justify-content: flex-start;
}

.flow-time-wheel {
  padding: 0 8px 12px;
}

.flow-more summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 0 18px;
  color: var(--on-color-muted);
  cursor: pointer;
  font-size: calc(0.9375 * var(--u));
  font-weight: var(--w-semibold);
  letter-spacing: 0.02em;
  list-style: none;
  text-transform: uppercase;
}

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

.flow-more .chev {
  width: 18px;
  height: 18px;
  transition: rotate 0.25s var(--ease-out);
}

.flow-more[open] .chev {
  rotate: 90deg;
}

.flow-chips {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* A past seizure's severity in setup: the 1 to 5 of the seizure form, and Not Sure beneath */
.flow-severity {
  display: grid;
  justify-items: center;
  gap: 12px;
}

.flow-severity .flow-label {
  margin-bottom: 0;
}

.flow-severity .flow-label small {
  display: block;
  margin-top: 2px;
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-regular);
  letter-spacing: 0;
  text-transform: none;
}

.flow-severity .round-chips {
  justify-content: center;
}

.flow-message {
  padding: 12px 16px;
  border-radius: 18px;
  background: rgba(20, 20, 20, 0.24);
  color: var(--white);
  font-size: calc(0.9375 * var(--u));
  line-height: 1.5;
}

.flow-step .flow-message {
  margin-top: -8px;
}

/* A spinning wheel for numbers, dates and times, like the iOS picker: 216px tall, 32px rows, a capsule
   band with the chosen row magnified in it */
.wheel {
  position: relative;
  display: flex;
  height: 216px;
  justify-content: center;
  gap: 4px;
  /* The wheel keeps its size at any text size, as iOS's own pickers do: its rows are 32 px apart. */
  font-size: 23.5px;
  -webkit-user-select: none;
  user-select: none;
}

.wheel-band {
  position: absolute;
  top: 50%;
  right: 9px;
  left: 9px;
  height: 34px;
  margin-top: -17px;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.16);
  pointer-events: none;
}

.wheel-col {
  position: relative;
  flex: 0 1 calc(var(--wheel-text) + var(--wheel-suffix) + 18px);
  min-width: 0;
}

.wheel-scroll {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* The band shows its own magnified rows, so the wheel's dimmer rows are hidden behind it. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(50% - 16px), transparent calc(50% - 16px), transparent calc(50% + 16px), #000 calc(50% + 16px));
  mask-image: linear-gradient(to bottom, #000 calc(50% - 16px), transparent calc(50% - 16px), transparent calc(50% + 16px), #000 calc(50% + 16px));
}

.wheel-scroll::-webkit-scrollbar {
  display: none;
}

.wheel-col:has(.wheel-scroll:focus-visible) .wheel-lens {
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.8);
}

.wheel-scroll:focus-visible {
  outline: none;
}

.wheel-items {
  padding: 92px 0;
}

.wheel-item,
.wheel-lens-item {
  display: flex;
  height: 32px;
  align-items: center;
  justify-content: center;
  padding: 0 9px;
  color: var(--white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wheel-item {
  cursor: pointer;
  font: var(--w-regular) 21px var(--f-sans);
  scroll-snap-align: center;
}

.wheel-item > span {
  display: block;
  will-change: transform, opacity;
}

.wheel-lens {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 32px;
  margin-top: -16px;
  overflow: hidden;
  pointer-events: none;
}

.wheel-lens-items {
  will-change: transform;
}

.wheel-lens-item {
  font: var(--w-regular) 23.5px var(--f-sans);
}

.wheel-col.end :is(.wheel-item, .wheel-lens-item) {
  justify-content: flex-end;
}

.wheel-col.start :is(.wheel-item, .wheel-lens-item) {
  justify-content: flex-start;
}

.wheel-col.suffixed :is(.wheel-item, .wheel-lens-item) {
  padding-right: calc(100% - 9px - var(--wheel-text));
}

.wheel-suffix {
  position: absolute;
  top: 50%;
  left: calc(9px + var(--wheel-text) + 6px);
  color: var(--white);
  font: var(--w-semibold) calc(17px + var(--u-grow)) var(--f-sans);
  pointer-events: none;
  transform: translateY(-50%);
}

/* A pet's details, red words such as People's Remove, and asking the day a medicine stopped */
.pet-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border-radius: 20px;
  background: var(--bg);
}

.pet-card > span {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.pet-card b {
  font: var(--w-semibold) calc(17px + var(--u-grow)) var(--f-label);
}

.pet-card small {
  color: var(--muted);
  font-size: calc(0.84375 * var(--u));
}

/* At the accessibility text sizes Edit Details goes under the pet's details, as a Settings row's value goes under
   its name. */
@container app (max-width: 17em) {
  .pet-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

.schedule-remove {
  min-height: 44px;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--bad);
  cursor: pointer;
  font: var(--w-medium) calc(0.875 * var(--u)) var(--f-sans);
}

/* Asks when a medicine stopped before it's removed. */
.schedule-stop {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--bad-bg);
}

/* Asks when a medicine was paused from, or resumed on. */
.schedule-pause {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--surface);
}

.schedule-stop[hidden],
.schedule-pause[hidden] {
  display: none;
}

.schedule-stop .btn-row,
.schedule-pause .btn-row {
  margin: 0;
}

/* Solid, so it stands out from the panel's own red tint; in dark mode the red is light, so the words are dark. */
.schedule-stop .btn.danger {
  background: var(--bad);
  color: var(--bg);
}

@media (prefers-reduced-motion: reduce) {
  .flow-step.enter > *,
  .flow-progress span,
  .seg-choice::before {
    animation: none;
    transition: none;
  }
}

/* Today: the colour field fills the whole screen, edge to edge, with the top bar on it. The cards below
   slide up over it, and the bar turns solid as they pass beneath. */
.screen.has-hero {
  background: var(--hero-edge);
}

.screen.hero-blue {
  --hero-edge: #4a7f9f;
}

.screen.hero-yellow {
  --hero-edge: #f2b013;
}

.screen.hero-berry {
  --hero-edge: #a01a39;
}

/* The page stays white beneath the cards; the field's colour shows only above it, as a pull-to-refresh
   uncovers it. */
.screen.has-hero .content {
  background: var(--bg);
}

.screen.has-hero .page {
  padding-top: 0;
}

/* The bar is 64px tall plus its 1px border, all of which the field runs up behind. */
.screen.has-hero .topbar {
  margin-bottom: calc(-65px - env(safe-area-inset-top, 0px));
}

.topbar {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.topbar.on-hero {
  border-bottom-color: transparent;
  background: transparent;
  color: var(--white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.topbar.on-hero.scrolled {
  background: color-mix(in srgb, var(--hero-edge) 86%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}

.screen.hero-yellow .topbar.on-hero {
  color: var(--ink);
}

.topbar.on-hero :is(.brand, .brand .caret, .topnav button) {
  color: inherit;
}

.topbar.on-hero .brand i {
  background: currentColor;
}

.topbar.on-hero .brand small {
  border-left-color: color-mix(in srgb, currentColor 35%, transparent);
  color: inherit;
  opacity: 0.8;
}

.topbar.on-hero :is(.sync-pill, .avatar, .btn.ghost, .topnav button[aria-current="page"]) {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
}

.screen.hero-yellow .topbar.on-hero :is(.sync-pill, .avatar, .btn.ghost, .topnav button[aria-current="page"]) {
  background: rgba(255, 255, 255, 0.42);
}

/* New Record's outline and dark words would sit on the field's colour like a hole; it takes the pills' look. */
.topbar.on-hero .btn.ghost {
  box-shadow: none;
}

/* The field has its own Record Seizure button, so the bar's one waits until the field has scrolled away. */
.topbar.on-hero [data-action="start-timer"] {
  visibility: hidden;
}

.screen.has-hero .view[data-view="today"] .hero {
  min-height: 100svh;
  margin-inline: calc(50% - 50vw);
  padding-top: calc(env(safe-area-inset-top, 0px) + 64px + clamp(20px, 5vw, 48px));
  padding-right: max(var(--gutter-right), calc(50vw - 632px + var(--gutter-right)));
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 136px);
  padding-left: max(var(--gutter-left), calc(50vw - 632px + var(--gutter-left)));
  border-radius: 0;
}

/* The streak's numbers sit at the foot of the field, above the tab bar. */
.screen.has-hero .hero-main {
  grid-template-rows: repeat(5, auto) 1fr;
}

.screen.has-hero .hero-meta {
  align-self: end;
}

.screen.has-hero .hero-portrait {
  top: calc(env(safe-area-inset-top, 0px) + 64px + clamp(16px, 4vw, 28px));
  right: max(var(--gutter-right), calc(50vw - 632px + var(--gutter-right)));
}

.screen.has-hero .view[data-view="today"] .lift {
  margin-inline: calc(50% - 50vw);
  padding-right: max(var(--gutter-right), calc(50vw - 632px + var(--gutter-right)));
  padding-left: max(var(--gutter-left), calc(50vw - 632px + var(--gutter-left)));
}

@container app (min-width: 960px) and (min-width: 60em) {
  .screen.has-hero .hero-portrait {
    top: calc(env(safe-area-inset-top, 0px) + 64px + 6%);
    right: max(6%, calc(50vw - 632px + var(--gutter-right)));
  }

  .screen.has-hero .view[data-view="today"] .hero {
    padding-bottom: calc(clamp(24px, 5vw, 56px) + 40px);
  }
}

/* People: who's in the household and who's invited */
.settings-section .people-head {
  margin: 14px 2px 8px;
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.flow-message {
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--glass);
  box-shadow: inset 0 0 0 1px var(--glass-line);
  font-size: var(--u);
  line-height: 1.5;
  -webkit-user-select: text;
  user-select: text;
}

/* Pets: the switcher in the top bar opens an iOS-style pull-down menu */
.brand.pet-switch b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.brand .caret {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--muted);
}

.scrim.clear {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.pet-menu {
  position: fixed;
  z-index: 70;
  top: calc(env(safe-area-inset-top, 0px) + 60px);
  left: var(--gutter-left);
  display: grid;
  width: min(320px, calc(100vw - 32px));
  max-height: calc(100svh - 120px);
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--bg) 97%, transparent);
  box-shadow: var(--shadow-float), 0 0 0 1px var(--line);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  transform-origin: 24px 0;
}

.pet-menu.enter {
  animation: menu-in 0.28s var(--ease-out) both;
}

.pet-menu.leaving {
  animation: fade-out 0.2s ease both;
}

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

.pet-menu-item {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: var(--fg);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.pet-menu-item:hover,
.pet-menu-item:focus-visible {
  background: var(--surface-2);
  outline: none;
}

.pet-menu-item + .pet-menu-item[role="menuitem"] {
  margin-top: 6px;
  box-shadow: 0 -1px 0 var(--line);
  border-radius: 0 0 11px 11px;
}

/* The households, under a heading of their own, apart from the pets above them. */
.pet-menu-group {
  display: grid;
  margin-top: 6px;
  padding-top: 6px;
  box-shadow: 0 -1px 0 var(--line);
}

.pet-menu-head {
  margin: 4px 10px 2px;
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pet-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: none;
  place-items: center;
  border-radius: 999px;
  background: var(--glow-blue);
  color: var(--white);
  font: var(--w-semibold) calc(0.9375 * var(--u-capped)) var(--f-label);
}

.pet-avatar.add {
  background: var(--surface-2);
  color: var(--fg);
}

.pet-avatar .i {
  width: 18px;
  height: 18px;
}

/* A name as long as it is, wrapping, and as wide as it needs before the row's buttons share its line. */
.pet-menu-text,
.pet-list-text {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 2px;
}

.pet-menu-text b,
.pet-list-text b {
  font: var(--w-semibold) var(--u) var(--f-label);
  overflow-wrap: anywhere;
}

.pet-menu-text small,
.pet-list-text small {
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  overflow-wrap: anywhere;
}

.pet-check {
  display: grid;
  width: 22px;
  flex: none;
  place-items: center;
  color: var(--accent);
}

.pet-list {
  display: grid;
  margin: 0;
  padding: 0;
  gap: 8px;
  list-style: none;
}

.pet-list li {
  display: flex;
  min-height: 60px;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 18px;
  background: var(--bg);
}

.pet-showing {
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-semibold);
}

.archived-pets summary {
  min-height: 44px;
  padding: 12px 2px;
  color: var(--muted);
  cursor: pointer;
  font-size: calc(0.875 * var(--u));
  font-weight: var(--w-semibold);
}

.archived-pets .pet-list {
  margin-top: 4px;
}

/* Motion */
@keyframes hero-scroll {
  to {
    translate: 0 var(--hero-scroll, 0px);
  }
}

@keyframes drift {
  from {
    scale: 1;
    translate: 0 0;
  }

  to {
    scale: 1.06;
    translate: var(--dx, 18px) var(--dy, -14px);
  }
}

@keyframes settle {
  from {
    filter: blur(20px);
    opacity: 0;
    rotate: calc(var(--r, 0deg) - 80deg);
    scale: 0.35;
  }

  to {
    filter: blur(0);
    opacity: 1;
    rotate: var(--r, 0deg);
    scale: 1;
  }
}

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

@keyframes rise {
  from {
    filter: blur(10px);
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    filter: none;
    opacity: 1;
    transform: none;
  }
}

@keyframes view-in {
  from {
    filter: blur(6px);
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    filter: none;
    opacity: 1;
    transform: none;
  }
}

@keyframes heart-in {
  from {
    opacity: 0;
    scale: 0.2;
  }

  60% {
    scale: 1.2;
  }
}

@keyframes ring-in {
  from {
    stroke-dashoffset: 276.46;
  }
}

@keyframes bob {
  50% {
    translate: 0 -10px;
  }
}

@keyframes pulse {
  50% {
    opacity: 0.35;
    transform: scale(0.8);
  }
}

@keyframes pop {
  50% {
    transform: scale(1.1);
  }
}

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

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

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

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

@keyframes sheet-pop {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
}

@keyframes sheet-unpop {
  to {
    opacity: 0;
    transform: translateY(16px) scale(0.97);
  }
}

@keyframes reveal {
  from {
    clip-path: circle(0 at var(--ox, 50%) var(--oy, 100%));
  }

  to {
    clip-path: circle(160vmax at var(--ox, 50%) var(--oy, 100%));
  }
}

@keyframes reveal-out {
  from {
    clip-path: circle(160vmax at var(--ox, 50%) var(--oy, 100%));
  }

  to {
    clip-path: circle(0 at var(--ox, 50%) var(--oy, 100%));
  }
}

@keyframes unfold-row {
  from {
    filter: blur(6px);
    opacity: 0;
    transform: translateX(-24px) scaleX(0.94);
    transform-origin: 0 50%;
  }

  to {
    filter: none;
    opacity: 1;
    transform: none;
  }
}

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

@keyframes grow {
  from {
    transform: scaleY(0);
  }
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes dot-in {
  from {
    transform: scale(0);
  }
}

@keyframes trace {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 24;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes breath {
  50% {
    opacity: 0.55;
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-delay: 0s !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
}

/* Without motion, what comes in to be read or tapped is simply there. Cut short as above, an entrance can still
   leave it where its first frame put it until something else on the page changes: WebKit kept a sheet below the
   screen for two seconds that way, and the same would leave the timer clipped to nothing, a page see-through or a
   chart's bars flat. Each of these ends as the element already is, so nothing is lost. */
@media (prefers-reduced-motion: reduce) {
  .loading-screen .mark,
  .scrim.enter,
  .sheet.enter,
  .focus.enter,
  .focus-in.enter,
  .pet-menu.enter,
  .action-scrim,
  .action-sheet,
  .view.enter,
  .boot .rise,
  .boot .heart.earned,
  .boot .ring .val,
  .unfold .medication-row,
  .timeline-item-body,
  .handover-card.unfolding > .handover-body,
  .timer-pill,
  .chart .trend-line,
  .chart .avg-line,
  .chart .trend-area,
  .chart .grow-x,
  .chart .pop,
  .ms-days i,
  .milestone .ring-value,
  .race-row i,
  .episode-dots i,
  .dstatus.given .dmark path {
    animation: none;
  }
}

.yesterday-doses {
  justify-self: start;
}

/* Chips answering one question in a form, under a label like the other fields'. */
.chip-field {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.chip-field legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--muted);
  font-size: calc(0.8125 * var(--u));
  font-weight: var(--w-medium);
}

/* The seven days for a medicine given on certain days, one equal column each. */
.weekday-chips {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.weekday-chips .text-chip {
  justify-content: center;
  min-height: 44px;
  padding: 0;
}

/* How often fills the row, and shares it with Days apart when that shows. */
.setup-repeat {
  display: flex;
  gap: 10px;
}

.setup-repeat > .field {
  flex: 1 1 0;
  min-width: 0;
}

.weekday-chips[hidden],
.setup-repeat [hidden] {
  display: none;
}

/* A medicine's times on its page: each a label and a time, removed from the end of its row, then Add a Time. */
.setup-time {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px;
  align-items: end;
}

.setup-time .flow-remove {
  margin: 0 0 4px;
}

/* At the accessibility text sizes a time's label takes the row, and the time and Remove the row under it. */
@container app (max-width: 17em) {
  .setup-time {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .setup-time > .field:has([data-time-label]) {
    grid-column: 1 / -1;
  }
}

.setup-times [data-add-time] {
  justify-self: start;
}

/* Rows not in use, Remove while only one is, Add a Time once there are six, and every time for When needed. */
.setup-times[hidden],
.setup-time[hidden],
.setup-time [data-remove-time][hidden],
.setup-times [data-add-time][hidden] {
  display: none;
}

/* iOS's display settings. The iPhone app puts a class on the page for each one that's on, before the page draws
   anything, and changes it as the setting changes (ios/Quillpaw/DisplaySettings.swift); a browser has the two it can
   ask for. The Text Size reaches the page by itself. */

/* Bold Text: every weight heavier, as iOS's own text is. */
:root.bold-text {
  --w-regular: 600;
  --w-medium: 650;
  --w-semibold: 700;
}

/* Increase Contrast: smaller and quieter words nearly as dark as the body text, and lines and the edges of fields
   clearer, in light and dark. On the colour fields the words are all white or ink, glass has a clear edge, and the
   blue and berry fields are a shade deeper, so white words stand out on every part of them. */
:root.increase-contrast {
  --muted: #3e4b55;
  --on-white-muted: #3e4b55;
  --placeholder: #4f5c66;
  --line: #a3b2bc;
  --field-line: #5a6a75;
  --accent: #2b5874;
  --chart: #3c7494;
  --ok: #165c39;
  --warn: #6b4500;
  --bad: #8f1a12;
  --rose: #8c1230;
  --focus-ring: rgba(43, 88, 116, 0.6);
  --on-color-muted: var(--white);
  --on-color-line: rgba(255, 255, 255, 0.6);
  --glass-line: rgba(255, 255, 255, 0.75);
  --glow-blue: radial-gradient(120% 100% at 68% 38%, #3c7494 0%, #2f6383 46%, #24506c 100%);
  --glow-berry: radial-gradient(110% 90% at 50% 42%, #ac1c3c 0%, #8c1230 55%, #6e0d25 100%);
}

@media (prefers-color-scheme: dark) {
  :root.increase-contrast {
    --muted: #bcc8d0;
    --placeholder: #a6b3bc;
    --line: #4b5b66;
    --field-line: #8595a1;
    --accent: #a9cbe0;
    --chart: #a9cbe0;
    --ok: #84dcab;
    --warn: #f8d683;
    --bad: #ffb0a6;
    --rose: #ffb1c0;
    --focus-ring: rgba(169, 203, 224, 0.6);
  }
}

:root.increase-contrast .screen.hero-blue {
  --hero-edge: #2a5a78;
}

:root.increase-contrast .screen.hero-berry {
  --hero-edge: #81102c;
}

:root.increase-contrast .hero.glow-yellow {
  --on-muted: rgba(20, 20, 20, 0.9);
  --on-line: rgba(20, 20, 20, 0.45);
  --hero-glass-line: rgba(20, 20, 20, 0.4);
}

:root.increase-contrast :is(.nav-btn:not([aria-current="page"]), .hl-berry .hl-text span) {
  color: var(--white);
}

:root.increase-contrast :is(.hl-yellow .hl-text span, .tone-yellow .field > label) {
  color: var(--ink);
}

/* Words made quieter by fading them, at full strength. */
:root.increase-contrast :is(.chip small, .routine-card header small, .ring > span small, .routine-card footer p,
  .stepper .unit, .menu-tile p, .routine-switch button, .routine-days button, .routine-sub, .recording-as,
  .routine-sheet .fine, .dmeta, .dstatus.assumed, .dose-time-label, .dsync, .undo, .timer-pill .return,
  .topbar.on-hero .brand small) {
  opacity: 1;
}

:root.increase-contrast :is(.on-color, .flow-step) ::placeholder {
  color: rgba(255, 255, 255, 0.75);
}

:root.increase-contrast .tone-yellow ::placeholder {
  color: rgba(20, 20, 20, 0.7);
}

/* Reduce Transparency: the bars, menus and cards that float over the page solid, with nothing showing or blurred
   through them, and nothing blurred behind a sheet. */
:root.reduce-transparency :is(.topbar:not(.on-hero), .pet-menu) {
  background: var(--bg);
}

:root.reduce-transparency .topbar.on-hero.scrolled {
  background: var(--hero-edge);
}

:root.reduce-transparency .tabbar-in {
  background: var(--blue-deep);
}

:root.reduce-transparency .float-card {
  background: var(--white);
}

:root.reduce-transparency .screen.login-screen {
  --card: var(--white);
}

:root.reduce-transparency :is(.topbar, .pet-menu, .tabbar-in, .float-card, .login-moment, .scrim, .action-scrim) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}