/* === Jira Dashboard — Animation Abstract === */

:root {
  --bg-0: oklch(0.16 0.02 270);
  --bg-1: oklch(0.20 0.025 268);
  --bg-2: oklch(0.24 0.03 266);
  --card: oklch(0.22 0.025 270 / 0.55);
  --card-solid: oklch(0.22 0.025 270);
  --border: oklch(1 0 0 / 0.08);
  --border-strong: oklch(1 0 0 / 0.15);
  --ink: oklch(0.97 0.005 90);
  --ink-2: oklch(0.78 0.01 90);
  --ink-3: oklch(0.58 0.01 90);
  --violet: oklch(0.72 0.18 295);
  --cyan: oklch(0.82 0.13 200);
  --lime: oklch(0.84 0.18 130);
  --coral: oklch(0.72 0.18 25);
  --amber: oklch(0.82 0.15 75);
  --shadow: 0 30px 60px -20px oklch(0 0 0 / 0.5);

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-0);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============ Animated abstract background ============ */
.bg-stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.bg-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 20% 0%, oklch(0.35 0.12 295 / 0.35), transparent 60%),
    radial-gradient(900px 500px at 80% 10%, oklch(0.35 0.1 200 / 0.25), transparent 60%),
    radial-gradient(1000px 700px at 60% 100%, oklch(0.35 0.1 130 / 0.18), transparent 60%);
  filter: blur(40px);
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: floatBlob 24s ease-in-out infinite;
}
.blob.b1 { width: 520px; height: 520px; background: var(--violet); top: -120px; left: -100px; animation-duration: 28s; }
.blob.b2 { width: 460px; height: 460px; background: var(--cyan); top: 30%; right: -120px; animation-duration: 34s; animation-delay: -6s; }
.blob.b3 { width: 380px; height: 380px; background: var(--lime); bottom: -120px; left: 30%; animation-duration: 30s; animation-delay: -10s; }
.blob.b4 { width: 320px; height: 320px; background: var(--coral); top: 50%; left: 40%; animation-duration: 26s; animation-delay: -14s; opacity: 0.35; }

@keyframes floatBlob {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(60px,-40px,0) scale(1.08); }
  66%      { transform: translate3d(-40px,50px,0) scale(0.95); }
}

.grid-noise {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(oklch(1 0 0 / 0.025) 1px, transparent 1px),
    linear-gradient(90deg, oklch(1 0 0 / 0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 30%, black, transparent 75%);
}

/* Floating particles (pure CSS) */
.particles { position: absolute; inset: 0; }
.particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: oklch(1 0 0 / 0.6);
  animation: rise 18s linear infinite;
}
@keyframes rise {
  0%   { transform: translateY(20vh) translateX(0); opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-110vh) translateX(40px); opacity: 0; }
}

/* ============ Layout ============ */
.app {
  position: relative;
  z-index: 1;
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 36px 56px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand-mark {
  width: 44px; height: 44px;
  border-radius: 14px;
  background: conic-gradient(from 210deg, var(--violet), var(--cyan), var(--lime), var(--coral), var(--violet));
  position: relative;
  box-shadow: 0 0 30px oklch(0.7 0.2 295 / 0.45);
  animation: spinSlow 18s linear infinite;
}
.brand-mark::after {
  content: "";
  position: absolute; inset: 6px;
  border-radius: 9px;
  background: var(--bg-0);
}
.brand-mark::before {
  content: "";
  position: absolute; inset: 14px;
  border-radius: 4px;
  background: var(--ink);
  z-index: 1;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

.brand h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.brand p {
  margin: 2px 0 0;
  color: var(--ink-3);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--ink-2);
  font-size: 12px;
  font-family: var(--font-mono);
  backdrop-filter: blur(20px);
}
.pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 10px var(--lime);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* ============ Filter strip ============ */
.filter-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.filter-strip .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.sprint-picker {
  display: flex;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  backdrop-filter: blur(20px);
}
.sprint-tab {
  padding: 10px 18px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: var(--ink-2);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.sprint-tab:hover:not(.active) {
  color: var(--ink);
  background: oklch(1 0 0 / 0.08);
  box-shadow:
    inset 0 0 0 1px oklch(0.7 0.18 295 / 0.45),
    0 6px 18px -10px oklch(0.7 0.18 295 / 0.55);
  transform: translateY(-1px);
}
.sprint-tab:hover:not(.active) .state-dot {
  transform: scale(1.25);
}
.sprint-tab:active:not(.active) {
  transform: translateY(0);
}
.sprint-tab .state-dot {
  transition: transform 0.2s ease;
}
.sprint-tab.active {
  background: linear-gradient(135deg, var(--violet), var(--cyan));
  color: white;
  box-shadow: 0 8px 24px -8px var(--violet);
}
.sprint-tab.active:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 34px -8px var(--violet),
    0 0 0 2px oklch(1 0 0 / 0.18),
    inset 0 1px 0 oklch(1 0 0 / 0.35);
  filter: brightness(1.15) saturate(1.1);
}
.sprint-tab.active:hover .state-dot {
  box-shadow: 0 0 10px oklch(1 0 0 / 0.8);
  transform: scale(1.3);
}
.sprint-tab .state-dot {
  width: 6px; height: 6px; border-radius: 50%;
}
.sprint-tab .state-dot.active { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.sprint-tab .state-dot.closed { background: var(--ink-3); }
.sprint-tab .state-dot.future { background: var(--amber); }

/* ============ Cards ============ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 22px;
  backdrop-filter: blur(24px);
  position: relative;
  overflow: hidden;
}
.card-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.card-title .accent {
  width: 18px; height: 1px;
  background: linear-gradient(90deg, var(--violet), transparent);
}

/* ============ Sprint info row ============ */
.sprint-hero {
  display: grid;
  grid-template-columns: 0.85fr 0.95fr 1.25fr;
  gap: 14px;
  margin-bottom: 16px;
  align-items: stretch;
}
.sprint-card {
  padding: 16px 18px;
  background:
    linear-gradient(135deg, oklch(0.28 0.05 295 / 0.4), oklch(0.24 0.04 260 / 0.3)),
    var(--card);
  overflow: visible;
}
.sprint-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 14px;
}
.sprint-card .name {
  font-family: var(--font-mono);
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cyan);
}

/* Goal popover trigger */
.goal-info-wrap {
  position: relative;
  flex-shrink: 0;
}
.goal-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: oklch(1 0 0 / 0.06);
  border: 1px solid var(--border);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px 4px 7px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.goal-info-btn:hover {
  background: oklch(1 0 0 / 0.1);
  color: var(--ink);
  border-color: var(--border-strong);
}
.goal-info-btn svg { display: block; }
.goal-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  max-width: 360px;
  background: var(--card-solid);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 16px 40px oklch(0 0 0 / 0.45);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.goal-popover.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.goal-popover-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.goal-popover-text {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.sprint-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.sprint-meta .meta-item:nth-child(n+3) {
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.meta-item .meta-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.meta-item .meta-value {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.meta-item .meta-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* Stat tiles (middle column of hero) */
.stat-grid {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 8px;
}
.stat-tile {
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  min-height: 0;
  position: relative;
  overflow: hidden;
}
.stat-tile .stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.stat-tile .stat-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-tile .stat-value .unit {
  font-size: 14px;
  color: var(--ink-3);
  margin-left: 4px;
}
.stat-tile .stat-value-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.stat-tile .stat-pct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.stat-tile .stat-bar {
  height: 4px;
  background: oklch(1 0 0 / 0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.stat-tile .stat-bar > span {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  border-radius: 999px;
  transform-origin: left;
  animation: growBar 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes growBar { from { transform: scaleX(0); } }

/* ============ Charts row ============ */
.row {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}
.row.cols-3 { grid-template-columns: 1.1fr 1fr 1fr; }
.row.cols-2 { grid-template-columns: 1fr 1fr; }
.row.cols-2-wide { grid-template-columns: 1.5fr 1fr; }

.chart-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
}
.chart-wrap > svg {
  width: 100%;
  height: 230px;
  flex-shrink: 0;
}
.chart-wrap.tall > svg { height: 270px; }

.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
  margin-top: 8px;
}
.legend-item { display: inline-flex; align-items: center; gap: 8px; }
.legend-sw { width: 12px; height: 4px; border-radius: 2px; }
.legend-sw.dashed { background-image: repeating-linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px); height: 2px; }

/* Donut */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
}
.donut-wrap svg { flex-shrink: 0; }
.sprint-hero .donut-wrap {
  flex-direction: row;
  gap: 20px;
  align-items: center;
}
.sprint-hero .donut-wrap svg {
  width: 190px;
  height: 190px;
  flex-shrink: 0;
}
.sprint-hero .donut-legend {
  flex: 1;
  gap: 6px;
}
.sprint-hero .donut-legend-row {
  padding-bottom: 8px;
  font-size: 13px;
  border-bottom: none;
}
.sprint-hero .donut-legend-row:not(:last-child) {
  border-bottom: 1px dashed var(--border);
}
.donut-center-val {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
}
.donut-center-lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.donut-legend-row {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.donut-legend-row:last-child { border-bottom: none; padding-bottom: 0; }
.donut-legend-row .left { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.donut-legend-row .sw { width: 10px; height: 10px; border-radius: 3px; }
.donut-legend-row .right { font-family: var(--font-mono); color: var(--ink-2); font-size: 13px; }
.donut-legend-row .right .big { color: var(--ink); font-weight: 600; }

/* ============ Workload table ============ */
.workload-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.workload-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.workload-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  vertical-align: middle;
}
.workload-table tbody tr {
  cursor: pointer;
  transition: background 0.2s;
}
.workload-table tbody tr:hover { background: oklch(1 0 0 / 0.025); }
.workload-table tbody tr.expanded { background: oklch(1 0 0 / 0.03); }
.workload-table tbody tr.expand-detail { background: oklch(0 0 0 / 0.2); }
.workload-table tbody tr.expand-detail td { padding: 0; }

.user-cell {
  display: flex; align-items: center; gap: 12px;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 12px;
  font-family: var(--font-display);
  box-shadow: 0 4px 12px -4px currentColor;
}
.user-cell .name { font-weight: 500; }
.user-cell .sub { color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; }

.hbar {
  height: 6px; border-radius: 999px; overflow: hidden;
  background: oklch(1 0 0 / 0.06);
  display: flex;
  width: 100%;
  max-width: 220px;
}
.hbar > span {
  display: block; height: 100%;
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.hbar .seg-done { background: var(--lime); }
.hbar .seg-inprog { background: var(--amber); }
.hbar .seg-todo { background: oklch(1 0 0 / 0.12); }
.hbar-row {
  display: flex; align-items: center; gap: 12px;
}
.hbar-row .num { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); min-width: 64px; }

.expand-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  transition: transform 0.25s;
}
.expanded .expand-icon { transform: rotate(90deg); color: var(--ink); }

.issue-list {
  padding: 8px 16px 18px 64px;
}
.issue-row {
  display: grid;
  grid-template-columns: 90px 1fr 170px 100px 100px 100px;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  align-items: center;
  font-size: 12px;
}
.issue-row:last-child { border-bottom: none; }
.issue-row .key {
  font-family: var(--font-mono);
  color: var(--cyan);
  font-size: 11px;
}
.issue-row .summary { color: var(--ink-2); }
.issue-row .num-col { font-family: var(--font-mono); color: var(--ink-2); text-align: right; font-size: 12px; }
.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.status-chip .sdot { width: 6px; height: 6px; border-radius: 50%; }
.status-chip.todo { background: oklch(0.5 0.01 270 / 0.2); color: var(--ink-2); }
.status-chip.todo .sdot { background: var(--ink-3); }
.status-chip.inprogress { background: oklch(0.55 0.15 75 / 0.2); color: var(--amber); }
.status-chip.inprogress .sdot { background: var(--amber); }
.status-chip.done { background: oklch(0.55 0.15 130 / 0.18); color: var(--lime); }
.status-chip.done .sdot { background: var(--lime); }

/* ============ Data source panel ============ */
.format-panel {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
.fmt {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: oklch(0 0 0 / 0.15);
  position: relative;
}
.fmt.recommended {
  border-color: oklch(0.84 0.18 130 / 0.5);
  background: linear-gradient(135deg, oklch(0.5 0.18 130 / 0.12), oklch(0 0 0 / 0.2));
}
.fmt .fmt-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.fmt .fmt-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--lime);
  color: var(--bg-0);
  letter-spacing: 0.05em;
}
.fmt .fmt-note { color: var(--ink-3); font-size: 11px; line-height: 1.4; }
.fmt .fmt-score {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
  margin-top: 8px;
  display: flex; gap: 4px;
}
.score-dot { width: 8px; height: 8px; border-radius: 50%; background: oklch(1 0 0 / 0.08); }
.score-dot.on { background: var(--lime); }

.api-flow {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 14px;
  background: oklch(0 0 0 / 0.2);
  border-radius: 12px;
  border: 1px dashed var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
}
.api-flow .step {
  padding: 6px 12px;
  background: oklch(1 0 0 / 0.05);
  border-radius: 6px;
  color: var(--ink-2);
}
.api-flow .arrow { color: var(--ink-3); }
.api-flow .endpoint { color: var(--cyan); }

/* ============ SVG chart styles ============ */
.axis-text { fill: var(--ink-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; }
.grid-line { stroke: oklch(1 0 0 / 0.06); stroke-width: 1; }
.line-ideal { stroke: oklch(1 0 0 / 0.35); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.line-actual { stroke: var(--coral); stroke-width: 2.5; fill: none; filter: drop-shadow(0 0 8px oklch(0.7 0.2 25 / 0.5)); }
.line-scope { stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
.line-completed { stroke: var(--lime); stroke-width: 2.5; fill: none; filter: drop-shadow(0 0 8px oklch(0.7 0.2 130 / 0.5)); }
.area-actual { fill: var(--coral); opacity: 0.12; }
.area-completed { fill: var(--lime); opacity: 0.12; }

.cfd-done { fill: var(--lime); opacity: 0.85; }
.cfd-inprog { fill: var(--amber); opacity: 0.85; }
.cfd-todo { fill: oklch(0.5 0.02 270); opacity: 0.6; }

.control-pt { fill: var(--violet); stroke: white; stroke-width: 1; }
.control-pt-outlier { fill: var(--coral); stroke: white; stroke-width: 1.5; }
.control-mean { stroke: var(--cyan); stroke-width: 1.5; stroke-dasharray: 3 3; }
.control-band { fill: var(--violet); opacity: 0.08; }

.line-draw {
  animation: dash 1.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes dash {
  from { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
  to   { stroke-dasharray: 1200; stroke-dashoffset: 0; }
}

.area-fade {
  animation: fadeIn 1s ease-out 0.4s;
}
@keyframes fadeIn {
  from { opacity: 0; }
}

.bar-rise {
  transform-origin: bottom;
  animation: barRise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes barRise { from { transform: scaleY(0); } }

/* ============ Footer ============ */
.footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 12px;
}

@media (max-width: 1100px) {
  .row.cols-3 { grid-template-columns: 1fr 1fr; }
  .row.cols-2-wide { grid-template-columns: 1fr; }
  .sprint-hero { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr; }
}

/* ============ Light theme (.theme-light) ============ */
/* On the pale ivory background, the dark-mode blob halos + screen blend wash
   info out. We dim the abstract background and make cards solid so charts
   and tables stay legible. */
.theme-light body { background: var(--bg-0); }

.theme-light .bg-stage::after {
  opacity: 0.45;
  filter: blur(60px);
}
.theme-light .blob {
  opacity: 0.18;
  mix-blend-mode: multiply;
  filter: blur(80px);
}
.theme-light .blob.b4 { opacity: 0.12; }
.theme-light .grid-noise {
  background-image:
    linear-gradient(oklch(0.2 0.01 270 / 0.04) 1px, transparent 1px),
    linear-gradient(90deg, oklch(0.2 0.01 270 / 0.04) 1px, transparent 1px);
}
.theme-light .particle { background: oklch(0.3 0.02 270 / 0.5); }

.theme-light .card {
  background: oklch(1 0 0 / 0.92);
  border-color: oklch(0.2 0.01 270 / 0.1);
  box-shadow: 0 1px 2px oklch(0.2 0.01 270 / 0.04), 0 12px 32px -16px oklch(0.2 0.01 270 / 0.12);
}
.theme-light .sprint-card {
  background:
    linear-gradient(135deg, oklch(0.95 0.04 295 / 0.45), oklch(0.96 0.03 200 / 0.35)),
    oklch(1 0 0 / 0.9);
}
.theme-light .sprint-card .name { color: oklch(0.5 0.16 250); }

.theme-light .pill {
  background: oklch(1 0 0 / 0.85);
  color: var(--ink-2);
}
.theme-light .brand-mark::after { background: oklch(1 0 0); }
.theme-light .brand-mark::before { background: var(--ink); }

.theme-light .sprint-picker { background: oklch(1 0 0 / 0.85); }
.theme-light .sprint-tab { color: var(--ink-2); }
.theme-light .sprint-tab:hover:not(.active) {
  background: oklch(0.7 0.18 295 / 0.1);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px oklch(0.55 0.2 295 / 0.5),
    0 6px 18px -10px oklch(0.55 0.2 295 / 0.5);
}
.theme-light .sprint-tab.active { color: white; }

.theme-light .stat-tile .stat-bar { background: oklch(0.2 0.01 270 / 0.08); }
.theme-light .goal-info-btn {
  background: oklch(0.2 0.01 270 / 0.05);
  border-color: oklch(0.2 0.01 270 / 0.12);
  color: var(--ink-2);
}
.theme-light .goal-info-btn:hover {
  background: oklch(0.2 0.01 270 / 0.08);
  color: var(--ink);
  border-color: oklch(0.2 0.01 270 / 0.2);
}
.theme-light .goal-popover {
  background: oklch(1 0 0);
  border-color: oklch(0.2 0.01 270 / 0.15);
  box-shadow: 0 16px 40px oklch(0.2 0.01 270 / 0.18);
}
.theme-light .hbar { background: oklch(0.2 0.01 270 / 0.08); }
.theme-light .hbar .seg-todo { background: oklch(0.2 0.01 270 / 0.18); }

.theme-light .workload-table tbody tr:hover { background: oklch(0.2 0.01 270 / 0.025); }
.theme-light .workload-table tbody tr.expanded { background: oklch(0.55 0.16 250 / 0.05); }
.theme-light .workload-table tbody tr.expand-detail { background: oklch(0.95 0.005 270 / 0.7); }

.theme-light .status-chip.todo { background: oklch(0.5 0.01 270 / 0.1); color: var(--ink-2); }
.theme-light .status-chip.inprogress { background: oklch(0.7 0.15 75 / 0.18); color: oklch(0.55 0.18 60); }
.theme-light .status-chip.done { background: oklch(0.7 0.15 130 / 0.2); color: oklch(0.45 0.18 140); }

.theme-light .grid-line { stroke: oklch(0.2 0.01 270 / 0.08); }
.theme-light .axis-text { fill: var(--ink-3); }
.theme-light .line-ideal { stroke: oklch(0.2 0.01 270 / 0.35); }
.theme-light .line-actual { stroke: oklch(0.6 0.18 25); filter: none; }
.theme-light .line-completed { stroke: oklch(0.55 0.18 140); filter: none; }
.theme-light .line-scope { stroke: oklch(0.55 0.13 220); }
.theme-light .area-actual { fill: oklch(0.6 0.18 25); }
.theme-light .area-completed { fill: oklch(0.55 0.18 140); }
.theme-light .control-mean { stroke: oklch(0.55 0.13 220); }
.theme-light .control-pt { fill: oklch(0.55 0.18 295); stroke: white; }
.theme-light .control-pt-outlier { fill: oklch(0.6 0.18 25); }
.theme-light .cfd-done { fill: oklch(0.7 0.16 140); }
.theme-light .cfd-inprog { fill: oklch(0.75 0.15 75); }
.theme-light .cfd-todo { fill: oklch(0.6 0.02 270); opacity: 0.45; }

.theme-light .fmt { background: oklch(0.97 0.005 270 / 0.6); }
.theme-light .fmt.recommended { background: linear-gradient(135deg, oklch(0.92 0.12 140 / 0.25), oklch(0.97 0.005 270 / 0.6)); }
.theme-light .api-flow { background: oklch(0.95 0.005 270 / 0.6); }
.theme-light .api-flow .step { background: oklch(1 0 0 / 0.7); }
.theme-light .api-flow .endpoint { color: oklch(0.5 0.15 220); }