/* Documents & sheets — the app's own parts, and the card in the conversation.
   Header, card, empty, gutter, one left edge: os-app.css. ⛔ Do not redraw them.

   ⚡ Clay, through tokens only (--cream, --surf, --line, --ink…, declared by
   work-clay.css) with a fallback on every use, so the sheet still draws on a
   surface the skin has not reached. ⛔ No hex, no prefers-color-scheme block,
   no font import — one design, and dark is closed (owner, 2026-09-04).

   Two things live here and nowhere else:
     the EDITOR FRAME (.osDocFrame) — the editor mounted INSIDE the pane, which
       is why it is a frame at all: the editor is its own document with its own
       engine, and the app standard's rule is one body, not one origin;
     the CARD (.osDocCard) — a document or a sheet read inside the thread, with
       Expand growing it in place rather than opening anything. */

/* ── the pane ───────────────────────────────────────────────────────────── */
.osApp[data-app="documents"] .osDocApp{padding:0;overflow:hidden}
.osApp[data-app="documents"] .osDocFrameWrap{
  /* The editor gets the whole card. 78vh keeps the shell's own header and the
     page's gutter visible, so the person can always see where they are. */
  height:78vh;min-height:420px}
.osApp[data-app="documents"] .osDocFrame{
  display:block;width:100%;height:100%;border:0;background:var(--cream,#f4efe6)}

/* ── the card in the conversation ───────────────────────────────────────── */
.msgs .osDocMount{margin:10px 0}
.msgs .osDocCard{
  border:1px solid var(--line,#e2dbcd);border-radius:var(--r-s,14px);
  background:var(--surf,#fffdf8);box-shadow:var(--lift,0 4px 14px rgba(60,50,35,.07));
  overflow:hidden;max-width:100%}
.msgs .osDocHead{
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
  padding:11px 14px;border-bottom:1px solid var(--line,#e2dbcd)}
.msgs .osDocKind{
  font:600 10.5px/1 var(--body,system-ui);letter-spacing:.09em;
  color:var(--ink2,#6b6153);border:1px solid var(--line2,var(--line,#e2dbcd));
  border-radius:var(--r-pill,999px);padding:4px 8px;flex:none}
.msgs .osDocTitle{font:600 14.5px/1.3 var(--body,system-ui);color:var(--ink,#2b251c);min-width:0}
.msgs .osDocMeta{font:400 12px/1.3 var(--body,system-ui);color:var(--ink3,var(--ink2,#6b6153));margin-left:auto}
/* ⛔ The body is CLIPPED, never truncated with an ellipsis in the data: a cut
   sheet must still show whole cells, so the person is never reading half a
   number. Expand is what makes the rest reachable. */
.msgs .osDocBody{max-height:260px;overflow:auto}
.msgs .osDocWide .osDocBody{max-height:70vh}
.msgs .osDocProse{padding:12px 14px;font:400 14px/1.55 var(--body,system-ui);color:var(--ink,#2b251c)}
.msgs .osDocProse :first-child{margin-top:0}
.msgs .osDocGrid{overflow-x:auto}
.msgs .osDocGrid table{border-collapse:collapse;width:100%;font:400 13px/1.4 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace)}
.msgs .osDocGrid th,.msgs .osDocGrid td{
  border:1px solid var(--line,#e2dbcd);padding:5px 9px;text-align:left;white-space:nowrap}
.msgs .osDocGrid th{background:var(--surf2,#f7f2e8);color:var(--ink2,#6b6153);font-weight:600}
/* a number reads as a number: right, and in the same column rhythm as the app.
   ⛔ The class is set from the DISPLAYED STRING, never from a parsed value —
   an error token keeps the words' alignment because it is words. */
.msgs .osDocGrid td{font-variant-numeric:tabular-nums}
.msgs .osDocGrid td.n{text-align:right}
.msgs .osDocFoot{
  display:flex;gap:8px;align-items:center;justify-content:flex-end;
  padding:9px 14px;border-top:1px solid var(--line,#e2dbcd);background:var(--surf2,#f7f2e8)}
.msgs .osDocFoot button{
  padding:6px 13px;border:1px solid var(--line2,var(--line,#e2dbcd));
  border-radius:var(--r-pill,999px);background:var(--surf,#fffdf8);color:var(--ink,#2b251c);
  cursor:pointer;font:500 12.5px var(--body,system-ui)}
.msgs .osDocFoot button:hover{background:var(--surf2,#f7f2e8)}
.msgs .osDocFoot button.pri{background:var(--ink,#2b251c);color:var(--cream,#f4efe6);border-color:var(--ink,#2b251c)}