/* Sub-goal disclosure + editor — shared across every surface that hangs sub-goals
   off a goal row: the Daily Goals tab (.dlg-view), the Long-Term dashboard's Daily
   column (.gd-view), and the undated-goals sidebar. Keyed on the mount classes
   (.gd-daily-subgoals / .gd-subgoals-head / .gd-subgoals-body) with NO view prefix
   so all three look identical and never drift. (The Calendar tab mounts the same
   editor under its own class and keeps a matching copy in its events.css.)

   A per-goal disclosure under each goal: a muted header row ("▸ subgoals · 2/6")
   that expands to the SAME Tiptap editor as the brain dump, seeded as a checkbox
   list. Collapsed by default. Indented ~28px so it sits under the goal text (past
   the goal's check + number columns). The header is deliberately NOT styled like a
   card's far-left reflection chevron — different position, label, and size, so the
   two toggles read as unrelated controls. */
/* Two columns, because a surface may hang ONE trailing control off the
   disclosure header's row (`.gd-subgoals-aside` — the Daily Goals tab's repeat
   pill). Header left, control right, editor body across both underneath. Placed
   explicitly rather than by source order: the mount appends head, body, then the
   aside, and the aside must still land on row 1. With no aside the second column
   collapses to nothing and this reads exactly as the old block did. */
.gd-daily-subgoals {
  margin: 0 0 3px 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 8px;
  /* Named query container so the aside can shrink itself when this row is the
     narrow one — seven day columns at their 180px floor leave the pill no room
     for a word once the disclosure header has taken its share, while a 1-day or
     phone column has room to spare. The aside is the only thing that can give,
     so it is the thing that asks. Named rather than anonymous: an unnamed
     container would also answer queries written for some future ancestor. */
  container: goal-aside / inline-size;
}
/* Child selector, not `.gd-subgoals-aside` alone: the control arrives carrying
   its own view-scoped class (`.dlg-repeat`) with its own padding, and a bare
   class would tie the outcome to which stylesheet happens to be linked last. */
.gd-daily-subgoals > .gd-subgoals-aside {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  /* Own-row padding would re-inflate the row it just moved out of. */
  padding: 0;
}
.gd-subgoals-head {
  grid-column: 1;
  grid-row: 1;
  display: block;
  border: 0;
  background: transparent;
  padding: 1px 2px;
  font-size: 11px;
  line-height: 1.4;
  text-align: left;
  color: rgba(var(--overlay-rgb), 0.45);
  cursor: pointer;
}
.gd-subgoals-head:hover {
  color: rgba(var(--overlay-rgb), 0.75);
}
/* The compact head (opted into by the Daily Goals board, which hoists this button
   into the goal's own row) is a ROTATING chevron rather than a swapped character:
   ▾ turns to ▴ through the open, so the control reads as the card unfolding. The
   glyph is an element for exactly that reason — `transform` cannot animate a
   change of `textContent`. `subgoal_disclosure.js` writes only the count span. */
.gd-subgoals-head--compact {
  align-items: center;
  display: inline-flex;
  gap: 3px;
}
.gd-subgoals-chev {
  display: inline-block;
  line-height: 1;
  transition: transform 0.18s ease;
}
.gd-subgoals-head--compact[aria-expanded='true'] .gd-subgoals-chev {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .gd-subgoals-chev { transition: none; }
}
/* The editor body: quiet when idle, a subtle box on hover / while editing.
   Spans both grid columns on the row under the header + its aside. */
.gd-subgoals-body {
  grid-column: 1 / -1;
  grid-row: 2;
  box-sizing: border-box;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
}
.gd-subgoals-body:hover {
  background: rgba(var(--overlay-rgb), 0.04);
}
.gd-subgoals-body:focus-within {
  background: rgba(var(--overlay-rgb), 0.06);
  border-color: var(--border-subtle);
}
.gd-daily-subgoals .ProseMirror {
  outline: none;
  color: var(--text-primary);
  font-size: 12px;
  line-height: 1.4;
  caret-color: var(--accent);
}
/* Bullet list (the "- " path). Reset the <p> ProseMirror wraps each item in so
   the text sits on the bullet's line. */
.gd-daily-subgoals .ProseMirror ul:not([data-type="taskList"]) {
  padding-left: 1.1em;
  list-style: disc;
  margin: 0;
}
/* Reset the app's global 12px paragraph margin on EVERY p in the editor. Must be
   a descendant selector, not `li > p`: a bullet item's p sits directly under the
   li, but a TASK item's p is nested (li > div > p) — with `li > p` the task text
   kept the 12px margins and rendered pushed a line below its checkbox. */
.gd-daily-subgoals .ProseMirror li,
.gd-daily-subgoals .ProseMirror p {
  margin: 0;
}
.gd-daily-subgoals .ProseMirror li + li {
  margin-top: 1px;
}
/* Checkbox list (the "[] " path). Tiptap TaskList renders
   <ul data-type=taskList><li><label><input type=checkbox></label><div>text</div>. */
.gd-daily-subgoals .ProseMirror ul[data-type="taskList"] {
  list-style: none;
  padding: 0;
  margin: 0;
}
.gd-daily-subgoals .ProseMirror ul[data-type="taskList"] > li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.gd-daily-subgoals .ProseMirror ul[data-type="taskList"] > li > label {
  margin: 0;
  flex: 0 0 auto;
  user-select: none;
  line-height: 1;
  padding-top: 2px;
}
.gd-daily-subgoals .ProseMirror ul[data-type="taskList"] > li > div {
  flex: 1 1 auto;
  min-width: 0;
}
/* The native checkbox is replaced by the app's completion SVGs (the same art as
   goals_dashboard_completion.buildCompletionSvg / the calendar's subgoal checks):
   empty circle → green check-in-circle → red x-in-circle, cycled by the
   three-state TaskItem (subgoal_taskitem.js), which stamps `data-completion` on
   the <li> — all icon selection keys on that attr, not `:checked` (an X item's
   input is unchecked). Data-URI backgrounds because a native input can't host SVG
   children — the fill is hardcoded per theme (currentColor doesn't reach into a
   background-image). */
.gd-daily-subgoals .ProseMirror ul[data-type="taskList"] input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: transparent center / 14px 14px no-repeat;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.55)" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>');
}
.gd-daily-subgoals .ProseMirror ul[data-type="taskList"] > li[data-completion="checked"] input[type="checkbox"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%234caf50" d="M22,5.18L10.59,16.6l-4.24-4.24l1.41-1.41l2.83,2.83l10-10L22,5.18z M19.79,10.22C19.92,10.79,20,11.39,20,12c0,4.42-3.58,8-8,8s-8-3.58-8-8c0-4.42,3.58-8,8-8c1.58,0,3.04,0.46,4.28,1.25l1.44-1.44C16.1,2.67,14.13,2,12,2C6.48,2,2,6.48,2,12c0,5.52,4.48,10,10,10s10-4.48,10-10c0-1.19-0.22-2.33-0.6-3.39L19.79,10.22z"/></svg>');
}
.gd-daily-subgoals .ProseMirror ul[data-type="taskList"] > li[data-completion="x"] input[type="checkbox"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ef5350" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/></svg>');
}
/* Neutral circle vanishes on light backgrounds (translucent white) — mirror the
   goal rows' light-mode darkening. Open state only: check/X keep their colors. */
body.theme-light .gd-daily-subgoals .ProseMirror ul[data-type="taskList"] > li[data-completion="open"] input[type="checkbox"] {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.45)" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>');
}
/* Checked items read muted + struck through. */
.gd-daily-subgoals .ProseMirror ul[data-type="taskList"] > li[data-checked="true"] > div {
  text-decoration: line-through;
  opacity: 0.55;
}
/* Finger-sized tick (`pointer: coarse`, the events.css precedent). The 14px
   circle was a mouse target: on glass a press aimed at it lands on the words
   and puts a caret there instead of ticking. The icon grows only to 18px, so
   it never out-sizes the goal's own tick; the LABEL's padding — pulled back
   out by an equal negative margin — makes the 30px press area, without making
   the rows any taller. The words drop 1px so
   their first line sits on the bigger icon's centre; a wrapped item still
   hangs from that first line (`flex-start`, as above). */
@media (pointer: coarse) {
  .gd-daily-subgoals .ProseMirror ul[data-type="taskList"] input[type="checkbox"] {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
  }
  .gd-daily-subgoals .ProseMirror ul[data-type="taskList"] > li {
    gap: 8px;
  }
  .gd-daily-subgoals .ProseMirror ul[data-type="taskList"] > li > label {
    padding: 6px;
    margin: -6px 0 -6px -6px;
  }
  .gd-daily-subgoals .ProseMirror ul[data-type="taskList"] > li > div {
    padding-top: 1px;
  }
  /* Room between rows so two neighbouring press areas do not overlap: each
     reaches 6px past its row both ways, so the gap must be >= 12px or a tap
     between two items can tick the wrong one. */
  .gd-daily-subgoals .ProseMirror li + li {
    margin-top: 12px;
  }
}