/* ============================================================
   Tasks and Journal (v270, his ask: "make them pleasant to use, and the design, think out of the box").
   Tasks: today's work leads in one card with its progress (js/tasks.js tasksTodayCard), rows with a little more air,
   dates as small pills (overdue red, today warm), a quieter star. Journal: the day as a page (its date, the
   sentence in the serif, today's question with a pen, two plain actions), the entries under their day's name with a
   warm thread down each card, and a calmer composer. Loads last; overrides v171.css and journal.css by place.
   ============================================================ */

/* ---------------- Tasks ---------------- */
.tkx-today { position: relative; margin: 2px 0 4px; padding: 16px 12px 6px; border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 15%, transparent), transparent 64%), var(--m-surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tx) 7%, transparent); }
.tkx-today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 6px; }
.tkx-today-head h2 { margin: 0; font-family: var(--font-display, ui-serif, 'New York', 'Iowan Old Style', Georgia, serif); font-size: 24px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; color: var(--tx); }
.tkx-today-n { font-size: 13px; color: var(--tx-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tkx-today-n b { font-size: 17px; font-weight: 600; color: var(--tx); }
.tkx-today-bar { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; margin: 12px 6px 8px; }
.tkx-today-bar i { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--tx) 12%, transparent); transition: background .45s ease, box-shadow .45s ease; }
.tkx-today-bar i.on { background: linear-gradient(90deg, #ffc08e, var(--accent)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent); }
.tkx-today .tkx-card { margin: 0 -4px; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tkx-today .tkx-item + .tkx-item { border-top-color: color-mix(in srgb, var(--tx) 8%, transparent); }
.tkx-today-clear { display: flex; align-items: center; gap: 10px; margin: 4px 6px 12px; font-size: 15px; font-weight: 500; color: var(--tx-2); }
.tkx-today-clear svg.tki { width: 22px; height: 22px; color: var(--accent); }
.tkx-today.clear { animation: tkxGlow 1.2s ease-out both; }
@keyframes tkxGlow { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent), inset 0 1px 0 color-mix(in srgb, var(--tx) 7%, transparent); } to { box-shadow: 0 0 0 14px transparent, inset 0 1px 0 color-mix(in srgb, var(--tx) 7%, transparent); } }

/* rows: the date as a small pill, the star quieter until it is on */
.tkx-row { min-height: 64px; }
.tkx-meta { gap: 5px 8px; }
.tkx-when { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 999px; background: color-mix(in srgb, var(--tx) 8%, transparent); color: var(--tx-2); font-size: 12px; font-weight: 500; }
.tkx-when.today { background: color-mix(in srgb, var(--accent) 18%, transparent); color: color-mix(in srgb, var(--accent) 70%, var(--tx)); }
.tkx-when.late { background: color-mix(in srgb, var(--tkx-red) 18%, transparent); color: color-mix(in srgb, var(--tkx-red) 75%, var(--tx)); }
.tkx .tkx-star { color: color-mix(in srgb, var(--tx) 26%, transparent); }
.tkx .tkx-star.on { color: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 50%, transparent)); }
.tkx-gh { margin: 24px 8px 9px; font-size: 10px; letter-spacing: .18em; }
.tkx-gh b { color: var(--tx-2); }

/* the first task: a soft mark over the words */
.tkx-empty { display: grid; justify-items: center; gap: 12px; }
.tkx-empty-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); color: var(--accent); }
.tkx-empty-mark svg.tki { width: 30px; height: 30px; stroke-width: 1.7; }

/* ---------------- Journal ---------------- */
.jn-week { gap: 5px; }
.jn-day { min-height: 60px; border-radius: 16px; }
.jn-day.on { min-height: 72px; border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 22%, transparent), var(--m-surface-2)); box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--accent) 60%, transparent); }
.jn-day.on b { font-size: 24px; }
.jn-day.today::after { top: 8px; right: 8px; width: 6px; height: 6px; background: var(--accent); }
.jn-day.has i { background: color-mix(in srgb, var(--accent) 70%, var(--tx)); }

/* the day's page */
.jn-page { padding: 18px 18px 16px; border-radius: 26px; border: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%), var(--m-surface); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tx) 7%, transparent); }
.jn-page::before { content: none; }
.jn-page-day { margin: 0; font-size: 10px; font-weight: 600; line-height: 1.3; letter-spacing: .2em; text-transform: uppercase; color: var(--tx-3); }
.jn-page .jn-say { margin-top: 10px; font-family: var(--font-display, ui-serif, 'New York', 'Iowan Old Style', Georgia, serif); font-size: 26px; font-weight: 400; line-height: 1.24; letter-spacing: -.01em; color: var(--tx-2); }
.jn-page .jn-say b, .jn-page .jn-say em { font-weight: 500; color: var(--tx); }
.jn-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 5px; align-items: center; width: 100%; margin-top: 16px; padding: 14px 12px 14px 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); color: inherit; font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s ease, background .2s; }
.jn-q:active { transform: scale(.985); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.jn-q small { grid-column: 1; font-size: 9px; font-weight: 700; line-height: 1.2; letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--accent) 80%, var(--tx)); }
.jn-q-text { grid-column: 1; font-family: ui-serif, 'New York', 'Iowan Old Style', Georgia, serif; font-size: 16.5px; font-style: italic; line-height: 1.4; text-wrap: pretty; color: var(--tx); }
.jn-q-pen { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: radial-gradient(120% 120% at 30% 20%, #ffb27a, var(--accent) 55%); color: #1d0e05; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
.jn-q-pen svg { width: 19px; height: 19px; }
.jn-tools-l { flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.jn-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--tx) 6%, transparent); color: var(--tx); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s ease; }
.jn-pill:active { transform: scale(.96); }
.jn-pill svg { width: 17px; height: 17px; color: var(--tx-2); }
.jn-pill em { display: grid; place-items: center; min-width: 20px; height: 20px; margin-right: -6px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: #1d0e05; font-size: 12px; font-style: normal; font-weight: 700; }
.jn-q:focus-visible, .jn-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the entries, under their day's name, a warm thread down each card */
.jn-feed { gap: 20px; }
.jn-dayblock { display: grid; gap: 10px; }
.jn-dayname { margin: 0 6px; font-size: 10px; font-weight: 600; line-height: 1.3; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); }
.jn-memo { position: relative; padding-left: 22px; }
.jn-memo::before { content: ''; position: absolute; left: 10px; top: 18px; bottom: 18px; width: 2.5px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 0%, transparent)); opacity: .75; }
.jn-memo-top b { font-size: 16px; }
.jn-memo-sum { font-size: 14px; }

/* the composer: the same pill, warmer when written in */
.jn-compose:focus-within { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.jn-compose::before { background: linear-gradient(90deg, transparent, #ffb27a, var(--accent), transparent); }
.jn:not(.jn-is-graph) .jn-feed { padding-bottom: 120px; }

/* ---------------- on Ember's warm ground (v266): smoked glass ---------------- */
:root[data-skin="ember"]:not([data-palette]) .tkx-today { background: linear-gradient(180deg, rgba(255, 140, 80, .16), rgba(26, 14, 14, .45) 62%), rgba(16, 9, 9, .42); border-color: rgba(255, 226, 212, .14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
:root[data-skin="ember"]:not([data-palette]) .jn-page { background: linear-gradient(180deg, rgba(255, 140, 80, .1), rgba(26, 14, 14, .45) 70%), rgba(16, 9, 9, .42); border-color: rgba(255, 226, 212, .14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
:root[data-skin="ember"]:not([data-palette]) .jn-compose { background: rgba(20, 11, 11, .86); border-color: rgba(255, 226, 212, .16); }

@media (prefers-reduced-motion: reduce) { .tkx-today.clear { animation: none; } .tkx-today-bar i { transition: none; } }
[data-motion="reduced"] .tkx-today.clear { animation: none; }

/* the segment a tick just earned, and today's question once answered */
.tkx-today-bar i.fresh { animation: tkxSeg .6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes tkxSeg { 0% { transform: scaleY(.4); filter: brightness(1.8); } 60% { transform: scaleY(1.6); } 100% { transform: none; filter: none; } }
.jn-q.done { border-color: color-mix(in srgb, var(--accent) 22%, transparent); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.jn-q.done .jn-q-text { color: var(--tx-2); }
.jn-q.done .jn-q-pen { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .tkx-today-bar i.fresh { animation: none; } }
[data-motion="reduced"] .tkx-today-bar i.fresh { animation: none; }

/* on the warm ground the composer's send and mic are warm too (the blue and green belonged to the navy look) */
:root[data-skin="ember"]:not([data-palette]) .jn-send { background: radial-gradient(120% 120% at 30% 20%, #ffb27a, var(--accent) 55%); color: #1d0e05; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
:root[data-skin="ember"]:not([data-palette]) .jn-mic { background: radial-gradient(120% 120% at 30% 20%, #ffb27a, var(--accent) 55%); color: #1d0e05; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 80%, transparent); }
:root[data-skin="ember"]:not([data-palette]) .jn-compose.listening .jn-mic { background: radial-gradient(120% 120% at 30% 20%, #ffd0a8, var(--accent) 60%); color: #1d0e05; }
:root[data-skin="ember"]:not([data-palette]) .jn-compose.can-talk.has-text .jn-mic { background: var(--m-surface-2); color: var(--tx-2); box-shadow: none; }

/* ---------------- Progress, Insight (v272, his ask: "not aligned") ----------------
   the number and its caption centred in the arc, the change on its own line under it (it sat on the arc's ends),
   no dark knob at the arc's start, and the two figures under the gauge in one size so their labels line up */
.pc .pc-score { top: 40%; }
.pc .ember-knob-start { display: none; }
.pc-delta-row { display: flex; justify-content: center; margin: 2px 0 0; }
.pc-delta-row .pc-delta { margin-top: 0; }
.pc .ember-range-top { align-items: flex-end; }
.pc .ember-range-top b, .pc .ember-range-right b { display: block; margin-top: 3px; font-size: 22px; font-weight: 400; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pc .ember-range-right b { color: var(--tx); }

/* ---------------- Journal, the mic (v274, his ask: "on the side of the hashtags and just the icon, remove it from
   the bottom") ----------------
   The mic is an icon at the end of the tag row. The composer leaves the bottom: it shows only while it is in use (the
   words being heard, a note not yet sent, or being typed in), and its own mic is gone. Without dictation the
   composer stays as it was, so a note can still be typed. */
.jn-tagbar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.jn-tagbar .jn-filter { flex: 1; min-width: 0; }
.jn-tagbar .jn-mic-icon {
  flex: none; width: 40px; height: 40px; margin-left: auto; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--tx-2); box-shadow: none; transition: color .2s, background .2s;
}
.jn-tagbar .jn-mic-icon svg { width: 21px; height: 21px; }
.jn-tagbar .jn-mic-icon:active { background: var(--m-surface); }
.jn-tagbar .jn-mic-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:root[data-skin="ember"]:not([data-palette]) .jn-tagbar .jn-mic-icon { background: transparent; color: var(--tx-2); box-shadow: none; }
.jn:has(.jn-compose.listening) .jn-tagbar .jn-mic-icon, :root[data-skin="ember"]:not([data-palette]) .jn:has(.jn-compose.listening) .jn-tagbar .jn-mic-icon { color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); animation: jnMicOn 1.2s ease-in-out infinite; }
@keyframes jnMicOn { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 50% { box-shadow: 0 0 0 9px transparent; } }
.jn-compose.can-talk .jn-mic { display: none; }
.jn-compose.can-talk:not(.has-text):not(.listening):not(:focus-within) { display: none; }
@media (prefers-reduced-motion: reduce) { .jn:has(.jn-compose.listening) .jn-tagbar .jn-mic-icon { animation: none; } }
[data-motion="reduced"] .jn:has(.jn-compose.listening) .jn-tagbar .jn-mic-icon { animation: none; }
:root[data-skin="ember"]:not([data-palette]) .jn-wave i { background: var(--accent); }