/* The reflection blocker's full-screen modal (js/reflection-blocker/
   reflection_blocker_modal.js) and the panel's blocked-navigation blink.

   Kept out of styles/reflection-blocker.css because that file is the LEFT-slot
   sidebar and this is the surface that covers everything — they share a feature,
   not a layout. Loaded after it so the blink rule can rely on the panel's own
   positioning already being in effect. */

/* ── The blink a refused tab click produces ─────────────────────────────── */

@keyframes reflection-blocker-flash {
  0%, 100% { box-shadow: var(--shadow); }
  25%, 75% { box-shadow: 0 0 0 3px var(--accent); }
}

.reflection-blocker-panel.reflection-blocker-flash {
  animation: reflection-blocker-flash 700ms ease-in-out 2;
}

/* ── The modal ──────────────────────────────────────────────────────────── */

/* Above every sidebar (z-index 50) and the long-term popup, because the whole
   claim of this surface is that nothing is reachable past it. */
.rbm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgb(4 8 14 / 78%);
  backdrop-filter: blur(3px);
}

/* Stepping aside for a brain-dump drag hides the modal, not the lock — the
   navigation gate is a separate layer and stays on. `visibility` rather than
   `display:none` so the resume button below can stay clickable. */
.rbm-backdrop.is-stepped-aside {
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
}

.rbm-backdrop.is-stepped-aside .rbm-card {
  visibility: hidden;
}

/* Wide on purpose. A period goal here can unfold a whole week of children side
   by side (see `.rbm-kids-track`), and seven columns inside an 860px dialog are
   seven columns nobody can read. The cap keeps it from stretching to absurd line
   lengths on an ultrawide; below that it takes the screen it is given. */
.rbm-card {
  position: relative;   /* anchors the side resize handles */
  display: flex;
  flex-direction: column;
  width: min(1700px, 100%);
  max-height: 100%;
  overflow: hidden;
  color: var(--text-primary);
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.rbm-card:focus {
  outline: none;
}

/* ── Dragging the card wider ────────────────────────────────────────────
   A grab strip down each side edge (js/reflection-blocker/
   reflection_blocker_modal_resize.js). Inside the card rather than straddling
   its border, because the card is `overflow: hidden` and anything hanging past
   the edge would simply be clipped away. */

.rbm-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 9px;
  cursor: ew-resize;
}

.rbm-resize--left {
  left: 0;
}

.rbm-resize--right {
  right: 0;
}

.rbm-resize:hover,
.rbm-card.is-resizing .rbm-resize {
  background: linear-gradient(var(--accent), var(--accent)) no-repeat center / 2px 100%;
}

/* Text selection follows a fast drag straight out of the handle otherwise, and
   the modal ends up highlighted end to end. */
.rbm-card.is-resizing {
  user-select: none;
}

.rbm-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  justify-content: space-between;
  /* The rings live in here now, and on a narrow card they take the second row
     rather than squeezing the title into one word per line. */
  flex-wrap: wrap;
  padding: 18px 22px 14px;
  background: rgba(var(--overlay-rgb), 0.03);
  border-bottom: 1px solid var(--border-subtle);
}

/* Give the title the space it needs first: the rings shrink and wrap, the
   sentence explaining why the screen is up does not. */
.rbm-head-text {
  flex: 1 1 260px;
  min-width: 0;
}

.rbm-rings-slot {
  display: flex;
  justify-content: flex-end;
  flex: 0 1 auto;
  min-width: 0;
}

.rbm-title {
  margin: 0;
  font-size: 1.15rem;
}

.rbm-subtitle {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* The "N of M done" pill lived here until 2026-08-02. It counted CONDITIONS,
   which is a different number from every number under it — "3 of 9" beside a
   day owing forty goal-words — and two totals disagreeing in one header is
   worse than one of them missing. The rings replaced it in the same corner. */

.rbm-scroll {
  flex: 1;
  min-height: 0;
  padding: 16px 22px;
  overflow-y: auto;
}

.rbm-check-title {
  margin: 18px 0 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.rbm-checklist .rbm-check-section:first-child .rbm-check-title {
  margin-top: 0;
}

/* One rounded panel per requirement group, so the checklist reads as a block of
   status rather than as loose lines above the work. */
.rbm-check-section {
  padding: 10px 12px;
  margin-bottom: 8px;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.rbm-check-section .rbm-check-title {
  margin-top: 0;
}

.rbm-check-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 5px 0;
  font-size: 0.92rem;
}

.rbm-check-mark {
  font-weight: 700;
  color: var(--danger, #e57373);
}

/* Met requirements stay on screen, dimmed. Removing them would take the sense
   of progress away, which is the one thing this screen exists to give. */
.rbm-check-row.is-met {
  color: var(--text-secondary);
}

.rbm-check-row.is-met .rbm-check-mark {
  color: var(--success, #33c46e);
}

.rbm-empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* ── The brain-dump section ─────────────────────────────────────────────── */

.rbm-dump:empty {
  display: none;
}

.rbm-dump-hint,
.rbm-dump-error {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

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

.rbm-dump-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid var(--pbd-due, #e57373);
  border-radius: 8px;
}

.rbm-dump-text {
  min-width: 0;
  font-size: 0.92rem;
}

.rbm-dump-parent {
  display: block;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.rbm-dump-actions {
  display: flex;
  flex-shrink: 0;
  gap: 6px;
}

.rbm-dump-btn,
.rbm-dump-open {
  padding: 4px 10px;
  font-size: 0.82rem;
  color: var(--text-primary);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}

.rbm-dump-btn:disabled {
  cursor: default;
  opacity: 0.5;
}

.rbm-dump-open {
  margin-top: 4px;
}

/* ── The goal surfaces ──────────────────────────────────────────────────
   The day's cards are the Daily Goals tab's own (`renderDailyGroups`) and the
   prior periods are the goal tree's own rows (`buildPeriodGoalRow`), so their
   look comes from those views' stylesheets — loaded globally in index.html.
   Nothing here re-declares a card, a field or a counter; these are only the
   handful of rules that make a VIEW root behave as a block inside a modal. */

.rbm-card .gd-view {
  height: auto;
  min-height: 0;
  padding: 0;
  overflow: visible;
}

.rbm-card .gd-view .section-card {
  margin-bottom: 12px;
}

/* An empty section (no goals of that kind that day) would otherwise show a bare
   heading over nothing. */
.rbm-card .section-card:has(> .ltg-rows:empty) {
  display: none;
}

.rbm-period .rbm-check-title,
.rbm-col .rbm-check-title {
  margin-top: 0;
}

/* A prior period is REFLECTED on here, not edited: the goal-tree row's delete
   and colour controls would act on a goal the user came to write about, so they
   are hidden (the text field is set read-only in the module for the same
   reason). The rating pill stays — scoring how a finished period went is part of
   reflecting on it. */
.rbm-period .ltg-remove,
.rbm-period .ltg-color-btn,
.rbm-period .ltg-color-locked,
.rbm-period .ltg-color-options {
  display: none;
}

/* The word count reads "12 / 50 words" here — see `data-word-target` in
   weekly_long_term_goals_helpers.js — and says so in colour. */
.rbm-card .ltg-word-count.is-met {
  color: var(--success, #33c46e);
}

/* ── A shut row still says what it owes ─────────────────────────────────
   Shutting the trays is how a long list gets scanned, and the question being
   scanned for is "which of these still need writing" — so the count has to
   survive the collapse, in the same colour it uses when the requirement is met.

   The goal-tree row already keeps a count in its bottom strip FOR that state.
   It is a duplicate while the tray is open, though, so it shows only when shut;
   and it now reads the same `data-word-target` as the one under the box, so the
   two can no longer disagree ("65 words" beside "65 / 100 words"). */
.rbm-period .ltg-row:has(.wlg-reflection-wrap:not([hidden])) .ltg-word-count--foot {
  display: none;
}

/* The daily card keeps its count in the actions strip, which lives INSIDE the
   part that collapses — so the strip is held open while the rest of the tray
   folds away. The pencil goes with the questions it edits; a shut card offers
   the count and nothing else. */
.rbm-card .gd-daily-group .gd-daily-reflect[hidden] {
  display: flex;
  padding-top: 0;
  border-top: none;
}

.rbm-card .gd-daily-group .gd-daily-reflect[hidden] > .gd-daily-prompts,
.rbm-card .gd-daily-group .gd-daily-reflect[hidden] .icx-prompts-edit-toggle {
  display: none;
}

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

/* ── A finished period: ONE COLUMN of the Reflect grid ──────────────────
   The week, month and quarter sections are not lists of their own goals any
   more. Each one's rows are the goals of the period ABOVE it, holding the goals
   set under them with the tray open — which is one column of
   `views/reflect/reflect.css`'s own grid, drawn by that grid's own markup
   builders. That stylesheet does the work; these are only the differences
   between a grid on a page and a grid in a modal. (The YEAR has no tier above it
   and keeps the `.wlg-view` list; see `reflection_blocker_modal_periods.js`.)

   🔴 It is a VIEW stylesheet, injected by the router on first visit to Reflect,
   so this screen may be the first thing to need it — `ensureReflectStyles` in
   `reflection_blocker_modal_period_column.js` is what puts it on the page. */

.rbm-col {
  /* The grid's root paints itself as the app's flat week surface, edge to edge.
     Inside a dialog that is a slab with no edges: the section is a block among
     other blocks here, so it gets the border and radius the others have. */
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}

.rbm-col .rbm-check-title,
.rbm-col-sub {
  padding: 0 12px;
}

.rbm-col-sub {
  margin: 2px 0 6px;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

/* One column, so there is no header row to freeze and nothing to scroll
   sideways. The grid's `.rfl-dayhead` is not built here at all; the heading
   above names the period in words. */
.rbm-col .rfl-track {
  padding-bottom: 6px;
}

/* A finished period is REFLECTED on here, not extended: the cell's `+` adds a
   goal to the period being written about, which on a lock screen is an edit of
   the past. The forward `+` is the strip under each row ("Set a goal in light of
   this"), which writes into the period now running. Hidden rather than removed —
   the cell markup is the grid's, and this screen does not get to fork it. */
.rbm-col .rfl-cell-add {
  display: none;
}

/* The next-goal strip sits under the cell's cards, inside the cell, so it reads
   as belonging to that parent goal rather than to the section. */
.rbm-col .rfl-cell .rbm-next {
  margin-top: 8px;
}

/* ⚠️ The tray's own ▾ comes BACK on this screen. `views/reflect/reflect.css`
   hides it because that surface's trays never close, but shutting a tray is how
   a long checklist is scanned here — and the rule right above (a shut card keeps
   its actions strip) exists precisely so a folded card still reads "0 / 50
   words". Without the toggle a goal can only be folded by collapsing its whole
   parent row, which takes the count with it. `display: flex` is the class's own
   value in `views/goals-dashboard/goals-dashboard.css`, restated rather than
   `revert` so it does not depend on which sheet loaded last. */
.rbm-col .rfl-cell .gd-toggle {
  display: flex;
}

/* The sub-period strip's band is FULL WIDTH under the goal — that is what makes
   it findable, and what `styles/period-children.css` says it is. It got that
   for free in the goal-tree row (a flex column stretches its children); the
   shared card mounts it in a plain block instead, where a `<button>` shrinks to
   its own words. Stated here rather than on the base rule so the grid's own
   stacked variant, which already sizes itself, is untouched. */
.rbm-col .gd-daily-children > .rbm-kids-toggle {
  display: block;
  width: 100%;
}

/* ── What happened under a finished period goal ─────────────────────────
   The strip under each row (`.rbm-kids*`, `.rbm-kid*`) moved to
   styles/period-children.css on 2026-08-08, when the Reflect grid became its
   second host. Nothing modal-specific was left behind — the rules were
   already about the strip rather than about the dialog it sat in. */

/* ── Planning (the part that happens on the calendar) ───────────────────── */

.rbm-planning:empty {
  display: none;
}

/* ── The footer ─────────────────────────────────────────────────────────── */

.rbm-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  background: rgba(var(--overlay-rgb), 0.03);
  border-top: 1px solid var(--border-subtle);
}

.rbm-message {
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.rbm-message.is-ready {
  color: var(--success, #33c46e);
}

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

.rbm-foot-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.rbm-settings-link {
  padding: 6px 12px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}

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

/* The one control that survives stepping aside. */
.rbm-resume[hidden] {
  display: none;
}

.rbm-resume {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9001;
  padding: 10px 16px;
  font-weight: 600;
  color: #0b0f16;
  pointer-events: auto;
  cursor: pointer;
  background: var(--accent);
  border: none;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
}

/* The page behind must not scroll under the modal. */
body.reflection-blocker-modal-open {
  overflow: hidden;
}

@media (width <= 720px) {
  .rbm-backdrop {
    padding: 0;
  }

  /* Full-screen already, so there is no width left to drag for and a grab strip
     down each edge would only be something to catch a thumb on. The `!important`
     is aimed at the inline width a desktop session stored — same account, same
     localStorage, different screen. */
  .rbm-card {
    width: 100% !important;
    height: 100%;
    max-height: none;
    border: none;
    border-radius: 0;
  }

  .rbm-resize {
    display: none;
  }
}