/* Merc. One 1-bit scan sheet, built to his reference poster: pure black and white, hard ordered dither,
   1 px outlined cells with chamfered corners, one wide square techno face for the nameplate and one wide
   mono for everything else. No colour anywhere except the official platform marks on their keys. */

:root {
  --ground: #000;
  --ink: #fff;
  --n: 10px;                                   /* corner chamfer */
  --gut: clamp(18px, 4.6vw, 88px);             /* the sheet's 5% margin */
  --row: clamp(11px, 1.2vh, 17px);
  --cut: polygon(0 var(--n), var(--n) 0, calc(100% - var(--n)) 0, 100% var(--n),
                 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%,
                 var(--n) 100%, 0 calc(100% - var(--n)));
  /* the sheet's only "grey": a 2 px checkerboard of the two inks */
  --dither: repeating-conic-gradient(var(--ink) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
}

body {
  font-family: "Chivo Mono", ui-monospace, monospace;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; }
img { display: block; max-width: 100%; }
canvas { display: block; }

/* ---------------------------------------------------------------- the sheet */

.sheet {
  position: relative;
  min-height: 100svh;
  padding: clamp(14px, 2vh, 26px) var(--gut);
  display: flex;
  flex-direction: column;
  gap: var(--row);
}

/* ------------------------------------------------------------ corner labels */

.marks {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex: 0 0 auto;
}
.marks b { font-weight: 500; }
.marks .right { text-align: right; }
.stat {
  display: flex;
  justify-content: flex-end;
  gap: 1.2em;
  white-space: nowrap;
}
.stat i { font-style: normal; color: var(--ink); opacity: 0.62; }
.stat u { text-decoration: none; min-width: 7ch; text-align: right; }

/* ------------------------------------------------------------- picture zone */

.scan {
  position: relative;
  flex: 1 1 auto;
  min-height: 300px;
  display: grid;
  grid-template-columns: minmax(136px, 198px) 1fr minmax(136px, 198px);
  align-items: start;
  gap: clamp(12px, 1.6vw, 28px);
}

.hero {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 54px);
  width: min(44vw, 790px);
  height: auto;
  image-rendering: pixelated;
  pointer-events: none;
  z-index: 0;
}
/* the only motion on the sheet: a scan bar crossing the mass, once every six seconds */
.hero-wrap { position: absolute; left: 0; right: 0; top: -76px; bottom: calc(-1 * var(--row)); overflow: hidden; z-index: 0; pointer-events: none; }
@keyframes sweep { 0% { top: -10%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: 104%; opacity: 0; } }

.col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(12px, 1.8vh, 26px); }
.col.right { align-items: flex-end; text-align: right; }

/* framed inset: 1 px frame, four corner brackets inside it */
.frame { position: relative; width: 100%; max-width: 194px; background: var(--ground); outline: 1px solid var(--ink); }
.frame img { width: 100%; height: auto; image-rendering: pixelated; }
.frame .br { position: absolute; width: 18px; height: 18px; border: 2px solid var(--ink); }
.frame .br.tl { top: 9px; left: 9px; border-right: 0; border-bottom: 0; }
.frame .br.tr { top: 9px; right: 9px; border-left: 0; border-bottom: 0; }
.frame .br.bl { bottom: 9px; left: 9px; border-right: 0; border-top: 0; }
.frame .br.br2 { bottom: 9px; right: 9px; border-left: 0; border-top: 0; }
.frame .xbox { position: absolute; top: 14px; left: 14px; width: 42px; height: 42px; border: 2px solid var(--ink);
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px)),
              linear-gradient(to bottom right, transparent calc(50% - 1px), var(--ink) calc(50% - 1px), var(--ink) calc(50% + 1px), transparent calc(50% + 1px)); }
.tick { width: 18px; flex: 0 0 18px; align-self: stretch; }
.sideby { display: flex; align-items: stretch; gap: 14px; width: 100%; }
.sideby > canvas[data-ink="loop"] { flex: 1 1 auto; min-width: 0; }
.col.right .sideby { justify-content: space-between; gap: 26px; }
.col.right .sign { flex: 0 1 auto; }
.cap { font-size: 16px; letter-spacing: 0.07em; opacity: 0.85; }

.sign { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.hex { width: 74px; height: 74px; }
.sign b { font-weight: 500; font-size: clamp(18px, 1.5vw, 26px); line-height: 1.12; letter-spacing: 0.03em; }

/* ----------------------------------------------------------- nameplate band */

.plate {
  flex: 0 0 auto;
  background: var(--ink);
  padding: 1px;
  clip-path: var(--cut);
}
.plate > .inner {
  background: var(--ground);
  clip-path: var(--cut);
  display: flex;
  align-items: stretch;
}
.plate .wm {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px clamp(16px, 2vw, 40px);
  font-family: "Zen Dots", "Chivo Mono", monospace;
  font-size: min(5.9vw, 10.6vh, 110px);
  line-height: 1.08;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  -webkit-text-stroke: 0.058em var(--ink);
  paint-order: stroke fill;
}
.plate .wm + .wm { border-left: 1px solid var(--ink); }

/* a compact version of the same plate for the inner pages */
.plate.ident .wm { font-size: clamp(26px, 3.2vw, 52px) !important; padding: 14px clamp(16px, 2vw, 34px); -webkit-text-stroke-width: 0.05em; }

/* ------------------------------------------------------------ the two rules */

.rule { flex: 0 0 auto; height: 3px; background: var(--ink); }

/* ----------------------------------------------------------- the lower band */

.band {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(12px, 1.5vw, 24px);
}

.cell { background: var(--ink); padding: 1px; clip-path: var(--cut); display: flex; flex-direction: column; }
.cell > .inner { background: var(--ground); clip-path: var(--cut); padding: 16px 26px; flex: 1 1 auto; }
.cell.flat { padding: 0; background: none; clip-path: none; outline: 1px solid var(--ink); }

.readout .inner { display: flex; flex-direction: column; gap: 12px; justify-content: center; height: 100%; }
.readout h2 { margin: 0; font-size: 18px; font-weight: 500; letter-spacing: 0.07em; }
.wave { display: flex; align-items: stretch; gap: 14px; flex: 0 0 auto; height: clamp(86px, 10vh, 116px); }
.wave > canvas:not(.gauge) { flex: 1 1 auto; width: 100%; height: 100%; }
.wave > .gauge { width: 18px; flex: 0 0 18px; height: 100%; }

/* ring rows: the navigation, the reference's own list element */
.rows { display: flex; flex-direction: column; gap: 2px; }
.rows > .head { padding: 10px 26px 8px; font-size: 18px; letter-spacing: 0.07em; }
.row {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 46px;
  padding: 4px 26px;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.ring { position: relative; flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 50%; }
.row[aria-current="page"] .ring::after,
.row.on .ring::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink); }
.row span { font-size: 18px; letter-spacing: 0.05em; }
.row:hover .ring, .row:focus-visible .ring { box-shadow: 0 0 0 3px var(--ground), 0 0 0 5px var(--ink); }

/* ---------------------------------------------------------------- caption */

.caption {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
  font-size: clamp(16px, 1.15vw, 21px);
  letter-spacing: 0.1em;
}

/* ---------------------------------------------------------- page sections */

.sections { padding: 0 var(--gut) clamp(40px, 7vh, 96px); display: flex; flex-direction: column; gap: clamp(22px, 3vh, 44px); }
.sec { scroll-margin-top: 24px; }
.sec > h2 { margin: 0 0 14px; font-size: 18px; font-weight: 500; letter-spacing: 0.1em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 1.2em; }
.sec > h2 > span { white-space: nowrap; }
.sec > h2 em { font-style: normal; opacity: 0.62; }

/* the contract block */
.cell.ident > .inner { padding: 26px 30px; display: flex; flex-direction: column; gap: 18px; }
.mint { font-size: clamp(16px, 1.6vw, 30px); letter-spacing: 0.02em; word-break: break-all; text-transform: none; }
.mint.empty { opacity: 0.62; }
.keys { display: flex; flex-wrap: wrap; gap: 10px; }
.key {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  min-height: 52px; padding: 14px 1.3em;
  font-size: 17px; letter-spacing: 0.06em;
  background: var(--ink); color: var(--ground);
  clip-path: var(--cut);
  cursor: pointer;
}
.key.ghost { background: var(--ground); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.key[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.key img { width: 22px; height: 22px; object-fit: contain; }
.key:hover { box-shadow: inset 0 0 0 3px var(--ground); }
.key.ghost:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.key:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.row:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* data tables, drawn as the sheet's own rows */
.tbl { width: 100%; border-collapse: collapse; font-size: 17px; }
.tbl th { text-align: left; font-weight: 500; opacity: 0.62; padding: 0 20px 10px; letter-spacing: 0.08em; white-space: nowrap; }
.tbl th.num, .tbl td.num { text-align: right; }
.tbl td { padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, 0.28); vertical-align: middle; }
.tbl tbody tr:hover td { background: rgba(255, 255, 255, 0.06); }
.tbl .nm { text-transform: none; }
.tbl .mut { opacity: 0.6; }

.empty-note { padding: 26px 30px; opacity: 0.68; font-size: 17px; }

/* a labelled value, the sheet's data pair */
.pair { display: flex; flex-direction: column; gap: 6px; }
.pair i { font-style: normal; font-size: 16px; opacity: 0.62; letter-spacing: 0.08em; }
.pair b { font-weight: 500; font-size: clamp(22px, 2.1vw, 38px); letter-spacing: 0.02em; overflow-wrap: anywhere; }
.pair b.words { font-size: 20px; letter-spacing: 0.05em; }
/* a placeholder is two dashes, and tracking pulls them apart into something that reads as a mistake */
.pair b.ph { letter-spacing: -0.04em; }
.pairs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 22px 30px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 12px; }
.step > .inner { padding: 26px 32px; display: flex; flex-direction: column; gap: 10px; min-height: 100%; }
.step b { font-family: "Zen Dots", monospace; font-weight: 400; font-size: 42px; line-height: 1; text-transform: none; }
.step p { margin: 0; font-size: 17px; text-transform: none; letter-spacing: 0.02em; line-height: 1.5; }

/* forms */
.field { display: flex; flex-direction: column; gap: 8px; }
.field > i { font-style: normal; font-size: 16px; opacity: 0.62; letter-spacing: 0.08em; }
.field input, .field select, .field textarea {
  font: inherit; letter-spacing: inherit; text-transform: none;
  background: var(--ground); color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0;
  min-height: 52px; padding: 12px 18px;
  width: 100%;
}
.field select { appearance: none; background-image: none; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--ink); outline-offset: -4px; }
.hint { margin: 0; font-size: 16px; opacity: 0.68; text-transform: none; letter-spacing: 0.02em; overflow-wrap: anywhere; }

.flag { font-size: 16px; letter-spacing: 0.06em; opacity: 0.8; }
.ok { opacity: 1; }
.bad { opacity: 1; }

/* ------------------------------------------------------------------ phone */

@media (max-width: 760px) {
  .sec > h2 { display: block; }
  .sec > h2 em { display: block; margin-top: 4px; }
}

@media (max-width: 900px) {
  .tick { display: none; }
  .col > canvas[data-ink="loop"] { max-width: 300px; }
  .scan { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: 0; }
  .col.right { align-items: flex-start; text-align: left; }
  .hero { position: relative; left: auto; bottom: auto; transform: none; width: 100%; max-width: 420px; margin: 8px auto 0; }
  .hero-wrap { position: relative; inset: auto; }
  .band { grid-template-columns: 1fr; }
  .marks { flex-direction: column; align-items: flex-start; gap: 10px; }
  .marks .right { text-align: left; }
  .stat { justify-content: flex-start; }
  .plate > .inner { flex-direction: column; }
  .plate .wm + .wm { border-left: 0; border-top: 1px solid var(--ink); }
  .sign { align-items: flex-start; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tr { border-top: 1px solid rgba(255, 255, 255, 0.28); padding: 14px 20px; }
  .tbl td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; gap: 16px; }
  .tbl td::before { content: attr(data-l); opacity: 0.6; }
  .tbl td.num { text-align: right; }
}

@media (max-width: 420px) {
  :root { --n: 7px; }
  body { font-size: 17px; }
}

@media (min-width: 901px) and (max-height: 880px) {
  :root { --row: 9px; }
  .sheet { padding-top: 11px; padding-bottom: 11px; }
  .plate .wm { font-size: min(4.9vw, 11.6vh, 88px); padding: 25px clamp(16px, 2vw, 40px); }
  .rows > .head { padding: 7px 26px 5px; font-size: 17px; }
  .row { min-height: 40px; padding: 2px 26px; }
  .row span { font-size: 17px; }
  .wave { height: 68px; }
  .frame { max-width: 150px; }
  .sideby > canvas[data-ink="loop"] { height: 86px !important; }
  .sheet .cell > .inner { padding: 11px 24px; }
  .caption { font-size: 17px; }
  .marks, .cap { font-size: 16px; }
}

/* ---------------------------------------------------------- inner pages */

/* the nameplate shrinks away from the home sheet, but it is the same box */
.sheet.page .plate .wm { font-size: clamp(26px, 3.1vw, 50px) !important; padding: 26px clamp(16px, 2vw, 34px) !important; }
.sheet.page { min-height: 0; }
.sheet.page .band { min-height: 230px; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 22px 28px; }
.form-grid .wide { grid-column: 1 / -1; }

ul.plain { margin: 0; padding: 0 0 0 1.4em; display: flex; flex-direction: column; gap: 12px; }
ul.plain li { font-size: 17px; text-transform: none; letter-spacing: 0.02em; line-height: 1.5; }
ul.plain li b { font-weight: 500; }

.run-head { display: flex; flex-wrap: wrap; gap: 0.6em 1.4em; font-size: 17px; letter-spacing: 0.06em; }
.run-head span:last-child { opacity: 0.68; text-transform: none; }
.screen {
  flex: 1 1 auto;
  min-height: 120px;
  max-height: 260px;
  overflow: auto;
  background: var(--ground);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  padding: 14px 18px;
  font-size: 16px;
  line-height: 1.5;
  text-transform: none;
  letter-spacing: 0;
  white-space: pre-wrap;
  word-break: break-word;
}
.screen .line { display: block; padding: 2px 0; }
.screen .line i { font-style: normal; opacity: 0.55; }
.screen .line.bad { box-shadow: inset 2px 0 0 var(--ink); padding-left: 10px; }
.screen .empty-note { padding: 0; }

/* the one risk line, at the end of the docs and in one place only */
.riskline {
  margin: 8px 0 0;
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: none;
  opacity: 0.55;
}

.filefield { position: relative; }
.filefield input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.filefield .face {
  display: flex; align-items: center; gap: 0.8em;
  min-height: 52px; padding: 12px 18px;
  border: 1px solid var(--ink);
  font-size: 18px; letter-spacing: 0.04em; text-transform: none;
}
.filefield .face b { font-weight: 400; opacity: 0.6; }
.filefield input[type="file"]:focus + .face { outline: 2px solid var(--ink); outline-offset: -4px; }