/* The short forms as a sheet on a phone (wave M, D step 2).
 *
 * The owner's phone review of 2026-10-10 (docs/reviews/, finding 2): with the
 * keyboard up a Visit could not be filled in. The form opened above the dock,
 * the keyboard took 300 px of a 360 x 800 phone, and dock and form were 423 px
 * of the 500 left — "Customer" showed, and Site, DG set, Purpose and Outcome
 * sat behind the dock, each form a 100 px window that scrolled inside itself.
 *
 * Below 1100 px, while one of §3.1's short forms is up (Visit, Call, Move,
 * Pending), the composer is a SHEET the size of the visible page:
 *
 *   HEAD    the kind, and Close — held at the top.
 *   BODY    ONE scrolling region, in the dock's own order: the form's
 *           fields, then the line itself (kinds, chips, the box). Nothing in
 *           it scrolls by itself any more: not the form, not the chips.
 *   FOOT    ₹ · Photo · Speak · Save — held at the bottom, above the keyboard.
 *
 * It is the SAME `.capture__bar`, marked `data-sheet` by capture-sheet.js —
 * no node is moved, so the box keeps its focus and the keyboard stays up as
 * the sheet opens. The dock is the scroller and the head and foot are sticky
 * in it; it opens scrolled to its end, so the box and the buttons are where
 * the thumb left them.
 *
 * THE SIZE. `inset: 0` on a fixed box is the layout viewport, and index.html
 * asks for interactive-widget=resizes-content: on Android the page itself
 * ends at the keyboard, so that IS the visible screen. Where a keyboard only
 * covers the page, capture-sheet.js reads window.visualViewport and sets
 * --sheet-top and --sheet-h; unset, the inset stands. No height here is a
 * phone's.
 *
 * `position: fixed` is safe here for the reason it is safe for #keypad:
 * nothing between <html> and the dock grows a transform, filter or contain
 * (views.css rule 2). z-index 15: over the tabs (1) and the toast (10), under
 * the keypad, the Photo sheet and the day's sheets (20), which open over it.
 *
 * Linked after capture-dock.css. On the desk nothing here applies but the
 * head's two rules, and the head is `hidden` there. Every colour comes from
 * tokens.css; sizes are rem.
 */

/* --------------------------------------------------- the head, any width
 *
 * capture-sheet.js draws it as the dock's first child and keeps it `hidden`
 * until the sheet is up (app.css: [hidden] is display none, always). */
.capture__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* The sheets' own title (sheet.css `.sheet__title`). */
.capture__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
}

/* A text button on the column's edge: its words line up with the fields'
 * right edge, its 44 px target reaches past them. */
.capture__close {
  flex: none;
  margin-inline-end: calc(-1 * var(--space-3));
  padding-inline: var(--space-3);
  border-color: transparent;
}

@media (max-width: 1099.98px) {
  /* ------------------------------------------------------- the sheet */

  .capture__bar[data-sheet] {
    position: fixed;
    inset: 0;
    top: var(--sheet-top, 0);
    height: var(--sheet-h, auto);
    z-index: 15;
    max-height: none;
    margin: 0;
    padding: 0;
    /* flex-start, never the dock's flex-end: what overflows a column's START
     * cannot be scrolled to, and the form's first fields would be lost. */
    justify-content: flex-start;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden auto;
    overscroll-behavior: contain;
    /* A field scrolled to by the engine (a focus, the keyboard arriving)
     * stops clear of the held head and foot; capture-sheet.js brings the
     * whole field — its label too — clear of them to the pixel. */
    scroll-padding-block: calc(var(--touch) + var(--space-6)) calc(var(--touch) + var(--space-8));
    /* The sheet covers the screen and its parts keep to the PAGE's column:
     * the page's own gutter (app.css `body`: --space-4), and on a screen
     * wider than the column (app.css `.shell`: 42rem) that column, centred.
     * So a field stands where the day's cards stood. */
    --sheet-side: max(var(--space-4), calc((100% - 42rem) / 2));
  }

  /* Nothing gives up its height to fit: the dock made the form the first to
   * shrink (capture-chips.css), which is how it came to be a 100 px window.
   * In the sheet every part is as tall as it is and the sheet scrolls. */
  .capture__bar[data-sheet] > :is(.form, .suggest, .capture__compose, .capture__closes, .voice) {
    flex: none;
  }

  .capture__bar[data-sheet] > :not(.capture__head, .capture__foot) {
    margin-inline: var(--sheet-side);
  }

  .capture__bar[data-sheet] > .capture__head {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: calc(var(--space-1) + env(safe-area-inset-top, 0px)) var(--sheet-side) var(--space-1);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }

  /* The fields, as tall as they are: the form no longer scrolls in itself. */
  .capture__bar[data-sheet] > .form {
    min-height: auto;
    padding: var(--space-1) 0 var(--space-3);
    overflow: visible;
  }

  /* The parsed chips: every one drawn, in the sheet's own scroll. */
  .capture__bar[data-sheet] #capture-chips {
    max-height: none;
    overflow: visible;
  }

  /* `margin-top: auto` is for a screen with room to spare — a tablet, a tall
   * phone with the keyboard down: the fields and the line read from the top
   * as one form and the foot stays on the foot of the screen. With the
   * keyboard up there is no room to spare, the auto is nothing, and the box
   * sits on the foot exactly where the composer had it. */
  .capture__bar[data-sheet] > .capture__foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: auto;
    padding: var(--space-2) var(--sheet-side) calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border);
  }

  /* Save is ALWAYS the foot's last cell in the sheet — the composer shows
   * Note there while the box is empty (capture.css, :placeholder-shown). A
   * form with no line yet says what it still needs when Save is tapped
   * (capture.js commit). The first selector repeats capture.css's :has() to
   * outweigh it. */
  .capture__bar[data-sheet]:has(#capture:placeholder-shown) #capture-save {
    display: block;
  }

  .capture__bar[data-sheet] #capture-write {
    display: none;
  }
}