/* Quick logging (round 12, brief §2): Quick add's one-line box, the "log again" sheets' day and price rows, and the
   voice sheet's "Ghi vào …" line. Colours from the app's own tokens only (light and the living themes). */

/* ---- Quick add: the box takes the title's place (the title stays for screen readers); the row keeps the height the
   title + Close had, so the sheet still fits a 360 × 640 phone with every tile and "Ghi chi tiêu" in sight. ---- */
#quick-add-sheet .qa-head { gap: 8px; }
.qa-quicklog { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 0; }
#quick-add-sheet .qa-quicklog input { flex: 1 1 auto; min-width: 0; width: auto; height: 42px; margin: 0; padding: 0 14px; border-radius: 999px;
  background-color: var(--surface-soft); border-color: var(--line-strong); font-size: 16px; /* 16 px: no zoom-on-focus on iPhone */ }
#quick-add-sheet .qa-quicklog input:focus { border-color: var(--accent-strong); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
#quick-add-sheet button.qa-quicklog-go { flex: 0 0 42px; width: 42px; height: 42px; min-height: 42px; margin: 0; padding: 0; border-radius: 50%;
  background: var(--accent-light); color: var(--accent-strong); font-size: 18px; line-height: 1; box-shadow: none; }
#quick-add-sheet button.qa-quicklog-go[data-mode="send"] { background: var(--accent-strong); color: var(--text-on-accent, #fff); }
#quick-add-sheet button.qa-quicklog-go:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
#quick-add-sheet .qa-head .sheet-close { flex: 0 0 auto; padding-left: 4px; padding-right: 4px; }
/* The words' own day, before them in the box, when it is not the Diary's (a draft brought back after a reload keeps the
   day it was typed for): peach for another day, mint for today. Read only; the "Ghi cho" row below changes the day. */
.qa-quicklog-day { flex: 0 0 auto; max-width: 40%; height: 30px; padding: 0 9px; border-radius: 999px; background: var(--peach-light); color: var(--peach-strong);
  font-size: 12.5px; font-weight: 800; line-height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--peach) 45%, transparent); }
.qa-quicklog-day.is-today { background: var(--accent-light); color: var(--accent-strong); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); }
.qa-quicklog-day[hidden] { display: none; }
/* An account without spending access (.qa-no-spend: no ₫ tile) gets the same short-screen spacing as the others now
   that the head holds the box: every tile above the fold on 360 × 640 and on 320 × 568. */
@media (max-height: 700px) {
  #quick-add-sheet.qa-no-spend { padding-top: 10px; }
  #quick-add-sheet.qa-no-spend .sheet-head { margin-bottom: 4px; }
  #quick-add-sheet.qa-no-spend .qa-recent { margin-bottom: 6px; }
  #quick-add-sheet.qa-no-spend .qa-group { gap: 6px; margin-bottom: 6px; }
  #quick-add-sheet.qa-no-spend .qa-water { margin-bottom: 6px; padding-top: 3px; padding-bottom: 3px; }
  #quick-add-sheet .qa-recent-label { margin-bottom: 4px; }
}
/* A short phone (320 × 568): the sheet may use a little more of the screen, and everything is a notch tighter. */
@media (max-height: 600px) {
  #quick-add-sheet { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); max-height: 94vh; }
  #quick-add-sheet .sheet-head { margin-bottom: 4px; }
  #quick-add-sheet .qa-recent { margin-bottom: 4px; }
  #quick-add-sheet .qa-recent-rail { padding-bottom: 3px; }
  #quick-add-sheet .qa-recent-rail button.rs-chip { min-height: 42px; padding-top: 3px; padding-bottom: 3px; }
  #quick-add-sheet button.sheet-option.qa-tile { min-height: 42px; padding-top: 3px; padding-bottom: 3px; }
  #quick-add-sheet button.sheet-option.qa-tile .qa-icon { width: 28px; height: 28px; flex-basis: 28px; }
  #quick-add-sheet .qa-group { gap: 5px; margin-bottom: 5px; }
  #quick-add-sheet .qa-water { margin-bottom: 5px; padding-top: 2px; padding-bottom: 2px; }
  #quick-add-sheet button.sheet-option.qa-chip { min-height: 40px; }
}
/* Round 12 fix: the "Ghi cho" row (css/recover.css, 38 px) made the owner's sheet (₫ tile) scroll — 562 / 544 px at
   360 × 640, 547 / 534 at 320 × 568 — with "Ghi chi tiêu" against the screen's edge. On a short phone the last row keeps
   no margin under it (the sheet's padding is that space), the padding, the "Ghi cho" row's margin, the rail's scrollbar
   room and the water chips are a notch smaller; and on a 320 × 568 phone the owner's sheet gets the same tighter tiles
   as a@'s (css/spend.css outweighed them). Every tile stays above the fold with no scroll. */
@media (max-height: 700px) {
  #quick-add-sheet.qa-no-spend > .qa-group:last-child, #quick-add-sheet:not(.qa-no-spend) > .qa-group:last-child { margin-bottom: 0; }
  #quick-add-sheet.qa-no-spend, #quick-add-sheet:not(.qa-no-spend) { padding-top: 8px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  #quick-add-sheet .qa-day { margin-bottom: 4px; }
  #quick-add-sheet .qa-recent-rail { padding-bottom: 3px; }
  #quick-add-sheet button.sheet-option.qa-chip { min-height: 40px; }
}
@media (max-height: 600px) {
  #quick-add-sheet.qa-no-spend, #quick-add-sheet:not(.qa-no-spend) { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  #quick-add-sheet:not(.qa-no-spend) .qa-recent { margin-bottom: 4px; }
  #quick-add-sheet:not(.qa-no-spend) .qa-recent-rail button.rs-chip { min-height: 42px; padding-top: 3px; padding-bottom: 3px; }
  #quick-add-sheet:not(.qa-no-spend) .qa-group { gap: 5px; margin-bottom: 5px; }
  #quick-add-sheet:not(.qa-no-spend) .qa-water { margin-bottom: 5px; padding-top: 2px; padding-bottom: 2px; }
  #quick-add-sheet:not(.qa-no-spend) button.sheet-option.qa-tile { min-height: 42px; padding-top: 3px; padding-bottom: 3px; }
  #quick-add-sheet:not(.qa-no-spend) button.sheet-option.qa-tile .qa-icon { width: 28px; height: 28px; flex-basis: 28px; }
}

/* ---- "Log again" sheets: Ngày [Hôm nay] [Hôm qua] [📅 Ngày khác] + "Ghi vào: …", and the optional price ---- */
.meal-chips.fs-days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
label.fs-day-other { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 40px; margin: 0; padding: 0 4px;
  border: 1px solid var(--diary-line, var(--line)); border-radius: 999px; background: var(--surface); color: var(--text-primary); font-size: 13.5px; font-weight: 700;
  white-space: nowrap; overflow: hidden; cursor: pointer; }
label.fs-day-other span { overflow: hidden; text-overflow: ellipsis; }
label.fs-day-other.is-on { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
label.fs-day-other:focus-within { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
/* The real date input covers the chip (a tap opens the phone's own date picker); it is not drawn. */
label.fs-day-other input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.fs-day-line { margin: 6px 2px 0; font-weight: 700; }
.fs-day-line.is-past { color: var(--peach-strong); }
.fs-price-box { display: flex; align-items: center; gap: 8px; }
#food-sheet .fs-price-box input { flex: 0 1 150px; min-width: 0; width: 150px; height: 44px; font-size: 16px; font-weight: 700; text-align: right; }
.fs-price-box .fs-price-clear { margin-left: auto; }
.fs-price-pick { margin-top: 6px; }
.fs-price-note { margin: 6px 0 0; }
.fs-add-day { font-weight: 700; }
@media (max-width: 380px) { .meal-chips.fs-days button.meal-chip, label.fs-day-other { font-size: 12.5px; } }
/* A narrow phone (320 px): two saved meals still in sight in the rail, and no tile label on two lines. */
@media (max-width: 340px) {
  #quick-add-sheet .qa-recent-rail button.rs-chip { max-width: 138px; padding-left: 10px; padding-right: 10px; }
  #quick-add-sheet button.sheet-option.qa-tile { gap: 8px; padding-left: 8px; padding-right: 6px; font-size: 13.5px; }
  #quick-add-sheet .qa-quicklog input { padding: 0 10px; }
}

/* ---- the voice sheet: "Ghi vào: Hôm qua · Thứ 5, 22/10" with Hôm nay · Hôm qua · 📅 ---- */
.vs-day { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface-soft); }
.vs-day.is-past { background: var(--peach-light); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--peach-strong) 22%, transparent); }
.vs-day-text { margin: 0; font-size: 14px; color: var(--text-primary); }
.vs-day.is-past .vs-day-text strong { color: var(--peach-strong); }
.vs-day-chips { gap: 6px; }
.vs-day-chips button.vd-chip { min-height: 36px; }
label.vd-chip.vs-day-other { position: relative; display: inline-flex; align-items: center; min-height: 36px; padding: 5px 12px; border-radius: 999px; background: var(--surface);
  color: var(--accent-strong); font-size: 13.5px; font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); cursor: pointer; overflow: hidden; }
label.vd-chip.vs-day-other.is-on { background: var(--accent-light); }
label.vd-chip.vs-day-other:focus-within { outline: 3px solid var(--accent-strong); outline-offset: 2px; }
label.vd-chip.vs-day-other input[type="date"] { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.vd-last .vd-chip { font-weight: 800; }