.wallet-statement-page .wallet-statement { margin-block: 0 24px; }
.wallet-statement { overflow: hidden; }
.wallet-statement-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px 16px; padding: var(--panel-inset) var(--panel-inset) 0; }
.wallet-statement-head h2 { margin: 0; color: var(--home-heading); font-size: var(--text-section); line-height: var(--leading-section); font-weight: var(--weight-semibold); letter-spacing: -.025em; }
.wallet-statement-title { display: flex; align-items: center; gap: 4px; }
.wallet-statement-heading { display: grid; min-width: 0; gap: 8px; }
.wallet-value-units { display: flex; flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 3px; gap: 3px; }
.wallet-value-units button { min-width: 52px; min-height: 38px; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); font: inherit; font-size: var(--text-meta); font-weight: var(--weight-semibold); cursor: pointer; }
.wallet-value-units button[aria-pressed="true"] { color: var(--signal); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.wallet-value-units button:hover { color: var(--signal); }
.wallet-value-units button:focus-visible, .wallet-page-disconnect:focus-visible, .wallet-page-account select:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.wallet-statement-period { color: var(--muted); font-family: var(--mono); font-size: var(--text-meta); line-height: var(--leading-meta); }
.wallet-statement-value { padding: 24px var(--panel-inset) 0; }
.wallet-statement-value > a { display: block; width: fit-content; max-width: 100%; color: var(--home-heading); text-decoration: none; }
.wallet-statement-value > a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.wallet-statement-value strong { display: block; margin-top: 8px; font-family: var(--mono); font-size: var(--text-balance); line-height: var(--leading-balance); font-weight: var(--weight-normal); overflow-wrap: anywhere; }
.wallet-statement-value-label, .wallet-statement-note { color: var(--muted); font-size: var(--text-meta); line-height: var(--leading-meta); }
.wallet-statement-value-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.wallet-statement-value-label .account-value-partial { margin: 0; }
.wallet-statement-note { max-width: 76ch; margin: 12px 0 0; }
.wallet-statement-state { padding: 24px var(--panel-inset); }
.wallet-statement-state h3 { margin: 0; font-size: var(--text-body); line-height: var(--leading-body); color: var(--home-heading); font-weight: var(--weight-semibold); }
.wallet-statement-state p { max-width: 68ch; color: var(--muted); font-size: var(--text-data); line-height: var(--leading-meta); margin: 8px 0 16px; }
.wallet-statement-state .button { min-height: 44px; }
.wallet-statement-status { display: flex; align-items: flex-start; gap: 10px; }
.wallet-statement-status::before { content: ''; flex: 0 0 8px; width: 8px; height: 8px; margin-top: 8px; background: var(--signal); }
.wallet-statement-state [role="status"] { margin-bottom: 0; }
.wallet-statement-chart { margin: 24px 0 0; padding-inline: var(--panel-inset); }
.wallet-statement-chart svg { display: block; width: 100%; height: 240px; overflow: visible; touch-action: pan-y; direction: ltr; cursor: crosshair; }
.wallet-statement-chart svg:focus:not(:focus-visible) { outline: none; }
.wallet-statement-chart svg:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.wallet-chart-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.wallet-chart-axis { fill: var(--muted); font-family: var(--mono); font-size: 11px; }
.wallet-chart-line, .wallet-chart-partial-line { fill: none; stroke: var(--signal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wallet-chart-partial-line { stroke-dasharray: 6 4; }
.wallet-chart-point { fill: var(--paper); stroke: var(--signal); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; }
.wallet-chart-point.isolated { opacity: 1; }
.wallet-chart-point.partial { stroke: var(--muted); }
.wallet-chart-cursor { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.wallet-chart-selected { fill: var(--signal); stroke: var(--paper); stroke-width: 2; vector-effect: non-scaling-stroke; }
.wallet-chart-cursor, .wallet-chart-selected { pointer-events: none; }
.wallet-chart-readout { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; padding-block: 8px; font-size: var(--text-meta); line-height: var(--leading-meta); }
.wallet-chart-readout time { color: var(--muted); }
.wallet-chart-readout strong { color: var(--home-heading); font-family: var(--mono); font-weight: var(--weight-normal); }
.wallet-chart-readout span { color: var(--muted); }
.wallet-statement-chart figcaption { margin: 6px 0 20px; color: var(--muted); font-size: var(--text-caption); line-height: var(--leading-meta); }
.wallet-statement-change { padding: 24px var(--panel-inset); border-top: 1px solid var(--line); }
.wallet-statement-change-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; }
.wallet-statement-change h3 { margin: 0; color: var(--home-heading); font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-semibold); }
.wallet-statement-change-total { color: var(--home-heading); font-family: var(--mono); font-size: var(--text-metric); line-height: var(--leading-metric); overflow-wrap: anywhere; }
.wallet-statement-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 24px; margin: 24px 0 0; }
.wallet-statement-breakdown > div { min-width: 0; }
.wallet-statement-breakdown dt { color: var(--muted); font-size: var(--text-data); line-height: var(--leading-data); }
.wallet-statement-breakdown dd { margin: 8px 0 0; }
.wallet-statement-breakdown dd strong { display: block; color: var(--home-heading); font-family: var(--mono); font-weight: var(--weight-normal); font-size: var(--text-metric); line-height: var(--leading-metric); overflow-wrap: anywhere; }
.wallet-statement-breakdown dd p { margin: 8px 0 0; max-width: 42ch; color: var(--muted); font-size: var(--text-caption); line-height: var(--leading-meta); }
.wallet-statement-breakdown .wallet-metric-unknown { font-family: var(--sans); font-size: var(--text-data); line-height: var(--leading-data); }
.wallet-change-unavailable { margin-top: 20px; color: var(--muted); font-size: var(--text-meta); line-height: var(--leading-meta); }
.wallet-change-unavailable p { margin: 0; max-width: 76ch; }
.wallet-change-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 8px; }
.wallet-change-actions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--home-heading); text-decoration: underline; text-underline-offset: 3px; }
/* Details stay in the native top layer, with keyboard focus and Escape dismissal. */
.wallet-value-info, .wallet-evidence-trigger, .wallet-statement-dialog [data-statement-close] { display: inline-flex; align-items: center; justify-content: center; flex: none; border: 0; padding: 0; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.wallet-value-info { width: 36px; height: 36px; }
.wallet-value-info svg { width: 17px; height: 17px; }
.wallet-value-info svg, .wallet-evidence-trigger svg, .wallet-statement-dialog [data-statement-close] svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wallet-evidence-trigger { min-height: 32px; margin-block: -4px; gap: 5px; text-align: start; text-decoration: underline; text-decoration-color: var(--line-strong, var(--muted)); text-underline-offset: 4px; }
.wallet-evidence-trigger svg { width: 14px; height: 14px; flex: none; }
[dir="rtl"] .wallet-evidence-trigger svg { transform: rotate(180deg); }
.wallet-value-info:hover, .wallet-evidence-trigger:hover, .wallet-statement-dialog [data-statement-close]:hover { color: var(--signal); }
.wallet-value-info:focus-visible, .wallet-evidence-trigger:focus-visible, .wallet-statement-dialog :is(button, a):focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.wallet-statement-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; margin: auto; padding: 0; border: 1px solid var(--line-strong, var(--muted)); border-radius: var(--radius); background: var(--paper); color: var(--ink); font-family: var(--sans); overflow-y: auto; overscroll-behavior: contain; }
#wallet-value-info { width: min(480px, calc(100vw - 32px)); }
.wallet-statement-dialog::backdrop { background: rgb(23 35 32 / .56); }
.wallet-statement-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 12px; position: sticky; top: 0; z-index: 1; background: var(--paper); }
.wallet-statement-dialog h2 { margin: 0; color: var(--home-heading); font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-semibold); letter-spacing: -.025em; }
.wallet-statement-dialog [data-statement-close] { width: 44px; height: 44px; margin-inline-end: -8px; }
.wallet-statement-dialog [data-statement-close] svg { width: 22px; height: 22px; }
.wallet-statement-dialog-content { padding: 0 20px 20px; }
.wallet-statement-dialog-content p, .wallet-statement-dialog-content ul { color: var(--muted); font-size: var(--text-meta); line-height: var(--leading-meta); }
.wallet-statement-dialog-content p { margin: 0 0 14px; }
.wallet-statement-dialog-content p:last-child { margin-bottom: 0; }
.wallet-statement-dialog-content > ul:not(.wallet-statement-evidence-list) { padding-inline-start: 20px; }
.wallet-statement-dialog-content li + li { margin-top: 6px; }
.wallet-statement-dialog-content p a { color: var(--home-heading); text-decoration: underline; text-underline-offset: 3px; }
.wallet-statement-freshness { margin-top: 12px; }
.wallet-statement-freshness p { margin: 0; color: var(--muted); font-size: var(--text-meta); line-height: var(--leading-meta); }
.wallet-statement-freshness .button { min-height: 44px; margin-top: 12px; }
.wallet-statement-evidence-list { list-style: none; padding: 0; margin: 0 0 16px; }
.wallet-statement-evidence-list li { border-top: 1px solid var(--line); }
.wallet-statement-evidence-list a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); gap: 8px 24px; padding-block: 14px; color: var(--home-heading); }
.wallet-statement-evidence-list a:hover .wallet-evidence-title { text-decoration: underline; text-underline-offset: 3px; }
.wallet-evidence-title { display: block; font-size: var(--text-data); line-height: var(--leading-data); }
.wallet-statement-evidence-list time, .wallet-evidence-id { display: block; margin-top: 4px; font-family: var(--mono); font-size: var(--text-caption); line-height: var(--leading-meta); color: var(--muted); }
.wallet-evidence-amount { text-align: end; font-family: var(--mono); font-size: var(--text-data); line-height: var(--leading-data); overflow-wrap: anywhere; }
.wallet-page-account { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: var(--text-meta); }
.wallet-page-account select { min-height: 36px; max-width: 100%; padding: 6px 28px 6px 8px; color: var(--home-heading); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); font-family: var(--mono); font-size: var(--text-meta); cursor: pointer; }
.wallet-page-disconnect { min-height: 36px; border: 0; padding: 6px 0; background: transparent; color: var(--red); font: inherit; font-size: var(--text-meta); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.wallet-page-disconnect:hover { color: color-mix(in srgb, var(--red) 80%, var(--ink)); }
.wallet-page-disconnect:focus-visible { outline-color: var(--red); }
.wallet-pending { padding: 24px var(--panel-inset); margin-top: 24px; }
.wallet-pending h2 { margin: 0 0 16px; font-size: var(--text-body); font-weight: var(--weight-semibold); }
.wallet-placeholder { background: var(--line); border-radius: var(--radius); }
.wallet-placeholder-value { width: min(220px, 60%); height: 40px; }
.wallet-placeholder-chart { height: 240px; margin-top: 24px; opacity: .4; }
.wallet-notes { padding: var(--panel-inset); text-align: start; }
.wallet-notes h2 { margin: 0 0 16px; color: var(--home-heading); font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--weight-semibold); }
.wallet-gas-reserve { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: var(--text-meta); line-height: var(--leading-meta); }
.wallet-gas-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.wallet-gas-amount h3 { margin: 0; color: var(--home-heading); font: inherit; }
.wallet-gas-reserve strong { color: var(--home-heading); font-family: var(--mono); font-weight: var(--weight-normal); overflow-wrap: anywhere; }
.wallet-gas-note { max-width: 76ch; margin: 0; color: var(--muted); font-size: var(--text-meta); line-height: var(--leading-meta); }
.wallet-gas-low .wallet-gas-note { color: var(--amber); }
.wallet-statement-page .wallet-holdings-group { margin-top: 24px; }
.wallet-holdings-group .wallet-holdings { border-top: 1px solid var(--line); }
.wallet-statement-page > .telegram-alert-link { margin-block: 24px; }
@media (max-width: 600px) {
  .wallet-statement-value { padding-top: 20px; }
  .wallet-statement-breakdown { grid-template-columns: 1fr; gap: 0; margin-top: 16px; }
  .wallet-statement-breakdown > div { padding-block: 16px; border-top: 1px solid var(--line); }
  .wallet-statement-breakdown > div:last-child { padding-bottom: 0; }
  .wallet-statement-breakdown dd strong { font-size: var(--text-section); line-height: var(--leading-section); }
  .wallet-statement-breakdown dd p { max-width: none; }
  .wallet-statement-evidence-list a { gap: 8px 12px; }
}
