/* Breakpoints use the space left beside the navigation/member list, including
   browser zoom, rather than assuming that the whole window belongs to a page. */
#content { container-name: portal-content; container-type: inline-size; }
/* A shared heading silhouette. Clip only its decoration so dropdown menus
   can extend beyond the heading without being cut off. */
body #content :is(.portal-page-intro, .season-compass-hero, .dashboard-hero) {
    isolation: isolate;
    border-radius: 0;
    border-color: transparent;
    background: none;
    box-shadow: none;
    clip-path: none;
    overflow: visible;
    margin-bottom: 18px;
}
body #content :is(.portal-page-intro, .season-compass-hero, .dashboard-hero) + * { margin-top: 0; }
body #content :is(.member-dashboard, .characters-page, .raid-pov-page, .guild-bank-page) { row-gap: 18px; }
body #content :is(.member-dashboard, .characters-page, .raid-pov-page, .guild-bank-page)
    > :is(.portal-page-intro, .dashboard-hero) { margin-bottom: 0; }
body #content :is(.portal-page-intro, .season-compass-hero, .dashboard-hero)::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    pointer-events: none;
    border: 1px solid var(--border-soft);
    border-left: 3px solid var(--portal-section-accent, var(--season-blue, var(--accent-cyan)));
    border-radius: 0;
    background: linear-gradient(100deg, rgba(73, 198, 255, .07), transparent 30%),
        linear-gradient(145deg, #101925, #0c131e 72%);
    clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
body .raid-roster-panel { grid-template-columns: minmax(0, 1fr); }
body .raid-roster-panel > *, body .raid-roster-board { min-width: 0; }
body .officer-panel > *, body .roster-admin > *, body .roster-admin-view { min-width: 0; }
body .wishlist-admin-section { grid-template-columns: minmax(0, 1fr); }
body .raider-audit-content, body .raider-audit-view { grid-template-columns: minmax(0, 1fr); }
body .raider-audit-content > *, body .raider-audit-view > *, body .raider-audit-section { min-width: 0; }
body .raider-audit-toolbar label,
body .raider-audit-toolbar select,
body .loot-history__filters > * { min-width: 0; max-width: 100%; }
body .raider-audit-toolbar select { width: 100%; }
body .loot-history__filters {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}
body .officer-log-filters { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
body .officer-log-filters > * { min-width: 0; }

@container portal-content (max-width: 760px) {
    body .raid-analysis-header-actions { position: relative; width: 100%; }
    body .raid-analysis-settings-menu { position: static; }
    body .raid-analysis-settings-menu > div { left: 0; right: auto; max-width: 100%; }
    body .raid-analysis-settings-menu button { white-space: normal; }
    body .portal-page-intro { display: flex; flex-direction: row; flex-wrap: wrap; gap: 14px; }
    body .portal-page-heading { min-width: 0; flex: 1 1 100%; }
    body .portal-page-tools { max-width: 100%; margin-left: 0; flex-wrap: wrap; }
    body .season-compass-hero { display: flex; flex-direction: row; flex-wrap: wrap; }
    body .season-compass-hero .compass-command-heading { flex: 1 1 100%; min-width: 0; }
    body .characters-connections { grid-template-columns: minmax(0, 1fr); }
    body .member-dashboard .dashboard-content { grid-template-columns: minmax(0, 1fr); }
    body .member-dashboard .dashboard-content .dashboard-panel { grid-column: auto; }
    body .wishlist-tabs,
    body .raider-audit-page-tabs,
    body .season-compass-tabs { flex-wrap: wrap; max-width: 100%; }
    body .wishlist-tabs .wishlist-tab { white-space: normal; height: auto; padding-block: 10px; }
    body .raider-audit-page .raider-audit-toolbar,
    body .raider-audit-page .raider-audit-toolbar:has(label[hidden]) { grid-template-columns: minmax(0, 1fr); }
    body .raider-audit-page .raider-audit-navigation { display: flex; flex-wrap: wrap; }
    body .raider-audit-page .raider-audit-navigation button { flex: 1 1 140px; white-space: normal; overflow-wrap: anywhere; }
    body .raid-roster-panel__heading,
    body .raid-roster-panel__tools { flex-wrap: wrap; min-width: 0; }
    body .raid-roster-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body .raid-roster-tabs { display: flex; flex-wrap: wrap; }
    body .officer-log-guide { grid-template-columns: minmax(0, 1fr); }
    body :is(.officer-groups, .officer-subtabs, .raider-audit-page-tabs, .raid-roster-tabs,
        .roster-admin-tabs, .season-topic-nav, .season-topic-tabs, .wishlist-tabs) button {
        width: auto; max-width: 100%; white-space: normal;
    }
    body .gearing-topic-visual .mistcrest-tracks { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
}