@layer views {
/* Workspace: sprint strip, view tabs, filter bar */
.sprint {
  display: flex; align-items: center; gap: 24px; padding: 12px 18px; border-bottom: 1px solid var(--line); flex: none; flex-wrap: wrap; row-gap: 12px;
  background: radial-gradient(1200px 120px at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--bg-1);
}
.sp-id { display: flex; align-items: center; gap: 12px; }
.sp-name { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-19); letter-spacing: -0.01em; line-height: 1.05; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.sp-dates { font-size: var(--fs-11-5); color: var(--fg-3); margin-top: 3px; white-space: nowrap; }

.days { display: flex; gap: 4px; }
.day { width: 50px; height: 44px; border-radius: var(--r-8); background: var(--bg-3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: var(--fs-10); color: var(--fg-3); flex: none; }
.day b { font-size: var(--fs-12); color: var(--fg-2); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; }
.day.past { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 16%, transparent), color-mix(in srgb, var(--accent-2) 8%, transparent)); color: var(--fg-2); }
.day.today { background: var(--accent); color: var(--fg-on-accent); }
.day.today b { color: var(--fg-on-accent); }
.day .pips { display: flex; gap: 2px; height: 4px; align-items: center; }
.day .pips i { width: 3px; height: 3px; border-radius: var(--r-round); background: currentColor; opacity: 0.75; }

.sp-stats { display: flex; gap: 18px; }
.sp-bar { flex: 1; min-width: 180px; max-width: 360px; }
.sp-bar .dist { width: 100%; height: 8px; border-radius: var(--r-4); }
.sp-bar .cap { display: flex; justify-content: space-between; font-size: var(--fs-10-5); color: var(--fg-3); margin-top: 6px; gap: 10px; }
.sp-bar .cap b { color: var(--fg-2); font-weight: 600; }

.goal-chip { display: flex; align-items: center; gap: 10px; background: var(--bg-3); border: 1px solid var(--line-2); border-radius: var(--r-11); padding: 7px 12px 7px 8px; text-align: left; }
.goal-chip:hover { border-color: var(--fg-4); }
.goal-chip .t { font-size: var(--fs-10); color: var(--fg-3); letter-spacing: 0.06em; text-transform: uppercase; }
.goal-chip .v { font-weight: 600; white-space: nowrap; }

.load { display: flex; gap: 9px; align-items: flex-end; margin-left: auto; }
.ld { display: flex; flex-direction: column; align-items: center; gap: 3px; position: relative; }
.ld .num { font-size: var(--fs-10); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.ld.over .num { color: var(--bad); font-weight: 700; }
.ld .bar { width: 24px; height: 5px; border-radius: var(--r-3); background: var(--bg-5); overflow: hidden; }
.ld .bar i { display: block; height: 100%; background: var(--ok); }
.ld.hi .bar i { background: var(--warn); }
.ld.over .bar i { background: var(--bad); }
.ld .tip { left: 50%; transform: translateX(-50%); bottom: calc(100% + 6px); top: auto; }
.ld:hover .tip { opacity: 1; }

.sprint-empty { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); color: var(--fg-3); }

.views { display: flex; align-items: center; gap: 2px; padding: 0 14px; height: 46px; border-bottom: 1px solid var(--line); flex: none; overflow-x: auto; }
.tab { height: 30px; padding: 0 11px; border-radius: var(--r-7); display: flex; align-items: center; gap: 7px; color: var(--fg-3); font-weight: 500; white-space: nowrap; }
.tab:hover { color: var(--fg); background: var(--bg-3); }
.tab.on, .tab.active { color: var(--fg); background: var(--sel); }
.views .right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* The expand button that shows Board, Timeline and Whiteboard; a lock marks views only you see. */
.tab.fold { color: var(--fg-4); gap: 4px; font-size: var(--fs-12); padding: 0 8px; }
.tab .tab-lock { color: var(--fg-4); }

.filters { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex: none; }
/* Save, Reset and the two switches stay together on the right, and wrap to the next line together when space runs out. */
.filters .fb-right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; }
.filters .lbl { font-size: var(--fs-11); color: var(--fg-4); margin-right: 2px; white-space: nowrap; }
.filters .vr { width: 1px; height: 18px; background: var(--line-2); margin: 0 4px; flex: none; }
.filters .view-cog { width: 30px; height: 30px; color: var(--fg-3); }
/* "Filtering": the chips fold away behind it; a count shows filters that are on while folded. */
.filters .fold-btn { height: 28px; padding: 0 8px; border-radius: var(--r-7); display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); font-size: var(--fs-12); font-weight: 500; }
.filters .fold-btn:hover { background: var(--bg-3); color: var(--fg); }
.filters .fold-btn .chev { transition: transform var(--t-fast); }
.filters .fold-btn.open .chev { transform: rotate(90deg); }
.filters .fold-n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-5); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-10-5); display: grid; place-items: center; }
.filters .view-cog:hover { background: var(--bg-3); color: var(--fg); }

@media (max-width: 1820px) { .sprint .goal-chip { display: none; } }
@media (max-width: 1480px) { .sprint .sp-bar { display: none; } }
@media (max-width: 1100px) { .sprint .load { display: none; } }
@media (max-width: 560px) { .days .day { width: 38px; } }

/* Shown under the table when the list hit its row cap. */
.list-cap { padding: 12px 18px 18px; color: var(--fg-3); font-size: var(--fs-12); text-align: center; }
.filters .spacer { width: 10px; flex: none; }
}