/* ============================================================
   PRECEDENT PHONE — LIQUID GLASS
   Self-contained. No libraries, no images.
   Scale the whole thing with font-size on .pf-phone.

   Each glass surface is four layers:
     1. backdrop-filter    → blurs + saturates what's behind it
     2. tint gradient      → the body of the glass
     3. specular rim       → 1px gradient border, bright top-left
     4. drifting highlight → the "liquid" part, slowly moving
   ============================================================ */
.pf-phone{
  --pf-accent:#7ee04a;
  --pf-ink:#f6f6f2;
  --pf-dim:#9a9c92;
  --pf-faint:#6b6d63;
  --pf-mono:'JetBrains Mono',ui-monospace,monospace;
  --pf-display:'Archivo',system-ui,sans-serif;

  font-size:clamp(13px,2.4vw,16px);    /* ← master scale dial */
  font-family:var(--pf-display);
  width:min(17.5em,80vw);
  aspect-ratio:9 / 19.5;
  border-radius:2.9em;
  padding:.6em;
  position:relative;
  isolation:isolate;
  background:linear-gradient(155deg,#4a4d44 0%,#1a1c18 16%,#111310 52%,#33362e 88%,#5a5d53 100%);
  box-shadow:
    0 0 0 1px rgba(246,246,242,.10),
    0 3em 6em rgba(0,0,0,.7),
    inset 0 0 .5em rgba(246,246,242,.18);
}
/* specular sweep along the titanium edge */
.pf-phone::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,transparent 30%,rgba(246,246,242,.16) 47%,transparent 62%);
  animation:pfEdge 9s ease-in-out infinite;
}
@keyframes pfEdge{0%,100%{opacity:.25;transform:translateX(-4%)}50%{opacity:.7;transform:translateX(4%)}}

.pf-screen{
  position:relative;height:100%;border-radius:2.4em;overflow:hidden;
  display:flex;flex-direction:column;padding:.9em .7em .5em;
  background:#070806;color:var(--pf-ink);
}

/* ---- wallpaper: drifting colour blooms. glass needs this to refract ---- */
.pf-wall{position:absolute;inset:-20%;z-index:0;pointer-events:none;filter:blur(1.4em)}
.pf-orb{position:absolute;border-radius:50%;mix-blend-mode:screen}
.pf-orb.a{
  width:78%;height:42%;left:-12%;top:4%;
  background:radial-gradient(circle,rgba(126,224,74,.42),transparent 68%);
  animation:pfDriftA 17s ease-in-out infinite;
}
.pf-orb.b{
  width:86%;height:46%;right:-20%;top:34%;
  background:radial-gradient(circle,rgba(226,168,74,.36),transparent 68%);
  animation:pfDriftB 21s ease-in-out infinite;
}
.pf-orb.c{
  width:96%;height:44%;left:-6%;bottom:-4%;
  background:radial-gradient(circle,rgba(64,142,190,.34),transparent 70%);
  animation:pfDriftC 25s ease-in-out infinite;
}
@keyframes pfDriftA{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(14%,7%) scale(1.14)}66%{transform:translate(-8%,12%) scale(.94)}}
@keyframes pfDriftB{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(-16%,-9%) scale(1.18)}75%{transform:translate(6%,10%) scale(.9)}}
@keyframes pfDriftC{0%,100%{transform:translate(0,0) scale(1)}45%{transform:translate(12%,-11%) scale(1.1)}80%{transform:translate(-12%,-4%) scale(.96)}}

/* veil keeps text readable over the blooms */
.pf-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,8,6,.62) 0%,rgba(7,8,6,.24) 30%,rgba(7,8,6,.42) 68%,rgba(7,8,6,.78) 100%);
}
/* glass sheen across the display face */
.pf-screen::after{
  content:'';position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:inherit;
  background:linear-gradient(126deg,rgba(246,246,242,.10) 0%,transparent 30%,transparent 78%,rgba(246,246,242,.05) 100%);
}

/* real content sits above the wallpaper */
.pf-island,.pf-status,.pf-lock,.pf-time,.pf-date,.pf-timer,.pf-stack,.pf-bar{position:relative;z-index:4}

/* ---- dynamic island ---- */
.pf-island{
  position:absolute;top:.5em;left:50%;transform:translateX(-50%);z-index:5;
  width:5.6em;height:1.5em;border-radius:100px;background:#000;
  display:flex;align-items:center;justify-content:flex-end;padding-right:.5em;
  box-shadow:inset 0 0 0 1px rgba(246,246,242,.06),0 .2em .5em rgba(0,0,0,.5);
}
.pf-island i{width:.42em;height:.42em;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#37485a,#080d12 72%);
  box-shadow:0 0 0 1px rgba(246,246,242,.09),inset 0 0 .15em rgba(120,180,255,.5)}

/* ---- status bar ---- */
.pf-status{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--pf-mono);font-size:.55em;letter-spacing:.06em;height:1.7em;padding:0 .55em;
  text-shadow:0 1px .2em rgba(0,0,0,.5);
}
.pf-status .pf-sig{display:flex;gap:.6em;align-items:center}
.pf-status svg{display:block}

/* ---- clock ---- */
.pf-lock{margin:1.4em auto .5em;width:.95em;opacity:.6;filter:drop-shadow(0 1px .15em rgba(0,0,0,.6))}
.pf-lock svg{display:block;width:100%}
.pf-time{
  text-align:center;font-weight:800;font-size:3.1em;line-height:.95;letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;text-shadow:0 .03em .16em rgba(0,0,0,.55);
}
.pf-date{
  text-align:center;font-family:var(--pf-mono);font-size:.52em;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pf-dim);margin-top:.85em;
  text-shadow:0 1px .2em rgba(0,0,0,.6);
}

/* ============================================================
   THE GLASS RECIPE — shared by the timer pill and the cards
   ============================================================ */
.pf-glass{
  position:relative;isolation:isolate;overflow:hidden;
  -webkit-backdrop-filter:blur(1.1em) saturate(185%) brightness(1.12);
  backdrop-filter:blur(1.1em) saturate(185%) brightness(1.12);
  background:linear-gradient(150deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.06) 42%,rgba(255,255,255,.03) 100%);
  box-shadow:
    0 .5em 1.4em rgba(0,0,0,.34),
    inset 0 .06em .04em rgba(255,255,255,.34),
    inset 0 -.06em .06em rgba(0,0,0,.18);
}
/* 1px specular rim — bright top-left, faint bottom-right */
.pf-glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:2;
  background:linear-gradient(145deg,
    rgba(255,255,255,.62) 0%,
    rgba(255,255,255,.10) 26%,
    rgba(255,255,255,0) 52%,
    rgba(255,255,255,.30) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
}
/* the liquid part — a specular blob drifting inside the surface */
.pf-glass::after{
  content:'';position:absolute;inset:-40%;pointer-events:none;z-index:1;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.30),transparent 46%);
  animation:pfLiquid 11s ease-in-out infinite;
  animation-delay:var(--pf-delay,0s);
}
@keyframes pfLiquid{
  0%,100%{transform:translate(-6%,-4%) scale(1)}
  35%{transform:translate(38%,16%) scale(1.28)}
  70%{transform:translate(10%,34%) scale(.88)}
}

/* ---- response timer pill ---- */
.pf-timer{
  align-self:center;margin:1em auto 0;
  display:inline-flex;align-items:center;gap:.45em;
  padding:.38em .75em;border-radius:100px;
  font-family:var(--pf-mono);font-size:.55em;letter-spacing:.08em;
  color:var(--pf-ink);white-space:nowrap;
  opacity:0;transform:translateY(.5em) scale(.9);
  transition:opacity .45s ease,transform .5s cubic-bezier(.34,1.4,.64,1),
             background .6s ease,color .6s ease,box-shadow .6s ease;
}
.pf-timer.show{opacity:1;transform:translateY(0) scale(1)}
.pf-timer .pf-dot{
  width:.45em;height:.45em;border-radius:50%;flex:none;background:var(--pf-accent);
  box-shadow:0 0 .5em rgba(126,224,74,.9);position:relative;z-index:3;
  animation:pfPulse 1s ease-in-out infinite;
}
.pf-timer span{position:relative;z-index:3}
@keyframes pfPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.68)}}
/* when the reply lands, green bleeds through the glass instead of replacing it */
.pf-timer.done{
  background:linear-gradient(150deg,rgba(126,224,74,.34) 0%,rgba(126,224,74,.14) 55%,rgba(126,224,74,.08) 100%);
  color:#e8ffd6;
  box-shadow:
    0 .5em 1.6em rgba(126,224,74,.28),
    inset 0 .06em .04em rgba(255,255,255,.45),
    inset 0 -.06em .06em rgba(0,0,0,.14);
}
.pf-timer.done .pf-dot{animation:none;box-shadow:0 0 .7em rgba(126,224,74,1)}

/* ---- notification stack, anchored to the bottom ---- */
.pf-stack{margin-top:auto;display:flex;flex-direction:column;gap:.42em;padding-bottom:.25em}
.pf-note{
  display:flex;gap:.5em;align-items:flex-start;
  padding:.58em .62em;border-radius:1.15em;
  opacity:0;transform:translateY(1.3em) scale(.9);filter:blur(.25em);
  transition:opacity .5s ease,
             transform .62s cubic-bezier(.34,1.42,.5,1),
             filter .5s ease;
}
.pf-note.in{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
.pf-note.out{opacity:0;transform:translateY(-.6em) scale(.96);filter:blur(.2em);transition-duration:.4s}
.pf-ico{
  width:1.65em;height:1.65em;border-radius:.55em;flex:none;
  display:grid;place-items:center;position:relative;z-index:3;
  box-shadow:inset 0 .05em .04em rgba(255,255,255,.4),0 .15em .35em rgba(0,0,0,.3);
}
.pf-ico svg{width:.85em;height:.85em}
.pf-ico[data-k="in"]{background:linear-gradient(160deg,#9bef68,#6bc93c);color:#0c1206}
.pf-ico[data-k="out"]{background:linear-gradient(160deg,rgba(255,255,255,.32),rgba(255,255,255,.12));color:var(--pf-ink)}
.pf-ico[data-k="alert"]{background:linear-gradient(160deg,#f0ca66,#d4a33a);color:#231a05}
.pf-ico[data-k="booked"]{background:linear-gradient(160deg,#78c8f0,#3d93c4);color:#04161f}
.pf-body{min-width:0;flex:1;position:relative;z-index:3}
.pf-body b{display:block;font-size:.62em;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.pf-body span{display:block;font-size:.55em;color:#b9bbb2;line-height:1.4;margin-top:.08em}
.pf-body i{display:block;font-size:.55em;font-style:italic;color:#d8dad2;line-height:1.45;margin-top:.22em}
.pf-when{
  font-family:var(--pf-mono);font-size:.46em;letter-spacing:.08em;color:var(--pf-faint);
  flex:none;padding-top:.3em;position:relative;z-index:3;
}
.pf-note.sent .pf-when{color:var(--pf-accent);text-shadow:0 0 .5em rgba(126,224,74,.6)}

/* ---- home indicator ---- */
.pf-bar{
  width:6.5em;height:.28em;border-radius:100px;margin:.5em auto .1em;flex:none;
  background:rgba(246,246,242,.4);box-shadow:0 0 .4em rgba(255,255,255,.2);
}

/* fallback where backdrop-filter isn't supported */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pf-glass{background:linear-gradient(150deg,rgba(38,42,34,.94),rgba(20,23,18,.92))}
}
@media (prefers-reduced-motion:reduce){
  .pf-note,.pf-timer{transition:none}
  .pf-orb,.pf-glass::after,.pf-phone::before,.pf-timer .pf-dot{animation:none}
}