/*
 * KPRATIVE Mini App v1.1 — Today screen (TASK 3/N).
 * Geometry from get_design_context on Today RU Light (126:3615), the
 * shared EnergyMeter (97:1082) and TodayTaskRow (97:1094) instances
 * placed inside it, and the Today States board (432:3/432:17/432:32).
 * Colors exclusively via tokens.css custom properties.
 */

.kp-today {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 12px;
}

/* ---- Hero (126:3617 instance of 97:1076): image + 48%-opacity dark
   overlay, no text drawn on top in the canonical Today composition. ---- */
.kp-hero {
  position: relative;
  width: 100%;
  height: 214px;
  border-radius: 24px;
  overflow: hidden;
  background: var(--kp-surface-raised);
}
.kp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-hero__overlay { position: absolute; inset: 0; background: var(--kp-overlay-photo); opacity: 0.48; }

/* ---- EnergyMeter (97:1082 / 126:3618 instance): title + guide line +
   a STATIC track. The canonical component has no fill/progress child --
   confirmed via get_metadata on both the instance and the base symbol --
   so no proportional bar is drawn here; the numbers alone carry the
   truth (never clamped, per ENERGY-UX-001). ---- */
.kp-energy {
  background: var(--kp-surface-raised);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kp-energy__title { margin: 0; color: var(--kp-text-primary); }
.kp-energy__guide { margin: 0; color: var(--kp-text-secondary); }
.kp-energy__track { height: 8px; border-radius: 8px; background: var(--kp-border-subtle); width: 100%; }

/* Current-day self-report: an explicit input, visually contained within the
   existing EnergyMeter rather than a second planning or recommendation card. */
.kp-energy-report { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.kp-energy-report__title, .kp-energy-report__current { margin: 0; }
.kp-energy-report__title { color: var(--kp-text-primary); }
.kp-energy-report__current { color: var(--kp-text-secondary); }
.kp-energy-report__choices { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-energy-report__choice, .kp-energy-report__clear {
  min-height: 34px;
  border: 1px solid var(--kp-border-subtle);
  border-radius: 10px;
  padding: 6px 10px;
  background: transparent;
  color: var(--kp-text-primary);
  cursor: pointer;
}
.kp-energy-report__choice[aria-pressed="true"] { border-color: var(--kp-accent-primary); background: var(--kp-accent-primary); color: var(--kp-background); }
.kp-energy-report__clear[aria-pressed="true"] { color: var(--kp-text-secondary); }
.kp-energy-report__choice:focus-visible, .kp-energy-report__clear:focus-visible { outline: 2px solid var(--kp-accent-primary); outline-offset: 2px; }
.kp-energy-report__choice[aria-busy="true"], .kp-energy-report__clear[aria-busy="true"] { opacity: 0.6; }
.kp-energy-report__error { margin: 0; color: var(--kp-recovery); }

/* ---- Recovery guidance (DR-101 open deviation — see design defect log):
   no literal Figma composition is bound into the canonical Today tree
   for this; the Today States board (432:17 "Today / recovery") documents
   the SEMANTICS only (quiet capacity guidance, never red/danger — guide
   §26). Reuses the exact same neutral surface-raised card language as
   EnergyMeter/QuickCapture/Checkout, distinguished only by a small
   recovery-toned dot, never a colored background/border. ---- */
.kp-recovery {
  background: var(--kp-surface-raised);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.kp-recovery__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--kp-recovery); margin-top: 6px; }
.kp-recovery__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kp-recovery__title { margin: 0; color: var(--kp-text-primary); }
.kp-recovery__text { margin: 0; color: var(--kp-text-secondary); }
/* Warning is the same neutral card, no red/orange -- only the dot's own
   token differs, matching the overdraft variant's "never a colored
   background" rule from the design defect log above. */
.kp-recovery--warning .kp-recovery__dot { background: var(--kp-text-secondary); }

/* ---- V2-MINIAPP-DAILY-LOOP-PARITY-001: Daily Loop status + Morning
   Plan draft/confirm/edit + Replan -- same neutral surface-raised card
   language as Recovery/Focus/QuickCapture above, no new visual system. ---- */
.kp-daily-loop {
  background: var(--kp-surface-raised);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kp-daily-loop__status { margin: 0; color: var(--kp-text-primary); }
.kp-daily-loop__memory-note { margin: 0; color: var(--kp-text-secondary); }
.kp-daily-loop__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kp-daily-loop__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kp-daily-loop__item-actions { display: flex; gap: 4px; flex: none; }
.kp-daily-loop__item-btn {
  background: none;
  border: 1px solid var(--kp-border-subtle);
  border-radius: 8px;
  width: 28px;
  height: 28px;
  color: var(--kp-text-primary);
}
.kp-daily-loop__item-btn:disabled { opacity: 0.35; }
.kp-daily-loop__replan-result { margin: 0; color: var(--kp-text-secondary); }

/* ---- Focus-active summary (no Figma node — disclosed deviation, DR-102):
   only rendered while current_focus is truthy; same card language again. ---- */
.kp-focus {
  background: var(--kp-surface-raised);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kp-focus__eyebrow { margin: 0; color: var(--kp-text-secondary); }
.kp-focus__title { margin: 0; color: var(--kp-text-primary); }
.kp-focus__meta { margin: 0; color: var(--kp-text-secondary); }
.kp-focus__done {
  align-self: flex-start;
  margin-top: 8px;
  border: none;
  border-radius: 12px;
  padding: 8px 16px;
  background: var(--kp-accent-primary);
  color: var(--kp-background);
  cursor: pointer;
}
.kp-focus__done[aria-busy="true"] { opacity: 0.6; }

/* ---- V2-PROACTIVE-FOCUS-001: the advisory "focus now" card. Same neutral
   surface-raised card language as Focus/Recovery above -- one primary action
   only where the backend's own semantics allow it (a Today task in
   ready_to_start), never a new visual system. ---- */
.kp-focusnow {
  background: var(--kp-surface-raised);
  border-radius: 18px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kp-focusnow__eyebrow { margin: 0; color: var(--kp-text-secondary); }
.kp-focusnow__title { margin: 0; color: var(--kp-text-primary); }
.kp-focusnow__meta { margin: 0; color: var(--kp-text-secondary); }
.kp-focusnow__note { margin: 0; color: var(--kp-text-secondary); }
.kp-focusnow__why { margin: 0; color: var(--kp-text-secondary); }
.kp-focusnow__body { margin: 0; color: var(--kp-text-secondary); }
.kp-focusnow__actions, .kp-focusnow__slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.kp-focusnow__action {
  border: 1px solid var(--kp-border-subtle);
  border-radius: 12px;
  padding: 8px 14px;
  background: none;
  color: var(--kp-text-primary);
  cursor: pointer;
}
.kp-focusnow__action--primary { border: none; background: var(--kp-accent-primary); color: var(--kp-background); }
.kp-focusnow__action[aria-busy="true"] { opacity: 0.6; }
.kp-focusnow__error { margin: 8px 0 0; color: var(--kp-text-secondary); }

/* ---- Today task list (126:3619 "Today tasks" + 126:3620 label) ---- */
.kp-today-list__heading { margin: 0; color: var(--kp-text-secondary); }
.kp-today-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

/* TodayTaskRow (97:1094 / 126:3621 instance) has NO background/border in
   the canonical component -- it sits directly on the screen background,
   separated only by padding. Confirmed via get_metadata: no bg-color
   class on the row container, unlike EnergyMeter/QuickCapture/Checkout. */
.kp-today-row {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 18px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Pressed/focus feedback -- Figma defines no interaction state for this
   row (it has no button/sheet affordance at all); reuses the same
   surface-raised tint every other interactive surface in this file
   already uses for its pressed state (documented deviation, not a new
   invented color). */
.kp-today-row:active { background: var(--kp-surface-raised); }
.kp-today-row:focus-visible { outline: 2px solid var(--kp-accent-primary); outline-offset: -2px; }
.kp-today-row__title { margin: 0; color: var(--kp-text-primary); padding-right: 20px; overflow-wrap: break-word; }
.kp-today-row__meta { margin: 0; color: var(--kp-text-secondary); }
/* PRIORITY-UI-ENERGY-AUTO-001: .kp-today-row__marker (the per-row energy
   dot) is retired -- priority is the ONLY task-color system now. */
.kp-today-row__priority {
  position: absolute;
  left: 8px;
  top: 18px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.kp-today-row__priority--P1 { background: var(--kp-priority-1); }
.kp-today-row__priority--P2 { background: var(--kp-priority-2); }
.kp-today-row__priority--P3 { background: var(--kp-priority-3); }
/* P0 needs a visible "!" glyph, so it gets a larger neutral chip than the
   plain P1/2/3 dot -- same component language (same corner, same shape
   family), just sized to actually show its mark. */
.kp-today-row__priority--P0 {
  left: 4px;
  top: 14px;
  width: 16px;
  height: 16px;
  background: var(--kp-priority-0);
  border: 1px solid var(--kp-priority-0-border);
  color: var(--kp-priority-0-mark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", Arial, sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
}

.kp-today-empty { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.kp-today-empty__title { margin: 0; color: var(--kp-text-primary); }
.kp-today-empty__body { margin: 0; color: var(--kp-text-secondary); }

/* QuickCapture (97:1088) / Checkout row geometry now lives in shell.css
   as the shared .kp-action-row primitive (guide: one shared component,
   not a per-screen clone) -- reused here and by tasks.js. */

/* ---- Loading / error (first-load) ---- */
.kp-today-loading { padding: 14px 16px; color: var(--kp-text-secondary); }
.kp-today-error { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.kp-today-error__title { margin: 0; color: var(--kp-text-primary); }
.kp-today-error__detail { margin: 0; color: var(--kp-text-secondary); }
.kp-today-error__retry {
  border: 1px solid var(--kp-border-subtle);
  border-radius: 12px;
  padding: 8px 16px;
  background: transparent;
  color: var(--kp-text-primary);
  cursor: pointer;
}

/* Background-refresh failure banner -- data already rendered stays
   rendered; this never replaces it (REFRESH BEHAVIOR / fail-closed). */
.kp-today-banner {
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--kp-surface-raised);
  color: var(--kp-recovery);
  cursor: pointer;
}

/* =====================================================================
   Sheets -- shared structural pattern reused (visually re-tokenized)
   from design/quiet-route/prototype/styles.css .sheet/.sheet__panel;
   no Figma node models an interior task-action/capture/checkout sheet,
   so this is a disclosed, minimal, token-consistent deviation (DR-103),
   not a literal Figma composition. Sheet CONTENT lives inside the same
   .kp-screen[data-route="today"] element so shell.js hiding that screen
   also hides any open sheet -- no orphaned overlay bug (see shell.css
   [hidden]-cascade note from TASK 2/N).
   ===================================================================== */
.kp-sheet[hidden] { display: none; }
.kp-sheet { position: fixed; inset: 0; z-index: 50; }
.kp-sheet__backdrop { position: absolute; inset: 0; background: var(--kp-overlay-photo); opacity: 0.5; border: none; padding: 0; cursor: pointer; }
/* TASK 13/N UI HOTFIX #2: a real Telegram WebView showed the sheet
   vertically truncated with the global BottomNav visibly overlapping its
   lower content -- a flat 82vh doesn't know about Telegram's own chrome,
   so it can size the panel against a viewport that doesn't match what's
   actually visible. Fixed on two fronts:
   1. max-height now derives from --app-viewport-height (telegram-
      adapter.js's live webApp.viewportHeight -- the CURRENT visible
      height, reactive to the keyboard opening/closing), falling back to
      100vh outside Telegram (local/desktop dev). Capped at 88vh per the
      "near-full-height when content requires it" target; never a fixed
      px value.
   2. The BottomNav is a first-class modal participant, not an
      afterthought: html.kp-sheet-open (toggled by sheet.js) hides and
      disables it outright (Option B -- "sheet becomes modal and
      covers/disables BottomNav while open"), so there is never an
      ambiguous state where nav and sheet content coexist in the same
      screen region. See shell.css for that rule and the matching
      .kp-app-viewport background-scroll lock. */
.kp-sheet__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(88vh, calc(var(--app-viewport-height, 100vh) - env(safe-area-inset-top, 0px) - 16px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding: 12px 20px calc(24px + env(safe-area-inset-bottom, 0px)) 20px;
  border-radius: 24px 24px 0 0;
  background: var(--kp-surface-raised);
  color: var(--kp-text-primary);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kp-sheet__handle { width: 36px; height: 4px; margin: 0 auto 4px; border-radius: 99px; background: var(--kp-border-subtle); flex: none; }
/* CONTEXTUAL-MENUS-001: title + the Task's own contextual kebab on one row.
   The title keeps the flexible width (min-width: 0 so a long title can never
   push the kebab out of the padded panel), the kebab is a fixed 36px touch
   target -- visually secondary to the title, never overlapping Close (which
   keeps its own row above) or the drag handle. */
.kp-sheet__task-head { display: flex; align-items: flex-start; gap: 8px; }
.kp-sheet__task-head .kp-sheet__title { flex: 1 1 auto; min-width: 0; }
.kp-sheet__title { margin: 0; color: var(--kp-text-primary); }
.kp-sheet__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.kp-sheet__row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* CALENDAR-MINIAPP-EVENT-MUTATIONS-001 width regression, defensive
   secondary hardening (the proven root cause is the font-size fix
   above -- this did not reproduce any actual overflow in measurement,
   but is still correct practice and fixes a real visual asymmetry: the
   Event form's paired time fields, wrapped in a plain <div> each (never
   a bare <button>, which every other .kp-sheet__row-actions usage in
   this app already uses -- this selector cannot affect those), default
   to their own content's min-width instead of sharing the row evenly).
   Button rows are untouched by this selector. */
.kp-sheet__row-actions > div { flex: 1 1 0; min-width: 0; }
/* CALENDAR-MINIAPP-EVENT-MUTATIONS-001 / width regression: the Event
   create/edit forms pair a date + time field inside one .kp-sheet__row-
   actions row, each wrapped in a plain <div> (button rows use bare
   <button> children instead -- this selector never touches those). A
   flex item's default min-width is "auto" (its own content's min size,
   never smaller), so a native date/time input's own intrinsic rendering
   width -- often 110-150px in WebKit/iOS, regardless of this file's own
   `width:100%` on the input itself, since that percentage can only
   shrink the input BELOW the item's min-width once the item itself is
   allowed to shrink -- could hold the row (and therefore the sheet
   panel around it) wider than a narrow phone viewport instead of
   wrapping to two lines. min-width:0 is what actually lets flex-wrap
   and the input's own width:100% take effect below that content floor;
   flex:1 1 0 shares the row evenly instead of sizing each to content. */
.kp-sheet button.kp-sheet__action {
  border: 1px solid var(--kp-border-subtle);
  border-radius: 12px;
  padding: 10px 14px;
  background: var(--kp-surface);
  color: var(--kp-text-primary);
  cursor: pointer;
  text-align: left;
}
.kp-sheet button.kp-sheet__action[aria-busy="true"] { opacity: 0.6; }
.kp-sheet button.kp-sheet__action--primary { background: var(--kp-accent-primary); color: var(--kp-background); border-color: transparent; }
.kp-sheet button.kp-sheet__action--quiet { border-color: transparent; background: transparent; color: var(--kp-text-secondary); }
/* PRIORITY-UI-ENERGY-AUTO-001: .kp-sheet__energy-picker (the manual 1/2/3
   task-energy picker) is retired along with the JS that rendered it --
   Task Load is Planner-inferred now, never a manual sheet control. */
.kp-sheet__hint { margin: 0; color: var(--kp-text-secondary); }
.kp-sheet__error { margin: 0; color: var(--kp-recovery); }
.kp-sheet__list { margin: 0; padding-left: 18px; color: var(--kp-text-secondary); font-size: 13px; }
.kp-sheet__list li { margin: 2px 0; }
.kp-sheet textarea, .kp-sheet input[type="text"], .kp-sheet input[type="date"], .kp-sheet input[type="time"], .kp-sheet input[type="number"] {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--kp-border-subtle);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--kp-surface);
  color: var(--kp-text-primary);
  font-family: inherit;
  /* CALENDAR-MINIAPP-EVENT-MUTATIONS-001 width regression, most likely
     root cause: iOS Safari/WebKit (including Telegram's own WKWebView)
     auto-zooms the whole page on focusing any form control whose
     COMPUTED font-size is below 16px -- a native accessibility behavior,
     not a bug in iOS, and this app's own viewport meta tag has no
     maximum-scale to suppress it (disabling zoom app-wide would be the
     wrong fix anyway -- WCAG 1.4.4 requires zoom to keep working).
     14px was already the pre-existing value here (capture-sheet.js's
     own quick-add textarea, predating this ticket) -- it simply never
     surfaced as a visible problem with only one lightly-used textarea in
     the whole app. The Event create/edit forms this ticket adds put six
     of these inputs in front of the user in quick succession, each one
     re-triggering the same focus-zoom/un-zoom cycle -- what production
     actually saw as "the Calendar screen becomes wider than the
     viewport" is that zoom never being reset by the WebView, not any
     element genuinely overflowing its container (confirmed: scrollWidth
     never exceeds clientWidth at 320-430px in either Chromium or WebKit
     for every state this ticket lists). >=16px is the standard, narrow
     fix -- it removes the TRIGGER for the browser's own zoom rather than
     fighting its effect after the fact. */
  font-size: 16px;
}
/* QUICK-CREATE-DATE-WIDTH-001: native WebKit selects are not covered by the
   generic input rule above.  Pin both date controls to the same content box
   as the task description, so choosing a custom date cannot widen the sheet
   beyond a narrow Telegram WebApp viewport. */
.kp-sheet__section > .kp-capture-control {
  display: block;
  width: 100% !important;
  inline-size: 100% !important;
  max-width: 100% !important;
  max-inline-size: 100% !important;
  min-width: 0 !important;
  min-inline-size: 0 !important;
  align-self: stretch;
  margin-inline: 0;
  box-sizing: border-box;
}
/* iOS WebKit lets a naked native date input paint outside its authored box.
   The frame is the visible field, shares the textarea's exact dimensions and
   clips the native control to those dimensions without changing its picker. */
.kp-sheet__section > .kp-capture-date-frame {
  flex: 0 0 48px;
  height: 48px;
  min-height: 48px;
  margin-block: 0;
  overflow: hidden;
  border: 1px solid var(--kp-border-subtle);
  border-radius: 12px;
  background: var(--kp-surface);
}
.kp-capture-date-frame > input[type="date"] {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--kp-text-primary);
  font: inherit;
  font-size: 16px;
}
.kp-capture-date-frame:focus-within { outline: 2px solid var(--kp-accent-primary); outline-offset: 2px; }
/* The authored width rule above must never override HTML's hidden state. */
.kp-sheet__section > #sheet-capture-custom-date-frame[hidden] { display: none !important; }
.kp-sheet textarea { min-height: 88px; resize: vertical; }
/* CALENDAR-CREATE-ENTRYPOINT-001: label above each field in the Event/
   Task create forms -- a plain block hint, same visual weight as
   .kp-sheet__hint already uses elsewhere, just associated via <label
   for> for accessibility rather than being purely decorative text. */
.kp-sheet label.kp-sheet__hint { display: block; margin-top: 4px; }
.kp-sheet label.kp-sheet__hint:first-child { margin-top: 0; }
.kp-sheet__close {
  align-self: flex-end;
  border: none;
  background: transparent;
  color: var(--kp-text-secondary);
  cursor: pointer;
  padding: 4px 8px;
}
.kp-checkout-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--kp-border-subtle); }
.kp-checkout-item:first-child { border-top: none; }
.kp-checkout-item__title { margin: 0; color: var(--kp-text-primary); }

/* CONTEXTUAL-MENUS-001: the visible "primary action cluster" (Find time /
   Add to Today / Cancel task) and the compact secondary rows are gone -- those
   controls are menu items now, so the width-tuning rules that existed purely
   to keep that cluster horizontal at 375/390/393/430 are removed with them.
   The sheet body is content-only: title+⋯, description, estimate/learned
   duration, energy. */
.kp-sheet__row-actions--compact > .kp-sheet__action {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}