/* ==========================================================================
   Tharvik - workout session layer for a calendar day (2026-10-06), see js/session.js.
   Session card, tappable sets, quick weight logger, rest timer, recap, week
   strip, how-to. Uses the redesign tokens, so light and dark both work.
   Animates transform/opacity only; reduced motion turns every animation off.
   ========================================================================== */

/* ---- week strip ---------------------------------------------------------- */
.sx-week{ display:flex; gap:6px; margin:0 0 14px; }
.sx-wd{
  flex:1; min-width:0; padding:7px 0 8px; border-radius:12px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); color:var(--text);
  display:flex; flex-direction:column; align-items:center; gap:2px; font:inherit;
  -webkit-tap-highlight-color:transparent;
}
.sx-wd i{ font:600 10px var(--font-ui); font-style:normal; letter-spacing:.06em; color:var(--text-dim); }
.sx-wd b{ font:700 14px 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
.sx-wd s{ width:5px; height:5px; border-radius:50%; margin-top:3px; background:transparent; }
.sx-wd.planned s{ background:var(--line-strong); }
.sx-wd.partial s{ background:var(--gold); opacity:.5; }
.sx-wd.complete s{ background:var(--gold); }
.sx-wd.today b{ color:var(--gold); }
.sx-wd.sel{ border-color:var(--gold); background:var(--accent-tint); }
.sx-wd:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* ---- session card -------------------------------------------------------- */
.sx-hero{
  position:relative; overflow:hidden; margin:14px 0 4px; padding:16px 16px 15px;
  border-radius:18px; border:1px solid var(--accent-line);
  background:linear-gradient(160deg, var(--accent-tint) 0%, transparent 62%), var(--panel);
}
.sx-hero:first-child{ margin-top:4px; }
.sx-hero.recovery{ border-color:var(--line-strong); }
.sx-eyebrow{ font:700 10.5px var(--font-ui); letter-spacing:.13em; text-transform:uppercase; color:var(--gold); }
.sx-hero.recovery .sx-eyebrow{ color:var(--text-dim); }
.sx-title{ font:400 34px/1.02 var(--font-display); letter-spacing:-.01em; margin:7px 0 6px; color:var(--text); text-wrap:balance; }
.sx-meta{ font:500 12.5px var(--font-ui); color:var(--text-dim); }
.sx-notes{ font:400 13px/1.45 var(--font-ui); color:var(--text-dim); margin-top:8px; }
.sx-chips{ display:flex; flex-wrap:wrap; gap:6px; margin:11px 0 13px; }
.sx-chip{
  font:600 11.5px var(--font-ui); padding:4px 10px; border-radius:var(--r-pill);
  background:var(--panel-2); border:1px solid var(--line-strong); color:var(--text);
}
.sx-bar{ height:6px; border-radius:6px; background:var(--panel-2); overflow:hidden; }
.sx-bar i{ display:block; height:100%; border-radius:6px; background:var(--gold); transition:width .35s ease; }
.sx-barlbl{ display:flex; justify-content:space-between; font:600 11.5px var(--font-ui); color:var(--text-dim); margin:7px 0 0; font-variant-numeric:tabular-nums; }
.sx-elapsed{ color:var(--gold); font-family:'IBM Plex Mono', ui-monospace, monospace; }
.sx-start{
  margin-top:13px; width:100%; height:46px; border:0; border-radius:var(--r-pill); cursor:pointer;
  background:var(--gold); color:var(--ink); font:800 15px var(--font-ui);
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.sx-elapsed.paused{ color:var(--text-dim); }
/* stop/pause and the two optional timers */
.sx-ctl{ margin-top:12px; display:flex; flex-direction:column; gap:9px; }
.sx-ctl-acts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:8px; }
.sx-ctl-btn{
  height:40px; border-radius:var(--r-pill); cursor:pointer; background:transparent; color:var(--text);
  border:1px solid var(--line-strong); font:700 13px var(--font-ui);
}
.sx-ctl-finish{ color:var(--gold); border-color:var(--accent-line); }
.sx-ctl-btn:active, .sx-ctl-chip:active{ transform:scale(.98); }
.sx-ctl-tg{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.sx-ctl-lbl{ font:700 10.5px var(--font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-right:2px; }
.sx-ctl-chip{
  height:30px; padding:0 12px; border-radius:var(--r-pill); cursor:pointer; background:transparent;
  border:1px solid var(--line-strong); color:var(--text-dim); font:600 12px var(--font-ui);
}
.sx-ctl-chip.on{ color:var(--gold); border-color:var(--accent-line); background:var(--accent-tint); }
.sx-ctl-chip.on::before{ content:'✓ '; }
.sx-ctl-btn:focus-visible, .sx-ctl-chip:focus-visible, .sx-reopen:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }
.sx-reopen{
  margin-top:8px; width:100%; min-height:40px; border-radius:var(--r-pill); cursor:pointer; background:transparent;
  color:var(--text-dim); border:1px solid var(--line-strong); font:600 12.5px var(--font-ui);
}
.sx-start:active{ transform:scale(.98); }
.sx-start:focus-visible{ outline:2px solid var(--text); outline-offset:2px; }

/* finished session: recap */
.sx-hero.done{ border-color:var(--accent-line); }
.sx-recap{ margin-top:2px; }
.sx-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:8px; }
.sx-stat{ background:var(--panel-2); border:1px solid var(--line); border-radius:14px; padding:11px 6px; text-align:center; }
.sx-stat b{ display:block; font:700 18px 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; color:var(--text); }
.sx-stat small{ display:block; font:700 9.5px var(--font-ui); letter-spacing:.06em; color:var(--text-dim); margin-top:4px; }
.sx-pr{ margin-top:8px; display:flex; gap:11px; align-items:center; padding:11px 12px; border-radius:14px; background:var(--accent-tint); border:1px solid var(--accent-line); }
.sx-pr-ic{ flex:0 0 auto; width:32px; height:32px; border-radius:10px; background:var(--gold); color:var(--ink); display:flex; align-items:center; justify-content:center; font:800 10.5px var(--font-ui); }
.sx-pr b{ display:block; font:700 13.5px var(--font-ui); color:var(--text); }
.sx-pr small{ font:500 12px var(--font-ui); color:var(--text-dim); }
.sx-hero.sx-celebrate{ animation:sxPop .6s cubic-bezier(.2,.9,.3,1.2); }
@keyframes sxPop{ 0%{ transform:scale(.97); } 60%{ transform:scale(1.015); } 100%{ transform:scale(1); } }

/* ---- exercise card + sets ------------------------------------------------- */
/* the exercise row, its sets, the logger and the how-to read as ONE card */
.sx-ex{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--panel); padding-bottom:12px; }
.sx-ex.is-done{ background:var(--accent-tint); border-color:var(--accent-line); }
.sx-ex.active{ border-color:var(--accent-line); }
.sx-ex .ex-card, .sx-ex .ex-card:hover, .sx-ex .ex-card.done{ border:0; background:transparent; box-shadow:none; padding-bottom:0; }
.sx-ex.no-sets{ padding-bottom:0; }
.sx-ex.no-sets .ex-card{ padding-bottom:12px; }
.sx-ex.no-sets .sx-how{ margin-bottom:12px; }
.sx-ex .ex-detail em{ font-style:normal; color:var(--gold); }
.sx-ex .ex-card.done .ex-detail em{ color:inherit; }
.sx-sets{ display:flex; flex-wrap:wrap; gap:7px; padding:10px 14px 0 52px; }
.sx-set{
  min-width:46px; height:40px; padding:0 8px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--panel); color:var(--text);
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
  font:inherit; -webkit-tap-highlight-color:transparent; transition:transform .12s ease;
}
.sx-set b{ font:700 13px 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; }
.sx-set small{ font:600 9px var(--font-ui); color:var(--text-dim); margin-top:3px; }
.sx-set:active{ transform:scale(.94); }
.sx-set.done{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.sx-set.done small{ color:var(--ink); opacity:.65; }
.sx-set.now{ border-color:var(--gold); box-shadow:0 0 0 3px var(--accent-tint); }
.sx-set.now:not(.done) b{ color:var(--gold); }
.sx-set:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* set logger */
.sx-editor:empty{ display:none; }
.sx-edit{ margin:10px 12px 0 52px; padding:12px; border-radius:14px; background:var(--panel-2); border:1px solid var(--accent-line); animation:sxIn .22s ease; }
@keyframes sxIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
.sx-edit-head{ font:700 10.5px var(--font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px; }
.sx-stepper{ display:flex; align-items:center; justify-content:center; gap:8px; }
.sx-sb, .sx-rb{
  width:40px; height:40px; border-radius:50%; flex:0 0 auto; cursor:pointer;
  border:1px solid var(--line-strong); background:var(--panel); color:var(--text);
  font:600 20px var(--font-ui); display:flex; align-items:center; justify-content:center;
}
.sx-rb{ width:32px; height:32px; font-size:17px; }
.sx-sb:active, .sx-rb:active{ transform:scale(.92); }
.sx-kg{
  width:96px; height:44px; border-radius:12px; text-align:center; border:1px solid var(--line-strong);
  background:var(--panel); color:var(--text); font:700 24px 'IBM Plex Mono', ui-monospace, monospace;
  font-variant-numeric:tabular-nums; -webkit-appearance:none; appearance:none;
}
.sx-kg:focus{ outline:none; border-color:var(--gold); }
.sx-unit{ font:600 12px var(--font-ui); color:var(--text-dim); margin-left:-4px; }
.sx-reps{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px; }
.sx-rv{ font:600 12.5px var(--font-ui); color:var(--text-dim); min-width:120px; text-align:center; }
.sx-actions{ display:flex; gap:7px; margin-top:12px; }
.sx-q{
  flex:1; height:40px; border-radius:11px; cursor:pointer; border:1px solid var(--line-strong);
  background:var(--panel); color:var(--text); font:700 13px var(--font-ui);
}
.sx-q.sx-primary{ flex:1.4; background:var(--gold); border-color:var(--gold); color:var(--ink); }
.sx-q:active{ transform:scale(.97); }
.sx-hint{ font:500 11.5px/1.4 var(--font-ui); color:var(--text-dim); margin-top:9px; }

/* how-to */
.sx-how{ margin:10px 12px 0 52px; padding:12px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line); animation:sxIn .22s ease; }
.sx-how .sx-chips{ margin:0 0 9px; }
.sx-cues{ margin:0 0 10px; padding-left:18px; font:400 13.5px/1.5 var(--font-ui); color:var(--text); }
.sx-cues li + li{ margin-top:3px; }
.sx-ask{
  width:100%; height:40px; border-radius:11px; cursor:pointer; margin-bottom:8px;
  border:1px solid var(--accent-line); background:var(--accent-tint); color:var(--text); font:700 13px var(--font-ui);
}
.sx-how .video-block{ margin:0; }

/* ---- drawings: body map + objects (js/figures.js) ------------------------- */
.sx-body .sil{ fill:var(--panel-2); stroke:var(--line-strong); stroke-width:.8; }
.sx-body .hair{ fill:var(--line-strong); stroke:var(--line-strong); stroke-width:.8; }
.sx-body [class^="m-"]{ fill:none; stroke:var(--line-strong); stroke-width:.6; }
.sx-body .on{ fill:var(--gold); stroke:none; opacity:.95; }
.sx-maps{ display:flex; gap:4px; }
.sx-maps.sx-maps-hero{ position:absolute; top:16px; right:14px; }
.sx-maps.sx-maps-hero .sx-body{ width:48px; height:104px; }
.sx-hero.has-maps .sx-eyebrow, .sx-hero.has-maps .sx-title, .sx-hero.has-maps .sx-meta,
.sx-hero.has-maps .sx-notes, .sx-hero.has-maps .sx-mus{ margin-right:108px; }
.sx-hero.has-maps .sx-bar{ margin-top:14px; }
.sx-mus{ font:600 11.5px/1.5 var(--font-ui); color:var(--text-dim); margin-top:9px; }
.sx-mus b{ color:var(--text); font-weight:700; }
.sx-mini{ flex:0 0 auto; width:40px; height:58px; border-radius:11px; background:var(--panel-2); display:flex; align-items:center; justify-content:center; }
.sx-mini .sx-body{ width:24px; height:52px; }
.sx-ex .ex-card{ gap:11px; }
.sx-ex.is-done .sx-mini{ background:transparent; }
.sx-how-row{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.sx-maps.sx-maps-how{ flex:0 0 76px; width:76px; gap:2px; }
.sx-maps.sx-maps-how .sx-body{ width:37px; height:80px; flex:0 0 37px; }
.sx-how-text{ flex:1; min-width:0; }
.sx-how-text .sx-mus{ margin:0 0 6px; }
.sx-how-text .sx-cues{ margin:0; }
.sx-obj{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; color:var(--gold); }
.sx-obj .fill{ fill:currentColor; stroke:none; }
.sx-obj.sx-obj-pr{ width:30px; height:30px; flex:0 0 auto; }
.sx-empty{ text-align:center; padding:22px 12px 8px; }
.sx-empty .sx-obj.sx-obj-big{ width:84px; height:84px; display:block; margin:0 auto; }
.sx-empty b{ display:block; font:400 28px/1.1 var(--font-display); color:var(--text); margin-top:8px; }
.sx-empty p{ font:500 13px/1.5 var(--font-ui); color:var(--text-dim); margin:6px auto 0; max-width:300px; }
.sx-next{
  margin-top:14px; padding:10px 16px; border-radius:var(--r-pill); cursor:pointer;
  border:1px solid var(--accent-line); background:var(--accent-tint); color:var(--text); font:700 13px var(--font-ui);
}
.sx-next::first-letter{ text-transform:uppercase; }

/* heatmap: brighter = more series this week */
.sx-body .on.l1{ opacity:.32; }
.sx-body .on.l2{ opacity:.62; }
.sx-body .on.l3{ opacity:1; }

/* ---- "Tu semana" card (top of the month view) ------------------------------ */
.sx-weekcard{
  margin:0 0 16px; padding:14px 14px 13px; border-radius:18px; border:1px solid var(--accent-line);
  background:linear-gradient(160deg, var(--accent-tint) 0%, transparent 62%), var(--panel);
}
.sx-wk-head{ display:flex; justify-content:space-between; align-items:baseline; }
.sx-wk-range{ font:600 12px var(--font-ui); color:var(--text-dim); }
.sx-wk-body{ display:flex; gap:14px; align-items:center; margin-top:10px; }
.sx-maps.sx-maps-week{ flex:0 0 auto; gap:3px; }
.sx-maps.sx-maps-week .sx-body{ width:44px; height:96px; }
.sx-wk-stats{ flex:1; min-width:0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sx-wk-stat{ background:var(--panel-2); border:1px solid var(--line); border-radius:12px; padding:9px 8px; text-align:center; }
.sx-wk-stat b{ display:flex; align-items:center; justify-content:center; gap:5px; font:700 17px 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; color:var(--text); }
.sx-wk-stat small{ display:block; font:600 10.5px var(--font-ui); color:var(--text-dim); margin-top:3px; }
.sx-obj.sx-obj-inline{ width:17px; height:17px; stroke-width:2.6; }
.sx-wk-line{ margin:11px 0 0; font:500 12.5px/1.45 var(--font-ui); color:var(--text-dim); }
.sx-wk-note{ margin-top:11px; padding:10px 12px; border-radius:12px; background:var(--panel-2); border:1px solid var(--line); }
.sx-wk-note p{ margin:5px 0 0; font:400 13.5px/1.5 var(--font-ui); color:var(--text); }

/* ---- Tharvik's weekly note, above the chat (Sunday / Monday) ----------------- */
.sx-weeknote{
  flex:0 0 auto; margin:10px 16px 0; padding:11px 12px 12px; border-radius:16px; position:relative; z-index:2;
  border:1px solid var(--accent-line); background:linear-gradient(160deg, var(--accent-tint) 0%, transparent 70%), var(--panel);
  animation:sxIn .3s ease;
}
body:not(.in-app) .sx-weeknote{ display:none; }
.sx-wn-top{ display:flex; justify-content:space-between; align-items:center; }
.sx-wn-x{ width:28px; height:28px; margin:-6px -4px -6px 0; border:0; background:transparent; color:var(--text-dim); font:400 22px/1 var(--font-ui); cursor:pointer; border-radius:50%; }
.sx-weeknote p{ margin:5px 0 9px; font:400 14px/1.5 var(--font-ui); color:var(--text); }
.sx-wn-see{ padding:7px 13px; border-radius:var(--r-pill); border:1px solid var(--accent-line); background:transparent; color:var(--text); font:700 12.5px var(--font-ui); cursor:pointer; }

/* ---- progress per lift ---------------------------------------------------- */
.sx-trend-btn{ margin-right:-4px; }
.sx-prog-slot:empty{ display:none; }
.sx-prog{ margin:10px 12px 0 52px; padding:12px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line); animation:sxIn .22s ease; }
.sx-prog-stats{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.sx-prog-stats div{ text-align:center; padding:6px 2px; }
.sx-prog-stats b{ display:block; font:700 15px 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; color:var(--text); }
.sx-prog-stats small{ display:block; font:600 10.5px var(--font-ui); color:var(--text-dim); margin-top:3px; }
.sx-prog-empty{ margin:6px 0 0; font:500 12.5px/1.45 var(--font-ui); color:var(--text-dim); }
.sx-chart{ display:block; width:100%; height:auto; margin-top:8px; overflow:visible; }
.sx-grid{ stroke:var(--line); stroke-width:1; }
.sx-axis{ fill:var(--text-dim); font:600 10px var(--font-ui); font-variant-numeric:tabular-nums; }
.sx-area{ fill:var(--accent-tint); stroke:none; }
.sx-line{ fill:none; stroke:var(--gold); stroke-width:2.2; stroke-linejoin:round; stroke-linecap:round; }
.sx-dot{ fill:var(--gold); stroke:none; }
.sx-dot.last{ stroke:var(--panel-2); stroke-width:2.5; }

/* ---- how-to actions + swap ------------------------------------------------ */
.sx-how-actions{ display:flex; gap:7px; }
.sx-how-actions .sx-ask{ flex:1; margin-bottom:8px; }
.sx-swap-btn{ background:var(--panel); border-color:var(--line-strong); }
.sx-swap-btn.on{ border-color:var(--gold); }
.sx-swap{ margin:2px 0 10px; }
.sx-swap-q{ font:700 12px var(--font-ui); color:var(--text-dim); margin-bottom:7px; }
.sx-swap-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.sx-swap-chip{
  padding:8px 11px; border-radius:var(--r-pill); cursor:pointer; border:1px solid var(--line-strong);
  background:var(--panel); color:var(--text); font:700 12.5px var(--font-ui);
}
.sx-swap-chip.on{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.sx-swap-chip:disabled{ opacity:.6; cursor:default; }
.sx-swap-wait{ margin-top:10px; font:500 12.5px var(--font-ui); color:var(--text-dim); }
.sx-swap-card{ margin-top:10px; padding:12px; border-radius:12px; background:var(--panel); border:1px solid var(--accent-line); }
.sx-swap-card b{ display:block; font:700 15px var(--font-ui); color:var(--text); }
.sx-swap-card small{ display:block; font:500 12px 'IBM Plex Mono', ui-monospace, monospace; color:var(--text-dim); margin-top:3px; }
.sx-swap-card p{ margin:8px 0 0; font:400 13px/1.45 var(--font-ui); color:var(--text); }
.sx-swap-card .sx-actions{ margin-top:10px; }
.sx-ex.sx-swapped{ animation:sxSwap 1.4s ease; }
@keyframes sxSwap{ 0%, 40%{ border-color:var(--gold); } 100%{ border-color:var(--line); } }

/* ---- share the finished session -------------------------------------------- */
.sx-share{
  margin-top:10px; width:100%; height:44px; border-radius:var(--r-pill); cursor:pointer;
  border:1px solid var(--accent-line); background:transparent; color:var(--text);
  display:flex; align-items:center; justify-content:center; gap:8px; font:700 13.5px var(--font-ui);
}
.sx-share svg{ color:var(--gold); }
.sx-share:disabled{ opacity:.6; }

/* ---- rest timer (floats over the calendar panel) ------------------------- */
.sx-rest{
  position:absolute; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px)); z-index:5;
  display:flex; align-items:center; gap:11px; height:58px; padding:0 12px 0 13px; border-radius:18px;
  background:var(--panel-2); border:1px solid var(--line-strong); box-shadow:var(--shadow-lift);
  opacity:0; transform:translateY(16px); pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.sx-rest.show{ opacity:1; transform:none; pointer-events:auto; }
.sx-rest-track{ stroke:var(--line-strong); }
.sx-rest-ring{ stroke:var(--gold); transition:stroke-dashoffset 1s linear; }
.sx-rest-t{ font:700 21px 'IBM Plex Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; color:var(--text); min-width:56px; }
.sx-rest-l{
  flex:1; min-width:0; font:600 12.5px/1.25 var(--font-ui); color:var(--text-dim);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}
.sx-rest.over{ border-color:var(--gold); }
.sx-rest.over .sx-rest-l{ color:var(--gold); }
.sx-rest button{
  height:34px; padding:0 11px; border-radius:var(--r-pill); cursor:pointer; flex:0 0 auto;
  border:1px solid var(--line-strong); background:transparent; color:var(--text); font:700 12px var(--font-ui);
}
.sx-rest .sx-rest-skip{ color:var(--gold); border-color:var(--accent-line); }
/* keep the last card and the check-in clear of the floating timer */
#calDayView{ padding-bottom:84px; }

/* ---- check-in: one tap for how it felt ----------------------------------- */
.sx-feel{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; margin:12px 0 10px; }
.sx-feel-btn{
  min-height:44px; padding:6px 4px; border-radius:12px; cursor:pointer; line-height:1.15;
  border:1px solid var(--line-strong); background:var(--panel); color:var(--text); font:700 12.5px var(--font-ui);
}
.sx-feel-btn:hover{ border-color:var(--gold); }
.sx-feel-btn.hurt{ color:var(--ember); border-color:var(--ember-dim); }
.sx-feel-btn:active{ transform:scale(.97); }

/* ---- guided flow: the exercise you're on now, its tools spelled out ---------- */
.sx-now, .sx-tools{ display:none; }
.sx-ex.sx-current{ border-color:var(--gold); box-shadow:0 0 0 3px var(--accent-tint); }
.sx-ex.sx-current .sx-now{ display:block; font:700 10px var(--font-ui); letter-spacing:.13em; text-transform:uppercase; color:var(--gold); margin-bottom:2px; }
.sx-ex.sx-current .sx-tools{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); gap:6px; padding:10px 14px 0; }
.sx-tool{
  height:34px; padding:0 6px; border-radius:var(--r-pill); cursor:pointer; min-width:0;
  display:flex; align-items:center; justify-content:center; gap:6px; font:700 12px var(--font-ui); white-space:nowrap;
  border:1px solid var(--accent-line); background:var(--accent-tint); color:var(--text);
}
.sx-tool svg{ color:var(--gold); flex:0 0 auto; }
.sx-tool:active{ transform:scale(.96); }
.sx-tool:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* first-time "how it works" on the session card */
.sx-tip{ margin-top:13px; padding:11px 12px 12px; border-radius:14px; background:var(--panel-2); border:1px solid var(--line); }
.sx-tip-row{ display:flex; gap:10px; align-items:center; margin-top:9px; font:500 12.5px/1.4 var(--font-ui); color:var(--text); }
.sx-tip-k{
  flex:0 0 32px; width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong); background:var(--panel); color:var(--gold);
}
.sx-tip-chip{ flex-direction:column; border-radius:9px; line-height:1; color:var(--text); }
.sx-tip-chip b{ font:700 11px 'IBM Plex Mono', ui-monospace, monospace; }
.sx-tip-chip small{ font:600 7.5px var(--font-ui); color:var(--text-dim); margin-top:2px; }
.sx-tip-round{ border-radius:50%; font:700 14px var(--font-ui); }
.sx-obj.sx-obj-tip{ width:19px; height:19px; stroke-width:2.6; }
.sx-tip-ok{
  margin-top:11px; width:100%; height:36px; border-radius:var(--r-pill); cursor:pointer;
  border:1px solid var(--accent-line); background:transparent; color:var(--text); font:700 12.5px var(--font-ui);
}

/* ---- "Hoy" bar above the chat ------------------------------------------------ */
.sx-today{
  flex:0 0 auto; display:flex; align-items:center; gap:8px; margin:10px 16px 0; padding:8px 6px 8px 8px;
  border-radius:16px; position:relative; z-index:2; border:1px solid var(--accent-line);
  background:linear-gradient(160deg, var(--accent-tint) 0%, transparent 70%), var(--panel); animation:sxIn .3s ease;
}
body:not(.in-app) .sx-today{ display:none; }
.sx-td-main{
  flex:1; min-width:0; display:flex; align-items:center; gap:10px; padding:0; border:0; background:transparent;
  color:var(--text); text-align:left; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.sx-today .sx-mini{ width:34px; height:48px; }
.sx-today .sx-mini .sx-body{ width:20px; height:44px; }
.sx-td-txt{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.sx-td-txt .sx-eyebrow{ font-size:9.5px; }
.sx-td-txt b{ font:700 15px var(--font-ui); color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sx-td-txt small{ font:500 12px var(--font-ui); color:var(--text-dim); font-variant-numeric:tabular-nums; }
.sx-td-go{
  flex:0 0 auto; height:38px; padding:0 14px; border:0; border-radius:var(--r-pill); cursor:pointer;
  display:flex; align-items:center; gap:6px; background:var(--gold); color:var(--ink); font:800 13.5px var(--font-ui);
}
.sx-td-go:active{ transform:scale(.97); }
.sx-td-x{ flex:0 0 auto; width:28px; height:28px; border:0; background:transparent; color:var(--text-dim); font:400 21px/1 var(--font-ui); cursor:pointer; border-radius:50%; }
.sx-td-go:focus-visible, .sx-td-x:focus-visible, .sx-td-main:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

@media (max-width:360px){
  .sx-sets{ padding-left:14px; }
  .sx-edit, .sx-how, .sx-prog{ margin-left:12px; }
  .sx-feel{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce){
  .sx-hero.sx-celebrate, .sx-edit, .sx-how, .sx-prog, .sx-ex.sx-swapped, .sx-weeknote, .sx-today{ animation:none; }
  .sx-bar i, .sx-rest, .sx-rest-ring, .sx-set{ transition:none; }
}

/* sex question (labelled, with a third option) */
.sex-label{ font:600 12px var(--font-ui, inherit); color:var(--text-dim); margin:2px 0 7px; }
.sex-label small{ font-weight:500; opacity:.85; }
.unit-toggle .unit-opt[data-sex]{ min-width:0; padding-left:6px; padding-right:6px; line-height:1.2; }