/*
  The vaccination card (resources/views/pets/vaccination-card.blade.php), in
  the shape the IAGD SuperApp gives it: a summary card, then one entry per
  shot beside a status rail. One card level: the shot list is a flat
  container, so each entry is its own card, and a group inside a card is
  flat rows and hairlines.

  The summary card keeps the palette of the issued card: violet into gold
  over the panel, a gold hairline on the top edge, the gradient title.

  Colour, spacing and easing tokens come from iagd-theme.css. The theme
  resets `p` and the headings under .iagd-app at one class and one type, so
  a rule here that sets a margin or a weight on one of those carries two
  classes.
  Prefix: vc-.
*/

.iagd-app {
  --vc-panel: #120f27;
  --vc-ink: #f2eefb;
  --vc-dim: #b9aee0;
  --vc-mute: #9a8fc4;
  --vc-gold: #ffe07a;
  --vc-current: #6ee7b7;
  --vc-due: #fde68a;
  --vc-expired: #fca5a5;
}

/* ---- Page ------------------------------------------------------------ */

.vc {
  padding: 12px 16px 48px;
}
@media (min-width: 641px) {
  .vc { padding: 16px 24px 72px; }
}

.vc-grid,
.vc-bar,
.vc .vc-note {
  max-width: 760px;
  margin-inline: auto;
}
.vc-grid {
  display: grid;
  gap: 24px;
}
.vc-col {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}
/* On a phone the owner rows read after the shots: the side column gives its
   two cards to the page grid, and the shots take the place between them. */
@media (max-width: 1023px) {
  .vc-col--side { display: contents; }
  .vc-col--main { order: 1; }
  .vc-col--side > .vc-card { order: 2; }
}
@media (min-width: 1024px) {
  .vc-grid,
  .vc-bar,
  .vc .vc-note {
    max-width: 1100px;
  }
  .vc-grid {
    grid-template-columns: 400px minmax(0, 1fr);
    align-items: start;
  }
  /* The summary stays under the top bar while the shots scroll. */
  .vc-col--side {
    position: sticky;
    top: 76px;
  }
}

.vc-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Status colours: text and a dot, never a capsule. */
.vc .is-current { color: var(--vc-current); }
.vc .is-due_soon { color: var(--vc-due); }
.vc .is-expired { color: var(--vc-expired); }
.vc .is-no_expiry { color: var(--vc-mute); }
.vc-guide .is-current { color: var(--vc-current); }
.vc-guide .is-due_soon { color: var(--vc-due); }
.vc-guide .is-expired { color: var(--vc-expired); }
.vc-guide .is-no_expiry { color: var(--vc-mute); }
.vc-dot {
  flex: 0 0 auto;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: currentColor;
}

.vc .vc-label,
.vc-guide .vc-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vc-mute);
}

/* A run of short values with a dot before each. The row sits one dot-width
   to the left inside a clipped box, so the dot that would open a line falls
   outside it: no line starts or ends on a separator. */
.vc .vc-run { overflow: hidden; }
.vc-run__in {
  display: flex;
  flex-wrap: wrap;
  margin-left: -18px;
}
.vc-run__in > span {
  position: relative;
  min-width: 0;
  padding-left: 18px;
  overflow-wrap: anywhere;
}
.vc-run__in > span::before {
  content: "\00B7";
  position: absolute;
  left: 0;
  width: 18px;
  text-align: center;
  opacity: 0.6;
}

/* ---- Action bar ------------------------------------------------------ */

.vc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}
.vc-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
.vc-bar__acts {
  display: flex;
  gap: 8px;
}

/* Chip: the app's header buttons. Carries .iagd-pill as well, so the theme's
   text-link rule leaves its colour alone. */
.vc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1px solid var(--color-layer-stroke);
  background: rgba(255, 255, 255, 0.024);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-text-on-dark);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 180ms var(--ease-fluent),
    border-color 180ms var(--ease-fluent),
    transform 180ms var(--ease-fluent);
}
.vc-chip:hover { background: rgba(255, 255, 255, 0.06); }
.vc-chip:active { transform: scale(0.95); }
.vc-chip--sm {
  height: 32px;
  padding: 0 10px;
  letter-spacing: 1px;
}

/* ---- Notices --------------------------------------------------------- */

.vc .vc-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
}
.vc-note svg { flex: 0 0 auto; }
.vc-note--review {
  border: 1px solid rgba(253, 224, 71, 0.45);
  background: rgba(253, 224, 71, 0.10);
  color: #fef9c3;
}
.vc-note--ok {
  border: 1px solid rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.10);
  color: #d1fae5;
}
.vc-note--demo {
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: rgba(14, 165, 233, 0.10);
  color: #e0f2fe;
}

/* ---- Summary card ---------------------------------------------------- */

.vc-sum {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(120% 85% at 8% -10%, rgba(190, 147, 255, 0.16), transparent 58%),
    radial-gradient(90% 70% at 100% 0%, rgba(255, 212, 0, 0.07), transparent 60%),
    var(--vc-panel);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
}
/* A gold hairline along the top edge: the mark of an issued document. */
.vc-sum::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  opacity: 0.85;
  background: linear-gradient(90deg, transparent, #ffd400, #ffa500, transparent);
}

.vc-sum__banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.vc-sum__mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  object-fit: contain;
}
.vc-sum__mark--print { display: none; }
.vc-sum__heading {
  flex: 1 1 0;
  min-width: 0;
}
.vc .vc-sum__issuer {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  line-height: 1.35;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--vc-mute);
}
.vc .vc-sum__title {
  margin-top: 2px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: transparent;
  background-image: linear-gradient(74deg, #be93ff 0, #db9efd 22%, #ffd333 62%, #ffcf86 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
/* The serial is plain mono text. It takes its own line on a phone, so the
   title never wraps around it. */
.vc .vc-sum__no {
  flex: 0 0 100%;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--vc-gold);
}
@media (min-width: 520px) {
  .vc .vc-sum__no { flex: 0 0 auto; }
}

.vc-pet {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}
.vc-pet__photo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(190, 147, 255, 0.3);
}
.vc-pet__photo--none {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(190, 147, 255, 0.12);
  font-size: 22px;
  font-weight: 700;
  color: #be93ff;
}
.vc-pet__text { min-width: 0; }
.vc .vc-pet__name {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--vc-ink);
  overflow-wrap: anywhere;
}
.vc .vc-pet__id {
  margin-top: 3px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--vc-dim);
}
.vc .vc-pet__born {
  margin-top: 2px;
  font-size: 13px;
  color: var(--vc-mute);
}

.vc .vc-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 18px 0 0;
}
.vc-facts > div { min-width: 0; }
.vc-facts__wide { grid-column: 1 / -1; }
.vc-facts dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--vc-mute);
}
.vc-facts dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--vc-ink);
  overflow-wrap: anywhere;
}
.vc-facts dd a { border-bottom: 1px solid rgba(196, 168, 255, 0.35); }
.vc-facts dd a:hover { border-bottom-color: currentColor; }

.vc-sum__status {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* The card's one glance: how much of the record is current, due or lapsed. */
.vc-track {
  display: flex;
  height: 8px;
  overflow: hidden;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06);
}
.vc-track > span { background: currentColor; }
.vc-track > .is-current { color: #34d399; }
.vc-track > .is-due_soon { color: #fbbf24; }
.vc-track > .is-expired { color: #f87171; }
.vc-track > .is-no_expiry { color: #8479ad; }
/* One figure per status, in equal columns, so the strip holds one row at
   every width and no count wraps under the others. */
.vc .vc-counts {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.vc-counts li {
  flex: 1 1 0;
  min-width: 0;
}
.vc-counts b {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--vc-ink);
}
.vc-counts span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.vc-next { margin-top: 16px; }
.vc .vc-next__text {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.vc-next__text svg {
  flex: 0 0 auto;
  margin-top: 2px;
}
.vc .vc-next__hint {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.45;
  text-wrap: balance;
  color: var(--vc-dim);
}

/* ---- Plain card (owner rows) ----------------------------------------- */

.vc-card {
  min-width: 0;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--color-layer-stroke);
  background: rgba(255, 255, 255, 0.032);
  box-shadow: var(--shadow-layer-edge);
}
.vc-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.vc .vc-card__title,
.vc .vc-shots__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.vc-card__aside {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-dim-1);
}
.vc .vc-rows { margin: 0; }
.vc-rows > div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.vc-rows > div:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.vc-rows dt {
  padding-top: 2px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-dim-1);
}
.vc-rows dd {
  margin: 0;
  min-width: 0;
  font-size: 14px;
  color: var(--color-text-on-dark);
  overflow-wrap: anywhere;
}

/* ---- Shots ----------------------------------------------------------- */

.vc-shots__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.vc-shots__n {
  margin-left: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0;
  color: var(--color-dim-1);
}

.vc .vc-list {
  position: relative;
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The rail. Runs behind the dots and stops short of both ends. */
.vc-list::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 26px;
  bottom: 26px;
  width: 1px;
  background: rgba(190, 147, 255, 0.25);
}
.vc-shot {
  position: relative;
  min-width: 0;
  padding-left: 28px;
}
.vc-shot::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 13px;
  height: 13px;
  border-radius: 9999px;
  border: 2px solid var(--color-base);
  background: currentColor;
}
.vc .vc-shot.is-current::before { color: #34d399; }
.vc .vc-shot.is-due_soon::before { color: #fbbf24; }
.vc .vc-shot.is-expired::before { color: #f87171; }
.vc .vc-shot.is-no_expiry::before { color: #8479ad; }

.vc-entry {
  min-width: 0;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: var(--vc-panel);
  color: var(--vc-ink);
}
.vc-entry__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
}
/* The legend code leads the name, in the flow of its text. */
.vc-entry__code {
  margin-right: 4px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
  color: var(--vc-gold);
}
.vc .vc-entry__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--vc-ink);
  overflow-wrap: anywhere;
}
.vc-entry__given {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--vc-dim);
}
.vc .vc-entry__meta,
.vc .vc-entry__papers {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--vc-mute);
}
.vc .vc-entry__meta { margin-top: 6px; }
.vc .vc-entry__papers { margin-top: 6px; }

/* The lot number and the sticker expiry: what makes a vaccine traceable, so
   they read stronger than the weight and the maker under them. */
.vc .vc-entry__lot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  margin: 10px 0 0;
}
.vc-entry__lot > div { min-width: 0; }
.vc .vc-entry__lot dd {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--vc-ink);
  overflow-wrap: anywhere;
}
/* A vaccine line with no lot number or no expiry: text and an icon. */
.vc .vc-entry__flag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--vc-due);
}
.vc-entry__flag svg { flex: 0 0 auto; }

/* A vet's note: two lines, and the rest behind the toggle. */
.vc .vc-entry__notes {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vc-dim);
}
.vc .vc-entry__notes.is-open {
  display: block;
  overflow: visible;
}
.vc-entry__more {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-text);
  cursor: pointer;
}
.vc-entry__more[hidden] { display: none; }

/* Attached files: a picture is a thumbnail, any other file is a text link.
   Neither is a second bordered box inside the entry. */
.vc .vc-files {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.vc-files li { min-width: 0; }
.vc-file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: 13px;
}
.vc-file span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vc-file--img {
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 8px;
}
.vc-file--img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The signature closes the entry; the validity date sits at its other end,
   anchored right when the row wraps. */
.vc-entry__sign {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 16px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.vc-entry__who {
  flex: 1 1 240px;
  min-width: 0;
}
/* The signature on a shot the signing desk signed. The stored image is the
   whole entry sheet, dark ink on white paper (the SuperApp draws it, 480 wide):
   the card shows rows 128 to 260, the band that holds the signature and its
   line. Inverted and screened, the paper drops out and the ink reads light;
   the brightness lifts the thin strokes the small size greys out. The
   validity date then sits level with the name, under the ink. */
.vc-entry__sign:has(.vc-entry__ink) { align-items: flex-end; }
.vc-entry__ink {
  display: block;
  width: 220px;
  max-width: 100%;
  aspect-ratio: 480 / 132;
  margin-bottom: 6px;
  overflow: hidden;
}
.vc-entry__ink img {
  display: block;
  width: 100%;
  max-width: none;
  margin-top: -26.667%;
  filter: invert(1) brightness(1.8);
  mix-blend-mode: screen;
}
.vc .vc-entry__vet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
}
.vc-entry__vet b {
  font-weight: 600;
  color: var(--vc-ink);
}
.vc-entry__check {
  display: inline-flex;
  color: #ffd400;
}
.vc .vc-entry__unsigned {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #c9a6ff;
}
.vc .vc-entry__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.vc-entry__open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-bottom: 1px solid transparent;
}
.vc-entry__open:hover { border-bottom-color: currentColor; }

/* An empty card says so, rather than showing lines nobody can write on. */
.vc-none {
  padding: 32px 16px;
  text-align: center;
}
.vc-none__icon {
  color: var(--color-dim-2);
}
.vc .vc-none__title {
  margin-top: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-dim-1);
}

/* ---- Owner control and the way to the records ------------------------ */

.vc-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1px solid rgba(196, 168, 255, 0.4);
  background: rgba(196, 168, 255, 0.10);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-text);
  cursor: pointer;
  transition: background-color 180ms var(--ease-fluent), transform 180ms var(--ease-fluent);
}
.vc-add:hover { background: rgba(196, 168, 255, 0.2); }
.vc-add:active { transform: scale(0.99); }

.vc-go {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--color-layer-stroke);
  background: rgba(255, 255, 255, 0.032);
  box-shadow: var(--shadow-layer-edge);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 180ms var(--ease-fluent);
}
.vc-go:hover { background: rgba(255, 255, 255, 0.06); }
.vc-go svg { flex: 0 0 auto; }
.vc-go__chev {
  margin-left: auto;
  opacity: 0.7;
}

/* ---- Sheets ---------------------------------------------------------- */

.vc-qr {
  display: flex;
  justify-content: center;
}
.vc-qr #qrcode {
  width: 256px;
  height: 256px;
  overflow: hidden;
  border-radius: var(--radius-card);
}
.vc-qr__themes {
  justify-content: center;
  margin-top: 14px;
}
.vc-qr__link {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.vc-qr__link .iagd-input {
  flex: 1 1 auto;
  min-width: 0;
}

.vc-guide {
  display: grid;
  gap: 16px;
}
.vc-guide__sec + .vc-guide__sec {
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.vc-guide .vc-guide__rows {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.vc-guide__rows > * {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.vc-guide__rows > *:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.vc-guide__key,
.vc-guide__code {
  flex: 0 0 104px;
  font-size: 13px;
  font-weight: 600;
}
.vc-guide__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.vc-guide__key--check { color: #ffd400; }
.vc-guide__key--wait { color: #c9a6ff; }
.vc-guide__code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--vc-gold);
}
.vc-guide .vc-guide__val {
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  text-wrap: balance;
  color: var(--color-dim-1);
}

.vc-form {
  display: grid;
  gap: 14px;
}
/* The theme's helper colour reads at 4.05:1 on the sheet. */
.vc-form .iagd-field__helper { color: var(--color-dim-1); }
.vc-form [hidden] { display: none; }

/* Vaccine or deworming: a segmented radio row. The radio itself is off
   screen and its label is the control. */
.vc-kind {
  display: inline-flex;
  justify-self: start;
  padding: 2px;
  border-radius: 10px;
  border: 1px solid var(--color-layer-stroke-strong);
}
.vc-kind__opt { position: relative; cursor: pointer; }
.vc-kind__opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.vc-kind__opt span {
  display: block;
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dim-1);
  transition: background-color 180ms var(--ease-fluent), color 180ms var(--ease-fluent);
}
.vc-kind__opt input:checked + span {
  background: var(--color-accent);
  color: #fff;
}
.vc-kind__opt input:focus-visible + span { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }
.vc-form__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
/* Against: the list opens under the field, in the flow of the form, so the
   sheet's own scroll never clips it. */
.vc-combo .vc-combo__list {
  max-height: 232px;
  overflow-y: auto;
  margin: 6px 0 0;
  padding: 4px;
  border-radius: var(--radius-card);
  border: 1px solid var(--color-layer-stroke-strong);
  list-style: none;
}
.vc-combo__list[hidden] { display: none; }
.vc-combo__opt {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--color-text-on-dark);
  cursor: pointer;
}
.vc-combo__opt[hidden] { display: none; }
.vc-combo__opt .vc-mono {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--vc-gold);
}
.vc-combo__opt:hover,
.vc-combo__opt.is-active,
.vc-combo__opt[aria-selected="true"] {
  background: var(--color-accent-soft);
}
.vc-combo__none {
  padding: 9px 10px;
  font-size: 13px;
  color: var(--color-dim-1);
}
.vc-combo__none[hidden] { display: none; }

/* ---- Print ----------------------------------------------------------- */

@media print {
  body.iagd-app {
    background: #fff !important;
    --vc-panel: #fff;
    --vc-ink: #111;
    --vc-dim: #333;
    --vc-mute: #555;
    --vc-gold: #7a5a00;
    --vc-current: #047857;
    --vc-due: #92400e;
    --vc-expired: #b91c1c;
  }
  body.iagd-app::before,
  body.iagd-app::after,
  body.iagd-app > *:not(.iagd-page),
  .iagd-backdrop,
  .iagd-sheet,
  .vc-bar,
  .vc-add,
  .vc-go,
  .vc-shots__guide,
  .vc-entry__more,
  .vc-entry__open,
  .vc-note--demo,
  .vc-note--ok {
    display: none !important;
  }
  .vc { padding: 0; }
  .vc-grid {
    display: block;
    max-width: none;
  }
  .vc-col--side { position: static; }
  .vc-col + .vc-col { margin-top: 16pt; }
  .vc-sum {
    background: #fff;
    box-shadow: none;
    border-color: #bbb;
    break-inside: avoid;
  }
  .vc-sum::before,
  .vc-sum__mark { display: none; }
  /* The printed mark carries its wordmark, so it keeps its own width. */
  .vc-sum__mark--print {
    display: block;
    width: auto;
    height: 34px;
  }
  .vc-sum + .vc-card { margin-top: 16pt; }
  .vc .vc-sum__title {
    color: #111;
    background: none;
  }
  .vc a { color: #111 !important; }
  /* On paper the sheet is already dark ink on white. */
  .vc-entry__ink img {
    filter: none;
    mix-blend-mode: multiply;
  }
  .vc-pet__photo { box-shadow: none; }
  .vc-pet__photo--none { color: #333; }
  .vc-facts dd a { color: #111 !important; border-bottom: 0; }
  .vc-sum__status,
  .vc-entry__sign { border-top-color: #ddd; }
  .vc-track { background: #eee; }
  .vc-track > span,
  .vc-dot,
  .vc-shot::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .vc-shot::before { border-color: #fff; }
  .vc-list::before { background: #bbb; }
  .vc-entry,
  .vc-card {
    background: #fff;
    box-shadow: none;
    border-color: #bbb;
    color: #111;
    break-inside: avoid;
  }
  .vc .vc-entry__notes {
    display: block;
    overflow: visible;
  }
  .vc-entry__check { color: #7a5a00; }
  .vc .vc-entry__unsigned { color: #555; }
  .vc .vc-card__title,
  .vc .vc-shots__title,
  .vc-shots__n,
  .vc-card__aside,
  .vc-rows dt,
  .vc .vc-none__title { color: #333; }
  .vc-rows dd { color: #111; }
  .vc-rows > div { border-bottom-color: #ddd; }
  .vc-note--review {
    background: #fff;
    border-color: #bbb;
    color: #111;
  }
}