/* ==========================================================================
   WhaleLand display preferences
   Four independent presentation dimensions. This layer contains no business,
   provider, wallet or session state.
   ========================================================================== */

html[data-ui-font-size="small"] {
  --ui-font-scale: .91;
  --ui-title-size: 24px;
  --ui-section-size: 20px;
  --ui-card-title-size: 16.5px;
  --ui-body-size: 14.5px;
  --ui-button-size: 13.5px;
  --ui-help-size: 12.5px;
  --ui-caption-size: 12px;
  --ui-micro-size: 11px;
  --ui-nav-size: 12px;
}

html[data-ui-font-size="standard"] {
  --ui-font-scale: 1;
  --ui-title-size: 26px;
  --ui-section-size: 22px;
  --ui-card-title-size: 18px;
  --ui-body-size: 16px;
  --ui-button-size: 15px;
  --ui-help-size: 14px;
  --ui-caption-size: 13px;
  --ui-micro-size: 12px;
  --ui-nav-size: 13px;
}

html[data-ui-font-size="large"] {
  --ui-font-scale: 1.1;
  --ui-title-size: 29px;
  --ui-section-size: 24px;
  --ui-card-title-size: 20px;
  --ui-body-size: 17.5px;
  --ui-button-size: 16.5px;
  --ui-help-size: 15.5px;
  --ui-caption-size: 14px;
  --ui-micro-size: 13px;
  --ui-nav-size: 14px;
}

html[data-ui-font-size] {
  /* Public semantic design tokens consumed by shared components. */
  --wl-type-page: var(--ui-title-size);
  --wl-type-section: var(--ui-section-size);
  --wl-type-card: var(--ui-card-title-size);
  --wl-type-body: var(--ui-body-size);
  --wl-type-control: var(--ui-button-size);
  --wl-type-help: var(--ui-help-size);
  --wl-type-meta: var(--ui-caption-size);
  --wl-type-micro: var(--ui-micro-size);
  --wl-nav-type: var(--ui-nav-size);
}

@media (max-width: 1023px) {
  html[data-ui-font-size="small"] {
    --ui-title-size: 20px;
    --ui-section-size: 16.5px;
    --ui-card-title-size: 14.5px;
    --ui-body-size: 13px;
    --ui-button-size: 12px;
    --ui-help-size: 12px;
    --ui-caption-size: 11px;
    --ui-micro-size: 11px;
    --ui-nav-size: 12px;
  }

  html[data-ui-font-size="standard"] {
    --ui-title-size: 22px;
    --ui-section-size: 18px;
    --ui-card-title-size: 16px;
    --ui-body-size: 14px;
    --ui-button-size: 13px;
    --ui-help-size: 13px;
    --ui-caption-size: 12px;
    --ui-micro-size: 12px;
    --ui-nav-size: 13px;
  }

  html[data-ui-font-size="large"] {
    --ui-title-size: 24px;
    --ui-section-size: 20px;
    --ui-card-title-size: 17.5px;
    --ui-body-size: 15.5px;
    --ui-button-size: 14.5px;
    --ui-help-size: 14px;
    --ui-caption-size: 13px;
    --ui-micro-size: 12.5px;
    --ui-nav-size: 14px;
  }
}

/* The body establishes the default ordinary-UI size. Existing shared
   Typography/Card/Button rules consume the semantic tokens above. */
html[data-ui-font-size] body {
  font-size: var(--ui-body-size);
}

/* Bottom navigation follows the typography preset, but never changes its
   geometry or safe-area contract. */
@media (max-width: 1023px) {
  html[data-ui-font-size] .mobile-tabbar,
  html[data-ui-font-size] .mobile-tabbar-inner {
    --wl-nav-h: 56px;
  }

  html[data-ui-font-size] .mobile-tab > span:last-child {
    max-width: 100%;
    overflow: hidden;
    font-size: var(--ui-nav-size) !important;
    line-height: 1 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Market density, numeric scale and token logos are intentionally independent.
   -------------------------------------------------------------------------- */
html[data-market-density="compact"] {
  --ui-market-row-height: 52px;
  --ui-market-row-padding-y: 3px;
  --ui-market-row-gap: 0px;
}

html[data-market-density="standard"] {
  --ui-market-row-height: 58px;
  --ui-market-row-padding-y: 5px;
  --ui-market-row-gap: 1px;
}

html[data-market-density="comfortable"] {
  --ui-market-row-height: 68px;
  --ui-market-row-padding-y: 8px;
  --ui-market-row-gap: 3px;
}

html[data-market-number-size="small"] {
  --ui-market-price-size: 12.5px;
  --ui-market-price-long-size: 11.5px;
  --ui-market-price-xlong-size: 10.75px;
  --ui-market-change-size: 11.5px;
  --ui-market-change-long-size: 11px;
  --ui-market-change-xlong-size: 10.5px;
  --ui-market-meta-size: 10.5px;
  --ui-market-value-column: 88px;
}

html[data-market-number-size="standard"] {
  --ui-market-price-size: 14px;
  --ui-market-price-long-size: 12.75px;
  --ui-market-price-xlong-size: 11.75px;
  --ui-market-change-size: 13px;
  --ui-market-change-long-size: 12px;
  --ui-market-change-xlong-size: 11px;
  --ui-market-meta-size: 11px;
  --ui-market-value-column: 92px;
}

html[data-market-number-size="large"] {
  --ui-market-price-size: 15.5px;
  --ui-market-price-long-size: 14px;
  --ui-market-price-xlong-size: 12.5px;
  --ui-market-change-size: 14px;
  --ui-market-change-long-size: 13px;
  --ui-market-change-xlong-size: 12px;
  --ui-market-meta-size: 12px;
  --ui-market-value-column: 102px;
}

html[data-token-logo-size="small"] {
  --ui-token-logo-size: 28px;
  --ui-token-logo-column: 32px;
  --ui-token-badge-size: 11px;
  --ui-token-badge-left: 18px;
  --ui-token-badge-top: 17px;
  --ui-asset-logo-size: 18px;
}

html[data-token-logo-size="standard"] {
  --ui-token-logo-size: 32px;
  --ui-token-logo-column: 36px;
  --ui-token-badge-size: 13px;
  --ui-token-badge-left: 20px;
  --ui-token-badge-top: 19px;
  --ui-asset-logo-size: 20px;
}

html[data-token-logo-size="large"] {
  --ui-token-logo-size: 40px;
  --ui-token-logo-column: 44px;
  --ui-token-badge-size: 16px;
  --ui-token-badge-left: 26px;
  --ui-token-badge-top: 24px;
  --ui-asset-logo-size: 24px;
}

@media (max-width: 767px) {
  html[data-page="markets"][data-market-density] .wl-mrow {
    min-height: var(--ui-market-row-height) !important;
    padding-top: var(--ui-market-row-padding-y) !important;
    padding-bottom: var(--ui-market-row-padding-y) !important;
    grid-template-columns: var(--ui-token-logo-column) minmax(0, 1fr) minmax(var(--ui-market-value-column), auto) !important;
    row-gap: var(--ui-market-row-gap) !important;
  }

  html[data-page="markets"][data-token-logo-size] .wl-mrow-logo {
    width: var(--ui-token-logo-column) !important;
    height: var(--ui-token-logo-size) !important;
    min-width: var(--ui-token-logo-column) !important;
    min-height: var(--ui-token-logo-size) !important;
  }

  html[data-page="markets"][data-token-logo-size] .wl-mrow-logo > i:first-child {
    inset: 0 auto auto 0 !important;
    width: var(--ui-token-logo-size) !important;
    height: var(--ui-token-logo-size) !important;
  }

  html[data-page="markets"][data-token-logo-size] .wl-mrow-logo > i:first-child > *,
  html[data-page="markets"][data-token-logo-size] .wl-mrow-logo img.token-logo,
  html[data-page="markets"][data-token-logo-size] .wl-mrow-logo .token-logo,
  html[data-page="markets"][data-token-logo-size] .wl-mrow-logo .token-logo-fb {
    width: var(--ui-token-logo-size) !important;
    height: var(--ui-token-logo-size) !important;
    min-width: var(--ui-token-logo-size) !important;
    min-height: var(--ui-token-logo-size) !important;
    max-width: var(--ui-token-logo-size) !important;
    max-height: var(--ui-token-logo-size) !important;
    object-fit: contain !important;
  }

  html[data-page="markets"][data-token-logo-size] .wl-mrow-logo > i:last-child {
    inset: var(--ui-token-badge-top) auto auto var(--ui-token-badge-left) !important;
    width: var(--ui-token-badge-size) !important;
    height: var(--ui-token-badge-size) !important;
  }

  html[data-page="markets"][data-token-logo-size] .wl-mrow-logo > i:last-child > *,
  html[data-page="markets"][data-token-logo-size] .wl-mrow-logo > i:last-child img,
  html[data-page="markets"][data-token-logo-size] .wl-mrow-logo .chain-icon,
  html[data-page="markets"][data-token-logo-size] .wl-mrow-logo .chain-logo-img {
    width: var(--ui-token-badge-size) !important;
    height: var(--ui-token-badge-size) !important;
    min-width: var(--ui-token-badge-size) !important;
    min-height: var(--ui-token-badge-size) !important;
    max-width: var(--ui-token-badge-size) !important;
    max-height: var(--ui-token-badge-size) !important;
  }

  html[data-page="markets"][data-market-number-size] .wl-mrow-price {
    font-size: var(--ui-market-price-size) !important;
    white-space: nowrap !important;
  }
  html[data-page="markets"][data-market-number-size] .wl-mrow-price.is-long { font-size: var(--ui-market-price-long-size) !important; }
  html[data-page="markets"][data-market-number-size] .wl-mrow-price.is-xlong { font-size: var(--ui-market-price-xlong-size) !important; }
  html[data-page="markets"][data-market-number-size] .wl-mrow .wl-chg { font-size: var(--ui-market-change-size) !important; white-space: nowrap !important; }
  html[data-page="markets"][data-market-number-size] .wl-mrow .wl-chg.is-long { font-size: var(--ui-market-change-long-size) !important; }
  html[data-page="markets"][data-market-number-size] .wl-mrow .wl-chg.is-xlong { font-size: var(--ui-market-change-xlong-size) !important; }
  html[data-page="markets"][data-market-number-size] .wl-mrow-l2,
  html[data-page="markets"][data-market-number-size] .wl-mrow-l2 b { font-size: var(--ui-market-meta-size) !important; }
}

/* Asset-list logos share the same preference field at a component-appropriate
   base size. Brand, ENI and Hero logos do not match these selectors. */
html[data-page="account"][data-token-logo-size] .wl-account-network-row > img {
  width: var(--ui-asset-logo-size) !important;
  height: var(--ui-asset-logo-size) !important;
  flex: 0 0 var(--ui-asset-logo-size) !important;
  object-fit: contain !important;
}

/* --------------------------------------------------------------------------
   Hero/Banner lock. These component-local tokens are fixed values and never
   reference --ui-font-scale or any user preference variable.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  html[data-page="home"] .wl-final-hero-carousel {
    --hero-fixed-height: 244px;
    --hero-fixed-title: 18px;
    --hero-fixed-title-line: 22px;
    --hero-fixed-body: 12.5px;
    --hero-fixed-kicker: 12px;
    --hero-fixed-button: 13px;
    --hero-fixed-meta: 12px;
    --hero-fixed-micro: 11px;
  }

  html[data-page="home"] .wl-final-hero-rail {
    align-items: stretch !important;
  }

  html[data-page="home"] .wl-final-hero-card {
    height: var(--hero-fixed-height) !important;
    min-height: var(--hero-fixed-height) !important;
    max-height: var(--hero-fixed-height) !important;
    padding: 14px 15px !important;
    gap: 6px !important;
    box-sizing: border-box !important;
  }

  html[data-page="home"] .wl-final-hero-kicker,
  html[data-page="home"] .wl-final-hero-kicker em {
    font-size: var(--hero-fixed-kicker) !important;
    line-height: 1.25 !important;
  }

  html[data-page="home"] .wl-final-hero-kicker em {
    padding: 3px 7px !important;
  }

  html[data-page="home"] .wl-final-hero-card h1 {
    display: block !important;
    max-width: 59% !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    font-size: var(--hero-fixed-title) !important;
    line-height: var(--hero-fixed-title-line) !important;
    white-space: pre-line !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
  }

  html[data-page="home"] .wl-final-hero-card p {
    display: block !important;
    max-width: 59% !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    overflow: visible !important;
    font-size: var(--hero-fixed-body) !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
  }

  html[data-page="home"] .wl-final-hero-footer {
    min-height: 40px !important;
    margin-top: auto !important;
    padding-top: 2px !important;
    align-items: center !important;
  }

  html[data-page="home"] .wl-final-hero-footer > strong {
    min-height: 38px !important;
    padding: 0 15px !important;
    font-size: var(--hero-fixed-button) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html[data-page="home"] .wl-final-hero-footer b { font-size: var(--hero-fixed-meta) !important; line-height: 1.2 !important; }
  html[data-page="home"] .wl-final-hero-footer small { font-size: var(--hero-fixed-micro) !important; line-height: 1.2 !important; }

  html[data-page="home"] .wl-final-hero-art.wl-tech-art {
    top: 42px !important;
    right: 7px !important;
    width: min(36%, 132px) !important;
    height: 126px !important;
  }

  html[data-page="home"] .wl-final-hero-art.wl-tech-art--eni,
  html[data-page="home"][data-theme="dark"] .wl-final-hero-art.wl-tech-art--eni {
    top: 56px !important;
    right: 9px !important;
    width: 118px !important;
    height: 104px !important;
  }
}

/* --------------------------------------------------------------------------
   Account entry and standalone settings page
   -------------------------------------------------------------------------- */
.wl-display-settings-entry {
  display: flex;
  min-height: 44px;
  margin-top: 5px;
  padding-top: 7px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--wl-text, #102a33);
  border-top: 1px solid var(--wl-border, rgba(16, 42, 51, .10));
  text-decoration: none;
}

.wl-display-settings-entry > span:first-child {
  flex: none;
  font-size: var(--ui-button-size, 13px);
  font-weight: 600;
}

.wl-display-settings-entry > span:last-child {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  overflow: hidden;
  color: var(--wl-text-3, #839399);
  font-size: var(--ui-caption-size, 12px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wl-display-settings-entry .wl-icon { width: 12px; flex: none; }

.wl-display-main {
  width: min(100%, 760px);
  min-height: calc(100vh - 72px);
  margin: 0 auto;
  padding: 28px 20px 128px;
  scroll-padding-bottom: 128px;
}

.wl-display-appbar {
  display: flex;
  align-items: center;
  gap: 14px;
}

.wl-display-back {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  color: var(--wl-text, #102a33);
  background: var(--wl-surface, #fff);
  border: 1px solid var(--wl-border, rgba(16, 42, 51, .10));
  border-radius: 12px;
}

.wl-display-back .wl-icon { width: 18px; }
.wl-display-appbar h1 { margin: 0; color: var(--wl-text, #102a33); font-size: var(--ui-title-size, 26px) !important; font-weight: 700; line-height: 1.2; }
.wl-display-appbar p { margin: 4px 0 0; color: var(--wl-text-3, #839399); font-size: var(--ui-caption-size, 13px) !important; line-height: 1.35; }

.wl-display-intro {
  display: flex;
  margin-top: 22px;
  padding: 14px 16px;
  align-items: flex-start;
  gap: 10px;
  color: var(--wl-text-2, #60767b);
  background: var(--wl-teal-bg, #e7f5f2);
  border: 1px solid var(--wl-teal-line, rgba(13, 124, 119, .18));
  border-radius: 14px;
}

.wl-display-intro > span { display: inline-flex; width: 24px; height: 24px; flex: 0 0 24px; align-items: center; justify-content: center; color: var(--wl-teal, #0d7c77); }
.wl-display-intro .wl-icon { width: 17px; }
.wl-display-intro p { margin: 0; font-size: var(--ui-help-size, 14px) !important; line-height: 1.5; }

.wl-display-groups { display: grid; margin-top: 16px; gap: 12px; }
.wl-display-group { padding: 18px; background: var(--wl-surface, #fff); border: 1px solid var(--wl-border, rgba(16, 42, 51, .10)); border-radius: 16px; box-shadow: var(--wl-shadow-card, 0 8px 24px rgba(16, 42, 51, .06)); }
.wl-display-group h2 { margin: 0; color: var(--wl-text, #102a33); font-size: var(--ui-card-title-size, 18px) !important; font-weight: 650; line-height: 1.3; }
.wl-display-group header p { margin: 5px 0 0; color: var(--wl-text-3, #839399); font-size: var(--ui-caption-size, 13px) !important; line-height: 1.45; }

.wl-display-segmented {
  display: grid;
  margin-top: 14px;
  padding: 3px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  background: var(--wl-sunken, #f1f5f4);
  border-radius: 12px;
}

.wl-display-segmented button {
  min-width: 0;
  min-height: 40px;
  padding: 7px 8px;
  color: var(--wl-text-2, #60767b);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: var(--ui-button-size, 15px) !important;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.wl-display-segmented button.is-selected,
.wl-display-segmented button[aria-pressed="true"] {
  color: var(--wl-brand, #19a974);
  background: var(--wl-surface, #fff);
  border-color: var(--wl-border, rgba(16, 42, 51, .10));
  box-shadow: 0 2px 8px rgba(16, 42, 51, .08);
}

.wl-display-reset {
  display: flex;
  width: 100%;
  min-height: 46px;
  margin-top: 16px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--wl-text-2, #60767b);
  background: var(--wl-surface, #fff);
  border: 1px solid var(--wl-border, rgba(16, 42, 51, .10));
  border-radius: 13px;
  font-size: var(--ui-button-size, 15px) !important;
  font-weight: 600;
}

.wl-display-reset .wl-icon { width: 16px; }
.wl-display-status { min-height: 20px; margin: 8px 0 0; color: var(--wl-brand, #19a974); font-size: var(--ui-caption-size, 13px) !important; text-align: center; }

/* The Account gear is now a direct, single-purpose System settings entry. */
.wl-account-design-appbar .wl-system-settings-link {
  display: flex;
  width: 32px;
  height: 32px;
  padding: 0;
  align-items: center;
  justify-content: center;
  color: var(--wl-text, #102a33);
  background: var(--wl-surface, #fff);
  border: 1px solid var(--wl-border, rgba(16, 42, 51, .10));
  border-radius: 9px;
}

.wl-account-design-appbar .wl-system-settings-link .wl-icon { width: 14px; }

.wl-account-accent-settings {
  --wl-account-accent-color: #5d6870;
  --wl-account-accent-bg: rgba(93, 104, 112, .10);
}

/* System settings composes the existing preference controls; it does not own
   another copy of language, theme or display state. */
.wl-system-settings-groups {
  display: grid;
  margin-top: 22px;
  gap: 12px;
}

.wl-system-setting-group .wl-display-segmented {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wl-system-language-grid {
  display: grid;
  margin-top: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.wl-system-language-grid button {
  display: flex;
  min-width: 0;
  min-height: 42px;
  padding: 8px 10px;
  align-items: center;
  gap: 8px;
  color: var(--wl-text-2, #60767b);
  background: var(--wl-sunken, #f1f5f4);
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: var(--ui-button-size, 15px) !important;
  text-align: left;
}

.wl-system-language-grid button > span { flex: none; font-size: 17px; line-height: 1; }
.wl-system-language-grid button > b { min-width: 0; overflow: hidden; font-size: inherit !important; text-overflow: ellipsis; white-space: nowrap; }

.wl-system-language-grid button.is-selected,
.wl-system-language-grid button[aria-pressed="true"] {
  color: var(--wl-brand, #19a974);
  background: var(--wl-surface, #fff);
  border-color: var(--wl-border, rgba(16, 42, 51, .10));
  box-shadow: 0 2px 8px rgba(16, 42, 51, .08);
}

.wl-system-display-heading {
  display: flex;
  margin-top: 22px;
  padding: 0 2px;
  align-items: center;
  gap: 10px;
}

.wl-system-display-heading > span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  align-items: center;
  justify-content: center;
  color: var(--wl-brand, #19a974);
  background: var(--wl-teal-bg, #e7f5f2);
  border-radius: 10px;
}

.wl-system-display-heading .wl-icon { width: 16px; }
.wl-system-display-heading h2 { margin: 0; color: var(--wl-text, #102a33); font-size: var(--ui-section-size, 22px) !important; line-height: 1.25; }
.wl-system-display-heading p { margin: 3px 0 0; color: var(--wl-text-3, #839399); font-size: var(--ui-caption-size, 13px) !important; line-height: 1.4; }

html[data-theme="dark"] .wl-system-language-grid button.is-selected,
html[data-theme="dark"] .wl-system-language-grid button[aria-pressed="true"] {
  box-shadow: 0 2px 9px rgba(0, 0, 0, .28);
}

@media (max-width: 767px) {
  .wl-display-main {
    width: 100%;
    min-height: 100vh;
    padding: 12px 16px calc(var(--wl-nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 92px);
    scroll-padding-bottom: calc(var(--wl-nav-h, 56px) + env(safe-area-inset-bottom, 0px) + 92px);
  }
  .wl-display-appbar { min-height: 52px; }
  .wl-display-back { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
  .wl-display-intro { margin-top: 12px; padding: 12px 13px; }
  .wl-display-group { padding: 14px; border-radius: 14px; }
  .wl-display-group header p { min-height: 0; }
  .wl-display-segmented { margin-top: 11px; }
  .wl-display-segmented button { min-height: 38px; padding-inline: 4px; }
  .wl-system-settings-groups { margin-top: 12px; }
  .wl-system-display-heading { margin-top: 18px; }
}

@media (max-width: 374px) {
  .wl-display-main { padding-inline: 12px; }
  .wl-display-group { padding-inline: 12px; }
}

html[data-theme="dark"] .wl-display-segmented button.is-selected,
html[data-theme="dark"] .wl-display-segmented button[aria-pressed="true"] {
  box-shadow: 0 2px 9px rgba(0, 0, 0, .28);
}

/* Token selectors and bridge result metrics follow the same user logo scale. */
html[data-page="swap"][data-token-logo-size] .eni-sdk-token-logo,
html[data-page="swap"][data-token-logo-size] .eni-sdk-token-logo > img,
html[data-page="swap"][data-token-logo-size] .eni-sdk-token-logo > .token-logo-fb,
html[data-page="swap"][data-token-logo-size] .wl-cross-token-identity > img,
html[data-page="swap"][data-token-logo-size] .wl-cross-token-identity > .token-logo-fb {
  width: calc(var(--ui-token-logo-size) * .75) !important;
  height: calc(var(--ui-token-logo-size) * .75) !important;
  min-width: calc(var(--ui-token-logo-size) * .75) !important;
  min-height: calc(var(--ui-token-logo-size) * .75) !important;
  max-width: calc(var(--ui-token-logo-size) * .75) !important;
  max-height: calc(var(--ui-token-logo-size) * .75) !important;
}