/* Today and its capture dialog share paint; retain the established layouts. */
body[data-page-route="today"] .main-content { padding-top: 0; }
.today-capture, #captureDialog { --capture-placeholder: #797379; }
.today-capture {
  --today-inline-inset: clamp(28px, 4vw, 64px);
  display: grid;
  gap: 0;
  min-width: 0;
}

.today-artwork {
  height: clamp(145px, 42vw, 320px);
  margin-inline: calc(-1 * var(--today-inline-inset));
  overflow: hidden;
}

.today-artwork img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--artwork-position-desktop, center);
}

/* A prepared sketch keeps its own irregular outline at every screen width. */
.today-artwork[data-artwork-presentation="sketch"] img {
  object-fit: contain;
  object-position: center;
}

:root[data-theme] .today-capture .home-note-composer textarea {
  height: var(--home-note-height, 74px);
  min-height: 50px;
  resize: none;
  overflow-y: hidden;
  padding: 12px 68px 12px 16px;
}

:root[data-theme] .today-capture .home-note-composer textarea,
:root[data-theme] #captureDialog .note-composer-field textarea {
  font-size: 16px;
  line-height: 24px;
  font-family: var(--sans);
  border: 1px solid #aacfc8;
  box-shadow: none;
  transform: none;
}

/* Give the main note field a little lift without changing its fill. */
:root[data-theme] .today-capture .home-note-composer textarea {
  border-color: #88b9b1;
  box-shadow: 0 2px 4px rgba(42, 140, 130, .04), 0 6px 18px rgba(42, 140, 130, .08);
}

:root[data-theme="dark"] .today-capture .home-note-composer textarea {
  border-color: #b7d8d1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 6px 18px rgba(0, 0, 0, .2);
}

:root[data-theme] .today-capture .home-note-composer textarea::placeholder,
:root[data-theme] #captureDialog .note-composer-field textarea::placeholder,
:root[data-theme] #captureDialog .voice-transcript-placeholder {
  color: var(--capture-placeholder);
  opacity: 1;
}

/* Center the empty prompt as one text block, including when it wraps. */
:root[data-theme] .today-capture .home-note-composer textarea::placeholder {
  color: transparent;
}

.today-capture .home-note-prompt {
  position: absolute;
  inset: 1px 69px 1px 17px;
  display: none;
  align-items: center;
  color: var(--capture-placeholder);
  font: 400 16px/24px var(--sans);
  text-align: left;
  pointer-events: none;
}

.today-capture textarea:placeholder-shown + .home-note-prompt {
  display: flex;
}

:root[data-theme] .today-capture .home-note-composer textarea:focus,
:root[data-theme] #captureDialog .note-composer-field textarea:focus {
  border-color: #2a8c82;
  box-shadow: 0 0 0 3px rgba(42, 140, 130, .14);
}

.today-capture .home-note-composer > button {
  right: 14px;
  top: calc(50% - 22px);
  bottom: auto;
}

:root[data-theme] .today-capture .home-note-composer > button,
:root[data-theme] .today-capture .home-note-composer > button:hover,
:root[data-theme] #captureDialog.note-composer-dialog .note-dictate-button,
:root[data-theme] #captureDialog .voice-listening-icon {
  width: 44px;
  height: 44px;
  background: transparent;
  color: #2a8c82;
  box-shadow: none;
  transform: none;
}

.today-capture .home-note-composer > button svg,
#captureDialog.note-composer-dialog .note-dictate-button svg,
#captureDialog .voice-listening-icon svg { width: 22px; height: 22px; }

:root[data-theme] .today-capture .home-note-composer > button:focus-visible,
:root[data-theme] #captureDialog.note-composer-dialog .note-dictate-button:focus-visible {
  outline: 2px solid #2a8c82;
  outline-offset: 2px;
}

:root[data-theme] #captureDialog .voice-transcript-card {
  border-color: #aacfc8;
  box-shadow: none;
}

:root[data-theme] #captureDialog .voice-transcript-card .live-transcript {
  font-family: var(--sans);
}

:root[data-theme] #captureDialog .voice-listening-heading .live-label { color: var(--forest); }
:root[data-theme] #captureDialog .waveform i { background: #2a8c82; }

:root[data-theme] #mobileCaptureButton.listening {
  background: #2a8c82;
  color: white;
  box-shadow: 0 5px 18px rgba(42, 140, 130, .2);
  animation: capture-voice-pulse 1.3s ease-in-out infinite;
}

@keyframes capture-voice-pulse {
  50% { box-shadow: 0 0 0 8px rgba(42, 140, 130, .18), 0 14px 35px rgba(42, 140, 130, .2); }
}

@media (prefers-reduced-motion: reduce) {
  :root[data-theme] #mobileCaptureButton.listening { animation: none; }
}

:root[data-theme="dark"] :is(.today-capture, #captureDialog) {
  --capture-placeholder: var(--faint);
}

.today-capture .home-note-meta { margin-top: 10px; }

@media (max-width: 800px) {
  .today-capture { --today-inline-inset: 16px; }
  .today-artwork img { object-position: var(--artwork-position-mobile, center); }
}

/* The Today composer starts compact and opens in place for writing. */
.home-note-form {
  min-width: 0;
  padding: clamp(16px, 3vw, 24px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--card);
  box-shadow: 0 8px 24px rgba(42, 90, 79, .07);
}
:root[data-theme] .today-capture .home-note-composer textarea {
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.home-note-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.home-note-accent { flex-shrink: 0; margin-top: 3px; color: #2a8c82; }
.home-note-heading h2 {
  margin: 0;
  color: var(--ink);
  font: 600 clamp(23px, 3vw, 30px)/1.15 var(--serif);
  letter-spacing: -.025em;
}
.home-note-heading p { margin: 6px 0 0; color: var(--muted); font: 400 14px/1.45 var(--sans); }
@media (max-width: 380px) {
  .home-note-heading { gap: 10px; }
  .home-note-accent { width: 18px; }
}
:root[data-theme] .home-note-form:is(:focus-within, [data-has-text="true"]) .home-note-composer textarea {
  height: var(--home-note-height, 146px);
  min-height: 50px;
}
.home-note-form:is(:focus-within, [data-has-text="true"]) .home-note-prompt {
  align-items: flex-start;
  padding-top: 11px;
}
/* Keep the hit area attached to the full field while its icon follows the
   first line. Expanding on focus must not move a button out from under a tap. */
:root[data-theme] .today-capture .home-note-form .home-note-composer > button {
  top: 0;
  height: 100%;
}
.today-capture .home-note-form:is(:focus-within, [data-has-text="true"]) .home-note-composer > button {
  align-items: start;
}
.today-capture .home-note-form:is(:focus-within, [data-has-text="true"]) .home-note-composer > button svg {
  margin-top: 14px;
}
.home-note-actions {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.home-note-form:is(:focus-within, [data-has-text="true"]) .home-note-actions { display: flex; }
.home-note-draft {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  min-width: 0;
  color: var(--faint);
  font: 400 12px/18px var(--sans);
}
.home-note-draft > button {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--forest);
  font: 400 12px/18px var(--sans);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.home-note-actions { flex-wrap: wrap; gap: 8px; }
.home-note-actions > .button { flex-shrink: 0; min-height: 44px; margin-left: auto; padding-inline: 12px; }
.home-note-draft [data-home-note-status] { min-width: 70px; }

/* Keep the same card and title while giving writing space to the note.
   The helper sentence returns after editing, including keyboard dismissal. */
.today-capture .home-note-form[data-writing="true"] { padding-block: 10px; }
.home-note-form[data-writing="true"] .home-note-heading { margin-bottom: 8px; }
.home-note-form[data-writing="true"] .home-note-heading p { display: none; }
.home-note-form[data-writing="true"] .home-note-actions { margin-top: 8px; }

/* Keyboard space changes only this in-flow textarea. The artwork, heading,
   card paint, and surrounding Today content keep their normal page layout. */
html.today-inline-keyboard { overflow-anchor: none; }
.today-inline-keyboard body[data-page-route="today"] .main-content {
  padding-bottom: calc(24px + var(--home-keyboard-room, 0px));
}
:root[data-theme] .today-capture .home-note-form[data-adaptive="true"] .home-note-composer textarea {
  height: var(--home-note-height, 146px);
  min-height: 50px;
  resize: none;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
@media (max-width: 350px) {
  .home-note-draft { gap: 8px; font-size: 11px; }
  .home-note-draft > button { font-size: 11px; }
  .home-note-draft [data-home-note-status] { min-width: 64px; }
  .home-note-actions > .button { gap: 6px; padding-inline: 10px; font-size: 13px; }
}