/* Today — Step 4a. Uses the app tokens from style.css; phone-first (390px). */

.today {
  max-width: 44rem;
  margin: 0 auto;
}

.today-status {
  padding: var(--space-8) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  text-align: center;
}
.today-status-err { color: var(--color-text); }

/* ---------- Header ---------- */
.today-head { margin-bottom: var(--space-8); }
.today-kicker {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.today-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-2xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.today-meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.today-past {
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.today-past a, .today-state-link a { color: var(--color-primary); }

/* ---------- Sections ---------- */
.today-section { margin: 0 0 var(--space-10); }
.today-section-title {
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}
.today-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.today-intro {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.today-intro + .today-list + .today-intro { margin-top: var(--space-5); }

/* ---------- Story cards ---------- */
.today-story {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  min-width: 0;
}
.today-story-headline {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-lg);
  line-height: 1.25;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.today-tag {
  display: inline-block;
  vertical-align: middle;
  padding: 1px 8px;
  border: 1px solid color-mix(in oklab, var(--color-accent-2) 50%, transparent);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-2);
}
.today-story-summary, .today-story-why {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.today-story-why { color: var(--color-text-muted); font-size: var(--text-sm); }
.today-story-why strong { color: var(--color-text); font-weight: 600; }

/* Read deeper: the openable source, as a large tap target. */
.today-deeper {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px var(--space-3);
  align-items: baseline;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-primary-highlight);
  border: 1px solid color-mix(in oklab, var(--color-primary) 35%, transparent);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color .15s ease;
}
.today-deeper:hover, .today-deeper:focus-visible { border-color: var(--color-primary); }
.today-deeper-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.today-deeper-outlet { font-weight: 600; font-size: var(--text-sm); }
.today-deeper-title {
  grid-column: 1 / -1;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.today-also-sources, .today-listen {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.today-label { color: var(--color-text); font-weight: 600; }
.today-src, .today-ep {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
  text-underline-offset: 3px;
  padding: 4px 0;           /* taller tap area without changing line rhythm much */
}
.today-src:hover, .today-ep:hover { text-decoration-color: var(--color-primary); }
.today-pw, .today-dur { color: var(--color-text-faint); }

/* ---------- Lists (Also in the news, Commute) ---------- */
.today-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}
.today-list li {
  padding-left: var(--space-4);
  position: relative;
  font-size: var(--text-sm);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.today-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.7em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-border);
}

/* ---------- Step 4c: editions, Update line, why-this, feedback ---------- */
.today-switch {
  display: inline-flex;
  gap: 2px;
  margin: 0 0 var(--space-6);
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-surface);
}
.today-switch-btn {
  min-height: 36px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font: 500 var(--text-sm) var(--font-body);
  cursor: pointer;
}
.today-switch-btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-bg); }
.today-tag-update {
  border-color: color-mix(in oklab, var(--color-primary) 55%, transparent);
  color: var(--color-primary);
}
.today-story-update {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--color-primary);
  background: var(--color-primary-highlight);
  font-size: var(--text-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.today-story-update strong { font-weight: 600; }
.today-story-whythis {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}
.today-fb { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.today-fb-btn, .today-missed-open, .today-missed-send, .today-missed-cancel, .today-missed-again {
  min-height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-muted);
  font: 500 var(--text-xs) var(--font-body);
  cursor: pointer;
}
.today-fb-btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-highlight);
}
.today-fb-btn:disabled { opacity: .6; }
.today-missed { margin: 0 0 var(--space-6); }
.today-missed-form { display: grid; gap: var(--space-2); }
.today-missed-label { font-size: var(--text-sm); color: var(--color-text-muted); }
.today-missed-text {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: var(--text-base) var(--font-body);
  resize: vertical;
}
.today-missed-actions { display: flex; gap: var(--space-2); }
.today-missed-send { border-color: var(--color-primary); color: var(--color-primary); }
.today-missed-msg, .today-missed-done { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.today-morningline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 48px;
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: 500 var(--text-sm) var(--font-body);
  text-align: left;
  cursor: pointer;
}
.today-morningline-n { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-xs); white-space: nowrap; }

/* ---------- End matter ---------- */
.today-notes, .today-heldback {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.today-notes strong { color: var(--color-text); font-weight: 600; }

/* ---------- Morning states ---------- */
.today-state {
  padding: var(--space-8) var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.today-state-text { margin: var(--space-3) 0 0; font-size: var(--text-base); line-height: 1.55; }
.today-state-link { margin: var(--space-4) 0 0; font-size: var(--text-sm); }

@media (max-width: 640px) {
  .today-story { padding: var(--space-4); }
}

/* Same footer as Read (read.css isn't loaded here). */
.footer {
  margin-top: var(--space-10);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--color-divider);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
}