/* 06-components/panel — the holo-panel (the card). Glow intensifies on hover/focus.
   --modifier flips the keyline/glow to a semantic role. */
.c-panel {
  --panel-accent: var(--brand);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: 0 0 24px color-mix(in srgb, var(--panel-accent) 4%, transparent);
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.c-panel:hover,
.c-panel:focus-within {
  border-color: color-mix(in srgb, var(--panel-accent) 50%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--panel-accent) 14%, transparent);
}
.c-panel--value { --panel-accent: var(--value); }
.c-panel--link  { --panel-accent: var(--link); }
.c-panel--flush { padding: 0; overflow: hidden; }