/* Today (/) and the decision component (_decision_slot.html: the card, an open question's line,
   the "Decided" line and the draft under it), which the project page and the Ask panel show
   too, and the decide page (decide.html). Built on style.css: tokens and the shared components
   only. Reading text at most --measure; one column at 700px and below. */

/* --- the page ------------------------------------------------------------------- */
.today { max-width: 760px; margin: 0 auto; }
.today-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); margin-bottom: var(--s5); }
.today-date { margin: 0; font: 600 var(--t-h1)/1.2 var(--serif); }
.today-who { font-size: var(--t-lead); font-weight: 600; color: var(--muted); }
.today-para { padding: var(--s5) 0; border-top: 1px solid var(--line); }
.today-para:first-of-type { border-top: 0; padding-top: 0; }
.today-para > .decision, .today-para > .question, .today-para > .recorded { margin-top: var(--s4); }
.today > .decision, .today > .question, .today > .recorded { margin-top: var(--s5); }
.today-nudges { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s3) 0 0; }
.today-nudges > .nudged { flex-basis: 100%; min-width: 0; }
.today-empty { font: var(--t-lead)/1.5 var(--serif); color: var(--muted); }

/* the agent's sentences (_prose.html): nearly every phrase is evidence, so its links are quiet: a
   thin dotted rule, the accent on hover or focus; the bold headline has no rule at rest */
.prose { max-width: var(--measure); margin: 0; font: var(--t-lead)/1.6 var(--serif); }
.prose b { font-weight: 600; }
:is(.prose, .decision-text) a.ev { color: inherit; text-decoration: underline dotted var(--rule); text-decoration-thickness: 1px; text-underline-offset: 5px; }
:is(.prose, .decision-text) b a.ev { text-decoration-color: transparent; }
:is(.prose, .decision-text) a.ev:is(:hover, :focus-visible) { color: var(--acc); text-decoration-color: var(--acc); }

/* --- the agenda under the brief: one line per item, only days that have something --- */
.agenda { margin-top: var(--s6); }
.agenda-day { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line); }
.agenda-date { margin: 0; font: 600 var(--t-body)/1.5 var(--ui); }
.agenda-today { font-weight: 400; color: var(--muted); }
.agenda-items { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.agenda-item { display: grid; grid-template-columns: 5.5rem 9rem minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.agenda-kind { font-weight: 600; }
.agenda-item.dec .agenda-kind { color: var(--amber); }
.agenda-item.ms .agenda-kind { color: var(--acc); }
.agenda-item.task .agenda-kind { color: var(--green); }
.agenda-proj { font-weight: 600; overflow-wrap: anywhere; }
.agenda-what { min-width: 0; }
.agenda-who { color: var(--muted); }

/* --- the decision card --------------------------------------------------------------- */
.decision { border-left: 3px solid var(--amber); }
.decision-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s4); }
.decision-title { margin: 0; font: 600 var(--t-h2)/1.25 var(--ui); }
.decision-when { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: 0; color: var(--muted); }
.decision-when .late { color: var(--red); font-weight: 600; }
.decision-text { max-width: var(--measure); margin: var(--s3) 0 0; font: var(--t-lead)/1.6 var(--serif); }
.decision .flash { margin: var(--s3) 0 0; }

.decision-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s3); margin: var(--s4) 0 0; }
/* an option is a button: ink, semibold, of equal weight to the other (neither is primary); the
   consequence the record states (when it has one) above the label, in the same weight */
.option { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--s1); min-height: 48px; padding: var(--s3) var(--s4); border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: 600 var(--t-body)/1.35 var(--ui); text-align: left; cursor: pointer; box-shadow: var(--shadow); }
.option:hover { border-color: var(--acc); background: var(--acc-soft); }
.option:focus-visible { border-color: var(--acc); outline: 2px solid var(--acc); outline-offset: 2px; }
.option:active { background: var(--acc-soft); box-shadow: none; }
.option-lead, .option-label { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.option-delta { margin-left: var(--s1); padding: 0 var(--s1); border-radius: var(--r-sm); background: var(--soft); color: var(--ink); font-size: var(--t-meta); font-weight: 600; white-space: nowrap; vertical-align: 1px; }

.decision-waits { margin-top: var(--s5); }
.wait { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); }
.wait-what { min-width: 0; flex: 1 1 20rem; }
.wait-due { color: var(--muted); white-space: nowrap; }
.wait-due.late { color: var(--red); font-weight: 600; }

.decision-evidence { margin-top: var(--s4); }
.decision-quote { margin: var(--s3) 0; padding: 0 0 0 var(--s4); border-left: 3px solid var(--line); font-style: italic; }
.decision-quote a.ev { font-style: normal; }

/* quiet controls: text buttons that open a short form */
.decision-more { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s2) var(--s5); margin-top: var(--s4); padding-top: var(--s3); border-top: 1px solid var(--line); }
.btn-text { padding: 0; border: 0; background: none; color: var(--acc); font: 600 var(--t-body)/1.5 var(--ui); cursor: pointer; }
.btn-text:hover { text-decoration: underline; }
.disclose > summary { list-style: none; }
.disclose > summary::-webkit-details-marker { display: none; }
.disclose[open] { flex-basis: 100%; }
.decision-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); margin-top: var(--s3); }
.decision-form label { display: flex; flex-direction: column; gap: var(--s1); color: var(--muted); }
.decision-form .field { min-width: 14rem; color: var(--ink); }
.optional { font-weight: 400; }

/* --- an open question: one line ----------------------------------------------------- */
.question { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.question-line { margin: 0; }
.question-tag { color: var(--muted); }
.question .disclose { margin-top: var(--s1); }

/* --- after a change: one line, with Undo ------------------------------------------------ */
.recorded { padding: var(--s3) var(--s4); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--r-lg); background: var(--green-soft); }
.recorded-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin: 0; }
.wait > .nudged { flex-basis: 100%; }
.nudged { padding: var(--s3) var(--s4); border: 1px solid var(--line); border-left: 3px solid var(--acc); border-radius: var(--r-lg); background: var(--paper); }
.nudged > .flash { margin: 0; }

/* --- the draft under a result: To, Subject, the body as sent, Open in Outlook ------------ */
.draft { max-width: var(--measure); margin-top: var(--s3); padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); color: var(--ink); }
.draft-head { display: grid; gap: var(--s1); margin: 0 0 var(--s3); }
.draft-head > div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
.draft-head dt { color: var(--muted); }
.draft-head dd { margin: 0; overflow-wrap: anywhere; }
.draft-addr { color: var(--muted); }
.draft-body { padding-top: var(--s3); border-top: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.draft-send { margin: var(--s4) 0 0; }

/* --- the decide page (a decide button in the daily email) ------------------------------ */
.decide { max-width: 640px; margin: 0 auto; }
.decide-title { margin: 0 0 var(--s3); font: 600 var(--t-h1)/1.2 var(--ui); }
.decide-question { max-width: var(--measure); margin: 0 0 var(--s5); font: var(--t-lead)/1.6 var(--serif); }
.decide-choice { border-left: 3px solid var(--amber); }
.decide-option { margin: 0; font-size: var(--t-lead); font-weight: 600; }
.decide-consequence { margin: var(--s2) 0 0; }
.decide-confirm { margin: var(--s4) 0 0; }
.decide-confirm .btn { min-width: 10rem; }
.decide-done { margin: 0; font-size: var(--t-lead); }
.decide-by { color: var(--muted); }
.decide-out { margin: var(--s5) 0 0; }
.decide-out a { color: var(--muted); }

/* --- phone width ----------------------------------------------------------------------- */
@media (max-width: 700px) {
  .today-date { font-size: var(--t-h2); }
  .agenda-day { grid-template-columns: 1fr; gap: var(--s2); }
  .agenda-item { grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--s2); }
  .agenda-what { grid-column: 1 / -1; }
  .decision-options { grid-template-columns: 1fr; }
  .decision-form, .decision-form label, .decision-form .field { width: 100%; min-width: 0; }
  .draft-head > div { grid-template-columns: 1fr; gap: 0; }
  .decide-title { font-size: var(--t-h2); }
  .decide-confirm .btn, .draft-send .btn { width: 100%; }
}

@media print {
  .decision-options, .decision-more, .today-nudges { display: none !important; }
  .decision, .agenda { break-inside: avoid; box-shadow: none; }
}