/* Blocks Pages (spec 94 · B2). Mobile-first: everything is one column at phone
   width; `columns` sit side by side only from the reader's 720px breakpoint up.
   Tokens only (--kk-*): a block never carries a colour, size or width of its
   own, so the Page's inherited or pinned design system decides the look.
   Headings, paragraphs and lists inherit the reader's .doc typography. */

.kb-blocks { display: flex; flex-direction: column; gap: var(--kk-s-4); min-width: 0; }
/* The flow gap spaces blocks; the reader's own .doc margins would double it. */
.kb-page.doc .kb, .kb-page.doc .kb :is(p, ul, ol, figure, table) { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kb-page.doc .kb-blocks > .kb-heading:not(:first-child),
.kb-page.doc .kb-column > .kb-heading:not(:first-child) { margin-top: var(--kk-s-4); }

/* partial: a placed Page of this Folder (94/02) flows as if authored here, its
   blocks spaced like the host's and never wider than the column. */
.kb-partial-page { display: flex; flex-direction: column; gap: var(--kk-s-4); min-width: 0; }

/* partial, framed (94/03 B10): a Page from another Folder in a frame that names
   and links its source, in its own design system; never wider than the column. */
.kb-partial-framed { display: flex; flex-direction: column; gap: var(--kk-s-3); min-width: 0; margin: 0;
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); padding: var(--kk-s-3) var(--kk-s-4);
  background: var(--kk-paper); color: var(--kk-ink); }
.kb-frame-source { color: var(--kk-text-soft); font-size: .85em; overflow-wrap: anywhere; }
.kb-frame-body { display: flex; flex-direction: column; gap: var(--kk-s-4); min-width: 0; }
.kb-frame-open a { font-weight: 600; }
/* a placed markdown Page (94/03 D8): its own flow, since block styles drop paragraph margins */
.kb-partial-markdown { display: flex; flex-direction: column; gap: var(--kk-s-3); min-width: 0; }
/* A framed markdown Page starts at its own top: its first heading drops the reader's section rule (94 E4). */
.kb-frame-body .kb-partial-markdown > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* text */
.kb-text.kb-tone-muted { color: var(--kk-text-soft); }
.kb-text.kb-size-sm { font-size: .9em; }
.kb-text.kb-size-lg { font-size: 1.15em; }

/* callout: the reader's callout shape, in a status tone */
.kb-callout { border-left: 3px solid var(--kb-tone, var(--kk-border)); background: var(--kk-paper);
  border-radius: 0 var(--kk-r-md) var(--kk-r-md) 0; padding: var(--kk-s-3) var(--kk-s-4); }
.kb-callout-title { font-weight: 600; color: var(--kk-ink); }
.kb-page.doc .kb-callout .kb-callout-title { margin-bottom: var(--kk-s-1); }
.kb-callout.kb-tone-info    { --kb-tone: var(--kk-decision); }
.kb-callout.kb-tone-success { --kb-tone: var(--kk-outcome); }
.kb-callout.kb-tone-warning { --kb-tone: var(--kk-idea); }
.kb-callout.kb-tone-danger  { --kb-tone: var(--kk-blocker); }
.kb-callout.kb-tone-accent  { --kb-tone: var(--kk-secondary); }

/* list */
.kb-page.doc .kb-list { padding-left: 1.4em; }
.kb-page.doc .kb-list.kb-marker-check { padding-left: 0; }
.kb-page.doc .kb-list.kb-marker-check li { list-style: none; position: relative; padding-left: 1.6em; }
.kb-list.kb-marker-check li::before { content: "✓"; position: absolute; left: 0; color: var(--kk-outcome); font-weight: 700; }

/* table: scrolls inside its own block, never the page */
.kb-table-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); }
.kb-table-scroll:focus-visible { outline: 2px solid var(--kk-secondary); outline-offset: 2px; }
.kk-reader .doc .kb-table-scroll table, .kb-table-scroll table { display: table; width: 100%; max-width: none;
  margin: 0; border-collapse: collapse; overflow: visible; }
.kb-table-scroll caption { caption-side: top; text-align: left; padding: var(--kk-s-2) var(--kk-s-3);
  color: var(--kk-text-soft); font-size: .9em; }
.kb-table-scroll th, .kb-table-scroll td { padding: var(--kk-s-2) var(--kk-s-3); border-bottom: 1px solid var(--kk-line);
  text-align: left; vertical-align: top; white-space: nowrap; }
.kk-reader .doc .kb-table-scroll th, .kk-reader .doc .kb-table-scroll td { border-left: 0; border-right: 0; border-top: 0; }
.kb-table-scroll th { background: var(--kk-fill); color: var(--kk-ink); font-weight: 600; }
.kb-table-scroll tbody tr:last-child td { border-bottom: 0; }

/* partial: a placed CSV source names itself and links to its full table; wraps at phone width */
.kb-partial-source { display: flex; flex-wrap: wrap; gap: var(--kk-s-1) var(--kk-s-3); margin-top: var(--kk-s-2);
  color: var(--kk-text-soft); font-size: .85em; }
.kb-partial-source a { margin-left: auto; }

/* image: always within the column */
.kb-image img { display: block; width: 100%; height: auto; border-radius: var(--kk-r-md); }
.kb-image.kb-size-sm { max-width: min(100%, 16em); }
.kb-image.kb-size-md { max-width: min(100%, 28em); }
.kb-image.kb-size-lg { max-width: min(100%, 40em); }
.kb-image figcaption { margin-top: var(--kk-s-2); color: var(--kk-text-soft); font-size: .9em; }

/* divider */
.kb-divider { border: 0; border-top: 1px solid var(--kk-line); }
.kb-page.doc .kb-divider.kb-spacing-md { margin: var(--kk-s-2) 0; }
.kb-page.doc .kb-divider.kb-spacing-lg { margin: var(--kk-s-5) 0; }

/* link button: the design system's own control sizes, never inflated */
.kb-button { display: inline-flex; align-items: center; gap: var(--kk-s-2); max-width: 100%;
  font-family: var(--kk-font-ui); font-size: var(--kk-fs-body); font-weight: 600; line-height: 1.3;
  padding: var(--kk-s-2) var(--kk-s-4); border-radius: var(--kk-r-md); border: 1px solid transparent;
  text-decoration: none; overflow-wrap: anywhere; }
.kk-reader .doc a.kb-button-accent, .kb-button-accent { background: var(--kk-accent-fill); color: var(--kk-on-accent); }
.kk-reader .doc a.kb-button-dark, .kb-button-dark { background: var(--kk-primary); color: var(--kk-on-primary); }
.kk-reader .doc a.kb-button-outline, .kb-button-outline { background: transparent; color: var(--kk-ink); border-color: var(--kk-border); }
.kb-page.doc a.kb-button { text-decoration: none; }
.kb-button:hover { filter: brightness(1.08); }
.kb-button:focus-visible { outline: 2px solid var(--kk-secondary); outline-offset: 2px; }

/* section: a surface tone; its children keep the one-column flow */
.kb-section { display: flex; flex-direction: column; gap: var(--kk-s-3); border-radius: var(--kk-r-lg); }
.kb-section.kb-tone-muted  { background: var(--kk-paper); border: 1px solid var(--kk-line); }
.kb-section.kb-tone-accent { background: var(--kk-secondary-soft); }
.kb-section.kb-tone-muted, .kb-section.kb-tone-accent { padding: var(--kk-s-4); }
.kb-section.kb-spacing-sm { gap: var(--kk-s-2); }
.kb-section.kb-spacing-lg { gap: var(--kk-s-4); }
.kb-section.kb-spacing-lg.kb-tone-muted, .kb-section.kb-spacing-lg.kb-tone-accent { padding: var(--kk-s-5); }
.kk-reader .doc .kb-section > h1:first-child, .kk-reader .doc .kb-section > h2:first-child { padding-top: 0; border-top: 0; }

/* columns: stacked on phones, side by side from the breakpoint */
.kb-columns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kk-s-4); }
.kb-column { display: flex; flex-direction: column; gap: var(--kk-s-3); min-width: 0; }
@media (min-width: 720px) {
  .kb-columns.kb-ratio-equal      { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kb-columns.kb-ratio-wide_left  { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .kb-columns.kb-ratio-wide_right { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* a block the current catalog refuses: neutral, never the source */
.kb-placeholder { padding: var(--kk-s-3) var(--kk-s-4); border: 1px dashed var(--kk-border);
  border-radius: var(--kk-r-md); color: var(--kk-text-soft); font-size: .9em; }

/* embed (spec 94/03 B9): a local cover in the video's own aspect ratio; a tap
   swaps in the provider's iframe at the same size. Nothing loads before it. */
.kb-embed-box { position: relative; width: 100%; overflow: hidden; border-radius: var(--kk-r-md);
  background: var(--kk-fill); border: 1px solid var(--kk-line); }
.kb-embed--16x9 { aspect-ratio: 16 / 9; }
.kb-embed-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kb-embed-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--kk-s-2); width: 100%; height: 100%; padding: var(--kk-s-3);
  border: 0; background: transparent; color: var(--kk-ink); font: inherit; cursor: pointer; }
.kb-embed-cover:focus-visible { outline: 2px solid var(--kk-secondary); outline-offset: -4px; }
.kb-embed-play { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem;
  border-radius: 999px; background: var(--kk-secondary); color: var(--kk-paper); }
.kb-embed-provider { font-weight: 600; }
.kb-embed-hint { color: var(--kk-text-soft); font-size: .85em; }
.kb-embed figcaption { margin-top: var(--kk-s-2); color: var(--kk-text-soft); font-size: .9em; }

/* state list (94/01 B4): a short shared list; the field keeps the design-system
   text size and gets 16px only on touch, where iOS would otherwise zoom on focus */
.kb-state-list { display: flex; flex-direction: column; gap: var(--kk-s-2); min-width: 0; }
.kb-state-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kk-s-1); }
.kk-reader .doc .kb-state-items { list-style: none; padding-left: 0; margin: 0; }
.kb-state-item { padding: var(--kk-s-2) var(--kk-s-3); border: 1px solid var(--kk-line); border-radius: var(--kk-r-md);
  background: var(--kk-paper); color: var(--kk-ink); overflow-wrap: anywhere; }
.kb-state-items:empty { display: none; }
.kb-state-empty { color: var(--kk-text-soft); }
/* centred, not stretched: Add keeps its own .kb-button size beside the taller touch field */
.kb-state-form { display: flex; flex-wrap: wrap; gap: var(--kk-s-2); align-items: center; }
.kb-state-form[aria-busy="true"] .kb-button { opacity: .6; cursor: progress; }
.kb-state-input { flex: 1 1 12rem; min-width: 0; font: inherit; font-size: var(--kk-fs-body); color: var(--kk-ink);
  background: var(--kk-card); border: 1px solid var(--kk-border); border-radius: var(--kk-r-md); padding: var(--kk-s-2) var(--kk-s-3); }
.kb-state-input:focus-visible { outline: 2px solid var(--kk-secondary); outline-offset: 1px; }
.kb-state-error { flex-basis: 100%; margin: 0; color: var(--kk-blocker); font-size: .9em; }
.kb-state-error:empty { display: none; }
@media (hover: none) and (pointer: coarse) { .kb-state-input { font-size: var(--kk-fs-input); } }

/* The MCP App document (94 B7) loads no reset of its own: size boxes as the reader
   does and give the page the reader's phone gutter. */
body.kb-app { margin: 0; padding: var(--kk-s-4); }
.kb-app *, .kb-app *::before, .kb-app *::after { box-sizing: border-box; }