/* =====================================================================
   TAG AND TAP - public profile pages
   Direction: "Anodised". Mirrors app/theme.ts - change both together.

   Two worlds live in this file:
     .wrap        light "paper" - a found pet, read outdoors in daylight
     .wrap.lost   hi-viz orange, edge to edge - impossible to misread

   Zero external requests. Fonts are self-hosted, there is no analytics,
   no CDN and no map embed. The finder is not tracked, and the page has
   to load on one bar of signal in a field.
   ===================================================================== */

/* --- fonts -----------------------------------------------------------
   ONE file, 32 KB, self-hosted. Outfit is a variable font, so a single
   request covers weight 100 to 900 - headings, body and labels alike.
   There is no second typeface anywhere in the product.
   -------------------------------------------------------------------- */
@font-face{
  font-family:'Outfit';
  src:url('../fonts/outfit-var.woff2') format('woff2-variations');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* Contrast note: dark text on the hi-viz orange ground must sit at
   alpha 0.80 or above to clear WCAG AA (4.5:1). Anything fainter looks
   fine on a monitor and fails outdoors, which is the only place this
   page is ever read. Verified by tests/contrast-audit.js. */

/* --- tokens --------------------------------------------------------- */
:root{
  --paper:#F5F6F8;
  --card:#FFFFFF;
  --line:rgba(16,19,23,.09);
  --ink:#101317;
  --ink-2:#5C646D;
  /* Measured at 4.6:1 on --paper. The previous #8B939B looked right on
     a bright monitor and came in at 2.85:1, which fails AA and is
     genuinely hard to read outdoors - where this page is always read. */
  --ink-3:#626B74;

  --signal:#FF4D17;
  --on-signal:#160702;

  /* One family, top to bottom. Hierarchy comes from weight, size and
     tracking - see the note in app/theme.ts. */
  --f-ui:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Labels and codes are Outfit too - uppercased, tracked wide and set
     at a real reading size. A separate mono face bought nothing except
     another 11 KB and type that was too small to read comfortably. */
  --f-mn:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;

  --r-chip:8px; --r-thumb:11px; --r-card:15px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-ui); font-weight:400; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* iPhone notch + home indicator */
  padding:env(safe-area-inset-top) env(safe-area-inset-right)
          env(safe-area-inset-bottom) env(safe-area-inset-left);
}
body.s-lost{background:var(--signal);color:var(--on-signal)}

img{max-width:100%;display:block}
a{color:inherit}

.wrap{
  max-width:460px; margin:0 auto;
  padding:26px 20px calc(40px + env(safe-area-inset-bottom));
  text-align:center;
}
.wrap.centred{padding-top:56px}

/* --- brand ---------------------------------------------------------- */
.brand{
  font-family:var(--f-mn); font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin:0 0 4px;
}
.brand i{width:5px;height:5px;border-radius:50%;background:var(--signal);display:block}

.kicker{
  font-family:var(--f-mn); font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:rgba(22,7,2,.84); margin:0;
}

/* --- avatar --------------------------------------------------------- */
.avatar{
  width:118px; height:118px; border-radius:50%; margin:22px auto 0;
  overflow:hidden; position:relative;
  /* Dark plate behind the initial. A light placeholder put white text at
     1.37:1 - invisible - whenever a profile had no photo. */
  background:#4A535C;
  border:3px solid #fff; box-shadow:0 4px 22px -8px rgba(16,19,23,.34);
}
.avatar.big{width:132px;height:132px;border:4px solid var(--on-signal);box-shadow:none;background:#C9622F}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar span{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--f-ui); font-weight:700; font-size:46px; color:#fff;
}

.mark{
  width:76px;height:76px;border-radius:50%;margin:26px auto 4px;
  display:flex;align-items:center;justify-content:center;
  background:var(--signal);color:var(--on-signal);
  font-size:32px;font-weight:700;
}

/* --- names ---------------------------------------------------------- */
/* Outfit has wide round counters, so display sizes need real negative
   tracking. Set loose it reads soft; set tight it reads deliberate. */
.name{
  font-family:var(--f-ui); font-weight:800; font-size:46px;
  letter-spacing:-.042em; line-height:1; margin:15px 0 0;
  text-wrap:balance;
}
.name.small{
  font-weight:700; font-size:25px;
  letter-spacing:-.034em; line-height:1.15; margin-top:18px;
}
.meta{
  font-family:var(--f-mn); font-size:12.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  margin:11px 0 0;
}
.lead{color:var(--ink-2);margin:12px auto 0;max-width:34ch;font-size:15px}

/* The loudest thing in the product.
   UPPERCASE needs far less negative tracking than lowercase - caps have
   no ascenders or descenders to create rhythm, so tightening them the
   same amount closes the word gaps and "THIS PET" reads as "THISPET".
   Word-spacing is opened back up for the same reason. */
.shout{
  font-family:var(--f-ui); font-weight:800; font-size:clamp(38px,12vw,50px);
  letter-spacing:-.018em; word-spacing:.06em; line-height:.94; margin:13px 0 0;
}
.name-shout{
  font-family:var(--f-ui); font-weight:800; font-size:32px;
  letter-spacing:-.04em; line-height:1; margin:16px 0 0;
}
.lost-msg{
  color:rgba(22,7,2,.88); margin:9px auto 0; max-width:33ch;
  font-size:14.5px; line-height:1.45;
}

/* --- actions -------------------------------------------------------- */
.actions{display:flex;flex-direction:column;gap:9px;margin-top:22px}

.btn{
  display:flex; align-items:center; gap:10px; justify-content:flex-start;
  min-height:54px; padding:14px 17px; border-radius:13px;
  font-family:var(--f-ui); font-weight:600; font-size:15.5px;
  letter-spacing:-.01em; text-decoration:none; text-align:left;
  border:1px solid transparent; cursor:pointer; width:100%;
}
.btn em{
  font-style:normal; margin-left:auto; font-family:var(--f-mn);
  font-size:13px; font-weight:600; letter-spacing:.02em; opacity:.7;
  white-space:nowrap;
}
.btn.solid{background:var(--ink);color:#fff}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}

/* On the orange ground the ink button inverts, so the primary action is
   still the darkest thing on screen. */
body.s-lost .btn.solid{background:var(--on-signal);color:#fff;font-weight:700}
body.s-lost .btn.outline{
  background:transparent;color:var(--on-signal);
  border:1.5px solid rgba(22,7,2,.46);font-weight:700;
}
.btn.block{justify-content:center;text-align:center}

.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
body.s-lost .btn:focus-visible{outline-color:var(--on-signal)}
.btn[disabled]{opacity:.55}

/* --- panels --------------------------------------------------------- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-card);
  padding:2px 16px; margin-top:16px; text-align:left;
}
.panel{
  border:1.5px solid rgba(22,7,2,.24); border-radius:13px;
  padding:14px 16px; margin-top:14px; text-align:left;
}
.panel p{margin:0;font-size:14px;line-height:1.5;color:rgba(22,7,2,.88)}
.panel-lbl{
  font-family:var(--f-mn); font-size:11.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(22,7,2,.84); margin:0 0 7px !important;
}

.rows{margin:0;display:block}
.rows > div{
  display:flex; justify-content:space-between; gap:16px;
  padding:12px 0; border-bottom:1px solid var(--line);
}
.rows > div:last-child{border-bottom:0}
.rows dt{
  font-family:var(--f-mn); font-size:11.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
  padding-top:3px; flex:0 0 auto;
}
.rows dd{margin:0;text-align:right;font-weight:500;font-size:14.5px;min-width:0;overflow-wrap:anywhere}
.panel .rows > div{border-color:rgba(22,7,2,.18)}
.panel .rows dt{color:rgba(22,7,2,.84)}

/* --- location sharing ----------------------------------------------- */
.geo{margin-top:16px}
.geo-copy{margin:0 0 12px !important;font-size:13.5px;color:rgba(22,7,2,.74)}
.geo-err{
  margin:10px 0 0 !important;font-size:13px;font-weight:600;
  color:var(--on-signal);
}
.shared-ok{
  margin-top:18px;padding:14px 16px;border-radius:13px;
  background:var(--on-signal);color:#fff;font-weight:600;font-size:14.5px;
}

.quiet{color:var(--ink-3);font-size:14px;margin:6px 0 0}

/* --- foot ----------------------------------------------------------- */
.foot{
  font-family:var(--f-mn); font-size:11.5px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); margin:30px 0 0;
}
body.s-lost .foot{color:rgba(22,7,2,.82)}

/* --- motion --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .btn:active{transform:none}
}

/* --- very small phones ---------------------------------------------- */
@media (max-width:340px){
  .wrap{padding-left:14px;padding-right:14px}
  .name{font-size:38px}
  .shout{font-size:34px}
  .btn{font-size:14.5px;padding:13px 14px}
  .btn em{display:none}   /* number is on the button label already */
}

/* --- print (a finder with no signal can hand this to a vet) --------- */
@media print{
  body{background:#fff;color:#000}
  .btn{border:1px solid #000 !important;background:#fff !important;color:#000 !important}
  .geo,.shared-ok{display:none}
}

/* ---- live sharing, on the finder's page ------------------------------
   The running state has to be unmistakable. Someone broadcasting their
   position must never have to wonder whether it is still on. */
.live-on{
  display:flex;align-items:center;gap:10px;
  margin:14px 0 12px;font-size:15px;font-weight:600;color:#0F6E4A;
}
.live-dot{
  position:relative;width:10px;height:10px;flex:0 0 10px;
  border-radius:99px;background:#12A15F;
}
.live-dot::after{
  content:"";position:absolute;inset:-6px;border-radius:99px;
  border:2px solid #12A15F;animation:liveping 1.9s ease-out infinite;
}
@keyframes liveping{
  0%{transform:scale(.5);opacity:.9}
  70%,100%{transform:scale(1.25);opacity:0}
}
@media (prefers-reduced-motion:reduce){ .live-dot::after{animation:none;opacity:.35} }