/* 02-admin.css
   operator mapping manager and the drag-and-drop boards

   Split out of styles.css. The numeric prefix is load-bearing: the server
   loads styles.css first, then styles/*.css alphabetically, and the cascade
   here is the original file's order. Renaming these out of sequence changes
   which rule wins.

   A few blocks are filed by position rather than by subject — the mobile
   header sits inside launch, a shared chart rule inside game stats — because
   moving them would reorder the cascade. Worth relocating one at a time with
   a visual check, not in bulk.
   ======================================================================== */

/* ===========================================================================
   Operator mapping manager
   ======================================================================== */

.operator-map-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


/* Summary */

.operator-map-summary {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background:
    var(--surface);
}


.operator-map-summary__item {
  padding:
    14px 16px;

  border-right:
    1px solid var(--line);
}


.operator-map-summary__item:last-child {
  border-right: 0;
}


.operator-map-summary__item span {
  display: block;

  color:
    var(--ink-faint);

  font-size: 10px;

  text-transform:
    uppercase;

  letter-spacing:
    .045em;
}


.operator-map-summary__item strong {
  display: block;

  margin-top: 5px;

  color:
    var(--ink);

  font-size: 20px;

  font-weight: 600;
}


/* Search/filter */

.operator-map-toolbar {
  display: flex;
  gap: 8px;
}


.operator-map-toolbar input,
.operator-map-toolbar select {
  height: 36px;

  border:
    1px solid var(--line-strong);

  border-radius: 7px;

  background:
    var(--surface);

  color:
    var(--ink);

  font: inherit;

  font-size: 12px;
}


.operator-map-toolbar input {
  flex: 1;

  min-width: 0;

  padding:
    0 11px;
}


.operator-map-toolbar select {
  min-width: 180px;

  padding:
    0 9px;
}


/* Rows */

.operator-map-list {
  display: flex;

  flex-direction: column;

  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background:
    var(--surface);
}


.operator-map-row {
  display: grid;

  grid-template-columns:
    minmax(190px, 1fr)
    32px
    minmax(190px, 1fr)
    74px
    minmax(240px, auto);

  align-items: center;

  gap: 12px;

  min-height: 72px;

  padding:
    11px 14px;

  border-bottom:
    1px solid var(--line);
}


.operator-map-row:last-child {
  border-bottom: 0;
}


.operator-map-row.is-approved {
  background:
    color-mix(
      in srgb,
      var(--positive) 5%,
      transparent
    );
}


.operator-map-row.is-ignored {
  opacity: .62;
}


/* Names */

.operator-map-name {
  min-width: 0;
}


.operator-map-name strong {
  display: block;

  overflow: hidden;

  color:
    var(--ink);

  font-size: 12px;

  font-weight: 500;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}


.operator-map-name small {
  display: block;

  margin-top: 3px;

  color:
    var(--ink-faint);

  font-size: 10px;
}


.operator-platform {
  display: inline-flex;

  margin-bottom: 5px;

  padding:
    2px 6px;

  border-radius: 4px;

  font-size: 8px;

  font-weight: 600;

  text-transform:
    uppercase;

  letter-spacing:
    .06em;
}


.operator-platform.bragg {
  background:
    var(--surface-sunk);

  color:
    var(--ink-faint);
}


.operator-platform.relax {
  background:
    var(--accent-soft);

  color:
    var(--accent);
}


/* Arrow */

.operator-map-arrow {
  color:
    var(--ink-faint);

  font-size: 18px;

  text-align: center;
}


/* Confidence */

.operator-confidence {
  text-align: center;
}


.operator-confidence strong {
  display: block;

  color:
    var(--ink);

  font-size: 12px;
}


.operator-confidence span {
  display: block;

  margin-top: 2px;

  color:
    var(--ink-faint);

  font-size: 9px;
}


/* Actions */

.operator-map-actions {
  display: flex;

  align-items: center;

  justify-content:
    flex-end;

  gap: 6px;
}


.operator-map-actions button,
.operator-map-choose {
  min-height: 31px;

  padding:
    0 9px;

  border:
    1px solid var(--line-strong);

  border-radius: 6px;

  background:
    transparent;

  color:
    var(--ink-soft);

  font: inherit;

  font-size: 10px;

  cursor: pointer;
}


.operator-map-actions button:hover,
.operator-map-choose:hover {
  border-color:
    var(--ink-faint);

  color:
    var(--ink);
}


.operator-map-actions button.primary {
  border-color:
    var(--accent);

  background:
    var(--accent-soft);

  color:
    var(--accent);
}


.operator-map-choose {
  max-width: 150px;
}


.operator-map-status {
  color:
    var(--positive);

  font-size: 10px;

  font-weight: 500;

  white-space: nowrap;
}


.operator-map-status.separate {
  color:
    var(--ink-faint);
}


.operator-map-empty {
  padding: 36px;

  color:
    var(--ink-faint);

  font-size: 12px;

  text-align: center;
}


/* Mobile */

@media (max-width: 760px) {

  .operator-map-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .operator-map-summary__item:nth-child(2) {
    border-right: 0;
  }


  .operator-map-summary__item:nth-child(-n+2) {
    border-bottom:
      1px solid var(--line);
  }


  .operator-map-toolbar {
    flex-direction:
      column;
  }


  .operator-map-toolbar select {
    width: 100%;
  }


  .operator-map-row {
    grid-template-columns:
      minmax(0, 1fr)
      22px
      minmax(0, 1fr);

    gap: 7px;

    padding: 12px;
  }


  .operator-confidence {
    grid-column:
      1 / 2;

    text-align: left;
  }


  .operator-map-actions {
    grid-column:
      2 / 4;

    flex-wrap: wrap;

    justify-content:
      flex-start;
  }


  .operator-map-choose {
    max-width: 165px;
  }
}


/* Parent/canonical operator editing */

.operator-canonical-input {
  min-width: 150px;
  max-width: 210px;
  height: 31px;

  padding: 0 8px;

  border:
    1px solid var(--line-strong);

  border-radius: 6px;

  background:
    var(--surface-sunk);

  color:
    var(--ink);

  font: inherit;
  font-size: 10px;
}


.operator-canonical-input:focus {
  border-color:
    var(--accent);

  outline: none;
}


@media (max-width: 760px) {

  .operator-canonical-input {
    width: 100%;
    max-width: none;
  }

}


/* ===========================================================================
   Admin operator mapping V3
   ======================================================================== */

.rail__admin {
  white-space: nowrap;
}


/* Main admin page */

.admin-operator-view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


/* Intro */

.admin-operator-intro {
  padding: 16px 18px;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background:
    var(--surface);
}


.admin-tabs {
  display: flex;

  gap: 6px;

  margin-bottom: 14px;
}


.admin-tab {
  height: 30px;

  padding: 0 14px;

  border:
    1px solid var(--line-strong);

  border-radius: 7px;

  background:
    var(--surface);

  color:
    var(--ink-soft);

  font: inherit;

  font-size: 10px;

  font-weight: 500;

  cursor: pointer;
}


.admin-tab.is-active {
  border-color:
    var(--accent);

  background:
    var(--accent-soft);

  color:
    var(--accent);
}


.admin-eyebrow {
  display: block;

  margin-bottom: 4px;

  color:
    var(--accent);

  font-size: 9px;

  font-weight: 600;

  text-transform:
    uppercase;

  letter-spacing:
    .08em;
}


.admin-operator-intro h2 {
  margin: 0;

  color:
    var(--ink);

  font-size: 18px;

  font-weight: 600;
}


.admin-operator-intro p {
  max-width: 760px;

  margin:
    5px 0 0;

  color:
    var(--ink-faint);

  font-size: 11px;

  line-height: 1.5;
}


/* Summary */

.operator-admin-summary {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background:
    var(--surface);
}


.operator-admin-summary > div {
  padding:
    13px 15px;

  border-right:
    1px solid var(--line);
}


.operator-admin-summary > div:last-child {
  border-right: 0;
}


.operator-admin-summary strong {
  display: block;

  color:
    var(--ink);

  font-size: 20px;

  font-weight: 600;
}


.operator-admin-summary span {
  display: block;

  margin-top: 3px;

  color:
    var(--ink-faint);

  font-size: 9px;

  text-transform:
    uppercase;

  letter-spacing:
    .045em;
}


/* Toolbar */

.operator-admin-toolbar {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 12px;
}


.operator-admin-toolbar > input {
  flex: 1;

  width: 100%;

  max-width: 380px;

  height: 35px;

  padding:
    0 10px;

  border:
    1px solid var(--line-strong);

  border-radius: 7px;

  outline: none;

  background:
    var(--surface);

  color:
    var(--ink);

  font: inherit;

  font-size: 11px;
}


.operator-admin-toolbar > input:focus {
  border-color:
    var(--accent);
}


.operator-admin-filter-group {
  display: flex;

  align-items: center;

  gap: 8px;
}


.operator-admin-platform-filter {
  height: 35px;

  padding:
    0 9px;

  border:
    1px solid var(--line-strong);

  border-radius: 7px;

  background:
    var(--surface);

  color:
    var(--ink);

  font: inherit;

  font-size: 10px;
}


.operator-admin-tabs {
  display: inline-flex;

  overflow: hidden;

  border:
    1px solid var(--line-strong);

  border-radius: 7px;
}


.operator-admin-tabs button {
  min-height: 33px;

  padding:
    0 10px;

  border: 0;

  border-right:
    1px solid var(--line-strong);

  background:
    transparent;

  color:
    var(--ink-faint);

  font: inherit;

  font-size: 10px;

  cursor: pointer;
}


.operator-admin-tabs button:last-child {
  border-right: 0;
}


.operator-admin-tabs button.is-active {
  background:
    var(--accent-soft);

  color:
    var(--accent);
}


/* Save feedback */

.operator-admin-save-status {
  min-height: 14px;

  color:
    var(--ink-faint);

  font-size: 10px;

  text-align: right;
}


.operator-admin-save-status.is-saved {
  color:
    var(--positive);
}


/* Table */

.operator-admin-table-wrap {
  width: 100%;

  overflow-x: auto;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background:
    var(--surface);
}


.operator-admin-table {
  width: 100%;

  min-width: 1050px;

  border-collapse:
    collapse;

  font-size: 11px;
}


.operator-admin-table th {
  height: 38px;

  padding:
    0 11px;

  border-bottom:
    1px solid var(--line-strong);

  color:
    var(--ink-faint);

  font-size: 9px;

  font-weight: 500;

  text-align: left;

  text-transform:
    uppercase;

  letter-spacing:
    .045em;

  white-space: nowrap;
}


.operator-admin-table td {
  padding:
    9px 11px;

  border-bottom:
    1px solid var(--line);

  vertical-align: middle;
}


.operator-admin-table tbody tr:last-child td {
  border-bottom: 0;
}


.operator-admin-table tbody tr:hover {
  background:
    var(--surface-hover);
}


/* Platform */

.operator-admin-platform {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 48px;

  padding:
    3px 6px;

  border-radius: 5px;

  font-size: 8px;

  font-weight: 600;

  text-transform:
    uppercase;

  letter-spacing:
    .055em;
}


.operator-admin-platform.is-bragg {
  background:
    var(--surface-sunk);

  color:
    var(--ink-soft);
}


.operator-admin-platform.is-relax {
  background:
    var(--accent-soft);

  color:
    var(--accent);
}


/* Raw */

.operator-admin-raw {
  min-width: 190px;
}


.operator-admin-raw strong {
  color:
    var(--ink);

  font-weight: 500;
}


/* Editable mapping fields */

.operator-admin-match-select,
.operator-admin-canonical {
  width: 100%;

  min-width: 180px;

  height: 31px;

  padding:
    0 8px;

  border:
    1px solid var(--line-strong);

  border-radius: 6px;

  outline: none;

  background:
    var(--surface-sunk);

  color:
    var(--ink);

  font: inherit;

  font-size: 10px;
}


.operator-admin-match-select:focus,
.operator-admin-canonical:focus {
  border-color:
    var(--accent);
}


.operator-admin-linked-note {
  display: block;

  max-width: 220px;

  margin-top: 4px;

  color:
    var(--ink-faint);

  font-size: 8px;

  line-height: 1.3;
}


/* Status */

.operator-admin-status {
  display: inline-flex;

  align-items: center;

  min-height: 23px;

  padding:
    0 7px;

  border-radius: 5px;

  font-size: 9px;

  font-weight: 500;

  white-space: nowrap;
}


.operator-admin-status.is-matched {
  background:
    color-mix(
      in srgb,
      var(--positive) 10%,
      transparent
    );

  color:
    var(--positive);
}


.operator-admin-status.is-review {
  background:
    var(--accent-soft);

  color:
    var(--accent);
}


.operator-admin-status.is-unmatched,
.operator-admin-status.is-standalone {
  background:
    var(--surface-sunk);

  color:
    var(--ink-faint);
}


/* Actions */

.operator-admin-actions {
  min-width: 180px;

  white-space: nowrap;
}


.operator-admin-actions button {
  min-height: 29px;

  margin-left: 4px;

  padding:
    0 8px;

  border:
    1px solid var(--line-strong);

  border-radius: 6px;

  background:
    transparent;

  color:
    var(--ink-soft);

  font: inherit;

  font-size: 9px;

  cursor: pointer;
}


.operator-admin-actions button:first-child {
  margin-left: 0;
}


.operator-admin-actions button.primary {
  border-color:
    var(--accent);

  background:
    var(--accent-soft);

  color:
    var(--accent);
}


.operator-admin-actions button:hover {
  color:
    var(--ink);
}


.operator-admin-empty {
  height: 90px;

  color:
    var(--ink-faint);

  text-align: center;
}


/* Mobile */

@media (max-width: 760px) {

  .operator-admin-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .operator-admin-summary > div:nth-child(2) {
    border-right: 0;
  }


  .operator-admin-summary > div:nth-child(-n+2) {
    border-bottom:
      1px solid var(--line);
  }


  .operator-admin-toolbar {
    align-items: stretch;

    flex-direction: column;
  }


  .operator-admin-toolbar > input {
    max-width: none;
  }


  .operator-admin-filter-group {
    align-items: stretch;

    flex-direction: column;
  }


  .operator-admin-platform-filter {
    width: 100%;
  }


  .operator-admin-tabs {
    width: 100%;

    overflow-x: auto;
  }


  .operator-admin-tabs button {
    flex:
      1 0 auto;
  }


  .admin-operator-intro {
    padding: 14px;
  }
}


/* ===========================================================================
   Operator parent grouping V1
   ======================================================================== */

.operator-parent-admin {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


/* Header */

.parent-admin-header {
  padding: 16px 18px;

  border: 1px solid var(--line);
  border-radius: 9px;

  background: var(--surface);
}


.parent-admin-header h2 {
  margin: 0;

  color: var(--ink);

  font-size: 18px;
  font-weight: 600;
}


.parent-admin-header p {
  margin: 5px 0 0;

  color: var(--ink-faint);

  font-size: 11px;
}


/* Summary */

.parent-admin-summary {
  display: grid;

  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  overflow: hidden;

  border: 1px solid var(--line);
  border-radius: 9px;

  background: var(--surface);
}


.parent-admin-summary > div {
  padding: 13px 15px;

  border-right:
    1px solid var(--line);
}


.parent-admin-summary > div:last-child {
  border-right: 0;
}


.parent-admin-summary strong {
  display: block;

  color: var(--ink);

  font-size: 20px;
  font-weight: 600;
}


.parent-admin-summary span {
  display: block;

  margin-top: 3px;

  color: var(--ink-faint);

  font-size: 9px;

  text-transform: uppercase;
  letter-spacing: .045em;
}


/* Toolbar */

.parent-admin-toolbar {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;
}


.parent-admin-toolbar > input {
  width: min(380px, 100%);
  height: 35px;

  padding: 0 10px;

  border:
    1px solid var(--line-strong);

  border-radius: 7px;

  outline: none;

  background: var(--surface);
  color: var(--ink);

  font: inherit;
  font-size: 11px;
}


.parent-admin-toolbar > input:focus {
  border-color: var(--accent);
}


.parent-admin-tabs {
  display: inline-flex;

  overflow: hidden;

  border:
    1px solid var(--line-strong);

  border-radius: 7px;
}


.parent-admin-tabs button {
  min-height: 33px;

  padding: 0 12px;

  border: 0;
  border-right:
    1px solid var(--line-strong);

  background: transparent;

  color: var(--ink-faint);

  font: inherit;
  font-size: 10px;

  cursor: pointer;
}


.parent-admin-tabs button:last-child {
  border-right: 0;
}


.parent-admin-tabs button.is-active {
  background: var(--accent-soft);
  color: var(--accent);
}


.parent-admin-save-message {
  min-height: 14px;

  color: var(--positive);

  font-size: 10px;

  text-align: right;
}


/* Parent grid */

.parent-admin-content {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 12px;

  align-items: start;
}


/* Parent group */

.parent-group-card {
  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background: var(--surface);
}


.parent-group-top {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    auto;

  align-items: center;

  gap: 8px;

  min-height: 48px;

  padding: 8px 11px;

  border-bottom:
    1px solid var(--line);
}


.parent-group-name-input {
  width: 100%;
  min-width: 0;

  height: 31px;

  padding: 0 8px;

  border:
    1px solid transparent;

  border-radius: 6px;

  background: transparent;

  color: var(--ink);

  font: inherit;

  font-size: 13px;
  font-weight: 600;
}


.parent-group-name-input:hover,
.parent-group-name-input:focus {
  border-color:
    var(--line-strong);

  background:
    var(--surface-sunk);

  outline: none;
}


.parent-group-count {
  color: var(--ink-faint);

  font-size: 9px;

  white-space: nowrap;
}


.parent-group-top button {
  min-height: 29px;

  padding: 0 8px;

  border:
    1px solid var(--line-strong);

  border-radius: 6px;

  background: transparent;

  color: var(--ink-soft);

  font: inherit;
  font-size: 9px;

  cursor: pointer;
}


/* Parent members */

.parent-group-members {
  display: flex;
  flex-direction: column;
}


.parent-member-row {
  display: grid;

  grid-template-columns:
    52px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 8px;

  min-height: 39px;

  padding: 5px 11px;

  border-bottom:
    1px solid var(--line);
}


.parent-member-row strong {
  overflow: hidden;

  color: var(--ink);

  font-size: 10px;
  font-weight: 500;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.parent-member-row button {
  min-height: 27px;

  padding: 0 7px;

  border:
    1px solid transparent;

  border-radius: 5px;

  background: transparent;

  color: var(--ink-faint);

  font: inherit;
  font-size: 9px;

  cursor: pointer;
}


.parent-member-row button:hover {
  border-color:
    var(--line-strong);

  color: var(--ink);
}


/* Platform badge */

.parent-platform {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-width: 47px;

  padding: 3px 5px;

  border-radius: 5px;

  font-size: 8px;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: .05em;
}


.parent-platform.is-bragg {
  background: var(--surface-sunk);
  color: var(--ink-soft);
}


.parent-platform.is-relax {
  background: var(--accent-soft);
  color: var(--accent);
}


/* Add operator */

.parent-add-row {
  display: flex;

  gap: 6px;

  padding: 8px 11px;

  background:
    var(--surface-sunk);
}


.parent-add-row select {
  flex: 1;

  min-width: 0;
  height: 30px;

  padding: 0 7px;

  border:
    1px solid var(--line-strong);

  border-radius: 6px;

  background: var(--surface);

  color: var(--ink);

  font: inherit;
  font-size: 9px;
}


.parent-add-row button {
  min-height: 30px;

  padding: 0 9px;

  border:
    1px solid var(--accent);

  border-radius: 6px;

  background: var(--accent-soft);

  color: var(--accent);

  font: inherit;
  font-size: 9px;

  cursor: pointer;
}


/* Unmapped */

.unmapped-parent-row {
  grid-column: 1 / -1;

  display: grid;

  grid-template-columns:
    minmax(180px, .8fr)
    minmax(180px, .8fr)
    minmax(420px, 2fr);

  align-items: center;

  gap: 12px;

  padding: 10px 12px;

  border:
    1px solid var(--line);

  border-radius: 8px;

  background: var(--surface);
}


.unmapped-parent-raw {
  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 0;
}


.unmapped-parent-raw strong {
  overflow: hidden;

  color: var(--ink);

  font-size: 11px;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.unmapped-parent-suggestion strong {
  display: block;

  color: var(--ink);

  font-size: 10px;
  font-weight: 500;
}


.unmapped-parent-suggestion span {
  display: block;

  margin-top: 2px;

  color: var(--ink-faint);

  font-size: 9px;
}


.unmapped-parent-controls {
  display: grid;

  grid-template-columns:
    minmax(130px, 1fr)
    auto
    minmax(130px, 1fr)
    auto;

  gap: 6px;
}


.unmapped-parent-controls select,
.unmapped-parent-controls input {
  min-width: 0;
  height: 30px;

  padding: 0 7px;

  border:
    1px solid var(--line-strong);

  border-radius: 6px;

  outline: none;

  background: var(--surface-sunk);

  color: var(--ink);

  font: inherit;
  font-size: 9px;
}


.unmapped-parent-controls button {
  min-height: 30px;

  padding: 0 8px;

  border:
    1px solid var(--line-strong);

  border-radius: 6px;

  background: transparent;

  color: var(--ink-soft);

  font: inherit;
  font-size: 9px;

  cursor: pointer;
}


.unmapped-parent-controls button.primary {
  border-color: var(--accent);

  background: var(--accent-soft);

  color: var(--accent);
}


.parent-admin-empty {
  grid-column: 1 / -1;

  padding: 40px;

  border:
    1px solid var(--line);

  border-radius: 9px;

  color: var(--ink-faint);

  font-size: 11px;

  text-align: center;
}


/* Mobile */

@media (max-width: 900px) {

  .parent-admin-content {
    grid-template-columns: 1fr;
  }


  .unmapped-parent-row {
    grid-column: auto;

    grid-template-columns: 1fr;
  }


  .unmapped-parent-controls {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }
}


@media (max-width: 760px) {

  .parent-admin-summary {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .parent-admin-summary > div:nth-child(2) {
    border-right: 0;
  }


  .parent-admin-summary > div:nth-child(-n+2) {
    border-bottom:
      1px solid var(--line);
  }


  .parent-admin-toolbar {
    align-items: stretch;

    flex-direction: column;
  }


  .parent-admin-toolbar > input {
    width: 100%;
  }


  .parent-admin-tabs {
    width: 100%;
  }


  .parent-admin-tabs button {
    flex: 1;
  }


  .parent-group-top {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }


  .parent-group-top button {
    grid-column: 1 / -1;
  }


  .unmapped-parent-controls {
    grid-template-columns: 1fr;
  }
}


/* ===========================================================================
   Operator drag drop admin V1
   ======================================================================== */

.operator-dnd-admin {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


/* Header */

.operator-dnd-header {
  padding: 16px 18px;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background:
    var(--surface);
}


.operator-dnd-header h2 {
  margin: 0;

  color:
    var(--ink);

  font-size: 18px;
  font-weight: 600;
}


.operator-dnd-header p {
  margin:
    5px 0 0;

  color:
    var(--ink-faint);

  font-size: 11px;

  line-height: 1.45;
}


/* Summary */

.operator-dnd-summary {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background:
    var(--surface);
}


.operator-dnd-summary > div {
  padding:
    13px 15px;

  border-right:
    1px solid var(--line);
}


.operator-dnd-summary > div:last-child {
  border-right: 0;
}


.operator-dnd-summary strong {
  display: block;

  color:
    var(--ink);

  font-size: 20px;

  font-weight: 600;
}


.operator-dnd-summary span {
  display: block;

  margin-top: 3px;

  color:
    var(--ink-faint);

  font-size: 9px;

  text-transform:
    uppercase;

  letter-spacing:
    .045em;
}


/* Toolbar */

.operator-dnd-toolbar {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 12px;
}


.operator-dnd-toolbar input {
  width:
    min(420px, 100%);

  height: 35px;

  padding:
    0 10px;

  border:
    1px solid var(--line-strong);

  border-radius: 7px;

  outline: none;

  background:
    var(--surface);

  color:
    var(--ink);

  font: inherit;

  font-size: 11px;
}


.operator-dnd-toolbar input:focus {
  border-color:
    var(--accent);
}


.operator-dnd-help {
  color:
    var(--ink-faint);

  font-size: 10px;
}


/* Save + undo */

.operator-dnd-save-status {
  min-height: 13px;

  color:
    var(--positive);

  font-size: 10px;

  text-align: right;
}


.operator-dnd-toast {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 12px;

  padding:
    8px 10px;

  border:
    1px solid var(--line-strong);

  border-radius: 7px;

  background:
    var(--surface-sunk);

  color:
    var(--ink-soft);

  font-size: 10px;
}


.operator-dnd-toast[hidden] {
  display: none;
}


.operator-dnd-toast button {
  min-height: 28px;

  padding:
    0 9px;

  border:
    1px solid var(--accent);

  border-radius: 5px;

  background:
    var(--accent-soft);

  color:
    var(--accent);

  font: inherit;

  font-size: 9px;

  cursor: pointer;
}


/* Main two-column layout */

.operator-dnd-layout {
  display: grid;

  grid-template-columns:
    minmax(0, 2fr)
    minmax(300px, .85fr);

  align-items: start;

  gap: 14px;
}


.operator-dnd-parents,
.operator-dnd-unmapped {
  display: flex;

  flex-direction: column;

  gap: 10px;

  min-width: 0;
}


.operator-dnd-unmapped {
  padding: 0;

  border-radius: 9px;

  transition:
    background 120ms ease,
    outline-color 120ms ease;
}


.operator-dnd-column-head {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 10px;

  min-height: 45px;

  padding:
    8px 11px;

  border:
    1px solid var(--line);

  border-radius: 8px;

  background:
    var(--surface-sunk);
}


.operator-dnd-column-head strong {
  display: block;

  color:
    var(--ink);

  font-size: 11px;
}


.operator-dnd-column-head span {
  display: block;

  margin-top: 2px;

  color:
    var(--ink-faint);

  font-size: 9px;
}


.operator-dnd-column-head b {
  color:
    var(--ink-soft);

  font-size: 12px;
}


/* Parent card */

.operator-dnd-parent {
  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background:
    var(--surface);

  transition:
    border-color 100ms ease,
    background 100ms ease,
    transform 100ms ease;
}


.operator-dnd-parent.is-drop-target {
  border-color:
    var(--accent);

  background:
    color-mix(
      in srgb,
      var(--accent) 5%,
      var(--surface)
    );
}


.operator-dnd-parent-head {
  display: grid;

  grid-template-columns:
    28px
    minmax(0, 1fr)
    auto
    auto;

  align-items: center;

  gap: 7px;

  min-height: 48px;

  padding:
    7px 10px;

  border-bottom:
    1px solid var(--line);

  background:
    var(--surface-sunk);
}


.operator-dnd-parent-handle,
.operator-dnd-member-handle {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 26px;
  min-height: 28px;

  padding: 0;

  border: 0;

  background: transparent;

  color:
    var(--ink-faint);

  font-size: 14px;

  cursor: grab;

  user-select: none;
}


.operator-dnd-parent-handle:active,
.operator-dnd-member-handle:active {
  cursor: grabbing;
}


.operator-dnd-parent-name {
  width: 100%;

  min-width: 0;

  height: 31px;

  padding:
    0 7px;

  border:
    1px solid transparent;

  border-radius: 6px;

  outline: none;

  background:
    transparent;

  color:
    var(--ink);

  font: inherit;

  font-size: 13px;

  font-weight: 600;
}


.operator-dnd-parent-name:hover,
.operator-dnd-parent-name:focus {
  border-color:
    var(--line-strong);

  background:
    var(--surface);
}


.operator-dnd-count {
  color:
    var(--ink-faint);

  font-size: 9px;

  white-space: nowrap;
}


.operator-dnd-rename {
  min-height: 29px;

  padding:
    0 8px;

  border:
    1px solid var(--line-strong);

  border-radius: 5px;

  background:
    transparent;

  color:
    var(--ink-soft);

  font: inherit;

  font-size: 9px;

  cursor: pointer;
}


/* Members */

.operator-dnd-members {
  display: flex;

  flex-direction: column;
}


.operator-dnd-member {
  display: grid;

  grid-template-columns:
    27px
    49px
    minmax(0, 1fr)
    120px;

  align-items: center;

  gap: 7px;

  min-height: 42px;

  padding:
    5px 10px;

  border-bottom:
    1px solid var(--line);
}


.operator-dnd-member strong {
  min-width: 0;

  overflow: hidden;

  color:
    var(--ink);

  font-size: 10px;

  font-weight: 500;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}


.operator-dnd-platform {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 46px;

  padding:
    3px 5px;

  border-radius: 5px;

  font-size: 8px;

  font-weight: 600;

  text-transform:
    uppercase;

  letter-spacing:
    .05em;
}


.operator-dnd-platform.is-bragg {
  background:
    var(--surface-sunk);

  color:
    var(--ink-soft);
}


.operator-dnd-platform.is-relax {
  background:
    var(--accent-soft);

  color:
    var(--accent);
}


.operator-dnd-move-select {
  width: 100%;

  min-width: 0;

  height: 29px;

  padding:
    0 6px;

  border:
    1px solid var(--line-strong);

  border-radius: 5px;

  background:
    var(--surface);

  color:
    var(--ink-soft);

  font: inherit;

  font-size: 9px;
}


/* Add row */

.operator-dnd-add {
  display: flex;

  gap: 6px;

  padding:
    8px 10px;
}


.operator-dnd-add select {
  flex: 1;

  min-width: 0;

  height: 30px;

  padding:
    0 7px;

  border:
    1px solid var(--line-strong);

  border-radius: 5px;

  background:
    var(--surface);

  color:
    var(--ink-soft);

  font: inherit;

  font-size: 9px;
}


.operator-dnd-add button {
  min-height: 30px;

  padding:
    0 9px;

  border:
    1px solid var(--accent);

  border-radius: 5px;

  background:
    var(--accent-soft);

  color:
    var(--accent);

  font: inherit;

  font-size: 9px;

  cursor: pointer;
}


/* Unmapped */

.operator-dnd-unmapped.is-drop-target {
  outline:
    2px dashed var(--accent);

  outline-offset: 4px;

  background:
    color-mix(
      in srgb,
      var(--accent) 4%,
      transparent
    );
}


.operator-dnd-unmapped-item {
  display: grid;

  grid-template-columns:
    27px
    49px
    minmax(0, 1fr);

  align-items: center;

  gap: 7px;

  padding:
    8px 9px;

  border:
    1px solid var(--line);

  border-radius: 7px;

  background:
    var(--surface);
}


.operator-dnd-unmapped-text {
  min-width: 0;
}


.operator-dnd-unmapped-text strong {
  display: block;

  overflow: hidden;

  color:
    var(--ink);

  font-size: 10px;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}


.operator-dnd-unmapped-text small {
  display: block;

  margin-top: 2px;

  overflow: hidden;

  color:
    var(--ink-faint);

  font-size: 8px;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}


.operator-dnd-unmapped-controls {
  grid-column:
    1 / -1;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto;

  gap: 5px;
}


.operator-dnd-unmapped-controls select,
.operator-dnd-unmapped-controls input {
  min-width: 0;

  height: 29px;

  padding:
    0 6px;

  border:
    1px solid var(--line-strong);

  border-radius: 5px;

  background:
    var(--surface-sunk);

  color:
    var(--ink);

  font: inherit;

  font-size: 9px;
}


.operator-dnd-unmapped-controls button {
  min-height: 29px;

  padding:
    0 7px;

  border:
    1px solid var(--line-strong);

  border-radius: 5px;

  background:
    transparent;

  color:
    var(--ink-soft);

  font: inherit;

  font-size: 9px;

  cursor: pointer;
}


.operator-dnd-unmapped-controls button.primary {
  border-color:
    var(--accent);

  background:
    var(--accent-soft);

  color:
    var(--accent);
}


/* Empty */

.operator-dnd-empty {
  padding: 28px;

  border:
    1px dashed var(--line-strong);

  border-radius: 8px;

  color:
    var(--ink-faint);

  font-size: 10px;

  text-align: center;
}


/* Drag state */

.operator-is-dragging
.operator-dnd-parent,
.operator-is-dragging
.operator-dnd-unmapped {
  transition:
    border-color 80ms ease,
    background 80ms ease;
}


/* Tablet */

@media (max-width: 1050px) {

  .operator-dnd-layout {
    grid-template-columns:
      minmax(0, 1.5fr)
      minmax(280px, 1fr);
  }

}


/* Mobile */

@media (max-width: 760px) {

  .operator-dnd-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .operator-dnd-summary > div:nth-child(2) {
    border-right: 0;
  }


  .operator-dnd-summary > div:nth-child(-n+2) {
    border-bottom:
      1px solid var(--line);
  }


  .operator-dnd-toolbar {
    align-items: stretch;

    flex-direction: column;
  }


  .operator-dnd-toolbar input {
    width: 100%;
  }


  .operator-dnd-layout {
    grid-template-columns: 1fr;
  }


  .operator-dnd-unmapped {
    order: -1;
  }


  .operator-dnd-parent-head {
    grid-template-columns:
      28px
      minmax(0, 1fr)
      auto;
  }


  .operator-dnd-rename {
    grid-column:
      2 / -1;

    justify-self: start;
  }


  .operator-dnd-member {
    grid-template-columns:
      27px
      49px
      minmax(0, 1fr);
  }


  .operator-dnd-move-select {
    grid-column:
      2 / -1;

    width: 100%;

    min-height: 36px;

    font-size: 16px;
  }


  .operator-dnd-add {
    flex-direction: column;
  }


  .operator-dnd-add select,
  .operator-dnd-add button,
  .operator-dnd-unmapped-controls select,
  .operator-dnd-unmapped-controls input,
  .operator-dnd-unmapped-controls button {
    min-height: 40px;

    font-size: 16px;
  }


  /* Native drag support varies on mobile browsers,
     so Move to… remains the primary touch fallback. */

  .operator-dnd-help::after {
    content:
      ' Dragging works best on desktop; use Move to… on mobile.';
  }

}


/* ===========================================================================
   Operator parent board V1
   ======================================================================== */

.operator-parent-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}


/* Header */

.parent-board-header {
  padding: 16px 18px;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background:
    var(--surface);
}


.parent-board-header h2 {
  margin: 0;

  color:
    var(--ink);

  font-size: 18px;
  font-weight: 600;
}


.parent-board-header p {
  margin:
    5px 0 0;

  color:
    var(--ink-faint);

  font-size: 11px;

  line-height: 1.45;
}


/* Summary */

.parent-board-summary {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background:
    var(--surface);
}


.parent-board-summary > div {
  padding:
    13px 15px;

  border-right:
    1px solid var(--line);
}


.parent-board-summary > div:last-child {
  border-right: 0;
}


.parent-board-summary strong {
  display: block;

  color:
    var(--ink);

  font-size: 20px;
  font-weight: 600;
}


.parent-board-summary span {
  display: block;

  margin-top: 3px;

  color:
    var(--ink-faint);

  font-size: 9px;

  text-transform: uppercase;

  letter-spacing: .045em;
}


/* Toolbar */

.parent-board-toolbar {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 12px;
}


.parent-board-toolbar input {
  width:
    min(420px, 100%);

  height: 35px;

  padding:
    0 10px;

  border:
    1px solid var(--line-strong);

  border-radius: 7px;

  outline: none;

  background:
    var(--surface);

  color:
    var(--ink);

  font: inherit;

  font-size: 11px;
}


.parent-board-toolbar input:focus {
  border-color:
    var(--accent);
}


.parent-board-toolbar span {
  color:
    var(--ink-faint);

  font-size: 10px;
}


/* Grid */

.parent-board-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  align-items: start;

  gap: 12px;
}


/* Card */

.parent-board-card {
  overflow: hidden;

  border:
    1px solid var(--line);

  border-radius: 9px;

  background:
    var(--surface);

  cursor: default;

  transition:
    border-color 100ms ease,
    background 100ms ease,
    opacity 100ms ease,
    transform 100ms ease;
}


.parent-board-card.is-being-dragged {
  opacity: .38;
}


.parent-board-card.is-drop-target {
  border-color:
    var(--accent);

  background:
    color-mix(
      in srgb,
      var(--accent) 7%,
      var(--surface)
    );

  transform:
    translateY(-1px);
}


/* Parent header */

.parent-board-card-head {
  display: grid;

  grid-template-columns:
    24px
    minmax(0, 1fr)
    auto
    auto;

  align-items: center;

  gap: 7px;

  min-height: 47px;

  padding:
    7px 10px;

  border-bottom:
    1px solid var(--line);

  background:
    var(--surface-sunk);
}


.parent-board-drag-icon,
.parent-board-row-drag {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  width: 23px;
  min-height: 30px;

  color:
    var(--ink-faint);

  font-size: 13px;

  user-select: none;

  cursor: grab;
}


.parent-board-drag-icon:hover,
.parent-board-row-drag:hover {
  color:
    var(--ink);
}


.parent-board-drag-icon:active,
.parent-board-row-drag:active {
  cursor: grabbing;
}


.parent-board-parent-name {
  width: 100%;

  min-width: 0;

  height: 31px;

  padding:
    0 7px;

  border:
    1px solid transparent;

  border-radius: 6px;

  outline: none;

  background:
    transparent;

  color:
    var(--ink);

  font: inherit;

  font-size: 13px;

  font-weight: 600;

  cursor: text;
}


.parent-board-parent-name:hover,
.parent-board-parent-name:focus {
  border-color:
    var(--line-strong);

  background:
    var(--surface);
}


.parent-board-count {
  color:
    var(--ink-faint);

  font-size: 9px;

  white-space: nowrap;
}


.parent-board-card-head button {
  min-height: 29px;

  padding:
    0 8px;

  border:
    1px solid var(--line-strong);

  border-radius: 5px;

  background:
    transparent;

  color:
    var(--ink-soft);

  font: inherit;

  font-size: 9px;

  cursor: pointer;
}


/* Member rows */

.parent-board-members {
  display: flex;
  flex-direction: column;
}


.parent-board-member {
  display: grid;

  grid-template-columns:
    23px
    49px
    minmax(0, 1fr)
    130px;

  align-items: center;

  gap: 7px;

  min-height: 42px;

  padding:
    5px 10px;

  border-bottom:
    1px solid var(--line);

  cursor: default;
}


.parent-board-member:last-child {
  border-bottom: 0;
}


.parent-board-member.is-being-dragged {
  opacity: .35;
}


.parent-board-member strong {
  min-width: 0;

  overflow: hidden;

  color:
    var(--ink);

  font-size: 10px;

  font-weight: 500;

  text-overflow: ellipsis;

  white-space: nowrap;
}


/* Platform */

.parent-board-platform {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 46px;

  padding:
    3px 5px;

  border-radius: 5px;

  font-size: 8px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: .05em;
}


.parent-board-platform.is-bragg {
  background:
    var(--surface-sunk);

  color:
    var(--ink-soft);
}


.parent-board-platform.is-relax {
  background:
    var(--accent-soft);

  color:
    var(--accent);
}


/* Move dropdown */

.parent-board-move {
  width: 100%;

  min-width: 0;

  height: 29px;

  padding:
    0 6px;

  border:
    1px solid var(--line-strong);

  border-radius: 5px;

  background:
    var(--surface);

  color:
    var(--ink-soft);

  font: inherit;

  font-size: 9px;

  cursor: pointer;
}


/* Undo */

.parent-board-toast {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  gap: 10px;

  padding:
    8px 10px;

  border:
    1px solid var(--line-strong);

  border-radius: 7px;

  background:
    var(--surface-sunk);

  color:
    var(--ink-soft);

  font-size: 10px;
}


.parent-board-toast[hidden] {
  display: none;
}


.parent-board-toast button {
  min-height: 28px;

  padding:
    0 9px;

  border:
    1px solid var(--accent);

  border-radius: 5px;

  background:
    var(--accent-soft);

  color:
    var(--accent);

  font: inherit;

  font-size: 9px;

  cursor: pointer;
}


/* Empty */

.parent-board-empty {
  grid-column:
    1 / -1;

  padding: 35px;

  border:
    1px dashed var(--line-strong);

  border-radius: 9px;

  color:
    var(--ink-faint);

  font-size: 10px;

  text-align: center;
}


/* Game mapping: parent-level launch dates */

.game-board-date-row {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 7px;

  padding: 8px 10px;

  border-bottom:
    1px solid var(--line);

  background:
    var(--surface-sunk);
}


.game-board-date-field {
  display: flex;

  flex-direction: column;

  gap: 3px;

  font-size: 8px;

  color:
    var(--ink-faint);

  text-transform: uppercase;

  letter-spacing: .05em;
}


.game-board-date-field input {
  height: 27px;

  padding: 0 6px;

  border:
    1px solid var(--line-strong);

  border-radius: 5px;

  background:
    var(--surface);

  color:
    var(--ink);

  font: inherit;

  font-size: 9px;

  text-transform: none;

  letter-spacing: normal;
}


/* Game mapping: per-variant row (drag · name · spins · RTP · move) */

.parent-board-member.game-board-member {
  grid-template-columns:
    23px
    minmax(0, 1fr)
    90px
    64px
    130px;
}


.game-board-meta {
  overflow: hidden;

  color:
    var(--ink-faint);

  font-size: 8px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.game-board-rtp {
  width: 100%;

  height: 29px;

  padding: 0 6px;

  border:
    1px solid var(--line-strong);

  border-radius: 5px;

  background:
    var(--surface);

  color:
    var(--ink-soft);

  font: inherit;

  font-size: 9px;
}


/* Game mapping: two-column split — groups (collapsed by default) on the
   left, ungrouped variants on the right, so filing one never requires
   scrolling to find its destination. */

.game-board-split {
  display: grid;

  grid-template-columns: 1.3fr 1fr;

  align-items: start;

  gap: 16px;
}


.game-board-column h3 {
  margin: 0 0 8px;

  color:
    var(--ink-faint);

  font-size: 9px;

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: .06em;
}


.game-board-groups,
.game-board-ungrouped {
  display: flex;

  flex-direction: column;

  gap: 10px;
}


/* `top` and `max-height` are set inline (game-admin.js) from the topbar's
   actual rendered height, since it wraps to two lines on narrower widths. */

.game-board-column--sticky {
  position: sticky;

  overflow-y: auto;
}


/* Expand/collapse toggle in the card head */

.game-board-toggle {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 22px;

  height: 22px;

  border:
    1px solid var(--line-strong);

  border-radius: 5px;

  background:
    var(--surface);

  color:
    var(--ink-soft);

  font-size: 10px;

  cursor: pointer;
}


.game-board-toggle:hover {
  color:
    var(--ink);
}


.parent-board-card-head.game-board-card-head {
  grid-template-columns:
    24px
    minmax(0, 1fr)
    auto
    22px
    auto;
}


/* Ungrouped row: two lines, not one cramped row — the name needs room to
   read in a column this narrow. Top line: drag · name · spins. Bottom
   line: RTP · move · new-group form, wrapping onto further lines itself
   if the column is especially narrow. */

.game-board-ungrouped-row {
  display: flex;

  flex-direction: column;

  gap: 6px;

  padding: 8px 10px;

  border:
    1px solid var(--line);

  border-radius: 7px;

  background:
    var(--surface);
}


.game-board-ungrouped-row.is-being-dragged {
  opacity: .35;
}


.game-board-ungrouped-row-top {
  display: flex;

  align-items: center;

  gap: 8px;
}


.game-board-ungrouped-row-top strong {
  flex: 1;

  min-width: 0;

  overflow: hidden;

  color:
    var(--ink);

  font-size: 11px;

  font-weight: 500;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.game-board-ungrouped-row-bottom {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;
}


.game-board-ungrouped-row-bottom .game-board-rtp {
  width: 72px;

  flex: none;
}


.game-board-ungrouped-row-bottom .parent-board-move {
  width: 120px;

  flex: none;
}


.game-board-ungrouped-row-bottom .game-board-new-group {
  flex: 1;

  min-width: 170px;
}


.game-board-new-group {
  display: flex;

  gap: 5px;
}


/* Its own line, full width. Most ungrouped variants have no sibling, so this
   is the usual answer rather than an afterthought beside the group controls. */
.game-board-keep-own {
  flex-basis: 100%;

  margin-top: 2px;

  text-align: left;

  font-size: 11px;
}


.game-board-new-group-name {
  width: 100%;

  min-width: 0;

  height: 29px;

  padding: 0 6px;

  border:
    1px solid var(--line-strong);

  border-radius: 5px;

  background:
    var(--surface);

  color:
    var(--ink-soft);

  font: inherit;

  font-size: 9px;
}


.game-board-new-group button {
  height: 29px;

  padding: 0 9px;

  border:
    1px solid var(--line-strong);

  border-radius: 5px;

  background:
    var(--surface-sunk);

  color:
    var(--ink-soft);

  font: inherit;

  font-size: 9px;

  cursor: pointer;

  white-space: nowrap;
}


/* Tablet: stack the two columns. Sticky only makes sense side-by-side —
   stacked, the ungrouped column sits below a groups list of unknown
   length, so pinning it would only kick in after scrolling past all of
   it, which isn't useful here. */

@media (max-width: 950px) {
  .game-board-split {
    grid-template-columns: 1fr;
  }

  .game-board-column--sticky {
    position: static;
    top: auto !important;
    max-height: none !important;
    overflow-y: visible;
  }
}


/* Dragging state */

/* Subtle edge affordance for the auto-scroll zone — only appears mid-drag,
   and only hints at it rather than fighting for attention. */

body.parent-board-is-dragging::before,
body.parent-board-is-dragging::after {
  content: '';

  position: fixed;

  left: 0;
  right: 0;

  height: 90px;

  pointer-events: none;

  z-index: 999;
}


body.parent-board-is-dragging::before {
  top: 0;

  background: linear-gradient(to bottom, var(--accent-soft), transparent);
}


body.parent-board-is-dragging::after {
  bottom: 0;

  background: linear-gradient(to top, var(--accent-soft), transparent);
}


/* Tablet */

@media (max-width: 950px) {

  .parent-board-grid {
    grid-template-columns: 1fr;
  }

}


/* Mobile */

@media (max-width: 760px) {

  .parent-board-summary {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .parent-board-summary > div:nth-child(2) {
    border-right: 0;
  }


  .parent-board-summary > div:nth-child(-n+2) {
    border-bottom:
      1px solid var(--line);
  }


  .parent-board-toolbar {
    align-items: stretch;

    flex-direction: column;
  }


  .parent-board-toolbar input {
    width: 100%;
  }


  .parent-board-card {
    cursor: default;
  }


  .parent-board-member {
    grid-template-columns:
      23px
      49px
      minmax(0, 1fr);
  }


  .parent-board-move {
    grid-column:
      2 / -1;

    min-height: 40px;

    font-size: 16px;
  }


  .parent-board-parent-name {
    font-size: 16px;
  }

}


/* ===========================================================================
   Parent/operator text selection fix
   ======================================================================== */

/*
 * Cards and rows are normal selectable content.
 * Only the left ⋮⋮ handles can initiate dragging.
 */

.parent-board-card,
.parent-board-card-head,
.parent-board-member {
  user-select: text;
}


.parent-board-parent-name {
  user-select: text;
  cursor: text;
}


.parent-board-member strong {
  user-select: text;
  cursor: text;
}


.parent-board-drag-icon,
.parent-board-row-drag {
  user-select: none;
  -webkit-user-drag: element;
}



/* ===========================================================================
   Fast operator drag UI V1
   ======================================================================== */


/* Parent card must establish positioning context for save badge */

.parent-board-card {
  position: relative;
}


/* ---------------------------------------------------------------------------
   Saving state
   ------------------------------------------------------------------------ */

.parent-board-card.is-saving {
  border-color:
    var(--accent);
}


.parent-board-loading {
  position: absolute;

  z-index: 20;

  top: 8px;
  right: 8px;

  display: inline-flex;

  align-items: center;

  gap: 6px;

  min-height: 28px;

  padding:
    0 8px;

  border:
    1px solid var(--line-strong);

  border-radius: 6px;

  background:
    var(--surface);

  color:
    var(--ink-soft);

  font-size: 9px;

  pointer-events: none;
}


.parent-board-spinner {
  width: 13px;
  height: 13px;

  border:
    2px solid var(--line-strong);

  border-top-color:
    var(--accent);

  border-radius: 50%;

  animation:
    parent-board-spin
    .65s
    linear
    infinite;
}


@keyframes parent-board-spin {

  to {
    transform:
      rotate(360deg);
  }

}


/* ---------------------------------------------------------------------------
   Lightweight drag preview
   ------------------------------------------------------------------------ */

.parent-board-drag-ghost {
  position: fixed;

  z-index: 99999;

  left: -10000px;
  top: -10000px;

  display: grid;

  grid-template-columns:
    24px
    minmax(0, 1fr);

  align-items: center;

  gap: 8px;

  width: 300px;

  min-height: 48px;

  padding:
    8px 11px;

  border:
    1px solid var(--accent);

  border-radius: 8px;

  background:
    var(--surface);

  color:
    var(--ink);

  pointer-events: none;
}


.parent-board-drag-ghost > span {
  color:
    var(--ink-faint);

  font-size: 14px;
}


.parent-board-drag-ghost strong {
  display: block;

  overflow: hidden;

  font-size: 11px;

  font-weight: 600;

  text-overflow:
    ellipsis;

  white-space: nowrap;
}


.parent-board-drag-ghost small {
  display: block;

  margin-top: 2px;

  color:
    var(--ink-faint);

  font-size: 9px;
}


.parent-board-drag-ghost.is-operator {
  width: 260px;

  min-height: 42px;
}


/* Avoid animation work for users requesting reduced motion */

@media (prefers-reduced-motion: reduce) {

  .parent-board-spinner {
    animation-duration:
      1.4s;
  }

}

/* ---- Endpoints: which game servers count as production -------------------- */
.api-admin { display: grid; gap: 20px; }
.api-admin__intro { max-width: 78ch; display: grid; gap: 10px; }
.api-admin__intro h2 { margin: 0; font-size: 17px; font-weight: 600; }
.api-admin__intro p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.api-admin__default { padding: 14px 16px; background: var(--surface-sunk); border-radius: var(--radius-sm); display: grid; gap: 6px; }
.api-admin__default label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; cursor: pointer; }
.api-admin__hint { font-size: 11.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.api-admin__bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 0; background: var(--surface); border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); }
.api-admin__actions { display: flex; align-items: center; gap: 12px; }
.api-admin__pending { font-size: 11.5px; color: var(--ink); }
.api-admin__group { margin-top: 4px; }
.api-admin__group-head { padding: 14px 0 8px; }
.api-admin__group-head h3 { margin: 0; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.api-admin__group-head h3 span { color: var(--ink-soft); margin-left: 6px; }
.api-admin__group-head p { margin: 5px 0 0; font-size: 11.5px; color: var(--ink-soft); }
.api-admin__group.is-unreviewed .api-admin__group-head h3 { color: var(--series-2); }
.api-admin__group.is-unreviewed .api-admin__row { background: color-mix(in srgb, var(--series-2) 6%, transparent); }
.api-admin__row { display: grid; grid-template-columns: minmax(200px, 2fr) minmax(200px, 1.4fr) auto 96px; gap: 16px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); border-radius: 4px; }
.api-admin__row.is-changed { box-shadow: inset 2px 0 0 var(--accent); }
.api-admin__name { min-width: 0; display: grid; gap: 3px; }
.api-admin__name strong { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-admin__name small { font-size: 10.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.api-admin__figures { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.api-admin__figures b { color: var(--ink); font-weight: 500; }
.api-admin__effect { font-size: 11px; color: var(--ink-faint); text-align: right; }
@media (max-width: 900px) {
  .api-admin__row { grid-template-columns: 1fr auto; }
  .api-admin__figures, .api-admin__effect { grid-column: 1 / -1; }
  .api-admin__effect { text-align: left; }
}

/* Stake pull cadence. The two limit panels carry the reasoning that used to
   live only in the timer unit's comments, so they are part of the control
   rather than help text tucked away from it. */
.cadence { display: grid; gap: 20px; max-width: 900px; }
.cadence__intro { max-width: 78ch; display: grid; gap: 10px; }
.cadence__intro h2 { margin: 0; font-size: 17px; font-weight: 600; }
.cadence__intro p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.cadence__control { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px; background: var(--surface-sunk); border-radius: var(--radius-sm); }
.cadence__pick { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; }
.cadence__pick select { font: inherit; font-weight: 500; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.cadence__actions { display: flex; align-items: center; gap: 12px; }
.cadence__pending { font-size: 11.5px; color: var(--ink-soft); max-width: 40ch; }
.cadence__limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.cadence__limit { padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); border-left-width: 3px; }
.cadence__limit h3 { margin: 0 0 6px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.cadence__limit p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
.cadence__limit.is-ok { border-left-color: var(--positive); }
.cadence__limit.is-warn { border-left-color: var(--series-3); background: color-mix(in srgb, var(--series-3) 6%, transparent); }
.cadence__limit.is-warn h3 { color: var(--series-3); }
.cadence__limit.is-danger { border-left-color: var(--negative); background: color-mix(in srgb, var(--negative) 7%, transparent); }
.cadence__limit.is-danger h3 { color: var(--negative); }
.cadence__limit.is-fixed { border-left-color: var(--line-strong); }
.cadence__state h3 { margin: 0 0 8px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.cadence__game { display: grid; grid-template-columns: minmax(140px, 1fr) auto auto auto; gap: 16px; align-items: center; padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--ink-soft); }
.cadence__game strong { font-size: 13px; font-weight: 500; color: var(--ink); }
.cadence__game span { font-variant-numeric: tabular-nums; }
.cadence__note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ink-faint); }
@media (max-width: 700px) {
  .cadence__game { grid-template-columns: 1fr 1fr; }
}