/* ============================================================
   Capture (v247): the + opens straight into adding a task (js/capture.js). A panel that rides on
   the keyboard: the other quick adds in one row, what was just added (with Undo), the date and list
   the words were read as, and the field with its mic. A hold on the + listens. Today's task group
   ends with a quiet "Add a task" row that opens the same panel.
   ============================================================ */
.cap { position: fixed; inset: 0; z-index: 80; --kb: 0px; }
.cap[hidden] { display: none !important; }
html.cap-open { overflow: hidden; }
.cap-bg { position: absolute; inset: 0; background: rgba(2, 4, 12, .5); touch-action: none; }   /* a drag on the dim never scrolls the day behind */
.cap-panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px;
  padding-block: 4px calc(12px + env(safe-area-inset-bottom, 0px));
  padding-left: max(14px, env(safe-area-inset-left, 0px)); padding-right: max(14px, env(safe-area-inset-right, 0px));
  transform: translateY(var(--drag, 0px));   /* --drag: a swipe down in progress */
  touch-action: none;   /* a vertical drag on the panel is the swipe that puts it away, never a page scroll */
  border: 1px solid var(--line-2); border-bottom: 0; border-radius: 26px 26px 0 0;
  background: var(--card, var(--m-surface)); color: var(--tx);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, .3);
}
.cap-panel:focus { outline: none; }   /* it takes the focus only while a held + listens */
html.cap-open .arc-snackbar { visibility: hidden !important; }   /* no Undo toast over the panel, even one that comes late */
/* With the keyboard up the panel's content sits right on it and its surface runs on behind it, so the clear
   margins of iOS 26's glass keyboard show the panel, never the day behind it. */
.cap.kb .cap-panel { padding-bottom: calc(10px + var(--kb)); }
/* a short screen with the keyboard up: the quick adds step aside for the field (js/capture.js fit) */
.cap.tight .cap-acts { display: none; }
.cap-grab { display: grid; place-items: center; width: 100%; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.cap-grab span { width: 38px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--tx) 22%, transparent); }

/* the other quick adds, one tap each */
.cap-acts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; }
.cap-act { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; min-height: 66px; padding: 6px 2px; border: 0; border-radius: 16px; background: none; color: var(--tx-2); font: inherit; font-size: 11px; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cap-act .m-tile { width: 38px; height: 38px; border-radius: 12px; }
.cap-act span { max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; }   /* "Wind down" wraps on a 320 phone rather than losing its end */
.cap-act:active { background: color-mix(in srgb, var(--tx) 8%, transparent); }
.cap-act:focus-visible, .cap-mic:focus-visible, .cap-go:focus-visible, .cap-undo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* what was just added, in place: the task, when it is, and Undo */
.cap-added:empty { display: none; }
.cap-added.kept { display: block; }   /* once shown it keeps its room (js/capture.js keepRoom) */
.cap-added-row { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px 0 12px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 12%, transparent); animation: capIn .28s cubic-bezier(.2, 1, .3, 1) both; transition: opacity .25s; }
.cap-added-row.fade { opacity: 0; }
.cap-added-row i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff); }
.cap-added-row i svg { width: 14px; height: 14px; stroke-width: 2.6; }
.cap-added-row b { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.cap-added-row em { flex: 0 1 auto; min-width: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-style: normal; color: var(--tx-2); font-variant-numeric: tabular-nums; }
.cap-undo { flex: none; min-width: 44px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--accent); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.cap-note { margin: 0; padding: 0 8px; font-size: 12.5px; line-height: 1.4; color: var(--tx-2); }

/* the date, time and list the words were read as (the Tasks screen's chips) */
.cap-chips.tkx-chipbox { margin: 0; padding: 0 4px; }
.cap-chips:empty { display: none; }

/* the field, its mic and send */
.cap-bar { display: flex; align-items: center; gap: 6px; min-height: 54px; padding: 0 7px 0 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--m-surface-2, color-mix(in srgb, var(--tx) 6%, transparent)); transition: border-color .2s, box-shadow .2s; }
.cap-bar:focus-within { border-color: var(--blue-line, var(--accent-line)); box-shadow: 0 0 0 4px var(--blue-soft, var(--accent-soft)); }
.cap-input { flex: 1; min-width: 0; height: 50px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--tx); font: inherit; font-size: 16px; outline: none; }
.cap-input:focus, .cap-input:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }   /* the bar shows the focus */
.cap-input::placeholder { color: var(--tx-3); }
.cap-mic, .cap-go { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cap-mic svg, .cap-go svg { width: 20px; height: 20px; }
.cap-mic { background: color-mix(in srgb, var(--tx) 8%, transparent); color: var(--tx); }
.cap-go { display: none; background: var(--blue-grad, var(--accent)); color: var(--p-on-action, var(--on-accent, #fff)); }
.cap-go svg { stroke-width: 2.3; }
/* with words in the field, send takes the mic's place; while listening the mic stays (it stops) */
.cap-panel.has-text .cap-go { display: grid; }
.cap:not(.listening) .cap-panel.has-text .cap-mic { display: none; }
.cap.listening .cap-go { display: none; }
.cap.listening .cap-mic { background: var(--accent); color: var(--on-accent, #fff); animation: capMic 1.4s ease-in-out infinite; }
.cap.listening .cap-bar { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
@keyframes capMic { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); } 60% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--accent) 0%, transparent); } }

/* in and out */
.cap.in .cap-bg { animation: capFade .2s ease both; }
.cap.in .cap-panel { animation: capUp .32s cubic-bezier(.2, 1, .3, 1) both; }
.cap.in .cap-act { animation: capIn .3s cubic-bezier(.2, 1, .3, 1) both; animation-delay: calc(var(--n, 0) * 28ms + 70ms); }
.cap.out .cap-bg { animation: capFade .18s ease reverse both; }
.cap.out .cap-panel { animation: capDown .2s cubic-bezier(.4, 0, 1, 1) both; }
@keyframes capFade { from { opacity: 0; } }
@keyframes capUp { from { opacity: 0; transform: translateY(36px); } }
@keyframes capDown { to { opacity: 0; transform: translateY(36px); } }
@keyframes capIn { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .cap *, .cap.in *, .cap.out * { animation: none !important; transition: none !important; } }
[data-motion="reduced"] .cap * { animation: none !important; transition: none !important; }

/* the looks: the Ember glass of the old + menu, each palette's own menu surface */
[data-skin="ember"] .cap-panel {
  border-color: rgba(160, 185, 255, .18);
  background: linear-gradient(180deg, rgba(30, 48, 105, .96), rgba(10, 17, 36, .98));
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 -18px 48px rgba(0, 0, 0, .55), 0 0 40px -10px rgba(61, 109, 255, .45);
}
[data-skin="ember"] .cap-bar { border-color: rgba(160, 185, 255, .2); background: rgba(6, 12, 30, .5); }
:root[data-palette] .cap-panel { border-color: var(--line-2); background: var(--p-menu); box-shadow: 0 -18px 48px rgba(0, 0, 0, .55); }
:root[data-palette] .cap-bar { border-color: var(--line-2); background: rgba(0, 0, 0, .28); }

/* a long press on the + is a hold, not a text selection or a callout */
.tab-plus { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }

/* Today: the task group's last row opens the capture */
/* the dashed square sits in the task checks' column, at their size */
.tk-add-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 0; border: 0; background: none; color: var(--tx-3); font: inherit; font-size: 15px; font-weight: 500; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tk-add-row i { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin-left: -8px; }
.tk-add-row svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; }
.tk-add-row svg rect { stroke: color-mix(in srgb, var(--tx) 32%, transparent); stroke-width: 1.6; stroke-dasharray: 3.2 2.6; }
.tk-add-row svg path { stroke-width: 1.9; }
.tk-add-row:active { color: var(--tx-2); }
.tk-add-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 12px; }

/* the Tasks screen's field: a mic while it is empty, send once there are words */
.tkx-add-mic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--tx-2); cursor: pointer; }
.tkx-add-mic svg.tki { width: 20px; height: 20px; }
.tkx-addw.has-text:not(.listening) .tkx-add-mic { display: none; }
.tkx-addw.listening .tkx-add-mic { background: var(--accent); color: var(--on-accent, #fff); animation: capMic 1.4s ease-in-out infinite; }
.tkx-addw.listening .tkx-add-go { width: 0; margin-left: -10px; opacity: 0; pointer-events: none; }
.tkx-addw.listening .tkx-add { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .tkx-addw.listening .tkx-add-mic { animation: none; } }