/* whoiamfile — app.css (interview) */

:root{
  --bg:#0b0d10;
  --bg-raise:#12151a;
  --bg-card:#151920;
  --bg-inset:#0e1116;
  --border:#242a33;
  --border-soft:#1c2129;
  --text:#e8ebef;
  --text-dim:#9aa4b0;
  --text-faint:#5f6a76;
  --accent:#7dd3a8;
  --accent-dim:#3f6b55;
  --accent-ink:#08110c;
  --never:#f2788a;
  --avoid:#e6b566;
  --like:#8fc7f2;
  --love:#7dd3a8;
  --danger:#f2788a;
  --shadow:0 12px 40px -18px rgba(0,0,0,.8);
  --mono:ui-monospace,'SF Mono','Cascadia Code','JetBrains Mono',Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7f8;
    --bg-raise:#eef0f2;
    --bg-card:#ffffff;
    --bg-inset:#f1f3f5;
    --border:#d8dde3;
    --border-soft:#e4e8ec;
    --text:#1a2028;
    --text-dim:#505b67;
    --text-faint:#8a94a0;
    --accent:#1f7a4d;
    --accent-dim:#9ccdb4;
    --accent-ink:#ffffff;
    --never:#c2334d;
    --avoid:#8f5d10;
    --like:#2b6cb0;
    --love:#1f7a4d;
    --danger:#c2334d;
    --shadow:0 12px 32px -20px rgba(20,30,40,.35);
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);font-family:var(--sans);
  line-height:1.55;-webkit-font-smoothing:antialiased;
  min-height:100vh;overflow-x:hidden;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
textarea{font:inherit;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
::selection{background:var(--accent-dim);color:var(--text)}

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

/* ───────── header ───────── */
.topbar{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border-soft);
}
.topbar-in{
  max-width:72rem;margin:0 auto;padding:.7rem 1.1rem;
  display:flex;align-items:center;gap:.8rem;
}
.wordmark{font-family:var(--mono);font-size:.95rem;color:var(--text);text-decoration:none;flex-shrink:0}
.wordmark span{color:var(--accent)}
.topbar .spacer{flex:1}
.facts-pill{
  font-family:var(--mono);font-size:.75rem;color:var(--text-dim);
  border:1px solid var(--border);border-radius:999px;padding:.28rem .75rem;
  background:var(--bg-raise);white-space:nowrap;transition:transform .18s ease;
}
.facts-pill b{color:var(--accent);font-weight:600}
.facts-pill.pulse{transform:scale(1.12)}
/* Phones: the pill + Domains + Get-my-file overflow a 390px topbar and force a
   page zoom-out; the bottom sheet bar already shows the facts count there. */
@media (max-width:31.99rem){.facts-pill{display:none}}
.langsw{
  display:inline-flex;flex-shrink:0;border:1px solid var(--border);
  border-radius:999px;overflow:hidden;font-family:var(--mono);
}
.langsw button{
  background:none;border:0;color:var(--text-faint);font-family:inherit;
  font-size:.72rem;font-weight:600;letter-spacing:.04em;
  padding:.3rem .55rem;cursor:pointer;transition:color .15s,background .15s;
}
.langsw button.sel{color:var(--accent-ink);background:var(--accent)}
/* All :hover rules live behind (hover:hover)+(pointer:fine): on touch, the
   browser keeps :hover stuck at the last tap point and re-applies it to
   whatever element lands there after a re-render (phantom "marked" option). */
@media (hover: hover) and (pointer: fine){
  .langsw button:not(.sel):hover{color:var(--text)}
}
/* Phones: keep the topbar inside 390px — compact toggle + buttons, tighter
   gaps, no label wrapping (PT labels are longer than EN). */
.topbar .btn{white-space:nowrap}
@media (max-width:31.99rem){
  .topbar-in{gap:.5rem}
  .langsw button{padding:.26rem .42rem;font-size:.68rem}
  .topbar .btn-small{padding:.4rem .55rem;font-size:.78rem}
}
.btn{
  display:inline-block;border:1px solid var(--border);border-radius:10px;
  padding:.55rem 1.05rem;font-size:.9rem;font-weight:550;line-height:1.3;
  background:var(--bg-card);transition:border-color .15s,background .15s,transform .06s;
  text-align:center;
}
@media (hover: hover) and (pointer: fine){
  .btn:hover{border-color:var(--text-faint)}
}
.btn:active{transform:scale(.98)}
.btn-primary{
  background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  font-weight:650;
}
@media (hover: hover) and (pointer: fine){
  .btn-primary:hover{filter:brightness(1.07);border-color:var(--accent)}
}
.btn-small{padding:.4rem .8rem;font-size:.82rem;border-radius:8px}
.btn-danger{color:var(--danger);border-color:var(--border)}
@media (hover: hover) and (pointer: fine){
  .btn-danger:hover{border-color:var(--danger)}
}
.btn:disabled{opacity:.45;cursor:default}

/* ───────── layout ───────── */
.layout{
  max-width:72rem;margin:0 auto;padding:1.4rem 1.1rem 7rem;
  display:grid;grid-template-columns:minmax(0,1fr);gap:2rem;
}
@media (min-width:64rem){
  .layout{grid-template-columns:minmax(0,1fr) 24rem;padding-bottom:3rem}
}
.stage{min-width:0}

/* ───────── home / domain picker ───────── */
.home-head h1{font-size:clamp(1.5rem,4.5vw,2.1rem);letter-spacing:-.02em;line-height:1.15}
.home-head p{color:var(--text-dim);margin-top:.5rem;max-width:38rem;font-size:.95rem}
.home-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.3rem 0 .4rem}
.overall{
  margin-top:1rem;font-family:var(--mono);font-size:.75rem;color:var(--text-faint);
  display:flex;align-items:center;gap:.7rem;
}
.overall .track{flex:1;max-width:16rem;height:4px;border-radius:2px;background:var(--border-soft);overflow:hidden}
.overall .fill{height:100%;background:var(--accent);border-radius:2px;transition:width .4s ease}
.domain-grid{
  margin-top:1.5rem;display:grid;gap:.6rem;
  grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr));
}
.domain-card{
  display:flex;align-items:center;gap:.75rem;text-align:left;
  background:var(--bg-card);border:1px solid var(--border-soft);border-radius:12px;
  padding:.8rem .95rem;transition:border-color .15s,transform .12s;
}
@media (hover: hover) and (pointer: fine){
  .domain-card:hover{border-color:var(--accent-dim);transform:translateY(-1px)}
}
.domain-card .emoji{font-size:1.25rem;flex-shrink:0}
.domain-card .dc-body{min-width:0;flex:1}
.domain-card .dc-title{font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:.4rem}
.domain-card .dc-sub{font-size:.76rem;color:var(--text-faint);line-height:1.35;margin-top:.1rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.domain-card .dc-meta{font-family:var(--mono);font-size:.68rem;color:var(--text-faint);margin-top:.3rem}
.domain-card .dc-meta .got{color:var(--accent)}
.domain-card.done{border-color:var(--accent-dim)}
.domain-card.done .dc-title::after{content:"✓";color:var(--accent);font-size:.8rem}

/* ───────── quiz ───────── */
.quiz-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.4rem}
.quiz-head .emoji{font-size:1.3rem}
.quiz-head .qh-title{font-weight:650;font-size:1rem}
.quiz-head .qh-count{font-family:var(--mono);font-size:.72rem;color:var(--text-faint);margin-left:auto;white-space:nowrap}
.quiz-track{height:4px;border-radius:2px;background:var(--border-soft);overflow:hidden;margin-bottom:1.6rem}
.quiz-track .fill{height:100%;background:var(--accent);border-radius:2px;transition:width .25s ease}

.qcard{transition:opacity .16s ease,transform .16s ease}
.qcard.out{opacity:0;transform:translateX(-10px)}
.qcard.in{opacity:0;transform:translateX(10px);transition:none}
.qcard .qtext{font-size:clamp(1.15rem,3.6vw,1.5rem);font-weight:650;letter-spacing:-.015em;line-height:1.3;max-width:36rem}
.qcard .qsub{color:var(--text-faint);font-size:.85rem;margin-top:.35rem}

.answers{margin-top:1.5rem}

/* scale buttons */
.scale-row{display:grid;gap:.55rem;grid-template-columns:1fr}
@media (min-width:34rem){.scale-row{grid-template-columns:repeat(5,1fr)}}
.scale-btn{
  --c:var(--text-dim);
  border:1.5px solid var(--border);border-radius:12px;background:var(--bg-card);
  padding:.85rem .6rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  transition:border-color .12s,background .12s,transform .08s;
  min-height:4.4rem;justify-content:center;position:relative;
}
@media (max-width:33.99rem){
  .scale-btn{flex-direction:row;justify-content:flex-start;gap:.7rem;min-height:3.3rem;padding:.7rem 1rem}
}
.scale-btn .k{font-family:var(--mono);font-weight:700;font-size:.95rem;color:var(--c)}
.scale-btn .d{font-size:.72rem;color:var(--text-faint)}
@media (hover: hover) and (pointer: fine){
  .scale-btn:hover{border-color:var(--c);transform:translateY(-1px)}
}
.scale-btn:active{transform:scale(.97)}
.scale-btn[data-level="NEVER"]{--c:var(--never)}
.scale-btn[data-level="avoid"]{--c:var(--avoid)}
.scale-btn[data-level="meh"]{--c:var(--text-dim)}
.scale-btn[data-level="like"]{--c:var(--like)}
.scale-btn[data-level="LOVE"]{--c:var(--love)}
.scale-btn.sel{border-color:var(--c);background:color-mix(in srgb, var(--c) 12%, var(--bg-card))}
.scale-btn.sel .d{color:var(--text-dim)}
.scale-btn .num{
  position:absolute;top:.35rem;right:.5rem;font-family:var(--mono);
  font-size:.62rem;color:var(--text-faint);opacity:.7;
}
@media (max-width:33.99rem){.scale-btn .num{top:50%;transform:translateY(-50%)}}

/* choice buttons */
.choice-list{display:grid;gap:.55rem;max-width:34rem}
.choice-btn{
  border:1.5px solid var(--border);border-radius:12px;background:var(--bg-card);
  padding:.8rem 1rem;text-align:left;display:flex;align-items:center;gap:.8rem;
  transition:border-color .12s,background .12s,transform .08s;min-height:3.2rem;
}
@media (hover: hover) and (pointer: fine){
  .choice-btn:hover{border-color:var(--text-faint);transform:translateY(-1px)}
}
.choice-btn:active{transform:scale(.98)}
.choice-btn .num{font-family:var(--mono);font-size:.68rem;color:var(--text-faint);flex-shrink:0}
.choice-btn.sel{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--bg-card))}

/* text answer */
.text-wrap{max-width:34rem}
.text-wrap textarea{
  width:100%;min-height:7.5rem;resize:vertical;
  background:var(--bg-card);border:1.5px solid var(--border);border-radius:12px;
  padding:.85rem 1rem;font-size:.95rem;line-height:1.5;color:var(--text);
}
.text-wrap textarea:focus{outline:none;border-color:var(--accent)}
.text-wrap textarea::placeholder{color:var(--text-faint)}
.text-actions{display:flex;gap:.6rem;margin-top:.8rem}

/* quiz nav */
.quiz-nav{display:flex;align-items:center;gap:.6rem;margin-top:1.7rem}
.quiz-nav .spacer{flex:1}
.kbd-hint{font-family:var(--mono);font-size:.68rem;color:var(--text-faint)}
.kbd-hint kbd{
  border:1px solid var(--border);border-bottom-width:2px;border-radius:4px;
  padding:.05rem .3rem;font-family:inherit;
}
@media (hover: none){.kbd-hint{display:none}}

/* interstitial + finish */
.big-msg{padding:2.2rem 0 1rem;max-width:38rem}
.big-msg .emoji{font-size:2rem}
.big-msg h2{font-size:clamp(1.3rem,4vw,1.8rem);letter-spacing:-.02em;margin-top:.6rem}
.big-msg p{color:var(--text-dim);margin-top:.5rem;font-size:.95rem}
.big-msg .actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}

.finish-file{margin-top:1.6rem}
.howto{margin-top:2rem;max-width:38rem}
.howto h3{font-size:1rem;margin-bottom:.6rem}
.howto ol{margin-left:1.2rem;color:var(--text-dim);font-size:.9rem;display:grid;gap:.45rem}
.howto ol b{color:var(--text)}
.fineprint{margin-top:1.8rem;font-size:.8rem;color:var(--text-faint);max-width:38rem}
.reset-row{margin-top:1.6rem;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}

/* ───────── file preview card ───────── */
.filecard{
  background:var(--bg-inset);border:1px solid var(--border);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow);
}
.filecard .bar{
  display:flex;align-items:center;gap:.55rem;
  padding:.6rem .95rem;border-bottom:1px solid var(--border-soft);
  background:var(--bg-raise);
}
.dot{width:.6rem;height:.6rem;border-radius:50%;background:var(--border)}
.filecard .bar .name{font-family:var(--mono);font-size:.78rem;color:var(--text-dim);margin-left:.25rem}
.filecard .bar .grow{flex:1}
.filecard .bar .count{font-family:var(--mono);font-size:.7rem;color:var(--text-faint)}
.filecard pre{
  font-family:var(--mono);font-size:.76rem;line-height:1.7;
  padding:1rem 1.1rem 1.2rem;overflow:auto;color:var(--text-dim);
  white-space:pre-wrap;word-break:break-word;
}
.filecard pre::-webkit-scrollbar{width:6px;height:6px}
.filecard pre::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.pv-c{color:var(--text-faint)}
.pv-h{color:var(--text);font-weight:600}
.pv-never{color:var(--never);font-weight:600}
.pv-avoid{color:var(--avoid)}
.pv-like{color:var(--like)}
.pv-love{color:var(--love);font-weight:600}
.pv-note{color:var(--text)}

/* desktop side preview */
.preview{min-width:0}
@media (min-width:64rem){
  .preview{position:sticky;top:4.2rem;align-self:start}
  .preview .filecard pre{max-height:calc(100vh - 10.5rem)}
  .sheet-bar{display:none}
}

/* mobile: bottom sheet */
@media (max-width:63.99rem){
  .preview{
    position:fixed;left:0;right:0;bottom:0;z-index:40;
    transform:translateY(calc(100% - 3.1rem));
    transition:transform .28s cubic-bezier(.32,.72,.25,1);
    background:var(--bg-raise);border-top:1px solid var(--border);
    border-radius:16px 16px 0 0;box-shadow:0 -10px 40px -12px rgba(0,0,0,.6);
    max-height:82vh;display:flex;flex-direction:column;
  }
  body.sheet-open .preview{transform:translateY(0)}
  .sheet-bar{
    display:flex;align-items:center;gap:.6rem;width:100%;
    padding:.75rem 1.1rem;flex-shrink:0;text-align:left;
  }
  .sheet-bar .handle{
    position:absolute;top:.3rem;left:50%;transform:translateX(-50%);
    width:2.2rem;height:.22rem;border-radius:2px;background:var(--border);
  }
  .sheet-bar .label{font-family:var(--mono);font-size:.78rem;color:var(--text)}
  .sheet-bar .label b{color:var(--accent)}
  .sheet-bar .chev{margin-left:auto;color:var(--text-faint);font-size:.8rem;
    transition:transform .28s ease}
  body.sheet-open .sheet-bar .chev{transform:rotate(180deg)}
  .preview .filecard{
    border-radius:0;border:none;box-shadow:none;background:var(--bg-inset);
    flex:1;min-height:0;display:flex;flex-direction:column;
  }
  .preview .filecard pre{flex:1;min-height:0}
  .preview .filecard .bar{display:none}
  body.sheet-open{overflow:hidden}
}
/* hide the sheet on screens where there is nothing to preview yet */
.preview.pv-hidden{display:none}

/* toast */
.toast{
  position:fixed;bottom:4.2rem;left:50%;transform:translateX(-50%) translateY(8px);
  background:var(--bg-card);border:1px solid var(--border);border-radius:10px;
  padding:.6rem 1rem;font-size:.85rem;color:var(--text);z-index:60;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  box-shadow:var(--shadow);max-width:min(92vw,26rem);text-align:center;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:64rem){.toast{bottom:2rem}}