/*
 * dashboard.css: /dashboard and /points. Orbio's own utility and module classes (orbio.css, workspace.css) do
 * the layout; this file only adds the few page pieces orbio drew with images or inline styles, the PonModel
 * brand touches, and local fixes for generated rules (see notes/dashboard.md).
 */

/* ------------------------------------------------------------------ header */

/* the header is tools/snippets/header-plain.html; its one-row phone rules (.pm-hp-*) live in pm.css */

/* ------------------------------------------------------------------ grid */

/* signed in, the grid keeps its lines behind the identity row and fades out under the workspace; the +
   crosshairs stay on the gate only (they read as clutter between the cards) */
.holder-dashboard:has(#dash-account:not([hidden])) .dashboard-grid {
  --pm-grid-mask: linear-gradient(transparent, #000 100px, #000 240px, transparent 560px);
  background-image:
    linear-gradient(var(--pm-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--pm-grid) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
}

/* ------------------------------------------------------------------ gate */

/* orbio's gate is bare text on the grid; ours sits in the HUD frame, same position (py-12 + py-12 = orbio's py-24) */
.dash-gate .pm-hud { box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .8); }
.dash-gate p { text-wrap: balance; }
.dash-gate .pm-hud::after { --hud-x: 22px; }

/* ------------------------------------------------------------------ workspace */

/* folder tabs: orbio's inactive tab is the darker one and the active tab joins the balance card, covering the
   card's top border (the retheme inverted the two tones) */
.credit-workspace-module__n4baba__folderTab { background: #0c0a08; }
.credit-workspace-module__n4baba__folderTab:hover { background: #0e0b09; }
.credit-workspace-module__n4baba__folderTabOn,
.credit-workspace-module__n4baba__folderTabOn:hover { position: relative; z-index: 2; background: #0f0c0a; }

/* the key panel wears the banner's HUD frame (a quiet one, inside the folder's activated pane) */
.dash-key-hud { --hud-x: 16px; padding: 16px 18px 18px; background: rgba(250, 109, 1, .025); }

/* the example tag sits where orbio's card heading keeps a quiet span */
.credit-workspace-module__n4baba__cardHeading > .pm-tag { color: var(--pm-ink-3); font-size: 10px; }

/* revealed, the example key wraps instead of ending in an ellipsis */
.dash-key-open { white-space: normal; overflow: visible; text-overflow: clip; word-break: break-all; }

/* selected states the retheme flattened: the order-type pill, the chosen book level, auto-list "On" */
.credit-workspace-module__n4baba__marketModes > button[aria-pressed=true] {
  background: var(--pm-bg-3);
  box-shadow: inset 0 0 0 1px var(--pm-line-strong);
  color: var(--pm-ink);
}
/* the sell ticket's two fields share a row only when the amount field can show a full balance (250.00 CREDIT +
   Max needs about 190px): on a narrower ticket (phones, and the two-column dashboard from 768 to about 880px)
   Amount and Discount stack */
#sell-form { container-type: inline-size; }
@container (max-width: 359.98px) {
  .credit-workspace-module__n4baba__sellInputs { grid-template-columns: minmax(0, 1fr); }
}

/* the order book title keeps one line; the total and its sample tag wrap beside it */
.credit-workspace-module__n4baba__marketHeading > h2 { flex-shrink: 0; white-space: nowrap; }
.credit-workspace-module__n4baba__bookSelected { background: rgba(250, 109, 1, .08); }
.credit-workspace-module__n4baba__autoStateOn { background: var(--pm-tint); border-color: var(--pm-line-strong); color: var(--pm-ember); }

/* final actions stay locked until launch: a clear locked button instead of orbio's .45 opacity on orange */
.credit-workspace-module__n4baba__workspace .credit-workspace-module__n4baba__primary:disabled,
.credit-workspace-module__n4baba__dialog .credit-workspace-module__n4baba__primary:disabled {
  opacity: 1;
  background: var(--pm-tint);
  border-color: var(--pm-line-strong);
  color: var(--pm-ink-2);
}

/* neon focus ring (orbio's #8e4400 retheme is under 3:1 on these panels); orbio's width and offset stay */
.credit-workspace-module__n4baba__workspace :is(button, a, input, summary, select):focus-visible,
.credit-workspace-module__n4baba__dialog :is(button, input, select, a):focus-visible,
.holder-dashboard :is(button, a, input, select, summary, [tabindex]):focus-visible { outline-color: var(--pm-orange); }
/* inside the two scrollers (setup tabs, book levels) an outer ring is clipped: draw it just inside the control */
#setup-tabs :is(button, a, [tabindex]):focus-visible,
#book-levels :is(button, a, [tabindex]):focus-visible { outline-offset: -2px; }
/* the setup tabs scroll sideways in a phone-width dialog: a fade at the right edge says so, and 28px of room at
   the end lets the last tab scroll clear of it */
@media (max-width: 29.99rem) {
  #setup-tabs {
    padding-right: 28px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  }
}

/* orbio's USDG token image, drawn inline */
.dash-usdg { display: grid; place-items: center; width: 28px; height: 28px; }
.dash-usdg svg { display: block; }

/* points banner: tokens instead of orbio's dark taupe, the notice line and the share button */
.points-card-dark {
  background: radial-gradient(at 95% 10%, rgba(250, 109, 1, .16), transparent 60%), var(--pm-bg-2);
  border-color: var(--pm-line-strong);
}
.points-leaderboard-banner .points-art-orbit,
.points-card-dark .points-art-orbit { border-color: rgba(255, 138, 43, .3); }
.dash-points-note { display: block; color: #b9a594; font-size: 11px; line-height: 1.4; }
.dash-share { color: var(--pm-orange-2); }

/* the banner's value is a plain span, not number-flow: keep orbio's metrics */
.banner-module__ZD8GGq__value .points-number { line-height: 1; }

/* $PONMODEL staking (shortcut and panel): tokens instead of orbio's dark taupe, orange rings, a molten touch */
.credit-workspace-module__n4baba__staking {
  background: radial-gradient(at 100% 0, rgba(250, 109, 1, .16), transparent 65%), var(--pm-bg-2);
  border-color: var(--pm-line-strong);
}
.credit-workspace-module__n4baba__staking::after {
  background: repeating-radial-gradient(at 105% -5%, transparent 0 23px, rgba(250, 109, 1, .08) 24px 25px, transparent 26px 48px);
}
.credit-workspace-module__n4baba__stakingSlot .credit-workspace-module__n4baba__staking::before {
  background: url(/assets/img/lava.webp) center / cover no-repeat;
  opacity: .07;
}
/* orbio's gold fill on the dark card: a molten tint with an ember label (its #261a0e vanished on bg-2) */
.credit-workspace-module__n4baba__staking .credit-workspace-module__n4baba__goldButton {
  background: var(--pm-tint-2);
  box-shadow: inset 0 0 0 1px var(--pm-line-strong);
  color: var(--pm-ember);
}
.credit-workspace-module__n4baba__staking .credit-workspace-module__n4baba__goldButton:hover { background: #4a2a14; }
.credit-workspace-module__n4baba__workspace .credit-workspace-module__n4baba__staking .credit-workspace-module__n4baba__goldButton:disabled {
  opacity: 1;
  background: var(--pm-tint);
  color: var(--pm-ink-2);
}
.credit-workspace-module__n4baba__staking .credit-workspace-module__n4baba__darkButton,
.credit-workspace-module__n4baba__stakeInput { border-color: var(--pm-line-strong); }
.credit-workspace-module__n4baba__staking :is(.credit-workspace-module__n4baba__autoListLine, .credit-workspace-module__n4baba__rewardHistory) { border-top-color: var(--pm-line); }
/* the staking status is a phrase, not orbio's number: on phones it gets its own line under the eyebrow */
.credit-workspace-module__n4baba__stakingTop > .credit-workspace-module__n4baba__eyebrow { white-space: nowrap; }
@media (max-width: 39.99rem) {
  .credit-workspace-module__n4baba__stakingTop { flex-wrap: wrap; row-gap: 4px; }
  .credit-workspace-module__n4baba__stakingTop > img { order: 1; }
  .credit-workspace-module__n4baba__stakingTop > .credit-workspace-module__n4baba__stakeTotal { order: 2; flex-basis: 100%; margin-left: 0; }
}

/* analytics dialog: zeroed tiles, orbio's sales summary shape */
.dash-kpis { margin: 18px 0 16px; }
.dash-kpis dd { font-size: 24px; }

/* setup guide: the head picker */
.dash-select {
  color: var(--pm-ink);
  max-width: 100%;
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ff8a2b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  cursor: pointer;
}
.dash-select option { background: var(--pm-bg-2); color: var(--pm-ink); }
.dash-snippet pre { tab-size: 2; }

/* share dialog (orbio's light buttons, rethemed) */
.dash-share-frame { background: #0b0908; color: var(--pm-orange-2); border: 1px solid var(--pm-line); }
.dash-share-frame img { display: block; }
.dash-share-copy { background: var(--pm-orange); color: var(--pm-on-orange); font-weight: 500; }
.dash-share-copy:not(:disabled):hover { background: var(--pm-orange-2); }
.dash-share-dl { border-color: var(--pm-line-strong); color: var(--pm-ink); }
.dash-share-dl:hover { background: rgba(250, 109, 1, .08); }
.dash-share-status { color: var(--pm-ink-3); }

/* dialogs keep the page from scrolling behind them */
.credit-workspace-module__n4baba__dialog[open],
.confirm-dialog[open],
.points-share-dialog[open] { overscroll-behavior: contain; }
/* orbio's confirm entrance ends on an identity transform (fill-mode both), which makes the dialog the
   containing block of the fixed toast region moved into it: keep the fill to the start only */
.confirm-dialog[open] { animation-fill-mode: backwards; }

/* the preview line keeps its dot on the first line on phones (orbio's copy is shorter than ours) */
.credit-workspace-module__n4baba__previewNote > p { flex: 1 1 0; min-width: 12rem; }

/* orbio's copy buttons turn bronze with a check for 1.6 s; the shell sets data-copied */
.holder-dashboard [data-copied],
dialog [data-copied] { color: var(--pm-orange-2); }

/* phones: orbio's 28 to 36px icon controls get a 40px hit area (drawn outside the box, layout unchanged).
   In tight rows (the identity row, the key row, the discount counter: 4px gaps) the area may only grow
   sideways by half the gap (--dash-hit-x), so it never lands on the neighbouring control or text. */
@media (max-width: 39.99rem) {
  .dash-hit { position: relative; }
  .dash-hit::after {
    content: "";
    position: absolute;
    top: min(0px, calc(50% - 20px));
    bottom: min(0px, calc(50% - 20px));
    left: max(min(0px, calc(50% - 20px)), var(--dash-hit-x, -20px));
    right: max(min(0px, calc(50% - 20px)), var(--dash-hit-x, -20px));
  }
  #dash-copy-address, #dash-explorer, #key-reveal, #key-copy, #key-replace,
  .credit-workspace-module__n4baba__discountCounter > .dash-hit { --dash-hit-x: -2px; }
  .credit-workspace-module__n4baba__rewardHistory summary { padding-block: 10px; }
  /* rows and tabs that sit edge to edge grow to 40px; single buttons keep their look and reach 40px */
  .credit-workspace-module__n4baba__marketModes > button,
  .credit-workspace-module__n4baba__marketCard .credit-workspace-module__n4baba__bookPick { min-height: 40px; }
  .points-dark-cta,
  .credit-workspace-module__n4baba__goldButton,
  .credit-workspace-module__n4baba__buyButton,
  .credit-workspace-module__n4baba__secondary,
  .credit-workspace-module__n4baba__folderTab { position: relative; }
  .points-dark-cta::after,
  .credit-workspace-module__n4baba__goldButton::after,
  .credit-workspace-module__n4baba__buyButton::after,
  .credit-workspace-module__n4baba__secondary::after,
  .credit-workspace-module__n4baba__folderTab::after {
    content: "";
    position: absolute;
    inset: min(0px, calc(50% - 20px)) 0;
  }
  .swap-dialog-module__zTxCzG__token { position: relative; }
  .swap-dialog-module__zTxCzG__token::before { content: ""; position: absolute; inset: min(0px, calc(50% - 20px)) 0; }
}
/* phone tickets (one column, so there is room): the discount steppers and the value are 40px targets */
@container (max-width: 359.98px) {
  .credit-workspace-module__n4baba__discountCounter > button { width: 40px; height: 40px; }
  .credit-workspace-module__n4baba__discountValue input { height: 40px; }
}

/* ------------------------------------------------------------------ points page */

/* orbio's table card is bg-white (a raised --pm-bg-2 panel since the retheme fix); the card keeps its surface
   and a hairline border here as well */
.pts-card { background-color: var(--pm-bg-2); border-color: var(--pm-line); }
.pts-card thead tr { background-color: #0c0a08; border-color: var(--pm-line); }
/* orbio's light row rules (#ece9e3) retheme to near-black; keep them visible on the dark card */
.pts-card tbody tr { border-color: rgba(250, 109, 1, .09); }
/* the identicon tile, visible on the dark card like orbio's light tile on white */
.pts-card tbody svg { background: var(--pm-bg-3); border-color: var(--pm-line-strong); }

/* account cell: identicon + short account, no full address exists for sample rows */
.pts-acct { min-height: 28px; }   /* orbio's row height came from its 28px icon buttons */
.pts-tag { text-transform: none; letter-spacing: .02em; margin-block: -4px; vertical-align: 1px; }
.pts-soon { cursor: default; }
/* narrow phones: SOON rides above "Credit leaderboard" so both tabs keep one row, like orbio's */
@media (max-width: 22.49rem) {
  .pts-soon { position: relative; }
  .pts-soon > .pm-soon { position: absolute; right: 0; bottom: calc(100% + 3px); }
}
/* signed in, the account chip joins orbio's points header; on phones "Back to dashboard" steps aside (the chip
   menu links to the dashboard), the same rule as header-plain's leaderboard link */
.pts-head-link { white-space: nowrap; }
@media (max-width: 39.99rem) {
  .pts-head-right:has(> [data-wallet-chip]:not([hidden])) > .pts-head-link { display: none; }
}
/* the header link and the tabs get a taller hit area on phones */
@media (max-width: 39.99rem) {
  .pts-head-link, .pts-tab { padding-block: 11px; margin-block: -11px; }
}

/* orbio's calm dark band: tokens instead of its taupe, a faint wash of the brand banner's lava, a dark pool
   behind the star. The lava box runs 32px past the right edge (clipped by the band); lava.webp no longer
   carries the banner frame's dark block, so this only keeps the reviewed composition. */
.points-leaderboard-banner { background: radial-gradient(at 80% 10%, rgba(250, 109, 1, .14), transparent 60%), var(--pm-bg-2); }
.pts-lava {
  right: -32px;
  opacity: .3;
  background:
    radial-gradient(260px 190px at 72% 44%, rgba(11, 9, 8, .92), rgba(11, 9, 8, .55) 55%, transparent),
    linear-gradient(90deg, rgba(11, 9, 8, .82) 0%, rgba(11, 9, 8, .35) 45%, rgba(11, 9, 8, .15) 100%),
    url(/assets/img/lava.webp) center / cover no-repeat;
}
.points-leaderboard-banner > .pts-lava + div { position: relative; }