#recording-dialog{padding:0;border:2px solid var(--ink);width:min(960px,calc(100% - 24px));max-width:calc(100% - 24px);max-height:calc(100dvh - 24px);color:var(--ink);background:var(--paper);overflow:auto;overscroll-behavior:contain}
#recording-dialog::backdrop{background:rgb(10 12 25 / .76)}
.recording-head{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:2px solid var(--ink)}
.recording-head h2{font-size:18px;line-height:1.3}.recording-head p{font:12px/1.5 var(--mono);margin:4px 0 0}
#recording-close{min-width:44px;min-height:44px;border:2px solid var(--ink);background:white;font:28px/1 var(--font);cursor:pointer;flex-shrink:0}
#recording-state{font:12px/1.5 var(--mono);padding:10px 20px;margin:0;background:#fff0bb;border-bottom:1px solid var(--ink)}
.recording-frame{display:grid;grid-template-columns:minmax(0, .65fr) minmax(0,1fr);gap:24px;padding:20px;align-items:center}
.recording-portrait{min-width:0;align-self:stretch;display:grid;place-items:center;background:var(--paper-2);overflow:hidden}
.recording-portrait .artslot{width:min(100%,230px);max-width:230px;margin:0;border:0;box-shadow:none;background-color:var(--paper-2)}
.recording-readout{min-width:0}.recording-round{font:bold 12px/1.4 var(--mono);color:var(--ink-2);margin:0 0 8px}
#recording-action{font:900 clamp(40px,6vw,64px)/1 var(--font);letter-spacing:-.04em;color:var(--cobalt)}
#recording-proposal{font-weight:650;margin:12px 0 8px;overflow-wrap:anywhere}
#recording-settlement{font:12px/1.5 var(--mono);padding:12px;border-left:3px solid var(--cobalt);background:var(--paper-2);white-space:pre-line;overflow-wrap:anywhere;min-height:60px}
.recording-values{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.recording-values dt{font:11px/1.5 var(--mono);text-transform:uppercase}.recording-values dd{font:750 clamp(20px,3vw,30px)/1.3 var(--font);margin:0;font-variant-numeric:tabular-nums}
#recording-pnl{color:var(--red)}#recording-eth{font:12px/1.5 var(--mono);margin:0}
.recording-plot{margin:12px 0 0}.recording-plot svg{display:block;width:100%;height:100px;overflow:visible}
#recording-line{fill:none;stroke:var(--cobalt);stroke-width:3;stroke-linejoin:round}#recording-dot{fill:var(--cobalt);stroke:white;stroke-width:2}
.recording-grid{stroke:#ddd;stroke-width:1}.recording-plot figcaption{font:10px/1.5 var(--mono);color:var(--ink-2);margin-top:4px}
.recording-transport{padding:0 20px 16px}.recording-range-label{font:11px/1.5 var(--mono);display:block;margin-bottom:4px}
#recording-range{display:block;width:100%;min-height:44px;accent-color:var(--cobalt);margin:0}
.recording-buttons{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.recording-buttons .btn{min-height:44px}.recording-buttons a{margin-left:auto;font-size:13px;font-weight:700;min-height:44px;display:inline-flex;align-items:center}
.recording-footer{padding:12px 20px 16px;border-top:1px solid #ddd;font:11px/1.6 var(--mono);overflow-wrap:anywhere}.recording-footer p{margin:4px 0}.recording-footer a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
#recording-dialog :focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
@media(max-width:600px){.recording-head{padding:12px}.recording-head h2{font-size:16px}.recording-frame{grid-template-columns:90px minmax(0,1fr);gap:12px;padding:12px;align-items:start}.recording-portrait{align-self:start}.recording-portrait .artslot{width:90px}#recording-action{font-size:40px}.recording-values{gap:8px;grid-template-columns:1fr}.recording-values dd{font-size:24px}#recording-settlement{font-size:11px;padding:8px;min-height:0}.recording-transport{padding:0 12px 12px}.recording-footer{padding:10px 12px}.recording-buttons a{margin-left:0}.recording-plot svg{height:80px}#recording-state{padding:8px 12px}}
@media(prefers-reduced-motion:reduce){#recording-dialog *{transition:none!important;animation:none!important}}

@media(max-width:600px){.recording-frame{grid-template-columns:72px minmax(0,1fr);gap:8px 12px}.recording-readout{display:contents}.recording-portrait{grid-column:1;grid-row:1/5}.recording-portrait .artslot{width:72px}.recording-round,#recording-action,#recording-proposal,#recording-settlement{grid-column:2}.recording-round{margin:0}#recording-proposal{margin:4px 0}#recording-settlement{margin:0}.recording-values,#recording-eth,.recording-plot{grid-column:1/-1}.recording-values{grid-template-columns:1fr 1fr;margin:6px 0;gap:8px}.recording-values dd{font-size:22px}.recording-plot{margin:2px 0}.recording-plot svg{height:68px}.recording-buttons a{font-size:12px}.recording-head p{font-size:11px}}