/* Title Capital Markets. One terminal window on a dark desk, in the grammar of a debugger
   dashboard: no frames, no panels, no bars. Every divider on this page is a run of the
   box drawing character U+2500 set in the page's own face, never a CSS border. */

@font-face {
  font-family: "Commit Mono";
  src: url("../fonts/commitmono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Commit Mono";
  src: url("../fonts/commitmono-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Commit Mono";
  src: url("../fonts/commitmono-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  /* the field, measured off his picture: 77% of it is one near black */
  --field: #050506;
  --room: #0a0b0c;

  /* inks. every one of these carries text and clears 4.5:1 on the field */
  --paper: #e9ecec;   /* values, code, the thing you read */
  --dim:   #93a0a2;   /* keys: arg, loc, register names, column heads */
  --mute:  #717c7e;   /* separators and controls that cannot be pressed yet */
  --teal:  #3ad9c8;   /* addresses and the structure that carries them */
  --rule:  #2aa89d;   /* the run of dashes that opens every section */
  --green: #5fe083;   /* changed since the last step, and the focused row */
  --yellow:#f2cf52;   /* section names */
  --amber: #ffa24d;   /* an auction running, a tax about to lapse */
  --red:   #ff7b6e;   /* a seat that went unpaid */
  --magenta:#ff78d2;  /* the prompt */

  --ch: 9px;          /* Commit Mono advance at 15px, measured in the browser */
  --row: 22px;
  --fs: 15px;
  --pad: 32px;
  --col: calc(116 * var(--ch));          /* 1044: the text column, a whole number of characters */
  --win: calc(var(--col) + 2 * var(--pad));
  --bar: 38px;
}

* { box-sizing: border-box; }

html { background: #000; }

body {
  margin: 0;
  background: var(--room);
  color: var(--paper);
  font: 400 var(--fs)/var(--row) "Commit Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  padding: 40px 16px 64px;
  min-height: 100vh;
}

/* the room behind the window: more of the world, out of focus, on its own slow clock */
.room {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/desk.webp") center / cover no-repeat;
  opacity: .5;
  animation: breathe 42s ease-in-out infinite;
}
.room::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(118% 78% at 50% 34%, rgba(10,12,14,.18) 0%, rgba(4,5,6,.86) 62%, #020203 100%);
}
@keyframes breathe { 0%, 100% { opacity: .46; transform: scale(1); } 50% { opacity: .58; transform: scale(1.025); } }

/* ---------------------------------------------------------------- the window */

.win {
  position: relative; z-index: 1;
  width: min(var(--win), 100%);
  margin-inline: auto;
  margin-left: round(down, calc((100% - min(var(--win), 100%)) / 2), 1px);
  box-shadow: 0 28px 90px rgba(0,0,0,.72), 0 2px 0 rgba(255,255,255,.04);
}

.win__bar {
  position: relative;
  height: var(--bar);
  display: flex; align-items: center; justify-content: center;
  /* the title centres in what is left after the three lights and the closing cap */
  padding-left: calc(var(--bar) * 240 / 72);
  padding-right: calc(var(--bar) * 80 / 72);
}
/* the bar is a generated object cut into three: the cap with its three lights, a middle
   that repeats, and the cap that closes it. Nothing here is drawn by CSS. */
.win__bar-l, .win__bar-m, .win__bar-r { position: absolute; top: 0; height: 100%; }
.win__bar-l { left: 0; width: calc(var(--bar) * 240 / 72); background: url("../img/bar-l.png") left top / auto 100% no-repeat; }
.win__bar-r { right: 0; width: calc(var(--bar) * 80 / 72); background: url("../img/bar-r.png") right top / auto 100% no-repeat; }
.win__bar-m { left: 0; right: 0; background: url("../img/bar-m.png") left top / auto 100% repeat-x; z-index: -1; }

.win__title {
  margin: 0; font-size: var(--fs); font-weight: 400; line-height: 1;
  color: #44474a; letter-spacing: .01em;
  padding: 0 12px; position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

.win__field {
  background: var(--field);
  padding: 20px var(--pad) 28px;
}

/* ---------------------------------------------------------------- the banner */

.banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 22px;
  padding-bottom: 6px;
}
.banner__mark { height: 104px; width: auto; display: block; justify-self: start; align-self: center; }
.banner__words { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.banner__word { height: 68px; width: auto; display: block; flex: none; }
.banner__sub { margin: 0; font-size: var(--fs); line-height: var(--row); }
.banner__state { margin: 0; align-self: end; text-align: right; font-size: var(--fs); line-height: var(--row); }

.lede {
  margin: 0 0 16px;
  max-width: calc(92 * var(--ch));
  color: var(--dim);
  font-size: var(--fs); line-height: 1.6;
}
.lede .ink-paper { color: var(--paper); }

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

.sec { margin: 0 0 17px; }

.sec__h {
  display: flex; align-items: baseline; gap: 0;
  margin: 0 0 2px; font-size: var(--fs); font-weight: 700; line-height: var(--row);
  white-space: pre;
}
.sec__dash { color: var(--rule); padding-right: 1ch; }
.sec__name { color: var(--yellow); letter-spacing: .02em;
  animation: appear .2s ease both; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }
/* the long run to the right edge: real characters, clipped mid glyph, so it needs no measuring.
   On load it draws itself across, one section after another, the way a terminal paints a screen. */
.sec__rule {
  animation: draw .26s cubic-bezier(.2, .7, .3, 1) both;
  animation-delay: calc(var(--n, 0) * 45ms);
  flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--rule);
  padding-left: 1ch; white-space: pre;
}
@keyframes draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sec__rule::before { content: "────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────"; }

.sec__b { white-space: pre-wrap; overflow-wrap: anywhere; }

.line { display: block; line-height: var(--row); }
.ink-dim { color: var(--dim); }
.ink-mute { color: var(--mute); }
.ink-teal { color: var(--teal); }
.ink-green { color: var(--green); }
.ink-amber { color: var(--amber); }
.ink-red { color: var(--red); }
.ink-paper { color: var(--paper); }
.ink-yellow { color: var(--yellow); }
.b { font-weight: 700; }

/* ---------------------------------------------------------------- Rules, as a listing */

.code { counter-reset: ln; }
.code .note { display: grid; grid-template-columns: calc(4 * var(--ch)) 1fr; line-height: var(--row); }
.code .cl {
  display: grid; grid-template-columns: calc(4 * var(--ch)) 1fr; line-height: var(--row);
  color: var(--paper);
}
.code .cl > .n { color: var(--mute); text-align: right; padding-right: 2ch; }
.code .cl.on { color: var(--green); font-weight: 700; }
.code .cl.on > .n { color: var(--green); font-weight: 700; }
.code .cl.warn { color: var(--red); font-weight: 700; }
.code .cl.warn > .n { color: var(--red); font-weight: 700; }
.code .cm { color: var(--mute); }
.code .kw { color: var(--teal); }
.code .num { color: var(--paper); }
.code .cl.on .cm, .code .cl.on .kw, .code .cl.on .num { color: inherit; }
.code .cl.warn .cm, .code .cl.warn .kw, .code .cl.warn .num { color: inherit; }

/* ---------------------------------------------------------------- Seats, as a listing */

#seats { outline: none; }
#seats:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

.seat, .seat-h {
  display: grid;
  column-gap: 1ch;
  grid-template-columns:
    calc(3 * var(--ch))    /* the marker */
    calc(9 * var(--ch))    /* seat#01 */
    calc(7 * var(--ch))    /* state */
    minmax(calc(17 * var(--ch)), 1fr)
    calc(14 * var(--ch))   /* owner */
    calc(11 * var(--ch))   /* price */
    calc(11 * var(--ch))   /* tax */
    calc(11 * var(--ch))   /* last week */
    calc(11 * var(--ch));  /* held */
  line-height: var(--row);
  white-space: pre;
}
.seat-h { color: var(--dim); }
.seat > .ad { color: var(--teal); }
.seat.on > .ad { color: inherit; }
.seat { color: var(--paper); cursor: pointer; transition: color .12s ease, transform .08s ease; }
.seat:active { transform: translateX(2px); }
.seat > *, .seat-h > * { min-width: 0; }
.seat > .r, .seat-h > .r { text-align: right; }
.seat .sub { display: none; }
.seat:hover { color: var(--teal); }
.seat.on { color: var(--green); font-weight: 700; }
.seat.on .ink-dim, .seat.on .ink-mute, .seat.on .ink-teal { color: inherit; }
.seat .mk { color: var(--green); }
/* before the coin exists the table has four columns, not nine lines of dashes */
#seats.shut .seat, #seats.shut .seat-h {
  grid-template-columns: calc(3 * var(--ch)) calc(9 * var(--ch)) calc(7 * var(--ch)) 1fr calc(12 * var(--ch));
}
#seats.shut .line { padding-top: 6px; }
.seat.opens .st { color: var(--mute); }
.seat.free .st { color: var(--mute); }
.seat.due .st { color: var(--amber); }
.seat.lapsed .st { color: var(--red); }

/* ---------------------------------------------------------------- Auctions */

.auc { display: grid; grid-template-columns: calc(9 * var(--ch)) minmax(calc(18 * var(--ch)), 1fr) auto; gap: 0 1ch; line-height: var(--row); align-items: baseline; }
.bar { color: var(--amber); letter-spacing: 0; }
.bar .off { color: var(--mute); }

/* ---------------------------------------------------------------- Frame */

.frame { display: grid; grid-template-columns: 132px 1fr; column-gap: 22px; align-items: start; }
.frame__mark { width: 132px; height: auto; display: block; opacity: .92; }
.frame__rows { min-width: 0; }
.frame__big { font-size: 20px; line-height: 26px; font-weight: 700; }

.kv { display: grid; grid-template-columns: calc(14 * var(--ch)) 1fr; line-height: var(--row); }
.kv > .k { color: var(--dim); }

/* ---------------------------------------------------------------- Registers */

.regs { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2ch; }
.reg { display: grid; grid-template-columns: calc(12 * var(--ch)) 1fr; line-height: var(--row); }
.reg > .k { color: var(--dim); text-align: right; padding-right: 1ch; }
.reg > .v { color: var(--paper); font-weight: 700; }
.reg > .v.changed { color: var(--green); }
.reg > .v.none { color: var(--mute); font-weight: 400; }

/* ---------------------------------------------------------------- Memory, the journal */

.dump .row { display: grid; grid-template-columns: calc(15 * var(--ch)) calc(25 * var(--ch)) 1fr; line-height: var(--row); white-space: pre; }
.dump .as { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.dump .ad { color: var(--teal); }
.dump .by { color: var(--dim); }
.dump .as { color: var(--paper); }
.dump a { color: inherit; text-decoration: none; display: contents; }
.dump a:hover .as { color: var(--green); }
.dump a:focus-visible .as { outline: 2px solid var(--teal); outline-offset: 2px; }
.dump .sep { color: var(--mute); }

/* ---------------------------------------------------------------- Target */

.tg { display: grid; grid-template-columns: calc(10 * var(--ch)) 1fr; line-height: var(--row); }
.tg > .k { color: var(--dim); }
.mint {
  display: flex; align-items: center; gap: 2ch; flex-wrap: wrap;
  background: #0d0f10; padding: 14px 20px; margin: 6px 0 14px;
}
.mint__v { user-select: all; color: var(--paper); overflow-wrap: anywhere; min-width: 0; flex: 1 1 18ch; }
.mint__v.empty { color: var(--mute); }

.keys { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }

/* a key is the generated linocut plate, nine sliced, never a CSS rectangle */
.key {
  /* 24 px of side padding so the plate never presses its own label */
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 24px;
  font: 700 var(--fs)/1 "Commit Mono", monospace; color: #0a0c0d;
  text-decoration: none; cursor: pointer;
  background: none; border: 0;
  border-image: url("../img/plate.png") 44 fill / 22px / 0 stretch;
  transition: transform .08s ease, filter .12s ease;
}
.key:hover { filter: brightness(1.06); }
.key:active { transform: translateY(1px); }
.key:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.key--wide { padding: 0 44px; min-height: 50px; }
/* a key that cannot be pressed yet is dimmed, never faded to grey on grey: its label still
   reads at about eleven to one against its own plate */
.key--off { cursor: not-allowed; opacity: .74; }
.key__mark { width: 22px; height: 22px; display: block; flex: none; }
.key__mark--sq { border-radius: 4px; }

/* the keys inside the frame speak the terminal's own bracket grammar */
.akey {
  font: 400 var(--fs)/var(--row) "Commit Mono", monospace;
  background: none; border: 0; padding: 0 1ch 0 0; margin: 0;
  color: var(--teal); cursor: pointer; text-align: left;
}
.akey { transition: color .12s ease, transform .08s ease; }
.akey:hover { color: var(--green); }
.akey:active { transform: translateY(1px); }
.akey:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.akey[disabled] { color: var(--mute); cursor: not-allowed; }
.akeys { display: flex; flex-wrap: wrap; gap: 0 2ch; margin-top: 4px; }

/* ---------------------------------------------------------------- the prompt */

.closer { margin: 22px 0 6px; color: var(--rule); overflow: hidden; white-space: pre; height: var(--row); line-height: var(--row); }
.closer::before { content: "════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════════"; }

.prompt { display: flex; align-items: center; gap: 1ch; }
.prompt__sign { color: var(--magenta); font-weight: 700; flex: none; }
.prompt__in {
  flex: 1 1 auto; min-width: 0; /* the run key sits on the right edge, under the copy key */
  background: none; border: 0; outline: none; padding: 6px 0;
  font: 400 var(--fs)/var(--row) "Commit Mono", monospace;
  color: var(--paper); caret-color: var(--paper);
}
.prompt__in::placeholder { color: var(--mute); }
.prompt__in:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.prompt { justify-content: flex-start; }
/* the send key speaks the same bracket grammar as the keys inside the frame */
.prompt__go {
  flex: none; background: none; border: 0; cursor: pointer; padding: 6px 1ch;
  font: 400 var(--fs)/var(--row) "Commit Mono", monospace; color: var(--teal);
}
.prompt__go::before { content: "[ "; }
.prompt__go::after { content: " ]"; }
.prompt__go:hover { color: var(--green); }
.prompt__go:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* the block cursor of a terminal that is waiting */
.prompt__sign::after {
  content: ""; display: inline-block; width: var(--ch); height: 1em;
  background: var(--paper); margin-left: .6ch; vertical-align: -.16em;
  animation: blink 1.06s infinite;
}
.prompt:focus-within .prompt__sign::after { animation: none; opacity: 0; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ---------------------------------------------------------------- widths */

@media (min-width: 1600px) {
  :root { --col: calc(136 * var(--ch)); }
}

@media (max-width: 1180px) {
  body { padding: 28px 14px 48px; }
}

@media (max-width: 1000px) {
  .seat, .seat-h {
    grid-template-columns: calc(3 * var(--ch)) calc(9 * var(--ch)) calc(8 * var(--ch)) 1fr;
  }
  .seat > .p, .seat > .t, .seat > .w, .seat > .hd, .seat > .ow,
  .seat-h > .p, .seat-h > .t, .seat-h > .w, .seat-h > .hd, .seat-h > .ow { display: none; }
  /* the numbers move onto a second line of the same record, the way a terminal wraps one */
  .seat .sub { display: block; grid-column: 2 / -1; min-width: 0; color: var(--dim); white-space: normal; overflow-wrap: anywhere; }
  .seat.on .sub { color: inherit; }
  .regs { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .auc { grid-template-columns: 1fr; row-gap: 2px; }
  .mint { display: grid; grid-template-columns: 1fr; row-gap: 10px; justify-items: start; }
  .mint__v { flex: none; }
  .kv, .tg { grid-template-columns: 1fr; }
  .kv > .k, .tg > .k { padding-top: 6px; }
  .frame { grid-template-columns: 1fr; row-gap: 10px; }
  .frame__mark { width: 112px; }
}

@media (max-width: 720px) {
  :root { --fs: 14px; --ch: 8.4px; --row: 21px; --pad: 18px; --bar: 32px; }
  body { padding: 18px 10px 40px; }
  .banner { grid-template-columns: auto 1fr; row-gap: 8px; column-gap: 14px; }
  .banner__mark { height: 76px; }
  .banner__word { height: 46px; }
  .banner__state { grid-column: 1 / -1; text-align: left; }
  .lede { max-width: none; }
  .regs { grid-template-columns: 1fr; }
  .dump .row { grid-template-columns: 1fr; white-space: pre-wrap; }
  .dump .by { display: none; }
  .win__title { font-size: 14px; }
}

@media (max-width: 420px) {
  .seat, .seat-h { grid-template-columns: calc(3 * var(--ch)) calc(9 * var(--ch)) 1fr; }
  .seat > .st, .seat-h > .st { display: none; }
  /* before the coin the state column is gone too, so the title takes its room and the price keeps ten cells */
  #seats.shut .seat, #seats.shut .seat-h { grid-template-columns: calc(2 * var(--ch)) calc(8 * var(--ch)) 1fr calc(10 * var(--ch)); }

  .banner__mark { height: 62px; }
  .banner__word { height: 38px; }
  .keys { gap: 8px; }
  .key { padding: 0 20px; }
}

/* too narrow for the opening price beside the longest title: the line under the table carries it */
@media (max-width: 374px) {
  #seats.shut .seat, #seats.shut .seat-h { grid-template-columns: calc(2 * var(--ch)) calc(8 * var(--ch)) 1fr; }
  #seats.shut .op { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .room { animation: none; opacity: .5; }
  .prompt__sign::after { animation: none; }
  .sec__rule, .sec__name { animation: none; }
  * { transition-duration: .01ms !important; }
}