/* Leet Connect on the web: ONLY the token map and the page around the shared card (leetconnect/leetconnect.css is the card itself, the same
   file the Leet Browser desktop uses; edit it there, never here). Colours come from the Leet Assistant tokens in app.css. */
.lc-card,.rings{--lc-bg:var(--bg);--lc-bad:var(--bad);--lc-text:var(--text);--lc-dim:var(--dim);--lc-faint:var(--faint);--lc-surface:var(--card2);--lc-hair:var(--line2);
  --lc-ok:#9CCC00;--lc-accent:var(--acc);--lc-on-accent:var(--accfg);--lc-focus:var(--acct);--lc-font:Roboto,"Segoe UI",system-ui,sans-serif}
/* the card art follows the Leet primary too: tint = primaryContainer, disc = primary (the shared css defaults are mint / lime) */
.lc-card{--lc-tint:light-dark(#dfe0ff,#3142a9);--lc-limec:light-dark(#bbc3ff,#4a5bc4)}

.brand .rings{width:34px;height:24px}
.rings.cm-acct{width:34px;height:24px;flex:none}
button.acct{all:unset;box-sizing:border-box;display:flex;gap:10px;align-items:center;min-width:0;width:100%;cursor:pointer;border-radius:14px;padding:6px 8px;margin:-6px -8px}
button.acct:hover{background:var(--hi)}
button.acct:focus-visible{outline:2.5px solid var(--acct);outline-offset:2px}

/* the gate: the shared card in the middle of the page, with the two web-only ways in under it. .engine = app.js's own sign-in / PIN
   elements: they stay in the page as its working parts (app.js drives them) but are never shown; the card is the only UI. */
.engine{display:none!important}
.gate-card.lc{display:flex;flex-direction:column;align-items:center;width:min(480px,100%);padding:4px 0 14px;grid-template-columns:none}
.gate-card.lc .lc-card{width:100%}
.lc-alt{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin-top:6px;font-size:13.5px}
.lc-alt[hidden],.lc-alt [hidden]{display:none}

/* the status card in the dialog: the card is the dialog */
.dlg-cc{padding:0;border:0;background:transparent;box-shadow:none;width:min(480px,calc(100% - 24px));max-height:calc(100dvh - 24px);overflow:visible}
.dlg-cc .lc-card{border:1px solid var(--line2);box-shadow:var(--shadow)}

/* ---- the gate, PRESENTED (web only). Wide window: left = what Leet Connect is (the promises, big), right = the shared card as an elevated panel
   that changes step by step while the left stays put. Narrow window / phone: just the card, as before. The card's insides stay the shared module's. ---- */
.gate{justify-content:center}
.gate-bg{background:radial-gradient(820px 480px at 70% 45%,var(--accsoft),transparent 72%),radial-gradient(circle,var(--dot) 1px,transparent 1.4px) 0 0/22px 22px}
.lc-show{display:none;--lc-font:Roboto,"Segoe UI",system-ui,sans-serif}
@media (min-width:1000px){
  .gate-card.lc{width:min(1080px,100%);display:grid;grid-template-columns:minmax(0,1fr) 480px;grid-template-areas:"show gate" "alt gate";grid-template-rows:auto 1fr;column-gap:clamp(48px,7vw,110px);align-items:center;text-align:left;padding:0}
  .gate-card.lc .lc-show{display:block;grid-area:show;align-self:end}
  .gate-card.lc .lc-alt{grid-area:alt;align-self:start;justify-content:flex-start;margin:22px 0 0;gap:6px 22px}
  .gate-card.lc #lc-gate,.gate-card.lc .gate-busy{grid-area:gate}
  .gate-card.lc #lc-gate{align-self:start;margin-top:-18px;background:transparent;border:0;box-shadow:none;border-radius:0;overflow:visible}   /* no panel: the sign-in sits straight on the page */
  .gate-card.lc #lc-gate:has(.pg-attention,.pg-status){align-self:center;margin-top:0;margin-bottom:116px}   /* these short pages (Needs attention, Connected) sit in the middle of the left side, level with its centre */
  .gate-card.lc .pg-pin > .lc-hero{margin-top:8px}   /* the PIN step starts right under the back arrow, level with the headline on the left */
  .gate-card.lc .pg-pin > .lc-pad{margin-top:22px}
  .gate-card.lc .lc-card{max-width:none;border-radius:0;background:transparent;padding:8px 10px 6px}
  .gate-card.lc .pg-place .lc-facts{display:none}   /* said big on the left already */
  .gate-card.lc .pg-place > .lc-art{height:clamp(200px,42vh,300px);margin-top:22px}
  .gate-card.lc .pg-place .lc-title.big{display:none}   /* the brand is already in the header; the left says it big */
  .gate-card.lc .pg-place::before{left:-120px;right:-120px;top:-60px;height:300px}   /* the dot grid stays on a big window too, wider than the column */
  .gate-card.lc .pg-place > .lc-lead{margin-top:26px;font-size:15px;line-height:22px}
}
.lc-show h1{margin:0;font:700 clamp(40px,4.6vw,60px)/1.04 var(--lc-font);letter-spacing:-.03em;color:var(--text)}
.lc-lead2{margin:18px 0 0;max-width:46ch;font:400 17px/26px var(--lc-font);color:var(--dim)}
.lc-feats{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;max-width:520px}
.lc-feats li{display:flex;align-items:center;gap:16px;padding:14px 18px;border-radius:20px;background:var(--card,var(--bg));border:1px solid var(--line)}
.lc-feats .fi{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accsoft);color:var(--acct)}
.lc-feats .fi .i{width:22px;height:22px}
.lc-feats b{display:block;font:600 15.5px/22px var(--lc-font);color:var(--text)}
.lc-feats span{display:block;font:400 14px/20px var(--lc-font);color:var(--dim)}
.lc-feats .fi + div{min-width:0}
.gate-card.lc .lc-alt .link{color:var(--acct);font-weight:500}
/* a laptop window (short): the left column gives back space so the page never scrolls */
@media (min-width:1000px) and (max-height:800px){
  .lc-show h1{margin-top:14px;font-size:clamp(34px,min(4.4vw,7.2vh),52px)}
  .lc-lead2{margin-top:12px;font-size:15.5px;line-height:23px}
  .lc-feats{margin-top:20px;gap:9px}
  .lc-feats li{padding:10px 16px;border-radius:18px}
  .lc-feats .fi{width:38px;height:38px;border-radius:12px}
  .lc-feats span{font-size:13.5px;line-height:19px}
  .gate-card.lc .lc-alt{margin-top:14px}
}
/* the logo's red ring keeps its brand red in dark mode (--bad turns pale pink there, which is for text); connected state stays lime via the shared rule */
.rings .rr{stroke:#d32f2f}
/* the small logo in the header and account button never pulses (the shared mark fades its red ring while connecting, which read as a washed-out logo on the PIN step) */
.brand .rings .rr,.rings.cm-acct .rr,.rings.cm-brand .rr{animation:none!important;opacity:1}