/* ═══════════════════════════════════════════════════════════════════════
   ui.css — design-engineering layer (loads AFTER the desk's inline CSS)
   Emil Kowalski (animations.dev · emil-design-eng · STANDARDS.md) +
   Apple "Designing Fluid Interfaces", applied as an override sheet.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens ── */
:root{
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press:   140ms;
  --dur-hover:   150ms;
  --dur-view:    120ms;
  --dur-toast:   400ms;
  --track-display: -0.02em;
  --track-title:   -0.01em;
}

/* ── 1. Press feedback: transform only, strong ease-out, on pointer-down ── */
.btn, .task-item, .pill-select button, #bottomnav button, .daynav button,
.stack-row, .jtag, .cal-cell, .sres, nav button{
  transition: transform var(--dur-press) var(--ease-out),
              border-color var(--dur-hover) ease,
              background-color var(--dur-hover) ease,
              color var(--dur-hover) ease,
              opacity var(--dur-hover) ease;
}
.btn:active, .task-item:active, .pill-select button:active, #bottomnav button:active,
.daynav button:active, .stack-row:active, .jtag:active, .cal-cell:active, .sres:active{ transform: scale(0.97) }
.btn:disabled{ opacity:.45; transform:none; cursor:not-allowed }

/* ── 2. Hover motion only for real pointers ── */
.cal-cell:hover{ transform:none }
@media (hover:hover) and (pointer:fine){
  .cal-cell:hover{ transform: translateY(-1px) }
  .stack-row:hover, .sres:hover{ border-color: var(--line2) }
}

/* ── 3. View switching (tens of times a day): near-instant, opacity only ── */
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
.view.active{ animation: fade var(--dur-view) var(--ease-out) }

/* ── 4. Focus ring for keyboards only ── */
:focus{ outline:none }
:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; border-radius:8px }

/* ── 5. Type: size-specific tracking, tabular numbers ── */
.hero .daybig{ letter-spacing: var(--track-display) }
.brand h1{ letter-spacing: var(--track-title) }
.hstat b, .bigstat b, .daynav .dnlabel b, .stack-row .num, .score-row .sv, .cal-cell .dnum{ font-variant-numeric: tabular-nums }
.card h2{ letter-spacing: -0.005em }

/* ── 6. Materials ── */
#bottomnav{ border-top: 1px solid rgba(255,255,255,.06) }
@media (max-width:640px){
  body::after{ content:""; position:fixed; left:0; right:0; z-index:99; pointer-events:none;
    bottom: calc(56px + env(safe-area-inset-bottom)); height:26px;
    background: linear-gradient(to top, var(--bg), transparent) }
}
@media (prefers-reduced-transparency: reduce){
  #bottomnav{ backdrop-filter:none; -webkit-backdrop-filter:none; background: var(--panel) }
}

/* ── 7. The old modal sheet is retired — "when unsure, delete it" ── */
.toolbtn, #toolSheet{ display:none !important }

/* ── 8. Folding cards: header stays, body hides ── */
.fold > h2, .fold > .ph-head{ cursor:pointer; user-select:none; -webkit-user-select:none }
.fold > h2::after{
  content:""; width:8px; height:8px; flex:0 0 auto; margin-left:auto;
  border-right:1.5px solid var(--faint); border-bottom:1.5px solid var(--faint);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 180ms var(--ease-out);
}
.fold.closed > h2::after{ transform: rotate(-45deg) translateY(2px) }
.fold.closed > *:not(h2):not(.ph-head){ display:none }
.fold.closed > h2, .fold.closed > .ph-head{ margin-bottom:0 }
.fold.closed{ padding-top:14px; padding-bottom:14px }

/* ── 9. Session card: big, glanceable, usable mid-workout ── */
.sess{ border-color: rgba(255,45,85,.35) }
.sess.running{ border-color: rgba(52,211,153,.6); box-shadow: inset 0 0 0 1px rgba(52,211,153,.12) }
.sess-top{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap }
.sess-time{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:46px; font-weight:800; line-height:1; letter-spacing:-.02em;
  font-variant-numeric: tabular-nums;
}
.sess.running .sess-time{ color: var(--green) }
.sess-meta{ font-size:11px; color:var(--faint); letter-spacing:1.2px; text-transform:uppercase; margin-top:7px }
.sess-row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.sess-main .btn{ min-height:54px; min-width:124px; font-size:15px; font-weight:800 }
.sess-bar{ height:4px; background:var(--bg2); border-radius:99px; overflow:hidden; margin:14px 0 12px }
.sess-bar i{
  display:block; height:100%; width:100%;
  background: linear-gradient(90deg, var(--red), var(--gold));
  transform-origin:left; transform: scaleX(0);
  transition: transform 600ms linear;       /* constant motion → linear */
}
.sess-tools .btn{ min-height:48px }
.sess-hold{ font-family: ui-monospace, Menlo, monospace; font-size:28px; font-weight:800; font-variant-numeric: tabular-nums; min-width:84px; text-align:center }
.btn.recording{ border-color: var(--red); color: var(--red) }
.rec-dot{ width:9px; height:9px; border-radius:50%; background:var(--red); display:inline-block; margin-right:7px; animation:pulse 1.1s infinite }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.25 } }
@media (max-width:640px){
  .sess-time{ font-size:42px }
  .sess-main{ width:100% }
  .sess-main .btn{ flex:1; min-width:0 }
  .sess-tools .btn{ flex:1 1 auto }
}

/* ── 9b. Jump to any day (tap the day label) ── */
.daynav .dnlabel.jumpable{ cursor:pointer; user-select:none; -webkit-user-select:none }
.jump-hint{ display:block; font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--red); margin-top:4px }
.jumpbar{ display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px 14px; margin:-4px 0 14px }
.jump-field{ display:flex; flex-direction:column; gap:5px; font-size:11px; color:var(--dim); letter-spacing:.5px }
.jump-field input{ background:var(--bg2); border:1px solid var(--line2); color:var(--txt); font:inherit; padding:10px 12px; border-radius:10px; min-width:150px; color-scheme:dark }
.jump-quick{ display:flex; gap:8px; flex-wrap:wrap; width:100%; margin-top:4px }
.jump-quick .btn{ flex:1 1 auto }
@media (max-width:640px){ .jump-field{ flex:1 1 42% } .jump-field input{ min-width:0; width:100% } #jumpGo{ flex:1 1 100% } }

/* ── 10. Toasts — Sonner-style stack ── */
#toaster{ position:fixed; left:12px; right:12px; z-index:140; pointer-events:none;
  bottom: calc(74px + env(safe-area-inset-bottom)); height:0; display:flex; justify-content:center }
@media (min-width:641px){ #toaster{ left:auto; right:20px; bottom:20px; width:360px } }
.toast{
  position:absolute; bottom:0; width:100%; max-width:360px;
  background: rgba(24,24,38,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border:1px solid var(--line2); border-top-color: rgba(255,255,255,.09);
  border-radius:12px; padding:12px 14px; color:var(--txt);
  font-size:13.5px; line-height:1.45; white-space:pre-line;
  box-shadow: 0 14px 34px rgba(0,0,0,.5);
  display:flex; gap:10px; align-items:flex-start;
  transform: translateY(100%); opacity:0;
  transition: transform var(--dur-toast) ease, opacity var(--dur-toast) ease;
  touch-action:none; cursor:default;
}
.toast[data-mounted]{ opacity:1 }
.toast-dot{ width:8px; height:8px; min-width:8px; border-radius:50%; margin-top:6px; background: var(--dim) }
.toast-success .toast-dot{ background: var(--green); box-shadow: 0 0 8px rgba(52,211,153,.6) }
.toast-error .toast-dot{ background: var(--red); box-shadow: 0 0 8px rgba(255,45,85,.6) }
.toast-msg{ flex:1; min-width:0 }

/* ── 11. Reduced motion: gentler, not zero ── */
@media (prefers-reduced-motion: reduce){
  html body *{
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 150ms !important;
    animation-duration: 1ms !important;
  }
  .toast{ transform:none !important }
  .btn:active, .task-item:active{ transform:none !important; opacity:.8 }
}