/* Static, always-visible — the scatter's meaning shouldn't depend on
   hovering every dot to find out what it represents. */
.attn-legend {
  flex: none;
  font-size: var(--text-xs); color: var(--ink-faint);
  line-height: var(--lh-body);
  margin-bottom: 10px;
}

.attn-plot {
  flex: 1; position: relative; min-height: 0;
}
.attn-zone { position: absolute; inset: 20px 10px; }
.attn-band {
  position: absolute; left: 0; right: 0;
  top: 37.5%; height: 25%;
  background: var(--hover-bg);
  pointer-events: none;
}
.attn-vline, .attn-hline { position: absolute; pointer-events: none; }
.attn-vline { top: 0; bottom: 0; border-left: 1px dashed var(--line-strong); }
.attn-vline.v-start { left: 20%; }   /* task start */
.attn-vline.v-due   { left: 80%; }   /* task due */
.attn-hline { left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-strong); }
.attn-tick {
  position: absolute; bottom: 4px; transform: translateX(-50%);
  font-size: var(--text-xs); color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .08em; pointer-events: none;
}
.attn-tick.t-start { left: 20%; }
.attn-tick.t-due   { left: 80%; }
.attn-corner {
  position: absolute;
  font-size: var(--text-xs); color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .08em;
  pointer-events: none;
}
.attn-corner.tl { top: 5px; left: 8px; }
.attn-corner.tr { top: 5px; right: 8px; }
.attn-corner.bl { bottom: 5px; left: 8px; }
.attn-corner.br { bottom: 5px; right: 8px; }
.attn-node {
  position: absolute;
  width: 24px; height: 24px;       /* ≥24px hit target */
  margin: -12px 0 0 -12px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; padding: 0;
}
.attn-node::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--zone, var(--ink-faint));
  transition: transform var(--dur-fast);
}
.attn-node:hover::before { transform: scale(1.4); }
/* Five health bands. Only three status hues exist (--ok/--warn/--bad) and the
   design forbids new ones, so overdue and critical share red — overdue is set
   apart by an alarm ring (and it already sits past the due line). */
.attn-node.z-overdue  { --zone: var(--bad); }
.attn-node.z-overdue::before { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 32%, transparent); }
.attn-node.z-critical { --zone: var(--bad); }
.attn-node.z-watch    { --zone: var(--warn); }
.attn-node.z-healthy  { --zone: var(--ink-faint); }
.attn-node.z-ahead    { --zone: var(--ok); }
/* Not-started tasks read as hollow rings — present on the board, but visibly
   "not filled in yet" vs. the solid dots of active work. */
.attn-node.z-upcoming::before {
  width: 9px; height: 9px;
  background: transparent;
  border: 1.5px solid var(--ink-faint);
}

/* Hover card — fixed-position, JS-placed next to the hovered dot (attention-
   board.js). Mirrors the .trk-del-pop popover treatment already used
   elsewhere, so it reads as native to the app rather than a browser tooltip. */
.attn-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--popover-bg); border: 1px solid var(--hairline);
  -webkit-backdrop-filter: var(--popover-blur);
  backdrop-filter: var(--popover-blur);
  border-radius: var(--radius-md); padding: 7px 10px;
  box-shadow: var(--shadow-float);
  max-width: 200px;
  opacity: 0; transform: translateY(3px);
  transition: opacity 90ms ease-out, transform 90ms ease-out;
}
.attn-tip.show { opacity: 1; transform: translateY(0); }
.tip-project {
  font-size: var(--text-base); font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tip-task {
  font-size: var(--text-sm); color: var(--ink-soft); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tip-status { font-size: var(--text-sm); font-weight: 600; margin-top: 5px; }
.tip-status .tip-label { font-weight: 400; color: var(--ink-soft); }
.tip-status.z-overdue,
.tip-status.z-critical { color: var(--bad-text); }
.tip-status.z-watch    { color: var(--warn-text); }
.tip-status.z-ahead    { color: var(--ok-text); }
.tip-status.z-healthy,
.tip-status.z-upcoming { color: var(--ink-faint); }
.attn-caption {
  /* bottom = attn-corner's 5px inset + the panel's own 26px bottom padding,
     since this is positioned against the panel's padding box, one level
     higher up the tree than .attn-corner (which sits inside .attn-plot,
     already inside that padding). */
  position: absolute; left: 0; right: 0; bottom: 31px;
  font-size: var(--text-xs); color: var(--ink-faint);
  text-align: center; letter-spacing: .08em;
  pointer-events: none;
}
.attn-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}

/* ═══ 10. PRIORITY LIST ══════════════════════════════════════════════ */

/* Scrolls via wheel/trackpad same as before — just no visible scrollbar
   track, to reclaim the width it was reserving. */
.prio-list {
  list-style: none; flex: 1; overflow-y: auto; min-height: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.prio-list::-webkit-scrollbar { display: none; }
.prio-row { padding: 8px 2px; border-bottom: 1px solid var(--line); }
.prio-row:last-child { border-bottom: none; }
/* Rows the mobile "see more" toggle just revealed fade + lift in with a
   slight stagger (attention-board.js sets animation-delay per row) instead
   of teleporting into place; rows already on screen are untouched. */
@keyframes prio-row-enter {
  from { opacity: 0; transform: translateY(4px); }
}
.prio-row-enter { animation: prio-row-enter var(--dur-fast) ease-out both; }
.prio-name {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-base); line-height: var(--lh-body);
}
.prio-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--zone, var(--ink-faint));
}
.prio-row.z-overdue .prio-dot,
.prio-row.z-critical .prio-dot { --zone: var(--bad); }
.prio-row.z-watch .prio-dot { --zone: var(--warn); }
/* Neutral, not warn — a not-yet-started task isn't behind anything, it's
   just a heads-up. Reusing --warn would read as "already lagging". */
.prio-row.z-upcoming .prio-dot { --zone: var(--ink-faint); }
/* "overdue" pill on the name line — same red status family as the dot. */
.prio-tag {
  margin-left: auto; flex: none;
  font-size: var(--text-xs); font-weight: 500;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--bad-text);
  background: color-mix(in srgb, var(--bad) 18%, transparent);
  padding: 1px 6px; border-radius: var(--radius-sm);
}
/* Divider heading for the Incoming heads-up pool at the foot of the list. */
.prio-subhead {
  margin-top: 10px; padding: 8px 2px 4px;
  border-top: 1px solid var(--line);
  font-size: var(--text-xs); color: var(--ink-faint);
  text-transform: uppercase; letter-spacing: .06em;
}
.prio-sub {
  margin-top: 2px; padding-left: 15px;
  font-size: var(--text-sm); color: var(--ink-soft);
  line-height: var(--lh-body);
}
.prio-sub .behind { color: var(--bad-text); }
.prio-sub .ahead { color: var(--ok-text); }

/* Mobile "see more" toggle row — caps the list at PRIO_LIMIT rows instead of
   scrolling a cramped nested box (attention-board.js). */
.prio-more { border-bottom: none; padding: 2px 0 0; }
.prio-more-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 0; border: none; border-radius: var(--radius-sm);
  background: transparent; font-size: var(--text-sm); color: var(--ink-soft);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.prio-more-btn:hover { background: var(--hover-bg); color: var(--fg); }
.prio-more-btn .chev {
  width: 6px; height: 6px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur-fast) ease;
}
.prio-more-btn.is-less .chev { margin-top: 3px; transform: rotate(-135deg); }