/* Responsive guards shared by every page. */
:is(
  .home-page,
  .markets-page,
  .detail-page,
  .portfolio-page,
  .activity-page,
  .learn-page,
  .home-hero,
  .home-hero__copy,
  .home-hero__visual,
  .markets-intro,
  .markets-feature,
  .markets-feature__content,
  .markets-toolbar,
  .markets-filters,
  .markets-results,
  .detail-layout,
  .detail-main,
  .detail-trade-rail,
  .portfolio-layout,
  .portfolio-value,
  .holdings-section,
  .activity-row,
  .activity-row__main,
  .trade-panel,
  .trade-review-modal,
  .modal-body
) {
  min-inline-size: var(--space-0);
}

:is(img, svg, canvas, video) {
  max-inline-size: 100%;
}

.price-chart-svg {
  display: block;
}

:is(.table-scroll, .markets-table-wrap) {
  max-inline-size: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* The Markets table keeps a wide semantic column floor. An explicit flexible
   track contains that width so the table wrapper, not the document, scrolls. */
.markets-results {
  grid-template-columns: minmax(0, 1fr);
}


:is(
  .hash-button,
  .hash-button__label,
  .quote-value,
  .review-row dd,
  .activity-row__reference,
  .activity-row__reference small
) {
  min-inline-size: var(--space-0);
  max-inline-size: 100%;
  overflow-wrap: anywhere;
}

/* Compact desktop and small laptop: up to 1280px. */
@media (max-width: 80rem) {
  .home-hero {
    gap: var(--space-8);
  }

  :is(
    .spotlight-grid,
    .opportunity-grid,
    .related-grid,
    .learn-grid,
    .glossary-grid,
    .risk-grid
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }


  :is(.market-stats-grid, .stat-grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .market-stats-grid .market-stat:not(:first-child) {
    border-inline-start: var(--space-0);
  }

  .market-stats-grid .market-stat:nth-child(even) {
    border-inline-start: var(--border-subtle);
  }

  .market-stats-grid .market-stat:nth-child(n + 3) {
    border-block-start: var(--border-subtle);
  }

  .markets-feature__content {
    max-inline-size: var(--layout-readable-max);
  }

  .hero-choice-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-choice-row__header {
    grid-column: 1;
  }

  .hero-choice-row__copy {
    max-inline-size: none;
    text-align: start;
  }
}

/* Tablet landscape and narrow laptop: up to 1024px. */
@media (max-width: 64rem) {
  :is(
    .home-hero,
    .explainer,
    .markets-feature,
    .portfolio-layout,
    .portfolio-value,
    .learn-hero,
    .risk-section,
    .purchase-explainer,
    .example-comparison,
    .lesson-card--example,
    .maturity-walkthrough
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail-page[data-market-id] {
    flex: 0 0 auto;
    block-size: auto;
    overflow: visible;
  }

  .detail-layout {
    grid-template-columns: minmax(var(--space-0), 1fr);
    block-size: auto;
  }

  .detail-page[data-market-id] .lighter-chart-terminal {
    block-size: auto;
    border-inline-end: var(--space-0);
    border-block-end: var(--border-default);
  }

  .detail-page[data-market-id] .terminal-embed-wrap {
    flex: none;
    min-block-size: var(--space-0);
    block-size: 50svh;
  }

  .detail-trade-rail {
    position: static;
    inset: auto;
    inline-size: 100%;
  }

  .detail-trade-rail .trade-panel {
    block-size: auto;
    max-block-size: none;
    overflow-y: visible;
    scrollbar-gutter: auto;
  }

  .home-hero__visual {
    justify-self: stretch;
    inline-size: min(100%, var(--layout-readable-max));
  }

  .explainer__intro {
    position: static;
    max-inline-size: none;
  }


  .detail-main {
    grid-template-columns: minmax(var(--space-0), 1fr);
    grid-template-rows: auto;
  }

  .detail-main > * {
    min-inline-size: var(--space-0);
  }
  :is(.allocation-card, .portfolio-note) {
    position: static;
    inset: auto;
  }


  :is(
    .spotlight-grid,
    .strategy-choice-grid,
    .opportunity-grid,
    .market-stats-grid,
    .related-grid,
    .learn-grid,
    .glossary-grid,
    .risk-grid,
    .metric-grid,
    .stat-grid,
    .activity-summary
  ) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  :is(
    .market-stats-grid .market-stat,
    .activity-summary > *
  ):not(:first-child) {
    border-inline-start: var(--space-0);
  }

  .market-stats-grid .market-stat:nth-child(even),
  .activity-summary > *:nth-child(even) {
    border-inline-start: var(--border-subtle);
  }

  .market-stats-grid .market-stat:nth-child(n + 3),
  .activity-summary > *:nth-child(n + 3) {
    border-block-start: var(--border-subtle);
  }

  :is(.markets-intro, .portfolio-hero) {
    grid-template-columns: minmax(0, 1fr);
  }

  .markets-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  .markets-search {
    inline-size: 100%;
  }

  .markets-filters {
    min-inline-size: var(--space-0);
    flex-wrap: wrap;
  }

  .markets-sort {
    margin-inline-start: var(--space-0);
  }

  .portfolio-value__meta {
    inline-size: 100%;
  }

  .section-heading > * {
    min-inline-size: var(--space-0);
  }

  .page-main {
    padding-block-end: calc(var(--layout-mobile-nav-height) + env(safe-area-inset-bottom));
  }

  .mobile-nav {
    min-block-size: calc(var(--layout-mobile-nav-height) + env(safe-area-inset-bottom));
    padding-inline: max(var(--space-2), env(safe-area-inset-left)) max(var(--space-2), env(safe-area-inset-right));
    padding-block-end: max(var(--space-2), env(safe-area-inset-bottom));
  }

  .mobile-nav__link {
    min-block-size: var(--size-touch-min);
  }
}

/* Tablet portrait and mobile navigation range: up to 768px. */
@media (max-width: 48rem) {
  :is(
    .spotlight-grid,
    .strategy-choice-grid,
    .explainer__steps,
    .opportunity-grid,
    .related-grid,
    .learn-grid,
    .glossary-grid,
    .risk-grid
  ) {
    grid-template-columns: minmax(0, 1fr);
  }


  .spotlight-grid {
    grid-auto-flow: row;
    grid-template-rows: none;
  }

  .spotlight-card:first-child {
    grid-row: auto;
  }


  .strategy-choice-card--dividend {
    margin-block-start: var(--space-0);
  }


  :is(
    .markets-intro,
    .section-heading,
    .portfolio-hero,
    .page-header
  ) {
    align-items: flex-start;
    grid-template-columns: minmax(0, 1fr);
  }

  .portfolio-hero > .button {
    justify-self: start;
  }

  :is(.section-heading, .page-header) {
    flex-direction: column;
  }

  .section-heading__meta {
    align-self: flex-start;
  }


  :is(.learn-footer, .split-gate) {
    align-items: flex-start;
    flex-direction: column;
  }

  .split-protocol {
    padding: var(--space-4);
  }

  .split-protocol .section-heading h2 {
    max-inline-size: 18ch;
    font-size: clamp(2rem, 9vw, 3rem);
    line-height: 1.05;
  }

  .split-protocol .risk-level {
    align-self: flex-start;
    max-inline-size: 100%;
    overflow-wrap: anywhere;
  }

  .split-gate .contract-link {
    max-inline-size: 100%;
    white-space: normal;
  }

  .home-hero__actions {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .home-hero__actions :is(.button, a, button) {
    min-block-size: var(--size-touch-min);
  }

  :is(.market-stats-grid, .stat-grid) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .markets-page {
    gap: var(--space-6);
  }

  .markets-intro {
    gap: var(--space-3);
    padding-block-end: var(--space-4);
  }

  .markets-intro > div {
    display: grid;
    gap: var(--space-1);
  }

  .markets-intro h1 {
    font-size: var(--text-3xl);
    line-height: var(--leading-tight);
  }

  .markets-intro > p {
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
  }

  .markets-feature {
    display: none;
  }

  .markets-toolbar {
    position: static;
    top: auto;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
    backdrop-filter: none;
  }

  .markets-toolbar__primary {
    grid-template-columns: minmax(var(--space-0), 1fr) auto;
    align-items: center;
    gap: var(--space-2);
  }

  .markets-search {
    min-block-size: var(--size-touch-min);
  }

  .markets-filter-toggle {
    display: inline-flex;
    white-space: nowrap;
  }

  .markets-filters {
    display: grid;
    grid-template-columns: minmax(var(--space-0), 1fr);
    gap: var(--space-2);
    inline-size: 100%;
  }

  .markets-filters:not(.is-expanded) {
    display: none;
  }

  .markets-filter-group {
    display: grid;
    min-inline-size: var(--space-0);
    gap: var(--space-1);
  }

  .markets-filter-group__options,
  :is(.filters-bar, .filter-tabs, .tabs, .period-selector) {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .markets-filter-group__options,
  :is(.filter-tabs, .tabs, .period-selector) {
    flex-wrap: nowrap;
  }

  .markets-filter-group__options > *,
  :is(.filter-tab, .period-button, .tab) {
    flex: 0 0 auto;
    min-block-size: var(--size-touch-min);
  }

  .markets-filter-group__options {
    max-inline-size: 100%;
    padding: var(--space-0);
    overflow-x: visible;
    overscroll-behavior-inline: auto;
    flex-wrap: wrap;
    scrollbar-width: auto;
    -webkit-overflow-scrolling: auto;
  }

  .markets-filter-chip {
    padding-inline: var(--space-3);
    font-size: var(--text-xs);
  }

  .markets-sort {
    grid-template-columns: auto minmax(var(--space-0), 1fr);
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
  }

  .markets-sort select {
    min-block-size: var(--size-touch-min);
    inline-size: 100%;
  }

  .markets-results {
    gap: var(--space-2);
  }

  .markets-page .markets-results__header {
    display: grid;
    grid-template-columns: auto minmax(var(--space-0), 1fr);
    align-items: center;
    gap: var(--space-3);
  }

  .markets-results__hint {
    line-height: var(--leading-snug);
    text-align: end;
  }

  .markets-table-wrap {
    display: none;
  }

  .markets-cards {
    display: grid;
    grid-template-columns: minmax(var(--space-0), 1fr);
    gap: var(--space-2);
  }

  .market-card,
  .market-card__link,
  .market-card__identity {
    min-inline-size: var(--space-0);
    max-inline-size: 100%;
  }

  .market-card__metrics {
    grid-area: metrics;
    grid-template-columns: minmax(var(--space-0), 1fr);
    align-items: stretch;
    gap: var(--space-2);
    min-inline-size: var(--space-0);
    inline-size: 100%;
    margin: var(--space-0);
    text-align: start;
  }

  .markets-cards .market-card {
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: none;
  }

  .markets-cards .market-card:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-hover);
    box-shadow: none;
    transform: none;
  }

  .markets-cards .market-card:focus-within {
    border-color: var(--color-control-border-focus);
    box-shadow: var(--shadow-focus);
  }

  .market-card__link {
    grid-template-areas:
      "mark identity arrow"
      "mark metrics arrow";
    grid-template-columns: auto minmax(var(--space-0), 1fr) auto;
    align-content: center;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    min-block-size: calc(var(--space-16) + var(--space-6));
    padding: var(--space-3);
  }

  .market-card__link:focus-visible {
    outline-offset: calc(var(--space-1) * -1);
  }

  .market-card__identity {
    grid-area: identity;
    display: grid;
    gap: var(--space-1);
    overflow: hidden;
  }

  .market-card__mark {
    grid-area: mark;
    display: inline-flex;
    flex: none;
    align-self: center;
  }


  .market-card__name {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-inline-size: var(--space-0);
    overflow: hidden;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    white-space: nowrap;
  }

  .market-card__ticker {
    flex: none;
  }

  .market-card__company {
    min-inline-size: var(--space-0);
    overflow: hidden;
    color: var(--color-text-secondary);
    font-weight: var(--weight-regular);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .market-card__context {
    display: flex;
    min-inline-size: var(--space-0);
    align-items: center;
    gap: var(--space-1);
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
    white-space: nowrap;
  }

  .market-card__category {
    flex: none;
  }

  .market-card__context time {
    min-inline-size: var(--space-0);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .market-card__metric {
    min-inline-size: var(--space-0);
    gap: var(--space-0);
  }

  .market-card__metric dd {
    display: grid;
    grid-template-columns: max-content minmax(var(--space-0), 1fr);
    min-inline-size: var(--space-0);
    align-items: baseline;
    gap: var(--space-1);
    overflow: visible;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    white-space: normal;
  }

  .market-card__metric--derived {
    justify-self: stretch;
  }

  .market-card__metric--derived dd {
    justify-content: normal;
  }

  .market-card__metric-value {
    min-inline-size: var(--space-0);
    white-space: nowrap;
  }

  :is(.market-card__metric-status, .market-card__metric-label) {
    min-inline-size: var(--space-0);
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    white-space: normal;
  }

  .market-card__arrow {
    grid-area: arrow;
    display: inline-grid;
    inline-size: var(--size-icon-sm);
    block-size: var(--size-icon-sm);
    place-items: center;
    font-size: var(--text-lg);
  }

  .market-card__metric--reference[data-quote-state="live"] .market-card__metric-value {
    color: var(--color-live);
  }

  .market-card__metric--reference:is(
    [data-quote-state="stale"],
    [data-quote-state="halted"]
  ) .market-card__metric-value {
    color: var(--color-warning);
  }

  .market-card__metric--reference[data-quote-state="unquoted"] .market-card__metric-value {
    color: var(--color-text-muted);
  }

  .data-table [data-priority="secondary"],
  .data-table .table-cell--secondary,
  .data-table .cell--secondary {
    display: none;
  }

  .data-table {
    inline-size: 100%;
    min-inline-size: 100%;
  }

  .holdings-table__head {
    display: none;
  }

  .holdings-table,
  .holdings-table > [role="rowgroup"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--layout-card-gap);
  }

  .holding-card {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    padding: var(--space-5);
    border: var(--border-default);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }

  .holding-cell {
    display: flex;
    min-inline-size: var(--space-0);
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .holding-cell::before {
    color: var(--color-text-muted);
    content: attr(data-label);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-normal);
  }

  .holding-cell--asset {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .holding-cell--asset::before {
    grid-column: 1 / -1;
  }

  .holding-cell--action {
    grid-column: 1 / -1;
    align-items: stretch;
  }

  .holding-card__action {
    grid-column: 1 / -1;
    justify-content: center;
    min-block-size: var(--size-touch-min);
    inline-size: 100%;
  }

  .activity-filters {
    max-inline-size: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  .activity-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
  }

  .activity-row__marker {
    grid-column: 1;
    grid-row: 1 / span 3;
  }

  :is(.activity-row__main, .activity-row__meta, .activity-row__amount) {
    grid-column: 2;
    min-inline-size: var(--space-0);
    text-align: start;
  }

  .activity-row__meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }

  .activity-row__amount {
    align-items: flex-start;
  }

  .period-selector {
    align-self: stretch;
    inline-size: 100%;
  }

  .price-chart {
    min-inline-size: var(--space-0);
    overflow: hidden;
  }

  .price-chart-svg {
    inline-size: 100%;
  }

  .timeline-track {
    grid-template-columns: minmax(6rem, 1fr) minmax(2rem, 1fr) minmax(6rem, 1fr);
    min-inline-size: var(--space-0);
    max-inline-size: 100%;
    overflow: visible;
  }

  .trade-panel {
    inline-size: 100%;
    max-inline-size: none;
  }

  :is(
    .trade-side-tab,
    .strategy-option,
    .quick-amount,
    .trade-review-button,
    .modal-close,
    .trade-cancel-button,
    .trade-confirm-button,
    .wallet-button
  ) {
    min-block-size: var(--size-touch-min);
  }

  .strategy-selector,
  .segmented-control {
    min-inline-size: var(--space-0);
  }

  .trade-review-backdrop {
    align-items: flex-end;
    padding: var(--space-0);
  }

  .trade-review-modal {
    inline-size: 100%;
    max-inline-size: none;
    max-block-size: calc(100vh - var(--space-4));
    max-block-size: calc(100dvh - max(var(--space-4), env(safe-area-inset-top)));
    margin: var(--space-0);
    border-end-start-radius: var(--radius-none);
    border-end-end-radius: var(--radius-none);
  }

  .trade-review-modal .modal-body {
    min-block-size: var(--space-0);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  .trade-review-modal .modal-actions {
    padding-block-end: calc(var(--space-4) + env(safe-area-inset-bottom));
  }

  .trade-review-modal :is(.modal-header, .modal-body, .modal-actions) {
    padding-inline-start: max(var(--space-5), env(safe-area-inset-left));
    padding-inline-end: max(var(--space-5), env(safe-area-inset-right));
  }


  .toast-region {
    inset-block-start: max(var(--space-3), env(safe-area-inset-top));
    inset-block-end: auto;
    inset-inline: max(var(--space-3), env(safe-area-inset-left)) max(var(--space-3), env(safe-area-inset-right));
    max-inline-size: none;
  }
}

/* Small phones: up to 560px. */
@media (max-width: 35rem) {
  .home-hero {
    gap: var(--space-6);
  }

  :is(
    .market-stats-grid,
    .metric-grid,
    .stat-grid,
    .activity-summary,
    .portfolio-value__meta
  ) {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-hero {
    min-block-size: auto;
    padding-block: var(--space-8) var(--space-10);
  }

  .home-hero__copy {
    gap: var(--space-5);
  }

  .home-hero__title,
  .learn-hero h1 {
    font-size: clamp(3.5rem, 17vw, 4.75rem);
  }

  .home-hero__visual {
    padding: var(--space-0);
  }

  :is(
    .market-stats-grid .market-stat,
    .activity-summary > *
  ):not(:first-child) {
    border-inline-start: var(--space-0);
    border-block-start: var(--border-subtle);
  }


  .home-hero__actions {
    inline-size: 100%;
  }

  .spotlight-grid {
    display: flex;
    inline-size: calc(100% + (var(--layout-page-gutter) * 2));
    align-items: stretch;
    gap: var(--space-4);
    margin-inline: calc(var(--layout-page-gutter) * -1);
    padding: var(--space-1) var(--layout-page-gutter) var(--space-5);
    overflow-x: auto;
    scroll-padding-inline: var(--layout-page-gutter);
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
  }

  .spotlight-grid::-webkit-scrollbar {
    display: none;
  }

  .spotlight-grid .spotlight-card {
    flex: 0 0 min(82vw, 22rem);
    min-block-size: auto;
    scroll-snap-align: start;
  }

  .strategy-choice-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .strategy-choice-grid .strategy-choice-card + .strategy-choice-card {
    border-inline-start: var(--space-0);
    border-block-start: var(--border-default);
  }

  .hero-market-card {
    padding: var(--space-5);
    transform: none;
  }

  .hero-market-card__header,
  .hero-market-card__footer,
  .spotlight-card__top,
  .spotlight-card__footer {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .hero-choice-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-choice-row__header {
    grid-column: 1;
  }

  .hero-choice-row__copy {
    max-inline-size: none;
  }


  .strategy-choice-card {
    min-block-size: auto;
    padding: var(--space-6);
  }

  .section-heading h2 {
    font-size: clamp(2.75rem, 13vw, 4rem);
  }


  .explainer-step {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
  }

  .explainer-step__visual {
    grid-column: 2;
    justify-content: start;
    min-inline-size: var(--space-0);
    border-inline: var(--space-0);
  }

  .glossary-term {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .modal-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-actions :is(.button, button) {
    justify-content: center;
    inline-size: 100%;
  }

  .trade-header,
  .trade-balance,
  .activity-row__title,
  .allocation-item__header,
  .review-row,
  .quote-row {
    align-items: flex-start;

    flex-wrap: wrap;
  }

  .contract-registry li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .markets-filter-chip {
    min-block-size: var(--size-touch-min);
  }


  .holding-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .holding-cell--asset,
  .holding-cell--action {
    grid-column: 1;
  }

  .activity-row {
    gap: var(--space-3);
  }

  .activity-row__marker {
    grid-row: 1;
  }

  :is(.activity-row__meta, .activity-row__amount) {
    grid-column: 1 / -1;
  }

  .activity-row__meta {
    padding-inline-start: calc(var(--size-icon-lg) + var(--space-3));
  }

  .activity-row__amount {
    padding-block-start: var(--space-3);
    border-block-start: var(--border-subtle);
  }


  .detail-trade-rail [data-trade-mode-panel="trade"] > .trade-balance {
    padding-inline: var(--space-4);
  }

  .trade-form,
  .trade-header,
  .opportunity-card,
  .risk-item,
  .related-card,
  .allocation-card,
  .portfolio-note,
  .portfolio-value,
  .learn-hero,
  .risk-section {
    padding: var(--space-4);
  }

  .trade-side-tabs {
    margin-inline: var(--space-4);
  }

  .price-chart {
    inline-size: 100%;
    block-size: calc(var(--space-16) * 3);
    aspect-ratio: auto;
  }

  .chart-range {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-2);
  }

  .strategy-selector {
    grid-template-columns: minmax(0, 1fr);
  }

  .strategy-option {
    inline-size: 100%;
  }

  .quick-amounts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .quote-row,
  .review-row {
    gap: var(--space-2);
  }

  .quote-row dd,
  .review-row dd {
    inline-size: 100%;
    text-align: start;
  }


  .trade-review-modal .modal-actions {
    gap: var(--space-2);
  }

  .toast-region {
    inset-inline: max(var(--space-2), env(safe-area-inset-left)) max(var(--space-2), env(safe-area-inset-right));
  }
}


@media (max-width: 20rem) {
  .app-shell[data-shell-section="insights"] {
    --layout-mobile-nav-height: var(--size-touch-min);
    --layout-mobile-nav-block-size: calc(var(--size-touch-min) + var(--layout-safe-area-bottom));
  }

  .mobile-nav {
    padding-inline:
      max(var(--space-0), env(safe-area-inset-left))
      max(var(--space-0), env(safe-area-inset-right));
  }

  .app-shell[data-shell-section="insights"] .mobile-nav {
    border-block-start: var(--space-0);
    padding-block: var(--space-0) var(--layout-safe-area-bottom);
  }


  .mobile-nav__link,
  .app-shell[data-shell-section="insights"] .mobile-nav__link {
    padding-inline: var(--space-0);
    font-size: var(--text-2xs);
    letter-spacing: normal;
  }

  .app-shell[data-shell-section="insights"] .mobile-nav__link {
    gap: var(--space-0-5);
    padding-block: var(--space-1);
  }

  .mobile-nav__link :is(.mobile-nav__icon, .nav-link__icon) {
    inline-size: var(--size-icon-md);
    block-size: var(--size-icon-md);
  }
}

/* Hover is an enhancement, never the only way to reveal an action. */
@media (hover: none) {
  :is(
    .hero-market-card,
    .spotlight-card,
    .market-card,
    .strategy-choice-card,
    .opportunity-card,
    .related-card,
    .lesson-card,
    .holding-card,
    .activity-row,
    .button,
    button
  ):hover {
    transform: none;
  }

  :is(.card-action, .hover-action, [data-hover-reveal]) {
    visibility: visible;
    opacity: 1;
  }

  :is(.markets-filter-chip, .filter-tab, .period-button, .quick-amount) {
    min-block-size: var(--size-touch-min);
  }
}

/* Motion preferences remove flourish while preserving state changes. */
@media (prefers-reduced-motion: reduce) {

  .chart-line {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }

}

/* Stronger boundaries and text hierarchy for requested high contrast. */
@media (prefers-contrast: more) {
  :root {
    --color-text-muted: var(--color-text-secondary);
    --color-text-subtle: var(--color-text-secondary);
    --color-border-subtle: var(--color-border-strong);
    --opacity-muted: 1;
  }

  :is(
    .card,
    .spotlight-card,
    .strategy-choice-card,
    .market-card,
    .trade-panel,
    .trade-review-modal,
    .opportunity-card,
    .risk-item,
    .related-card,
    .holding-card,
    .activity-row
  ) {
    border-color: var(--color-border-strong);
    box-shadow: none;
  }

  :is(button, a, input, select, textarea):focus-visible {
    outline: var(--border-width-strong) solid currentColor;
    outline-offset: var(--space-1);
    box-shadow: none;
  }
}

@media (forced-colors: active) {
  :is(
    .card,
    .spotlight-card,
    .strategy-choice-card,
    .market-card,
    .trade-panel,
    .trade-review-modal,
    .opportunity-card,
    .risk-item,
    .related-card,
    .holding-card,
    .activity-row,
    .markets-filter-chip,
    .filter-tab,
    .period-button
  ) {
    border: var(--border-width) solid CanvasText;
    box-shadow: none;
  }

  :is(button, a, input, select, textarea):focus-visible {
    outline: var(--border-width-strong) solid Highlight;
    outline-offset: var(--space-1);
  }

  :is(
    .is-active,
    [aria-selected="true"],
    [aria-pressed="true"],
    [aria-checked="true"]
  ) {
    forced-color-adjust: none;
    border-color: Highlight;
    background: Highlight;
    color: HighlightText;
  }

  :is(.status-dot, .timeline-marker, .allocation-bar__fill) {
    forced-color-adjust: none;
    background: Highlight;
  }
}