/* ============================================================
   RAI Brain — Customer Portal stylesheet
   Extends site.css. Adds: auth panels, account meta, library
   grid with lock / processing / unlocked states, ledger,
   inline form errors, signal lines.

   Same visual language as the public site (verakovaleva system).
   No framework, no build step.
   ============================================================ */

/* ============================================================
   Portal-only tokens
   ============================================================ */
:root {
  --portal-panel-w:     min(520px, 100%);
  --portal-panel-w-lg:  min(760px, 100%);

  --signal-green:       #7cc4d6;
  --signal-amber:       #f5b487;
  --signal-rose:        #f297c8;

  --status-paid:        rgba(124, 196, 214, 0.42);
  --status-pending:     rgba(245, 180, 135, 0.42);
  --status-failed:      rgba(242, 151, 200, 0.42);
  --status-locked:      var(--line-2);
}

/* ============================================================
   Page-head: narrow variant for portal entry pages
   ============================================================ */
.portal-head {
  padding-block: clamp(96px, 14vw, 168px) clamp(36px, 5vw, 64px);
  text-align: left;
}
.portal-head__index {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.portal-head__index::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--ink-3);
}
.portal-head h1 {
  font-size: clamp(36px, 5vw, 64px);
  max-width: 22ch;
  letter-spacing: -0.035em;
  line-height: 1;
}
.portal-head p.lede {
  margin-top: 22px;
  max-width: 58ch;
  font-size: 20px;
  font-weight: 400;
}

/* ============================================================
   Animated signal line — subtle motion, used inside auth panels
   and as section dividers in the portal. One pixel of light
   crawls horizontally; matches the "strategic terminal" feel.
   ============================================================ */
.signal-line {
  position: relative;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.signal-line::after {
  content: "";
  position: absolute;
  top: 0; left: -30%;
  width: 30%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(220, 232, 250, 0.0) 10%,
    rgba(220, 232, 250, 0.55) 50%,
    rgba(220, 232, 250, 0.0) 90%,
    transparent 100%);
  animation: signal-sweep 6.5s linear infinite;
}
@keyframes signal-sweep {
  0%   { transform: translateX(0); }
  100% { transform: translateX(440%); }
}
@media (prefers-reduced-motion: reduce) {
  .signal-line::after { animation: none; }
}

/* ============================================================
   Auth shell — narrow centered panel for login / signup /
   forgot / reset. Uses the same gradient-border idiom as .form.
   ============================================================ */
.auth-stage {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(48px, 7vw, 96px);
  padding-block: clamp(48px, 8vw, 120px) clamp(72px, 10vw, 140px);
}
@media (min-width: 960px) {
  .auth-stage { grid-template-columns: 5fr 7fr; }
  .auth-stage--reverse { grid-template-columns: 7fr 5fr; }
  .auth-stage--reverse .auth-panel { justify-self: start; }
  .auth-stage--reverse .auth-stage__lede { padding-top: 8px; }
}
.auth-stage__lede h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}
.auth-stage__lede p {
  color: var(--ink-2);
  max-width: 36ch;
}
.auth-stage__lede .mono {
  display: block;
  margin-top: 28px;
  color: var(--ink-3);
}

.auth-panel {
  width: 100%;
  max-width: var(--portal-panel-w);
  justify-self: end;
  position: relative;
  display: grid; gap: 22px;
  border-radius: var(--r-md);
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(var(--line-2), var(--line-2)) border-box;
  border: 1.5px solid transparent;
  padding: clamp(28px, 4vw, 44px);
  transition: background var(--t-fast) var(--ease);
  isolation: isolate;
}
.auth-panel::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(420px 280px at 100% 0%, rgba(197, 146, 235, 0.08), transparent 60%),
    radial-gradient(420px 280px at 0% 100%, rgba(138, 174, 232, 0.08), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.auth-panel:focus-within,
.auth-panel:hover {
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    var(--rai-grad) border-box;
}
@media (min-width: 960px) {
  .auth-panel { justify-self: end; }
}
@media (max-width: 959px) {
  .auth-panel { justify-self: stretch; max-width: 100%; }
}

.auth-panel__head {
  display: grid; gap: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.auth-panel__id {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-3);
}
.auth-panel__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.02em;
  color: var(--ink-0);
  margin: 0;
}

.auth-panel__foot {
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
}
.auth-panel__foot a {
  color: var(--ink-1);
  border-bottom: 1px solid var(--line-2);
  padding-bottom: 2px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.auth-panel__foot a:hover {
  color: var(--ink-0);
  border-bottom-color: var(--line-hot);
}

/* Block-width primary submit inside auth panels */
.btn--block {
  width: 100%;
  justify-content: center;
  padding: 16px 22px;
  font-size: 20px;
  letter-spacing: 0.22em;
}

/* ============================================================
   Form: error / system feedback
   ============================================================ */
.form__error {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--signal-rose);
  margin-top: 4px;
  display: none;
}
.form__error.is-on { display: block; }

.form__system {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
  padding: 14px 16px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  display: none;
}
.form__system.is-on   { display: block; }
.form__system--ok     { color: var(--signal-green); border-color: var(--status-paid); }
.form__system--warn   { color: var(--signal-amber); border-color: var(--status-pending); }
.form__system--error  { color: var(--signal-rose);  border-color: var(--status-failed); }

/* Password field + show/hide toggle */
.form__password {
  position: relative;
}
.form__password input { padding-right: 56px; }
.form__password-toggle {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.form__password-toggle:hover {
  color: var(--ink-0);
  border-color: var(--line-2);
}

/* ============================================================
   Account header — identity strip on /account and /library
   ============================================================ */
.account-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  padding-block: 28px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(40px, 5vw, 64px);
}
@media (min-width: 720px) {
  .account-strip {
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 32px;
  }
}
.account-strip__identity {
  display: grid; gap: 6px;
}
.account-strip__handle {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.account-strip__handle::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rai-grad);
  box-shadow: 0 0 12px rgba(197, 146, 235, 0.55);
}
.account-strip__email {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: -0.022em;
  color: var(--ink-0);
  margin: 0;
  line-height: 1.1;
  word-break: break-all;
}
.account-strip__actions {
  display: flex; gap: 12px; flex-wrap: wrap;
}

/* Account meta grid (status / member since / entitlements) */
.account-meta {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
  margin-bottom: clamp(40px, 6vw, 72px);
}
@media (min-width: 640px)  { .account-meta { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .account-meta { grid-template-columns: repeat(3, 1fr); } }
.account-meta__cell {
  position: relative;
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(var(--line-2), var(--line-2)) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  padding: 24px 26px;
  display: grid; gap: 10px;
  transition: background var(--t-fast) var(--ease), transform var(--t-med) var(--ease);
}
.account-meta__cell:hover {
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    var(--rai-grad) border-box;
  transform: translateY(-2px);
}
.account-meta__label {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-3);
}
.account-meta__value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.018em;
  color: var(--ink-0);
  line-height: 1.1;
}
.account-meta__sub {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
}

/* ============================================================
   Library — grid of map cards
   Cards adopt one of four states via data-state:
     public      → free, always open
     locked      → not purchased
     processing  → payment received, webhook pending
     unlocked    → entitlement confirmed
   ============================================================ */
.library {
  display: grid; gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px)  { .library { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .library { grid-template-columns: repeat(3, 1fr); } }

.map-card {
  position: relative;
  display: flex; flex-direction: column;
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(var(--line-2), var(--line-2)) border-box;
  border: 1.5px solid transparent;
  border-radius: var(--r-md);
  overflow: hidden;
  isolation: isolate;
  min-height: 420px;
  transition: background var(--t-fast) var(--ease), transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.map-card:hover {
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    var(--rai-grad) border-box;
  transform: translateY(-2px);
  box-shadow: var(--glow-card);
}

.map-card__preview {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 30% 20%, rgba(138, 174, 232, 0.20), transparent 55%),
    radial-gradient(circle at 80% 90%, rgba(197, 146, 235, 0.18), transparent 55%),
    linear-gradient(180deg, #0d1117, #06070a);
}
.map-card__preview iframe {
  position: absolute;
  top: 0; left: 0;
  width: 200%; height: 200%;
  border: 0;
  display: block;
  transform: scale(0.5);
  transform-origin: top left;
  pointer-events: none;
  filter: saturate(0.92) brightness(0.92);
  transition: filter var(--t-slow) var(--ease);
}
.map-card:hover .map-card__preview iframe {
  filter: saturate(1.05) brightness(1.02);
}
.map-card__preview::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 40%, transparent 90%);
  pointer-events: none;
}

/* Lock veil — covers preview when entitlement is missing */
.map-card__veil {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(6,7,10,0.55) 0%, rgba(6,7,10,0.88) 100%);
  z-index: 2;
  backdrop-filter: blur(4px) saturate(120%);
  -webkit-backdrop-filter: blur(4px) saturate(120%);
}
.map-card[data-state="locked"] .map-card__veil,
.map-card[data-state="processing"] .map-card__veil {
  display: flex;
}
.map-card__veil-glyph {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--surface);
}
.map-card__veil-glyph svg { width: 16px; height: 16px; }
.map-card__veil-label {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-2);
}

/* Body & footer */
.map-card__body {
  padding: 22px 24px 18px;
  display: grid; gap: 12px;
}
.map-card__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
}
.map-card__id {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-3);
}
.map-card__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.018em;
  color: var(--ink-0);
  margin: 4px 0 0;
  line-height: 1.15;
}
.map-card__desc {
  color: var(--ink-2);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  max-width: 38ch;
}

.map-card__foot {
  margin-top: auto;
  padding: 16px 24px 20px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px;
}
.map-card__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink-0);
}
.map-card__price small {
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-left: 6px;
}

/* State-aware action button — handled via data-state on .map-card */
.map-card__action { white-space: nowrap; }

/* State pill (top-right corner of preview) */
.map-card__state {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.24em; text-transform: uppercase;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: rgba(6, 7, 10, 0.72);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.map-card__state::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.map-card[data-state="public"]     .map-card__state { color: var(--signal-green); border-color: var(--status-paid); }
.map-card[data-state="unlocked"]   .map-card__state { color: var(--signal-green); border-color: var(--status-paid); }
.map-card[data-state="locked"]     .map-card__state { color: var(--ink-3);        border-color: var(--status-locked); }
.map-card[data-state="processing"] .map-card__state { color: var(--signal-amber); border-color: var(--status-pending); }

/* ============================================================
   Banner — used for status messages on /library and
   /account.html?purchase=success (post-Mollie redirect).
   ============================================================ */
.banner {
  position: relative;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--bg-1), var(--bg-1)) padding-box,
    linear-gradient(var(--line-2), var(--line-2)) border-box;
  padding: 22px 26px;
  display: grid; gap: 6px;
  margin-bottom: clamp(32px, 4vw, 48px);
  overflow: hidden;
}
.banner__id {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 10px;
}
.banner__id::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.banner__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 22px);
  letter-spacing: -0.014em;
  color: var(--ink-0);
  margin: 0;
}
.banner__body {
  color: var(--ink-2);
  font-size: 20px;
  margin: 0;
  max-width: 60ch;
}
.banner--ok      { background: linear-gradient(var(--bg-1), var(--bg-1)) padding-box, linear-gradient(var(--status-paid),    var(--status-paid))    border-box; }
.banner--ok      .banner__id { color: var(--signal-green); }
.banner--info    { background: linear-gradient(var(--bg-1), var(--bg-1)) padding-box, linear-gradient(rgba(138,174,232,.42), rgba(138,174,232,.42)) border-box; }
.banner--info    .banner__id { color: var(--signal); }
.banner--warn    { background: linear-gradient(var(--bg-1), var(--bg-1)) padding-box, linear-gradient(var(--status-pending), var(--status-pending)) border-box; }
.banner--warn    .banner__id { color: var(--signal-amber); }
.banner--error   { background: linear-gradient(var(--bg-1), var(--bg-1)) padding-box, linear-gradient(var(--status-failed),  var(--status-failed))  border-box; }
.banner--error   .banner__id { color: var(--signal-rose); }

/* ============================================================
   Ledger — purchases / transactions list
   ============================================================ */
.ledger {
  display: grid; gap: 0;
  border-top: 1px solid var(--line);
}
.ledger__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: padding-left var(--t-med) var(--ease);
}
.ledger__row:hover { padding-left: 12px; }
@media (min-width: 720px) {
  .ledger__row {
    grid-template-columns: 160px 1fr 140px 120px;
    gap: 28px;
  }
}
.ledger__when {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
}
.ledger__what {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--ink-0);
  margin: 0;
}
.ledger__what small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-3);
}
.ledger__amount {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--ink-1);
}
@media (min-width: 720px) { .ledger__amount { text-align: right; } }
.ledger__status {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.ledger__status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.ledger__status[data-status="paid"]    { color: var(--signal-green); }
.ledger__status[data-status="pending"] { color: var(--signal-amber); }
.ledger__status[data-status="failed"]  { color: var(--signal-rose);  }
.ledger__status[data-status="refunded"]{ color: var(--ink-3); }

/* Empty-state row for ledger / library */
.empty-state {
  padding: 40px 0;
  text-align: left;
  display: grid; gap: 8px;
  color: var(--ink-3);
}
.empty-state__id {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 400;
  letter-spacing: 0.28em; text-transform: uppercase;
}
.empty-state__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.014em;
  color: var(--ink-1);
  margin: 0;
}
.empty-state__body {
  color: var(--ink-2);
  font-size: 20px;
  max-width: 60ch;
  margin: 0;
}

/* ============================================================
   Mobile tightening
   ============================================================ */
@media (max-width: 720px) {
  .auth-panel { padding: 24px 22px; }
  .map-card { min-height: 360px; }
  .map-card__body { padding: 18px 20px 14px; }
  .map-card__foot { padding: 14px 20px 18px; }
  .map-card__title { font-size: 20px; }
  .account-strip { padding-block: 24px; }
}

/* ============================================================
   Portal form inputs — light background, dark text.

   The cinematic dark inputs from site.css made typed text appear
   as a low-contrast wash on the dark fill, especially with the
   light font weight. Portal forms override that with a near-white
   field and near-black text — same "white card on dark page"
   pattern used by Stripe / Linear. Only applies on pages that
   load portal.css (auth / account / library), so briefing.html
   and contact.html keep their original treatment.
   ============================================================ */
.form input[type="text"],
.form input[type="email"],
.form input[type="password"],
.form select,
.form textarea {
  color: #0a0b0e;
  font-weight: 400;
  background:
    linear-gradient(#f4f5f8, #f4f5f8) padding-box,
    linear-gradient(var(--line-2), var(--line-2)) border-box;
  caret-color: #0a0b0e;
}
.form input[type="text"]::placeholder,
.form input[type="email"]::placeholder,
.form input[type="password"]::placeholder,
.form textarea::placeholder { color: #6a7080; }

.form input[type="text"]:hover,
.form input[type="email"]:hover,
.form input[type="password"]:hover,
.form select:hover,
.form textarea:hover,
.form input[type="text"]:focus,
.form input[type="email"]:focus,
.form input[type="password"]:focus,
.form select:focus,
.form textarea:focus {
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    var(--rai-grad) border-box;
}

/* Safari / Chrome autofill: by default paints a yellow / off-white
   background and inherits the system colour, which on dark themes
   read as the same low-contrast wash. Force the portal palette. */
.form input:-webkit-autofill,
.form input:-webkit-autofill:hover,
.form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #0a0b0e;
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
  box-shadow: 0 0 0 1000px #ffffff inset;
  caret-color: #0a0b0e;
}

/* ============================================================
   Print: portal pages should not print at all.
   ============================================================ */
@media print {
  .auth-panel, .map-card, .account-meta__cell, .ledger { display: none; }
}