/* ============================================================
   PREENSÃO — grip-strength, press-and-hold navigation
   Dark, procedural, editorial-clinical. pt-BR.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
:root{
  --bg:#0a0d11;
  --bg2:#0d1219;
  --ink:#eef3f8;
  --muted:#9aa8b6;
  --faint:#5d6b79;
  --dim:#3a4652;

  --cool:#5b7a99;
  --gold:#e6b45a;
  --gold-bright:#ffd77a;
  --hot:#fff1cf;

  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.05);
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.055);
  --band:rgba(230,180,90,.15);
  --thr:rgba(232,120,110,.85);

  --shadow:0 18px 60px -22px rgba(0,0,0,.75);
  --r:16px;

  --f:0; /* live grip force 0..1, set by JS on :root */
}

html,body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink)}
canvas{max-width:100%}
html{-webkit-text-size-adjust:100%}
body{
  font-family:"Inter",system-ui,sans-serif;
  line-height:1.5;
  min-height:100dvh;
  background:
    radial-gradient(120% 90% at 50% -10%, #12181f 0%, var(--bg) 55%, #070a0d 100%);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:manipulation;
}
h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.01em}
b{font-weight:600}
::selection{background:rgba(255,215,122,.28);color:#fff}

.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--gold);color:#161009;
  padding:10px 16px;border-radius:0 0 10px 0;font-weight:600;text-decoration:none}
.skip:focus{left:0}

/* focus ring */
:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px;border-radius:6px}

/* ---------------- STAGE GRID (desktop = fixed instrument) --------------- */
.stage{
  height:100dvh;
  max-width:1500px;margin:0 auto;
  padding:clamp(14px,2.1vw,26px);
  display:grid;gap:clamp(12px,1.6vw,22px);
  grid-template-columns:minmax(360px,1.05fr) minmax(340px,1fr);
  grid-template-rows:auto minmax(0,1fr) clamp(210px,29vh,290px);
  grid-template-areas:
    "hdr     hdr"
    "core    content"
    "trace   trace";
}
.hdr{grid-area:hdr;min-width:0}
.core-col{grid-area:core;min-width:0}
.content-col{grid-area:content;min-width:0}
.trace-strip{grid-area:trace;min-width:0}

/* ---------------- HEADER ---------------- */
.hdr{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;min-width:0}
.mark{width:46px;height:46px;flex:0 0 auto;filter:drop-shadow(0 3px 10px rgba(255,200,110,.25))}
.brand-txt h1{
  font-family:"Space Mono",monospace;font-weight:700;
  font-size:clamp(20px,2.4vw,27px);letter-spacing:.22em;line-height:1;
  background:linear-gradient(180deg,#fff 10%,var(--gold-bright) 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-txt .sub{margin:5px 0 0;color:var(--muted);font-size:12.5px;letter-spacing:.02em}

.hdr-tools{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.chip{
  font:500 12px/1 "Inter",sans-serif;color:var(--muted);
  background:var(--panel);border:1px solid var(--line);
  padding:8px 12px;border-radius:999px;letter-spacing:.01em;white-space:nowrap;
}
.chip.disc{color:var(--gold);border-color:rgba(230,180,90,.32);background:rgba(230,180,90,.07)}
button.toggle{cursor:pointer;transition:border-color .2s,color .2s,background .2s}
button.toggle:hover{color:var(--ink);border-color:var(--line)}
button.toggle[aria-pressed="true"]{color:#161009;background:var(--gold);border-color:var(--gold)}
button.toggle b{font-weight:600}

/* ---------------- CORE COLUMN ---------------- */
.core-col{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  background:linear-gradient(180deg,var(--panel) 0%,rgba(255,255,255,.01) 100%);
  border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(14px,2vw,26px);position:relative;overflow:hidden;
  box-shadow:var(--shadow);
}
.core-col::before{ /* soft heat glow driven by force */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 46% at 50% 40%,rgba(255,205,110,calc(.05 + var(--f)*.16)) 0%,transparent 70%);
  transition:background .12s linear;
}
.core-wrap{position:relative;width:100%;max-width:430px;flex:1 1 auto;min-height:170px;
  display:grid;place-items:center}
#core{position:absolute;inset:0;width:100%;height:100%}
.grip-hit{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:74%;height:74%;border-radius:50%;
  background:transparent;border:0;cursor:grab;z-index:3;
  -webkit-tap-highlight-color:transparent;touch-action:none;
}
.grip-hit:active{cursor:grabbing}
.core-readout{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  text-align:center;pointer-events:none;z-index:2}
.kgf{font-family:"Space Mono",monospace;font-weight:700;line-height:.9;
  font-size:clamp(34px,6vw,52px);color:#fff;
  text-shadow:0 0 22px rgba(255,210,120,calc(var(--f)*.6))}
.kgf small{font-size:.32em;font-weight:400;color:var(--muted);margin-left:5px;letter-spacing:.08em}
.kgf-note{margin-top:2px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.zone-flag{
  position:absolute;left:50%;bottom:8%;transform:translate(-50%,0) translateY(6px);
  font:700 11px/1 "Space Mono",monospace;letter-spacing:.24em;text-transform:uppercase;
  color:#161009;background:var(--gold-bright);padding:5px 12px;border-radius:999px;
  opacity:0;transition:opacity .18s,transform .18s;z-index:4;pointer-events:none;
  box-shadow:0 6px 20px -6px rgba(255,200,110,.6)}
.zone-flag.on{opacity:1;transform:translate(-50%,0) translateY(0)}
.zone-flag.hold{background:var(--hot)}

.prompt{margin:2px 0 0;color:var(--muted);font-size:14px;text-align:center;min-height:20px;transition:color .2s}
.prompt b{color:var(--gold-bright)}
.prompt.slip{color:#f0a3a0}
.prompt.done b,.prompt.done{color:var(--gold-bright)}

.dots{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.dot{width:9px;height:9px;border-radius:50%;background:var(--dim);position:relative;transition:background .3s,transform .3s}
.dot.on{background:var(--gold)}
.dot.cur{transform:scale(1.5);background:var(--gold-bright);box-shadow:0 0 0 4px rgba(255,215,122,.15)}

.ledger{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin-top:2px}
.lg{background:var(--panel);border:1px solid var(--line-2);border-radius:12px;
  padding:10px 8px;text-align:center;min-width:0}
.lg-n{display:block;font-family:"Space Mono",monospace;font-weight:700;font-size:clamp(15px,2vw,19px);color:var(--ink)}
.lg-l{display:block;font-size:10px;letter-spacing:.06em;color:var(--faint);text-transform:uppercase;margin-top:3px}

/* ---------------- CONTENT COLUMN (stacking revealed plates) ------------- */
.content-col{
  min-height:0;overflow-y:auto;overflow-x:hidden;
  border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));
  box-shadow:var(--shadow);scrollbar-width:thin;scrollbar-color:var(--dim) transparent;
}
.content-col::-webkit-scrollbar{width:8px}
.content-col::-webkit-scrollbar-thumb{background:var(--dim);border-radius:8px}
.content-inner{padding:clamp(16px,2.2vw,26px);display:flex;flex-direction:column;gap:16px}

.plate{
  position:relative;border:1px solid var(--line);border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.008));
  padding:clamp(16px,2.4vw,24px);
}
.plate .kicker{font-family:"Space Mono",monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.plate h3{font-family:"Fraunces",serif;font-weight:400;font-size:clamp(21px,2.7vw,28px);
  line-height:1.14;color:#fff;letter-spacing:-.01em}
.plate .body{margin-top:12px;color:var(--muted);font-size:15px}
.plate .body p{margin:0 0 11px}
.plate .body p:last-child{margin-bottom:0}
.plate .body strong{color:var(--ink);font-weight:600}
.plate .body .hl{color:var(--gold-bright);font-weight:600}

.plate .stat{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
.plate .stat .st{flex:1 1 120px;background:var(--panel);border:1px solid var(--line-2);
  border-radius:11px;padding:11px 13px}
.plate .stat .st b{display:block;font-family:"Space Mono",monospace;font-size:19px;color:var(--gold-bright)}
.plate .stat .st span{display:block;font-size:11.5px;color:var(--faint);margin-top:3px;line-height:1.3}

/* intro plate accent */
.plate.intro{background:linear-gradient(180deg,rgba(230,180,90,.08),rgba(255,255,255,.01));
  border-color:rgba(230,180,90,.24)}

/* LOCKED plate — reveals with grip force via --f */
.plate.locked{overflow:hidden;border-style:dashed;border-color:rgba(255,255,255,.16)}
.plate.locked::after{ /* fill meter along the left edge */
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  transform:scaleY(var(--f));transform-origin:top;transition:transform .05s linear}
.plate.locked .lockrow{display:flex;align-items:center;gap:10px;color:var(--faint);
  font-size:12.5px;font-family:"Space Mono",monospace;letter-spacing:.04em;margin-bottom:10px}
.plate.locked .lockrow .pad{margin-left:auto;color:var(--gold)}
.plate.locked h3{color:rgba(255,255,255,calc(.45 + var(--f)*.55))}
.plate.locked .body{
  filter:blur(calc((1 - var(--f))*7px));
  opacity:calc(.12 + var(--f)*.88);
  clip-path:inset(0 0 calc((1 - var(--f))*100%) 0);
}
.plate.slip{animation:slip .5s ease}
@keyframes slip{0%{border-color:#e07d78}40%{transform:translateX(-4px)}60%{transform:translateX(4px)}100%{transform:translateX(0)}}

/* reveal-in animation for newly latched plate */
.plate.reveal-in{animation:revealIn .55s cubic-bezier(.2,.9,.25,1)}
@keyframes revealIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* grip-vs-age trajectory sparkline (chapter 5) */
.traj{margin:15px 0 4px}
.traj canvas{width:100%;height:124px;display:block;background:rgba(255,255,255,.02);
  border:1px solid var(--line-2);border-radius:11px}
.traj figcaption{margin-top:8px;font-size:11px;color:var(--faint);
  font-family:"Space Mono",monospace;letter-spacing:.02em}
.traj figcaption b{color:var(--gold)}

/* the live normative readout inside chapter 4 */
.norm{margin-top:14px;padding:13px 15px;border-radius:12px;
  background:rgba(230,180,90,.06);border:1px solid rgba(230,180,90,.22)}
.norm .nline{font-size:14px;color:var(--ink)}
.norm .nline b{color:var(--gold-bright);font-family:"Space Mono",monospace}
.norm .nsmall{margin-top:6px;font-size:12px;color:var(--faint)}

/* ---------------- TRACE STRIP (bottom) ---------------- */
.trace-strip{
  height:100%;min-height:0;
  display:grid;grid-template-columns:minmax(230px,300px) 1fr;gap:clamp(12px,1.6vw,20px);
  align-items:stretch;
}
.consulta{
  background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
  display:flex;flex-direction:column;gap:11px;box-shadow:var(--shadow);min-width:0;
}
.consulta-head .cta-kicker{font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold)}
.consulta-head h2{font-family:"Fraunces",serif;font-weight:400;font-size:19px;color:#fff;margin-top:2px}
.ctl label,.ctl-lbl{font-size:12px;color:var(--muted);display:block;margin-bottom:6px}
.ctl label b{color:var(--ink)}
.ctl.sex{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ctl.sex .ctl-lbl{margin:0}
.seg{display:inline-flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg-b{font:500 12px/1 "Inter",sans-serif;color:var(--muted);background:transparent;border:0;
  padding:7px 12px;border-radius:999px;cursor:pointer;transition:all .2s;white-space:nowrap}
.seg-b.is-on{background:var(--gold);color:#161009;font-weight:600}
.ref-read{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.ref-read b{color:var(--gold-bright);font-family:"Space Mono",monospace}
.live-rel{margin:8px 0 0;padding-top:9px;border-top:1px solid var(--line-2);
  font-size:12.5px;line-height:1.4;color:var(--faint);display:flex;align-items:baseline;gap:7px}
.live-rel b{font-family:"Space Mono",monospace;color:var(--ink)}
.live-rel.above b{color:#8fd6a0}
.live-rel.below b{color:#f0b06a}
.lr-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--dim);transform:translateY(1px)}
.live-rel.above .lr-dot{background:#8fd6a0;box-shadow:0 0 8px #8fd6a0}
.live-rel.below .lr-dot{background:#f0b06a;box-shadow:0 0 8px #f0b06a}

/* range input */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:5px;
  background:linear-gradient(90deg,var(--gold) 0 var(--p,36%),rgba(255,255,255,.12) var(--p,36%))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--gold-bright);border:3px solid #12181f;margin-top:-7px;box-shadow:0 2px 8px rgba(0,0,0,.5)}
input[type=range]::-moz-range-track{height:5px;border-radius:5px;background:rgba(255,255,255,.12)}
input[type=range]::-moz-range-progress{height:5px;border-radius:5px;background:var(--gold)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--gold-bright);border:3px solid #12181f}

.trace-wrap{
  background:linear-gradient(180deg,var(--panel),rgba(255,255,255,.01));
  border:1px solid var(--line);border-radius:var(--r);
  padding:12px 14px 8px;display:flex;flex-direction:column;box-shadow:var(--shadow);
  min-width:0;min-height:0;overflow:hidden;
}
.trace-cap{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);margin-bottom:8px}
.trace-cap b{color:var(--ink)}
.tc-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--faint);align-items:center}
.tc-legend .sw{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.tc-legend .sw.band{background:var(--band);border:1px solid rgba(230,180,90,.4)}
.tc-legend .sw.thr{background:transparent;border-bottom:2px dashed var(--thr);height:0;border-radius:0;width:14px}
.tc-legend .sw.you{background:var(--gold-bright)}
#trace{width:100%;flex:1 1 auto;min-height:0;height:100%;display:block}

/* ---------------- REDUCED MOTION ---------------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.05ms !important}
  .plate.locked .body{filter:none}
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:900px){
  .stage{
    height:auto;min-height:100dvh;
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
    grid-template-areas:"hdr" "core" "content" "trace";
  }
  .content-col{overflow:visible;max-height:none}
  .trace-strip{grid-template-columns:1fr}
  .core-wrap{flex:none;height:min(74vw,330px);max-width:none}
  #trace{min-height:170px}
}
@media (max-width:520px){
  .stage{padding:12px}
  .hdr{gap:10px}
  .brand-txt h1{letter-spacing:.16em}
  .hdr-tools{width:100%;justify-content:flex-start}
  .ledger{grid-template-columns:repeat(2,1fr)}
  .core-wrap{width:min(82vw,320px)}
  .tc-legend{display:none}
  #trace{min-height:150px}
}