/* Local docs frame, row selection, tile and pencil: promote to kit later.

   v3 (owner mocks xyz-k13, xyz-aieds, xyz-earth, xyz-earth (2) to (6),
   2026-10-14). Every number is a unit of the 2560 x 1440 frame (var(--u)),
   measured from the mock files. Board coordinates are stage coordinates minus
   148, the header. Text is the production words.

   Two kinds of page.

   OVERVIEW (/k13/, /aieds/, /earth/, /micr0pad/): two states, one board
   attribute each. data-overview (the mock layout) is set by script ONLY when
   the full-size row menu, the drawing beside the introduction, the details,
   the read-it list and the signature (pencil, version caption, app tile at the
   bottom right) all fit in the room between the app bar and the footer: no
   scrollbar, the signature pinned at the bottom right, the lines beside it
   narrower. Otherwise (and with no script) the board has data-text-layout and
   the page is drawn exactly like a regular page, as below.

   SUB PAGE (get started, demo, reference, what it measures, confidence, data
   sources, limits) and privacy: no large drawing. A title line ("Start ...")
   above the text, the COMPACT row menu (the full menu drawn at 0.82), the app
   tile, pencil and version caption under the menu, and one scroll column of
   text that runs to the right limit. The signature does not touch the text. */
.docs-frame { margin: 0; color: #ffffff; background: #131313; }
.docs-frame .stage { height: 100svh; min-height: calc(1440 * var(--u)); }
.docs-frame .doc-board { --fs: max(12px, calc(29 * var(--u))); --lh: max(calc(40 * var(--u)), 17px); display: block; position: absolute; inset: calc(148 * var(--u)) 0 calc(160 * var(--u)); padding: 0; min-height: 0; margin: 0; }
/* The board is the frame's 1132 unit body, centered between the header band and
   the footer. On a window taller than the frame the extra height is split
   above and below it. At the frame's own height the offset is zero. */
@container (min-width: 1000px) {
  .docs-frame .doc-board { inset: auto 0 auto 0; top: calc(148 * var(--u) + max(0px, (100% - 1440 * var(--u)) / 2)); height: calc(1132 * var(--u)); }
}
.doc-navigation .docs-label { left: calc(142.7 * var(--u)); top: calc((229.8 - 0.375 * 23.9 - 16 - 148) * var(--u)); }
.doc-navigation .row { left: calc(145.5 * var(--u)); top: calc((var(--y) - 148) * var(--u)); }
.doc-art { display: block; width: 100%; height: 100%; object-fit: contain; }
.doc-board[data-doc-section="k13"] { --dx: 821; --dy: 278; --dw: 367; --dh: 308; }
.doc-board[data-doc-section="aieds"] { --dx: 839.8; --dy: 246.9; --dw: 331; --dh: 340; }
.doc-board[data-doc-section="earth"] { --dx: 839.4; --dy: 247.9; --dw: 339; --dh: 338; }
.doc-board[data-doc-section="micr0pad"] { --dx: 845; --dy: 253; --dw: 335; --dh: 327; }
.doc-board { --intro-t: 249.5; --text-bm: 40; --grow: var(--pin, 0px); }

/* The scroll column. Overview: from the drawing's left edge to the app tile's
   right edge (the scrollbar sits at the far right); the text keeps the mock's
   right limit through the padding, so the signature can reach its own corner. */
.doc-text { position: absolute; left: calc(var(--tl) * var(--u)); right: calc(56 * var(--u)); padding-right: calc((var(--tr) - 56) * var(--u) + 8px); top: calc((var(--intro-t) - 148) * var(--u)); height: calc((935 - var(--intro-t)) * var(--u)); height: round(down, calc(100% - (var(--intro-t) - 148) * var(--u) - var(--text-bm) * var(--u) - var(--grow)), var(--lh)); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2b2b2b transparent; box-sizing: border-box; font: 300 var(--fs)/var(--lh) var(--rk-font-body); color: #ffffff; }
.doc-text:focus-visible { outline: 2px dashed #ffffff; outline-offset: 4px; }
.doc-board[data-overview] { --tl: var(--dx); --tr: 123; --il: calc(1257 - var(--dx)); }
/* micr0pad has one page, so no row menu: the whole group takes the menu's
   place at the left margin (same widths), and privacy the same. */
.doc-board[data-no-menu] { --tl: 486; --tr: 486; }
.doc-board[data-overview][data-no-menu] { --tl: 484; --tr: 484; }
.doc-field { margin: 0; padding: 0; font: 300 var(--fs)/var(--lh) var(--rk-font-body); color: #ffffff; }
.doc-field + .doc-field { margin-top: var(--lh); }
.doc-head { position: relative; min-height: calc((var(--dy) - var(--intro-t) + var(--dh)) * var(--u)); }
.doc-head .doc-intro { margin-left: calc(var(--il) * var(--u)); }
.doc-head + .doc-field { margin-top: var(--lh); }
/* The drawing is in the column: it scrolls away with the text. */
.doc-drawing { position: absolute; left: 0; top: calc((var(--dy) - var(--intro-t)) * var(--u)); width: calc(var(--dw) * var(--u)); height: calc(var(--dh) * var(--u)); }
/* Details and read-it are drawn under the drawing at the mock's measure. */
.doc-board[data-overview] .doc-details, .doc-board[data-overview] .doc-read { max-width: calc(1325 * var(--u)); }
.doc-board[data-overview][data-doc-section="micr0pad"] .doc-details { margin-left: calc(161 * var(--u)); }
.doc-board[data-overview][data-doc-section="micr0pad"] .doc-read { margin-left: calc(54 * var(--u)); }
/* Compact state: no large drawing, the introduction at the column's left. */
.doc-board[data-text-layout] .doc-drawing { display: none; }
.doc-board[data-text-layout] .doc-head { min-height: 0; }
.doc-board[data-text-layout] .doc-head .doc-intro { margin-left: 0; }
.doc-board[data-overview] .doc-title, .doc-board[data-overview] .doc-tile-compact, .doc-board:not([data-overview]) .doc-tile-fit { display: none; }

/* Sub page text layout: the text begins level with the title line's block and
   spans the open width right of the rows (left edge 794 units, right edge
   2381, both measured from the mock files). */
.doc-board[data-text-layout] { --tl: 794; --tr: 140; --intro-t: 281; --text-bm: 40; --grow: var(--pin, 0px); }
.doc-board[data-text-layout][data-no-menu] { --tl: 486; --tr: 486; }
/* An overview with no row menu (micr0pad): the pencil sits at the left margin
   under where the menu would be, so the text starts clear of it (pencil right
   edge 563 units). */
.doc-board[data-text-layout][data-overview-page][data-no-menu] { --tl: 600; }
.doc-board[data-text-layout] .doc-text { right: calc(var(--tr) * var(--u)); padding-right: 8px; }
.doc-board[data-text-layout] .doc-text pre { white-space: pre; overflow-x: auto; overflow-y: hidden; }
.doc-title { position: absolute; left: calc(var(--tl) * var(--u)); top: calc((224 - 148 - 16) * var(--u)); height: calc(32 * var(--u)); margin: 0; font: italic 400 max(12px, calc(23.8 * var(--u))) / calc(32 * var(--u)) var(--rk-font-mono); color: #ffffff; white-space: nowrap; }
/* The title line names the page, so the page's own heading is for assistive
   technology only. */
.doc-board[data-text-layout] .doc-text h1 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* The compact row menu the sub page mocks draw: the full menu at 0.82, same
   left edge, the first row a little higher (xyz-earth (3) to (6)). */
.doc-board[data-text-layout] .doc-navigation { transform: translateY(calc(12 * var(--u))) scale(0.82); transform-origin: calc(143 * var(--u)) 0; }
/* The open state X (owner 2026-10-13): the row of the current page carries the
   marker in its box, in every mode. The drawing is the landing's own. */
.row-hit[aria-current="page"] .row-selection { display: block; }
/* The four frames are set at slightly different sizes (28.9 to 30.2 units, and
   a 42 unit line pitch in the AiEDs frame); each is built as its own frame. */
.docs-frame .doc-board[data-doc-section="k13"] { --fs: max(12px, calc(28.9 * var(--u))); }
.docs-frame .doc-board[data-doc-section="aieds"] { --fs: max(12px, calc(30.2 * var(--u))); --lh: max(calc(42 * var(--u)), 17px); }
.docs-frame .doc-board[data-doc-section="earth"] { --fs: max(12px, calc(29.4 * var(--u))); }
.docs-frame .doc-board[data-doc-section="micr0pad"] { --fs: max(12px, calc(29.8 * var(--u))); }
/* micr0pad's lower blocks are drawn smaller (about 25 units, 33 units apart). */
.doc-board[data-overview][data-doc-section="micr0pad"] .doc-details, .doc-board[data-overview][data-doc-section="micr0pad"] .doc-read { --fs: max(12px, calc(25 * var(--u))); --lh: max(calc(33 * var(--u)), 15px); }
.doc-text [data-original-content] { display: block; width: auto; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; font: inherit; }
.doc-text .method-sidebar { display: none; }
.doc-text .method-sidebar:has(nav[aria-label$="contents"]) { display: block; float: none; width: auto; max-width: none; background: none; border: 0; margin: 0 0 24px; padding: 0; }
.doc-text .method-sidebar .section-nav { display: none; }
.doc-text article { width: auto; max-width: none; padding: 0; margin: 0; background: none; border: 0; font: inherit; }
.doc-text h1, .doc-text h2, .doc-text h3, .doc-text p, .doc-text li { font: inherit; letter-spacing: 0; color: inherit; }
.doc-text h1 { margin: 0 0 var(--lh); font-weight: inherit; }
.doc-text h2, .doc-text h3 { margin: var(--lh) 0 0; font-weight: inherit; }
.doc-text p { margin: 0 0 var(--lh); }
.doc-text a { color: #ff4124; overflow-wrap: anywhere; }
.doc-text .ai { color: #ff4124; }
.doc-text .docs-section { margin: 0; }
.doc-text .docs-links { display: block; margin: 0 0 var(--lh); padding-left: calc(51 * var(--u)); list-style: disc; line-height: var(--lh); }
.doc-text .docs-links li { margin: 0; padding: 0; border: 0; background: none; }
.doc-text .docs-lede { margin-bottom: var(--lh); }
.doc-text pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; overflow: hidden; background: none; border: 0; padding: 0; margin: 0 0 var(--lh); font-size: max(12px, calc(24 * var(--u))); line-height: var(--lh); }
.doc-text .table-scroll { overflow-x: auto; margin: 0 0 var(--lh); }
.doc-text table { width: 100%; min-width: 0; table-layout: fixed; }
.doc-text th, .doc-text td { overflow-wrap: anywhere; padding: calc((var(--lh) - 1px) / 2) 6px; line-height: var(--lh); }
.doc-text .demo-controls, .doc-text .demo-output, .doc-text .demo-intro { min-width: 0; }
.doc-text .demo-grid { display: block; }
.doc-text .level-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
/* The drawn table (xyz-earth (5)): dotted chalk borders, an uppercase header
   row on a dark band, the first column centered, the others left. It is
   narrower than the column and centered in it. */
.doc-board[data-text-layout] .doc-text table.md-table { width: calc(1371 * var(--u)); max-width: 100%; margin: 0 0 0 calc(83 * var(--u)); border-collapse: collapse; border: calc(3 * var(--u)) dotted #ffffff; table-layout: auto; }
.doc-board[data-text-layout] .doc-text .md-table th, .doc-board[data-text-layout] .doc-text .md-table td { border: calc(3 * var(--u)) dotted #ffffff; padding: calc(28 * var(--u)) calc(14 * var(--u)); font: 400 max(12px, calc(21 * var(--u))) / calc(27 * var(--u)) var(--rk-font-mono); color: #d9d9d9; text-align: left; background: none; }
.doc-board[data-text-layout] .doc-text .md-table th { padding-block: calc(25 * var(--u)); background: #2b2b2b; color: #fdcac3; text-transform: uppercase; text-align: center; font: 500 max(12px, calc(28 * var(--u))) / calc(34 * var(--u)) var(--rk-font-body); letter-spacing: 0; }
.doc-board[data-text-layout] .doc-text .md-table td:first-child { text-align: center; font: 400 max(12px, calc(26 * var(--u))) / calc(32 * var(--u)) var(--rk-font-body); color: #ffffff; letter-spacing: 0.04em; }
.doc-board[data-text-layout] .doc-text .md-table td:first-child strong { font-weight: 400; }
.doc-board[data-text-layout] .doc-text .md-table td:first-child { width: 26%; overflow-wrap: normal; word-break: normal; }
/* The data sources mock (xyz-earth (5)) goes from the lede straight to the
   table: the section heading above it is for assistive technology only. */
.doc-board[data-doc-page="data-sources"] .doc-text .docs-section:first-of-type > h2 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Overview blocks. The title heading and the "What it is" headings the mocks do
   not draw stay for assistive technology only. AiEDs draws "What it is". */
.doc-field h1,
.doc-board:not([data-doc-section="aieds"]) .doc-intro h2,
.doc-board[data-doc-section="k13"] .doc-details h2,
.doc-board[data-doc-section="earth"] .doc-details [data-doc-title="What it is not"] h2 { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.doc-field .docs-section h2 { margin: 0; }
.doc-field .docs-section { margin: 0; }
.doc-board[data-doc-section="aieds"] .doc-intro p { margin-bottom: 0; }
.doc-board[data-doc-section="earth"] .doc-intro .docs-section p + p { margin-bottom: 0; color: #858585; text-align: center; font-size: max(12px, calc(24 * var(--u))); line-height: var(--lh); max-width: calc(930 * var(--u)); margin-inline: auto; }
.doc-levels { margin: 0; }
.doc-levels .level-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 calc(40 * var(--u)); margin: 0; padding: 0; list-style: none; }
.doc-levels .level-list li { margin: 0; padding: 0; white-space: nowrap; line-height: var(--lh); }
.doc-levels .level-list strong, .doc-levels .level-meta { font-weight: 400; font-size: inherit; color: #ffffff; }
.doc-board[data-overview][data-doc-section="micr0pad"] .doc-details pre { color: #858585; font-size: max(12px, calc(24 * var(--u))); margin: var(--lh) 0; }
.doc-board[data-doc-section="micr0pad"] .doc-credit-link { color: #d7486d; }
.doc-board[data-doc-section="micr0pad"] .doc-read .docs-section > p { color: #ff4124; margin: 0; }

/* The signature: pencil, version caption, app tile. */
.doc-signature { position: absolute; right: calc(56 * var(--u)); bottom: calc(40 * var(--u)); width: calc(520 * var(--u)); height: calc(300 * var(--u)); pointer-events: none; }
.doc-pencil { position: absolute; width: calc(330 * var(--u)); height: calc(244 * var(--u)); left: 0; bottom: calc(70 * var(--u)); }
.pencil-line { fill: none; stroke: #2b2b2b; stroke-width: 19; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; animation: pencil-draw 4s ease-in-out infinite alternate; }
@keyframes pencil-draw { 0%, 15% { stroke-dashoffset: 1000; } 85%, 100% { stroke-dashoffset: 0; } }
.doc-tile { position: absolute; width: calc(150 * var(--u)); height: calc(150 * var(--u)); right: calc(14 * var(--u)); bottom: 0; }
.doc-version { position: absolute; right: calc(208 * var(--u)); bottom: calc(6 * var(--u)); color: #2b2b2b; font: 300 max(12px, calc(28 * var(--u)))/1.2 var(--rk-font-body); }
.doc-board[data-doc-section="micr0pad"] .doc-version { right: calc(196 * var(--u)); font: 400 max(12px, calc(30 * var(--u)))/1.2 var(--rk-font-hero); }
/* Mock layout: pinned to the column's bottom right corner (the column's right
   edge, its bottom edge). */
.doc-board[data-overview] .doc-signature { bottom: calc(var(--text-bm) * var(--u) + var(--grow)); }
/* Sub page: under the menu (xyz-earth (3) to (6)): tile at x 192 to 294 and
   y 934 to 1030, pencil to its right (339 to 563, 927 to 1091), caption under
   the tile, centered on it. Board units. */
.doc-board[data-text-layout] .doc-signature { inset: 0; right: auto; bottom: auto; width: 100%; height: 100%; }
.doc-board[data-text-layout] .doc-tile { left: calc(192 * var(--u)); top: calc(934 * var(--u)); right: auto; bottom: auto; width: calc(102 * var(--u)); height: calc(96 * var(--u)); object-fit: contain; }
.doc-board[data-text-layout] .doc-pencil { left: calc(339 * var(--u)); top: calc(927 * var(--u)); bottom: auto; width: calc(224 * var(--u)); height: calc(166 * var(--u)); }
.doc-board[data-text-layout] .doc-version, .doc-board[data-text-layout][data-doc-section] .doc-version { left: calc(172 * var(--u)); width: calc(142 * var(--u)); top: calc(1056 * var(--u)); right: auto; bottom: auto; text-align: center; font-size: max(12px, calc(24 * var(--u))); }
.doc-board[data-doc-section="privacy"] { --text-bm: 40; }
@media (prefers-reduced-motion: reduce) {
  .pencil-line { animation: none; stroke-dashoffset: 0; }
}

/* The mock layout's static band (mock layout only, no scrolling, so nothing has
   to track a scroll position): the lines beside the pencil, the caption and
   the tile are narrower. .doc-avoid-pad is a zero width float as tall as the
   column less the signature's band (a margin would be part of the exclusion),
   and .doc-avoid is the band, 16 units clear of the signature's top left. */
.doc-avoid-pad, .doc-avoid { display: none; float: right; clear: right; width: 0; height: 0; margin: 0; padding: 0; pointer-events: none; }
.doc-board[data-overview] .doc-avoid-pad, .doc-board[data-overview] .doc-avoid { display: block; }
.doc-board[data-overview] .doc-avoid-pad { height: max(0px, calc(100% - 330 * var(--u))); }
.doc-board[data-overview] .doc-avoid { width: max(0px, calc((592 - var(--tr)) * var(--u))); height: calc(330 * var(--u)); }
/* Nothing scrolls in the mock layout, so the box is not cut to a whole line:
   the signature sits on the column's bottom edge, as the mock draws it. */
.doc-board[data-overview] .doc-text { overflow-anchor: none; height: calc(100% - (var(--intro-t) - 148) * var(--u) - var(--text-bm) * var(--u) - var(--grow)); }
.doc-board[data-overview] .doc-text pre { overflow: visible; }

@media (max-width: 999px), (min-width: 1000px) and (max-width: 1366px) and (orientation: portrait) {
  .docs-frame .stage { height: auto; min-height: 100svh; }
  .docs-frame .doc-board { position: relative; inset: auto; display: grid; grid-template-columns: 39% minmax(0,1fr); grid-template-rows: repeat(3, max-content); gap: 28px; padding: 30px 4%; min-height: 0; height: auto; flex: 1 0 auto; margin-block: 0; align-content: start; }
  .docs-frame .doc-board[data-no-menu] { grid-template-columns: minmax(0,1fr); }
  .doc-navigation { grid-row: 1 / 4; min-width: 0; }
  .doc-navigation .docs-label { position: static; font-size: 16px; }
  .doc-navigation .row { left: auto; top: auto; }
  .doc-board[data-text-layout] .doc-navigation { transform: none; }
  .doc-title { display: none; }
  .doc-drawing { position: static; width: 150px; height: 150px; justify-self: center; }
  .docs-frame .doc-board, .docs-frame .doc-board[data-doc-section], .doc-board[data-doc-section] .doc-details, .doc-board[data-doc-section] .doc-read { --fs: 16px; --lh: 1.5em; }
  .doc-text, .doc-board[data-text-layout] .doc-text { position: static; min-width: 0; height: auto; max-height: none; overflow: visible; padding: 8px; }
  .doc-text[data-split-text] { display: block; overflow: visible; }
  .doc-field .docs-section:last-child > :last-child { margin-bottom: 0; }
  .doc-field + .doc-field { margin-top: 1.5em; }
  .doc-head { min-height: 0; }
  .doc-head .doc-intro, .doc-board[data-overview] .doc-details, .doc-board[data-overview] .doc-read, .doc-board[data-doc-section="micr0pad"] .doc-details, .doc-board[data-doc-section="micr0pad"] .doc-read { margin-left: 0; max-width: none; }
  .doc-levels .level-list { gap: 0 16px; }
  .doc-levels .level-list li { white-space: normal; }
  .doc-board[data-doc-section="earth"] .doc-intro .docs-section p + p, .doc-board[data-doc-section="micr0pad"] .doc-details pre { font-size: 14px; }
  .doc-board[data-text-layout] .doc-text h1 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin: 0 0 var(--lh); }
  .doc-board[data-text-layout] .doc-text table.md-table { width: 100%; margin: 0; border: 0; table-layout: fixed; }
  .doc-board[data-text-layout] .doc-text .md-table th, .doc-board[data-text-layout] .doc-text .md-table td { border: 0; padding: calc((var(--lh) - 1px) / 2) 6px; font: inherit; color: inherit; text-align: left; }
  .doc-board[data-text-layout] .doc-text .md-table th { background: none; text-transform: none; }
  .doc-board[data-text-layout] .doc-text .md-table td:first-child { text-align: left; letter-spacing: 0; width: auto; overflow-wrap: anywhere; font: inherit; }
  .doc-signature, .doc-board[data-text-layout] .doc-signature, .doc-board[data-overview] .doc-signature { position: relative; inset: auto; justify-self: end; width: 230px; height: 145px; margin: 0 0 0 auto; }
  .doc-pencil, .doc-board[data-text-layout] .doc-pencil { position: absolute; left: 0; top: auto; width: 140px; height: 105px; bottom: 40px; }
  .doc-tile, .doc-board[data-text-layout] .doc-tile { position: absolute; left: auto; top: auto; right: 14px; bottom: 0; width: 68px; height: 68px; }
  .doc-version, .doc-board[data-doc-section] .doc-version, .doc-board[data-text-layout][data-doc-section] .doc-version { position: absolute; left: auto; top: auto; width: auto; text-align: left; right: 85px; bottom: 0; font-size: 12px; }
}
@media (max-width: 767px) {
  .docs-frame .doc-board { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 28px 18px; }
  .doc-navigation { grid-row: auto; }
  .doc-text { height: auto; max-height: none; }
  .doc-drawing { display: none; }
  .doc-navigation .row { position: relative; }
  .doc-signature, .doc-board[data-text-layout] .doc-signature, .doc-board[data-overview] .doc-signature { display: flex; flex-direction: column; align-items: center; gap: 18px; justify-self: center; width: 100%; height: auto; margin: 24px 0 0; }
  .doc-signature .doc-pencil { position: static; order: 0; width: 140px; height: 105px; }
  .doc-signature .doc-tile { position: static; order: 1; width: 68px; height: 68px; }
  .doc-signature .doc-version { position: static; order: 2; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
  .doc-text pre { font-size: 12px; }
}
/* Tablet band (owner 2026-10-13, revised the same evening): the stacked frame
   from 768 to 999, and the portrait band 1000 to 1366 that uses it. The large
   drawing leaves the layout (display none, and its image is lazy so a hidden
   one is never fetched) and the page is drawn like the mock xyz-doctext.png:
   the rows column on the left (the stacked frame's 39 percent), the text
   beginning level with the first row in the column right of it, in normal flow.
   The page scrolls, not a nested box, and the signature (pencil, version
   caption, app tile) follows the text at the bottom right, so text can never
   run under it. At 767 and below the phone design above is untouched (rows
   above text, centered signature). */
@media (min-width: 768px) and (max-width: 999px), (min-width: 1000px) and (max-width: 1366px) and (orientation: portrait) {
  .doc-drawing { display: none; }
  .doc-text, .doc-text[data-split-text] { display: block; overflow: visible; height: auto; max-height: none; padding: 0; }
  .doc-signature, .doc-board[data-overview] .doc-signature { margin: 0 0 0 auto; }
}
/* K13 draws its two "What it is" paragraphs as one run (xyz-docs-k13). */
.doc-board[data-doc-section="k13"] .doc-intro .docs-section p { display: inline; margin: 0; }
.doc-board[data-doc-section="k13"] .doc-intro .docs-section { display: block; margin-bottom: var(--lh); }
/* The kit's reading measure, line height and colors for docs prose do not apply
   inside the frame: the mocks set one measure per block. */
.doc-text .docs-lede, .doc-text .docs-section p { max-width: none; line-height: inherit; color: inherit; }
.doc-levels .level-list strong, .doc-levels .level-meta { font: inherit; color: #ffffff; }
.doc-levels .level-glyph { font-size: inherit; }
.doc-text .docs-section h2 { font-size: inherit; line-height: inherit; color: inherit; }
/* Nothing may be clipped by the text column: the kit's 520px table minimum and
   an unbreakable URL in a paragraph both pushed content past it on a phone. */
.doc-text .table-scroll .md-table { min-width: 0; }
.doc-text code { overflow-wrap: anywhere; }
/* Inline code and the level emoji must not grow a line past the grid. */
.doc-text code, .doc-field code, .doc-field .level-glyph { line-height: 0; }
/* Sub pages are set at one size in the desktop frame (the mocks draw the same
   28.9 unit text on every sub page); the stacked layouts keep their own. */
@media (min-width: 1367px), (min-width: 1000px) and (orientation: landscape) {
  .docs-frame .doc-board[data-text-layout][data-doc-section] { --fs: max(12px, calc(28.9 * var(--u))); --lh: max(calc(40 * var(--u)), 17px); }
}
/* micr0pad draws its last two introduction paragraphs as one run. */
.doc-board[data-doc-section="micr0pad"] .doc-intro .docs-section p:nth-child(n+3) { display: inline; margin: 0; }
/* A trailing margin is not content: it would scroll a field that fits. */
.doc-field .docs-section:last-child > :last-child { margin-bottom: 0; }
.doc-field > :last-child { margin-bottom: 0; }
/* Fill rule (owner 2026-10-13, shared with the landing: see landing.css). The
   board is the frame's 1132 unit body, scaled by k (the room between the app
   bar and the footer over the body's height at the base unit, held by 4 percent
   side margins, never below 1) and centered between the app bar and the footer.
   --pin is the distance the board's bottom is above the room's bottom edge
   (negative when the board sits higher); the text column grows by it, so the
   column and the signature in it reach the room's bottom right corner on a
   tall window. The signature's reach is 2504 units: the group's half width is
   1224 (kw there is 0.92 * window / (2 * 1224 * unit)). */
@supports (width: calc(1px * tan(atan2(1px, 1px)))) {
@media (min-width: 1367px), (min-width: 1000px) and (orientation: landscape) {
  .docs-frame .stage {
    --kw: tan(atan2(calc(0.92 * 100vw), calc(2448 * var(--bu))));
  }
  .docs-frame .doc-board {
    --u: calc(var(--bu) * var(--k));
    --pin: calc((var(--hb) - var(--H) + var(--fh)) / 2 + 566 * var(--u));
    inset: auto;
    left: 50%;
    width: calc(2560 * var(--u));
    margin-left: calc(-1280 * var(--u));
    top: calc((var(--H) + var(--hb) - var(--fh)) / 2 - 566 * var(--u));
    height: calc(1132 * var(--u));
  }
  /* Sub pages, top aligned (owner 2026-10-13: no empty band under the app
     bar). The board starts at the app bar's bottom edge; the room that is left
     under it goes to the text box. */
  .docs-frame .doc-board[data-text-layout] {
    --pin: calc(var(--hb) + var(--fh) + 1132 * var(--u) - var(--H));
    top: var(--hb);
  }
}
/* The cramped band (below) gives every page the text layout, so it is top
   aligned the same way. */
@media (min-width: 1000px) and (max-width: 1127px) and (orientation: landscape) {
  .docs-frame .doc-board {
    --pin: calc(var(--hb) + var(--fh) + 1132 * var(--u) - var(--H));
    top: var(--hb);
  }
}
}
/* Cramped desktop frame (1000 to 1127 px wide): the fit script never picks the
   mock layout here, so every page is the compact state. */
/* AiEDs draws a 42 unit line pitch and its list starts 8 units closer to the
   introduction than the other frames (xyz-aieds). */
.doc-board[data-overview][data-doc-section="aieds"] .doc-head + .doc-field { margin-top: calc(var(--lh) - 8 * var(--u)); }