/* Bidpit — a harbour bid pit at night. Ground #0A1013, one accent (lime), warning-label type. */
:root {
  --ground: #0A1013;
  --deck: #101A1F;
  --deep: #060A0C;
  --ink: #E4EEDC;
  --dim: rgba(228, 238, 220, .6);
  --faint: rgba(228, 238, 220, .32);
  --lime: #9EF01A;
  --lime-lo: rgba(158, 240, 26, .16);
  --lime-mid: rgba(158, 240, 26, .42);
  --rule: rgba(228, 238, 220, .12);
  --disp: 'Antonio', 'Arial Narrow', sans-serif;
  --body: 'Archivo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 15px/1.5 var(--body); overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
code { font-family: var(--mono); }

/* ---------- the CA strip: a hazard-taped band pinned to the top ---------- */
.hz {
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 10px;
  padding: 9px 14px 9px 22px; background: rgba(6, 10, 12, .96); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--lime-mid);
}
.hz::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px;
  background: repeating-linear-gradient(135deg, var(--lime) 0 6px, var(--deep) 6px 12px); }
.hz-k { font: 700 12px/1 var(--disp); letter-spacing: .14em; color: var(--lime); }
.hz-addr { font-size: 12px; line-height: 1.35; word-break: break-all; user-select: all; color: var(--ink); min-width: 0; }
.hz-addr.is-pending { color: var(--dim); user-select: text; font-family: var(--body); word-break: normal; }
.hz-copy { border: 1px solid var(--lime); background: var(--lime); color: var(--deep); font: 700 12px/1 var(--disp); letter-spacing: .1em;
  text-transform: uppercase; padding: 9px 12px; border-radius: 3px; }
.hz-copy:disabled { background: transparent; color: var(--faint); border-color: var(--rule); cursor: default; }
.hz-copy.is-copied { background: var(--ink); border-color: var(--ink); }
.hz-gm { grid-column: 2 / 4; font-size: 11px; color: var(--dim); text-decoration: underline; text-underline-offset: 2px; justify-self: start; }

/* ---------- the lede: a warning label computed from the pit ---------- */
.caution { margin: 16px 14px 0; padding: 14px 15px 15px; border: 2px solid var(--lime); border-radius: 4px;
  font: 500 17px/1.45 var(--body); background: linear-gradient(180deg, var(--lime-lo), transparent 70%); }
.caution-k { display: inline-block; margin-right: 6px; padding: 2px 7px 3px; background: var(--lime); color: var(--deep);
  font: 700 13px/1.2 var(--disp); letter-spacing: .16em; text-transform: uppercase; vertical-align: 2px; }
.caution b, .caution .lit { color: var(--lime); font-weight: 700; }
.caution code { white-space: nowrap; font-size: .88em; color: var(--ink); background: rgba(228, 238, 220, .08); padding: 0 4px; border-radius: 3px; }

/* ---------- the flow: three steps down a rail ---------- */
.flow { margin: 18px 14px 0; position: relative; }
.flow::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 30px; width: 2px; background: var(--rule); }
.leg { position: relative; padding-left: 40px; margin-bottom: 22px; }
.leg-hd { display: flex; align-items: center; gap: 10px; min-height: 28px; margin-bottom: 10px; flex-wrap: wrap; }
.leg-no { position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  border: 2px solid var(--faint); background: var(--ground); font: 700 14px/1 var(--disp); color: var(--dim); }
.leg.is-on .leg-no { border-color: var(--lime); color: var(--deep); background: var(--lime); box-shadow: 0 0 0 4px var(--lime-lo); }
.leg-t { font: 600 19px/1.1 var(--disp); text-transform: uppercase; letter-spacing: .04em; }
.leg-tag { margin-left: auto; font: 500 11px/1.2 var(--mono); color: var(--dim); }

/* the shaft: an isometric pit with the standing crate on top and the beaten bids stacked under it */
.shaft { position: relative; color: var(--lime-mid); padding: 0 0 2px;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "rim rim" "ontop dial" "pile pile" "cut cut"; gap: 0 10px; }
.shaft-rim { grid-area: rim; width: 100%; height: 34px; display: block; }
.ontop { grid-area: ontop; min-width: 0; padding: 8px 0 6px; }
.dial { grid-area: dial; position: relative; width: 84px; height: 84px; margin-top: 4px; align-self: start; }
.dial svg { width: 84px; height: 84px; transform: rotate(-90deg); }
.dial-bg { fill: none; stroke: var(--rule); stroke-width: 6; }
.dial-run { fill: none; stroke: var(--lime); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset .9s linear; }
.dial-v { position: absolute; inset: 22px 0 auto; text-align: center; font: 700 20px/1 var(--mono); color: var(--ink); }
.dial-k { position: absolute; inset: 47px 4px auto; text-align: center; font: 500 9px/1.15 var(--body); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; }
.dial.is-out .dial-v { color: var(--lime); }

.crate { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.crate-blk { display: block; overflow: visible; }
.crate-blk .f-top { fill: #D9FFAE; }
.crate-blk .f-l { fill: var(--lime); }
.crate-blk .f-r { fill: #5E9A0C; }
.crate-blk.is-old .f-top { fill: #3A4A40; } .crate-blk.is-old .f-l { fill: #26332B; } .crate-blk.is-old .f-r { fill: #1A241E; }
.crate-blk.is-ghost polygon { fill: none; stroke: var(--lime); stroke-width: 1.5; stroke-dasharray: 5 4; }
.crate-txt { min-width: 0; }
.crate-amt { display: block; font: 700 30px/1 var(--disp); letter-spacing: .01em; color: var(--ink); }
.crate-amt small { display: block; margin-top: 5px; font: 500 12px/1 var(--body); color: var(--dim); letter-spacing: .02em; }
.crate-who { display: block; white-space: nowrap; margin-top: 4px; font: 500 12px/1.35 var(--mono); color: var(--dim); }
.crate-who .lit { color: var(--lime); }
.crate-pay { display: block; margin-top: 6px; font: 600 13px/1.35 var(--body); color: var(--lime); }
.ontop.is-first .crate-amt { color: var(--lime); font-size: 22px; }
.ontop.is-first .crate-blk { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(-4px); } }
.ontop.is-fresh { animation: land .7s ease-out; }
@keyframes land { from { transform: translateY(-18px); opacity: .2; } }

.pile { grid-area: pile; list-style: none; margin: 4px 0 0; padding: 8px 10px; border-left: 2px solid var(--lime-lo); border-right: 2px solid var(--lime-lo);
  background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .1)); }
.pile-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px dashed var(--rule); }
.pile-row:last-child { border-bottom: 0; }
.pile-no { font: 600 11px/1 var(--mono); color: var(--faint); width: 26px; }
.pile-mid { min-width: 0; display: flex; align-items: center; gap: 8px; }
.pile-amt { font: 600 15px/1.1 var(--disp); color: var(--dim); }
.pile-who { font: 400 11px/1.2 var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pile-cut { font: 600 12px/1.1 var(--mono); color: var(--lime); white-space: nowrap; }
.pile-row.is-just { background: var(--lime-lo); }
.pile-none { color: var(--faint); font-size: 13px; padding: 6px 0; }
.pile-more { color: var(--faint); font: 500 11px/1.4 var(--mono); padding-top: 6px; }

.cutfloor { grid-area: cut; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; padding: 11px 12px 12px;
  background: var(--deck); border: 1px solid var(--lime-lo); border-top: 3px solid var(--lime); clip-path: polygon(0 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.cutfloor-k { font: 700 12px/1 var(--disp); text-transform: uppercase; letter-spacing: .14em; color: var(--lime); }
.cutfloor-v { font: 700 26px/1 var(--disp); color: var(--ink); justify-self: end; }
.cutfloor-n { grid-column: 1 / -1; font-size: 12.5px; color: var(--dim); }

/* step 2: the outbid slip */
.slip { background: var(--deck); border: 1px solid var(--rule); border-radius: 4px; padding: 12px; }
.slip-row { display: flex; align-items: center; gap: 8px; border-bottom: 2px solid var(--lime-mid); padding-bottom: 4px; }
.slip-in { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--ink); font: 700 30px/1.1 var(--disp); padding: 4px 0; }
.slip-in::placeholder { color: var(--faint); }
.slip-tk { font: 600 12px/1 var(--mono); color: var(--dim); }
.slip-nudge { display: flex; gap: 6px; margin: 10px 0; }
.slip-nudge button { flex: 1; border: 1px solid var(--rule); background: transparent; padding: 8px 0; border-radius: 3px; font: 600 12px/1 var(--mono); color: var(--dim); }
.slip-nudge button:hover { border-color: var(--lime-mid); color: var(--ink); }
.slip-go { width: 100%; border: 0; background: var(--lime); color: var(--deep); font: 700 18px/1 var(--disp); text-transform: uppercase; letter-spacing: .08em; padding: 15px; border-radius: 3px; }
.slip-go:disabled { opacity: .45; cursor: default; }
.slip-note { margin: 10px 0 0; font-size: 13px; color: var(--dim); }
.slip-note b { color: var(--ink); }
.slip-note .warnt { color: #FF9D7A; }
.leg-bid.is-on .slip { border-color: var(--lime-mid); box-shadow: 0 0 0 3px var(--lime-lo); }

/* step 3 */
.due { background: var(--deck); border: 1px solid var(--rule); border-radius: 4px; padding: 12px; }
.due-line { margin: 0 0 10px; font-size: 13.5px; color: var(--dim); }
.due-line b { color: var(--ink); }
.due-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.due-btn { flex: 1 1 140px; border: 1px solid var(--lime-mid); background: transparent; color: var(--ink); font: 600 14px/1 var(--disp); text-transform: uppercase; letter-spacing: .08em; padding: 12px; border-radius: 3px; }
.due-btn:disabled { opacity: .4; cursor: default; }
.due-btn-claim { background: var(--lime-lo); }
.leg-due.is-on .due { border-color: var(--lime-mid); }

/* ---------- the quay: log, rules, closed pits ---------- */
.quay { margin: 6px 14px 0; display: grid; gap: 16px; }
.log, .regs, .past { background: var(--deck); border: 1px solid var(--rule); border-radius: 4px; padding: 12px 13px; }
.log-hd, .past-hd { display: flex; justify-content: space-between; align-items: center; font: 600 13px/1 var(--disp); text-transform: uppercase; letter-spacing: .12em; color: var(--dim); margin-bottom: 8px; }
.past-hd a { font: 500 11px/1 var(--mono); letter-spacing: 0; text-transform: none; }
.log-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); animation: blink 1.6s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.log-list, .past-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; }
.log-item { display: grid; grid-template-columns: 44px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 13px; line-height: 1.4; }
.log-item time { font: 500 11px/1.6 var(--mono); color: var(--faint); }
.log-item b { color: var(--lime); font-weight: 600; }
.log-item code { font-size: 11.5px; color: var(--ink); }
.log-item.is-print { animation: print .6s steps(6); }
@keyframes print { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.log-empty { color: var(--faint); font-size: 13px; padding: 6px 0; border-top: 1px solid var(--rule); }
.regs-t { margin: 0 0 8px; font: 600 18px/1.1 var(--disp); text-transform: uppercase; letter-spacing: .04em; }
.regs-list { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--dim); }
.regs-list li { margin-bottom: 7px; }
.regs-list b { color: var(--ink); }
.worked { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--lime); background: rgba(0, 0, 0, .25); font-size: 13.5px; }
.worked p { margin: 0 0 6px; }
.worked-t { font: 700 12px/1 var(--disp) !important; text-transform: uppercase; letter-spacing: .14em; color: var(--lime); }
.worked b { color: var(--lime); }
.past-item { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.past-item span:last-child { font-family: var(--mono); color: var(--lime); font-size: 12px; white-space: nowrap; }

/* ---------- footer ---------- */
.berth { margin: 26px 14px 0; padding: 18px 0 30px; border-top: 1px solid var(--rule); display: grid; gap: 12px; font-size: 12.5px; color: var(--dim); }
.berth-id { display: flex; align-items: center; gap: 10px; }
.berth-id img { border-radius: 4px; }
.berth-nm { font: 700 18px/1 var(--disp); color: var(--ink); text-transform: uppercase; letter-spacing: .06em; }
.berth-dom { font: 500 12px/1 var(--mono); }
.berth-links { display: flex; gap: 14px; flex-wrap: wrap; }
.berth-links a { color: var(--ink); }
.berth-refs { margin: 0; display: grid; gap: 4px; }
.berth-refs dt { font: 600 11px/1 var(--disp); text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin-top: 4px; }
.berth-refs dd { margin: 0; font: 400 11.5px/1.4 var(--mono); word-break: break-all; color: var(--dim); }
.berth-fine { margin: 0; font-size: 11.5px; color: var(--faint); }

/* ---------- drawer (routed views) + pings ---------- */
.drawer { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .6); display: grid; align-items: end; justify-items: center; }
.drawer-card { width: min(640px, 100%); max-height: 86vh; overflow: auto; background: var(--deck); border-top: 3px solid var(--lime); padding: 14px 16px 22px; border-radius: 8px 8px 0 0; }
.drawer-hd { display: flex; justify-content: space-between; align-items: center; font: 600 17px/1 var(--disp); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.drawer-hd button { border: 1px solid var(--rule); background: transparent; padding: 6px 10px; border-radius: 3px; font-size: 12px; }
.drawer-card table { width: 100%; border-collapse: collapse; font-size: 13px; }
.drawer-card td, .drawer-card th { text-align: left; padding: 6px 4px; border-top: 1px solid var(--rule); }
.drawer-card th { font: 600 11px/1 var(--disp); text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.wallets { display: grid; gap: 8px; }
.wallets button { display: flex; align-items: center; gap: 10px; border: 1px solid var(--rule); background: transparent; padding: 10px; border-radius: 4px; }
.wallets img { width: 24px; height: 24px; }
.pings { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60; display: grid; gap: 6px; pointer-events: none; }
.ping { background: var(--ink); color: var(--deep); padding: 9px 14px; border-radius: 4px; font: 600 13px/1.3 var(--body); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }

/* ---------- tablet: one column, wider measure, bigger object ---------- */
@media (min-width: 700px) {
  body { font-size: 16px; }
  .caution, .flow, .quay, .berth { margin-left: auto; margin-right: auto; max-width: 720px; }
  .caution { margin-top: 24px; font-size: 20px; padding: 18px 20px; }
  .crate-amt { font-size: 40px; }
  .dial, .dial svg { width: 104px; height: 104px; }
  .dial-v { inset: 30px 0 auto; font-size: 24px; } .dial-k { inset: 60px 8px auto; }
  .hz { padding-left: 26px; grid-template-columns: auto 1fr auto auto; }
  .hz-addr { font-size: 14px; }
  .hz-gm { grid-column: auto; justify-self: end; }
}

/* ---------- desktop: the pit and its steps on the left, the quay log and rules beside it ---------- */
@media (min-width: 1000px) {
  body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-areas: "hz hz" "lede quay" "flow quay" "berth berth";
    column-gap: 32px; max-width: 1180px; margin: 0 auto; padding: 0 24px; align-items: start; }
  .hz { grid-area: hz; margin: 0 -24px; padding: 11px 24px 11px 34px; }
  .caution { grid-area: lede; max-width: none; margin: 28px 0 0; font-size: 21px; }
  .flow { grid-area: flow; max-width: none; margin: 24px 0 0; }
  .quay { grid-area: quay; max-width: none; margin: 28px 0 0; position: sticky; top: 76px; }
  .berth { grid-area: berth; max-width: none; margin: 32px 0 0; grid-template-columns: 1fr 1fr; }
  .berth-fine { grid-column: 1 / -1; }
  .crate-amt { font-size: 48px; }
  .leg-t { font-size: 22px; }
  .log-list { max-height: 300px; }
}