/* Swipe (/library/swipe/): pick one of the seven arts, then full-screen cards that snap as you scroll. Vertical only.
   The picker tiles use fixed deep art colours (--sw) so white text keeps its contrast in either theme; the deck's cards
   use the page's own light or dark colours, with the art's theme colour (--swa) only as an accent. */
.sw-a-grammar { --sw: #9b2c4e; --swa: var(--a-grammar); } .sw-a-logic { --sw: #a3360b; --swa: var(--a-logic); }
.sw-a-rhetoric { --sw: #74520e; --swa: var(--a-rhetoric); } .sw-a-arithmetic { --sw: #2f6b2c; --swa: var(--a-arithmetic); }
.sw-a-geometry { --sw: #1f4f96; --swa: var(--a-geometry); } .sw-a-music { --sw: #0b6b62; --swa: var(--a-music); }
.sw-a-astronomy { --sw: #6a3fa0; --swa: var(--a-astronomy); }
.emblem { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.emblem .fill { fill: currentColor; stroke: none; }

/* ── The picker ── */
.sw-pick { padding: 2rem 0 3rem; }
.sw-pick h1 { font-size: clamp(2.4rem, 11vw, 3.6rem); margin: .2rem 0 .4rem; }
.sw-pick-lede { font-size: 1.2rem; color: var(--ink-2); margin: 0 0 1.5rem; }
.sw-group { font: 650 .85rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 1.6rem 0 .7rem; }
.sw-arts { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); }
@media (max-width: 30rem) { .sw-arts { grid-template-columns: 1fr 1fr; } }
.sw-art {
  display: grid; align-content: end; gap: .15rem; min-height: 11rem; padding: 1rem; border-radius: 18px; text-decoration: none;
  color: #fff; background: linear-gradient(155deg, var(--sw), color-mix(in srgb, var(--sw) 55%, #000));
  box-shadow: 0 6px 18px rgb(0 0 0 / .18); transition: transform .15s ease;
}
.sw-art:hover, .sw-art:focus-visible { transform: translateY(-2px); }
.sw-art:active { transform: scale(.97); }
.sw-emb { width: 2.6rem; height: 2.6rem; margin-bottom: auto; stroke-width: 2; }
.sw-art-name { font: 700 1.45rem/1.15 var(--serif); margin-top: .8rem; }
.sw-art-latin { font-style: italic; opacity: .92; }
.sw-art-mode, .sw-art-meta { font-size: .85rem; opacity: .92; }
.sw-art-meta { margin-top: .35rem; font-weight: 650; }

/* ── A deck: no site header or footer; a slim bar on top ── */
body.sw-immersive { background: var(--bg); }
body.sw-immersive .site-header, body.sw-immersive .site-footer { display: none; }
/* The deck is its own full-screen scroller, as in story apps: the browser's address bar stays put, so every card is
   exactly one screen tall and a swipe always snaps to the next card's top. */
.sw-deck { position: fixed; inset: 0; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; container-type: size; scrollbar-width: none; color: var(--ink); background: var(--bg); outline: none; }
@media (prefers-reduced-motion: no-preference) { .sw-deck { scroll-behavior: smooth; } }
.sw-top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: flex; align-items: center; gap: .7rem;
  padding: calc(env(safe-area-inset-top, 0px) + .5rem) var(--gutter) .5rem; background: var(--bg); border-bottom: 1px solid var(--line);
}
.sw-x { color: var(--ink); text-decoration: none; font-size: 1.9rem; line-height: 1; padding: .1rem .5rem; border-radius: 999px; }
.sw-bar { flex: 1; height: 6px; appearance: none; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.sw-bar::-webkit-progress-bar { background: var(--surface-2); }
.sw-bar::-webkit-progress-value { background: var(--swa); border-radius: 999px; }
.sw-bar::-moz-progress-bar { background: var(--swa); }
.sw-chip { font: 750 1rem/1 var(--sans); padding: .45rem .7rem; border-radius: 999px; background: var(--surface-2); white-space: nowrap; }
.sw-chip.is-hot { background: var(--swa); color: var(--bg); }

.sw-card {
  position: relative; min-height: 100cqh; padding: 4.5rem var(--gutter) 3rem; display: flex; flex-direction: column; justify-content: center; gap: 1.2rem;
  scroll-snap-align: start;
}
.sw-card > :not(.visually-hidden) { width: min(40rem, 100%); margin-inline: auto; }
.sw-kicker { font: 700 .95rem/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 0; color: var(--swa); }
.sw-card h1 { font: 700 clamp(3.2rem, 16vw, 5.2rem)/1 var(--serif); color: var(--ink); margin: 0 auto; }
.sw-card h2 { font: 700 clamp(2.6rem, 12vw, 4rem)/1.05 var(--serif); color: var(--ink); margin: 0 auto; }
.sw-def { font: 500 clamp(1.4rem, 6vw, 1.9rem)/1.35 var(--serif); margin-bottom: 0; }
.sw-hook { font: 600 clamp(1.7rem, 7.4vw, 2.5rem)/1.3 var(--serif); margin-bottom: 0; }
.sw-lede { font-size: 1.25rem; margin-bottom: 0; color: var(--ink-2); }
.sw-emb-xl { color: var(--swa); width: 5.5rem; height: 5.5rem; stroke-width: 1.6; }
.sw-small { font-size: .95rem; margin-bottom: 0; }
.sw-deck a:not(.btn) { color: var(--ink); }

/* buttons */
.sw-btns { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 0; }
.sw-deck .btn { min-height: 3.3rem; padding: .7rem 1.4rem; font-size: 1.1rem; border-radius: 999px; }
.sw-deck .sw-go { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.sw-deck .sw-ghost { background: transparent; color: var(--ink); border: 2px solid var(--line-strong); }

/* ── Multiple choice ── */
.sw-q { font: 650 clamp(1.55rem, 6.6vw, 2.1rem)/1.3 var(--serif); margin-bottom: 0; }
.sw-opts { display: grid; gap: .8rem; }
.sw-opt {
  min-height: 4rem; padding: .8rem 1.2rem; border-radius: 16px; text-align: left; cursor: pointer;
  font: 650 1.2rem/1.3 var(--sans); color: var(--ink); background: var(--surface); border: 2px solid var(--line-strong);
  transition: transform .12s ease, background .15s ease;
}
.sw-opt:active { transform: scale(.98); }
.sw-opt:disabled { cursor: default; }
.sw-opt.is-right { background: var(--ok); color: var(--bg); border-color: var(--ok); }
.sw-opt.is-right::before { content: "✓ "; }
.sw-opt.is-wrong { background: var(--surface-2); border-color: var(--bad); color: var(--ink-2); }
.sw-opt.is-wrong::before { content: "✗ "; }
.sw-opt:disabled:not(.is-right):not(.is-wrong) { opacity: .6; }
.sw-why { font-size: 1.15rem; line-height: 1.5; padding: 1rem 1.1rem; border-radius: 16px; background: var(--surface-2); }
.sw-why p { margin: 0; }
.sw-verdict { font: 800 1.5rem/1.2 var(--sans); margin-bottom: .4rem !important; }
@media (prefers-reduced-motion: no-preference) {
  .sw-opt.is-right { animation: sw-pop .32s ease; }
  .sw-chip.is-hot { animation: sw-pop .32s ease; }
  .sw-why:not([hidden]) { animation: sw-in .25s ease; }
}
@keyframes sw-pop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes sw-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── The picture: the page's diagram, large, on a panel in the page's theme ── */
.sw-panel { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; padding: 1.1rem; }
.sw-panel .vz { margin: 0; font-size: 1.08rem; --accent: var(--swa); }
.sw-panel .vz-title { font-size: 1.3rem; }
.sw-time { font-weight: 400; }

/* ── Level and score cards ── */
.sw-big { font: 800 clamp(4.5rem, 24vw, 7rem)/1 var(--sans); margin-bottom: 0; }
.sw-of { font-size: .4em; font-weight: 700; }
.sw-links { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: .5rem; }
.sw-links a { display: block; padding: .8rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-weight: 650; text-decoration: none; }