/* "Set a goal in light of this" — the forward half of a reflection card
   (js/reflection-blocker/next_goal_strip.js).

   Its own stylesheet rather than more rules in reflection-blocker-modal.css,
   which is already the modal's longest file. Must load AFTER that one (it sits
   inside those cards) and after styles/ltg-date-pill.css, whose pill it hosts.

   The strip is deliberately quiet when collapsed: on a screen whose job is
   looking BACK, a control that shouts about planning would read as another
   requirement rather than an offer. It gains weight only once a row exists. */

.rbm-next {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-subtle);
}

/* ── What this parent already has waiting ────────────────────────────────
   A readout, not a control: no hover, no cursor, nothing to click. It sits
   ABOVE the button because it is the thing to read before pressing it — the
   whole point is not typing a goal that is already there. Quieter than the
   button, which is itself deliberately quiet, so a card with three goals
   waiting still reads as a reflection rather than as a to-do list. */
.rbm-next-have {
  margin-bottom: 8px;
}

.rbm-next-have[hidden] {
  display: none;
}

.rbm-next-have-label {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.rbm-next-have-list {
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* A goal that is ALREADY there is an ordinary row — same title field, same date
   pill, same × — because the answer to "that one is nearly right" has to be
   editing it or moving its date, not typing a second copy to prune later. It is
   dimmed until touched so the eye still separates "waiting" from "being written
   now", and it comes back to full weight on hover or focus, when it has become
   the thing being worked on. */
.rbm-next-row--have {
  opacity: 0.72;
  transition: opacity 120ms ease;
}

.rbm-next-row--have:hover,
.rbm-next-row--have:focus-within {
  opacity: 1;
}

/* Already answered: struck through for the crossed-out, ticked for the done.
   The state is the reason a goal here may still be worth setting again — an ×
   is an experiment that did not run. */
.rbm-next-row--have[data-next-state="x"] .ltg-text {
  text-decoration: line-through;
  color: var(--text-muted);
}

.rbm-next-row--have[data-next-state="checked"] .ltg-text {
  color: var(--success, #33c46e);
}

.rbm-next-add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 4px;
  font-size: 0.74rem;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}

.rbm-next-add:hover {
  color: var(--ltg-row-color, var(--text-primary));
  border-color: var(--ltg-row-color, var(--border-subtle));
  background: var(--utility-surface);
}

.rbm-next-add-glyph {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  font-size: 0.9rem;
  line-height: 1;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.rbm-next-rows:not(:empty) {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* A row is one goal: its title on top, its controls in a strip beneath — the
   same two-tier shape every goal row in the app has, so a goal minted here
   looks like the goals it will sit next to tomorrow. */
.rbm-next-row {
  padding: 6px 8px;
  background: var(--utility-surface);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--ltg-row-color, var(--border-strong));
  border-radius: var(--radius-sm, 8px);
}

.rbm-next-row .ltg-text {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.86rem;
  color: var(--text-primary);
}

.rbm-next-row .ltg-text:focus {
  outline: none;
}

.rbm-next-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

/* The × sits at the far end, away from the date pill: they are the two controls
   on the strip and one of them discards what you just wrote. */
.rbm-next-remove {
  margin-left: auto;
}

/* A write that did not land. The modal is never held shut over a side write —
   the reflection is the requirement, not this — so the row saying so is the
   only thing standing between a failed save and a goal the user believes they
   set. Editing the row retries, and so does submitting. */
.rbm-next-row--failed {
  border-color: var(--danger, #e57373);
  border-left-color: var(--danger, #e57373);
}

/* The period tiers state their target instead of offering to change it: "which
   week is this weekly goal for?" is not a question, it is this one. Wearing
   `.ltg-date` keeps it the same shape as the daily pill so the two strips read
   as one control, but nothing here is interactive — no pointer cursor, no
   hover, and it is not a <button>. */
.rbm-next-period {
  cursor: default;
  opacity: 0.85;
}

/* On rows with no parent to inherit the goal is kept as a brain-dump card, and
   the foot carries the ordinary date pill PLUS this label. The pill answers
   "which day's brain dump" — the panel is per-day, so that is a real question —
   and the label answers what the pill cannot: that this is a capture rather
   than a goal, and at which horizon it was captured. Quiet and italic, because
   the pill is the control and this is the caption; `help` because the title
   holds the rest of the sentence. */
.rbm-next-dump {
  cursor: help;
  font-size: 0.78rem;
  font-style: italic;
  opacity: 0.7;
  white-space: nowrap;
}