/* ============================================================
   PASSAGE — Your account (account.js) + the session list users.js reuses.
   House tokens only (styles.css): --ink, --ink-soft, --ink-faint, --gold,
   --gold-deep, --green, --red, --stroke, --stroke-soft.
   ============================================================ */
.acct-panel .acct-sec { padding: 4px 0 18px; }
.acct-panel .acct-sec + .acct-sec { border-top: 1px solid var(--stroke-soft); padding-top: 18px; }
.acct-panel .acct-h { font-weight: 700; font-size: 14px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.acct-panel .acct-count {
  font-size: 11.5px; font-weight: 700; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px;
  display: inline-grid; place-items: center; background: rgba(169,130,76,.14); color: var(--gold-deep);
}
.acct-panel .acct-sub { color: var(--ink-soft); font-size: 12.5px; line-height: 1.55; margin-bottom: 14px; max-width: 70ch; }
.acct-panel .acct-pw .frow { margin-bottom: 2px; }
.acct-panel .acct-hint { font-size: 12px; color: var(--ink-faint); margin: -4px 0 12px; min-height: 16px; }
.acct-panel .acct-hint.ok { color: var(--gold-deep); }
.acct-panel .acct-hint.good, .acct-panel .acct-hint.strong { color: var(--green); }
.acct-err { color: var(--red); font-size: 12.5px; margin: 0 0 12px; line-height: 1.5; }
.acct-notice {
  background: rgba(169,130,76,.10); border: 1px solid rgba(169,130,76,.35); color: var(--ink);
  border-radius: 10px; padding: 10px 13px; font-size: 13px; line-height: 1.55; margin-bottom: 16px;
}
.acct-panel .acct-foot { margin-top: 12px; }

/* ---------- a session list (also inside the Users table) ---------- */
.acs-list { display: flex; flex-direction: column; border: 1px solid var(--stroke-soft); border-radius: 12px; overflow: hidden; background: #fff; }
.acs-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; min-width: 0; }
.acs-row + .acs-row { border-top: 1px solid var(--stroke-soft); }
.acs-row.is-current { background: rgba(30,58,51,.045); }
.acs-ico { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  color: var(--ink-soft); background: rgba(26,27,24,.05); }
.acs-ico svg { width: 20px; height: 20px; }
.acs-main { flex: 1 1 auto; min-width: 0; }
.acs-dev { font-size: 13.5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.acs-here { font-size: 11px; }
.acs-meta { font-size: 12px; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; }
.acs-meta span { white-space: nowrap; }
.acs-act { flex: 0 0 auto; }
.acs-act .btn-xs, .acs-more.btn-xs { padding: 5px 11px; font-size: 12px; }
.acs-more { margin-top: 8px; }
.acs-empty { font-size: 12.5px; padding: 6px 0; }

/* ---------- the owner's switch ---------- */
.acct-switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; font-size: 14px; margin: 2px 0 10px; }
.acct-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.acct-knob { position: relative; width: 42px; height: 24px; border-radius: 12px; background: rgba(26,27,24,.18); transition: background .2s; flex: 0 0 42px; }
.acct-knob::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s; }
.acct-switch input:checked + .acct-knob { background: var(--green); }
.acct-switch input:checked + .acct-knob::after { transform: translateX(18px); }
.acct-switch input:focus-visible + .acct-knob { outline: 3px solid var(--gold); outline-offset: 2px; }
.acct-switch.is-locked { cursor: default; opacity: .75; }
.acct-rule-text { font-size: 12.5px; color: var(--ink-soft); line-height: 1.6; max-width: 72ch; margin: 0 0 8px; }

/* ---------- Users table additions (users.js) ---------- */
#usersPanel .usr-sess-row > td { background: rgba(26,27,24,.025); padding-top: 4px; padding-bottom: 14px; }
#usersPanel .usr-sess-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 6px 0 8px; font-size: 12.5px; color: var(--ink-soft); }
#usersPanel .usr-sess-row .acs-list { text-align: left; }
#usersPanel .usr-flag { margin-top: 4px; }

@media (max-width: 820px) {
  .acs-row { align-items: flex-start; padding: 11px 12px; }
  .acs-meta { flex-direction: column; gap: 1px; }
  .acct-panel .frow.three { grid-template-columns: 1fr; }
  #usersPanel .usr-sess-row > td { display: block; }
}

/* ---------- sign-in screen additions (auth.js; auth.css is not W2's file) ---------- */
.auth-alt { text-align: center; margin-top: 16px; font-size: 13px; }
.auth-alt a { color: var(--gold-deep); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.auth-ok { background: rgba(30,58,51,.08); border: 1px solid rgba(30,58,51,.25); color: var(--green);
  border-radius: 10px; padding: 10px 13px; font-size: 12.5px; line-height: 1.55; margin-bottom: 14px; }
.auth-ok[hidden] { display: none; }