/* Quick add: what a line of plain words will make, shown under the box
   before Enter, in Calendar's side panel (calendar-quick.js) and in the
   card composer in Tasks (tasks-board.js). Both read the words with
   quick-add.js, and show the reading the same way. */

.qa-read { margin: 6px 0 0; padding: 8px 10px; border-radius: var(--radius-md); font-size: var(--text-xs); }
.qa-read:empty, .qa-read[hidden] { display: none; }
.qa-rows { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; }
.qa-k { color: var(--ink-faint); }
.qa-v { color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.qa-v:nth-child(2) { font-weight: 600; }
.qa-hint { margin: 6px 0 0; color: var(--ink-soft); font-size: var(--text-2xs); overflow-wrap: anywhere; }

/* Calendar's box, under Create. */
.ca-qa { margin: 0 0 8px; }
.ca-qa label { display: block; margin: 0 0 4px 4px; font-size: var(--text-2xs); font-weight: 500; color: var(--ink-soft); }
.ca-qa input { width: 100%; box-sizing: border-box; min-height: 40px; }
.ca-qa input:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.ca-qa .qa-read { border: 1px solid var(--rule); background: var(--paper-raised); }
@media (pointer: coarse) { .ca-qa input { min-height: 44px; } }

/* Tasks' composer, on a list: the reading is a card, like the box above it. */
.tk-composer .qa-read { background: var(--tk-card); box-shadow: var(--tk-shadow); }