/* net.css: the Shelter Pass sign-in, the door stamp, the room meter (net.js). Uses the site's tokens with fallbacks so
   /door can load it on its own. Near-black + one signal colour; Bebas strips/buttons, Baumans names, Space Mono data. */
.net,.net-door,.net-stampcard,.net-sheet,.net-s3,.net-room,.net-bar{--n-ink:var(--ink,#0f0c14);--n-panel:var(--panel,#19141f);--n-rule:var(--rule,#382e45);--n-white:var(--white,#fbf9ff);--n-mute:var(--mute,#bfb6cc);--n-dim:var(--dim,#8b8199);--n-sig:var(--signal,#fc741f);--n-on:var(--signal-ink,#0f0c14);--n-cy:#19d3f0;--n-rd:#ff2d55;--n-label:var(--f-label,'Bebas Neue','Arial Narrow',sans-serif);--n-name:var(--f-name,'Baumans','Righteous',system-ui,sans-serif);--n-mono:var(--f-mono,'Space Mono',ui-monospace,monospace);--n-body:var(--f-body,'Montserrat',system-ui,sans-serif)}
.net,.net-sheet,.net-s3,.net-bar,.net-stampcard{box-sizing:border-box}
.net *,.net-sheet *,.net-s3 *{box-sizing:border-box}
.net{display:block;border:1px solid var(--n-rule);background:var(--n-panel);padding:clamp(1rem,3.4vw,1.4rem);margin-top:1.2rem;color:var(--n-white);font-family:var(--n-body)}
.net-in{display:grid;gap:.6rem;min-width:0}
.net-in>*{margin:0}
.net .net-strip,.net-sheet .net-strip{width:fit-content}
.net-t{font-family:var(--n-name);font-weight:400;text-transform:uppercase;font-size:clamp(1.5rem,5.6vw,2.05rem);line-height:1.04;letter-spacing:.035em;-webkit-text-stroke:.028em currentColor;paint-order:stroke fill;text-shadow:-.05em 0 var(--n-cy),.05em 0 var(--n-rd);color:var(--n-white);margin:.1rem 0 0}
.net-cs{font-family:var(--n-name);text-transform:uppercase;letter-spacing:.045em;-webkit-text-stroke:.03em currentColor;paint-order:stroke fill;text-shadow:-.05em 0 var(--n-cy),.05em 0 var(--n-rd);white-space:nowrap}
.net-l{font-size:.98rem;line-height:1.5;color:var(--n-mute)}
.net-l b,.net-em{color:var(--n-white);overflow-wrap:anywhere}
.net-mono{font-family:var(--n-mono);font-size:.8rem;line-height:1.55;letter-spacing:.02em;color:var(--n-white)}
.net-reward{color:var(--signal-text,var(--signal,#fc741f))}
.net-mute{font-size:.86rem;color:var(--n-mute)}
.net-fine{font-family:var(--n-mono);font-size:.75rem;line-height:1.5;color:var(--n-dim)}
.net-f,.net-cf,.net-door{display:grid;gap:.55rem;margin:.2rem 0 0}
.net-e,.net-word{width:100%;min-width:0;height:56px;background:var(--n-ink);color:var(--n-white);border:2px solid var(--n-rule);border-radius:0;padding:0 1rem;font:500 18px/1 var(--n-body);-webkit-appearance:none;appearance:none}
.net-word{font:700 22px/1 var(--n-mono);letter-spacing:.14em;text-transform:uppercase}
.net-word::placeholder{letter-spacing:.06em;font-size:.82em;color:var(--n-dim)}
.net-e:focus,.net-word:focus{outline:none;border-color:var(--n-sig);box-shadow:0 0 0 3px color-mix(in srgb,var(--n-sig) 28%,transparent)}
.net-e::placeholder{color:var(--n-dim)}
.net .btn,.net-sheet .btn,.net-s3 .btn{justify-content:center;min-height:54px;font-size:1.35rem}
.net-go{width:100%}
.net-f.n-busy .net-go,.net-cf.n-busy .net-go,.net-door.n-busy .btn{opacity:.6;pointer-events:none}
.net-alt,.net-lnk,.net-inl,.net-fix{background:none;border:0;padding:.35rem 0;color:var(--n-white);font:600 .92rem/1.3 var(--n-body);text-decoration:underline;text-decoration-color:var(--n-sig);text-underline-offset:.22em;text-decoration-thickness:2px;cursor:pointer;width:fit-content;min-height:44px}
/* an inline text button: the vertical padding is a 44px-tall tap area that doesn't move the line (like .net-fix) */
.net-inl{display:inline;min-height:0;padding:.6rem 0;margin:-.6rem 0;font:inherit;color:inherit;vertical-align:baseline}   /* a button is inline-block: without the margin the padding made its line 13-20 px taller (mobile repair 2026-10-13) */
.net-alt{justify-self:center}
.net-err{min-height:0;color:#ff6b86;font:400 .82rem/1.45 var(--n-mono)}
.net-err:empty{display:none}
.net-err .net-lnk{color:var(--n-white);font-family:var(--n-body)}
.net-typo{font-size:.9rem;color:var(--n-mute)}
.net-fix{display:inline;min-height:0;padding:.7rem .1rem;margin:-.7rem -.1rem;font-weight:700;color:var(--signal-text,var(--signal,#fc741f))}
.net-ok{font:400 .8rem/1.45 var(--n-mono);color:var(--n-mute)}
.net-ok:empty{display:none}
.net-ok.n-good{color:#7be0a0}.net-ok.n-bad{color:#ff6b86}
.net-hint{font-size:.86rem;color:var(--signal-text,var(--signal,#fc741f))}
.net-hint:empty{display:none}
.net-links{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between}
.net-lnk[disabled]{opacity:.55;text-decoration-color:var(--n-rule);cursor:default}
/* the 6 code cells: one real input over six painted boxes (autofill and paste just work) */
.net-cells{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;max-width:360px}
.net-cells span{height:62px;display:grid;place-items:center;border:2px solid var(--n-rule);background:var(--n-ink);font:700 32px/1 var(--n-mono);color:var(--n-white);transition:border-color .12s}
.net-cells span.n-on{border-color:color-mix(in srgb,var(--n-sig) 70%,var(--n-rule))}
.net-cells span.n-cur{border-color:var(--n-sig);box-shadow:0 0 0 3px color-mix(in srgb,var(--n-sig) 26%,transparent)}
.net-code{position:absolute;inset:0;width:100%;height:100%;opacity:.011;border:0;background:transparent;color:transparent;caret-color:transparent;font-size:16px;letter-spacing:2em;padding:0 0 0 1em}
.net-cf .net-go{max-width:360px}
.n-shake{animation:netshake .32s}
@keyframes netshake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
/* signed in */
.net-on{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.65rem}
.net-dot{width:9px;height:9px;border-radius:50%;background:var(--n-sig);box-shadow:0 0 0 3px color-mix(in srgb,var(--n-sig) 30%,transparent);flex:none;animation:netpulse 2.4s ease-in-out infinite}
@keyframes netpulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--n-sig) 0%,transparent)}}
.net-add{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between}
.net-add .net-l{color:var(--n-white);font-weight:600}
.net-week{gap:.4rem}
.net-acct{gap:.45rem}
.net-acct-top,.net-card-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.net-cs-big{font-size:clamp(2.4rem,11vw,3.6rem);line-height:1;margin:.3rem 0 .1rem!important;color:var(--n-white)}
.net-discs{display:inline-flex;gap:.16em;font-size:28px;color:var(--n-white)}
.net-disc{width:1em;height:1em;display:block}
.net-spin .net-disc{animation:netspin 9s linear infinite}
@keyframes netspin{to{transform:rotate(360deg)}}
.net-streak{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;font-family:var(--n-label);letter-spacing:.06em;font-size:1.25rem;color:var(--n-white)}
.net-streak b{font-weight:400}
.net-dots{display:inline-flex;gap:5px}
.net-dots i{width:20px;height:20px;color:var(--n-rule);display:block}
.net-dots i.n-on{color:var(--n-sig)}
.net-sw{display:flex;align-items:center;gap:.7rem;min-height:44px;cursor:pointer;font-weight:600;color:var(--n-white);margin-top:.2rem!important}
.net-sw input{position:absolute;opacity:0;width:1px;height:1px}
.net-sw-t{width:46px;height:26px;border-radius:13px;background:var(--n-rule);position:relative;flex:none;transition:background .15s}
.net-sw-t::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--n-white);transition:transform .15s}
.net-sw input:checked+.net-sw-t{background:var(--n-sig)}
.net-sw input:checked+.net-sw-t::after{transform:translateX(20px);background:var(--n-on)}
.net-sw input:focus-visible+.net-sw-t{outline:2px solid var(--n-cy);outline-offset:2px}
.net-out .net-btns{margin-top:.2rem}
.net-acct .net-out{margin-top:.55rem}
.net-btns{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.net-saved{color:var(--signal-text,var(--signal,#fc741f));letter-spacing:.08em;font-size:.95rem!important}
.net.net-flat{border:0;background:none;padding:.2rem 0 0;margin-top:.6rem}
/* the sheet */
html.net-lock{overflow:hidden}
/* .net-sheet is the visible area: net.js fit() pins its top/bottom to the visual viewport (keyboard up = shorter sheet),
   so the panel's heights are % of it, never vh (iOS vh is the toolbar-less height) and never an inline bottom (mobile 2026-10-12) */
.net-sheet{position:fixed;inset:0;z-index:95}
.net-scrim{position:absolute;inset:0;background:rgba(6,4,10,.72)}
.net-panel{position:absolute;left:0;right:0;bottom:0;max-height:92%;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--panel,#19141f);border-top:3px solid var(--signal,#fc741f);padding:1.1rem 16px calc(1.3rem + env(safe-area-inset-bottom,0px));animation:netup .26s cubic-bezier(.2,.9,.2,1);max-width:560px;margin:0 auto}
/* the centred dialog only where it has the height for it; a phone held sideways keeps the bottom sheet */
@media (min-width:600px) and (min-height:560px){.net-panel{bottom:auto;top:50%;transform:translateY(-50%);border:1px solid var(--rule,#382e45);border-top:3px solid var(--signal,#fc741f);animation:netfade .2s ease-out;max-height:88%}}
@keyframes netup{from{transform:translateY(40px);opacity:0}}
@keyframes netfade{from{opacity:0}}
.net-panel .net{border:0;padding:0;margin:0;background:transparent}
.net-x{position:absolute;top:.6rem;right:.6rem;width:44px;height:44px;border:1px solid var(--rule,#382e45);background:var(--ink,#0f0c14);color:var(--white,#fbf9ff);font-size:1.1rem;cursor:pointer;z-index:2}
.net-panel .net-t{padding-right:46px}
/* the slim bar */
.net-bar{position:relative;z-index:40;background:var(--signal,#fc741f);color:var(--signal-ink,#0f0c14)}
.net-bar button{display:block;width:100%;min-height:44px;padding:.55rem 16px;border:0;background:transparent;color:inherit;font:400 1.1rem/1.15 var(--f-label,'Bebas Neue',sans-serif);letter-spacing:.06em;text-align:left;cursor:pointer}
.net-bar button::after{content:" →"}
/* the More tile + the header chip */
#sheetnav a.net-tile{align-items:flex-start;text-align:left}
#sheetnav a.net-tile .net-cs{font-family:var(--f-name,'Baumans',sans-serif);font-weight:400;text-transform:uppercase;letter-spacing:.045em;font-size:1.35rem;line-height:1.1;color:var(--signal-ink);-webkit-text-stroke:.02em currentColor;text-shadow:-.05em 0 #19d3f0,.05em 0 #ff2d55}
.xp.unsaved .xp-d{background:none;border:2px dashed var(--mute,#bfb6cc);position:relative}
.xp.unsaved .xp-d i{background:var(--signal,#fc741f);width:8px;height:8px;border-radius:50%}
.xp .xp-c{display:none;font:400 .95rem/1 var(--f-label,'Bebas Neue',sans-serif);letter-spacing:.08em;background:var(--signal,#fc741f);color:var(--signal-ink,#0f0c14);padding:.2em .45em .1em}
@media (min-width:761px){.xp.unsaved .xp-c{display:inline-block}}
/* S3: Pass claimed */
.net-s3{position:fixed;inset:0;z-index:96;display:grid;place-items:safe center;overflow:auto;overscroll-behavior:contain;background:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--signal,#fc741f) 22%,transparent),transparent 60%),#0c0910;padding:24px 16px calc(24px + env(safe-area-inset-bottom,0px));color:var(--white,#fbf9ff);font-family:var(--f-body,'Montserrat',sans-serif)}
.net-s3-in{width:100%;max-width:420px;display:grid;gap:.75rem}
.net-s3-in>*{margin:0}
.net-card{border:3px dashed var(--mute,#bfb6cc);padding:1.1rem 1.1rem 1rem;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 4px),var(--panel,#19141f);transition:border-color .35s,border-style .35s,box-shadow .35s}
.net-card:not(.n-dash),.net-card.n-lit{border-style:solid;border-color:var(--signal,#fc741f);box-shadow:6px 6px 0 #000}
.net-card .net-discs{font-size:34px}
.net-turn .net-disc{transition:transform 1.2s cubic-bezier(.3,1.3,.4,1)}
.net-card.n-lit .net-turn .net-disc{transform:rotate(180deg)}
.net-big{font-family:var(--f-mono,'Space Mono',monospace);font-weight:700;font-size:clamp(2.6rem,13vw,4rem);line-height:1.05;margin:.7rem 0 .5rem;min-height:1.1em;letter-spacing:.02em;white-space:nowrap}
.net-type.n-set,.net-s3.n-rm .net-type{font-family:var(--f-name,'Baumans',sans-serif);font-weight:400;text-transform:uppercase;letter-spacing:.045em;-webkit-text-stroke:.03em currentColor;paint-order:stroke fill;text-shadow:-.05em 0 #19d3f0,.05em 0 #ff2d55;animation:netset .3s cubic-bezier(.2,1.6,.4,1)}
@keyframes netset{from{transform:scale(1.12)}}
.net-meta{display:flex;align-items:center;gap:.7rem}
.net-ring{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--signal,#fc741f) calc(var(--p,0)*1%),var(--rule,#382e45) 0)}
.net-ring i{width:24px;height:24px;border-radius:50%;background:var(--panel,#19141f);display:block}
.net-meta .net-mono b{font-weight:700;display:inline-block}
.net-meta b.n-flip{animation:netflip .32s ease-in-out}
@keyframes netflip{50%{transform:rotateX(90deg)}}
.net-lead{color:var(--white,#fbf9ff)!important;font-weight:600}
.net-gains{list-style:none;padding:0;display:grid;gap:4px}
.net-gains li{display:grid;grid-template-columns:76px 1fr;gap:.6rem;font:400 .85rem/1.5 var(--f-mono,'Space Mono',monospace);border-top:1px solid var(--rule,#382e45);padding-top:4px}
.net-gains b{color:var(--signal-text,var(--signal,#fc741f));font-weight:700}
.net-s3 .net-l{color:var(--mute,#bfb6cc);font-size:.95rem;line-height:1.5}
.net-s3 .net-btns .btn{flex:1 1 180px}
/* a short phone (320x568): the way out stays on screen (it sat below the fold with no X) (mobile repair 2026-10-13) */
.net-s3x{position:fixed;top:calc(8px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px));z-index:2;width:44px;height:44px;border:1px solid var(--rule,#382e45);background:var(--ink,#0f0c14);color:var(--white,#fbf9ff);font-size:1.1rem;line-height:1;cursor:pointer}
.net-s3-in{padding-top:28px}
.net-s3 .net-btns{position:sticky;bottom:0;z-index:1;margin:0 -16px;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,rgba(12,9,16,0),#0c0910 14px)}
/* the stamp */
/* overflow-x:clip: the stamp-in animations (the 1.25x STAMPED IN, the 2.3x stamp) paint past the card's sides for a moment;
   unclipped, that widened Chrome's layout viewport for good on every phone (/door 390 -> 405 px). Vertical stays free. (mobile 2026-10-12) */
.net-stampcard{display:grid;grid-template-columns:minmax(0,132px) minmax(0,1fr);gap:.4rem 1rem;align-items:start;padding:.4rem 0 .2rem;overflow-x:clip}
.net-stampcard>*{min-width:0}
.net-stampwrap{color:var(--signal,#fc741f);width:132px;aspect-ratio:1;transform:rotate(-6deg)}
.net-stampsvg{width:100%;height:100%;display:block}
.net-stamp-t{display:grid;gap:.45rem}
.net-stamp-t>*{margin:0}
.net-big2{font-family:var(--f-label,'Bebas Neue',sans-serif);font-size:clamp(2.2rem,9vw,3rem);line-height:.95;letter-spacing:.03em;color:var(--white,#fbf9ff)}
.net-hot{color:var(--signal-text,var(--signal,#fc741f))!important;font-weight:700}
.net-stampcard.n-go .net-stampwrap{animation:netstamp .16s cubic-bezier(.3,0,.2,1) both}
.net-stampcard.n-go .net-stamp-t{animation:netthunk .34s .14s ease-out both}
.net-stampcard.n-go .net-big2{animation:netin .3s .1s cubic-bezier(.2,1.5,.4,1) both}
@keyframes netstamp{0%{transform:scale(2.3) rotate(-16deg);opacity:0}70%{opacity:1}100%{transform:scale(1) rotate(-6deg);opacity:1}}
@keyframes netthunk{0%{transform:translateY(3px)}40%{transform:translateY(-1px)}100%{transform:none}}
@keyframes netin{from{transform:scale(1.25);opacity:0}}
@media (max-width:420px){.net-stampcard{grid-template-columns:minmax(0,104px) minmax(0,1fr)}.net-stampwrap{width:104px}}
@media (max-width:380px){.net-stampcard{grid-template-columns:minmax(0,1fr);gap:.6rem}.net-stampwrap{width:92px;margin:.2rem 0 0 .2rem}}
@media (max-width:380px){.net-meta .net-mono{font-size:.75rem;letter-spacing:0}}
.net-nw{white-space:nowrap}
/* wide screens: the inline sign-up reads as one line (field + button), not a 1000px-wide field */
@media (min-width:761px){[data-net-week] .net-f,[data-net-pass] .net-f{grid-template-columns:minmax(0,1fr) auto;max-width:720px;align-items:start}[data-net-week] .net-f .net-e,[data-net-pass] .net-f .net-e{grid-row:1;grid-column:1}[data-net-week] .net-f .net-go,[data-net-pass] .net-f .net-go{grid-row:1;grid-column:2;width:auto;min-width:220px;padding-inline:1.6rem;min-height:56px}[data-net-week] .net-f .net-typo,[data-net-pass] .net-f .net-typo,[data-net-week] .net-f .net-alt,[data-net-pass] .net-f .net-alt,[data-net-week] .net-f .net-err,[data-net-pass] .net-f .net-err{grid-column:1/-1}[data-net-week] .net-f .net-alt,[data-net-pass] .net-f .net-alt{justify-self:start}}
.net-room{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0}
.net-room:empty{display:none}
.net-strip-s{font-size:1rem!important}
.net-lab{font-family:var(--f-label,'Bebas Neue',sans-serif);letter-spacing:.06em;font-size:1.15rem;color:var(--white,#fbf9ff)}
.net-row{display:flex;gap:.5rem;flex-wrap:wrap}
/* width:0 = no intrinsic min-content (width:auto kept ~307 px and pushed /door to 323 px at 320). The 9.5em basis is what
   the TONIGHT'S WORD placeholder needs; below that the button wraps, and its grow of 1 (vs 1000) makes it full width only
   when it sits on its own line (mobile 2026-10-12) */
.net-row .net-word{flex:1000 1 9.5em;width:0}
.net-row .btn{flex:1 0 auto;min-height:56px}
.net-door .net-mono{color:var(--mute,#bfb6cc)}
.net-claimslot.net{margin-top:1rem}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.net-stampcard.n-go *,.net-panel,.net-dot,.net-spin .net-disc,.net-turn .net-disc,.n-shake,.net-type.n-set{animation:none!important;transition:none!important}}