/* What happened under a period goal, one horizon down — the strip
   js/reflection-blocker/period_children_strip.js hangs beneath a goal row.

   Its own stylesheet because it now has TWO hosts: the reflection blocker's
   modal, which it shipped inside, and the Reflect grid's cells (2026-08-08).
   Loaded globally from index.html, before the modal's own sheet so that sheet's
   overrides still win.

   The `rbm-` prefix stayed when the file moved. It is the class name in the
   markup this strip has always built, and renaming it would touch the modal,
   two watches and the checks to say the same thing about the same nodes.

   ── Two orientations ────────────────────────────────────────────────────
   ROW (the modal): sub-periods across, seven day columns side by side inside a
   dialog that is 1700px wide for exactly this reason.
   STACK (a Reflect cell): the same sub-periods one under the other, because a
   cell is one column of a period grid — around 200px — and seven columns in
   that is seven columns nobody can read. Everything else is identical.

   ── What it draws ───────────────────────────────────────────────────────
   One column per sub-period — all seven days of the week, every week of the
   month, all three months of the quarter — including the empty ones, which are
   a fact about the period rather than a gap to close up.

   Read-only, and it has to LOOK read-only: no field, no checkbox, no ×. The
   only affordance is a disclosure, so these are native `<details>` and the
   caret below is the whole interaction vocabulary. */

/* A band right across the bottom of the goal it belongs to, saying in full what
   it opens. Full width because that is what makes it findable, and its own
   element because threading it into the goal-tree row's shared bottom strip
   would entangle this folder with code four other surfaces share. */
.rbm-kids-toggle {
  padding: 5px 8px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
}

.rbm-kids-toggle:hover {
  color: var(--text-primary);
  border-style: solid;
}

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

/* ROW: columns share the room equally while there IS room, then stop shrinking and
   scroll. A week is seven days whatever the window is, so the fallback is a
   sideways scroll rather than seven columns too narrow to read a goal in.
   `overscroll-behavior-x` keeps that scroll from becoming the modal's. */
.rbm-kids-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(148px, 1fr);
  /* Each column hugs what is in it. Stretching them to the tallest turns a day
     with one goal on it into a tall empty box beside the busy day. */
  align-items: start;
  gap: 6px;
  padding-bottom: 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

@media (width <= 900px) {
  .rbm-kids-track {
    grid-auto-columns: minmax(116px, 1fr);
  }
}

.rbm-kid-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 6px;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
}

.rbm-kid-col.is-empty {
  opacity: 0.5;
}

.rbm-kid-col-title {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.rbm-kid {
  background: var(--utility-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}

.rbm-kid-head {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  padding: 4px 5px;
  font-size: 0.8rem;
  list-style: none;
}

.rbm-kid-head::-webkit-details-marker {
  display: none;
}

details.rbm-kid > .rbm-kid-head {
  cursor: pointer;
}

/* The caret is the only thing that says a child has something written under it,
   so it belongs to `details` alone — a flat row must not look pressable. */
details.rbm-kid > .rbm-kid-head::before {
  flex: 0 0 auto;
  font-size: 0.7rem;
  color: var(--text-secondary);
  content: '▸';
}

details.rbm-kid[open] > .rbm-kid-head::before {
  content: '▾';
}

.rbm-kid-mark {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

/* The rated tiers wear the goal row's own rating pill, borrowed rather than
   invented: same rounded outline, same 10px value with a faded "/10" beside it
   (styles/ltg-rating.css, `.ltg-rating-toggle`). A rating drawn as a bare digit
   in front of a title reads as the item's NUMBER, which is what it looked like
   before. Not the real pill, because that one is a button that opens a picker,
   and nothing in this strip is editable. */
.rbm-kid-mark[data-kind='rating'] {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 0 6px;
  font-size: 0.68rem;
  line-height: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
}

.rbm-kid-mark-max {
  font-weight: 400;
  opacity: 0.65;
}

.rbm-kid[data-tone='done'] .rbm-kid-mark {
  color: var(--success, #33c46e);
}

.rbm-kid[data-tone='dropped'] .rbm-kid-mark {
  color: var(--danger, #e57373);
}

.rbm-kid[data-tone='rated'] .rbm-kid-mark {
  color: var(--accent);
}

.rbm-kid-emoji,
.rbm-kid-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.rbm-kid--reflection > .rbm-kid-head {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.rbm-kid-body {
  padding: 0 6px 6px;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.rbm-kid-q {
  margin: 4px 0 0;
  font-weight: 600;
  color: var(--text-primary);
}

.rbm-kid-a {
  margin: 2px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Two answers in a row with no question between them (the free reflection after
   the last answered prompt) would otherwise read as one paragraph. */
.rbm-kid-a + .rbm-kid-a {
  margin-top: 7px;
}

.rbm-kid-none,
.rbm-kid-note {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.rbm-kid-error {
  color: var(--danger, #e57373);
}


/* ── STACK: the same strip inside a Reflect grid cell ────────────────────
   One sub-period per line, and drawn tighter than the modal's — this hangs
   under a goal inside a cell that already holds several goals and a reflection
   tray, so it has to read as a footnote to the goal rather than a second card
   stack competing with it. */

.rbm-kids-toggle--stack {
  width: 100%;
  padding: 3px 6px;
  font-size: 0.7rem;
  border-radius: 6px;
}

.rbm-kids--stack {
  margin-top: 4px;
}

/* Down, not across — so no horizontal scroll to contain either. */
.rbm-kids-track--stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 0;
  overflow-x: visible;
}

.rbm-kids-track--stack .rbm-kid-col {
  gap: 3px;
  padding: 4px 5px;
  border-radius: 6px;
}

/* A sub-period with nothing in it is still a fact about the period and keeps
   its place — but stacked, seven "Nothing" boxes down a cell is most of what
   you see. So an empty one folds to its own single line: the day, and the word
   for what was on it. */
.rbm-kids-track--stack .rbm-kid-col.is-empty {
  flex-direction: row;
  gap: 6px;
  align-items: baseline;
}

.rbm-kids-track--stack .rbm-kid-col-title {
  font-size: 0.66rem;
}

.rbm-kids-track--stack .rbm-kid-head {
  gap: 4px;
  padding: 3px 4px;
  font-size: 0.74rem;
}

.rbm-kids-track--stack .rbm-kid-mark {
  font-size: 0.7rem;
}

.rbm-kids-track--stack .rbm-kid-body {
  padding: 0 5px 5px;
  font-size: 0.72rem;
}

.rbm-kids-track--stack .rbm-kid-none,
.rbm-kids-track--stack .rbm-kid-note {
  font-size: 0.68rem;
}