/* ============================================================
   06 — ADVANCED : expert mode, density, and the extra UI
   Everything here is opt-in surface. The product works with this
   file removed; it just loses its expert controls.
   ============================================================ */

/* ---------- advanced mode ---------------------------------- */
/* Expert surfaces are hidden until the user asks for them, so a
   first-day trader is not shown HMAC settings and dead-letter queues. */
.adv{display:none}
html[data-adv="on"] .adv{display:block}
html[data-adv="on"] .adv.inline{display:inline-flex}
html[data-adv="on"] .adv.grid{display:grid}
html[data-adv="on"] .adv.flexrow{display:flex}
html[data-adv="on"] tr.adv{display:table-row}
.basic-only{display:block}
html[data-adv="on"] .basic-only{display:none}
.advtag{
  display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;
  background:var(--spectrum-soft);border:1px solid rgba(109,59,245,.4);color:var(--violet);
  font:600 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
}
.advswitch{display:flex;align-items:center;gap:10px}
.advswitch .lbl{margin:0}
html[data-adv="on"] .advswitch .lbl{color:var(--violet)}

/* ---------- density ---------------------------------------- */
html[data-density="compact"]{--row:30px;--pad:13px;--gap:14px}
html[data-density="compact"] body{font-size:13px}
html[data-density="compact"] .panel-hd{height:40px}
html[data-density="compact"] .stat{padding:13px}
html[data-density="compact"] .stat .v{font-size:24px}
html[data-density="compact"] .split-row{height:30px}
html[data-density="compact"] .rc{padding:8px var(--pad) 8px 18px}
html[data-density="compact"] .sec{padding:64px 0}

/* ---------- collapsible sidebar ---------------------------- */
html[data-side="mini"] .app{grid-template-columns:66px 1fr}
html[data-side="mini"] .side a span,
html[data-side="mini"] .side .brand .thin,
html[data-side="mini"] .side .side-grp > .lbl,
html[data-side="mini"] .side .foot .btn{display:none}
html[data-side="mini"] .side a{justify-content:center;padding:11px 0}
html[data-side="mini"] .side .brand{justify-content:center;padding:0 0 16px}
html[data-side="mini"] .side a:hover::after{
  content:attr(data-tip);position:absolute;left:58px;z-index:90;white-space:nowrap;
  background:var(--lift);border:1px solid var(--line);border-radius:8px;padding:6px 10px;
  font:400 12px/1 var(--ui);color:var(--text);box-shadow:0 16px 40px -20px #000;
}
@media(max-width:900px){html[data-side="mini"] .app{grid-template-columns:1fr}}

/* ---------- key caps + shortcuts ---------------------------- */
.kbd{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;
  background:rgba(255,255,255,.06);font:500 11px/1 var(--mono);color:var(--dim);
}
.shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.shortcuts div{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13px}
.shortcuts div span:first-child{flex:1;color:var(--dim)}
@media(max-width:640px){.shortcuts{grid-template-columns:1fr}}

/* ---------- inbox dropdown --------------------------------- */
.pop{position:relative}
.pop-panel{
  position:absolute;right:0;top:calc(100% + 10px);width:min(360px,92vw);z-index:80;
  background:var(--lift);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 30px 70px -34px #000;overflow:hidden;
}
.pop-panel .hd{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.pop-panel .list{max-height:340px;overflow-y:auto}
.pop-item{display:flex;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line-2);align-items:flex-start}
.pop-item:last-child{border-bottom:0}
.pop-item .body{flex:1;min-width:0}
.pop-item .t{font-size:13px;margin-bottom:3px}
.pop-item .w{font:400 11px/1 var(--mono);color:var(--faint)}
.pop-item.unread{background:rgba(168,85,247,.07)}
.bell{position:relative}
.bell .badge{
  position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--rose);color:#fff;font:600 9.5px/16px var(--mono);text-align:center;
}

/* ---------- confirm dialog --------------------------------- */
.confirm .modal{width:min(460px,92vw)}
.confirm .modal-bd{padding:20px;display:grid;gap:14px}
.confirm h3{margin:0}
.confirm p{color:var(--dim);margin:0;font-size:13.5px}
.confirm .row{display:flex;gap:10px;justify-content:flex-end}
.confirm.danger .modal{border-color:rgba(255,107,90,.5)}

/* ---------- back to top ------------------------------------ */
.totop{
  position:fixed;right:20px;bottom:20px;z-index:70;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:var(--text);
  background:var(--lift);border:1px solid var(--line);box-shadow:0 18px 40px -20px #000;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:all .22s;
}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:var(--blue)}
@media(max-width:560px){.totop{right:14px;bottom:14px;width:40px;height:40px}}

/* ---------- consent bar ------------------------------------ */
.consent{
  position:fixed;left:20px;right:20px;bottom:20px;z-index:120;padding:16px 18px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  background:var(--lift);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 30px 70px -34px #000;
}
.consent p{margin:0;flex:1;min-width:240px;font-size:13px;color:var(--dim)}
@media(max-width:560px){.consent{left:12px;right:12px;bottom:12px;padding:14px}}

/* ---------- connection banner ------------------------------ */
.banner{
  display:flex;align-items:center;gap:12px;padding:11px 18px;font-size:13px;
  background:rgba(255,201,60,.12);border-bottom:1px solid rgba(255,201,60,.35);color:var(--gold);
}
.banner.bad{background:rgba(255,107,90,.12);border-bottom-color:rgba(255,107,90,.35);color:var(--rose)}

/* ---------- wizard / stepper -------------------------------- */
.stepper{display:flex;gap:0;margin-bottom:26px;flex-wrap:wrap}
.stepper .s{
  flex:1;min-width:150px;padding:14px 16px;border-top:2px solid var(--line);
  color:var(--faint);font-size:13px;
}
.stepper .s b{display:block;font:600 11px/1 var(--mono);letter-spacing:.14em;margin-bottom:6px}
.stepper .s.on{border-top-color:var(--blue);color:var(--text)}
.stepper .s.done{border-top-color:var(--mint);color:var(--dim)}
.stepper .s.done b{color:var(--mint)}

/* ---------- auth screens ----------------------------------- */
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;position:relative;z-index:1}
.auth-form{display:grid;place-items:center;padding:40px 24px}
.auth-form .inner{width:min(400px,100%)}
.auth-form .inner > .brand{margin-bottom:32px}
.auth-side{
  position:relative;border-left:1px solid var(--line);padding:56px 48px;display:grid;align-content:center;
  background:rgba(255,255,255,.02);
}
.auth-side blockquote{margin:0;font:400 22px/1.45 var(--display);letter-spacing:-.02em}
.auth-side .who{margin-top:20px;font:400 12.5px/1 var(--mono);color:var(--faint)}
.auth-list{display:grid;gap:14px;margin-top:34px}
.auth-list div{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--dim)}
.auth-list .tick{
  width:20px;height:20px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:var(--spectrum-soft);border:1px solid var(--line);color:var(--cyan);font-size:11px;
}
.divider{display:flex;align-items:center;gap:14px;color:var(--faint);font-size:12px;margin:22px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.strength{display:flex;gap:5px;margin-top:8px}
.strength i{flex:1;height:3px;border-radius:999px;background:rgba(255,255,255,.09)}
.strength i.on{background:var(--mint)}
.strength i.mid{background:var(--gold)}
.strength i.low{background:var(--rose)}
@media(max-width:900px){
  .auth{grid-template-columns:1fr;min-height:0}
  .auth-side{border-left:0;border-top:1px solid var(--line);padding:36px 24px}
}

/* ---------- timeline / changelog ---------------------------- */
.timeline{position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--line)}
.timeline .tl-item{position:relative;padding-bottom:34px}
.timeline .tl-item::before{
  content:"";position:absolute;left:-27px;top:5px;width:11px;height:11px;border-radius:50%;
  background:var(--lift);border:2px solid var(--blue);
}
.timeline .tl-item.major::before{background:var(--spectrum);border-color:transparent;box-shadow:0 0 14px rgba(168,85,247,.8)}
.timeline .tl-item .when{font:400 11.5px/1 var(--mono);color:var(--faint);margin-bottom:8px}
.timeline .tl-item h3{margin-bottom:8px}
.timeline .tl-item ul{margin:10px 0 0;color:var(--dim);font-size:13.5px}

/* ---------- status page ------------------------------------ */
.svc{display:grid;grid-template-columns:1fr auto;gap:12px 20px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line-2)}
.svc:last-child{border-bottom:0}
.svc .name{font-weight:500}
.svc .sub{font-size:12.5px;color:var(--faint)}
.uptime{display:flex;gap:2px;grid-column:1/-1}
.uptime i{flex:1;height:26px;border-radius:2px;background:var(--mint);opacity:.85}
.uptime i.warn{background:var(--gold)}
.uptime i.bad{background:var(--rose)}
.uptime i.none{background:rgba(255,255,255,.08)}
.uptime i:hover{opacity:1;outline:1px solid var(--text)}

/* ---------- blog cards -------------------------------------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.post{
  display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:22px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--glass);transition:transform .2s,border-color .2s;
}
.post:hover{transform:translateY(-3px);border-color:rgba(168,85,247,.45)}
.post h3{margin:0;font-size:18px}
.post p{margin:0;color:var(--dim);font-size:13.5px}
.post .meta{font:400 11.5px/1 var(--mono);color:var(--faint)}
@media(max-width:1000px){.posts{grid-template-columns:1fr}}

/* ---------- pricing toggle (monthly / yearly) --------------- */
.segmented{display:inline-flex;padding:4px;border-radius:999px;border:1px solid var(--line);background:var(--glass)}
.segmented button{
  border:0;background:none;color:var(--dim);cursor:pointer;padding:8px 18px;border-radius:999px;
  font:500 13px/1 var(--ui);
}
.segmented button[aria-selected="true"]{background:var(--spectrum);color:var(--void);font-weight:600}

/* ---------- comparison / feature matrix --------------------- */
.matrix td.y{color:var(--mint);font-weight:600}
.matrix td.n{color:var(--faint)}

/* ---------- keyboard focus ring on cards -------------------- */
[tabindex]:focus-visible,.split-row:focus-visible,.rc:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

@media print{
  .totop,.consent,.banner,.pop-panel{display:none !important}
  .adv{display:block !important}
}

/* ============================================================
   Components introduced by the deeper dashboard pages.
   Named so they cannot collide with the changelog timeline or
   the marketing components above.
   ============================================================ */

/* advanced-mode banner + tag ---------------------------------- */
.advbar{
  display:none;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--r);
  border:1px solid rgba(109,59,245,.35);
  background:linear-gradient(90deg,rgba(109,59,245,.14),rgba(168,85,247,.05));
  font-size:13px;
}
html[data-adv="on"] .advbar{display:flex}
.advbar .btn{margin-left:auto}
.badge-adv{
  display:inline-flex;align-items:center;height:19px;padding:0 8px;border-radius:999px;
  background:var(--spectrum);color:var(--void);font:600 9.5px/1 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;
}

/* audit timeline ---------------------------------------------- */
.alog{display:grid}
.alog-row{
  display:grid;grid-template-columns:126px 18px 1fr;gap:14px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--line-2);
}
.alog-row:last-child{border-bottom:0}
.alog-row .when{font:400 11.5px/1.6 var(--mono);color:var(--faint)}
.alog-row .apip{position:relative;height:100%}
.alog-row .apip::before{
  content:"";position:absolute;left:4px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 10px rgba(168,85,247,.7);
}
.alog-row .apip::after{content:"";position:absolute;left:8px;top:17px;bottom:-15px;width:1px;background:var(--line)}
.alog-row:last-child .apip::after{display:none}
.alog-row.good .apip::before{background:var(--mint);box-shadow:0 0 10px rgba(49,229,164,.7)}
.alog-row.warn .apip::before{background:var(--gold);box-shadow:0 0 10px rgba(255,201,60,.7)}
.alog-row.bad  .apip::before{background:var(--rose);box-shadow:0 0 10px rgba(255,107,90,.7)}
.alog-row .awhat{display:block;font-size:13.5px}
.alog-row .meta{display:block;font:400 11.5px/1.6 var(--mono);color:var(--faint);margin-top:3px}

/* filter chips ------------------------------------------------ */
.fchips{display:flex;gap:8px;flex-wrap:wrap}
.fchip{
  display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 7px 0 13px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);font:400 12.5px/1 var(--ui);color:var(--dim);
}
.fchip b{color:var(--text);font-weight:500;font-family:var(--mono);font-size:12px}
.fchip .x{
  width:19px;height:19px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.09);font-size:11px;line-height:1;
}
.fchip .x:hover{background:var(--rose);color:#fff}

/* pagination -------------------------------------------------- */
.pager{display:flex;align-items:center;gap:8px;padding:14px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.pager .pg{
  min-width:34px;height:34px;padding:0 10px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--dim);
  font:400 12.5px/1 var(--mono);
}
.pager .pg:hover{color:var(--text);border-color:var(--blue)}
.pager .pg[aria-current="true"]{background:var(--spectrum);border-color:transparent;color:var(--void);font-weight:600}
.pager .info{margin-left:auto;font:400 12px/1 var(--mono);color:var(--faint)}

/* key / value grid -------------------------------------------- */
.kvs{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;font-size:13px;margin:0}
.kvs dt{color:var(--faint)}
.kvs dd{margin:0;font-family:var(--mono);text-align:right;overflow-wrap:anywhere}

/* rule rows ---------------------------------------------------- */
.rule{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--glass);
  color:inherit;
}
.rule + .rule{margin-top:10px}
a.rule:hover{border-color:rgba(168,85,247,.5)}
.rule .icon{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--spectrum-soft);border:1px solid var(--line);color:var(--cyan);font-size:15px;
}
.rule .txt b{display:block;font-size:14px}
.rule .txt span{font-size:12.5px;color:var(--dim)}
.rule.off{opacity:.55}

/* avatars ------------------------------------------------------ */
.av{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  background:var(--spectrum);color:var(--void);font:600 11.5px/1 var(--mono);
}
.av.lg{width:46px;height:46px;font-size:14px}

/* permission matrix ------------------------------------------- */
.matrix .yes{color:var(--mint);font-weight:600}
.matrix .no{color:var(--faint)}
.matrix .part{color:var(--gold);font-size:11px;font-family:var(--mono)}

/* inline field validation ------------------------------------- */
.fieldmsg{display:block;margin-top:6px;font-size:12px;color:var(--rose)}
.fieldmsg.ok{color:var(--mint)}

@media(max-width:700px){
  .alog-row{grid-template-columns:92px 16px 1fr;gap:10px}
  .rule{grid-template-columns:auto 1fr;gap:12px}
  .rule > :last-child{grid-column:1/-1;justify-self:start}
}

/* .tl is the same object as .alog — the admin and status pages use the short
   name. Aliased rather than duplicated so the two can never drift apart. */
.tl{display:grid}
.tl .tl-item{
  display:grid;grid-template-columns:126px 18px 1fr;gap:14px;align-items:start;
  padding:13px 0;border-bottom:1px solid var(--line-2);position:relative;
}
.tl .tl-item:last-child{border-bottom:0}
.tl .tl-item .when{font:400 11.5px/1.6 var(--mono);color:var(--faint);margin:0}
.tl .tl-item .pip{position:relative;height:100%}
.tl .tl-item .pip::before{
  content:"";position:absolute;left:4px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--blue);box-shadow:0 0 10px rgba(168,85,247,.7);
}
.tl .tl-item .pip::after{content:"";position:absolute;left:8px;top:17px;bottom:-15px;width:1px;background:var(--line)}
.tl .tl-item:last-child .pip::after{display:none}
.tl .tl-item.good .pip::before{background:var(--mint);box-shadow:0 0 10px rgba(49,229,164,.7)}
.tl .tl-item.warn .pip::before{background:var(--gold);box-shadow:0 0 10px rgba(255,201,60,.7)}
.tl .tl-item.bad  .pip::before{background:var(--rose);box-shadow:0 0 10px rgba(255,107,90,.7)}
.tl .tl-item .what{display:block;font-size:13.5px}
.tl .tl-item .meta{display:block;font:400 11.5px/1.6 var(--mono);color:var(--faint);margin-top:3px}
@media(max-width:700px){.tl .tl-item{grid-template-columns:92px 16px 1fr;gap:10px}}

/* first section under the header needs less air than a mid-page one */
.sec.first{padding-top:56px}
/* the header sign-in link is the first thing to go when space runs out */
@media(max-width:620px){.signin{display:none}}

/* ============================================================
   ACCOUNT MENU
   Billing, team, audit and settings live under your own name in
   the footer, not in the main nav.

   They were six links in a group called "Account", competing for
   attention with the pages you actually open every day. You touch
   these monthly. Putting them where every other product puts them
   costs one click and gives the daily pages the whole sidebar.
   ============================================================ */
.acctmenu{position:relative;margin:8px 10px 4px;border-top:1px solid var(--line-2);padding-top:10px}
.acctbtn{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:9px 10px;border-radius:var(--r);border:1px solid transparent;
  background:none;color:inherit;cursor:pointer;text-align:left;
}
.acctbtn:hover{background:rgba(255,255,255,.05);border-color:var(--line-2)}
.acctbtn i{
  width:28px;height:28px;border-radius:50%;flex:0 0 auto;font-style:normal;
  background:var(--spectrum);color:#12061F;
  display:grid;place-items:center;font:700 11px/1 var(--display);
}
.acctbtn .who{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.acctbtn .who b{font:600 13px/1.2 var(--display)}
.acctbtn .who small{font-size:11px;color:var(--faint)}
.acctbtn svg{color:var(--faint);transition:transform .2s}
.acctmenu[data-open] .acctbtn svg{transform:rotate(180deg)}

.acctlist{display:none;padding:6px 0 2px}
.acctmenu[data-open] .acctlist{display:block}
.acctlist a{
  display:block;padding:8px 12px;border-radius:var(--r-sm);
  font-size:13px;color:var(--dim);
}
.acctlist a:hover{background:rgba(255,255,255,.05);color:var(--text)}
.acctlist a.on{color:var(--cyan);background:rgba(255,79,216,.1)}
.acctlist .btn{margin:8px 12px 2px;width:calc(100% - 24px)}

/* ============================================================
   SIDEBAR VISIBILITY

   Two bugs lived here and both were invisible until somebody
   counted the links:

   1. `.adv{display:none}` never won against `.side a{display:flex}`
      — one class beats one class plus one element, so every
      advanced link had always been visible in the sidebar.

   2. The scoped links used the `hidden` attribute, which older
      engines ignore outright. The menu was therefore correct on
      new browsers and showed everything on old ones.

   Both are fixed by rules specific enough to win, keyed on a
   class rather than an attribute.
   ============================================================ */
.side a.off{display:none !important}
.side a.adv{display:none}
html[data-adv="on"] .side a.adv{display:flex}
.side .side-grp.off{display:none}