/* ============================================================
   PickTalk — styles
   Palette: warm grey paper, pine green, mustard, brick red
   ============================================================ */

:root{
  --paper:#E9E6DF;
  --card:#F4F2ED;
  --ink:#201E1C;
  --soft:#57524C;
  --pine:#2C5A4B;
  --pine-dark:#1F4235;
  --gold:#D9A222;
  --live:#BE4127;
  --line:rgba(32,30,28,.14);
  --dim1:rgba(32,30,28,.08);
  --dim2:rgba(32,30,28,.12);
  --dim3:rgba(32,30,28,.18);
  --on-pine:#F4F2ED;
  --veil:rgba(32,30,28,.45);
  --shadow:0 1px 0 rgba(32,30,28,.10);
  --radius:14px;
}

/* night version — follows the phone/computer setting */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#1D1B18;
    --card:#27241F;
    --ink:#ECE7DF;
    --soft:#ABA49B;
    --pine:#5A9480;
    --pine-dark:#6EA893;
    --gold:#DFAC38;
    --live:#DB7154;
    --line:rgba(236,231,223,.15);
    --dim1:rgba(236,231,223,.09);
    --dim2:rgba(236,231,223,.14);
    --dim3:rgba(236,231,223,.24);
    --on-pine:#15130F;
    --veil:rgba(0,0,0,.6);
    --shadow:0 1px 0 rgba(0,0,0,.4);
  }
}

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

body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Karla",system-ui,sans-serif;
  font-size:18px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:3rem;
}

button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- top bar ---------- */
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;
  max-width:660px;margin:0 auto;padding:1.4rem 1.25rem 1rem;
}
.mark{
  display:flex;align-items:center;gap:.5rem;
  font-family:"Syne",sans-serif;font-weight:800;font-size:1.6rem;
  letter-spacing:-.03em;color:var(--pine);line-height:1;
}
.mark svg{
  width:1.5rem;height:1.5rem;color:var(--gold);
  background:var(--pine);border-radius:9px;padding:.32rem;
  box-sizing:content-box;
}
.mark span{color:var(--ink);opacity:.55}
.bar-stats{display:flex;align-items:center;gap:1.1rem}
.stat{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.stat-num{font-family:"DM Mono",monospace;font-size:1.15rem;font-weight:500}
.stat-lab{font-size:.73rem;text-transform:uppercase;letter-spacing:.09em;color:var(--soft)}

.ghost{
  border:1px solid var(--line);border-radius:99px;
  padding:.5rem 1rem;font-size:.95rem;color:var(--soft);
  background:transparent;transition:border-color .15s,color .15s;
}
.ghost:hover{border-color:var(--ink);color:var(--ink)}
.ghost.small{padding:.4rem .85rem;font-size:.85rem}

/* ---------- progress panel ---------- */
.panel{
  max-width:660px;margin:0 auto 1rem;padding:1.25rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
}
.panel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;text-align:center}
.panel-grid div{display:flex;flex-direction:column;gap:.15rem}
.panel-grid b{font-family:"DM Mono",monospace;font-size:1.55rem;font-weight:500}
.panel-grid span{font-size:.73rem;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)}

.unlock{margin:1.25rem 0 .25rem}
.unlock-track{height:6px;background:var(--dim2);border-radius:99px;overflow:hidden}
.unlock-fill{height:100%;background:var(--pine);width:0%;transition:width .4s ease}
.unlock p{font-size:.92rem;color:var(--soft);margin-top:.5rem}

.mini-h{
  font-family:"Karla",sans-serif;font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--soft);
  margin:1.4rem 0 .5rem;
}

/* ---------- practice calendar ---------- */
.cal{
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);
  grid-auto-columns:1fr;gap:3px;margin-bottom:.45rem;
}
.cal span{aspect-ratio:1;border-radius:3px;background:var(--dim1)}
.cal .l1{background:rgba(44,90,75,.30)}
.cal .l2{background:rgba(44,90,75,.60)}
.cal .l3{background:var(--pine)}
.cal .today{outline:2px solid var(--gold);outline-offset:1px}
.cal .future{background:transparent}
.cal-legend{
  display:flex;align-items:center;gap:.3rem;justify-content:flex-end;
  font-size:.68rem;color:var(--soft);
}
.cal-legend i{width:10px;height:10px;border-radius:3px;background:var(--dim1)}
.cal-legend .l1{background:rgba(44,90,75,.30)}
.cal-legend .l2{background:rgba(44,90,75,.60)}
.cal-legend .l3{background:var(--pine)}
.log{list-style:none;display:flex;flex-direction:column;gap:.35rem;max-height:200px;overflow-y:auto}
.log li{
  display:flex;justify-content:space-between;gap:1rem;
  font-size:.92rem;padding-bottom:.35rem;border-bottom:1px solid var(--line);
}
.log li span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.log li span:last-child{font-family:"DM Mono",monospace;color:var(--soft);flex-shrink:0}
.log .empty{color:var(--soft);border:none;justify-content:flex-start}

.danger{
  margin-top:1.25rem;font-size:.82rem;color:var(--live);
  border-bottom:1px solid rgba(190,65,39,.4);padding-bottom:1px;
}

/* ---------- group + backup ---------- */
.group-note{font-size:.92rem;color:var(--soft);margin-bottom:.6rem}
.group-note b{color:var(--ink)}
.group-note.subtle{font-size:.85rem;margin-bottom:.35rem}
.group-note.error{color:var(--live);margin-bottom:.35rem}
.group-join{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}
.group-join input{
  font:inherit;color:var(--ink);background:var(--paper);width:100%;
  border:1px solid var(--line);border-radius:10px;padding:.55rem .8rem;
}
.group-join input::placeholder{color:var(--soft)}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.25rem}

.board{list-style:none;display:flex;flex-direction:column;gap:.45rem;margin-bottom:.35rem}
.board li{
  display:grid;grid-template-columns:auto 1fr auto;gap:.8rem;align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:.55rem .8rem;
}
.board li.me{border-color:var(--pine);background:rgba(44,90,75,.07)}
.board li.empty{display:block;background:none;border:none;padding:.25rem 0;
  font-size:.85rem;color:var(--soft)}
.b-rank{
  font-family:"DM Mono",monospace;font-size:.85rem;color:var(--soft);
  min-width:1.3rem;text-align:center;
}
.board li:first-child:not(.empty) .b-rank{color:var(--gold);font-weight:500}
.b-main{min-width:0}
.b-name{display:flex;align-items:center;gap:.45rem;font-weight:600;font-size:1.02rem}
.b-name > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.you-pill{
  flex-shrink:0;background:var(--pine);color:var(--on-pine);font-size:.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;padding:.12rem .45rem;border-radius:99px;
}
.b-sub{font-size:.82rem;color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-today{
  font-family:"DM Mono",monospace;font-size:1rem;color:var(--soft);
  display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;
}
.b-today.goal{color:var(--pine)}
.b-today small{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em}

/* ---------- views ---------- */
main{max-width:660px;margin:0 auto;padding:.5rem 1.25rem}
.view{display:none}
.view.is-on{display:block;animation:rise .3s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.eyebrow{
  font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--soft);margin:1.75rem 0 .6rem;
}
.view.is-on .eyebrow:first-child{margin-top:.75rem}

/* ---------- welcome popup (first visit) ---------- */
.welcome{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  padding:1.25rem;
  background:var(--veil);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  animation:veilIn .35s ease;
}
.welcome[hidden]{display:none}
.welcome-card{
  width:100%;max-width:420px;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:1.75rem 1.5rem 1.5rem;text-align:center;
  box-shadow:0 18px 50px rgba(32,30,28,.28);
  animation:popCard .5s cubic-bezier(.34,1.56,.64,1) both;
}
.welcome-icon{
  font-size:2.6rem;line-height:1;margin-bottom:.5rem;
  display:inline-block;transform-origin:70% 70%;
  animation:wave 1.6s ease .4s 2;
}
.welcome-title{
  font-family:"Syne",sans-serif;font-weight:800;font-size:1.6rem;
  letter-spacing:-.02em;color:var(--pine);margin-bottom:.3rem;
}
.welcome-sub{font-size:1rem;color:var(--soft);margin-bottom:1.1rem}
.welcome .how-steps{text-align:left;margin:0 auto 1.4rem;max-width:320px}
.welcome .how-steps li{
  opacity:0;animation:stepIn .45s ease forwards;
}
.welcome .how-steps li:nth-child(1){animation-delay:.30s}
.welcome .how-steps li:nth-child(2){animation-delay:.48s}
.welcome .how-steps li:nth-child(3){animation-delay:.66s}
.welcome .go{margin-top:0;animation:stepIn .45s ease .84s both}

@keyframes veilIn{from{opacity:0}to{opacity:1}}
@keyframes popCard{
  from{opacity:0;transform:translateY(26px) scale(.92)}
  to{opacity:1;transform:none}
}
@keyframes stepIn{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:none}
}
@keyframes wave{
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(18deg)}
  30%{transform:rotate(-10deg)}
  45%{transform:rotate(14deg)}
  60%{transform:rotate(-6deg)}
  75%{transform:rotate(8deg)}
}

/* comeback variant */
.welcome-icon.flame{animation:flicker 1.1s ease .35s 3;transform-origin:50% 85%}
@keyframes flicker{
  0%,100%{transform:scale(1)}
  25%{transform:scale(1.18) rotate(-4deg)}
  50%{transform:scale(.94) rotate(3deg)}
  75%{transform:scale(1.12) rotate(-2deg)}
}
.back-big{
  display:flex;align-items:baseline;justify-content:center;gap:.5rem;
  margin:.2rem 0 .9rem;animation:stepIn .45s ease .25s both;
}
.back-big b{
  font-family:"DM Mono",monospace;font-weight:500;font-size:3.4rem;
  line-height:1;color:var(--pine);font-variant-numeric:tabular-nums;
}
.back-big span{font-size:.95rem;color:var(--soft)}
.back-dots{justify-content:center;margin-bottom:1rem;animation:stepIn .45s ease .5s both}
.welcome #backMsg{animation:stepIn .45s ease .65s both;margin-bottom:1.2rem}

.how-steps{list-style:none;display:flex;flex-direction:column;gap:.45rem}
.how-steps li{display:flex;align-items:baseline;gap:.6rem;font-size:.95rem;color:var(--soft)}
.how-steps b{
  flex-shrink:0;width:1.35rem;height:1.35rem;border-radius:50%;
  background:var(--pine);color:var(--on-pine);font-family:"DM Mono",monospace;
  font-size:.75rem;font-weight:500;display:flex;align-items:center;justify-content:center;
  transform:translateY(.15rem);
}

/* ---------- daily dots ---------- */
.day-dots{display:flex;gap:.5rem;margin:0 0 1.25rem}
.day-dot{
  width:14px;height:14px;border-radius:50%;
  background:var(--dim2);transition:background .3s;
}
.day-dot.on{background:var(--pine)}
.day-dots.all-done .day-dot{background:var(--gold)}

/* ---------- chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{
  border:1px solid var(--line);border-radius:99px;padding:.5rem 1.05rem;
  font-size:.95rem;background:transparent;transition:all .15s;
}
.chip:hover:not(:disabled){border-color:var(--ink)}
.chip.is-picked{background:var(--pine);border-color:var(--pine);color:var(--on-pine)}
.chip:disabled{opacity:.35;cursor:not-allowed}
.chip small{font-family:"DM Mono",monospace;opacity:.7;margin-left:.35rem}

/* ---------- topic card ---------- */
.topic-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;margin-top:1rem;box-shadow:var(--shadow);
}
.topic-tag{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin-bottom:.6rem;
}
.topic-text{
  font-family:"Syne",sans-serif;font-weight:700;font-size:1.7rem;
  line-height:1.22;letter-spacing:-.015em;
}
.topic-card .topic-text{margin-bottom:1.1rem}
.topic-text.big{font-size:2.1rem;margin:.5rem 0 1.5rem}
.topic-text.mid{font-size:1.3rem;color:var(--ink);font-weight:700;margin-bottom:1.25rem}

/* ---------- switches ---------- */
.switches{display:flex;flex-direction:column;gap:.9rem}
.switch{display:flex;align-items:flex-start;gap:.8rem;cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-body{
  flex-shrink:0;width:42px;height:24px;border-radius:99px;margin-top:2px;
  background:var(--dim3);position:relative;transition:background .18s;
}
.switch-body::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:var(--paper);transition:transform .18s;
}
.switch input:checked + .switch-body{background:var(--pine)}
.switch input:checked + .switch-body::after{transform:translateX(18px)}
.switch input:focus-visible + .switch-body{outline:3px solid var(--gold);outline-offset:3px}
.switch-text{font-size:.92rem;color:var(--soft);line-height:1.4}
.switch-text b{display:block;font-size:1.02rem;font-weight:600;color:var(--ink)}

/* ---------- primary button ---------- */
.go{
  display:block;width:100%;margin-top:1.75rem;padding:1.1rem;
  background:var(--pine);color:var(--on-pine);border-radius:var(--radius);
  font-family:"Syne",sans-serif;font-weight:700;font-size:1.15rem;letter-spacing:.01em;
  transition:background .15s,transform .1s;
}
.go:hover{background:var(--pine-dark)}
.go:active{transform:translateY(1px)}
#againBtn{display:block;width:100%;margin-top:.6rem;text-align:center}

/* ---------- prep ---------- */
.prep-clock{
  font-family:"DM Mono",monospace;font-size:4rem;font-weight:500;
  color:var(--gold);line-height:1;margin-bottom:1.5rem;
}
.plan{list-style:none;counter-reset:p;display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.75rem}
.plan li{
  display:flex;gap:.8rem;font-size:.98rem;color:var(--soft);
  padding-bottom:.7rem;border-bottom:1px solid var(--line);
}
.plan li b{color:var(--ink);font-weight:600;min-width:5.5rem;flex-shrink:0}
.plan li em{font-family:"DM Mono",monospace;font-style:normal;margin-left:auto;flex-shrink:0}
.plan li div{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.plan li i{font-style:italic;font-size:.95rem;color:var(--pine);font-weight:500}

/* ---------- speaking ---------- */
.live{
  display:flex;align-items:center;gap:.5rem;font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;color:var(--live);margin:.75rem 0 .6rem;
}
.dot{width:9px;height:9px;border-radius:50%;background:var(--live);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

.clock{
  font-family:"DM Mono",monospace;font-size:5.5rem;font-weight:500;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
}
.clock.warn{color:var(--live)}

.runway{display:flex;gap:3px;height:14px;margin:1.5rem 0 1.25rem}
.seg{background:var(--dim2);border-radius:3px;overflow:hidden;position:relative}
.seg-fill{position:absolute;inset:0;background:var(--pine);transform-origin:left;transform:scaleX(0)}
.seg.now .seg-fill{background:var(--gold)}

.phase{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.15rem 1.25rem;margin-bottom:1.5rem;
}
.phase-name{
  display:block;font-family:"Syne",sans-serif;font-weight:800;font-size:1.4rem;
  color:var(--pine);margin-bottom:.25rem;
}
.phase-tip{font-size:1.05rem;color:var(--soft)}
.phase-phrase{font-size:1.15rem;font-style:italic;color:var(--pine);font-weight:500;margin-top:.35rem}
.phase.flash{animation:flash .45s ease}
@keyframes flash{0%{transform:scale(.985);opacity:.5}100%{transform:none;opacity:1}}

/* ---------- done ---------- */
.done-line{
  font-family:"Syne",sans-serif;font-weight:800;font-size:2.25rem;line-height:1.15;
  letter-spacing:-.02em;margin:.5rem 0 1.25rem;
}
.done-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1.25rem}
.done-grid div{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem;display:flex;flex-direction:column;gap:.2rem;
}
.done-grid b{font-family:"DM Mono",monospace;font-size:1.7rem;font-weight:500}
.done-grid span{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--soft)}
.done-note{font-size:.98rem;color:var(--soft)}

/* ---------- footer ---------- */
.foot{
  max-width:660px;margin:2.5rem auto 0;padding:0 1.25rem;
  font-size:.82rem;color:var(--soft);text-align:center;
}

/* ---------- small screens ---------- */
@media(max-width:520px){
  .clock{font-size:4.2rem}
  .mark{font-size:1.4rem}
  .topic-text{font-size:1.45rem}
  .topic-text.big{font-size:1.7rem}
  .panel-grid{grid-template-columns:1fr 1fr}
  .bar{padding-bottom:.75rem}
}

/* ---------- topic extras: favourite star + challenge ---------- */
.topic-head{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.fav-btn{font-size:1.5rem;line-height:1;color:var(--soft);transition:color .15s,transform .12s}
.fav-btn:hover{color:var(--gold)}
.fav-btn.is-fav{color:var(--gold)}
.fav-btn:active{transform:scale(1.25)}
.fav-item{text-align:left;color:var(--ink);font-size:.92rem;padding:0;
  border-bottom:1px dashed transparent}
.fav-item:hover{border-bottom-color:var(--pine);color:var(--pine)}

.challenge-line{
  display:flex;align-items:baseline;gap:.5rem;
  font-size:.95rem;font-weight:500;color:var(--gold);
  margin:.35rem 0 .9rem;
}
.challenge-x{color:var(--soft);font-size:1.1rem;line-height:1}
.challenge-x:hover{color:var(--live)}
#prepChallenge,#speakChallenge{margin:.1rem 0 1rem}

/* ---------- camera + recording ---------- */
.cam-wrap{position:relative;width:132px;margin:.25rem 0 .9rem}
.cam-wrap video{
  width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;
  border:1px solid var(--line);transform:scaleX(-1);background:#000;
}
.rec-dot{
  position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;
  background:var(--live);animation:pulse 1.6s infinite;
}
.rec-wrap{margin:1rem 0 1.25rem;display:flex;flex-direction:column;gap:.6rem;align-items:flex-start}
.rec-wrap video{
  width:100%;max-width:320px;border-radius:var(--radius);
  border:1px solid var(--line);background:#000;
}

/* ---------- achievements ---------- */
.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem}
.badge{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:.6rem .3rem;opacity:.45;
}
.badge.is-earned{opacity:1;border-color:rgba(217,162,34,.5)}
.badge span{font-size:1.5rem;line-height:1}
.badge small{font-size:.66rem;color:var(--soft);line-height:1.2}
.badge-earned{
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  color:var(--gold);margin-bottom:.2rem;
}
.welcome-icon.badge-pop{animation:badgePop .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes badgePop{
  0%{transform:scale(0) rotate(-30deg)}
  70%{transform:scale(1.25) rotate(6deg)}
  100%{transform:scale(1) rotate(0)}
}

/* ---------- board tabs + party ---------- */
.board-tabs{margin-bottom:.6rem}
.board-tabs .chip{padding:.35rem .85rem;font-size:.85rem}
.board-party{
  font-size:.95rem;font-weight:600;color:var(--pine);
  margin-bottom:.6rem;animation:rise .3s ease;
}

@media(max-width:520px){
  .badges{grid-template-columns:repeat(3,1fr)}
}

/* pine tints that need a lighter base at night */
@media (prefers-color-scheme: dark){
  .cal .l1,.cal-legend .l1{background:rgba(90,148,128,.35)}
  .cal .l2,.cal-legend .l2{background:rgba(90,148,128,.65)}
  .board li.me{background:rgba(90,148,128,.12)}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}