* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  color: #fff;
  font: 15px/1.55 "Segoe UI Variable", "Segoe UI", sans-serif;
  background: radial-gradient(ellipse at 8% 0%, #21365c66, transparent 48%),
    radial-gradient(ellipse at 95% 35%, #24316a33, transparent 52%),
    linear-gradient(150deg, #0a1020, #080d18 65%, #0c1725);
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible {
  outline: 2px solid #82baff;
  outline-offset: 3px;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1440px;
  margin: auto;
  padding: 18px 24px 14px;
  border-bottom: 1px solid #293a5280;
}

.brand-logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border: 1px solid #52658266;
  border-radius: 11px;
  box-shadow: 0 5px 16px #0005;
}

.brand-name {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1.2px;
  line-height: 1.25;
}

.brand-name span {
  color: #fff;
  font-size: 15px;
  letter-spacing: 1.6px;
}

.local-badge {
  margin-left: auto;
  color: #fff;
  font-size: 13px;
}

body .app-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1440px;
  margin: 14px auto 0;
  padding: 0 24px;
}

body .app-tabs button {
  min-height: 44px;
  padding: 9px 18px;
  border: 1px solid #344761;
  border-radius: 10px;
  color: #fff;
  background: #101b2de8;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

body .app-tabs button[aria-pressed=true] {
  color: #fff;
  border-color: #639df5;
  background: linear-gradient(135deg, #286de6, #2451b9);
  box-shadow: inset 0 1px 0 #ffffff25, 0 4px 16px #1557c333;
}

#openfield-panel {
  max-width: 1440px;
  margin: 22px auto;
  padding: 0 24px;
  min-width: 0;
}

.field-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
  padding: 14px 18px;
  border: 1px solid #30415c;
  border-radius: 14px;
  background: linear-gradient(120deg, #15243be6, #10192be6);
  box-shadow: inset 0 1px 0 #ffffff08, 0 8px 24px #0003;
}

.eyebrow {
  margin: 0 0 5px;
  color: #94b8ed;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
}

.field-heading h1 {
  margin: 0;
  color: #fff;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.8px;
}

.field-intro {
  margin: 8px 0 0;
  color: #fff;
  font-size: 14px;
}

.snapshot-note {
  color: #fff;
  font-size: 13px;
  text-align: right;
}

.snapshot-note span {
  display: block;
  color: #fff;
}

.field-toolbar {
  display: flex;
  align-items: stretch;
  gap: 16px;
  margin-bottom: 18px;
}

.search-label,
#field-filters {
  border: 1px solid #30415c;
  border-radius: 14px;
  background: #101b2de6;
  box-shadow: inset 0 1px 0 #ffffff08, 0 8px 24px #0003;
}

.search-label {
  display: block;
  order: 2;
  flex: 1 1 320px;
  min-width: 0;
  padding: 10px 12px;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

.search-label input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin-top: 5px;
  padding: 9px 12px;
  border: 1px solid #354967;
  border-radius: 9px;
  background: #080f1e;
  color: #fff;
  font-size: 15px;
}

.search-label input::placeholder {
  color: #fff;
  opacity: 1;
}

#field-filters {
  display: flex;
  order: 1;
  flex: 0 1 auto;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px;
}

#field-filters button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 9px 13px;
  border: 1px solid #344863;
  border-radius: 9px;
  background: #0b1425;
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}

#field-filters button[aria-pressed=true] {
  color: #fff;
  border-color: #659ff6;
  background: linear-gradient(135deg, #286de6, #2451b9);
  box-shadow: inset 0 1px 0 #ffffff20, 0 3px 12px #1557c333;
}

.filter-icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
}

#field-count {
  margin: 16px 0 4px;
  color: #fff;
  font-size: 13px;
}

.board-hint {
  margin: 0 0 18px;
  color: #fff;
  font-size: 13px;
}

.tier-section {
  --band-accent: #8ba9db;
  --band-fill: linear-gradient(135deg, #405a85, #223453);
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
  min-width: 0;
  margin: 0 0 18px;
  padding: 12px;
  border: 1px solid #30415b;
  border-left: 3px solid var(--band-accent);
  border-radius: 16px;
  background: linear-gradient(120deg, #142139e8, #0c1424ed);
  box-shadow: inset 0 1px 0 #ffffff08, 0 12px 28px #0004;
}

.tier-section[data-tier="Z"] {
  --band-accent: #e25ac7;
  --band-fill: linear-gradient(140deg, #d83991, #8149d7 52%, #148ea9);
}

.tier-section[data-tier="S"] {
  --band-accent: #f46b58;
  --band-fill: linear-gradient(140deg, #c92d42, #e96921);
}

.tier-section[data-tier="A"] {
  --band-accent: #efba43;
  --band-fill: linear-gradient(140deg, #e89b19, #f0cb4f);
}

.tier-section[data-tier="B"] {
  --band-accent: #39bde4;
  --band-fill: linear-gradient(140deg, #089fb9, #315ed3);
}

.tier-section[data-tier="C"] {
  --band-accent: #37c79e;
  --band-fill: linear-gradient(140deg, #119e77, #07684f);
}

.tier-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 16px 8px;
  border: 1px solid #ffffff24;
  border-radius: 11px;
  background: var(--band-fill);
  color: #fff;
  text-align: center;
  box-shadow: inset 0 1px 0 #ffffff28, 0 5px 16px #0003;
}

.tier-header h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
  font-weight: 750;
  overflow-wrap: normal;
}

.tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 62px;
  color: inherit;
  font-size: 48px;
  line-height: 1;
  font-weight: 900;
  text-shadow: 0 3px 10px #0004;
}

.tier-header p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: inherit;
}

.tier-section[data-tier="A"] .tier-header {
  color: #231b09;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  min-width: 0;
}

.field-card {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 7px 7px 6px;
  border: 1px solid #34445f;
  border-radius: 11px;
  color: #fff;
  background: radial-gradient(ellipse at 50% 0%, #48628d24, transparent 72%),
    linear-gradient(155deg, #17253d, #0b1424 80%);
  text-align: center;
  box-shadow: inset 0 1px 0 #ffffff0d, 0 4px 10px #0005;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.field-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--band-accent), transparent);
  opacity: .65;
  pointer-events: none;
}

.pair-portraits {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 54px minmax(0, 1fr);
  grid-template-rows: 72px auto auto;
  align-items: end;
  column-gap: 0;
  row-gap: 2px;
  width: 100%;
  min-width: 0;
  margin: 0 auto;
}

.pair-portraits .commander {
  display: contents;
}

.pair-portraits .commander-portrait {
  display: block;
  grid-row: 1;
  width: 72px;
  height: 72px;
  margin: 0;
  object-fit: contain;
  filter: drop-shadow(0 5px 5px #0009);
}

.pair-portraits .commander:first-child .commander-portrait {
  grid-column: 2;
  position: relative;
  z-index: 1;
}

.pair-portraits .commander:last-child .commander-portrait {
  grid-column: 3;
  width: 54px;
  height: 54px;
}

.pair-portraits .commander .name {
  display: block;
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 17px;
  padding: 0;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  line-height: 17px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
}

.pair-portraits .commander:first-child .name {
  grid-row: 2;
}

.pair-portraits .commander:last-child .name {
  grid-row: 3;
  color: #fff;
  font-weight: 600;
}

.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #34445f80;
  font-size: 13px;
  line-height: 18px;
}

.troop-label {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  color: #fff;
  font-size: 13px;
}

.troop-label img {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.card-discover {
  color: #9cbfff;
  font-size: 13px;
}

#field-empty {
  padding: 26px 18px;
  border: 1px dashed #526683;
  border-radius: 14px;
  color: #fff;
  background: #111c2ccc;
  text-align: center;
}

.site-footer {
  max-width: 1440px;
  margin: 32px auto 22px;
  padding: 18px 24px 0;
  border-top: 1px solid #293a5280;
  color: #fff;
  font-size: 13px;
}

@media (min-width: 1100px) {
  .tier-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .tier-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .field-toolbar {
    flex-direction: column;
    gap: 12px;
  }

  .search-label {
    flex: auto;
  }

  #field-filters {
    flex: auto;
  }

  .tier-section {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }

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

@media (max-width: 700px) {
  .topbar {
    padding: 14px 14px 12px;
    gap: 10px;
  }

  .brand-name {
    font-size: 17px;
    letter-spacing: .7px;
  }

  .brand-name span {
    font-size: 13px;
    letter-spacing: .9px;
  }

  .local-badge {
    display: none;
  }

  body .app-tabs {
    padding: 0 14px;
  }

  #openfield-panel {
    margin-top: 18px;
    padding: 0 14px;
  }

  .field-heading {
    padding: 12px 14px;
  }

  .eyebrow {
    letter-spacing: .7px;
  }

  #field-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 10px;
  }

  #field-filters button {
    padding: 9px 6px;
    font-size: 14px;
  }

  .tier-section {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px;
    border-radius: 14px;
  }

  .tier-header {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 8px 12px;
    text-align: left;
  }

  .tier-badge {
    width: 40px;
    height: 40px;
    font-size: 34px;
  }

  .tier-header p {
    margin-left: auto;
  }

  .field-card {
    padding: 6px 7px;
  }

  .site-footer {
    padding-right: 14px;
    padding-left: 14px;
  }
}

@media (max-width: 520px) {
  .tier-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .snapshot-note {
    display: none;
  }
}

@media (hover: hover) {
  .field-card:hover {
    transform: translateY(-2px);
    border-color: var(--band-accent);
    box-shadow: inset 0 1px 0 #ffffff14, 0 7px 18px #0006;
  }

  .field-card:hover .card-discover {
    color: #d3e4ff;
  }

  body .app-tabs button:hover,
  #field-filters button:hover {
    border-color: #7aa7eb;
  }
}

.field-card:active {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}

body {
  background-color: #060a12;
  background-image: linear-gradient(rgba(6,10,18,.55),rgba(6,10,18,.70)),url('../assets/kingdom-valley.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* NO_VERDICT: unverified append-only draft. Parent must inspect and run browser,
 * regression and build checks. Existing board, routes and calendar own their state. */
#field-board-view.tier-extra-active > .field-heading,
#field-board-view.tier-extra-active > .field-toolbar,
#field-board-view.tier-extra-active > #field-board,
#field-board-view.tier-extra-active > #field-empty { display:none !important; }
#tier-extra-panel[hidden] { display:none !important; }
#tier-mode-nav,.tier-mode-filters,.tier-role-tabs { display:flex;flex-wrap:wrap;gap:8px; }
#tier-mode-nav { margin:18px 0 24px; }
#tier-mode-nav button,.tier-mode-filters button,.tier-role-tabs button {
 font:inherit;line-height:1.35;color:#fff;background:#171b21;border:1px solid #363c45;
 border-radius:8px;padding:10px 14px;min-height:44px;max-width:100%;white-space:normal;cursor:pointer;
 box-shadow:none;text-shadow:none;transition:background .15s,color .15s,border-color .15s;
}
#tier-mode-nav button[aria-pressed="true"],.tier-mode-filters button[aria-pressed="true"],.tier-role-tabs button[aria-pressed="true"] {
 color:#fff;background:#41464e;border-color:#737b86;box-shadow:none;text-shadow:none;
}
#tier-mode-nav button:hover,.tier-mode-filters button:hover,.tier-role-tabs button:hover {
 color:#fff !important;background:#41464e !important;border-color:#737b86;box-shadow:none;text-shadow:none;
}
#tier-mode-nav button:focus-visible,#tier-extra-panel button:focus-visible,#tier-mode-search:focus-visible {
 outline:2px solid #e5e7eb;outline-offset:3px;
}
#tier-extra-panel { min-width:0;font:inherit; }
.tier-mode-title { margin:0 0 20px;font-size:clamp(1.5rem,4vw,2.25rem); }
.tier-mode-toolbar { display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;margin-bottom:16px; }
.tier-mode-toolbar .search-label { display:flex;flex:1 1 240px;flex-direction:column;gap:8px;min-width:0; }
#tier-mode-search { box-sizing:border-box;width:100%;min-width:0;min-height:44px;font:inherit;color:#fff;background:#171b21;border:1px solid #414750;border-radius:8px;padding:11px 12px; }
.tier-mode-filters { flex:2 1 320px; }
.tier-role-tabs { margin:0 0 22px; }
/* Preserve the board's responsive tier-section grid: header first, one content
 * wrapper second. Role headers and grids never become direct tier grid items. */
#tier-extra-panel .tier-mode-groups { min-width:0; }
#tier-extra-panel .tier-mode-role { margin:12px 16px;font-size:.9rem;color:#fff;font-weight:600; }
/* Article baseline mirrors the board button without opting into its handlers. */
#tier-extra-panel .tier-mode-card {
 box-sizing:border-box;position:relative;isolation:isolate;display:block;width:100%;min-width:0;margin:0;
 padding:7px 7px 6px;border:1px solid var(--band-accent,#34445f);border-radius:11px;
 color:#fff;font:inherit;text-align:center;
 background:radial-gradient(ellipse at 50% 0%,#48628d24,transparent 72%),linear-gradient(155deg,#17253d,#0b1424 80%);
 background:radial-gradient(ellipse at 50% 0%,color-mix(in srgb,var(--band-accent,#48628d) 14%,transparent),transparent 72%),linear-gradient(155deg,#17253d,#0b1424 80%);
 box-shadow:inset 0 1px 0 #ffffff0d,0 4px 10px #0005;
 transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
#tier-extra-panel .tier-mode-card::before {
 content:"";position:absolute;top:0;left:14px;right:14px;height:1px;
 background:linear-gradient(90deg,transparent,var(--band-accent,#34445f),transparent);
 opacity:.65;pointer-events:none;
}
/* Retain board display:contents commanders, name rows, alignment and filters.
 * Only enlarge the existing asymmetric portrait tracks and overlap by 8px. */
#tier-extra-panel .tier-mode-card .pair-portraits {
 grid-template-columns:minmax(0,1fr) 88px 58px minmax(0,1fr);
 grid-template-rows:88px auto auto;
}
#tier-extra-panel .tier-mode-card .commander-portrait {
 width:88px;height:88px;border-radius:9px;
}
#tier-extra-panel .tier-mode-card .commander:last-child .commander-portrait {
 width:66px;height:66px;margin-left:-8px;border-radius:8px;
}
/* A lone commander matches both first/last-child: explicitly undo secondary
 * positioning, dimensions and the otherwise empty third name row. */
#tier-extra-panel .tier-mode-single .pair-portraits {
 grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);
 grid-template-rows:88px auto;
}
#tier-extra-panel .tier-mode-single .commander:only-child .commander-portrait {
 grid-column:2;grid-row:1;width:88px;height:88px;margin:0;border-radius:9px;
}
#tier-extra-panel .tier-mode-single .commander:only-child .name {
 grid-column:1 / -1;grid-row:2;color:#fff;font-weight:650;
}
#tier-extra-panel .tier-mode-card .card-foot {
 border-top-color:var(--band-accent,#34445f);
 border-top-color:color-mix(in srgb,var(--band-accent,#34445f) 50%,transparent);
}
.tier-mode-empty { padding:24px 0;color:#fff; }
@media(max-width:480px) {
 #tier-mode-nav { gap:6px; }
 #tier-mode-nav button { flex:1 1 calc(50% - 6px);padding:10px 8px;font-size:.85rem; }
 .tier-mode-filters button,.tier-role-tabs button { padding:9px 10px;font-size:.85rem; }
 #tier-extra-panel .tier-grid { grid-template-columns:minmax(0,1fr); }
}

/* NO_VERDICT: unverified append-only draft; parent review and execution required. */
#tier-extra-panel .field-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding:14px 18px;border:1px solid #30415c;border-radius:14px;background:linear-gradient(120deg,#15243be6,#10192be6);box-shadow:inset 0 1px 0 #ffffff08,0 8px 24px #0003}
#tier-extra-panel .eyebrow{margin:0 0 5px;color:#94b8ed;font-size:13px;font-weight:700;letter-spacing:1.4px}
#tier-extra-panel .field-heading h1{margin:0;color:#fff;font-size:clamp(28px,3vw,36px);line-height:1.2;font-weight:800;letter-spacing:-.8px}
#tier-extra-panel .field-toolbar.tier-mode-toolbar{display:flex;flex-direction:row;align-items:stretch;gap:16px;margin-bottom:18px}
#tier-extra-panel .search-label,#tier-extra-panel .tier-mode-filters{border:1px solid #30415c;border-radius:14px;background:#101b2de6;box-shadow:inset 0 1px 0 #ffffff08,0 8px 24px #0003}
#tier-extra-panel .search-label{display:block;order:2;flex:1 1 320px;min-width:0;padding:10px 12px;color:#fff;font-size:13px;font-weight:650}
#tier-extra-panel .search-label input{display:block;width:100%;min-width:0;min-height:44px;margin-top:5px;padding:9px 12px;border:1px solid #354967;border-radius:9px;background:#080f1e;color:#fff;font-size:15px}
#tier-extra-panel .search-label input::placeholder{color:#fff;opacity:1}
#tier-extra-panel .tier-mode-filters{display:flex;order:1;flex:0 1 auto;flex-wrap:wrap;align-content:center;align-items:center;gap:8px;min-width:0;padding:12px}
#tier-extra-panel .tier-mode-filters button{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;min-width:44px;padding:9px 13px;border:1px solid #344863;border-radius:9px;background:#0b1425;color:#fff;font-size:14px;font-weight:650;white-space:nowrap}
#tier-extra-panel .tier-mode-filters button[aria-pressed=true],#tier-extra-panel .tier-mode-filters button[aria-pressed=true]:hover{color:#fff;border-color:#737b86;background:#41464e;box-shadow:none}
#tier-extra-panel .filter-icon{width:24px;height:24px;object-fit:contain;flex-shrink:0}
#tier-extra-panel .tier-mode-card{position:relative;isolation:isolate;display:block;width:100%;min-width:0;margin:0;padding:7px 7px 6px;border:1px solid #34445f;border-radius:11px;color:#fff;background:radial-gradient(ellipse at 50% 0%,#48628d24,transparent 72%),linear-gradient(155deg,#17253d,#0b1424 80%);text-align:center;box-shadow:inset 0 1px 0 #ffffff0d,0 4px 10px #0005;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
#tier-extra-panel .tier-mode-card::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,var(--band-accent),transparent);opacity:.65;pointer-events:none}
#tier-extra-panel .tier-mode-card .pair-portraits{display:grid;grid-template-columns:minmax(0,1fr) 72px 54px minmax(0,1fr);grid-template-rows:72px auto auto;align-items:end;column-gap:0;row-gap:2px;width:100%;min-width:0;margin:0 auto}
#tier-extra-panel .tier-mode-card .pair-portraits .commander{display:contents}
#tier-extra-panel .tier-mode-card .pair-portraits .commander-portrait{display:block;grid-row:1;width:72px;height:72px;margin:0;border-radius:0;object-fit:contain;filter:drop-shadow(0 5px 5px #0009)}
#tier-extra-panel .tier-mode-card .pair-portraits .commander:first-child .commander-portrait{grid-column:2;position:relative;z-index:1}
#tier-extra-panel .tier-mode-card .pair-portraits .commander:last-child .commander-portrait{grid-column:3;width:54px;height:54px}
#tier-extra-panel .tier-mode-card .pair-portraits .commander .name{display:block;grid-column:1 / -1;min-width:0;min-height:17px;padding:0;color:#fff;font-size:13px;font-weight:650;line-height:17px;white-space:normal;overflow-wrap:normal;word-break:normal}
#tier-extra-panel .tier-mode-card .pair-portraits .commander:first-child .name{grid-row:2}
#tier-extra-panel .tier-mode-card .pair-portraits .commander:last-child .name{grid-row:3;color:#fff;font-weight:600}
#tier-extra-panel .tier-mode-card.tier-mode-single .pair-portraits{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);grid-template-rows:72px auto}
#tier-extra-panel .tier-mode-card.tier-mode-single .pair-portraits .commander:only-child .commander-portrait{grid-column:2;width:72px;height:72px}
#tier-extra-panel .tier-mode-card.tier-mode-single .pair-portraits .commander:only-child .name{grid-row:2;color:#fff;font-weight:650}
#tier-extra-panel .tier-mode-card .card-foot{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-top:4px;padding-top:4px;border-top:1px solid #34445f80;font-size:13px;line-height:18px}
#tier-extra-panel .tier-mode-card .troop-label{display:flex;align-items:center;gap:3px;min-width:0;color:#fff;font-size:13px}
#tier-extra-panel .tier-mode-card .troop-label img{flex-shrink:0;width:18px;height:18px;object-fit:contain}
#tier-extra-panel .tier-section[data-tier="D"]{--band-accent:#819aad;--band-fill:linear-gradient(140deg,#53768f,#30485d)}
#tier-extra-panel .tier-section[data-tier="E"]{--band-accent:#798797;--band-fill:linear-gradient(140deg,#596b80,#354252)}
#tier-extra-panel .tier-section[data-tier="F"]{--band-accent:#6f7886;--band-fill:linear-gradient(140deg,#4d5667,#2c3340)}
@media(max-width:900px){#tier-extra-panel .field-toolbar.tier-mode-toolbar{flex-direction:column;gap:12px}#tier-extra-panel .search-label,#tier-extra-panel .tier-mode-filters{flex:auto}}
@media(max-width:700px){#tier-extra-panel .tier-mode-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:10px}#tier-extra-panel .tier-mode-filters button{padding:9px 6px;font-size:14px}#tier-extra-panel .field-heading{padding:12px 14px}#tier-extra-panel .eyebrow{letter-spacing:.7px}}

/* NO_VERDICT: source-only layout draft; parent must preflight anchors and verify. */
html body .topbar{position:static;display:flex;justify-content:flex-start;align-items:center;flex-wrap:nowrap;gap:12px;max-width:none;width:100%;margin:0;box-sizing:border-box;min-height:79px;padding:12px max(24px,calc((100% - 1440px)/2));background:#050505;border-bottom:1px solid #171717;box-shadow:inset 0 1px 0 #ffffff12,0 3px 10px #00000040}
html body .topbar .brand-logo{flex:0 0 44px}
html body .topbar .brand-name{flex:0 0 auto}
html body .topbar .app-tabs{display:flex;flex-wrap:nowrap;gap:8px;min-width:0;margin:0 0 0 12px;padding:0;border:0;border-radius:12px;background:none;box-shadow:none}
html body .topbar .app-tabs button{flex:1 1 auto;min-width:44px;min-height:44px;padding:8px 16px;font-size:14px;line-height:1.25;border:0;border-radius:8px;color:#fff;background:transparent;box-shadow:none;text-decoration:none;white-space:normal}
html body .topbar .app-tabs button[aria-pressed=true],
html body .topbar .app-tabs button[aria-pressed=true]:is(:hover,:focus,:active){background-color:#51465f!important;background-image:linear-gradient(180deg,#6a5c7b,#51465f 48%,#3d344a)!important;border:0!important;color:#fff!important;box-shadow:inset 0 1px 0 #ffffff40,0 3px 8px #00000099!important;text-shadow:none!important;text-decoration:none}
html body .topbar .app-tabs button[aria-pressed=false]:hover{background:transparent!important;border:0!important;color:#fff!important;box-shadow:inset 0 1px 0 #ffffff20,0 2px 4px #00000066!important;text-decoration:none}
html body .topbar .app-tabs button:focus-visible{outline:2px solid #d5cde6;outline-offset:2px}
html body #field-board-view .tier-controls{position:relative;min-width:0;margin:0 0 12px;padding:8px 16px;border:1px solid transparent;border-radius:14px;background:linear-gradient(180deg,#172335,#101925) padding-box,linear-gradient(115deg,#ad718e 0%,#8774ab 50%,#69a5b5 100%) border-box;box-shadow:inset 0 1px 0 #ffffff0d,0 4px 12px #00000026}
html body #field-board-view .tier-controls .field-heading{position:absolute;width:1px;height:1px;min-width:0;min-height:0;margin:0;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);border:0;white-space:nowrap;background:none;box-shadow:none}
html body #field-board-view .tier-controls #tier-mode-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0 0 8px;padding:4px;border:1px solid #394453;border-radius:10px;background:#0c1420}
html body #field-board-view .tier-controls #tier-mode-nav button,
html body #field-board-view .tier-controls .tier-role-tabs button,
html body #field-board-view .tier-controls #field-filters button,
html body #field-board-view .tier-controls #tier-extra-controls .tier-mode-filters button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;max-width:100%;padding:6px 10px;border:1px solid #3e4856;border-radius:8px;background:#1c2531;color:#fff;font-size:14px;line-height:1.2;font-weight:650;white-space:normal;box-shadow:none;text-shadow:none}
html body #field-board-view .tier-controls button[aria-pressed=true],
html body #field-board-view .tier-controls button[aria-pressed=true]:is(:hover,:focus,:active),
html body #field-board-view .tier-controls #field-filters button[aria-pressed=true],
html body #field-board-view .tier-controls #field-filters button[aria-pressed=true]:is(:hover,:focus,:active){background:#51465f!important;background-image:none!important;border-color:#a99cc9!important;color:#fff!important;box-shadow:none!important;text-shadow:none!important}
html body #field-board-view .tier-controls button[aria-pressed=false]:hover,
html body #field-board-view .tier-controls #field-filters button[aria-pressed=false]:hover{background:#30303d!important;background-image:none!important;border-color:#71677f!important;color:#fff!important;box-shadow:none!important}
html body #field-board-view .tier-controls :is(button,input):focus-visible{outline:2px solid #d5cde6;outline-offset:2px}
html body #field-board-view .tier-controls .field-toolbar{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:flex-end;gap:16px;margin:0;padding:0;background:none;border:0;box-shadow:none}
html body #field-board-view .tier-controls .search-label,
html body #field-board-view .tier-controls #field-filters,
html body #field-board-view .tier-controls #tier-extra-controls .tier-mode-filters{min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
html body #field-board-view .tier-controls .search-label{display:block;order:0;flex:1 1 280px;color:#fff;font-size:14px;line-height:20px}
html body #field-board-view .tier-controls .search-label input{display:block;width:100%;min-width:0;height:44px;min-height:44px;margin:4px 0 0;padding:8px 12px;border:1px solid #525c69;border-radius:8px;background:#0d1521;color:#fff;font-size:15px;line-height:1.25}
html body #field-board-view .tier-controls #field-filters,
html body #field-board-view .tier-controls #tier-extra-controls .tier-mode-filters{display:flex;order:1;flex:0 1 auto;flex-wrap:wrap;align-items:center;align-content:center;gap:8px}
html body #field-board-view .tier-controls .tier-role-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:4px 0 0;border-top:1px solid #394453}
@media(max-width:900px){
 html body #field-board-view .tier-controls .field-toolbar{flex-direction:column;align-items:stretch;gap:12px}
 html body #field-board-view .tier-controls .search-label,html body #field-board-view .tier-controls #field-filters,html body #field-board-view .tier-controls #tier-extra-controls .tier-mode-filters{flex:auto;width:100%}
}
@media(max-width:700px){
 html body .topbar{gap:8px;padding:8px 10px;min-height:67px}
 html body .topbar .brand-name{display:none}
 html body .topbar .app-tabs{flex:1 1 0;margin:0;padding:0;gap:2px}
 html body .topbar .app-tabs button{padding:6px;font-size:14px}
 html body #field-board-view .tier-controls{padding:8px;margin-bottom:8px}
 html body #field-board-view .tier-controls #tier-mode-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:0;margin-bottom:8px;border:0;background:none}
 html body #field-board-view .tier-controls #tier-mode-nav button{padding:4px 6px}
 html body #field-board-view .tier-controls .field-toolbar{gap:8px}
 html body #field-board-view .tier-controls .tier-role-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding-top:4px;margin-bottom:4px}
 html body #field-board-view .tier-controls .tier-role-tabs button{padding:4px}
 html body #field-board-view .tier-controls #field-filters,html body #field-board-view .tier-controls #tier-extra-controls .tier-mode-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 html body #field-board-view .tier-controls #field-filters button:last-child:nth-child(odd),html body #field-board-view .tier-controls #tier-extra-controls .tier-mode-filters button:last-child:nth-child(odd){grid-column:1 / -1}
}
@media(prefers-reduced-motion:reduce){
 html body .topbar button,html body #field-board-view .tier-controls button{transition:none!important;animation:none!important}
}
/* NO_VERDICT: unverified, append-only source draft for openfield/openfield.css.
 * Supplied Superpowers, systematic-debugging, TDD and verification read.
 * No tools, runtime checks, behavioral RED/GREEN or completion claim.
 * Parent must preflight replacement paths/unique anchors and run verification.
 * Existing header dimensions, event geometry, cards and switch remain untouched.
 */
html body #field-board-view .tier-controls {
 box-sizing:border-box;min-width:0;padding:16px;border:1px solid rgba(147,112,219,.35);border-radius:16px;
 background:linear-gradient(180deg,rgba(22,28,44,.92),rgba(13,17,28,.98));
 box-shadow:0 20px 50px -15px #000e,inset 0 1px 0 #ffffff1f,inset 0 -1px 0 #000c,0 0 30px #8b5cf626;
}
html body #field-board-view .tier-controls #tier-mode-nav {
 display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 16px;padding:4px;
 border:1px solid #ffffff0a;border-radius:12px;background:rgba(8,11,20,.9);
 box-shadow:inset 0 2px 6px #000c,0 1px 0 #ffffff0d;
}
html body .topbar .app-tabs.app-tabs {
 border:1px solid #ffffff0a;border-radius:12px;padding:3px;background:rgba(8,11,20,.9);
 box-shadow:inset 0 2px 6px #000c;
}
/* Finite control families only: never board, commander or event buttons. */
:is(html body .topbar .app-tabs.app-tabs button,
 html body #field-board-view .tier-controls :is(#tier-mode-nav,#field-filters,.tier-mode-filters,.tier-role-tabs) button,
 html body #calendar-panel .cal-toolbar button,
 html body #calendar-panel .cal-toolbar select,
 html body #calendar-panel .cal-toolbar input,
 html body :is(#field-detail,section.pair-inline,.pair-popup) :is(.dossier-back,.dossier-retry),
 html body :is(#field-detail,section.pair-inline,.pair-popup) .commander-skills .skill-tab[aria-selected]) {
 box-sizing:border-box;min-width:44px;min-height:44px;max-width:100%;
 border:1px solid rgba(255,255,255,.12)!important;border-radius:10px;
 color:#fff!important;-webkit-text-fill-color:#fff;font-size:14px;line-height:1.3;
 background-color:#0b0f19!important;
 background-image:linear-gradient(180deg,rgba(17,24,39,.85),rgba(11,15,25,.95))!important;
 box-shadow:inset 0 1px 0 #ffffff14,0 2px 4px #0008!important;
 text-shadow:none!important;text-decoration:none;
 transition:border-color .16s ease,box-shadow .16s ease;
}
:is(html body .topbar .app-tabs.app-tabs button,
 html body #field-board-view .tier-controls :is(#tier-mode-nav,#field-filters,.tier-mode-filters,.tier-role-tabs) button,
 html body #calendar-panel .cal-toolbar button,
 html body #calendar-panel .cal-toolbar select,
 html body #calendar-panel .cal-toolbar input,
 html body :is(#field-detail,section.pair-inline,.pair-popup) :is(.dossier-back,.dossier-retry),
 html body :is(#field-detail,section.pair-inline,.pair-popup) .commander-skills .skill-tab[aria-selected]):hover {
 border-color:#a78bfa!important;color:#fff!important;
 box-shadow:inset 0 1px 0 #ffffff26,0 0 12px #8b5cf62e!important;
}
:is(html body .topbar .app-tabs.app-tabs button[aria-pressed=true],
 html body #field-board-view .tier-controls :is(#tier-mode-nav,#field-filters,.tier-mode-filters,.tier-role-tabs) button[aria-pressed=true],
 html body #calendar-panel .cal-toolbar button[aria-pressed=true],
 html body #calendar-panel .cal-toolbar #cal-today,
 html body :is(#field-detail,section.pair-inline,.pair-popup) :is(.dossier-back,.dossier-retry),
 html body :is(#field-detail,section.pair-inline,.pair-popup) .commander-skills .skill-tab[aria-selected=true]),
:is(html body .topbar .app-tabs.app-tabs button[aria-pressed=true],
 html body #field-board-view .tier-controls :is(#tier-mode-nav,#field-filters,.tier-mode-filters,.tier-role-tabs) button[aria-pressed=true],
 html body #calendar-panel .cal-toolbar button[aria-pressed=true],
 html body #calendar-panel .cal-toolbar #cal-today,
 html body :is(#field-detail,section.pair-inline,.pair-popup) :is(.dossier-back,.dossier-retry),
 html body :is(#field-detail,section.pair-inline,.pair-popup) .commander-skills .skill-tab[aria-selected=true]):is(:hover,:focus,:active) {
 background-color:#26153e!important;
 background-image:linear-gradient(180deg,rgba(124,77,255,.38),rgba(76,29,149,.7))!important;
 border:1px solid #a78bfa!important;color:#fff!important;-webkit-text-fill-color:#fff;
 box-shadow:0 0 18px #8b5cf673,inset 0 1px 0 #ffffff59,inset 0 -2px 4px #0008!important;
}
html body #field-board-view .tier-controls #tier-mode-nav button {min-width:0;padding:10px 12px;font-weight:700;white-space:normal;overflow-wrap:anywhere;}
html body #field-board-view .tier-controls .field-toolbar {
 display:flex;flex-flow:row wrap;align-items:flex-end;gap:12px 16px;
}
html body #field-board-view .tier-controls .search-label {
 display:block;order:0;flex:1 1 280px;min-width:0;margin:0;padding:0;border:0;
 background:none;box-shadow:none;color:#fff;font-size:14px;line-height:22px;
 font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
html body #field-board-view .tier-controls .search-label::before {
 content:'';display:inline-block;width:6px;height:6px;margin:0 8px 2px 2px;
 border-radius:50%;background:#c084fc;box-shadow:0 0 8px #c084fc;
}
html body #field-board-view .tier-controls .ku-search-field {
 position:relative;display:block;min-width:0;width:100%;margin-top:8px;
 color:#fff;font-size:14px;letter-spacing:normal;text-transform:none;
}
html body #field-board-view .tier-controls .search-label .ku-search-field input {
 box-sizing:border-box;display:block;width:100%;min-width:0;min-height:44px;height:44px;
 margin:0;padding:10px 78px 10px 38px;border:1px solid #ffffff1a;border-radius:12px;
 color:#fff!important;-webkit-text-fill-color:#fff;background:rgba(9,13,22,.96);
 box-shadow:inset 0 2px 5px #000c,0 1px 0 #ffffff0d;
 font-size:15px;line-height:22px;font-weight:500;letter-spacing:normal;text-transform:none;
}
html body #field-board-view .tier-controls .search-label .ku-search-field input::placeholder {color:#fff!important;-webkit-text-fill-color:#fff;opacity:1;}
html body #field-board-view .tier-controls .ku-search-icon {
 position:absolute;left:13px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:14px;
}
html body #field-board-view .tier-controls .ku-search-key {
 position:absolute;right:10px;top:50%;transform:translateY(-50%);pointer-events:none;
 padding:1px 5px;border:1px solid #ffffff1f;border-radius:5px;background:#141a28;
 color:#fff;font:600 14px/20px monospace;white-space:nowrap;box-shadow:0 1px 2px #0008;
}
html body #field-board-view .tier-controls #field-filters,
html body #field-board-view .tier-controls #tier-extra-controls .tier-mode-filters {
 display:flex;order:1;flex:0 1 auto;flex-wrap:wrap;gap:8px;width:auto;min-width:0;
 margin:0;padding:0;border:0;background:none;box-shadow:none;
}
html body #field-board-view .tier-controls :is(#field-filters,.tier-mode-filters) button {
 display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;white-space:normal;
}
html body #field-board-view .tier-controls :is(#field-filters,.tier-mode-filters) button img {
 box-sizing:border-box;flex-shrink:0;width:25px;height:25px;padding:2px;
 object-fit:contain;transform:none;border:1px solid #f8717199;border-radius:6px;
 background:radial-gradient(circle at 30% 30%,#ef4444,#7f1d1d);box-shadow:0 0 8px #ef444499;
}
html body #field-board-view .tier-controls .tier-role-tabs {gap:8px;border-top-color:#ffffff14;}
html body #field-board-view .tier-controls .tier-role-tabs button {min-width:0;padding:9px 12px;white-space:normal;}
:is(html body .topbar .app-tabs.app-tabs button,
 html body #field-board-view .tier-controls :is(#tier-mode-nav,#field-filters,.tier-mode-filters,.tier-role-tabs) button,
 html body #field-board-view .tier-controls .search-label input,
 html body #calendar-panel .cal-toolbar :is(button,select,input),
 html body :is(#field-detail,section.pair-inline,.pair-popup) :is(.dossier-back,.dossier-retry,.skill-tab[aria-selected])):focus-visible {
 outline:2px solid #ddd6fe!important;outline-offset:3px;
}
@media(max-width:900px){
 html body #field-board-view .tier-controls .field-toolbar {flex-direction:column;align-items:stretch;}
 html body #field-board-view .tier-controls .search-label,
 html body #field-board-view .tier-controls #field-filters,
 html body #field-board-view .tier-controls #tier-extra-controls .tier-mode-filters {flex:0 1 auto;width:100%;}
}
@media(max-width:700px){
 html body #field-board-view .tier-controls #tier-mode-nav {grid-template-columns:repeat(2,minmax(0,1fr));padding:4px;border:1px solid #ffffff0a;background:rgba(8,11,20,.9);gap:6px;margin-bottom:16px;}
 html body #field-board-view .tier-controls #tier-mode-nav button {padding:9px 6px;}
 html body #field-board-view .tier-controls .tier-role-tabs {grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
 html body #field-board-view .tier-controls .tier-role-tabs button {padding:8px 4px;overflow-wrap:anywhere;}
 html body #field-board-view .tier-controls #field-filters,
 html body #field-board-view .tier-controls #tier-extra-controls .tier-mode-filters {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
 html body #field-board-view .tier-controls :is(#field-filters,.tier-mode-filters) button {min-width:0;padding:9px 6px;overflow-wrap:anywhere;}
}
@media(prefers-reduced-motion:reduce){
 :is(html body .topbar .app-tabs.app-tabs button,
 html body #field-board-view .tier-controls :is(#tier-mode-nav,#field-filters,.tier-mode-filters,.tier-role-tabs) button,
 html body #field-board-view .tier-controls .search-label input,
 html body #calendar-panel .cal-toolbar :is(button,select,input),
 html body :is(#field-detail,section.pair-inline,.pair-popup) :is(.dossier-back,.dossier-retry,.skill-tab[aria-selected])) {transition:none!important;animation:none!important;}
}

/* NO_VERDICT: unverified append-only draft; supplied Superpowers, TDD,
   systematic-debugging and verification read. No execution or RED/GREEN.
   Parent must verify first tier <=480px at 320/390px, unchanged header,
   full labels, >=44px targets, 25px icons and no horizontal overflow. */
@media(max-width:700px){
 html body #field-board-view .tier-controls{padding:8px}
 html body #field-board-view .tier-controls #tier-mode-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;padding:0;border:0;margin-bottom:8px}
 html body #field-board-view .tier-controls #tier-mode-nav button{padding:4px 6px;line-height:1.2}
 html body #field-board-view .tier-controls .tier-role-tabs{gap:4px;padding:0;border:0;margin-bottom:4px}
 html body #field-board-view .tier-controls .tier-role-tabs button{padding:4px;line-height:1.2}
 html body #field-board-view .tier-controls .search-label{line-height:20px}
 html body #field-board-view .tier-controls .ku-search-field{margin-top:4px}
 html body #field-board-view .tier-controls .field-toolbar{gap:8px}
 html body #field-board-view .tier-controls #field-filters,
 html body #field-board-view .tier-controls #tier-extra-controls .tier-mode-filters{gap:4px}
 html body #field-board-view .tier-controls :is(#field-filters,.tier-mode-filters) button{padding:4px 6px;line-height:1.2}
}