/* compose.css — every typing box is one box (owner ruling, 13 Sep 2026).
   Loaded by every world after tokens.css. static/js/grow.js does the growing; this
   file is the SHAPE, and it is the same shape everywhere: one line to start, a cap,
   scrolling past the cap, no drag handle, and 16px — the size under which iOS zooms
   the whole page the moment a box is focused. A world keeps only the LOOK of its
   boxes (surface, border, radius, padding, shadow); anything about size lives here.
   The caps are tokens: --compose-max for a message beside its send button,
   --textarea-max for anything longer-form. */
textarea{
  display:block; inline-size:100%; box-sizing:border-box;
  font:inherit; font-size:var(--text-body); line-height:var(--leading-normal); color:inherit;
  resize:none; overflow-x:hidden; overflow-y:hidden; overscroll-behavior:contain; scrollbar-width:thin;
  min-block-size:var(--compose-min); max-block-size:var(--textarea-max);
  text-align:start;
}
/* past the cap it scrolls, and only then does it show a scrollbar */
textarea.at-cap{overflow-y:auto}
/* a message composer sits beside its send button: one line, six at most; the button
   stays on the last line as the box grows upward */
.ncomposer textarea,.composerbar textarea,textarea[data-compose="message"]{flex:1 1 auto; max-block-size:var(--compose-max)}
.ncomposer,.composerbar{align-items:flex-end}
textarea::placeholder{color:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){ textarea{transition:block-size var(--d-press) var(--ease)} }
/* THE KEYBOARD NEVER COVERS THE BOX. grow.js sets --vvh to the visual viewport's
   height while a field is focused and the keyboard is up; the frame is that tall. */
html.kb-up,html.kb-up body{block-size:var(--vvh)}

/* HEIGHT IS THREE NUMBER BOXES (static/js/shell.js Shell.height; tester report, 2 October 2026): feet, inches,
   centimetres, each opening the number keypad. Digits and units read left to right in both languages. */
.hgt3{display:flex; align-items:center; gap:var(--s2); direction:ltr; unicode-bidi:isolate}
[dir="rtl"] .hgt3{justify-content:flex-end}
.hgt3 input[type=text],.field .hgt3 input[type=text]{flex:0 0 auto; inline-size:var(--s16); min-inline-size:0; padding-inline:var(--s2); text-align:center; font-variant-numeric:tabular-nums}
.hgt3 input[type=text].cm,.field .hgt3 input[type=text].cm{inline-size:calc(var(--s16) + var(--s4))}
.hgt3 span{font-size:var(--text-small); font-weight:var(--weight-bold); color:var(--ink-3)}
.hgt3 .sep{padding-inline:var(--s1); color:var(--line-2)}
/* A BOX THAT IS WRONG (Shell.gate's o.field): the line under it. The red border is each world's own .bad rule. */
.fielderr{margin-block-start:var(--s2); font-size:var(--text-caption); font-weight:var(--weight-medium); color:var(--bad); line-height:var(--leading-loose); text-align:start}