/* clearance.css — the invited door and its dossier, in the House system (Vesper, 3 Oct 2026).
   Visual layer only. clearance.html's module script is byte-identical to the one it replaced; every id, the
   hidden attribute on .st, .show on .err/.ok/.granted, .open on #dossier and .in on .rv still mean what
   they meant. Tokens come from system.css; nothing here defines a colour. */

/* ---- the gate: photo left, one form right (same shell as the in-game sign-in) ---- */
#gate.auth{align-items:stretch}
#gate .auth-form{max-width:640px;justify-content:center;gap:14px;padding-block:clamp(36px,4.5vh,56px) 16px}
#gate .brand{display:block}
.st[hidden]{display:none!important}
.st{display:flex;flex-direction:column;gap:var(--s-in)}
#gate .g-h{font-weight:900;font-size:clamp(36px,3.1vw,46px);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.g-h .o{color:inherit}
.g-sub{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-2);max-width:46ch}
.g-sub b{color:var(--ink);font-weight:600}
.topstamp .pip{width:8px;height:8px;border-radius:50%;background:var(--orange);display:inline-block;flex:none}

form.gatef{display:flex;flex-direction:column;gap:8px;margin-top:var(--s-in);max-width:520px}
.lab{font-weight:600;font-size:16px;display:block;margin-top:8px}
.lab:first-child{margin-top:0}
.gaterow{display:flex;gap:12px;align-items:stretch}
.gaterow .fld{flex:1;min-width:0}
.fld{width:100%;height:56px;padding:0 18px;border-radius:var(--r-sm);border:1.5px solid var(--line-strong);background:var(--card);color:var(--ink);font:400 17px Inter,sans-serif}
textarea.fld{height:auto;padding:14px 18px;line-height:1.5;resize:vertical;font-size:16px}
.fld::placeholder{color:var(--ink-2);opacity:1}
.fld[aria-invalid="true"]{border-color:var(--bad);border-width:2px}
.fld:focus{outline:3px solid var(--orange);outline-offset:1px;border-color:var(--ink)}
:root:not([data-theme="dark"]) .fld:focus{outline-color:var(--ink)}
.fld[readonly]{background:var(--sunken)}
.fld.code{font:500 22px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;height:64px}
.fld.code::placeholder{text-transform:none;letter-spacing:.04em;font-size:17px}

/* the one action */
.go{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:999px;border:2px solid transparent;background:var(--orange);color:var(--on-orange);font:700 16px/1 Inter,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}
.go:hover{filter:brightness(1.06)}
.go[disabled]{opacity:.55;cursor:not-allowed;filter:none}
a.go{display:inline-flex}
.gaterow .go{flex:none}

/* messages: said in the page's own voice, never colour alone */
.err,.ok{display:none;align-items:flex-start;gap:10px;font-size:16px;line-height:1.5;margin-top:4px;max-width:52ch}
.err.show,.ok.show{display:flex}
.err{color:var(--bad);font-weight:600}
.err::before,.ok::before{content:"";width:8px;height:8px;border-radius:50%;flex:none;margin-top:.55em;background:var(--bad)}
.err.info{color:var(--ink);font-weight:500}
.err.info::before{background:var(--ink-2)}
.ok{color:var(--ink)}
.ok::before{background:var(--good)}
.note{font-size:14px;line-height:1.45;color:var(--ink-2);max-width:50ch}

.links{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;margin-top:0}
#gate .aside-card{align-items:flex-start;max-width:520px;margin-top:4px}
#gate .aside-card p{font-size:16px;line-height:1.45}
.lnk{background:none;border:0;padding:0;font:600 16px/1.3 Inter,sans-serif;color:var(--ink);cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;min-height:44px;display:inline-flex;align-items:center;text-align:left}
.lnk--door{border:2px solid var(--ink);border-radius:999px;padding:8px 22px;text-decoration:none;font-weight:700;white-space:normal;text-align:center;text-wrap:balance;justify-content:center}
.lnk--door:hover{background:var(--sunken)}
.lnk--quiet{font-weight:500;color:var(--ink-2)}
.g-foot{font-size:14px;line-height:1.45;color:var(--ink-2);max-width:50ch}
.g-foot-link{color:var(--ink);font-size:14px;font-weight:600;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px;align-self:flex-start;margin-top:-8px}

/* ---- the dossier ---- */
#dossier{display:none;background:var(--ground);color:var(--ink)}
#dossier.open{display:block}
#dossier:focus{outline:none}
.gut{padding-inline:clamp(20px,5vw,72px)}
.wrap{max-width:1120px;margin-inline:auto;width:100%}
#dossier .gut:first-child{padding-top:88px}
.topstamp{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:20px;border-bottom:1.5px solid var(--line);font:500 15px Inter,sans-serif;color:var(--ink-2)}
.topstamp>span:first-child{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
#dossier section{padding-block:var(--s-sec)}
#dossier h1,#dossier h2{max-width:18ch;text-wrap:balance}
#dossier h1{font-size:clamp(28px,3.4vw,44px);line-height:1.04;letter-spacing:-.028em}
#dossier h1 .o,#dossier h2 .o{color:inherit}
.eyebrow{display:inline-flex;align-self:flex-start;margin-top:var(--s-in);padding:6px 14px;border-radius:999px;background:var(--sunken);color:var(--ink);font:600 14px/1.2 Inter,sans-serif}
.lede{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--ink-2);max-width:60ch;margin-top:var(--s-in)}
.lede b,.price-note b,.limits b{color:var(--ink);font-weight:600}

.ladder{display:flex;flex-direction:column;margin-top:var(--s-card)}
.rung{display:grid;grid-template-columns:clamp(64px,8vw,112px) minmax(0,1fr) minmax(0,1.35fr);gap:clamp(16px,3vw,40px);align-items:start;padding-block:28px;border-top:1.5px solid var(--line)}
.rung:last-child{border-bottom:1.5px solid var(--line)}
.rung .i{font:500 clamp(40px,6vw,72px)/.9 "JetBrains Mono",monospace;letter-spacing:-.05em;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rung .k{font-size:15px;color:var(--ink-2);font-weight:600}
.rung .t{font-weight:900;font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;line-height:1.1;margin-top:6px}
.rung .d{font-size:17px;line-height:1.55;color:var(--ink-2);padding-top:4px}

/* the one saturated block on the page */
.slab{background:var(--orange);color:var(--on-orange);border-radius:var(--r);margin-top:var(--s-card);overflow:hidden}
.slab-top{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:end;padding:clamp(28px,4vw,48px)}
.price{font:500 clamp(84px,11vw,150px)/.8 "JetBrains Mono",monospace;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.price .c{font-size:.5em;vertical-align:.2em;margin-right:.04em}
.price-note{font-size:18px;line-height:1.5;max-width:44ch;color:var(--on-orange)}
.price-note b{color:var(--on-orange);font-weight:700}
.slab-rows{border-top:1.5px solid rgba(20,22,27,.28);display:grid;grid-template-columns:repeat(3,1fr)}
.slab-rows div{padding:20px clamp(24px,3vw,40px);border-left:1.5px solid rgba(20,22,27,.28)}
.slab-rows div:first-child{border-left:0}
.slab-rows .k{font-size:15px;font-weight:500}
.slab-rows .v{font-weight:700;font-size:17px;margin-top:4px;line-height:1.35}
.limits{margin-top:var(--s-card);font-size:16px;line-height:1.55;color:var(--ink-2);max-width:62ch;padding:20px 24px;border-radius:var(--r-sm);background:var(--card);border:1px solid var(--line)}

.counter{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:var(--s-card)}
.counter[hidden]{display:none!important}
.counter .big{font:500 clamp(64px,9vw,120px)/.85 "JetBrains Mono",monospace;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.counter .of{font-size:16px;color:var(--ink-2);max-width:22ch;line-height:1.4}

.claim{padding-block:var(--s-sec)}
form.claimf{max-width:560px;margin-top:var(--s-card)}
.claimf .row{display:flex;flex-wrap:nowrap;gap:12px;align-items:stretch;margin-top:12px}
.claimf .row:first-child{margin-top:0}
.claimf .row .cf{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.claimf .row .cf .lab{margin-top:0}
.claimf .row .cf .fld{flex:none}
.consent{display:flex;align-items:flex-start;gap:12px;margin-top:18px;cursor:pointer;max-width:52ch;min-height:44px}
.consent input{flex:none;width:24px;height:24px;margin-top:0;accent-color:var(--ink);cursor:pointer}
.consent input:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.consent span{font-size:16px;line-height:1.5;color:var(--ink-2)}
.granted{display:none;padding:28px;border-radius:var(--r);background:var(--card);border:1px solid var(--line)}
.granted.show{display:block}
.granted:focus{outline:none}
.granted .k{font-size:16px;color:var(--ink-2);font-weight:600}
.qnum{display:flex;margin-top:8px}
.qnum .v{font:500 clamp(48px,8vw,96px)/.9 "JetBrains Mono",monospace;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.granted .sub{font-size:16px;color:var(--ink-2);margin-top:12px}
.shares{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.sbtn{display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;border:2px solid var(--ink);background:transparent;color:var(--ink);font:700 16px/1 Inter,sans-serif;text-decoration:none;cursor:pointer}
.sbtn:hover{background:var(--sunken)}
#dossier footer{padding-block:32px 56px;border-top:1.5px solid var(--line)}
.legal{font-size:14px;line-height:1.55;color:var(--ink-2);max-width:82ch;text-wrap:pretty}
.legal-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:8px;font-size:14px}
.legal-links a{color:var(--ink);font-weight:600;text-underline-offset:4px;display:inline-flex;align-items:center;min-height:44px}

.rv{opacity:.001;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

@media (max-width:900px){
  .rung{grid-template-columns:clamp(48px,12vw,72px) minmax(0,1fr);row-gap:10px}
  .rung .d{grid-column:2}
  .slab-top{grid-template-columns:1fr;align-items:start}
  .slab-rows{grid-template-columns:1fr}
  .slab-rows div{border-left:0;border-top:1.5px solid rgba(20,22,27,.28)}
  .slab-rows div:first-child{border-top:0}
  #gate .auth-form{padding-top:32px}
}
@media (max-width:640px){
  .gaterow,.claimf .row{flex-wrap:wrap}
  .gaterow .fld,.gaterow .go,.claimf .row .cf,.claimf .row .go{flex:1 1 100%}
  .gaterow .go{width:100%}
  .theme-float{top:8px;right:8px}
}

/* ⛔ CEO 2026-10-11: "this login page from the invite has wrong logo- should be white and orange not
   black and orange". system.css line 141 swaps the nav logos under .auth (it assumes auth surfaces
   are light), but this gate is data-theme="dark", so the swap served the black-PITCH light logo on a
   dark page. This gate is always dark — pin the dark-surface wordmark (white PITCH + orange NOIR). */
#gate.auth .logo-ondark{display:block}
#gate.auth .logo-onlight{display:none}