/* Denver Kickers: original club blue and gold, with shared accessible surfaces. */
:root {
  --brand-primary:#2d2f92;
  --brand-primary-hover:#22246f;
  --brand-secondary:#e3c327;
  --brand-soft:#eeeef9;
  --page:#f5f6f8;
  --surface:#fff;
  --surface-muted:#eef0f4;
  --text:#252938;
  --text-muted:#586174;
  --border:#dce0e7;
  --border-strong:#8892a4;
  --success:#296044;
  --success-soft:#eaf4ee;
  --warning:#795615;
  --warning-soft:#faf2df;
  --danger:#9b3540;
  --danger-soft:#faecee;
  --overlay:rgba(28,31,45,.91);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  background:var(--page);
  line-height:1.5
}
body {
  color:var(--text);
  background:var(--page)
}
a {
  color:var(--brand-primary);
  text-underline-offset:3px
}
h1,h2,h3,h4 {
  color:var(--text);
  line-height:1.25
}
h2 {
  font-size:clamp(1.45rem,2.5vw,1.9rem);
  letter-spacing:-.025em
}
h3 {
  font-size:1.12rem
}
button,input,select,textarea {
  border:1px solid var(--border-strong);
  border-radius:6px;
  font:inherit;
  min-height:44px;
  color:var(--text);
  background:var(--surface)
}
button {
  font-weight:600;
  padding:.6rem .9rem
}
button:hover {
  background:var(--surface-muted);
  outline:none
}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid var(--brand-primary);
  outline-offset:3px
}
button:disabled {
  opacity:.55
}
input,select,textarea {
  padding:.65rem .75rem;
  max-width:100%
}
input[type=checkbox] {
  min-height:0;
  accent-color:var(--brand-primary)
}
label {
  font-size:.9rem;
  font-weight:600;
  gap:.45rem
}
label input,label select,label textarea {
  font-weight:400
}
textarea {
  resize:vertical
}
form {
  border-color:var(--border);
  border-radius:8px;
  padding:1.25rem;
  background:var(--surface)
}
form label {
  min-width:0
}
main {
  max-width:1480px;
  padding:24px 32px
}
section {
  margin-top:24px
}
pre {
  overflow-wrap:anywhere
}
dialog {
  background:var(--page);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px
}
dialog::backdrop {
  background:var(--overlay)
}
button[aria-pressed=true],#batch-form>button,#upload-files,#filters>button,#review-approve,#review-form button[value=APPROVE],#vail-approve,#vail-save {
  background:var(--brand-primary);
  border-color:var(--brand-primary);
  color:#fff
}
#review-form button[value=REJECT] {
  color:var(--danger);
  border-color:var(--danger);
  background:var(--surface)
}
.app-header {
  background:var(--surface);
  color:var(--text);
  padding:0;
  border-top:4px solid var(--brand-primary);
  border-bottom:1px solid var(--border)
}
.header-inner {
  width:100%;
  max-width:1480px;
  margin:auto;
  padding:16px 32px;
  display:flex;
  align-items:center;
  gap:24px
}
.club-logo {
  display:flex;
  flex:none
}
.club-logo img {
  display:block;
  width:184px;
  height:auto;
  object-fit:contain
}
.app-header .brand {
  flex:1 1 auto;
  min-width:0;
  border-left:1px solid var(--border);
  padding-left:24px
}
.app-header .brand h1 {
  font-size:1.5rem;
  letter-spacing:-.035em;
  margin:0
}
.app-header .brand span {
  color:var(--text-muted);
  font-size:.875rem;
  margin-top:3px
}
.account-tools {
  display:flex;
  align-items:center;
  gap:12px;
  flex:none
}
.app-header #identity {
  font-size:.85rem;
  color:var(--text-muted);
  border:0;
  padding:0
}
.app-header #logout {
  color:var(--text);
  background:var(--surface);
  border-color:var(--border-strong);
  padding:.55rem .8rem
}
.app-header #login {
  background:var(--brand-primary);
  color:white;
  border-color:var(--brand-primary)
}
.admin-menu {
  position:relative;
  font-size:.9rem
}
.admin-menu summary {
  cursor:pointer;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:.6rem .75rem;
  border:1px solid var(--border);
  border-radius:6px;
  font-weight:650;
  list-style:none
}
.admin-menu summary::-webkit-details-marker {
  display:none
}
.admin-menu summary::after {
  content:'⌄';
  color:var(--text-muted)
}
.admin-menu[open] summary {
  background:var(--brand-soft);
  color:var(--brand-primary)
}
.admin-menu-panel {
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  width:240px;
  padding:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:0 8px 24px #25293814;
  z-index:20
}
.menu-label {
  display:block;
  font-size:.75rem;
  font-weight:700;
  color:var(--text-muted);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:8px
}
.test-toggle {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  min-height:44px;
  font-weight:500
}
.test-toggle input {
  width:18px;
  height:18px
}
.workspace-nav {
  max-width:none;
  margin:0 0 30px;
  padding:0;
  gap:8px;
  border-bottom:1px solid var(--border)
}
.workspace-nav button {
  font-size:.94rem;
  border:0;
  border-bottom:3px solid transparent;
  border-radius:0;
  padding:13px 16px;
  color:var(--text-muted);
  background:transparent;
  font-weight:650;
  flex:none
}
.workspace-nav button:hover {
  background:var(--surface-muted)
}
.workspace-nav button[aria-current=page] {
  background:var(--brand-soft);
  color:var(--brand-primary);
  border-bottom-color:var(--brand-primary)
}
.nav-heading {
  display:none
}
.startup {
  max-width:760px;
  border:1px solid var(--border);
  border-left:4px solid var(--brand-primary);
  border-radius:8px;
  box-shadow:none;
  color:var(--text)
}
#message {
  max-width:1480px;
  margin:0 auto;
  color:var(--text);
  font-size:.92rem;
  min-height:0;
  padding:0 32px
}
#message:empty {
  display:none
}
.section-eyebrow {
  display:block;
  color:var(--brand-primary);
  text-transform:uppercase;
  font-size:.75rem;
  font-weight:750;
  letter-spacing:.12em;
  margin-bottom:8px
}
.page-intro,.muted {
  color:var(--text-muted)
}
.dashboard-shell {
  max-width:none
}
.dashboard-intro {
  margin:4px 0 26px
}
.dashboard-intro h2 {
  font-size:clamp(1.65rem,3vw,2.2rem);
  letter-spacing:-.035em
}
.dashboard-intro p {
  margin-top:8px;
  color:var(--text-muted);
  max-width:680px
}
.dashboard-shell .quick-actions {
  gap:18px;
  margin:0 0 32px
}
.dashboard-shell .quick-actions button {
  min-height:152px;
  padding:22px 24px;
  background:var(--surface);
  border:1px solid var(--border);
  border-top:3px solid var(--brand-primary);
  border-radius:8px;
  box-shadow:none
}
.dashboard-shell .quick-actions button:hover {
  border-color:var(--brand-primary);
  background:var(--surface);
  box-shadow:none
}
.dashboard-shell .quick-actions strong {
  font-size:1.17rem;
  color:var(--text);
  margin:8px 0
}
.dashboard-shell .quick-actions span {
  font-weight:400;
  color:var(--text-muted);
  font-size:.92rem;
  line-height:1.5
}
.dashboard-shell .quick-actions .action-eyebrow {
  color:var(--brand-primary);
  font-size:.73rem;
  letter-spacing:.09em
}
.quick-actions button:focus-visible {
  outline-color:var(--brand-primary)
}
.snapshot-panel {
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:10px;
  padding:24px;
  margin:0
}
.snapshot-heading {
  align-items:center
}
.snapshot-heading h3 {
  font-size:1.18rem
}
.snapshot-heading p,#count-progress {
  color:var(--text-muted);
  font-size:.9rem
}
.snapshot-heading button {
  min-height:44px;
  background:var(--surface);
  border-color:var(--border);
  color:var(--text);
  font-size:.85rem;
  padding:.55rem .8rem
}
.dashboard-shell .counts {
  gap:24px
}
.stat-section h4 {
  font-size:.75rem;
  letter-spacing:.08em;
  color:var(--text-muted)
}
.stat-card {
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:none;
  background:var(--surface);
  padding:16px;
  min-height:88px
}
.stat-value {
  color:var(--text);
  font-size:1.65rem;
  font-weight:700
}
.stat-label {
  font-size:.87rem;
  color:var(--text-muted)
}
.stat-primary,.stat-primary:nth-child(2) {
  border-top:3px solid var(--brand-primary);
  background:var(--brand-soft)
}
.stat-primary:nth-child(2) {
  border-top-color:var(--brand-secondary)
}
.stat-primary .stat-value {
  font-size:2.1rem;
  color:var(--brand-primary)
}
.stat-zero,.stat-history {
  background:var(--surface-muted);
  border-color:var(--border)
}
.stat-zero .stat-value,.stat-note {
  color:var(--text-muted)
}
.stat-note {
  font-size:.82rem
}
.stat-maintenance .stat-card {
  min-height:0;
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:center;
  gap:16px
}
.stat-history .stat-value {
  font-size:1.25rem
}
.event-card,.card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:8px;
  box-shadow:none
}
.event-card {
  padding:22px
}
.event-card p {
  color:var(--text-muted);
  font-size:.92rem
}
.event-card a,#collection-navigation a {
  color:var(--brand-primary);
  margin:0 8px 0 0;
  padding:.5rem 0
}
.card:hover {
  transform:none
}
.grid .card {
  font-weight:400;
  padding:12px;
  overflow:hidden
}
.grid .card:hover {
  border-color:var(--brand-primary);
  background:var(--surface)
}
.card-title {
  font-size:.96rem;
  line-height:1.45
}
.card-status {
  font-size:.85rem;
  font-weight:600;
  color:var(--text)
}
.card-context,.preview-state {
  color:var(--text-muted);
  font-size:.85rem
}
.card img {
  background:var(--surface-muted);
  border-radius:4px
}
.missing-preview,.empty-state {
  background:var(--surface-muted);
  color:var(--text-muted);
  border-color:var(--border-strong);
  border-radius:6px
}
.grid button:focus-visible,nav button:focus-visible {
  outline-color:var(--brand-primary)
}
#batch-list>div,#batch-list>article {
  border-color:var(--border)
}
.actions {
  gap:10px
}
.review-toolbar,#review-form .actions {
  background:var(--surface)
}
.review-toolbar {
  border-color:var(--border)
}
.review-hint {
  color:var(--text-muted)
}
#vail-card,#vail-ai,#vail-summary,#vail-recommendation {
  border-color:var(--border);
  border-radius:8px;
  background:var(--surface)
}
.v2-tools {
  border-color:var(--warning);
  background:var(--warning-soft)
}
body.test .app-header {
  background:var(--warning-soft);
  border-top-color:var(--warning)
}
body.test nav:after {
  display:none
}
body.test .workspace-nav:after {
  content:'Diagnostic records';
  display:block;
  color:var(--warning);
  background:var(--warning-soft);
  font-size:.83rem;
  padding:8px 12px;
  align-self:center;
  border-radius:4px
}
/* Shared action hierarchy and upload batch cards. */
#batch-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:12px;
  margin-top:18px
}
#batch-list button {
  text-align:left;
  padding:18px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  font-weight:500
}
#batch-list button:hover {
  border-color:var(--brand-primary);
  background:var(--brand-soft)
}
#batch-form h3 {
  flex-basis:100%;
  margin:0 0 4px
}
.dashboard-shell .quick-actions button:focus-visible {
  outline-color:var(--brand-primary)
}
#gallery-include,#gallery-describe {
  background:var(--brand-primary);
  color:#fff;
  border-color:var(--brand-primary)
}
#batch-form>button:hover,#upload-files:hover,#filters>button:hover,#review-approve:hover,#review-form button[value=APPROVE]:hover,#vail-approve:hover,#vail-save:hover,#gallery-include:hover,#gallery-describe:hover,.public-gallery #save-share:hover,.public-gallery button[aria-pressed=true]:hover {
  background:var(--brand-primary-hover);
  border-color:var(--brand-primary-hover)
}
.ga .ga-primary:hover {
  background:var(--brand-primary-hover)!important
}
/* Existing gallery manager layout and workflows;
shared tokens only. */
.ga .ga-top button {
  white-space:nowrap
}
#gallery-admin .ga-card {
  box-shadow:none
}
.ga .ga-badge {
  font-size:.8rem;
  border-radius:4px
}
.ga .ga-type,.ga .ga-card-actions button {
  font-size:.85rem
}
.ga .ga-top h2 {
  letter-spacing:-.015em
}
.ga .ga-top {
  border-top:3px solid var(--brand-primary)
}
.ga .ga-thumb img {
  border-radius:0
}
.ga .ga-check input {
  accent-color:var(--brand-primary)
}
.ga .ga-card-actions button {
  border-color:var(--border)
}
.ga .ga-body {
  scroll-behavior:auto
}
/* Public pages keep their existing grid, viewer and controls. */
.public-gallery .public-header {
  padding:16px max(20px,calc((100vw - 1200px)/2));
  background:var(--surface);
  color:var(--text);
  border-top:4px solid var(--brand-primary);
  border-bottom:1px solid var(--border);
  align-items:center
}
.public-brand {
  display:flex;
  align-items:center;
  gap:24px;
  color:var(--text);
  font-weight:650;
  text-decoration:none
}
.public-brand img {
  width:174px;
  height:auto;
  object-fit:contain
}
.public-brand>span {
  padding-left:24px;
  border-left:1px solid var(--border)
}
.brand-subtitle {
  display:block;
  font-size:.84rem;
  font-weight:400;
  color:var(--text-muted);
  margin-top:2px
}
.public-header-note {
  font-size:.85rem;
  color:var(--text-muted)
}
.public-gallery main {
  max-width:1240px;
  padding:24px 20px
}
.public-gallery h1 {
  font-size:clamp(1.8rem,4vw,2.65rem);
  letter-spacing:-.035em
}
.public-gallery .toolbar {
  padding-bottom:18px;
  border-bottom:1px solid var(--border);
  gap:12px
}
.public-gallery button[aria-pressed=true],.public-gallery #save-share {
  background:var(--brand-primary);
  color:#fff;
  border-color:var(--brand-primary)
}
.public-gallery .card {
  font-weight:500;
  padding:0
}
.public-gallery .card img {
  border-radius:0;
  background:var(--surface-muted)
}
.public-gallery .card span {
  font-size:.92rem
}
.public-gallery .card .play {
  border-radius:4px;
  background:var(--overlay);
  color:#fff
}
.public-gallery dialog {
  background:var(--surface)
}
.public-gallery .help,.public-gallery footer {
  color:var(--text-muted)
}
.public-gallery #message {
  padding:0
}
.public-gallery .media-actions {
  background:var(--surface)
}
.public-gallery #close {
  background:var(--surface);
  border-color:var(--border)
}
@media(max-width:1000px) {
  .header-inner {
    gap:18px
  }
  .app-header .brand {
    padding-left:18px
  }
  .app-header .brand span {
    max-width:250px;
    font-size:.8rem
  }
  .club-logo img {
    width:160px
  }
  .workspace-nav button {
    padding:12px
  }
  .dashboard-shell .quick-actions button {
    padding:20px
  }
  .public-header-note {
    display:none
  }
}
@media(max-width:900px) {
  main {
    padding:20px
  }
  .header-inner {
    padding:14px 20px;
    gap:14px;
    flex-wrap:wrap
  }
  .club-logo img {
    width:150px
  }
  .app-header .brand {
    flex:1;
    min-width:120px
  }
  .app-header .brand h1 {
    font-size:1.25rem
  }
  .app-header .brand span {
    display:none
  }
  .account-tools {
    margin-left:auto
  }
  .nav-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:0 0 12px;
    font-size:.8rem;
    font-weight:700;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.08em
  }
  .nav-heading button {
    text-transform:none;
    letter-spacing:0;
    font-size:.9rem
  }
  .workspace-nav {
    display:none;
    margin-bottom:24px;
    gap:4px;
    padding:8px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:8px
  }
  .workspace-nav.is-open {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .workspace-nav button {
    flex:none;
    text-align:left;
    border:0;
    border-left:3px solid transparent;
    border-radius:3px;
    min-height:48px;
    font-size:.9rem;
    padding:12px
  }
  .workspace-nav button[aria-current=page] {
    border-left-color:var(--brand-primary)
  }
  .dashboard-shell .quick-actions {
    grid-template-columns:1fr;
    gap:12px;
    margin-bottom:24px
  }
  .dashboard-shell .quick-actions button {
    min-height:122px
  }
  .snapshot-panel {
    padding:20px
  }
  .dashboard-shell .counts {
    grid-template-columns:1fr;
    gap:20px
  }
  .snapshot-heading {
    gap:12px
  }
  .stat-maintenance .stat-card {
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:10px
  }
  .stat-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .stat-featured .stat-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .stat-card {
    padding:12px
  }
  #message {
    padding:0 20px
  }
  .public-brand {
    gap:14px
  }
  .public-brand img {
    width:150px
  }
  .public-brand>span {
    padding-left:14px;
    font-size:.9rem
  }
  .public-gallery .public-header {
    padding:14px 16px
  }
  .public-gallery main {
    padding:20px 16px
  }
}
@media(max-width:480px) {
  main {
    padding:18px 16px
  }
  .header-inner {
    padding:12px 16px;
    gap:12px
  }
  .club-logo img {
    width:146px
  }
  .app-header .brand {
    padding-left:12px
  }
  .account-tools {
    width:100%;
    justify-content:flex-end;
    gap:10px
  }
  .app-header #identity {
    order:0;
    margin-right:auto;
    flex:initial
  }
  .admin-menu-panel {
    right:0;
    width:230px
  }
  .snapshot-panel {
    padding:16px
  }
  .snapshot-heading {
    align-items:flex-start;
    flex-wrap:wrap
  }
  .snapshot-heading button {
    font-size:.82rem
  }
  .stat-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .stat-primary .stat-value {
    font-size:1.8rem
  }
  form {
    padding:16px;
    gap:14px
  }
  .public-brand img {
    width:130px
  }
  .public-brand {
    gap:12px
  }
  .public-brand>span {
    padding-left:12px;
    font-size:.85rem
  }
  .public-gallery .card span {
    font-size:.86rem
  }
  .public-gallery .toolbar {
    gap:12px
  }
  .public-gallery .toolbar>div {
    display:flex;
    gap:4px
  }
  .public-gallery .toolbar button {
    padding:10px 12px
  }
  .public-gallery .media-actions button {
    padding:10px 12px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}