/*
 * components.css — Executive Command Center Component Vocabulary.
 *
 * Density with calm, sharp architectural hierarchy, no toy decorations,
 * high-contrast data tables, fluid responsive layouts, and tactile controls.
 */

/* ═══ App Shell & Structure ═════════════════════════════════════════════ */

.app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
}

.app__main {
  flex: 1 1 auto;
  padding: 16px 32px 64px;
  max-width: 1760px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .app__main { padding: 12px 20px 48px; }
}

/* ═══ Top Bar ═══════════════════════════════════════════════════════════ */

.topbar {
  height: 56px;
  flex: 0 0 56px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
  max-width: 1760px;
  width: 100%;
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
  background: var(--canvas);
  position: sticky;
  top: 0;
  z-index: 40;
}

.wordmark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: border-color 150ms ease, background 150ms ease;
}
.wordmark::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.wordmark:hover {
  border-color: var(--accent-border);
}

.nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.nav__item {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 160ms ease-out;
  white-space: nowrap;
}
.nav__item:hover {
  color: var(--ink);
  background: var(--surface-hover);
}
.nav__item[aria-current="page"] {
  background: var(--surface-dark);
  color: var(--on-dark);
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(20, 24, 35, 0.12);
}

.topbar__right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Omnibox (Command Palette) ────────────────────────────────────────── */

.omnibox { position: relative; }

.omnibox__field {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 260px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  transition: width 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.omnibox__field:focus-within,
.omnibox--open .omnibox__field {
  width: 440px;
  background: var(--surface);
  border-color: var(--accent-border);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

@media (max-width: 1200px) {
  .omnibox__field { width: 180px; }
  .omnibox__field:focus-within,
  .omnibox--open .omnibox__field { width: 340px; }
}

.omnibox__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  color: var(--ink);
}
.omnibox__input::placeholder { color: var(--ink-muted); }
.omnibox__input:focus { outline: none; }

.omnibox__hint {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0.04em;
}

.omnibox__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 480px;
  max-height: 72vh;
  overflow-y: auto;
  background: var(--surface-float);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  padding: 10px;
  z-index: 70;
  backdrop-filter: blur(12px);
}

.omnibox__group + .omnibox__group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.omnibox__grouphead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
}

.omnibox__result {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-chip);
  cursor: pointer;
  transition: all 120ms ease-out;
}
.omnibox__result:hover,
.omnibox__result[data-active="true"] {
  background: var(--surface-hover);
  border-color: var(--border);
}
.omnibox__result mark {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-radius: 2px;
  padding: 0 2px;
}
.omnibox__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 4px 8px;
}

/* ── Top-right Utility Buttons ────────────────────────────────────────── */

.icon-btn {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 160ms ease-out;
}
.icon-btn:hover {
  color: var(--ink);
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.icon-btn--accent {
  background: var(--accent);
  color: var(--accent-on-fill);
  border-color: var(--accent);
  font-weight: 600;
}
.icon-btn--accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.icon-btn__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #FFFFFF;
  font-size: 9.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--canvas);
}

.icon-btn__sun, .icon-btn__moon { transition: opacity 160ms ease; position: absolute; }
[data-theme="dark"] .icon-btn__sun  { opacity: 1; }
[data-theme="dark"] .icon-btn__moon { opacity: 0; }
[data-theme="light"] .icon-btn__sun  { opacity: 0; }
[data-theme="light"] .icon-btn__moon { opacity: 1; }

.icon { width: 15px; height: 15px; display: block; fill: currentColor; }
.icon--sm { width: 13px; height: 13px; }

/* ── Sub-tabs Navigation ──────────────────────────────────────────────── */

.subtabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 32px 10px;
  max-width: 1760px;
  width: 100%;
  margin: 0 auto;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}
.subtabs:empty { display: none; }

.subtab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-soft);
  border-radius: var(--radius-pill);
  cursor: pointer;
  white-space: nowrap;
  transition: all 150ms ease;
}
.subtab:hover {
  color: var(--ink);
  background: var(--surface-hover);
}
.subtab[aria-current="page"] {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  font-weight: 600;
}

@media (max-width: 1024px) {
  .subtabs { padding: 8px 20px 10px; }
}

/* ═══ Cards ═════════════════════════════════════════════════════════════ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 22px;
  min-width: 0;
  position: relative;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.card:hover {
  border-color: var(--border-strong);
}

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.card__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card__sub {
  font-size: 11.5px;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* Emphasis Card (The Crextio Deep Charcoal Card) */
.emphasis-card {
  background: var(--surface-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-card);
  padding: 22px 24px;
  box-shadow: var(--shadow-card);
  min-width: 0;
  position: relative;
}
.emphasis-card .card__title {
  color: var(--on-dark);
  font-weight: 500;
  font-size: 16px;
}
.emphasis-card .card__sub,
.emphasis-card .t-caption,
.emphasis-card .t-label {
  color: var(--on-dark-muted);
}
.emphasis-card__count {
  font-size: 16px;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}

/* ── Checklist / Needs Attention Rows ─────────────────────────────────── */

.checklist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 480px;
  overflow-y: auto;
}
.checklist__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-chip);
  border: 1px solid transparent;
  background: var(--surface-sunk);
  transition: all 150ms ease-out;
}
.checklist__row:hover {
  background: var(--surface-hover);
  border-color: var(--border);
}
.checklist__chip {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-chip);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ink-soft);
}
.checklist__body { flex: 1 1 auto; min-width: 0; }
.checklist__title {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.checklist__meta {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.checklist__figure {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-muted);
}
.checklist__row--done {
  opacity: 0.55;
}
.checklist__row--done .checklist__title {
  text-decoration: line-through;
}

/* Emphasis Card nested checklist (Crextio Onboarding Task styling) */
.emphasis-card .checklist {
  gap: 6px;
}
.emphasis-card .checklist__row {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 12px;
}
.emphasis-card .checklist__row:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.12);
}
.emphasis-card .checklist__chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid transparent;
  border-radius: 50%;
  color: var(--on-dark);
}
.emphasis-card .checklist__title {
  color: var(--on-dark);
  font-weight: 500;
}
.emphasis-card .checklist__meta {
  color: rgba(255, 255, 255, 0.6);
}
.emphasis-card .check-circle {
  border-color: rgba(255, 255, 255, 0.3);
}
.emphasis-card .check-circle[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
}
.emphasis-card .check-circle[aria-pressed="true"] svg {
  color: var(--accent-on-fill);
  opacity: 1;
}

.check-circle {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-muted);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 150ms ease;
}
.check-circle svg { opacity: 0; color: var(--accent-on-fill); }
.check-circle[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
}
.check-circle[aria-pressed="true"] svg { opacity: 1; }

.emphasis-card .link { color: var(--on-dark); }
.emphasis-card .link:hover { color: var(--accent); }
.emphasis-card .link--muted { color: var(--on-dark-muted); }

/* ── Status Pills & Badges ────────────────────────────────────────────── */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.status-pill--ok {
  background: var(--ok-soft);
  color: var(--ok-ink);
  border-color: var(--ok-border);
}
.status-pill--warn {
  background: var(--warn-soft);
  color: var(--warn-ink);
  border-color: var(--warn-border);
}
.status-pill--danger {
  background: var(--danger-soft);
  color: var(--danger-ink);
  border-color: var(--danger-border);
}
.status-pill--info {
  background: var(--info-soft);
  color: var(--info-ink);
  border-color: var(--info-border);
}
.status-pill--accent {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent-border);
  font-weight: 600;
}
.status-pill--outline {
  background: transparent;
  color: var(--ink-muted);
  border-color: var(--border);
}
.status-pill__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Freshness Pills ──────────────────────────────────────────────────── */

.freshness {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-chip);
  line-height: 1;
  border: 1px solid transparent;
}
.freshness--fresh {
  background: var(--ok-soft);
  color: var(--ok-ink);
  border-color: var(--ok-border);
}
.freshness--aging {
  background: var(--warn-soft);
  color: var(--warn-ink);
  border-color: var(--warn-border);
}
.freshness--stale {
  background: var(--danger-soft);
  color: var(--danger-ink);
  border-color: var(--danger-border);
}
.freshness--cold, .freshness--never {
  background: var(--surface-sunk);
  color: var(--ink-muted);
  border-color: var(--border);
}

/* ── Chips ────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--radius-chip);
  background: var(--surface-sunk);
  color: var(--ink-soft);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 140ms ease;
}
.chip:hover {
  color: var(--ink);
  background: var(--surface-hover);
  border-color: var(--border-strong);
}
.chip[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  border-color: var(--accent-border);
  font-weight: 600;
}
.chip--static { cursor: default; }
.chip__x { font-size: 12px; opacity: 0.6; }
.chip__x:hover { opacity: 1; }

/* ── Buttons ──────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 150ms ease;
  white-space: nowrap;
}
.btn:hover {
  background: var(--surface-hover);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
.btn--primary {
  background: var(--accent);
  color: var(--accent-on-fill);
  border-color: var(--accent);
  font-weight: 600;
}
.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn--dark {
  background: var(--surface-dark);
  color: var(--on-dark);
  border-color: var(--border-strong);
}
.btn--dark:hover {
  background: #272C35;
  border-color: #272C35;
}
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-soft);
}
.btn--ghost:hover {
  background: var(--surface-hover);
  border-color: var(--border);
}
.btn--sm {
  height: 28px;
  padding: 0 12px;
  font-size: 11.5px;
}

/* ── Filters & Search Box ─────────────────────────────────────────────── */

.filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.filterbar__count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.searchbox {
  height: 30px;
  padding: 0 10px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  font-size: 12.5px;
  color: var(--ink);
  min-width: 180px;
  transition: border-color 150ms ease;
}
.searchbox:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 2px var(--focus-ring);
}
.searchbox::placeholder { color: var(--ink-muted); }

.select {
  height: 30px;
  padding: 0 8px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  font-size: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color 150ms ease;
}
.select:focus {
  outline: none;
  border-color: var(--accent-border);
}

/* ═══ Precision Data Table ═════════════════════════════════════════════ */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-chip);
  border: 1px solid var(--border);
  background: var(--surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: left;
}

.table th {
  background: var(--surface-sunk);
  color: var(--ink-muted);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  user-select: none;
}
.table th button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.table th button:hover { color: var(--ink); }

.table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--ink-soft);
  white-space: nowrap;
  vertical-align: middle;
}
.table td.is-wide {
  white-space: normal;
  min-width: 140px;
}
.table tbody tr {
  transition: background 120ms ease;
}
.table tbody tr:hover {
  background: var(--surface-hover);
}
.table tbody tr:last-child td {
  border-bottom: none;
}

/* ═══ Page Header & Metric Bar ══════════════════════════════════════════ */

.pagehead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.pagehead__left {
  flex: 1 1 auto;
  min-width: 0;
}
.pagehead__titlerow {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.backlink {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.backlink:hover { text-decoration: underline; }

/* Metrics & Heroes */
.metrics {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  background: var(--surface-sunk);
  padding: 3px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}
.metric {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
}
.metric__label {
  font-size: 11px;
  color: var(--ink-muted);
}
.metric__value {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.metric--accent {
  background: var(--accent);
  border-color: transparent;
}
.metric--accent .metric__label { color: rgba(24, 27, 34, 0.7); }
.metric--accent .metric__value { color: #181B22; font-weight: 700; }
.metric--dark {
  background: var(--surface-dark);
  border-color: transparent;
}
.metric--dark .metric__label { color: rgba(255, 255, 255, 0.7); }
.metric--dark .metric__value { color: #FFFFFF; font-weight: 600; }

.heroes {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  flex: 0 0 auto;
}
.hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 80px;
}
.hero__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.hero__value {
  font-size: 38px;
  font-weight: 300;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hero__caption {
  font-size: 11.5px;
  font-weight: 400;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
  margin-top: 4px;
}

/* ═══ Kanban Board ═════════════════════════════════════════════════════ */

.kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
  align-items: stretch;
}

.kanban__col {
  flex: 0 0 240px;
  width: 240px;
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 400px;
  transition: background 150ms ease, border-color 150ms ease;
}
.kanban__col[data-dragover="true"] {
  background: var(--surface-hover);
  border-color: var(--accent);
}

.kanban__colhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.kanban__colname {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.kanban__count {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-chip);
  background: var(--surface);
  color: var(--ink-muted);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.kanban__colvalue {
  font-size: 11px;
  color: var(--accent-ink);
  padding: 0 6px 6px;
}

.kanban__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  overflow-y: auto;
}

.kcard {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  padding: 10px 12px;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.kcard:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}
.kcard[data-dragging="true"] {
  opacity: 0.4;
  transform: scale(0.96);
}
.kcard__name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.kcard__sub {
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 3px;
}
.kcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

/* ═══ Verdict Marks & Criteria (Longlist) ═══════════════════════════════ */

.verdicts {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.verdict {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--border);
  background: var(--surface-sunk);
  color: var(--ink-soft);
}
.verdict--pass {
  background: var(--ok-soft);
  color: var(--ok-ink);
  border-color: var(--ok-border);
}
.verdict--fail {
  background: var(--danger-soft);
  color: var(--danger-ink);
  border-color: var(--danger-border);
}
.verdict--hard {
  font-weight: 600;
  box-shadow: 0 0 0 1px currentColor;
}
.verdict--unknown {
  color: var(--ink-muted);
}
.verdict__mark {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
}

/* ═══ Photo Card & Dossier Identity ═════════════════════════════════════ */

.photo-card {
  position: relative;
  min-height: 84px;
  border-radius: var(--radius-card);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
}
.photo-card__img {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-chip);
  object-fit: cover;
  flex: 0 0 52px;
  filter: var(--photo-filter);
  border: 1px solid var(--border);
}
.photo-card__mark {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-chip);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 52px;
  border: 1px solid var(--accent-border);
  letter-spacing: 0.02em;
}
.photo-card:has(.photo-card__img) .photo-card__mark { display: none; }
.photo-card__scrim {
  flex: 1 1 auto;
  min-width: 0;
}
.photo-card__name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.photo-card__role {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 3px;
  line-height: 1.35;
}
.photo-card__pill {
  flex: 0 0 auto;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: var(--radius-chip);
  background: var(--surface-sunk);
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}

/* ── Progress Rings & Mini Charts ─────────────────────────────────────── */

.ring { display: block; margin: 0 auto; }
.minibars { display: block; width: 100%; height: auto; }

.segments { display: flex; flex-direction: column; gap: 10px; }
.segment__top { display: flex; justify-content: space-between; font-size: 11.5px; margin-bottom: 4px; }
.segment__name { color: var(--ink); font-weight: 500; }
.segment__pct { color: var(--accent-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.segment__track {
  height: 5px;
  background: var(--surface-sunk);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.segment__fill {
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-pill);
}

/* ── Accordion Stack ──────────────────────────────────────────────────── */

.accordion { display: flex; flex-direction: column; gap: 4px; }
.accordion__row {
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  background: var(--surface-sunk);
  overflow: hidden;
}
.accordion__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.accordion__head:hover { background: var(--surface-hover); }
.accordion__chev { transition: transform 160ms ease; color: var(--ink-muted); }
.accordion__row[data-open="true"] .accordion__chev { transform: rotate(180deg); }
.accordion__body {
  display: none;
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.accordion__row[data-open="true"] .accordion__body { display: block; }

.deflist {
  display: grid;
  grid-template-columns: minmax(100px, 140px) 1fr;
  gap: 6px 14px;
  font-size: 12px;
}
.deflist__k { color: var(--ink-muted); }
.deflist__v { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }

/* ── Schedule Strip ───────────────────────────────────────────────────── */

.schedule {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.schedule__months {
  display: flex;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
}
.schedule__month--now { color: var(--accent); }
.schedule__grid {
  display: grid;
  grid-template-columns: 50px repeat(var(--days, 2), minmax(0, 1fr));
  gap: 4px;
  font-size: 11.5px;
}
.schedule__weekday {
  padding: 6px 8px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.schedule__time {
  padding: 6px 4px;
  color: var(--ink-muted);
  font-size: 10.5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.schedule__cell {
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-chip);
  background: var(--surface-sunk);
  min-height: 38px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.event-pill {
  background: var(--surface-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: all 150ms ease;
}
.event-pill:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.event-pill--accent {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.event-pill__title {
  font-weight: 500;
  color: #FFFFFF;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-pill--accent .event-pill__title {
  color: var(--ink);
}
.event-pill__sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-pill--accent .event-pill__sub {
  color: var(--ink-muted);
}

/* ═══ Modal Sheet & Overlays ════════════════════════════════════════════ */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(4, 5, 8, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
}
.sheet {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  width: min(620px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px;
  animation: sheet-in 260ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.sheet--wide { width: min(880px, 100%); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }

.sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sheet__foot { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.sheet__foot .u-grow { flex: 1 1 auto; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field__label { font-size: 11px; color: var(--ink-muted); letter-spacing: .04em; }
.field__control {
  height: 40px;
  border: 0;
  border-radius: var(--radius-chip);
  background: var(--surface-sunk);
  color: var(--ink);
  font-size: 13px;
  padding: 0 14px;
  width: 100%;
}
textarea.field__control { height: auto; min-height: 84px; padding: 12px 14px; resize: vertical; line-height: 1.55; }
.field__hint { font-size: 11px; color: var(--ink-muted); }
.field__warn { font-size: 11px; color: var(--warn-ink); background: var(--warn-soft); border-radius: var(--radius-chip); padding: 10px 12px; }
.field__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field--readonly .field__control { color: var(--ink-muted); cursor: not-allowed; }

.disclosure { border: 0; background: transparent; color: var(--ink-muted); font-size: 12px; cursor: pointer; padding: 8px 0; }
.disclosure:hover { color: var(--ink); }

.typeahead { position: relative; }
.typeahead__menu {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface);
  border-radius: var(--radius-chip);
  box-shadow: var(--shadow-float);
  max-height: 220px; overflow-y: auto;
  z-index: 4;
  padding: 6px;
}
.typeahead__opt {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; background: transparent;
  border-radius: var(--radius-chip); cursor: pointer; font-size: 13px; color: var(--ink);
}
.typeahead__opt:hover, .typeahead__opt[data-active="true"] { background: var(--surface-sunk); }

/* ═══ Toasts — bottom-right, charcoal, fully rounded ════════════════════ */

.toasts {
  position: fixed;
  right: 24px; bottom: 24px;
  display: flex; flex-direction: column; gap: 10px;
  z-index: 120;
  max-width: min(420px, calc(100vw - 48px));
}
.toast {
  display: flex; align-items: center; gap: 14px;
  background: var(--toast-surface);
  color: var(--toast-ink);
  border-radius: var(--radius-pill);
  padding: 13px 20px;
  box-shadow: var(--shadow-float);
  font-size: 13px;
  animation: toast-in 260ms ease-out both;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.toast--leaving { animation: toast-out 200ms ease-out both; }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }
.toast__action {
  border: 0; background: transparent; color: var(--toast-accent);
  cursor: pointer; font-size: 13px; padding: 0; white-space: nowrap;
}
.toast--danger { background: var(--toast-danger); color: var(--toast-danger-ink); }
.toast--danger .toast__action { color: var(--toast-danger-ink); text-decoration: underline; }

/* ═══ Skeletons — real card shapes with a soft shimmer, never a spinner ══ */

.skeleton { border-radius: var(--radius-card); background: var(--surface); box-shadow: var(--shadow-card); padding: 24px; }
.sk-line {
  height: 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunk);
  position: relative;
  overflow: hidden;
  margin-bottom: 12px;
}
.sk-line::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--shimmer), transparent);
  animation: shimmer 1400ms ease-in-out infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.sk-line--short { width: 44%; }
.sk-line--tall { height: 34px; }

/* ═══ Empty and failure states ══════════════════════════════════════════ */

.empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 44px 4px;
  max-width: 520px;
}
.empty__title { font-size: 18px; font-weight: 400; color: var(--ink); }
.empty__body { font-size: 13px; color: var(--ink-muted); }
.empty--centered { align-items: center; text-align: center; margin: 0 auto; }

/* A failure is never a calm empty state. This is deliberately loud. */
.failure {
  border-radius: var(--radius-card);
  background: var(--danger-soft);
  color: var(--danger-ink);
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.failure__title { font-size: 18px; font-weight: 400; }
.failure__code { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }

/* An ABSTAIN is a PASSING output. Calm, not red. Principle IV. */
.abstain {
  border-radius: var(--radius-chip);
  background: var(--surface-sunk);
  color: var(--ink-soft);
  padding: 14px 16px;
  display: flex; gap: 12px; align-items: flex-start;
}
.abstain__mark { color: var(--ink-muted); flex: 0 0 auto; margin-top: 1px; }

/* ═══ Layout grids ══════════════════════════════════════════════════════ */

/* `align-items: start` is load-bearing, not tidiness.
 *
 * Grid's default is `stretch`, so in a two-column row every card grows to the
 * height of the tallest. On Clients that is a 25-row table at 1282px, and the
 * charcoal card beside it — which holds one sentence — became a 1282px slab of
 * empty black. Measured in Chrome, 2026-09-06, after the founder screenshotted
 * it twice and I twice failed to find it by reading CSS.
 *
 * A card should be as tall as what is in it. A row that genuinely wants equal
 * heights can say so itself. */
.grid { display: grid; gap: 18px; align-items: start; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1240px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); }
}


/* ═══ Carried forward 2026-09-08 ════════════════════════════════════════
   The Antigravity redesign (D:hiring-ui-lab, 2026-09-06) rewrote this file
   from 964 lines to 1497 and, in doing so, DROPPED the rules below. It never
   rendered them: its own screens do not use these builders. Ours do —
   `js/components.js` is byte-identical in both trees and still emits every
   class here, from progressCard(), ringCard(), segmentedBars(), the schedule
   strip and the unreadable verdict pill.

   Caught by checking every static class name the 21 JS modules emit against
   the class names the CSS defines. Ten were emitted and undefined; all ten
   were defined before the port. Restored verbatim from the pre-port file.
   They use the same custom properties as everything else, so they take the
   new palette without edits.
   ═══════════════════════════════════════════════════════════════════════ */

/* Progress card (seven-bar mini chart) */
.progress-card {
  position: relative;
}

.progress-card__out {
  position: absolute; top: 18px; right: 18px;
  color: var(--ink-muted);
  background: transparent; border: 0; cursor: pointer;
}

.progress-card__figure {
  display: flex; align-items: baseline; gap: 12px;
}

/* Ring card */
.ring-card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}

.ring-card__controls {
  display: flex; gap: 8px;
}

.ring-card__ctl {
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  border: 0; background: var(--surface-sunk); color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}

.segment {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}

.schedule__month--prev, .schedule__month--next {
  font-size: 12px; color: var(--ink-muted);
}

.verdict--unreadable {
  background: transparent; color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn);
}

/* The dashboard ⇄ CRM toggle. An <a>, not a <button>, because it leaves this application
   entirely — so it gets the browser's own affordances: middle-click, open in a new tab, and a
   real URL in the status bar. Styled as a nav item so it reads as part of the same set, with a
   border so it is visibly a departure rather than another section of this app. */
a.nav__item {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border-color: var(--border);
  margin-left: 4px;
}
a.nav__item:hover {
  border-color: var(--border-strong);
}