/* The front door (api/door.py): one box in the middle, the trips as punched tickets in their own colours. */
:root{--tk-par:#c9c4ff;--tk-ade:#ffb38f;--tk-ink:#0d0f14}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tk-par:#a59ff0;--tk-ade:#e8946c}}
:root[data-theme="dark"]{--tk-par:#a59ff0;--tk-ade:#e8946c}
*{box-sizing:border-box}
body{margin:0;background:var(--sp-paper);color:var(--sp-ink);font:16px/1.55 var(--sp-sans);-webkit-font-smoothing:antialiased}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dr{min-height:100vh;display:flex;flex-direction:column}
.dr-nav{display:flex;align-items:center;gap:18px;padding:12px 16px;border-bottom:1px solid var(--sp-edge);font:500 11px/1 var(--sp-mono)}
.dr-nav .brand{font:800 20px/1 var(--sp-dot);color:var(--sp-ink);text-decoration:none}
.dr-nav a{color:var(--sp-mute);text-decoration:none}.dr-nav a:hover{color:var(--sp-ink)}
.dr-nav .sp{flex:1}
.dr-chip{border:1px dashed var(--sp-mute);color:var(--sp-mute);padding:6px 9px;font:600 10.5px/1 var(--sp-mono)}
.dr-main{width:min(680px,100%);margin:0 auto;padding:56px 16px 48px;display:grid;gap:18px;justify-items:center;text-align:center}
.dr-big{margin:0;font:800 clamp(44px,9vw,72px)/.86 var(--sp-dot);letter-spacing:-.02em;text-wrap:balance}
.dr-lead{margin:0;max-width:52ch;font:400 13px/1.55 var(--sp-mono);color:var(--sp-mute)}
.dr-box{width:100%;display:flex;gap:8px;align-items:center;border:1px solid var(--sp-edge);background:var(--sp-card);padding:10px 10px 10px 16px}
.dr-box input{flex:1;min-width:0;border:0;background:transparent;color:var(--sp-ink);font:400 14px/1.4 var(--sp-mono);outline:none}
.dr-box input::placeholder{color:var(--sp-mute)}
.dr-box:focus-within{outline:2px solid var(--sp-signal);outline-offset:2px}
.dr-send{all:unset;cursor:pointer;width:34px;height:34px;display:grid;place-items:center;background:var(--sp-ink);color:var(--sp-paper)}
.dr-send svg{width:16px;height:16px}
.dr-send:focus-visible{outline:2px solid var(--sp-signal);outline-offset:2px}
.dr-out{width:100%;text-align:left}
.dr-out:empty{display:none}
.dr-wait{margin:0;font:400 12px var(--sp-mono);color:var(--sp-mute)}
.dr-note{border-left:2px solid var(--sp-ink);padding:4px 0 4px 12px;display:grid;gap:10px;justify-items:start}
.dr-note p{margin:0;font:500 13px/1.5 var(--sp-mono)}
.dr-req,.dr-pick{all:unset;cursor:pointer;font:600 11px/1 var(--sp-mono);padding:10px 12px;border:1px solid var(--sp-ink);color:var(--sp-ink)}
.dr-req:disabled{cursor:default;border-style:dashed;color:var(--sp-mute)}
.dr-req:focus-visible,.dr-pick:focus-visible{outline:2px solid var(--sp-signal);outline-offset:2px}
.dr-picks{display:flex;flex-wrap:wrap;gap:8px}
.dr-tix{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;text-align:left;margin-top:8px}
.dr-tk{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 44px;color:var(--tk-ink);text-decoration:none;transition:transform var(--sp-motion)}
.dr-tk.par{background:var(--tk-par)}.dr-tk.ade{background:var(--tk-ade)}
.dr-tk:hover{transform:translateY(-2px)}
.dr-tk:focus-visible{outline:2px solid var(--sp-signal);outline-offset:3px}
.dr-tk::before,.dr-tk::after{content:"";position:absolute;right:36px;width:14px;height:14px;border-radius:50%;background:var(--sp-paper)}
.dr-tk::before{top:-7px}.dr-tk::after{bottom:-7px}
.dr-tk .m{padding:16px 18px;display:grid;gap:6px;min-width:0}
.dr-tk .e{font:500 9.5px/1.2 var(--sp-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.dr-tk .t{font:800 28px/.9 var(--sp-dot)}
.dr-tk .s{font:400 11px/1.4 var(--sp-mono)}
.dr-tk .side{border-left:2px dashed var(--tk-ink);display:grid;place-items:center}
.dr-tk .side svg{width:16px;height:16px}
.dr-else{margin:0;font:400 11.5px var(--sp-mono);color:var(--sp-mute)}
@media (max-width:560px){.dr-main{padding-top:32px}.dr-tix{grid-template-columns:1fr;gap:14px}}
@media (prefers-reduced-motion:reduce){.dr-tk{transition:none}}