/* Appu Calling — warm, bright, phone-shaped. Teal from his shirt, sand from the cliffs behind him. */
:root{
  --cream:#fbf6ec; --paper:#fffdf8; --ink:#1d2a2f; --ink-soft:#5b6b70;
  --teal:#10776f; --teal-deep:#0b5a54; --teal-soft:#dcefe9; --mustard:#f0b429; --clay:#e2714f;
  --line:#e6ded0; --shadow:0 10px 24px rgba(29,42,47,.10); --radius:18px;
  --font:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI Variable Display","Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink); background:var(--cream);
  background-image:radial-gradient(circle at 12% 8%,rgba(16,119,111,.07),transparent 42%),
                   radial-gradient(circle at 88% 0%,rgba(240,180,41,.12),transparent 40%);
  min-height:100vh; padding-bottom:124px; -webkit-text-size-adjust:100%;
}
img{max-width:100%}
button{font:inherit}

/* top bar */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px clamp(16px,4vw,32px);position:sticky;top:0;z-index:5;
  background:rgba(251,246,236,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--teal);text-decoration:none;
  font-weight:800;font-size:1.15rem;letter-spacing:.2px}
.brand-dial{display:inline-flex;animation:tilt 9s ease-in-out infinite}
@keyframes tilt{0%,86%,100%{transform:rotate(0)}90%{transform:rotate(-14deg)}94%{transform:rotate(10deg)}}
.who{background:var(--teal-soft);color:var(--teal-deep);border-radius:999px;padding:.3em .9em;font-weight:700;font-size:.9rem}

/* hero contact card */
main{max-width:860px;margin:0 auto;padding:clamp(18px,4vw,30px) clamp(16px,4vw,32px) 10px}
.hero{display:flex;gap:clamp(16px,4vw,30px);align-items:center;background:var(--paper);
  border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);padding:clamp(18px,4vw,28px)}
.portrait{position:relative;flex:0 0 auto;width:150px;height:150px}
.portrait img{width:150px;height:150px;border-radius:50%;object-fit:cover;display:block;
  border:5px solid #fff;box-shadow:0 8px 20px rgba(29,42,47,.18)}
.portrait .ring{position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--teal);opacity:.35}
.portrait.ringing .ring{animation:ring 1.6s ease-out infinite}
@keyframes ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.25);opacity:0}}
.hero-text{min-width:0}
h1{margin:0;font-size:clamp(2rem,6vw,2.8rem);line-height:1.05;letter-spacing:-.5px}
.sub{margin:.2em 0 0;color:var(--ink-soft);font-weight:600}
.tag{margin:.7em 0 1em;font-size:1.02rem;line-height:1.5;max-width:46ch}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hint{color:var(--ink-soft);font-size:.9rem}
.btn{border:0;border-radius:999px;padding:.75em 1.4em;font-weight:800;cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease}
.btn:active{transform:translateY(1px)}
.btn-call{background:var(--teal);color:#fff;font-size:1.1rem;box-shadow:0 8px 18px rgba(16,119,111,.32)}
.btn-call:hover{background:var(--teal-deep);box-shadow:0 10px 22px rgba(16,119,111,.4)}

/* list */
.section-title{display:flex;align-items:baseline;gap:10px;margin:28px 0 12px;font-size:1.15rem;letter-spacing:.3px;
  text-transform:uppercase;color:var(--ink-soft)}
.section-title small{font-weight:700;color:var(--teal)}
.calls{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.calls li{min-width:0}
.call{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;cursor:pointer;box-shadow:0 2px 6px rgba(29,42,47,.05)}
.call:hover{border-color:var(--teal);box-shadow:0 8px 18px rgba(16,119,111,.12)}
.call[aria-current="true"]{border-color:var(--teal);background:#f3fbf8}
.ava{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;
  background:var(--teal-soft);color:var(--teal-deep)}
.call[aria-current="true"] .ava{background:var(--teal);color:#fff}
.meta{flex:1 1 auto;min-width:0;overflow:hidden}
.meta b{display:block;font-size:1.05rem;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta span{color:var(--ink-soft);font-size:.9rem}
.tiny{flex:0 0 auto;display:flex;align-items:flex-end;gap:2px;height:30px;width:92px}
.tiny i{flex:1;background:var(--teal);opacity:.35;border-radius:2px;min-height:2px}
.len{flex:0 0 auto;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.badge{display:inline-block;margin-left:.5em;background:var(--mustard);color:#3b2a00;border-radius:999px;
  padding:0 .6em;font-size:.72rem;font-weight:800;vertical-align:middle}
.loading{background:var(--paper);border:1px dashed var(--line);border-radius:var(--radius);padding:18px;color:var(--ink-soft)}
.locked{background:#fff6e2;border:1px solid #f1dcae;border-radius:var(--radius);padding:14px 16px;color:#6b5312}
.err{background:#fdeeea;border:1px solid #f3c7bb;color:#8a3419}

/* player */
.player{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;align-items:center;gap:14px;
  padding:12px clamp(12px,4vw,24px);background:rgba(255,253,248,.97);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(29,42,47,.10);backdrop-filter:blur(8px)}
.player[hidden],.who[hidden],.locked[hidden]{display:none}
.pmain{flex:1 1 auto;min-width:0}
.pline{display:flex;gap:10px;align-items:baseline;overflow:hidden;white-space:nowrap}
.pline strong{overflow:hidden;text-overflow:ellipsis}
.pline span{color:var(--ink-soft);font-size:.88rem;overflow:hidden;text-overflow:ellipsis}
.wave{display:flex;align-items:flex-end;gap:2px;height:40px;margin:6px 0 2px;cursor:pointer;touch-action:none}
.wave i{flex:1;background:var(--ink-soft);opacity:.25;border-radius:2px;min-height:2px;transition:opacity .1s}
.wave i.on{background:var(--teal);opacity:.9}
.wave:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:6px}
.ptime{display:flex;justify-content:space-between;color:var(--ink-soft);font-size:.8rem;font-variant-numeric:tabular-nums}
.pside{display:flex;gap:6px;flex:0 0 auto}
.pbtn{border:1px solid var(--line);background:#fff;border-radius:999px;min-width:44px;height:44px;padding:0 .6em;
  font-weight:700;cursor:pointer;color:var(--ink)}
.pbtn:hover{border-color:var(--teal);color:var(--teal)}
.pbtn.play{background:var(--teal);color:#fff;border-color:var(--teal);font-size:1.2rem;width:54px;height:54px;flex:0 0 auto}
.pbtn.rate{font-variant-numeric:tabular-nums}

.foot{text-align:center;color:var(--ink-soft);font-size:.9rem;padding:18px 16px 8px}

@media (max-width:720px){
  .wave{gap:1px}
  .wave i{min-width:1px}
  .badge{margin-left:0}
  .hero{flex-direction:column;text-align:center}
  .hero-actions{justify-content:center}
  .tag{margin-inline:auto}
  .tiny{display:none}
  .pside .pbtn:not(.rate):not(#closeBtn){display:none}
  .player{gap:10px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}