/* The capture DOCK and the day list.
 *
 * Every colour comes from tokens.css, so light and dark are one definition and
 * the Power Solutions palette stays the only palette. No framework, no build
 * step (HARD RULE 8).
 *
 * Since day-page increment A the bar is a DOCK at the foot of the day, the
 * wireframe's thumb-reach zone: anchored above the tab bar, with everything
 * that appears and disappears (form, suggestions, status line, parsed chips)
 * stacked ABOVE the textarea so the box and the buttons never move under a
 * tap. `position: sticky`, never `fixed`: any `filter`, `transform` or
 * `backdrop-filter` on an ancestor makes that element a containing block for
 * every fixed descendant, so a fixed bar re-anchors itself the moment
 * anything upstream grows one.
 */

.capture__bar {
  position: sticky;
  top: auto;
  bottom: var(--tabs-h);
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  max-height: calc(100dvh - var(--tabs-h) - var(--space-8));
  padding: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-dock);
}

.capture__bar > * {
  flex: none;
}

/* ------------------------------------------------------------------ chips */

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.chip-row:empty {
  display: none;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.5;
  /* Not `white-space: nowrap`. A link chip is two words and would never wrap,
   * but a pending chip is a sentence — "To-do: Seaside Cold Storage — send AMC
   * quote" — and on a phone `nowrap` ran it off the right edge, cutting off the
   * end of the very thing the owner is being asked to check. */
  max-width: 100%;
  overflow-wrap: anywhere;
}

button.chip {
  cursor: pointer;
}

button.chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The kind row is a set of choices, so the chosen one is filled and the rest are
 * outlines — the difference has to survive a glance in daylight. */
.chip--kind[aria-pressed="true"],
.chip--answer[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* G's answer pair, its warnings and the chip row's scrolling: capture-chips.css. */

.chip--link {
  border-color: var(--ps-lime);
  background: var(--tint-link);
  color: var(--ink);
}

/* G and F each fixed the dark name chip (light ink on the light lime wash,
 * 1.1:1) in parallel: G with a dark-mode override to --tint-money, F with the
 * --tint-link token, whose dark value (#2D3A17, 10.46:1) keeps the lime family.
 * The wave-1 merge keeps F's token, the one home, and drops the override. */

.chip--time,
.chip--date {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.chip--expense,
.chip--move,
.chip--pending {
  border-color: var(--emphasis);
  color: var(--warn);
}

.chip--scope {
  border-style: dashed;
}

/* The two that mean "this needs you". Orange, not red: nothing is wrong — the
 * app simply will not guess which Bhiwandi, and says so. */
.chip--choose,
.chip--unknown {
  border-color: var(--emphasis);
  background: var(--surface);
  color: var(--warn);
}

/* ------------------------------------------------- the compose box */

/* The dock's hint and the short forms' placeholders: the browser's own grey
 * (#757575) is 3.7:1 on the dark dock; --ink-faint clears 4.5:1 in both themes,
 * as search.css's box does (wave M integration, review of D). */
.capture__bar ::placeholder {
  color: var(--ink-faint);
  opacity: 1;
}

.capture__box {
  display: block;
  width: 100%;
  min-height: calc(var(--touch) * 1.4);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  line-height: 1.5;
  /* It grows with the text (capture.js sets the height) and never scrolls
   * itself, because a box that scrolls hides the line just typed. */
  overflow: hidden;
  resize: none;
}

.capture__box:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* The compose row carries the border and the focus ring; the box inside it is
 * bare, so kinds, chips and text read as ONE control (the wireframe's). */
.capture__compose {
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

.capture__compose:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.capture__compose .capture__box {
  border: 0;
  background: transparent;
  min-height: var(--touch);
  max-height: min(30dvh, 14rem);
  overflow-y: auto;
  padding: var(--space-2) 0;
}

.capture__compose .capture__box:focus-visible {
  /* The compose row carries the ring (focus-within above). */
  outline: none;
}

/* With a form open, the box gives the height back to the form's fields. */
.capture__bar:has(#capture-form:not([hidden])) .capture__box {
  max-height: 5.5rem;
}

/* The kinds as one line of muted text words, dot-separated, wrapping and
 * never scrolling sideways — MOCKUP.html's compose row. */
#capture-kinds {
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 0;
}

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

.capture__compose .chip--kind {
  border: 0;
  background: transparent;
  color: var(--ink-muted);
  /* 0.8125rem, the chips' own base size, NOT the plan's 0.875rem: at 390px
   * the six words at 0.875rem wrapped onto a second 44px line, and the
   * wireframe's compose row is ONE line — the layout authority wins over the
   * sample value (measured on the acceptance screenshot, 2026-09-23). */
  font-size: var(--text-sm);
  font-weight: 500;
  padding-inline: var(--space-1);
  min-height: var(--touch);
}

.capture__compose .chip--kind[aria-pressed="true"] {
  background: transparent;
  color: var(--ink);
  font-weight: 700;
}

/* The empty alt text keeps the dot out of the button's accessible name. */
.capture__compose .chip--kind + .chip--kind::before {
  content: "·" / "";
  margin-inline-end: var(--space-1);
  color: var(--ink-faint);
}

/* §3.1's scope and private chips appear once the box has text; they may wrap
 * to a second line, and the row never scrolls sideways. */
.capture__bar:has(#capture:placeholder-shown) :is(.chip--scope, .chip--private) {
  display: none;
}

.capture__bar button.chip {
  min-height: var(--touch);
}

/* ------------------------------------------------------------ the foot */

/* ₹ leads at 1.3 shares; every other cell splits the rest equally — with
 * Photo (increment E) that is the wireframe's ₹ | Photo | Note at
 * 1.3 : 1 : 1 (MOCKUP.html:93). Photo's file input is `hidden`, which takes
 * no cell, and Note and Save share the third by :placeholder-shown below.
 * `min-width: 0` on every button keeps a long label from pushing Save past
 * the dock (§6). */
.capture__foot {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: minmax(0, 1.3fr);
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2);
  margin: 0;
}

.capture__foot .btn {
  width: 100%;
  min-width: 0;
}

.capture__note {
  flex: none;
  margin: 0;
  color: var(--ink-faint);
  font-size: var(--text-sm);
  /* The message that matters most here is "still to record: expense", so it
   * wraps rather than being cut off. */
  overflow-wrap: anywhere;
}

.capture__note:empty {
  /* A status line with zero height when empty — an empty <p> still owns a
   * flex gap, and the dock's height budget has none to spare. */
  display: none;
}

.capture__note--error {
  color: var(--danger);
  font-weight: 600;
}

.capture__save {
  min-width: 0;
}

/* The third cell reads Note while the box is empty (a tap focuses it) and
 * Save once there is text — switched by :placeholder-shown, so a Visit's
 * save is never called "Note" (§1 decision 9). */
.capture__bar:has(#capture:placeholder-shown) #capture-save {
  display: none;
}

.capture__bar:not(:has(#capture:placeholder-shown)) #capture-write {
  display: none;
}

/* Keyboard up on a phone: the tabs make way and the dock drops to the foot.
 * Keyed on the focus inside the dock, so tapping a dock button (whose
 * mousedown is prevented by day.js's tap guard) never makes the dock jump
 * between mousedown and mouseup. The foot's own buttons are left out: ₹,
 * Photo, Note and Save raise no keyboard, and the Photo sheet (E) hands the
 * focus back to Photo as it closes — which, keyed on :focus-within, hid the
 * tabs after every photo and brought them back mid-tap on whatever the owner
 * touched next, sliding the dock up under the finger. */
@media (pointer: coarse) {
  .shell:has(.capture__bar :focus:not(.capture__foot *)) .tabs {
    display: none;
  }

  .shell:has(.capture__bar :focus:not(.capture__foot *)) .capture__bar {
    bottom: 0;
  }
}

/* ------------------------------------------------------------- the popover */

/* In the dock's column the popover sits ABOVE the box, shrinks before the
 * compose row does, and scrolls inside itself without dragging the page. */
.suggest {
  flex: 0 1 auto;
  min-height: 0;
  margin: 0;
  max-height: min(15rem, 35dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.suggest__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: var(--touch);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-bottom: 1px solid var(--border);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.suggest__item:last-child {
  border-bottom: 0;
}

.suggest__item[aria-selected="true"] {
  background: var(--surface-sunken);
}

.suggest__label {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* What kind of thing it is, and for a site the code that tells twelve
 * "Bhiwandi" apart — so it is never the part that gets truncated. */
.suggest__detail {
  flex: 0 0 auto;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

/* ------------------------------------------------------- the short forms */

.form {
  flex: 0 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0 0 var(--space-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* One hairline, on the BOTTOM now the form sits above the box: the form
   * belongs to the compose row below it, and boxing it again would read as a
   * separate thing to deal with. */
  border-top: 0;
  border-bottom: 1px solid var(--border);
}

.form__grid {
  display: grid;
  /* `auto-fit` with a min track, so two columns appear when there is room for
   * two and never a half-width field on a phone. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
}

/* `.field` and `.field__input` come from app.css; only what the form adds is
 * here, so the two never disagree about how an input looks. */
.form .field {
  margin-bottom: 0;
  min-width: 0;
}

/* Planned for (wave T, T6): the one When control — its quick days, a date of
 * his own and its time — across the whole grid, never squeezed into a track. */
.form .field--when {
  grid-column: 1 / -1;
}

.form select.field__input {
  /* A native select is the point (§3.5's endpoints, twelve sites called
   * Bhiwandi): it carries the id, types-to-find on a PC and is a wheel on a
   * phone. It only has to match the text inputs beside it. */
  appearance: auto;
  max-width: 100%;
}

.field--check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* A checkbox row is one line, so it should not claim a whole grid track's
   * worth of height next to a label-over-input field. */
  align-self: end;
  min-height: var(--touch);
}

.field--check .field__label {
  margin-bottom: 0;
  font-weight: 500;
}

.field__check {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--accent);
}

/* Wave M (D step 2), the phone review's finding 7: the short forms' checkbox
 * was a 20 x 20 px target. The INPUT is now the 44 px target and draws its
 * own 20 px box in the middle of it, so the row looks as it did: the same
 * box, ticked in the structural green. Its side margins give back what the
 * target adds, which keeps the drawn box on the fields' left edge and its
 * words 8 px from it. Only the forms' own (`.form`): Settings' and the
 * sheets' checkboxes share `.field__check` and are not this increment's. */
.form .field__check {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  width: var(--touch);
  height: var(--touch);
  margin: 0 calc((1.25rem - var(--touch)) / 2);
  border: 0;
  background: none;
  cursor: pointer;
}

.form .field__check::before,
.form .field__check::after {
  content: "";
  grid-area: 1 / 1;
  box-sizing: border-box;
}

.form .field__check::before {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ink-muted);
  border-radius: 0.25rem;
  background: var(--bg);
}

.form .field__check:checked::before {
  border-color: var(--accent);
  background: var(--accent);
}

/* The tick: two sides of a small box, turned (planned.css draws its own so). */
.form .field__check:checked::after {
  width: 0.375rem;
  height: 0.7rem;
  margin-top: -0.15rem;
  border: solid var(--accent-ink);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form .field__check:focus-visible {
  outline: none;
}

.form .field__check:focus-visible::before {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Forced colours draw no backgrounds: the system's own checkbox, in the same 44 px. */
@media (forced-colors: active) {
  .form .field__check {
    appearance: auto;
    -webkit-appearance: auto;
    display: block;
    padding: 0.75rem;
  }

  .form .field__check::before,
  .form .field__check::after {
    content: none;
  }
}

.field__hint {
  display: block;
  margin-top: var(--space-1);
  color: var(--ink-faint);
  font-size: var(--text-xs);
}

/* The lock says which of two states it is in, so it has to look like a state
 * and not like a button that might do something. */
.chip--private[aria-pressed="true"] {
  border-color: var(--ps-charcoal);
  background: var(--ps-charcoal);
  color: #fff;
}

.chip--scope[aria-pressed="true"] {
  border-color: var(--emphasis);
  border-style: solid;
  color: var(--warn);
}

/* ------------------------------------------------- the foot's ₹ button
 *
 * The sheet it opens — the keypad's pad and category tiles, and the frame
 * every sheet shares — is sheet.css since wave M (this file stood at 715 of
 * HARD RULE 8's 800 lines with the dock's two states still to come; those
 * are capture-dock.css). */

/* The one FILLED cell of the foot — the wireframe's ₹ button. */
.capture__money {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
  font-size: 1.25rem;
  font-weight: 700;
  /* No text selection on a long press — §3.3's hold-for-Personal would
   * otherwise start selecting the ₹ on a phone instead of opening the sheet. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

@media (min-width: 1100px) {
  .suggest {
    max-height: 20rem;
  }
}