/* 06-components/_panel.css */
/* ── c-panel — THE substrate. A box-drawing-bordered region, title notched into the top rule.
   solid border = ┌─┐ single rule; --double (border-style:double) = ╔═╗ hero rule. Square corners. */
.c-panel {
  position: relative;
  background: var(--surface-raised);
  border: var(--bw) solid var(--line);
  padding: var(--pad-panel);
  /* The notched title overlaps the top rule and reaches into the body — give it extra
     headroom so the first line of content never crowds the title. */
  padding-top: calc(var(--pad-panel) + var(--space-xs));
}
.c-panel > .c-panel__title:first-child,
.c-panel__title {
  position: absolute;
  top: 0;
  left: 2ch;
  transform: translateY(-50%);
  padding-inline: 1ch;
  background: var(--surface);                 /* masks the rule it sits on */
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
}
.c-panel__title .c-panel__key { color: var(--accent); }   /* a lit letter in a title */
.c-panel--double { border-style: double; border-width: 3px; }
.c-panel--double > .c-panel__title { color: var(--text-bright); }
/* for tables/terminals that own their pad. The flush content (a c-table with nowrap cells,
   a wide terminal) can exceed a phone's width, so let the panel scroll it sideways rather
   than clip — these panels carry no notched title, so the forced overflow-y can't hide one. */
.c-panel--flush { padding: 0; overflow-x: auto; }
.c-panel--accent { border-color: var(--line-strong); }