/*
 * chrome-theme/cohesion.css — the SHARED interaction skin for Star OS chrome.
 *
 * One identity layer the menu bar, dock, control center, and agent-FS view all
 * opt into, so focus rings / selection / hover+active micro-interactions /
 * status-dot colors are IDENTICAL everywhere instead of re-invented per component.
 *
 * Hard rules (gated by chrome-theme.test.ts):
 *   - Every color comes from a `--star-*` token. ZERO raw hex anywhere — a theme
 *     swap re-skins the whole chrome live, and there is no #000 pure-black.
 *   - No purple/blue AI-slop gradient; the single saturated hue is the flame
 *     accent (`--star-accent`), used sparingly.
 *   - Motion is layout-thrash-free: movement animates `transform` + `opacity`
 *     only; any color/`background-color` transition is paint-only (never a
 *     width/height/top/left/margin transition). Durations/ease from the
 *     `--star-dur-*` / `--star-ease` motion tokens.
 *
 * Class contract (consumed by MENUBAR / DOCK / CC-UI / FS-VIEW):
 *   .star-focusable   — keyboard focus ring (ember halo, not a browser outline)
 *   .star-interactive — hover/active micro-interaction for any clickable chrome cell
 *   .star-selectable  — themed ::selection inside chrome text
 *   .star-dot[--running|--idle|--warn|--danger|--info] — agent/FS status dots
 */

/* ── focus: a bright ember halo keyed to --star-focus-ring (never the UA outline) ── */
.star-focusable {
  outline: none;
}
.star-focusable:focus-visible {
  outline: 2px solid var(--star-focus-ring);
  outline-offset: 2px;
  border-radius: var(--star-radius-sm);
}

/* ── selection: flame ground + on-accent ink, scoped to chrome text ── */
.star-selectable ::selection,
.star-selectable::selection {
  background: var(--star-accent);
  color: var(--star-accent-on);
}

/* ── interactive cell: layout-thrash-free hover/active micro-interaction ──
 * Movement animates transform + opacity; the hover wash transitions
 * background-color (paint-only, no layout) as a token color-mix so it inherits
 * the active theme's flame and never hardcodes a value. */
.star-interactive {
  position: relative;
  color: var(--star-text);
  background: transparent;
  border-radius: var(--star-radius-control);
  transition:
    transform var(--star-dur-fast) var(--star-ease),
    opacity var(--star-dur-fast) var(--star-ease),
    background-color var(--star-dur-fast) var(--star-ease);
}
.star-interactive:hover {
  background: color-mix(in srgb, var(--star-accent) 12%, transparent);
  color: var(--star-text);
}
.star-interactive:active {
  transform: scale(0.96);
  opacity: 0.9;
}
.star-interactive[aria-pressed="true"],
.star-interactive[data-active="true"] {
  background: color-mix(in srgb, var(--star-accent) 18%, transparent);
  color: var(--star-text);
}
.star-interactive:disabled,
.star-interactive[aria-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
}

/* ── status dots: ONE shape, color switched by state token ──
 * Default = muted (idle); modifiers map to the --star feedback tokens. The glow
 * is static so the desktop never carries an idle animation. */
.star-dot {
  display: inline-block;
  width: var(--star-space-2);
  height: var(--star-space-2);
  border-radius: 50%;
  background: var(--star-text-muted);
  box-shadow: 0 0 0 0 transparent;
}
.star-dot--running {
  background: var(--star-ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-ok) 22%, transparent);
}
.star-dot--idle {
  background: var(--star-text-muted);
}
.star-dot--warn {
  background: var(--star-warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-warn) 22%, transparent);
}
.star-dot--danger {
  background: var(--star-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-danger) 22%, transparent);
}
.star-dot--info {
  background: var(--star-info);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--star-info) 22%, transparent);
}

/* ── chrome glyph slot: inherits currentColor so renderStarIcon glyphs tint right ── */
.star-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--star-text-muted);
  transition: color var(--star-dur-fast) var(--star-ease);
}
.star-interactive:hover .star-glyph,
.star-interactive[data-active="true"] .star-glyph {
  color: var(--star-text);
}

/* ── Control Center surface skin ───────────────────────────────────────────
 * The Centre de contrôle reads the SAME tokens as the rest of the chrome, plus
 * three CC-specific affordances. All token-only (no raw hex), all GPU-safe
 * (movement = transform/opacity; the active rail is a paint-only box-shadow). */

/* Active nav row wears a flame accent rail on its leading edge — the world-class
 * settings-rail cue that the wash alone doesn't carry. Inset box-shadow paints
 * in place (no layout), and the row already transitions background-color. */
[data-cc-nav-item][data-active="true"] {
  box-shadow: inset 3px 0 0 0 var(--star-accent);
}
/* The active glyph picks up the accent so the whole row reads as one selected unit. */
[data-cc-nav-item][data-active="true"] .star-glyph {
  color: var(--star-accent);
}

/* Selected model card lifts a hair on hover — the press-scale (.star-interactive
 * :active) still wins while held, so the affordance reads correctly end-to-end. */
[data-model-card].star-interactive:hover:not(:active) {
  transform: translateY(-1px);
}

/* Detail pane swap: a GPU-safe enter (opacity + a small upward settle). The
 * detail host re-triggers this class on every section change, so each pane
 * animates in without a layout-thrashing height/top transition. */
.cc-detail-enter {
  animation: cc-detail-in var(--star-dur-base) var(--star-ease);
}
@keyframes cc-detail-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}