/* ============================================================
   Demo frame — every capability page wears this shape.
   Extends base.css. Loaded only on pages with body.is-demo.
   ============================================================ */

body.is-demo .site-main { padding-top: var(--space-3); }

/* Breadcrumb */
.demo-crumbs {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  color: var(--fg-muted);
  margin-bottom: var(--space-3);
}
.demo-crumbs .dot { color: var(--fg-faint); }
.demo-crumbs a { color: var(--fg-muted); }
.demo-crumbs a:hover { color: var(--fg); }
.demo-crumbs .domain-label { letter-spacing: 0.04em; }
.demo-crumbs .cap-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
}

/* Header — H1 already styled in base.css; just add spacing + chip layout */
.demo-header {
  margin-bottom: var(--space-4);
}
.demo-header .lede { margin-bottom: var(--space-2); }

/* Vertical chip + Business picker — same shape, different content.
   Shared selectors below; specific ones at the bottom of each. */
.vertical-chip,
.business-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  background: var(--bg-sunk);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 4px 4px 4px 10px;
  color: var(--fg-muted);
  position: relative;
  margin-top: var(--space-2);
}
.vertical-chip-label,
.business-picker-label { letter-spacing: 0.02em; }
.vertical-chip-name,
.business-picker-name {
  color: var(--fg);
  font-weight: 500;
}
.vertical-chip-toggle,
.business-picker-toggle {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px 8px;
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  color: var(--accent);
  cursor: pointer;
  transition: background 160ms;
}
.vertical-chip-toggle:hover,
.business-picker-toggle:hover { background: color-mix(in oklch, var(--accent) 8%, var(--bg)); }
.vertical-chip-toggle[aria-expanded="true"],
.business-picker-toggle[aria-expanded="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.vertical-chip-menu,
.business-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  z-index: 20;
  box-shadow: 0 4px 24px -8px color-mix(in oklch, var(--fg) 15%, transparent);
}
/* `display: flex` above overrides the user-agent rule for [hidden].
   Without this, the dropdown stays open after selection. */
.vertical-chip-menu[hidden],
.business-picker-menu[hidden] { display: none; }
.vertical-chip-menu button {
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  color: var(--fg);
  cursor: pointer;
  border-radius: 2px;
}
.vertical-chip-menu button:hover,
.business-picker-menu button:hover { background: var(--bg-sunk); }
.vertical-chip-menu button[aria-current="true"],
.business-picker-menu button[aria-current="true"] {
  color: var(--accent);
  font-weight: 500;
}

/* Business picker — extra: each menu item is two-line (name + meta) */
.business-picker-menu button {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
}
.business-picker-menu .bp-name {
  color: inherit;
  font-size: var(--t-sm);
}
.business-picker-menu .bp-meta {
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.business-picker-empty {
  padding: 10px 12px;
  color: var(--fg-muted);
  font-size: var(--t-xs);
}
.business-picker-empty a { color: var(--accent); }

/* Stub for audit demos with no data — slightly different framing */
.demo-stub[data-stub="audit"] {
  background: color-mix(in oklch, #b58b3a 6%, var(--bg));
  border-color: color-mix(in oklch, #b58b3a 25%, var(--rule));
}
.demo-stub .muted {
  color: var(--fg-muted);
  font-size: var(--t-xs);
  margin-top: 8px;
}

/* The demo body — full-bleed within the measure */
.demo-body {
  margin: var(--space-4) 0 var(--space-5);
  position: relative;
}

/* Stub pattern — used by every demo until its body is real */
.demo-stub {
  background: var(--bg-sunk);
  border: 1px dashed var(--rule);
  border-radius: var(--radius-1);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  color: var(--fg-muted);
}
.demo-stub strong {
  display: block;
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  color: var(--fg);
  margin-bottom: var(--space-2);
}

/* Footer — pattern, tiers, status, prev/next */
.demo-footer {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: var(--rule-thin);
}
.demo-meta {
  margin-bottom: var(--space-4);
}
.demo-meta th {
  width: 110px;
  white-space: nowrap;
}
.tier-pill {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 1px 8px;
  margin-right: 4px;
}
.status {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 2px;
}
.status-stub { background: var(--bg-sunk); color: var(--fg-muted); }
.status-live { background: color-mix(in oklch, #5e7544 18%, var(--bg)); color: #3f5128; }

.demo-prevnext {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--t-xs);
}
.demo-prevnext a {
  color: var(--fg);
  max-width: 45%;
  text-decoration: none;
}
.demo-prevnext a:hover { color: var(--accent); }
.demo-prevnext .prev { text-align: left; }
.demo-prevnext .next { text-align: right; margin-left: auto; }

/* ============================================================
   /demos showcase index — tiers rail + 36-capability grid
   ============================================================ */

/* The /demos page breaks out of the 680px measure for the sidebar layout */
body.is-demos-index .site-main {
  max-width: 1080px;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
body.is-demos-index .site-main > h1,
body.is-demos-index .site-main > h2,
body.is-demos-index .site-main > p,
body.is-demos-index .site-main > .sublabel,
body.is-demos-index .site-main > hr {
  max-width: var(--measure);
}

.demos-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--space-4);
  margin: var(--space-3) 0 var(--space-5);
  align-items: start;
}
@media (max-width: 760px) {
  .demos-layout { grid-template-columns: 1fr; }
}

/* ---- Tier filter rail ---- */
.tiers-rail {
  position: sticky;
  top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-sans);
}
@media (max-width: 760px) {
  .tiers-rail {
    position: relative;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    margin: 0 calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

.tier-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  padding: 12px 14px;
  font-family: inherit;
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
  color: var(--fg);
  scroll-snap-align: start;
  flex-shrink: 0;
  min-width: 200px;
}
.tier-btn:hover {
  background: var(--bg-sunk);
  border-color: color-mix(in oklch, var(--accent) 30%, var(--rule));
}
.tier-btn[aria-pressed="true"] {
  background: var(--bg-sunk);
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.tier-btn .tier-name {
  font-weight: 500;
  font-size: var(--t-sm);
  color: var(--fg);
}
.tier-btn .tier-price {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.tier-btn .tier-care {
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.tier-btn .tier-count {
  position: absolute;
  top: 12px;
  right: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  background: var(--bg-sunk);
  border-radius: 999px;
  padding: 1px 7px;
  min-width: 24px;
  text-align: center;
}
.tier-btn[aria-pressed="true"] .tier-count {
  background: var(--accent);
  color: var(--bg);
}
.tier-btn { position: relative; }

.tier-btn .tier-tag {
  font-size: 11px;
  color: var(--fg-muted);
  line-height: 1.4;
  margin-top: 4px;
  text-wrap: pretty;
}
.tier-btn-all .tier-tag,
.tier-btn-all .tier-care,
.tier-btn-all .tier-price { display: none; }

/* ---- Filtering: dim non-matching cards when a tier is active ---- */
.demos-layout[data-active-tier]:not([data-active-tier="all"]) .cap-card {
  transition: opacity 200ms, filter 200ms;
}
.demos-layout[data-active-tier="storefront"]   .cap-card:not([data-tiers~="storefront"]),
.demos-layout[data-active-tier="operator"]     .cap-card:not([data-tiers~="operator"]),
.demos-layout[data-active-tier="independence"] .cap-card:not([data-tiers~="independence"]),
.demos-layout[data-active-tier="custom"]       .cap-card:not([data-tiers~="custom"]) {
  opacity: 0.18;
  filter: grayscale(0.6);
  pointer-events: none;
}

/* Audit cards (Domain 0) are the funnel — never dim them on tier filter.
   They sit above the build ladder and apply regardless. */
.demos-layout[data-active-tier]:not([data-active-tier="all"]) .cap-card[data-domain="audit"] {
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
}

/* The grid sits inside the layout — drop the standalone width override */
.cap-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Each domain is a collapsible <details> */
.cap-domain {
  border: 1px solid var(--rule);
  border-radius: var(--radius-1);
  overflow: hidden;
  background: var(--bg);
  transition: opacity 200ms;
}
.cap-domain[data-coverage="none"] {
  opacity: 0.55;
}

/* The summary becomes the domain header */
.cap-domain summary.cap-domain-head {
  list-style: none;
  cursor: pointer;
  user-select: none;
  background: var(--bg-sunk);
  display: grid;
  grid-template-columns: 18px max-content max-content 1fr max-content;
  gap: 12px;
  align-items: baseline;
  padding: 14px 16px 12px;
  border-bottom: 1px solid transparent;
  transition: background 200ms, border-color 200ms;
}
.cap-domain summary.cap-domain-head::-webkit-details-marker { display: none; }
.cap-domain summary.cap-domain-head::marker { display: none; content: ""; }
.cap-domain[open] summary.cap-domain-head {
  border-bottom-color: var(--rule);
}

/* Disclosure triangle — handmade, rotates with [open] */
.cd-toggle {
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  color: var(--fg-muted);
  transition: transform 180ms cubic-bezier(0.2,0.6,0.2,1);
  align-self: center;
  margin-top: 2px;
}
.cap-domain[open] .cd-toggle { transform: rotate(90deg); }

.cap-domain-head .dn {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  white-space: nowrap;
}
.cap-domain-head .dl {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--fg);
  white-space: nowrap;
}
.cap-domain-head .dt {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg-muted);
  font-size: var(--t-sm);
  text-wrap: pretty;
}

/* The status pip on the right of the summary — green/amber/grey by coverage */
.cd-status {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 2px 8px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  white-space: nowrap;
}
.cap-domain[data-coverage="all"]  .cd-status::before { content: "Included"; color: #2f5126; }
.cap-domain[data-coverage="some"] .cd-status::before { content: "Partial"; color: #8b6020; }
.cap-domain[data-coverage="none"] .cd-status::before { content: "Not in tier"; color: var(--fg-muted); }
.cap-domain[data-coverage="audit"] .cd-status::before { content: "Always"; color: #8b6020; }
.cap-domain[data-coverage="all"]  .cd-status { background: color-mix(in oklch, #5e7544 14%, var(--bg)); border-color: color-mix(in oklch, #5e7544 30%, transparent); }
.cap-domain[data-coverage="some"] .cd-status { background: color-mix(in oklch, #b58b3a 14%, var(--bg)); border-color: color-mix(in oklch, #b58b3a 30%, transparent); }
.cap-domain[data-coverage="audit"] .cd-status { background: color-mix(in oklch, #b58b3a 14%, var(--bg)); border-color: color-mix(in oklch, #b58b3a 30%, transparent); }

/* Domain header tints by coverage */
.cap-domain[data-coverage="all"]   summary.cap-domain-head {
  background: color-mix(in oklch, #5e7544 8%, var(--bg-sunk));
}
.cap-domain[data-coverage="some"]  summary.cap-domain-head {
  background: color-mix(in oklch, #b58b3a 8%, var(--bg-sunk));
}
.cap-domain[data-coverage="audit"] summary.cap-domain-head {
  background: color-mix(in oklch, #b58b3a 10%, var(--bg-sunk));
}

/* The cards inside each domain */
.cap-domain-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1px;
  background: var(--rule);
}
.cap-domain-cards .cap-card { background: var(--bg); }
.cap-domain[data-coverage="audit"] .cap-domain-cards .cap-card[data-domain="audit"] {
  /* keep audit cards' warm tint from the existing rule */
}
.cap-card {
  background: var(--bg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--fg);
  min-height: 120px;
  position: relative;
  transition: background 160ms;
}
.cap-card:hover {
  background: color-mix(in oklch, var(--accent) 5%, var(--bg));
  text-decoration: none;
}
.cap-card .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  margin-bottom: 4px;
}
.cap-card .name {
  font-family: var(--font-serif);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 6px;
  text-wrap: balance;
}
.cap-card .tag {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.4;
  margin-top: auto;
}
.cap-card[data-status="live"] .name::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}
.cap-card[data-status="stub"] { opacity: 0.65; }
.cap-card[data-status="stub"]:hover { opacity: 1; }

/* Domain 0 (audit) cards have a warmer treatment to signal: these are
   business-specific (run for YOUR site), not vertical-example. */
.cap-card[data-domain="audit"] {
  background: color-mix(in oklch, #b58b3a 6%, var(--bg));
}
.cap-card[data-domain="audit"]:hover {
  background: color-mix(in oklch, #b58b3a 14%, var(--bg));
}
.cap-card[data-domain="audit"] .num::after {
  content: " · audit";
  color: #8b6020;
  font-style: italic;
}
.cap-domain-head[data-domain="audit"] {
  background: color-mix(in oklch, #b58b3a 10%, var(--bg-sunk));
}

/* (legacy domain-head styles superseded by .cap-domain summary above) */