/*
  Pet profile (resources/views/pets/profile.blade.php), in the shape the
  IAGD SuperApp gives it: a photo-led hero card, then one card per topic.
  Every card is one level deep; a group inside a card is flat rows and
  hairlines, never a second bordered box.

  Colour, spacing and easing tokens come from iagd-theme.css.
  Prefix: pp-.
*/

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

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

.pp-grid {
  max-width: 760px;
  margin-inline: auto;
  display: grid;
  gap: 16px;
}
.pp-col {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}
@media (min-width: 1024px) {
  .pp-grid {
    max-width: 1100px;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }

  /* The hero stays under the top bar while the cards scroll. The card is
     capped at the viewport: the photo, the number line and the facts keep
     their place, and the open ladder is the one region that scrolls. The
     facts read before the ladder here, so the details stay on screen. The
     page script sets the ladder panel's max-height to the space left under
     the facts; the card body itself never scrolls. */
  .pp-col--hero {
    position: sticky;
    top: 76px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 92px);
  }
  .pp-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .pp-hero__media { flex: 0 0 auto; }
  .pp-hero__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .pp-love__panel {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .pp-hero__plain { order: 0; }
  .pp-line { order: 1; }
  .pp-facts { order: 2; flex: 0 0 auto; }
  .pp-hero__love {
    order: 3;
    flex: 0 0 auto;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
  }
}

.pp-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.pp-break { overflow-wrap: anywhere; }
.pp-pre { white-space: pre-line; }

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

.pp-bar {
  max-width: 760px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
@media (min-width: 1024px) {
  .pp-bar { max-width: 1100px; }
}
.pp-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-text);
  white-space: nowrap;
}
.pp-bar__acts {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* Chip: the app's header buttons. Carries .iagd-pill as well, so an
   anchor keeps its own colour under the theme's text-link rule. */
.pp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  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);
}
.pp-chip:hover { background: rgba(255, 255, 255, 0.06); }
.pp-chip:active { transform: scale(0.95); }
.pp-chip:disabled { opacity: 0.5; pointer-events: none; }
.pp-chip--go {
  border-color: rgba(124, 58, 237, 0.55);
  color: var(--color-accent-text);
}
.pp-chip--sm {
  height: 28px;
  padding: 0 10px;
  font-size: 10px;
}
.pp-chip__n {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-dim-1);
}

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

.pp-pending {
  max-width: 760px;
  margin: 0 auto 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(253, 224, 71, 0.45);
  background: rgba(253, 224, 71, 0.10);
  box-shadow: inset 3px 0 0 0 rgb(253, 224, 71);
}
@media (min-width: 1024px) {
  .pp-pending { max-width: 1100px; }
}
.pp-pending__icon { flex: 0 0 auto; margin-top: 2px; color: #fde047; }
.pp-pending__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: #fef9c3;
}
.pp-pending__body {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(254, 249, 195, 0.75);
}

.pp-note {
  max-width: 760px;
  margin: 0 auto 16px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, 0.4);
  background: rgba(14, 165, 233, 0.10);
  font-size: 14px;
  line-height: 1.45;
  color: #e0f2fe;
}
@media (min-width: 1024px) {
  .pp-note { max-width: 1100px; }
}
.pp-note strong { color: var(--color-text-on-dark); }

/* ---- Hero card ------------------------------------------------------- */

.pp-hero {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--color-layer-stroke);
  background: var(--color-layer-alt);
  box-shadow: var(--shadow-layer-edge);
}

.pp-hero__media { position: relative; }
.pp-hero__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.pp-hero__img {
  display: block;
  width: 100%;
  height: clamp(220px, 58vw, 420px);
  object-fit: cover;
  object-position: 50% 35%;
  background: var(--color-base-alt);
}
/* Sized to the viewport so the facts under the photo stay on screen on a
   short display, up to the app's 440px on a tall one. With the ladder
   open the photo eases down to a banner, so the ladder takes the room
   and reads three to five rungs at a time instead of one. */
@media (min-width: 1024px) {
  .pp-hero__img {
    height: clamp(280px, calc(100vh - 500px), 440px);
    transition: height 320ms var(--ease-fluent-out), object-position 320ms var(--ease-fluent-out);
  }
  /* A banner this short keeps the face only if the crop sits high: a
     pet's eyes are in the upper part of a portrait, and the centre crop
     showed the muzzle alone. */
  .pp-hero.is-ladder-open .pp-hero__img {
    height: clamp(160px, calc(100vh - 720px), 220px);
    object-position: 50% 18%;
  }
}
.is-rip { filter: grayscale(1); }

/* The name sits on the photo, over a shade that runs from black to clear.
   pointer-events: none lets a tap fall through to the viewer button. */
.pp-hero__shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 64px 16px 16px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.5) 50%, transparent);
  pointer-events: none;
}
.pp-hero__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.pp-hero__id { min-width: 0; }
.pp-hero__name {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.15;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.pp-hero__name--plain {
  font-size: 24px;
  display: block;
}
.pp-hero__rip {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.pp-hero__rip--plain { color: var(--color-dim-1); }
.pp-hero__side {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.pp-hero__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.pp-sex {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 9999px;
}
.pp-sex--male { background: rgba(14, 165, 233, 0.15); color: #7dd3fc; }
.pp-sex--female { background: rgba(244, 63, 94, 0.15); color: #fda4af; }

.pp-hero__body { padding: 16px; }
.pp-hero__plain {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  min-width: 0;
}

/* Registration line: the number, then the marks. Marks are text and an
   icon, never a capsule. */
.pp-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}
.pp-line__no {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.pp-line__no--none {
  letter-spacing: 1.5px;
  color: var(--color-dim-2);
}
.pp-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.pp-mark--ok { color: #6ee7b7; }
.pp-mark--pending { color: #fde68a; }
.pp-mark--stud { color: #fde68a; }
.pp-mark--sale { color: var(--color-accent-text); }
a.pp-mark {
  border-bottom: 1px solid transparent;
  transition: border-color 140ms var(--ease-fluent);
}
a.pp-mark:hover { border-bottom-color: currentColor; }

.pp-hero__love { margin-top: 12px; }

/* The four facts. */
.pp-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 16px;
  margin: 16px 0 0;
}
.pp-facts > div { min-width: 0; }
.pp-facts__wide { grid-column: 1 / -1; }
.pp-facts dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-dim-2);
}
.pp-facts dd {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-on-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-facts__wide dd {
  white-space: normal;
  overflow-wrap: anywhere;
}
.pp-facts dd a {
  border-bottom: 1px solid rgba(196, 168, 255, 0.35);
}
.pp-facts dd a:hover { border-bottom-color: currentColor; }

/* ---- LoVe ring and ladder ------------------------------------------- */

.pp-love { width: 100%; }
.pp-love__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 8px 0;
  margin: -8px 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fef3c7;
  cursor: pointer;
  transition: transform 180ms var(--ease-fluent);
}
.pp-love__toggle::-webkit-details-marker { display: none; }
.pp-love__toggle:active { transform: scale(0.97); }
.pp-love__ring { flex: 0 0 auto; }
.pp-love__arc--on { color: #fcd34d; }
.pp-love__arc--off { color: rgba(220, 210, 255, 0.2); }
.pp-love__num { fill: #fcd34d; }
.pp-love__chev {
  color: var(--color-dim-1);
  transition: transform 200ms var(--ease-fluent);
}
.pp-love[open] .pp-love__chev { transform: rotate(180deg); }

.pp-love__panel {
  position: relative;
  margin-top: 20px;
}

/* Scroll fades. When the panel scrolls, the rows near an edge with more
   rows beyond it fade to transparent, so the card's own background shows
   through and reads as "more this way". A mask on the panel, never a
   painted band: a band needs an outline to belong to, and this panel has
   none. The page script sets the two classes; a panel that does not
   scroll (the phone layout) never gets them, and with both fades at zero
   the mask is fully opaque. */
@property --pp-fade-top {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --pp-fade-bottom {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
.pp-love__panel {
  --pp-fade-top: 0px;
  --pp-fade-bottom: 0px;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--pp-fade-top), #000 calc(100% - var(--pp-fade-bottom)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--pp-fade-top), #000 calc(100% - var(--pp-fade-bottom)), transparent);
  transition: --pp-fade-top 200ms var(--ease-fluent), --pp-fade-bottom 200ms var(--ease-fluent);
}
.pp-love__panel.is-more-above { --pp-fade-top: 56px; }
.pp-love__panel.is-more-below { --pp-fade-bottom: 56px; }

.pp-love__fraction {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-dim-2);
}
.pp-love__desc {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-dim-1);
}
.pp-love__rungs {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}
.pp-rung {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pp-rung:first-child { padding-top: 0; }
.pp-rung:last-child { padding-bottom: 0; border-bottom: 0; }
.pp-rung__mark {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #6ee7b7;
}
.pp-rung__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 9999px;
  border: 1px solid var(--color-layer-stroke);
  font-size: 10px;
  font-weight: 700;
  color: var(--color-dim-2);
}
.pp-rung__body { min-width: 0; flex: 1 1 auto; }
.pp-rung__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}
.pp-rung__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-dim-1);
}
.pp-rung.is-met .pp-rung__label { color: var(--color-text-on-dark); }
.pp-rung__tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #6ee7b7;
}
.pp-rung__text {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-dim-1);
  text-wrap: pretty;
}
.pp-rung__next {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.pp-rung__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  margin-top: 8px;
  padding: 0 12px;
  border-radius: var(--radius-card);
  border: 1px solid rgba(124, 58, 237, 0.4);
  background: rgba(124, 58, 237, 0.12);
  font-size: 11px;
  font-weight: 600;
  transition: transform 180ms var(--ease-fluent);
}
.pp-rung__go:active { transform: scale(0.95); }
.pp-love__note {
  margin-top: 12px;
  font-size: 11px;
  line-height: 1.6;
  color: var(--color-dim-2);
}

/* ---- Missing banner -------------------------------------------------- */

.pp-missing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(251, 191, 36, 0.55);
  background: rgba(245, 158, 11, 0.15);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 180ms var(--ease-fluent);
}
.pp-missing:hover { background: rgba(245, 158, 11, 0.25); }
.pp-missing__lead {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #fef3c7;
}
.pp-missing__text { display: flex; flex-direction: column; min-width: 0; }
.pp-missing__seen {
  font-size: 11px;
  font-weight: 400;
  color: rgba(253, 230, 138, 0.9);
}
.pp-missing__go {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fef3c7;
}

/* ---- Topic cards ----------------------------------------------------- */

.pp-card {
  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);
  min-width: 0;
}
.pp-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pp-card__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.pp-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-text);
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.pp-card__link:hover { border-bottom-color: currentColor; }
.pp-card__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--color-dim-2);
}

.pp-empty {
  font-size: 14px;
  color: var(--color-dim-1);
}
.pp-more {
  display: block;
  margin-top: 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* ---- Lineage --------------------------------------------------------- */

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

/* A tile has no border and no fill: it sits inside the Lineage card, and
   a card inside a card is banned. The ring and the spacing carry it. */
.pp-tile {
  display: block;
  padding: 12px;
  text-align: center;
  min-width: 0;
  color: inherit;
  transition: transform 180ms var(--ease-fluent);
}
a.pp-tile:active { transform: scale(0.95); }
.pp-tile__ring {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto;
  border-radius: 9999px;
  overflow: hidden;
  background: var(--color-layer-soft);
}
.pp-tile__ring img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-tile__ring--dashed {
  background: none;
  border: 1px dashed rgba(255, 255, 255, 0.16);
}
.pp-tile__initial {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-accent-text);
}
.pp-tile__role {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-dim-2);
}
.pp-tile__name {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-on-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-tile__name--dim { color: var(--color-dim-2); font-weight: 400; }
.pp-tile__no {
  display: block;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-tile__no--dim { color: var(--color-dim-2); }
/* The outside page about a name with no record. */
.pp-tile__source {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-text);
  text-decoration: none;
}
.pp-tile__source svg { width: 10px; height: 10px; }
.pp-tile--compact .pp-tile__ring { width: 48px; height: 48px; }
.pp-tile--compact .pp-tile__initial { font-size: 17px; }
.pp-tile--compact { padding: 8px 4px; }

/* Grandparents: a snap-scrolling row on a phone, so every tile keeps a
   readable name; four across once the card is wide enough. */
.pp-gp { margin-top: 4px; }
.pp-gp__toggle {
  display: block;
  list-style: none;
  padding: 8px 0;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-text);
  cursor: pointer;
}
.pp-gp__toggle::-webkit-details-marker { display: none; }
.pp-gp__hide { display: none; }
.pp-gp[open] .pp-gp__show { display: none; }
.pp-gp[open] .pp-gp__hide { display: inline; }
.pp-gp__row {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 8px -16px 0;
  padding: 0 16px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pp-gp__row::-webkit-scrollbar { display: none; }
.pp-gp__row > li {
  flex: 0 0 132px;
  scroll-snap-align: start;
  min-width: 0;
}
@media (min-width: 640px) {
  .pp-gp__row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
  .pp-gp__row > li { flex: none; }
}

/* ---- Photos ---------------------------------------------------------- */

.pp-strip {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0 -16px;
  padding: 0 16px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.pp-strip::-webkit-scrollbar { display: none; }
.pp-strip > li { flex: 0 0 auto; scroll-snap-align: start; }
.pp-thumb {
  display: block;
  width: 112px;
  height: 112px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-layer-soft);
  cursor: zoom-in;
  transition: opacity 140ms var(--ease-fluent);
}
.pp-thumb:hover { opacity: 0.9; }
.pp-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Rows ------------------------------------------------------------ */

.pp-rows { margin: 0; }
.pp-rows > div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pp-rows > div:last-child { border-bottom: 0; }
@media (max-width: 420px) {
  .pp-rows > div { grid-template-columns: 112px minmax(0, 1fr); }
}
.pp-rows dt {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-dim-2);
  padding-top: 1px;
}
.pp-rows dd {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-on-dark);
  min-width: 0;
}
.pp-rows dd a {
  border-bottom: 1px solid rgba(196, 168, 255, 0.35);
}
.pp-rows dd a:hover { border-bottom-color: currentColor; }
.pp-rows__aside {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-dim-2);
}
.pp-rows__private {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-dim-2);
}
.pp-rows__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}

/* ---- Health ---------------------------------------------------------- */

.pp-health {
  display: grid;
  gap: 20px;
}
.pp-group { min-width: 0; }
.pp-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pp-group__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-dim-1);
}

/* Square tiles: uploaded card pictures and certificates. */
.pp-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .pp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.pp-tiles > li { min-width: 0; }
.pp-tile-img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border-radius: 8px;
  border: 1px solid var(--color-layer-stroke);
  overflow: hidden;
  background: var(--color-layer-soft);
  cursor: zoom-in;
  transition: transform 180ms var(--ease-fluent), opacity 140ms var(--ease-fluent);
}
.pp-tile-img:hover { opacity: 0.9; }
.pp-tile-img:active { transform: scale(0.95); }
.pp-tile-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pp-tile-img--file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
  color: var(--color-dim-1);
}
.pp-tile-img--file span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-dim-1);
}
.pp-tiles__cap {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  color: var(--color-dim-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Medical record rows. */
.pp-records {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pp-record {
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.pp-record:first-child { padding-top: 0; }
.pp-record:last-child { padding-bottom: 0; border-bottom: 0; }
.pp-record__date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.pp-record__state { font-size: 9px; letter-spacing: 1px; }
.pp-record__state--pending { color: #fde68a; }
.pp-record__state--rejected { color: #fecaca; }
.pp-record__reason {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-on-dark);
}
.pp-record__dx {
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-dim-1);
}
.pp-record__who {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-dim-2);
}
.pp-record__open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-accent-text);
  border-bottom: 1px solid transparent;
}
.pp-record__open:hover { border-bottom-color: currentColor; }

/* ---- File list ------------------------------------------------------- */

.pp-files {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pp-tiles + .pp-files { margin-top: 12px; }
.pp-files li { border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.pp-files li:last-child { border-bottom: 0; }
.pp-files a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  font-size: 14px;
  min-width: 0;
}
.pp-files a > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-files__meta {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-dim-2);
}

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

.pp-qr {
  display: flex;
  justify-content: center;
}
.pp-qr #qrcode {
  width: 256px;
  height: 256px;
  overflow: hidden;
  border-radius: var(--radius-card);
}
.pp-qr__themes {
  justify-content: center;
  margin-top: 14px;
}
.pp-qr__hint {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--color-dim-2);
}
.pp-sheet__lead {
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--color-dim-1);
}
.pp-sheet__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Sex picker: three fixed choices as a radio row, never a dropdown. */
.pp-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pp-seg__opt {
  position: relative;
  cursor: pointer;
}
.pp-seg__opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pp-seg__opt span {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 9999px;
  border: 1px solid var(--color-layer-stroke-strong);
  background: var(--color-layer);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-dim-1);
  transition: background-color 180ms var(--ease-fluent), border-color 180ms var(--ease-fluent), color 180ms var(--ease-fluent);
}
.pp-seg__opt:has(input:checked) span {
  background: var(--color-accent-soft);
  border-color: var(--color-layer-stroke-accent);
  color: var(--color-accent-text);
}
.pp-seg__opt:has(input:focus-visible) span {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---- Viewer ---------------------------------------------------------- */

.pp-view {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 64px 56px;
  background: rgba(8, 5, 20, 0.94);
}
[hidden].pp-view { display: none; }
.pp-view__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-layer-stroke);
}
.pp-view__cap {
  font-size: 12px;
  color: var(--color-dim-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-view img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.pp-view__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 1px solid var(--color-layer-stroke-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-dim-1);
  cursor: pointer;
  transition: background-color 140ms var(--ease-fluent), color 140ms var(--ease-fluent);
}
.pp-view__nav:hover { background: rgba(255, 255, 255, 0.1); color: var(--color-text-on-dark); }
.pp-view__nav--prev { left: 12px; }
.pp-view__nav--next { right: 12px; }
@media (max-width: 640px) {
  .pp-view { padding: 60px 16px; }
  .pp-view__nav { width: 34px; height: 34px; }
  .pp-view__nav--prev { left: 4px; }
  .pp-view__nav--next { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-chip, .pp-tile, .pp-tile-img, .pp-love__toggle, .pp-love__chev, .pp-rung__go, .pp-missing, .pp-hero__img {
    transition: none !important;
  }
}