/*
 * styles-4-cta-todo-stocks-why.css
 *
 * AI CTAs (Listen/Ask AI), Gemini CTA pills, stocks why, news read more, todo tile.
 *
 * Phase 5 S3 pass-2: extracted from the monolithic styles.css
 * (8 286 LOC) to bring every CSS source file under the < 1 500
 * LOC bar. Load order in index.html preserves the original
 * cascade exactly: this file occupies lines 2574 - 3700 of the
 * pre-split styles.css.
 */

/* ---------------------------------------------------------------------------
   AI CTAs — shared Listen / Ask AI affordances (accent + motion tokens)
   --------------------------------------------------------------------------- */
.ai-cta {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.news-audio-btn.ai-cta:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Latest News: primary “Listen” control (idle shows icon + label; play/load use compact circle) */
#news-category-audio-btn.news-audio-btn.ai-cta--listen-toolbar {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: auto;
  min-width: 6.25rem;
  height: auto;
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent-soft) 50%, var(--surface)) 0%,
    color-mix(in srgb, var(--surface-alt) 94%, var(--accent-soft)) 100%
  );
  color: var(--text);
  box-shadow: var(--elev-1);
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-out);
}

#news-category-audio-btn.ai-cta--listen-toolbar:hover:not(:disabled) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface-alt));
  box-shadow: var(--elev-2);
}

#news-category-audio-btn.ai-cta--listen-toolbar .ai-cta__label {
  font-size: var(--font-size-sm);
  font-weight: 700;
  white-space: nowrap;
}

#news-category-audio-btn.ai-cta--listen-toolbar.is-loading,
#news-category-audio-btn.ai-cta--listen-toolbar.is-playing,
#news-category-audio-btn.ai-cta--listen-toolbar.is-paused {
  min-width: 2.75rem;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 999px;
  background: var(--surface-alt);
  box-shadow: none;
}

#news-category-audio-btn.ai-cta--listen-toolbar.is-playing {
  border-color: var(--accent);
  color: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  #news-category-audio-btn.ai-cta--listen-toolbar {
    transition: none;
  }
}

.brief-ai-news__audio-btn.news-audio-btn.ai-cta--brief-minutes {
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    transform var(--duration-fast) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .brief-ai-news__audio-btn.news-audio-btn.ai-cta--brief-minutes {
    transition: none;
  }
}

/* Gemini CTA: muted gradient pill + spark icon (stocks + news) — kept subtle, not neon. */
.gemini-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.38rem;
  flex-wrap: wrap;
  max-width: 100%;
  margin: 0;
  text-align: left;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: #f4f6fb;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 0.42rem 0.95rem 0.42rem 0.78rem;
  background: linear-gradient(145deg, #5c6b82 0%, #5f6dad 52%, #6974a8 100%);
  box-shadow:
    0 1px 4px rgba(30, 41, 59, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    transform var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-standard),
    filter var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.gemini-action-btn:hover {
  transform: translateY(-0.5px);
  filter: brightness(1.04);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow:
    0 2px 8px rgba(30, 41, 59, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.gemini-action-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

.gemini-action-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

@media (prefers-reduced-motion: reduce) {
  .gemini-action-btn {
    transition: none;
  }
}

.gemini-btn-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.gemini-logo-svg--brand {
  display: block;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1)) saturate(0.88);
  opacity: 0.95;
}

html[data-theme="midnight"] .gemini-action-btn,
html[data-theme="nord"] .gemini-action-btn {
  color: #eef1f8;
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(145deg, #4a5568 0%, #525d85 55%, #5a628f 100%);
  box-shadow:
    0 1px 5px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html[data-theme="midnight"] .gemini-action-btn:hover,
html[data-theme="nord"] .gemini-action-btn:hover {
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.stock-reason-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

/* Stocks “Why is it up/down?” — minimal footprint under each chip */
#stocks-tile .gemini-action-btn {
  font-size: 0.52rem;
  font-weight: 600;
  letter-spacing: 0.008em;
  line-height: 1.12;
  padding: 0.14rem 0.38rem 0.14rem 0.3rem;
  gap: 0.2rem;
}

#stocks-tile .gemini-action-btn .gemini-logo-svg--brand {
  width: 11px;
  height: 11px;
}

#stocks-tile .stock-why-audio-btn.news-audio-btn {
  flex-shrink: 0;
  width: 1.65rem;
  height: 1.65rem;
  min-width: 1.65rem;
  padding: 0;
  border-radius: 10px;
}

/* News Read More: smaller label + icon than stocks so headlines row stays dense */
#tile-news .news-read-more-btn.gemini-action-btn {
  font-size: 0.54rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.18;
  padding: 0.22rem 0.46rem 0.22rem 0.38rem;
  gap: 0.26rem;
}

#tile-news .news-read-more-btn.gemini-action-btn .gemini-logo-svg--brand {
  width: 12px;
  height: 12px;
}

.gemini-chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  box-sizing: border-box;
}

.gemini-chat-backdrop[hidden] {
  display: none !important;
}

.gemini-chat-dialog {
  width: min(100%, 28rem);
  max-height: min(88vh, 36rem);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow:
    0 16px 48px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(124, 58, 237, 0.08);
  overflow: hidden;
}

.gemini-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.09) 0%, rgba(124, 58, 237, 0.08) 50%, rgba(219, 39, 119, 0.06) 100%);
}

.gemini-chat-title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #2563eb, #7c3aed, #db2777);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme="midnight"] .gemini-chat-title,
html[data-theme="nord"] .gemini-chat-title {
  background: linear-gradient(90deg, #60a5fa, #c084fc, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gemini-chat-close {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.gemini-chat-close:hover {
  border-color: var(--accent);
}

.gemini-chat-close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.gemini-chat-close:active {
  transform: scale(0.96);
}

.gemini-chat-messages {
  flex: 1 1 auto;
  min-height: 10rem;
  max-height: 22rem;
  overflow-y: auto;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: linear-gradient(180deg, rgba(248, 250, 252, 0.5) 0%, transparent 32%);
}

html[data-theme="midnight"] .gemini-chat-messages,
html[data-theme="nord"] .gemini-chat-messages {
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.35) 0%, transparent 40%);
}

.gemini-chat-bubble {
  padding: 0.45rem 0.55rem;
  border-radius: 8px;
  font-size: 0.84rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.gemini-chat-bubble--rich {
  white-space: normal;
  padding: 0.65rem 0.75rem;
  border-radius: 12px;
  line-height: 1.5;
}

.gemini-chat-bubble--model.gemini-chat-bubble--rich {
  align-self: stretch;
  max-width: 100%;
  background: linear-gradient(145deg, var(--surface-alt) 0%, rgba(124, 58, 237, 0.04) 100%);
  border: 1px solid rgba(124, 58, 237, 0.15);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.gemini-rich-p {
  margin: 0 0 0.55rem;
  font-size: 0.86rem;
  color: var(--text);
}

.gemini-rich-p:last-child {
  margin-bottom: 0;
}

.gemini-rich-strong {
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.12));
  padding: 0.05rem 0.2rem;
  border-radius: 4px;
}

.gemini-rich-list {
  margin: 0.35rem 0 0.65rem;
  padding: 0;
  font-size: 0.86rem;
  color: var(--text);
}

.gemini-rich-list:last-child {
  margin-bottom: 0;
}

.gemini-rich-list--bullet {
  list-style: none;
}

.gemini-rich-list--bullet li {
  position: relative;
  margin: 0.4rem 0;
  padding-left: 1.15rem;
  line-height: 1.45;
}

.gemini-rich-list--bullet li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.48em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4285f4, #a855f7);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}

.gemini-rich-list--ordered {
  margin-left: 1.1rem;
  padding-left: 0.35rem;
}

.gemini-rich-list--ordered li {
  margin: 0.35rem 0;
  padding-left: 0.25rem;
  line-height: 1.45;
}

.gemini-rich-list--ordered li::marker {
  color: #7c3aed;
  font-weight: 700;
}

html[data-theme="midnight"] .gemini-rich-strong,
html[data-theme="nord"] .gemini-rich-strong {
  background: linear-gradient(90deg, rgba(96, 165, 250, 0.15), rgba(192, 132, 252, 0.15));
}

.gemini-chat-bubble--user {
  align-self: flex-end;
  background: var(--accent-soft);
  border: 1px solid var(--border);
}

.gemini-chat-bubble--model:not(.gemini-chat-bubble--rich) {
  align-self: flex-start;
  background: var(--surface-alt);
  border: 1px solid var(--border-subtle);
}

.gemini-chat-bubble--error {
  border-color: var(--warn);
  color: var(--warn);
}

.gemini-chat-thinking {
  align-self: flex-start;
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.85;
}

.gemini-chat-form {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.55rem 0.65rem 0.65rem;
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.gemini-chat-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 2.5rem;
  max-height: 8rem;
  padding: 0.45rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  font: inherit;
}

.gemini-chat-send {
  align-self: flex-end;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 55%, #c026d3 100%);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.gemini-chat-send:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.gemini-chat-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .gemini-chat-dialog {
    max-height: min(92vh, 42rem);
  }

  .gemini-chat-messages {
    max-height: 50vh;
  }
}

.todo-card__top {
  margin-bottom: 0.4rem;
}

/* Centered title; drag / mobile-home in `.tile-mobile-leading` at start edge */
.todo-card .todo-card__top.card__top--tile {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 0.45rem;
  padding-inline: calc(var(--drag-handle-size, 2rem) + 2px);
  box-sizing: border-box;
  min-height: var(--drag-handle-size, 2rem);
}

.todo-card .todo-card__top.card__top--tile .tile-mobile-leading {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
}

.todo-card .todo-card__top.card__top--tile > h2 {
  width: 100%;
  text-align: center;
  padding-inline: 0.35rem;
  box-sizing: border-box;
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.favorites-card__top {
  margin-bottom: 0.4rem;
}

.favorites-card .favorites-card__top.card__top--tile {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 0.45rem;
  padding-inline: calc(var(--drag-handle-size, 2rem) + 2px);
  box-sizing: border-box;
  min-height: var(--drag-handle-size, 2rem);
}

.favorites-card .favorites-card__top.card__top--tile .tile-mobile-leading {
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  display: flex;
  align-items: center;
}

.favorites-card .favorites-card__top.card__top--tile > h2 {
  width: 100%;
  text-align: center;
  padding-inline: 0.35rem;
  box-sizing: border-box;
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.favorites-card .favorites-card__top.card__top--tile .favorites-card__status {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  max-width: 38%;
  font-size: 0.68rem;
  text-align: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.todo-scroll {
  min-height: 0;
  --todo-item-min-h: 2.85rem;
  /* `0px` keeps max-height calc() valid; unitless 0 can break length math in some engines. */
  --todo-list-gap: 0px;
}

/* To-do: no vertical cap — height follows list + composer; list scrolls when .todo-scroll--limited applies. */
#todo-card.tile-type-vertical {
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
}

#todo-card.tile-type-vertical .todo-scroll {
  flex: 0 1 auto;
  min-height: 0;
  /* max-height comes from .todo-scroll--limited when the list is long */
}

/* When adding a todo, list scrolls above composer; whole tile grows so tiles below move down. */
#todo-card.tile-type-vertical.todo-card--composer-open .todo-scroll {
  flex: 0 1 auto;
  min-height: 3.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#todo-card.tile-type-vertical.todo-card--composer-open .todo-composer {
  flex-shrink: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  background: transparent;
}

#todo-card {
  --todo-scroll-visible-rows: 5;
}

.todo-scroll--limited {
  max-height: calc(
    var(--todo-scroll-visible-rows, 5) * var(--todo-item-min-h) + (var(--todo-scroll-visible-rows, 5) - 1) *
      var(--todo-list-gap)
  );
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.2rem;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

/* List “well” — calm inset surface like Microsoft To Do */
#todo-card .todo-scroll {
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background: color-mix(in srgb, var(--surface-alt) 82%, var(--surface));
  padding: 0;
}

.todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--todo-list-gap, 0);
  min-height: 0;
}

.todo-item {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem;
  min-height: var(--todo-item-min-h);
  box-sizing: border-box;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 0;
  background: transparent;
  transition: background var(--duration-fast) var(--ease-standard);
}

.todo-item:last-child {
  border-bottom: none;
}

.todo-item:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.todo-item.is-done {
  opacity: 0.88;
}

.todo-checkbox {
  margin-top: 0.2rem;
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent);
  border-radius: 999px;
}

.todo-empty {
  list-style: none;
  margin: 0;
  padding: 1.35rem 1rem 1.5rem;
  text-align: center;
  border: none;
}

.todo-empty__text {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: var(--font-line-snug);
  color: var(--muted);
}

/* Bottom-nav full-screen tiles: home replaces drag handle (≤820px mobile shell only). */
.tile-mobile-leading {
  position: relative;
}

.mobile-shell-home-btn {
  display: none;
  align-items: center;
  justify-content: center;
  /* Phase 4 S4 a11y: mobile home button — hit area to WCAG floor. */
  width: var(--drag-handle-size, 2rem);
  height: var(--drag-handle-size, 2rem);
  min-width: var(--touch-target-min, 48px);
  min-height: var(--touch-target-min, 48px);
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast) var(--ease-standard);
}

.mobile-shell-home-btn:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.mobile-shell-home-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: 2px;
}

.mobile-shell-home-btn__icon {
  display: block;
}

body.mobile-news-screen #tile-news .tile-mobile-leading .tile-drag-handle,
body.mobile-stocks-screen #stocks-tile .tile-mobile-leading .tile-drag-handle,
body.mobile-todos-screen #todo-card .tile-mobile-leading .tile-drag-handle,
body.mobile-favorites-screen #favorites-card .tile-mobile-leading .tile-drag-handle {
  display: none !important;
}

body.mobile-news-screen #tile-news .tile-mobile-leading .mobile-shell-home-btn,
body.mobile-stocks-screen #stocks-tile .tile-mobile-leading .mobile-shell-home-btn,
body.mobile-todos-screen #todo-card .tile-mobile-leading .mobile-shell-home-btn,
body.mobile-favorites-screen #favorites-card .tile-mobile-leading .mobile-shell-home-btn {
  display: inline-flex !important;
}

.todo-item__text-col {
  flex: 1;
  min-width: 0;
}

.todo-item__edit {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.todo-item__edit .todo-item__edit-input {
  min-height: 2.4rem;
  max-height: 5rem;
  resize: vertical;
}

.todo-item__edit-actions {
  margin-top: 0;
}

.todo-item--editing {
  border-bottom-color: transparent;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
}

.todo-text {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text);
  padding: 0.18rem 0.35rem;
  margin: -0.18rem -0.35rem;
  word-break: break-word;
  cursor: pointer;
  border-radius: var(--radius-sm);
  outline: none;
}

.todo-text:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.todo-text:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.todo-item.is-done .todo-text {
  text-decoration: line-through;
  color: var(--muted);
}

.todo-delete {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  margin: -0.08rem -0.15rem -0.08rem 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0.55;
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.todo-item:hover .todo-delete,
.todo-item:focus-within .todo-delete {
  opacity: 1;
}

.todo-delete:hover {
  color: var(--stock-down);
  background: color-mix(in srgb, var(--stock-down) 12%, transparent);
}

.todo-delete:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  opacity: 1;
}

.todo-delete svg {
  display: block;
}

.todo-card__footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.45rem;
  padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.todo-add-task-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.48rem 0.55rem;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: start;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.todo-add-task-btn__icon {
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.95;
}

.todo-add-task-btn:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.todo-add-task-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.todo-composer {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Author `display:flex` wins over the HTML hidden attribute unless we reset it. */
.todo-composer[hidden] {
  display: none !important;
}

.todo-input {
  width: 100%;
  min-height: 2.75rem;
  max-height: 6.5rem;
  font: inherit;
  /* min 16px: iOS Safari auto-zooms focused fields below 16px (stock search, new task, etc.). */
  font-size: max(16px, 0.9rem);
  line-height: 1.4;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--accent));
  background: var(--surface);
  color: var(--text);
  overflow-y: auto;
  resize: none;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.todo-input:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

.todo-composer__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.45rem;
}

.todo-ghost-btn {
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--text);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.todo-ghost-btn:hover {
  background: var(--prefs-toggle-hover);
}

.todo-submit-btn {
  font: inherit;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--btn-solid-bg);
  color: var(--btn-solid-fg);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.todo-submit-btn:hover {
  background: var(--btn-solid-hover);
}

.weather-inline {
  margin-top: 0.9rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.8rem;
}

.commute-inline {
  margin-top: 0.72rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 0.7rem;
}

.commute-inline__top {
  margin-bottom: 0.25rem;
}

.commute-inline__route {
  font-size: 0.76rem;
}

.commute-inline__route--missing {
  color: var(--stock-down);
  font-weight: 600;
}

.commute-inline__duration.metric {
  margin: 0.08rem 0 0.12rem;
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.45rem);
}

.commute-inline__detail {
  font-size: 0.74rem;
  line-height: 1.35;
}

#commute-card {
  min-width: 0;
  overflow-x: clip;
}

#commute-route {
  max-width: 100%;
  box-sizing: border-box;
}

/* Long route lines: same word-break behavior as other brief text */
#commute-card .commute-inline__route {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#commute-card > * {
  min-width: 0;
}

.weather-current-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  margin: 0.12rem 0 0;
}

.weather-current__main.metric {
  margin: 0;
}

.weather-current__feels {
  font-size: var(--type-meta);
  font-weight: var(--font-weight-regular);
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: nowrap;
}

.weather-inline .weather-desc {
  margin-top: 0.3rem;
  font-size: 0.76rem;
  line-height: 1.35;
}

.weather-card__top {
  flex-wrap: wrap;
}

.news-summary {
  margin: 0;
}

.tile-collapse-btn {
  --tile-collapse-size: 2rem;
  grid-column: -1;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: auto;
  max-width: min(7.25rem, 30vw);
  min-width: 2.75rem;
  min-height: var(--tile-collapse-size);
  height: auto;
  margin: 0;
  padding: 0.2rem 0.42rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-alt);
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1.15;
  font-size: clamp(0.58rem, 0.48rem + 0.35vw, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform var(--micro-tap-release-ms) var(--ease-micro-spring);
}