/* The capture dock's two states on a phone, and the kind row (wave M, D).
 *
 * The owner's phone review of 2026-10-10 (docs/reviews/, findings 1 and 8)
 * measured the dock at 243 px of a 360 x 800 screen and the timeline at 203:
 * the box and its buttons stood open all day to hold a line that is typed a
 * few times in it. docs/ui/MOCKUP.html draws the capture zone as a slim bar.
 * So, below 1100 px:
 *
 *   AT REST  one row — the field, then ₹ · Photo · Speak (and Note where
 *            there is room for it) — 62 px tall. The kinds, the parsed chips
 *            and the status line are not drawn.
 *   OPEN     the wireframe's composer: the kinds on ONE line that scrolls
 *            sideways, scope and lock under it once there is text, the chips,
 *            the box, then the foot's ₹ | Photo | Speak | Note at 1.3 : 1.
 *
 * capture-dock.js keeps `data-open` on .capture__bar: there while the field
 * holds text, the focus is in the compose row or a form's field, or a short
 * form is up — unless the line was put away. No mark is the resting row, so
 * the dock is slim from its first paint. With a short form up the open
 * composer is a sheet over the whole page: capture-sheet.css (step 2).
 * On the desk NOTHING here applies but the first two rules: its composer is
 * always open, exactly as increment L left it, and `data-open` is not read.
 *
 * Linked after capture.css, capture-chips.css and voice.css, whose rules for
 * the bar, the compose row and the Speak cell it overrides for the resting
 * row. Every colour comes from tokens.css; sizes are rem. Nothing here grows a
 * transform, filter or contain (views.css rule 2): the dock stays sticky.
 */

/* ------------------------------------------------- the kind row, any width */

/* capture-chips.js draws the six kinds in a row of their own, `.kinds`,
 * inside #capture-kinds. On the desk the row has no box of its own — its
 * words lie in #capture-kinds' wrapping line exactly as they did when they
 * were its children — and capture.css's `#capture-kinds > .chip` is restated
 * for them, a level down. */
.kinds {
  display: contents;
}

.kinds > .chip {
  flex: none;
  max-width: none;
  white-space: nowrap;
}

@media (max-width: 1099.98px) {
  /* ------------------------------------------- the kind row on a phone
   *
   * ONE line that scrolls sideways and never wraps: at 360 px the six words
   * took two 44 px lines, with an orphan "· Pending" on the second. The edge
   * that hides a kind fades (scroll-row.js sets data-more / data-before, and
   * its FADE_REM is this 1.5rem), and the chosen kind is brought into view.
   * No scrollbar: a phone draws none, and the fade is the sign.
   *
   * Scope and lock are NOT in the row: they follow it, on the next line at
   * phone width and beside it where there is room (the row's basis is the six
   * words' own width), so the lock is never a sideways scroll away. */
  #capture-kinds {
    align-items: center;
    column-gap: var(--space-2);
  }

  .kinds {
    display: flex;
    flex: 1 1 22rem;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .kinds::-webkit-scrollbar {
    display: none;
  }

  .kinds[data-more] {
    -webkit-mask-image: linear-gradient(to right, var(--ink) calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, var(--ink) calc(100% - 1.5rem), transparent);
  }

  .kinds[data-before] {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 1.5rem);
    mask-image: linear-gradient(to right, transparent, var(--ink) 1.5rem);
  }

  .kinds[data-before][data-more] {
    -webkit-mask-image: linear-gradient(to right, transparent, var(--ink) 1.5rem, var(--ink) calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, var(--ink) 1.5rem, var(--ink) calc(100% - 1.5rem), transparent);
  }

  /* A row that scrolls has room for whole targets: Note and Call were 38 and
   * 41 px wide (the review's finding 7), and are 44 now, their word centred. */
  .kinds > .chip {
    min-width: var(--touch);
    justify-content: center;
  }

  /* A scroller clips what is drawn outside it: the focus ring goes inside. */
  .kinds > .chip:focus-visible {
    outline-offset: -2px;
  }

  /* ------------------------------------------------ both states, a phone */

  /* The hint is one line, cut with an ellipsis — it wrapped onto a second at
   * 360 px, and at rest the field is only as wide as the row leaves it. A
   * textarea's placeholder takes its ellipsis only when the BOX itself is one
   * unwrapped line (measured in Edge: nowrap on the placeholder alone clips
   * mid-letter), so the box is that while it is empty and no longer — the
   * first letter typed and it wraps as it always has. */
  .capture__box:placeholder-shown {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .capture__box::placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* The Speak cell's second line — the language — at the 12 px floor. */
  .capture__bar .speak__lang {
    font-size: var(--text-xs);
  }

  /* ------------------------------------------------------------- at rest
   *
   * A grid of two columns: the field takes what the buttons leave. Anything
   * else that is up — the voice panel while Speak is held, a done: line's
   * closes after a save, an error — is a full row ABOVE them, so the row
   * under the thumb never moves. 8 + 46 + 8 = 62 px. */
  .capture__bar:not([data-open]) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2) var(--space-1);
    padding: var(--space-2);
  }

  .capture__bar:not([data-open]) > * {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .capture__bar:not([data-open]) > .capture__compose {
    grid-column: 1;
    padding-block: 0;
  }

  .capture__bar:not([data-open]) > .capture__foot {
    grid-column: 2;
    display: flex;
    gap: var(--space-1);
  }

  /* Not drawn at rest: the kinds and the parsed chips. */
  .capture__bar:not([data-open]) :is(#capture-kinds, #capture-chips) {
    display: none;
  }

  /* Step 2: a short form's line that was PUT AWAY (the sheet's Close, Esc,
   * Android's Back — capture-dock.js putAway) rests like an empty dock: the
   * field shows the start of the line, and a tap on it brings the sheet
   * back as it was. The form is still up and still filled in; at rest
   * it is only not drawn. Nor is Save: a Visit is saved where its fields can
   * be seen. (`:not([hidden])` leaves a form that is not up to app.css.) */
  .capture__bar:not([data-open]) > #capture-form:not([hidden]) {
    display: none;
  }

  .capture__bar:not([data-open]) #capture-save {
    display: none;
  }

  /* Nor the status line ("Saved." is read while the box still has the focus;
   * the composer is open then) — with two exceptions. An error is never
   * folded away. And over a done: line's closes (waiting.css
   * `.capture__closes`, which stay until the next line is typed) "Saved."
   * stays too: it is what they are offered under. */
  .capture__bar:not([data-open]):not(:has(> .capture__closes:not([hidden]))) > .capture__note:not(.capture__note--error) {
    display: none;
  }

  /* The field: the SAME textarea, one line tall. `!important` because
   * capture.js's autosize writes an inline height (CSSOM), which would
   * otherwise win; the padding centres the one line in the 44 px target. */
  .capture__bar:not([data-open]) .capture__box {
    height: var(--touch) !important;
    min-height: var(--touch);
    max-height: none;
    padding-block: calc((var(--touch) - 1lh) / 2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The buttons: as wide as their word and never under 44 px; ₹ a little
   * wider, the one filled cell and the phone's first job. */
  .capture__bar:not([data-open]) .capture__foot .btn {
    flex: none;
    width: auto;
    min-width: var(--touch);
    padding: 0 var(--space-1);
    font-size: var(--text-md);
  }

  .capture__bar:not([data-open]) .capture__foot .capture__money {
    min-width: 3.25rem;
    font-size: 1.25rem;
  }

  /* ---------------------------------------------------------------- open
   *
   * capture.css's column and its foot grid, as before. The cells' side
   * padding gives way to the words: at 320 px Photo's word ran past its
   * cell and touched Speak (the review's finding 8). */
  .capture__bar[data-open] .capture__foot .btn {
    padding-inline: var(--space-1);
  }
}

/* Under 400 px the resting row leaves Note out: the field beside it is the
 * same tap — it opens the composer, whose foot has Note — and with five
 * controls in a 360 px phone's 312 px the field would be 84 px wide, its hint
 * cut to "What h…". From 400 px (a 412 px phone: a 136 px field) Note is there. */
@media (max-width: 399.98px) {
  .capture__bar:not([data-open]) #capture-write {
    display: none;
  }
}

/* The narrowest phones (320 px: Android's Display size turned up): the open
 * foot's four cells are 56 px, and the words step down a size to stay inside
 * them — ₹ keeps its own. At rest ₹ gives its extra width to the field. */
@media (max-width: 359.98px) {
  .capture__bar[data-open] .capture__foot .btn:not(.capture__money) {
    font-size: var(--text-md);
  }

  .capture__bar:not([data-open]) .capture__foot .capture__money {
    min-width: var(--touch);
  }

  /* And the resting row's words take the scale's small step (14 px, their size
   * before the scale): at --text-md, Photo and Speak took 5.5 px from a field
   * that has 96 to spare (wave M integration). */
  .capture__bar:not([data-open]) .capture__foot .btn:not(.capture__money) {
    font-size: var(--text-sm);
  }
}