/* ==========================================================================
   PawGuard UI (refined 2026) — the product interface, rebuilt in HTML/CSS
   Used by the PawGuard case study for every mockup (hero, final screens,
   UI kit, data cards). Same product, features, flows and data as the 2024
   Figma file; cleaner grid, calmer hierarchy, accessible contrast.

   Scaling: every screen is authored at a fixed design size in `em`
   (1em = 16 design px) and scaled to its container with container-query
   units, so it stays razor sharp at any width.
     .pgx-desk  → 1280 × 800 design px (80em × 50em)
     .pgx-mob   → 390 × 844 design px  (24.375em × 52.75em)
     .pgx-fit   → any width, set --w (design width in em) on the element
   Mockups are decorative (role="img" + aria-label on the frame).
   ========================================================================== */

/* ---------- Frames ---------- */
.pgx-browser {
  container-type: inline-size;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(20, 38, 56, 0.1),
    0 2px 4px rgba(20, 38, 56, 0.04),
    0 30px 60px -28px rgba(15, 30, 46, 0.45);
}
.pgx-browser__bar {
  display: flex;
  align-items: center;
  gap: 0.75cqw;
  height: 3.1cqw;
  min-height: 14px;
  padding: 0 1.3cqw;
  background: #F1F2F4;
  border-bottom: 1px solid #E3E5E8;
}
.pgx-browser__bar i { width: 0.85cqw; height: 0.85cqw; min-width: 5px; min-height: 5px; border-radius: 50%; background: #D5D8DC; }
.pgx-browser__bar i:nth-child(1) { background: #EE8B7B; }
.pgx-browser__bar i:nth-child(2) { background: #F2C766; }
.pgx-browser__bar i:nth-child(3) { background: #8FCB8B; }
.pgx-browser__bar b {
  margin-inline: auto;
  width: 34cqw;
  height: 1.75cqw;
  min-height: 9px;
  border-radius: 0.5cqw;
  background: #fff;
  box-shadow: inset 0 0 0 1px #E3E5E8;
}
.pgx-browser__bar s { width: 4.5cqw; }

.pgx-phone {
  container-type: inline-size;
  position: relative;
}
.pgx-phone__body {
  position: relative;
  padding: 2.6cqw;
  border-radius: 15cqw;
  background: #121B24;
  box-shadow:
    inset 0 0 0 0.6cqw #2B3744,
    0 2px 4px rgba(20, 38, 56, 0.06),
    0 36px 60px -30px rgba(10, 22, 34, 0.55);
}
.pgx-phone__screen {
  position: relative;
  overflow: hidden;
  border-radius: 12.6cqw;
  background: #fff;
}
.pgx-phone__island {
  position: absolute;
  z-index: 5;
  top: 2.7cqw;
  left: 50%;
  width: 29cqw;
  height: 8.2cqw;
  translate: -50% 0;
  border-radius: 99px;
  background: #0B1117;
}

.pgx-desk, .pgx-mob, .pgx-fit { container-type: inline-size; }
.pgx-desk > .pgx { font-size: calc(100cqw / 80); width: 80em; height: 50em; }
.pgx-mob > .pgx { font-size: calc(100cqw / 24.375); width: 24.375em; height: 52.75em; }
.pgx-fit > .pgx { font-size: calc(100cqw / var(--w, 64)); width: calc(var(--w, 64) * 1em); }

/* ---------- Tokens + base ---------- */
.pgx {
  --x-navy: #1F3E5B;
  --x-navy-2: #2A5073;
  --x-navy-ink: #17324A;
  --x-sky: #92CED9;
  --x-sky-50: #EEF7F9;
  --x-sky-100: #D9EEF2;
  --x-sun: #F0CA5F;
  --x-sun-50: #FFF8E3;
  --x-sun-100: #FFEBB0;
  --x-salmon: #F7A087;
  --x-salmon-50: #FEF0EB;
  --x-salmon-ink: #B4513A;
  --x-bg: #F6F4EF;
  --x-ink: #172634;
  --x-ink-2: #3D4D5C;
  --x-muted: #6A7784;
  --x-line: #E5E8EB;
  --x-line-2: #D7DCE1;
  --x-shadow: 0 0 0 1px var(--x-line), 0 0.25em 0.75em -0.25em rgba(23, 38, 52, 0.08);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--x-bg);
  color: var(--x-ink);
  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.pgx--clear { background: transparent; overflow: visible; }
.pgx *, .pgx *::before, .pgx *::after { box-sizing: border-box; }
.pgx img { display: block; }
.pgx .x-i {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pgx .x-i--fill { fill: currentColor; stroke: none; }
.pgx .x-sm { width: 1em; height: 1em; }
.pgx .x-xs { width: 0.875em; height: 0.875em; }

/* ---------- Top navigation (desktop) ---------- */
.x-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2.5em;
  height: 4em;
  padding: 0 2em;
  background: var(--x-navy);
  color: #fff;
}
.x-top__logo { height: 1.6em; width: auto; }
.x-top__nav { display: flex; gap: 0.25em; }
.x-top__nav span {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.55em 0.95em;
  border-radius: 0.7em;
  font-size: 0.8125em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.x-top__nav span.is-on { background: rgba(255, 255, 255, 0.1); color: #fff; }
.x-top__nav span.is-on::after { content: ""; width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--x-sun); }
.x-top__end { margin-left: auto; display: flex; align-items: center; gap: 0.75em; }
.x-iconbtn {
  display: grid;
  place-items: center;
  width: 2.4em;
  height: 2.4em;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  position: relative;
}
.x-iconbtn--badge::after { content: ""; position: absolute; top: 0.55em; right: 0.6em; width: 0.45em; height: 0.45em; border-radius: 50%; background: var(--x-salmon); box-shadow: 0 0 0 0.15em var(--x-navy); }
.x-me { display: flex; align-items: center; gap: 0.6em; font-size: 0.8125em; font-weight: 500; }
.x-me__av { display: grid; place-items: center; width: 2.4em; height: 2.4em; border-radius: 50%; background: var(--x-sky); color: var(--x-navy); }

/* ---------- Mobile chrome ---------- */
.x-status {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.4em;
  padding: 0.5em 1.9em 0;
  background: var(--x-navy);
  color: #fff;
  font-size: 0.9375em;
  font-weight: 600;
}
.x-status__icons { display: flex; align-items: center; gap: 0.35em; }
.x-status__icons svg { height: 0.8em; width: auto; fill: currentColor; }
.x-status--light { background: var(--x-bg); color: var(--x-ink); }
.x-appbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.75em;
  height: 3.75em;
  padding: 0 1.25em;
  background: var(--x-navy);
  color: #fff;
}
.x-appbar__logo { height: 1.45em; width: auto; }
.x-appbar__title { font-size: 1.0625em; font-weight: 600; }
.x-appbar__end { margin-left: auto; display: flex; gap: 0.5em; }
.x-appbar .x-iconbtn { width: 2.3em; height: 2.3em; }
.x-appbar--light { background: var(--x-bg); color: var(--x-ink); }
.x-appbar--light .x-iconbtn { background: #fff; color: var(--x-ink); box-shadow: var(--x-shadow); }
.x-mbody { flex: 1; min-height: 0; overflow: hidden; padding: 1.1em 1.25em 6.5em; display: flex; flex-direction: column; gap: 1em; }
.x-tabbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0.6em 0.75em 1.9em;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -1px 0 var(--x-line);
}
.x-tabbar span { display: grid; justify-items: center; gap: 0.2em; font-size: 0.625em; font-weight: 500; color: var(--x-muted); }
.x-tabbar span .x-i { width: 2em; height: 2em; padding: 0.3em; }
.x-tabbar span.is-on { color: var(--x-navy); }
.x-tabbar span.is-on .x-i { background: var(--x-sky-100); border-radius: 0.8em; }
.x-tabbar::after { content: ""; position: absolute; left: 50%; bottom: 0.55em; width: 8.5em; height: 0.3em; translate: -50% 0; border-radius: 9px; background: var(--x-ink); }
.x-sticky {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 0.6em;
  padding: 0.9em 1.25em 2.2em;
  background: linear-gradient(to top, var(--x-bg) 70%, rgba(246, 244, 239, 0));
}
.x-sticky::after { content: ""; position: absolute; left: 50%; bottom: 0.55em; width: 8.5em; height: 0.3em; translate: -50% 0; border-radius: 9px; background: var(--x-ink); }
.x-sticky .x-btn { flex: 1; height: 3.1em; font-size: 0.875em; }

/* ---------- Layout ---------- */
.x-main { flex: 1; min-height: 0; padding: 1.75em 2em; overflow: hidden; }
.x-card {
  background: #fff;
  border-radius: 1em;
  box-shadow: var(--x-shadow);
  padding: 1.25em;
}
.x-row { display: flex; align-items: center; gap: 0.75em; }
.x-between { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.x-stack { display: flex; flex-direction: column; }

/* ---------- Type ---------- */
.x-h1 { font-size: 1.625em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--x-ink); }
.x-h2 { font-size: 1.25em; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.x-h3 { font-size: 0.9375em; font-weight: 600; line-height: 1.3; }
.x-sub { font-size: 0.8125em; color: var(--x-muted); }
.x-small { font-size: 0.75em; color: var(--x-muted); }
.x-tiny { font-size: 0.6875em; color: var(--x-muted); }
.x-label { font-size: 0.6875em; font-weight: 500; color: var(--x-muted); }
.x-dot { width: 0.25em; height: 0.25em; border-radius: 50%; background: currentColor; opacity: 0.5; display: inline-block; vertical-align: middle; margin-inline: 0.45em; }

/* ---------- Controls ---------- */
.x-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  height: 2.75em;
  padding: 0 1.2em;
  border-radius: 0.8em;
  font-size: 0.8125em;
  font-weight: 600;
  white-space: nowrap;
}
.x-btn .x-i { width: 1.3em; height: 1.3em; }
.x-btn--sun { background: var(--x-sun); color: var(--x-navy-ink); box-shadow: inset 0 -0.1em 0 rgba(0, 0, 0, 0.06); }
.x-btn--navy { background: var(--x-navy); color: #fff; }
.x-btn--ghost { background: #fff; color: var(--x-ink); box-shadow: inset 0 0 0 1px var(--x-line-2); }
.x-btn--soft { background: var(--x-sky-50); color: var(--x-navy); }
.x-btn--text { padding: 0; height: auto; color: var(--x-navy); }
.x-btn--danger { background: transparent; color: var(--x-salmon-ink); padding: 0; height: auto; }
.x-btn--sm { height: 2.3em; padding: 0 0.9em; border-radius: 0.7em; }

.x-field { display: grid; gap: 0.4em; }
.x-input {
  display: flex;
  align-items: center;
  gap: 0.55em;
  height: 2.75em;
  padding: 0 0.85em;
  border-radius: 0.75em;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--x-line-2);
  font-size: 0.8125em;
  color: var(--x-ink);
}
.x-input .x-i { color: var(--x-muted); width: 1.3em; height: 1.3em; }
.x-input--focus { box-shadow: inset 0 0 0 1.5px var(--x-navy), 0 0 0 0.3em rgba(146, 206, 217, 0.45); }
.x-input__unit { margin-left: auto; color: var(--x-muted); }
.x-input__caret { margin-left: auto; }
.x-ph { color: var(--x-muted); }

.x-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  height: 1.85em;
  padding: 0 0.55em 0 0.7em;
  border-radius: 0.55em;
  background: var(--x-navy);
  color: #fff;
  font-size: 0.75em;
  font-weight: 500;
}
.x-tag .x-i { width: 1em; height: 1em; opacity: 0.8; }
.x-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.28em 0.65em;
  border-radius: 99em;
  background: var(--x-sky-50);
  color: var(--x-navy);
  font-size: 0.6875em;
  font-weight: 500;
  white-space: nowrap;
}
.x-chip--sun { background: var(--x-sun-50); color: #7A5A06; }
.x-chip--salmon { background: var(--x-salmon-50); color: var(--x-salmon-ink); }
.x-chip--line { background: #fff; box-shadow: inset 0 0 0 1px var(--x-line-2); color: var(--x-ink-2); }
.x-chip--navy { background: var(--x-navy); color: #fff; }

.x-seg { display: flex; padding: 0.22em; border-radius: 0.8em; background: #EEF0F2; }
.x-seg span {
  flex: 1;
  display: grid;
  place-items: center;
  height: 2.2em;
  padding: 0 0.7em;
  border-radius: 0.6em;
  font-size: 0.75em;
  font-weight: 500;
  color: var(--x-muted);
  white-space: nowrap;
}
.x-seg span.is-on { background: #fff; color: var(--x-navy); font-weight: 600; box-shadow: 0 0.1em 0.3em rgba(23, 38, 52, 0.12); }

.x-switch { display: flex; align-items: center; gap: 0.6em; font-size: 0.8125em; color: var(--x-ink-2); white-space: nowrap; }
.x-switch i { position: relative; width: 2.5em; height: 1.45em; border-radius: 99em; background: var(--x-line-2); flex: none; }
.x-switch i::after { content: ""; position: absolute; top: 0.2em; left: 0.2em; width: 1.05em; height: 1.05em; border-radius: 50%; background: #fff; box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.15); }
.x-switch.is-on i { background: var(--x-navy); }
.x-switch.is-on i::after { left: auto; right: 0.2em; }

.x-check { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 0.35em; box-shadow: inset 0 0 0 1.5px var(--x-line-2); background: #fff; flex: none; }
.x-check.is-on { background: var(--x-navy); box-shadow: none; color: #fff; }
.x-check .x-i { width: 0.85em; height: 0.85em; stroke-width: 2.5; }

.x-tabs { display: flex; gap: 1.75em; box-shadow: inset 0 -1px 0 var(--x-line); }
.x-tabs span { padding: 0.75em 0 0.85em; font-size: 0.8125em; font-weight: 500; color: var(--x-muted); white-space: nowrap; }
.x-tabs span.is-on { color: var(--x-navy); font-weight: 600; box-shadow: inset 0 -0.15em 0 var(--x-navy); }

/* ---------- Avatars ---------- */
.x-av { width: 2.75em; height: 2.75em; border-radius: 50%; object-fit: cover; flex: none; background: var(--x-sky-100); }
.x-av--sm { width: 2em; height: 2em; }
.x-av--xs { width: 1.5em; height: 1.5em; }
.x-av--lg { width: 3.25em; height: 3.25em; }
.x-av.is-on { box-shadow: 0 0 0 0.16em #fff, 0 0 0 0.32em var(--x-sky); }
.x-avs { display: flex; }
.x-avs .x-av { box-shadow: 0 0 0 0.15em #fff; }
.x-avs .x-av + .x-av { margin-left: -0.55em; }
.x-add { display: grid; place-items: center; border-radius: 50%; border: 1.5px dashed var(--x-line-2); color: var(--x-muted); flex: none; }

/* ---------- Stat + icon tiles ---------- */
.x-tile { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 0.8em; background: var(--x-sky-100); color: var(--x-navy); flex: none; }
.x-tile--sun { background: var(--x-sun-100); color: #6B4E00; }
.x-tile--salmon { background: #FDDDD2; color: var(--x-salmon-ink); }
.x-tile--line { background: #fff; box-shadow: inset 0 0 0 1px var(--x-line); }
.x-stat { display: flex; align-items: center; gap: 0.85em; padding: 1em 1.1em; }
.x-stat__num { font-size: 1.5em; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.x-stat__num small { font-size: 0.55em; font-weight: 500; color: var(--x-muted); margin-left: 0.2em; letter-spacing: 0; }
.x-stat__lbl { margin-top: 0.3em; font-size: 0.75em; color: var(--x-muted); }

/* ---------- Chart ---------- */
.x-chart { position: relative; }
.x-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.x-chart text { font-family: "Poppins", sans-serif; fill: var(--x-muted); }

/* ---------- Calendar + agenda ---------- */
.x-cal { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 0.15em; text-align: center; }
.x-cal b { font-size: 0.625em; font-weight: 500; color: var(--x-muted); padding-bottom: 0.7em; }
.x-cal span { position: relative; display: grid; place-items: center; height: 2.05em; font-size: 0.75em; color: var(--x-ink-2); }
.x-cal span.is-dim { color: #B9C0C7; }
.x-cal span.has::after { content: ""; position: absolute; bottom: 0.1em; left: 50%; width: 0.36em; height: 0.36em; translate: -50% 0; border-radius: 50%; background: var(--x-salmon); }
.x-cal span.has-m::after { background: var(--x-sky); }
.x-cal span.is-on { color: var(--x-navy-ink); font-weight: 600; }
.x-cal span.is-on::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2.05em; height: 2.05em; translate: -50% -50%; border-radius: 50%; background: var(--x-sun); z-index: -1; }
.x-cal span.is-on { z-index: 0; }
.x-ev { display: flex; gap: 0.75em; padding: 0.7em 0.8em; border-radius: 0.8em; background: var(--x-sky-50); align-items: center; }
.x-ev--appt { background: var(--x-sun-50); }
.x-ev__time { margin-left: auto; font-size: 0.6875em; font-weight: 500; color: var(--x-muted); white-space: nowrap; align-self: flex-start; margin-top: 0.2em; }
.x-ev__t { font-size: 0.8125em; font-weight: 600; line-height: 1.3; }
.x-ev__s { font-size: 0.6875em; color: var(--x-muted); line-height: 1.4; }
.x-legend { display: flex; gap: 1em; font-size: 0.6875em; color: var(--x-muted); }
.x-legend i { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; margin-right: 0.4em; vertical-align: 0.05em; }

/* ---------- Stars ---------- */
.x-stars { display: inline-flex; align-items: center; gap: 0.1em; color: #E8B436; }
.x-stars .x-i { width: 0.95em; height: 0.95em; }
.x-halfstar, .x-emptystar { position: relative; display: inline-flex; color: #E1E5E9; }
.x-halfstar > span { position: absolute; inset: 0 50% 0 0; overflow: hidden; color: #E8B436; }
.x-rating { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.75em; font-weight: 600; color: var(--x-ink); }

/* ---------- Lists ---------- */
.x-list { display: grid; gap: 0.55em; }
.x-li { display: flex; align-items: center; gap: 0.6em; font-size: 0.75em; color: var(--x-ink-2); }
.x-li i { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; flex: none; background: var(--x-sky-100); color: var(--x-navy); }
.x-li i .x-i { width: 0.9em; height: 0.9em; stroke-width: 2.4; }
.x-li--no i { background: var(--x-salmon-50); color: var(--x-salmon-ink); }
.x-meta { display: flex; align-items: center; gap: 0.45em; font-size: 0.75em; color: var(--x-muted); }
.x-meta .x-i { width: 1.2em; height: 1.2em; }

/* ---------- Map ---------- */
.x-map { position: relative; overflow: hidden; border-radius: 1em; background: #E9EEEF; box-shadow: var(--x-shadow); }
.x-map svg.x-map__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.x-pin {
  position: absolute;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  translate: -50% -100%;
  border-radius: 50% 50% 50% 0;
  rotate: -45deg;
  background: var(--x-navy);
  color: #fff;
  box-shadow: 0 0.3em 0.6em -0.2em rgba(23, 38, 52, 0.45);
}
.x-pin b { rotate: 45deg; font-size: 0.75em; font-weight: 600; }
.x-pin.is-on { background: var(--x-sun); color: var(--x-navy-ink); width: 2.4em; height: 2.4em; }
.x-pop {
  position: absolute;
  padding: 0.7em 0.85em;
  border-radius: 0.8em;
  background: #fff;
  box-shadow: 0 0.6em 1.5em -0.4em rgba(23, 38, 52, 0.3);
  white-space: nowrap;
}
.x-mapctl { position: absolute; top: 0.9em; right: 0.9em; display: grid; border-radius: 0.7em; background: #fff; box-shadow: var(--x-shadow); overflow: hidden; }
.x-mapctl span { display: grid; place-items: center; width: 2.2em; height: 2.2em; color: var(--x-ink); }
.x-mapctl span + span { box-shadow: inset 0 1px 0 var(--x-line); }

/* ---------- Screen: dashboard ---------- */
.x-dash { display: grid; grid-template-columns: 5.5em minmax(0, 1fr) 21em; gap: 1.5em; height: 100%; }
.x-rail { display: flex; flex-direction: column; align-items: center; gap: 1.1em; padding: 1.1em 0.4em; }
.x-rail__pet { display: grid; justify-items: center; gap: 0.35em; font-size: 0.6875em; font-weight: 500; color: var(--x-muted); }
.x-rail__pet .x-av { width: 4.4em; height: 4.4em; }
.x-rail__pet.is-on { color: var(--x-navy); font-weight: 600; }
.x-rail .x-add { width: 3em; height: 3em; }
.x-center { display: flex; flex-direction: column; gap: 1.1em; min-width: 0; }
.x-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; }
.x-bars text.x-v { fill: var(--x-ink-2); font-weight: 600; }
.x-latest { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75em; }
.x-ind { display: flex; align-items: center; gap: 0.7em; padding: 0.8em 0.9em; border-radius: 0.8em; background: var(--x-bg); }
.x-ind b { display: block; font-size: 0.8125em; font-weight: 600; }
.x-side { display: flex; flex-direction: column; gap: 1.1em; min-width: 0; }

/* ---------- Screen: pet log ---------- */
.x-log { display: grid; grid-template-columns: 18.5em minmax(0, 1fr); gap: 1.5em; height: 100%; }
.x-profile { display: flex; flex-direction: column; gap: 1em; padding: 0.75em; }
.x-profile__img { width: 100%; aspect-ratio: 1 / 0.86; object-fit: cover; object-position: 50% 30%; border-radius: 0.75em; }
.x-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.x-fact { display: flex; align-items: center; gap: 0.55em; padding: 0.55em; border-radius: 0.7em; background: var(--x-bg); }
.x-fact .x-tile { width: 2.1em; height: 2.1em; border-radius: 0.6em; }
.x-fact .x-tile .x-i { width: 1.1em; height: 1.1em; }
.x-fact b { display: block; font-size: 0.75em; font-weight: 600; color: var(--x-ink); }
.x-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; }
.x-actions span { display: grid; justify-items: center; gap: 0.35em; padding: 0.6em 0; border-radius: 0.7em; font-size: 0.6875em; font-weight: 500; color: var(--x-ink-2); box-shadow: inset 0 0 0 1px var(--x-line); }
.x-actions span .x-i { width: 1.6em; height: 1.6em; color: var(--x-navy); }
.x-entry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.75em; }
.x-entry__sec { display: grid; gap: 0.95em; align-content: start; }
.x-sechead { display: flex; align-items: center; gap: 0.55em; font-size: 0.8125em; font-weight: 600; color: var(--x-navy); }
.x-sechead .x-tile { width: 1.9em; height: 1.9em; border-radius: 0.55em; }
.x-sechead .x-tile .x-i { width: 1.05em; height: 1.05em; }
.x-food { display: flex; align-items: center; gap: 0.8em; padding: 0.75em 0.85em; border-radius: 0.8em; box-shadow: inset 0 0 0 1px var(--x-line); }
.x-food__q { margin-left: auto; font-size: 0.8125em; font-weight: 600; white-space: nowrap; }
.x-note { padding: 0.8em 0.9em; border-radius: 0.8em; box-shadow: inset 0 0 0 1px var(--x-line-2); font-size: 0.75em; line-height: 1.55; color: var(--x-ink-2); min-height: 4.7em; }
.x-drop { display: flex; align-items: center; gap: 0.7em; padding: 0.75em 0.9em; border-radius: 0.8em; border: 1.5px dashed var(--x-line-2); font-size: 0.75em; color: var(--x-muted); }
.x-drop .x-i { color: var(--x-navy); }

/* ---------- Screen: clinics ---------- */
.x-filter { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto auto; gap: 1em; align-items: end; padding: 1em 1.1em; }
.x-toggles { display: grid; gap: 0.55em; padding-bottom: 0.1em; }
.x-results { display: grid; grid-template-columns: minmax(0, 1fr) 25em; gap: 1.25em; min-height: 0; }
.x-clinic { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.9em; align-items: start; padding: 1em 1.1em; }
.x-clinic.is-on { box-shadow: 0 0 0 1.5px var(--x-navy), 0 0.5em 1.25em -0.5em rgba(23, 38, 52, 0.25); }
.x-num { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; background: var(--x-navy); color: #fff; font-size: 0.75em; font-weight: 600; }
.x-clinic.is-on .x-num { background: var(--x-sun); color: var(--x-navy-ink); }
.x-clinic__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em 1.1em; margin-top: 0.45em; }
.x-clinic__tags { display: flex; flex-wrap: wrap; gap: 0.35em; margin-top: 0.6em; }
.x-petpick { display: flex; gap: 0.5em; }
.x-petpick span { display: flex; align-items: center; gap: 0.55em; padding: 0.35em 0.9em 0.35em 0.35em; border-radius: 99em; background: #fff; box-shadow: var(--x-shadow); font-size: 0.8125em; font-weight: 500; color: var(--x-ink-2); }
.x-petpick span .x-av { width: 2.1em; height: 2.1em; }
.x-petpick span.is-on { background: var(--x-navy); color: #fff; box-shadow: none; }

/* ---------- Screen: insurance ---------- */
.x-ins { display: grid; grid-template-columns: minmax(0, 1fr) 26.5em; gap: 1.5em; height: 100%; }
.x-plan { display: grid; grid-template-columns: 9.5em repeat(3, minmax(0, 1fr)) 7.5em 1.4em; gap: 1em; align-items: center; padding: 1.05em 1.2em; }
.x-plan.is-on { background: var(--x-sky-50); box-shadow: 0 0 0 1.5px var(--x-navy); }
.x-brand { font-size: 1em; font-weight: 600; letter-spacing: -0.01em; color: var(--x-ink); }
.x-kv b { display: block; font-size: 0.9375em; font-weight: 600; color: var(--x-ink); }
.x-kv span { font-size: 0.6875em; color: var(--x-muted); }
.x-price { text-align: right; }
.x-price b { font-size: 1.375em; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.x-price b sup { font-size: 0.5em; vertical-align: 0.8em; margin-left: 0.05em; }
.x-price span { display: block; margin-top: 0.2em; font-size: 0.6875em; color: var(--x-muted); }
.x-why { padding: 0.9em 1em; border-radius: 0.8em; background: var(--x-sun-50); font-size: 0.75em; line-height: 1.55; color: var(--x-ink-2); }
.x-why b { color: var(--x-ink); font-weight: 600; }
.x-kvrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5em; }
.x-kvrow > div { padding: 0.65em 0.75em; border-radius: 0.7em; background: var(--x-bg); }
.x-disclaim { display: flex; align-items: center; gap: 0.45em; font-size: 0.6875em; color: var(--x-muted); }
.x-disclaim .x-i { width: 1.25em; height: 1.25em; }

/* ---------- Mobile screen helpers ---------- */
.x-mpets { display: flex; gap: 1em; }
.x-mpets > span { display: grid; justify-items: center; gap: 0.35em; font-size: 0.6875em; font-weight: 500; color: var(--x-muted); }
.x-mpets > span.is-on { color: var(--x-navy); font-weight: 600; }
.x-mpets .x-av { width: 4.1em; height: 4.1em; }
.x-mpets .x-add { width: 4.1em; height: 4.1em; }
.x-hscroll { display: flex; gap: 0.45em; overflow: hidden; }

/* ---------- Kit board ---------- */
.x-kit { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 1.25em; padding: 1.75em; background: var(--x-bg); }
.x-kit__cell { display: grid; gap: 0.9em; align-content: start; }
.x-kit__cell > .x-label { font-weight: 600; color: var(--x-navy); }
.x-icons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5em; }
.x-icons span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 0.7em; background: var(--x-bg); color: var(--x-navy); }

/* ---------- Wireframe mode (lo-fi, greyscale) ----------
   Recreated from the team's 2024 low-fidelity wireframes. Same component
   system with colour removed, image placeholders and outline buttons. */
.pgx--wire {
  --x-navy: #2A2A2A;
  --x-navy-2: #444;
  --x-navy-ink: #1E1E1E;
  --x-sky: #CFCFCF;
  --x-sky-50: #F3F3F3;
  --x-sky-100: #E6E6E6;
  --x-sun: #D6D6D6;
  --x-sun-50: #F1F1F1;
  --x-sun-100: #E4E4E4;
  --x-salmon: #BDBDBD;
  --x-salmon-50: #EFEFEF;
  --x-salmon-ink: #555;
  --x-bg: #FFFFFF;
  --x-ink: #1E1E1E;
  --x-ink-2: #474747;
  --x-muted: #858585;
  --x-line: #E4E4E4;
  --x-line-2: #BEBEBE;
  --x-shadow: 0 0 0 1px #D2D2D2;
  background: #fff;
}
.pgx--wire .x-tabs span.is-on { box-shadow: inset 0 -0.2em 0 #9A9A9A; color: var(--x-ink); }
.pgx--wire .x-cal span.is-on::before { background: #D6D6D6; }
.w-top { flex: none; display: flex; align-items: center; gap: 3em; height: 4.5em; padding: 0 3.5em; border-bottom: 1px solid var(--x-line); }
.w-top nav { display: flex; gap: 1.6em; margin-inline: auto; font-size: 0.8125em; font-weight: 500; }
.w-top nav .is-on { text-decoration: underline; text-underline-offset: 0.3em; }
.w-mtop { flex: none; display: flex; align-items: center; height: 3.5em; padding: 0 1.25em; border-bottom: 1px solid var(--x-line); }
.w-logo { display: inline-block; padding: 0.55em 1.4em; border-radius: 0.4em; background: #DEDEDE; font-size: 0.75em; font-weight: 500; color: #555; }
.w-btn { display: inline-flex; align-items: center; justify-content: center; height: 2.6em; padding: 0 1.3em; border-radius: 0.45em; box-shadow: inset 0 0 0 1px #9E9E9E; font-size: 0.8125em; font-weight: 500; color: var(--x-ink); white-space: nowrap; }
.w-btn--fill { background: #E2E2E2; box-shadow: none; border-radius: 99em; }
.w-btn--sm { height: 2.2em; padding: 0 1em; font-size: 0.75em; }
.w-link { font-size: 0.8125em; font-weight: 500; text-decoration: underline; text-underline-offset: 0.25em; color: var(--x-ink); }
.w-lbl { font-size: 0.75em; font-weight: 500; color: var(--x-ink); }
.w-input { display: flex; align-items: center; height: 2.6em; padding: 0 0.8em; border-radius: 0.4em; box-shadow: inset 0 0 0 1px #C4C4C4; font-size: 0.75em; color: #9A9A9A; }
.w-card { border-radius: 0.6em; box-shadow: 0 0 0 1px #D5D5D5; padding: 1em; background: #fff; }
.w-card--fill { background: #D9D9D9; box-shadow: none; }
.w-img { display: grid; place-items: center; width: 100%; border-radius: 0.5em; background: #EFEFEF; color: #A8A8A8; }
.w-img .x-i { width: 1.8em; height: 1.8em; }
.w-bar { display: block; height: 0.6em; border-radius: 99em; background: #E0E0E0; }
.w-box { display: inline-block; width: 1.25em; height: 1.25em; border-radius: 0.25em; box-shadow: inset 0 0 0 1px #A8A8A8; background: #fff; flex: none; }
.w-box.is-on { background: #3A3A3A; box-shadow: none; }
.w-cal { padding: 1em; border-radius: 0.5em; box-shadow: 0 0 0 1px #D5D5D5; font-size: 0.9em; }
.w-cal b { font-size: 0.85em; }
.w-table { border-radius: 0.5em; overflow: hidden; box-shadow: 0 0 0 1px var(--x-line); font-size: 0.8125em; }
.w-tr { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr 1fr; align-items: center; gap: 1em; padding: 0.8em 1.2em; border-top: 1px solid var(--x-line); }
.w-th { border-top: 0; background: #E6E6E6; font-weight: 600; }
.w-pill { font-style: normal; display: inline-block; padding: 0.3em 0.9em; border-radius: 99em; background: #E6E6E6; font-size: 0.9em; }