:root {
  --font-family-ui: Montserrat, BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --page-bg: #f4f6f7;
  --surface: #ffffff;
  --surface-elevated: #edf1f3;
  --row-hover: #e4ebef;
  --text: #334149;
  --muted-text: #59666e;
  --border: #d3dbe0;
  --hero: #e3eff0;
  --hero-text: var(--heading-text);
  --admin-hero: var(--hero);
  --admin-hero-text: var(--hero-text);
  --primary: #007981;
  --primary-on: #ffffff;
  --primary-light: #dceff0;
  --primary-light-text: #006b73;
  --secondary: #edf1f3;
  --secondary-on: var(--text);
  --secondary-light: #edf1f3;
  --secondary-light-text: var(--text);
  --link: #006b73;
  --link-on: #ffffff;
  --link-light: #dceff0;
  --link-light-text: #006b73;
  --info: #436c81;
  --info-on: #ffffff;
  --info-light: #e5eef3;
  --info-light-text: #436c81;
  --success: #336547;
  --success-on: #ffffff;
  --success-light: #e4f0e7;
  --success-light-text: #336547;
  --warning: #785917;
  --warning-on: #ffffff;
  --warning-light: #f5eddb;
  --warning-light-text: #785917;
  --danger: #aa3e46;
  --danger-on: #ffffff;
  --danger-light: #f7e7e7;
  --danger-light-text: #a33c43;
  --focus: var(--link);
  --focus-shadow: color-mix(in srgb, var(--focus) 28%, transparent);
  --typeahead-selected: var(--link-light);
  --shadow: rgba(10, 10, 10, 0.15);
  --footer-bg: #edf1f3;
  --footer-text: var(--text);
  --navbar-height: 3.9rem;
  --navbar-bg: #ffffff;
  --navbar-hover-bg: var(--row-hover);
  --navbar-hover-text: var(--text);
  --navbar-text: var(--text);
  --navbar-muted: var(--muted-text);
  --navbar-border: var(--border);
  --initials-border: var(--control-border);
  --initials-border-hover: var(--link);
  --heading-text: #202a30;
  --control-border: #84939c;
  --row-stripe: #f6f8f9;
  --primary-hover: #cbe5e7;
  --classification-bg: #ede9f2;
  --classification-text: #625078;
  --admin-label-bg: #e5ebf0;
  --admin-label-text: #4b5d6a;
  color-scheme: light;
}

html[data-theme="dark"] {
  --page-bg: #15181b;
  --surface: #1e2226;
  --surface-elevated: #272c31;
  --row-hover: #30363c;
  --text: #ccd2d7;
  --muted-text: #9ba6b0;
  --border: #3b4249;
  --control-border: #66717b;
  --hero: #1c2a2d;
  --hero-text: var(--heading-text);
  --admin-hero: var(--hero);
  --admin-hero-text: var(--hero-text);
  --primary: #4a9fa7;
  --primary-on: #10191b;
  --primary-light: #263f43;
  --primary-light-text: #78bec5;
  --secondary: #272c31;
  --secondary-on: var(--text);
  --secondary-light: #272c31;
  --secondary-light-text: var(--text);
  --link: #78bec5;
  --link-on: #10191b;
  --link-light: #263f43;
  --link-light-text: #78bec5;
  --info: #9cbdcf;
  --info-on: #142128;
  --info-light: #293b46;
  --info-light-text: #b1ccda;
  --success: #a6d1b5;
  --success-on: #14241a;
  --success-light: #273c32;
  --success-light-text: #a6d1b5;
  --warning: #dfc78f;
  --warning-on: #292211;
  --warning-light: #413823;
  --warning-light-text: #dfc78f;
  --danger: #c88085;
  --danger-on: #211315;
  --danger-light: #422c2e;
  --danger-light-text: #e6a3a6;
  --focus: var(--link);
  --focus-shadow: color-mix(in srgb, var(--focus) 32%, transparent);
  --typeahead-selected: var(--link-light);
  --shadow: rgba(0, 0, 0, 0.5);
  --footer-bg: #191d21;
  --footer-text: var(--text);
  --navbar-bg: #191d21;
  --navbar-hover-bg: var(--row-hover);
  --navbar-hover-text: var(--navbar-text);
  --navbar-text: var(--text);
  --navbar-muted: var(--muted-text);
  --navbar-border: var(--border);
  --heading-text: #e2e7eb;
  --row-stripe: #22272b;
  --primary-hover: #2d4c51;
  --classification-bg: #34303f;
  --classification-text: #c8bedb;
  --admin-label-bg: #303b43;
  --admin-label-text: #c3cfd8;
  color-scheme: dark;
}

.repeat-marker {
  background-color: var(--surface-elevated);
  color: var(--text);
}

.standings-expand-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--link);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  line-height: 1;
  margin-left: 0.2rem;
  padding: 0.15rem 0.3rem;
}

.standings-expand-toggle:hover {
  background-color: var(--surface-elevated);
}

.standings-expand-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.tournament-details-title {
  color: var(--muted-text);
}

.tournament-details-section {
  margin-top: 1.5rem;
}

.tournament-details-section + .tournament-details-section {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
}

.tournament-details-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
}

.tournament-details-stat-label {
  color: var(--muted-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}

.tournament-details-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
}

.tournament-details-stat-value .has-text-grey {
  font-size: 1rem;
  font-weight: 400;
}

.tournament-details-groups {
  display: grid;
  gap: 1.5rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.tournament-details-group-label {
  color: var(--muted-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.tournament-details-group-value {
  margin: 0;
  overflow-wrap: anywhere;
}

.tournament-details-group-value + .tournament-details-group-value {
  margin-top: 0.25rem;
}

.tournament-details-role {
  color: var(--muted-text);
  margin-right: 0.35rem;
}

.tournament-details-flyer .button.is-ghost {
  color: var(--link);
  padding-left: 0;
}

.tournament-details-flyer .button.is-ghost:hover {
  text-decoration: underline;
}

.tournament-details-flyer-caption {
  color: var(--muted-text);
  font-size: 0.85rem;
  margin-top: 0.35rem;
}

html,
body {
  background-color: var(--page-bg);
  color: var(--text);
  font-family: var(--font-family-ui);
}

button,
input,
optgroup,
select,
textarea {
  font-family: var(--font-family-ui);
}

body {
  min-height: 100vh;
}

.tournament-manage-following-section {
  padding-top: 0;
}

/* Managed tournament: Results upload screen */

.managed-tournament-tabs {
  --bulma-tabs-border-bottom-color: var(--border);
  --bulma-tabs-link-color: var(--muted-text);
  --bulma-tabs-link-hover-color: var(--text);
  --bulma-tabs-link-hover-border-bottom-color: var(--border);
  --bulma-tabs-link-active-color: var(--link);
  --bulma-tabs-link-active-border-bottom-color: var(--link);
}

.managed-tournament-tabs a {
  font-weight: 500;
}

.managed-tournament-tabs li.is-active a {
  font-weight: 700;
}

.managed-tournament-tabs a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.managed-upload-intro {
  color: var(--muted-text);
  margin-bottom: 1.25rem;
}

.managed-upload-help {
  color: var(--muted-text);
  font-size: 0.85rem;
}

.managed-upload-guidance {
  color: var(--muted-text);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.managed-hint {
  color: var(--muted-text);
  font-size: 0.8rem;
  font-weight: 400;
  margin-left: 0.5rem;
}

.managed-format-field .label {
  margin-bottom: 0.5rem;
}

.managed-format-choice {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
}

.managed-format-choice .radio {
  align-items: center;
  display: inline-flex;
  gap: 0.4rem;
}

.managed-format-choice input[type="radio"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.managed-division-controls {
  margin-top: 0.5rem;
}

/* Bulma's .help{display:block} and .button{display:inline-flex} otherwise
   win the cascade over the native [hidden] attribute (equal specificity,
   declared later), so these elements would stay visible even while hidden. */
#managed-tsh-division-mismatch[hidden],
#managed-remove-tsh-division[hidden] {
  display: none;
}

.managed-upload-file .file-cta,
.managed-upload-file .file-name {
  flex-direction: row;
  font-size: var(--bulma-control-size);
  height: var(--bulma-control-height);
  padding: var(--bulma-control-padding-vertical) var(--bulma-control-padding-horizontal);
}

.managed-upload-file .file-cta {
  background-color: var(--surface-elevated);
  border-color: var(--control-border);
  color: var(--text);
}

.managed-upload-file .file-label:hover .file-cta {
  background-color: var(--row-hover);
}

.managed-upload-file .file-name {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}

.managed-upload-action {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-top: 1.25rem;
}

.admin-tournament-detail > section {
  padding-top: 0;
  padding-bottom: 3rem;
}

.admin-tournament-detail > section:first-child {
  padding-top: 1.5rem;
}

.admin-tournament-list-section {
  padding-top: 1.5rem;
}

.admin-tournament-tabs {
  overflow-x: auto;
}

.admin-tournament-state {
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
}

.tournament-state-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 0.5rem;
  row-gap: 0.35rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: 500;
}

.tournament-state-flow-step {
  color: var(--muted-text);
}

.tournament-state-flow-step.is-current {
  color: var(--link-light-text);
  background: var(--link-light);
  padding: 0.15rem 0.65rem;
  border-radius: 9999px;
  font-weight: 700;
}

.tournament-state-flow-arrow {
  color: var(--border);
}

.rating-estimate-input {
  max-width: 6em;
}

.rating-estimate-input::-webkit-inner-spin-button,
.rating-estimate-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.rating-estimate-input[type="number"] {
  -moz-appearance: textfield;
}

.admin-tournament-panel[hidden] {
  display: none;
}

.admin-tournament-panel > section {
  padding: 0;
}

.admin-tournament-panel > section + section {
  margin-top: 1.5rem;
}

.admin-tournament-panel > section > .container,
.admin-tournament-panel > section.container {
  width: 100%;
  max-width: none;
}

.admin-tournament-panel > section > .container > .card,
.admin-tournament-panel > section.container > .card {
  background: transparent;
  box-shadow: none;
}

.admin-tournament-panel > section > .container > .card > .card-content,
.admin-tournament-panel > section.container > .card > .card-content {
  padding: 0;
}

button.roster-action-badge {
  appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.75rem;
  line-height: 1.5;
}

button.roster-action-badge.is-unconfirmed {
  background-color: transparent;
  border-color: var(--border);
  color: var(--muted-text);
}

button.roster-action-badge.is-unconfirmed:hover {
  background-color: var(--surface-elevated);
}

button.roster-action-badge:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

button.table-sort-button,
a.table-sort-button {
  appearance: none;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}

button.table-sort-button:focus-visible,
a.table-sort-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.admin-tournament-details-section + .admin-tournament-details-section,
.admin-tournament-details-form + .admin-tournament-details-section {
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.admin-tournament-details-table {
  margin-top: 1rem;
}

.admin-tournament-details-table td {
  border: none;
  padding: 0.35rem 1.5rem 0.35rem 0;
  vertical-align: top;
}

.admin-tournament-details-table td:first-child {
  width: 1%;
  white-space: nowrap;
}

.admin-tournament-results-division + .admin-tournament-results-division {
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
  padding-top: 1.5rem;
}

.footer {
  background-color: var(--footer-bg);
  color: var(--footer-text);
}

main a:not(.button),
.footer a {
  color: var(--link);
}

.card,
.box,
.modal-card-head,
.modal-card-body,
.modal-card-foot,
.dropdown-content {
  background-color: var(--surface);
  color: var(--text);
  border-color: var(--border);
}

.card-header,
.card-header-title,
.modal-card-title {
  color: var(--text);
}

.card-header,
.modal-card-head,
.modal-card-foot {
  border-color: var(--border);
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .box {
  box-shadow: 0 0 0 1px var(--border);
}

.login-box {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 2.5rem 3rem;
}

/* The logo SVG is black; use it as a mask so it takes the surrounding text colour in both themes. */
.site-logo {
  display: block;
  aspect-ratio: 504 / 144.444444;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("/static/images/absp-tiles.svg") center / contain no-repeat;
  mask: url("/static/images/absp-tiles.svg") center / contain no-repeat;
}

.site-logo-navbar {
  height: 2rem;
}

.login-box-logo {
  height: 72px;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.login-box-title {
  margin-bottom: 1rem;
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.login-box-text {
  margin-bottom: 1.25rem;
  color: var(--muted-text);
  text-align: center;
}

@media screen and (max-width: 480px) {
  .login-box {
    padding: 1.75rem 1.5rem;
  }

  .login-box-logo {
    height: 56px;
    margin-bottom: 1rem;
  }
}

.content,
.content strong,
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6,
.title,
.subtitle,
.label:not(.has-text-white) {
  color: var(--text);
}

html[data-theme="dark"] .checkbox,
html[data-theme="dark"] .checkbox:hover,
html[data-theme="dark"] .radio,
html[data-theme="dark"] .radio:hover {
  color: var(--text);
}

.league-match-metadata strong {
  color: var(--text);
  font-weight: 700;
}

.league-details-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem 2rem;
  margin: 0;
}

.league-details-fact dt {
  margin-bottom: 0.35rem;
  color: var(--muted-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.league-details-fact dd {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.league-match-roster-input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.league-match-roster-status {
  min-width: 6.5rem;
}

.league-match-roster-playing,
.league-match-roster-input:checked + .league-match-roster-status .league-match-roster-not-playing {
  display: none;
}

.league-match-roster-not-playing,
.league-match-roster-input:checked + .league-match-roster-status .league-match-roster-playing {
  display: inline;
}

.league-match-roster-input + .league-match-roster-status {
  background-color: var(--danger-light);
  border-color: var(--danger-light);
  color: var(--danger-light-text);
  cursor: pointer;
}

.league-match-roster-input:checked + .league-match-roster-status {
  background-color: var(--success-light);
  border-color: var(--success-light);
  color: var(--success-light-text);
}

.league-match-roster-input:focus-visible + .league-match-roster-status {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.league-match-round-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.league-match-fixture-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 2.25rem;
  grid-template-areas: "player-one scores player-two delete";
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.delete-game {
  grid-area: delete;
  min-width: 2.25rem;
  min-height: 2.25rem;
  border: 1px solid var(--danger-light);
  border-radius: 0.375rem;
  background: var(--danger-light);
  color: var(--danger-light-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

.delete-game:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.league-match-player-one {
  grid-area: player-one;
  min-width: 0;
}

.league-match-player-two {
  grid-area: player-two;
  min-width: 0;
}

.league-match-fixture-row .select,
.league-match-fixture-row .select select {
  min-width: 0;
  width: 100%;
}

.league-match-score-group {
  grid-area: scores;
  display: grid;
  grid-template-columns: minmax(3.25rem, 4rem) auto minmax(3.25rem, 4rem);
  gap: 0.35rem;
  align-items: center;
}

.league-match-score-input {
  min-width: 0;
  text-align: center;
}

.league-match-score-input::-webkit-inner-spin-button,
.league-match-score-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.league-match-score-input[type="number"] {
  -moz-appearance: textfield;
}

@media screen and (max-width: 480px) {
  .league-match-fixture-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "player-one player-two"
      "scores scores"
      "delete delete";
  }

  .league-match-score-group {
    justify-self: center;
  }

  .delete-game { justify-self: end; }
}

.help:not(.is-primary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger),
.has-text-grey,
.has-text-grey-light {
  color: var(--muted-text) !important;
}

.table {
  background-color: var(--surface);
  color: var(--text);
}

.table th,
.table td,
.table thead th {
  border-color: var(--border);
  color: var(--text);
}

.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
  background-color: var(--row-stripe);
}

.table.is-hoverable tbody tr:not(.is-selected):hover,
.table.is-striped.is-hoverable tbody tr:not(.is-selected):hover,
.table.is-striped.is-hoverable tbody tr:not(.is-selected):hover:nth-child(even) {
  background-color: var(--row-hover);
}

/* Head-to-head win/loss/tie rows: a full-row tint reads brighter than the
   same colour on a small tag or button, so this blends the subtle token
   toward the surface rather than using it at full strength. */
.player-result-outcome-win,
.player-result-outcome-loss,
.player-result-outcome-tie {
  color: var(--text);
}

.player-result-outcome-win {
  background-color: color-mix(in srgb, var(--success-light) 45%, var(--surface));
}

.player-result-outcome-loss {
  background-color: color-mix(in srgb, var(--danger-light) 45%, var(--surface));
}

.player-result-outcome-tie {
  background-color: color-mix(in srgb, var(--warning-light) 45%, var(--surface));
}

.tabs.is-toggle.is-primary li.is-active a {
  background-color: var(--primary-light);
  border-color: var(--link);
  color: var(--heading-text);
}

.input,
.textarea,
.select select {
  background-color: var(--surface);
  border-color: var(--control-border);
  color: var(--text);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--muted-text);
}

.input[readonly],
.textarea[readonly],
.select select:disabled,
.input:disabled,
.textarea:disabled {
  background-color: var(--surface-elevated);
  color: var(--muted-text);
}

.input:focus,
.textarea:focus,
.select select:focus,
.button:focus-visible,
.button.is-focused,
.tabs a:focus-visible,
.pagination-link:focus-visible {
  border-color: var(--focus);
  box-shadow: 0 0 0 0.125em var(--focus-shadow);
}

/* Bulma 1.x draws the arrow from this variable with a more specific selector
   than a plain border-color override, so the variable is what themes it. */
.select {
  --bulma-arrow-color: var(--text);
}

/* Low specificity lets selected, semantic, ghost and disabled states win. */
.button:where(:not(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger, .is-dark, .is-black, .is-white, .is-ghost, .is-text, .theme-toggle)) {
  background-color: var(--surface);
  border-color: var(--control-border);
  color: var(--text);
}

.button:where(:not(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger, .is-dark, .is-black, .is-white, .is-ghost, .is-text, .theme-toggle)):hover,
.button.is-static {
  background-color: var(--surface-elevated);
  border-color: var(--control-border);
  color: var(--text);
}

.hero.is-primary {
  background-color: var(--hero);
  color: var(--hero-text);
}

.hero.is-primary .title,
.hero.is-primary .subtitle {
  color: var(--hero-text);
}

.hero.is-admin {
  background-color: var(--admin-hero);
  color: var(--admin-hero-text);
}

.hero.is-admin .title,
.hero.is-admin .subtitle {
  color: var(--admin-hero-text);
}

/* Semantic colours share tokens across Bulma buttons, tags and notices. */
:is(.button, .tag, .notification, .message).is-primary {
  --tone-fill: var(--primary);
  --tone-on: var(--primary-on);
  --tone-soft: var(--primary-light);
  --tone-text: var(--primary-light-text);
}

:is(.button, .tag, .notification, .message).is-secondary {
  --tone-fill: var(--secondary);
  --tone-on: var(--secondary-on);
  --tone-soft: var(--secondary-light);
  --tone-text: var(--secondary-light-text);
}

:is(.button, .tag, .notification, .message).is-link {
  --tone-fill: var(--link);
  --tone-on: var(--link-on);
  --tone-soft: var(--link-light);
  --tone-text: var(--link-light-text);
}

:is(.button, .tag, .notification, .message).is-info {
  --tone-fill: var(--info);
  --tone-on: var(--info-on);
  --tone-soft: var(--info-light);
  --tone-text: var(--info-light-text);
}

:is(.button, .tag, .notification, .message).is-success {
  --tone-fill: var(--success);
  --tone-on: var(--success-on);
  --tone-soft: var(--success-light);
  --tone-text: var(--success-light-text);
}

:is(.button, .tag, .notification, .message).is-warning {
  --tone-fill: var(--warning);
  --tone-on: var(--warning-on);
  --tone-soft: var(--warning-light);
  --tone-text: var(--warning-light-text);
}

:is(.button, .tag, .notification, .message).is-danger {
  --tone-fill: var(--danger);
  --tone-on: var(--danger-on);
  --tone-soft: var(--danger-light);
  --tone-text: var(--danger-light-text);
}

.button:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger),
.notification:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger) {
  background-color: var(--tone-fill);
  border-color: var(--tone-fill);
  color: var(--tone-on);
}

.button:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger):is(:hover, :focus-visible, :active, .is-hovered, .is-focused, .is-active):not(:disabled):not([disabled]) {
  background-color: color-mix(in srgb, var(--tone-fill) 90%, var(--text));
  border-color: var(--tone-text);
  color: var(--tone-on);
}

/* Status and context tags use quiet fills in both appearances. */
.tag {
  background-color: var(--surface-elevated);
  color: var(--text);
}

.tag:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger),
.tag:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger).is-light {
  background-color: var(--tone-soft);
  border-color: transparent;
  color: var(--tone-text);
}

.button:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger).is-light,
.notification:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger).is-light {
  background-color: var(--tone-soft);
  border-color: var(--tone-soft);
  color: var(--tone-text);
}

.button:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger).is-light:is(:hover, :focus-visible, :active, .is-hovered, .is-focused, .is-active):not(:disabled):not([disabled]) {
  background-color: color-mix(in srgb, var(--tone-soft) 90%, var(--tone-text));
  border-color: var(--tone-text);
  color: var(--tone-text);
}

.button:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger).is-outlined {
  background-color: transparent;
  border-color: var(--tone-text);
  color: var(--tone-text);
}

.button:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger).is-outlined:is(:hover, :focus-visible, :active, .is-hovered, .is-focused, .is-active):not(:disabled):not([disabled]) {
  background-color: var(--tone-soft);
  border-color: var(--tone-text);
  color: var(--tone-text);
}

.has-background-primary-light {
  background-color: var(--primary-light) !important;
  color: var(--primary-light-text) !important;
}

.help.is-primary,
.has-text-primary {
  color: var(--link) !important;
}

.input.is-primary,
.textarea.is-primary,
.select.is-primary select {
  border-color: var(--link);
}

.has-background-secondary-light {
  background-color: var(--secondary-light) !important;
  color: var(--secondary-light-text) !important;
}

.help.is-secondary,
.has-text-secondary {
  color: var(--secondary-light-text) !important;
}

.input.is-secondary,
.textarea.is-secondary,
.select.is-secondary select {
  border-color: var(--secondary-light-text);
}

.has-background-link-light {
  background-color: var(--link-light) !important;
  color: var(--link-light-text) !important;
}

.help.is-link,
.has-text-link {
  color: var(--link-light-text) !important;
}

.input.is-link,
.textarea.is-link,
.select.is-link select {
  border-color: var(--link-light-text);
}

.has-background-info-light {
  background-color: var(--info-light) !important;
  color: var(--info-light-text) !important;
}

.help.is-info,
.has-text-info {
  color: var(--info-light-text) !important;
}

.input.is-info,
.textarea.is-info,
.select.is-info select {
  border-color: var(--info-light-text);
}

.has-background-success-light {
  background-color: var(--success-light) !important;
  color: var(--success-light-text) !important;
}

.help.is-success,
.has-text-success {
  color: var(--success-light-text) !important;
}

.input.is-success,
.textarea.is-success,
.select.is-success select {
  border-color: var(--success-light-text);
}

.has-background-warning-light {
  background-color: var(--warning-light) !important;
  color: var(--warning-light-text) !important;
}

.help.is-warning,
.has-text-warning {
  color: var(--warning-light-text) !important;
}

.input.is-warning,
.textarea.is-warning,
.select.is-warning select {
  border-color: var(--warning-light-text);
}

.has-background-danger-light {
  background-color: var(--danger-light) !important;
  color: var(--danger-light-text) !important;
}

.help.is-danger,
.has-text-danger {
  color: var(--danger-light-text) !important;
}

.input.is-danger,
.textarea.is-danger,
.select.is-danger select {
  border-color: var(--danger-light-text);
}

/* Primary actions use the same cyan family as selected filters. */
.button:is(.is-primary, .is-link):not(.is-outlined):not(.is-ghost):not(.is-text) {
  background-color: var(--primary-light);
  border-color: var(--link);
  color: var(--heading-text);
  font-weight: 600;
}

.button:is(.is-primary, .is-link):not(.is-outlined):not(.is-ghost):not(.is-text):is(:hover, :focus-visible, :active, .is-hovered, .is-focused, .is-active):not(:disabled):not([disabled]) {
  background-color: var(--primary-hover);
  border-color: var(--link);
  color: var(--heading-text);
}

.button.is-secondary:not(.is-outlined) {
  border-color: var(--control-border);
}

/* Bulma 1 removes the border width on coloured buttons. Restore the
   visible cyan edge without changing its sizing or loading treatment. */
.button:is(.is-primary, .is-link, .is-secondary),
.button[aria-pressed="true"] {
  --bulma-button-border-width: 1px;
  border-width: 1px;
}

/* Quiet actions and destructive actions gain a tinted fill on hover.
   Use is-danger is-solid for a final destructive confirmation. */
.button:is(.is-ghost, .is-text) {
  background-color: transparent;
  border-color: transparent;
  color: var(--link);
}

.button:is(.is-ghost, .is-text):is(:hover, :focus-visible, :active, .is-hovered, .is-focused, .is-active):not(:disabled):not([disabled]) {
  background-color: var(--primary-light);
  border-color: transparent;
  color: var(--link);
}

.button.is-danger:not(.is-light):not(.is-outlined):not(.is-solid) {
  background-color: transparent;
  border-color: transparent;
  color: var(--danger-light-text);
}

.button.is-danger:not(.is-light):not(.is-outlined):not(.is-solid):is(:hover, :focus-visible, :active, .is-hovered, .is-focused, .is-active):not(:disabled):not([disabled]) {
  background-color: var(--danger-light);
  border-color: transparent;
  color: var(--danger-light-text);
}

/* State takes precedence over a role or presentation modifier. */
.button[aria-pressed="true"]:not(:disabled):not([disabled]),
.profile-rating-history-controls .button[aria-pressed="true"]:not(:disabled):not([disabled]) {
  background-color: var(--primary-light) !important;
  border-color: var(--link);
  color: var(--heading-text) !important;
}

.button[aria-pressed="true"]:is(:hover, :focus-visible, :active):not(:disabled):not([disabled]) {
  background-color: var(--primary-hover) !important;
}

.button:is(:disabled, [disabled]):not(.theme-toggle),
.button:is(:disabled, [disabled]):not(.theme-toggle):is(:hover, :focus, :active, .is-hovered, .is-focused, .is-active) {
  background-color: var(--surface-elevated) !important;
  border-color: var(--border) !important;
  color: var(--muted-text) !important;
  font-weight: 400 !important;
  opacity: 1;
}

.admin-breadcrumbs-bar {
  padding: 1rem 1.5rem;
  background-color: var(--page-bg);
}

.admin-breadcrumbs {
  margin-bottom: 0 !important;
}

.admin-breadcrumbs a {
  color: var(--link);
}

.admin-breadcrumbs li.is-active a {
  color: var(--text);
  font-weight: 600;
}

.admin-breadcrumbs li + li::before {
  color: var(--muted-text);
}

.admin-breadcrumbs a:hover {
  color: var(--link);
  text-decoration: underline;
}

.admin-breadcrumbs a:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---- admin dashboard stat tiles ---- */

.dashboard-stat-tile {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: none;
}

html[data-theme="dark"] .card.dashboard-stat-tile {
  /* suppress dark-mode ring from html[data-theme="dark"] .card */
  box-shadow: none;
}

.dashboard-stat-tile .title {
  color: var(--text);
}

.admin-version-string {
  font-size: 0.75rem;
}

a:hover .dashboard-stat-tile {
  background-color: var(--row-hover);
}

.dashboard-stat-tile .heading {
  color: var(--muted-text);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tabs a,
.pagination-link,
.pagination-previous,
.pagination-next,
.pagination-ellipsis {
  border-color: var(--border);
  color: var(--text);
}

.tabs li.is-active a,
.pagination-link.is-current {
  border-color: var(--link);
  color: var(--link);
}

html[data-theme="dark"] .tabs.is-boxed a:hover {
  background-color: var(--surface-elevated);
  border-bottom-color: var(--border);
  color: var(--text);
}

html[data-theme="dark"] .tabs.is-boxed li.is-active a,
html[data-theme="dark"] .tabs.is-boxed li.is-active a:hover {
  background-color: var(--surface);
  border-color: var(--border);
  border-bottom-color: transparent;
  color: var(--link);
}

.message:not(.is-primary):not(.is-secondary):not(.is-link):not(.is-info):not(.is-success):not(.is-warning):not(.is-danger),
.notification.is-light {
  background-color: var(--surface-elevated);
  color: var(--text);
}

.message.is-primary { --message-color: var(--primary); --message-on: var(--primary-on); --message-light: var(--primary-light); --message-light-text: var(--primary-light-text); }
.message.is-secondary { --message-color: var(--secondary); --message-on: var(--secondary-on); --message-light: var(--secondary-light); --message-light-text: var(--secondary-light-text); }
.message.is-link { --message-color: var(--link); --message-on: var(--link-on); --message-light: var(--link-light); --message-light-text: var(--link-light-text); }
.message.is-info { --message-color: var(--info); --message-on: var(--info-on); --message-light: var(--info-light); --message-light-text: var(--info-light-text); }
.message.is-success { --message-color: var(--success); --message-on: var(--success-on); --message-light: var(--success-light); --message-light-text: var(--success-light-text); }
.message.is-warning { --message-color: var(--warning); --message-on: var(--warning-on); --message-light: var(--warning-light); --message-light-text: var(--warning-light-text); }
.message.is-danger { --message-color: var(--danger); --message-on: var(--danger-on); --message-light: var(--danger-light); --message-light-text: var(--danger-light-text); }

.message.is-primary .message-header,
.message.is-secondary .message-header,
.message.is-link .message-header,
.message.is-info .message-header,
.message.is-success .message-header,
.message.is-warning .message-header,
.message.is-danger .message-header {
  background-color: var(--message-color);
  color: var(--message-on);
}

.message.is-primary .message-body,
.message.is-secondary .message-body,
.message.is-link .message-body,
.message.is-info .message-body,
.message.is-success .message-body,
.message.is-warning .message-body,
.message.is-danger .message-body {
  background-color: var(--message-light);
  border-color: var(--message-color);
  color: var(--message-light-text);
}

.toast-region {
  position: fixed;
  top: calc(var(--navbar-height) + 1rem);
  right: 1rem;
  z-index: 40;
  width: min(26rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast-message {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 0.5rem 1.5rem var(--shadow);
  pointer-events: auto;
  animation: toast-enter 200ms ease-out both;
}

.toast-message.is-leaving {
  animation: toast-leave 200ms ease-in both;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-leave {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-0.5rem);
  }
}

@media (max-width: 768px) {
  .toast-region {
    top: calc(var(--navbar-height) + 0.75rem);
    right: 0.75rem;
    width: calc(100vw - 1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .toast-message,
  .toast-message.is-leaving {
    animation-duration: 1ms;
  }
}

.palette-toolbar,
.palette-theme-switch {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.palette-controls-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.palette-colour-control {
  align-items: center;
  background-color: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  display: grid;
  font-size: 0.8rem;
  font-weight: 600;
  gap: 0.5rem;
  grid-template-columns: 1fr 2.25rem minmax(5.5rem, 0.9fr);
  padding: 0.65rem;
}

.palette-colour-control input[type="color"] {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 2rem;
  padding: 0;
  width: 2.25rem;
}

.palette-colour-control .input {
  font-family: "JetBrainsMono Nerd Font", "JetBrains Mono", monospace;
  text-transform: uppercase;
}

.palette-css-output {
  font-family: "JetBrainsMono Nerd Font", "JetBrains Mono", monospace;
  font-size: 0.8rem;
}

.palette-role-groups {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.palette-role-group {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.75rem;
}

.palette-role-label {
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.palette-role-group .palette-controls-grid {
  gap: 0.5rem;
}

.palette-role-group .palette-colour-control {
  background-color: var(--surface);
}

.palette-hero-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.palette-sample-hero {
  border-radius: 6px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .palette-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .palette-theme-switch {
    justify-content: flex-start;
  }

  .palette-controls-grid,
  .palette-hero-grid {
    grid-template-columns: 1fr;
  }
}

.import-match-resolution {
  border: 1px solid var(--border);
}

.import-match-intro {
  margin-bottom: 1rem;
  color: var(--muted-text);
}

.import-match-list {
  border-top: 1px solid var(--border);
}

.import-match-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}

.import-match-row:last-child {
  border-bottom: 0;
}

.import-match-name {
  margin: 0;
  font-weight: 600;
}

.import-match-actions {
  justify-content: flex-end;
  margin: 0 !important;
}

.import-match-actions form {
  margin: 0;
}

@media screen and (max-width: 768px) {
  .import-match-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .import-match-actions {
    justify-content: flex-start;
  }
}

.typeahead-wrapper { position: relative; }
.management-role-typeahead { position: relative; }
.typeahead-dropdown {
  position: absolute; top: 100%; left: 0; z-index: 1000;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px; box-shadow: 0 2px 8px var(--shadow);
  min-width: 250px; max-height: 300px; overflow-y: auto;
}
.typeahead-item { padding: 8px 12px; cursor: pointer; }
button.typeahead-item {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}
.typeahead-item:hover { background: var(--row-hover); }
.typeahead-item[aria-selected="true"] { background: var(--typeahead-selected); }
.typeahead-item:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.switch {
  position: relative;
  display: inline-block;
  width: 3rem;
  height: 1.5rem;
}

.switch input {
  width: 0;
  height: 0;
  opacity: 0;
}

.slider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background-color: var(--surface-elevated);
  border: 1px solid var(--border);
  border-radius: 9999px;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.slider::before {
  position: absolute;
  top: 0.1875rem;
  left: 0.1875rem;
  width: 1rem;
  height: 1rem;
  background-color: var(--surface);
  border-radius: 50%;
  content: "";
  transition: transform 120ms ease;
}

.switch input:checked + .slider {
  background-color: var(--primary);
  border-color: var(--primary);
}

.switch input:checked + .slider::before {
  transform: translateX(1.5rem);
}

.switch input:focus-visible + .slider {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.profile-rating-history { margin-bottom: 1.5rem; }
.profile-rating-history-controls { display: flex; gap: .5rem; margin-bottom: 1rem; }
.profile-rating-history-controls .button[aria-pressed="true"] { background: var(--primary-light); border-color: var(--link); color: var(--heading-text); }
.profile-rating-history-controls .button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.profile-rating-history-chart { height: 20rem; margin-bottom: 1rem; }
.profile-rating-history-chart canvas { max-height: 100%; }
.profile-rating-history-points { margin: 0; padding-left: 1.5rem; }
.profile-rating-history-points li { margin-bottom: .4rem; }
.profile-rating-history-points.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media screen and (max-width: 768px) { .profile-rating-history-chart { height: 14rem; } }

.profile-summary { overflow: hidden; }
.profile-summary-content { display: grid; grid-template-columns: 11rem minmax(0, 1fr); padding: 0; }
.profile-summary-avatar { display: grid; place-items: center; padding: 1.5rem; border-right: 1px solid var(--border); }
.profile-summary-avatar .avatar { width: 8rem; height: 8rem; }
.profile-summary-avatar figure { width: 100%; height: 100%; margin: 0; }
.profile-summary-avatar img { display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--border), 0 .25rem .75rem var(--shadow); }
.profile-summary-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.profile-summary-fact { min-width: 0; padding: 1.25rem 1.5rem; }
.profile-summary-fact:nth-child(even) { border-left: 1px solid var(--border); }
.profile-summary-fact:nth-child(n + 3) { border-top: 1px solid var(--border); }
.profile-summary-fact dt,
.profile-metric-caption { margin-bottom: .35rem; color: var(--muted-text); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.profile-summary-fact dd { margin: 0; overflow-wrap: anywhere; }
.profile-summary-fact-rating dd { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.profile-summary-membership { font-weight: 600; }
.profile-summary-membership-neutral { background-color: var(--surface-elevated); color: var(--muted-text); }

@media screen and (max-width: 768px) {
  .profile-summary-content { grid-template-columns: minmax(0, 1fr); }
  .profile-summary-avatar { border-right: 0; border-bottom: 1px solid var(--border); }
}

@media screen and (max-width: 360px) {
  .profile-summary-facts { grid-template-columns: minmax(0, 1fr); }
  .profile-summary-fact:nth-child(even) { border-left: 0; }
  .profile-summary-fact:nth-child(n + 2) { border-top: 1px solid var(--border); }
}

/* ---- navbar ---- */

.navbar.is-dark {
  min-height: var(--navbar-height);
  background-color: var(--navbar-bg);
  border-bottom: 1px solid var(--navbar-border);
}

.navbar.is-dark .navbar-brand .navbar-item,
.navbar.is-dark .navbar-burger {
  height: var(--navbar-height);
}

.navbar.is-dark .navbar-menu {
  background-color: var(--navbar-bg);
}

.navbar.is-dark .navbar-start > .navbar-item,
.navbar.is-dark .navbar-start > .navbar-item.has-dropdown > .navbar-link,
.navbar.is-dark .navbar-end > .navbar-item,
.navbar.is-dark .navbar-end > .navbar-item.has-dropdown > .navbar-link {
  min-height: var(--navbar-height);
  color: var(--navbar-text);
}

.navbar.is-dark .navbar-brand > .navbar-item,
.navbar.is-dark .navbar-burger {
  color: var(--navbar-text);
}

.navbar.is-dark .navbar-burger span {
  background-color: currentColor;
}

.navbar.is-dark .navbar-dropdown .navbar-item {
  min-height: auto;
  height: auto;
}

.navbar.is-dark .navbar-start > a.navbar-item,
.navbar.is-dark .navbar-start > .navbar-item.has-dropdown > .navbar-dropdown-trigger,
.navbar.is-dark .navbar-start > .navbar-item.has-dropdown > .navbar-section-label {
  font-weight: 700;
}

.navbar.is-dark .navbar-dropdown-trigger {
  appearance: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  color: var(--navbar-text);
  font: inherit;
  padding: 0.5rem 0.75rem;
  text-align: left;
  cursor: pointer;
}

.navbar.is-dark .navbar-section-label {
  display: none;
}

.navbar.is-dark .navbar-brand > a.navbar-item:hover,
.navbar.is-dark .navbar-brand > a.navbar-item:focus-visible,
.navbar.is-dark .navbar-start > a.navbar-item:hover,
.navbar.is-dark .navbar-start > a.navbar-item:focus-visible,
.navbar.is-dark .navbar-end > a.navbar-item:hover,
.navbar.is-dark .navbar-end > a.navbar-item:focus-visible,
.navbar.is-dark .navbar-item.has-dropdown:hover .navbar-link.navbar-dropdown-trigger,
.navbar.is-dark .navbar-item.has-dropdown:focus-within .navbar-link.navbar-dropdown-trigger {
  background-color: var(--navbar-hover-bg);
  color: var(--navbar-hover-text);
}

.navbar.is-dark .navbar-item.has-dropdown:focus-within .navbar-dropdown {
  display: block;
}

.navbar.is-dark .navbar-end .navbar-item.has-dropdown:hover .navbar-dropdown-trigger,
.navbar.is-dark .navbar-end .navbar-item.has-dropdown:focus-within .navbar-dropdown-trigger {
  background-color: var(--navbar-bg);
  color: var(--navbar-text);
}

/* ---- user-initials circle ---- */

.user-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--initials-border);
  border-radius: 50%;
  background-color: var(--navbar-bg);
  color: var(--navbar-text);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  line-height: 1;
  transition: border-color 120ms ease;
}

.navbar-dropdown-trigger:hover .user-initials {
  border-color: var(--initials-border-hover);
}

.navbar-dropdown-trigger:focus-visible .user-initials {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* ---- dark dropdown menus ---- */

.navbar.is-dark .navbar-dropdown {
  background-color: var(--navbar-bg);
  border: 1px solid var(--navbar-border);
  box-shadow: 0 4px 12px var(--shadow);
}

.navbar.is-dark .navbar-dropdown .navbar-item {
  background-color: var(--navbar-bg);
  color: var(--navbar-muted);
}

.navbar.is-dark .navbar-dropdown .navbar-item:hover,
.navbar.is-dark .navbar-dropdown .navbar-item.is-active {
  background-color: var(--navbar-hover-bg);
  color: var(--navbar-hover-text);
}

.navbar.is-dark .navbar-dropdown .navbar-divider {
  background-color: var(--navbar-hover-bg);
}

.navbar.is-dark .navbar-dropdown .navbar-item:focus-visible {
  outline: 2px solid var(--navbar-text);
  outline-offset: -2px;
}

@media screen and (max-width: 1023px) {
  .navbar.is-dark .navbar-menu,
  .navbar.is-dark .navbar-menu.is-active {
    background-color: var(--navbar-bg);
  }

  .navbar.is-dark .navbar-start,
  .navbar.is-dark .navbar-end {
    display: block;
  }

  .navbar.is-dark .navbar-start > .navbar-item:not(.has-dropdown),
  .navbar.is-dark .navbar-end > .navbar-item:not(.has-dropdown),
  .navbar.is-dark .navbar-section-label {
    min-height: 3.25rem;
    width: 100%;
  }

  .navbar.is-dark .navbar-start > .navbar-item.has-dropdown,
  .navbar.is-dark .navbar-end > .navbar-item.has-dropdown {
    min-height: 0;
    padding: 0;
  }

  .navbar.is-dark .navbar-start > .navbar-item:not(.has-dropdown),
  .navbar.is-dark .navbar-end > .navbar-item:not(.has-dropdown),
  .navbar.is-dark .navbar-section-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.75rem 1rem;
    color: var(--navbar-text);
    text-align: left;
  }

  .navbar.is-dark .navbar-section-label {
    font-weight: inherit;
  }

  .navbar.is-dark .navbar-section-label::after {
    display: none;
  }

  .navbar.is-dark .navbar-menu .navbar-start > a.navbar-item:hover,
  .navbar.is-dark .navbar-menu .navbar-start > a.navbar-item:focus-visible,
  .navbar.is-dark .navbar-menu .navbar-end > a.navbar-item:hover,
  .navbar.is-dark .navbar-menu .navbar-end > a.navbar-item:focus-visible {
    background-color: var(--navbar-hover-bg);
    color: var(--navbar-hover-text);
  }

  .navbar.is-dark .navbar-menu .navbar-item.has-dropdown,
  .navbar.is-dark .navbar-menu .navbar-item.has-dropdown:hover,
  .navbar.is-dark .navbar-menu .navbar-item.has-dropdown:focus-within {
    background-color: transparent;
    color: var(--navbar-text);
  }

  .navbar.is-dark .navbar-menu .navbar-section-label {
    background-color: var(--navbar-bg);
    pointer-events: none;
  }

  .navbar.is-dark .navbar-dropdown-trigger,
  .navbar.is-dark .user-initials {
    display: none;
  }

  .navbar.is-dark .navbar-dropdown {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    background-color: var(--navbar-bg);
    border: 0;
    box-shadow: none;
  }

  .navbar.is-dark .navbar-dropdown .navbar-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 3.25rem;
    padding: 0.75rem 1rem 0.75rem 2rem;
    color: var(--navbar-muted);
    text-align: left;
  }

  .navbar.is-dark .navbar-dropdown .navbar-item:hover,
  .navbar.is-dark .navbar-dropdown .navbar-item:focus-visible,
  .navbar.is-dark .navbar-dropdown .navbar-item.is-active {
    background-color: var(--navbar-hover-bg);
    color: var(--navbar-hover-text);
  }
}

/* Dark notices stay close to the surrounding charcoal surface. */
html[data-theme="dark"] .notification:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger),
html[data-theme="dark"] .message:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger) :is(.message-header, .message-body) {
  background-color: color-mix(in srgb, var(--tone-soft) 40%, var(--surface)) !important;
  color: var(--text) !important;
  border-color: var(--tone-text);
}

html[data-theme="dark"] .notification:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger) {
  border-left: 3px solid var(--tone-text);
}

html[data-theme="dark"] .notification:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger) strong,
html[data-theme="dark"] .message:is(.is-primary, .is-secondary, .is-link, .is-info, .is-success, .is-warning, .is-danger) .message-header {
  color: var(--tone-text) !important;
}

/* Tournament-type chips (MAJOR, WESPA, INV) shown beside a tournament name. */
.tournament-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

@media screen and (max-width: 768px) {
  .tournament-chips {
    display: flex;
    margin-top: 0.25rem;
    margin-left: 0;
  }
}

/* All tournament classifications share purple, independent of legacy roles.
   For a standalone classification tag, use is-tournament-classification. */
.tournament-chips .tag,
.tag.is-tournament-classification {
  background-color: var(--classification-bg) !important;
  border-color: transparent;
  color: var(--classification-text) !important;
}

/* Administration is identified by a slate label on the shared hero.
   Apply is-administration to the existing label; CSS does not insert text. */
.tag.is-administration {
  background-color: var(--admin-label-bg) !important;
  color: var(--admin-label-text) !important;
  border-color: transparent;
}

.content :is(h1, h2, h3, h4, h5, h6),
.title,
.card-header-title,
.modal-card-title {
  color: var(--heading-text);
}

.hero:is(.is-primary, .is-admin) .subtitle {
  color: var(--muted-text);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--primary);
}

input[type="file"]::file-selector-button {
  font: inherit;
  background-color: var(--surface-elevated);
  border: 1px solid var(--control-border);
  border-radius: 4px;
  color: var(--text);
  padding: 0.5em 0.75em;
}

input[type="file"]::file-selector-button:hover {
  background-color: var(--row-hover);
}