/* Eddy docs. Builds on /styles.css (.doc card, tokens); only docs-specific layout lives here. */
.docs-layout {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 0 32px;
  align-items: start; margin-top: 8px;
}
.docs-main.doc { max-width: 820px; width: 100%; margin: 0 0 64px; min-width: 0; }
.docs-main.doc h2, .docs-main.doc h3 { scroll-margin-top: 16px; }
/* One dark text colour on the docs card: the brand kit's body ink for words on face and white. */
.docs-main p, .docs-main li, .docs-main dd { color: var(--eddy-color-ink-soft); }

.docs-nav { position: sticky; top: 16px; padding: 18px 0; font-size: 0.98rem; }
.docs-nav__title, .docs-toc__title {
  font-family: var(--font-px); font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 8px; color: var(--charcoal);
}
.docs-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.docs-nav li a { display: block; padding: 6px 10px; color: var(--charcoal); text-decoration: none; }
.docs-nav li a:hover { text-decoration: underline; }
.docs-nav li a[aria-current="page"] { background: var(--charcoal); color: var(--cloud); }
.docs-nav__agents { margin: 16px 0 0; padding: 0 10px; font-size: 0.86rem; line-height: 1.6; color: var(--eddy-color-ink-sky); }
.docs-nav__agents a { color: inherit; white-space: nowrap; }

.docs-toc { margin: 18px 0 8px; padding: 14px 16px; background: var(--cloud); box-shadow: inset 0 0 0 2px var(--app-border); }
.docs-toc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.docs-toc li::marker { content: none; }

.docs-main ol { padding-left: 1.4em; display: grid; gap: 6px; margin: 12px 0 0; }
.docs-main ol li, .docs-main td { color: var(--eddy-color-ink-soft); }
.docs-main ul + p, .docs-main ol + p { margin-top: 12px; }
.docs-main code { font-family: var(--font-mono); font-size: 0.9em; background: var(--app-raised); padding: 1px 5px; overflow-wrap: anywhere; }
.docs-code {
  margin: 14px 0; padding: 14px 16px; background: var(--appd-surface); color: var(--appd-ink);
  font-family: var(--font-mono); font-size: 0.86rem; line-height: 1.5; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere;
}
.docs-code code { background: none; padding: 0; font-size: inherit; color: inherit; overflow-wrap: normal; }

.docs-table { margin: 14px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.docs-table table { border-collapse: collapse; width: 100%; min-width: 480px; font-size: 0.95rem; background: var(--cloud); }
.docs-table th, .docs-table td { text-align: left; vertical-align: top; padding: 8px 10px; border: 1px solid var(--app-border); }
.docs-table th { background: var(--app-pane); font-weight: 700; }
/* Phones: no sideways scrolling inside tables. Each row becomes a card, each cell shows its column name. */
@media (max-width: 600px) {
  .docs-table { overflow-x: visible; }
  .docs-table table { min-width: 0; background: transparent; }
  .docs-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .docs-table tr { display: block; margin: 0 0 10px; background: var(--cloud); border: 1px solid var(--app-border); }
  .docs-table td { display: block; border: 0; border-top: 1px solid var(--app-border); padding: 6px 12px 8px; }
  .docs-table td:first-child { border-top: 0; }
  .docs-table td::before { content: attr(data-label); display: block; font-size: 0.78rem; font-weight: 700; color: var(--ink-soft); }
}

/* One quiet note style for every aside (notes and "Unknown:" / "Not yet" alike): a hairline above and below, no fill,
   no coloured bar. The bold lead-in word carries the meaning. */
.docs-callout { margin: 20px 0; padding: 12px 0; border-top: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border); }
.docs-callout p { margin: 0; color: var(--eddy-color-ink-soft); }
.docs-callout strong:first-child { color: var(--charcoal); }

/* Media keeps its own shape at every width: the frame sets the ratio, the media fills it. */
.docs-media { margin: 18px 0; }
.docs-media__frame { position: relative; width: 100%; background: var(--appd-surface); overflow: hidden; }
.docs-media--r16x9 .docs-media__frame { aspect-ratio: 16 / 9; }
.docs-media--r9x16 .docs-media__frame { aspect-ratio: 9 / 16; max-width: min(100%, 360px); margin: 0 auto; }
.docs-media--r1x1 .docs-media__frame { aspect-ratio: 1 / 1; max-width: min(100%, 480px); margin: 0 auto; }
.docs-media__frame > video, .docs-media__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.docs-media figcaption { margin-top: 8px; font-size: 0.9rem; color: var(--ink-soft); text-align: center; }

.docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
.docs-pager a { display: grid; gap: 2px; padding: 12px 14px; background: var(--cloud); box-shadow: inset 0 0 0 2px var(--charcoal); text-decoration: none; color: var(--charcoal); font-weight: 700; }
.docs-pager a span { font-weight: 400; font-size: 0.85rem; color: var(--ink-soft); }
.docs-pager__next { text-align: right; }
.docs-updated { margin-top: 24px; }

@media (max-width: 960px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); }
  .docs-nav { position: static; padding: 8px 0 12px; }
  .docs-nav ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .docs-nav li a { box-shadow: inset 0 0 0 2px var(--charcoal); background: var(--cloud); padding: 6px 10px; }
  .docs-nav__agents { margin-top: 10px; padding: 0; }
  .docs-main.doc { margin: 0 0 48px; }
}
@media (max-width: 860px) { .docs-main.doc { margin-left: 0; margin-right: 0; } }
@media (max-width: 520px) { .docs-pager { grid-template-columns: 1fr; } .docs-pager__next { text-align: left; } }
/* Phones: the page list is one swipeable row so the article starts near the top. */
@media (max-width: 600px) {
  .docs-nav__title { display: none; }
  .docs-nav ul { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 2px 2px 6px; scrollbar-width: thin; }
  .docs-nav li { flex: 0 0 auto; }
  .docs-nav li a { white-space: nowrap; }
  .docs-nav ul { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
  .docs-toc { padding: 10px 12px; font-size: 0.92rem; }
  .docs-nav__agents { margin-top: 4px; font-size: 0.8rem; }
}

/* ---- Pipeline: six numbered steps on a quiet rail. Still: nothing moves, so nothing reads as a loading bar. */
.docs-pipe { margin: 18px 0 8px; }
.docs-pipe__track { list-style: none; margin: 14px 0 0; padding: 0 0 0 48px; position: relative; display: grid; gap: 16px; }
.docs-pipe__track::before { content: ""; position: absolute; left: 16px; top: 18px; bottom: 18px; width: 2px; background: var(--app-border); }
.docs-pipe__step { position: relative; }
.docs-pipe__card { padding: 14px 16px; background: var(--cloud); box-shadow: inset 0 0 0 1px var(--app-border); }
.docs-pipe__num {
  position: absolute; left: -48px; top: 8px; width: 34px; height: 34px; margin: 0; display: grid; place-items: center;
  background: var(--charcoal); color: var(--cloud); font-weight: 700; font-size: 0.95rem;
}
/* the number is a <p>, and `.doc p` sets a dark text colour that wins over the rule above: say white again, more strongly */
.docs-main .docs-pipe__num { color: var(--cloud); }
.docs-main .docs-pipe__title { margin: 0; font-size: 1.1rem; }
.docs-pipe__stage { margin: 2px 0 6px; font-size: 0.85rem; color: var(--ink-soft); }
.docs-pipe__what, .docs-pipe__why { margin: 6px 0 0; }
.docs-pipe__media { margin: 12px 0 0; }
.docs-pipe__media.docs-media--r16x9 .docs-media__frame { max-width: 520px; }
.docs-pipe__media.docs-media--r9x16 .docs-media__frame { max-width: 240px; margin: 0; }
.docs-pipe__note { margin: 12px 0 0; font-size: 0.9rem; color: var(--ink-soft); }

/* ---- YouTube proof: a poster and a play mark; the player loads only on click (yt.js). A long video beside its
   Short: 3.16 : 1 columns give a 16:9 and a 9:16 frame the same height. */
.docs-yt__link { position: absolute; inset: 0; display: block; }
.docs-yt__link img, .docs-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.docs-yt__play {
  position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; transform: translate(-50%, -50%);
  background: rgba(20, 20, 20, 0.82); border-radius: 12px; transition: background 0.15s;
}
.docs-yt__play::after { content: ""; position: absolute; left: 28px; top: 14px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent var(--cloud); }
.docs-yt__link:hover .docs-yt__play, .docs-yt__link:focus-visible .docs-yt__play { background: #e4231f; }
.docs-yt__link:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.docs-proof { display: grid; grid-template-columns: minmax(0, 3.16fr) minmax(0, 1fr); gap: 16px; align-items: start; margin: 18px 0; }
.docs-proof .docs-media { margin: 0; }
.docs-proof .docs-media--r9x16 .docs-media__frame { max-width: 100%; }
@media (max-width: 600px) { .docs-proof { grid-template-columns: minmax(0, 1fr); } .docs-proof .docs-media--r9x16 .docs-media__frame { max-width: 260px; } }

/* ---- 30-second fit check: radios and :has(), no script, no form, nothing sent. The Apply link is always shown. */
.docs-fit { margin: 36px 0 8px; padding: 18px 18px 20px; background: var(--cloud); box-shadow: inset 0 0 0 3px var(--charcoal); }
.docs-main .docs-fit h2 { margin-top: 0; }
.docs-fit__intro { margin: 6px 0 0; }
.docs-fit__q { border: 0; margin: 14px 0 0; padding: 12px 0 0; border-top: 2px solid var(--app-border); min-width: 0; }
.docs-fit__q legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-weight: 700; }
.docs-fit__q label {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0 10px 0 0; padding: 6px 14px; cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--charcoal); background: var(--cloud);
}
.docs-fit__q label:has(input:checked) { background: var(--charcoal); color: var(--cloud); }
.docs-fit__q label:has(input:focus-visible) { outline: 3px solid var(--sky); outline-offset: 2px; }
.docs-fit__yes, .docs-fit__no { clear: both; margin: 10px 0 0; padding: 8px 12px; }
/* the two answer notes use kit colours only: face for "yes", the pale gold wash and a gold bar for "no" */
.docs-fit__yes { background: var(--eddy-color-face); }
.docs-fit__no { background: var(--eddy-color-gold-tint); box-shadow: inset 4px 0 0 0 var(--gold); }
.docs-fit__all, .docs-fit__some { margin: 14px 0 0; font-weight: 700; }
.docs-fit__cta { margin: 16px 0 0; }
.docs-fit__apply {
  display: inline-block; padding: 12px 20px; background: var(--charcoal); color: var(--cloud); font-weight: 700; text-decoration: none;
}
.docs-fit__apply:hover, .docs-fit__apply:focus-visible { text-decoration: underline; }
/* With :has(), notes appear for the answer given. Without it every note stays visible, which still reads fine. */
@supports selector(:has(*)) {
  .docs-fit__yes, .docs-fit__no, .docs-fit__all, .docs-fit__some { display: none; }
  .docs-fit__q:has(input[value="yes"]:checked) .docs-fit__yes,
  .docs-fit__q:has(input[value="no"]:checked) .docs-fit__no { display: block; }
  .docs-fit:has(.docs-fit__q--mac input[value="yes"]:checked):has(.docs-fit__q--ai input[value="yes"]:checked):has(.docs-fit__q--time input[value="yes"]:checked) .docs-fit__all,
  .docs-fit:has(input[value="no"]:checked) .docs-fit__some { display: block; }
}

/* ---- Media held back until the person in it says yes, and before/after pairs. */
.docs-media--held .docs-media__frame { background: repeating-linear-gradient(135deg, var(--app-surface) 0 12px, var(--app-pane) 12px 24px); box-shadow: inset 0 0 0 2px var(--app-border); }
.docs-held { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; padding: 14px; text-align: center; color: var(--charcoal); }
.docs-held p { margin: 0; font-size: 0.88rem; max-width: 32ch; }
.docs-main .docs-held .docs-held__title { font-weight: 700; font-size: 0.95rem; }
.docs-media--review figcaption::before { content: "Private review, not published: "; color: var(--eddy-color-brick-ink); font-weight: 700; }
.docs-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 14px 0; }
.docs-pair .docs-media { margin: 0; }
@media (max-width: 640px) { .docs-pair { grid-template-columns: minmax(0, 1fr); } }
.docs-main h4 { margin: 22px 0 6px; font-size: 1rem; }