/* Documentation pages: laws, foundations, patterns, components, hubs */
.doc { width: 100%; max-width: calc(var(--measure) + 2 * var(--gutter)); margin: 0 auto; padding: 4px var(--gutter) 32px; }
.doc-head { display: grid; gap: 14px; padding: 10px 0 6px; }
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font: 600 var(--t-foot)/1.2 var(--f-body); color: var(--ink-3); }
.crumb a { color: var(--lapis); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb i { font-style: normal; }
.doc-title { display: grid; justify-items: start; gap: 18px; }
.doc-pic { width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center; background: var(--surface); color: var(--ink-2); box-shadow: var(--e-2), inset 0 0 0 1px var(--line); }
.doc-pic .pic { width: 50px; height: 50px; }
.large-title { font: 780 var(--t-large)/.98 var(--f-display); font-variation-settings: "wdth" 80, "opsz" 96; letter-spacing: -.045em; outline: none; overflow-wrap: anywhere; }
.lede { font: 400 1.1875rem/1.5 var(--f-body); color: var(--ink-2); max-width: 36em; }
.lede b, .lede strong { color: var(--ink); font-weight: 600; }

/* Law chips */
.lawchips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 2px 0 0; padding: 0; }
.lawchip { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px 0 10px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line); font: 600 .75rem/1 var(--f-mono); text-decoration: none; transition: box-shadow var(--d-2), color var(--d-2); }
.lawchip:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.lawchip i { width: 11px; height: 11px; border-radius: 50%; flex: none; }
[data-law="colour"] > i, .law-ico-colour { background: conic-gradient(var(--ink) 0 33.3%, var(--lapis) 0 66.6%, var(--tyrian) 0); }
[data-law="motion"] > i, .law-ico-motion { background: radial-gradient(circle, var(--tyrian) 36%, transparent 40%); box-shadow: inset 0 0 0 1.5px var(--tyrian); }
[data-law="reach"] > i, .law-ico-reach { background: linear-gradient(90deg, var(--tyrian) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--tyrian); }
[data-law="rest"] > i, .law-ico-rest { border-radius: 2px; background: linear-gradient(90deg, var(--ink) 0 35%, transparent 35% 65%, var(--ink) 65%); }

/* The live specimen */
.stage { position: relative; margin: 26px calc(var(--gutter) * -.5) 6px; border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--e-2), inset 0 0 0 1px var(--line); overflow: clip; }
.stage-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 9px 9px 18px; border-bottom: 1px solid var(--line); }
.stage-k { display: inline-flex; align-items: center; gap: 8px; font: 600 .6875rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.stage-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--viridian); box-shadow: 0 0 0 3px color-mix(in oklch, var(--viridian) 18%, transparent); }
.stage-tools { display: flex; gap: 4px; }
.tool { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2);
  font: 600 var(--t-foot)/1 var(--f-body); -webkit-tap-highlight-color: transparent; transition: background var(--d-2), color var(--d-2); }
.tool:hover { color: var(--ink); }
.tool .ico { width: 16px; height: 16px; }
.tool[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.stage-body { position: relative; min-height: 280px; padding: 30px 18px; display: grid; place-items: center;
  background: radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--ink) 9%, transparent) 1px, transparent 0) 0 0 / 18px 18px, var(--ground); }
.stage-note { padding: 12px 18px 14px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: var(--t-foot); line-height: 1.5; }
.specimen { display: block; width: 100%; }
.specimen:not(:defined) { min-height: 200px; border-radius: var(--r-lg); background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Sections */
.doc-sec { padding-top: 40px; }
.doc-sec h2 { position: relative; margin-bottom: 14px; font: 740 var(--t-1)/1.06 var(--f-display); font-variation-settings: "wdth" 86; letter-spacing: -.035em; }
.h-anchor { position: absolute; left: -.85em; color: var(--ink-3); text-decoration: none; opacity: 0; transition: opacity var(--d-1); }
.doc-sec h2:hover .h-anchor { opacity: 1; }
.doc-sec h3 { margin: 26px 0 8px; font: 720 var(--t-3)/1.25 var(--f-display); letter-spacing: -.015em; }
.doc-sec p { margin: 0 0 14px; max-width: 40em; }
.doc-sec p:last-child { margin-bottom: 0; }
.doc-sec > ul:not([class]), .doc-sec > ol:not([class]) { margin: 0 0 14px; padding-left: 1.25em; display: grid; gap: 6px; }
.doc-sec a:not([class]) { color: var(--lapis); font-weight: 550; }

/* Best practices */
.bp { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; gap: 13px; }
.bp li { position: relative; padding-left: 28px; max-width: 40em; }
.bp li::before { content: ""; position: absolute; left: 5px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--lapis); box-shadow: 0 0 0 4px color-mix(in oklch, var(--lapis) 14%, transparent); }
.bp li strong, .bp li b { font-weight: 650; }

/* Specification list */
.spec { margin: 6px 0 14px; display: grid; border-radius: var(--r-md); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.spec > div { display: grid; grid-template-columns: minmax(8rem, 34%) 1fr; gap: 14px; padding: 12px 16px; }
.spec > div + div { border-top: 1px solid var(--line); }
.spec dt { font: 650 var(--t-foot)/1.45 var(--f-body); color: var(--ink); }
.spec dd { margin: 0; font-size: var(--t-sub); line-height: 1.45; color: var(--ink-2); }
@media (max-width: 440px) { .spec > div { grid-template-columns: 1fr; gap: 3px; } }

/* Tables */
.tbl-wrap { margin: 6px 0 14px; overflow-x: auto; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.tbl-wrap:focus-visible { outline-offset: 2px; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-sub); line-height: 1.45; }
.tbl.wide { min-width: 34rem; }
.tbl th, .tbl td { padding: 11px 14px; text-align: left; vertical-align: top; }
.tbl tr + tr > *, .tbl tbody tr:first-child > * { border-top: 1px solid var(--line); }
.tbl thead th { font: 600 .6875rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
.tbl tbody th { font-weight: 650; white-space: nowrap; }
.tbl td { color: var(--ink-2); }
.tbl code { white-space: nowrap; }

/* Notes */
.note { margin: 8px 0 16px; padding: 14px 16px; border-radius: var(--r-md); font-size: var(--t-sub); line-height: 1.5;
  background: color-mix(in oklch, var(--lapis) 6%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--lapis) 22%, transparent); }
.note.model { background: color-mix(in oklch, var(--tyrian) 6%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--tyrian) 24%, transparent); }
.note.warn { background: color-mix(in oklch, var(--ochre) 8%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ochre) 30%, transparent); }

/* Do and don't */
.dd { display: grid; gap: 12px; margin: 10px 0 18px; }
@media (min-width: 600px) { .dd { grid-template-columns: 1fr 1fr; } }
.dd-card { margin: 0; overflow: hidden; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.dd-card.is-do { --k: var(--viridian); } .dd-card.is-dont { --k: var(--madder); }
.dd-mock { min-height: 128px; padding: 22px 18px; display: grid; place-items: center; background: var(--ground); border-bottom: 3px solid var(--k); font-size: var(--t-sub); }
.dd-card figcaption { padding: 12px 16px 15px; font-size: var(--t-sub); line-height: 1.45; color: var(--ink-2); }
.dd-label { display: block; margin-bottom: 4px; font: 700 var(--t-sub)/1.2 var(--f-body); color: var(--k); }
/* Mock-up parts used inside do/don't cards */
.mk { width: 100%; max-width: 260px; display: grid; gap: 8px; text-align: left; }
.mk-line { line-height: 1.45; font-weight: 500; }
.mk-line .flux, .mk-line .pig { font-weight: 600; }
.mk-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: var(--r-pill); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 600 .75rem/1 var(--f-body); }
.mk-field { padding: 9px 12px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); line-height: 1.45; }
.mk-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-2); border-top-color: var(--ink); animation: spin 1s linear infinite; }

/* Live anatomy */
.anat { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px; }
.anat-item { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 0; border-radius: var(--r-md); background: var(--surface); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--line); text-align: left; font-size: var(--t-sub); line-height: 1.45; -webkit-tap-highlight-color: transparent; transition: box-shadow var(--d-2); }
.anat-item strong { display: block; color: var(--ink); font-weight: 650; }
.anat-item:hover, .anat-item.is-on { box-shadow: inset 0 0 0 2px var(--lapis); }
.anat-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--ground); font: 700 .75rem/1 var(--f-mono); }
.anat-item.is-on .anat-n { background: var(--lapis); color: var(--on-ink); }
.anat-layer { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.anat-ring { position: absolute; border-radius: 10px; box-shadow: 0 0 0 2px var(--lapis), 0 0 0 6px color-mix(in oklch, var(--lapis) 18%, transparent); transition: opacity var(--d-2); }
.anat-badge { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--ground);
  font: 700 .6875rem/1 var(--f-mono); box-shadow: 0 0 0 2px var(--surface), var(--e-2); }
.anat-badge.is-on { background: var(--lapis); color: var(--on-ink); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 12px; }
.card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); color: var(--ink);
  text-decoration: none; box-shadow: var(--e-1), inset 0 0 0 1px var(--line); -webkit-tap-highlight-color: transparent; transition: transform var(--d-2) var(--ease-out), box-shadow var(--d-2); }
.card:hover { transform: translateY(-2px); box-shadow: var(--e-2), inset 0 0 0 1px var(--line-2); }
.card:active { transform: scale(.985); }
.card-pic { width: 54px; height: 54px; border-radius: 17px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.card-pic .pic { width: 38px; height: 38px; }
.card-txt { display: grid; gap: 4px; min-width: 0; padding-top: 2px; }
.card-t { font: 720 var(--t-3)/1.2 var(--f-display); letter-spacing: -.015em; }
.card-s { font-size: var(--t-foot); line-height: 1.45; color: var(--ink-2); }
.card-tag { position: absolute; top: 15px; right: 15px; font: 600 .625rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cards-tight .card { padding: 14px; }

/* Pager */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 48px; }
.pg { display: grid; gap: 3px; min-width: 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--d-2); }
.pg:hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--e-1); }
.pg-next { text-align: right; }
.pg-k { font: 600 .6875rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pg-t { font: 720 var(--t-callout)/1.25 var(--f-display); overflow-wrap: anywhere; }
.pg-s { font-size: var(--t-cap); color: var(--ink-2); }

/* Laws page */
.law-head { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; margin-bottom: 8px; }
.law-big { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font: 800 1.75rem/1 var(--f-display); }
.law-rulebox { margin: 4px 0 18px; padding: 18px 18px 16px; border-radius: var(--r-lg); background: var(--ink); color: var(--ground); }
.law-k { display: block; margin-bottom: 8px; font: 600 .6875rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; opacity: .62; }
.law-rulebox p { margin: 0; font: 650 1.1875rem/1.4 var(--f-display); letter-spacing: -.01em; max-width: none; }

/* Swatches and type scale (colour, typography, tokens) */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 10px; margin: 8px 0 16px; }
.swatch { overflow: hidden; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.swatch-chip { height: 64px; box-shadow: inset 0 -1px 0 var(--line); }
.swatch-t { display: grid; gap: 2px; padding: 10px 12px 12px; }
.swatch-t b { font: 650 var(--t-foot)/1.3 var(--f-body); }
.swatch-t code { justify-self: start; font-size: .6875rem; }
.swatch-t span { font-size: var(--t-cap); color: var(--ink-2); }
.scale { display: grid; margin: 8px 0 16px; border-radius: var(--r-md); overflow: hidden; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.scale-row { display: grid; gap: 4px; padding: 14px 16px; }
.scale-row + .scale-row { border-top: 1px solid var(--line); }
.scale-k { font: 600 .6875rem/1.2 var(--f-mono); color: var(--ink-3); letter-spacing: .04em; }
.scale-s { overflow-wrap: anywhere; }
.tok-copy { cursor: pointer; border: 0; background: none; padding: 0; text-align: left; }
.tok-copy:hover code { box-shadow: inset 0 0 0 1px var(--lapis); }

@media (min-width: 1024px) {
  .doc { padding-top: 16px; }
  .stage { margin-inline: -28px; }
  .doc-title { grid-template-columns: auto 1fr; align-items: center; gap: 22px; }
  .h-anchor { display: inline; }
}
@media (max-width: 1023px) { .h-anchor { display: none; } }

/* Steps, code, token tables */
.steps { margin: 6px 0 16px; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 10px; }
.steps li { counter-increment: st; position: relative; padding: 12px 14px 12px 50px; border-radius: var(--r-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); line-height: 1.5; }
.steps li::before { content: counter(st); position: absolute; left: 14px; top: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--ground); font: 700 .75rem/1 var(--f-mono); }
.code { margin: 8px 0 16px; padding: 14px 16px; overflow-x: auto; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font: 500 .8125rem/1.6 var(--f-mono); }
.code code { padding: 0; background: none; box-shadow: none; font: inherit; white-space: pre; }
.tok-copy { display: inline-flex; align-items: center; gap: 8px; color: inherit; font: inherit; }
.tok-chip { width: 18px; height: 18px; flex: none; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line); }
.tok-val { color: var(--ink-2); font-size: .75rem; overflow-wrap: anywhere; }
.swatch-t .tok-val { font: 500 .6875rem/1.35 var(--f-mono); color: var(--ink-3); }
.tok-tbl td:nth-child(2) { min-width: 9rem; }
.doc-sec.cited { animation: cited var(--beat) var(--ease-flow) both; border-radius: var(--r-md); }