/*
  @layer order declared here - establishes priority before any
  rules are added by the JavaScript layer manager.
*/
@layer reset, base, components;

/* ── Tokens ── */
:root {
  --bg:           #06060f;
  --surface:      #0c0c1e;
  --surface-hi:   #111126;
  --border:       #1c1c36;
  --text:         #eaeaf4;
  --text-muted:   #7e7ea6;
  --cyan:         #40d9ff;
  --green:        #7fff8a;
  --font-mono: ui-monospace, 'Cascadia Code', monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:         #f4f4f8;
    --surface:    #ffffff;
    --surface-hi: #eaeaf2;
    --border:     #c9c9db;
    --text:       #12121e;
    --text-muted: #4e4e6a;
    --cyan:       #ae5600;
    --green:      #7a2e00;
  }
}

:root[data-theme="light"] {
  --bg:         #f4f4f8;
  --surface:    #ffffff;
  --surface-hi: #eaeaf2;
  --border:     #c9c9db;
  --text:       #12121e;
  --text-muted: #4e4e6a;
  --cyan:       #ae5600;
  --green:      #7a2e00;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, sans-serif;
}

[aria-labelledby^="article-"] {
  container-type: unset;
}

/* ── Demo layout ── */
.demo {
  width: min(620px, 100%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.layer-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ── Layer panel ── */
.layer-panel {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.layer-panel > .bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1rem;
  background: var(--surface-hi);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .75rem;
  flex-wrap: wrap;
}

.layer-panel > .bar > .name         { color: var(--text-muted); }
.layer-panel > .bar > .name strong  { color: var(--cyan); font-weight: 600; }
.layer-panel > .bar > .rank         { font-size: .65rem; color: var(--text-muted); letter-spacing: .07em; }

.layer-panel > .bar > .toggle {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--text);
  background: none;
  border: 1px solid var(--text-muted);
  border-radius: 3px;
  padding: .15rem .55rem;
  cursor: pointer;
  transition: color 120ms, border-color 120ms;
}

.layer-panel > .bar > .toggle:hover {
  color: var(--green);
  border-color: var(--green);
}

.layer-panel > .code {
  margin: 0;
  padding: .75rem 1rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  line-height: 1.85;
  color: var(--text-muted);
  background: var(--surface);
  white-space: pre;
  overflow-x: auto;
  transition: opacity 250ms, filter 250ms;
}

.layer-panel.-off > .code {
  opacity: .28;
  filter: grayscale(1);
}

/* Syntax colours */
._sel     { color: #ff9966; }
._prop    { color: var(--green); }
._val     { color: var(--cyan); }
._cyan    { color: var(--cyan); }
._green   { color: var(--green); }
._comment { color: #444466; font-style: italic; }

/* ── Result ── */
.result-display {
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.result-display > .label {
  padding: .45rem 1rem;
  background: var(--surface-hi);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--text-muted);
  letter-spacing: .08em;
}

.result-display > .stage {
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bg);
}

.result-display > .note {
  padding: .75rem 1rem 1rem;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--text-muted);
  line-height: 1.7;
  border-top: 1px solid var(--border);
}

.result-display > .note strong { color: var(--text); }

/* ── The card being demonstrated ── */
.card {
  border-radius: 6px;
  padding: .875rem 1.25rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  min-width: 140px;
  transition: color 300ms, border-color 300ms, background 300ms, box-shadow 300ms;

  &.-featured {
       border-color: rgba(127, 255, 138, .4);
       background:   rgba(127, 255, 138, .07);}
}