/* =====================================================================
   GlobalSecora — account audiences, operator messaging, people panels

   Loaded after academy.css.  Everything here belongs to the v4 work:
   the signup audience picker, the dashboard popup, the inbox, and the
   staff-side roster and account pages.
   ===================================================================== */

/* ---------------------------------------------------------------------
   Account type badge
   --------------------------------------------------------------------- */
.acct-badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.14rem .5rem;border-radius:999px;
  font:600 .72rem/1.5 var(--sans);white-space:nowrap;
  color:var(--c,var(--acc));
  background:color-mix(in srgb,var(--c,var(--acc)) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--c,var(--acc)) 34%,transparent);
}
.acct-badge .dim{color:var(--c,var(--acc));opacity:.85}

/* ---------------------------------------------------------------------
   Signup audience picker
   --------------------------------------------------------------------- */
.auth-wrap-wide{max-width:640px}

.acct-picker{
  border:1px solid var(--line2);border-radius:12px;
  padding:1rem 1.1rem;margin:0 0 1.2rem;background:rgba(0,0,0,.14);
}
.acct-picker legend{
  padding:0 .45rem;font:700 .82rem/1 var(--sans);color:var(--txt2);
  text-transform:uppercase;letter-spacing:.07em;
}
.acct-picker .help{font-size:.79rem;color:var(--txt3);margin:0 0 .8rem}

.acct-opt{
  display:block;margin:0 0 .55rem;cursor:pointer;
  border:1px solid var(--line2);border-radius:11px;background:var(--panel);
  transition:border-color .15s,background .15s;
}
.acct-opt:last-child{margin-bottom:0}
.acct-opt:hover{border-color:var(--c);background:var(--panel2)}
.acct-opt input{position:absolute;opacity:0;pointer-events:none}
/* :has() so the ring tracks the real radio state rather than a JS class. */
.acct-opt:has(input:checked){
  border-color:var(--c);
  background:color-mix(in srgb,var(--c) 10%,var(--panel));
  box-shadow:0 0 0 1px var(--c) inset;
}
.acct-opt:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}

.acct-opt-in{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem .85rem}
.acct-opt-ico{
  flex:0 0 auto;width:30px;height:30px;border-radius:8px;
  display:grid;place-items:center;font-size:.95rem;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--c) 30%,transparent);
}
.acct-opt-in strong{display:block;font-size:.92rem;margin-bottom:.1rem}
.acct-opt-blurb{display:block;font-size:.79rem;line-height:1.5}

/* ---------------------------------------------------------------------
   Inbox bell in the top bar
   --------------------------------------------------------------------- */
.icon-btn.bell{position:relative;text-decoration:none}
.icon-btn.bell.has-unread{color:var(--acc);border-color:rgba(77,163,255,.4)}
.bell-count{
  position:absolute;top:-5px;right:-6px;
  min-width:17px;height:17px;padding:0 4px;border-radius:999px;
  display:grid;place-items:center;
  background:var(--bad);color:#fff;
  font:700 .66rem/1 var(--sans);border:1.5px solid var(--bg);
}

/* ---------------------------------------------------------------------
   Dashboard popup
   --------------------------------------------------------------------- */
.msg-popup{
  position:relative;display:flex;gap:.95rem;align-items:flex-start;
  margin:0 0 1.3rem;padding:1rem 1.15rem;border-radius:13px;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line2);
  box-shadow:0 14px 40px -22px rgba(0,0,0,.9);
  animation:msg-in .28s ease-out both;
}
@keyframes msg-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.msg-popup-ico{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  display:grid;place-items:center;font-size:1rem;
}
.msg-popup-main{flex:1;min-width:0}
.msg-popup-top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.3rem}
.msg-popup-from{font-size:.76rem;color:var(--txt3)}
.msg-popup-subj{display:block;font-size:1rem;margin-bottom:.2rem}
.msg-popup-body{font-size:.9rem;color:var(--txt2);line-height:1.6}
.msg-popup-act{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.8rem}

.msg-kind{
  font:700 .68rem/1 var(--sans);text-transform:uppercase;letter-spacing:.08em;
  padding:.22rem .5rem;border-radius:6px;
  color:var(--acc);background:rgba(77,163,255,.12);
  border:1px solid rgba(77,163,255,.3);
}

.msg-sev-dot{position:absolute;top:.95rem;right:1rem;width:8px;height:8px;border-radius:50%}
.msg-tone-info{background:var(--acc)}
.msg-tone-warn{background:var(--warn)}
.msg-tone-crit{background:var(--bad);box-shadow:0 0 0 4px rgba(255,92,122,.16)}

.msg-sev-0 .msg-popup-ico{color:var(--acc);background:rgba(77,163,255,.12)}
.msg-sev-1{border-color:rgba(255,182,72,.4)}
.msg-sev-1 .msg-popup-ico{color:var(--warn);background:rgba(255,182,72,.13)}
.msg-sev-1 .msg-kind{color:var(--warn);background:rgba(255,182,72,.12);border-color:rgba(255,182,72,.3)}
.msg-sev-2{border-color:rgba(255,92,122,.45)}
.msg-sev-2 .msg-popup-ico{color:var(--bad);background:rgba(255,92,122,.14)}
.msg-sev-2 .msg-kind{color:var(--bad);background:rgba(255,92,122,.13);border-color:rgba(255,92,122,.32)}

/* ---------------------------------------------------------------------
   Inbox
   --------------------------------------------------------------------- */
.stack{display:flex;flex-direction:column;gap:1rem}

.msg-row{position:relative}
.msg-row.is-new{border-color:rgba(77,163,255,.4)}
.msg-row.is-dismissed{opacity:.62}
.msg-row.is-dismissed:hover{opacity:1}

.msg-row-top{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-bottom:.45rem}
.msg-row-when{margin-left:auto;font-size:.78rem}
.msg-row-subj{font-size:1.05rem;margin-bottom:.3rem}
.msg-row-body{font-size:.92rem;color:var(--txt2);line-height:1.65}
.msg-row-act{
  display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;
  margin-top:.95rem;padding-top:.85rem;border-top:1px solid var(--line);
}
.msg-row-from{margin-left:auto;font-size:.79rem}

.msg-new-dot{
  font:700 .66rem/1 var(--sans);text-transform:uppercase;letter-spacing:.07em;
  padding:.22rem .45rem;border-radius:6px;
  color:var(--acc);background:rgba(77,163,255,.14);
}
.msg-sev-tag{
  font:700 .66rem/1 var(--sans);text-transform:uppercase;letter-spacing:.07em;
  padding:.22rem .45rem;border-radius:6px;
  color:var(--bad);background:rgba(255,92,122,.13);
}

/* ---------------------------------------------------------------------
   Admin: sidebar group labels
   --------------------------------------------------------------------- */
.admin-nav-lbl{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--txt3);padding:1rem .85rem .3rem;font-weight:700;
}
.admin-nav-lbl:first-child{padding-top:.2rem}

/* ---------------------------------------------------------------------
   Admin: roster
   --------------------------------------------------------------------- */
.stat-link{display:block;text-decoration:none;color:inherit;transition:border-color .15s,transform .12s}
.stat-link:hover{text-decoration:none;border-color:var(--acc);transform:translateY(-1px)}
.stat-link.is-on{border-color:var(--acc);box-shadow:0 0 0 1px rgba(77,163,255,.3)}

.flex-row{display:flex;align-items:center}
.section-h2{margin:2.2rem 0 .9rem;font-size:1.25rem}

tr.is-suspended td{opacity:.6}
tr.is-suspended td:first-child{box-shadow:inset 3px 0 0 var(--bad)}

.pager{display:flex;gap:.35rem;flex-wrap:wrap;margin:1rem 0}
.pager-cur{
  min-width:30px;padding:.4rem .55rem;border-radius:8px;text-align:center;
  font:600 .8rem/1 var(--sans);color:var(--acc);
  background:var(--panel2);border:1px solid var(--acc);
}

/* Manage dropdown */
.manage-menu{
  display:flex;flex-direction:column;gap:.35rem;
  margin-top:.5rem;min-width:190px;
}
.manage-menu .btn{width:100%;justify-content:flex-start}
.manage-row{display:flex;gap:.3rem}
.manage-row .btn{flex:0 0 auto}

.mini-select,.mini-input{
  background:var(--bg2);border:1px solid var(--line2);color:var(--txt);
  border-radius:7px;padding:.34rem .45rem;font:500 .78rem/1.2 var(--sans);
  min-width:0;flex:1;
}
.mini-select:focus,.mini-input:focus{
  outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(77,163,255,.15);
}
.mini-input{width:100%;font-family:var(--mono)}

/* ---------------------------------------------------------------------
   Progress meter
   --------------------------------------------------------------------- */
.pct{display:inline-flex;align-items:center;gap:.45rem;min-width:112px}
.pct-bar{
  flex:1;height:6px;border-radius:999px;overflow:hidden;
  background:var(--bg2);border:1px solid var(--line);
}
.pct-bar i{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--acc),var(--acc2));
}
.pct-n{font:600 .76rem/1 var(--mono);color:var(--txt2);flex:0 0 auto}

/* ---------------------------------------------------------------------
   Key/value list
   --------------------------------------------------------------------- */
.kv{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1rem;margin:0;font-size:.88rem}
.kv dt{color:var(--txt3);font-weight:600}
.kv dd{margin:0;color:var(--txt)}

/* ---------------------------------------------------------------------
   Admin: account page
   --------------------------------------------------------------------- */
.acct-topbar{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:1rem 1.15rem;margin:0 0 1.1rem;border-radius:13px;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line2);
}
.acct-topbar-id{display:flex;flex-direction:column;line-height:1.35}
.acct-topbar-id .dim{font-size:.8rem}
.acct-topbar-spacer{flex:1}
.avatar-lg{width:44px;height:44px;font-size:1.15rem;border-radius:12px}

.acct-current{margin-bottom:1.1rem}

.acct-type-row{
  display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
  padding:.6rem .75rem;margin:0 0 .45rem;border-radius:10px;
  background:var(--panel);border:1px solid var(--line2);
  transition:border-color .15s;
}
.acct-type-row:hover{border-color:var(--c)}
.acct-type-row.is-on{
  border-color:var(--c);
  background:color-mix(in srgb,var(--c) 10%,var(--panel));
}
.acct-type-glyph{
  flex:0 0 auto;width:26px;text-align:center;font-size:1rem;color:var(--c);
}
.acct-type-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.4}
.acct-type-txt strong{font-size:.88rem}
.acct-type-txt .dim{font-size:.76rem}

/* .cert-mini itself is a shared component and lives in academy.css.  The admin
   roster shows the same card in a denser form next to a Manage button, so that
   is expressed as a modifier rather than by re-declaring the component — a
   second .cert-mini block here silently won on load order and restyled the
   public certificates page too. */
.cert-mini--compact{
  gap:.15rem;padding:.85rem .95rem;border-radius:11px;font-size:.86rem;
  background:var(--panel);border:1px solid var(--line);
}
.cert-mini .btn{margin-top:.5rem;align-self:flex-start}
.cert-mini-serial{
  font:600 .72rem/1.4 var(--mono);color:var(--acc);letter-spacing:.04em;
}

/* ---------------------------------------------------------------------
   Compose helper list
   --------------------------------------------------------------------- */
.tpl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.tpl-list li{
  display:flex;flex-direction:column;gap:.1rem;
  padding:.6rem .75rem;border-radius:9px;
  background:var(--bg2);border:1px solid var(--line);
  font-size:.85rem;
}
.tpl-list span{font-size:.76rem;color:var(--txt3)}
.tpl-list code{color:var(--warn)}

/* ---------------------------------------------------------------------
   Light theme
   --------------------------------------------------------------------- */
[data-theme="light"] .acct-opt{background:#fff}
[data-theme="light"] .acct-opt:has(input:checked){background:color-mix(in srgb,var(--c) 8%,#fff)}
[data-theme="light"] .msg-popup{background:#fff}
[data-theme="light"] .acct-topbar{background:#fff}
[data-theme="light"] .acct-type-row{background:#fff}
[data-theme="light"] .acct-type-row.is-on{background:color-mix(in srgb,var(--c) 8%,#fff)}
[data-theme="light"] .cert-mini,
[data-theme="light"] .cert-mini--compact,
[data-theme="light"] .tpl-list li{background:#fff}
[data-theme="light"] .mini-select,
[data-theme="light"] .mini-input{background:#fff}
[data-theme="light"] .msg-row.is-dismissed{opacity:.55}

/* ---------------------------------------------------------------------
   Narrow screens
   --------------------------------------------------------------------- */
@media (max-width:720px){
  .acct-topbar-spacer{display:none}
  .msg-row-from{margin-left:0}
  .acct-topbar .btn{flex:1}
  .kv{grid-template-columns:1fr;gap:.1rem .5rem}
  .kv dt{margin-top:.5rem}
}