@import url("tokens/font.css?v=2");
@import url("tokens/color.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/effect.css");

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--grad-body-gov);
  background-color: var(--bg-deep);
  background-attachment: fixed;
  color: var(--text-on-dark);
  font-family: var(--font-body);
}
a { color: var(--spirit-cyan); }
a:hover { color: var(--spirit-cyan-bright); }
::selection { background: var(--sol-gold); color: var(--realm-void-ink); }

/* Consistent fonts across every input/UI control on the site */
input, select, textarea, button {
  font-family: var(--font-body);
  font-size: var(--text-md);
}

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  background: rgba(10, 18, 48, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: var(--stroke-md) solid var(--border-strong);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header .brand {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: 'LingZCool', var(--font-display);
  font-size: var(--text-xl);
  color: var(--sol-gold);
  text-shadow: var(--glow-gold);
  text-decoration: none;
}
.brand-emblem { height: 34px; width: auto; flex: none; }
.site-header nav { display: flex; gap: var(--space-5); align-items: center; }
.site-header nav a {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  color: var(--text-on-dark-dim);
}
.site-header nav a:hover { color: var(--spirit-cyan); }
.wallet-badge {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--sol-gold);
  border: var(--stroke-thin) solid var(--sol-gold-deep);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
}

.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-9);
}

.card {
  background: var(--surface-card);
  border: var(--stroke-thin) solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  box-shadow: var(--shadow-md);
}

h1, h2, h3 { font-family: var(--font-heading); color: var(--text-on-dark); }

/* Home hero — mirrors ling-gov.org's about-page hero: coat of arms, then
   the national motto, then the page title, all centered. */
.home-hero { text-align: center; }
.home-hero .coat-of-arms { width: min(160px, 40vw); margin: 0 auto var(--space-3); display: block; filter: drop-shadow(0 4px 18px rgba(0,0,0,0.45)); }
.home-hero .motto { margin: 0 0 var(--space-2); font-style: italic; font-size: var(--text-sm); color: var(--sol-gold-deep); }
/* var(--font-heading) as fallback: it already carries the Noto Sans SC
   safety net for any hanzi LingFengGuang's own glyph set doesn't cover. */
.home-hero h1 { font-family: "LingZCool", var(--font-heading); }

.flash { border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); }
.flash-error { background: rgba(255,42,42,0.15); border: var(--stroke-thin) solid var(--royal-red); color: #ffb3b3; }
.flash-success { background: rgba(31,170,60,0.15); border: var(--stroke-thin) solid var(--sacred-green-bright); color: #b6f5c0; }

.btn {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  border: var(--stroke-thin) solid var(--sol-gold);
  background: transparent;
  color: var(--sol-gold);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}
.btn svg { flex: none; }
.btn:hover { background: var(--sol-gold); color: #0c0618; }
.btn-cyan { border-color: var(--spirit-cyan); color: var(--spirit-cyan); }
.btn-cyan:hover { background: var(--spirit-cyan); color: #0c0618; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: default; }
/* Primary CTA — filled gold with glow, for the one action that matters on
   a page (Mine & mint). */
.btn-primary {
  background: linear-gradient(180deg, var(--sol-gold), var(--sol-gold-deep));
  color: #0c0618;
  border-color: var(--sol-gold);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  box-shadow: var(--glow-gold);
}
.btn-primary:hover { filter: brightness(1.08); background: linear-gradient(180deg, var(--sol-gold), var(--sol-gold-deep)); color: #0c0618; }
.btn-primary:disabled { filter: none; }

.field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
.field label { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-on-dark-dim); }
.field input, .field select {
  background: var(--surface-raised);
  border: var(--stroke-thin) solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  color: var(--text-on-dark);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:hover, .field select:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--spirit-cyan);
  box-shadow: 0 0 0 2px rgba(0, 224, 224, 0.22);
}
/* Two controls side by side (Size + Language) */
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field-row .field { margin-bottom: var(--space-4); }

/* Two-column mint layout: form rail left, live preview right. The preview
   column is sticky so both note faces stay in view while scrolling the
   form; below 960px the grid stacks (form first) instead of wrapping the
   preview to an awkward second row like the old flex layout did. */
.wizard { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.wizard-form { min-width: 0; }
.wizard-preview { position: sticky; top: 82px; display: flex; flex-direction: column; gap: var(--space-2); align-items: center; min-width: 0; }
@media (max-width: 960px) {
  .wizard { grid-template-columns: 1fr; }
  .wizard-preview { position: static; }
}
.slot-caption { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--text-on-dark-dim); margin-top: var(--space-2); }

/* ── mint wizard form ─────────────────────────────────────────────────── */
.wizard-title { margin: 0; }
.wizard-subtitle { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text-on-dark-dim); }
/* A slim bar under the title that takes the selected denomination's color
   (set by wizard.js), tying the form to the note art's accent. */
.denom-accent { height: 4px; border-radius: 2px; background: var(--sol-gold); margin: var(--space-3) 0 var(--space-2); transition: background 0.2s ease; }

.form-section-label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--sol-gold-deep);
  border-bottom: var(--stroke-thin) solid var(--border-soft);
  padding-bottom: var(--space-2); margin: var(--space-5) 0 var(--space-3);
}
.form-section-label::before { content: ""; width: 12px; height: 2px; background: var(--sol-gold); border-radius: 1px; flex: none; }

/* AI artwork rows: a thumbnail that fills with the generated image, next to
   the prompt input + Generate button and a status line. */
.art-field { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--space-4); }
.art-thumb {
  width: 54px; height: 54px; flex: none; border-radius: var(--radius-sm);
  background: var(--surface-raised) center / cover no-repeat;
  border: var(--stroke-thin) dashed var(--border-soft);
  display: flex; align-items: center; justify-content: center;
}
.art-thumb.filled { border-style: solid; border-color: var(--sol-gold-deep); }
.art-thumb.filled .art-thumb-plus { display: none; }
.art-thumb-plus { color: var(--text-on-dark-dim); font-size: 22px; line-height: 1; }
.art-field-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.art-field-body label { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--text-on-dark-dim); }
.art-row { display: flex; gap: 6px; }
.art-row input {
  flex: 1; min-width: 0;
  background: var(--surface-raised); border: var(--stroke-thin) solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text-on-dark);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.art-row input:hover { border-color: var(--border-strong); }
.art-row input:focus { outline: none; border-color: var(--spirit-cyan); box-shadow: 0 0 0 2px rgba(0, 224, 224, 0.22); }
.sdai-generate-btn { flex: none; padding: 8px 12px; font-size: 11px; }
.sdai-status { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-on-dark-dim); min-height: 1.1em; margin: 0; }
.sdai-status.ok { color: var(--sacred-green-bright); }
.sdai-status.err { color: #ffb3b3; }

.mint-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); background: var(--surface-raised); border: var(--stroke-thin) solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.mint-stats .stat-label { display: block; font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); color: var(--text-on-dark-dim); }
.mint-stats .stat-value { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--sol-gold); }
.mint-status { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-on-dark-dim); min-height: 1.2em; margin: var(--space-2) 0 0; }

/* Whole-run wizard (/wizard/run): one progress row per denomination. */
.run-rows { display: flex; flex-direction: column; gap: 4px; margin-top: var(--space-3); }
.run-row { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: var(--text-xs); padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-raised); border: var(--stroke-thin) solid var(--border-soft); }
.run-row-denom { color: var(--text-on-dark); }
.run-row-status { color: var(--text-on-dark-dim); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--text-2xs); }
.run-row-status.mining, .run-row-status.minting, .run-row-status.rendering { color: var(--spirit-cyan); }
.run-row-status.done { color: var(--sacred-green-bright); }
.run-row-status.failed { color: var(--royal-red); }

/* Profile pictures (SDAI avatars) */
.profile-head { display: flex; gap: var(--space-5); align-items: center; }
.avatar { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sol-gold-deep); flex: none; }
.avatar-empty { display: flex; align-items: center; justify-content: center; background: var(--surface-raised); color: var(--sol-gold); font-family: 'LingZCool', var(--font-display); font-size: 34px; border-style: dashed; border-color: var(--border-soft); }
.avatar-badge { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 1px solid var(--sol-gold-deep); flex: none; }

/* The Bill Map: dense pixel-ad grid of tiny note fronts (2.35:1 tiles). */
.bill-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 6px; }
.bill-cell { aspect-ratio: 1416 / 602; border-radius: 3px; overflow: hidden; padding: 0; position: relative; }
.bill-cell-public { border: 1px solid; background: #0c0618; cursor: pointer; transition: transform 0.08s ease; }
.bill-cell-public:hover { transform: scale(1.06); z-index: 2; box-shadow: var(--shadow-md); }
.bill-cell-public img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bill-cell-blank { border: 1px dashed var(--border-soft); background: var(--surface-raised); opacity: 0.45; }
.bill-cell-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-mono); font-size: var(--text-xs); }

/* Lightbox */
.bill-lightbox-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(5, 3, 13, 0.82); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: var(--space-5); }
.bill-lightbox { position: relative; max-width: min(1100px, 94vw); max-height: 92vh; overflow: auto; background: var(--surface-card); border: var(--stroke-thin) solid var(--border-strong); border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-lg); }
.bill-lightbox-faces { display: flex; flex-direction: column; gap: var(--space-3); }
.bill-lightbox-faces img { width: 100%; height: auto; border-radius: 4px; display: block; }
.bill-lightbox-unrendered { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-on-dark-dim); padding: var(--space-6); text-align: center; border: 1px dashed var(--border-soft); border-radius: var(--radius-md); }
.bill-lightbox-info { margin-top: var(--space-4); display: flex; flex-direction: column; gap: 4px; }
.bill-lightbox-title { font-family: var(--font-mono); font-size: var(--text-lg); margin-bottom: var(--space-2); }
.bill-lightbox-row { display: flex; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); }
.bill-lightbox-label { flex: 0 0 150px; color: var(--text-on-dark-dim); letter-spacing: var(--tracking-wide); }
.bill-lightbox-value { color: var(--text-on-dark); word-break: break-all; }
.bill-lightbox-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--text-on-dark-dim); font-size: 18px; cursor: pointer; }
.bill-lightbox-close:hover { color: var(--text-on-dark); }
/* The note is always generated at a fixed 1416x602 intrinsic size; rather
   than scroll to see the rest of it (the old overflow-x:auto behavior),
   banknote-renderer.js's fitNoteToFrame() scales .note-face down (or up) via
   transform so the whole bill always fills this frame exactly. aspect-ratio
   keeps the frame's height in lockstep with its width with no JS needed for
   that part; max-width is the noteSize (compact/standard/large) knob. */
.note-slot { width: 100%; max-width: 720px; aspect-ratio: 1416 / 602; overflow: hidden; position: relative; margin: 0 auto; }
/* The note body has no opaque fill behind it (banknote-renderer.js draws it
   transparent so a print rig only inks actual content) -- this default
   black outline keeps its light text (gold/cyan/pewter) legible against
   whatever ends up behind it, mirroring the SVG export's legibilityStroke().
   Elements that pick their own text-shadow (the glowing treasury title/denom
   label) append this same shadow list rather than being overridden by it. */
.note-face { position: absolute; top: 0; left: 0; transform-origin: top left; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.note-card { display: flex; flex-direction: column; gap: var(--space-1); }
.note-seal { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-on-dark-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.note-state { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); padding: 2px 8px; border-radius: var(--radius-pill); text-transform: uppercase; }
.note-state-public { background: rgba(31,170,60,0.18); color: var(--sacred-green-bright); }
.note-state-private { background: rgba(0,224,224,0.15); color: var(--spirit-cyan); }
.note-state-scrapped { background: rgba(200,183,183,0.15); color: var(--pewter-300); }
.note-state-invalidated { background: rgba(255,42,42,0.18); color: var(--royal-red); }

/* Gallery print-selection bar (profile page) */
.note-print-pick { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-on-dark-dim); }
.print-bar { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.print-selected-count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-on-dark-dim); }

/* ── /print — A3 flip-and-print sheets ────────────────────────────────────
   Each .print-page is built at its true physical size in CSS mm (420x297,
   A3 landscape) so @page sizing and on-screen layout share one set of
   numbers. .print-page-frame scales it down for screen only (print-sheet.js);
   @media print strips that back off and lets the mm sizes drive the page. */
.print-page-frame { position: relative; width: 100%; max-width: 900px; margin: 0 auto var(--space-6); overflow: hidden; }
.print-page {
  position: absolute; top: 0; left: 0; transform-origin: top left;
  width: 420mm; height: 297mm;
  background: #fff;
  box-shadow: var(--shadow-md);
}
.print-cell { position: absolute; }
.print-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.print-cell-empty { border: 0.3mm dashed #ccc; }
.print-cell-tag {
  position: absolute; top: -3.2mm; left: 0; white-space: nowrap;
  font-family: var(--font-mono); font-size: 2.2mm; line-height: 1; color: #aaa;
}
.print-sheet-label {
  position: absolute; top: 2mm; left: 2mm;
  font-family: var(--font-mono); font-size: 3mm; color: #ccc;
}
.print-reg-mark { position: absolute; width: 4mm; height: 4mm; pointer-events: none; }
.print-reg-mark::before, .print-reg-mark::after { content: ""; position: absolute; background: #000; }
.print-reg-mark::before { left: 50%; top: 0; width: 0.2mm; height: 100%; transform: translateX(-50%); }
.print-reg-mark::after { top: 50%; left: 0; height: 0.2mm; width: 100%; transform: translateY(-50%); }
.print-reg-tl { left: 6mm; top: 6mm; }
.print-reg-tr { right: 6mm; top: 6mm; }
.print-reg-bl { left: 6mm; bottom: 6mm; }
.print-reg-br { right: 6mm; bottom: 6mm; }

/* Only the pass currently being printed (body.printing-fronts/-backs, set
   by print-sheet.js right before window.print()) should reach paper —
   without this, "Print fronts" would also silently emit every back page.
   On screen (no printing-* class yet) both passes stay visible for review. */
body.printing-fronts #print-backs-pages { display: none; }
body.printing-backs #print-fronts-pages { display: none; }

@media print {
  @page { size: A3 landscape; margin: 0; }
  .site-header, .no-print { display: none !important; }
  body, .page { background: #fff !important; margin: 0; padding: 0; max-width: none; }
  .print-page-frame { width: auto; max-width: none; margin: 0; overflow: visible; }
  .print-page {
    position: static !important; transform: none !important;
    box-shadow: none; break-after: page; page-break-after: always;
  }
  /* The last page of whichever pass is actually printing shouldn't force a
     trailing blank sheet after it. */
  .print-pass .print-page-frame:last-child .print-page { break-after: auto; page-break-after: auto; }
}