/* Panel — the "scoresheet pad" or "felt-edge card".
   Two variants for the two surface contexts. */

.cf-panel {
  border-radius: var(--cf-radius-xl);
  padding: var(--cf-space-4);
  position: relative;
}

/* Default = felt-side panel: dark, recessed, atmospheric */
.cf-panel,
.cf-panel--felt {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.05)),
    var(--cf-surface-on-felt);
  border: 1px solid var(--cf-rule-felt);
  box-shadow: var(--cf-shadow-felt-md);
  color: var(--cf-fg-on-felt);
}

/* Paper-side panel: cream scoresheet, hairline rule, tabular ink */
.cf-panel--paper {
  background:
    repeating-linear-gradient(
      180deg,
      var(--cf-paper-50) 0,
      var(--cf-paper-50) 31px,
      var(--cf-paper-200) 31px,
      var(--cf-paper-200) 32px
    );
  border: 1px solid var(--cf-paper-300);
  box-shadow: var(--cf-shadow-paper-md);
  color: var(--cf-fg);
}
.cf-panel--paper.cf-panel--plain {
  background: var(--cf-surface);
}

/* Panel header pattern: eyebrow + title */
.cf-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cf-space-3);
  margin-bottom: var(--cf-space-3);
}
.cf-panel__title {
  font: var(--cf-h3);
  letter-spacing: var(--cf-tracking-tight);
}
.cf-panel--felt .cf-panel__title { color: var(--cf-fg-on-felt); }
.cf-panel--paper .cf-panel__title { color: var(--cf-ink-900); }