/* Website theme for the tool pages, loaded after each page's own CSS so every calculator
   matches the homepage. Mirrors mobile/src/app-theme.css; the app build strips this file
   and injects its own copy (see mobile/scripts/mobile-page.mjs). */
@import url("site-bar.css");
:root {
  --site-ink: #172033;
  --site-muted: #5b6780;
  --site-line: #e3e8f1;
  --site-brand: #4338ca;
  --site-brand-soft: #eef2ff;
  --site-teal: #0f766e;
  --site-radius: 18px;
  --site-shadow: 0 8px 22px rgba(23, 32, 51, 0.06);
  --calculator-input-border: rgba(67, 56, 202, 0.22);
  --calculator-input-bg: #f5f7ff;
  --calculator-input-shadow: none;
  --calculator-input-focus: #4338ca;
  --calculator-input-ring: rgba(99, 102, 241, 0.18);
}
html, body {
  background:
    radial-gradient(1100px 480px at 0% -10%, #e0e7ff 0%, transparent 60%),
    radial-gradient(900px 440px at 100% 0%, #ccfbf1 0%, transparent 55%),
    #f7f8fc !important;
  background-attachment: fixed !important;
  color: var(--site-ink) !important;
  font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif !important;
  -webkit-tap-highlight-color: transparent;
}

/* The page's own title now lives in the app bar. */
/* (Hiding the source heading itself is in site-bar.css.) */
.hero .eyebrow { display: none !important; }
.wrap, .shell { padding-top: 14px !important; }
.site-header, header.title { padding-top: 0 !important; }

/* ---------- Surfaces */
.card, .panel, .hero {
  background: #fff !important;
  border: 1px solid var(--site-line) !important;
  border-radius: var(--site-radius) !important;
  box-shadow: var(--site-shadow) !important;
}
.card h2, .panel h2 { color: var(--site-ink) !important; font-size: 17px !important; letter-spacing: 0 !important; }
.muted, .hint, .note, .intro { color: var(--site-muted); }

/* ---------- Inputs */
input[type="number"], input[type="text"], input:not([type]), select {
  min-height: 44px;
  border-radius: 12px !important;
  font-size: 16px !important;
  font-family: inherit !important;
}
select { padding-right: 28px; }

/* ---------- Buttons */
.btn, .ghost-btn {
  min-height: 38px;
  padding: 8px 16px !important;
  border: 1px solid rgba(67, 56, 202, 0.22) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--site-brand) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(67, 56, 202, 0.08) !important;
}
.btn.primary, .btn.gold {
  border-color: transparent !important;
  background: linear-gradient(135deg, #6366f1, #4338ca) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(67, 56, 202, 0.28) !important;
}
.btn:active, .ghost-btn:active { transform: scale(0.97); }

/* ---------- Tables */
table { border-collapse: separate; border-spacing: 0; }
th { background: var(--site-brand-soft) !important; color: #3730a3 !important; font-weight: 700; }
td, th { border-color: var(--site-line) !important; }
.table-wrapper, .table-wrap, .table-scroll { border-radius: 14px; }

/* ---------- Website-only chrome */
.update-note { border-radius: 14px !important; }

/* A hero whose title column was emptied becomes a single column. */
.site-collapsed { grid-template-columns: 1fr !important; }

/* Treasure calculator on wide screens: the short "current progress" panel stays in view
   beside the long result list instead of leaving an empty column. */
@media (min-width: 821px) {
  html[data-site-page="TreasureCalculator"] .layout > .panel:first-child {
    position: sticky;
    top: calc(64px + env(safe-area-inset-top));
  }
  html[data-site-page="TreasureCalculator"] .breakdown { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* The heading sits first, so an odd number of rows ends on an even child: let it fill the row. */
  html[data-site-page="TreasureCalculator"] .breakdown > .breakdown-row:last-child:nth-child(even) { grid-column: 1 / -1; }
}
.site-collapsed { padding: 14px 16px !important; }
/* With the page title moved into the top bar, a hero card only holds a short intro and chips:
   the original roomy padding would leave an empty band above them. */
html.site-shell .hero:not(.site-collapsed) { padding: clamp(14px, 2.4vw, 22px) !important; align-items: center !important; }
/* A plain (card-less) page header keeps only its buttons; padding there is just blank space. */
.site-header.site-collapsed { padding: 0 !important; }
html[data-site-page="TreasureCalculator"] .breakdown > :not(.breakdown-row) { grid-column: 1 / -1; }

/* ---------- Website additions */
@media (hover: hover) {
  .btn:hover, .ghost-btn:hover { border-color: rgba(67, 56, 202, 0.45) !important; }
}
/* Pages reserved room above their content for the old floating home button. */
html.site-shell .wrap, html.site-shell .shell { margin-top: 0 !important; }