/**
 * Kernel-awareness projection panel styles (#8672).
 *
 * No new tokens; leans on the existing --ww-* variables so the panel reskins
 * with the workspace theme. Read-only surface: no primary/step-up actions,
 * tint backgrounds, and sentence-case copy. Mirrors hil-pause-panel.css.
 */

.ww-kernel-awareness-panel {
  padding: var(--ww-sp-4, 16px);
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-4, 16px);
}

.ww-kernel-awareness-empty {
  padding: var(--ww-sp-5, 24px);
  background: var(--ww-bg-tint, #fafafa);
  border: 1px solid var(--ww-line, #e6e6e6);
  border-radius: var(--ww-radius-sm, 6px);
  color: var(--ww-ink-500, #666);
  font-size: 0.95rem;
}

.ww-kernel-awareness-empty i {
  color: var(--ww-leaf, #2f8f4f);
  margin-right: var(--ww-sp-2, 8px);
}

.ww-kernel-row {
  padding: var(--ww-sp-4, 16px);
  background: var(--ww-bg-tint, #fafafa);
  border: 1px solid var(--ww-line, #e6e6e6);
  border-radius: var(--ww-radius-sm, 6px);
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-3, 12px);
}

.ww-kernel-row__head {
  display: flex;
  align-items: center;
  gap: var(--ww-sp-2, 8px);
  font-weight: 600;
  color: var(--ww-ink-700, #333);
}

.ww-kernel-row__head i {
  color: var(--ww-ink-400, #999);
}

.ww-kernel-row__title {
  flex: 1;
}

.ww-kernel-row__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--ww-sp-3, 12px);
  margin: 0;
}

.ww-kernel-row__metrics div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ww-kernel-row__metrics dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ww-ink-400, #999);
}

.ww-kernel-row__metrics dd {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ww-ink-700, #333);
}

.ww-kernel-row__note {
  margin: 0;
  color: var(--ww-ink-500, #666);
  font-size: 0.875rem;
}

.ww-kernel-badge {
  font-size: 0.75rem;
  padding: 2px var(--ww-sp-2, 8px);
  border-radius: var(--ww-radius-pill, 999px);
  background: var(--ww-bg-tint, #f0f0f0);
  color: var(--ww-ink-500, #666);
  border: 1px solid var(--ww-line, #e6e6e6);
}

.ww-kernel-badge--within-budget,
.ww-kernel-badge--ok {
  color: var(--ww-leaf, #2f8f4f);
  border-color: var(--ww-leaf, #2f8f4f);
  background: rgba(47, 143, 79, 0.08);
}

.ww-kernel-badge--over-budget,
.ww-kernel-badge--over {
  color: var(--ww-saffron, #c47a00);
  border-color: var(--ww-saffron, #c47a00);
  background: rgba(196, 122, 0, 0.08);
}

.ww-kernel-tier2,
.ww-kernel-tier3 {
  padding: var(--ww-sp-4, 16px);
  border-top: 1px solid var(--ww-line, #e6e6e6);
}

.ww-kernel-matrix {
  overflow-x: auto;
}

.ww-kernel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.ww-kernel-table th,
.ww-kernel-table td {
  text-align: left;
  padding: var(--ww-sp-2, 8px);
  border-bottom: 1px solid var(--ww-line, #e6e6e6);
}

.ww-kernel-table th {
  color: var(--ww-ink-400, #999);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.ww-kernel-costburn {
  margin: var(--ww-sp-3, 12px) 0 0;
  color: var(--ww-ink-700, #333);
}

.ww-kernel-snapshot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-2, 8px);
}

.ww-kernel-snapshot {
  display: flex;
  gap: var(--ww-sp-3, 12px);
  font-size: 0.875rem;
}

.ww-kernel-snapshot__at {
  color: var(--ww-ink-400, #999);
  min-width: 180px;
}

.ww-kernel-reveal {
  display: flex;
  justify-content: center;
}

.ww-kernel-reveal__btn {
  background: transparent;
  border: 1px solid var(--ww-line, #e6e6e6);
  color: var(--ww-ink-500, #666);
  padding: var(--ww-sp-2, 8px) var(--ww-sp-4, 16px);
  border-radius: var(--ww-radius-sm, 6px);
  cursor: pointer;
  font-size: 0.875rem;
}

.ww-kernel-reveal__btn:hover {
  border-color: var(--ww-saffron, #c47a00);
  color: var(--ww-saffron, #c47a00);
}

.ww-kernel-awareness-error {
  padding: var(--ww-sp-4, 16px);
  background: rgba(196, 122, 0, 0.08);
  border: 1px solid var(--ww-saffron, #c47a00);
  border-radius: var(--ww-radius-sm, 6px);
  color: var(--ww-ink-700, #333);
}

.ww-kernel-awareness-error i {
  color: var(--ww-saffron, #c47a00);
  margin-right: var(--ww-sp-2, 8px);
}