/* Layout for the design-system site. Values come from the WebJar's mampfio-tokens.css; only the logo tiles fix
   the light and dark surface (and link) values, because each tile shows one ground in either theme. */

[data-theme="light"] { color-scheme: light; }
[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--surface); color: var(--ink); font: var(--text-body); }

.top {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap;
  padding: var(--space-3) var(--space-8);
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; }
.top nav { display: flex; gap: var(--space-4); flex-wrap: wrap; flex: 1; }
.top nav a { font: var(--text-label); color: var(--ink-muted); text-decoration: none; padding: var(--space-1) 0; }
.top nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--action); }
#theme-toggle {
  font: var(--text-label); color: var(--ink); background: transparent;
  border: 1px solid var(--control-border); border-radius: var(--radius-m);
  padding: var(--space-2) var(--space-4); cursor: pointer;
}

[data-theme="dark"] .logo-on-light, [data-theme="light"] .logo-on-dark { display: none; }

main { max-width: 960px; margin: 0 auto; padding: var(--space-12) var(--space-8); }
h1 { font: var(--text-display-l); letter-spacing: -0.015em; margin: 0 0 var(--space-6); }
h2 { font: var(--text-heading); margin: var(--space-12) 0 var(--space-4); }
h3 { font: var(--text-heading-s); margin: var(--space-8) 0 var(--space-3); }
p, li { max-width: 70ch; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
code { font-size: 0.9em; background: var(--surface-sunken); padding: 0 var(--space-1); border-radius: var(--radius-s); }
pre { background: var(--surface-sunken); padding: var(--space-4); border-radius: var(--radius-s); overflow-x: auto; }
pre code { background: none; padding: 0; }

table { border-collapse: collapse; width: 100%; margin: var(--space-4) 0; display: block; overflow-x: auto; }
td > code:first-child, td:has(> .swatch) { white-space: nowrap; }
th, td { text-align: left; vertical-align: top; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); }
th { font: var(--text-label); }
.bar { display: inline-block; height: 12px; background: var(--action); border-radius: 2px; vertical-align: middle; }
.corner { display: inline-block; width: 40px; height: 40px; border: 2px solid var(--control-border); background: var(--surface-sunken); }
.swatch {
  display: inline-block; width: 1em; height: 1em; margin-right: var(--space-2); vertical-align: -0.15em;
  border-radius: var(--radius-s); border: 1px solid var(--control-border);
}

.start-here { margin: 0 0 var(--space-8); padding: var(--space-4) var(--space-6); background: var(--surface-sunken); border-radius: var(--radius-l); }
.start-here p { margin: 0; }
.cover { display: block; width: 100%; height: 288px; border: 0; border-radius: var(--radius-l); box-shadow: var(--shadow-card); margin-bottom: var(--space-8); }

.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.logo { margin: 0; padding: var(--space-6); border-radius: var(--radius-l); box-shadow: var(--shadow-card); }
.logo-light { background: #fff4e8; }
.logo-dark { background: #22101c; }
.logo img { display: block; width: 100%; height: 120px; object-fit: contain; }
.logo figcaption { font: var(--text-caption); margin-top: var(--space-4); }
.logo-light figcaption a { color: #b0245a; }
.logo-dark figcaption a { color: #f06a98; }
/* Logos in the brand book's table: the same fixed grounds as the tiles. */
td img[src^="logos/"] { display: block; height: 32px; width: auto; max-width: none; padding: var(--space-2); border-radius: var(--radius-m); background: #fff4e8; }
td img[src$="-reversed.svg"] { background: #22101c; }

/* Components section: side navigation, live examples, code with copy button. */
main:has(.with-side) { max-width: 1200px; }
.with-side { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-12); align-items: start; }
.side { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--space-1); }
.side a { font: var(--text-label); color: var(--ink-muted); text-decoration: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); }
.side a[aria-current="page"] { color: var(--ink); background: var(--surface-sunken); }
.content > h1:first-child { margin-top: 0; }

.example { margin: var(--space-4) 0 var(--space-6); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; }
.example iframe { display: block; width: 100%; height: 160px; border: 0; background: var(--surface); }
.example .code { border-top: 1px solid var(--line); }
.example pre { margin: 0; border-radius: 0; }
.code { position: relative; }
.code pre { padding-right: 88px; }
.copy {
  position: absolute; top: var(--space-2); right: var(--space-2);
  font: var(--text-caption); color: var(--ink); background: var(--surface);
  border: 1px solid var(--control-border); border-radius: var(--radius-s); padding: var(--space-1) var(--space-3); cursor: pointer;
}

.icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin: var(--space-4) 0 var(--space-8); }
.icon-tile { margin: 0; display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-l); color: var(--ink); }
.icon-tile svg { width: 32px; height: 32px; flex-shrink: 0; }
.icon-tile figcaption { display: flex; flex-direction: column; gap: var(--space-1); font: var(--text-caption); color: var(--ink-muted); }
.icon-tile code { background: none; padding: 0; color: var(--ink); }

footer { max-width: 960px; margin: 0 auto; padding: var(--space-8); font: var(--text-caption); color: var(--ink-muted); border-top: 1px solid var(--line); }
footer a { color: inherit; }

@media (max-width: 860px) {
  .with-side { grid-template-columns: 1fr; gap: var(--space-6); }
  .side { position: static; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 600px) {
  .top, main, footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  h1 { font: var(--text-heading); }
}

/* Glossary terms: explained on hover via title, marked once per page. */
dfn[title] { font-style: normal; text-decoration: underline dotted; text-underline-offset: 0.2em; cursor: help; }