/* dpt.v2.css: additive "Scoreboard, floating" layer; loads after dpt.v1.css.
   Tokens are declared twice (plain light value, then light-dark()), as in v1; do not "clean up" the
   duplicates. light-dark() is a colour function: in a border or shadow it sits at the colour position,
   never around the whole value. */
:root {
  --dp2-page:          #F4F4F4;
  --dp2-page:          light-dark(#F4F4F4, #0B0D10);
  --dp2-card:          #FFFFFF;
  --dp2-card:          light-dark(#FFFFFF, #232D3B); /* AMENDMENT 15: one dark card */
  --dp2-well:          #ECEEF0;
  --dp2-well:          light-dark(#ECEEF0, #0B0D10);   /* nested inside a card */
  --dp2-glass:         #FFFFFF;
  --dp2-glass:         light-dark(#FFFFFF, rgba(255,255,255,.045));
  --dp2-hairline:      #D7DBD4;
  --dp2-hairline:      light-dark(#D7DBD4, #242B33);
  --dp2-hairline-soft: #E3E6E4;
  --dp2-hairline-soft: light-dark(#E3E6E4, #1B222B);
  /* Light only; a colour token, used as border: 1px solid var(--dp2-card-border-c). */
  --dp2-card-border-c: #D7DBD4;
  --dp2-card-border-c: light-dark(#D7DBD4, transparent);

  --dp2-text:          #141A21;
  --dp2-text:          light-dark(#141A21, #EDF1F4);
  --dp2-text-2:        #55606B;
  --dp2-text-2:        light-dark(#55606B, #93A0AB);
  --dp2-label:         #55606B;
  --dp2-label:         light-dark(#55606B, #7A8794);   /* 10px micro-labels */

  --dp2-good:          #00753C;
  --dp2-good:          light-dark(#00753C, #2BE07B);
  --dp2-warn:          #96540A;
  --dp2-warn:          light-dark(#96540A, #F0B45A);   /* rails/marks; as light TEXT prefer slate + gold mark */
  --dp2-crit:          #C42115;
  --dp2-crit:          light-dark(#C42115, #FF8078);
  --dp2-crit-chip-bg:  #FDECEA;
  --dp2-crit-chip-bg:  light-dark(#FDECEA, #3A1E1C);

  /* Gold never moves and is never text on light. */
  --dp2-gold:          #FFC72C;
  --dp2-gold-ink:      #141A21;
  /* Accent text is green on both grounds: gold is a fill or rail with ink on it, never a text colour,
     because gold means "press this". */
  --dp2-accent-text:   #00753C;
  --dp2-accent-text:   light-dark(#00753C, #2BE07B);

  /* AMENDMENT 4: white label on the deep-green fill (5.82:1); hover #005E30 (7.94:1) gets more legible,
     matching the site's button. #00A651 keeps the no-text jobs (glow, streaks, progress bars).
     As a control boundary: 5.82 light card, 5.29 light page, 3.06 dark card, 3.34 dark page. */
  --dp2-action:        #00753C;
  --dp2-action-ink:    #FFFFFF;
  --dp2-action-hover:  #005E30;
  --dp2-action-glow:   0 10px 30px rgba(0,166,81,.3);
  --dp2-action-glow:   0 10px 30px light-dark(rgba(0,166,81,.3), rgba(0,166,81,.25));
  --dp2-fab-shadow:    0 8px 24px rgba(0,166,81,.4);

  --dp2-nav-bg:        rgba(255,255,255,.94);
  --dp2-nav-bg:        light-dark(rgba(255,255,255,.94), rgba(23,27,33,.9));
  --dp2-nav-border:    #D7DBD4;
  --dp2-nav-border:    light-dark(#D7DBD4, rgba(255,255,255,.06));
  --dp2-nav-item:      #55606B;
  --dp2-nav-item:      light-dark(#55606B, #7A8794);
  /* The active tab is a state, and states are green. */
  --dp2-nav-active:    #00753C;
  --dp2-nav-active:    light-dark(#00753C, #2BE07B);
  /* No shadow on dark: light-dark() can only swap the colour, so it goes transparent. */
  --dp2-nav-shadow:    0 10px 30px rgba(13,17,23,.12);
  --dp2-nav-shadow:    0 10px 30px light-dark(rgba(13,17,23,.12), rgba(0,0,0,0));

  --dp2-r-hero: 14px;
  --dp2-r-card: 12px;
  --dp2-r-stat: 10px;
  --dp2-r-inner: 9px;
  --dp2-r-pill: 99px;
  --dp2-rail: 3px;          /* border-left status rail width */

  --dp2-fs-title: 19px;     /* Oswald 700, ls .06em, uppercase */
  --dp2-fs-sub: 10px;       /* 700, ls .22em, --dp2-accent-text */
  --dp2-fs-label: 10px;     /* 700, ls .12em, uppercase, --dp2-label */
  --dp2-fs-section: 12px;   /* Oswald 700, ls .12em */
  --dp2-fs-nav: 11px;       /* Oswald, ls .14em, uppercase */
  --dp2-fs-num-stat: 32px;  /* Oswald 700 */
  --dp2-fs-num-hero: 58px;  /* Oswald 700 */

  /* A token, not a [data-theme="dark"] rule: auto-dark sets no attribute. */
  --dp2-streak-on:     #00A651;
  --dp2-streak-on:     light-dark(#00A651, #2BE07B);
}

/* Opt-in components; never restyle app internals. */

/* Floating pill nav. Add padding-bottom:96px (+ safe area) to the page. */
.dp2-nav {
  position: fixed; bottom: calc(18px + env(safe-area-inset-bottom));
  left: 18px; right: 18px; z-index: 40;
  display: flex; justify-content: space-around; align-items: center;
  padding: 15px 8px; border-radius: var(--dp2-r-pill);
  background: var(--dp2-nav-bg); border: 1px solid var(--dp2-nav-border);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--dp2-nav-shadow);
}
.dp2-nav.has-fab { right: 88px; }
/* Desktop: the pill hugs its content, centred; phones keep the full-width bar for thumb reach. */
@media (min-width: 720px) {
  .dp2-nav {
    left: 50%; right: auto; transform: translateX(-50%);
    /* 100% not 100vw: vw includes the scrollbar. */
    width: max-content; max-width: calc(100% - 36px);
    justify-content: center; gap: 34px; padding: 15px 34px;
  }
  .dp2-nav.has-fab { right: auto; }
  .dp2-nav a, .dp2-nav button { padding: 8px 10px; }
}
.dp2-nav a, .dp2-nav button {
  font-family: var(--dp-font-heading); font-size: var(--dp2-fs-nav);
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  color: var(--dp2-nav-item); background: none; border: 0; cursor: pointer;
  padding: 8px 6px; /* keeps the 44px target with the bar's own padding */
}
.dp2-nav .is-active { color: var(--dp2-nav-active); font-weight: 700; }

.dp2-fab {
  position: fixed; right: 18px; bottom: calc(14px + env(safe-area-inset-bottom));
  width: 54px; height: 54px; border-radius: 50%; border: 0; z-index: 41;
  background: var(--dp2-action); color: var(--dp2-action-ink);
  font-size: 26px; line-height: 1; cursor: pointer; box-shadow: var(--dp2-fab-shadow);
}
.dp2-fab:hover { background: var(--dp2-action-hover); }

/* Chrome never prints, and neither does a fixed pill floating over a sheet. */
@media print {
  .dp2-nav, .dp2-fab { display: none !important; }
}

/* Primary button — white on green, bold, never below 11px. */
.dp2-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--dp2-action); color: var(--dp2-action-ink);
  font-family: var(--dp-font-heading); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  border: 0; border-radius: var(--dp2-r-inner); padding: 11px 16px; cursor: pointer;
}
.dp2-btn:hover { background: var(--dp2-action-hover); }

.dp2-hero {
  background: var(--dp2-action); color: var(--dp2-action-ink);
  border-radius: var(--dp2-r-hero); padding: 16px 18px;
  box-shadow: var(--dp2-action-glow);
}

.dp2-stat {
  background: var(--dp2-card); border: 1px solid var(--dp2-card-border-c);
  border-left: var(--dp2-rail) solid var(--dp2-good);
  border-radius: var(--dp2-r-stat); padding: 12px 14px;
}
.dp2-stat.is-warn { border-left-color: var(--dp2-gold); }
.dp2-stat.is-crit { border-left-color: var(--dp2-crit); }

.dp2-streak { display: grid; grid-template-columns: repeat(14, 1fr); gap: 3px; }
.dp2-streak > i { height: 8px; border-radius: 2px; background: var(--dp2-hairline-soft); }
.dp2-streak > i.on { background: var(--dp2-streak-on); }

/* Entrance motion: add .dp-enter to a view's direct children on initial mount only, never on
   re-render (list views guard with a data-entered flag). Portal and roster stagger, ops the hero
   card only, staff dashboard none. */
@keyframes dp-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dp-enter { animation: dp-enter .24s cubic-bezier(.2,.7,.3,1) both; }
.dp-enter:nth-child(2) { animation-delay: 35ms; }
.dp-enter:nth-child(3) { animation-delay: 70ms; }
.dp-enter:nth-child(4) { animation-delay: 105ms; }
.dp-enter:nth-child(5) { animation-delay: 140ms; }
.dp-enter:nth-child(n+6) { animation-delay: 175ms; }
@media (prefers-reduced-motion: reduce) { .dp-enter { animation: none; } }