/* The page is one object: the list at the door.
   Structure comes from hairlines and scale. No cards, no shadows, no radius,
   no gradients, one functional colour for what is still open. */

:root {
  --canvas: #f6f8f7;
  --ink: #000000;
  --carbon: #0f0e12;
  --quiet: #6b6b6b;
  --graphite: #b2b2b2;
  --rule: #e0e2e1;
  --link: #0071bb;
  --live: #f0a800;
  --gap: 15px;
  --gutter: 22px;
  --pad: 33px;
  --section: 66px;
  --max: 1200px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2 { font-weight: 300; margin: 0; }

/* ----- top bar ----- */

.bar {
  max-width: var(--max);
  margin: 0 auto;
  height: var(--section);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wordmark { color: var(--ink); font-size: 24px; letter-spacing: 0; }
.wordmark:hover { text-decoration: none; }
.bar nav { display: flex; gap: var(--gutter); }
.bar nav a { color: var(--ink); font-size: 13px; padding: 12px 0; }

/* ----- dark bands ----- */

.band {
  background: var(--carbon);
  color: var(--canvas);
  padding: var(--section) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
.band h1 { font-size: clamp(28px, 4.4vw, 52px); line-height: 1.11; max-width: 18ch; }
.band.foot { padding-top: var(--pad); padding-bottom: var(--pad); font-size: 13px; color: var(--graphite); }
.band.foot p { margin: 0; }

/* ----- facts: label over value, divided by rules ----- */

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2fr);
  margin: var(--section) 0 0;
  border-top: 1px solid #2c2b30;
}
.facts > div { padding: var(--gap) var(--gap) 0 0; }
.facts > div + div { padding-left: var(--gap); border-left: 1px solid #2c2b30; }
.facts dt { font-size: 13px; color: var(--graphite); }
.facts dd { margin: 4px 0 0; font-size: 40px; line-height: 1.11; }
.facts .wide dd { font-size: 15px; line-height: 1.5; padding-top: 6px; word-break: break-all; }
.facts a { color: inherit; }

.facts.on-paper {
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--gap);
}
.facts.on-paper > div + div { border-left-color: var(--rule); }
.facts.on-paper dt { color: var(--quiet); }
.facts.on-paper dd { font-size: 26px; line-height: 1.15; }
.facts.on-paper .wide dd { font-size: 26px; word-break: normal; padding-top: 0; }
.facts.contracts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--pad); }
.facts.contracts > div { padding-bottom: var(--gap); }
.facts.contracts > div:nth-child(odd) { border-left: 0; padding-left: 0; }
.facts.contracts .wide dd, .facts.contracts dd { font-size: 15px; word-break: break-all; }

/* ----- sheets ----- */

main { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sheet { padding-top: var(--section); }
.sheet:last-child { padding-bottom: var(--section); }
.sheet-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--gutter);
  align-items: baseline;
  padding-bottom: var(--gutter);
}
.sheet-head h2 { font-size: 40px; line-height: 1.11; }
.sheet-head p { margin: 0; font-size: 19px; line-height: 1.3; max-width: 46ch; }

/* ----- the list: every submission is a ruled row ----- */

.row {
  display: grid;
  grid-template-columns: 66px minmax(0, 1.1fr) minmax(0, 3fr) 110px minmax(0, 1.5fr);
  border-top: 1px solid var(--rule);
}
#door .sheet-head + .row, .facts.on-paper + .row { border-top: 1px solid var(--ink); }
.cell { padding: var(--gap) var(--gap) var(--gap) 0; min-width: 0; }
.cell + .cell { padding-left: var(--gap); border-left: 1px solid var(--rule); }
.list .row:last-child { border-bottom: 1px solid var(--rule); }

.c-num { font-size: 13px; color: var(--quiet); font-variant-numeric: tabular-nums; }
.ticker { font-size: 26px; line-height: 1.15; overflow-wrap: anywhere; }
.name { font-size: 13px; color: var(--quiet); }
.said { margin: 0; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.remark { margin: 12px 0 0; font-size: 19px; line-height: 1.3; display: grid; grid-template-columns: 66px minmax(0, 1fr); }
.remark span { font-size: 13px; color: var(--quiet); padding-top: 5px; }
.score { font-size: 40px; line-height: 1.11; font-variant-numeric: tabular-nums; white-space: nowrap; }
.score small { font-size: 13px; color: var(--quiet); }
.outcome { font-size: 19px; line-height: 1.3; }
.outcome + p, .c-out p { margin: 4px 0 0; font-size: 13px; color: var(--quiet); overflow-wrap: anywhere; }

/* turned away: the name is struck from the list */
.row.out .ticker, .row.out .said { text-decoration: line-through; text-decoration-thickness: 1px; color: var(--quiet); }
.row.out .score, .row.out .outcome { color: var(--quiet); }

/* still open: the one place colour is used */
.row.open .c-num { border-left: 3px solid var(--live); padding-left: 10px; }
.row.open .outcome { display: flex; align-items: baseline; gap: 8px; }
.clock { font-variant-numeric: tabular-nums; }

/* a row opens to show how to check it */
.row details { grid-column: 2 / -1; border-top: 1px solid var(--rule); font-size: 13px; }
.row details summary { cursor: pointer; padding: 8px 0; color: var(--quiet); list-style: none; }
.row details summary::-webkit-details-marker { display: none; }
.row details summary::before { content: "+ "; }
.row details[open] summary::before { content: "− "; }
.proof { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px var(--gap); padding: 0 0 var(--gap); margin: 0; }
.proof dt { color: var(--quiet); }
.proof dd { margin: 0; overflow-wrap: anywhere; }
.proof pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; max-height: 180px; overflow: auto; background: #ffffff; border: 1px solid var(--rule); padding: 8px; }

/* ----- forms sit in the list as its first row ----- */

.form-row { background: #ffffff; }
.form-row .cell { padding-top: var(--gutter); padding-bottom: var(--gutter); }
.form-row .c-num { padding-left: var(--gap); color: var(--ink); }
.form-row .span-2 { grid-column: 2 / 4; border-left: 1px solid var(--rule); }
.form-row .span-2 + .c-out { grid-column: 4 / 6; }
#apply .c-out { grid-column: 4 / 6; }
label { display: block; font-size: 13px; color: var(--quiet); }
label + label { margin-top: var(--gap); }
.count { float: right; font-variant-numeric: tabular-nums; }
input, textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 6px 0;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 19px;
  line-height: 1.3;
  resize: vertical;
}
input::placeholder, textarea::placeholder { color: var(--graphite); }
input:focus, textarea:focus { outline: 2px solid var(--ink); outline-offset: 4px; }
input[name="symbol"] { text-transform: uppercase; }

button {
  appearance: none;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--ink);
  color: var(--canvas);
  font: inherit;
  font-size: 15px;
  padding: 8px 16px;
  cursor: pointer;
}
button:hover:not(:disabled) { background: var(--canvas); color: var(--ink); }
button:disabled { background: var(--graphite); border-color: var(--graphite); cursor: default; }
button.quiet { background: transparent; color: var(--ink); padding: 2px 8px; font-size: 13px; }
button.quiet:hover:not(:disabled) { background: var(--ink); color: var(--canvas); }
.note { margin: 10px 0 0; font-size: 13px; color: var(--quiet); }
.note.bad { color: var(--ink); border-left: 3px solid var(--live); padding-left: 8px; }

.empty { margin: 0; padding: var(--pad) 0; color: var(--quiet); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

/* ----- house rules: the sign beside the door ----- */

.rules ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rule;
  border-top: 1px solid var(--ink);
  columns: 2;
  column-gap: var(--section);
  column-rule: 1px solid var(--rule);
}
.rules li {
  counter-increment: rule;
  break-inside: avoid;
  padding: var(--gap) 0 var(--gap) 44px;
  position: relative;
  font-size: 19px;
  line-height: 1.3;
  border-bottom: 1px solid var(--rule);
}
.rules li::before { content: counter(rule); position: absolute; left: 0; top: var(--gap); font-size: 13px; color: var(--quiet); line-height: 1.9; }

/* ----- narrow screens: rows stack, rules stay ----- */

@media (max-width: 820px) {
  .bar nav { gap: var(--gap); }
  .facts, .facts.on-paper { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts > div { padding-bottom: var(--gap); }
  .facts > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .facts .wide, .facts.on-paper .wide { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  .facts dd { font-size: 32px; }
  .facts.contracts { grid-template-columns: 1fr; }
  .sheet-head { grid-template-columns: 1fr; gap: 8px; }
  .row { grid-template-columns: 44px minmax(0, 1fr) 84px; }
  .score small { display: none; }
  .row .c-id { grid-column: 2 / 3; }
  .row .c-score { grid-column: 3 / 4; grid-row: 1 / 2; border-left: 1px solid var(--rule); }
  .row .c-main, .row .c-out, .row details { grid-column: 2 / -1; border-left: 0; padding-left: 0; padding-top: 0; }
  .row .c-out { padding-bottom: var(--gap); }
  .form-row .c-id, .form-row .span-2, #apply .c-out, .form-row .span-2 + .c-out { grid-column: 2 / -1; border-left: 0; padding-left: 0; }
  .form-row .cell { padding-top: var(--gap); padding-bottom: var(--gap); padding-right: var(--gap); }
  .rules ol { columns: 1; }
  .remark { grid-template-columns: 1fr; }
}