/* SST Credentials Wallet — sibling of myaccount-documents.css.
   Renders inside the student dashboard (body.woocommerce-account). The dashboard
   surface is LIGHT by default and flips to dark only under
   html[data-sst-theme="dark"] (localStorage override ?? OS prefers-color-scheme).
   These --sstcert-* aliases map the wallet's semantic names onto the dashboard's
   --sstdash-* token scale (single source of truth in student-dashboard.css) so the
   wallet reads as one theme with the dashboard in BOTH modes — not a contrast island.
   Contrast reasoning must start from the LIGHT base surface. */

.sst-dashboard,
body.page-id-460,
body.woocommerce-account {
    --sstcert-accent: var(--sstdash-gold);
    --sstcert-accent-hover: var(--sstdash-gold-hi);
    --sstcert-text: var(--sstdash-text);
    --sstcert-muted: var(--sstdash-text-muted);
    --sstcert-rule: var(--sstdash-border);
    --sstcert-callout-bg: var(--sstdash-surface);
    --sstcert-on-accent: var(--sstdash-text-on-gold);

    /* Status pill pairs (bg wash / text) mapped to dashboard status tokens */
    --sstcert-pill-ok-bg: var(--sstdash-gold-wash);
    --sstcert-pill-ok-text: var(--sstdash-success);
    --sstcert-pill-pending-bg: var(--sstdash-gold-wash);
    --sstcert-pill-pending-text: var(--sstdash-warn);
    --sstcert-pill-superseded-bg: var(--sstdash-gold-wash-soft);
    --sstcert-pill-superseded-text: var(--sstdash-text-muted);
    --sstcert-pill-alert-bg: var(--sstdash-gold-wash);
    --sstcert-pill-alert-text: var(--sstdash-danger);
}

/* Wallet uses the product's body sans stack (DM Sans) for cohesion with the
   documents tab / dashboard / upload portal — no serif whiplash, no per-control
   sans overrides. Resolves via the dashboard token --sstdash-font-body, which
   is in scope here (student-dashboard.css loads on the same my-account page). */
.sst-wallet { font-family: var(--sstdash-font-body); color: var(--sstcert-text); }

.sst-wallet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sstdash-space-5) 0 var(--sstdash-space-4); border-bottom: 2px solid var(--sstcert-rule); }
.sst-wallet-name { font-size: var(--sstdash-font-xl); letter-spacing: 1px; }
.sst-wallet-count { color: var(--sstcert-muted); font-size: var(--sstdash-font-base); margin-top: var(--sstdash-space-1); }

.sst-wallet-callout { margin: var(--sstdash-space-5) 0; padding: var(--sstdash-space-5); background: var(--sstcert-callout-bg); border-left: 4px solid var(--sstcert-accent); }
.sst-wallet-callout-head { display: flex; justify-content: space-between; margin-bottom: var(--sstdash-space-4); }
.sst-wallet-callout-head .label { text-transform: uppercase; letter-spacing: 2px; font-size: var(--sstdash-font-nano); color: var(--sstcert-muted); }
.sst-wallet-callout-head .date { font-size: var(--sstdash-font-small); color: var(--sstcert-muted); }

.sst-cred-list { list-style: none; padding: 0; margin: 0; }
.sst-cred { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sstdash-space-4); padding: var(--sstdash-space-4) 0; border-top: 1px solid var(--sstcert-rule); align-items: center; }
.sst-cred:first-child { border-top: 0; }
.sst-cred-title { font-size: var(--sstdash-font-md); }
.sst-cred-title .code { color: var(--sstcert-muted); font-size: var(--sstdash-font-base); font-style: italic; }
.sst-cred-meta { font-size: var(--sstdash-font-small); color: var(--sstcert-muted); }
.sst-cred-meta .exp { display: block; margin-top: var(--sstdash-space-1); }
.sst-cred-actions { text-align: right; }

.sst-pill { display: inline-block; padding: 3px var(--sstdash-space-2); /* 3px vertical is bespoke — compact status-pill height, below space-1 */ font-size: var(--sstdash-font-nano); letter-spacing: .5px; text-transform: uppercase; border-radius: var(--sstdash-r-sm); }
.sst-pill-tc_issued, .sst-pill-mailed, .sst-pill-delivered { background: var(--sstcert-pill-ok-bg); color: var(--sstcert-pill-ok-text); }
.sst-pill-queued, .sst-pill-tc_processing { background: var(--sstcert-pill-pending-bg); color: var(--sstcert-pill-pending-text); }
.sst-pill-superseded { background: var(--sstcert-pill-superseded-bg); color: var(--sstcert-pill-superseded-text); }
.sst-pill-expired, .sst-pill-stale { background: var(--sstcert-pill-alert-bg); color: var(--sstcert-pill-alert-text); }
.sst-pill-note { display: block; margin-top: var(--sstdash-space-1); font-size: var(--sstdash-font-small); color: var(--sstcert-muted); }

.sst-wallet-control--myaccount { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--sstdash-space-2); }
.sst-wallet-control--myaccount .sst-wallet-control-copy { flex-basis: 100%; text-align: right; }
.sst-wallet-control--myaccount .sst-wallet-control-label { color: var(--sstcert-text); font-size: var(--sstdash-font-small); font-weight: 700; }
.sst-wallet-control--myaccount .sst-wallet-control-note { color: var(--sstcert-muted); font-size: var(--sstdash-font-small); }

.sst-btn-gold { background: var(--sstcert-accent); color: var(--sstcert-on-accent); min-height: 36px; padding: 7px var(--sstdash-space-3); text-decoration: none; border-radius: var(--sstdash-r-sm); font-size: var(--sstdash-font-small); display: inline-flex; align-items: center; }
.sst-btn-gold:hover { background: var(--sstcert-accent-hover); color: var(--sstcert-on-accent); }
.sst-btn-gold:focus-visible { outline: 2px solid var(--sstcert-accent); outline-offset: 2px; }
.sst-btn-wallet { display: inline-flex; align-items: center; min-height: 36px; background: var(--sstcert-accent); color: var(--sstcert-on-accent); padding: 7px var(--sstdash-space-3); text-decoration: none; border-radius: var(--sstdash-r-sm); font-size: var(--sstdash-font-small); }
.sst-btn-wallet:hover { background: var(--sstcert-accent-hover); color: var(--sstcert-on-accent); }
.sst-btn-wallet:focus-visible { outline: 2px solid var(--sstcert-accent); outline-offset: 2px; }
.sst-btn-link { color: var(--sstcert-accent); font-size: var(--sstdash-font-small); min-height: 36px; background: transparent; border: 0; padding: 7px 0; cursor: pointer; text-decoration: underline; }
.sst-btn-link:focus-visible { outline: 2px solid var(--sstcert-accent); outline-offset: 2px; }
.sst-btn-link[disabled] { opacity: 0.62; cursor: wait; }
.sst-wallet-action-status { display: inline-block; font-size: var(--sstdash-font-small); color: var(--sstcert-muted); }
.sst-wallet-action-status[data-state="success"] { color: var(--sstdash-success); }
.sst-wallet-action-status[data-state="error"] { color: var(--sstdash-danger); }

.sst-wallet-history { margin-top: var(--sstdash-space-6); }
.sst-wallet-history > summary { cursor: pointer; padding: var(--sstdash-space-2) 0; color: var(--sstcert-accent); }
.sst-wallet-history > summary:focus-visible { outline: 2px solid var(--sstcert-accent); outline-offset: 2px; }
.sst-wallet-table { width: 100%; border-collapse: collapse; margin-top: var(--sstdash-space-3); }
.sst-wallet-table th { text-align: left; font-size: var(--sstdash-font-nano); letter-spacing: 1px; text-transform: uppercase; color: var(--sstcert-muted); padding: var(--sstdash-space-2); border-bottom: 2px solid var(--sstcert-rule); }
.sst-wallet-table td { padding: var(--sstdash-space-3) var(--sstdash-space-2); border-bottom: 1px solid var(--sstcert-rule); vertical-align: top; }

.sst-wallet-empty { padding: var(--sstdash-space-7) var(--sstdash-space-4); text-align: center; color: var(--sstcert-muted); font-style: italic; }
.sst-wallet-foot { margin-top: var(--sstdash-space-6); font-style: italic; color: var(--sstcert-muted); font-size: var(--sstdash-font-small); text-align: center; }

@media (max-width: 600px) {
    .sst-cred { grid-template-columns: 1fr; }
    .sst-cred-actions { text-align: left; }
    .sst-wallet-control--myaccount { display: flex; justify-content: flex-start; }
    .sst-wallet-control--myaccount .sst-wallet-control-copy { text-align: left; }
    .sst-wallet-control--myaccount .sst-btn-wallet,
    .sst-wallet-control--myaccount .sst-btn-link { min-height: 44px; }
    .sst-wallet-table thead { display: none; }
    .sst-wallet-table tr { display: block; padding: var(--sstdash-space-3) 0; border-bottom: 1px solid var(--sstcert-rule); }
    .sst-wallet-table td { display: block; padding: var(--sstdash-space-1) 0; border: 0; }
}