/* ============================================================
   OBJECT · PANEL
   The fundamental control-panel surface. A panel is a raised
   module on the chassis: framed by a bezel, recessed face,
   often with a header plaque and a body region.
   ============================================================ */

.o-panel {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-panel), var(--seam-embossed);
  padding: var(--space-5);
}

.o-panel--raised  {
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-raised), var(--seam-embossed);
}
.o-panel--sunken {
  background: var(--color-surface-sunken);
  box-shadow: var(--shadow-inset-deep);
}
.o-panel--chassis {
  background: var(--color-surface);
  box-shadow: var(--shadow-chassis), var(--seam-embossed);
  border: 2px solid var(--color-bezel-dark);
}

/* Plaque header — engraved title bar */
.o-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-plaque);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.o-panel__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Rivets in all four corners (chunk 13 §C — was top-left/top-right only).
   Painted as four small radial-gradient dots so the chassis looks fully bolted
   down — the transparent outer stop rounds each dot, the off-centre highlight
   gives it dimension. Token-driven (semantic bezel aliases), no hardcoded rgba;
   background-image wins over every .o-panel(--variant) background shorthand by
   source order, so riveting composes with --chassis/--raised/--sunken. */
.o-panel--riveted {
  background-image:
    radial-gradient(circle at 35% 35%, var(--color-bezel-hi), var(--color-bezel-shadow) 60%, transparent 64%),
    radial-gradient(circle at 35% 35%, var(--color-bezel-hi), var(--color-bezel-shadow) 60%, transparent 64%),
    radial-gradient(circle at 35% 35%, var(--color-bezel-hi), var(--color-bezel-shadow) 60%, transparent 64%),
    radial-gradient(circle at 35% 35%, var(--color-bezel-hi), var(--color-bezel-shadow) 60%, transparent 64%);
  background-size: 7px 7px;
  background-repeat: no-repeat;
  background-position:
    left var(--space-2) top var(--space-2),       /* top-left */
    right var(--space-2) top var(--space-2),      /* top-right */
    left var(--space-2) bottom var(--space-2),    /* bottom-left */
    right var(--space-2) bottom var(--space-2);   /* bottom-right */
}