/* ==========================================================================
   Kanga’s Kitchen — speaking a recipe instead of typing it

   A microphone beside the field's label, and a grey line of what it is hearing
   underneath. That is the whole of it: nothing is fixed, nothing floats,
   nothing is laid over the field she is filling in. On an iPad the on-screen
   keyboard already owns half the screen, and a floating dictation panel would
   take what is left of the recipe she is reading from. Nothing being fixed is
   also why there is not a safe-area inset anywhere in this file — the ordinary
   page padding is already looking after that.

   Only the tokens from styles.css are used, so this follows the Light / Dark /
   Auto switch on its own. Note that the theme is `light-dark()` resolved by
   `color-scheme`, so a `prefers-color-scheme` block in here would fight the
   switch rather than help it — any colour that isn't a token is a pair.
   ========================================================================== */

/* The printed page is the product; none of this ever belongs on paper. */
@media print {
  .dictate, .dictate__heard, .dictate__trouble { display: none !important; }
}

/*
 * The microphone sits in the top right corner of the field it fills.
 *
 * It used to be a labelled button on a row above the field. That cost a whole
 * line of an iPad screen per control — and the guide editor puts one on every
 * step, so sixty steps meant sixty copies of the word "Speak it" and very
 * little recipe. An icon inside the box says the same thing in the place the
 * eye is already looking.
 *
 * The shell exists only to be the positioning context. It cannot be the
 * field's own parent: a .field or a .group also holds a label, a hint and a
 * footer, and the top right of THAT is nowhere near the top right of the box.
 */
.dictate-shell { position: relative; display: block; }

.dictate {
  position: absolute;
  top: .35rem; right: .35rem;
  display: flex; align-items: center; gap: .3rem;
  /* The corner must not become a dead patch over the text: only the button
     itself takes the tap, the rest of the corner still reaches the field. */
  pointer-events: none;
}
.dictate > * { pointer-events: auto; }

/*
 * Room for the icon, held open in the field itself so a long word can never
 * slide underneath it. Textareas only — a single-line input scrolls its own
 * text horizontally and would hide the end of it behind the button.
 *
 * 2.75rem is the 44px target plus the corner offset, in ems of the field.
 */
.dictate-shell > textarea { padding-right: 2.75rem; }

.dictate .dictate__mic {
  width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-faint);
}
.dictate .dictate__mic:hover { color: var(--accent-deep); background: var(--paper-deep); }
.dictate .dictate__mic:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.dictate .dictate__mic .ico { width: 20px; height: 20px; }

/*
 * Listening has to be legible from where she is standing — an arm's length
 * back from a propped-up iPad, probably without her reading glasses. Without a
 * word to change, the icon carries it: it fills in, gains an edge, and grows a
 * pulsing dot, and a Stop appears beside it. The grey line under the field says
 * "Listening" in words at the same time.
 */

/*
 * What it thinks it heard, and — before she says anything — the line telling
 * her it is listening at all. That makes this the state readout, not a hint,
 * so it takes --ink-soft: --ink-faint is about 2.5:1 on the daytime paper,
 * which is unreadable at arm's length in a bright kitchen, and this is the one
 * thing on screen saying the microphone is still awake.
 *
 * The italic is what carries "this hasn't happened yet" instead of the colour;
 * it is still a step quieter than the recipe, which is --ink.
 *
 * The height is held so the field below doesn't hop about as she talks.
 */
.dictate__heard {
  margin: .35rem 0 0;
  min-height: 1.5em;
  color: var(--ink-soft);
  font-size: .95rem; line-height: 1.5;
}
.dictate__heard.is-idle { font-style: italic; }

.dictate__trouble.alert { margin: .5rem 0 0; }

/* ── Touch ─────────────────────────────────────────────────────────────── */

/*
 * `any-pointer: coarse`, not `hover: none`. An iPad in a Magic Keyboard reports
 * `hover: hover`, so a hover-keyed rule switches itself off on the one device
 * this app is really used on. Nothing here is revealed by hovering in any case:
 * both buttons are permanently visible.
 */
@media (any-pointer: coarse) {
  /* 44px of target without a 44px-wide button: the tap area is grown past the
     drawn box, which keeps the icon small enough to sit in a corner while
     still being hittable with a thumb. */
  .dictate .dictate__mic { width: 38px; height: 38px; }
  .dictate .dictate__mic::before {
    content: ""; position: absolute; inset: -4px;
  }
  .dictate-shell > textarea { padding-right: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  .dictate.is-live .dictate__mic::after { animation: none; }
}

/*
 * Switched off, and saying so rather than simply missing.
 *
 * The same dashed-grey treatment as .btn--soon on Cook Along, so the two
 * not-yet-ready things in the app look like the same kind of thing. See
 * DICTATION_READY in dictate.js.
 */
.dictate .dictate__mic--soon {
  color: var(--ink-faint);
  border: 1px dashed var(--rule);
  cursor: default;
  opacity: .75;
}
.dictate .dictate__mic--soon:hover {
  background: transparent;
  color: var(--ink-faint);
}