/* =========================================================
   Vanguard Asset Relations — Minimalistic Portal layer
   Loaded AFTER portal.css. Applies to body[data-page="portal"].
   Goal: strip the editorial/sci-fi aesthetic — flat, sans-only,
   sidebar-driven layout.
   ========================================================= */

/* --- Hide marketing chrome on portal pages -------------------------------- */
body[data-page="portal"] .nav,
body[data-page="portal"] .nav-meta,
body[data-page="portal"] .footer,
body[data-page="portal"] .loader,
body[data-page="portal"] #portal-toolbar,
body[data-page="portal"] .cursor-dot { display: none !important; }

body[data-page="portal"] {
  font-family: var(--font-sans);
}

/* --- Sidebar -------------------------------------------------------------- */
.psg-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 248px;
  background: color-mix(in oklab, var(--bg) 96%, var(--text) 4%);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  padding: 18px 12px 16px;
  z-index: 60;
}
.psg-sidebar::before {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 1px;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklab, var(--accent) 30%, transparent) 50%,
    transparent 100%);
  opacity: .4;
  pointer-events: none;
}

.psg-sidebar .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 8px 12px 18px;
  margin-bottom: 6px;
  text-decoration: none;
  color: var(--text);
  border-bottom: 1px solid var(--hairline);
}
.psg-sidebar .brand img {
  height: 32px;
  width: auto;
  max-width: 100%;
  display: block;
  transition: filter .2s, transform .2s ease;
}
.psg-sidebar .brand:hover img { transform: translateX(1px); }
[data-theme="dark"] .psg-sidebar .brand img { filter: brightness(0) invert(1); }
[data-theme="light"] .psg-sidebar .brand img { filter: brightness(0); }
.psg-sidebar .brand span {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
}

.psg-sidebar .sec-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 14px 14px 8px;
  letter-spacing: .08em;
}

.psg-sidebar nav { display: grid; gap: 2px; align-content: start; }
.psg-sidebar .nav-main { flex: 1; grid-auto-rows: max-content; }

.psg-sidebar nav a,
.psg-sidebar nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.psg-sidebar nav a::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px;
  height: 18px;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transition: transform .2s ease;
}
.psg-sidebar nav a:hover,
.psg-sidebar nav button:hover {
  background: color-mix(in oklab, var(--text) 6%, transparent);
  color: var(--text);
}
.psg-sidebar nav a:hover svg,
.psg-sidebar nav button:hover svg { opacity: 1; color: var(--accent); }
.psg-sidebar nav a.active {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--text);
  font-weight: 600;
}
.psg-sidebar nav a.active::before { transform: translateY(-50%) scaleY(1); }
.psg-sidebar nav a.active svg { color: var(--accent); opacity: 1; }
.psg-sidebar nav a svg,
.psg-sidebar nav button svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .18s ease, color .18s ease;
}

.psg-sidebar .foot {
  display: grid;
  gap: 2px;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--hairline);
}
.psg-sidebar .foot a,
.psg-sidebar .foot button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-soft);
  text-decoration: none;
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background .18s ease, color .18s ease;
}
.psg-sidebar .foot a:hover,
.psg-sidebar .foot button:hover {
  background: color-mix(in oklab, var(--text) 6%, transparent);
  color: var(--text);
}
.psg-sidebar .foot a svg,
.psg-sidebar .foot button svg {
  width: 18px; height: 18px;
  flex-shrink: 0;
  opacity: .7;
  transition: opacity .18s ease, color .18s ease;
}
.psg-sidebar .foot a:hover svg,
.psg-sidebar .foot button:hover svg { opacity: 1; }
.psg-sidebar .foot .signout { color: var(--text-mute); }
.psg-sidebar .foot .signout:hover {
  color: var(--danger);
  background: color-mix(in oklab, var(--danger) 10%, transparent);
}
.psg-sidebar .foot .signout:hover svg { opacity: 1; color: var(--danger); }

[data-theme="dark"] .psg-sidebar .ic-sun { display: inline-block; }
[data-theme="dark"] .psg-sidebar .ic-moon { display: none; }
[data-theme="light"] .psg-sidebar .ic-sun { display: none; }
[data-theme="light"] .psg-sidebar .ic-moon { display: inline-block; }

/* --- Mobile bar + drawer -------------------------------------------------- */
.psg-mbar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
  z-index: 55;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}
.psg-mbar .brand img { height: 28px; width: auto; }
[data-theme="dark"] .psg-mbar .brand img { filter: brightness(0) invert(1); }
[data-theme="light"] .psg-mbar .brand img { filter: brightness(0); }
.psg-mbar button {
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text);
  width: 36px; height: 36px;
  display: grid; place-items: center;
  cursor: pointer;
  border-radius: 6px;
}
.psg-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 58;
}
.psg-backdrop.open { display: block; }

@media (max-width: 880px) {
  .psg-sidebar {
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    width: 280px;
    box-shadow: 8px 0 32px rgba(0,0,0,.25);
  }
  .psg-sidebar.open { transform: translateX(0); }
  .psg-mbar { display: flex; }
}

/* --- Layout shift: content next to sidebar -------------------------------- */
body[data-page="portal"] .portal-page {
  margin-left: 248px;
  padding-top: 32px;
  padding-bottom: 64px;
}
body[data-page="portal"] .portal-page .container {
  max-width: 1080px;
  padding: 0 40px;
}
@media (max-width: 880px) {
  body[data-page="portal"] .portal-page {
    margin-left: 0;
    padding-top: 80px;
  }
  body[data-page="portal"] .portal-page .container { padding: 0 20px; }
}

/* --- Strip serif/italic display on portal -------------------------------- */
body[data-page="portal"] .portal-head h1,
body[data-page="portal"] .psec-head h2,
body[data-page="portal"] .acct .balance-num,
body[data-page="portal"] .acct .row .v,
body[data-page="portal"] .kpi-card .v,
body[data-page="portal"] .coin .price,
body[data-page="portal"] .hero-action .ti,
body[data-page="portal"] .ecard h3,
body[data-page="portal"] .countdown,
body[data-page="portal"] .modal-head h2,
body[data-page="portal"] .success-block h2,
body[data-page="portal"] .help-card h3,
body[data-page="portal"] .faq summary {
  font-family: var(--font-sans) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
}

body[data-page="portal"] .portal-head h1 em,
body[data-page="portal"] .psec-head h2 em,
body[data-page="portal"] .acct .balance-num em,
body[data-page="portal"] .acct .row .v em,
body[data-page="portal"] .kpi-card .v em,
body[data-page="portal"] .ecard h3 em,
body[data-page="portal"] .modal-head h2 em,
body[data-page="portal"] .success-block h2 em,
body[data-page="portal"] .hero-action .ti em {
  font-style: normal !important;
  color: inherit !important;
}

body[data-page="portal"] .portal-head h1 {
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.2;
}
body[data-page="portal"] .psec-head h2 { font-size: 17px; line-height: 1.3; }
body[data-page="portal"] .acct .balance-num { font-size: 36px; }
body[data-page="portal"] .acct .row .v { font-size: 18px; }
body[data-page="portal"] .kpi-card .v { font-size: 28px; }
body[data-page="portal"] .coin .price { font-size: 17px; }
body[data-page="portal"] .hero-action .ti { font-size: 15px; }
body[data-page="portal"] .countdown { font-size: 48px; font-weight: 500 !important; }
body[data-page="portal"] .help-card h3 { font-size: 17px; }
body[data-page="portal"] .faq summary { font-size: 15px; }
body[data-page="portal"] .modal-head h2 { font-size: 20px; }
body[data-page="portal"] .success-block h2 { font-size: 24px; }
body[data-page="portal"] .ecard h3 { font-size: 18px; }

/* --- Strip mono uppercase tracking labels -------------------------------- */
body[data-page="portal"] .acct .lbl,
body[data-page="portal"] .ecard .lbl,
body[data-page="portal"] .kpi-card .nn,
body[data-page="portal"] .kpi-card .d,
body[data-page="portal"] .coin .sym,
body[data-page="portal"] .coin .name,
body[data-page="portal"] .coin .ch,
body[data-page="portal"] .list-row .ti,
body[data-page="portal"] .list-row .sb,
body[data-page="portal"] .list-row .amt,
body[data-page="portal"] .hero-action .sb,
body[data-page="portal"] .coin-status,
body[data-page="portal"] .acct .num,
body[data-page="portal"] .portal-head .crumb,
body[data-page="portal"] .portal-head .meta,
body[data-page="portal"] .psec-head .right,
body[data-page="portal"] .pill,
body[data-page="portal"] .empty,
body[data-page="portal"] .help-card .meta,
body[data-page="portal"] .hours .lbl,
body[data-page="portal"] .hours .v.mono,
body[data-page="portal"] .field label,
body[data-page="portal"] .portal-form .quick,
body[data-page="portal"] .portal-form .err,
body[data-page="portal"] .wd-aside ul li .l,
body[data-page="portal"] .wd-aside ul li b {
  font-family: var(--font-sans) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* keep the wallet address mono for legibility */
body[data-page="portal"] .acct .wallet,
body[data-page="portal"] .acct .num {
  font-family: var(--font-mono) !important;
}

body[data-page="portal"] .acct .lbl,
body[data-page="portal"] .ecard .lbl,
body[data-page="portal"] .kpi-card .nn,
body[data-page="portal"] .hero-action .sb,
body[data-page="portal"] .coin .name,
body[data-page="portal"] .help-card .meta,
body[data-page="portal"] .hours .lbl,
body[data-page="portal"] .field label,
body[data-page="portal"] .psec-head .right {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-mute);
}

body[data-page="portal"] .portal-head .crumb {
  font-size: 13px;
  color: var(--text-mute);
  margin-bottom: 6px;
}
body[data-page="portal"] .portal-head .meta {
  font-size: 13px;
  color: var(--text-mute);
}
body[data-page="portal"] .list-row .sb { font-size: 12px; color: var(--text-mute); }
body[data-page="portal"] .list-row .ti { font-size: 14px; }
body[data-page="portal"] .list-row .amt { font-size: 14px; font-weight: 500; }

/* Hide editorial section indices (01 / Position) and pulse dots */
body[data-page="portal"] .psec-head .idx,
body[data-page="portal"] .portal-head .crumb .pulse-dot { display: none; }

/* --- Section spacing & flat cards ---------------------------------------- */
body[data-page="portal"] .psec {
  border-top: 0;
  margin-top: 32px;
  padding-top: 0;
}
body[data-page="portal"] .psec-head {
  margin-bottom: 14px;
  padding-bottom: 8px;
}
body[data-page="portal"] .portal-head {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 24px;
  margin-bottom: 24px;
}

/* Flatten editorial cards */
body[data-page="portal"] .pgrid-2,
body[data-page="portal"] .hero-actions,
body[data-page="portal"] .coin-strip,
body[data-page="portal"] .help-grid,
body[data-page="portal"] .hours,
body[data-page="portal"] .wd-grid,
body[data-page="portal"] .ecard,
body[data-page="portal"] .notice-warn,
body[data-page="portal"] .success-block,
body[data-page="portal"] .saved-card,
body[data-page="portal"] .faq {
  border-radius: 8px;
  background: color-mix(in oklab, var(--text) 2%, transparent);
}

body[data-page="portal"] .ecard {
  background: color-mix(in oklab, var(--text) 2%, transparent);
}

/* Remove "padding-left animation" on hover for list rows */
body[data-page="portal"] .list-row:hover { padding-left: 0; background: color-mix(in oklab, var(--text) 4%, transparent); }
body[data-page="portal"] .hero-action:hover { padding-left: var(--s-5); background: color-mix(in oklab, var(--text) 4%, transparent); }

/* Pills: minimal */
body[data-page="portal"] .pill {
  font-size: 11px;
  font-weight: 500;
  text-transform: capitalize;
  border-radius: 999px;
  padding: 3px 10px;
  background: color-mix(in oklab, var(--text) 4%, transparent);
  border: 0;
  color: var(--text-soft);
}
body[data-page="portal"] .pill.approved  { background: color-mix(in oklab, var(--success) 15%, transparent); color: var(--success); }
body[data-page="portal"] .pill.pending   { background: color-mix(in oklab, var(--warning) 15%, transparent); color: var(--warning); }
body[data-page="portal"] .pill.timeout   { background: color-mix(in oklab, var(--danger) 15%, transparent); color: var(--danger); }
body[data-page="portal"] .pill.in_review { background: color-mix(in oklab, var(--signal) 15%, transparent); color: var(--signal); }
body[data-page="portal"] .pill.closed    { background: color-mix(in oklab, var(--text-mute) 15%, transparent); color: var(--text-mute); }

/* Buttons: rounded, calm */
body[data-page="portal"] .btn {
  border-radius: 6px;
  font-family: var(--font-sans);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}

/* Inputs */
body[data-page="portal"] input,
body[data-page="portal"] select,
body[data-page="portal"] textarea {
  border-radius: 6px;
  font-family: var(--font-sans);
}

/* FAQ tweaks */
body[data-page="portal"] .faq summary::after { font-family: var(--font-sans); }

/* Help-card icons: flat */
body[data-page="portal"] .help-card .ic {
  border-radius: 6px;
  color: var(--text);
}

/* Hero action circle icons: flat squares */
body[data-page="portal"] .hero-action .ic {
  border-radius: 6px;
  border-color: var(--hairline);
  color: var(--text);
}

/* Coin badge stays rounded; price flat */
body[data-page="portal"] .coin .ch.up { color: var(--success); }
body[data-page="portal"] .coin .ch.dn { color: var(--danger); }

/* Expert request panel ---------------------------------------------------- */
body[data-page="portal"] .er-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--hairline);
}
body[data-page="portal"] .er-title {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
}
body[data-page="portal"] .er-new {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
}
body[data-page="portal"] .er-new:hover { text-decoration: underline; }

body[data-page="portal"] .er-card {
  padding: 14px 16px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: color-mix(in oklab, var(--text) 2%, transparent);
  margin-bottom: 10px;
}
body[data-page="portal"] .er-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
body[data-page="portal"] .er-card-title {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--text);
  letter-spacing: -.005em;
}
body[data-page="portal"] .er-card-meta {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 4px;
  letter-spacing: 0;
  text-transform: none;
}
body[data-page="portal"] .er-card-key {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline);
  font-size: 12px;
}
body[data-page="portal"] .er-card-key span {
  font-family: var(--font-sans);
  color: var(--text-mute);
  font-weight: 500;
}
body[data-page="portal"] .er-card-key code {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: .02em;
}

/* Spinner / pulse dots in portal: hide animations to feel calm */
body[data-page="portal"] .spinner { animation: none; border-top-color: var(--text-soft); }
body[data-page="portal"] .pulse-dot { animation: none; box-shadow: none; }