/* Breakpoints follow the space beside the sidebar, including an unfolded Fold. */
.mc-main { container-type: inline-size; }
.mc-section-nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.mc-section-nav > * { flex-shrink: 0; }
.mc-menubar { min-width: 0; }
.mc-menubar-actions { padding-left: 6px; }
.mc-toolbar { flex-wrap: wrap; }
.mc-toolbar :is(select, input) { min-width: 0; max-width: 100%; }
.rk-filter-btn { white-space: nowrap; }
.mc-toolbar-right { min-width: 0; flex-wrap: wrap; }
.rk-number-compact, .rk-mobile-change { display: none; }
.rk-ch-meta { flex: 1; }
.mc-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mc-split > *, .trend-dashboard > * { min-width: 0; }
.mc-card-header { flex-wrap: wrap; gap: 8px; }
.rk-pagination, .hc-pagination { flex-wrap: wrap; flex-shrink: 0; }

/* The shared sidebar becomes fixed here; reserve its rail for every tab. */
@media (max-width: 1000px) {
  .mc-body .mc-main { margin-left: 52px; }
}

@container (max-width: 1200px) {
  .rk-table[data-mode="channel"] colgroup { display: none; }
  .rk-table[data-mode="channel"] :is(th, td):nth-child(n + 7) { display: none; }
  .rk-table[data-mode="channel"] th:nth-child(1) { width: 48px; }
  .rk-table[data-mode="channel"] th:nth-child(2) { width: 52px; }
  .rk-table[data-mode="channel"] th:nth-child(3) { width: auto; }
  .rk-table[data-mode="channel"] th:nth-child(4) { width: 145px; }
  .rk-table[data-mode="channel"] th:nth-child(5) { width: 125px; }
  .rk-table[data-mode="channel"] th:nth-child(6) { width: 95px; }
  .rk-table :is(th, td) { padding: 12px 8px; font-size: 13px; }
  .rk-ch-name { max-width: none; white-space: normal; overflow-wrap: anywhere; text-align: left; font-size: 14px; }
  .rk-ch-subs { font-size: 12px; text-align: left; white-space: nowrap; }
  .rk-ch-info { gap: 8px; }
  .hc-table { table-layout: fixed; }
  .hc-table .hc-channel-cell, .hc-table .hc-column-header th:first-child { width: 230px !important; }
  .hc-million-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-video-card { min-width: 0; }
  .hc-video-card > a:first-child { width: 90px !important; height: auto !important; aspect-ratio: 16 / 9; }
  .hc-channel-cell strong { max-width: none !important; white-space: normal !important; overflow-wrap: anywhere; }
  .mc-toolbar-sep { display: none; }
  .rk-filter-group { min-width: 0; max-width: 100%; }
  .rk-filter-buttons { min-width: 0; max-width: 100%; overflow-x: auto; }
  .rk-filter-btn { flex-shrink: 0; }
  .mc-toolbar[data-toolbar="ranking"] .mc-toolbar-right { flex-basis: 100%; margin-left: 0; }
  #rkLastUpdate { margin-left: auto; }
}

@container (max-width: 900px) {
  /* Keep the selected ranking metric visible when other statistics disappear. */
  .rk-table[data-mode="channel"] :is(th, td):nth-child(n + 4) { display: none; }
  .rk-table[data-sort="views_delta"] :is(th, td):nth-child(4),
  .rk-table[data-sort="subs_delta"] :is(th, td):nth-child(5),
  .rk-table[data-sort="subscribers"] :is(th, td):nth-child(6) { display: table-cell; width: 135px; }
  .mc-split { grid-template-columns: minmax(0, 1fr); }
  .trend-dashboard { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-table, .hc-table tbody { display: block; width: 100%; }
  .hc-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--mc-border-light); }
  .hc-table .hc-column-header { display: none; }
  .hc-table td { display: block; min-width: 0; max-width: none; border: 0; }
  .hc-table .hc-channel-cell { width: auto !important; grid-column: 1 / -1; }
  .hc-million-col, .hc-cat-header-row td { grid-column: 1 / -1; }
  .hc-single-title::before { content: attr(data-label); display: block; margin-bottom: 6px; font-size: 12px; color: var(--mc-text-2); }
  .surge-board .keywords-table { table-layout: fixed; }
  .surge-board :is(th, td):last-child,
  .surge-board .surge-category { display: none; }
  .surge-board th:nth-child(2) { width: 150px !important; }
  .surge-board th:nth-last-child(2) { width: 110px !important; }
  #surgeToolbarFilters { flex-wrap: wrap; min-width: 0; margin-left: 0 !important; }
  #surgeFilterInfo { flex-basis: 100%; margin-left: 0 !important; }
}

@container (max-width: 650px) {
  .mc-menubar { height: auto; min-height: 44px; padding: 2px 6px; }
  .mc-menu-item { min-height: 40px; padding: 8px 10px; }
  .mc-menu-item svg, .mc-menu-sep { display: none; }
  .mc-toolbar { padding: 8px; gap: 8px; }
  .mc-toolbar-title { display: none; }
  .mc-toolbar :is(button, select, .mc-tab, .mc-toggle) { min-height: 38px; }
  .mc-toolbar[data-toolbar="ranking"], .hc-filter-bar { max-height: 42dvh; overflow-y: auto; }
  .rk-filter-group:has(select), .hc-filter-group { flex: 1 1 calc(50% - 8px); flex-direction: column; align-items: stretch; gap: 4px; }
  .rk-filter-group:has(#rkPeriodFilter), .rk-filter-group:has(#rkSortFilter) { flex-basis: 100%; }
  .rk-filter-group:has(#rkSortFilter) > label, .rk-filter-group:has(#rkPeriodFilter) > label { display: none; }
  #rkPeriodFilter { width: 100%; }
  #rkPeriodFilter > button { flex: 1; }
  #rkSortFilter { width: 100%; }
  .rk-filter-btn { padding-inline: 10px; }
  .rk-filter-select, .hc-select, .hc-search-input { width: 100%; }
  .hc-search-group { flex-basis: 100%; }
  #rkStatsInfo, #rkLastUpdate, #hcAnalysisPeriod { display: none; }
  .mc-toolbar-right:has(#rkCacheStatus:empty), .hc-filter-bar .mc-toolbar-right { display: none; }
  .mc-toolbar[data-toolbar="trend"] .mc-toolbar-right { margin-left: 0; flex-basis: 100%; }
  #crChartTabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .mc-content { padding: 8px 6px; }
  .mc-status { display: none; }
  .mc-panel { min-width: 0; }
  .rk-table[data-mode="channel"] :is(th, td):nth-child(2) { display: none; }
  .rk-table[data-mode="channel"] th:first-child { width: 42px; }
  .rk-table[data-mode="channel"] :is(th, td):nth-child(n + 4) { width: 94px; white-space: nowrap; }
  .rk-table[data-mode="channel"] th { font-size: 11px; letter-spacing: 0; white-space: normal !important; }
  .rk-table :is(th, td) { padding: 10px 5px; }
  .rk-ch-thumb { width: 34px; height: 34px; }
  .rk-badge { width: 28px; height: 28px; font-size: 13px; }
  .rk-mobile-change { display: block; margin-top: 5px; }
  .rk-mobile-change .rk-change { font-size: 11px; }
  .rk-table .rk-number-full { display: none; }
  .rk-table .rk-number-compact { display: inline; }
  /* Video rankings become a channel heading followed by its video grid. */
  .rk-table:not([data-mode="channel"]), .rk-table:not([data-mode="channel"]) tbody { display: block; }
  .rk-table:not([data-mode="channel"]) :is(colgroup, thead) { display: none; }
  .rk-table:not([data-mode="channel"]) tr { display: grid; grid-template-columns: 42px minmax(0, 1fr); border-bottom: 1px solid var(--mc-border-light); }
  .rk-table:not([data-mode="channel"]) td { display: block; border: 0; min-width: 0; }
  .rk-mv-grid-cell, .rk-table td[colspan] { grid-column: 1 / -1; }
  .rk-mv-channel-name { white-space: normal; overflow-wrap: anywhere; }
  .rk-mv-channel-info { align-items: center; }
  .rk-mv-grid { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
  .rk-pagination, .hc-pagination { gap: 4px; padding: 12px 0; }
  .rk-page-btn, .hc-page-btn { min-width: 36px; min-height: 38px; padding: 4px 8px; }
  .hc-million-grid { grid-template-columns: minmax(0, 1fr); }
  .hc-table tr { grid-template-columns: minmax(0, 1fr); }
  .hc-table .hc-channel-cell { padding: 12px !important; }
  .hc-cat-header-label { flex-wrap: wrap; overflow-wrap: anywhere; }
  .mc-card { padding: 10px; }
  .mc-card-header { align-items: flex-start; }
  .mc-keyword-card-actions { justify-content: flex-start; }
  .keywords-table.compact { table-layout: fixed; font-size: 13px; }
  .keywords-table.compact :is(th, td) { padding: 9px 5px; }
  .keywords-table.compact th { font-size: 11px; letter-spacing: 0; }
  .keywords-table.compact th:first-child { width: 38px !important; }
  .keywords-table.compact th:nth-child(3) { width: 72px !important; }
  .keywords-table.compact :is(th, td):last-child { display: none; }
  .keyword-text { font-size: 14px; overflow-wrap: anywhere; }
  .trend-dashboard { grid-template-columns: minmax(0, 1fr); }
  .trend-card { min-height: 260px; }
  .trend-card-header { flex-wrap: wrap; gap: 6px; padding: 10px; }
  .surge-board .keywords-table, .surge-board tbody { display: block; }
  .surge-board thead { display: none; }
  .surge-board tr { display: grid; grid-template-columns: 38px minmax(0, 1fr); padding: 10px 6px; border-bottom: 1px solid var(--mc-border); }
  .surge-board td { min-width: 0; border: 0; padding: 4px; }
  .surge-board td:first-child { grid-row: 1 / 4; }
  .surge-board td:nth-child(2) { grid-column: 2; }
  .surge-board td:nth-child(2) a > span { white-space: normal !important; overflow-wrap: anywhere; }
  .surge-board .surge-title, .surge-board td:nth-last-child(2) { grid-column: 2; text-align: left !important; }
  .surge-board td:nth-last-child(2)::before { content: attr(data-label) " "; font-size: 12px; }
  .surge-toolbar-dropdown { position: static; }
  .mc-toolbar .surge-tb-dropdown-menu { left: 8px; right: 8px; width: auto; min-width: 0; max-height: 45dvh; }
  #keywordModal > div { width: calc(100% - 20px) !important; margin: 10px auto !important; padding: 16px !important; }
  .video-item { gap: 8px; padding-inline: 0; }
  .video-item > div { min-width: 0; overflow-wrap: anywhere; }
}

@container (max-width: 360px) {
  .rk-table[data-mode="channel"] :is(th, td):nth-child(n + 4) { width: 78px; font-size: 12px; }
  .rk-ch-info { gap: 5px; }
  .rk-ch-thumb { width: 28px; height: 28px; }
  .rk-ch-name { font-size: 13px; }
  .mc-keyword-card-actions .mc-tab { padding-inline: 8px; }
  .hc-video-card > a:first-child { width: 78px !important; }
}