/* Layout and components. Values match design/Main.dc.html; colors come from tokens.css. */

a { color: var(--you); }
a:hover { color: var(--cyan); }
button, select { font: inherit; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--you); outline-offset: 2px; }

.mono { font-family: var(--font-mono); }
.value { color: var(--fg); }
.caption { font-size: var(--text-2xs); color: var(--muted); }
.axis { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted); }
.center { text-align: center; }
.right { text-align: right; }
/* The padding gives avatar rings and lifted cells room inside the clip; the
   negative margin keeps the content where it was. */
.scroll-x { overflow-x: auto; padding: 6px; margin: 0 -6px -6px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  box-sizing: border-box;
  padding: var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: var(--gap-section);
}

/* Header */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wordmark { margin: 0; display: flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: var(--text-h1); font-weight: 600; color: var(--fg); }
.wordmark .slash { color: var(--muted); }
/* 8-bit cat on a cloud. Blinks now and then; hops on hover, in steps like a sprite. */
.logo { display: block; flex: none; image-rendering: pixelated; }
.logo-eyes { animation: blink 5.2s steps(1) infinite; }
@keyframes blink { 0%, 93%, 97%, 100% { opacity: 1; } 94%, 96% { opacity: 0; } }
.wordmark:hover .logo { animation: hop 520ms steps(4) 1; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.subtitle { font-size: var(--text-sm); color: var(--muted); }
.controls { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.seg-label { font-size: var(--text-sm); color: var(--muted); margin-right: -4px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--radius-ctl); padding: 2px; gap: 2px; background: var(--bg-inset); }
.seg button {
  min-height: 34px; padding: 0 14px; border: 0; border-radius: 4px;
  background: transparent; color: var(--fg-dim); font-size: var(--text-sm); cursor: pointer;
}
.seg button[aria-pressed="true"] { background: var(--line); color: var(--fg); font-weight: 600; }
.select {
  min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-ctl);
  background: var(--bg-inset); color: var(--fg); font-size: var(--text-sm);
}
/* Own the chevron so it gets the same 12px inset as the text. */
select.select {
  appearance: none; -webkit-appearance: none;
  padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%238089b3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
}
.tag {
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--purple);
  border: 1px solid var(--line-strong); border-radius: 4px; padding: 3px 8px;
}
.synced { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted); }
.sync-failed { color: var(--bad); }

/* KPI row */
.kpis { display: flex; flex-direction: column; gap: 8px; }
.section-head { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 0 8px; }
.legend { display: flex; gap: 16px; font-size: var(--text-xs); color: var(--muted); align-items: center; }
.legend > span { display: flex; align-items: center; gap: 6px; }
.legend-you { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--you); }
.legend-tick { width: 10px; height: 10px; border-radius: 50%; background: var(--tick); opacity: .8; box-shadow: 0 0 0 1px var(--surface); }
.legend-median { position: relative; width: 2px; height: 12px; margin-top: 4px; border-radius: 1px; background: var(--fg); }
.legend-median::before {
  content: ""; position: absolute; left: -3px; top: -5px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--fg);
}
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden;
  box-shadow: var(--panel-shadow);
}
.kpi {
  background: var(--surface); padding: 18px 20px 16px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
}
.kpi-label { font-size: var(--text-sm); color: var(--fg-dim); }
.kpi-value-row { display: flex; align-items: baseline; justify-content: center; gap: 12px; }
.kpi-value { font-family: var(--font-mono); font-size: var(--text-kpi); font-weight: 500; line-height: 1; color: var(--fg); }
.kpi-delta { font-family: var(--font-mono); font-size: var(--text-sm); }
.delta-good { color: var(--good); }
.delta-bad { color: var(--bad); }
.delta-flat { color: var(--muted); }
.strip { position: relative; align-self: stretch; height: 22px; margin-top: 8px; }
.strip-track { position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--line); border-radius: 1px; }
/* Teammates: mini avatars, dimmed so yours stays the focus. A ring in the card
   color separates them when they cluster into a stack. */
.strip-tick {
  position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: var(--tick); box-shadow: 0 0 0 1.5px var(--surface); opacity: .72;
}
.strip-tick img { display: block; width: 100%; height: 100%; border-radius: 50%; }
/* Team median: a short line with a notch on top. */
.strip-median { position: absolute; top: 3px; width: 2px; height: 16px; margin-left: -1px; border-radius: 1px; background: var(--fg); z-index: 1; box-shadow: 0 0 0 1px var(--surface); }
.strip-median::before {
  content: ""; position: absolute; left: -3px; top: -6px;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--fg);
}
.strip-you {
  position: absolute; top: 2px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%;
  background: var(--you); box-shadow: 0 0 0 2px var(--you), 0 0 0 4px var(--surface); z-index: 2;
}
.strip-you img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.kpi-foot {
  display: flex; align-self: stretch; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted);
}

/* Cards */
.columns { display: flex; flex-wrap: wrap; gap: var(--gap-section); align-items: stretch; }
.card { contain: layout paint; box-shadow: var(--panel-shadow); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: var(--pad-card); }
.card h2 { margin: 0; font-size: var(--text-h2); font-weight: 600; color: var(--fg); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.card-head.baseline { align-items: baseline; gap: 8px; flex-wrap: nowrap; }
.side { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-section); }

/* Team table */
.team { flex: 999 1 600px; min-width: 0; padding: 18px 20px 12px; }
.shade-legend { display: flex; align-items: center; gap: 6px; font-size: var(--text-2xs); color: var(--muted); }
.swatch { width: 18px; height: 14px; border-radius: var(--radius-cell); }
.team-scroll { margin-top: 4px; }
.team-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 3px; font-size: var(--text-base); }
.team-table thead tr { color: var(--muted); font-size: var(--text-xs); }
.team-table thead th { text-align: right; font-weight: 400; padding: 6px 10px; }
.team-table thead th.col-name { text-align: left; padding: 6px 8px 6px 0; }
.team-table tbody { font-family: var(--font-mono); }
.team-table td { text-align: right; padding: 9px 10px; border-radius: var(--radius-td); color: var(--fg); }
.row-name {
  text-align: left; padding: 9px 8px 9px 0; font-family: var(--font-ui);
  font-weight: 400; color: var(--fg-dim); white-space: nowrap;
}
.row-name .name { display: inline-flex; align-items: center; gap: 8px; max-width: 200px; }
.avatar { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--line); object-fit: cover; }
.avatar-sm { width: 18px; height: 18px; }
.is-me .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--you); }
.is-me { font-weight: 600; color: var(--fg); }
.median-row, .median-row td, .median-row .row-name { color: var(--muted); }

/* Score: its own color (purple) so it doesn't read as one more red/green cell.
   The bar scales on the compositor. */
.team-table th.col-score { text-align: left; padding-left: 14px; }
.team-table td.score-cell { padding: 9px 4px 9px 14px; text-align: left; white-space: nowrap; }
.score-cell { display: table-cell; }
.score-num { display: inline-block; min-width: 2.2ch; text-align: right; color: var(--purple); font-weight: 600; }
.median-row .score-num { color: var(--muted); font-weight: 400; }
.score-bar {
  display: inline-block; vertical-align: middle; width: 64px; height: 8px; margin-left: 10px;
  border-radius: 3px; background: var(--line); overflow: hidden;
  box-shadow: inset 0 1px 0 rgb(0 0 0 / .35), inset 0 -1px 0 rgb(255 255 255 / .05);
}
.score-fill {
  display: block; height: 100%; border-radius: 3px; transform-origin: left center;
  background: linear-gradient(to right, #7c5cc4, var(--purple));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), inset 0 -1px 0 rgb(0 0 0 / .3);
  transition: transform 650ms var(--spring);
}

.shade-none { background-color: transparent; }
.shade-neutral { background-color: var(--neutral-cell); }
.shade-better-1 { background-color: var(--better-1); }
.shade-better-2 { background-color: var(--better-2); }
.shade-worse-1 { background-color: var(--worse-1); }
.shade-worse-2 { background-color: var(--worse-2); }

/* Heat ramp */
.heat-0 { background-color: var(--heat-0); }
.heat-1 { background-color: var(--heat-1); }
.heat-2 { background-color: var(--heat-2); }
.heat-3 { background-color: var(--heat-3); }
.heat-4 { background-color: var(--heat-4); }

/* Subtle bevel on every colored square (heat cells, table cells, swatches, flow
   bar): a lit 1px top edge and a shaded 1px bottom edge. Empty squares invert it
   and sit recessed. Hard-edged inset lines only, so it costs almost nothing to
   paint while colors animate. */
.daily-cell, .when-cell, .swatch-sm, .swatch, .flow-seg, .flow-swatch,
.team-table td.shade-neutral, .team-table td[class*="shade-better"], .team-table td[class*="shade-worse"] {
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -1px 0 rgb(0 0 0 / .3);
}
.team-table td.shade-better-2, .team-table td.shade-worse-2 { color: #fff; }
.daily-cell.heat-0, .when-cell.heat-0, .swatch-sm.heat-0 {
  box-shadow: inset 0 1px 0 rgb(0 0 0 / .35), inset 0 -1px 0 rgb(255 255 255 / .05);
}
/* Sweep transition (static/app.js): a canvas draws the whole board while the
   real cells wait hidden underneath. */
.daily { position: relative; }
.sweep-canvas { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; }
/* Hidden cells are taken out of layout entirely: hundreds of invisible grid items
   would otherwise be re-laid out on every frame while the Σ totals count up.
   Rows keep their height so names don't shift. */
.daily.sweeping .daily-cell { display: none; }
.daily-row:not(.axis) { min-height: 22px; }

/* Hover: a filled square grows (scale runs on the compositor). Empty squares
   stay put. */
.daily-cell, .when-cell, .team-table td.shade-neutral,
.team-table td[class*="shade-better"], .team-table td[class*="shade-worse"] {
  position: relative; transform-origin: 50% 50%;
}
.daily-cell:not(.heat-0):hover, .when-cell:not(.heat-0):hover { scale: 1.18; z-index: 3; }
.team-table td.shade-neutral:hover, .team-table td[class*="shade-better"]:hover,
.team-table td[class*="shade-worse"]:hover { scale: 1.06; z-index: 3; }
/* When you work */
.when { margin-top: 14px; display: flex; flex-direction: column; gap: 3px; }
.when-row { display: grid; grid-template-columns: 34px repeat(12, minmax(0, 1fr)); gap: 3px; align-items: center; }
.when-cell { height: 18px; border-radius: var(--radius-cell); }

/* Review flow */
.flow-bar { margin-top: 14px; display: flex; gap: 2px; height: 12px; }
.flow-seg { flex-shrink: 1; flex-basis: 0; border-radius: var(--radius-cell); }
.flow-first { background-color: var(--cyan); }
.flow-approval { background-color: var(--orange); }
.flow-merge { background-color: var(--purple); }
.flow-rows { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.flow-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); color: var(--fg-dim); }
.flow-key { display: flex; align-items: center; gap: 8px; }
.flow-swatch { width: 9px; height: 9px; border-radius: 2px; }
.flow-foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  display: flex; gap: 24px; font-size: var(--text-sm); color: var(--fg-dim);
}

/* Daily activity */
.ramp { display: flex; align-items: center; gap: 4px; font-size: var(--text-2xs); color: var(--muted); }
.ramp-end:first-child { margin-right: 4px; }
.ramp-end:last-child { margin-left: 4px; }
.swatch-sm { width: 14px; height: 14px; border-radius: var(--radius-cell); }
.daily-scroll { margin-top: 8px; }
/* Match the breathing room above the title; the grid otherwise ends close to the edge. */
.daily-card { padding-bottom: 24px; }
.daily { min-width: 760px; display: flex; flex-direction: column; gap: 3px; }
.daily-row {
  display: grid; grid-template-columns: 112px repeat(var(--cols), minmax(0, 1fr)) 40px;
  gap: 3px; align-items: center;
}
.daily-name {
  display: flex; min-width: 0; align-items: center; gap: 8px; font-size: var(--text-sm);
  font-weight: 400; color: var(--fg-dim); white-space: nowrap;
}
.daily-name.is-me { font-weight: 600; color: var(--fg); }
.daily-cell { height: 22px; border-radius: var(--radius-cell); }
.daily-total { grid-column: -2 / -1; text-align: right; font-size: var(--text-sm); color: var(--fg); }

/* Darker than other captions so it sits back; a quiet reference line. */
.footnote {
  /* Tucked under the last panel (8px, like the KPI legend) with the same small inset. */
  margin: calc(8px - var(--gap-section)) 0 0; padding: 0 8px;
  font-size: var(--text-2xs); color: color-mix(in srgb, var(--muted) 55%, var(--tick));
}

/* Phones: tighter gutter so nothing forces page-level scroll. */
@media (max-width: 480px) {
  .page { padding: 20px 16px 28px; }
}

/* ---- Motion (static/app.js swaps in spring curves via linear()) ---- */
:root {
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring-soft: cubic-bezier(.22, 1, .36, 1);
}
.kpi-value { display: inline-block; }
.strip-tick, .strip-median, .strip-you { transition: left 900ms var(--spring); }
.flow-seg { transition: flex-grow 900ms var(--spring); }
.daily-cell, .when-cell { transition: background-color 300ms ease-out, scale 380ms var(--spring); }
.team-table td[class*="shade-"] { transition: background-color 300ms ease-out, scale 380ms var(--spring); }
.team-table td { transition: background-color 300ms ease-out; }
.kpi-delta { transition: color 400ms ease; }

.enter { animation: pop-in 700ms var(--spring) both; }
@keyframes pop-in {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: none; }
}
.bump { animation: bump 700ms var(--spring) both; }
@keyframes bump {
  from { transform: scale(.88); }
  to { transform: none; }
}

/* Your dot: a ring ripples out once it lands. */
.strip-you::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 2px solid var(--you); opacity: 0; pointer-events: none; inset: -3px;
}
.strip-you.ripple::after { animation: ripple 1000ms cubic-bezier(.22,1,.36,1) var(--fx-delay, 0ms) both; }
@keyframes ripple {
  from { transform: scale(1); opacity: .75; }
  to { transform: scale(3.4); opacity: 0; }
}

/* KPI card: an accent line rises and fades, green when it got better, red when worse. */
.kpi { position: relative; }
.kpi::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%;
  pointer-events: none; opacity: 0;
}
.kpi.glow-good::after { --c: var(--good); animation: glow 1500ms ease-out var(--fx-delay, 0ms) both; }
.kpi.glow-bad::after { --c: var(--bad); animation: glow 1500ms ease-out var(--fx-delay, 0ms) both; }
@keyframes glow {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}
.kpi.glow-good::after, .kpi.glow-bad::after {
  background: color-mix(in srgb, var(--c) 7%, transparent);
  box-shadow: inset 0 -2px 0 var(--c);
}
.subtitle { display: inline-block; }

/* Segmented control: a sliding thumb replaces the pressed background. */
.js .seg { position: relative; }
.js .seg button { position: relative; z-index: 1; transition: color 250ms ease; }
.js .seg button[aria-pressed="true"] { background: transparent; }
/* The thumb is a small pane of glass sliding over the buttons. */
.seg-thumb {
  position: absolute; top: 2px; bottom: 2px; left: 0; border-radius: 5px;
  background: linear-gradient(to bottom, rgb(255 255 255 / .13), rgb(255 255 255 / .04)), rgb(41 46 66 / .7);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .1),
    inset 0 1px 0 rgb(255 255 255 / .28),
    inset 0 -1px 0 rgb(0 0 0 / .3),
    0 0 0 1px rgb(122 162 247 / .22),
    0 3px 10px -3px rgb(0 0 0 / .6);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}