/* Design tokens — sizes are deliberately large for users with motor or
   cognitive difficulties; contrast targets WCAG AAA (7:1) for text. */
:root {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-muted: #444444;
  --color-primary: #1565c0;
  --color-primary-dark: #0d47a1;
  --color-yes-bg: #e8f5e9;
  --color-yes-text: #1b5e20;
  --color-no-bg: #fdecea;
  --color-no-text: #b71c1c;
  --color-neutral-bg: #eeeeee;
  --color-neutral-text: #333333;
  --color-border: #757575;

  --font-body: 22px;
  --font-amount: 32px;
  --font-headline: 34px;

  --target: 64px;      /* primary touch target */
  --target-small: 56px;
  --gap: 16px;
  --radius: 16px;
}

* { box-sizing: border-box; }

/* author display rules must not defeat the hidden attribute */
[hidden] { display: none !important; }

html { font-size: var(--font-body); }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--font-body);
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg);
  /* leave room for the sticky result panel */
  padding-bottom: 160px;
}

main {
  max-width: 520px;
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* ---------- header ---------- */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  max-width: 520px;
  margin: 0 auto;
  padding: 12px var(--gap);
  /* always tall enough for the "Start over" button, so the page doesn't
     jump down the moment the first amount is entered */
  min-height: calc(var(--target-small) + 24px);
}
h1 { font-size: 26px; margin: 0; }

/* A quiet text label beside a round icon button — used for "Start over" in
   the header and for the picker's two actions, so a circle always reads as
   a small action and ✕ always means "clear". */
.labelled-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.labelled-btn-text {
  font-size: 15px;
  color: var(--color-muted);
}
.labelled-btn:has(:disabled) { opacity: 0.4; }

/* ---------- zones ---------- */
.zone { margin-bottom: 28px; }

h2 {
  font-size: 26px;
  margin: 0 0 12px;
}
.zone-icon { font-size: 30px; }

/* Heading row: title on the left, its optional action button on the right. */
.zone-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  /* always tall enough for the 💵 button, which comes and goes with the
     money box being empty — the heading must not move when it does */
  min-height: calc(var(--target) + 12px);
}
.zone-head h2 { margin-bottom: 12px; }

/* Secondary action, deliberately not a primary-looking button: typing the
   amount is the main path, so this must not read as "press me to continue". */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--target);
  height: var(--target);
  margin-bottom: 12px;
  font-size: 30px;
  line-height: 1;
  background: #fff;
  border: 3px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
}
.icon-btn:active { background: #e3f2fd; }
.icon-btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ---------- money input ---------- */
/* anchors the mic over the field's right end; flex:1 fills item rows */
.amount-wrap {
  position: relative;
  flex: 1;
}

/* Round icon buttons. In a money box the 🎤/✕ pair shares one slot at the
   right end: 🎤 while it is empty (speak instead of type), ✕ once it has a
   number (wipe it). .round-btn is the same circle standing on its own beside
   a label, so a circle always reads as "a small action here". */
.mic-btn,
.clear-btn,
.round-btn {
  width: var(--target-small);
  height: var(--target-small);
  font-size: 26px;
  line-height: 1;
  background: #fff;
  border: 3px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
}
/* only the in-box pair overlays the field */
.mic-btn,
.clear-btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
}
.clear-btn,
.round-btn {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-muted);
}
.round-btn:disabled { cursor: default; }
.mic-btn:active,
.clear-btn:active,
.round-btn:not(:disabled):active { background: #e3f2fd; }
.mic-btn:focus-visible,
.clear-btn:focus-visible,
.round-btn:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.amount-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--target);
  /* right padding reserves the 🎤/✕ slot: overflowing text clips at the
     padding box, so shrinking the field is what actually keeps long
     amounts out from under the button */
  padding: 0 66px 0 16px;
  background: #fff;
  border: 3px solid var(--color-border);
  border-radius: var(--radius);
}
.amount-field:focus-within {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.dollar-prefix {
  font-size: var(--font-amount);
  font-weight: 700;
  color: var(--color-muted);
}
.amount-field input {
  flex: 1;
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: var(--font-amount);
  font-weight: 700;
  padding: 12px 0;
  color: var(--color-text);
  background: transparent;
}

.chip {
  display: inline-block;
  margin: 10px 0 0;
  padding: 6px 14px;
  font-size: 17px;
  color: var(--color-primary-dark);
  background: #e3f2fd;
  border-radius: 999px;
}

/* ---------- items list ---------- */
.items-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.item-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.remove-btn {
  flex: none;
  width: var(--target-small);
  height: var(--target-small);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-no-text);
  background: #fff;
  border: 3px solid var(--color-no-text);
  border-radius: 50%;
  cursor: pointer;
}

.add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 72px;
  margin-top: var(--gap);
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: #f5f9ff;
  border: 3px dashed var(--color-primary);
  border-radius: var(--radius);
  cursor: pointer;
}

.items-total {
  margin: 14px 0 0;
  font-size: 24px;
}
.items-total strong { font-size: var(--font-amount); }

/* ---------- footer: link to the user guide ---------- */
.app-footer {
  margin: 28px 0 8px;
  text-align: center;
}
/* Deliberately quiet: reference material, not part of the money task. Padded
   to stay a comfortable tap target without looking like a button. */
.guide-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.guide-link .guide-icon { font-size: 18px; }

/* ---------- floating verdict icon ---------- */
/* Fixed top-center so the yes/no survives the keyboard hiding the bottom
   panel. Shown only for a real verdict — a bare emoji can't carry the
   neutral hints ("type your money") on its own. */
.result-float {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  font-size: 30px;
  line-height: 1;
  border: 3px solid;
  border-radius: 50%;
  /* the page-colored halo separates the badge from whatever it floats
     over — on narrow screens that includes the tail of the h1 */
  box-shadow: 0 0 0 5px var(--color-bg), 0 3px 10px rgba(0, 0, 0, 0.25);
  z-index: 40;
}
/* The ring reads as the colour of the answer, so it needs to be plainly green
   or red at a glance. The panel's text colours are too dark for that at 3px —
   they look near-black — so these are a step brighter, still clearing the 3:1
   non-text contrast floor against their own fill. */
.result-float.is-yes { background: var(--color-yes-bg); border-color: #2e7d32; }
.result-float.is-no  { background: var(--color-no-bg);  border-color: #c62828; }

/* ---------- result panel ---------- */
.result {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px var(--gap) calc(18px + env(safe-area-inset-bottom));
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
}
.result-icon { font-size: 52px; line-height: 1; }
.result-headline {
  margin: 0;
  font-size: var(--font-headline);
  font-weight: 800;
  line-height: 1.15;
}
.result-subline {
  margin: 4px 0 0;
  font-size: 24px;
}
.result-subline:empty { display: none; }
.result-subline strong { font-size: 30px; }

.result.is-yes  { background: var(--color-yes-bg);  color: var(--color-yes-text); }
.result.is-no   { background: var(--color-no-bg);   color: var(--color-no-text); }
.result.is-neutral { background: var(--color-neutral-bg); color: var(--color-neutral-text); }
.result.is-neutral .result-headline { font-size: 24px; font-weight: 700; }

/* ---------- toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 170px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 92vw;
  padding: 12px 18px;
  font-size: 19px;
  color: #fff;
  background: #333;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 50;
}
.toast-btn {
  min-height: 48px;
  padding: 6px 16px;
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  color: #90caf9;
  background: none;
  border: 2px solid #90caf9;
  border-radius: 12px;
  cursor: pointer;
}

/* ---------- money picker dialog ---------- */
.picker {
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  padding: 0 var(--gap) 40px;
  border: none;
  background: var(--color-bg);
  color: var(--color-text);
  overflow-y: auto;
}
.picker::backdrop { background: rgba(0, 0, 0, 0.4); }

.picker-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label done" "total done";
  align-items: center;
  column-gap: var(--gap);
  padding: 14px 0;
  background: var(--color-bg);
  border-bottom: 3px solid #e0e0e0;
}
.picker-total-label {
  grid-area: label;
  margin: 0;
  font-size: 20px;
  color: var(--color-muted);
}
.picker-total {
  grid-area: total;
  margin: 0;
  font-size: 44px;
  font-weight: 800;
}
.done-btn {
  grid-area: done;
  min-height: 72px;
  padding: 0 28px;
  font-family: inherit;
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  background: #2e7d32;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.picker-tray {
  min-height: 84px;
  margin-top: var(--gap);
  padding: 12px;
  background: #f5f5f5;
  border-radius: var(--radius);
}
.tray-empty {
  margin: 8px 4px;
  font-size: 20px;
  color: var(--color-muted);
}
.tray-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.tray-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  border-radius: 10px;
}
.tray-item.is-coin { border-radius: 999px; }

.picker-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  margin-top: var(--gap);
}

.picker-group-label {
  margin: 24px 0 10px;
  font-size: 22px;
  color: var(--color-muted);
}

.note-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}
@media (min-width: 420px) {
  .note-grid { grid-template-columns: 1fr 1fr; }
}
.note-btn {
  padding: 0;
  background: none;
  border: none;
  border-radius: 14px;
  cursor: pointer;
}
.note-btn svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
.note-btn:active svg { transform: scale(0.96); }

.coin-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
}
.coin-btn {
  width: 96px;
  height: 96px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.coin-btn svg { display: block; width: 100%; height: 100%; }
.coin-btn:active svg { transform: scale(0.94); }

/* tap feedback: quick pop on the picker total */
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.picker-total.pop { animation: pop 150ms ease-out; }

/* ---------- speak dialog ---------- */
.speak {
  width: min(92vw, 360px);
  margin: auto;
  padding: 20px;
  border: none;
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
}
.speak::backdrop { background: rgba(0, 0, 0, 0.45); }
.speak-title {
  margin: 0 0 8px;
  font-size: 26px;
}
.speak-hint {
  margin: 0 0 14px;
  font-size: 17px;
  color: var(--color-muted);
}
.speak-input {
  width: 100%;
  min-height: var(--target);
  padding: 8px 14px;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text);
  background: #fff;
  border: 3px solid var(--color-border);
  border-radius: var(--radius);
}
.speak-input:focus {
  border-color: var(--color-primary);
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}
.speak-heard {
  min-height: 30px;
  margin: 12px 0 16px;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.speak-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.speak-actions .done-btn { min-height: var(--target); }

button:focus-visible,
.note-btn:focus-visible,
.coin-btn:focus-visible {
  outline: 4px solid var(--color-primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}