/* BidDesk Quant v3: the paper book (paper.js) and the Rules room's ladder (rooms.js). Ink on the house surfaces; the
   one accent (gold) marks the step a rule stands on; a loss takes nothing louder than ink, a broken chain the kill red. */
.pb { display: grid; gap: 22px; max-width: 1120px; container: pb / inline-size; }
.pb-top { display: grid; gap: 8px; }
#pb-body { display: grid; gap: 34px; min-width: 0; }
.pb-top .eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--line-2); display: inline-block; padding-top: 5px; line-height: 18px; }
.pb-title { margin: 0; font: 300 34px/1.1 var(--serif); letter-spacing: -.02em; }
.pb-answer { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.5fr); gap: 20px 40px; align-items: center; padding: 26px 30px;
  border: 1px solid var(--line); border-radius: var(--r-3); background: linear-gradient(180deg, var(--surface), var(--bg-2)); box-shadow: var(--shadow); }
.pb-answer.pb-quiet, .pb-answer.pb-skel { grid-template-columns: minmax(0, 1fr); }
.pb-answer.pb-bad { box-shadow: inset 3px 0 0 var(--kill), var(--shadow); }
.pb-broken { margin: 0; padding: 14px 18px; border: 1px solid rgba(229, 83, 75, .45); border-radius: var(--r-2); background: var(--kill-soft); font-size: 13.5px; line-height: 1.5; }
.pb-broken b { color: var(--kill); font-weight: 500; }
.pb-head { display: grid; gap: 8px; min-width: 0; }
.pb-k { margin: 0; display: flex; align-items: center; gap: 10px; font: 500 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pb-word { margin: 0; font: 300 52px/1 var(--serif); letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pb-quiet .pb-word { font-size: 40px; color: var(--ink-2); }
.pb-why { margin: 2px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); max-width: 54ch; }
.pb-nums { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--line); }
.pb-n { padding: 4px 0 4px 22px; min-width: 0; display: grid; gap: 6px; align-content: start; }
.pb-n + .pb-n { border-left: 1px solid var(--line); }
.pb-n dt { font: 500 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); min-height: 2.6em; }
.pb-n dd { margin: 0; }
.pb-v { font: 300 clamp(26px, 2.6vw, 36px)/1 var(--serif); letter-spacing: -.02em; white-space: nowrap; }
.pb-s { font-size: 12.5px; line-height: 1.4; color: var(--ink-3); }
.pb-sec { display: grid; gap: 12px; }
.pb-h { margin: 0; display: flex; align-items: center; gap: 10px; font: 500 15px/1.3 var(--sans); }
.pb-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
.pb-t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pb-t th { text-align: left; font: 500 11px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 12px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.pb-t td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; white-space: nowrap; }
.pb-t tr:last-child td { border-bottom: 0; }
.pb-t td small { color: var(--ink-3); font-size: 12px; }
.pb-t .pb-net { text-align: right; } .pb-t th:last-child { text-align: right; }
.pb-st { font-size: 12px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); }
.pb-st.open { color: var(--gold); border-color: rgba(217, 164, 65, .45); }
.pb-wait { margin: 0; padding: 0; list-style: none; border: 1px dashed var(--line-2); border-radius: var(--r-3); }
.pb-wait li { display: grid; grid-template-columns: 120px minmax(0, 220px) minmax(0, 1fr); gap: 6px 16px; align-items: baseline; padding: 12px 16px; font-size: 13.5px; }
.pb-wait li + li { border-top: 1px solid var(--line); }
.pb-at { color: var(--ink-2); }
.pb-c { font-size: 12px; font-weight: 500; color: var(--ink-3); padding: 2px 7px; border: 1px solid var(--line-2); border-radius: 999px; }
.pb-chain { margin: 0; display: flex; gap: 10px; align-items: baseline; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-2); font-size: 13.5px; line-height: 1.5; }
.pb-chain .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); transform: translateY(-1px); }
.pb-chain .dot.on { background: var(--go); } .pb-chain .dot.bad { background: var(--kill); }
.pb-chain.bad { border-color: rgba(229, 83, 75, .45); box-shadow: inset 3px 0 0 var(--kill); }
.pb-chain code { font-size: 12px; color: var(--ink-2); }
.pb-note { margin: 0; font-size: 12.5px; line-height: 1.55; max-width: 92ch; }
.pb-how { border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-2); }
.pb-how > summary { cursor: pointer; min-height: 48px; display: flex; align-items: center; padding: 12px 20px; font: 500 14px/1.2 var(--sans); }
.pb-how-in { padding: 0 20px 18px; display: grid; gap: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: 96ch; }
.pb-how-in p { margin: 0; } .pb-rows { margin: 0; padding-left: 18px; color: var(--ink-3); font-size: 12.5px; }
@container pb (max-width: 820px) { .pb-answer { grid-template-columns: minmax(0, 1fr); } .pb-nums { border-left: 0; border-top: 1px solid var(--line); padding-top: 14px; } .pb-n:first-child { padding-left: 0; } }
@media (max-width: 760px) {
  .pb { gap: 18px; } #pb-body { gap: 26px; } .pb-title { font-size: 28px; }
  .pb-answer { padding: 18px 16px; gap: 14px; } .pb-word { font-size: 40px; } .pb-quiet .pb-word { font-size: 30px; }
  .pb-n { padding-left: 12px; } .pb-v { font-size: 24px; } .pb-n dt { font-size: 10px; letter-spacing: .06em; } .pb-s { font-size: 12px; }
  .pb-wrap { overflow: visible; border: 0; background: none; }
  .pb-t, .pb-t tbody { display: grid; gap: 10px; } .pb-t thead { display: none; }
  .pb-t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--surface); }
  .pb-t td { padding: 0; border: 0; white-space: normal; font-size: 13px; }
  .pb-t td[data-k="Company"] { order: -2; font-size: 15px; } .pb-t td[data-k="Net"] { order: -1; text-align: right; font-size: 15px; }
  .pb-t td[data-k="Fired"], .pb-t td[data-k="Filled"], .pb-t td[data-k="Out"], .pb-t td[data-k="Mark"] { grid-column: 1 / -1; color: var(--ink-2); }
  .pb-t td[data-k="Fired"]::before, .pb-t td[data-k="Filled"]::before, .pb-t td[data-k="Out"]::before, .pb-t td[data-k="Mark"]::before, .pb-t td[data-k="Qty"]::before { content: attr(data-k) " "; color: var(--ink-3); }
  .pb-how > summary { padding: 12px 16px; } .pb-how-in { padding: 0 16px 16px; }
  .pb-wait li { grid-template-columns: minmax(0, 1fr) auto; } .pb-wait li .pb-at { grid-column: 1 / -1; }
}

/* The ladder: each step with what lit it beneath; the step a rule stands on in gold. */
.ladder2 { margin: 0; padding: 0; list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.ladder2 li { display: grid; gap: 3px; padding: 10px 14px; min-width: 0; color: var(--ink-3); background: var(--bg-2); }
.ladder2 li + li { border-left: 1px solid var(--line); }
.ladder2 b { font: 500 12.5px/1.2 var(--sans); }
.ladder2 small { font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.ladder2 li.on { color: var(--ink); background: var(--surface-2); } .ladder2 li.on small { color: var(--ink-2); }
.ladder2 li.now { box-shadow: inset 0 -2px 0 var(--gold); }
.ladder2 li.skip { background: repeating-linear-gradient(135deg, var(--bg-2) 0 6px, var(--surface) 6px 7px); } .ladder2 li.skip small { color: var(--ink-3); }
.srow-at { margin-left: auto; align-self: center; }
@media (max-width: 760px) { .ladder2 { grid-auto-flow: row; grid-auto-columns: auto; } .ladder2 li + li { border-left: 0; border-top: 1px solid var(--line); }
  .ladder2 li { grid-template-columns: 76px minmax(0, 1fr); align-items: baseline; padding: 9px 12px; } .srow-at { margin-left: 0; width: 100%; } }

/* An exit rule's book points to its Numbers. */
.pb-acts { margin: 16px 0 0; }