/* Django-specific layer over the official StakeMonkey design source. */
.smi-brand-logo {
  display: block;
  width: auto;
  height: 2.25rem;
  max-width: 100%;
  object-fit: contain;
}

#app-sidebar .smi-brand-logo {
  height: 1.75rem;
}

.smi-brand-logo--dark {
  display: none;
}

html.dark .smi-brand-logo--light {
  display: none;
}

html.dark .smi-brand-logo--dark {
  display: block;
}

.smi-sidebar-nav {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

.smi-sidebar-nav::-webkit-scrollbar {
  width: 4px;
}

.text-sm.text-outline {
  color: var(--text-caption);
}

/* Uppercase labels read larger, so they sit on the 12px micro token. */
.text-sm.uppercase {
  font-size: var(--font-micro);
  line-height: var(--leading-micro);
}

.smi-sidebar-nav::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  background: var(--border-strong);
}

.smi-nav-section {
  margin: 1rem 0.75rem 0.375rem;
  color: var(--text-caption);
  font-size: var(--font-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.smi-analysis-nav {
  display: grid;
  gap: 0.125rem;
}

.smi-analysis-nav .sidebar-nav-link {
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--font-body);
}

.smi-analysis-nav .sidebar-nav-icon {
  width: 1rem;
  height: 1rem;
}

.sidebar-nav-link.is-active {
  box-shadow: inset 3px 0 0 var(--brand-main);
}

.page-filter-trigger {
  gap: 7px;
  min-height: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  background: var(--bg-surface-raised);
  color: var(--text-caption);
  font-size: var(--font-caption);
  font-weight: 600;
  line-height: 1.2;
}

.page-filter-trigger:hover,
html:not(.dark) .page-filter-trigger:hover {
  border-color: transparent;
  background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-surface-raised));
  color: var(--text-caption);
}

.page-filter-trigger.is-active,
.page-filter-trigger.is-active:hover,
html:not(.dark) .page-filter-trigger.is-active:hover {
  border-color: transparent;
  background: var(--brand-main-fill);
  color: var(--brand-on-main);
}

.page-filter-trigger.is-active:hover {
  background: color-mix(in srgb, var(--brand-on-main) 10%, var(--brand-main-fill));
}

html:not(.dark) .page-filter-trigger:not(.is-active),
html:not(.dark) .smi-analysis-subtab:not(.is-active) {
  background: var(--bg-surface);
}

html:not(.dark) .page-filter-trigger:not(.is-active):hover,
html:not(.dark) .smi-analysis-subtab:not(.is-active):hover {
  background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-surface));
}

.smi-header-title-wrap {
  min-width: 0;
}

.app-header-crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  max-width: 100%;
}

.app-header-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
  color: var(--text-caption);
  font-size: var(--font-body);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
}

.app-header-back:hover {
  color: var(--text-primary);
}

.app-header-back:focus-visible {
  outline: 2px solid var(--brand-main);
  outline-offset: 2px;
  border-radius: 6px;
}

.app-header-back-icon {
  width: 16px;
  height: 16px;
}

.app-header-crumb-sep {
  flex-shrink: 0;
  color: var(--text-caption);
  font-weight: 500;
}

.smi-header-title-wrap .app-header-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smi-sidebar-user-form {
  margin: 0;
}

.login-hero-symbol.smi-brand-logo {
  width: min(24rem, 92%);
  height: auto;
  margin-bottom: 2rem;
}

.login-hero-headline {
  font-size: var(--font-display);
}

@media (min-width: 1024px) {
  .login-hero-headline span {
    white-space: nowrap;
  }
}

.login-hero-subtitle--regular {
  font-weight: 400;
}

.login-dev-input {
  border-color: var(--border-strong) !important;
  background-color: var(--bg-surface-raised) !important;
  color: var(--text-primary) !important;
}

.login-dev-input:hover:not(:focus) {
  background-color: var(--bg-surface-high) !important;
}

.login-dev-input:focus {
  border-color: var(--brand-main) !important;
}

.login-dev-control {
  position: relative;
  display: block;
}

.login-dev-control:has(select)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

select.login-dev-input {
  padding-right: 2.5rem;
  cursor: pointer;
}

.smi-match-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.smi-meta-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: 6px;
  background: var(--bg-surface-raised);
  text-align: left;
}

.smi-meta-badge-icon {
  flex-shrink: 0;
  color: var(--brand-main);
}

.smi-meta-badge-icon svg {
  width: 18px;
  height: 18px;
}

.smi-meta-badge-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.smi-meta-badge-text small {
  color: var(--text-caption);
  font-size: var(--font-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.smi-meta-badge-text strong {
  overflow: hidden;
  color: var(--text-primary);
  font-size: var(--font-body);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.smi-match-team-logo {
  flex-shrink: 0;
  object-fit: contain;
}

.smi-match-odds {
  display: grid;
  gap: 6px;
  max-width: 16rem;
  margin: 1.5rem auto 0;
}

.smi-match-odds-head,
.board-odds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.smi-match-odds-head {
  color: var(--text-caption);
  font-size: var(--font-caption);
  font-weight: 700;
  text-align: center;
}

.board-odds {
  font-variant-numeric: tabular-nums;
}

.board-odds > span {
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 3px;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  line-height: 22px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--bg-surface-raised);
  white-space: nowrap;
}

.board-odds strong {
  color: var(--text-primary);
  font-size: var(--font-body);
  font-weight: 600;
}

.odd-trend {
  font-size: var(--font-caption);
  font-style: normal;
  font-weight: 800;
}

.odd-trend--up { color: var(--status-success); }
.odd-trend--down { color: var(--status-error); }

@media (max-width: 640px) {
  .smi-match-meta {
    grid-template-columns: 1fr;
  }
}

.smi-clickable-row {
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.smi-clickable-row:hover {
  background: var(--overlay-subtle);
}

.smi-clickable-row:focus-visible {
  outline: none;
  background: var(--brand-main-bg);
  box-shadow: inset 0 0 0 2px var(--brand-main);
}

.smi-team-cell {
  align-items: center;
  display: inline-flex;
  gap: 0.625rem;
  min-width: 0;
}

.smi-team-logo {
  flex: 0 0 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  width: 1.75rem;
}

.smi-date-picker-control {
  display: block;
  position: relative;
}

.header-date-popover__field .smi-date-picker-control input[type='date'] {
  padding-right: 2.75rem;
  width: 100%;
}

.smi-date-picker-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  transition: background-color 0.15s ease, color 0.15s ease;
  width: 2rem;
}

.smi-date-picker-button:hover,
.smi-date-picker-button:focus-visible {
  background: var(--overlay-subtle);
  color: var(--brand-main);
  outline: none;
}

.smi-date-picker-button svg {
  height: 1rem;
  width: 1rem;
}

.smi-favorite-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  padding: 0.5rem;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
  width: 2.25rem;
}

.smi-favorite-button:hover,
.smi-favorite-button:focus-visible {
  background: var(--brand-main-bg);
  color: var(--brand-main);
  outline: none;
}

.smi-favorite-button[aria-pressed='true'] {
  color: var(--brand-main);
}

.smi-favorite-button[aria-pressed='true'] svg {
  fill: currentColor;
}

.smi-favorite-button:disabled {
  cursor: wait;
  opacity: 0.55;
}

/* Semantic tables: keep the official StakeMonkey tokens in both themes. */
.smi-data-table {
  --smi-table-accent: var(--brand-main);
  --smi-table-accent-bg: var(--brand-main-bg);
  --smi-table-accent-border: var(--brand-main-bd);
  border-collapse: separate;
  border-spacing: 0;
}

.smi-team-card--home,
.smi-team-card--home .smi-data-table,
.smi-data-table--home {
  --smi-table-accent: var(--accent-sky);
  --smi-table-accent-bg: var(--accent-sky-bg);
  --smi-table-accent-border: var(--accent-sky-bd);
}

.smi-team-card--away,
.smi-team-card--away .smi-data-table,
.smi-data-table--away {
  --smi-table-accent: var(--accent-teal);
  --smi-table-accent-bg: var(--accent-teal-bg);
  --smi-table-accent-border: var(--accent-teal-bd);
}

.smi-team-card,
.dash-card:has(.smi-compact-results-table),
.dash-card:has(.smi-metric-grid) {
  container-name: smi-card;
  container-type: inline-size;
}

.smi-team-card {
  border-top: 3px solid var(--smi-table-accent);
}

.smi-team-card > h3 {
  color: var(--smi-table-accent);
}

.smi-data-table thead th {
  border-bottom: 1px solid var(--smi-table-accent-border);
  border-top: 1px solid var(--smi-table-accent-border);
  background: var(--smi-table-accent-bg);
  color: var(--text-primary);
  text-align: center;
  vertical-align: middle;
}

.smi-data-table thead th:first-child {
  border-left: 1px solid var(--smi-table-accent-border);
  border-radius: var(--radius-lg) 0 0 0;
}

.smi-data-table thead th:last-child {
  border-right: 1px solid var(--smi-table-accent-border);
  border-radius: 0 var(--radius-lg) 0 0;
}

.smi-data-table tbody tr {
  transition: background-color 0.15s ease;
}

.smi-data-table tbody tr:nth-child(even) {
  background: var(--overlay-subtle);
}

.smi-data-table tbody tr:not(.smi-clickable-row):hover {
  background: var(--smi-table-accent-bg);
}

.smi-data-table tbody tr.smi-result-row--win,
.smi-data-table tbody tr.smi-result-row--win:hover {
  background: var(--status-success-bg);
}

.smi-data-table tbody tr.smi-result-row--draw,
.smi-data-table tbody tr.smi-result-row--draw:hover {
  background: var(--accent-sky-bg);
}

.smi-data-table tbody tr.smi-result-row--loss,
.smi-data-table tbody tr.smi-result-row--loss:hover {
  background: var(--status-error-bg);
}

.smi-data-table tbody .smi-clickable-row:hover,
.smi-data-table tbody .smi-clickable-row:focus-visible {
  background: var(--smi-table-accent-bg);
}

.smi-data-table td {
  vertical-align: middle;
}

.smi-data-table .smi-table-cell--number,
.smi-data-table td.font-data {
  text-align: center;
  white-space: nowrap;
}

.smi-data-table td.smi-table-cell--label {
  text-align: left;
}

.smi-data-table .smi-table-empty {
  color: var(--text-muted);
  text-align: center;
}

.smi-result-badge {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  display: inline-flex;
  font-size: var(--font-micro);
  font-weight: 800;
  justify-content: center;
  line-height: 1;
  min-height: 1.5rem;
  min-width: 1.5rem;
  padding: 0.25rem 0.4rem;
}

.smi-result-badge--win {
  border-color: var(--accent-teal-bd);
  background: var(--status-success-bg);
  color: var(--status-success);
}

.smi-result-badge--draw {
  border-color: var(--accent-sky-bd);
  background: var(--accent-sky-bg);
  color: var(--accent-sky);
}

.smi-result-badge--loss {
  border-color: var(--accent-coral-bd);
  background: var(--status-error-bg);
  color: var(--status-error);
}

.smi-last-five {
  display: inline-flex;
  gap: 0.2rem;
  justify-content: center;
  white-space: nowrap;
}

.smi-table-value--positive {
  color: var(--status-success);
  font-weight: 700;
}

.smi-table-value--negative {
  color: var(--status-error);
  font-weight: 700;
}

.smi-table-value--brand {
  color: var(--brand-main);
  font-weight: 800;
}

.smi-odd-badge {
  border: 1px solid var(--brand-main-bd);
  border-radius: 6px;
  background: var(--brand-main-bg);
  color: var(--text-primary);
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-width: 3.25rem;
  padding: 0.25rem 0.55rem;
}

.smi-progress-value {
  align-items: center;
  border-radius: 6px;
  display: grid;
  min-width: 4.5rem;
  overflow: hidden;
  padding: 0.25rem 0.5rem;
  position: relative;
}

.smi-progress-value::before {
  background: var(--smi-progress-color);
  border-radius: inherit;
  content: '';
  inset: 0 auto 0 0;
  opacity: 0.2;
  position: absolute;
  width: var(--smi-progress);
}

.smi-progress-value > span {
  position: relative;
  text-align: center;
  z-index: 1;
}

.smi-progress-value--scored {
  --smi-progress-color: var(--status-success);
  background: var(--status-success-bg);
  color: var(--status-success);
}

.smi-progress-value--conceded {
  --smi-progress-color: var(--status-error);
  background: var(--status-error-bg);
  color: var(--status-error);
}

.smi-highlighted-team {
  box-shadow: inset 3px 0 0 var(--brand-main);
}

.smi-metric-grid > div {
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--overlay-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
  min-height: 2.5rem;
  min-width: 0;
  padding: 0.5rem;
  text-align: center;
}

.smi-metric-label {
  font-weight: 600;
  line-height: 1.2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.smi-stat-section + .smi-stat-section {
  border-top: 1px solid var(--border-default);
  padding-top: 1rem;
}

.smi-stat-table {
  table-layout: fixed;
}

.smi-stat-table td.smi-table-cell--label {
  text-align: center;
}

.smi-stat-table th,
.smi-stat-table td {
  width: 50%;
}

.smi-analysis-subtabs {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.smi-analysis-subtab {
  background: var(--bg-surface-raised);
  border: 0;
  border-radius: 6px;
  color: var(--text-caption);
  display: inline-flex;
  font-size: var(--font-caption);
  font-weight: 600;
  justify-content: center;
  padding: 10px 12px;
  transition: background-color 150ms ease, color 150ms ease;
  white-space: nowrap;
}

.smi-analysis-subtab:hover {
  background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-surface-raised));
  color: var(--text-caption);
}

.smi-analysis-subtab.is-active,
.smi-analysis-subtab.is-active:hover {
  background: var(--brand-main-fill);
  color: var(--brand-on-main);
}

.ai-prose {
  color: var(--text-primary);
  font-size: var(--font-body);
  line-height: 1.7;
}

.ai-prose__title {
  color: var(--text-primary);
  font-family: Alexandria, ui-sans-serif, system-ui, sans-serif;
  font-size: var(--font-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 1.5rem 0 0.55rem;
}

.ai-prose__title:first-child {
  margin-top: 0;
}

.ai-prose__subtitle {
  color: var(--text-caption);
  font-size: var(--font-micro);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin: 1.15rem 0 0.4rem;
  text-transform: uppercase;
}

.ai-prose p {
  margin: 0 0 0.8rem;
}

.ai-prose p:last-child {
  margin-bottom: 0;
}

.ai-prose strong {
  color: var(--text-primary);
  font-weight: 700;
}

.ai-prose em {
  color: var(--text-secondary);
  font-style: italic;
}

.ai-prose__list {
  margin: 0 0 0.8rem;
  padding-left: 1.2rem;
}

.ai-prose__list li {
  margin: 0.2rem 0;
  padding-left: 0.15rem;
}

@media (max-width: 767px) {
  .smi-analysis-subtabs {
    flex-wrap: nowrap;
    margin-inline: -0.25rem;
    overflow-x: auto;
    padding: 0.25rem;
    scrollbar-width: thin;
  }
}

@media (max-width: 1023px) {
  .smi-brand-logo {
    height: 2rem;
  }
}
.header-account-actions{margin-left:auto;display:flex;align-items:center;gap:12px;padding-left:12px}
.header-login,.header-signup{font-size:var(--font-body);white-space:nowrap;padding:8px 12px;border-radius: 6px}
.header-signup{background:var(--brand-main-fill);color:var(--brand-on-main);font-weight:600}
.header-profile{position:relative}
.header-profile .sidebar-user-trigger{width:auto;max-width:220px}
.header-profile .sidebar-user-dropdown{top:calc(100% + 10px);bottom:auto;left:auto;right:0;width:250px;max-width:calc(100vw - 24px)}
@media(max-width:600px){.header-account-actions{gap:4px;padding-left:4px}.header-login,.header-signup{padding:7px 6px;font-size:var(--font-body)}.header-profile .sidebar-user-label,.header-profile .sidebar-user-chevron{display:none}.header-profile .sidebar-user-trigger{padding:4px}.smi-header-title-wrap .app-header-title{font-size:var(--font-title)}}
.sidebar-available-leagues{margin:8px 0 10px;padding:8px 5px 8px 10px;border-top:1px solid var(--border-default);border-bottom:1px solid var(--border-default)}
.sidebar-available-leagues>p{display:flex;align-items:center;gap:7px;margin:0 5px 6px 0;color:var(--text-caption);font-size:var(--font-micro);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.sidebar-available-leagues>p svg{width:12px;height:12px}
.sidebar-league-window{max-height:290px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.sidebar-league-window::-webkit-scrollbar{width:4px}.sidebar-league-window::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius: 6px}
.sidebar-league-label{margin:8px 0 2px;color:var(--text-caption);font-size:var(--font-micro);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
.sidebar-league-country{margin:0}
.sidebar-league-country>summary{cursor:pointer;padding:4px 3px;color:var(--text-primary);font-size:var(--font-body);font-weight:500;list-style:none;border-radius:6px;transition:background-color .15s ease,color .15s ease}
.sidebar-league-country>summary::-webkit-details-marker{display:none}
.sidebar-league-country>summary:hover{background:var(--state-hover-bg)}
.sidebar-league-row{display:flex;align-items:center;gap:2px;border-radius:6px}
.sidebar-league-row:hover{background:var(--state-hover-bg)}
.sidebar-league-row>a{display:block;min-width:0;flex:1;padding:4px 3px;color:var(--text-primary);font-size:var(--font-body);font-weight:500;line-height:var(--leading-caption);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:6px}
.sidebar-league-row>a:hover,.sidebar-league-row>a.is-active{color:var(--text-primary)}
.sidebar-league-row>a.is-active{background:var(--bg-surface-high)}
.sidebar-pin-button{width:1.25rem;height:1.25rem;padding:0}
.sidebar-pin-button svg{width:11px;height:11px}
button,
input,
select,
textarea,
[type="text"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"] {
  border-radius: 6px !important;
}

.smi-team-card > h3,
.smi-match-teams h3 {
  overflow-wrap: anywhere;
}

/* Narrow cards restack result rows and metric chips so text stays inside the box. */
@container smi-card (max-width: 42rem) {
  .smi-metric-grid > div {
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.4rem 0.3rem;
  }

  .smi-compact-results-table,
  .smi-compact-results-table tbody {
    display: block;
    width: 100%;
  }

  .smi-compact-results-table thead {
    display: none;
  }

  .smi-compact-results-table tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "date side"
      "fixture fixture"
      "ht ht";
    gap: 2px 8px;
    width: 100%;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-default);
  }

  .smi-compact-results-table td,
  .smi-compact-results-table td.smi-table-cell--number,
  .smi-compact-results-table td.font-data,
  .smi-compact-results-table td.whitespace-nowrap {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0;
    white-space: normal;
    text-align: left;
    overflow-wrap: anywhere;
  }

  .smi-compact-results-table td.smi-result-date {
    grid-area: date;
    white-space: nowrap;
    color: var(--text-caption);
  }
  .smi-result-outcome,
  .smi-result-league { grid-area: side; justify-self: end; text-align: right; }
  .smi-result-fixture { grid-area: fixture; }
  .smi-result-ht { grid-area: ht; color: var(--text-caption); }
  .smi-result-ht::before {
    content: "Intervalo ";
    font-weight: 600;
  }
  .smi-compact-results-table .smi-table-empty { grid-column: 1 / -1; }
  .smi-odd-badge,
  .smi-result-badge,
  .smi-progress-value { min-width: 0; max-width: 100%; }
}

@media (max-width: 1023px) {
  #page-canvas {
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
  }

  #page-canvas > .px-6,
  #page-canvas > section.px-6,
  #page-canvas > div.px-6 {
    padding-left: 0;
    padding-right: 0;
  }

  #page-canvas,
  #page-canvas section,
  #page-canvas .dash-card,
  #page-canvas .grid,
  #page-canvas .grid > *,
  #page-canvas .overflow-x-auto,
  #page-canvas .overflow-hidden {
    min-width: 0;
    max-width: 100%;
  }

  #page-canvas .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #page-canvas .dash-card.p-6 {
    padding: 12px;
  }

  #app-header .smi-header-title-wrap {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
  }

  #app-header .header-account-actions {
    flex: 0 0 auto;
    position: relative;
    z-index: 2;
  }

  #app-header .smi-page-skeleton {
    max-width: 100%;
    overflow: hidden;
  }

  .smi-data-table th,
  .smi-data-table td {
    overflow-wrap: anywhere;
  }

  .smi-data-table .whitespace-nowrap,
  .smi-data-table .smi-table-cell--number,
  .smi-data-table td.font-data {
    white-space: normal;
  }

  .smi-analysis-subtabs {
    max-width: 100%;
    margin-inline: 0;
  }

  .academy-lang-nav .ml-auto {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .page-filters {
    align-items: stretch;
    gap: 8px;
  }

  .page-filters.page-filters--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .page-filters > [data-filter-group] {
    display: grid;
    width: 100%;
    margin-left: 0;
    justify-content: stretch;
    gap: 6px;
  }

  .page-filters > [data-filter-group="window"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .page-filters > [data-filter-group="condition"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .page-filters:not(.page-filters--split) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.25rem, 1fr));
  }

  .page-filters .page-filter-trigger {
    width: 100%;
    min-width: 0;
    min-height: 2.4rem;
    justify-content: center;
    padding: 8px 8px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  #page-canvas {
    padding-left: max(4px, env(safe-area-inset-left, 0px));
    padding-right: max(4px, env(safe-area-inset-right, 0px));
  }

  #page-canvas .dash-card.p-6 {
    padding: 10px;
  }

  #page-canvas .dash-card .px-6 {
    padding-left: 10px;
    padding-right: 10px;
  }

  #page-canvas .grid.gap-4 {
    gap: 10px;
  }

  .app-header-crumbs {
    flex: 1 1 auto;
    min-width: 0;
  }

  .app-header-back {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    gap: 0;
    overflow: hidden;
    font-size: 0;
  }

  .app-header-back-icon {
    width: 18px;
    height: 18px;
  }

  .app-header-crumb-sep {
    display: none;
  }

  .smi-header-title-wrap .app-header-title {
    flex: 1 1 0;
  }

  .smi-match-teams {
    gap: 8px;
  }

  .smi-match-teams h3 {
    overflow: visible;
    font-size: var(--font-body);
    line-height: 1.25;
    text-wrap: balance;
  }

  .smi-match-teams .smi-match-team-logo {
    width: 40px;
    height: 40px;
  }

  .smi-meta-badge {
    padding: 8px 10px;
    gap: 8px;
  }

  .smi-data-table th,
  .smi-data-table td {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  .academy-lesson {
    padding: 10px;
  }

  .academy-lesson h2 {
    overflow-wrap: anywhere;
    font-size: var(--font-title);
  }
}