/*
  Responsive overrides, plus the later unconditional "Balanced Fox" polish pass
  (see the comment at its original location in git history for context). Must
  load last, right before pwa_theme.css: several rules here intentionally override
  earlier files' rules by cascade order alone -- do not reorder the <link> tags.
  Colors and theme tokens live in pwa_theme.css -- change them there, not here.
*/

@media (min-width: 760px) {
  .app-header__inner {
    align-items: start;
    grid-template-columns: 1fr auto;
  }

  .role-tabs,
  .notifications {
    grid-column: 1 / -1;
  }

  .header-actions {
    justify-self: end;
  }
}

@media (max-width: 759px) {
  .app-main {
    border-radius: var(--radius-large) var(--radius-large) 0 0;
    padding-bottom: calc(var(--bottom-nav-height) + var(--space-5) + env(safe-area-inset-bottom));
  }

  .app-header__inner {
    gap: var(--space-2);
    padding-block: var(--space-2);
  }

  .app-header .header-actions,
  .app-header .role-tabs,
  .app-header .notifications {
    display: none;
  }

  .mobile-bottom-nav {
    align-items: stretch;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    bottom: 0;
    box-shadow: var(--shadow-bottom-bar);
    display: grid;
    gap: 0;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
    left: 0;
    padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom));
    position: fixed;
    right: 0;
    z-index: 30;
  }

  .snackbar-region {
    bottom: calc(var(--bottom-nav-height) + var(--space-2) + env(safe-area-inset-bottom));
  }

  .mobile-bottom-nav__item,
  .mobile-bottom-nav__more summary {
    align-items: center;
    border-radius: var(--radius-medium);
    color: var(--color-text-muted);
    display: grid;
    font-size: 0.75rem;
    font-weight: 800;
    gap: 0.1rem;
    justify-items: center;
    min-width: 0;
    min-height: var(--tap-target-nav);
    padding: 0.3rem 0.1rem 0.2rem;
    position: relative;
    text-align: center;
    text-decoration: none;
  }

  .mobile-bottom-nav__item:hover,
  .mobile-bottom-nav__more summary:hover,
  .mobile-bottom-nav__item[aria-current="page"],
  .mobile-bottom-nav__more summary[aria-current="page"] {
    color: var(--color-primary-strong);
  }

  .mobile-bottom-nav__item[aria-current="page"]::after,
  .mobile-bottom-nav__more summary[aria-current="page"]::after {
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    bottom: 0;
    content: "";
    height: 3px;
    position: absolute;
    width: 1.5rem;
  }

  .mobile-bottom-nav__icon {
    align-items: center;
    border-radius: var(--radius-pill);
    display: inline-flex;
    height: 1.7rem;
    justify-content: center;
    width: 1.7rem;
  }

  .mobile-bottom-nav__icon svg {
    fill: none;
    height: 1.5rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 1.5rem;
  }

  .mobile-bottom-nav__item[aria-current="page"] .mobile-bottom-nav__icon,
  .mobile-bottom-nav__item--action .mobile-bottom-nav__icon,
  .mobile-bottom-nav__more summary[aria-current="page"] .mobile-bottom-nav__icon {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
  }

  .mobile-bottom-nav__label {
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-bottom-nav__state {
    color: var(--color-text-muted);
    display: block;
    font-size: 0.62rem;
    font-weight: 750;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-bottom-nav__item--action .mobile-bottom-nav__state {
    color: var(--color-primary-strong);
  }

  .mobile-bottom-nav__count {
    font-size: 0.68rem;
    min-height: 1.15rem;
    min-width: 1.15rem;
    padding: 0.05rem 0.28rem;
    position: absolute;
    right: calc(50% - 1.35rem);
    top: 0.1rem;
  }

  .mobile-bottom-nav__more {
    min-width: 0;
    position: relative;
  }

  .mobile-bottom-nav__more summary {
    cursor: pointer;
    list-style: none;
  }

  .mobile-bottom-nav__more summary::-webkit-details-marker {
    display: none;
  }

  .mobile-bottom-nav__panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-large);
    bottom: calc(100% + var(--space-2));
    box-shadow: var(--shadow-modal);
    display: grid;
    gap: var(--space-1);
    max-height: min(70vh, 28rem);
    min-width: min(18rem, calc(100vw - 2rem));
    overflow-y: auto;
    padding: var(--space-3) var(--space-3) var(--space-4);
    position: absolute;
    right: 0;
  }

  .mobile-bottom-nav__panel-group {
    border-top: 1px solid var(--color-border);
    margin: 0;
    padding-block: var(--space-2);
  }

  .mobile-bottom-nav__panel-group:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .mobile-bottom-nav__panel-group h2 {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0;
    margin: 0 0 var(--space-1);
    padding-inline: var(--space-2);
    text-transform: uppercase;
  }

  .mobile-bottom-nav__panel-links {
    display: grid;
    gap: var(--space-1);
  }

  .mobile-bottom-nav__panel a,
  .mobile-bottom-nav__panel > span {
    border-radius: var(--radius-small);
    color: var(--color-text);
    font-weight: 750;
    align-items: center;
    display: flex;
    min-height: var(--tap-target-min);
    padding: 0.65rem 0.75rem;
    text-decoration: none;
  }

  .mobile-bottom-nav__panel a {
    gap: var(--space-2);
  }

  .mobile-bottom-nav__panel a:hover,
  .mobile-bottom-nav__panel a[aria-current="page"] {
    background: var(--color-primary-soft);
    color: var(--color-primary-strong);
  }

  .mobile-bottom-nav__logout-form {
    border-top: 1px solid var(--color-border);
    display: grid;
    margin: var(--space-2) 0 0;
    padding-top: var(--space-2);
  }

  .mobile-bottom-nav__logout-form button {
    background: transparent;
    border-color: transparent;
    color: var(--color-danger);
    justify-content: start;
    min-height: var(--tap-target-min);
    padding: 0.55rem 0.65rem;
    width: 100%;
  }

  .mobile-bottom-nav__logout-form button:hover {
    background: var(--color-danger-soft);
    border-color: transparent;
    color: var(--color-danger);
  }

  .mobile-bottom-nav__panel-icon {
    align-items: center;
    color: var(--color-primary);
    display: inline-flex;
    flex: 0 0 1.5rem;
    padding: 0;
  }

  .mobile-bottom-nav__panel-count {
    font-size: 0.68rem;
    margin-left: auto;
    min-height: 1.15rem;
    min-width: 1.15rem;
    padding: 0.05rem 0.28rem;
  }

  .mobile-bottom-nav__panel-icon svg {
    fill: none;
    height: 1.35rem;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    width: 1.35rem;
  }

  .sticky-action-row,
  .mobile-sticky-actions {
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    margin-inline: calc(var(--space-3) * -1);
    padding: var(--space-3);
  }

  .sticky-action-row button {
    flex: 1 1 9rem;
  }
}

@media (max-width: 560px) {
  .app-header__inner,
  .app-main {
    padding-inline: var(--space-3);
  }

  .brand-mark {
    width: 2.55rem;
  }

  h1 {
    font-size: 1.4rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  button,
  .button {
    width: 100%;
  }

  .round-result-tabs__tab {
    width: auto;
  }

  .reaction-picker__option {
    width: auto;
  }

  input,
  select,
  textarea {
    max-width: 100%;
  }

  table {
    font-size: 0.9rem;
  }

  th,
  td {
    padding-inline: var(--space-2);
  }

  .header-actions,
  .meta-menu {
    width: 100%;
  }

  .meta-menu summary {
    width: fit-content;
  }

  .meta-menu__panel {
    margin-top: var(--space-2);
    max-width: 100%;
    min-width: 0;
    position: static;
    width: 100%;
  }

  .notifications li,
  td form,
  li form {
    align-items: stretch;
    display: grid;
    width: 100%;
  }

  .auth-form,
  .auth-form__row {
    justify-items: stretch;
  }

  .auth-form__row {
    grid-template-columns: 1fr;
  }

  .auth-form__row label {
    justify-self: start;
    text-align: left;
  }

  .auth-form__remember {
    grid-template-columns: 1fr;
  }

  .auth-form__remember-label,
  .auth-form__remember .message-list__item {
    grid-column: 1;
  }
}

/*
  Balanced Fox component visuals.

  These selectors were migrated from the former theme and adjustment layers.
  They stay in pwa.css because this file owns component-level styling; the
  active colors and gradients still come from pwa_theme.css variables.
*/

.app-header {
  background: linear-gradient(145deg, rgba(166, 58, 18, 0.98), rgba(204, 84, 24, 0.94));
  border-bottom-color: rgba(255, 248, 234, 0.18);
  box-shadow: 0 12px 30px rgba(76, 39, 13, 0.18);
}

.app-main {
  background: linear-gradient(180deg, rgba(255, 216, 164, 0.18), rgba(255, 243, 223, 0.82) 42%, rgba(255, 243, 223, 0.98));
}

.app-main:has(.player-cockpit) {
  background: linear-gradient(180deg, rgba(255, 216, 164, 0.08), rgba(255, 243, 223, 0.68) 34%, rgba(255, 243, 223, 0.96));
}

.app-main:has(.player-cockpit) > .page-heading {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #fff8ea;
  padding-inline: 0;
  text-shadow: 0 1px 17px rgba(72, 27, 7, 0.32);
}

.app-main:has(.player-cockpit) > .page-heading h2,
.app-main:has(.player-cockpit) > .page-heading .eyebrow,
.app-main:has(.player-cockpit) > .page-heading .muted {
  color: inherit;
}

.auth-entry {
  background: var(--gradient-balanced-fox-page);
  min-height: 100vh;
}

.auth-entry .app-main {
  background: transparent;
}

.auth-hero,
.auth-hero h2,
.auth-hero .eyebrow,
.auth-hero .muted {
  color: #fff8ea;
  text-shadow: 0 1px 17px rgba(72, 27, 7, 0.3);
}

.auth-panel.app-card,
.auth-panel {
  background: rgba(255, 248, 234, 0.96);
  border-color: rgba(160, 64, 18, 0.2);
  box-shadow: 0 18px 40px rgba(103, 48, 14, 0.16);
}

.hero-panel,
.player-round-hero,
.player-round-hero.player-state-card--action-needed,
.player-round-hero.player-state-card--ok {
  background: var(--gradient-balanced-fox-hero);
  border: 0;
  box-shadow: 0 14px 34px rgba(103, 48, 14, 0.18);
  color: #fff8ea;
}

.hero-panel .muted,
.player-round-hero .eyebrow,
.player-round-hero h3,
.player-round-hero .muted,
.player-round-hero .player-prompt {
  color: rgba(255, 248, 234, 0.92);
}

.player-round-hero h3,
.player-round-hero .player-prompt {
  color: #fff8ea;
}

.player-round-hero .status-pill {
  background: #ffe8c8;
  color: #94360f;
}

.player-round-hero .deadline-callout,
.player-round-hero .deadline-callout--soon,
.player-round-hero .deadline-callout--urgent {
  background: rgba(255, 248, 234, 0.9);
  border-color: #eda95b;
  border-left-color: #eda95b;
  box-shadow: 0 10px 22px rgba(91, 45, 12, 0.14);
  color: #3e210f;
}

.player-round-hero .deadline-callout--expired {
  background: #fae4df;
  border-color: #9b2f24;
  border-left-color: #9b2f24;
  color: #74211c;
}

.player-round-hero .deadline-callout p,
.player-round-hero .deadline-callout .muted,
.player-round-hero .deadline-callout strong {
  color: inherit;
}

.notification-count,
.status-pill {
  background: var(--color-accent);
  color: #fffaf0;
}

.context-help,
.notifications,
.player-state-card--action-needed:not(.player-round-hero),
.result-card--summary {
  background: var(--color-primary-soft);
  border-color: rgba(35, 100, 94, 0.24);
  color: var(--color-primary-strong);
}

.app-card,
.app-panel,
.option-card,
.context-panel,
.task-panel,
.next-action-panel,
.notification-card,
.metric-card,
.action-card,
.player-state-card,
.player-primary-action,
.player-disclosure,
.player-result-detail,
.result-card {
  border-color: rgba(160, 64, 18, 0.18);
}

.next-action-panel,
.action-card--primary,
.install-card[data-install-state="available"] {
  border-left-color: var(--color-primary);
}

.deadline-callout,
.save-status--missing,
.save-status--dirty,
.draft-recovery {
  background: var(--color-warning-soft);
  border-color: var(--color-warning);
}

.server-save-state,
.save-status--saved {
  background: var(--color-primary-soft);
  border-left-color: var(--color-primary);
  color: var(--color-primary-strong);
}

.mobile-bottom-nav {
  background: rgba(255, 248, 234, 0.97);
  border-top-color: rgba(160, 64, 18, 0.17);
}

.mobile-bottom-nav__item[aria-current="page"] .mobile-bottom-nav__icon,
.mobile-bottom-nav__item--action .mobile-bottom-nav__icon,
.mobile-bottom-nav__more summary[aria-current="page"] .mobile-bottom-nav__icon,
.mobile-bottom-nav__panel a:hover,
.mobile-bottom-nav__panel a[aria-current="page"] {
  background: var(--color-primary-soft);
  color: var(--color-primary-strong);
}

.mobile-bottom-nav__item[aria-current="page"]::after,
.mobile-bottom-nav__more summary[aria-current="page"]::after {
  background: var(--color-accent);
}

/* Balanced Fox component polish migrated from the former adjustment layer. */

.app-main > .page-heading:not(.hero-panel) {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #fff8ea;
  padding-inline: 0;
  text-shadow: 0 1px 17px rgba(72, 27, 7, 0.32);
}

.app-main > .page-heading:not(.hero-panel) h2,
.app-main > .page-heading:not(.hero-panel) .eyebrow,
.app-main > .page-heading:not(.hero-panel) .muted {
  color: inherit;
}

.auth-entry .app-main > .auth-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-self: stretch;
  justify-items: center;
  margin-inline: auto;
  max-width: none;
  padding-inline: var(--space-4);
  text-align: center;
  width: 100%;
}

.auth-hero__identity {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  margin-inline: auto;
  max-width: 34rem;
  text-align: center;
  width: 100%;
}

.auth-entry .auth-hero__mark {
  justify-self: center;
  margin-inline: auto;
}

.auth-hero__title {
  color: #fff8ea;
  font-size: clamp(2.2rem, 9vw, 2.95rem);
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.02;
  margin: 1rem 0 0.45rem;
  justify-self: center;
  text-align: center;
  text-shadow: 0 2px 18px rgba(72, 27, 7, 0.34);
}

.auth-hero__tagline {
  color: rgba(255, 248, 234, 0.92);
  font-size: clamp(1.1rem, 4.6vw, 1.35rem);
  font-weight: 850;
  line-height: 1.18;
  margin: 0;
  justify-self: center;
  text-align: center;
  text-shadow: 0 1px 14px rgba(72, 27, 7, 0.34);
}

.button--primary,
.auth-form > button[type="submit"],
form[data-answer-form] button[name="action"][value="submit_complete"] {
  align-items: center;
  background-color: var(--button-primary-bg);
  background-image: var(--button-primary-gradient);
  border-color: var(--button-primary-border);
  border-radius: 0.95rem;
  box-shadow: var(--button-primary-shadow);
  color: var(--button-primary-text);
  display: inline-flex;
  font-weight: 850;
  justify-content: center;
  text-shadow: 0 1px 8px rgba(16, 50, 48, 0.2);
}

.button--primary:hover,
.auth-form > button[type="submit"]:hover,
form[data-answer-form] button[name="action"][value="submit_complete"]:hover {
  background-color: var(--button-primary-hover-bg);
  background-image: var(--button-primary-hover-gradient);
  border-color: var(--button-primary-hover-border);
  color: var(--button-primary-text);
}

.auth-panel--login .auth-form,
.auth-panel--login .auth-form__row {
  width: 100%;
}

.auth-panel--login .auth-form > button[type="submit"] {
  justify-self: stretch;
  width: 100%;
}

.mobile-sticky-actions .button--primary,
.mobile-sticky-actions button[name="action"][value="submit_complete"] {
  flex: 1 1 12rem;
  min-height: 3rem;
}

.brand-inline {
  color: var(--color-primary-strong);
  font-style: inherit;
  font-weight: 850;
}

.play-style-panel {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
}

.play-style-panel__heading {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
}

.play-style-panel__heading h3,
.play-style-distribution h4 {
  margin: 0;
}

.play-style-fields {
  display: grid;
  gap: 1rem;
}

.play-style-fields fieldset {
  display: grid;
  gap: 0.45rem;
}

.play-style-fields label {
  align-items: center;
  display: flex;
  gap: 0.5rem;
  min-height: 2.75rem;
}

.play-style-fields input[type="radio"] {
  accent-color: var(--color-primary);
  flex: 0 0 1.25rem;
  height: 1.25rem;
  min-height: 1.25rem;
  padding: 0;
  width: 1.25rem;
}

.play-style-fields .play-style-choice {
  align-items: flex-start;
}

.play-style-choice__copy {
  display: grid;
  gap: 0.15rem;
}

.play-style-choice__description {
  font-weight: 400;
}

.play-style-distribution ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.play-style-distribution li {
  background: var(--color-surface-muted);
  border-radius: 999px;
  padding: 0.35rem 0.6rem;
}

.play-style-distribution strong {
  margin-left: 0.25rem;
}