/* Lowforge — «Começa aqui» e rotinas de prática (js/practice.js) */

/* ── Começa aqui (cartão flutuante) ─────────────────────────────────── */
.sh{
  position:fixed; z-index:76; right:max(16px, env(safe-area-inset-right)); bottom:var(--lf-float-b, 16px);
  width:min(300px, calc(100vw - 32px));
  background:rgba(23,23,23,0.97); border:1px solid var(--ember-dim); border-radius:18px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,0.95), 0 0 0 1px rgba(0,0,0,0.4);
  padding:16px 16px 12px; color:var(--text);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .3s ease, transform .3s ease, bottom .25s ease;
}
.sh.is-in{ opacity:1; transform:none; pointer-events:auto; }
.sh.is-min{ width:auto; padding:0; border-radius:999px; background:rgba(23,23,23,0.97); }
html.amp-open .sh, html.rt-on .sh, .sh.is-away{ opacity:0; transform:translateY(14px); pointer-events:none; }
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .sh{ background:rgba(23,23,23,0.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
}
.sh-head{ display:flex; align-items:center; gap:6px; margin:0 0 6px; }
.sh-t{ margin:0 auto 0 0; font-family:var(--font-display); font-size:1.35rem; letter-spacing:0.03em; line-height:1; color:var(--text); }
.sh-icon{
  display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:transparent; border:0; color:var(--text-faint); cursor:pointer;
}
.sh-icon:hover{ background:var(--surface-3); color:var(--text); }
.sh-icon:focus-visible, .sh-go:focus-visible, .sh-pill:focus-visible, .sh-btn:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.sh-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.sh-step{ display:flex; align-items:center; gap:11px; padding:6px 6px; border-radius:12px; }
.sh-step .sh-d{ display:none; }
.sh-step:not(.is-ok):not(.is-next) .sh-go{ display:none; }
.sh-step.is-next{ background:rgba(209,170,141,0.07); padding:9px 8px; }
.sh-step.is-next .sh-d{ display:block; }
.sh-step:not(.is-ok):not(.is-next) .sh-l{ color:var(--text-muted); font-weight:500; }
.sh-check{
  flex:none; display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%;
  border:1px solid var(--ember-dim); color:var(--ember); font-size:0.76rem; font-weight:700;
}
.sh-step.is-ok .sh-check{ background:var(--ember); border-color:var(--ember); color:#121212; }
.sh-step.just .sh-check{ animation:shPop .5s ease; }
@keyframes shPop{ 0%{ transform:scale(0.6); } 60%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
.sh-txt{ display:grid; gap:1px; min-width:0; flex:1; }
.sh-l{ font-size:0.9rem; font-weight:600; color:var(--text); line-height:1.3; }
.sh-d{ font-size:0.76rem; color:var(--text-faint); line-height:1.35; }
.sh-step.is-ok .sh-l{ color:var(--text-faint); text-decoration:line-through; text-decoration-color:rgba(255,255,255,0.25); }
.sh-go{
  flex:none; height:28px; padding:0 11px; border-radius:999px; cursor:pointer;
  background:transparent; border:1px solid var(--ember-dim); color:var(--ember); font:600 0.76rem var(--font-body);
}
.sh-go:hover{ background:var(--ember); color:#121212; }
.sh-prog{ height:4px; border-radius:99px; background:var(--surface-3); overflow:hidden; margin:10px 6px 0; }
.sh-prog span{ display:block; height:100%; background:var(--ember); border-radius:inherit; transition:width .4s ease; }
.sh-prog-t{ margin:6px 6px 0; font-size:0.72rem; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.sh-done{ padding:2px 6px 4px; }
.sh-done-t{ margin:0 0 4px; font-weight:700; font-size:1rem; }
.sh-done-d{ margin:0 0 12px; font-size:0.84rem; color:var(--text-muted); line-height:1.5; }
.sh-done-a{ display:flex; flex-wrap:wrap; gap:8px; }
.sh-btn{
  display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:999px; cursor:pointer;
  background:var(--ember); border:1px solid var(--ember); color:#121212; font:700 0.8rem var(--font-body); text-decoration:none;
}
.sh-btn-ghost{ background:transparent; color:var(--ember); }
.sh-pill{
  display:inline-flex; align-items:center; gap:9px; height:44px; padding:0 16px 0 6px; border-radius:999px;
  background:transparent; border:0; color:var(--text); cursor:pointer; font:600 0.86rem var(--font-body);
}
.sh-ring{
  --p:0; position:relative; display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:conic-gradient(var(--ember) calc(var(--p) * 1%), var(--surface-3) 0);
}
.sh-ring::before{ content:''; position:absolute; inset:3px; border-radius:50%; background:#171717; }
.sh-ring b{ position:relative; font-size:0.78rem; color:var(--ember); }
.sh-pill-n{ color:var(--text-faint); font-weight:500; font-size:0.78rem; }
/* destaque do controlo para onde o passo leva */
.sh-pulse{ animation:shGlow 1.8s ease; border-radius:12px; }
@keyframes shGlow{
  0%, 100%{ box-shadow:0 0 0 0 rgba(209,170,141,0); }
  25%, 60%{ box-shadow:0 0 0 4px rgba(209,170,141,0.55); }
}
@media (max-width:720px){
  .sh{ right:auto; left:12px; width:calc(100vw - 24px); }
  .sh.is-min{ width:auto; }
  .sh-pill{ height:40px; padding-right:14px; font-size:0.82rem; }
  .sh-pill-n{ display:none; }
  .sh-ring{ width:28px; height:28px; }
}

/* ── Secção das rotinas ─────────────────────────────────────────────── */
.routines{ margin-top:56px; }
.rt-head{ align-items:flex-end; }
.rt-head p{ max-width:60ch; color:var(--text-muted); }
.rt-stats{ display:flex; gap:10px; margin:0; }
.rt-stats > div{
  min-width:92px; padding:10px 14px; border-radius:14px; background:var(--surface); border:1px solid var(--line);
}
.rt-stats dt{ order:2; font-size:0.72rem; color:var(--text-faint); line-height:1.3; }
.rt-stats dd{ margin:0 0 2px; font-family:var(--font-display); font-size:1.7rem; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.rt-stats > div{ display:flex; flex-direction:column-reverse; }
.rt-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; margin-top:8px; }
@media (max-width:980px){ .rt-grid{ grid-template-columns:minmax(0,1fr); } }
.rt-card{
  display:flex; flex-direction:column; padding:20px; border-radius:18px;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-card);
}
.rt-card-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.rt-time{ margin:0; font-size:0.8rem; color:var(--text-faint); letter-spacing:0.06em; text-transform:uppercase; }
.rt-time b{ font-family:var(--font-display); font-size:2.2rem; font-weight:400; letter-spacing:0; color:var(--ember); text-transform:none; vertical-align:-2px; }
.rt-today{ font-size:0.72rem; font-weight:700; padding:4px 9px; border-radius:99px; background:rgba(141,191,139,0.14); color:#a9d3a7; }
.rt-card h3{ margin:6px 0 4px; font-family:var(--font-display); font-weight:400; font-size:1.45rem; letter-spacing:0.02em; line-height:1.05; }
.rt-desc{ margin:0 0 14px; font-size:0.86rem; color:var(--text-muted); line-height:1.5; }
.rt-bar{ display:flex; gap:3px; height:6px; margin:0 0 12px; }
.rt-bar span{ background:var(--ember-dim); border-radius:3px; }
.rt-bar span:nth-child(odd){ background:#7a6553; }
.rt-list{ list-style:none; margin:0 0 16px; padding:0; display:grid; gap:0; align-content:start; counter-reset:rt; flex:1; }
.rt-list li{
  display:flex; justify-content:space-between; gap:10px; padding:6px 0; font-size:0.84rem; color:var(--text-muted);
  border-top:1px solid var(--line-soft, #1A1A1A); counter-increment:rt;
}
.rt-list li:first-child{ border-top:0; }
.rt-list li > span:first-child::before{ content:counter(rt) '. '; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.rt-m{ color:var(--text-faint); font-variant-numeric:tabular-nums; }
.rt-sp{ font-style:normal; font-size:0.78em; color:var(--ember); }
.rt-start{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; height:44px; border-radius:999px; cursor:pointer;
  background:var(--ember); border:1px solid var(--ember); color:#121212; font:700 0.9rem var(--font-body);
  transition:background-color .18s ease, transform .12s ease;
}
.rt-start:hover{ background:#e2c1a8; }
.rt-start:active{ transform:scale(0.98); }
.rt-start:focus-visible{ outline:2px solid var(--text); outline-offset:3px; }
.rt-play{ font-size:0.72rem; }
.rt-foot{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:16px; margin-top:16px; }
@media (max-width:980px){ .rt-foot{ grid-template-columns:minmax(0,1fr); } }
.rt-base, .rt-records{ padding:16px 20px; border-radius:18px; background:var(--surface); border:1px solid var(--line); }
.rt-base{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px 16px; }
.rt-base-l{ font-size:0.76rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint); }
.rt-step{ display:inline-flex; align-items:center; gap:8px; justify-self:start; }
.rt-step-b{
  width:34px; height:34px; border-radius:50%; cursor:pointer; background:var(--surface-3); border:1px solid var(--line);
  color:var(--text); font-size:1.1rem; line-height:1;
}
.rt-step-b:hover{ border-color:var(--ember-dim); }
.rt-step-b:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.rt-base-v{ min-width:3ch; text-align:center; font-family:var(--font-display); font-size:1.8rem; line-height:1; font-variant-numeric:tabular-nums; }
.rt-bpm{ font-size:0.72rem; color:var(--text-faint); margin-right:4px; }
.rt-base-h{ grid-column:1 / -1; margin:2px 0 0; font-size:0.8rem; color:var(--text-faint); line-height:1.45; }
.rt-rec-h{ margin:0 0 10px; font-size:0.76rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint); }
.rt-rec{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.rt-rec li{ display:inline-flex; align-items:baseline; gap:8px; padding:6px 12px; border-radius:99px; background:var(--surface-3); font-size:0.82rem; color:var(--text-muted); }
.rt-rec b{ color:var(--ember); font-variant-numeric:tabular-nums; }
.rt-rec-empty{ margin:0; font-size:0.84rem; color:var(--text-faint); line-height:1.5; }
@media (max-width:720px){
  .routines{ margin-top:40px; }
  .rt-head{ align-items:flex-start; }
  .rt-stats{ width:100%; }
  .rt-stats > div{ flex:1; min-width:0; padding:9px 11px; }
  .rt-stats dd{ font-size:1.45rem; }
  .rt-card{ padding:18px; }
}

/* ── Leitor da rotina (barra fixa) ──────────────────────────────────── */
.rtp{
  position:fixed; z-index:77; left:50%; transform:translateX(-50%);
  bottom:var(--lf-float-b, 16px); width:min(1120px, calc(100vw - 24px));
  border-radius:18px; border:1px solid var(--ember-dim);
  background:rgba(23,23,23,0.97); box-shadow:0 24px 60px -18px rgba(0,0,0,0.95);
  transition:bottom .25s ease;
}
@supports ((-webkit-backdrop-filter:blur(8px)) or (backdrop-filter:blur(8px))){
  .rtp{ background:rgba(23,23,23,0.88); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
}
.rtp-in{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px 22px;
  padding:14px 18px 16px; position:relative;
}
.rtp-k{ margin:0; font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-faint); }
.rtp-ex{ margin:2px 0 0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.rtp-ex-n{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:0.02em; line-height:1.05; color:var(--text); }
.rtp-bpm{ font-size:0.8rem; color:var(--ember); font-variant-numeric:tabular-nums; }
.rtp-tip{ margin:3px 0 0; font-size:0.82rem; color:var(--text-muted); line-height:1.4; min-height:1.4em; }
.rtp-clock{ display:grid; justify-items:end; gap:2px; }
.rtp-time{ font-family:var(--font-display); font-size:2.4rem; line-height:1; color:var(--text); font-variant-numeric:tabular-nums; }
.rtp.is-get .rtp-time{ font-size:1.5rem; color:var(--ember); }
.rtp.is-pause .rtp-time{ color:var(--text-faint); }
.rtp-next{ font-size:0.74rem; color:var(--text-faint); white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.rtp-act{ display:flex; gap:8px; }
.rtp-b{
  height:38px; padding:0 14px; border-radius:999px; cursor:pointer; white-space:nowrap;
  background:transparent; border:1px solid var(--line); color:var(--text-muted); font:600 0.8rem var(--font-body);
}
.rtp-b:hover{ border-color:var(--ember-dim); color:var(--text); }
.rtp-b:focus-visible{ outline:2px solid var(--ember); outline-offset:2px; }
.rtp-b-main{ background:var(--ember); border-color:var(--ember); color:#121212; min-width:104px; }
.rtp-b-main:hover{ background:#e2c1a8; color:#121212; }
.rtp.is-pause .rtp-b-main{ animation:rtpBlink 1.6s ease infinite; }
@keyframes rtpBlink{ 50%{ box-shadow:0 0 0 5px rgba(209,170,141,0.25); } }
.rtp-b-x{ color:var(--text-faint); }
.rtp-segs{ grid-column:1 / -1; display:flex; gap:3px; height:5px; margin-top:6px; }
.rtp-segs span{ position:relative; background:var(--surface-3); border-radius:3px; overflow:hidden; }
.rtp-segs i{ position:absolute; inset:0 auto 0 0; background:var(--ember); border-radius:inherit; transition:width .25s linear; }
.rtp-done{ grid-template-columns:minmax(0,1fr) auto; }
.rtp-done-t{ margin:0; font-weight:700; font-size:1rem; }
.rtp-done-t span{ font-weight:500; color:var(--text-muted); }
.rtp-tick{ display:inline-grid; place-items:center; width:26px; height:26px; margin-right:10px; border-radius:50%; background:var(--ember); color:#121212; font-size:0.85rem; }
@media (max-width:820px){
  .rtp-in{ grid-template-columns:minmax(0,1fr) auto; padding:12px 14px 14px; gap:6px 12px; }
  .rtp-act{ grid-column:1 / -1; }
  .rtp-act .rtp-b{ flex:1; padding:0 8px; }
  .rtp-time{ font-size:2rem; }
  .rtp-ex-n{ font-size:1.25rem; }
  .rtp-next{ max-width:140px; }
}
@media (prefers-reduced-motion:reduce){
  .sh, .sh-prog span, .rtp, .rtp-segs i{ transition:none; }
  .sh-step.just .sh-check, .sh-pulse, .rtp.is-pause .rtp-b-main{ animation:none; }
}