/* Phone previews for the landing page: the app's real workout card and exercise history at actual app size, in a phone frame.

   Why a copy of app/css/app.css instead of linking it: app.css styles the whole document (html, body, h1-h3, input, a, .page, and
   classes such as .tag and .demo that the landing page also uses), so loading it would restyle the board. The rules below are the
   ones the two previewed screens need, copied verbatim from app/css/app.css (v1.19) and nested under .pp-screen, which also pins
   the light tokens. If those screens' styles change in the app, copy the change here. The demo (spec section 3) loads app.css
   itself and does not use this file.

   The frame is the only landing-specific part: .pp-device, .pp-status, .pp-scroll. Nested selectors need native CSS nesting. */

.pp-device {
  --pp-zoom: .74;
  --pp-bezel: #1c1d21;
  zoom: var(--pp-zoom);
  flex: none;
  width: 399px;
  padding: 12px;
  border-radius: 56px;
  background: var(--pp-bezel);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .07), inset 0 0 0 6px rgb(0 0 0 / .5), 0 40px 70px -30px rgb(0 0 0 / .55);
}
.pp-screen {
  /* the app's light tokens */
  --page-bg: radial-gradient(circle at top, #eef2ff 0, #f8fafc 55%, #f8fafc 100%);
  --bg: #f8fafc; --surface: #ffffff; --surface-border: #cbd5e1; --card-bg: #ffffff; --border: #e2e8f0;
  --shadow-soft: 0 10px 30px rgb(15 23 42 / 0.12); --text: #0f172a; --muted: #475569; --accent: #4f46e5; --accent-text: #ffffff;
  --link: #4338ca; --field-bg: #ffffff; --ok-bg: #dcfce7; --ok-text: #14532d; --radius: 20px;
  --ss1: #16a34a; --ss2: #6366f1; --ss3: #d97706;
  --opt-text: #0e7490; --opt-border: #67e8f9; --opt-bg: #ecfeff; --opt-active-bg: #cffafe; --opt-active-border: #0891b2; --opt-badge-bg: rgb(8 145 178 / 0.15);
  --trx-text: #a21caf; --trx-border: #f0abfc; --trx-bg: #fdf4ff; --trx-active-bg: #fae8ff; --trx-active-border: #c026d3; --trx-badge-bg: rgb(192 38 211 / 0.12);
  --tag-bg: #f1f5f9; --tag-border: #cbd5e1; --panel-bg: #f8fafc; --item-border: #e2e8f0; --thumb-bg: #eef2ff;
  --alt-use-bg: #e0e7ff; --alt-use-border: #6366f1;
  --startline: #4338ca; --pairing: #047857; --swap: #b45309;
  --header-bg: linear-gradient(135deg, #e0e7ff, #dbeafe); --header-border: #c7d2fe; --header-shadow: 0 8px 22px rgb(100 116 139 / 0.22);
  --accent-soft: rgb(79 70 229 / 0.12);
  --up-bg: #fef3c7; --up-text: #92400e; --up-border: #d97706; --warn-text: #92400e;

  /* start from the app's body, not the board's text styles */
  all: initial;
  display: block;
  position: relative;
  box-sizing: border-box;
  width: 375px;
  height: 780px;
  overflow: hidden;
  border-radius: 44px;
  background: var(--page-bg);
  color: var(--text);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: left;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;

  & *, & *::before, & *::after { box-sizing: border-box; }

  /* ---- frame: the phone's status bar and the area under the header, which scrolls like a page ---- */
  .pp-status { position: absolute; z-index: 30; inset: 0 0 auto; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 34px; font-size: 14px; font-weight: 650; background: linear-gradient(135deg, #e0e7ff, #dbeafe); }
  .pp-status::after { content: ""; position: absolute; left: 50%; top: 9px; width: 104px; height: 28px; margin-left: -52px; border-radius: 20px; background: #050505; }
  .pp-status i { font-style: normal; letter-spacing: 1px; font-size: 11px; }
  .pp-top { position: absolute; z-index: 20; inset: 44px 0 auto; }
  .pp-scroll { position: absolute; inset: 94px 0 0; overflow: hidden; }
  .pp-scroll-inner { transition: transform var(--pp-scroll-ms, 3.4s) cubic-bezier(.45, 0, .2, 1); will-change: transform; }

  /* ---- app.css: base ---- */
  .page { max-width: 640px; margin: 0 auto; padding: 12px 16px 24px; }
  & h2 { font-size: 1.15rem; margin: 0 0 12px; }
  & h3 { font-size: 1rem; margin: 20px 0 8px; }
  .card { background: var(--card-bg); border: 1px solid var(--border); box-shadow: var(--shadow-soft); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
  .muted { color: var(--muted); }
  .small { font-size: 0.85rem; }
  .up { color: var(--up-text); font-weight: 700; margin: 2px 0; }
  & a { color: var(--accent); }
  .back { display: inline-block; min-height: 44px; line-height: 44px; margin-bottom: 4px; text-decoration: none; }

  /* ---- header ---- */
  .app-header { background: var(--header-bg); border-bottom: 1px solid var(--header-border); box-shadow: var(--header-shadow); border-radius: 0 0 16px 16px; padding-left: 8px; padding-right: 8px; }
  .hdr-bar { display: flex; align-items: center; gap: 2px; min-height: 44px; max-width: 640px; margin: 0 auto; }
  .hdr-status { flex: 1; min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 8px; font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--text); background: none; border: 0; text-align: left; }
  .hdr-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chev { flex: none; font-size: 0.7rem; color: var(--muted); }
  .save-chip { flex: none; display: inline-flex; align-items: center; gap: 4px; min-width: 24px; padding: 0 4px; font-size: 0.75rem; font-weight: 700; }
  .save-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
  .save-chip[data-kind="ok"] .save-dot { background: #22c55e; }
  .theme-btn { flex: none; width: 44px; height: 44px; font: inherit; font-size: 1.15rem; color: var(--text); background: none; border: 0; }

  /* ---- the day's card (Home) ---- */
  .day-body { padding-bottom: 24px; }
  .phase-line { margin: 0 0 10px; }
  .track { display: flex; gap: 10px; align-items: flex-start; margin: 0 -16px; padding: 0 16px 24px; }
  .ex { background: var(--card-bg); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-soft); padding: 14px 14px 12px; position: relative; display: flex; flex-direction: column; gap: 6px; }
  .slide { flex: 0 0 calc(100% - 28px); min-width: 0; }
  .ex.increased { border-color: var(--up-border); }
  .ex-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding-right: 0; margin-bottom: 2px; }
  .ex-title { margin: 0; font-size: 1.05rem; font-weight: 700; }
  .ex.increased .ex-title { color: var(--up-text); }
  .phase-chip { display: inline-flex; margin-top: 4px; padding: 3px 9px; border-radius: 999px; font-size: 0.75rem; white-space: nowrap; background: var(--surface); border: 1px solid var(--surface-border); color: var(--text); }
  .ex-meta { text-align: right; font-size: 0.75rem; color: var(--muted); }
  .ex-meta strong { display: block; font-size: 0.9rem; color: var(--text); }
  .ex p { margin: 2px 0; }
  .ex-head, .ex-media, .ex-rest { display: contents; }
  .gif-wrapper { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--thumb-bg); border: 1px solid var(--tag-border); display: flex; align-items: center; justify-content: center; }
  .gif-wrapper img { width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; }
  .gif-label { position: absolute; bottom: 8px; left: 10px; padding: 3px 8px; border-radius: 999px; font-size: 0.7rem; color: #e5e7eb; background: rgb(15 23 42 / 0.82); border: 1px solid rgb(148 163 184 / 0.4); display: inline-flex; align-items: center; gap: 6px; }
  .gif-label span { width: 6px; height: 6px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 5px rgb(34 197 94 / 0.25); }
  .exercise-body { font-size: 0.85rem; margin-top: 8px; line-height: 1.5; color: var(--text); }
  .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .tags .tag { color: var(--text); font-size: 0.72rem; padding: 3px 8px; border-radius: 999px; background: var(--tag-bg); border: 1px solid var(--tag-border); }
  .alt-row { display: flex; gap: 8px; margin-top: 8px; }
  .alt-toggle { min-height: 44px; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; }
  .alt-toggle.opt { color: var(--opt-text); border: 1px solid var(--opt-border); background: var(--opt-bg); }
  .alt-toggle.opt[aria-expanded="true"] { border-color: var(--opt-active-border); background: var(--opt-active-bg); }
  .alt-toggle.trx { color: var(--trx-text); border: 1px solid var(--trx-border); background: var(--trx-bg); }
  .alt-toggle.trx[aria-expanded="true"] { border-color: var(--trx-active-border); background: var(--trx-active-bg); }
  .alt-badge { font-size: 0.7rem; padding: 1px 6px; border-radius: 999px; background: var(--opt-badge-bg); }
  .alt-toggle.trx .alt-badge { background: var(--trx-badge-bg); }
  .alt-panel { margin-top: 8px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel-bg); overflow: hidden; }
  .alt-panel[data-group="alternatives"] { border-top: 2px solid var(--opt-active-border); }
  .alt-panel[data-group="trxAlternatives"] { border-top: 2px solid var(--trx-active-border); }
  .alt-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--item-border); }
  .alt-item:first-child { border-top: 0; }
  .alt-thumb { width: 56px; height: 42px; flex: none; border-radius: 8px; overflow: hidden; background: var(--thumb-bg); border: 1px solid var(--tag-border); }
  .alt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .alt-name { flex: 1; min-width: 0; font-size: 0.9rem; }
  .alt-use { min-height: 44px; padding: 6px 12px; border-radius: 10px; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--text); background: var(--alt-use-bg); border: 1px solid var(--alt-use-border); }
  .log-area { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--item-border); }
  .log-area p { margin: 0 0 4px; }

  /* the barrel dial (app/js/ui/dial.js, used as it is) */
  .dial { position: relative; width: 100%; height: 44px; overflow: hidden; border-radius: 12px; background: var(--field-bg); border: 1px solid var(--border); }
  .dial-scroll { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; perspective: 160px; }
  .dial-scroll::-webkit-scrollbar { display: none; }
  .dial-list { list-style: none; margin: 0; padding: 0; }
  .dial-item { height: 44px; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; transform-origin: center; }
  .dial-hint { position: absolute; left: 0; right: 0; text-align: center; font-size: 0.6rem; line-height: 1; color: var(--muted); opacity: 0.8; z-index: 1; }
  .dial-hint.up { top: 2px; }
  .dial-hint.down { bottom: 2px; }
  .dial.increase { background: var(--up-bg); border-color: var(--up-border); }
  .dial.increase .dial-item { color: var(--up-text); }
  .logline { display: flex; align-items: flex-end; gap: 6px; }
  .dcol { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .dcol.shared { flex: 0 0 54px; }
  .dcap { font-size: 0.68rem; color: var(--muted); text-align: center; }
  .dcap.skip { min-height: 22px; padding: 0 0 2px; font: inherit; font-size: 0.68rem; color: var(--muted); background: none; border: 0; }
  .times { align-self: flex-end; height: 44px; display: flex; align-items: center; margin: 0; color: var(--muted); font-size: 0.9rem; }
  .okbtn { flex: 0 0 48px; height: 44px; font: inherit; font-size: 1.6rem; font-weight: 700; border-radius: 12px; border: 0; color: var(--accent-text); background: var(--accent); }

  /* ---- exercise history ---- */
  .seg { display: flex; gap: 6px; margin: 0 0 12px; }
  .seg button { flex: 1; min-height: 44px; font: inherit; font-size: 0.9rem; color: var(--text); background: var(--surface); border: 1px solid var(--surface-border); border-radius: 999px; }
  .seg button[aria-pressed="true"] { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
  .stats2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
  .stats2 > div { padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
  .stats2 .k { display: block; font-size: 0.75rem; color: var(--muted); }
  .stats2 .v { font-weight: 600; }
  .chart { width: 100%; height: auto; display: block; }
  .chart .grid { stroke: var(--border); }
  .chart .tick, .chart .axis { fill: var(--muted); font-size: 11px; }
  .chart .line { fill: none; stroke: var(--accent); stroke-width: 2; }
  .chart .dot { fill: var(--accent); }
  .chart .inc { stroke: var(--ss1); stroke-dasharray: 3 3; }
  .chart .inclabel { fill: var(--ok-text); font-size: 11px; }
  .htable { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
  .htable th { text-align: left; font-weight: 500; font-size: 0.75rem; color: var(--muted); padding: 4px 0; }
  .htable td { padding: 10px 0; border-top: 1px solid var(--border); vertical-align: top; }
  .htable td.r, .htable th.r { text-align: right; }
  .htable a { color: inherit; text-decoration: none; display: block; }
  .tag-due { flex: none; font-size: 0.75rem; padding: 1px 8px; border-radius: 6px; white-space: nowrap; color: var(--ok-text); background: var(--ok-bg); }
}

/* Reduced motion: no animated scroll and no slide-in. The screens can be scrolled by hand instead. */
@media (prefers-reduced-motion: reduce) {
  .pp-screen { pointer-events: auto; user-select: auto; -webkit-user-select: auto; }
  .pp-screen .pp-scroll { overflow-y: auto; scrollbar-width: thin; }
  .pp-screen .pp-scroll-inner { transition: none; }
}