@font-face {
  font-family: 'GT Canon Mono';
  src: url('fonts/GT-Canon-Mono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000;
  --fg: #fff;
  --fg-strong: #fff;
  --fg-dim: #fff;
  --line: #fff;
  --line-subtle: #fff;
  --fs: 11px;
  --pad: 16px;
  --gap: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'GT Canon Mono', ui-monospace, monospace;
  font-size: var(--fs);
  font-feature-settings: "liga" 0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body { display: flex; flex-direction: column; min-height: 100vh; }
body.locked { height: 100vh; min-height: 0; overflow: hidden; }
main { flex: 1 1 auto; padding: var(--pad); }
main.fullbleed { padding: 0; min-height: 0; overflow: hidden; }
main.flush { padding: 0; }

a { color: var(--fg); text-decoration: none; letter-spacing: 0.04em; }
a:hover { text-decoration: underline; }

button {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
  font-family: inherit;
  font-size: var(--fs);
  padding: 6px 12px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
button:hover:not(:disabled) { background: var(--fg); color: var(--bg); }
button:disabled { opacity: 0.4; cursor: not-allowed; }

input[type="text"] {
  background: #000;
  color: var(--fg);
  border: 1px solid var(--line-subtle);
  font-family: inherit;
  font-size: var(--fs);
  padding: 4px 8px;
  width: 100%;
}

/* Slider — 1px track, 10px circular thumb (matches demo) */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track { height: 1px; background: var(--fg); border: 0; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 10px; height: 10px; border-radius: 50%; background: var(--fg); margin-top: -4.5px; border: 0; }
input[type="range"]::-moz-range-track { height: 1px; background: var(--fg); border: 0; }
input[type="range"]::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--fg); border: 0; }

/* Header — single bottom border */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--line);
}
header .brand { text-transform: uppercase; letter-spacing: 0.12em; }
header nav { display: flex; gap: 20px; align-items: center; }
header nav a, header nav button {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  border: none;
  padding: 0;
  font-size: var(--fs);
}
header nav a:hover, header nav button:hover { background: transparent; color: var(--fg); text-decoration: underline; }

/* Per-column top section on the composition page (replaces the horizontal header bar).
   Negative horizontal margins pull the section out to the column edges so the
   bottom border extends the full column width, matching the vertical dividers. */
.col-top, .composition-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  margin: 0 calc(-1 * var(--pad)) var(--pad);
  padding: 0 var(--pad) 12px;
  border-bottom: 1px solid var(--line);
}
/* Right-side info column: with only the nav inside, flex space-between
   defaults to start-alignment. Force right-alignment instead. */
.info .col-top { justify-content: flex-end; }
.col-top .brand { text-transform: uppercase; letter-spacing: 0.12em; }
.col-top nav { display: flex; gap: 20px; align-items: center; }
.col-top nav a, .col-top nav button {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  border: none;
  padding: 0;
  font-size: var(--fs);
  color: var(--fg);
}
.col-top nav a:hover, .col-top nav button:hover { background: transparent; text-decoration: underline; }

.composition-nav button {
  background: transparent;
  border: none;
  padding: 0 4px;
  font-size: 14px;
  letter-spacing: 0;
}
.composition-nav button:hover { background: transparent; color: var(--fg-strong); }
.composition-nav .num { text-transform: uppercase; letter-spacing: 0.12em; }

/* ========= Home: collection grid =========
   Cells share borders. Each cell has border-right + border-bottom only; the grid
   container provides border-left to close the leftmost edge. The header's
   bottom-border closes the top. Result: a single continuous grid of lines, no
   double-bordering. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  border-left: 1px solid var(--line);
}
.cell {
  background: var(--bg);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  position: relative;
  aspect-ratio: 1;
}
.cell:hover { filter: invert(1); }
.cell button:hover:not(:disabled) { background: var(--fg-strong); color: var(--bg); }
.cell .frame {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cell .frame pre {
  margin: 0;
  white-space: pre;
  font-feature-settings: "liga" 0;
  color: var(--fg-strong);
  letter-spacing: -0.175em;
  transform-origin: center center;
  /* Compensate for sub-pixel anti-aliasing when scaled by reinforcing each
     glyph with a subtle white halo. Doubles up the painted pixels so the
     braille dots stay solid white instead of greying out. */
  text-shadow: 0 0 0.5px #fff, 0 0 0.5px #fff;
  /* Counter the bilinear dimming introduced by the physical-pixel snap on
     the scale transform. Each source pixel ends up spreading across a
     smaller output footprint, so peak intensity drops; brightness-boost
     pulls the dots back toward solid white. */
  filter: brightness(2);
}
.cell .meta { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.cell .meta .id-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
}
.cell .meta .id { text-transform: uppercase; letter-spacing: 0.08em; }
.cell .meta .owner-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap);
  word-break: break-all;
}
.cell .meta .owner-info .k {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin-right: 6px;
}
.cell .meta .buy { flex-shrink: 0; }

.empty-state { padding: 60px var(--pad); text-align: center; color: var(--fg-dim); }

/* ========= Composition detail =========
   Layout = a sheet divided by 3 single lines: 1 horizontal under the header,
   2 vertical between columns. No per-panel boxes. */
.composition-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 320px;
  height: 100%;
}
.composition-layout > aside,
.composition-layout > .info { padding: var(--pad); overflow-y: auto; }
.composition-layout > aside { border-right: 1px solid var(--line); }
.composition-layout > .stage {
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.composition-layout > .stage .frame {
  flex: 1;
  display: flex;
  align-items: safe center;
  justify-content: safe center;
  overflow: auto;
  min-height: 0;
  min-width: 0;
}
.composition-layout > .stage .frame pre {
  margin: 0;
  white-space: pre;
  font-feature-settings: "liga" 0;
  color: var(--fg-strong);
  transform-origin: center center;
  text-shadow: 0 0 0.5px #fff, 0 0 0.5px #fff;
}
/* Section headings */
.section-h {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 400;
  font-size: var(--fs);
  margin: 0 0 16px 0;
  color: var(--fg);
}

/* Param rows (sidebar) */
aside .row { margin-bottom: 14px; }
aside .row label {
  display: block;
  margin: 0 0 4px 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
aside .row label .v {
  color: var(--fg);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}
aside .row .control {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
aside .row .save {
  font-size: 10px;
  padding: 2px 6px;
  letter-spacing: 0.08em;
}

/* Read-only sizes block at bottom of params column. Edge-to-edge top border. */
aside .sizes {
  margin: var(--pad) calc(-1 * var(--pad)) 0;
  padding: var(--pad) var(--pad) 0;
  border-top: 1px solid var(--line);
}
aside .sizes .field { margin-bottom: 8px; }
aside .sizes .field .k {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin-bottom: 2px;
}
aside .sizes .field .v { color: var(--fg); }

/* Info panel */
.info .field { margin-bottom: 12px; }
.info .field .k {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin-bottom: 2px;
}
.info .field .v { word-break: break-all; }
.info hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--pad) calc(-1 * var(--pad));
}
.info .actions { display: flex; flex-direction: column; gap: 8px; }
.info .actions button { width: 100%; text-align: center; }

/* About */
.prose { max-width: 720px; line-height: 1.6; }
.prose p { margin: 0 0 1em 0; }
.prose a { border-bottom: 1px solid var(--fg); }
.prose a:hover { background: var(--fg); color: var(--bg); text-decoration: none; }

/* Buy-confirmation modal */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
#modal-overlay.show { display: flex; }
#modal-overlay .modal {
  background: var(--bg);
  border: 1px solid var(--line);
  width: min(560px, 92vw);
}
#modal-overlay .modal .modal-head {
  padding: var(--pad);
  border-bottom: 1px solid var(--line);
}
#modal-overlay .modal .modal-head h2 {
  margin: 0;
  font-size: var(--fs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
#modal-overlay .modal .modal-body { padding: var(--pad); }
#modal-overlay .modal .modal-body .field { margin-bottom: 10px; }
#modal-overlay .modal .modal-body .field .k {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin-bottom: 2px;
}
#modal-overlay .modal .modal-body .field .v { word-break: break-all; }
#modal-overlay .modal .modal-section-title {
  font-size: var(--fs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 12px;
  color: var(--fg);
}
/* Full-width divider between Source and Rendering Parameters sections.
   Negative horizontal margins extend the border-top to the modal edges. */
#modal-overlay .modal .modal-body .modal-params-section {
  margin: var(--pad) calc(-1 * var(--pad)) 0;
  padding: var(--pad) var(--pad) 0;
  border-top: 1px solid var(--line);
}
#modal-overlay .modal .modal-body .modal-params {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 16px;
}
#modal-overlay .modal .modal-body .modal-params .field { margin-bottom: 0; }
#modal-overlay .modal .modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  padding: var(--pad);
  border-top: 1px solid var(--line);
}
#modal-overlay .modal .modal-confirm-group {
  display: flex;
  align-items: center;
  gap: var(--gap);
}
#modal-overlay .modal .modal-price {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Status toast */
#status {
  position: fixed;
  bottom: var(--pad);
  left: var(--pad);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 10px 14px;
  max-width: calc(320px - 2 * var(--pad));
  display: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
#status.show { display: block; }

/* --- v4 additions --- */

/* Modal: price breakdown section (asking + premium + total) */
#modal-overlay .modal .modal-body .modal-price-section {
  margin: var(--pad) calc(-1 * var(--pad)) 0;
  padding: var(--pad) var(--pad) 0;
  border-top: 1px solid var(--line);
}

/* Composition page: trade panel actions (List / Unlist / Give / Acquire) */
.trade-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-top: var(--gap);
}
.trade-actions button {
  flex: 1 1 auto;
  min-width: 120px;
}

/* Listings page header */
.page-title {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: var(--fs);
  font-weight: 400;
  margin: var(--pad) var(--pad) 0;
}

/* --- Buy modal: tx progress states --- */

#modal-overlay .modal.modal-tx .modal-body { min-height: 200px; }
#modal-overlay .modal-tx-body p { margin: 0 0 12px; line-height: 1.5; }
#modal-overlay .modal.modal-tx .modal-body .field .k { color: var(--fg); }
#modal-overlay .modal-tx-body a { color: var(--fg); text-decoration: underline; word-break: break-all; }

/* Indeterminate spinner — single line that shifts back and forth. */
#modal-overlay .modal-spinner {
  height: 1px;
  margin: 16px 0;
  background: linear-gradient(90deg, transparent, var(--fg), transparent);
  background-size: 30% 100%;
  background-repeat: no-repeat;
  animation: modalSpinner 1.4s linear infinite;
}
@keyframes modalSpinner {
  0%   { background-position: -30% 0; }
  100% { background-position: 130% 0; }
}

/* Close button after a finished tx */
#modal-overlay .modal-close {
  margin-left: auto;
}

/* --- Listings page --- */

.listings {
  display: flex;
  flex-direction: column;
}

/* Shared grid template: header and every row use the same column widths so
   they align like a spreadsheet. */
.listing-header,
.listing-row {
  display: grid;
  grid-template-columns: 50px 100px minmax(0, 1.5fr) minmax(0, 1.5fr) 110px 110px 160px;
  gap: var(--gap);
  align-items: center;
  padding: 12px var(--pad);
  border-bottom: 1px solid var(--line);
}

.listing-header {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.listing-row {
  background: var(--bg);
  color: inherit;
  text-decoration: none;
}
.listing-row:hover { filter: invert(1); text-decoration: none; }

.listing-id {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.listing-tag {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.listing-title,
.listing-artist {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-seller {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.listing-price {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.listing-row .buy { width: 100%; }

/* --- About page --- */

main.about {
  padding: 48px var(--pad);
  display: flex;
  justify-content: center;
}
main.about,
main.about * {
  font-size: 14px;
}
main.about article {
  max-width: 800px;
  width: 100%;
  line-height: 1.7;
}
main.about p {
  margin: 0 0 1em;
}
main.about ul {
  list-style: none;
  padding-left: 2em;
  margin: 0 0 1em;
}
main.about .pairs p {
  padding-left: 2em;
}
main.about h2 {
  font-size: inherit;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 2.5em 0 1em;
}
main.about em {
  font-style: italic;
  color: var(--fg-strong);
}