/* The app (/, docs/plans/04-app-emulator.md), filling the window, safe areas included. The layout follows the window's media queries: compact (the iPhone's layout: a tab bar, panels over the card) unless both sides are at least 600px, then regular (the iPad's: a sidebar, and the study sheet beside the card in landscape). router.js holds the same two queries (REGULAR, LANDSCAPE) for the screens that lay out in JavaScript. Every selector starts with .app- because this file is part of the site's stylesheet too. */
.app-html, .app-body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.app-body { margin: 0; background: #050507; color: var(--text-primary); }
.app-missing { margin: 0; padding: 24px; max-width: 60ch; }
.app-screen { --safe-top: env(safe-area-inset-top, 0px); --safe-right: env(safe-area-inset-right, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); position: fixed; inset: 0; overflow: hidden; background: var(--background-base); font-family: var(--lab-body); }

.app-layer { position: absolute; inset: 0; box-sizing: border-box; padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left); display: flex; flex-direction: column; }
.app-layer > * { flex: 1; min-height: 0; }
.app-loading, .app-error { margin: auto; padding: 24px; text-align: center; }
.app-error { color: #ff8a80; }
.app-toast { position: absolute; left: 50%; bottom: calc(24px + var(--safe-bottom)); transform: translateX(-50%); z-index: 50; max-width: 85%; padding: 10px 16px; border-radius: 10px; background: #2a2a33; color: #f3ecd8; font-size: 14px; }
.app-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.app-button { font: inherit; font-size: 15px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border-strong); background: transparent; color: inherit; cursor: pointer; }
.app-button:disabled { opacity: 0.4; cursor: default; }
.app-icon-button { flex: none; width: 36px; height: 36px; border-radius: 18px; border: 1px solid var(--border-subtle); background: transparent; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; }

/* Home: a tab bar at the foot in compact size, a sidebar beside the content in regular size. */
.app-home { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "header" "content" "tabs"; }
.app-home__header { grid-area: header; padding: 20px 20px 12px; }
.app-home__title { margin: 0; font-family: var(--lab-display); font-size: 24px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.app-home__subtitle { margin: 4px 0 0; color: var(--text-secondary); font-size: 15px; }
.app-home__content { grid-area: content; overflow: auto; padding: 8px 20px 20px; outline: none; }
.app-home__tabs { grid-area: tabs; display: flex; border-top: 1px solid var(--border-subtle); background: #0d0d12; }
.app-home__tab { flex: 1; padding: 14px 4px; border: 0; background: none; color: var(--text-tertiary); font: inherit; font-size: 14px; cursor: pointer; }
.app-home__tab[aria-current] { color: var(--text-primary); }
@media (min-width: 600px) and (min-height: 600px) {
  .app-home { grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "header content" "tabs content"; }
  .app-home__header { border-right: 1px solid var(--border-subtle); padding: 28px 24px 16px; }
  .app-home__tabs { flex-direction: column; justify-content: flex-start; border-top: 0; border-right: 1px solid var(--border-subtle); background: none; padding: 8px 12px; }
  .app-home__tab { flex: none; text-align: left; padding: 10px 12px; border-radius: 8px; font-size: 16px; }
  .app-home__tab[aria-current] { background: #1a1a22; }
  .app-home__content { padding: 28px 32px; }
}
.app-tab__title { margin: 0 0 8px; font-size: 20px; font-weight: 500; }
.app-tab__note { color: var(--text-secondary); }

/* The viewer */
.app-layer--viewer { background: #08080c; z-index: 10; }
.app-viewer { position: relative; display: flex; overflow: hidden; background: #08080c; }
.app-viewer__main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-viewer__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; outline: none; }
.app-viewer__page { position: absolute; inset: 0; }
.app-viewer__slot { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 0.3s; }
.app-viewer__slot.is-moving { transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; }
.app-viewer__slot.is-fading-in, .app-viewer__slot.is-fading-out { opacity: 0; }
.app-viewer__slot .deck-card { -webkit-tap-highlight-color: transparent; }
.app-viewer__text-page { width: 70mm; height: 120mm; zoom: var(--card-zoom); box-sizing: border-box; padding: 9mm 8mm; display: grid; align-content: center; overflow: auto; border: 0.3mm solid #3a3a44; border-radius: 3mm; background: #0e0e14; color: #f3ecd8; font-family: var(--lab-body); font-size: 4.2mm; line-height: 1.5; }
.app-viewer__text-page p { margin: 0; }
.app-viewer__text-page--closing { background: #12100c; }
.app-viewer__commentary { flex: none; max-height: 30%; overflow: auto; padding: 12px 20px 16px; border-top: 1px solid var(--border-subtle); color: #e9e2cd; font-size: 15px; line-height: 1.5; }
.app-viewer__commentary[hidden] { display: none; }
.app-viewer__controls { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; transition: opacity 0.25s; }
.app-viewer[data-controls="hidden"] .app-viewer__controls:not(:focus-within) { opacity: 0; }
.app-viewer[data-controls="shown"] .app-viewer__bar { pointer-events: auto; }
.app-viewer__bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: rgb(8 8 12 / 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.app-viewer__bar--foot { justify-content: center; gap: 24px; }
.app-viewer__position { flex: 1; text-align: center; font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.app-viewer__control { flex: none; min-width: 44px; height: 44px; border-radius: 22px; border: 1px solid var(--border-subtle); background: transparent; color: inherit; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.app-viewer__control:disabled { opacity: 0.3; cursor: default; }
.app-viewer__control[aria-pressed="true"] { color: #c8a75a; border-color: #c8a75a; }

/* The study sheet: a panel over the card, or beside it at iPad size in landscape. */
.app-viewer__sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 86%; box-sizing: border-box; overflow: auto; overscroll-behavior: contain; padding: 20px 20px calc(28px + var(--safe-bottom)); border-radius: 16px 16px 0 0; background: #121218; box-shadow: 0 -12px 40px rgb(0 0 0 / 0.5); }
.app-viewer__sheet[hidden] { display: none; }
@media (min-width: 600px) and (min-height: 600px) and (orientation: landscape) {
  .app-viewer__sheet { position: relative; flex: none; width: 400px; height: auto; border-radius: 0; border-left: 1px solid var(--border-subtle); box-shadow: none; }
}
.app-study { font-size: 16px; line-height: 1.55; color: #ece5d0; }
.app-study__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.app-study__mark { margin: 0; font-family: var(--lab-display); color: #c8a75a; letter-spacing: 0.1em; }
.app-study__name { margin: 2px 0 0; font-family: var(--lab-display); font-size: 24px; font-weight: 400; line-height: 1.2; }
.app-study__tarot { margin: 4px 0 0; font-size: 13px; color: var(--text-tertiary); }
.app-study__question { margin: 0 0 16px; font-size: 18px; font-style: italic; }
.app-study__question em { font-style: normal; }
.app-study__section { margin-top: 18px; }
.app-study__section p { margin: 0 0 8px; }
.app-study__label { margin: 0 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #c8a75a; }
.app-study__symbols { margin: 0 0 8px; padding-left: 18px; }
.app-study__echo { color: var(--text-secondary); }
.app-study__media { display: flex; gap: 8px; }
.app-study__note-text { width: 100%; box-sizing: border-box; font: inherit; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: #0b0b10; color: inherit; resize: vertical; }
.app-study__note-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.app-study__note-status { font-size: 13px; color: var(--text-tertiary); }
.app-study__neighbours { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 8px; color: var(--text-secondary); }
.app-study__related { display: flex; flex-wrap: wrap; gap: 6px; }
.app-study__card { font: inherit; font-size: 14px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-subtle); background: transparent; color: inherit; cursor: pointer; }

/* Shared controls: a segmented control, the search field, small and primary buttons. */
.app-button--small { font-size: 13px; padding: 4px 10px; }
.app-button--primary { border-color: #c8a75a; color: #f3ecd8; background: rgb(200 167 90 / 0.14); }
.app-button--danger { border-color: #ff8a80; color: #ff8a80; }
.app-segment { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; }
.app-segment__option { font: inherit; font-size: 14px; padding: 6px 12px; border: 0; border-right: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); cursor: pointer; }
.app-segment__option:last-child { border-right: 0; }
.app-segment__option[aria-pressed="true"] { background: #23232c; color: var(--text-primary); }
.app-search, .app-seed { font: inherit; font-size: 15px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: #0b0b10; color: inherit; }
.app-search { flex: 1; min-width: 0; }
.app-seed { width: 9ch; margin-left: 8px; font-variant-numeric: tabular-nums; }
.app-home__header { position: relative; }
.app-home__about { position: absolute; top: 18px; right: 16px; font: inherit; font-size: 14px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); cursor: pointer; }
@media (min-width: 600px) and (min-height: 600px) {
  .app-home__about { position: static; margin-top: 12px; }
}

/* The deck: thumbnails in a grid or as rows, under the tiers and groups. */
.app-deck__toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.app-deck__walk { margin-bottom: 4px; }
.app-deck__tier { margin: 24px 0 4px; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #c8a75a; }
.app-deck__group { margin-top: 14px; }
.app-deck__group-title { margin: 0 0 8px; font-family: var(--lab-display); font-size: 18px; font-weight: 400; }
.app-deck__group-sub { margin-left: 8px; font-family: var(--lab-body); font-size: 13px; color: var(--text-tertiary); }
.app-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px 10px; }
.app-thumbs--list { grid-template-columns: 1fr; gap: 0; }
@media (min-width: 600px) and (min-height: 600px) {
  .app-thumbs { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 16px 14px; }
  .app-thumbs--list { grid-template-columns: 1fr; gap: 0; }
}
.app-thumb { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.app-thumb__art { display: block; aspect-ratio: 70 / 120; border-radius: 6px; overflow: hidden; background: #15151c; border: 1px solid #24242c; }
.app-thumb__art img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.app-thumb__mark { font-family: var(--lab-display); font-size: 11px; letter-spacing: 0.08em; color: #c8a75a; margin-top: 4px; }
.app-thumb__name { font-size: 13px; line-height: 1.3; }
.app-thumb__badge { font-size: 11px; color: var(--text-tertiary); }
.app-thumb__star { position: absolute; top: 4px; right: 6px; color: #c8a75a; font-size: 16px; text-shadow: 0 1px 3px rgb(0 0 0 / 0.8); }
.app-thumb--stub { cursor: default; opacity: 0.45; }
.app-thumb--stub .app-thumb__art { border-style: dashed; background: none; }
.app-thumb--row { flex-direction: row; align-items: baseline; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--border-subtle); }
.app-thumb--row .app-thumb__mark { flex: none; width: 5ch; margin: 0; }
.app-thumb--row .app-thumb__name { flex: 1; font-size: 15px; }
.app-thumb--row .app-thumb__star { position: static; font-size: 14px; }
.app-thumb--missing { gap: 6px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: 6px; cursor: default; }
.app-tarot { list-style: none; margin: 0; padding: 0; }
.app-tarot__row { display: flex; width: 100%; gap: 12px; justify-content: space-between; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--border-subtle); background: none; color: inherit; font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.app-tarot__name { color: var(--text-secondary); }
.app-tarot__row.is-missing { cursor: default; opacity: 0.5; }

/* Bookmarks, the reorder list and the notes. */
.app-bookmarks__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.app-bookmarks__head .app-tab__title { flex: 1; margin: 0; }
.app-reorder { list-style: none; margin: 0; padding: 0; }
.app-reorder__row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--border-subtle); background: var(--background-base); }
.app-reorder__row.is-dragging { position: relative; z-index: 2; box-shadow: 0 8px 24px rgb(0 0 0 / 0.5); opacity: 0.92; }
.app-reorder__row.is-drop-before { box-shadow: inset 0 2px 0 #c8a75a; }
.app-reorder.is-drop-end .app-reorder__row:last-child { box-shadow: inset 0 -2px 0 #c8a75a; }
.app-reorder__handle { flex: none; width: 36px; text-align: center; font-size: 20px; color: var(--text-tertiary); cursor: grab; touch-action: none; }
.app-reorder__name { flex: 1; font-size: 15px; }
.app-reorder__missing { color: var(--text-tertiary); font-size: 13px; }
.app-notes { list-style: none; margin: 0; padding: 0; }
.app-notes__item { display: block; width: 100%; padding: 10px 2px; border: 0; border-bottom: 1px solid var(--border-subtle); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.app-notes__item.is-missing { cursor: default; }
.app-notes__name { font-size: 15px; }
.app-notes__text { margin: 4px 0; color: var(--text-secondary); font-size: 14px; white-space: pre-wrap; }
.app-notes__date { font-size: 12px; color: var(--text-tertiary); }

/* Walks: the form, the deal (a row in regular size, a stack in compact), the guided walks and the history. */
.app-walks .app-tab__title { margin-top: 24px; }
.app-walks .app-tab__title:first-child { margin-top: 0; }
.app-walk__form { display: flex; flex-direction: column; gap: 10px; }
.app-walk__field { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-walk__label { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #c8a75a; min-width: 7ch; }
.app-walk__deal { margin-top: 16px; }
.app-walk__meta { margin: 0 0 12px; color: var(--text-secondary); font-size: 14px; }
.app-walk__seed { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.app-walk__compare { color: var(--text-secondary); }
.app-walk__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.app-walk__card { --w: 120px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: var(--w); padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.app-walk__row .app-walk__card { --w: 128px; }
.app-walk__row:has(.app-walk__card:nth-child(4)) .app-walk__card { --w: 96px; }
.app-walk__card[aria-disabled="true"] { cursor: default; }
.app-walk__back, .app-walk__art { display: grid; place-items: center; width: var(--w); aspect-ratio: 70 / 120; border-radius: 7px; overflow: hidden; }
.app-walk__back { box-sizing: border-box; border: 1px solid #c8a75a; background: radial-gradient(circle at 50% 50%, #1d1a2c 0, #0d0c14 70%); box-shadow: inset 0 0 0 5px #0d0c14, inset 0 0 0 6px rgb(200 167 90 / 0.5); }
.app-walk__back-mark { color: #c8a75a; font-size: 28px; }
.app-walk__card.is-next .app-walk__back { box-shadow: inset 0 0 0 5px #0d0c14, inset 0 0 0 6px rgb(200 167 90 / 0.5), 0 0 0 2px #c8a75a; }
.app-walk__art { background: #15151c; }
.app-walk__art img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.app-walk__step { font-size: 12px; letter-spacing: 0.06em; color: #c8a75a; text-align: center; }
.app-walk__name { font-size: 13px; text-align: center; line-height: 1.3; }
.app-walk__stack-layout { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.app-walk__turned { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.app-walk__turned .app-walk__card { --w: 84px; }
.app-walk__stack { display: grid; justify-items: center; padding-bottom: calc(var(--stack) * 4px); }
.app-walk__stack .app-walk__card { --w: 150px; grid-area: 1 / 1; transform: translate(calc(var(--depth) * 3px), calc(var(--depth) * 4px)); }
.app-walk__stack .app-walk__card:not(:last-child) .app-walk__step { visibility: hidden; }
.app-walk__actions { display: flex; justify-content: center; margin-top: 14px; }
.app-guided, .app-history { list-style: none; margin: 0; padding: 0; }
.app-guided__item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--border-subtle); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.app-guided__title { font-family: var(--lab-display); font-size: 17px; }
.app-guided__length { font-size: 13px; color: var(--text-tertiary); }
.app-guided__intro { grid-column: 1 / -1; font-size: 14px; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.app-history__item { padding: 10px 2px; border-bottom: 1px solid var(--border-subtle); }
.app-history__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; color: var(--text-tertiary); }
.app-history__cards { margin: 4px 0 6px; font-size: 15px; }

/* About: a panel over everything. */
.app-layer--about { z-index: 20; background: rgb(0 0 0 / 0.72); }
.app-about { margin: auto; flex: none; width: min(560px, calc(100% - 24px)); max-height: calc(100% - 24px); box-sizing: border-box; overflow: auto; overscroll-behavior: contain; padding: 20px 22px; border-radius: 16px; background: #121218; font-size: 15px; line-height: 1.5; }
.app-about__header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.app-about__header .app-tab__title { margin: 0; }
.app-about__notice { margin: 14px 0; padding: 10px 12px; border-left: 3px solid #c8a75a; background: #1a1812; }
.app-about__notice p { margin: 0; }
.app-about__status { margin-top: 6px !important; font-size: 13px; color: var(--text-tertiary); }
.app-about__facts { margin: 0; }
.app-about__row { display: grid; grid-template-columns: 9em 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); }
.app-about__row dt { color: var(--text-tertiary); }
.app-about__row dd { margin: 0; overflow-wrap: anywhere; }
.app-about__clear { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-about__clear p { margin: 0; flex-basis: 100%; color: var(--text-secondary); }
.app-about--first { text-align: center; }


/* Reduce Motion: the turn becomes a cross-fade and pages fade instead of sliding (viewer.js checks the same query). */
@media (prefers-reduced-motion: reduce) {
  .app-viewer .deck-card__inner { transition: none; transform: none !important; }
  .app-viewer .deck-card__face { transition: opacity 0.3s; backface-visibility: visible; -webkit-backface-visibility: visible; }
  .app-viewer .deck-card__face--back { transform: none; opacity: 0; }
  .app-viewer .deck-card.is-flipped .deck-card__face--back { opacity: 1; }
  .app-viewer .deck-card.is-flipped .deck-card__face--front { opacity: 0; }
  .app-viewer__slot.is-moving { transition: opacity 0.3s; }
}