/* ==========================================================================
   the template rebuild — panels
   The page is light throughout. Dark and white blocks are inset rounded
   panels (25px radius, 8px gutter), matching the source's structure.
   ========================================================================== */

.panel {
  margin-inline: 8px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.panel--dark  { background: var(--c-ink);  color: var(--c-white); }
.panel--white { background: var(--c-white); color: var(--c-ink); }

/* Inside a dark panel, muted text and hairlines flip to their light-on-dark
   equivalents. Sections read these tokens rather than hard-coding a colour,
   so the same section markup works on either ground. */
.panel--dark  { --c-muted-local: rgba(255,255,255,.5); --c-rule: rgba(255,255,255,.14); --c-pill-bg: var(--c-white); --c-pill-fg: var(--c-ink); }
.panel--white,
body          { --c-muted-local: #999999;              --c-rule: rgba(10,10,10,.12); --c-pill-bg: var(--c-ink);  --c-pill-fg: var(--c-white); }

.pill { background: var(--c-pill-bg); color: var(--c-pill-fg); }
.pill::after { background: var(--c-pill-fg); }