/* ---------------------------------------------------------------------------
   Finasheet LLC - digital employee card

   Built light on purpose. Both headshots are studio portraits on near-white
   backdrops, so a dark card draws a hard seam around every photo; on a white
   surface the portrait sits IN the card rather than on top of it. Light also
   survives direct sun, which is where a business card actually gets handed
   over.

   The one rule the layout is built around: nothing overlaps the face, and the
   portrait is anchored by its eye line (see --face), so the composition holds
   at any screen height instead of depending on whatever space was left over.
--------------------------------------------------------------------------- */

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

:root{
  /* Sampled from assets/fina-logo.webp - the wordmark is #0F365D. */
  --navy:#0F365D;
  --navy-lift:#1C66B0;
  --ink:#0B1220;            /* 17.8:1 on white */
  --text:#3A4A5F;           /* 8.9:1  */
  /* dark enough to still clear 4.5:1 on --sunken, not just on white - the row
     labels sit on the tinted background, where #66768C only reached 4.39 */
  --muted:#5D6C81;
  --line:#E3E9F1;
  --surface:#FFFFFF;
  --sunken:#F7F9FC;
  --wa:#128C4A;             /* darkened WhatsApp green: 4.6:1 on white */

  --r:16px; --r-card:28px;
  --dur:200ms; --ease:cubic-bezier(.2,.7,.3,1);
}

html{-webkit-text-size-adjust:100%}

body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.5;
  color:var(--text);
  background-color:#E7EDF5;
  background-image:radial-gradient(120% 70% at 50% -10%, #FFFFFF 0%, #E7EDF5 55%, #D8E2EE 100%);
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;
  padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));
}

.card{
  margin-block:auto;                       /* centres without clipping if tall */
  display:flex;flex-direction:column;
  width:100%;max-width:400px;
  height:min(calc(100dvh - 24px), 780px);
  background:var(--surface);
  border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:0 34px 68px -28px rgba(11,34,64,.42), 0 0 0 1px rgba(11,34,64,.07);
}

/* ---- portrait ------------------------------------------------------------ */
/* Takes every spare pixel, which is safe here: nothing is laid over the face,
   and the eye line is pinned, so a shorter panel just shows less shoulder. */
.portrait{
  position:relative;
  flex:1 1 auto;min-height:104px;
  overflow:hidden;background:var(--sunken);
}
.portrait-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  /* --face is where scripts/build-team-photos.py put the eye line. Under
     object-fit:cover a source point at fraction f lands at fraction f of the
     box only when object-position is that same f - so this one number is what
     keeps the framing identical on every phone. Change one, change both. */
  object-position:50% var(--face,30%);
}
.portrait-fallback{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Sora',sans-serif;font-size:64px;font-weight:700;
  color:#B9C7D8;background:var(--sunken);
}

.brand{
  position:absolute;top:15px;left:18px;
  display:block;padding:12px;margin:-12px;   /* 44px target, no layout shift */
}
.brand img{
  height:20px;width:auto;display:block;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.9));
}
/* build-team-cards.py measures the portrait behind the lockup and swaps to the
   white wordmark when the navy one would not read - a dark studio backdrop puts
   navy at about 1:1. The glow has to invert with it or it does nothing. */
.brand.on-dark img{filter:drop-shadow(0 1px 6px rgba(0,0,0,.6))}
.brand:focus-visible{outline:2px solid var(--navy-lift);outline-offset:4px;border-radius:8px}

/* ---- identity ------------------------------------------------------------ */
.identity{flex:0 0 auto;padding:17px 20px 0}
h1{
  font-family:'Sora',system-ui,sans-serif;
  font-size:clamp(23px,6.4vw,28px);font-weight:700;
  line-height:1.12;letter-spacing:-.022em;
  color:var(--ink);text-wrap:balance;
}
.role{margin-top:5px;font-size:13.5px;font-weight:600;color:var(--navy)}
.org{margin-top:3px;font-size:12px;color:var(--muted);letter-spacing:.01em}

/* ---- actions ------------------------------------------------------------- */
.actions{flex:0 0 auto;padding:14px 20px 0;display:flex;flex-direction:column;gap:9px}

/* One primary action. Saving the contact is the whole point of the card, so
   nothing else on the page competes with it for weight. */
.save{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:0 18px;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-lift) 100%);
  border-radius:var(--r);
  color:#fff;text-decoration:none;
  font-family:'Sora',sans-serif;font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 12px 24px -12px rgba(15,54,93,.75);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.save svg{width:18px;height:18px;flex:none}
.save:hover{transform:translateY(-1px);box-shadow:0 16px 28px -12px rgba(15,54,93,.8)}
.save:active{transform:translateY(0) scale(.995)}
.save:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* Each detail row shows the real value and is itself the tap target - no
   separate icon grid repeating the same four actions. */
.rows{display:flex;flex-direction:column;gap:8px}
.line{display:flex;align-items:stretch;gap:8px;min-width:0}
.row{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:12px;
  min-height:54px;padding:0 13px;
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:inherit;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.row .ic{
  width:34px;height:34px;flex:none;
  display:grid;place-items:center;border-radius:11px;
  background:#EAF1F9;color:var(--navy);
}
.row .ic svg{width:17px;height:17px}
.row .txt{min-width:0}
.row .lbl{
  display:block;font-size:9.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.row .val{
  display:block;margin-top:1px;
  font-size:14px;font-weight:600;color:var(--ink);
  line-height:1.25;overflow-wrap:anywhere;
}
.row .val.num{font-variant-numeric:tabular-nums}
a.row:hover{background:#fff;border-color:#CBD8E8}
a.row:active{background:var(--sunken)}
a.row:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* WhatsApp shares the phone number, so it rides alongside that row instead of
   repeating the digits on a line of its own. */
.wa{
  flex:none;width:54px;
  display:grid;place-items:center;
  background:var(--sunken);border:1px solid var(--line);border-radius:var(--r);
  color:var(--wa);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.wa svg{width:23px;height:23px}
.wa:hover{background:#fff;border-color:#BFE3CD}
.wa:focus-visible{outline:2px solid var(--wa);outline-offset:2px}

/* ---- foot ---------------------------------------------------------------- */
.foot{
  flex:0 0 auto;
  padding:10px 12px calc(8px + env(safe-area-inset-bottom));
  display:flex;align-items:center;justify-content:space-between;gap:6px;
}
.ghost{
  display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 10px;
  background:none;border:0;border-radius:10px;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  color:var(--muted);text-decoration:none;letter-spacing:.01em;
  white-space:nowrap;                       /* "QR code" broke over two lines */
  transition:color var(--dur) var(--ease);
}
.ghost svg{width:15px;height:15px}
.ghost:hover{color:var(--navy)}
.ghost:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ---- QR ------------------------------------------------------------------ */
/* Full screen rather than a thumbnail on the card. A 44px QR is decoration -
   nobody can scan it - and moving it here gives the portrait that height back. */
.qr-modal{
  width:100%;height:100%;max-width:none;max-height:none;
  margin:auto;padding:20px;border:0;background:transparent;
  display:grid;place-items:center;
}
.qr-modal:not([open]){display:none}
.qr-modal::backdrop{background:rgba(8,20,36,.76)}
.qr-panel{
  width:min(320px,100%);padding:22px;
  background:#fff;border-radius:24px;text-align:center;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
}
.qr-panel .qr{
  width:100%;aspect-ratio:1;padding:12px;
  background:#fff;border:1px solid var(--line);border-radius:16px;
}
.qr-panel .qr svg{width:100%;height:100%;display:block}
.qr-panel .qr svg path{fill:var(--ink)}
.qr-name{margin-top:14px;font-family:'Sora',sans-serif;font-size:16px;font-weight:700;color:var(--ink)}
.qr-hint{margin-top:3px;font-size:12.5px;color:var(--muted)}
.qr-close{
  margin-top:16px;width:100%;min-height:46px;
  background:var(--sunken);border:1px solid var(--line);border-radius:13px;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--ink);
  cursor:pointer;
}
.qr-close:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* ---- narrow -------------------------------------------------------------- */
@media (max-width:340px){
  .identity,.actions{padding-left:15px;padding-right:15px}
  .row{padding:0 10px;gap:9px}
  .row .ic{width:30px;height:30px}
  .wa{width:48px}
  .foot{padding-left:8px;padding-right:8px}
  .ghost{padding:0 7px;font-size:11.5px}
}

/* ---- short screens ------------------------------------------------------- */
/* A phone's usable height is well under its screen height - Safari's toolbars
   take ~190px, so an 844px iPhone lays out at ~610 and lands here. */
@media (max-height:700px){
  .identity{padding-top:14px}
  h1{font-size:clamp(21px,5.9vw,25px)}
  .role{font-size:12.5px;margin-top:4px}
  .org{font-size:11.5px}
  .actions{padding-top:11px;gap:8px}
  .save{min-height:48px}
  .row{min-height:50px}
  .rows{gap:7px}
  .foot{padding-top:7px}
}

@media (max-height:600px){
  .identity{padding-top:12px}
  h1{font-size:clamp(20px,5.6vw,23px)}
  .actions{padding-top:9px}
  .save{min-height:45px;font-size:12.5px}
  .row{min-height:47px}
  .row .ic{width:31px;height:31px}
  .row .val{font-size:13.5px}
  .foot{padding-top:4px}
  /* .ghost keeps its 44px here on purpose - the 4px is not worth a target
     that fails the minimum on the smallest screens, which is exactly where
     mis-taps happen. */
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .save:hover,.save:active{transform:none}
}