/* design.html: a long, normally-scrolling document page. Themed by data-theme
   (the style being documented) so the reader sees the system while reading
   about it, but laid out as a document, not a marketing page. */

.dmd-body{overflow:auto!important}
html:has(.dmd-page){overflow:auto!important;height:auto!important}
body.dmd-page{display:block;height:auto;min-height:100vh;overflow:visible}

.dmd-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  padding:0 var(--bd-gutter);height:var(--bd-nav-h);
  background:color-mix(in srgb,var(--bd-bg) 92%,transparent);backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--bd-border)}
.dmd-header__title{font:600 15px/1 var(--bd-sans);color:var(--bd-fg-2);margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dmd-header__actions{display:flex;gap:8px;align-items:center;flex:none}

.dmd-main{width:min(960px,calc(100% - 2 * var(--bd-gutter)));margin-inline:auto;padding:48px 0 120px;
  display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:56px;align-items:start}
@media (max-width:1100px){.dmd-main{grid-template-columns:minmax(0,1fr)}.dmd-toc-wrap{display:none}}

.dmd-hero{margin:0 0 40px}
.dmd-hero h1{font:var(--bd-fw-head) clamp(32px,5vw,48px)/1.1 var(--bd-display);letter-spacing:-0.02em;margin:0 0 14px}
.dmd-hero p{font-size:17px;line-height:1.6;color:var(--bd-fg-2);max-width:68ch;margin:0}

.dmd-toc-wrap{position:sticky;top:calc(var(--bd-nav-h) + 24px)}
.dmd-toc{display:grid;gap:4px;font-size:13px}
.dmd-toc__link{color:var(--bd-fg-3);text-decoration:none;padding:4px 0;border-left:2px solid transparent;padding-left:10px}
.dmd-toc__link:hover{color:var(--bd-fg)}
.dmd-toc__link--1{font-weight:600;color:var(--bd-fg)}
.dmd-toc__link--2{padding-left:10px}
.dmd-toc__link--3{padding-left:22px;font-size:12px;color:var(--bd-fg-3)}

.dmd-section{margin:0 0 56px}
.dmd-section h2{font:var(--bd-fw-head) 26px/1.2 var(--bd-display);letter-spacing:-0.015em;margin:0 0 18px;padding-top:8px;border-top:1px solid var(--bd-border);padding-top:24px}
.dmd-section:first-of-type h2{border-top:0;padding-top:0}

#dmd-body h1,#dmd-body h2,#dmd-body h3,#dmd-body h4{font-family:var(--bd-display);letter-spacing:-0.015em;scroll-margin-top:calc(var(--bd-nav-h) + 16px)}
#dmd-body h2{font-size:28px;margin:48px 0 16px;padding-top:24px;border-top:1px solid var(--bd-border)}
#dmd-body h2:first-child{border-top:0;padding-top:0;margin-top:0}
#dmd-body h3{font-size:19px;margin:28px 0 10px}
#dmd-body h4{font-size:15px;margin:20px 0 8px}
#dmd-body p{font-size:16px;line-height:1.65;color:var(--bd-fg-2);margin:0 0 14px;max-width:72ch}
#dmd-body ul,#dmd-body ol{font-size:16px;line-height:1.6;color:var(--bd-fg-2);margin:0 0 16px;padding-left:22px;max-width:72ch}
#dmd-body li{margin:0 0 6px}
#dmd-body code{font:500 13px/1 var(--bd-mono);background:color-mix(in srgb,var(--bd-fg) 7%,transparent);padding:2px 6px;border-radius:4px;color:var(--bd-fg)}
#dmd-body strong{color:var(--bd-fg);font-weight:600}
#dmd-body a{color:var(--bd-tertiary-text,var(--bd-accent-fg));text-decoration:underline;text-underline-offset:2px}

.dmd-table-wrap{overflow-x:auto;margin:0 0 20px;border-radius:var(--bd-r-lg);border:1px solid var(--bd-border)}
.dmd-table{width:100%;border-collapse:collapse;font-size:14px}
.dmd-table th,.dmd-table td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--bd-border);vertical-align:top}
.dmd-table th{font:600 12px/1 var(--bd-sans);text-transform:uppercase;letter-spacing:.04em;color:var(--bd-fg-3);background:color-mix(in srgb,var(--bd-fg) 4%,transparent)}
.dmd-table td code{font-size:12px}
.dmd-table tr:last-child td{border-bottom:0}

.dmd-code{background:var(--bd-night,#141517);color:var(--bd-on-night,#f1efea);border-radius:var(--bd-r-lg);
  padding:16px 18px;overflow-x:auto;font:13px/1.55 var(--bd-mono);margin:0 0 20px}
.dmd-code .tk-prop{color:#8fe3f0}
.dmd-code .tk-var{color:#f2b8d8}
.dmd-code .tk-color{color:#fd8672;font-weight:600}
.dmd-code .tk-sel{color:#31b87a}

.dmd-tok-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin:0 0 24px}
.dmd-tok-cell{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;gap:2px 10px;align-items:center;
  padding:10px;border-radius:var(--bd-r-md);background:var(--bd-surface-2,var(--bd-surface));border:1px solid var(--bd-border)}
.dmd-swatch{grid-row:1 / 3;width:28px;height:28px;border-radius:var(--bd-r-sm);background:var(--c);border:1px solid var(--bd-border)}
.dmd-tok-name{font:600 12px/1.3 var(--bd-sans);color:var(--bd-fg)}
.dmd-tok-val{font:500 11px/1.3 var(--bd-mono);color:var(--bd-fg-3)}

.dmd-type-grid{display:grid;gap:14px;margin:0 0 24px}
.dmd-type-row{display:grid;grid-template-columns:90px 1fr auto;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--bd-border)}
.dmd-type-label{font:600 12px/1 var(--bd-mono);color:var(--bd-fg-3);text-transform:uppercase}
.dmd-type-sample{color:var(--bd-fg);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dmd-type-meta{font:500 11px/1 var(--bd-mono);color:var(--bd-fg-3);white-space:nowrap}

.dmd-space-row{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 24px}
.dmd-space-cell{display:grid;gap:6px;font:500 11px/1 var(--bd-mono);color:var(--bd-fg-3)}
.dmd-space-bar{display:block;height:8px;background:var(--bd-accent);border-radius:2px}

.dmd-round-row{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 24px}
.dmd-round-cell{display:grid;gap:8px;justify-items:center;font:500 11px/1 var(--bd-mono);color:var(--bd-fg-3)}
.dmd-round-swatch{display:block;width:48px;height:48px;background:var(--bd-surface-2,var(--bd-surface));border:2px solid var(--bd-border-strong,var(--bd-border))}

.dmd-specimen{margin:0 0 32px;padding:20px;border-radius:var(--bd-r-lg);border:1px solid var(--bd-border);background:var(--bd-surface-2,var(--bd-surface))}
.dmd-specimen h4{font:600 13px/1 var(--bd-sans);text-transform:uppercase;letter-spacing:.04em;color:var(--bd-fg-3);margin:0 0 14px}
.dmd-specimen__body{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}

/* Carried over from components.html's inline component-sheet styles (.sh-*),
   which live in a scoped <style> block there that a fetch+clone of the body
   sections alone does not bring along. Specimens reuse the same .sh-cell
   grid so the imported markup (which still carries those classes) renders
   identically to the live sheet instead of collapsing into stacked text. */
.sh-cells{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.sh-cell{display:grid;gap:8px;min-width:140px;padding:14px;background:var(--bd-surface-2);border-radius:var(--bd-r-lg);box-shadow:var(--bd-sh-ring,var(--bd-sh-1))}
.sh-l{font:500 11px/1 var(--bd-mono);color:var(--bd-fg-3)}
.sh-cell>:not(.sh-l){justify-self:start}
.sh-dark{padding:24px;border-radius:var(--bd-r-xl)}
[data-theme="retro"] .sh-cell{border-radius:0}

.dmd-download-menu{position:relative}
.dmd-download-menu__list{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;background:var(--bd-surface);
  border-radius:var(--bd-r-md);box-shadow:var(--bd-sh-2);padding:6px;display:grid}
.dmd-download-menu__list a{display:block;padding:9px 12px;border-radius:var(--bd-r-sm);font:500 13px/1 var(--bd-sans);color:var(--bd-fg);text-decoration:none}
.dmd-download-menu__list a:hover{background:color-mix(in srgb,var(--bd-fg) 6%,transparent)}
.dmd-download-menu__list[hidden]{display:none}

@media (max-width:390px){
  .dmd-header{padding:0 16px}
  .dmd-header__title{display:none}
  .dmd-main{padding:32px 0 80px}
}

.dmd-logo-placeholder{display:inline-block;width:72px;height:24px;border-radius:4px;background:color-mix(in srgb,var(--bd-fg) 14%,transparent)}