/* ============================================================
   FONTE — style system
   Apple HIG translated to web: system typography, true dark
   materials, spring-like feedback, translucent chrome.
   ============================================================ */

:root{
  /* True-black OLED base + iOS dark-mode gray ramp */
  --bg:#000000;
  --surface:#1C1C1E;         /* systemGray6 dark */
  --surface-raised:#2C2C2E;  /* systemGray5 dark */
  --surface-secondary:#3A3A3C;/* systemGray4 dark */
  --separator:rgba(84,84,88,0.48);
  --separator-opaque:#38383A;

  --text:#FFFFFF;
  --text-secondary:rgba(235,235,245,0.6);
  --text-tertiary:rgba(235,235,245,0.3);

  /* Molten-metal red — Fonte's accent, close to iOS systemRed dark */
  --accent:#FF453A;
  --accent-soft:rgba(255,69,58,0.16);
  --accent-press:#D9382F;
  --success:#30D158;         /* systemGreen dark */

  --radius-xl:22px;
  --radius-lg:18px;
  --radius-md:13px;
  --radius-sm:9px;

  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
  --font-text:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* Apple's shipped sheet/drawer spring, approximated as a bezier for CSS */
  --spring:cubic-bezier(0.32,0.72,0,1);
  --spring-snappy:cubic-bezier(0.36,0.66,0.04,1);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-text);
  font-size:16px;
  line-height:1.4;
  letter-spacing:0; /* body text: tracking near zero */
  min-height:100vh;
  padding-bottom:calc(70px + env(safe-area-inset-bottom));
  overscroll-behavior-y:none;
}

/* ---------- Typography scale ----------
   Large text gets negative tracking + tight leading;
   small text gets slightly positive tracking. */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  margin:0;
}

/* ---------- TOPBAR — translucent material, content scrolls under ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:baseline;justify-content:space-between;
  padding:14px 18px 12px;
  background:rgba(28,28,30,0.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-bottom:0.5px solid var(--separator);
}
.topbar-mark{
  font-family:var(--font-display);
  font-weight:700;
  font-size:20px;
  letter-spacing:-0.01em; /* slight negative tracking, mid-size display text */
  color:var(--text);
  display:flex;align-items:center;gap:7px;
}
.topbar-mark::after{
  content:'';display:inline-block;width:7px;height:7px;
  background:var(--accent);border-radius:50%;
  box-shadow:0 0 6px rgba(255,69,58,0.6);
}
.topbar-sub{
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:0.01em; /* small text: slightly positive tracking */
  color:var(--text-secondary);
  text-transform:capitalize;
}

/* ---------- VIEWS ---------- */
.view{display:none;padding:2px 16px 28px;max-width:520px;margin:0 auto;}
.view.active{display:block;animation:fadeIn 160ms ease-out;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

.panel{margin-top:24px;}
.panel-title{
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.15;
}
.panel-hint{
  font-size:13px;
  letter-spacing:0.01em;
  color:var(--text-secondary);
  margin:4px 0 14px;
}

/* ---------- PLATE GRID — the signature element ----------
   Weight-plate discs for muscle groups. Kept and refined:
   instant press feedback, no-overshoot settle, richer metal. */
.plate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.plate{
  position:relative;
  aspect-ratio:1/1;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:
    radial-gradient(circle at 32% 28%, #3A3B42 0%, #222329 52%, #131316 100%);
  box-shadow:
    inset 0 1.5px 2px rgba(255,255,255,0.07),
    inset 0 -5px 9px rgba(0,0,0,0.6),
    0 1px 3px rgba(0,0,0,0.5);
  color:rgba(235,235,245,0.7);
  font-family:var(--font-display);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.01em;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:6px;
  transition:transform 120ms var(--spring-snappy), box-shadow 160ms ease-out;
  will-change:transform;
}
/* Respond on press, not release */
.plate:active{transform:scale(0.94);transition-duration:80ms;}
.plate.selected{
  color:#fff;
  background:
    radial-gradient(circle at 32% 28%, #ff8177 0%, var(--accent) 55%, #a82820 100%);
  box-shadow:
    inset 0 1.5px 2px rgba(255,255,255,0.28),
    inset 0 -5px 9px rgba(0,0,0,0.45),
    0 0 0 2.5px var(--accent-soft),
    0 3px 10px rgba(255,69,58,0.4);
}
.plate-count{
  position:absolute;top:-5px;right:-5px;
  background:var(--accent);color:#fff;
  font-family:var(--font-mono);
  font-size:10px;font-weight:700;
  width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--bg);
}

/* ---------- EQUIPMENT — grouped-list row + capsule filter chips ---------- */
.equip-toggle{
  width:100%;display:flex;align-items:center;gap:8px;
  background:var(--surface);border:0.5px solid var(--separator);
  border-radius:var(--radius-md);padding:13px 15px;
  color:var(--text);font-family:var(--font-text);font-size:15px;font-weight:500;
  cursor:pointer;
  transition:background 100ms ease-out;
}
.equip-toggle:active{background:var(--surface-raised);}
.equip-toggle span:first-child{flex:1;text-align:left;}
.equip-toggle-count{color:var(--accent);font-family:var(--font-mono);font-size:12px;font-weight:600;}
.equip-toggle-chevron{
  color:var(--text-tertiary);
  transition:transform 260ms var(--spring);
}
.equip-toggle[aria-expanded="true"] .equip-toggle-chevron{transform:rotate(180deg);}

.equipment-grid{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
  max-height:500px;overflow:hidden;
  transition:max-height 280ms var(--spring), opacity 200ms ease-out, margin 280ms var(--spring);
}
.equipment-grid.collapsed{max-height:0;opacity:0;margin-top:0;}

.chip{
  border:0.5px solid var(--separator);background:var(--surface);
  color:var(--text-secondary);font-size:13.5px;font-weight:500;
  padding:9px 14px;border-radius:100px;cursor:pointer;
  transition:transform 100ms var(--spring-snappy), background 120ms ease-out, color 120ms ease-out;
}
.chip:active{transform:scale(0.95);}
.chip.selected{
  background:var(--accent-soft);color:var(--text);
  border-color:rgba(255,69,58,0.5);
}

/* ---------- RESULTS ---------- */
.results-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;}
.results-count{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text-tertiary);}

.exercise-list{display:flex;flex-direction:column;gap:9px;margin-top:12px;}

.exercise-card{
  display:flex;gap:12px;align-items:center;
  background:var(--surface);border:0.5px solid var(--separator);
  border-radius:var(--radius-lg);padding:10px;cursor:pointer;
  transition:transform 100ms var(--spring-snappy), background 120ms ease-out;
}
.exercise-card:active{transform:scale(0.985);background:var(--surface-raised);}
.exercise-card img{
  width:60px;height:60px;object-fit:cover;border-radius:11px;background:#0A0A0B;flex-shrink:0;
}
.exercise-card-body{flex:1;min-width:0;}
.exercise-card-name{
  font-size:14.5px;font-weight:600;margin:0 0 3px;text-transform:capitalize;
  letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.exercise-card-meta{font-size:12px;color:var(--text-secondary);}
.exercise-card-meta b{color:var(--text);font-weight:600;}
.exercise-card-add{
  flex-shrink:0;width:32px;height:32px;border-radius:50%;
  border:0.5px solid var(--separator);background:var(--surface-raised);
  color:var(--accent);font-size:18px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:transform 120ms var(--spring-snappy), background 120ms ease-out, color 120ms ease-out;
}
.exercise-card-add:active{transform:scale(0.88);}
.exercise-card-add.added{background:var(--success);color:#fff;border-color:transparent;}

.empty-state{text-align:center;padding:52px 20px;color:var(--text-secondary);display:none;}
.empty-state.show{display:block;}
.empty-state p{margin:4px 0;font-size:15px;}
.empty-state-sub{font-size:13px;color:var(--text-tertiary);}

/* ---------- SEARCH ---------- */
.search-input{
  width:100%;padding:12px 15px;border-radius:var(--radius-md);
  background:var(--surface);border:0.5px solid var(--separator);
  color:var(--text);font-size:16px;font-family:var(--font-text);
  transition:background 120ms ease-out, box-shadow 120ms ease-out;
}
.search-input::placeholder{color:var(--text-tertiary);}
.search-input:focus{
  outline:none;background:var(--surface-raised);
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* ---------- SESSION LIST ---------- */
.session-item{position:relative;}
.session-item.done .exercise-card-name{color:var(--text-tertiary);text-decoration:line-through;}
.session-item.done img{opacity:0.35;}
.session-check{
  flex-shrink:0;width:25px;height:25px;border-radius:8px;
  border:1.5px solid var(--separator-opaque);background:transparent;
  display:flex;align-items:center;justify-content:center;color:transparent;
  transition:transform 100ms var(--spring-snappy), background 120ms ease-out, border-color 120ms ease-out;
}
.session-check:active{transform:scale(0.85);}
.session-item.done .session-check{background:var(--success);border-color:transparent;color:#fff;}
.session-remove{
  flex-shrink:0;color:var(--text-tertiary);font-size:20px;background:none;border:none;padding:4px 6px;
  transition:transform 100ms var(--spring-snappy);
}
.session-remove:active{transform:scale(0.85);}

.link-btn{background:none;border:none;color:var(--accent);font-size:14px;font-weight:600;cursor:pointer;}
.link-btn:active{opacity:0.5;}

/* ---------- MODAL — real iOS sheet: grabber, spring curve, scrim ---------- */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,0);
  display:none;align-items:flex-end;z-index:100;
  transition:background 260ms var(--spring);
}
.modal-backdrop.show{display:flex;background:rgba(0,0,0,0.55);}
.modal-sheet{
  width:100%;max-height:85vh;overflow-y:auto;
  background:var(--surface);
  background:rgba(28,28,30,0.92);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  border-top:0.5px solid rgba(255,255,255,0.08);
  padding:18px 18px 28px;
  transform:translateY(100%);
  transition:transform 320ms var(--spring);
  touch-action:pan-y;
  overscroll-behavior-y:contain;
}
.modal-backdrop.show .modal-sheet{transform:translateY(0);}
.modal-handle{width:36px;height:5px;background:var(--separator-opaque);border-radius:3px;margin:0 auto 16px;}
.modal-gif{width:100%;border-radius:var(--radius-lg);background:#0A0A0B;margin-bottom:14px;}
.modal-name{font-size:20px;font-weight:700;letter-spacing:-0.01em;text-transform:capitalize;margin-bottom:9px;}
.modal-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;}
.tag{
  font-size:11px;padding:5px 11px;border-radius:100px;
  background:var(--surface-raised);color:var(--text-secondary);font-weight:600;
  text-transform:uppercase;letter-spacing:0.04em; /* small caps text: positive tracking */
}
.tag.primary{background:var(--accent-soft);color:#FF8177;}
.modal-instructions{font-size:15px;line-height:1.5;color:rgba(255,255,255,0.88);}
.modal-instructions-label{
  font-size:11px;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--text-tertiary);margin-bottom:6px;font-weight:600;
}
.modal-add-btn{
  width:100%;margin-top:20px;padding:15px;border-radius:var(--radius-md);border:none;
  background:var(--accent);color:#fff;font-family:var(--font-display);
  font-size:16px;font-weight:600;letter-spacing:-0.005em;cursor:pointer;
  transition:transform 120ms var(--spring-snappy), background 120ms ease-out;
}
.modal-add-btn:active{transform:scale(0.97);background:var(--accent-press);}
.modal-add-btn.added{background:var(--success);}

/* ---------- BOTTOM NAV — translucent tab bar ---------- */
.bottomnav{
  position:fixed;bottom:0;left:0;right:0;z-index:20;
  display:flex;
  background:rgba(28,28,30,0.72);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border-top:0.5px solid var(--separator);
  padding:8px 6px calc(6px + env(safe-area-inset-bottom));
}
.navbtn{
  flex:1;background:none;border:none;color:var(--text-tertiary);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10.5px;font-family:var(--font-text);font-weight:600;
  letter-spacing:0.01em;
  padding:6px 0;position:relative;
  transition:color 120ms ease-out, transform 100ms var(--spring-snappy);
}
.navbtn:active{transform:scale(0.92);}
.navbtn-icon{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
}
.navbtn-icon svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.navbtn.active{color:var(--accent);}
.navbtn.active .navbtn-icon svg{fill:var(--accent-soft);}
.badge{
  position:absolute;top:-1px;right:calc(50% - 25px);
  background:var(--accent);color:#fff;font-size:9px;font-weight:700;
  min-width:15px;height:15px;border-radius:50%;
  display:none;align-items:center;justify-content:center;
  font-family:var(--font-mono);
  border:1.5px solid rgba(28,28,30,0.9);
}
.badge.show{display:flex;}

/* Focus visibility */
button:focus-visible, input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* ---------- Reduced motion: gentle cross-fades, no springs/overshoot ---------- */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important;animation-iteration-count:1 !important;}
  .plate,.chip,.exercise-card,.exercise-card-add,.session-check,.session-remove,
  .navbtn,.modal-add-btn{transition:opacity 150ms ease !important;transform:none !important;}
  .modal-sheet{transition:opacity 150ms ease !important;transform:none !important;}
  .modal-backdrop{transition:opacity 150ms ease !important;}
  .equip-toggle-chevron{transition:opacity 150ms ease !important;}
}

/* ---------- Reduced transparency: solid materials, no blur ---------- */
@media (prefers-reduced-transparency: reduce){
  .topbar,.bottomnav{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;}
  .modal-sheet{background:var(--surface);backdrop-filter:none;-webkit-backdrop-filter:none;}
}