/* ==========================================================================
   Vetto app — Setup & Account (S1–S6), mobile first.
   The design canvas wraps each screen in an iPhone bezel; a real app doesn't,
   so the bezel is replaced by viewport-height screens + safe-area insets.
   ========================================================================== */

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

/* `hidden` hides an element only through the UA rule `[hidden] { display: none }`,
   which any class setting `display` outranks — and .fab, .flag-strip and
   .icon-btn all set display: flex. Three elements the code had explicitly
   hidden went on rendering because of it. The attribute is a statement about
   whether a thing exists for the user, so it outranks layout: it wins here
   rather than being patched per class, which is how .viewer[hidden] below
   came to be. */
[hidden] { display: none !important; }

:root {
  /* Insets: real device safe areas, with a sane floor for desktop browsers. */
  --app-top: max(env(safe-area-inset-top), 14px);
  --app-bottom: max(env(safe-area-inset-bottom), 20px);
  --app-gutter: var(--vetto-gutter-mobile);
  /* Warm hairline used between rows inside a container card. */
  --app-divider: #e4d8c6;
  --tabbar-h: 0px;
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--vetto-canvas);
  color: var(--vetto-on-surface);
  font-family: var(--vetto-font-sans);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  /* Native feel: no grey tap flash, no iOS font inflation in landscape. */
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img { display: block; max-width: 100%; -webkit-touch-callout: none; }
/* Chrome (buttons, bars, chips) can't be text-selected the way it can't be
   in a native app; reading text stays selectable — only controls opt out. */
button, .appbar, .tabbar, .chip, .segmented { -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; margin: 0; }
input { font: inherit; color: inherit; }

/* --- shell --------------------------------------------------------------- */

.app {
  position: relative;
  height: 100dvh;
  max-height: 100dvh;
  background: var(--vetto-surface);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Desktop: the app is a phone-shaped column on the marketing canvas. */
@media (min-width: 600px) {
  body { display: grid; place-items: center; padding: 24px; }
  .app {
    width: 402px;
    height: min(874px, calc(100dvh - 48px));
    border-radius: 44px;
    box-shadow: 0 40px 80px rgba(58, 39, 13, 0.18), 0 0 0 1px rgba(58, 39, 13, 0.08);
  }
  :root { --app-top: 24px; --app-bottom: 24px; }
}

/* One screen is visible at a time and takes whatever height the tab bar
   leaves behind — never 100%, or it would push the tab bar off-screen. */
.screen {
  display: none;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding-top: var(--app-top);
}
.screen.is-active { display: flex; }
/* Screens ease in like a pushed view; display toggling can't transition, so
   the entering screen runs a one-shot animation instead, shaped by router.js
   via [data-enter]: a fast crossfade between tabs, a fuller push everywhere
   else (opening a record, entering capture, going back). */
.screen.is-active[data-enter="fade"] { animation: screen-enter-fade var(--vetto-duration-quick) var(--vetto-ease-standard); }
.screen.is-active[data-enter="push"] { animation: screen-enter-push var(--vetto-duration-short) var(--vetto-ease-emphasized-decel); }
@keyframes screen-enter-fade { from { opacity: 0; } }
@keyframes screen-enter-push { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .screen.is-active[data-enter] { animation: none; } }

.screen__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 var(--app-gutter);
}
.screen__scroll::after { content: ""; display: block; height: 24px; }

.screen__footer {
  flex: none;
  padding: 14px var(--app-gutter) var(--app-bottom);
  background: linear-gradient(to top, var(--vetto-surface) 62%, rgba(253, 248, 242, 0));
}

/* --- app bar ------------------------------------------------------------- */

.appbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 4px;
  min-height: 56px;
}
.appbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.appbar__step {
  font: 500 12.5px / 1 var(--vetto-font-sans);
  letter-spacing: 0.06em;
  color: var(--vetto-outline);
  font-variant-numeric: var(--vetto-numeric-tabular);
}
.appbar__spacer { width: 48px; flex: none; }

.icon-btn {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: var(--vetto-shape-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--vetto-duration-quick) var(--vetto-ease-standard);
}
.icon-btn:hover { background: var(--vetto-surface-container-high); }
.icon-btn:active { transform: scale(var(--vetto-press-scale)); }

/* --- type ---------------------------------------------------------------- */

.title-xl {
  font: 400 clamp(30px, 8.5vw, 38px) / 1.04 var(--vetto-font-sans);
  letter-spacing: -0.025em;
  margin: 0 0 12px;
}
.title-lg {
  font: 400 clamp(28px, 8vw, 34px) / 1.04 var(--vetto-font-sans);
  letter-spacing: -0.02em;
  margin: 0;
}
.title-md {
  font: 400 clamp(26px, 7.5vw, 32px) / 1.06 var(--vetto-font-sans);
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.body { margin: 0; font: 400 14.5px / 1.5 var(--vetto-font-sans); color: var(--vetto-on-surface-variant); }
.caption { margin: 0; font: 400 12px / 1.5 var(--vetto-font-sans); color: var(--vetto-outline); }
.overline {
  font: 500 11.5px / 1 var(--vetto-font-sans);
  letter-spacing: var(--vetto-tracking-overline);
  text-transform: uppercase;
  color: var(--vetto-outline);
}
/* !important, and it earns it: the `font:` shorthand resets font-variant-numeric
   to normal, and almost every rule below sets one. Without this the class lost
   to every later `font:` — dates, doses and lab values were all rendering
   proportional while carrying the class that says they do not. */
.tnum { font-variant-numeric: var(--vetto-numeric-tabular) !important; }

/* --- brand --------------------------------------------------------------- */

.cookie {
  background: var(--vetto-primary-container);
  border-radius: var(--vetto-shape-cookie);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  flex: none;
  position: relative;
}
.cookie.-alt { border-radius: var(--vetto-shape-cookie-alt); }
.cookie img { image-rendering: pixelated; height: auto; }
/* A user-chosen photo fills the shape instead of sitting in it. */
.cookie.-photo img {
  image-rendering: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.brandmark { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.brandmark__name {
  font: 600 22px / 1 var(--vetto-font-sans);
  letter-spacing: -0.015em;
  color: var(--vetto-primary);
}

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

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: var(--vetto-cta-height);
  border-radius: var(--vetto-shape-cta);
  font: 500 16px var(--vetto-font-sans);
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--vetto-duration-quick) var(--vetto-ease-standard),
    filter var(--vetto-duration-short) var(--vetto-ease-standard);
}
.btn:active { transform: scale(var(--vetto-press-scale)); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn.-filled {
  background: var(--vetto-primary);
  color: var(--vetto-on-primary);
  box-shadow: var(--vetto-elevation-3);
}
.btn.-tonal {
  background: var(--vetto-secondary-container);
  color: var(--vetto-on-primary-container);
}
.btn.-tonal:hover { filter: brightness(0.97); }
.btn.-tonal.-danger { color: var(--vetto-error); }
/* Demoted since swipe-to-delete became the primary path: a quiet text
   button, not a full-width slab. */
#record-delete-open { background: none; height: 44px; font-size: 14px; align-self: center; }
.btn.-filled.-danger { background: var(--vetto-error); color: var(--vetto-on-error); }

.btn-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  font: 500 13.5px var(--vetto-font-sans);
  color: var(--vetto-primary);
  cursor: pointer;
}

.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; height: 60px; font-size: 15px; }

.chip {
  height: 40px;
  padding: 0 16px;
  border-radius: var(--vetto-shape-full);
  border: 1px solid var(--vetto-outline-variant);
  background: transparent;
  color: var(--vetto-on-primary-container);
  font: 500 13.5px var(--vetto-font-sans);
  cursor: pointer;
  transition: background var(--vetto-duration-quick) var(--vetto-ease-standard);
}
.chip:hover { background: var(--vetto-surface-container-high); }
.chip.-sm { height: 38px; font-size: 13px; }
.chip[aria-pressed="true"] {
  background: var(--vetto-primary);
  border-color: var(--vetto-primary);
  color: var(--vetto-on-primary);
}
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

.pill {
  height: 44px;
  padding: 0 18px;
  border-radius: var(--vetto-shape-full);
  background: var(--vetto-surface-container-high);
  color: var(--vetto-on-primary-container);
  font: 500 13.5px var(--vetto-font-sans);
  cursor: pointer;
}
.pill.-sm { height: 36px; padding: 0 14px; font-size: 12.5px; background: var(--vetto-on-primary); color: #5a3b0a; }

/* --- fields -------------------------------------------------------------- */

.fieldset {
  background: var(--vetto-surface-container);
  border-radius: var(--vetto-shape-2xl);
  padding: 8px;
  margin-bottom: 10px;
}

.field {
  padding: 14px 16px 12px;
  border-radius: 22px;
  background: var(--vetto-surface);
  display: block;
  cursor: text;
}
.field + .field { margin-top: 6px; }
.field.-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.field:focus-within { outline: 2px solid var(--vetto-primary); outline-offset: -2px; }

.field__label {
  display: block;
  font: 500 11.5px / 1 var(--vetto-font-sans);
  letter-spacing: 0.06em;
  color: var(--vetto-primary);
  margin-bottom: 7px;
}
.field__input {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  /* 16px is the iOS floor below which focusing a field zooms the page. */
  font: 400 16px / 1.2 var(--vetto-font-sans);
  outline: none;
}
.field__input::placeholder { color: var(--vetto-outline); }
.field__input[type="password"] { letter-spacing: 0.2em; font-size: 17px; }

.note {
  background: var(--vetto-surface-container);
  border-radius: var(--vetto-shape-2xl);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.note span { flex: 1; font: 400 12.5px / 1.45 var(--vetto-font-sans); color: var(--vetto-on-primary-container); }
.note svg { flex: none; }

/* --- cards & rows -------------------------------------------------------- */

.card {
  background: var(--vetto-surface-container);
  border-radius: var(--vetto-shape-2xl);
  overflow: hidden;
  margin-bottom: 10px;
}
.card.-accent { background: var(--vetto-primary-container); color: var(--vetto-on-primary-container); }
.card.-pad { padding: 18px 20px; }

.card__section { padding: 16px 20px; }
.card__section + .card__section { border-top: 1px solid var(--app-divider); }
.card__section .overline { display: block; margin-bottom: 9px; }
.card__lines {
  font: 400 15px / 1.6 var(--vetto-font-sans);
  font-variant-numeric: var(--vetto-numeric-tabular);
}

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 17px 20px;
  text-align: left;
  cursor: pointer;
}
.row + .row { border-top: 1px solid var(--app-divider); }
/* every tappable row answers the finger */
button.row:active, a.row:active { background: var(--vetto-surface-variant, rgba(0,0,0,.06)); }
a.row { color: inherit; text-decoration: none; }
.row__label { flex: 1; font: 400 15px var(--vetto-font-sans); }
.row__meta { font: 400 12.5px var(--vetto-font-sans); color: var(--vetto-on-surface-variant); }
.row svg { flex: none; }
.row__select {
  border: 0;
  background: none;
  font: 400 14px var(--vetto-font-sans);
  color: var(--vetto-on-surface-variant);
  padding: 8px 4px;
  min-height: var(--vetto-target-min);
  cursor: pointer;
}

/* --- switch -------------------------------------------------------------- */

.switch {
  width: 52px;
  height: 32px;
  flex: none;
  border-radius: var(--vetto-shape-md);
  background: var(--vetto-outline-variant);
  padding: 4px;
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: background var(--vetto-duration-short) var(--vetto-ease-standard);
}
.switch::after {
  content: "";
  width: 24px;
  height: 24px;
  border-radius: var(--vetto-shape-sm);
  background: var(--vetto-surface-bright);
  transition: transform var(--vetto-duration-short) var(--vetto-ease-spring);
}
.switch[aria-checked="true"] { background: var(--vetto-primary); }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: var(--vetto-on-primary); }

/* --- S1 sign in ---------------------------------------------------------- */

.forgot { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.forgot button {
  height: 40px;
  padding: 0 14px;
  border-radius: var(--vetto-shape-lg);
  font: 500 13px var(--vetto-font-sans);
  color: var(--vetto-primary);
  cursor: pointer;
}

/* on-surface-variant, not outline: 11.5px text on cream needs the darker
   role to clear 4.5:1. The links are underlined because color alone cannot
   mark them for everyone. */
.legal { margin: 0; font: 400 11.5px / 1.5 var(--vetto-font-sans); color: var(--vetto-on-surface-variant); }
.legal a { color: var(--vetto-primary); text-decoration: underline; text-underline-offset: 2px; }

/* --- S2 create pet ------------------------------------------------------- */

.portrait { display: flex; justify-content: center; margin-bottom: 20px; }
.portrait .cookie { width: 124px; height: 124px; }
.portrait__shoot {
  position: absolute;
  right: 2px;
  bottom: 6px;
  width: 40px;
  height: 40px;
  border-radius: var(--vetto-shape-md);
  background: var(--vetto-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
}

/* --- S3 search ----------------------------------------------------------- */

.searchbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--vetto-field-height);
  margin: 12px var(--app-gutter) 14px;
  padding: 0 18px;
  border-radius: var(--vetto-shape-2xl);
  background: var(--vetto-surface-container-high);
}
.searchbar input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  outline: none;
  font: 400 16px / 1 var(--vetto-font-sans); /* iOS zoom floor, as above */
}
.searchbar input::placeholder { color: var(--vetto-outline); }
.searchbar .icon-btn { width: 28px; height: 28px; }

.empty { padding: 32px 4px; text-align: center; }

/* --- S4 at the vet ------------------------------------------------------- */

.pet-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.pet-head .cookie { width: 64px; height: 64px; }
.pet-head p { margin: 4px 0 0; font: 400 12.5px / 1.35 var(--vetto-font-sans); color: var(--vetto-on-surface-variant); }

.vet-patient .overline { display: block; margin-bottom: 10px; }
.vet-patient .pet-head { margin: 0; }

/* --- S5 account ---------------------------------------------------------- */

.account-head {
  display: flex;
  gap: 15px;
  align-items: center;
  width: 100%;
  padding: 18px 20px;
  text-align: left;
  cursor: pointer;
}
.avatar {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: var(--vetto-shape-lg);
  background: var(--vetto-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 20px var(--vetto-font-sans);
  color: #5a3b0a;
}
.account-head__name { display: block; font: 500 18px / 1.25 var(--vetto-font-sans); margin-bottom: 4px; }
.account-head__mail { display: block; font: 400 12.5px / 1.4 var(--vetto-font-sans); color: var(--vetto-on-surface-variant); }

.pet-card { display: flex; gap: 14px; align-items: center; padding: 18px 20px; }
.pet-card .cookie { width: 52px; height: 52px; border-radius: var(--vetto-shape-lg); background: var(--vetto-on-primary); }
.pet-card__name { display: block; font: 500 17px / 1.25 var(--vetto-font-sans); color: var(--vetto-on-primary-container); margin-bottom: 3px; }
.pet-card__meta {
  display: block;
  font: 400 12px / 1.4 var(--vetto-font-sans);
  color: var(--vetto-on-surface-variant);
  font-variant-numeric: var(--vetto-numeric-tabular);
}

/* ── account: section kickers, row chevrons ───────────────────────────── */
.screen-kicker { display: block; margin: 16px 6px 8px; }
.screen-kicker.-first { margin-top: 0; }

/* --- S6 sign-out sheet --------------------------------------------------- */

.sheet-host {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: none;
}
.sheet-host.is-open { display: block; }

.scrim {
  position: absolute;
  inset: 0;
  background: var(--vetto-scrim);
  animation: fade var(--vetto-duration-short) var(--vetto-ease-standard);
}

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 92%;
  overflow-y: auto;
  background: var(--vetto-surface);
  border-radius: var(--vetto-shape-sheet);
  padding: 14px var(--vetto-space-6) var(--app-bottom);
  animation: rise var(--vetto-duration-medium) var(--vetto-ease-emphasized-decel);
}
.sheet__grab {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--vetto-outline-variant);
  margin: 0 auto 22px;
}
.sheet .cookie { width: 76px; height: 76px; margin-bottom: 20px; }
.sheet h2 {
  font: 400 clamp(24px, 7vw, 28px) / 1.1 var(--vetto-font-sans);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.sheet p { margin: 0 0 20px; font: 400 14.5px / 1.55 var(--vetto-font-sans); color: var(--vetto-on-surface-variant); }
.install-steps {
  margin: 0 0 20px;
  padding-left: 22px;
  font: 400 14.5px / 1.55 var(--vetto-font-sans);
  color: var(--vetto-on-surface-variant);
}
.install-steps li + li { margin-top: 8px; }

.sheet__fact {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 16px;
  border-radius: var(--vetto-shape-lg);
  background: var(--vetto-primary-container);
  margin-bottom: 22px;
  font: 400 12.5px / 1.45 var(--vetto-font-sans);
  color: var(--vetto-on-primary-container);
  font-variant-numeric: var(--vetto-numeric-tabular);
}

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(100%); } }

/* --- tab bar ------------------------------------------------------------- */

.tabbar {
  flex: none;
  display: none;
  align-items: center;
  margin: 6px 14px calc(var(--app-bottom) - 4px);
  padding: 0 6px;
  border: 1px solid var(--app-divider);
  background: var(--vetto-surface);
  border-radius: var(--vetto-shape-full);
  box-shadow: var(--vetto-elevation-2);
}
.app.-tabs .tabbar { display: flex; }

/* The one action Vetto exists for sits raised out of the bar's top edge. */
.tabfab {
  flex: none;
  width: 58px;
  height: 58px;
  margin: -16px 4px 10px;
  border-radius: var(--vetto-shape-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--vetto-primary);
  color: var(--vetto-on-primary);
  box-shadow: var(--vetto-elevation-3);
  cursor: pointer;
}

.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 62px;
  padding: 7px 0 6px;
  font: 500 11px var(--vetto-font-sans);
  color: var(--vetto-on-surface-variant);
  cursor: pointer;
}
.tab[aria-selected="true"] { color: var(--vetto-primary); }
.tab__dot {
  width: 40px;
  height: 26px;
  border-radius: var(--vetto-shape-full);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--vetto-duration-short) var(--vetto-ease-standard),
    transform var(--vetto-duration-quick) var(--vetto-ease-spring);
}
.tab[aria-selected="true"] .tab__dot { background: var(--vetto-primary-container); }
.tab:active .tab__dot { transform: scale(var(--vetto-press-scale)); }

/* --- S7 medications ------------------------------------------------------- */

.med-track__sub {
  display: block;
  font: 400 12.5px var(--vetto-font-sans);
  color: var(--vetto-on-surface-variant);
}

.med-card { display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; border: none; font: inherit; color: inherit; cursor: pointer;
  margin-bottom: 10px; }
.med-card:active { background: var(--vetto-surface-variant, rgba(0,0,0,.06)); }
.med-card__tick { width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  border: 2px solid var(--vetto-outline); background: transparent; }
.med-card.-taken .med-card__tick { background: var(--vetto-primary);
  border-color: var(--vetto-primary); color: var(--vetto-on-primary); }
.meds-link { border: none; background: none; font: inherit; cursor: pointer;
  color: var(--vetto-primary); padding: 0; min-height: 44px; width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 20px; font-weight: 500; }
.meds-link:active { background: var(--vetto-surface-variant, rgba(0,0,0,.06)); }

/* The invite-code field, in the app's own shape language — it was the one
   sharp-cornered bare rectangle in the product. */
.code-input {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  letter-spacing: .35em;
  font: 600 22px var(--vetto-font-sans);
  color: var(--vetto-on-surface);
  background: var(--vetto-surface);
  border: 1.5px solid var(--vetto-outline, #9c8f80);
  border-radius: 18px;
  padding: 14px 10px;
  margin: 10px 0 6px;
}
.code-input:focus {
  outline: none;
  border-color: var(--vetto-primary);
  box-shadow: 0 0 0 3px var(--vetto-primary-container);
}
.med-card__name { display: block; font: 500 15px var(--vetto-font-sans); color: var(--vetto-on-surface); }
.med-card.-taken .med-card__name { text-decoration: line-through; color: var(--vetto-on-surface-variant); }
/* --- utility ------------------------------------------------------------- */

.spacer-sm { height: 40px; }
.grow { flex: 1; min-width: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 3px solid var(--vetto-primary); outline-offset: 2px; border-radius: var(--vetto-shape-xs); }

/* Focus is parked on the screen heading when the screen changes, to move the
   reading position. That is not a keyboard landmark, so it gets no ring. */
.screen:focus, .screen h1:focus { outline: none; }

/* The design draws its own clear and calendar affordances; drop the browser's
   so they don't sit side by side. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-inner-spin-button { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- C1 empty home -------------------------------------------------------- */
.title-c1 {
  margin: 0 0 12px;
  font: 400 34px / 1.06 var(--vetto-font-sans);
  letter-spacing: -0.02em;
  color: var(--vetto-on-surface);
}
/* The empty record used to sit at the top of a tall blank screen; centered,
   the illustration and the invitation read as one composed page. */
#records-empty {
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#records-empty .portrait .cookie { width: 120px; height: 120px; }

/* --- C2 the archive: stats strip and year-books --------------------------- */

/* The one serif in the app, and only where a book cover earns it: the year
   numerals and the stat figures. System faces, so nothing ships or loads. */
.records-stats { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 10px; margin: 14px 0 4px; }
.stat {
  background: var(--vetto-surface-container);
  border-radius: var(--vetto-shape-md);
  padding: 10px 12px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stat__num {
  font: 600 17px/1.2 Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  color: var(--vetto-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat__label { font: 400 10.5px/1.3 var(--vetto-font-sans); color: var(--vetto-on-surface-variant); }

.books-head { display: flex; align-items: baseline; justify-content: space-between; margin: 18px 2px 2px; }

/* A closed book on the shelf: deep cover drawn from the app's own tonal
   families, the pet's name down the spine, pages stacked along the right
   edge, and the count chip where the Figma put it. */
.year-book {
  position: relative;
  display: block;
  width: 100%;
  border: none;
  text-align: left;
  cursor: pointer;
  border-radius: var(--vetto-shape-lg);
  margin: 12px 0 0;
  padding: 18px 20px 16px 46px;
  min-height: 118px;
  color: #fdf8f2;
  overflow: hidden;
  box-shadow: 0 10px 22px -14px rgba(76, 61, 42, 0.55);
}
.year-book:active { transform: scale(var(--vetto-press-scale)); }
/* The tooled frame: a single blind-stamped rule inset on the board, the way
   bound volumes carry one. Skips the spine and stops shy of the page block. */
.year-book::before {
  content: '';
  position: absolute;
  inset: 9px 24px 9px 42px;
  border: 1px solid rgba(253, 248, 242, 0.16);
  border-radius: 10px;
  pointer-events: none;
}
.year-book.-c0 { background: #47563d; } /* the vaccine family's deep green */
.year-book.-c1 { background: #6b5b48; } /* secondary's leather brown */
.year-book.-c2 { background: #5a4a7d; } /* the lab family's violet */
.year-book.-c3 { background: #7d5411; } /* primary's dark gold */
/* The page block: a pale edge with the leaves ruled onto it. */
.year-book::after {
  content: '';
  position: absolute;
  top: 5px;
  right: 0;
  bottom: 5px;
  width: 14px;
  border-radius: 0 var(--vetto-shape-lg) var(--vetto-shape-lg) 0;
  background: repeating-linear-gradient(to right,
    #f4ecdf 0 2px, #e2d7c4 2px 3px);
}
.year-book__spine {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 500 9.5px/1 var(--vetto-font-sans);
  letter-spacing: 0.22em;
  color: rgba(253, 248, 242, 0.75);
  border-left: 1px solid rgba(253, 248, 242, 0.28); /* the hinge (flipped with the text) */
  background: rgba(0, 0, 0, 0.10);
}
.year-book__num {
  display: block;
  font: 600 40px/1 Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  letter-spacing: 0.01em;
  /* Pressed into the leather, not printed on it. */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28), 0 -1px 0 rgba(253, 248, 242, 0.14);
}
.year-book__chip {
  position: absolute;
  left: 46px;
  bottom: 14px;
  font: 500 11.5px/1 var(--vetto-font-sans);
  padding: 6px 10px;
  border-radius: var(--vetto-shape-full);
  background: rgba(253, 248, 242, 0.22);
}
.year-book__arrow {
  position: absolute;
  right: 26px;
  bottom: 12px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(253, 248, 242, 0.22);
  transform: rotate(-90deg); /* pointing into the pages: tap to open the book */
}

/* --- C2b the open book ----------------------------------------------------- */

/* The year and its count ride in the app bar beside the back arrow, so the
   open book gets every pixel below it. */
.book-head { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.book-head__spacer { width: 48px; flex: none; } /* balances the back button */
.book-title {
  margin: 0;
  text-align: center;
  font: 600 20px/1.1 Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  color: var(--vetto-on-surface);
  text-shadow: none;
}
.book-sub { text-align: center; margin: 1px 0 0; font-size: 11.5px; }

/* The notebook owns the screen: the scroll column stops scrolling and the
   desk flexes to every pixel between the title and the arrows, and the
   engine is told exactly that size at render. */
#book .screen__scroll {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 4px;
}
#book .screen__scroll::after { display: none; }
/* The desk: a warm wash the open book lies on. The spine crease runs down
   the middle, drawn over the leaves so a turning page passes under it. */
.book-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 -8px 4px;
  padding: 6px;
  border-radius: 22px;
  background:
    radial-gradient(120% 70% at 85% 100%, rgba(240, 168, 96, 0.55), transparent 60%),
    radial-gradient(90% 60% at 10% 90%, rgba(253, 213, 130, 0.5), transparent 60%),
    linear-gradient(180deg, #f3ebe0, #eadfcf);
}
#book-flip { width: 100%; }
.book-stage::after {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 50%;
  width: 34px;
  transform: translateX(-50%);
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to right,
    transparent, rgba(76, 61, 42, 0.10) 42%, rgba(76, 61, 42, 0.22) 50%, rgba(76, 61, 42, 0.10) 58%, transparent);
}

/* A leaf of the book: plain warm paper, rounded, lifted off the desk. */
.book-page {
  background: #fffdf8;
  border: none;
  border-radius: 12px;
  padding: 24px 10px 12px 10px;
  box-shadow: 0 10px 24px -14px rgba(76, 61, 42, 0.5), 0 0 0 1px rgba(107, 91, 72, 0.06);
  overflow: hidden;
}
.book-corner {
  position: absolute;
  top: 6px;
  left: 14px;
  font: 400 16px/1 var(--vetto-font-hand);
  color: var(--vetto-on-surface-variant);
  transform: rotate(-2deg);
}
.book-page.-blank { display: grid; place-items: center; }
.book-folio {
  position: absolute;
  right: 12px;
  bottom: 6px;
  font: 400 15px/1 var(--vetto-font-hand);
  color: var(--vetto-on-surface-variant);
}
/* The kind sticker on a card's corner, and the handwritten tag on the newest. */
.book-card__sticker {
  position: absolute;
  top: -9px;
  right: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px -1px rgba(76, 61, 42, 0.35);
  transform: rotate(9deg);
}
.book-card__note {
  position: absolute;
  top: -15px;
  left: 6px;
  font: 500 15px/1 var(--vetto-font-hand);
  color: #7d5411;
  transform: rotate(-5deg);
  white-space: nowrap;
}
.book-page .swipe { overflow: visible; }

/* The polaroid on page one: white border, soft shadow, a little askew. */
.polaroid {
  display: block;
  width: 68%;
  margin: 34px auto 0;
  padding: 10px 10px 8px;
  background: #fffdf8;
  box-shadow: 0 8px 18px -10px rgba(76, 61, 42, 0.55);
  transform: rotate(-2.5deg);
}
.polaroid img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.polaroid img.-photo { image-rendering: auto; aspect-ratio: 1; object-fit: cover; }
.polaroid__caption {
  display: block;
  text-align: center;
  padding-top: 4px;
  font: 500 20px/1.2 var(--vetto-font-hand);
  color: var(--vetto-on-surface);
}
/* The line under the photo, in the owner's hand. */
.book-note {
  display: block;
  margin: 26px auto 0;
  text-align: center;
  font: 400 21px/1.2 var(--vetto-font-hand);
  color: #7d5411;
  transform: rotate(-3deg);
}

/* A record taped into the book. The washi strip is the ::before. The swipe
   wrapper carries the placement so its delete under-surface sits exactly
   behind the card — never peeking out around it. */
.book-page .swipe { width: 100%; margin: 11px auto 0; overflow: visible; }
.book-page .swipe__under { border-radius: 5px; }
.book-card {
  position: relative;
  overflow: visible;
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 10px 8px;
  border: none;
  text-align: left;
  cursor: pointer;
  background: #fffdf8;
  border-radius: 5px;
  box-shadow: 0 5px 12px -8px rgba(76, 61, 42, 0.5);
  color: var(--vetto-on-surface);
}
.book-card:active { transform: scale(var(--vetto-press-scale)); }
.book-card.-accent { background: var(--vetto-primary-container); }
.book-card::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  width: 44px;
  height: 13px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(125, 84, 17, 0.16);
  border-left: 1px dashed rgba(253, 248, 242, 0.7);
  border-right: 1px dashed rgba(253, 248, 242, 0.7);
}
.book-card__date { display: flex; align-items: baseline; gap: 5px; }
.book-card__day { font: 600 15px/1 Georgia, 'Iowan Old Style', serif; }
.book-card__month { font: 500 8.5px/1 var(--vetto-font-sans); letter-spacing: 0.14em; color: var(--vetto-on-surface-variant); }
.book-card__title {
  display: block;
  margin-top: 3px;
  font: 500 12px/1.3 var(--vetto-font-sans);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.book-card__tags { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.book-card .kind-chip { font-size: 9.5px; padding: 3px 7px; }
.book-card__meta {
  font: 400 10px/1.2 var(--vetto-font-sans);
  color: var(--vetto-on-surface-variant);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
}

.book-nav { display: flex; align-items: center; justify-content: center; gap: 14px; }
.book-nav .icon-btn { width: 40px; height: 40px; }
.book-dots { display: flex; gap: 6px; }
.book-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--vetto-outline-variant, #d5c7b2);
}
.book-dot.-on { background: var(--vetto-primary); }

/* Sign-in's three-line what-happens-next, filling what was dead space. */
.signin-steps { display: flex; flex-direction: column; gap: 16px; margin-top: 38px; }
.signin-step {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--vetto-on-surface-variant);
  font: 400 15px var(--vetto-font-sans);
}
.signin-step__dot {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--vetto-primary-container);
  color: var(--vetto-primary);
}
#records .appbar .avatar {
  width: 44px;
  height: 44px;
  border-radius: 18px;
  font: 600 15px var(--vetto-font-sans);
  cursor: pointer;
  position: relative;
}
/* The design draws 44px; the house floor for a tap target is 48px. Grow what
   the thumb can hit without moving what the eye sees. */
#records .appbar .avatar::after {
  content: "";
  position: absolute;
  inset: -2px;
}

/* --- C2 record list ------------------------------------------------------- */
.pet-head.-c2 { margin-bottom: 8px; }
.pet-head.-c2 .cookie { width: 72px; height: 72px; }
.records-sync-hint { margin: 6px 2px 8px; }

.year { padding: 18px 4px 10px; }

.record-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
  color: var(--vetto-on-surface);
  transition: transform var(--vetto-duration-quick) var(--vetto-ease-standard);
}
.record-row:active { transform: scale(var(--vetto-press-scale)); background: var(--vetto-surface-variant, rgba(0,0,0,.06)); }
/* Rows inside one records card are divided; separate cards are not. */
#records-list .swipe + .swipe .swipe__row { border-top: 1px solid var(--app-divider); }

/* M3 swipe-to-dismiss: the row rides the finger; an error-container
   surface with a trailing delete glyph sits underneath. */
.swipe { position: relative; overflow: hidden; }
.swipe__under {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 22px;
  background: var(--vetto-error-container);
  color: var(--vetto-on-error-container);
}
.swipe__row {
  position: relative;
  background: var(--vetto-surface-container); /* matches .card, hides the under-surface */
  transition: transform var(--vetto-duration-short) var(--vetto-ease-standard);
  touch-action: pan-y; /* vertical scrolling stays native */
}
.swipe__row.is-dragging { transition: none; }
/* A medication is its own card, so the wrapper carries the card's shape and
   the gap below it — otherwise the red under-surface shows through the gap
   and the corners it should be clipped to. */
#meds-today .swipe {
  border-radius: var(--vetto-shape-2xl);
  margin-bottom: 10px;
}
#meds-today .med-card { margin-bottom: 0; }

/* The step actually under way, above the bar. It changes wording mid-wait
   ("Preparing page 2 of 3…" → "Reading… 24 s"), so it is a block of its own:
   a line that re-flows around the bar every few seconds reads as a glitch. */
.reading-stage { display: block; }

/* Something true to read while the sheet is being read. Caption-sized and
   muted on purpose: the stage line above it is the one that matters, and this
   is company, not information the owner has to act on. */
.reading-facts {
  display: block;
  margin-top: 12px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--vetto-on-surface-variant);
  opacity: 0;
  transition: opacity 220ms var(--vetto-ease-standard);
}
.reading-facts.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .reading-facts { transition: none; }
}

/* M3 determinate linear progress: a 4px rounded track under the label. */
.progress { display: block; }
.progress__track {
  display: block;
  height: 4px;
  border-radius: var(--vetto-shape-full);
  background: var(--vetto-surface-container-high);
  overflow: hidden;
  margin-top: 10px;
}
.progress__fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--vetto-primary);
  transition: width 250ms var(--vetto-ease-standard);
}
.swipe__row.-accent { background: var(--vetto-primary-container); }
.record-row.-accent { background: var(--vetto-primary-container); color: var(--vetto-on-primary-container); }

.record-row__tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--vetto-shape-md);
  background: var(--vetto-surface-container-high);
  color: var(--vetto-on-surface-variant);
}
.record-row.-accent .record-row__tile { background: var(--vetto-on-primary); color: var(--vetto-primary); }
.record-row__title { display: block; font: 500 16.5px / 1.3 var(--vetto-font-sans); margin-bottom: 4px; }
.record-row__meta { display: block; font: 400 12px / 1.4 var(--vetto-font-sans); color: var(--vetto-on-surface-variant); }
.record-row.-accent .record-row__meta { color: var(--vetto-on-primary-container); opacity: 0.78; }

/* ── record rows: date block, tinted kind tile, kind chip ─────────────── */
.record-row__date { width: 34px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.record-row__date-month { font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--vetto-outline); }
.record-row__date-day { font-size: 18px; font-weight: 600; line-height: 1.1; color: var(--vetto-on-secondary-container); }
.record-row__tags { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 3px; }
.record-row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kind-chip { flex: none; font-size: 11.5px; font-weight: 500; line-height: 1; padding: 4px 9px 5px; border-radius: 999px; }
.kind-chip.-appointment, .record-row__tile.-appointment { background: var(--vetto-kind-appointment-bg); color: var(--vetto-kind-appointment-fg); }
.kind-chip.-vaccine, .record-row__tile.-vaccine { background: var(--vetto-kind-vaccine-bg); color: var(--vetto-kind-vaccine-fg); }
.kind-chip.-lab, .record-row__tile.-lab { background: var(--vetto-kind-lab-bg); color: var(--vetto-kind-lab-fg); }
.kind-chip.-other, .record-row__tile.-other { background: var(--vetto-kind-other-bg); color: var(--vetto-kind-other-fg); }
/* The accented (newest) row inverts its tile; without this override the
   later, equal-specificity kind-tint rules above would win instead and the
   newest row's tile would stop reading as highlighted. */
.record-row.-accent .record-row__tile.-appointment,
.record-row.-accent .record-row__tile.-vaccine,
.record-row.-accent .record-row__tile.-lab,
.record-row.-accent .record-row__tile.-other { background: var(--vetto-on-primary); color: var(--vetto-primary); }

.fab {
  position: absolute;
  right: 20px;
  bottom: 114px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 64px;
  padding: 0 24px;
  border-radius: var(--vetto-shape-xl);
  background: var(--vetto-primary);
  color: var(--vetto-on-primary);
  font: 500 15.5px var(--vetto-font-sans);
  box-shadow: var(--vetto-elevation-3);
  cursor: pointer;
  transition: transform var(--vetto-duration-quick) var(--vetto-ease-standard);
}
.fab:active { transform: scale(var(--vetto-press-scale)); }

/* --- C6 the record -------------------------------------------------------- */
.title-c6 {
  margin: 12px 0 8px;
  font: 400 31px / 1.08 var(--vetto-font-sans);
  letter-spacing: -0.02em;
}
#record-subtitle { margin: 0 0 18px; font: 400 13px / 1.4 var(--vetto-font-sans); color: var(--vetto-on-surface-variant); }

.segmented { display: flex; gap: 6px; margin-bottom: 16px; }
.segmented__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  border-radius: var(--vetto-shape-xl);
  background: var(--vetto-surface-container-high);
  color: var(--vetto-on-surface-variant);
  font: 500 14.5px var(--vetto-font-sans);
  cursor: pointer;
  transition: transform var(--vetto-duration-quick) var(--vetto-ease-standard);
}
.segmented__item[aria-selected="true"] { background: var(--vetto-primary-container); color: var(--vetto-on-primary-container); }
.segmented__item:active { transform: scale(var(--vetto-press-scale)); }

#record-observed { font: 400 15px / 1.6 var(--vetto-font-sans); }
#pane-reading > .card { margin-bottom: 12px; }

.medicine { display: flex; align-items: center; gap: 14px; padding: 18px 20px; }
.medicine + .medicine { border-top: 1px solid var(--app-divider); }
.medicine__tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--vetto-shape-md);
  background: var(--vetto-primary-container);
  color: var(--vetto-on-primary-container);
}
/* A real prescription line is not a chip's worth of text: "1 раз на місяць до
   1 року, надалі 1 раз в 3 місяці" is a duration, and a rigid tag took the
   width for it out of the name beside it until the name wrapped one word per
   line. The tag may now shrink and wrap inside itself, and never takes more
   than its share of the row. */
.medicine > .grow { min-width: 0; }
.medicine__name {
  display: block;
  font: 500 17px / 1.25 var(--vetto-font-sans);
  margin-bottom: 3px;
  overflow-wrap: anywhere; /* a slash-joined brand list has no spaces to break at */
}
.medicine__dose { display: block; font: 400 12.5px / 1.4 var(--vetto-font-sans); color: var(--vetto-on-surface-variant); }
.medicine__tag {
  flex: 0 1 auto;
  max-width: 40%;
  display: grid;
  place-items: center;
  min-height: 32px;
  padding: 7px 12px;
  border-radius: var(--vetto-shape-md);
  background: var(--vetto-surface-container-high);
  font: 500 12.5px / 1.35 var(--vetto-font-sans);
  color: var(--vetto-on-surface-variant);
  text-align: center;
}
/* No duration, no chip — an empty pill reads as a control that lost its label. */
.medicine__tag:empty { display: none; }

/* One advice per paragraph only helps if the paragraphs are apart. */
#record-recommendations .body + .body,
#record-prescriptions .body + .body,
#record-vaccinations .body + .body { margin-top: 10px; }

.lab-row { display: flex; align-items: baseline; gap: 10px; padding: 13px 0; }
.lab-row + .lab-row { border-top: 1px solid var(--app-divider); }
.lab-row__name { flex: 1; font: 400 14.5px var(--vetto-font-sans); }
.lab-row__value { width: 76px; text-align: right; font: 500 14.5px var(--vetto-font-sans); }
.lab-row__range { width: 70px; text-align: right; font: 400 11.5px var(--vetto-font-sans); color: var(--vetto-on-surface-variant); }
.lab-row.-flagged { color: var(--vetto-primary); }
.lab-row.-flagged .lab-row__value { font-weight: 600; }

/* One examined body part per row: its name held on one line, what was found
   beside it. The area column is narrow on purpose — a scan down the left edge
   should answer "did they look at the kidneys?" without reading a word of the
   detail. Anything the sheet reports as outside normal carries the same accent
   a flagged lab does, so abnormal reads the same everywhere in the app. */
.finding-row { display: flex; gap: 12px; padding: 12px 0; }
.finding-row + .finding-row { border-top: 1px solid var(--app-divider); }
.finding-row__area {
  flex: 0 0 33%;
  max-width: 132px;
  font: 500 13.5px var(--vetto-font-sans);
  color: var(--vetto-on-surface-variant);
}
.finding-row__detail { flex: 1; font: 400 14.5px var(--vetto-font-sans); }
.finding-row.-flagged .finding-row__area,
.finding-row.-flagged .finding-row__detail { color: var(--vetto-primary); }
.finding-row.-flagged .finding-row__area { font-weight: 600; }

.flag-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--vetto-shape-lg);
  background: var(--vetto-primary-container);
  color: var(--vetto-on-primary-container);
  font: 400 12.5px / 1.4 var(--vetto-font-sans);
}
.flag-strip button {
  margin-left: auto;
  font: 500 12.5px var(--vetto-font-sans);
  color: var(--vetto-primary);
  cursor: pointer;
  transition: transform var(--vetto-duration-quick) var(--vetto-ease-standard);
}
.flag-strip button:active { transform: scale(var(--vetto-press-scale)); }

/* --- C6 photos ------------------------------------------------------------ */
.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.photo-cell {
  position: relative;
  aspect-ratio: 60 / 76;
  /* Appendix A's 14px was drawn for the 60×76 thumbnails on the reading
     tab's photos card; these grid cells run roughly twice that size, and
     16px is what .record-row__tile already uses at a comparable scale. */
  border-radius: var(--vetto-shape-md);
  overflow: hidden;
  background: var(--vetto-surface-container-high);
  cursor: pointer;
  transition: transform var(--vetto-duration-quick) var(--vetto-ease-standard);
}
button.photo-cell:active { transform: scale(var(--vetto-press-scale)); }
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-cell.-missing {
  /* Not a button (see photoCell() in records.js): nothing behind it to
     press, so no pointer cursor either. */
  cursor: default;
}
.photo-cell.-missing .ruled {
  position: absolute;
  inset: 10px;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 9px,
    var(--app-divider) 9px 10px
  );
}

/* --- photo viewer --------------------------------------------------------- */
.viewer {
  position: absolute;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--vetto-camera-surface);
}
.viewer[hidden] { display: none; }
.viewer img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--vetto-shape-lg);
  object-fit: contain;
}
.viewer__close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 12px);
  right: 12px;
  display: grid;
  place-items: center;
  width: var(--vetto-target-min);
  height: var(--vetto-target-min);
  border-radius: var(--vetto-shape-full);
  background: var(--vetto-surface-container-high);
  color: var(--vetto-on-surface);
  cursor: pointer;
  transition: transform var(--vetto-duration-quick) var(--vetto-ease-standard);
}
.viewer__close:active { transform: scale(var(--vetto-press-scale)); }

/* ---- C3 capture — the app's only dark surface -------------------------- */
.screen.-camera { background: #17130e; }
.capture-stage { position: absolute; inset: 0; display: grid; place-items: center; }
#capture-video { width: 100%; height: 100%; object-fit: cover; }
.capture-fallback { padding: 32px; text-align: center; color: var(--vetto-inverse-on-surface); }
.capture-fallback .body { color: inherit; margin-bottom: 18px; }
.capture-chrome {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 18px calc(var(--app-bottom) + 18px);
  display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(transparent, rgba(23, 19, 14, 0.72));
}
.icon-btn.-chrome { color: var(--vetto-inverse-on-surface); background: rgba(255, 255, 255, 0.12); border-radius: 50%; width: 44px; height: 44px; }
#capture-cancel { position: absolute; top: calc(var(--app-top, 12px) + 12px); left: 16px; }
.capture-queue { display: flex; gap: 8px; min-height: 44px; overflow-x: auto; }
.capture-thumb { width: 34px; height: 44px; object-fit: cover; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, 0.5); }
.capture-actions { display: flex; align-items: center; justify-content: space-between; }
.capture-shutter {
  width: 68px; height: 68px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.85);
  background: var(--vetto-primary); box-shadow: var(--vetto-elevation-2);
}
.btn.-sm { height: 44px; padding: 0 20px; }

/* The week across the top of Medications. The day is the control: tapping it
   moves the list below, so the target is the whole tile, not the dot. */
.meds-week { margin: 0 0 14px; }
.meds-week__row { display: flex; gap: 4px; }
.meds-week__day {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 46px; padding: 8px 0 7px; border: 0; border-radius: 16px; background: transparent;
  color: var(--vetto-on-surface-variant); cursor: pointer;
  font: 500 12px var(--vetto-font-sans);
}
.meds-week__day:not(:disabled):active { transform: scale(var(--vetto-press-scale)); background: var(--vetto-surface-variant, rgba(0,0,0,.06)); }
.meds-week__day:disabled { opacity: 0.35; cursor: default; transform: none; }
.meds-week__num { font: 600 15px var(--vetto-font-sans); color: var(--vetto-on-surface); }
.meds-week__day:disabled .meds-week__num { color: var(--vetto-on-surface-variant); }
.meds-week__day.-today .meds-week__num { font-weight: 800; }
.meds-week__day.-selected { background: var(--vetto-primary-container); }
.meds-week__day.-selected .meds-week__num { color: var(--vetto-primary); }
/* The dot keeps its space whatever it says, so the row never shifts as days
   are ticked off. */
.meds-week__dot {
  width: 6px; height: 6px; border-radius: 50%; margin-top: 1px;
  background: transparent; border: 1.5px solid transparent;
}
.meds-week__day.-done .meds-week__dot { background: var(--vetto-primary); border-color: var(--vetto-primary); }
.meds-week__day.-missed .meds-week__dot { border-color: var(--vetto-error, #a33b1f); }

/* The pencil on a medication row. Its own tap target, sized for a thumb,
   inside a row that is itself a button. */
.med-card__edit {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; margin: -8px -6px -8px 0; border-radius: 50%;
  color: var(--vetto-on-surface-variant);
}
.med-card__edit:active { background: var(--vetto-surface-variant, rgba(0,0,0,.06)); }

/* ── meds: status chips, next-up card, add-more card, counter ─────────── */
#meds-progress { text-align: center; color: var(--vetto-primary); font-weight: 500; margin: 0 0 10px; }
.med-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.status-chip { font-size: 11.5px; font-weight: 500; line-height: 1; padding: 4px 9px 5px; border-radius: 999px;
  background: var(--vetto-secondary-container); color: var(--vetto-on-secondary-container); }
.status-chip.-due { background: var(--vetto-primary-container); color: var(--vetto-on-primary-container); }
.next-up { background: var(--vetto-surface-container); margin-top: 14px; }
.next-up .overline { display: block; margin-bottom: 6px; }