/* Review Atlas Enterprise: the signed-in pages (sign-in, Your Atlases, Orders) and the signed-in header the
   quote page borrows. Ported from the approved mockup (docs/superpowers/specs/2026-09-29-enterprise-mockup), on
   the site's tokens from theme-night.css (night, bone, gold, paper, panel, ink, muted, rule).

   Everything is scoped: the header under .ent-header, the pages under body.ent. The quote page loads this file
   for its header, so no rule here reaches anything else on that page. Class names inside .ent avoid the site's
   element selectors (header, nav, footer, dialog), which style.css styles globally.

   Widths: the mockup's desktop, then two steps it did not draw (1200px drops the address from the header,
   980px stacks the page into one column and moves the nav to its own row), then the phone at 700px. */

/* ---- The signed-in header ------------------------------------------ */
.ent-header{display:block;position:relative;z-index:10;margin:0;padding:0;border:0;background:var(--night);color:var(--bone);font:16px/1.4 var(--font-sans);letter-spacing:0;text-transform:none}
.ent-header .ent-in{max-width:1320px;margin:0 auto;padding:0 48px;height:92px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.ent-header .ent-wordmark{display:flex;align-items:center;min-height:44px;gap:12px;font:500 30px/1 var(--font-sans);letter-spacing:-.035em;color:var(--bone);text-decoration:none;white-space:nowrap;min-width:0}
.ent-header .ent-wordmark img{width:34px;height:34px;display:block;flex:none}
.ent-header .ent-tier{font-size:24px;font-weight:300;letter-spacing:-.02em;color:var(--gold-soft);padding-left:14px;margin-left:2px;border-left:1px solid rgba(236,237,240,.25);line-height:1}
.ent-header .ent-nav{display:flex;align-items:center;gap:26px;margin:0;padding:0;font:500 16px/1.4 var(--font-sans);letter-spacing:0;text-transform:none}
.ent-header .ent-nav>a,.ent-header .ent-subnav>a{color:var(--bone-soft);text-decoration:none;white-space:nowrap}
.ent-header .ent-nav>a:hover,.ent-header .ent-subnav>a:hover{color:var(--bone)}
.ent-header .ent-nav>a[aria-current]{color:var(--bone);box-shadow:0 2px 0 var(--gold);padding-bottom:3px}
.ent-header .ent-who{display:flex;align-items:center;gap:12px;padding-left:24px;border-left:1px solid rgba(236,237,240,.18);font-size:15px;font-weight:400;color:var(--bone-mute)}
.ent-header .ent-addr{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ent-header .ent-out{appearance:none;display:inline-flex;align-items:center;background:none;border:0;border-radius:0;margin:0;padding:0;min-height:44px;font:inherit;font-size:15px;color:var(--bone);text-decoration:underline;text-decoration-color:rgba(236,237,240,.35);text-underline-offset:4px;cursor:pointer;white-space:nowrap;opacity:1}
.ent-header .ent-out:hover{text-decoration-color:var(--bone)}
.ent-header .ent-subnav{display:none}
.ent-header :focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px}
.ent-header .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---- The page -------------------------------------------------------- */
body.ent{background:var(--paper);color:var(--ink);font:16px/1.55 var(--font-sans);-webkit-text-size-adjust:100%}
.ent main{display:block}
.ent p,.ent li,.ent td,.ent dd,.ent small{text-wrap:pretty}
.ent h1,.ent h2,.ent h3,.ent h4{font-family:var(--font-sans);font-variation-settings:normal;text-wrap:balance;letter-spacing:-.02em;color:var(--ink)}
.ent a{color:inherit}
.ent :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.ent .num{font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ent .nw{white-space:nowrap}
.ent .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ent .wrap{max-width:1320px;margin:0 auto;padding:0 48px}
.ent .head{padding:52px 0 34px}
.ent .head h1{font-size:56px;line-height:1.02;font-weight:300;letter-spacing:-.035em;margin:0}
.ent .head p{margin:14px 0 0;font-size:18px;color:var(--muted);max-width:640px}
.ent .notice{display:flex;gap:10px;align-items:flex-start;margin:18px 0 0;max-width:640px;background:#f6ecd0;border-radius:2px;padding:12px 14px;font-size:16px;color:var(--ink)}
.ent .notice::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--gold);margin-top:8px}
.ent .notice:empty{display:none}
.ent .loading{padding:40px 0 120px;font-size:18px;color:var(--muted)}
.ent .failed{padding:10px 0 120px;max-width:560px}
.ent .failed p{font-size:18px;margin:0 0 18px}

/* the games: a scrolling row of tabs with cover art, joined to the sheet below */
.ent .tabbar{display:flex;align-items:flex-end;gap:18px;box-shadow:inset 0 -1px 0 var(--rule)}
.ent .tabwrap{position:relative;flex:1;min-width:0}
.ent .tabs{display:flex;gap:10px;align-items:flex-end;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;scroll-behavior:smooth;padding-top:4px;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
.ent .tabs::-webkit-scrollbar{display:none}
.ent .tabwrap.fl .tabs{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 72px);mask-image:linear-gradient(90deg,transparent 0,#000 72px)}
.ent .tabwrap.fr .tabs{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 72px),transparent 100%)}
.ent .tabwrap.fl.fr .tabs{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 72px,#000 calc(100% - 72px),transparent 100%)}
.ent .arrow{position:absolute;top:58px;z-index:3;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--rule);background:#fff;color:var(--ink);display:none;place-items:center;box-shadow:0 6px 18px rgba(11,15,26,.16);cursor:pointer}
.ent .arrow svg{width:18px;height:18px}
.ent .arrow:hover{border-color:var(--ink)}
.ent .arrow.l{left:-6px}.ent .arrow.r{right:-6px}
.ent .tabwrap.fl .arrow.l,.ent .tabwrap.fr .arrow.r{display:grid}
.ent .count{position:absolute;right:0;top:-30px;font-size:15px;color:var(--muted)}
.ent .tab{appearance:none;margin:0;font:inherit;color:inherit;text-align:left;background:transparent;box-sizing:border-box;cursor:pointer;width:272px;flex:none;border:1px solid transparent;border-bottom:0;border-radius:4px 4px 0 0;padding:10px 10px 16px;position:relative;opacity:.72;transition:opacity .15s,background .15s;scroll-snap-align:start}
.ent .tab:hover{opacity:1;background:rgba(251,249,243,.55)}
.ent .tab:focus-visible{outline-offset:-3px;opacity:1}
.ent .tab .art>img,.ent .pair img{display:block;width:100%;height:auto;aspect-ratio:460/215;object-fit:cover;border-radius:2px;filter:saturate(.55);background:var(--paper-2)}
.ent .tab:hover img,.ent .tab[aria-selected=true] img{filter:none}
.ent .art{display:block}
.ent .pair{display:grid;grid-template-columns:1fr 1fr;gap:3px;position:relative;border-radius:2px;overflow:hidden}
.ent .tab .art.pair>img{aspect-ratio:230/215;border-radius:0}
.ent .pair em{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;border-radius:50%;background:var(--night);color:var(--bone);display:grid;place-items:center;font:600 13px var(--font-sans);font-style:normal;box-shadow:0 0 0 3px var(--panel)}
/* When Steam's art does not load: a plain panel with the name, the same size */
.ent .noart{display:flex;align-items:flex-end;width:100%;aspect-ratio:460/215;padding:12px 14px;border-radius:2px;background:var(--night);color:var(--bone);font:500 17px/1.2 var(--font-sans);letter-spacing:-.01em;overflow:hidden}
.ent .pair .noart{aspect-ratio:230/215;border-radius:0;font-size:14px;padding:10px}
.ent .tab strong{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:12px 4px 0;min-height:48px;text-wrap:balance}
.ent .tab dl{margin:6px 4px 0;display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:15px}
.ent .tab dt{color:var(--muted)}
.ent .tab dd{margin:0;color:var(--ink-soft)}
.ent .tab[aria-selected=true]{opacity:1;background:var(--panel);border-color:var(--rule);cursor:default}
.ent .tab[aria-selected=true]::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:4px;background:var(--gold);border-radius:4px 4px 0 0}
.ent .status{display:inline-flex;align-items:flex-start;gap:7px;font-weight:600;color:var(--ink)}
.ent .status i{flex:none;width:8px;height:8px;margin-top:calc(.775em - 4px);border-radius:50%;background:var(--gold);animation:ent-pulse 1.6s infinite}
.ent .status.issue i{background:var(--complaint);animation:none}
@keyframes ent-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.ent .addtab{box-sizing:border-box;cursor:pointer;flex:none;align-self:center;margin:0 0 16px;display:flex;align-items:center;gap:14px;padding:14px 18px;border:1.5px dashed var(--rule);border-radius:3px;width:250px;color:var(--ink);text-decoration:none}
.ent .addtab:hover{border-color:var(--ink)}
.ent .addtab .plus{flex:none;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;font-size:22px;line-height:1}
.ent .addtab strong{display:block;font-size:16px;font-weight:600;line-height:1.3}
.ent .addtab small{display:block;font-size:14px;color:var(--muted);margin-top:2px}
.ent .addtab small.deal{color:var(--gold-text);font-weight:600}
.ent .sheet{background:var(--panel);border:1px solid var(--rule);border-top:0;border-radius:0 0 4px 4px;padding:40px 44px 56px;margin-bottom:72px}

/* the chosen game */
.ent .game{display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:52px;align-items:start}
.ent .game-title{display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap;margin:0 0 26px}
.ent .game-title h2{font-size:40px;font-weight:500;margin:0;letter-spacing:-.03em;line-height:1.1}
.ent .game-title a,.ent .game-title span{font-size:15px;color:var(--muted)}
.ent .game-title a{text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px}
.ent .game-title a:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* progress */
.ent .progress{background:var(--night);color:var(--bone);border-radius:3px;padding:28px 32px 30px;margin-bottom:40px}
.ent .p-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:28px}
.ent .progress h3{margin:0;font-size:24px;font-weight:500;color:var(--bone)}
.ent .p-head>div:first-child{flex:1 1 320px;min-width:0}
.ent .p-head p{margin:4px 0 0;color:var(--bone-mute);font-size:15px}
.ent .due{text-align:right}
.ent .due span{display:block;font-size:14px;color:var(--bone-mute)}
.ent .due strong{display:block;font-size:22px;font-weight:500;color:var(--gold-soft);letter-spacing:-.01em}
.ent .track{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr)}
.ent .track li{position:relative;padding-top:34px;padding-right:10px}
.ent .track li::before{content:"";position:absolute;top:10px;left:0;right:0;height:2px;background:rgba(236,237,240,.18)}
.ent .track li.done::before{background:var(--gold)}
.ent .track li.now::before{background:linear-gradient(90deg,var(--gold) 0 50%,rgba(236,237,240,.18) 50%)}
.ent .track li:last-child::before{right:auto;width:22px}
.ent .dot{position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;background:var(--night);border:2px solid rgba(236,237,240,.35);display:grid;place-items:center}
.ent .done .dot{background:var(--gold);border-color:var(--gold)}
.ent .done .dot::after{content:"";width:9px;height:5px;border:2px solid var(--night);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.ent .now .dot{border-color:var(--gold);box-shadow:0 0 0 6px rgba(212,160,18,.18)}
.ent .now .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--gold);animation:ent-pulse 1.6s infinite}
.ent .track b{display:block;font-weight:500;font-size:16px;line-height:1.3;color:var(--bone)}
.ent .track li.todo b{color:var(--bone-mute);font-weight:400}
.ent .track small{display:block;margin-top:4px;font-size:13px;color:var(--bone-mute)}
.ent .now small{color:var(--gold-soft)}
.ent .issue-box{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--rule);border-left:4px solid var(--complaint);border-radius:3px;padding:22px 24px;margin-bottom:40px}
.ent .issue-box .ic{flex:none;width:28px;height:28px;border-radius:50%;background:var(--complaint);color:#fff;display:grid;place-items:center;font-weight:700;font-size:15px}
.ent .issue-box p{margin:0;font-size:18px}
.ent .issue-box small{display:block;margin-top:6px;font-size:15px;color:var(--muted)}

/* every version */
.ent .sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 6px}
.ent .sec-h h3{font-size:26px;font-weight:500;margin:0}
.ent .sec-h span{font-size:15px;color:var(--muted)}
.ent .versions{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.ent .v{border-bottom:1px solid var(--rule)}
.ent .v-row{display:grid;grid-template-columns:190px minmax(0,1fr) auto;gap:24px;align-items:center;padding:22px 0}
.ent .v-date strong{display:block;font-size:20px;font-weight:500;letter-spacing:-.015em}
.ent .v-date span{display:block;font-size:15px;color:var(--muted)}
.ent .v-figs{display:flex;gap:12px 32px;flex-wrap:wrap}
.ent .fig strong{display:block;font-size:22px;font-weight:400;line-height:1.2}
.ent .fig span{display:block;font-size:14px;color:var(--muted)}
.ent .empty{padding:34px 0 10px;margin:0;font-size:18px;color:var(--ink-soft);max-width:560px}
.ent .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 20px;margin:0;border-radius:2px;font:600 15px/1 var(--font-sans);letter-spacing:0;text-transform:none;text-decoration:none;border:1px solid var(--ink);background:transparent;color:var(--ink);white-space:nowrap;cursor:pointer}
.ent .btn:hover{background:var(--ink);color:var(--paper)}
.ent .btn.gold{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.ent .btn.gold:hover{background:#c4930d;border-color:#c4930d;color:var(--ink)}
.ent .btn.wide{width:100%;height:54px;font-size:16px}
.ent .btn:disabled{opacity:.6;cursor:default}
.ent .btn svg{width:16px;height:16px;flex:none}
.ent .v.latest .v-row{padding-top:26px}
.ent .v.latest .v-date strong{font-size:24px}
.ent .v-more{padding:0 0 28px 214px;display:grid;gap:22px}
.ent .v-more:focus,.ent .progress h3:focus{outline:none}
.ent .changes h4,.ent .note h4{margin:0 0 10px;font-size:16px;font-weight:600;letter-spacing:0}
.ent .rec{font-size:17px;margin:0 0 16px}
.ent .rec:last-child{margin-bottom:0}
.ent .rec b{font-weight:600}
.ent .moves{width:100%;border-collapse:collapse;font-size:16px}
.ent .moves th{text-align:right;font-weight:500;font-size:13px;color:var(--muted);padding:0 0 8px 18px;vertical-align:bottom}
.ent .moves th:first-child{text-align:left;padding-left:0}
.ent .moves td{padding:9px 0 9px 18px;border-top:1px solid var(--rule-soft);text-align:right;white-space:nowrap}
.ent .moves td:first-child{text-align:left;padding-left:0;white-space:normal}
.ent .added{font-size:16px;margin:14px 0 0}
.ent .added b{font-weight:600}
.ent .note{background:var(--paper);border-left:3px solid var(--gold);padding:16px 20px;border-radius:0 3px 3px 0}
.ent .note p{margin:0;font-size:17px}
.ent .v-meta{font-size:14px;color:var(--muted)}
.ent .toggle{appearance:none;background:none;border:0;border-radius:0;margin:0;padding:0;font:inherit;cursor:pointer;font-size:15px;color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:4px;display:inline-block;justify-self:start}
.ent .toggle:hover{color:var(--ink);text-decoration-color:var(--ink)}
.ent .v-show{padding:0 0 18px 214px}

/* the right column */
.ent .side{display:grid;gap:18px;position:sticky;top:24px}
.ent .panel{background:var(--paper-2);border-top:2px solid var(--ink);padding:26px 28px 28px}
.ent .panel h3{margin:0;font-size:22px;font-weight:500}
.ent .bal{display:flex;align-items:baseline;gap:12px;margin:14px 0 2px}
.ent .bal strong{font-size:64px;font-weight:300;line-height:1;letter-spacing:-.04em}
.ent .bal span{font-size:17px;color:var(--ink-soft)}
.ent .bal.none strong{font-size:32px;font-weight:400;letter-spacing:-.02em}
.ent .panel p.sub{margin:0 0 20px;font-size:15px;color:var(--muted)}
.ent .perk{display:flex;gap:10px;align-items:baseline;margin:-6px 0 20px;font-size:15px;color:var(--ink-soft)}
.ent .perk b{font-weight:600;color:var(--gold-text);white-space:nowrap}
.ent .panel .by{margin:10px 0 0;font-size:15px;color:var(--ink-soft);text-align:center}
.ent .panel .by b{font-weight:600;white-space:nowrap}
.ent .state-box{background:#fff;border:1px solid var(--rule);padding:16px 18px;border-radius:2px;font-size:16px}
.ent .state-box p{margin:0}
.ent .state-box b{font-weight:600}
.ent .more{margin-top:18px;text-align:center}
.ent .more .toggle{min-height:44px}
.ent .buy h4{margin:0 0 12px;font-size:17px;font-weight:600;letter-spacing:0}
.ent .opts{display:grid;gap:10px;margin:0;padding:0;border:0;min-width:0}
.ent .opt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;background:#fff;border:1px solid var(--rule);border-radius:2px;padding:14px 16px;cursor:pointer}
.ent .opt:hover{border-color:var(--ink)}
.ent .opt.best{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ent .opt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.ent .opt input{accent-color:var(--ink);width:18px;height:18px;margin:0}
.ent .opt strong{display:block;font-size:17px;font-weight:600}
.ent .opt small{display:block;font-size:14px;color:var(--muted)}
.ent .opt .price{text-align:right}
.ent .opt .price b{display:block;font-size:24px;font-weight:400;letter-spacing:-.02em}
.ent .opt .price s{font-size:14px;color:var(--muted)}
.ent .save{display:inline-block;background:var(--gold);color:var(--ink);font-size:13px;font-weight:700;padding:2px 8px;border-radius:2px;margin-top:3px;white-space:nowrap}
.ent .tax{font-size:13px;color:var(--muted);margin:10px 0 0}
.ent .also{font-size:15px;color:var(--ink-soft);margin:12px 0 0}
.ent .also b{font-weight:600}
.ent .say{font-size:15px;margin:10px 0 0;color:var(--complaint)}
.ent .say:empty{display:none}
.ent .promise{font-size:14px;color:var(--muted);margin:20px 0 0;padding-top:16px;border-top:1px solid var(--rule)}
.ent .promise b{font-weight:600;color:var(--ink-soft)}
.ent .panel.light{background:#fff;border:1px solid var(--rule)}
.ent .lnk{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;font-weight:500}
.ent button.lnk{appearance:none;background:none;border:0;border-radius:0;margin:0;padding:0;font:inherit;font-weight:500;cursor:pointer}
.ent .support p{margin:8px 0 0;font-size:16px}
.ent .support small{display:block;margin-top:6px;font-size:14px;color:var(--muted)}

/* the confirm box */
.ent .scrim{position:fixed;inset:0;background:rgba(11,15,26,.55);z-index:40;display:flex;justify-content:center;align-items:flex-start;padding:18vh 16px 16px;overflow-y:auto}
.ent .modal{background:var(--panel);width:100%;max-width:500px;border-radius:4px;border-top:4px solid var(--gold);padding:30px 32px 28px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.ent .modal:focus{outline:none}
.ent .modal h3{margin:0 0 12px;font-size:26px;font-weight:500;line-height:1.2}
.ent .modal p{margin:0 0 14px;font-size:17px;color:var(--ink-soft)}
.ent .modal p b{font-weight:600;color:var(--ink)}
.ent .modal .row{display:flex;gap:10px;margin-top:22px}
.ent .modal .row .btn{flex:1}

/* orders */
.ent .two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:56px;align-items:start;padding-bottom:80px}
.ent .orders{width:100%;border-collapse:collapse;font-size:16px;border-top:2px solid var(--ink)}
.ent .orders th{text-align:left;font-weight:500;font-size:14px;color:var(--muted);padding:14px 16px 10px 0}
.ent .orders td{padding:16px 16px 16px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.ent .orders td:last-child,.ent .orders th:last-child{padding-right:0}
.ent .orders td.amt,.ent .orders th.amt{text-align:right}
.ent .orders td small{display:block;color:var(--muted);font-size:14px}
.ent .orders td b{font-weight:600}
.ent .orders td.by,.ent .orders small{overflow-wrap:break-word}
.ent .orders.ledger{font-size:15px;margin-top:4px}
.ent .orders.ledger td:first-child{width:1%;white-space:nowrap}
.ent .tag{display:inline-block;font-size:13px;font-weight:600;padding:1px 8px;border-radius:2px;background:#efe2d9;color:var(--complaint);margin-left:8px;white-space:nowrap}
.ent .tag.g{background:#f6ecd0;color:var(--gold-text)}
.ent .ledger-sum{display:flex;gap:48px;margin:18px 0 22px}
.ent .ledger-sum strong{display:block;font-size:40px;font-weight:300;letter-spacing:-.03em;line-height:1.1}
.ent .ledger-sum span{font-size:15px;color:var(--muted)}
.ent .none-yet{padding:22px 0;margin:0;border-top:2px solid var(--ink);font-size:17px;color:var(--ink-soft)}

/* sign in */
.ent .signin{max-width:480px;margin:72px auto 120px;padding:0 20px}
.ent .signin .card{background:#fff;border-radius:3px;padding:40px 36px;border-top:3px solid var(--gold)}
.ent .signin h1{font-size:38px;font-weight:400;letter-spacing:-.03em;margin:0 0 10px;line-height:1.1}
.ent .signin form{margin:0}
.ent .signin .lead{color:var(--muted);margin:0 0 24px;font-size:17px}
.ent .signin .lead b{color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.ent .field label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.ent .field input{width:100%;height:52px;border:1px solid var(--rule);border-radius:2px;padding:0 16px;font:17px var(--font-sans);background:var(--paper);color:var(--ink)}
.ent .field input:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);outline:none}
.ent .code-label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.ent .code{display:flex;gap:10px;margin:0 0 22px}
.ent .code input{width:100%;min-width:0;height:60px;padding:0;text-align:center;font:500 26px var(--font-sans);font-variant-numeric:tabular-nums;border:1px solid var(--rule);border-radius:2px;background:var(--paper);color:var(--ink)}
/* The code in halves, as the email shows it: 4173 0297. */
.ent .code input:nth-child(5){margin-left:10px}
.ent .code input:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);outline:none}
.ent .code[aria-invalid=true] input{border-color:var(--complaint)}
.ent .signin .btn.wide{margin-top:16px}
.ent .code+.btn.wide{margin-top:0}
.ent .err{margin:14px 0 0;font-size:15px;color:var(--complaint)}
.ent .err:empty{display:none}
.ent .err .lnk{color:var(--ink)}
.ent .ok{margin:14px 0 0;font-size:15px;color:var(--ink-soft)}
.ent .ok:empty{display:none}
.ent .fine{font-size:14px;color:var(--muted);margin:18px 0 0}
.ent .after{font-size:15px;color:var(--muted);text-align:center;margin-top:22px}
.ent .after a{color:var(--ink)}

/* footer */
.ent .ent-foot{display:block;margin:0;padding:28px 0 40px;border-top:1px solid var(--rule);font-size:14px;color:var(--muted)}
.ent .ent-foot .wrap{display:flex;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.ent .ent-foot span{font-size:14px;color:var(--muted)}
.ent .ent-foot a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--rule);text-underline-offset:3px}
.ent .ent-foot a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){.ent .status i,.ent .now .dot::after{animation:none}.ent .tabs{scroll-behavior:auto}}

/* ---- Narrower desktops: the address leaves the header, the side column narrows ---- */
@media (max-width:1200px){
 .ent-header .ent-addr{display:none}
 .ent-header .ent-who{padding-left:20px}
 .ent-header .ent-in{padding:0 32px}
 .ent .wrap{padding:0 32px}
 .ent .sheet{padding:36px 32px 48px}
 .ent .game{grid-template-columns:minmax(0,1fr) 340px;gap:36px}
 .ent .v-row{grid-template-columns:160px minmax(0,1fr) auto;gap:20px}
 .ent .v-more,.ent .v-show{padding-left:180px}
 .ent .two{grid-template-columns:minmax(0,1fr);gap:40px}
 .ent .two>.panel{max-width:560px}
}

/* ---- One column: the nav gets its own row; the credits come before the versions, support last ---- */
@media (max-width:980px){
 .ent-header .ent-nav>a{display:none}
 .ent-header .ent-nav.solo>a{display:inline-flex;align-items:center;min-height:44px}
 .ent-header .ent-who{border:0;padding:0}
 .ent-header .ent-subnav{display:flex;gap:22px;overflow-x:auto;padding:0 32px;background:var(--night);border-top:1px solid rgba(236,237,240,.1);scrollbar-width:none}
 .ent-header .ent-subnav::-webkit-scrollbar{display:none}
 .ent-header .ent-subnav>a{display:block;padding:12px 0;line-height:22px;font-size:15px;font-weight:500}
 .ent-header .ent-subnav>a[aria-current]{color:var(--bone);box-shadow:inset 0 -2px 0 var(--gold)}
 .ent .game{grid-template-columns:minmax(0,1fr);gap:28px}
 .ent .side,.ent .main{display:contents}
 .ent .game-title{order:-4;margin:0}
 .ent .main>.progress,.ent .main>.issue-box{order:-3;margin:0}
 .ent .side>.panel{order:-2}
 .ent .side>.support{order:5}
 .ent .two>.panel{max-width:none}
}

/* ---- Phone ---------------------------------------------------------- */
@media (max-width:700px){
 .ent-header .ent-in{height:64px;padding:0 16px;gap:12px}
 .ent-header .ent-wordmark{font-size:22px;gap:8px}
 .ent-header .ent-wordmark img{width:26px;height:26px}
 .ent-header .ent-tier{font-size:18px;padding-left:9px}
 .ent-header .ent-who{font-size:14px}
 .ent-header .ent-out,.ent-header .ent-nav.solo>a{font-size:14px}
 .ent-header .ent-subnav{padding:0 16px;gap:14px;justify-content:space-between;overflow:visible}
 .ent .wrap{padding:0 16px}
 .ent .head{padding:28px 0 18px}
 .ent .head h1{font-size:36px}
 .ent .head p{font-size:16px}
 .ent .notice{font-size:15px}
 .ent .tabbar{flex-wrap:wrap;gap:12px;margin:0 -16px;padding:0}
 .ent .addtab{order:-1;width:auto;flex:1 1 100%;margin:0 16px;padding:10px 14px;min-height:56px}
 .ent .addtab .plus{width:30px;height:30px;font-size:18px}
 .ent .addtab strong{font-size:15px}
 .ent .tabwrap{flex:1 1 100%}
 .ent .tabs{padding-left:16px;padding-right:16px;scroll-padding:0 16px}
 .ent .arrow{display:none !important}
 .ent .count{display:none}
 .ent .tab{width:200px;padding:8px 8px 12px}
 .ent .tab strong{font-size:16px;margin-top:8px;min-height:39px}
 .ent .tab dl{font-size:13px;gap:2px 8px}
 .ent .noart{font-size:14px;padding:10px}
 .ent .sheet{margin:0 -16px 40px;border-left:0;border-right:0;border-radius:0;padding:24px 16px 36px}
 .ent .game{gap:24px}
 .ent .game-title h2{font-size:30px}
 .ent .progress{padding:22px 18px}
 .ent .p-head{margin-bottom:18px}
 .ent .due{text-align:left}
 .ent .track{grid-template-columns:1fr}
 .ent .track li{padding:0 0 18px 38px}
 .ent .track li::before{top:22px;bottom:-2px;left:10px;right:auto;width:2px;height:auto}
 .ent .track li.now::before{background:rgba(236,237,240,.18)}
 .ent .track li:last-child::before{display:none}
 .ent .track li:last-child{padding-bottom:0}
 .ent .issue-box{padding:18px}
 .ent .issue-box p{font-size:17px}
 .ent .issue-box small .lnk{padding:12px 0}
 .ent .panel{padding:22px 18px 24px}
 .ent .bal strong{font-size:52px}
 .ent .sec-h h3{font-size:24px}
 .ent .v-row{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;padding:18px 0}
 .ent .v.latest .v-row{padding-top:20px}
 .ent .v.latest .v-date strong{font-size:22px}
 .ent .v-figs{grid-column:1/-1;gap:10px 22px}
 .ent .v-row .btn{grid-row:1;grid-column:2;height:44px;padding:0 14px}
 .ent .v-more,.ent .v-show{padding-left:0}
 .ent .v-show .toggle,.ent .v-more .toggle{min-height:44px}
 .ent .fig strong{font-size:19px}
 .ent .moves{font-size:15px}
 .ent .moves th,.ent .moves td{padding-left:10px}
 .ent .moves th{white-space:normal}
 .ent .moves th:not(:first-child){width:1%}
 .ent .opt{gap:12px;padding:12px 14px}
 .ent .opt .price b{font-size:21px}
 .ent .two{padding-bottom:56px}
 /* each purchase becomes a card: date, then what and the amount, then who bought it and the receipt */
 .ent .orders.buys thead{display:none}
 .ent .orders.buys tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--rule)}
 .ent .orders.buys td{border:0;padding:0}
 .ent .orders.buys td.when{grid-column:1/-1;grid-row:1;font-size:14px;color:var(--muted)}
 .ent .orders.buys td.what{grid-column:1;grid-row:2}
 .ent .orders.buys td.amt{grid-column:2;grid-row:2}
 .ent .orders.buys td.by{grid-column:1;grid-row:3;align-self:center;font-size:14px;color:var(--muted)}
 .ent .orders.buys td.rc{grid-column:2;grid-row:3;text-align:right}
 .ent .orders.buys td.rc:empty{display:none}
 .ent .orders.buys td.rc .lnk{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
 .ent .orders.ledger td{padding:12px 12px 12px 0}
 .ent .ledger-sum{gap:26px}
 .ent .ledger-sum strong{font-size:32px}
 .ent .scrim{padding-top:12vh}
 .ent .modal{padding:24px 20px}
 .ent .modal h3{font-size:22px}
 .ent .modal .row{flex-direction:column}
 .ent .modal .row .btn{flex:none;width:100%}
 .ent .game-title a{display:inline-block;padding:11px 0;margin:-11px 0}
 .ent .signin{margin:36px auto 60px;padding:0 16px}
 .ent .signin .card{padding:28px 20px}
 .ent .signin h1{font-size:30px}
 .ent .code{gap:6px}
 .ent .code input{height:54px;font-size:22px}
 .ent .fine .lnk,.ent .err .lnk{display:inline-block;padding:10px 0;margin:-10px 0}
}
/* The four links share one row on the narrowest phones rather than scroll */
@media (max-width:400px){.ent-header .ent-subnav>a{font-size:14px}}
@media (max-width:374px){.ent-header .ent-subnav .ent-your{display:none}}