/* Sacred Legacy Family Tracker — themes: original, dark, light */

:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* Set from JS (offlineBanner.offsetHeight) once the banner is shown;
     0 while hidden so nothing shifts when offline. */
  --banner-h: 0px;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

html[data-theme="original"] {
  --bg: #1B120C;
  --panel: #241811;
  --panel-alt: #2C1E14;
  --ink: #F3EBDF;
  --ink-soft: #C9B8A0;
  --gold: #C49B54;
  --gold-deep: #8C6A2F;
  --accent: #C49B54;
  --border: #3A2A1A;
  --danger: #C0563E;
  --success: #6E9C6B;
  --chip-bg: #2C1E14;
  --chip-active: #C49B54;
  --chip-active-ink: #1B120C;
}

html[data-theme="dark"] {
  --bg: #101216;
  --panel: #181B21;
  --panel-alt: #1E222A;
  --ink: #E7E9ED;
  --ink-soft: #9AA1AC;
  --gold: #7FB2E5;
  --gold-deep: #4E80AE;
  --accent: #7FB2E5;
  --border: #2A2E37;
  --danger: #E06C5B;
  --success: #6FBE7A;
  --chip-bg: #1E222A;
  --chip-active: #7FB2E5;
  --chip-active-ink: #101216;
}

html[data-theme="light"] {
  --bg: #F7F3EC;
  --panel: #FFFFFF;
  --panel-alt: #F0EAE0;
  --ink: #221A12;
  --ink-soft: #6B5D4C;
  --gold: #A0752F;
  --gold-deep: #7C5A22;
  --accent: #A0752F;
  --border: #E1D8C8;
  --danger: #B23B27;
  --success: #3F7D45;
  --chip-bg: #F0EAE0;
  --chip-active: #A0752F;
  --chip-active-ink: #FFFFFF;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
}

/* Review item 9: lock page scroll while any overlay (summary modal, menu
   drawer, reset dialog) is open. JS saves the scroll position into
   body.style.top before adding this class and restores it (scrollTo) after
   removing it, so the page doesn't jump. */
body.has-overlay {
  overflow: hidden;
  position: fixed;
  left: 0;
  width: 100%;
}

button {
  font-family: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

.screen[hidden] { display: none !important; }

/* ---------- PIN screen ---------- */

#pin-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + 24px) calc(var(--safe-right) + 20px)
           calc(var(--safe-bottom) + 24px) calc(var(--safe-left) + 20px);
}

.pin-card {
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
}

.pin-card h1 {
  margin: 0 0 4px;
  font-size: 1.6rem;
  color: var(--gold);
}

.pin-sub {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

#pin-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#pin-input, #reset-pin-input {
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  text-align: center;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--ink);
  min-height: 52px;
}

#pin-submit {
  min-height: 48px;
  border-radius: 10px;
  border: none;
  background: var(--gold);
  color: var(--bg);
  font-weight: 600;
  font-size: 1rem;
}

.pin-error {
  margin-top: 14px;
  color: var(--danger);
  font-size: 0.9rem;
}

/* ---------- App shell ---------- */

#app {
  padding-bottom: calc(var(--safe-bottom) + 24px);
}

/* Centred column (A22.2): 880px max, page margins on desktop, full width on
   phones (any viewport narrower than 880px already fills it). The sticky
   topbar lives inside this column, so it must never get overflow/height
   constraints that would break position:sticky against the viewport. */
.app-column {
  max-width: 880px;
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
  padding: calc(var(--safe-top) + 12px) calc(var(--safe-right) + 16px) 10px
            calc(var(--safe-left) + 16px);
  border-bottom: 1px solid var(--border);
}

/* When the fixed offline banner is showing (top:0, same as .topbar), push
   the header down by the banner's height instead of letting the banner
   cover the title/actions (item 12). --banner-h is set from JS
   (offlineBanner.offsetHeight) only while the banner is visible. */
body.is-offline #app {
  padding-top: var(--banner-h);
}

body.is-offline .topbar {
  top: var(--banner-h);
  /* The banner already reserves --safe-top in its own padding; without this
     override the topbar's normal safe-top + 12px padding stacks on top of
     it, leaving a dead gap above the title on notched phones while offline. */
  padding-top: 12px;
}

.topbar-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "spacer title actions";
  align-items: center;
  gap: 8px;
}

.topbar-spacer {
  grid-area: spacer;
}

.topbar-title {
  grid-area: title;
  text-align: center;
  min-width: 0;
}

.topbar-title h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  white-space: nowrap;
}

.topbar-subtitle {
  margin: 2px 0 0;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.topbar-actions {
  grid-area: actions;
  justify-self: end;
  display: flex;
  gap: 6px;
}

@media (max-width: 460px) {
  .topbar-row {
    grid-template-columns: 1fr;
    grid-template-areas: "title" "actions";
  }
  .topbar-spacer { display: none; }
  .topbar-actions {
    justify-self: center;
    margin-top: 8px;
  }
  .topbar-title h1 {
    white-space: normal;
  }
}

.icon-btn {
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- bars (shared: dashboard / by-rarity / summary) ---------- */

.progress-track {
  height: 6px;
  border-radius: 6px;
  background: var(--panel-alt);
  overflow: hidden;
  border: 1px solid var(--border);
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transition: width 0.3s ease;
}

/* ---------- dashboard (A22.4) ---------- */

.dashboard {
  padding: 18px 16px 4px;
}

.dash-progress-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 10px;
}

.dash-label {
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.03em;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.dash-figure {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.stat-tile {
  flex: 1 1 calc(20% - 8px);
  min-width: 92px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 12px 8px;
  text-align: center;
}

@media (max-width: 560px) {
  .stat-tile {
    flex: 1 1 calc(33.333% - 7px);
  }
}

.stat-number {
  font-family: var(--font-serif);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.1;
}

.stat-label {
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.03em;
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin-top: 4px;
}

.stat-sub {
  font-size: 0.72rem;
  color: var(--ink-soft);
  opacity: 0.85;
  margin-top: 2px;
}

.by-rarity {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.rarity-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rarity-row-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 96px;
  font-size: 0.82rem;
  color: var(--ink);
}

.rarity-row-sym {
  color: var(--accent);
  min-width: 16px;
  text-align: center;
}

.rarity-row-track {
  flex: 1;
}

.rarity-row-count {
  min-width: 48px;
  text-align: right;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------- views / filters ---------- */

.views {
  display: flex;
  gap: 6px;
  padding: 20px 16px 0;
  overflow-x: auto;
}

.view-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink-soft);
  font-size: 0.9rem;
  white-space: nowrap;
}

.view-btn.active {
  background: var(--accent);
  color: var(--chip-active-ink);
  border-color: var(--accent);
  font-weight: 600;
}

.filters {
  /* Even rhythm: this 10px bottom padding matches the 10px top padding
     above (views -> chips) and the 10px flex gap below (chips -> search),
     so search -> first card row is the same 10px too, not the ~4px it used
     to leave (coordinator nit, 2026-09-02). */
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.chip {
  min-height: 44px;
  padding: 0 12px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--ink-soft);
  font-size: 0.82rem;
  white-space: nowrap;
}

.chip.active {
  background: var(--chip-active);
  color: var(--chip-active-ink);
  border-color: var(--chip-active);
  font-weight: 600;
}

#search-input {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--ink);
  padding: 0 14px;
  font-size: 1rem;
}

/* ---------- card list ---------- */

.section-heading {
  margin: 20px 16px 8px;
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-list {
  list-style: none;
  margin: 0;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.card-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  touch-action: manipulation;
}

.card-row.owned {
  border-color: var(--gold-deep);
}

.card-row .num {
  font-variant-numeric: tabular-nums;
  color: var(--ink-soft);
  font-size: 0.85rem;
  min-width: 34px;
}

.card-row .sym {
  min-width: 20px;
  text-align: center;
  color: var(--accent);
}

.card-row .info {
  flex: 1;
  min-width: 0;
}

.card-row .name {
  font-size: 0.95rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-row .subtitle {
  font-size: 0.78rem;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-row .count-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.card-row .count-btn {
  min-width: 44px;
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--ink);
  font-size: 1.1rem;
  line-height: 1;
}

.card-row .count-badge {
  min-width: 28px;
  text-align: center;
  font-weight: 700;
  color: var(--gold);
}

.card-row .promo-mirror {
  font-size: 0.72rem;
  color: var(--ink-soft);
}

/* ---------- shop-link icon buttons on missing cards (A26) ---------- */
/* Replaces A24/A25's text link row -- same slot/footprint as the -/n/+
   count controls (.count-btn), so missing rows are the same height as
   owned rows. Real eBay/CollX marks (locally-hosted <img>, see
   app/static/icons/), each owner's trademark -- see README "Logos" note. */

.count-btn.shop-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--ink-soft);
}

.count-btn.shop-icon-btn:hover,
.count-btn.shop-icon-btn:focus-visible,
.count-btn.shop-icon-btn:active {
  border-color: var(--gold);
}

.shop-icon-img {
  display: block;
  pointer-events: none;
}

.shop-icon-ebay {
  width: 30px;
  height: auto;
}

.shop-icon-collx {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
}

.shop-icon-sold-badge {
  position: absolute;
  right: -3px;
  bottom: -3px;
  background: var(--gold);
  color: var(--bg);
  font-size: 0.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 4px;
  border-radius: 999px;
  border: 1px solid var(--panel);
  pointer-events: none;
}

.secondary-btn {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink);
  font-size: 0.9rem;
}

.primary-btn {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
  font-weight: 600;
}

/* ---------- overlays / drawers ---------- */

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 20;
}

.overlay[hidden] { display: none !important; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.drawer-head h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--gold);
}

/* ---------- summary modal (A22.5) ---------- */

.overlay.modal {
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + 20px) calc(var(--safe-right) + 20px)
           calc(var(--safe-bottom) + 20px) calc(var(--safe-left) + 20px);
}

.modal-card {
  width: 100%;
  max-width: 440px;
  max-height: 85vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
}

.summary-percent {
  font-family: var(--font-serif);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gold);
  text-align: center;
  line-height: 1.1;
}

.summary-count {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 2px 0 16px;
}

.summary-progress-track {
  margin-bottom: 18px;
}

.summary-rarity-rows {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin-bottom: 18px;
}

.summary-rarity-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.summary-rarity-row-label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 82px;
  font-size: 0.8rem;
  color: var(--ink);
}

.summary-rarity-row-sym {
  color: var(--accent);
  min-width: 14px;
  text-align: center;
}

.summary-rarity-row-track {
  flex: 1;
}

.summary-rarity-row-count {
  min-width: 44px;
  text-align: right;
  font-size: 0.76rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.summary-rarity-row-pct {
  min-width: 38px;
  text-align: right;
  font-size: 0.76rem;
  color: var(--ink-soft);
}

.summary-totals {
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.summary-total-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.summary-total-row span:last-child {
  font-weight: 700;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.summary-actions {
  display: flex;
  gap: 10px;
}

.summary-actions .secondary-btn {
  flex: 1;
}

/* ---------- banner / toast ---------- */

.banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  background: var(--danger);
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
  padding: calc(var(--safe-top) + 8px) 12px 8px;
}

.banner[hidden] { display: none !important; }

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 20px);
  transform: translateX(-50%);
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--gold);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 0.88rem;
  z-index: 40;
  max-width: 88vw;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.toast[hidden] { display: none !important; }

/* ---------- hamburger menu drawer (A23) ---------- */

.overlay.side-drawer {
  align-items: stretch;
  justify-content: flex-end;
}

.side-drawer-panel {
  width: 320px;
  max-width: 88vw;
  height: 100%;
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
  padding: calc(var(--safe-top) + 16px) calc(var(--safe-right) + 16px)
           calc(var(--safe-bottom) + 16px) 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu-section {
  margin: 14px 0;
}

.menu-section-heading {
  margin: 0 0 10px;
  font-variant: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
}

.menu-section-heading-danger {
  color: var(--danger);
}

.menu-divider {
  height: 1px;
  background: var(--border);
  margin: 14px 0;
}

.menu-item-btn {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 44px;
  text-align: left;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--ink);
  font-size: 0.92rem;
  margin-bottom: 8px;
  text-decoration: none;
  box-sizing: border-box;
}

.menu-item-btn:last-child {
  margin-bottom: 0;
}

.menu-item-danger {
  border-color: var(--danger);
  color: var(--danger);
}

/* ---------- "Show shop links" switch (A26) ---------- */

.menu-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  gap: 10px;
  margin-bottom: 8px;
}

.menu-toggle-label {
  font-size: 0.92rem;
  color: var(--ink);
}

.switch-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  flex-shrink: 0;
}

.switch-toggle-track {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.switch-toggle[aria-checked="true"] .switch-toggle-track {
  background: var(--gold);
  border-color: var(--gold);
}

.switch-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--panel);
  transition: transform 0.15s ease;
}

.switch-toggle[aria-checked="true"] .switch-toggle-knob {
  transform: translateX(20px);
  background: var(--bg);
}

.theme-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.theme-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--ink);
  font-size: 0.8rem;
}

.theme-tile.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold) inset;
  font-weight: 600;
}

.theme-tile-swatch {
  width: 100%;
  height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

/* Each swatch is painted with its OWN theme's literal colours (not CSS
   vars, which only reflect the currently-active theme) so all three tiles
   preview correctly regardless of which theme is active right now. */
.theme-tile-swatch-original {
  background: linear-gradient(135deg, #1B120C 55%, #C49B54 55%);
}

.theme-tile-swatch-dark {
  background: linear-gradient(135deg, #101216 55%, #7FB2E5 55%);
}

.theme-tile-swatch-light {
  background: linear-gradient(135deg, #F7F3EC 55%, #A0752F 55%);
}

/* ---------- reset-collection confirm dialog (A23.5) ---------- */

.reset-warning {
  margin: 4px 0 16px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

#reset-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.danger-btn {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
  font-weight: 600;
}