/* Live rebuilds of the Alexandria app's screens, drawn at the phone's 390-wide
   logical size and scaled to fit (demos/player.js). Measurements follow the design
   system's component notes; every color comes from tokens.css. */

.ax-demo { position: relative; width: 100%; }
.ax-fit { position: relative; overflow: hidden; width: 100%; }
.ax-screen {
  position: absolute; top: 0; left: 0; width: 390px;
  transform-origin: 0 0;
  background: var(--ax-bg); color: var(--ax-text);
  font-family: var(--font-sans); font-size: 16px; line-height: 24px;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow: hidden; text-align: left; letter-spacing: 0;
}
.ax-screen *, .ax-screen *::before, .ax-screen *::after { box-sizing: border-box; }
.ax-screen img { max-width: none; }
.ax-screen .num { font-variant-numeric: tabular-nums; }

/* Type: the app's ThemedText variants. */
.ax-hero { font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -1.5px; }
.ax-heroNumber { font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -1.2px; }
.ax-screenTitle { font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -1.2px; }
.ax-titleLarge { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.4px; }
.ax-title { font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.3px; }
.ax-titleSmall { font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -0.2px; }
.ax-bodyLarge { font-size: 18px; line-height: 26px; font-weight: 500; }
.ax-body { font-size: 16px; line-height: 24px; font-weight: 400; }
.ax-bodyBold { font-size: 16px; line-height: 24px; font-weight: 600; }
.ax-bodySmall { font-size: 14px; line-height: 22px; font-weight: 400; }
.ax-labelLargeBold { font-size: 16px; line-height: 22px; font-weight: 600; }
.ax-labelLarge { font-size: 16px; line-height: 22px; font-weight: 500; }
.ax-labelBold { font-size: 14px; line-height: 20px; font-weight: 600; }
.ax-label { font-size: 14px; line-height: 20px; font-weight: 500; }
.ax-sectionLabel { font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.8px; }
.ax-meta { font-size: 13px; line-height: 18px; font-weight: 500; }
.ax-labelSmallBold { font-size: 12px; line-height: 18px; font-weight: 600; }
.ax-labelSmall { font-size: 12px; line-height: 18px; font-weight: 500; }
.ax-labelTiny { font-size: 11px; line-height: 18px; font-weight: 500; }
.ax-c2 { color: var(--ax-text-2); }
.ax-c3 { color: var(--ax-text-3); }
.ax-cAccent { color: var(--ax-accent); }
.ax-cAi { color: var(--ax-ai); }
.ax-cUp { color: var(--ax-up); }
.ax-cDown { color: var(--ax-down); }

.ax-i { display: block; flex: none; }
.ax-star { display: block; flex: none; color: var(--ax-ai); }

/* Covers: 2:3, a near-square corner, a hairline, no shadow. */
.ax-cover {
  display: block; object-fit: cover; border-radius: 3px;
  background: var(--ax-container);
  outline: 1px solid var(--ax-line); outline-offset: -1px;
}
.ax-cover.sm { border-radius: 2px; }
.ax-cover.lift { box-shadow: var(--shadow-cover-lift); outline: none; }

/* Bars and the round + at the end of a reading bar. */
.ax-bar { position: relative; height: 4px; border-radius: 2px; background: var(--ax-track); overflow: hidden; }
.ax-bar > i { position: absolute; inset: 0 auto 0 0; width: var(--p, 0%); background: var(--ax-progress); border-radius: 2px; transition: width 700ms cubic-bezier(.2, .7, .2, 1); }
.ax-plus { width: 30px; height: 30px; border-radius: 15px; border: 1px solid var(--ax-line); display: grid; place-items: center; color: var(--ax-text); flex: none; transition: transform 160ms, background-color 160ms; }
.ax-plus.press { transform: scale(0.88); background: var(--ax-container); }

/* Top bar, tabs, shelf headers. */
.ax-topbar { height: 56px; display: flex; align-items: center; gap: 4px; padding: 0 6px; }
.ax-iconbtn { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ax-text); flex: none; }
.ax-topbar .ax-titleSmall { flex: 1; min-width: 0; }
.ax-tabs { display: flex; gap: 24px; margin: 0 16px; border-bottom: 1px solid var(--ax-line); }
.ax-tab { position: relative; height: 44px; display: flex; align-items: center; color: var(--ax-text-2); font-size: 16px; line-height: 22px; font-weight: 500; }
.ax-tab.on { color: var(--ax-text); font-weight: 600; }
.ax-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ax-accent); border-radius: 2px 2px 0 0; }
.ax-shelfhead { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.ax-count { display: flex; align-items: center; gap: 2px; color: var(--ax-text-2); }
.ax-rule { height: 1px; background: var(--ax-line); margin: 0 16px; }

/* Shelves scroll sideways past the right margin. */
.ax-row { display: flex; gap: 12px; padding: 0 16px; will-change: transform; transition: transform 2400ms cubic-bezier(.45, 0, .2, 1); }
.ax-row.reading { gap: 18px; }
.ax-card { width: 200px; flex: none; }
.ax-card .ax-cover { width: 200px; height: 300px; }
.ax-readrow { height: 30px; margin-top: 9px; display: flex; align-items: center; gap: 10px; }
.ax-readrow .ax-bar { flex: 1; }
.ax-readmeta { display: flex; gap: 8px; align-items: baseline; margin-top: 2px; }
.ax-tile { width: 144px; flex: none; }
.ax-tile .ax-cover { width: 144px; height: 216px; }
.ax-tileline { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.ax-stars { display: flex; gap: 2px; }
.ax-stars svg { width: 11px; height: 11px; }

/* Voice button, bottom nav, toast. */
.ax-voice { position: absolute; right: 16px; bottom: 96px; width: 64px; height: 64px; border-radius: 21px; background: var(--ax-accent); color: var(--ax-on-accent); display: grid; place-items: center; box-shadow: var(--shadow-float); transition: transform 180ms; }
.ax-voice.press { transform: scale(0.92); }
.ax-nav { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: var(--ax-bg); border-top: 1px solid var(--ax-line); display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: 14px; }
.ax-navitem { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ax-text-2); font-size: 12px; line-height: 18px; font-weight: 500; }
.ax-navitem.on { color: var(--ax-accent); font-weight: 600; }
.ax-navitem.on::before { content: ""; position: absolute; top: -1px; width: 27px; height: 3px; background: var(--ax-accent); border-radius: 0 0 2px 2px; }
.ax-toast {
  position: absolute; left: 16px; right: 16px; bottom: 96px; min-height: 52px; border-radius: 12px;
  background: var(--ax-inverse); color: var(--ax-on-inverse);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 8px 0 16px;
  font-size: 14px; line-height: 20px; font-weight: 500;
  opacity: 0; transform: translateY(12px); transition: opacity 240ms, transform 240ms; pointer-events: none;
}
.ax-toast b { color: var(--ax-inverse-primary); font-weight: 600; padding: 12px; }
.ax-toast.show { opacity: 1; transform: none; }

/* Buttons and chips. */
.ax-btn { height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--ax-accent); color: var(--ax-on-accent); font-size: 16px; line-height: 22px; font-weight: 600; transition: background-color 240ms, color 240ms, transform 160ms, opacity 240ms; }
.ax-btn.out { background: transparent; color: var(--ax-text); border: 1px solid var(--ax-line-strong); }
.ax-btn.wait { background: var(--ax-container); color: var(--ax-text-3); }
.ax-btn.press { transform: scale(0.97); }
.ax-btn .ax-star { color: currentColor; }
.ax-chipbtn { height: 36px; border-radius: 6px; border: 1px solid var(--ax-line-strong); display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; color: var(--ax-text); font-size: 14px; line-height: 20px; font-weight: 500; }
.ax-chip { height: 32px; border-radius: 6px; border: 1px solid var(--ax-line); background: var(--ax-card); display: inline-flex; align-items: center; padding: 0 10px; color: var(--ax-text-2); font-size: 14px; line-height: 20px; font-weight: 500; }
.ax-seg { display: flex; background: var(--ax-container); border-radius: 12px; padding: 3px; gap: 2px; }
.ax-seg > span { flex: 1; height: 38px; border-radius: 9px; display: grid; place-items: center; color: var(--ax-text-2); font-size: 14px; line-height: 20px; font-weight: 500; transition: background-color 200ms, box-shadow 200ms, color 200ms; white-space: nowrap; padding: 0 10px; }
.ax-seg > span.on { background: var(--ax-card); box-shadow: var(--shadow-segment); color: var(--ax-text); font-weight: 600; }
.ax-seg.compact > span { height: 30px; flex: none; font-size: 13px; padding: 0 9px; }

/* Cards. */
.ax-aicard { background: var(--ax-ai-surface); border: 1px solid var(--ax-ai-border); border-radius: 12px; padding: 16px; }
.ax-aihead { display: flex; align-items: center; gap: 6px; color: var(--ax-ai); font-size: 12px; line-height: 18px; font-weight: 600; }
.ax-aihead .ax-right { margin-left: auto; color: var(--ax-text-2); font-weight: 500; font-size: 13px; }
.ax-group { background: var(--ax-card); border: 1px solid var(--ax-line); border-radius: 12px; overflow: hidden; }
.ax-pulse { border-radius: 6px; background: var(--ax-container-high); animation: ax-pulse 1.6s ease-in-out infinite; }
.ax-pulse.ai { background: color-mix(in srgb, var(--ax-ai) 22%, transparent); }
@keyframes ax-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Log progress. */
.ax-bookrow { display: flex; gap: 14px; align-items: center; padding: 0 16px; }
.ax-bookrow .ax-cover { width: 48px; height: 72px; border-radius: 2px; }
.ax-bookrow .txt { min-width: 0; display: flex; flex-direction: column; }
.ax-readout { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ax-round { width: 48px; height: 48px; border-radius: 24px; border: 1px solid var(--ax-line-strong); display: grid; place-items: center; color: var(--ax-text); flex: none; }
.ax-value { position: relative; min-width: 132px; text-align: center; border-radius: 10px; padding: 0 6px; transition: background-color 200ms; }
.ax-value.wash { background: var(--ax-accent-subtle); }
.ax-caret { display: inline-block; width: 3px; height: 46px; margin-left: 3px; vertical-align: -6px; background: var(--ax-progress); border-radius: 2px; animation: ax-blink 1s steps(1) infinite; }
@keyframes ax-blink { 50% { opacity: 0; } }
.ax-scrub { position: relative; height: 44px; margin: 0 16px; }
.ax-scrub .track { position: absolute; left: 0; right: 0; top: 19px; height: 6px; border-radius: 3px; background: var(--ax-track); overflow: hidden; }
.ax-scrub .fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--p); background: var(--ax-progress); transition: width 700ms cubic-bezier(.2, .7, .2, 1); }
.ax-scrub .thumb { position: absolute; top: 10px; left: calc(var(--p) - 12px); width: 24px; height: 24px; border-radius: 12px; background: var(--ax-card); border: 1px solid var(--ax-line-strong); transition: left 700ms cubic-bezier(.2, .7, .2, 1); }
.ax-scrub .notch { position: absolute; top: 19px; width: 2px; height: 6px; background: var(--ax-bg); left: var(--n); }
.ax-keypad { position: absolute; left: 16px; right: 16px; bottom: 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ax-key { height: 56px; border-radius: 12px; background: var(--ax-container); display: grid; place-items: center; font-size: 22px; line-height: 26px; font-weight: 600; letter-spacing: -0.3px; color: var(--ax-text); transition: background-color 140ms, color 200ms, transform 120ms; }
.ax-key.press { background: var(--ax-container-highest); transform: scale(0.96); }
.ax-key.save { font-size: 16px; line-height: 22px; color: var(--ax-text-disabled); }
.ax-key.save.ready { background: var(--ax-accent); color: var(--ax-on-accent); }

/* Sheets over a dimmed screen. */
.ax-scrim { position: absolute; inset: 0; background: var(--ax-scrim); opacity: 0; transition: opacity 300ms; pointer-events: none; }
.ax-scrim.show { opacity: 1; }
.ax-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ax-card); border-radius: 24px 24px 0 0; transform: translateY(102%); transition: transform 420ms cubic-bezier(.2, .8, .2, 1); }
.ax-sheet.show { transform: none; }
.ax-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--ax-line-strong); opacity: 0.5; margin: 8px auto 0; }

/* Voice log. */
.ax-levels { display: flex; align-items: center; justify-content: center; gap: 4px; height: 72px; }
.ax-levels i { display: block; width: 4px; height: 6px; border-radius: 2px; background: var(--ax-accent); transition: height 120ms; }
.ax-levels i:nth-child(-n+6) { opacity: 0.35; }
.ax-kv { display: flex; align-items: center; justify-content: space-between; min-height: 44px; border-top: 1px solid var(--ax-ai-border); }

/* Book page header and the cover sheet. */
.ax-floatbtn { position: absolute; width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--ax-bg) 72%, transparent); display: grid; place-items: center; color: var(--ax-text); }
.ax-editbtn { position: absolute; width: 52px; height: 52px; border-radius: 26px; background: var(--ax-card); border: 1px solid var(--ax-line); box-shadow: var(--shadow-float); display: grid; place-items: center; color: var(--ax-text); opacity: 0; transform: scale(0.6); transition: opacity 200ms, transform 240ms cubic-bezier(.2, .9, .3, 1.3); }
.ax-editbtn.show { opacity: 1; transform: none; }
.ax-swap { position: relative; }
.ax-swap .ax-cover { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 500ms; }
.ax-check { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 11px; background: var(--ax-accent); color: var(--ax-on-accent); display: grid; place-items: center; transition: opacity 200ms, transform 200ms; }
.ax-check.off { opacity: 0; transform: scale(0.5); }

/* Stats. */
.ax-spines { display: flex; align-items: flex-end; gap: 2px; height: 82px; padding: 0 16px; }
.ax-spines i { display: block; flex: 1; max-width: 16px; border-radius: 1px 1px 0 0; transform-origin: 50% 100%; transition: transform 520ms cubic-bezier(.2, .8, .2, 1); }
.ax-board { height: 6px; margin: 0 16px; background: var(--ax-board); border-radius: 1px; }
.ax-key-row { display: flex; gap: 18px; padding: 0 16px; margin-top: 10px; }
.ax-key-row span { display: inline-flex; align-items: center; gap: 6px; }
.ax-swatch { width: 10px; height: 10px; border-radius: 2px; }
.ax-figs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 20px 16px 0; border-top: 1px solid var(--ax-line); }
.ax-figs > div { padding: 12px 0 12px 12px; border-left: 1px solid var(--ax-line); }
.ax-figs > div:first-child { border-left: 0; padding-left: 0; }
.ax-heat { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, 7px); gap: 1px; padding: 0 16px; }
.ax-heat i { display: block; width: 7px; height: 7px; border-radius: 1.5px; background: var(--ax-container-high); transition: background-color 300ms; }
.ax-openhead { height: 44px; display: flex; align-items: center; justify-content: space-between; margin: 28px 16px 0; border-top: 1px solid var(--ax-line); }

/* Categories. */
.ax-fan { position: relative; height: 114px; }
.ax-fan .ax-cover { position: absolute; top: 0; width: 76px; height: 114px; border-radius: 2px; transition: transform 520ms cubic-bezier(.2, .8, .2, 1), opacity 400ms; }
.ax-cattiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; padding: 16px 16px 0; }
.ax-tick { width: 22px; height: 22px; border-radius: 6px; background: var(--ax-accent); color: var(--ax-on-accent); display: grid; place-items: center; flex: none; transition: background-color 200ms; }
.ax-tick.off { background: transparent; border: 2px solid var(--ax-line-strong); color: transparent; }
.ax-tickrow { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 8px 16px 8px 14px; border-top: 1px solid var(--ax-line); }
.ax-tickrow:first-child { border-top: 0; }
.ax-minifan { position: relative; width: 54px; height: 45px; flex: none; }
.ax-minifan .ax-cover { position: absolute; top: 0; width: 30px; height: 45px; border-radius: 2px; }

/* Picks. */
.ax-radio { width: 22px; height: 22px; border-radius: 11px; border: 2px solid var(--ax-line-strong); flex: none; display: grid; place-items: center; transition: border-color 200ms; }
.ax-radio::after { content: ""; width: 10px; height: 10px; border-radius: 5px; background: var(--ax-text); transform: scale(0); transition: transform 200ms cubic-bezier(.2, .9, .3, 1.4); }
.ax-radio.on { border-color: var(--ax-text); }
.ax-radio.on::after { transform: none; }
.ax-radiorow { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px; border-top: 1px solid var(--ax-line); transition: background-color 200ms; }
.ax-radiorow:first-child { border-top: 0; }
.ax-radiorow.press { background: var(--ax-container); }
.ax-radiorow .ax-i { color: var(--ax-text-2); }
.ax-radiorow.on .ax-i { color: var(--ax-text); }
.ax-stage { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 16px; }
.ax-dot { width: 20px; display: grid; place-items: center; }
.ax-dot::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--ax-line-strong); }
.ax-slot { width: 96px; height: 144px; border-radius: 3px; position: relative; overflow: hidden; }
.ax-slot .ax-cover { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms; }
.ax-slot.found .ax-cover { opacity: 1; }

/* Steps that swap inside one screen. */
.ax-step { position: absolute; inset: 0; transition: opacity 360ms, transform 420ms cubic-bezier(.2, .8, .2, 1); }
.ax-step.hide { opacity: 0; transform: translateX(24px); pointer-events: none; }
.ax-step.back { opacity: 0; transform: translateX(-24px); pointer-events: none; }
.ax-scroll { transition: transform 900ms cubic-bezier(.45, 0, .2, 1); }

@media (prefers-reduced-motion: reduce) {
  .ax-screen *, .ax-screen *::before, .ax-screen *::after { transition-duration: 0ms !important; animation: none !important; }
}

/* Loop handoff and small states used by the scripts. */
.ax-screen > * { transition: opacity 300ms; }
.ax-screen.ax-out > * { opacity: 0; }
.ax-stage > span:first-child { width: 20px; display: grid; place-items: center; color: var(--ax-text); flex: none; }
.ax-stage .ax-dot-now { color: var(--ax-ai); }
.ax-cattile { min-width: 0; }