/**
 * Static pages (rules, contact, status) and the order-card component.
 *
 * Loaded by rules.html / contact.html / status.html, and injected at runtime by
 * js/orderstatus.js when the "my slots" modal opens on top of the wall - that is
 * why page chrome is scoped under `.page` and never leaks onto index.html, while
 * the `.ocard*` component classes are namespaced and safe anywhere.
 */

/* --- page chrome ---------------------------------------------------------- */
.page-top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
}
.page-top .brand {
  font-weight: 700; font-size: var(--fs-lg); letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.page-back { font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; }
.page-back:hover { color: var(--ink); }

.page .mock-flag {
  padding: 2px 6px; border: 1px dashed var(--line-2);
  font-size: var(--fs-xs); letter-spacing: var(--track); text-transform: uppercase;
  color: var(--ink-3);
}

/* --- document typography (base.css owns .doc, this adds the page furniture) - */
.doc h1 { margin-bottom: var(--s-3); }
.doc h2 { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.doc p { margin: var(--s-3) 0; }
.doc ul { margin: var(--s-3) 0; padding-left: 18px; }
.doc li { margin-bottom: var(--s-1); }
.doc b { font-weight: 700; }

.doc .updated {
  margin: var(--s-3) 0 0;
  font-size: var(--fs-sm); letter-spacing: var(--track); text-transform: uppercase; color: var(--ink-3);
}

.doc-toc {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3);
  margin: var(--s-4) 0 var(--s-5);
  padding: var(--s-3);
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: var(--fs-sm);
}
.doc-toc a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.doc-toc a:hover { color: var(--ink); border-color: var(--ink); }

/* --- contact -------------------------------------------------------------- */
.contact-card {
  margin: var(--s-4) 0; padding: var(--s-3);
  border: 1px solid var(--line); background: var(--surface-2);
}
.contact-card p { margin: var(--s-2) 0 0; }
.contact-mail { font-size: var(--fs-lg); }
.contact-mail a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }

/* --- status page ---------------------------------------------------------- */
.codebar {
  margin: var(--s-5) 0 var(--s-4); padding: var(--s-3);
  border: 1px solid var(--ink); background: var(--surface-2);
}
.codebar-row { display: flex; gap: var(--s-2); }
.codebar-row input {
  flex: 1 1 auto; min-width: 0;
  font-size: var(--fs-lg); letter-spacing: .12em; text-transform: uppercase;
}
.codebar-row .btn { flex: 0 0 auto; }
.codebar .hint { margin-top: var(--s-2); }

.codebar-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--line);
}
.codebar-foot .hint { margin: 0; }

.page #result { margin: var(--s-4) 0; }

.miss { padding: var(--s-3); border-left: 2px solid var(--danger); background: var(--surface-2); }
.miss p { margin: 0 0 var(--s-2); }
.miss p:last-child { margin-bottom: 0; }
.miss p:first-child { color: var(--danger); }

/* --- order cards ---------------------------------------------------------- */
.ocards { display: flex; flex-direction: column; gap: var(--s-2); margin: var(--s-3) 0; }

.ocard {
  display: flex; gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--line); background: var(--surface);
}
.ocard.full { flex-direction: column; gap: 0; }
.ocard-main { flex: 1 1 auto; min-width: 0; }

.ocard-head { display: flex; align-items: center; gap: var(--s-3); }
.ocard-title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.ocard-title b { font-size: var(--fs-lg); }

.ocard-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); }
.ocard-slot { font-size: var(--fs-lg); }
.ocard-sub {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2);
  margin-top: var(--s-1); color: var(--ink-2);
}

/* The code must never be broken across lines: it is what the buyer retypes. */
.ocode { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--s-1); }
.kv dd .ocode { justify-content: flex-end; }
.ocode code {
  padding: 2px 5px; border: 1px solid var(--line-2); background: var(--surface-2);
  letter-spacing: .06em; color: var(--ink); white-space: nowrap;
}
.ocode .btn { white-space: nowrap; }

.ocard-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.btn.armed { color: var(--danger); background: var(--surface-3); }

.ocard-note { margin: var(--s-3) 0 0; line-height: 1.6; }
.ocard-reason {
  margin: var(--s-2) 0 0; padding: var(--s-2);
  border-left: 2px solid var(--warn); background: var(--surface-2);
}

.ocard-pay {
  margin-top: var(--s-3); padding: var(--s-3);
  border: 1px solid var(--ink); background: var(--surface-2);
}
.ocard-payrow { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
.ocard-payrow code {
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere;
  padding: 6px; border: 1px solid var(--line-2); background: var(--surface);
  font-size: var(--fs-sm);
}
.ocard-pay .hint { margin-top: var(--s-2); }

.ocard-refund {
  margin-top: var(--s-3); padding: var(--s-3);
  border-left: 2px solid var(--ok); background: var(--surface-2);
}
.ocard-refund.owed { border-left-color: var(--warn); }
.ocard-refund p { margin: 0 0 var(--s-1); }
.ocard-refund p:last-child { margin-bottom: 0; }

.ocard-line { margin-top: var(--s-1); font-size: var(--fs-sm); color: var(--ok); }
.ocard-line.owed { color: var(--warn); }
.ocard-tx { font-size: var(--fs-sm); }

.ocard .kv { margin-top: var(--s-3); }
.ocard-log { margin-top: var(--s-3); }
.ocard-log summary {
  cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2);
  letter-spacing: var(--track); text-transform: uppercase;
}
.ocard-log ol { list-style: none; margin: var(--s-2) 0 0; padding: 0; font-size: var(--fs-sm); }
.ocard-log li {
  display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s-2);
  padding: var(--s-1) 0; border-top: 1px solid var(--line);
}
.ocard-log-ts { color: var(--ink-3); white-space: nowrap; }
.ocard-log-note { grid-column: 2; color: var(--ink-2); }

.omine-empty p { margin: 0 0 var(--s-3); }
.omine .hint { margin-top: var(--s-3); }

/* --- banner thumbnail ------------------------------------------------------ */
.ocard-thumb {
  /* position:relative is load-bearing: index.html also loads wall.css, whose .g/.row
     rules are absolutely positioned. Without a containing block the banner escapes
     the thumbnail and lands in the modal corner. */
  position: relative;
  flex: 0 0 auto; width: 88px; height: 31px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--surface-3);
}
.ocard-thumb img { display: block; width: 88px; height: 31px; image-rendering: pixelated; }
.ocard-thumb .fp {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  font-size: var(--fs-sm); color: var(--ink-3);
}

/* MOCK ONLY: slots without an uploaded file are drawn in CSS. The wall keeps its
   own copy of these rules; this one is scoped to the thumbnail so a page that
   does not load css/wall.css (status.html) still shows the banner. */
.ocard-thumb .row {
  display: flex; align-items: center; justify-content: center; gap: 2px;
  width: 100%; height: 100%; padding: 0 3px;
  background: var(--c1); color: var(--c2);
  font: 700 calc(var(--fs, .1) * 88px)/1 var(--font);
  white-space: nowrap; overflow: hidden;
}
.ocard-thumb .ic {
  flex: 0 0 auto; padding: 0 2px;
  background: var(--c3); color: var(--c4);
  font-size: calc(var(--icf, .1) * 88px);
}
.ocard-thumb .tx { overflow: hidden; }
.ocard-thumb .tx.two { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.ocard-thumb .tx.two i { font-style: normal; }
.ocard-thumb .px { display: grid; grid-template-columns: repeat(5, 2px); gap: 1px; flex: 0 0 auto; }
.ocard-thumb .px i { display: block; width: 2px; height: 2px; }
.ocard-thumb .bars { display: flex; flex-direction: column; flex: 0 0 auto; width: 5px; height: 62%; }
.ocard-thumb .bars span { flex: 1 1 auto; }

/* --- focus (keyboard) ------------------------------------------------------ */
.page a:focus-visible,
.page button:focus-visible,
.page input:focus-visible,
.ocard a:focus-visible,
.ocard button:focus-visible,
.omine a:focus-visible,
.omine button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* --- narrow screens (360px is the floor) ---------------------------------- */
@media (max-width: 420px) {
  .page-top { padding: var(--s-2) var(--s-3); }
  .doc { padding: var(--s-5) var(--s-3) var(--s-4); }
  .codebar-row { flex-wrap: wrap; }
  .codebar-row .btn { width: 100%; }
  .ocard-acts .btn { flex: 1 1 auto; }
  .ocard-payrow { flex-wrap: wrap; }
  .ocard-payrow .btn { width: 100%; }
}