/* App Kit v5 (AMENDMENT 40) overlay for the leftover EJS chrome: sign-in, account, club picker, the club
   band, error-with-club. Loads after public/styles.css and after brand/dpt.v5.css, so it only has to fix
   what those two cannot: rules the EJS markup names itself.

   Not linked from print / recruiting / report HTML: those documents carry dpt-light on <html> instead.
   Every colour here is a --dp5-* token; the club's ONE accent lands on the active nav item, the identity
   rail and the chips, and nowhere else (white-label rule). */

html { color-scheme: dark; }

body:not(.printpage) {
  background: var(--dp5-canvas);
  color: var(--dp5-text);
  font: var(--dp5-t-body)/1.4 var(--dp5-font);
  letter-spacing: -0.01em;
}

body:not(.printpage) :is(h1, h2, h3),
body:not(.printpage) .cs-band-name,
body:not(.printpage) .cs-authmark,
body:not(.printpage) .cs-sample-label,
body:not(.printpage) .cs-role-pill {
  font-family: var(--dp5-font);
}

body:not(.printpage) :is(h1, h2) {
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--dp5-text);
}
body:not(.printpage) h1 { font-size: var(--dp5-t-h2); line-height: 28px; }
body:not(.printpage) h2 { font-size: var(--dp5-t-row); line-height: 24px; }

/* A card is a tile: the kit edge, no shadow. Buttons, fields, chips, the band and the nav have no shadow either. */
body:not(.printpage) .card {
  background: var(--dp5-surface);
  border: 1px solid var(--dp5-line-card);
  border-radius: var(--dp5-r-card);
  box-shadow: var(--dp5-shadow-card);
}

/* Fields: raised fill, no border, one height. The kit paints the focus line. */
body:not(.printpage) :is(input, textarea, select) {
  min-height: var(--dp5-h-field);
  padding: 0 14px;
  border: 0;
  border-radius: var(--dp5-r-field);
  background: var(--dp5-raised);
  color: var(--dp5-text);
  font: 400 var(--dp5-fs-field)/1.2 var(--dp5-font);
}
body:not(.printpage) textarea { min-height: calc(var(--dp5-h-field) * 2); padding: 12px 14px; line-height: 1.4; }
body:not(.printpage) :is(input, textarea).is-invalid {
  box-shadow: inset 0 0 0 2px var(--dp5-bad);
}

/* A .linklike inside copy is a text button, not a filled control (the password reveal on sign-in). */
body:not(.printpage) .linklike,
body:not(.printpage) summary.linklike {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  min-height: 24px;
  color: var(--dp5-green);
  font: 600 var(--dp5-fs-ctl)/1.4 var(--dp5-font);
  letter-spacing: -0.01em;
  text-transform: none;
}

/* Secondary tier, on every surface. The club colour never reaches a control. */
body:not(.printpage) .btn {
  min-height: var(--dp5-h-ctl);
  padding: 0 16px;
  border-radius: var(--dp5-r-ctl);
  border: 0;
  background: var(--dp5-raised);
  color: var(--dp5-text);
  font-family: var(--dp5-font);
  font-size: var(--dp5-fs-ctl);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  box-shadow: none;
}
body:not(.printpage) .btn.sm {
  min-height: 32px;
  padding: 0 12px;
  font-size: var(--dp5-fs-ctl);
}
/* styles.css's club-scope rule still hands a .btn the club's own INK at (0,3,0): on a light club colour that is
   dark ink on the raised grey. (0,4,1) here keeps the secondary's kit ink; the white primary re-states its own below. */
html body.cs-club:not(.printpage) :is(.cs-main, .cs-error-card) .btn {
  color: var(--dp5-text);
}
/* One white primary per screen, ink text; its focus line takes the ink (green on white is 1.9:1). */
html body:not(.printpage) :is(.btn.primary, .btn.big, .btn.action),
html body.cs-club:not(.printpage) .cs-main :is(.btn.primary, .btn.big, .btn.action) {
  background: var(--dp5-primary);
  color: var(--dp5-primary-ink);
  border: 0;
  --dp5-focus: var(--dp5-focus-ink);
}
@media (hover: hover) {
  html body:not(.printpage) :is(.btn.primary, .btn.big, .btn.action):hover,
  html body.cs-club:not(.printpage) .cs-main :is(.btn.primary, .btn.big, .btn.action):hover {
    background: var(--dp5-primary-hover);
    color: var(--dp5-primary-ink);
  }
}
@media (hover: hover) {
  html body.cs-club:not(.printpage) :is(.cs-main, .cs-error-card) .btn:hover {
    background: var(--dp5-raised-hover);
    color: var(--dp5-text);
  }
}
/* A link inside a club's page takes the club's contrast-clamped accent (white label: kit green on a navy club is
   a DPT leak). .btn and .linklike are excluded: the (0,3,3) of the old blanket rule out-specified the button
   rules and painted button-shaped anchors green. A linklike is a quiet text button. */
html body.cs-club:not(.printpage) .cs-main a:not(.btn):not(.linklike) { color: var(--club-text); }
html body.cs-club:not(.printpage) .cs-main .linklike {
  background: none;
  color: var(--dp5-text-2);
  border: 0;
  box-shadow: none;
  padding: 0;
}

body.cs-auth {
  background: var(--dp5-canvas);
  color: var(--dp5-text);
}
/* A club's own sign-in (views/auth/login.ejs adds cs-auth-club when a club is in scope): its text button and
   links take the club accent, like every other club page. The hub's /login keeps the kit green. */
html body.cs-auth-club .stack .linklike,
html body.cs-auth-club a:not(.btn) { color: var(--club-text); }
body.cs-auth .card.narrow {
  background: var(--dp5-surface);
  /* The sign-in panel is a card and uses the same edge as the other cards, with no shadow. */
  border: 1px solid var(--dp5-line-card);
  border-radius: var(--dp5-r-card);
  box-shadow: var(--dp5-shadow-card);
}

/* Club band: kit canvas, the club's crest and its accent on the active nav item. */
html body.cs-club:not(.printpage) .cs-band {
  background: var(--dp5-canvas);
  color: var(--dp5-text);
  border-bottom: 1px solid var(--dp5-line-canvas);
  padding: 8px 16px;
}
html body.cs-club:not(.printpage) .cs-band-name {
  font-size: var(--dp5-t-dense);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--dp5-text);
}
html body.cs-club:not(.printpage) .cs-band-nav a {
  font-family: var(--dp5-font);
  font-size: var(--dp5-t-dense);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: none;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--dp5-r-card);
  opacity: 1;
  color: var(--dp5-text-2);
}
/* Active = surface fill + white text, plus the club's 2px rail. Never a green fill. */
html body.cs-club:not(.printpage) .cs-band-nav a.is-active {
  background: var(--dp5-surface);
  color: var(--dp5-text);
  box-shadow: inset 2px 0 0 var(--club-primary);
  font-weight: 500;
}
html body.cs-club:not(.printpage) .cs-pill-nav .is-active {
  color: var(--club-text);
}
html body.cs-club:not(.printpage) .cs-role-badge {
  border-radius: var(--dp5-r-badge);
  font-size: var(--dp5-t-micro);
  font-weight: 600;
  letter-spacing: .08em;
}

/* Chips keep the club fill when on (an allowed accent role), at the chip radius. */
html body.cs-club:not(.printpage) :is(.cs-filter-pill, .cs-switch-pill, .cs-team-pill, .cs-fchip > summary, .cs-role-pill) {
  border-radius: var(--dp5-r-chip);
  text-transform: none;
  letter-spacing: -0.01em;
  font-family: var(--dp5-font);
  font-weight: 500;
  font-size: var(--dp5-t-meta);
}
html body.cs-club:not(.printpage) .cs-sample-roles {
  border-radius: var(--dp5-r-ctl);
}

/* 11px micro label: caps at .08em, never wider. */
body:not(.printpage) .cs-sample-label {
  font-size: var(--dp5-t-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* .linklike is here too: the 24px reset above out-specified styles.css's coarse floor on the sign-in password reveal. */
@media (pointer: coarse) {
  body:not(.printpage) :is(.btn, .btn.sm, input, select, .linklike),
  html body.cs-club:not(.printpage) .cs-main :is(.btn, .btn.sm),
  html body.cs-club:not(.printpage) :is(.btn, .btn.sm) {
    min-height: 44px;
  }
}

@media (max-width: 768px) {
  body:not(.printpage) main {
    padding: 16px 16px calc(60px + env(safe-area-inset-bottom));
  }
}