/* ============================================================
   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);
}

.o-panel__body { /* default content region */ }

/* Rivets in the corners */
.o-panel--riveted::before,
.o-panel--riveted::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: radial-gradient(circle at 30% 30%, var(--c-bezel-hi), var(--c-bezel-shadow));
  box-shadow: var(--seam-engraved);
}
.o-panel--riveted::before { top: var(--space-2); left: var(--space-2); }
.o-panel--riveted::after  { top: var(--space-2); right: var(--space-2); }