/* Shared responsive layer, loaded after the theme and component styles. */
.app-shell .app-main, .workspace, .workspace > *, .public-shell main > *,
.form-grid > *, .split > *, .field, fieldset, .panel, .page-head > *,
.dashboard-columns > *, .member-identity, .resource-card, .cms-block-fields > * {
  min-width: 0;
}
.workspace :is(h1, h2, h3, p, label, strong), .public-shell :is(h1, h2, h3, p) { overflow-wrap: anywhere; }
.field :is(input, select, textarea), .form-grid :is(input, select, textarea) { max-width: 100%; min-width: 0; }
.table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.sidebar-close, .nav-backdrop { display: none; }
.public-nav-mobile-account { display: none; }
.app-shell .page-head, .app-shell .panel-head { gap: 1rem; }
.app-shell .page-head > .button { white-space: normal; text-align: center; }
.app-shell .filter-bar { flex-wrap: wrap; }
.app-shell .filter-bar input { min-width: min(240px, 100%); }
.app-shell .filter-bar select { max-width: 100%; }
.app-shell .cms-page-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.app-shell .cms-media-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.app-shell .cms-builder-toolbar { flex-wrap: wrap; }
.app-shell .cms-builder-toolbar .field { min-width: 0; flex: 1 1 230px; }
.app-shell .cms-card-fields { grid-template-columns: minmax(80px, .5fr) minmax(0, 1fr) minmax(0, 2fr) auto; }
.app-shell .cms-navigation-item { grid-template-columns: auto minmax(0, 1fr) minmax(0, .7fr) auto auto; }
.app-shell .member-manage-form { min-width: 0; }
.app-shell .club-admin-list .content-resource-row > summary { grid-template-columns: auto minmax(0, 1fr) auto; }
.app-shell .club-admin-list summary > span { min-width: 0; }
dialog { max-width: calc(100% - 1.5rem); max-height: calc(100dvh - 1.5rem); }

/* The drawer starts at tablet landscape: a fixed 282px rail otherwise leaves
   too little room for the dashboard and editing forms. */
@media (max-width: 1100px) {
  .app-shell .app-main { margin-left: 0; }
  .app-shell .app-header { height: auto; min-height: 72px; padding: .75rem 1.25rem; gap: 1rem; }
  .app-shell .app-header > div:not(.app-header-account) { min-width: 0; flex: 1; }
  .app-shell .app-header-account { margin-left: auto; min-width: 0; }
  .app-shell .header-club-name { max-width: 210px; }
  .app-shell .header-club-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-shell .nav-toggle, .public-shell .nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; flex-shrink: 0; }
  .nav-toggle-icon { display: grid; width: 18px; gap: 4px; }
  .nav-toggle-icon i { display: block; width: 18px; height: 2px; border-radius: 999px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon i:first-child { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon i:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-icon i:last-child { transform: translateY(-6px) rotate(-45deg); }
  .app-shell .sidebar {
    width: min(88vw, 352px); height: 100dvh; z-index: 100;
    transform: translateX(-100%); visibility: hidden;
    transition: transform .24s cubic-bezier(.2, .8, .2, 1), visibility .24s; overscroll-behavior-y: contain;
    padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom));
    border-right-color: rgba(255, 255, 255, .14); box-shadow: 24px 0 70px rgba(3, 17, 30, .34);
  }
  .app-shell .sidebar.is-open { transform: translateX(0); visibility: visible; }
  .sidebar-close { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-shrink: 0; min-height: 44px; margin-bottom: .75rem; padding: .5rem .75rem; border: 1px solid #52636c; border-radius: 8px; background: transparent; color: white; font: inherit; }
  .sidebar-close span { font-size: 1.5rem; }
  .nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 99; width: 100%; height: 100dvh; border: 0; border-radius: 0; background: #03111cb3; }
  body.navigation-open { overflow: hidden; }
  .app-shell .workspace { padding: 1.5rem 1.25rem 3rem; }
  .app-shell .dashboard-welcome { margin: -1.5rem -1.25rem 0; padding: 2.5rem 1.5rem; grid-template-columns: minmax(0, 1fr) minmax(180px, .5fr); gap: 1.5rem; }
  .app-shell .dashboard-welcome h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
  .app-shell .dashboard-columns { gap: 1.25rem; }
  .app-shell .resource-detail { grid-template-columns: minmax(0, 1fr); }
  .app-shell .resource-category-setting { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; }
  .public-shell .public-nav { display: none; position: absolute; top: calc(100% + .5rem); left: .75rem; right: .75rem; max-height: calc(100dvh - 100px); overflow-y: auto; padding: .7rem; border: 1px solid #dce3e5; border-radius: 18px; background: rgba(255, 255, 255, .98); color: var(--navy); box-shadow: 0 20px 50px rgba(7, 26, 43, .18); }
  .public-shell .public-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; }
  .public-shell .public-nav a { display: flex; align-items: center; min-height: 48px; padding: .6rem .8rem; border-radius: 10px; }
  .public-shell .public-nav a:hover, .public-shell .public-nav a:focus-visible { background: #eef6f3; }
  .public-shell .public-nav-mobile-account { display: grid; gap: .25rem; margin-top: .45rem; padding: .7rem .1rem .1rem; border-top: 1px solid #e3e9e8; }
  .public-shell .public-nav-mobile-account .button { display: inline-flex; min-height: 46px; }
  .public-shell .public-nav-mobile-account .text-button { justify-content: flex-start; min-height: 44px; padding: .6rem .8rem; color: var(--navy); text-align: left; }
  .public-shell .public-nav .button { width: 100%; justify-content: center; }
  .public-shell .header-auth { display: none; }
  .public-shell .site-header { position: sticky; }
}

@media (min-width: 641px) and (max-width: 1100px) {
  .app-shell .resource-grid, .app-shell .quick-grid, .app-shell .recommend-grid,
  .app-shell .form-grid, .public-shell .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .stats-grid, .app-shell .metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .creation-paths > a, .app-shell .creation-paths > .creation-path-button, .app-shell .creation-paths > .creation-path-disabled { padding: 1rem; }
}

@media (max-width: 760px) {
  .app-shell .dashboard-welcome { grid-template-columns: minmax(0, 1fr); }
  .app-shell img.dashboard-pitch { display: none; }
  .app-shell .dashboard-pitch-stage { max-width: 420px; width: 100%; margin-top: .5rem; }
  .app-shell .dashboard-columns, .app-shell .action-rail, .app-shell .split { grid-template-columns: minmax(0, 1fr); }
  .app-shell .page-head, .app-shell .panel-head { flex-wrap: wrap; align-items: flex-start; }
  .app-shell .page-head { margin-bottom: 1.5rem; }
  .app-shell .page-head h1 { font-size: clamp(1.9rem, 7vw, 2.8rem); }
  .app-shell .header-club-name { display: none; }
  .app-shell .creation-paths { grid-template-columns: minmax(0, 1fr); margin-bottom: 1.5rem; border-radius: 16px; }
  .app-shell .creation-paths > a, .app-shell .creation-paths > .creation-path-button, .app-shell .creation-paths > .creation-path-disabled { min-height: 0; padding: .85rem 1rem; border-radius: 12px; }
  .app-shell .creation-paths > .creation-path-button.creation-path-featured { min-height: 112px; margin-block: 0; padding: 1.1rem 1.2rem; transform: none; }
  .app-shell .creation-paths > .creation-path-button.creation-path-featured:hover { transform: translateY(-2px); }
  .app-shell .creation-paths > .creation-path-button.creation-path-featured strong { font-size: 1.12rem; }
  .app-shell .creation-paths strong { font-size: 1rem; }
  .app-shell .creation-paths small { font-size: .78rem; }
  .app-shell .calendar-month { min-width: 0; }
  .app-shell .calendar-weekdays span { padding: .6rem .15rem; font-size: .6rem; text-align: center; }
  .app-shell .calendar-day { min-width: 0; min-height: 84px; padding: .3rem .15rem; font-size: .75rem; }
  .app-shell .calendar-event-chip { padding: .35rem .15rem; min-height: 44px; }
  .app-shell .calendar-event-chip strong, .app-shell .calendar-event-chip small { font-size: .6rem; }
  .app-shell .calendar-period { flex-wrap: wrap; gap: .5rem; }
  .app-shell .calendar-period h2 { font-size: 1.25rem; }
  .app-shell .calendar-view-switch { flex-wrap: wrap; gap: .4rem; }
  .app-shell .calendar-view-switch button, .app-shell .calendar-period button { min-height: 44px; }
  .app-shell .calendar-event-form { padding: 1rem; }
  .app-shell .calendar-dialog-actions { flex-wrap: wrap; gap: .75rem; }
  .app-shell .wizard-actions { flex-wrap: wrap; gap: .75rem; }
  .app-shell .member-row { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .app-shell .member-usage { justify-content: flex-start; }
  .app-shell .member-usage > span { text-align: left; }
  .app-shell .member-manage-form { grid-template-columns: minmax(0, 1fr); }
  .app-shell .cms-card-fields, .app-shell .cms-navigation-item, .app-shell .cms-block-fields { grid-template-columns: minmax(0, 1fr); }
  .app-shell .cms-block-head, .app-shell .cms-block-actions { flex-wrap: wrap; gap: .5rem; }
  body.app-shell .cms-builder-toolbar, body.app-shell .cms-sticky-actions { position: static; }
  .app-shell .cms-inline-publish { margin-top: 1rem; }
  .app-shell .club-admin-list .content-resource-row > summary { grid-template-columns: auto minmax(0, 1fr); gap: .65rem; padding: 1rem .75rem; }
  .app-shell .club-admin-list .resource-list-status { grid-column: 1; grid-row: 1; }
  .app-shell .club-admin-list summary > span:nth-child(2) { grid-column: 2; grid-row: 1; }
  .app-shell .club-admin-list .resource-list-open { grid-column: 2; }
  .app-shell .club-admin-list summary strong, .app-shell .club-admin-list summary small { display: block; overflow-wrap: anywhere; }
  .public-shell .cms-image-text, .public-shell .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .public-shell .hero { min-height: auto; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: clamp(3rem, 11vw, 5rem); padding-bottom: clamp(3rem, 12vw, 5rem); }
  .public-shell .hero-copy, .public-shell .section-heading, .public-shell .contact-note { text-align: center; }
  .public-shell .hero-copy > p, .public-shell .hero-lead, .public-shell .contact-note > p { margin-inline: auto; }
  .public-shell .hero-actions { justify-content: center; }
  .public-shell .hero-value-panel, .public-shell .cms-hero-image { width: min(100%, 520px); margin-inline: auto; }

  /* Portrait is a single-column reading experience. Keep the compact eyebrow
     as a left-hand cue, but centre the content it introduces. */
  .public-shell .eyebrow { text-align: left; }
  .public-shell .hero-brand-image { margin-inline: auto; }
  .public-shell :is(.section-heading > div, .problem-wrap, .benefit-wrap, .showcase-head,
    .resource-advert-copy, .coach-photo-copy, .tactics-showcase-copy, .board-card-copy,
    .price-card, .cms-image-text > :not(.cms-content-image), .club-cta-inner) { text-align: center; }
  .public-shell :is(.section-heading, .problem-wrap, .benefit-wrap, .showcase-head,
    .resource-advert-copy, .coach-photo-copy, .tactics-showcase-copy, .board-card-copy,
    .price-card, .cms-image-text > :not(.cms-content-image), .club-cta-inner) .eyebrow { text-align: left; }
  .public-shell :is(.problem-card, .platform-card, .feature-card, .board-card-copy, .price-card) { text-align: center; }
  .public-shell :is(.problem-card, .platform-card, .feature-card) .number,
  .public-shell .tactics-showcase-copy .number-badge { margin-inline: auto; }
  .public-shell .match-practice-panel { text-align: center; }
  .public-shell .match-practice-panel .eyebrow { text-align: left; }
  .public-shell .match-practice-step { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 1rem; }
  .public-shell .match-practice-step div { align-items: center; text-align: center; }
  .public-shell .match-practice-result { text-align: center; }
  .public-shell .board-note { text-align: center; }
  .public-shell .price-card > .eyebrow, .public-shell .price-card > .plan-ribbon { align-self: stretch; text-align: left; }
  .app-shell .dashboard-welcome .eyebrow, .app-shell .page-head .eyebrow { text-align: left; }
}

@media (max-width: 640px) {
  .app-shell .app-header { min-height: 64px; padding: .6rem .85rem; gap: .65rem; }
  .app-shell .app-header .eyebrow { font-size: .52rem; letter-spacing: .12em; }
  .app-shell .app-header .eyebrow::before { display: none; }
  .app-shell .app-header strong { font-size: .83rem; line-height: 1.3; }
  .app-shell .user-avatar { width: 42px; height: 42px; flex-shrink: 0; }
  .app-shell .user-context-menu { width: min(280px, calc(100vw - 2rem)); }
  .app-shell .workspace { padding: 1.25rem .875rem 2.5rem; }
  .app-shell .dashboard-welcome { margin: -1.25rem -.875rem 0; padding: 2rem 1.1rem; }
  .app-shell .dashboard-welcome > div:first-child, .app-shell .page-head > div:first-child { text-align: center; }
  .app-shell .dashboard-welcome p, .app-shell .page-head p { margin-inline: auto; }
  .app-shell .page-head { align-items: stretch; }
  .app-shell .page-head > .button { width: 100%; }
  .app-shell .dashboard-welcome h1 { font-size: clamp(2rem, 9vw, 2.9rem); line-height: 1.08; }
  .app-shell .dashboard-welcome p { font-size: .94rem; line-height: 1.6; }
  .app-shell .hero-actions { display: flex; flex-direction: column; align-items: stretch; gap: .65rem; }
  .app-shell .hero-actions .button { width: 100%; padding-inline: .85rem; font-size: .85rem; text-align: center; }
  .app-shell .metric-strip, .app-shell .leader-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .metric-strip > div, .app-shell .leader-metrics > div { padding: 1rem .6rem; }
  .app-shell .metric-strip strong { font-size: 2rem; }
  .app-shell .metric-strip span { font-size: .65rem; }
  .app-shell .resource-grid, .app-shell .quick-grid, .app-shell .recommend-grid, .app-shell .form-grid,
  .app-shell .choice-grid, .app-shell .ai-brief-grid, .app-shell .ai-wizard-aside { grid-template-columns: minmax(0, 1fr); }
  .app-shell .panel, .app-shell .wizard-step { padding: 1rem; }
  .app-shell .button, .public-shell .button { min-height: 44px; max-width: 100%; white-space: normal; text-align: center; }
  .app-shell .filter-bar > :is(input, select, button, .button, .filter-select) { width: 100%; flex-basis: 100%; min-width: 0; }
  .app-shell .ai-dashboard-action { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem; }
  .app-shell .ai-dashboard-action .ai-quota-pill { grid-column: 2; grid-row: 2; justify-self: start; white-space: normal; margin: 0; font-size: .7rem; padding: .5rem .65rem; }
  .app-shell .ai-dashboard-action > span:last-child { grid-column: 3; grid-row: 1; }
  .app-shell .ai-dashboard-action strong { font-size: 1rem; }
  .app-shell .ai-dashboard-action small { font-size: .8rem; }
  .app-shell .resource-category-setting { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-shell .resource-category-setting > :first-child { grid-column: 1 / -1; }
  .app-shell .pagination, .app-shell .list-row { flex-wrap: wrap; gap: .65rem; }
  .app-shell .tactics-v2-mount, .app-shell .tactics-v2-mount .tc-root, .app-shell .tactics-v2-mount .tc-workspace { min-height: 0; height: auto; }
  .app-shell .admin-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .5rem; max-width: 100%; }
  .app-shell .admin-tabs a { flex-shrink: 0; min-height: 44px; }
  .app-shell .flash { margin: .75rem .875rem; }
  .public-shell .page-hero h1, .public-shell .legal-page h1 { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  .public-shell .contact-grid { gap: 1.5rem; }
  .public-shell .site-footer nav { flex-wrap: wrap; gap: .5rem 1rem; }
  .public-shell .site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .app-shell .field :is(input, select, textarea), .public-shell .field :is(input, select, textarea),
  .app-shell .form-grid :is(input, select, textarea), .public-shell .form-grid :is(input, select, textarea) { font-size: 16px; }
}

@media (max-width: 400px) {
  .app-shell .nav-toggle-label { display: none; }
  .app-shell .nav-toggle { width: 44px; padding-inline: 0; }
  .app-shell .app-header > div:not(.app-header-account) { overflow: hidden; }
  .app-shell .app-header > div:not(.app-header-account) > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .public-shell .site-header { height: 70px; padding-inline: .75rem; }
  .public-shell .brand-logo { width: 38px; height: 38px; }
  .public-shell .brand-title-image { max-width: 130px; }
  .public-shell .header-auth { display: none; }
  .public-shell .nav-toggle-label { font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .app-shell .sidebar, .nav-toggle-icon i { transition: none; }
}

@media (max-width: 600px) {
  html, body { overflow-x: clip; }
  body { font-size: 16px; }
  .public-shell .hero,
  .public-shell .hero-board,
  .public-shell .hero-value-panel,
  .public-shell .hero-pitch-stage { max-width: 100%; }
  .public-shell .hero::before,
  .public-shell .hero-board::before { max-width: none; pointer-events: none; }
  .public-shell .button,
  .public-shell .button-small,
  .public-shell .text-button,
  .public-shell .nav-toggle,
  .public-shell .auth-dialog-close,
  .app-shell .button,
  .app-shell .button-small,
  .app-shell .text-button,
  .app-shell .nav-toggle,
  .app-shell summary,
  .app-shell .scope-tabs a,
  .app-shell .library-view-tabs a,
  .app-shell .content-upload-tab,
  .app-shell .admin-tabs a { min-height: 44px; }
  .public-shell .field label,
  .app-shell .field label,
  .app-shell .field > span,
  .public-shell .eyebrow,
  .app-shell .eyebrow { font-size: max(.75rem, 12px); }
  .public-shell .auth-dialog .auth-card h2 { font-size: clamp(1.7rem, 8vw, 2.2rem); }
  .public-shell .auth-dialog-panel,
  .public-shell .auth-dialog-register .auth-dialog-panel { width: min(100vw - 1.5rem, 610px); border-radius: 20px; }
  dialog { width: min(100% - 1.5rem, 640px); }
  .game-choice-menu header button,
  .game-choice-dialog [data-choice-close],
  .game-choice-dialog [data-choice-done] { min-height: 44px; min-width: 44px; }
  .app-shell .table-wrap,
  .app-shell .usage-table-wrap { -webkit-overflow-scrolling: touch; }
  .app-shell .billing-notice,
  .app-shell .account-profile-panel { padding: 1rem; }
  .app-shell .cms-card-actions,
  .app-shell .cms-sticky-actions,
  .app-shell .wizard-actions { display: flex; flex-direction: column; align-items: stretch; }
  .app-shell .cms-card-actions .button,
  .app-shell .cms-sticky-actions .button,
  .app-shell .wizard-actions .button { width: 100%; }
}