/* Stonkware. One face, one ground, one accent.
   The palette is sampled out of the supplied plates: black, his off white, his frame grey and
   the single lime pixel that sits beside the mark. Nothing else is a colour.

   Scroll rule: the incoming line is the only thing that scrolls by default. The rail holds a
   compact index that fits, the release file fits at any normal height, and the page itself
   never scrolls on a desktop. Anything longer is opened by the reader, not by the layout. */

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

:root {
  --void: #000000;
  --ink: #e3e2e2;
  --mid: #8f8f8f;
  --dim: #6a6a6a;
  --faint: #444444;
  --line: #1b1b1b;
  --line-2: #2c2c2c;
  --rule: #8f8f8f;
  --lime: #b1fe0a;
  --wash: #0a0a0a;

  /* one spacing scale, and no rule anywhere picks a number outside it */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --t-micro: 11px;
  --t-body: 14px;
  --t-head: 18px;
  --t-big: 26px;

  --rail: 268px;
  --nfo: 404px;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: "Departure Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

::selection { background: var(--lime); color: var(--void); }

:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* the one scrollbar the page admits to having */
.scrolls {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #3d3d3d transparent;
}
/* the older engine draws a track and two arrow buttons unless it is told not to */
.scrolls::-webkit-scrollbar { width: 8px; }
.scrolls::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
.scrolls::-webkit-scrollbar-track { background: transparent; }
.scrolls::-webkit-scrollbar-corner { background: transparent; }
.scrolls::-webkit-scrollbar-thumb { background: #3d3d3d; border-radius: 0; }
.scrolls::-webkit-scrollbar-thumb:hover { background: var(--dim); }

.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--s3); top: calc(-1 * var(--s7));
  z-index: 40;
  padding: var(--s2) var(--s3);
  background: var(--lime); color: var(--void);
  text-decoration: none;
}
.skip:focus { top: var(--s3); }

.lab {
  margin: 0;
  font-size: var(--t-micro);
  letter-spacing: .14em;
  color: var(--dim);
  text-transform: uppercase;
  font-weight: 400;
}

.note { margin: 0; font-size: var(--t-micro); color: var(--faint); line-height: 1.4; }

/* ------------------------------------------------------------- masthead */

.masthead {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s6);
  padding: var(--s4);
  border-bottom: 1px solid var(--line-2);
}

/* His lockup sits inside a thin frame with the corners cut away. The frame is one border and
   the notches are two sets of gradients painting the ground back over the corner runs. */
.plate {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s3) var(--s5);
  border: 1px solid var(--rule);
}
.plate::before,
.plate::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(var(--void), var(--void)) left 10px top -1px / 16px 3px no-repeat,
    linear-gradient(var(--void), var(--void)) right 10px top -1px / 16px 3px no-repeat,
    linear-gradient(var(--void), var(--void)) left 10px bottom -1px / 16px 3px no-repeat,
    linear-gradient(var(--void), var(--void)) right 10px bottom -1px / 16px 3px no-repeat;
}
.plate::after {
  background:
    linear-gradient(var(--void), var(--void)) left -1px top 10px / 3px 16px no-repeat,
    linear-gradient(var(--void), var(--void)) right -1px top 10px / 3px 16px no-repeat,
    linear-gradient(var(--void), var(--void)) left -1px bottom 10px / 3px 16px no-repeat,
    linear-gradient(var(--void), var(--void)) right -1px bottom 10px / 3px 16px no-repeat;
}

.mark { display: block; width: auto; height: 36px; image-rendering: pixelated; }

.lockup {
  display: block;
  color: var(--ink);
  font-size: var(--t-head);
  letter-spacing: .16em;
}
.lockup .dot { color: var(--lime); }
.lockup .wordmark { display: block; height: 22px; width: auto; }

.ident {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.strap { margin: 0; color: var(--mid); font-size: var(--t-body); }

.ident-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
}

.ticker {
  flex: none;
  font-size: var(--t-body);
  color: var(--ink);
  border: 1px solid var(--line-2);
  padding: 0 var(--s2);
}

/* the contract block, always visible, never abbreviated */
.contract {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  flex: 1 1 340px;
}
.contract .lab { flex: none; }
.contract .value {
  font-size: var(--t-micro);
  color: var(--ink);
  overflow-wrap: anywhere;
  user-select: all;
  min-width: 0;
}
.contract .value.pending { color: var(--dim); user-select: auto; }
.contract .value.pending .note { margin-left: var(--s2); }

.btn,
.copy {
  flex: none;
  appearance: none;
  font: inherit;
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--line-2);
  padding: var(--s1) var(--s2);
  cursor: pointer;
  line-height: 1.5;
}
.btn:hover:not(:disabled),
.copy:hover:not(:disabled) { border-color: var(--mid); }
.btn:disabled,
.copy:disabled { color: var(--faint); cursor: not-allowed; }
.copy.done { color: var(--lime); border-color: var(--lime); }
.copy.failed { color: var(--ink); border-color: var(--ink); }

.links { display: flex; gap: var(--s2); align-items: center; flex: none; }
.links a {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s1) var(--s2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.links a:hover { border-color: var(--mid); }
.links a[aria-disabled="true"] { color: var(--faint); border-color: var(--line); cursor: not-allowed; }
.links img, .links svg { display: block; height: 12px; width: auto; }
.links .x-mark { fill: currentColor; }

/* ----------------------------------------------------------------- deck */

.deck {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) var(--nfo);
}

.rail {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--s4);
  border-right: 1px solid var(--line-2);
}

/* On a desktop this wrapper does not exist as far as layout is concerned; on a phone it is
   the drawer the whole filter lives in. */
.rail-filters { display: contents; }
.rail-toggle { display: none; }

.find { display: flex; flex-direction: column; gap: var(--s2); }
.find input {
  appearance: none;
  font: inherit;
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--void);
  border: 1px solid var(--line-2);
  padding: var(--s2);
  min-width: 0;
}
.find input::placeholder { color: var(--faint); }
.find input:focus { border-color: var(--mid); }
.find .btn { align-self: flex-start; margin-top: var(--s1); }

.views { display: flex; flex-direction: column; }
.view {
  appearance: none;
  font: inherit;
  font-size: var(--t-body);
  letter-spacing: .1em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s2) 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  cursor: pointer;
  text-align: left;
}
.view:first-child { border-top: 1px solid var(--line); }
.view:hover { color: var(--ink); }
.view[aria-current="true"] { color: var(--ink); }
.view[aria-current="true"] .view-name::before { content: "> "; color: var(--lime); }
.view-n { font-size: var(--t-micro); color: var(--faint); font-variant-numeric: tabular-nums; }
.view[aria-current="true"] .view-n { color: var(--mid); }
.view-n.alert { color: var(--lime); }

/* the platform index: a block of tickers, not a list that needs a scrollbar */
.platforms {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: var(--s1);
}
.platform-grid.open {
  max-height: 42vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2) transparent;
}
.plat {
  appearance: none;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--s2);
  background: var(--void);
  border: 0;
  color: var(--dim);
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.plat:hover { background: var(--wash); color: var(--ink); }
.plat[aria-pressed="true"] { background: var(--wash); }
.plat[aria-pressed="true"] .plat-key { color: var(--lime); }
.plat-key {
  font-size: var(--t-body);
  line-height: 1.25;
  color: var(--mid);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plat.share .plat-key { color: var(--ink); }
.plat-n {
  font-size: var(--t-micro);
  line-height: 1.25;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.plat.everything { grid-column: 1 / -1; }
.plat.everything .plat-key { color: var(--ink); }
.platform-more { align-self: flex-start; }

/* -------------------------------------------------------------- listing */

.listing {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.listing-bar {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5) var(--s3);
}
.listing-bar .lab { font-size: var(--t-body); letter-spacing: .18em; color: var(--ink); }
.listing-meta { margin: 0; font-size: var(--t-micro); color: var(--faint); text-align: right; }
.listing-meta .live { color: var(--lime); }
.listing-meta .cold { color: var(--faint); }

.cols,
.row {
  display: grid;
  grid-template-columns: 78px 118px minmax(0, 1fr) 88px 112px 26px;
  gap: var(--s4);
  align-items: baseline;
  padding-left: var(--s5);
  padding-right: var(--s4);
}

.cols {
  flex: none;
  font-size: var(--t-micro);
  letter-spacing: .14em;
  color: var(--faint);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line-2);
}
.cols span { white-space: nowrap; overflow: hidden; }

.rows {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.row {
  width: 100%;
  appearance: none;
  font: inherit;
  font-size: var(--t-body);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--mid);
  cursor: pointer;
  text-align: left;
  padding-top: 6px;
  padding-bottom: 6px;
}
.row:hover { color: var(--ink); background: var(--wash); }
.row[aria-current="true"] { color: var(--ink); background: #101010; }
.row[aria-current="true"] .r-sym { color: var(--lime); }

.r-time { color: var(--faint); font-variant-numeric: tabular-nums; }
.r-sym { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-name.unnamed { color: var(--faint); }
.r-plat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--faint); }
.r-plat.share { color: var(--ink); }
.r-who { color: var(--faint); font-size: var(--t-micro); }
.r-keep { color: var(--faint); text-align: right; }
.row:hover .r-keep { color: var(--mid); }
.row.kept .r-keep { color: var(--lime); }

.row.new .r-time::before { content: "\25A0"; color: var(--lime); margin-right: var(--s1); }
.row.new { animation: print .45s steps(6) both; }
@keyframes print {
  from { clip-path: inset(0 100% 0 0); opacity: .35; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

.empty {
  margin: 0;
  padding: var(--s6) var(--s5);
  color: var(--faint);
  font-size: var(--t-body);
  max-width: 46ch;
}
.empty .btn { margin-left: var(--s2); }

/* ------------------------------------------------------------------ nfo */

.nfo {
  min-height: 0;
  border-left: 1px solid var(--line-2);
}
.nfo-body { padding: var(--s5); }

.nfo-idle { border: 1px solid var(--line); padding: var(--s5); color: var(--faint); }
.nfo-idle .lab { display: block; margin-bottom: var(--s2); }

.nfo-head {
  border: 1px solid var(--line-2);
  padding: var(--s4);
  margin-bottom: var(--s5);
}
.nfo-sym {
  display: block;
  font-size: var(--t-big);
  line-height: 1.15;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.nfo-name {
  display: block;
  margin-top: var(--s2);
  color: var(--mid);
  overflow-wrap: anywhere;
}
.nfo-release {
  display: block;
  margin-top: var(--s3);
  font-size: var(--t-micro);
  color: var(--lime);
  overflow-wrap: anywhere;
}

.fields { margin: 0 0 var(--s5); }
.field {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s2) 0;
  border-bottom: 1px solid var(--line);
}
.field dt { font-size: var(--t-micro); letter-spacing: .12em; color: var(--dim); }
.field dd { margin: 0; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.field dd .sub { display: block; margin-top: var(--s1); color: var(--faint); font-size: var(--t-micro); }
.field dd a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); }
.field dd a:hover { border-bottom-color: var(--mid); }
.field.serial dd { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.field.serial .addr { user-select: all; font-size: var(--t-micro); flex: 1 1 100%; }

.nfo-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); }

.tape-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: var(--s2);
  margin-bottom: var(--s2);
}
.tape { margin: 0; padding: 0; list-style: none; }
.tape li {
  display: grid;
  grid-template-columns: 64px 36px minmax(0, 1fr) 74px;
  gap: var(--s3);
  align-items: baseline;
  padding: var(--s1) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-micro);
  color: var(--mid);
}
.tape li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tape .t-time { color: var(--faint); font-variant-numeric: tabular-nums; }
.tape .t-side.buy { color: var(--lime); }
.tape .t-side.sell { color: var(--ink); }
.tape .t-side.move { color: var(--faint); }
.tape .t-side.mint { color: var(--dim); }
.tape .t-val { color: var(--ink); font-variant-numeric: tabular-nums; }
.tape .t-who { color: var(--faint); text-align: right; }

/* ------------------------------------------------------------ watch view */

.watch { border-bottom: 1px solid var(--line); padding: var(--s4) var(--s5); }
.watch-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
}
.watch-name { color: var(--ink); overflow-wrap: anywhere; }
.watch-name .plat-tag { color: var(--lime); }
.watch-meta { font-size: var(--t-micro); color: var(--faint); flex: none; }
.watch-hits { margin: var(--s3) 0 0; padding: 0; list-style: none; }
.watch .nfo-actions { margin: var(--s2) 0 0; }
.watch .row { padding-left: 0; padding-right: 0; }
.watch .cols { display: none; }

.perm {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-micro);
  color: var(--faint);
}

/* --------------------------------------------------------------- layout */

@media (max-width: 1280px) {
  :root { --rail: 240px; --nfo: 352px; }
  .cols, .row { grid-template-columns: 74px 104px minmax(0, 1fr) 84px 96px 26px; gap: var(--s3); }
}

@media (max-width: 1060px) {
  .deck { grid-template-columns: var(--rail) minmax(0, 1fr); }
  .nfo {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: var(--void);
    border-left: 0;
  }
  .nfo[hidden] { display: none !important; }
  .nfo-body { padding: var(--s5) var(--s5) var(--s7); }
}

@media (max-width: 780px) {
  body { overflow: auto; height: auto; }
  .masthead { flex-direction: column; align-items: stretch; gap: var(--s3); padding: var(--s3); }
  .plate { align-self: flex-start; }
  .ident { gap: var(--s2); }
  .ident-row { gap: var(--s2) var(--s3); }
  .contract { flex: 1 1 100%; align-items: baseline; }
  .contract .value.pending .note { display: block; margin-left: 0; }
  .deck { grid-template-columns: minmax(0, 1fr); }

  /* The board is the product, so the rail becomes navigation plus one drawer and the line
     starts near the top of the screen instead of under a screenful of controls. */
  .rail {
    border-right: 0;
    border-bottom: 1px solid var(--line-2);
    padding: var(--s3);
    gap: var(--s3);
  }
  .views { flex-direction: row; gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .view {
    flex: 1 1 0;
    justify-content: center;
    gap: var(--s2);
    padding: var(--s2);
    background: var(--void);
    border: 0;
    font-size: var(--t-micro);
    letter-spacing: .06em;
    white-space: nowrap;
    min-width: 0;
  }
  .view:first-child { border-top: 0; }
  /* the caret needs a column of its own to point down, and there is not one here */
  .view[aria-current="true"] .view-name::before { content: none; }
  .view[aria-current="true"] .view-name { color: var(--lime); }
  .view[aria-current="true"] { background: var(--wash); }
  .rail-toggle { display: block; align-self: flex-start; }
  .rail-filters { display: flex; flex-direction: column; gap: var(--s4); }
  .rail-filters[hidden] { display: none; }
  .find-note { display: none; }
  #find-note { display: none; }
  .platform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .platform-grid.open { max-height: 240px; }
  .listing { overflow: visible; }
  .rows { overflow: visible; }
  .listing-bar { padding: var(--s4) var(--s3) var(--s3); }
  .cols, .row {
    grid-template-columns: 74px minmax(0, 1fr) 78px 24px;
    gap: var(--s3);
    padding-left: var(--s3);
    padding-right: var(--s3);
  }
  .cols span:nth-child(3),
  .cols span:nth-child(5) { display: none; }
  .r-name, .r-who { display: none; }
  .empty { padding: var(--s5) var(--s3); }
  .watch, .perm { padding-left: var(--s3); padding-right: var(--s3); }
  .field { grid-template-columns: 80px minmax(0, 1fr); }
}

@media (max-width: 420px) {
  :root { --t-body: 13px; }
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols, .row { grid-template-columns: 70px minmax(0, 1fr) 66px 22px; gap: var(--s2); }
  .mark { height: 30px; }
  .lockup .wordmark { height: 18px; }
  .plate { padding: var(--s2) var(--s3); gap: var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  .row.new { animation: none; }
  * { transition-duration: .01ms !important; }
}