/* kapable-app-kit reply widgets (ui/reply-widgets.js, PLAT-558): the base
   sheet. The frame every piece sits in, the error line and source, the
   buttons (quick replies and a form's actions), and the frame shown while
   a type's own files load. Each type's own look is in
   reply-widgets.TYPE.css, linked by the loader when a reply first uses it.
   Needs the design language's tokens (tokens.css). Built from its recipes:
   card inside a page, button, field, chart, compare, status dot. Monospace
   only on source surfaces (code, a compare pane, a diff). Every piece fits
   its box: a wide table or a long line scrolls inside its own box, never
   the page. */

.kit-rw {
  position: relative;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  margin: 10px 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--card-edge);
  color: var(--text);
  font: var(--type-body)/1.45 var(--font-ui);
  overflow: hidden;
  container-type: inline-size;
}
.kit-rw *, .kit-rw *::before, .kit-rw *::after { box-sizing: border-box; }
.kit-rw-head { padding: calc(12px * var(--pad-factor)) calc(16px * var(--pad-factor)); border-bottom: 1px solid var(--line); }
.kit-rw-head strong { display: block; font-size: var(--type-body); font-weight: var(--heading-weight, 650); overflow-wrap: anywhere; }
.kit-rw-body { display: grid; gap: calc(10px * var(--pad-factor)); min-width: 0; padding: calc(14px * var(--pad-factor)) calc(16px * var(--pad-factor)); }
.kit-rw-more, .kit-rw-note { margin: 0; color: var(--text-3); font-size: var(--type-secondary); font-family: var(--font-body, var(--font-ui)); }
.kit-rw-link { color: var(--accent-text); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; } /* raw: weight 500, quieter than control text; no weight role holds it (PLAT-1234) */
.kit-rw-link:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; border-radius: 4px; } /* raw: corner of a focus outline round a link, no shape role (PLAT-1158) */
.kit-rw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* raw: visually hidden text, 1px clip (PLAT-1158) */

/* A fence that could not be drawn: one plain line, then its source. */
.kit-rw-failed { display: grid; gap: calc(8px * var(--pad-factor)); padding: calc(12px * var(--pad-factor)) calc(16px * var(--pad-factor)) calc(14px * var(--pad-factor)); }
.kit-rw-error { margin: 0; color: var(--text); font-size: var(--type-description); font-family: var(--font-body, var(--font-ui)); }
.kit-rw-source {
  max-height: 168px;
  margin: 0;
  padding: calc(10px * var(--pad-factor)) calc(12px * var(--pad-factor));
  overflow: auto;
  border-radius: var(--radius-field);
  background: var(--surface-2);
  box-shadow: var(--card-edge);
  color: var(--text-2);
  font: var(--type-secondary)/1.5 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* raw: monospace stays a source-only face in every preset (presets DESIGN 2.1) (PLAT-1158) */
  white-space: pre;
}
.kit-rw-source:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: -2px; }

/* Buttons: the language's button. Quick replies sit in the reply, not in a card. */
.kit-rw--buttons { overflow: visible; background: transparent; box-shadow: none; }
.kit-rw--buttons .kit-rw-head { padding: 0 0 calc(8px * var(--pad-factor)); border-bottom: 0; }
.kit-rw--buttons .kit-rw-head strong { color: var(--text-2); font-size: var(--type-secondary); font-weight: var(--control-weight, 600); }
.kit-rw--buttons .kit-rw-body { padding: calc(2px * var(--pad-factor)); }
.kit-rw-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(8px * var(--pad-factor)); }
.kit-rw-btn {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: var(--control-h);
  padding: calc(5px * var(--pad-factor)) calc(12px * var(--pad-factor));
  border: 0;
  border-radius: var(--radius-button);
  background: var(--surface-3);
  box-shadow: var(--control-edge);
  color: var(--text);
  font: var(--control-weight, 600) var(--type-control)/1.3 var(--font-ui);
  text-align: left;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.kit-rw-btn:has(.kit-rw-btn-says) { flex-direction: column; align-items: flex-start; gap: calc(1px * var(--pad-factor)); padding: calc(6px * var(--pad-factor)) calc(12px * var(--pad-factor)) calc(7px * var(--pad-factor)); }
.kit-rw-btn-says { color: var(--text-2); font-size: var(--type-meta); font-weight: 400; white-space: pre-wrap; } /* raw: weight 400, body text under a button's label; no weight role holds it (PLAT-1234) */
.kit-rw-btn:hover { background: var(--press); }
.kit-rw-btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.kit-rw-btn.primary { background: var(--accent); color: var(--on-accent, #fff); box-shadow: var(--shadow-primary); } /* text on the accent fill: white, or a look's own ink (presets D45) */
.kit-rw-btn.primary:hover { filter: brightness(1.07); }
.kit-rw-btn.primary:disabled { filter: none; background: var(--surface-3); color: var(--text-3); box-shadow: var(--control-edge); cursor: default; }
.kit-rw-btn.danger { color: var(--bad); }
.kit-rw-btn:disabled { cursor: default; }
.kit-rw-btn:disabled:not([aria-pressed='true']) { color: var(--text-3); }
.kit-rw-btn:disabled:not([aria-pressed='true']) .kit-rw-btn-says { color: var(--text-3); }
.kit-rw-btn:disabled:hover { background: var(--surface-3); }
.kit-rw-btn[aria-pressed='true'], .kit-rw-btn[aria-pressed='true']:hover { background: var(--accent-soft); color: var(--text); box-shadow: inset 0 0 0 1px var(--accent-ring); } /* raw: focus, selection or error ring, no elevation token holds it (PLAT-1158) */

/* A data widget's body (kit.asViewer): its loading note, or the plain line
   and a Try again button. */
.kit-rw-viewer { display: grid; gap: calc(8px * var(--pad-factor)); min-width: 0; }

/* While a type's files load: an empty frame, then a quiet line if it takes
   long enough to notice. */
.kit-rw-loading { min-height: 44px; } /* raw: the loading placeholder's height, not a control (PLAT-1158) */
.kit-rw-loading::after { content: 'Loading\2026'; display: block; padding: calc(12px * var(--pad-factor)) calc(16px * var(--pad-factor)); color: var(--text-3); font-size: var(--type-secondary); visibility: hidden; animation: kit-rw-wait 0s linear 0.6s forwards; } /* raw: delay before the loading line shows, no motion token holds it (PLAT-1158) */
@keyframes kit-rw-wait { to { visibility: visible; } }

@media (max-width: 600px), (pointer: coarse) and (max-height: 500px) {
  .kit-rw-btn { min-height: 44px; } /* raw: phone target, 44px floor in every preset (presets DESIGN 2.1) (PLAT-1158) */
}