/* Geekcon AI Studio — Productivity dashboard: KPI strip, department bars, leaderboard, time columns, run table. */

.honest { white-space: normal; text-align: left; line-height: 1.3; padding: 8px 14px; }
.kpis { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); margin: 0 0 18px; overflow: hidden; }
.kpi { position: relative; padding: clamp(16px, 1.6vw, 26px); min-width: 0; }
.kpi + .kpi { border-left: 1px solid var(--line-soft); }
.kpi dt { font: 500 14px/1.3 var(--font-display); color: var(--dim); }
.kpi dd { margin: 8px 0 4px; font: 500 clamp(30px, 1.6vw + 14px, 48px) / 1 var(--font-display); }
.kpi small { font-size: 12.5px; color: var(--faint); line-height: 1.4; display: block; }
.kpi.is-hero { background: radial-gradient(120% 120% at 0% 0%, rgba(253, 178, 25, 0.18), transparent 60%); }
.kpi.is-hero dt { color: var(--amber-100); }
.kpi.is-hero dd { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.kpi.is-hero dd .amber { font-size: clamp(48px, 3vw + 20px, 92px); line-height: 0.95; }
.kpi-unit { font: 500 clamp(17px, 0.8vw + 10px, 26px) / 1 var(--font-display); color: var(--amber-300); }
.kpi.is-hero small { color: var(--amber-100); opacity: 0.8; }

.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-bottom: 18px; }
.dash-card { padding: clamp(18px, 1.6vw, 26px); min-width: 0; }
.dash-card.is-wide { margin-bottom: 18px; }
.dash-note { margin-top: 6px; font-size: 13px; color: var(--faint); }

/* bars */
.bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(110px, 0.9fr) minmax(0, 2fr) auto; align-items: center; gap: 14px; }
.bars.is-rank .bar-row { grid-template-columns: 26px minmax(110px, 0.9fr) minmax(0, 2fr) auto; }
.bar-rank { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font: 500 13px/1 var(--font-display); color: var(--mute); border: 1px solid var(--line); }
.bar-row:nth-child(1) .bar-rank { color: var(--ink-950); background: var(--grad-btn); border-color: transparent; }
.bar-label { display: grid; min-width: 0; }
.bar-label b { font: 500 15px/1.3 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-label small { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { position: relative; height: 14px; border-radius: 8px; background: rgba(255, 241, 210, 0.06); overflow: hidden; }
.bar-track i { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(var(--v)); background: linear-gradient(90deg, color-mix(in srgb, var(--dc) 45%, transparent), var(--dc)); box-shadow: 0 0 18px -4px var(--dc); animation: grow var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes grow { from { transform: scaleX(0); } }
.bar-val { font: 500 15px/1 var(--font-display); color: var(--paper); white-space: nowrap; min-width: 70px; text-align: right; }

/* time columns */
.cols-wrap { width: 100%; overflow-x: auto; }
.cols { width: 100%; min-width: 520px; height: auto; display: block; }
.cols-axis { font: 400 11px var(--font-mono); fill: var(--faint); }
.cols-label { font: 500 12px var(--font-display); fill: var(--mute); }
.cols-val { font: 500 12px var(--font-display); fill: var(--amber-300); }
.cols .col { animation: rise var(--dur-slow) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }

/* runs table */
.tbl-wrap { overflow-x: auto; }
.runs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.runs-table th { text-align: left; font: 500 12.5px/1.3 var(--font-display); color: var(--mute); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.runs-table td { padding: 11px 10px; border-bottom: 1px solid rgba(255, 241, 210, 0.06); vertical-align: middle; }
.runs-table td.wrap { min-width: 180px; }
.runs-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.runs-table td.saved { color: var(--amber-300); font-family: var(--font-display); }
.runs-table .dim { color: var(--faint); font-size: 12px; }
.runs-table tbody tr:hover td { background: rgba(255, 241, 210, 0.03); }

@media (prefers-reduced-motion: reduce) { .bar-track i, .cols .col { animation: none; } }
@media (max-width: 1100px) {
  .kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kpi.is-hero { grid-column: 1 / -1; }
  .kpi + .kpi { border-left: 0; border-top: 1px solid var(--line-soft); }
  .dash-grid { grid-template-columns: minmax(0, 1fr); }
}