/* Commitments. A promise reads as a sentence, not a row in a table — the
   phrasing is the feature, so the type carries it and the chrome stays out. */
.v10-cm-summary{display:flex;gap:12px;margin:0 0 16px;flex-wrap:wrap}
.v10-cm-stat{
  flex:0 0 auto;min-width:118px;padding:12px 16px;border-radius:14px;
  background:var(--surface,#fff);border:1px solid var(--line,#DCE5EB);
}
.v10-cm-stat b{display:block;font-size:26px;font-weight:720;letter-spacing:-.04em;line-height:1}
.v10-cm-stat span{display:block;font-size:11.5px;color:var(--muted,#93A0B6);margin-top:4px}
.v10-cm-stat.bad{border-color:color-mix(in srgb,#C2567F 40%,transparent);background:color-mix(in srgb,#C2567F 7%,var(--surface,#fff))}
.v10-cm-stat.bad b{color:#A8446A}

.v10-cm-group{margin-bottom:14px}
.v10-cm{
  display:flex;align-items:flex-start;gap:13px;padding:13px 2px;
  border-top:1px solid var(--line-2,rgba(24,40,90,.06));
}
.v10-cm:first-child{border-top:0}
.v10-cm-check{width:19px;height:19px;margin-top:2px;flex:0 0 auto;cursor:pointer}
.v10-cm-main{flex:1;min-width:0}
.v10-cm-main strong{display:block;font-size:15px;font-weight:520;line-height:1.45;letter-spacing:-.01em}
.v10-cm-main small{display:block;font-size:12.5px;color:var(--muted,#66748F);margin-top:4px;line-height:1.5}
.v10-cm-meta{display:flex;align-items:center;gap:10px;margin-top:7px;flex-wrap:wrap}
.v10-cm-proj{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted,#66748F)}
.v10-cm-proj i{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.v10-cm-flag{font-size:10.5px;font-weight:650;letter-spacing:.04em;padding:2.5px 9px;border-radius:999px}
.v10-cm-flag.late{background:color-mix(in srgb,#C2567F 13%,var(--surface,#fff));color:#A8446A}
.v10-cm-flag.soon{background:color-mix(in srgb,#F0A52B 17%,var(--surface,#fff));color:#8A6212}
/* A broken promise gets an edge you cannot skim past. */
.v10-cm.late{box-shadow:inset 3px 0 0 #C2567F;padding-left:12px;border-radius:0 8px 8px 0}
.v10-cm.done .v10-cm-main strong{color:var(--muted,#93A0B6);text-decoration:line-through;text-decoration-thickness:1px}
.v10-cm.done .v10-cm-meta{opacity:.5}
.v10-cm-kept{margin-top:14px}
.v10-cm-kept summary{cursor:pointer;padding:14px 18px;font-size:13.5px;color:var(--muted,#66748F)}

/* the dashboard card — now built from the same primitives as its hub
   siblings (a real .card-head + a .stack body), so it inherits the header
   bar, padding and hover every other command card has. The pink only marks
   the broken-promise identity, on the title and the hover edge. */
.v10-cm-card{--card-accent:#C2567F}
.v10-cm-card .card-head strong{color:#A8446A;gap:8px}
/* Rows are standard .info-rows (bar, type and hover from v10-premium.css);
   only the "past the date" line keeps the commitment rose. */
.v10-cm-mini small{color:#A8446A!important;font-weight:600}
/* A promise still in date: the ordinary muted line, not the alarm. */
.v10-cm-mini small.v10-cm-due{color:var(--muted,#8494AD)!important;font-weight:500}
.v10-cm-more{margin-top:6px}

@media(max-width:600px){
  .v10-cm-summary{gap:8px}
  .v10-cm-stat{min-width:0;flex:1 1 30%;padding:10px 12px}
}

/* ---------------------------------------------------------------- energy
   Two values, never three: the point of this field is not having to think
   about it. */
.v10-energy-pick{display:flex;gap:8px;flex-wrap:wrap}
.v10-energy-opt{flex:1 1 90px;cursor:pointer;position:relative}
/* Kept 1px: the phone rule that makes dialog inputs full width stretched
   these past the edge, and the Add task dialog scrolled sideways (8 Oct). */
.v10-energy-opt input{position:absolute;opacity:0;pointer-events:none;left:0;top:0;width:1px!important;height:1px!important;min-width:0!important;margin:0!important;padding:0!important}
.v10-energy-opt span{
  display:block;padding:9px 12px;border-radius:11px;text-align:center;
  border:1px solid var(--line,#DCE5EB);background:var(--surface,#fff);
  font-size:13px;font-weight:550;transition:border-color .15s,background .15s;
}
.v10-energy-opt small{display:block;font-size:10.5px;font-weight:400;color:var(--muted,#93A0B6);margin-top:2px}
.v10-energy-opt input:checked + span{
  border-color:var(--nhs,#1E86C8);
  background:color-mix(in srgb,var(--nhs,#1E86C8) 8%,var(--surface,#fff));
}

/* "what can I do right now" */
.v10-now-switch{display:flex;gap:8px;margin-bottom:14px}
.v10-now-list{display:flex;flex-direction:column}
.v10-now-row{
  display:flex;align-items:center;gap:12px;padding:11px 2px;cursor:pointer;
  border-top:1px solid var(--line-2,rgba(24,40,90,.06));
}
.v10-now-row:first-child{border-top:0}
.v10-now-row span{flex:1;min-width:0}
.v10-now-row strong{display:block;font-size:14px;font-weight:520}
.v10-now-row small{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted,#93A0B6);margin-top:3px}
.v10-now-row small i{width:7px;height:7px;border-radius:50%}
.v10-now-row em{font-style:normal;font-size:11.5px;color:var(--muted,#93A0B6);white-space:nowrap}
.v10-now-row.late em{color:#A8446A;font-weight:600}
.v10-now-row.gone{opacity:.35}

/* ---------------------------------------------------------------- snooze */
.v10-snooze-opts{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.v10-snooze-opts label{
  display:flex;align-items:flex-start;gap:11px;cursor:pointer;
  border:1px solid var(--line,#DCE5EB);border-radius:12px;padding:11px 13px;
}
.v10-snooze-opts label:has(input:checked){
  border-color:var(--nhs,#1E86C8);background:color-mix(in srgb,var(--nhs,#1E86C8) 6%,transparent);
}
.v10-snooze-opts strong{display:block;font-size:14px;font-weight:600}
.v10-snooze-opts small{display:block;font-size:11.5px;color:var(--muted,#93A0B6);margin-top:1px}
.v10-snooze-opts input[type=date]{margin-top:7px;max-width:190px}

/* A sleeping project is visibly asleep, not hidden. Hiding things is how they
   rot; this one is still on the map, still readable, just obviously resting. */
.graph-node.project-node.v10-asleep{
  filter:saturate(.35) brightness(1.03)!important;
  opacity:.72!important;
}
.graph-node.project-node.v10-asleep::after{
  content:'';position:absolute;inset:-6px;border-radius:50%;
  border:1.5px dashed color-mix(in srgb,var(--node) 30%,transparent);
  pointer-events:none;
}
.v10-zzz{
  position:absolute;left:50%;bottom:-11px;translate:-50% 0;
  background:var(--surface,#fff);border:1px solid var(--line,#DCE5EB);
  border-radius:999px;padding:2px 9px;white-space:nowrap;
  font-size:10px;font-weight:650;letter-spacing:.03em;color:var(--muted,#93A0B6);
  pointer-events:none;
}
.v10-snooze-action{width:100%;text-align:left}

/* --------------------------------------------------- energy, on the task ---
   A mark, not a word: a column of tasks does not need "light" and "heavy"
   written down it. Hollow reads as less, solid reads as more, which needs no
   legend. The full label is in the tooltip for anyone who wants it. */
.v10-energy-mark{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  margin-right:8px;vertical-align:middle;flex:0 0 auto;
  border:1.5px solid #C98A1E;
}
.v10-energy-mark.light{background:transparent}
.v10-energy-mark.heavy{background:#C98A1E;border-color:#C98A1E}
.task-done .v10-energy-mark{opacity:.4}

/* ------------------------------------------- people on a project, on a grid -
   The card was one flex row: avatar, name, and two buttons side by side. At the
   290px the grid gives it the buttons had nowhere to go and Remove hung off the
   edge. Now they wrap to their own line when there is no room for them. */
.person-card{flex-wrap:wrap}
.person-card .person-main{flex:1 1 170px;min-width:0}
.person-card .row-actions{margin-left:auto;flex:0 1 auto;padding-top:2px}
.person-card .row-actions .btn{white-space:nowrap}

/* ------------------------------------------------ project / person overview
   The overview is two columns. Stretched to the height of the taller one, the
   left column's rows shared out the spare height, so Status, Health and Due
   date became three tall empty boxes and People grew to fill the rest.
   Each column is now only as tall as what it holds. */
.detail-body .detail-grid{align-items:start}
.detail-body .detail-grid > .stack{align-content:start}
/* Status, health and due date: one slim strip, not three tall boxes. */
.detail-body .detail-grid .three-col{gap:10px;align-items:stretch}
.detail-body .detail-grid .three-col .stat{min-height:0;height:auto;padding:10px 14px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.detail-body .detail-grid .three-col .stat label{margin:0}
.detail-body .detail-grid .three-col .stat strong{margin:0;line-height:1.3}