/**
 * Canonical authenticated app shell.
 *
 * Backgrounds may span the viewport. Navigation and task content use explicit
 * canvases so account and tournament screens retain one visual rhythm.
 */

.stc-app-shell-header {
  background: var(--stc-green-950, #062719);
  color: var(--stc-white, #fff);
  min-height: 72px;
  overflow: visible;
  width: 100%;
}

.stc-app-shell-header__inner {
  align-items: center;
  display: grid !important;
  gap: 20px !important;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
  height: 72px !important;
  margin-inline: auto !important;
  max-width: var(--stc-container-wide, 1380px) !important;
  padding-inline: 24px !important;
  width: 100% !important;
}

.stc-app-shell-leading,
.stc-app-shell-tools,
.stc-app-shell-locales {
  align-items: center;
  display: flex;
}

.stc-app-shell-leading {
  gap: 10px;
  justify-self: start;
  min-width: 0;
}

.stc-app-shell-brand {
  align-items: center;
  color: var(--stc-green-500, #2f9e56) !important;
  display: inline-flex;
  flex: 0 0 auto;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 27px;
  font-weight: 400;
  gap: 8px;
  letter-spacing: .025em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.stc-account-shell-brand::before {
  background: center / contain no-repeat url("../images/solo/solo-strong-160.webp");
  content: "";
  flex: 0 0 60px;
  height: 48px;
  margin-right: 8px;
  width: 60px;
}

/* The account shortcode still renders Solo and TeamCup as adjacent text
 * flex items. Keep those word parts joined; spacing belongs after Solo only. */
.stc-account-shell-brand {
  gap: 0;
}

@supports (background-image: image-set(url("../images/solo/solo-strong-160.webp") 1x)) {
  .stc-account-shell-brand::before {
    background-image: image-set(
      url("../images/solo/solo-strong-160.webp") 1x,
      url("../images/solo/solo-strong-320.webp") 2x
    );
  }
}

.stc-app-shell-brand > strong {
  color: var(--stc-white, #fff) !important;
  font: inherit;
}

.stc-app-shell-brand .stc-brand-lockup__mark {
  align-items: center;
  display: inline-flex;
  flex: 0 0 60px;
  height: 48px;
  justify-content: center;
  overflow: hidden;
  width: 60px;
}

.stc-app-shell-brand .stc-brand-lockup__mark img {
  display: block;
  height: auto;
  max-width: none;
  width: 60px;
}

.stc-app-shell-brand .stc-brand-lockup__wordmark {
  align-items: baseline;
  display: inline-flex;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: 27px;
  font-weight: 400;
  letter-spacing: .025em;
  line-height: 1;
  text-transform: uppercase;
}

.stc-app-shell-brand .stc-brand-lockup__solo {
  color: var(--stc-green-500, #2f9e56);
}

.stc-app-shell-brand .stc-brand-lockup__teamcup {
  color: var(--stc-white, #fff) !important;
  font: inherit;
}

.stc-app-shell-context {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-self: center;
  min-width: 0;
}

.stc-app-shell-context .header-logo {
  flex: 0 0 36px;
  height: 36px;
  width: 36px;
}

.stc-app-shell-title {
  color: var(--stc-white, #fff) !important;
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  justify-self: center;
  line-height: 1.3 !important;
  margin: 0 !important;
  max-width: min(42vw, 34rem);
  overflow: hidden;
  text-decoration: none;
  text-overflow: ellipsis;
  text-transform: none !important;
  white-space: nowrap;
}

.stc-app-shell-tools {
  gap: 8px !important;
  justify-self: end;
  margin-left: 0 !important;
  min-width: 0;
  position: relative;
}

.stc-app-shell-locales {
  gap: 3px;
}

.stc-app-shell-header :is(
  .stc-account-shell-locale,
  .stc-account-shell-trigger,
  .stc-account-shell-login,
  .stc-taal-optie,
  .header-account-link
) {
  align-items: center;
  background: transparent;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 8px;
  color: var(--stc-white, #fff);
  display: inline-flex;
  font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  min-height: 44px;
  min-width: 44px;
  opacity: 1;
  padding: 0 10px;
  text-decoration: none;
}

.stc-app-shell-header :is(
  .stc-account-shell-locale[aria-pressed="true"],
  .stc-taal-optie.actief
) {
  background: rgb(255 255 255 / 12%);
  border-color: var(--stc-white, #fff);
}

.stc-app-shell-header :is(
  .stc-account-shell-trigger,
  .stc-account-shell-login,
  .header-account-link
):is(:hover, [aria-expanded="true"]) {
  background: rgb(255 255 255 / 12%);
  border-color: var(--stc-white, #fff);
}

.stc-app-shell-header :is(a, button):focus-visible {
  outline: 3px solid var(--stc-gold-300, #ebc84f);
  outline-offset: 3px;
}

.stc-app-shell-header__inner > .offline-dot {
  display: none !important;
}

.stc-account-app-main {
  background: var(--stc-cream-100, #f8f4ea);
  min-height: calc(100vh - 72px);
  padding: 36px 0 96px !important;
  width: 100%;
}

.stc-account-app-main > .wp-block-post-content {
  margin-inline: auto;
  max-width: var(--stc-container-default, 1180px) !important;
  width: 100%;
}

.stc-account-app-page .stc-account-app-main .wp-block-post-content > .stc-account {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  max-width: none !important;
  padding: 0 40px;
  width: 100%;
}

.stc-account-app-page .stc-account > .stc-kicker {
  font-size: 12px;
  line-height: 1.2;
  margin: 0 0 7px;
}

.stc-account-app-page .stc-account > h1 {
  font-size: clamp(2.5rem, 4vw, 3rem);
  line-height: 1;
  margin: 0 0 8px;
}

.stc-account-app-page .stc-account > h1 + p {
  color: var(--stc-neutral-700, #3f4946);
  line-height: 1.65;
  margin-top: 0;
  max-width: 650px;
}

.stc-account-app-page .stc-profile-form {
  background: var(--stc-white, #fff);
  border: 1px solid var(--stc-neutral-200, #e5e5df);
  border-radius: 12px;
  box-shadow: none;
  margin-top: 24px;
  max-width: none;
  padding: 24px;
  width: 100%;
}

.stc-account-app-page .stc-profile-form > :is(
  label,
  .stc-field-help,
  input:not([type="hidden"])
) {
  max-width: 780px;
  width: 100%;
}

.stc-account-app-page .stc-table-wrap {
  background: var(--stc-white, #fff);
  border: 1px solid var(--stc-neutral-200, #e5e5df);
  border-radius: 12px;
  margin-top: 28px;
  max-width: none;
  padding: 8px 20px;
  width: 100%;
}

#stc-root .screen.active {
  max-width: var(--stc-container-wide, 1380px) !important;
}

#stc-root .stc-app-shell-header {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

#screen-selector .content {
  margin-inline: auto;
  max-width: var(--stc-container-default, 1180px);
  width: 100%;
}

@media (min-width: 720px) and (max-width: 899px) {
  .stc-account-app-page .stc-account > h1 {
    font-size: 34px;
  }
}

@media (max-width: 719px) {
  .stc-app-shell-header,
  .stc-app-shell-header__inner {
    min-height: 62px;
  }

  .stc-app-shell-header__inner {
    gap: 9px !important;
    /* The hidden title leaves only the brand and tools in this row. */
    grid-template-columns: minmax(0, 1fr) auto;
    height: 62px !important;
    padding-inline: 14px !important;
  }

  .stc-app-shell-brand {
    font-size: 21px;
    gap: 6px;
  }

  .stc-account-shell-brand {
    gap: 0;
  }

  .stc-account-shell-brand::before {
    flex-basis: 46px;
    height: 38px;
    margin-right: 6px;
    width: 46px;
  }

  .stc-app-shell-brand .stc-brand-lockup__mark {
    flex-basis: 46px;
    height: 38px;
    width: 46px;
  }

  .stc-app-shell-brand .stc-brand-lockup__mark img {
    width: 46px;
  }

  .stc-app-shell-brand .stc-brand-lockup__wordmark {
    font-size: 21px;
  }

  .stc-account-shell-header .stc-app-shell-title,
  #selector-header .stc-app-shell-title {
    display: none;
  }

  .stc-app-shell-header--contextual,
  .stc-app-shell-header--contextual .stc-app-shell-header__inner {
    min-height: 102px;
  }

  #stc-root #screen-app .stc-app-shell-header--contextual {
    height: 102px !important;
    min-height: 102px !important;
  }

  .stc-app-shell-header--contextual .stc-app-shell-header__inner {
    column-gap: 9px !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 62px 40px;
    height: 102px !important;
    row-gap: 0 !important;
  }

  .stc-app-shell-header--contextual .stc-app-shell-leading {
    grid-column: 1;
    grid-row: 1;
  }

  .stc-app-shell-header--contextual .stc-app-shell-tools {
    grid-column: 2;
    grid-row: 1;
  }

  .stc-app-shell-header--contextual .stc-app-shell-context {
    align-self: stretch;
    border-top: 1px solid rgb(255 255 255 / 14%);
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    min-width: 0;
  }

  .stc-app-shell-header--contextual .stc-app-shell-context .header-logo {
    flex-basis: 30px;
    height: 30px;
    width: 30px;
  }

  .stc-app-shell-header--contextual .stc-app-shell-title {
    display: block !important;
    justify-self: start;
    max-width: calc(100vw - 82px);
  }

  .stc-app-shell-header--contextual .mobile-back-btn {
    align-items: center;
    display: inline-flex;
    justify-content: center;
  }

  .stc-app-shell-tools {
    gap: 4px !important;
  }

  .stc-account-app-main {
    min-height: calc(100vh - 62px);
    padding: 22px 0 72px !important;
  }

  .stc-account-app-page .stc-account-app-main .wp-block-post-content > .stc-account {
    padding-inline: 16px;
  }

  .stc-account-app-page .stc-account > h1 {
    font-size: 36px;
  }

  .stc-account-app-page .stc-profile-form {
    padding: 18px;
  }

  .stc-account-app-page .stc-table-wrap {
    margin-inline: 0;
    padding-inline: 12px;
  }
}

@media (max-width: 399px) {
  .stc-app-shell-brand .stc-brand-lockup__teamcup,
  .stc-app-shell-brand > strong {
    display: none;
  }

  .stc-app-shell-header--contextual .stc-app-shell-leading {
    gap: 6px;
  }
}

/* App typography: edit role values here, never in page markup.
 * Presentation screens, numbers, branding and .page-title retain their own roles.
 */
:root {
  --stc-app-font: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --stc-app-section-size: 1.125rem;
  --stc-app-subheading-size: 1rem;
  --stc-app-body-size: 1rem;
  --stc-app-help-size: .875rem;
  --stc-app-label-size: .75rem;
  --stc-app-weight-normal: 400;
  --stc-app-weight-medium: 600;
  --stc-app-weight-heading: 700;
  --stc-app-heading-leading: 1.3;
  --stc-app-body-leading: 1.55;
  --stc-app-label-leading: 1.4;
  --stc-app-label-tracking: .06em;
  --stc-app-space-tight: .25rem;
  --stc-app-space-related: .5rem;
  --stc-app-space-item: 1rem;
  --stc-app-space-group: 1.5rem;
  --stc-app-space-section: 2rem;
}

/* Section roles: existing component classes are the role mapping. */
:is(#stc-root, .stc-modal) :is(
  .section-title,
  .stc-ui-section-title,
  .coach-settings-group > summary strong,
  .coach-help-intro h3,
  .tournament-access-section > h3,
  .stc-test-overview h3,
  #owned-tournaments-title,
  #shared-tournaments-title,
  .roster-planning-panel h3,
  .roster-reconcile-panel h2,
  .setup-choice-panel > h3,
  .setup-recommendation h3,
  .rank-section-heading h3
),
.stc-ui-section-title {
  font: var(--stc-app-weight-heading) var(--stc-app-section-size) / var(--stc-app-heading-leading) var(--stc-app-font);
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: anywhere;
  margin: 0 0 var(--stc-app-space-related);
}

:is(#stc-root, .stc-modal) :is(
  .play-scenario-copy > h4,
  .play-current-summary h4,
  .play-selected-summary > h5,
  .play-alternatives > div:first-child h4,
  .play-choice > h4,
  .coach-tip__title,
  .coach-help-step__content h4,
  .stc-collaboration-invite-heading h4
) {
  font: var(--stc-app-weight-heading) var(--stc-app-subheading-size) / var(--stc-app-heading-leading) var(--stc-app-font);
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: anywhere;
  margin: 0 0 var(--stc-app-space-related);
}

:is(#stc-root, .stc-modal) .play-scenario-intro {
  font: var(--stc-app-weight-normal) var(--stc-app-body-size) / var(--stc-app-body-leading) var(--stc-app-font);
  max-width: 68ch;
  margin: 0 0 var(--stc-app-space-item);
}

:is(#stc-root, .stc-modal) :is(
  .coach-tip__subtitle,
  .coach-tip__text,
  .coach-tip__script p,
  .play-scenario-lines li,
  .play-variation,
  .play-variation p,
  .play-extra-details,
  .play-extra-details > div,
  .play-alternatives > div:first-child p,
  .play-choice > p,
  .stc-collaboration-invite-heading p,
  .coach-settings-panel p.text-muted
) {
  font: var(--stc-app-weight-normal) var(--stc-app-help-size) / var(--stc-app-body-leading) var(--stc-app-font);
  max-width: 68ch;
}
:is(#stc-root, .stc-modal) :is(
  .play-alternatives > div:first-child p,
  .play-choice > p,
  .stc-collaboration-invite-heading p,
  .coach-settings-panel p.text-muted
) { margin: 0 0 var(--stc-app-space-item); }
:is(#stc-root, .stc-modal) :is(.coach-tip__text, .coach-tip__script p, .play-variation p, .play-scenario-lines li) { margin: 0; }
#stc-root .coach-settings-panel .form-group p.text-muted { margin: var(--stc-app-space-related) 0 0; }
#stc-root .coach-tip__subtitle { margin-bottom: var(--stc-app-space-related); }

:is(#stc-root, .stc-modal) :is(
  .coach-tip__label,
  .coach-tip__script span,
  .play-scenario-eyebrow,
  .play-scenario-ribbon
) {
  font: var(--stc-app-weight-medium) var(--stc-app-label-size) / var(--stc-app-label-leading) var(--stc-app-font);
  letter-spacing: var(--stc-app-label-tracking);
  text-transform: uppercase;
  margin: 0 0 var(--stc-app-space-related);
}

:is(#stc-root, .stc-modal) :is(.play-variation strong, .play-extra-details summary, .coach-tip__guide, .coach-tip__collapse, .coach-tip__collapsed-trigger) {
  font: var(--stc-app-weight-medium) var(--stc-app-help-size) / var(--stc-app-body-leading) var(--stc-app-font);
}
#stc-root .coach-settings-group > summary strong { margin-bottom: var(--stc-app-space-tight); }
#stc-root .coach-settings-group > summary small {
  font: var(--stc-app-weight-normal) var(--stc-app-help-size) / var(--stc-app-body-leading) var(--stc-app-font);
  margin: 0;
}

/* Rhythm belongs with the type roles; component CSS owns positioning and color. */
#stc-root .coach-settings-stack { gap: var(--stc-app-space-item); }
#stc-root .coach-settings-group > summary { gap: var(--stc-app-space-item); padding: var(--stc-app-space-item); }
#stc-root .coach-settings-panel { padding: var(--stc-app-space-group); }
#stc-root .coach-tip { gap: var(--stc-app-space-item); padding: var(--stc-app-space-group); margin: 0 0 var(--stc-app-space-group); }
#stc-root .coach-tip.is-collapsed { padding: 0; }
#stc-root .coach-tip__tools { gap: var(--stc-app-space-tight); }
#stc-root .coach-tip__script { margin-top: var(--stc-app-space-item); padding-left: var(--stc-app-space-item); }
#stc-root .coach-help-step__content h4:not(:first-child) { margin-top: var(--stc-app-space-group); }
:is(#stc-root, .stc-modal) .play-advice-stage { gap: var(--stc-app-space-section); }
:is(#stc-root, .stc-modal) .play-alternatives { gap: var(--stc-app-space-item); }
:is(#stc-root, .stc-modal) :is(.play-alternative-grid, .play-choice, .play-choice-grid) { gap: var(--stc-app-space-item); }
:is(#stc-root, .stc-modal) .play-choice { padding: var(--stc-app-space-group); }
:is(#stc-root, .stc-modal) .play-team-options { gap: var(--stc-app-space-related); }
:is(#stc-root, .stc-modal) .play-scenario-lines { gap: var(--stc-app-space-related); margin: var(--stc-app-space-item) 0; }
:is(#stc-root, .stc-modal) .play-extra-details { margin: var(--stc-app-space-item) 0; }
:is(#stc-root, .stc-modal) :is(.play-variation, .play-extra-details summary, .play-extra-details > div) { padding: var(--stc-app-space-item); }
:is(#stc-root, .stc-modal) .play-variation { margin: var(--stc-app-space-item) 0; }
:is(#stc-root, .stc-modal) .play-variation strong { margin-bottom: var(--stc-app-space-tight); }

@media (max-width: 719px) {
  #stc-root :is(.coach-settings-panel, .coach-tip),
  :is(#stc-root, .stc-modal) .play-choice { padding: var(--stc-app-space-item); }
  #stc-root .coach-tip.is-collapsed { padding: 0; }
}