/* Toppit — a race timing tower drawn as a blueprint. Navy drafting ground with a fine grid, pale linework,
   one amber accent for the car that is pitted next. */
:root {
  --ground: #081631;
  --panel: #0C1F40;
  --rule: rgba(132, 176, 232, .16);
  --rule-strong: rgba(132, 176, 232, .34);
  --line: #E3EEFB;
  --dim: #8EA6C6;
  --faint: #56709A;
  --amber: #FFC86B;
  --amber-soft: rgba(255, 200, 107, .14);
  --cyan: #9CCBF5;
  --disp: 'Chakra Petch', system-ui, sans-serif;
  --body: 'IBM Plex Sans Condensed', system-ui, sans-serif;
  --code: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--line); font: 400 15px/1.45 var(--body); background-color: var(--ground);
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px),
    linear-gradient(rgba(132, 176, 232, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(132, 176, 232, .06) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 16px 16px, 16px 16px;
  min-height: 100vh; overflow-x: hidden;
}
a { color: var(--cyan); }
code { font-family: var(--code); }
b { font-weight: 600; color: #fff; }

.pitwall { max-width: 1180px; margin: 0 auto; padding: 0 14px 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }

/* ident: no header bar — a drafting title block */
.ident { display: flex; align-items: center; gap: 10px; padding: 10px 0 2px; font-family: var(--disp); }
.ident-mark { border: 1px solid var(--rule-strong); border-radius: 4px; }
.ident-name { font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 15px; }
.ident-lap { font-size: 12px; color: var(--dim); border: 1px dashed var(--rule-strong); padding: 2px 8px; border-radius: 20px; letter-spacing: .04em; }
.ident-rules { margin-left: auto; font-size: 13px; color: var(--dim); text-decoration: none; border-bottom: 1px dotted var(--faint); }

.leftcol, .rightcol { display: grid; gap: 14px; min-width: 0; align-content: start; }

/* entry: the hero — the action and the live sentence */
.entry { border: 1px solid var(--rule-strong); background: rgba(12, 31, 64, .82); border-radius: 6px; padding: 12px 12px 10px; position: relative; }
.entry::before, .entry::after { content: ''; position: absolute; width: 10px; height: 10px; border-color: var(--cyan); border-style: solid; }
.entry::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.entry::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.callout { margin: 0 0 10px; font-size: 15px; line-height: 1.42; color: var(--line); min-height: 4.2em; }
.callout .hl { color: var(--amber); font-weight: 600; }
.callout .fig { font-family: var(--disp); font-weight: 600; color: #fff; }
.entry-row { display: flex; align-items: stretch; gap: 8px; }
.entry-field { flex: 1; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--rule-strong); border-radius: 4px; padding: 4px 10px; background: var(--ground); }
.entry-field:focus-within { border-color: var(--amber); }
.entry-k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.entry-amt { border: 0; background: transparent; color: #fff; font: 600 22px/1.2 var(--disp); width: 100%; min-width: 0; padding: 0; outline: none; }
.entry-amt::placeholder { color: var(--faint); }
.entry-tk { align-self: center; font: 600 12px var(--disp); color: var(--dim); letter-spacing: .06em; }
.entry-go { border: 0; border-radius: 4px; background: var(--amber); color: #1A1204; font: 700 15px var(--disp); letter-spacing: .04em; text-transform: uppercase; padding: 0 16px; min-height: 52px; cursor: pointer; white-space: nowrap; }
.entry-go:disabled { background: #2A3E62; color: var(--dim); cursor: default; }
.entry-hint { margin: 8px 0 0; font-size: 13px; color: var(--dim); }
.entry-credit[hidden] { display: none; }
.entry-credit { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border: 1px dashed var(--amber); border-radius: 4px; font-size: 14px; }
.entry-credit button { border: 0; background: var(--amber); color: #1A1204; font: 700 13px var(--disp); padding: 6px 12px; border-radius: 3px; cursor: pointer; }

/* the CA ticket — hangs in the flow under the entry and pins as you scroll */
#caline { position: sticky; top: 8px; z-index: 20; }
.ticket { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 10px; border-radius: 30px; background: #0F2852; border: 1px solid var(--cyan); box-shadow: 0 6px 22px rgba(2, 8, 22, .55); min-width: 0; }
.ticket-tag { font: 700 11px var(--disp); letter-spacing: .1em; color: var(--ground); background: var(--cyan); padding: 3px 7px; border-radius: 12px; flex: none; }
.ticket-addr { flex: 1; min-width: 0; font-size: 11.5px; line-height: 1.3; color: #fff; word-break: break-all; user-select: all; }
.ticket-addr.waiting { color: var(--dim); user-select: none; word-break: normal; font-family: var(--body); font-size: 13px; }
.ticket-copy { flex: none; border: 1px solid var(--cyan); background: transparent; color: var(--cyan); font: 600 13px var(--disp); padding: 6px 12px; border-radius: 20px; cursor: pointer; }
.ticket-copy:disabled { opacity: .45; cursor: default; }
.ticket-copy.done { background: var(--cyan); color: var(--ground); }
.ticket-gm { flex: none; font-size: 11px; color: var(--dim); text-decoration: none; }

/* the tower: the race itself */
.tower { border: 1px solid var(--rule-strong); border-radius: 6px; background: rgba(8, 22, 49, .9); overflow: hidden; }
.tower-top { display: grid; grid-template-columns: 1.1fr 1fr 1fr; border-bottom: 1px solid var(--rule-strong); }
.tower-top > div { padding: 8px 12px; display: flex; flex-direction: column; border-right: 1px solid var(--rule); }
.tower-top > div:last-child { border-right: 0; }
.lapbox-k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.lapbox { flex-direction: row !important; align-items: baseline; flex-wrap: wrap; column-gap: 6px; }
.lapbox .lapbox-k { width: 100%; }
.lapbox-n { font: 700 34px/1 var(--disp); color: #fff; }
.lapbox-of { font: 600 16px var(--disp); color: var(--dim); }
.flagbox-v, .potbox-v { font: 600 22px/1.25 var(--disp); color: var(--line); font-variant-numeric: tabular-nums; }
.flagbox-v.hot { color: var(--amber); }
.potbox-v.grow { animation: grow 1.4s ease; }
@keyframes grow { 0% { color: var(--amber); transform: scale(1.12); } 100% { color: var(--line); transform: none; } }
.lastpit { padding: 8px 12px; font-size: 13px; color: var(--dim); border-bottom: 1px dashed var(--rule-strong); background: rgba(156, 203, 245, .04); }
.lastpit b { color: var(--amber); }

.ladder { list-style: none; margin: 0; padding: 4px 0; }
.car { display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--rule); position: relative; }
.car:last-child { border-bottom: 0; }
.car-pos { font: 700 15px var(--disp); color: var(--dim); }
.car-no { font: 700 13px var(--disp); color: var(--ground); background: var(--line); border-radius: 3px; text-align: center; padding: 2px 0; }
.car-mid { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.car-who { font-size: 12px; color: var(--dim); display: flex; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.car-who code { font-size: 11.5px; }
.car-bar { height: 8px; border: 1px solid var(--rule-strong); border-radius: 1px; position: relative; overflow: hidden; }
.car-fill { position: absolute; left: 0; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, var(--cyan) 0 6px, rgba(156, 203, 245, .55) 6px 7px); transition: width .6s ease; }
.car-add { position: absolute; top: 0; bottom: 0; background: rgba(255, 200, 107, .55); }
.car-num { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.car-stake { font: 600 16px var(--disp); color: #fff; font-variant-numeric: tabular-nums; }
.car-delta { font-size: 12px; color: var(--cyan); }
.car.pit-next { background: var(--amber-soft); }
.car.pit-next::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--amber); }
.car.pit-next .car-no { background: var(--amber); }
.car.pit-next .car-fill { background: repeating-linear-gradient(90deg, var(--amber) 0 6px, rgba(255, 200, 107, .5) 6px 7px); }
.car.pit-next .car-delta { color: var(--amber); }
.car-tag { font: 700 10px var(--disp); letter-spacing: .1em; color: #1A1204; background: var(--amber); padding: 1px 6px; border-radius: 2px; animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .55; } }
.car.mine .car-who { color: var(--line); }
.car.mine .car-pos::after { content: ' ·you'; font-size: 10px; color: var(--cyan); }
.car.fresh { animation: slidein .7s ease; }
@keyframes slidein { from { transform: translateX(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.car.pitted { opacity: .5; }
.car.pitted .car-no { background: transparent; color: var(--dim); border: 1px dashed var(--faint); }
.car.pitted .car-fill { background: var(--faint); }
.car.empty .car-no { background: transparent; color: var(--faint); border: 1px dashed var(--rule-strong); }
.car.empty .car-bar { border-style: dashed; }
.car.empty .car-stake { color: var(--faint); }
.car.pole { background: rgba(156, 203, 245, .07); cursor: pointer; }
.car.pole .car-no { border: 1px solid var(--cyan); color: var(--cyan); }
.car.pole .car-who { color: var(--cyan); }
.car.pole .car-bar { border-color: var(--cyan); animation: blink 1.4s steps(2) infinite; }
.pitlane { list-style: none; padding: 6px 12px 4px; font: 700 10px var(--disp); letter-spacing: .16em; color: var(--faint); border-top: 1px dashed var(--rule-strong); }
.tower-foot { margin: 0; padding: 8px 12px; font-size: 12px; color: var(--faint); border-top: 1px solid var(--rule); }

/* the timing tape */
.timing { border: 1px solid var(--rule-strong); border-radius: 6px; background: rgba(5, 14, 32, .92); }
.timing-hd { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; font: 700 11px var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--rule); }
.timing-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); animation: blink 1.2s steps(2) infinite; }
.timing-list { list-style: none; margin: 0; padding: 4px 0; max-height: 360px; overflow-y: auto; font-family: var(--code); font-size: 12px; }
.timing-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 5px 12px; border-bottom: 1px dotted var(--rule); color: var(--line); }
.timing-list li time { color: var(--faint); }
.timing-list li span { overflow-wrap: anywhere; }
.timing-list li.pitline span { color: var(--amber); }
.timing-list li.quiet { display: block; color: var(--dim); font-family: var(--body); font-size: 13px; }
.timing-list li.ghost { color: var(--faint); }
.timing-list li.typed span { display: inline-block; animation: type .9s steps(28) both; overflow: hidden; white-space: nowrap; }
@keyframes type { from { max-width: 0; } to { max-width: 100%; } }

/* rules + worked example */
.manual { border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; background: rgba(12, 31, 64, .6); }
.manual-t { margin: 0 0 8px; font: 700 15px var(--disp); letter-spacing: .06em; text-transform: uppercase; }
.manual-steps { margin: 0; padding-left: 18px; color: var(--dim); font-size: 14px; }
.manual-steps li { margin-bottom: 6px; }
.worked { margin-top: 10px; border-top: 1px dashed var(--rule-strong); padding-top: 8px; font-size: 14px; color: var(--dim); }
.worked-t { margin: 0 0 4px; font: 700 12px var(--disp); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.worked p { margin: 0 0 6px; }

.colophon { border-top: 1px solid var(--rule-strong); padding: 12px 0 0; font-size: 12px; color: var(--faint); display: grid; gap: 4px; }
.colophon code { color: var(--dim); word-break: break-all; }
.colophon nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.colophon nav a { color: var(--dim); }

.drawer { position: fixed; inset: 0; background: rgba(3, 9, 22, .72); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.drawer[hidden] { display: none; }
.drawer-card { width: min(560px, 100%); max-height: 80vh; overflow: auto; background: var(--panel); border: 1px solid var(--rule-strong); border-radius: 10px 10px 0 0; padding: 14px; }
.drawer-hd { display: flex; justify-content: space-between; align-items: center; font: 700 14px var(--disp); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.drawer-hd button { background: transparent; border: 1px solid var(--rule-strong); color: var(--dim); border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.wallets { display: grid; gap: 8px; }
.wallets button { display: flex; align-items: center; gap: 10px; background: var(--ground); border: 1px solid var(--rule-strong); color: var(--line); padding: 10px; border-radius: 6px; font: 600 14px var(--body); cursor: pointer; }
.wallets img { width: 22px; height: 22px; }
.history { margin: 0; padding-left: 18px; color: var(--dim); font-size: 14px; }
.pop { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--line); color: var(--ground); font: 600 14px var(--body); padding: 8px 14px; border-radius: 4px; z-index: 60; }

/* mid widths: one column, a wider measure */
@media (min-width: 720px) {
  .pitwall { padding: 0 28px 32px; gap: 18px; }
  .callout { font-size: 17px; }
  .entry-amt { font-size: 26px; }
  .ticket-addr { font-size: 13px; }
  .lapbox-n { font-size: 44px; }
  .car { grid-template-columns: 40px 46px minmax(0, 1fr) auto; padding: 8px 16px; }
  .car-stake { font-size: 18px; }
}
/* desktop: the race and its action left, the tape and the rules in a column beside it */
@media (min-width: 1000px) {
  .pitwall { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); column-gap: 24px; }
  .ident, .colophon { grid-column: 1 / -1; }
  .rightcol { position: sticky; top: 12px; }
  .callout { font-size: 19px; }
  .lapbox-n { font-size: 54px; }
  .flagbox-v, .potbox-v { font-size: 28px; }
  .car { padding: 10px 18px; }
  .car-bar { height: 10px; }
  .timing-list { max-height: 420px; }
}
.car-got { color: var(--cyan); }