/* ============================================================================
   Beta mode — the email gate, and the treatment for everything not open yet.

   Two pieces, used across every page:

   .beta-gate   the capture block itself. One per page, at the point where the
                open part of the page runs out.
   .locked      a wrapper that puts unfinished work behind frosted glass. You can
                see the shape of it and read the headline; you can't use it, and
                nothing inside is focusable or clickable.

   The rule from the roadmap still holds: never a control that looks live and
   does nothing. Locked things look locked.
   ========================================================================== */

/* --- the gate ------------------------------------------------------------- */
.beta-gate{
  position:relative;margin:34px 0 0;background:var(--panel);border:1px solid var(--shadow);
  box-shadow:var(--raise-lg);overflow:hidden}
.beta-gate__tape{height:7px;background:repeating-linear-gradient(45deg,var(--accent) 0 12px,#14161f 12px 24px);
  border-bottom:1px solid var(--sink)}
.beta-gate__body{padding:20px clamp(16px,3vw,28px) 22px}
.beta-gate__eyebrow{display:inline-block;margin:0 0 10px;font-family:var(--mono);font-weight:700;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);
  background:rgba(47,157,148,.1);border:1px solid var(--accent);padding:5px 10px;box-shadow:2px 2px 0 var(--sink)}
.beta-gate h2,.beta-gate .beta-gate__h{font-family:var(--display);font-weight:800;
  font-size:clamp(1.5rem,4vw,2.1rem);line-height:1.02;margin:0 0 9px;color:var(--ink);
  text-shadow:1px 1px 0 var(--shadow);text-wrap:balance}
.beta-gate h2 em{font-style:normal;color:var(--accent)}
.beta-gate p{margin:0 0 14px;max-width:60ch;font-size:.95rem;line-height:1.6;color:var(--ink2)}
.beta-gate p b{color:var(--ink);font-weight:400}

.beta-form{display:flex;flex-wrap:wrap;gap:9px;align-items:stretch;margin:0 0 9px}
.beta-form input[type=email]{flex:1 1 250px;min-width:0;font-family:var(--serif);font-size:1rem;
  color:var(--ink);background:var(--sink);border:1px solid var(--shadow);box-shadow:var(--well);
  padding:11px 12px;min-height:46px}
.beta-form input[type=email]::placeholder{color:var(--muted)}
.beta-form input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px}
.beta-form input[type=email][aria-invalid=true]{border-color:var(--mark);outline-color:var(--mark)}
.beta-form button{flex:0 0 auto;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:#04140a;background:var(--accent);
  border:1px solid var(--shadow);box-shadow:var(--raise);padding:0 18px;min-height:46px;cursor:pointer;
  transition:transform .1s,box-shadow .1s,filter .1s}
.beta-form button:hover{filter:brightness(1.08);transform:translate(-1px,-1px)}
.beta-form button:active{box-shadow:var(--well);transform:translate(2px,2px)}
/* the honeypot: a real person never fills this in */
.beta-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* The one reason to hand over an address before there is anything to send yet:
   the order is kept, and being early will mean something. Written as intent, not
   as a feature that already works -- there is no list to be numbered on until
   ENDPOINT is set, and the honesty rule does not bend for a signup box. */
.beta-early{display:flex;align-items:baseline;gap:9px;margin:0 0 13px!important;
  font-family:var(--mono);font-size:.66rem;line-height:1.6;color:var(--ink2);max-width:56ch}
.beta-early b{flex:0 0 auto;font-size:.56rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#fbe4b0;background:#3a2a08;border:1px solid var(--hit);
  padding:2px 7px;box-shadow:var(--lamp);text-shadow:0 0 6px var(--hit)}
.beta-gate.is-done .beta-early{display:none}

.beta-fine{margin:0!important;font-family:var(--mono);font-size:.62rem;line-height:1.6;color:var(--muted)}
.beta-msg{margin:0 0 10px!important;font-family:var(--mono);font-size:.7rem;line-height:1.5}
.beta-msg[hidden]{display:none}
.beta-msg.ok{color:var(--accent)}
.beta-msg.bad{color:var(--mark)}

/* once they're on the list the form is replaced rather than left sitting there */
.beta-done{display:none;align-items:flex-start;gap:11px}
.beta-gate.is-done .beta-form,.beta-gate.is-done .beta-fine{display:none}
.beta-gate.is-done .beta-done{display:flex}
.beta-done .tick{flex:0 0 auto;width:22px;height:22px;background:var(--accent);color:#04140a;
  font-family:var(--mono);font-weight:700;font-size:.8rem;display:flex;align-items:center;
  justify-content:center;box-shadow:2px 2px 0 var(--sink)}
.beta-done p{margin:0!important;font-size:.9rem;color:var(--ink2)}

/* --- what's coming, listed plainly so the gate isn't asking for nothing ---- */
.beta-queue{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 15px;padding:0;list-style:none}
.beta-queue li{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink2);background:var(--sink);box-shadow:var(--well);padding:5px 9px}
.beta-queue li b{color:var(--hit);font-weight:700}

/* --- locked content -------------------------------------------------------- */
.locked{position:relative;isolation:isolate}
.locked>.locked-in{filter:blur(5px) saturate(.5) brightness(.72);pointer-events:none;user-select:none}
.locked::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(11,13,26,0) 0%,rgba(11,13,26,.55) 62%,rgba(11,13,26,.92) 100%)}
.locked-tag{position:absolute;z-index:2;left:50%;top:34px;transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  font-family:var(--mono);font-weight:700;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:#fbe4b0;background:#3a2a08;border:1px solid var(--hit);box-shadow:var(--lamp);padding:7px 12px}
.locked-tag svg{display:block}
/* a long locked run (the idea board) shows the top of itself and stops, so the
   gate isn't 600px further down the page than the thing it is gating */
.locked.clip>.locked-in{max-height:280px;overflow:hidden}
.locked.clip::after{background:linear-gradient(to bottom,rgba(11,13,26,0) 0%,rgba(11,13,26,.62) 45%,rgba(11,13,26,.99) 100%)}
/* a short locked strip has no room for a floating tag */
.locked.tight .locked-tag{top:12px}

@media(prefers-reduced-motion:no-preference){
  .locked-tag{transition:transform .15s ease}
}

/* --- the fake pulse: upvotes and comments that are honest about being fake -- */
.pulse{margin:26px 0 0;border:1px solid var(--shadow);background:var(--panel);box-shadow:var(--raise)}
.pulse__bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 14px;border-bottom:1px solid var(--shadow);box-shadow:0 1px 0 var(--bevel)}
.pulse__bar .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.pulse__bar .chip{margin-left:auto;font-family:var(--mono);font-weight:700;font-size:.55rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--hit);border:1px solid var(--hit);padding:3px 7px}
.pulse__row{display:flex;align-items:center;gap:12px;padding:11px 14px;border-bottom:1px solid var(--shadow)}
.pulse__row:last-child{border-bottom:0}
.vote{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;
  font-family:var(--mono);font-weight:700;font-size:.72rem;color:var(--ink2);
  background:var(--sink);box-shadow:var(--well);padding:5px 9px;min-width:40px}
.vote .car{color:var(--accent);font-size:.6rem;line-height:1}
.pulse__row .who{font-family:var(--mono);font-size:.62rem;color:var(--accent)}
.pulse__row .said{font-family:var(--serif);font-size:.9rem;line-height:1.5;color:var(--ink2);margin:2px 0 0}
.pulse__foot{padding:11px 14px;font-family:var(--mono);font-size:.62rem;line-height:1.6;color:var(--muted)}
.pulse__foot b{color:var(--ink2);font-weight:400}

@media(max-width:560px){
  .beta-form button{flex:1 1 100%}
  .locked-tag{font-size:.54rem;letter-spacing:.1em;padding:6px 9px}
}

/* --- Mobile nav: burger + slide-out drawer (beta.js builds the elements;
   desktop never sees any of this) ---------------------------------------- */
.sq-burger,.sq-drawer,.sq-scrim{display:none}
@media(max-width:640px){
  .nav,.door-nav,.door-top .door-nav{display:none}
  .sq-burger{display:flex;position:fixed;top:10px;right:10px;z-index:90;
    flex-direction:column;justify-content:center;gap:4px;width:38px;height:36px;
    padding:0 9px;box-sizing:border-box;cursor:pointer;
    background:var(--panel,var(--sq-panel,#1e2650));border:1px solid var(--shadow,var(--sq-shadow,#04060f));box-shadow:var(--raise,3px 3px 0 var(--shadow,var(--sq-shadow,#04060f)))}
  .sq-burger span{display:block;height:2px;background:var(--ink);transition:transform .18s,opacity .18s}
  .sq-menu-open .sq-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .sq-menu-open .sq-burger span:nth-child(2){opacity:0}
  .sq-menu-open .sq-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .sq-scrim{display:block;position:fixed;inset:0;z-index:88;background:rgba(4,6,14,.62);
    opacity:0;pointer-events:none;transition:opacity .2s}
  .sq-menu-open .sq-scrim{opacity:1;pointer-events:auto}
  .sq-drawer{display:flex;flex-direction:column;gap:2px;position:fixed;top:0;right:0;bottom:0;
    z-index:89;width:min(76vw,300px);box-sizing:border-box;padding:58px 20px 20px;
    background:var(--panel,var(--sq-panel,#1e2650));border-left:1px solid var(--shadow,var(--sq-shadow,#04060f));box-shadow:-4px 0 0 rgba(0,0,0,.25);
    transform:translateX(102%);transition:transform .22s;overflow-y:auto}
  .sq-menu-open .sq-drawer{transform:none}
  @media(prefers-reduced-motion:reduce){.sq-drawer,.sq-scrim,.sq-burger span{transition:none}}
  .sq-drawer a{font-family:var(--mono,var(--sq-mono,ui-monospace,monospace));font-size:1rem;color:var(--link,var(--ink));
    text-decoration:none;padding:11px 8px;border-bottom:1px solid var(--shadow,var(--sq-shadow,#04060f))}
  .sq-drawer a::before{content:"[ "}.sq-drawer a::after{content:" ]"}
  .sq-drawer a[aria-current]{color:var(--ink);text-decoration:underline;
    text-underline-offset:4px;text-decoration-color:var(--accent)}
}