/* T00358/040 + 053: opt-in responsive layout and approved compact mobile sizing.
   Chart/replay never load this file. Compact overrides stop at 760px.
   Keep wide status tables inside labelled scroll regions; do not hide page overflow. */
@media (max-width: 1020px) {
  .mobile-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .mobile-table-scroll td { overflow-wrap: anywhere; }
  .mobile-table-scroll td:first-child { max-width: 230px; }
  .dc-main { grid-template-columns: minmax(0, 1fr); }
  .dc-calendar, .dc-stats { min-width: 0; }
}
@media (max-width: 760px) {
  body { font-size: 14px; line-height: 1.45; }
  .wrap { min-width: 0; padding: 12px 12px 28px; }
  .topbar { flex-wrap: wrap; gap: 4px 12px; min-height: 48px; padding: 6px 12px; }
  .topbar .brand { min-width: 0; max-width: 100%; }
  .topbar .mark { max-width: 100%; height: auto; max-height: 26px; }
  .topbar nav { flex-wrap: wrap; gap: 4px 12px; margin-left: auto; }
  .topbar nav > a, .topbar .link, .settings-menu summary {
    display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
  }
  .settings-menu summary { min-width: 36px; }
  .settings-panel { top: 38px; max-width: calc(100vw - 24px); }
  .settings-panel a, .menu-action { min-height: 36px; padding: 6px 8px; }
  .wrap :is(h1, h2, p, li, dd), .degraded-banner { overflow-wrap: anywhere; }
  .hero, .home-hero { padding: 16px 0 18px; }
  .emblem { width: 42px; height: 42px; }
  .feature-grid { gap: 8px; }
  .feature-card { grid-template-columns: 32px minmax(0, 1fr); gap: 4px 10px; min-height: 76px; padding: 10px; }
  .feature-icon { width: 32px; height: 32px; }
  .feature-icon svg { width: 24px; }
  .feature-card h2 { font-size: 15px; letter-spacing: .03em; }
  .feature-card p { margin-top: 2px; }
  .coming-soon { padding: 2px 6px; font-size: 10px; }
  .feature-open { grid-column: 2; }
  .wordmark { margin: 8px 0 2px; font-size: 24px; letter-spacing: .14em; }
  .market-section { margin-top: 24px; }
  .section-heading { gap: 6px; margin-bottom: 10px; }
  .section-heading h2, .page { font-size: 18px; }
  .market-grid { gap: 8px; }
  .market-card { padding: 10px; }
  .coin-heading img { width: 26px; height: 26px; }
  .coin-heading div span { font-size: 10px; }
  .market-price { margin-top: 6px; font-size: 18px; }
  .market-change { margin-bottom: 4px; font-size: 12px; }
  .market-spark, .spark { height: 28px; }
  .foot { padding: 12px 0 18px; }
  .card.auth { width: 100%; max-width: 420px; min-width: 0; padding: 20px 16px; }
  .card.auth input { width: 100%; min-width: 0; font-size: 16px; min-height: 36px; padding: 6px 10px; margin-bottom: 4px; }
  .card.auth button.grad { min-height: 36px; padding: 6px 12px; margin-top: 6px; }
  .card.auth .subtitle { font-size: 10px; letter-spacing: .22em; }
  .card.auth .hint { overflow-wrap: anywhere; }
  .card { min-width: 0; padding: 12px; }
  .card h2 { font-size: 16px; }
  .card th, .card td { padding: 7px 8px; font-size: 12px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .kv dd { margin-bottom: 6px; }
  .mobile-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .mobile-table-scroll table { min-width: 560px; }
  .mobile-table-scroll td { overflow-wrap: anywhere; }
  .mobile-table-scroll td:first-child { max-width: 230px; }
  .mobile-scroll-hint { display: block; color: var(--muted); font-size: 11px; margin: 8px 0; }
  .mobile-detail-link { display: inline-flex; min-height: 32px; align-items: center; color: #b9a9ff; font-size: 12px; }
  :is(.mobile-table-scroll, .dc-calendar-scroll):focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

  /* Compact controls: keep native inputs readable; no transform/zoom or clipped labels. */
  .cvd-page .cvd-controls, .rsi-page .rsi-controls, .dc-filters {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px;
  }
  .cvd-page .cvd-controls label, .rsi-page .rsi-controls label, .dc-chip {
    display: flex; flex-direction: row; align-items: center; gap: 4px; padding: 0 6px;
    min-width: 0; letter-spacing: 0;
  }
  .cvd-page .cvd-controls label > span, .rsi-page .rsi-controls label > span, .dc-chip > span {
    flex: 0 1 auto; max-width: 42%; text-align: left; font-size: 11px;
    line-height: 1.3; letter-spacing: 0; overflow-wrap: anywhere;
  }
  .cvd-page .cvd-controls :is(input, select), .rsi-page .rsi-controls select, .dc-chip > :is(select, input) {
    flex: 1 1 0; width: 0; min-width: 0; max-width: 100%; min-height: 34px; height: 34px;
    margin: 0; padding: 0 2px; font-size: 16px; letter-spacing: 0;
  }
  /* Time/date and long option labels need the full field width on small screens. */
  .dc-chip:has(input[type="time"]), .dc-chip:has(#f-tz, #f-basis, #f-kind),
  .rsi-page .rsi-controls label:has(#rsi-reorder) {
    flex-direction: column; align-items: stretch; gap: 0; padding: 3px 6px 0;
  }
  .dc-chip:has(input[type="time"]) > span, .dc-chip:has(#f-tz, #f-basis, #f-kind) > span,
  .rsi-page .rsi-controls label:has(#rsi-reorder) > span { max-width: none; }
  .dc-chip:has(input[type="time"]) > input, .dc-chip > :is(#f-tz, #f-basis, #f-kind),
  .rsi-page #rsi-reorder { flex: none; width: 100%; }
  /* Expand only a selected long value, rather than ellipsizing meaningful conditions. */
  .dc-chip:has(#f-tz option[value="msk"]:checked),
  .dc-chip:has(#f-basis option[value="cc"]:checked),
  .dc-chip:has(#f-kind option[value="NFP"]:checked),
  .rsi-page .rsi-controls label:has(#rsi-reorder option[value="0"]:checked) { grid-column: 1 / -1; }
  .cvd-page .cvd-controls button, .rsi-page .rsi-controls button { grid-column: 1 / -1; min-height: 34px; padding: 4px 8px; }
  .cvd-page .cvd-end-field { grid-column: 1 / -1; }
  .rsi-page .rsi-controls label:first-child { grid-column: 1 / -1; }
  .cvd-page .cvd-layout, .dc-main { grid-template-columns: minmax(0, 1fr); }
  .cvd-page .cvd-panel-title { flex-wrap: wrap; gap: 6px; }
  .cvd-page .cvd-heading, .rsi-page .rsi-heading, .dc-heading { gap: 6px; margin-bottom: 10px; }
  .cvd-page .cvd-heading h1, .rsi-page .rsi-heading h1, .dc-heading .dc-h1 { font-size: 18px; }
  .cvd-page .wrap, .rsi-page .wrap, .dc-app .wrap { padding-top: 12px; }
  .cvd-page .cvd-panel > h2, .cvd-page .cvd-panel-title, .rsi-page .rsi-panel-title { padding: 8px 10px; }
  .cvd-page #cvd-price { height: 190px; }
  .cvd-page .cvd-band canvas { min-width: 0; }
  .cvd-page .cvd-side-column td { overflow-wrap: anywhere; }
  .cvd-page .cvd-recent-item { min-width: 0; overflow-wrap: anywhere; }
  .rsi-page .rsi-heading { flex-wrap: wrap; }
  .rsi-page .rsi-meta { flex-direction: column; gap: 4px; margin: 6px 0 10px; }
  .rsi-page .rsi-meta p, .rsi-page .rsi-footnote, .rsi-page .rsi-table-note { font-size: 11px; }
  .rsi-page .rsi-panel-title { flex-wrap: wrap; }
  .rsi-page .rsi-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsi-page .rsi-metrics strong { font-size: 21px; overflow-wrap: anywhere; }
  .rsi-page .rsi-detail h3 { overflow-wrap: anywhere; }
  .rsi-page .rsi-open, .rsi-page #rsi-close { min-height: 34px; }
  .rsi-page .rsi-dialog { width: calc(100% - 20px); max-width: none; padding: 10px; max-height: 90vh; max-height: 90dvh; }
  .rsi-page .rsi-dialog .rsi-panel-title { padding: 8px; }
  .dc-chip { min-width: 0; max-width: none; }
  .dc-chip-symbol, #chip-start, #chip-end { grid-column: 1 / -1; }
  .dc-legend { flex-wrap: wrap; gap: 6px; }
  .dc-calendar, .dc-stats { min-width: 0; padding: 10px; }
  /* 055: keep the same Monday-first weekday columns as desktop, including blanks. */
  .dc-calendar-scroll .dc-weekdays, .dc-calendar-scroll .dc-grid {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px;
  }
  .dc-calendar-scroll .dc-cell-blank { display: block; }
  .dc-calendar-scroll .dc-cell {
    min-width: 0; min-height: 48px; padding: 3px 2px; border-radius: 4px;
    font-size: 11px; line-height: 1.25;
  }
  .dc-calendar-scroll .dc-cell-date { font-size: 10px; }
  .dc-calendar-scroll .dc-cell-pct {
    margin-top: 3px; font-size: clamp(9px, 2.6vw, 11px); letter-spacing: -.04em;
    font-family: Arial, sans-serif; overflow-wrap: anywhere;
  }
  .dc-calendar-scroll .dc-cell-macro { font-size: 9px; margin-top: 3px; overflow-wrap: anywhere; }
  .dc-calendar-scroll .dc-cell-date::after { content: none; }
  .rsi-page #rsi-selected-detail { scroll-margin-top: 14px; }
  .rsi-page .mobile-detail-link { margin: 0 12px; }
  .dc-cell-macro { overflow-wrap: anywhere; }
  .dc-cal-nav .dc-range { min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
  .dc-nav-btn { flex: none; min-width: 34px; min-height: 34px; padding: 2px 0; }
  .dc-title-sub { display: block; margin: 4px 0 0; }
  .dc-freshness { overflow-wrap: anywhere; }
  .dc-event-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .dc-event-date { grid-column: 1; }
  .dc-event-kinds { grid-column: 1; grid-row: 2; }
  .dc-event-pct { grid-column: 2; grid-row: 1; }
  .dc-event-btc { grid-column: 2; grid-row: 2; }
  .dc-event-row .dc-chart-link { grid-column: 1 / -1; min-height: 32px; display: flex; align-items: center; }
  .dc-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc-tile { min-width: 0; padding: 8px; overflow-wrap: anywhere; }
  .dc-tile-v { font-size: 14px; }
  .dc-sheet-backdrop { padding: 10px; align-items: end; }
  .dc-sheet { width: 100%; max-height: 88vh; max-height: 88dvh; padding: 14px; overflow-wrap: anywhere; }
  .dc-close { float: none; display: block; margin: 0 0 8px auto; min-height: 34px; padding: 4px 10px; }
  .dc-srow { flex-wrap: wrap; }
  .dc-srow .dc-v { margin-left: auto; }
  .dc-hbars { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; }
}
@media (max-width: 600px) {
  /* Full-width plots below their labels; no cramped 100px sparklines. */
  .cvd-page .cvd-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 6px 0 0; }
  .cvd-page .cvd-band-label { grid-column: 1; grid-row: 1; font-size: 12px; }
  .cvd-page .cvd-band-value { grid-column: 2; grid-row: 1; font-size: 12px; }
  .cvd-page .cvd-band canvas { grid-column: 1 / -1; grid-row: 2; height: 60px; }
  /* Same semantic table/data, arranged as cards. All seven fields remain visible. */
  .rsi-page .rsi-table { display: block; min-width: 0; }
  .rsi-page .rsi-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rsi-page .rsi-table tbody { display: block; }
  .rsi-page .rsi-table tr[data-id] { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(88px, 1fr); gap: 2px 6px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
  .rsi-page .rsi-table tr[data-id] td { min-width: 0; width: auto; height: auto; padding: 2px 0; border: 0; font-size: 12px; }
  .rsi-page .rsi-table tr[data-id] td:first-child { align-self: center; }
  .rsi-page .rsi-table .rsi-coin { min-height: 34px; font-size: 13px; }
  .rsi-page .rsi-value { min-height: 24px; }
  .rsi-page .rsi-value strong { font-size: 15px; }
  .rsi-page .rsi-track { width: 32px; }
  .rsi-page .rsi-table tr[data-id] td:nth-child(4), .rsi-page .rsi-table tr[data-id] td:nth-child(6) { grid-column: 1 / 3; text-align: left; }
  .rsi-page .rsi-table tr[data-id] td:nth-child(n+3)::before { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
  .rsi-page .rsi-table tr[data-id] td:nth-child(n+4)::before { display: inline; margin-right: 5px; }
  .rsi-page .rsi-table .rsi-spark { display: inline-block; width: 70px; max-width: 100%; height: 22px; vertical-align: middle; }
  .rsi-page .rsi-table td:nth-child(3)::before { content: "RSI"; }
  .rsi-page .rsi-table td:nth-child(4)::before { content: "順位変動"; }
  .rsi-page .rsi-table td:nth-child(5)::before { content: "時価総額順位"; }
  .rsi-page .rsi-table td:nth-child(6)::before { content: "24h変化 · CoinGecko"; }
  .rsi-page .rsi-table td:nth-child(7)::before { content: "RSI推移"; }
}
@media (max-width: 374px) {
  .dc-calendar-scroll .dc-weekdays, .dc-calendar-scroll .dc-grid { gap: 2px; }
  .dc-calendar-scroll .dc-cell { padding-inline: 1px; }
  /* At 320px, reserve the full half-column for native control text and its arrow. */
  .cvd-page .cvd-controls label, .rsi-page .rsi-controls label, .dc-chip {
    flex-direction: column; align-items: stretch; gap: 0; padding: 3px 6px 0;
  }
  .cvd-page .cvd-controls label > span, .rsi-page .rsi-controls label > span, .dc-chip > span { max-width: none; }
  .cvd-page .cvd-controls :is(input, select), .rsi-page .rsi-controls select, .dc-chip > :is(select, input) {
    flex: none; width: 100%;
  }
}
@media (max-width: 430px) {
  /* Single-column quote cards: use their empty right side for the existing sparkline. */
  .market-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(70px, .7fr); column-gap: 8px; }
  .coin-heading { grid-column: 1 / -1; }
  .market-price { grid-column: 1; grid-row: 2; margin-top: 4px; }
  .market-change { grid-column: 1; grid-row: 3; margin-bottom: 0; }
  .market-spark { grid-column: 2; grid-row: 2 / 4; align-self: center; }
}
@media (min-width: 761px) {
  .mobile-scroll-hint, .mobile-detail-link { display: none; }
}