/* /today.html — three-pane home for the Goal-Driven Runtime (§4.10). */

.today-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) 6rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.today-header h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin: 0 0 0.3rem;
    line-height: 1.2;
}

.today-subtitle {
    color: var(--color-text-muted, rgba(248, 250, 252, 0.7));
    margin: 0 0 0.8rem;
    font-size: 0.95rem;
}

.today-pane {
    background: var(--color-surface-1, rgba(255, 255, 255, 0.04));
    border: 1px solid var(--color-border-subtle, rgba(148, 163, 184, 0.15));
    border-radius: 16px;
    padding: 1.1rem 1.2rem;
}

.today-pane h2 {
    margin: 0 0 0.8rem;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.today-pane-body {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.today-empty {
    color: var(--color-text-dim, rgba(248, 250, 252, 0.5));
    font-size: 0.9rem;
    padding: 0.4rem 0;
}

/* "Show all N" / "Show fewer" toggle — appended to a pane when the
 * unfiltered list exceeds PANE_CAP. Picks up the same cozy-palette
 * tokens as .today-card__action-btn so the visual rhythm matches. */
.today-pane-showall {
    align-self: flex-start;
    background: transparent;
    border: 1px dashed var(--color-border-subtle, rgba(148, 163, 184, 0.25));
    color: var(--color-text-dim, rgba(248, 250, 252, 0.7));
    font-size: 0.82rem;
    border-radius: 8px;
    padding: 0.35rem 0.8rem;
    margin-top: 0.2rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.today-pane-showall:hover {
    background: rgba(79, 172, 254, 0.06);
    border-color: rgba(79, 172, 254, 0.35);
    color: inherit;
}

.today-card {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.today-card h3 {
    font-size: 1rem;
    margin: 0;
    line-height: 1.3;
    /* Design review P1-2 — full-strength title so the Progress feed reads
       clearly against muted trace/meta text. */
    color: var(--fg-strong, #ffffff);
}

.today-card__trace {
    color: var(--color-text-dim, rgba(248, 250, 252, 0.55));
    font-size: 0.82rem;
}

.today-card__body {
    font-size: 0.88rem;
    line-height: 1.5;
}

.today-card__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.3rem;
}

.today-card__action-btn {
    background: transparent;
    border: 1px solid var(--color-border-subtle, rgba(148, 163, 184, 0.2));
    color: inherit;
    font-size: 0.85rem;
    border-radius: 8px;
    padding: 0.35rem 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.today-card__action-btn:hover {
    background: rgba(79, 172, 254, 0.08);
    border-color: rgba(79, 172, 254, 0.4);
}

.today-card__action-btn--primary {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.8), rgba(148, 121, 255, 0.8));
    color: #0b0f1a;
    border-color: transparent;
    font-weight: 600;
}

.today-card__goal {
    font-size: 0.78rem;
    color: var(--color-text-dim, rgba(248, 250, 252, 0.5));
    letter-spacing: 0.02em;
}

.today-card__meta {
    font-size: 0.78rem;
    color: var(--color-text-dim, rgba(248, 250, 252, 0.5));
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.today-decision-option {
    background: rgba(148, 121, 255, 0.08);
    border: 1px solid rgba(148, 121, 255, 0.25);
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    margin-bottom: 0.5rem;
}

/* "iSpirit drafted this" pill — surfaces the goal_task_outputs ↔ task
   linkage that was previously buried. Pill style + clickable target. */
.today-card__drafted-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    margin: 0.2rem 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(148, 121, 255, 0.95);
    background: rgba(148, 121, 255, 0.12);
    border: 1px solid rgba(148, 121, 255, 0.35);
    border-radius: 999px;
    text-decoration: none;
    transition: background 120ms ease, transform 120ms ease;
    width: max-content;
}
.today-card__drafted-pill:hover {
    background: rgba(148, 121, 255, 0.22);
    transform: translateY(-1px);
}

/* The way into the full result (owner 2026-09-02): a real button, not a pill.
   color-mix so the tint follows the theme accent (frontend pitfall #16). */
.today-card__result-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    margin: 0.35rem 0 0.2rem;
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text, #f8fafc);
    background: color-mix(in srgb, var(--accent-purple, #9479ff) 22%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-purple, #9479ff) 55%, transparent);
    border-radius: 8px;
    text-decoration: none;
    width: max-content;
    transition: background 120ms ease;
}
.today-card__result-btn:hover,
.today-card__result-btn:focus-visible {
    background: color-mix(in srgb, var(--accent-purple, #9479ff) 36%, transparent);
}
.today-card__preview-note {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: var(--color-text-dim, rgba(248, 250, 252, 0.55));
}
.today-card__drafted-pill:focus-visible {
    outline: 2px solid rgba(148, 121, 255, 0.7);
    outline-offset: 2px;
}

/* "Run nightly review now" button + status row in the today-embed header. */
.today-embed-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.today-embed-titles {
    flex: 1 1 auto;
    min-width: 0;
}
.today-embed-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 1;
    min-width: 0;
}
/* Below ~600px the title + actions stack vertically. The button goes full-
   width so it doesn't overflow the narrow viewport (390px iPhone audit). */
@media (max-width: 600px) {
    .today-embed-header {
        flex-direction: column;
        align-items: stretch;
    }
    .today-embed-actions {
        align-items: stretch;
        width: 100%;
    }
    .today-embed-actions #runNightlyNowBtn {
        width: 100%;
    }
    .run-nightly-status {
        text-align: left;
        max-width: 100%;
    }
}

/* Toast classes — extracted from inline style="" 2026-05-13 to comply with
   the project's "no new style='' attrs" rule (frontend/CLAUDE.md). */
.run-nightly-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 10px 18px;
    border-radius: 10px;
    z-index: 9999;
    background: #34d399;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    animation: run-nightly-toast-in 180ms ease-out both;
    opacity: 1;
    transition: opacity 480ms ease, transform 480ms ease;
}
.run-nightly-toast.is-leaving {
    opacity: 0;
    transform: translate(-50%, -8px);
}
@keyframes run-nightly-toast-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .run-nightly-toast { animation: none; transition: opacity 200ms ease; }
}
.run-nightly-toast--error { background: #ef4444; }
.run-nightly-status {
    font-size: 0.78rem;
    color: var(--color-text-dim, rgba(248, 250, 252, 0.55));
    min-height: 1em;
    text-align: right;
    max-width: 24rem;
}
.run-nightly-status.is-ok    { color: rgba(74, 222, 128, 0.95); }
.run-nightly-status.is-error { color: rgba(248, 113, 113, 0.95); }
.run-nightly-status.is-info  { color: rgba(148, 163, 184, 0.95); }
.run-nightly-status.is-pending {
    color: var(--color-text-dim, rgba(248, 250, 252, 0.55));
    font-style: italic;
}

.today-decision-option strong {
    display: block;
    margin-bottom: 0.3rem;
}

/* Pro/con lines on decision cards. Class-based (never inline in dashboard.js)
   so cozy can re-theme: the dark-mode mint/rose accents composite at
   1.64/2.18:1 on cozy cream — cozy gets darker earth tones (≥4.5:1). */
.today-decision-pros {
    font-size: 0.82rem;
    color: rgba(52, 211, 153, 0.9);
}
.today-decision-cons {
    font-size: 0.82rem;
    color: rgba(248, 113, 113, 0.85);
}
[data-ux-mode="cozy"] .today-decision-pros {
    color: #047857;
}
[data-ux-mode="cozy"] .today-decision-cons {
    color: #b91c1c;
}

.today-decision-option__pick {
    background: transparent;
    border: 1px solid rgba(52, 211, 153, 0.5);
    color: rgba(52, 211, 153, 1);
    padding: 0.3rem 0.8rem;
    font-size: 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 0.4rem;
}

.today-decision-option__pick:hover {
    background: rgba(52, 211, 153, 0.1);
}

@media (max-width: 640px) {
    .today-container {
        gap: 1.1rem;
    }
    .today-pane {
        padding: 0.9rem 1rem;
    }
    .today-card {
        padding: 0.75rem 0.85rem;
    }
}

/* Goal control strip CSS removed 2026-09-02 with #goalControlsPanel (OPEN_TASKS §142). */

/* Decision card — recommended answers (spec 2026-08-07).
   Every colour here is a token, never a literal: cozy mode re-themes them,
   and inline/literal colours are what produced the 1.64:1 failures in M10. */
.today-decision-option--recommended {
    border-color: var(--accent, #4a90d9);
    border-width: 2px;
}
.today-decision-option__head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
}
/* Badge: an accent TINT + accent border, never an accent FILL.
   A solid fill measured 2.42:1 (white on rgb(79,172,254)) — a WCAG AA failure
   at this 11.5px/600 size, and the M10 defect class all over again. Inheriting
   the card's text colour over a 15% tint keeps the ratio at whatever the theme
   already guarantees for body text, in BOTH standard and cozy, and color-mix
   means the tint re-themes with the token (purple -> gold in cozy) instead of
   staying cold. */
.today-decision-badge {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent, #4a90d9) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #4a90d9) 45%, transparent);
    color: inherit;
    white-space: nowrap;
}
.today-decision-summary { font-size: 0.88rem; }
.today-decision-why {
    font-size: 0.86rem;
    margin-top: 0.35rem;
    opacity: 0.9;
}
.today-decision-facts {
    margin: 0.5rem 0 0.75rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: var(--surface-2, rgba(127, 127, 127, 0.08));
}
.today-decision-facts__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    margin-bottom: 0.25rem;
}
.today-decision-facts ul { margin: 0; padding-left: 1.1rem; }
.today-decision-facts li { font-size: 0.86rem; margin: 0.15rem 0; }
.today-decision-alt__toggle {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    opacity: 0.85;
}
.today-decision-note {
    width: 100%;
    margin: 0.4rem 0;
    border-radius: 8px;
    padding: 0.5rem;
    font: inherit;
}
.today-decision-why--fallback { margin-top: 0.4rem; }

/* The decision's question + context, from task.description. For an unprepared
   decision this is the only substance on the card, so it must not read as a
   caption. */
.today-decision-question {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0.35rem 0 0.5rem;
    white-space: pre-line;
}
.today-decision-when {
    font-size: 0.78rem;
    opacity: 0.7;
    margin-bottom: 0.4rem;
}

/* The decision text box — the destination the answer buttons write into
   (clarification format, 2026-08-08). Always visible: hiding it behind a
   toggle hides the thing the answers are for. */
.today-decision-alt { background: transparent; }
.today-decision-alt__label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.25rem;
}
.today-decision-record { margin-top: 0.15rem; }

/* On-demand "prepare options" (2026-08-08) — matches the "Run with iSpirit"
   affordance digital cards already carry. */
.today-decision-prepare { align-self: flex-start; }

/* Original task title, shown under the plain-language line (2026-08-16
   starting-energy spec §3). The plain sentence is the heading; the user's own
   words stay visible beneath it so nothing they wrote is lost. */
.today-card__original-title {
    margin: 2px 0 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--fg-muted, #94a3b8);
}

/* Digital-card status chip (owner 2026-09-02): the pane lists held tasks and
   drafts awaiting review FIRST, so each card says what state it is in instead
   of the pane heading implying "finished". Tint + border, never a fill —
   same reasoning as .today-decision-badge (a solid fill failed AA). */
.today-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    margin: 0 0 0.35rem;
    color: inherit;
    background: color-mix(in srgb, var(--accent, #4a90d9) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent, #4a90d9) 40%, transparent);
}
.today-card__status--needs-you,
.today-card__status--review {
    background: color-mix(in srgb, var(--warn, #f5a524) 16%, transparent);
    border-color: color-mix(in srgb, var(--warn, #f5a524) 45%, transparent);
}
.today-card__status--done {
    background: color-mix(in srgb, var(--success, #34d399) 14%, transparent);
    border-color: color-mix(in srgb, var(--success, #34d399) 40%, transparent);
}

/* Decision options collapse (owner 2026-09-02). Each option keeps its name,
   badge and summary; pros, cons and the fine print live in __details and open
   per option. The two live decisions were 4,154 / 3,706 px tall with everything
   printed, and the grid stretched the other two panes to match. */
.today-decision-summary.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.today-decision-option--open .today-decision-summary.is-clamped {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}
.today-decision-option__details { margin-top: 0.35rem; }
.today-decision-option__toggle { margin-top: 0.35rem; }
.today-decision-facts__toggle {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 24px;
}
.today-decision-facts__toggle::before { content: "▸"; font-size: 0.8em; }
.today-decision-facts__toggle[aria-expanded="true"]::before { content: "▾"; }
.today-decision-facts ul { margin: 0.3rem 0 0; padding-left: 1.1rem; }

/* Tap-target floor (WCAG 2.5.8): the habit / mission / guide links measured
   19–21 px tall on a 390 px phone (2026-09-02). */
.execution-page .goal-card-title-link,
.execution-page .attr-goal-bar__text.habit-more,
.execution-page .habits-footer-link,
.guide-tooltip .guide-link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
}

/* Result review loop (spec 2026-09-04 §3.9): readiness chips + the read / held lines */
.today-card__status--ready { color: var(--accent-green, #34d399); border-color: color-mix(in srgb, var(--accent-green, #34d399) 50%, transparent); }
.today-card__status--provisional { color: var(--accent-gold, #fbbf24); border-color: color-mix(in srgb, var(--accent-gold, #fbbf24) 50%, transparent); }
.today-card__status--weak { color: var(--accent-rose, #fb7185); border-color: color-mix(in srgb, var(--accent-rose, #fb7185) 50%, transparent); }
.today-card__read, .today-card__held { font-size: .88rem; line-height: 1.45; opacity: .92; overflow-wrap: anywhere; margin-top: .25rem; }
html[data-ux-mode="cozy"] .today-card__status--ready { color: #1f6b3a; border-color: #1f6b3a; }
html[data-ux-mode="cozy"] .today-card__status--provisional { color: #7a5a12; border-color: #7a5a12; }
html[data-ux-mode="cozy"] .today-card__status--weak { color: #8a2c3b; border-color: #8a2c3b; }