/* The focused Danger Mode session: one area on screen, everything else hidden.
 *
 * 🔴 HIDDEN, NEVER DETACHED. Every rule below is `display: none` on a node that
 * stays in the document, and that is a correctness requirement rather than a
 * styling choice — the running session measures words across every reflection
 * box in the modal, submitting flushes unwritten paragraphs out of them, and the
 * renderers draw into containers they were mounted in. An area removed from the
 * DOM would drop out of all three, and the first of those DELETES THE DAY. See
 * `js/danger-focus/danger_focus_view.js`.
 *
 * The stage is `[data-focus-active]`, put on exactly one section and one area
 * inside it. Nothing here reaches for a nth-child or an id: which area is up is
 * a decision, and a decision belongs in an attribute.
 */

/* ── The window ──────────────────────────────────────────────────────────
 *
 * A focused session is not a modal over the app: it REPLACES the screen. The
 * backdrop loses its padding and its blur, the card loses its border and its
 * remembered width, and what is left is three columns — the clock, the work, the
 * rate — over the whole viewport. Nothing of the app is visible behind it,
 * because everything behind it is something else to think about.
 */

.rbm-backdrop.is-danger-focus {
  padding: 0;
  background: var(--bg, #181919);
  backdrop-filter: none;
}

.is-danger-focus .rbm-card {
  display: grid;
  /* Literal thirds. The clock and the rate are readouts and the middle is a
   * paragraph, so the middle could argue for more — but the clock is the largest
   * type on the screen and a column that cannot hold it is a clock that wraps. */
  grid-template-columns: 1fr minmax(0, 1fr) 1fr;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "rail rail rail"
    "left stage right"
    "foot foot foot";
  /* 🔴 `!important` earns its place exactly once, here. The card's width is an
   * INLINE style — `reflection_blocker_modal_resize.js` writes the remembered
   * drag width onto the element — and an inline declaration beats a stylesheet
   * by specificity no selector can win. Without this the full-bleed window opens
   * at whatever width the user last dragged the dialog to. */
  width: 100% !important;
  max-width: none;
  height: 100%;
  max-height: none;
  background: var(--bg, #181919);
  border: 0;
  border-radius: 0;
}

/* The rings, the title and the session's own readout are all about the whole
 * day. The columns beside the stage say everything this screen needs said, and
 * they say it without scrolling away. */
.is-danger-focus .rbm-head,
.is-danger-focus .rbm-danger-bar {
  display: none;
}

.is-danger-focus .dnf-rail { grid-area: rail; }
.is-danger-focus .dnf-left { grid-area: left; }
.is-danger-focus .rbm-scroll { grid-area: stage; }
.is-danger-focus .dnf-right { grid-area: right; }
.is-danger-focus .rbm-foot { grid-area: foot; }

/* ── The queue, as one hairline ──────────────────────────────────────────
 * One segment per area, no labels, no percentage. It answers "how much of this
 * is left" at a glance and asks for nothing in return — which is the whole
 * budget a progress indicator gets on a screen someone is writing on. */

.dnf-rail {
  display: flex;
  gap: 3px;
  height: 3px;
}

.dnf-rail span {
  flex: 1;
  background: rgba(var(--overlay-rgb, 255, 255, 255), 0.07);
  transition: background 180ms ease;
}

/* Deliberately `--accent` and not the danger colour: this is the thing going
 * RIGHT, and a red bar above a red clock would flatten the one that means
 * *about to delete* into another stripe. */
.dnf-rail span.is-done { background: rgba(74, 158, 255, 0.55); }
.dnf-rail span.is-current { background: var(--accent, #6ea8fe); }

/* ── The two side columns ────────────────────────────────────────────── */

.dnf-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 32px;
  font-variant-numeric: tabular-nums;
}

/* Spacing is the flex gap's job alone — a default paragraph margin in here
 * throws the two columns apart by a line height each. */
.dnf-side p {
  margin: 0;
}

.dnf-left { align-items: flex-start; }

.dnf-right {
  align-items: flex-end;
  text-align: right;
}

/* Put away with the stage. `[hidden]` is otherwise beaten by the `display`
 * above, and a countdown left standing over the stacked screen would be a clock
 * for an area that is no longer on it. */
.dnf-side[hidden],
.dnf-rail[hidden],
.dnf-stage-head[hidden],
/* 🔴 `.dnf-idle` is in this list because the phone layout gives it
 * `display: flex`, and an author `display` beats the browser's own
 * `[hidden] { display: none }`. Without this, the first time the inactivity
 * countdown appeared on a phone it would STAY on screen — "4 seconds before
 * everything is deleted", frozen, over a session that is no longer in any
 * trouble at all, and left standing after the session ends. Every element in
 * this feature that both takes a `display` and is put away with `hidden` needs
 * a line here. */
.dnf-idle[hidden] {
  display: none;
}

/* The largest thing on the screen, because it is the thing that costs the
 * most. */
.dnf-clock {
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.dnf-stake {
  max-width: 15ch;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-secondary, #aaa);
}

/* Where in the queue this area is. Only up when there is no clock to read
 * instead — otherwise the rail says it, silently. */
.dnf-steps {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
}

/* ── What this area still owes ───────────────────────────────────────── */

.dnf-words,
.dnf-goals,
.dnf-questions {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-secondary, #aaa);
}

.dnf-words.is-met,
.dnf-questions.is-met {
  color: var(--success, #33c46e);
}

.dnf-more {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted, #777);
}

.dnf-rate {
  margin-top: 22px;
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1;
}

.dnf-floor {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary, #aaa);
}

/* The inactivity countdown exists only inside its own last ten seconds. Before
 * that there is nothing to answer and nothing on screen. */
.dnf-idle {
  margin-top: 18px;
  color: var(--rfl-danger-red, #ff2b2b);
}

.dnf-idle-num {
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 1;
}

.dnf-idle-label {
  max-width: 17ch;
  margin-top: 4px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ── The one alarm this screen has ───────────────────────────────────────
 *
 * The clock blinks when the area is about to run out; the rate and its floor
 * blink when the writing is too slow; the countdown blinks when it starts. All
 * three are the same pulse, because they are three ways of saying one thing.
 *
 * 🔴 NEVER TO INVISIBLE. It bottoms out at 35%: the number being warned about is
 * the number that has to be acted on, and a digit that disappears every half
 * second is a digit nobody can read while deciding what to do about it. */
@keyframes dnf-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.dnf-clock.is-blinking,
.dnf-stake.is-blinking,
.dnf-rate.is-blinking,
.dnf-floor.is-blinking,
.dnf-idle.is-blinking {
  /* A literal fallback on every token: an unknown custom property invalidates
   * the whole declaration, and the rings shipped invisible that way once. */
  color: var(--rfl-danger-red, #ff2b2b);
  animation: dnf-blink 900ms steps(30) infinite;
}

/* ── How close, in how fast ──────────────────────────────────────────────
 *
 * The rate warns over a BAND — ten words per minute of headroom, the same width
 * Redline's heat strip reddens over — not at the moment the floor breaks, which
 * is a moment the screen never gets to paint because the session has already
 * deleted the day by then. So the pulse carries the distance: a lazy 1.5s at the
 * top of the band, 800ms sitting on the floor.
 *
 * `--dnf-wpm-mix` is written by `danger_focus_vitals.js` (0 → 1, from
 * `dangerWpmMix`). The fallback is what an unset property paints: the slow end,
 * never a still one. */
.dnf-rate.is-blinking,
.dnf-floor.is-blinking {
  animation-duration: calc(1500ms - (var(--dnf-wpm-mix, 0) * 700ms));
}

/* The colour still carries the warning; only the motion goes. */
@media (prefers-reduced-motion: reduce) {
  .dnf-side .is-blinking {
    animation: none;
  }
}

/* ── The stage ───────────────────────────────────────────────────────────
 * One column of reading measure, centred, with the goal being reflected on at
 * the top of it. */

.is-danger-focus .rbm-scroll {
  padding: 5vh 24px 40px;
}

.is-danger-focus .rbm-scroll > * {
  max-width: 680px;
  margin-right: auto;
  margin-left: auto;
}

.dnf-stage-head {
  margin-bottom: 22px;
}

.dnf-span {
  margin: 0 0 10px;
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted, #777);
}

/* 🔴 The title of this window IS the goal being reflected on. It is the one
 * thing that says which of nine near-identical areas is up, and it is the whole
 * reason the rest of the screen can afford to be this empty. */
.dnf-title {
  margin: 0;
  font-size: 1.95rem;
  font-weight: 620;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.dnf-next[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.dnf-showall {
  background: none;
  border: 1px solid var(--border-subtle, rgba(128, 128, 128, 0.25));
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 0.85rem;
  color: var(--text-secondary, #aaa);
  cursor: pointer;
}

.dnf-showall:hover {
  color: var(--text-primary, #eee);
}

/* ── The stage ───────────────────────────────────────────────────────── */

/* The parts of the screen that are about the WHOLE day. They are not wrong,
 * they are just not this area — and the queue's own bar is the readout while
 * one is on. They come back at the end (`is-danger-focus-done`). */
.is-danger-focus .rbm-checklist-slot,
.is-danger-focus .rbm-planning-slot,
.is-danger-focus .rbm-questions > .rbm-check-title,
.is-danger-focus [data-period-scope] > .rbm-check-title,
.is-danger-focus .rbm-col-sub {
  display: none;
}

.is-danger-focus [data-period-scope] {
  display: none;
}

.is-danger-focus [data-period-scope][data-focus-active] {
  display: block;
}

/* One column of a grid whose other rows are hidden is not a grid any more, and
 * leaving it as one leaves the collapsed rows' tracks behind as empty bands of
 * space above the area. */
.is-danger-focus .rfl-view .rfl-track {
  display: block;
}

/* The band names the parent goal — which is exactly what the title of this
 * window now says, in larger type, at the top of the area itself.
 *
 * 🔴 SCOPED THROUGH `.rfl-view`, and that is not decoration. `views/reflect/
 * reflect.css` declares `.rfl-view .rfl-band { display: flex }` at the same
 * specificity as a bare `.is-danger-focus .rfl-band`, and it is loaded by the
 * view module AFTER this file's `<link>` — so the tie went to reflect.css and
 * this rule did nothing at all from the day it was written. What that looked
 * like: the staged area wearing a chip that repeated its own title, and a second
 * chip under it belonging to an area that is NOT on screen. The same tie exists
 * for `.rfl-track` below, and the fix is the same. */
.is-danger-focus .rfl-view .rfl-band {
  display: none;
}

.is-danger-focus .rfl-cell {
  display: none;
}

.is-danger-focus .rfl-cell[data-focus-active] {
  display: block;
}

/* ⚠️ Scoped through `[data-period-scope] >` on purpose. `.ltg-rows` is ALSO the
 * container class inside every cell (`ltg-rows rfl-cell-rows`), so an unscoped
 * `.ltg-rows > .ltg-row` would hide the goal cards inside the area that is
 * supposed to be on screen — the whole stage, blank. Only the year section
 * hangs its rows directly off the section wrap. */
.is-danger-focus [data-period-scope] > .ltg-rows > .ltg-row {
  display: none;
}

.is-danger-focus [data-period-scope] > .ltg-rows > .ltg-row[data-focus-active] {
  display: block;
}

/* One area gets the whole screen, so it can afford to be readable. */
.is-danger-focus [data-focus-active] .gd-daily-card,
.is-danger-focus [data-focus-active] .ltg-row-main {
  font-size: 1.05rem;
}

/* ⚠️ The daily card's reflection box does NOT take this, and chasing it is a
 * trap worth naming: the modal mounts the day surface twice (the questions slot
 * and the day column), the two copies wear different root classes, and the
 * visible one is styled by a rule this file has not been able to outrank at any
 * specificity tried. The box keeps the card's own 13px and auto-grows as you
 * type, which is what the rest of the app does — and "consistent with the rest
 * of the app" is what this screen was asked for. If it is ever worth changing,
 * change it on the CARD, not from here. */
.is-danger-focus [data-focus-active] textarea {
  font-size: 1.05rem;
  line-height: 1.6;
}

/* ── Taking the panel off ────────────────────────────────────────────────
 *
 * A cell is drawn as a bordered card because on the stacked screen it is one of
 * nine and the border is what says where each ends. Here there is only ever one,
 * and a box drawn around the only thing on screen is a line that separates it
 * from nothing. The area becomes the page. */
.is-danger-focus .rbm-col {
  border-color: transparent;
}

/* The in-card word count and the parent chip are both SECOND copies of
 * something this window already says — the count is the right-hand column, and
 * the chip is the title. Two readings of one number is the thing that goes
 * stale; two readings of one goal is just noise on a screen built to have none.
 *
 * ⚠️ The chip is also the control that re-parents the goal. It is hidden, not
 * removed, and one press of "Show the whole screen" has it back — re-filing a
 * goal under a different parent is not what someone is doing in the ninety
 * seconds they have to write about it. */
.is-danger-focus [data-focus-active] .ltg-word-count,
.is-danger-focus [data-focus-active] .gd-link-tags {
  display: none;
}

/* ── The end of the queue ────────────────────────────────────────────── */

/* After the rules above, so these win on equal specificity. Everything that is
 * about the whole day comes back, because the whole day is now the question:
 * what is left is the planning conditions, which are answered somewhere else. */
.is-danger-focus-done .rbm-checklist-slot,
.is-danger-focus-done .rbm-planning-slot {
  display: block;
}

.is-danger-focus-done .rbm-questions,
.is-danger-focus-done [data-period-scope] {
  display: none;
}

/* ── The phone ───────────────────────────────────────────────────────────
 *
 * There is no room for three columns, and the answer is not to shrink them: the
 * two rails become one bar across the top, above the work, in the order they are
 * read — the clock first, then what the area owes. The writing keeps the whole
 * width, which is the only part of this screen that needs it. */

@media (max-width: 900px) {
  .is-danger-focus .rbm-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "rail"
      "left"
      "right"
      "stage"
      "foot";
  }

  .dnf-side {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
    padding: 10px 16px;
  }

  .dnf-left {
    padding-bottom: 2px;
  }

  .dnf-right {
    justify-content: flex-start;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle, rgba(128, 128, 128, 0.25));
  }

  .dnf-clock { font-size: 2rem; }
  .dnf-stake { max-width: none; font-size: 0.85rem; }
  .dnf-words,
  .dnf-goals,
  .dnf-questions { font-size: 1rem; }
  .dnf-rate { margin-top: 0; font-size: 1.25rem; }
  .dnf-floor { font-size: 0.85rem; }

  /* Baseline-aligned like everything else on the bar, rather than a stacked
   * block that would push the writing off the screen every time it appears. */
  .dnf-idle {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 0;
  }

  .dnf-idle-num { font-size: 1.5rem; }
  .dnf-idle-label { max-width: none; margin-top: 0; font-size: 0.8rem; }

  .is-danger-focus .rbm-scroll { padding: 22px 16px 32px; }
  .dnf-title { font-size: 1.6rem; }
}