/* ============================================================================
   Capture — Today view ("Tactile Chips" redesign)      par/capture-redesign

   The execution surface. Calm, composed, never a nag. All color comes from the
   FROZEN theme.css token layer — no hardcoded hex. Tinted backgrounds are mixed
   from the semantic accent vars via color-mix() (same oklch-era CSS the theme
   itself relies on). Load this file LAST (after card.css) so its vars resolve.

   New `today-*` namespace — supersedes the old .today-section / .cal-* /
   .hubben-todo* rules in views.css (those go inert; prune in a later pass).
   ========================================================================== */

.today-view { display: flex; flex-direction: column; gap: 26px; }

/* ---- 1. Date header --------------------------------------------------------- */
.today-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--gap-col); flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--hairline);
}
.today-date { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.today-weekday {
  font-family: var(--font-display); font-size: 26px; font-weight: 600;
  letter-spacing: -0.02em; color: var(--text); line-height: 1.1;
}
.today-sub { font-size: 14px; color: var(--dim); white-space: nowrap; }

.today-head-right { display: flex; align-items: center; gap: 10px; }

/* Free-hours badge — a quiet tinted pill, not an alarm. */
.today-free {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  padding: 4px 11px; border-radius: var(--r-pill); white-space: nowrap;
}
.today-free-green  { color: var(--green); background: color-mix(in oklab, var(--green) 16%, transparent); }
.today-free-orange { color: var(--amber); background: color-mix(in oklab, var(--amber) 16%, transparent); }
.today-free-red    { color: var(--red);   background: color-mix(in oklab, var(--red) 16%, transparent); }

/* Show/hide-done — the calmest possible toggle: dim text, no border at rest. */
.today-donetoggle {
  font-family: var(--font-body); font-size: 12px; color: var(--dim);
  background: transparent; border: none; cursor: pointer;
  padding: 5px 10px; border-radius: var(--r-pill);
  transition: color .14s ease, background .14s ease;
}
.today-donetoggle:hover { color: var(--text-body); background: var(--card-hover); }

/* ---- 2–5. Section shell (shared by every block) ---------------------------- */
.today-block { display: flex; flex-direction: column; gap: var(--gap-col); }

.today-block-head {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.01em; color: var(--text-body);
}
.today-block-title { line-height: 1; }
.today-block-count {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  color: var(--dim); background: var(--strip-bg);
  padding: 2px 8px; border-radius: var(--r-pill);
}

/* The focus block (Today) leads with the single pink section mark. */
.today-block-focus .today-block-title { color: var(--text); }
.today-block-focus .today-block-title::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  margin-right: 8px; border-radius: 50%; background: var(--pink);
  vertical-align: middle;
}

/* ---- 4. Someday — collapsible, quiet ---------------------------------------- */
.today-collapse {
  width: 100%; text-align: left; background: transparent; border: none;
  cursor: pointer; padding: 4px 0; color: var(--dim);
}
.today-collapse:hover .today-block-title,
.today-collapse:hover .today-caret { color: var(--text-body); }
.today-collapse .today-block-title { color: var(--dim); font-weight: 500; }
.today-caret {
  display: inline-block; font-size: 10px; color: var(--dimmer);
  transition: transform .16s ease;
}
.today-collapse[aria-expanded="true"] .today-caret { transform: rotate(90deg); }

/* ---- 3. Shared todos (Hubben) — simple rows -------------------------------- */
.today-shared-list { display: flex; flex-direction: column; gap: 6px; }
.today-shared-row {
  display: flex; align-items: center; gap: 11px;
  padding: var(--pad-compact); border-radius: var(--r-compact);
  background: var(--strip-bg);
}
.today-shared-dot {
  width: 7px; height: 7px; flex-shrink: 0; border-radius: 50%;
  background: var(--dim);
}
.today-shared-row.is-high .today-shared-dot { background: var(--amber); }
.today-shared-text {
  flex: 1; min-width: 0; font-size: 14px; color: var(--text-body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.today-shared-flag {
  font-family: var(--font-mono); font-size: 10px; flex-shrink: 0;
  color: var(--amber); background: color-mix(in oklab, var(--amber) 16%, transparent);
  padding: 2px 8px; border-radius: var(--r-pill); text-transform: lowercase;
}

/* ---- 5. Calendar preview --------------------------------------------------- */
.today-cal { padding-top: 4px; }
.today-cal-list { display: flex; flex-direction: column; gap: 2px; }
.today-cal-row {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 4px; font-size: 14px; color: var(--text-body);
}
.today-cal-dot {
  width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%;
  background: var(--dot, var(--dim));
}
.today-cal-time {
  flex-shrink: 0; min-width: 6.5em;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.today-cal-allday { color: var(--dimmer); }
.today-cal-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Motion — gentle entrance, fully reduced-motion aware ------------------- */
@media (prefers-reduced-motion: no-preference) {
  .today-block { animation: todayRise .28s ease both; }
  .today-block:nth-child(2) { animation-delay: .03s; }
  .today-block:nth-child(3) { animation-delay: .06s; }
  .today-block:nth-child(4) { animation-delay: .09s; }
  @keyframes todayRise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .today-caret, .today-donetoggle { transition: none; }
}

/* ---- Mobile ---------------------------------------------------------------- */
@media (max-width: 600px) {
  .today-view { gap: 22px; }
  .today-weekday { font-size: 22px; }
  .today-head { align-items: flex-start; }
  .today-cal-time { min-width: 5.5em; }
}