/* The AI's screens (increment VUI): a receipt's draft on the ₹ keypad
 * (keypad-draft.js) and the AI spend card on Settings (ai-meter-card.js).
 *
 * Their own stylesheet, by the wave's ground rule: capture.css and day.css
 * take no new rules. Drawn in the wireframe's language (docs/ui/MOCKUP.html):
 * the keypad's sunken wash and chips, a Settings `.card`. Colour only from
 * tokens.css, light and dark; orange (the brand's emphasis) marks what the
 * owner should check, always with words beside it, never colour alone. */

/* ------------------------------------------- the draft row, under the held head
 *
 * The row is the scrolling body's first child, above the pad. Its height is
 * reserved from the moment the sheet opens ("Reading the receipt…"), so the
 * reading landing a few seconds later does not push the pad keys out from under
 * a thumb already reaching for them. */

.kdraft {
  min-height: 4.5rem;
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* Off, the cap, a failure, offline: nothing was read, and he has to type it.
 * This row was drawn quiet (a grey edge on the sunken wash) and on 2026-10-13
 * the owner did not notice "Receipt reading is off." on it (increment K). So
 * it is the sheet's own "this needs you" now — the warn wash and the orange
 * edge of .sheet__lead (expense-edit.css) and the Planned-today strip, its
 * words in --ink at the card's second-line size, and the words themselves end
 * in what to do (receipt-spec.js WORDS). Still one line, and the keypad under
 * it is still the keypad. Colour is never the only sign: the words say it. */
.kdraft:not([data-status="read"]):not([data-status="reading"]) {
  min-height: 0;
  border-color: var(--emphasis-edge);
  border-inline-start-width: 3px;
  background: var(--tint-warn);
  font-size: var(--text-md);
}

.kdraft__words {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

/* Reading: a small turning ring after the words. tokens.css stills it for a
 * reduced-motion owner, where it is a plain ring. */
.kdraft[data-status="reading"] .kdraft__words::after {
  content: "";
  display: inline-block;
  width: 0.75em;
  height: 0.75em;
  margin-inline-start: var(--space-2);
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  vertical-align: -0.1em;
  animation: kdraft-turn 0.9s linear infinite;
}

@keyframes kdraft-turn {
  to {
    transform: rotate(1turn);
  }
}

.kdraft__details,
.kdraft__note,
.kdraft__hint {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

.kdraft__details {
  color: var(--ink);
}

/* The receipt's note is saved whole; on the sheet two lines say what it is. */
.kdraft__note {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* --------------------------------------------------- what to check (the marks)
 *
 * A field read with low confidence (< 0.7): a dashed orange edge, its text in
 * the orange that reads as text (--warn-ink, 5.57:1 light, and its dark value),
 * the edge in the orange that carries state (--emphasis-edge, 3.32:1) — and the
 * words above name it, so the mark is never colour alone. */

.kdraft__part[data-check="true"] {
  color: var(--warn-ink);
  font-weight: 600;
  text-decoration: underline dashed var(--emphasis-edge) 2px;
  text-underline-offset: 0.2em;
}

.pad__amount[data-check="true"] {
  color: var(--warn-ink);
  text-decoration: underline dashed var(--emphasis-edge) 3px;
  text-underline-offset: 0.18em;
}

.cat[data-check="true"] {
  border: 2px dashed var(--emphasis-edge);
}

/* ------------------------------------------------------ Settings → AI spend */

.aimeter__headline {
  margin: 0 0 var(--space-2);
  color: var(--ink);
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* A native <meter>: its numbers are attributes, so nothing is styled inline
 * (the CSP has no 'unsafe-inline'). Chromium only — Chrome on the phone and
 * WebView2 in PSDiary.exe — so its own pseudo-elements draw it. */
.aimeter__meter {
  display: block;
  width: 100%;
  height: 0.75rem;
  margin: 0 0 var(--space-4);
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
}

.aimeter__meter::-webkit-meter-bar {
  height: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-sunken);
}

.aimeter__meter::-webkit-meter-optimum-value,
.aimeter__meter::-webkit-meter-suboptimum-value,
.aimeter__meter::-webkit-meter-even-less-good-value {
  border-radius: 999px;
  background: var(--accent);
}

.aimeter__meter[data-full="true"]::-webkit-meter-optimum-value {
  background: var(--emphasis-edge);
}

.aimeter__fact {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.aimeter__fact > .card__detail {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: end;
  overflow-wrap: anywhere;
}