/* home · 2 of 4: subscriptions and the tasks panel.
   Split from home.css 2026-07-29 (1665 lines). The four load in order from
   templates/index.html and cascade as one sheet: order between them is
   load-bearing (the contrast audit block at the end of day.css wins on it). */
/* ---------------- subscriptions ---------------- */
.sub-list { display: flex; flex-direction: column; }
.sub-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline; gap: var(--s-3);
  padding: 5px 0; border-top: 1px dashed var(--line-soft);
}
.sub-row:first-of-type { border-top: 1px solid var(--line); }
.sub-name {
  font-family: var(--font-body);
  font-feature-settings: var(--feat-text);
  font-size: 15px; color: var(--fg);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sub-cycle {
  font-family: var(--font-body);
  font-feature-settings: var(--feat-meta);
  font-style: italic;
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.sub-amt {
  font-family: var(--font-body);
  font-feature-settings: var(--feat-text), var(--feat-tnum);
  font-size: 14px; color: var(--fg);
}
.sub-flag {
  font-family: var(--font-body);
  font-feature-settings: var(--feat-meta), var(--feat-tnum);
  font-style: italic;
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--warn); margin-left: var(--s-2);
  text-transform: lowercase;
  opacity: 0.85;
}
.sub-flag::before { content: "▲ "; font-style: normal; font-size: 8px; }

.sub-row-clickable { cursor: pointer; }
.sub-row-clickable:hover { background: var(--surface-raised, rgba(255,255,255,0.03)); }

.sub-total-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  padding: 7px 0 2px;
  margin-top: 2px;
  border-top: 1px solid var(--line);
}
.sub-total-label {
  font-family: var(--font-body);
  font-feature-settings: var(--feat-meta);
  font-style: italic;
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.04em;
  text-transform: lowercase;
}
.sub-total-amt {
  font-family: var(--font-body);
  font-feature-settings: var(--feat-text), var(--feat-tnum);
  font-size: 14px; color: var(--fg);
}

.sub-scrim {
  position: fixed; inset: 0; z-index: 200;
  background: var(--launch-scrim);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 96px;
  backdrop-filter: blur(3px);
}
.sub-modal {
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  box-shadow: var(--modal-shadow);
  padding: 24px 28px;
  min-width: 300px; max-width: 420px; width: 90%;
}
.sub-modal-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.sub-modal-name {
  font-family: var(--font); font-size: 16px; color: var(--fg);
}
.sub-modal-amt {
  font-family: var(--font-body); font-size: 13px; color: var(--fg-dim);
  font-style: italic;
}
.sub-modal-flag-row { margin-bottom: 12px; }
.sub-modal-reason {
  font-family: var(--font-body); font-size: 14px; color: var(--fg-dim);
  line-height: 1.55; margin: 0 0 20px;
}
.sub-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.sub-modal-dismiss, .sub-modal-close {
  font-family: var(--font-body); font-size: 12px; letter-spacing: 0.04em;
  padding: 6px 14px; border: 1px solid var(--line); background: none;
  cursor: pointer; text-transform: lowercase;
}
.sub-modal-dismiss { color: var(--warn); border-color: var(--warn); }
.sub-modal-dismiss:hover { background: rgba(217,160,80,0.08); }
.sub-modal-close { color: var(--fg-dim); }
.sub-modal-close:hover { background: var(--surface-raised, rgba(255,255,255,0.04)); }

/* ---------------- tasks ---------------- */

/* tab bar */
.task-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--line);
}
.task-tab {
  padding: 6px var(--s-3);
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-style: italic; font-size: 13px; color: var(--fg-dim);
  border-bottom: 2px solid transparent;
  text-align: left; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.task-tab:hover { color: var(--fg); }
.task-tab.active { color: var(--fg); border-bottom-color: var(--accent-dim); }
.task-tab-count {
  font-style: normal; font-size: 11px; color: var(--fg-dim);
  margin-left: 4px;
}

/* section filter dropdown */
.task-dd-wrap { position: relative; }
.task-dd-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 7px var(--s-3);
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-style: italic; font-size: 13px; color: var(--fg-dim);
  border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background 0.12s;
}
.task-dd-trigger:hover { background: var(--bg-hover); }
.task-dd-label { flex: 1; text-align: left; }
.task-dd-arrow { font-size: 10px; color: var(--fg-faint); margin-left: 6px; }
.task-dd-menu {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 20;
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  border-top: none; border-radius: 0 0 var(--r-card) var(--r-card);
  padding: var(--s-2) 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.task-dd-group { padding: var(--s-1) 0; }
.task-dd-group-head {
  padding: 4px var(--s-3) 2px;
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-faint);
}
.task-dd-row {
  display: flex; align-items: center; gap: var(--s-2);
  padding: 4px var(--s-3);
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-style: italic; font-size: 13px; color: var(--fg-dim);
  cursor: pointer; transition: background 0.1s;
}
.task-dd-row input[type="checkbox"] { display: none; }
.task-dd-row::before {
  content: "☐"; font-style: normal; font-size: 13px; flex-shrink: 0;
  color: var(--fg-faint);
}
.task-dd-row.checked::before { content: "☑"; color: var(--accent); }
.task-dd-row:hover { background: var(--bg-hover); }
.task-dd-row.checked { background: var(--accent-faint); border-color: var(--accent-dim); }
.task-dd-sec { flex: 1; }
.task-dd-n { font-style: normal; font-size: 11px; color: var(--fg-dim); }

/* task rows */
.task-list { display: flex; flex-direction: column; }
.task-section { display: flex; flex-direction: column; }
.task-section-head {
  display: flex; align-items: center; gap: 6px;
  padding: var(--s-2) 0 2px;
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-faint);
  border-top: 1px solid var(--line);
  margin-top: var(--s-2);
  cursor: pointer; user-select: none;
}
.task-section-head:hover { color: var(--fg-dim); }
.task-section:first-child .task-section-head { border-top: none; margin-top: 0; }
.task-section-caret { font-size: 9px; width: 9px; flex-shrink: 0; opacity: 0.7; }
.task-section-name { flex: 1; }
.task-section-count { font-size: 10px; letter-spacing: 0.06em; color: var(--fg-dim); }

/* group cluster within a section */
.task-group { display: flex; flex-direction: column; }
.task-group-head {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 0 3px 6px;
  font-family: var(--font-body); font-feature-settings: var(--feat-text);
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--fg-dim);
  cursor: pointer; user-select: none;
  border-left: 2px solid var(--accent-faint);
}
.task-group-head:hover { color: var(--fg); border-left-color: var(--accent-dim); }
.task-group-caret { font-size: 9px; width: 9px; flex-shrink: 0; opacity: 0.7; }
.task-group-name { flex: 1; }
.task-group-count {
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-size: 10px; font-weight: 500; color: var(--fg-dim);
}
.task-group .task-item { border-left: 2px solid var(--line-soft); }
.task-group .task-row { padding-left: 8px; }

.task-row {
  display: grid; grid-template-columns: 20px 9px minmax(0, 1fr) auto 60px;
  align-items: center; gap: var(--s-2);
  padding: 5px 0; border-top: 1px dashed var(--line-soft);
}
.task-section .task-row:first-child { border-top: none; }
.task-check {
  position: relative;
  width: 14px; height: 14px;
  border: 1px solid var(--line-strong); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: transparent; cursor: pointer;
  flex-shrink: 0; transition: border-color 0.12s, background 0.12s;
}
/* 24px = WCAG 2.5.8 AA min touch target. Grown as an invisible overlay rather
   than by resizing the box, so the tick keeps its 14px look and the row does
   not reflow. -5px per side lands exactly inside the 20px grid column and the
   24px row, so it cannot swallow clicks meant for the task name or the row above. */
.task-check::after { content: ""; position: absolute; inset: -5px; }
.task-row:hover .task-check { border-color: var(--accent-dim); }
.task-row.done .task-check {
  background: var(--accent-faint); border-color: var(--accent-faint);
  color: var(--accent);
}
.task-name {
  font-family: var(--font-body); font-feature-settings: var(--feat-text);
  font-size: 15px; color: var(--fg); line-height: 1.4;
  cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.task-row.done .task-name {
  color: var(--fg-dim); text-decoration: line-through;
  text-decoration-color: var(--fg-faint);
}
.task-time-chip {
  font-family: var(--font-body);
  font-feature-settings: var(--feat-meta);
  font-size: 12px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--alert); background: var(--alert-faint, rgba(217, 112, 112, 0.18));
  border: 1px solid var(--alert, #d97070); border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap; justify-self: end; align-self: center;
  text-transform: lowercase;
}
.task-time-chip.overdue {
  color: var(--bg, #fff); background: var(--alert, #d97070);
  font-weight: 700;
}
/* long-stale overdue (30d+, see Tasks.jsx STALE_OVERDUE_DAYS) drops back to a
   quiet outline — a months-old slip shouting as loud as a 2-day one is what
   trains the eye to ignore the color entirely (home critique P2). */
.task-time-chip.overdue.stale {
  color: var(--fg-dim); background: transparent;
  border-color: var(--line-strong); font-weight: 500;
}
.task-row.done .task-time-chip {
  color: var(--fg-faint); background: var(--line-soft);
  border-color: var(--line-soft); font-weight: 400;
}
/* empty placeholder reserves the fixed timer column so untimed task titles stop
   at the same right boundary as timed ones (consistent ragged edge) */
.task-time-slot { justify-self: end; }
/* .task-del removed 2026-07-24 — nothing renders the class any more (the row has
   no delete affordance; deletion goes through the edit modal), so its rules and
   the audit's "11px delete target" finding were both against dead CSS. */
.task-empty {
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-style: italic; font-size: 13px; color: var(--fg-faint);
  padding: var(--s-3) 0;
}
.task-item { display: flex; flex-direction: column; }
.task-detail {
  padding: 3px var(--s-2) var(--s-2) 28px;
  font-family: var(--font-body); font-feature-settings: var(--feat-text);
  font-size: 13px; color: var(--fg-dim); line-height: 1.55;
  border-bottom: 1px dashed var(--line-soft);
}
.task-detail-empty { font-style: italic; color: var(--fg-faint); }
.task-row.open .task-name { color: var(--accent-dim); }

/* input pip — how much of Brendan a task needs before Claude can finish it.
   green = none (the /tasks auto-queue), yellow = up to 3 questions, red = full
   back-and-forth, hollow = never triaged. Color is the only channel here, so
   every pip also carries a title + aria-label with the tier spelled out. */
.task-input-pip {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0; align-self: center;
  border: 1px solid transparent;
}
.task-input-pip.none { background: var(--good); }
.task-input-pip.low  { background: var(--warn); }
.task-input-pip.high { background: var(--alert); }
.task-input-pip.untriaged { background: transparent; border-color: var(--line-strong); }
.task-input-slot { width: 0; }   /* completed rows keep the grid column, drop the pip */

/* urgency triage chip — critical (alert) vs quick win (high value-to-effort) */
.task-urgency-slot { width: 0; }
.task-urgency-chip {
  font-family: var(--font-body); font-feature-settings: var(--feat-meta);
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  border-radius: 4px; padding: 1px 6px;
  white-space: nowrap; align-self: center; text-transform: lowercase;
}
.task-urgency-chip.critical {
  color: var(--alert, #d97070);
  background: var(--alert-faint, rgba(217, 112, 112, 0.18));
  border: 1px solid var(--alert, #d97070);
}
/* filled accent, not accent-on-accent-faint: the tinted-fill recipe the sibling
   .critical chip uses only clears 4.5:1 because --alert is bright; --accent is
   dim enough that accent-text on any accent tint fails on the dark surface
   (2.2:1). A solid accent fill with --on-accent text is the theme's own AA-proven
   button pairing (4.94:1 dark / 6.70:1 light) and passes on every surface. */
.task-urgency-chip.quickwin {
  color: var(--on-accent);
  background: var(--accent);
  border: 1px solid var(--accent);
}
.task-detail-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-2);
}
.task-edit-btn {
  font-family: var(--font-body); font-size: 10px; letter-spacing: 0.04em;
  color: var(--fg-faint); cursor: pointer;
  opacity: 0; transition: opacity 0.12s;
  flex-shrink: 0; padding: 0;
}
.task-item:hover .task-edit-btn { opacity: 1; }

/* edit modal */
.task-modal-overlay {
  position: fixed; inset: 0;
  background: var(--launch-scrim);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
.task-modal {
  background: var(--bg-elev);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-card);
  padding: var(--s-5) var(--s-6);
  width: min(480px, 90vw);
  display: flex; flex-direction: column; gap: var(--s-3);
  box-shadow: var(--modal-shadow);
}
.task-modal-label {
  font-family: var(--font-body); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--violet-label);
}
.task-edit-input,
.task-edit-textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-body); font-size: 14px; color: var(--fg);
  background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: var(--r); padding: 6px 8px;
  resize: none; outline: none; line-height: 1.4;
}
.task-edit-input:focus,
.task-edit-textarea:focus { border-color: var(--accent-dim); }
.task-edit-textarea { min-height: 72px; }
.task-modal-sub {
  font-family: var(--font-body); font-size: 10px; letter-spacing: 0.08em;
  text-transform: lowercase; color: var(--fg-faint);
  margin-bottom: calc(-1 * var(--s-2));
}
.task-urgency-row { display: flex; gap: var(--s-2); }
.task-urgency-opt {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--font-body); font-feature-settings: var(--feat-text);
  font-size: 12px; color: var(--fg-dim);
  padding: 6px 8px; border-radius: var(--r);
  background: var(--bg); border: 1px solid var(--line-strong);
  cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.task-urgency-opt:hover { color: var(--fg); }
.task-urgency-opt.on { color: var(--fg); border-color: var(--accent-dim); }
.task-urgency-opt.on.critical {
  color: var(--alert, #d97070);
  border-color: var(--alert, #d97070);
  background: var(--alert-faint, rgba(217, 112, 112, 0.14));
}
.task-urgency-opt.on.quickwin {
  color: var(--on-accent);
  border-color: var(--accent);
  background: var(--accent);
}
.task-edit-actions { display: flex; gap: var(--s-2); }
.task-edit-save,
.task-edit-cancel {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0.04em;
  padding: 4px 14px; border-radius: var(--r); cursor: pointer;
  transition: opacity 0.1s;
}
.task-edit-save { background: var(--accent-dim); color: var(--bg); border: none; }
.task-edit-cancel {
  background: transparent; color: var(--fg-faint);
  border: 1px solid var(--line-strong);
}
.task-edit-save:hover { opacity: 0.85; }
.task-edit-cancel:hover { color: var(--fg); }

.quick-add {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); background: var(--bg-elev);
  border-radius: var(--r-card); margin-top: var(--s-3);
}
.quick-add:focus-within { border-color: var(--accent-dim); }
.qa-input {
  flex: 1;
  font-family: var(--font-body);
  font-feature-settings: var(--feat-text);
  font-size: 15px; color: var(--fg);
}