/* The document around the prototype. Every class starts with d- or pv-. */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-base); color: var(--text-primary); color-scheme: dark light; }
body { margin: 0; font: 15px/1.6 var(--font-sans); background: var(--bg-base); color: var(--text-primary); }
[data-theme="light"] body, :root[data-theme="light"] { color-scheme: light; }
a { color: var(--accent); }
code { font-family: var(--font-code); font-size: .88em; background: color-mix(in srgb, var(--text-primary) 8%, transparent); padding: 1px 5px; border-radius: 5px; }

.d-doc { max-width: 1120px; margin: 0 auto; padding: 40px 24px 96px; }
.d-top h1 { font-size: 34px; line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; margin: 0 0 10px; }
.d-top > p { margin: 0; max-width: 72ch; color: var(--text-secondary); font-size: 17px; }
.d-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 14px; font-size: 13px; color: var(--text-secondary); }
.d-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 18px 0 0; }
.d-nav a { font-size: 13px; color: var(--text-secondary); text-decoration: none; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.d-nav a:hover { color: var(--text-primary); }

.d-sec { margin-top: 56px; }
.d-sec > h2 { font-size: 22px; line-height: 1.25; letter-spacing: -0.01em; font-weight: 600; margin: 0 0 12px; }
.d-sec > h3 { font-size: 16px; font-weight: 600; margin: 28px 0 8px; }
.d-sec > p { margin: 0 0 12px; max-width: 78ch; }
.d-sec > p.d-note { color: var(--text-secondary); font-size: 14px; }
.d-sec > ul { margin: 0 0 12px; padding-left: 20px; max-width: 80ch; }
.d-sec > ul > li { margin: 6px 0; }

.d-table-wrap { overflow-x: auto; border: 1px solid var(--border-strong); border-radius: 12px; }
.d-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.d-table th { text-align: left; font-weight: 600; font-size: 13px; color: var(--text-secondary); padding: 10px 14px; border-bottom: 1px solid var(--border-strong); white-space: nowrap; }
.d-table td { padding: 10px 14px; border-top: 1px solid var(--border); vertical-align: top; }
.d-table tr:first-child td { border-top: 0; }
.d-tag { display: inline-block; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--text-primary) 9%, transparent); }
.d-tag.is-ok { color: color-mix(in srgb, var(--ok) 68%, var(--text-primary)); }
.d-tag.is-warn { color: var(--warn-ink); }
.d-tag.is-no { color: var(--text-secondary); }

.d-refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.d-ref { margin: 0; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; }
.d-ref img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: color-mix(in srgb, var(--text-primary) 6%, transparent); }
.d-ref figcaption { padding: 10px 12px 12px; font-size: 13px; line-height: 1.5; }
.d-ref figcaption p { margin: 4px 0 0; color: var(--text-secondary); }
.d-ref figcaption b { color: var(--text-primary); font-weight: 600; }
.d-ref a { font-weight: 600; text-decoration: none; }
.d-ref a:hover { text-decoration: underline; }

.d-decs { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; }
.d-dec { padding: 14px 16px; border-top: 1px solid var(--border); }
.d-dec:first-child { border-top: 0; }
.d-dec h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.d-dec p { margin: 0; color: var(--text-secondary); font-size: 14px; }
.d-dec p b { color: var(--text-primary); font-weight: 600; }

/* The prototype runs wider than the text so it can reach its real size. */
.d-wide { width: min(1440px, calc(100vw - 32px)); margin-left: calc((min(1120px, 100vw - 48px) - min(1440px, 100vw - 32px)) / 2); }
.pv-bar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 10px; }
.pv-opts { display: contents; }
.pv-opts.is-off .pv-group { opacity: .4; pointer-events: none; }
.pv-group { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
.pv-group button { font: inherit; font-size: 13px; color: var(--text-secondary); background: none; border: 0; padding: 5px 11px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.pv-group button:hover { color: var(--text-primary); }
.pv-group button[aria-pressed="true"] { background: color-mix(in srgb, var(--text-primary) 17%, transparent); color: var(--text-primary); font-weight: 600; }
.pv-group button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.pv-frame { position: relative; overflow: hidden; border-radius: 14px; outline: 1px solid var(--border-strong); }
.pv-stage { position: absolute; top: 0; left: 0; transform-origin: top left; }
.pv-today { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 12px; }
.pv-hint { margin: 10px 0 0; font-size: 13px; color: var(--text-secondary); }
.pv-hint kbd { font-family: var(--font-code); font-size: 12px; border: 1px solid var(--border-strong); border-radius: 5px; padding: 0 5px; }

@media (max-width: 720px) {
  .d-doc { padding: 24px 16px 64px; }
  .d-top h1 { font-size: 28px; }
  .d-wide { width: 100%; margin-left: 0; }
}
/* On a phone a table is a stack of rows, each cell with its column name. */
@media (max-width: 640px) {
  .d-table-wrap { overflow: visible; }
  .d-table, .d-table tbody, .d-table tr, .d-table td { display: block; width: auto; }
  .d-table thead { display: none; }
  .d-table tr { padding: 10px 14px; border-top: 1px solid var(--border); }
  .d-table tr:first-child { border-top: 0; }
  .d-table td { padding: 2px 0; border: 0; }
  .d-table td[data-l]::before { content: attr(data-l) ": "; color: var(--text-secondary); font-size: 13px; }
}