/* Phone layout only. Shared contract: docs/RADAR_DESIGN.md. */
@media (max-width: 760px) {
  main { padding: var(--sp-3) var(--sp-2) var(--sp-6); }
  .rd-head, .trend-heading, .radar-heading, .fx-head { gap: var(--sp-2); margin-bottom: var(--sp-3); }
  .trend-heading { flex-wrap: wrap; }
  .rd-workspace, .trend-workspace, .sez-layout { gap: var(--sp-3); }
  .rd-panel-head, .trend-panel-heading { padding: var(--sp-3); gap: var(--sp-2); }
  .rd-detail, .rd-panel-body, .trend-detail, .sez-overview, .gap-detail { padding: var(--sp-3); }
  .rd-hero, .fx-hero { padding: var(--sp-3); gap: var(--sp-3); }
  .rd-card, .fx-card, .mz-count { padding: var(--sp-2) var(--sp-3); }
  .rd-metrics { gap: var(--sp-2); margin-block: var(--sp-3); padding-block: var(--sp-2); }
  .rd-metric small { margin-bottom: var(--sp-1); }
  .rd-filters, .fx-filters { flex-wrap: wrap; overflow-x: visible; gap: var(--sp-1); }
  .rd-filter, .fx-filter { flex: 1 1 auto; white-space: normal; }
  .rd-strip { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; gap: var(--sp-2); overflow: visible; }
  .rd-lead { min-width: 0; padding: var(--sp-2); }
  #mf-map.is-empty { height: 0; }
  .rd-seg, .fx-seg { max-width: 100%; }
  .rd-seg button, .fx-seg button { min-width: 0; white-space: normal; }
  .trend-tools, .trend-breadth, .trend-price-line { margin-bottom: var(--sp-3); }
  .trend-summary { gap: var(--sp-2); }
  .trend-summary button { padding: var(--sp-2) var(--sp-3); gap: var(--sp-1); }
  .trend-chart-tools { padding-block: var(--sp-2); }
  .trend-metrics { margin-block: var(--sp-3); padding-block: var(--sp-3); }
  .candles-chip { flex-wrap: wrap; white-space: normal; max-width: 100%; }
  .candles-chip small { overflow-wrap: anywhere; }
  .arb-breakdown { table-layout: fixed; }
  .arb-breakdown :is(th, td) { overflow-wrap: anywhere; white-space: normal; }
  .mz-card { padding: var(--sp-3); }
  .mz-card header { flex-wrap: wrap; }
  .mz-badge { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .mz-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); margin-top: var(--sp-3); }
  .mz-count, .mz-levels { min-width: 0; overflow-wrap: anywhere; }
  #mz-levels { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .detail-box, .mz-modal-box { padding: var(--sp-2); }
  .detail-box #detail-content .radar-canvas { height: clamp(240px, calc(100dvh - 420px), 420px); }
  .detail-box #detail-content .chart-message { min-height: clamp(240px, calc(100dvh - 420px), 420px); }
  .oi-ends { transform: translateX(-6px); }

  /* Existing table cells become labelled cards. Sort and row interactions stay intact. */
  .radar-mobile-table { display: block; width: 100%; min-width: 0; }
  .radar-mobile-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .radar-mobile-table > tbody { display: block; width: 100%; }
  .radar-mobile-table > tbody > tr { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-3); padding: var(--sp-3); border-bottom: 1px solid var(--line); }
  .radar-mobile-table > tbody > tr > td { min-width: 0; width: auto; padding: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .radar-mobile-table > tbody > tr > td[data-mobile-label]::before { content: attr(data-mobile-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: var(--fs-micro); font-weight: 400; line-height: 1.4; }
  .radar-mobile-table > tbody > tr > td[data-mobile-wide] { grid-column: 1 / -1; }
  .radar-mobile-table > tbody > tr > td[data-mobile-favorite] { position: absolute; top: var(--sp-1); right: var(--sp-1); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .radar-mobile-table > tbody > tr > td[data-mobile-favorite]::before { display: none; }
  .radar-mobile-table > tbody > tr:has(> td[data-mobile-favorite]) > td[data-mobile-wide] { padding-right: 44px; }
  .radar-mobile-table > tbody > tr > td[colspan] { position: static; display: block; grid-column: 1 / -1; width: 100%; max-width: none; padding: 0; overflow: visible; }
  .radar-mobile-table > tbody > tr:has(> td[colspan]) { display: block; padding: 0; }
  .radar-mobile-table .hide-sm, .radar-mobile-table .hide-md { display: block; }
  .radar-mobile-table :is(.kr-probcol, .kr-prob, .fx-meter, .fx-barcell) { min-width: 0; max-width: 100%; }
  .radar-mobile-table .kr-prob { width: 100%; }
  .radar-mobile-table .fx-say { min-width: 0; }
  .radar-mobile-sort { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .radar-mobile-sort label { flex: 1; display: flex; align-items: center; gap: var(--sp-2); color: var(--muted); font-size: var(--fs-s); }
  .radar-mobile-sort select { flex: 1; min-width: 0; max-width: 100%; min-height: 44px; font-size: var(--fs-s); }
  .radar-mobile-sort button { min-width: 44px; min-height: 44px; }

  .sez-chart { min-width: 0; padding: var(--sp-2) var(--sp-1) 0; }
  .sez-chart .value-label, .sez-chart .win-label { display: none; }
  .sez-chart .month-label { font-size: var(--fs-micro); }
  .sez-map { min-width: 0; padding: var(--sp-2); gap: 1px; }
  .sez-map-row { grid-template-columns: 28px repeat(12, minmax(0, 1fr)); gap: 1px; }
  .sez-map-head { font-size: var(--fs-micro); }
  .sez-map-head .is-focus-month { color: var(--text); font-weight: 700; }
  .sez-map-year { font-size: var(--fs-micro); }
  .sez-map-row > .sez-cell { min-height: 44px; padding: 0; border-width: 0; font-size: var(--fs-micro); letter-spacing: -.04em; }
  .sez-legend { padding-inline: var(--sp-3); }
  .sez-legend > span:last-child { display: none; }
}
@media (min-width: 761px) {
  .radar-mobile-sort { display: none; }
}