/* Style-guide-only styles (app layer). Not part of the library. */
@layer app {
  .sg-section { scroll-margin-block-start: calc(var(--topbar-h) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-4); }
  .sg-section + .sg-section { margin-block-start: var(--space-12); }
  .sg-section > h2 { padding-block-end: var(--space-2); border-block-end: var(--border-width) solid var(--color-border); }
  .sg-lead { font-size: var(--text-lg); color: var(--color-text-muted); max-inline-size: var(--readable-max); }
  .sg-rules { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); }
  .sg-rule { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border-inline-start: 4px solid; background: var(--color-surface); font-size: var(--text-sm); }
  .sg-rule[data-kind="do"] { border-color: var(--color-success); }
  .sg-rule[data-kind="dont"] { border-color: var(--color-danger); }
  .sg-rule strong { display: block; margin-block-end: var(--space-1); }

  .sg-example {
    padding: var(--space-5);
    background: var(--color-bg);
    border: var(--border-width) dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
  }
  .sg-example[data-surface] { background: var(--color-surface); }
  .sg-code { margin-block-start: calc(var(--space-2) * -1); }
  .sg-code summary { cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-accent-text); min-block-size: var(--tap-min); display: flex; align-items: center; }
  .sg-code pre {
    overflow-x: auto; padding: var(--space-4); border-radius: var(--radius-md);
    background: var(--color-inverse-bg); color: var(--color-inverse-text); font-size: var(--text-sm); line-height: 1.5;
  }
  .sg-code pre code { background: none; padding: 0; color: inherit; }

  /* Colour swatches */
  .sg-swatches { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
  .sg-swatch { border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
  .sg-swatch__chip { block-size: 4.5rem; display: grid; place-items: center; font-weight: var(--weight-bold); font-size: var(--text-lg); }
  .sg-swatch__meta { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); display: flex; flex-direction: column; gap: 2px; }
  .sg-swatch__meta code { font-size: var(--text-xs); }
  .sg-ratio[data-pass="true"] { color: var(--color-success-text); font-weight: var(--weight-semibold); }
  .sg-ratio[data-pass="false"] { color: var(--color-danger-text); font-weight: var(--weight-semibold); }

  /* Type, spacing, radius, shadow, icon specimens */
  .sg-type-row { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-4); align-items: baseline; padding-block: var(--space-2); border-block-end: var(--border-width) solid var(--color-border); }
  .sg-type-row code { font-size: var(--text-xs); }
  .sg-space { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
  .sg-space__bar { block-size: 0.75rem; background: var(--color-accent); border-radius: 2px; }
  .sg-box { inline-size: 7rem; block-size: 5rem; display: grid; place-items: center; background: var(--color-surface); border: var(--border-width) solid var(--color-border); font-size: var(--text-xs); text-align: center; }
  .sg-icons { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
  .sg-icon { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); border: var(--border-width) solid var(--color-border); font-size: var(--text-xs); }
  .sg-icon .icon { --icon-size: 1.5rem; }

  /* Rendered guides (docs/*.md → guides/*.html) */
  .guide { line-height: var(--leading-body); }
  .guide > * + * { margin-block-start: var(--space-4); }
  .guide h1 { font-size: var(--text-3xl); }
  .guide h2 { margin-block-start: var(--space-12); padding-block-end: var(--space-2); border-block-end: var(--border-width) solid var(--color-border); scroll-margin-block-start: calc(var(--topbar-h) + var(--space-4)); }
  .guide h3 { margin-block-start: var(--space-8); scroll-margin-block-start: calc(var(--topbar-h) + var(--space-4)); }
  .guide h4 { margin-block-start: var(--space-6); }
  .guide ul, .guide ol { padding-inline-start: var(--space-6); }
  .guide li + li { margin-block-start: var(--space-1); }
  .guide li > ul, .guide li > ol { margin-block-start: var(--space-1); }
  .guide li input[type="checkbox"] { inline-size: 1rem; block-size: 1rem; vertical-align: -0.15em; margin-inline-end: var(--space-1); }
  .guide .table-wrap { margin-inline: calc(var(--space-2) * -1); }
  .guide .table { font-size: var(--text-sm); }
  .guide .table td, .guide .table th { vertical-align: top; }
  .guide-pre { overflow-x: auto; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-inverse-bg); color: var(--color-inverse-text); font-size: var(--text-sm); line-height: 1.5; }
  .guide-pre code { background: none; padding: 0; color: inherit; }
  .guide-toc summary { cursor: pointer; font-weight: var(--weight-semibold); min-block-size: var(--tap-min); display: flex; align-items: center; }
  .guide-toc ol { padding-inline-start: var(--space-6); columns: 2 14rem; font-size: var(--text-sm); }
  .guide-toc li { break-inside: avoid; }

  .sg-toc { columns: 2 14rem; font-size: var(--text-sm); padding-inline-start: var(--space-5); }
  .sg-toc li { break-inside: avoid; padding-block: 2px; }
}