/* Purchases per account on the Accounts view (fulfillment-account-purchases.js).
   Reference lock: mockup v10 "metrics row + CRM table / cards + tabbed drawer"
   (Rox customers, Resend audience, GlossGenius client drawer) on the portal's
   own tokens: --bg canvas, white surfaces, hairline --border, --text (ink,
   #1a1a2e) for selection and primary numerals, --accent for focus rings.
   Status meaning is text + colour. Text colours below were measured, not
   guessed (WCAG 2.1 contrast on their own backgrounds):
     ok   #047857 on --green-bg 5.21 · on white 5.48
     warn #b45309 on --amber-bg 4.84 · on white 5.02
     bad  #b91c1c on --red-bg   5.91 · on white 6.47
     info #1d4ed8 on --blue-bg  6.16
     mute --text-muted on --surface-2 6.79
     --text-faint on white 4.83 · on --bg 4.59 (never used on --surface-2: 4.34)
     avatar tints ≥ 6.37 (rose 6.70, sky 6.59, amber 6.37, emerald 6.78,
     teal 6.73, violet 7.57, slate 6.64); white on --text 17.06.
   Every selector is prefixed .acct-p-; the only portal classes touched are
   inside .acct-p-card (badge text colours darkened to AA, archived opacity). */

.acct-p-hidden { display:none !important; }
.acct-p-sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.acct-p-muted { color:var(--text-faint); font-size:12px; }
.acct-p-mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; }
.acct-p-txt-bad { color:#b91c1c; font-weight:500; }
.acct-p-txt-warn { color:#b45309; font-weight:500; }

/* ── tones (status chips, pills, notes, timeline dots) ── */
.acct-p-tone-ok { color:#047857; background:var(--green-bg); border-color:var(--green-border); }
.acct-p-tone-warn { color:#b45309; background:var(--amber-bg); border-color:var(--amber-border); }
.acct-p-tone-bad { color:#b91c1c; background:var(--red-bg); border-color:rgba(220,38,38,0.22); }
.acct-p-tone-info { color:#1d4ed8; background:var(--blue-bg); border-color:var(--blue-border); }
.acct-p-tone-mute { color:var(--text-muted); background:var(--surface-2); border-color:rgba(0,0,0,0.1); }
.acct-p-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }

/* ── source label ("from listings · updated 2 min ago") ── */
.acct-p-source, .acct-p-source-plain { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--text-faint); white-space:nowrap; }
.acct-p-source::before {
  content:""; width:6px; height:6px; border-radius:50%; flex:none;
  background:#047857; box-shadow:0 0 0 3px var(--green-bg);
}
.acct-p-source.is-loading::before { background:#b45309; box-shadow:0 0 0 3px var(--amber-bg); }
.acct-p-source.is-error::before { background:#b91c1c; box-shadow:0 0 0 3px var(--red-bg); }

/* ── metrics row ── */
.acct-p-metrics {
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden;
}
.acct-p-metrics-head {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px; border-bottom:1px solid var(--border);
}
.acct-p-metrics-head h3 { margin:0; font-size:13px; font-weight:600; color:var(--text); }
.acct-p-metrics-row { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); }
.acct-p-metric {
  display:flex; flex-direction:column; align-items:flex-start; min-width:0;
  padding:14px 16px 15px; margin:0; border:0; border-left:1px solid var(--border);
  background:transparent; font:inherit; color:inherit; text-align:left;
}
.acct-p-metric:first-child { border-left:0; }
.acct-p-metric-label { display:flex; align-items:center; gap:8px; width:100%; font-size:12px; font-weight:500; color:var(--text-muted); }
.acct-p-metric-value {
  margin-top:8px; font-size:24px; line-height:1; font-weight:700; letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums; color:var(--text);
}
.acct-p-metric-value small { font-size:14px; font-weight:500; letter-spacing:0; color:var(--text-faint); }
.acct-p-metric-sub { margin-top:7px; font-size:12px; color:var(--text-faint); }
.acct-p-metric-toggle { cursor:pointer; transition:background 0.15s ease, box-shadow 0.15s ease; }
.acct-p-metric-toggle:hover { background:var(--bg); }
.acct-p-metric-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:-3px; }
.acct-p-metric-flag {
  margin-left:auto; flex:none; padding:1px 8px; border-radius:999px; border:1px solid rgba(0,0,0,0.14);
  font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-muted);
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.acct-p-metric-toggle:hover .acct-p-metric-flag { color:var(--text); border-color:rgba(0,0,0,0.3); }
.acct-p-metric-toggle[aria-pressed="true"] { background:var(--bg); box-shadow:inset 0 -2px 0 var(--text); }
.acct-p-metric-toggle[aria-pressed="true"] .acct-p-metric-flag { background:var(--text); border-color:var(--text); color:#fff; }

/* ── controls: segment chip + Cards | Table toggle (portal .filter-tabs look) ── */
.acct-p-seg-chip {
  display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 4px 0 12px;
  border-radius:999px; background:var(--text); color:#fff; font-size:12px; white-space:nowrap;
}
.acct-p-seg-chip[hidden] { display:none; }
.acct-p-seg-chip strong { font-weight:600; }
.acct-p-seg-clear {
  width:24px; height:24px; display:grid; place-items:center; padding:0;
  border:0; border-radius:50%; background:rgba(255,255,255,0.18); color:#fff; cursor:pointer;
}
.acct-p-seg-clear:hover { background:rgba(255,255,255,0.3); }
.acct-p-seg-clear svg { width:12px; height:12px; }
.acct-p-seg-clear:focus-visible { outline:2px solid #fff; outline-offset:1px; }
.acct-p-view {
  display:inline-flex; gap:2px; padding:2px; margin-left:auto;
  border-radius:6px; background:var(--surface-2);
}
.acct-p-view-btn {
  display:inline-flex; align-items:center; gap:6px; padding:6px 12px;
  border:0; border-radius:4px; background:transparent; cursor:pointer;
  font:500 13px var(--font); color:var(--text-muted);
  transition:background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.acct-p-view-btn svg { width:14px; height:14px; flex:none; }
.acct-p-view-btn:hover:not(.active) { color:var(--text); }
.acct-p-view-btn.active { background:var(--surface); color:var(--text); font-weight:600; box-shadow:var(--shadow); }
.acct-p-view-btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }

/* ── cards view: legacy .account-card + Purchases block ── */
.acct-p-card { align-content:start; }
.acct-p-card.archived, .acct-p-card.archived:hover { opacity:1; background:var(--bg); }
.acct-p-card.archived .account-title strong { color:var(--text-muted); }
.acct-p-card.is-open, .acct-p-card.is-open:hover { box-shadow:0 0 0 2px var(--text), var(--shadow-lg); }
.acct-p-block {
  display:grid; gap:8px; padding:10px 12px 11px;
  border:1px solid var(--border); border-radius:8px; background:var(--surface);
}
.acct-p-block-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.acct-p-label { font-size:10px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:var(--text-faint); }
.acct-p-block-body { display:flex; align-items:center; gap:12px; min-width:0; }
.acct-p-block-line { min-width:0; font-size:12px; color:var(--text-muted); }
.acct-p-block-line strong { font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.acct-p-block-line time { color:inherit; }
.acct-p-btn-purchases { font-weight:600; border-color:rgba(0,0,0,0.18); }
.acct-p-btn-purchases svg { width:13px; height:13px; flex:none; }
.acct-p-btn-purchases:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.acct-p-seg-empty {
  border:1px dashed rgba(0,0,0,0.16); border-radius:10px; padding:28px; text-align:center;
  color:var(--text-muted); background:var(--surface); font-size:13px;
}
.acct-p-seg-empty[hidden] { display:none; }
.acct-p-seg-empty p { margin-bottom:12px; }
.acct-p-foot { margin:0; font-size:12px; color:var(--text-muted); }
.acct-p-foot[hidden] { display:none; }
.acct-p-foot code, .acct-p-prov code {
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; color:var(--text);
}

/* ── the count chip: the number is the door into the drawer ── */
.acct-p-count {
  display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 9px 0 12px; flex:none;
  border-radius:999px; border:1px solid var(--text-faint); background:var(--surface);
  box-shadow:0 1px 0 rgba(0,0,0,0.04); cursor:pointer;
  font:600 13px var(--font); font-variant-numeric:tabular-nums; color:var(--text);
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.acct-p-count-lg { height:34px; padding:0 12px 0 15px; gap:8px; font-size:16px; }
.acct-p-count-caret { font-size:12px; line-height:1; color:var(--text-faint); transition:transform 0.18s ease, color 0.15s ease; }
.acct-p-count:hover { border-color:var(--text); }
.acct-p-count:hover .acct-p-count-caret { transform:translateX(2px); color:var(--text); }
.acct-p-count:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.acct-p-count.is-zero, .acct-p-count.is-loading, .acct-p-count.is-error { color:var(--text-muted); border-style:dashed; box-shadow:none; }
.acct-p-count.is-open { background:var(--text); border-color:var(--text); color:#fff; }
.acct-p-count.is-open .acct-p-count-caret { color:#fff; transform:translateX(2px); }

/* ── table view ── */
.acct-p-table-wrap {
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden;
}
.acct-p-table-wrap[hidden] { display:none; }
.acct-p-table-scroll { overflow-x:auto; }
.acct-p-table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.acct-p-table th {
  position:static; height:38px; padding:0 14px; text-align:left; white-space:nowrap;
  background:var(--bg); border-bottom:1px solid var(--border);
  font-size:12px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--text-muted);
}
.acct-p-th-sort {
  display:inline-flex; align-items:center; gap:5px; margin:0 -6px; padding:4px 6px;
  border:0; border-radius:6px; background:none; cursor:pointer; font:inherit; color:inherit;
}
.acct-p-th-sort:hover { color:var(--text); background:var(--surface-2); }
.acct-p-th-sort:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.acct-p-th-sort svg { width:12px; height:12px; opacity:0.35; transition:transform 0.18s ease, opacity 0.15s ease; }
.acct-p-table th[aria-sort] .acct-p-th-sort { color:var(--text); font-weight:600; }
.acct-p-table th[aria-sort] .acct-p-th-sort svg { opacity:1; }
.acct-p-table th[aria-sort="ascending"] .acct-p-th-sort svg { transform:rotate(180deg); }
.acct-p-table td { padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:middle; background:var(--surface); font-size:13px; }
.acct-p-table tbody tr:last-child td { border-bottom:0; }
.acct-p-table tbody tr[data-acct-p-row] { cursor:pointer; }
.acct-p-table tbody tr[data-acct-p-row]:hover td, .acct-p-table tbody tr.is-open td { background:var(--bg); }
.acct-p-table tbody tr.is-open td:first-child { box-shadow:inset 3px 0 0 var(--text); }
.acct-p-table .acct-p-num { text-align:right; font-variant-numeric:tabular-nums; }
.acct-p-table th.acct-p-num .acct-p-th-sort { margin-left:auto; }
.acct-p-col-purchases { width:120px; }
.acct-p-acct { display:flex; align-items:center; gap:12px; min-width:0; }
.acct-p-acct-main { min-width:0; display:flex; flex-direction:column; align-items:flex-start; }
.acct-p-acct-email {
  max-width:260px; padding:0; border:0; background:none; cursor:pointer; text-align:left;
  font:600 13px var(--font); color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acct-p-acct-email:hover { text-decoration:underline; text-decoration-color:var(--text-faint); text-underline-offset:3px; }
.acct-p-acct-email:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:2px; }
.acct-p-acct-sub { max-width:260px; margin-top:2px; font-size:12px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-p-table tr.is-archived .acct-p-acct-email { color:var(--text-muted); font-weight:500; }
.acct-p-status {
  display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 9px 0 8px;
  border:1px solid; border-radius:6px; font-size:12px; font-weight:500; white-space:nowrap;
}
.acct-p-tags { display:flex; flex-wrap:wrap; gap:4px; }
.acct-p-tag {
  display:inline-flex; align-items:center; height:22px; padding:0 8px; white-space:nowrap;
  border:1px solid var(--border); border-radius:6px; background:var(--surface); font-size:12px; color:var(--text);
}
.acct-p-tag.is-strong { font-weight:600; border-color:rgba(0,0,0,0.18); }
.acct-p-tag.is-dim { color:var(--text-faint); border-style:dashed; border-color:rgba(0,0,0,0.18); }
.acct-p-tcell { display:flex; flex-direction:column; white-space:nowrap; }
.acct-p-t-rel { font-size:13px; color:var(--text); }
.acct-p-t-abs { font-size:12px; color:var(--text-faint); }
.acct-p-table-empty td { padding:36px 16px; text-align:center; color:var(--text-muted); cursor:default; }
.acct-p-table-empty p { margin-bottom:12px; }
.acct-p-avatar {
  flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:10px;
  font-size:12px; font-weight:600; letter-spacing:0.02em;
}
.acct-p-avatar-lg { width:56px; height:56px; border-radius:14px; font-size:18px; }
.acct-p-tint-rose { background:#ffe4ec; color:#9f1239; }
.acct-p-tint-sky { background:#e0f2fe; color:#075985; }
.acct-p-tint-amber { background:#fef3c7; color:#92400e; }
.acct-p-tint-emerald { background:#d1fae5; color:#065f46; }
.acct-p-tint-teal { background:#ccfbf1; color:#115e59; }
.acct-p-tint-violet { background:#ede9fe; color:#5b21b6; }
.acct-p-tint-slate { background:#eef0f3; color:#475569; }

/* ── drawer (match-sheet pattern) ── */
.acct-p-backdrop {
  position:fixed; inset:0; z-index:90;
  background:rgba(15,23,42,0.42); backdrop-filter:blur(3px);
  opacity:0; pointer-events:none; transition:opacity 0.2s ease;
}
.acct-p-backdrop.visible { opacity:1; pointer-events:auto; }
.acct-p-drawer {
  position:fixed; top:0; right:0; z-index:91;
  width:min(640px, 100vw); height:100dvh; display:flex; flex-direction:column;
  background:var(--surface); border-left:1px solid var(--border);
  box-shadow:-12px 0 40px rgba(15,23,42,0.16);
  transform:translateX(100%); visibility:hidden;
  transition:transform 0.24s ease, visibility 0s linear 0.24s;
}
.acct-p-drawer.open { transform:translateX(0); visibility:visible; transition:transform 0.24s ease, visibility 0s; }
.acct-p-drawer-top { flex:none; display:flex; align-items:center; justify-content:space-between; padding:10px 12px 6px 16px; }
.acct-p-drawer-nav { display:flex; align-items:center; gap:2px; }
.acct-p-pos { margin-left:6px; font-size:12px; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.acct-p-icon-btn {
  width:32px; height:32px; display:grid; place-items:center; padding:0;
  border:0; border-radius:999px; background:none; color:var(--text-muted); cursor:pointer;
}
.acct-p-icon-btn:hover:not(:disabled) { background:var(--surface-2); color:var(--text); }
.acct-p-icon-btn:disabled { opacity:0.35; cursor:default; }
.acct-p-icon-btn svg { width:16px; height:16px; }
.acct-p-drawer .acct-p-icon-btn:focus-visible, .acct-p-drawer .acct-p-dtab:focus-visible, .acct-p-drawer .acct-p-subf button:focus-visible,
.acct-p-drawer .acct-p-link-btn:focus-visible, .acct-p-drawer .btn:focus-visible, .acct-p-drawer a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.acct-p-drawer .acct-p-dtab:focus-visible, .acct-p-drawer .acct-p-subf button:focus-visible { outline-offset:-3px; border-radius:6px; }
.acct-p-scroll { position:relative; flex:1; overflow-y:auto; overscroll-behavior:contain; }
.acct-p-profile { display:flex; align-items:center; gap:16px; padding:4px 24px 0; }
.acct-p-id { min-width:0; }
.acct-p-eyebrow { margin:0; font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-faint); }
.acct-p-drawer-title { margin:2px 0 0; font-size:20px; line-height:1.2; font-weight:600; letter-spacing:-0.015em; color:var(--text); overflow-wrap:anywhere; }
.acct-p-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:8px; font-size:12px; color:var(--text-faint); }
.acct-p-meta-owner { margin-left:2px; }
.acct-p-actions { display:flex; flex-wrap:wrap; gap:8px; padding:14px 24px 0; }
.acct-p-actions .btn svg { width:14px; height:14px; flex:none; }
.acct-p-note { margin:14px 24px 0; padding:9px 12px; border:1px solid; border-radius:8px; font-size:12px; }
.acct-p-note[hidden] { display:none; }
.acct-p-dstats {
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); margin:16px 24px 0;
  border:1px solid var(--border); border-radius:10px;
}
.acct-p-dstat { min-width:0; padding:10px 14px 11px; border-left:1px solid var(--border); }
.acct-p-dstat:first-child { border-left:0; }
.acct-p-dstat dt { font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-faint); }
.acct-p-dstat dd {
  margin:4px 0 0; font-size:18px; font-weight:600; letter-spacing:-0.02em; color:var(--text);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.acct-p-dstat dd > span { display:block; margin-top:1px; font-size:12px; font-weight:400; letter-spacing:0; color:var(--text-faint); white-space:normal; }
.acct-p-dstat dd time { color:inherit; }
.acct-p-dsticky { position:sticky; top:0; z-index:3; margin-top:14px; padding:0 24px; background:var(--surface); }
.acct-p-dtabs { display:flex; gap:2px; border-bottom:1px solid var(--border); }
.acct-p-dtab {
  display:flex; flex-direction:column; align-items:center; gap:5px; min-width:96px;
  margin-bottom:-1px; padding:8px 14px 10px; border:0; border-bottom:2px solid transparent; background:none; cursor:pointer;
  font:500 12px var(--font); color:var(--text-muted);
}
.acct-p-dtab-ico { width:34px; height:34px; display:grid; place-items:center; border-radius:999px; transition:background 0.15s ease, color 0.15s ease; }
.acct-p-dtab-ico svg { width:17px; height:17px; }
.acct-p-dtab:hover .acct-p-dtab-ico { background:var(--surface-2); color:var(--text); }
.acct-p-dtab[aria-selected="true"] { color:var(--text); font-weight:600; border-bottom-color:var(--text); }
.acct-p-dtab[aria-selected="true"] .acct-p-dtab-ico { background:var(--text); color:#fff; }
.acct-p-dtab-count {
  margin-left:4px; padding:0 6px; border-radius:999px; background:var(--surface-2);
  font-size:12px; font-weight:600; color:var(--text-muted); font-variant-numeric:tabular-nums;
}
.acct-p-dtab-count:empty { display:none; }
.acct-p-dtab[aria-selected="true"] .acct-p-dtab-count { background:var(--text); color:#fff; }
.acct-p-toolbar[hidden] { display:none; }
.acct-p-subf { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); border-bottom:1px solid var(--border); }
.acct-p-subf button {
  margin-bottom:-1px; padding:10px 4px 9px; border:0; border-bottom:2px solid transparent; background:none; cursor:pointer;
  font:500 13px var(--font); color:var(--text-muted); white-space:nowrap;
}
.acct-p-subf button:hover { color:var(--text); }
.acct-p-subf button[aria-pressed="true"] { color:var(--text); font-weight:600; border-bottom-color:var(--text); }
.acct-p-subf-count { margin-left:4px; font-size:12px; font-weight:500; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.acct-p-subf button[aria-pressed="true"] .acct-p-subf-count { color:var(--text); }
.acct-p-searchrow { display:flex; align-items:center; gap:12px; padding:12px 0 6px; }
.acct-p-search { position:relative; flex:1; display:flex; align-items:center; }
.acct-p-search svg { position:absolute; left:11px; width:15px; height:15px; color:var(--text-faint); pointer-events:none; }
.acct-p-search input {
  width:100%; height:36px; padding:0 12px 0 34px; border:1px solid rgba(0,0,0,0.14); border-radius:8px;
  background:var(--surface); font:13px var(--font); color:var(--text);
}
.acct-p-search input:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.acct-p-dsummary { font-size:12px; color:var(--text-faint); white-space:nowrap; font-variant-numeric:tabular-nums; }
.acct-p-prow, .acct-p-colhead {
  display:grid; gap:14px;
  grid-template-columns:minmax(0, 1.7fr) minmax(0, 0.85fr) minmax(0, 1.25fr) 120px;
}
.acct-p-colhead {
  padding:6px 0 7px; border-bottom:1px solid var(--border);
  font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-faint);
}
.acct-p-colhead .is-right, .acct-p-p-total { text-align:right; }
.acct-p-panel { padding:0 24px 28px; }
.acct-p-panel[hidden] { display:none; }
.acct-p-plist { list-style:none; margin:0; padding:0; }
.acct-p-prow { align-items:start; padding:12px 0; border-bottom:1px solid var(--border); }
.acct-p-prow p { margin:0; }
.acct-p-p-name { font-size:13px; font-weight:600; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-p-p-line { margin-top:2px !important; font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-p-p-ref {
  margin-top:3px !important; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px;
  color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.acct-p-p-issue { margin-top:4px !important; font-size:12px; color:#b91c1c; }
.acct-p-p-strong { font-size:13px; font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-p-p-sub { margin-top:2px !important; font-size:12px; color:var(--text-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acct-p-p-sub.acct-p-p-wrap { white-space:normal; }
.acct-p-p-links { display:flex; flex-wrap:wrap; gap:4px 10px; margin-top:3px !important; font-size:12px; }
.acct-p-p-links a { display:inline-flex; align-items:center; gap:3px; color:#1d4ed8; text-decoration:underline; text-underline-offset:2px; }
.acct-p-p-links svg { width:11px; height:11px; }
.acct-p-p-total { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.acct-p-p-amt { font-size:14px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; white-space:nowrap; }
.acct-p-pill {
  display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 8px;
  border:1px solid; border-radius:999px; font-size:12px; font-weight:500; white-space:nowrap;
}
.acct-p-upcoming { font-size:12px; color:var(--text-muted); white-space:nowrap; }
.acct-p-more { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 0 0; font-size:12px; color:var(--text-muted); }
.acct-p-more-status:focus { outline:none; }
/* The portal's .btn sets display, which would beat the [hidden] attribute. */
.acct-p-more .btn[hidden] { display:none; }
.acct-p-dstate-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:24px 0; font-size:13px; color:var(--text-muted); }
.acct-p-dstate-row.is-error { color:#b91c1c; }
.acct-p-dstate-row .spinner { width:16px; height:16px; }
.acct-p-empty { padding:40px 24px 28px; text-align:center; color:var(--text-muted); }
.acct-p-empty-ico { width:48px; height:48px; margin:0 auto 12px; display:grid; place-items:center; border-radius:14px; background:var(--surface-2); color:var(--text); }
.acct-p-empty-ico svg { width:22px; height:22px; }
.acct-p-empty h3 { margin:0; font-size:15px; font-weight:600; color:var(--text); }
.acct-p-empty p { margin:4px 0 0; font-size:13px; }
.acct-p-link-btn {
  padding:0; border:0; background:none; cursor:pointer;
  font:600 13px var(--font); color:var(--text); text-decoration:underline; text-underline-offset:3px;
}
.acct-p-dsection { padding-top:18px; }
.acct-p-dsection-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.acct-p-dsection-head h3 { margin:0; font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-faint); }
.acct-p-dsection-head .acct-p-source-plain { white-space:normal; }
.acct-p-kv { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); margin:0; overflow:hidden; border:1px solid var(--border); border-radius:10px; }
.acct-p-kv > div { min-width:0; margin-bottom:-1px; padding:10px 14px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
.acct-p-kv > div:nth-child(2n), .acct-p-kv > div.is-wide { border-right:0; }
.acct-p-kv > div.is-wide { grid-column:1 / -1; }
.acct-p-kv dt { font-size:12px; color:var(--text-faint); }
.acct-p-kv dd { margin:2px 0 0; font-size:13px; color:var(--text); overflow-wrap:anywhere; }
.acct-p-prov {
  padding:12px 14px; border:1px dashed rgba(0,0,0,0.18); border-radius:10px; background:var(--bg);
  font-size:12px; color:var(--text-muted);
}
.acct-p-prov p { margin:0; }
.acct-p-prov code { padding:0 4px; border:1px solid var(--border); border-radius:4px; background:var(--surface); }
.acct-p-prov-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 16px; margin:10px 0; }
.acct-p-prov-grid dd { margin:2px 0 0; font-size:13px; font-weight:600; color:var(--text); font-variant-numeric:tabular-nums; }
.acct-p-timeline { list-style:none; margin:0; padding:0; }
.acct-p-tl-item { position:relative; display:grid; grid-template-columns:28px minmax(0, 1fr) auto; gap:12px; padding:9px 0; }
.acct-p-tl-item::before { content:""; position:absolute; left:13.5px; top:0; bottom:0; width:1px; background:rgba(0,0,0,0.1); }
.acct-p-tl-item:first-child::before { top:22px; }
.acct-p-tl-item:last-child::before { bottom:calc(100% - 22px); }
.acct-p-tl-item:only-child::before { display:none; }
.acct-p-tl-dot { position:relative; z-index:1; width:28px; height:28px; display:grid; place-items:center; border:1px solid; border-radius:50%; }
.acct-p-tl-dot svg { width:14px; height:14px; }
.acct-p-tl-item p { margin:0; }
.acct-p-tl-title { font-size:13px; color:var(--text); }
.acct-p-tl-title strong { font-weight:600; }
.acct-p-tl-meta { margin-top:2px !important; font-size:12px; color:var(--text-faint); }
.acct-p-tl-time { font-size:12px; color:var(--text); text-align:right; white-space:nowrap; }
.acct-p-tl-time span { display:block; color:var(--text-faint); }

/* ── responsive (DESIGN.md: narrow screens scroll the table; no column is hidden) ── */
@media (max-width: 720px) {
  .acct-p-metrics-head { flex-direction:column; align-items:flex-start; gap:2px; }
  .acct-p-metrics-row { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .acct-p-metric:nth-child(3) { border-left:0; }
  .acct-p-metric:nth-child(n+3) { border-top:1px solid var(--border); }
  .acct-p-view { margin-left:0; }
  .acct-p-acct-email, .acct-p-acct-sub { max-width:200px; }
}
@media (max-width: 600px) {
  .acct-p-drawer { border-left:0; }
  .acct-p-profile, .acct-p-actions { padding-left:16px; padding-right:16px; }
  .acct-p-note, .acct-p-dstats { margin-left:16px; margin-right:16px; }
  .acct-p-dsticky, .acct-p-panel { padding-left:16px; padding-right:16px; }
  .acct-p-dstats { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .acct-p-dstat:nth-child(3) { border-left:0; }
  .acct-p-dstat:nth-child(n+3) { border-top:1px solid var(--border); }
  .acct-p-dtab { min-width:0; flex:1; padding-left:4px; padding-right:4px; }
  .acct-p-subf { grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .acct-p-colhead { display:none; }
  .acct-p-prow { grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"event total" "seats bought"; row-gap:6px; }
  .acct-p-p-event { grid-area:event; }
  .acct-p-p-total { grid-area:total; }
  .acct-p-p-seats { grid-area:seats; }
  .acct-p-p-bought { grid-area:bought; text-align:right; }
  .acct-p-kv, .acct-p-prov-grid { grid-template-columns:minmax(0, 1fr); }
  .acct-p-kv > div { border-right:0; }
}
@media (prefers-reduced-motion: reduce) {
  .acct-p-drawer, .acct-p-drawer.open, .acct-p-backdrop { transition:none; }
  .acct-p-count, .acct-p-count-caret, .acct-p-metric-toggle, .acct-p-metric-flag, .acct-p-view-btn, .acct-p-th-sort svg, .acct-p-dtab-ico { transition:none; }
  .acct-p-count:hover .acct-p-count-caret, .acct-p-count.is-open .acct-p-count-caret { transform:none; }
  .acct-p-drawer .spinner, .acct-p-dstate-row .spinner { animation:none; }
}