/* Surface ownership for the web and app design previews.
   Only named components adopt a role. Asset cards, imagery, saved controls,
   Pull stages, Points totals and provider branding keep their existing recipes. */
@import url('palette.css?v=border-roles-1&neutral=info-payment-tones-1');
@import url('credits/amount.css?v=signet-1&theme=info-payment-tones-1');
@import url('activity.css?v=surface-system-1&surfaces=9&theme=info-payment-tones-1&activity-review=20261111-7');
@import url('detail-panels.css?v=detail-panels-1&theme=info-payment-tones-1');

:root {
  --surface-analytics: var(--palette-white);
  --surface-record: var(--palette-white);
  --surface-task: var(--palette-white);
  --surface-content: var(--palette-sand);
  --surface-summary: var(--palette-sand);
  --surface-inset: var(--palette-gray);
  --surface-overlay: var(--palette-white);
  --surface-border: var(--palette-line);
  --surface-selected: var(--tone-kelly);
  --elevation-flat: none;
  --elevation-content: 0 14px 44px color-mix(in srgb, var(--palette-shadow) 8%, transparent);
  --elevation-overlay: 0 16px 48px color-mix(in srgb, var(--palette-shadow) 16%, transparent);
  --shadow-surface-cream: var(--elevation-content);
}
/* The aliases bridge existing components to the role API. New components can
   declare data-surface directly; layout and responsive geometry stay local. */
:root body :is([data-surface='analytics'], .cv-card, .cv-mix, .oa-outcomes-card,
  .app-analytics-disclosure, .release-pulse-chart, .release-market-activity) {
  background: var(--surface-analytics); border-color: var(--surface-border); box-shadow: var(--elevation-flat);
}
:root body :is([data-surface='record'], .hist-card:not(.wallet-funding), .trade-table-wrap,
  .intake-panel, .release-hunts, .trade-empty, .trade-detail, .shipment-card) {
  background: var(--surface-record); border-color: var(--surface-border); box-shadow: var(--elevation-flat);
}
:root body :is([data-surface='summary'], .cv-summary > div, .cv-stats > div,
  .balance-summary, .wallet-balance-strip, .sell-proof > div, .release-page .release-pickers) {
  background: var(--surface-summary); border-color: var(--surface-border); box-shadow: var(--elevation-flat);
}
:root body :is([data-surface='task'], .acct-card, form.cu-card, .balance-form,
  .redeem-panel, .valuation-form-wrap, .valuation-upload, .settings-card, .hunts-form) {
  background: var(--surface-task); border-color: var(--surface-border); box-shadow: var(--elevation-flat);
}
:root body :is([data-surface='content'], .of-card, .intake-detail, .personal-card,
  .wallet-funding, .profile-referral, .ship-hero, .cu-aside .cu-card, .release-details, .asset-grading,
  .sell-security, .valuation-aside, .reward, .pay-card, .release-page .trade-card) {
  background: var(--surface-content); border-color: var(--surface-border); box-shadow: var(--elevation-content);
}
/* Available bottles and its inner asset rows already use the approved recipe. */
:root body :is([data-surface='inset'], .classic-summary-card, .grading-notes, .redeem-summary, .shipment-target) {
  background: var(--surface-inset); border-color: var(--surface-border); box-shadow: var(--elevation-flat);
}
:root body :is([data-surface='overlay'], .activity-detail-drawer, .shipping-detail-drawer,
  .intake-drawer, .vm-activity-drawer, .oa-months-dialog, .app-control-sheet,
  .classic-payment-dialog, .wallet-privy-dialog, .rr-dialog, .settings-dialog) {
  background: var(--surface-overlay); box-shadow: var(--elevation-overlay);
}
/* A disclosure and its contents form one analytical panel. */
:root body .app-analytics-disclosure :is(.cv-mix, .oa-outcomes-card) {
  background: transparent; border: 0; box-shadow: none;
}
:root body :is(.cv-periods button[aria-pressed='true'], .cv-mix-option[aria-pressed='true']) {
  background: var(--surface-selected); color: var(--palette-ink); border-color: var(--palette-kelly);
}
:root body :is(.cv-periods button, .cv-mix-option):not(:disabled):hover { background: var(--palette-gray); }
:root body .reward.is-ready { border-color: var(--palette-kelly); }
:root body .reward-progress-well { box-shadow: none; }
:root body .cu-shots { background: var(--surface-inset); }
:root body .wallet-details { background: var(--surface-task); box-shadow: none; }
/* The rating distribution is data; written reviews are narrative content.
   Separate them without recoloring either the gallery or bottle cards. */
:root body .rr-panel { padding: 0; background: transparent; border: 0; box-shadow: none; align-items: start; }
:root body .rr-summary { padding: 24px; background: var(--surface-analytics); border: 1px solid var(--surface-border); border-radius: var(--radius-surface); box-shadow: none; }
:root body .rr-panel > [data-review-list] { padding: 24px; background: var(--surface-content); border: 1px solid var(--surface-border); border-radius: var(--radius-surface); box-shadow: var(--elevation-content); }
/* Overlay content never acquires a second floating-card shadow. */
:root body :is(dialog, [role='dialog']) :is(.of-card, .acct-card, .shipment-card, .classic-summary-card, .asset-grading, .cu-card) { box-shadow: none; }
@media (max-width: 600px) {
  :root body :is(.rr-summary, .rr-panel > [data-review-list]) { padding: 16px; }
}