/* Danger Mode on the blocker modal
   (js/reflection-blocker/danger_mode_mount.js, danger_mode_effects.js).

   Its own stylesheet rather than more rules in reflection-blocker-modal.css,
   which is already the modal's longest file. Must load AFTER it: everything
   here either sits inside that card or overrides part of it.

   The whole feature is invisible until a session is armed. The button ships
   `hidden` and stays hidden unless Settings offers it; the bar ships `hidden`
   and stays hidden unless a session is running. A user who has never turned
   Danger Mode on sees a modal identical to the one that shipped before it. */

/* ── The button ──────────────────────────────────────────────────────────
   Outlined in the danger colour rather than filled with it. A solid red
   button beside Submit competes with it, and the thing that ends the session
   should never be easier to hit by accident than the thing that finishes it. */
.rbm-danger-toggle {
  padding: 6px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--danger, #e57373);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--danger, #e57373);
  border-radius: 6px;
}

.rbm-danger-toggle.is-armed {
  color: #fff;
  background: var(--danger, #e57373);
}

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

/* ── The readout ─────────────────────────────────────────────────────────
   A strip under the header, above the scroll area, so it is pinned while the
   reflection scrolls past it. Nothing on it is aria-live: it rewrites every
   second, and a screen reader narrating a countdown would talk over the
   sentence being typed — which is the sentence keeping the countdown away. */
.rbm-danger-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 22px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  background: rgba(var(--overlay-rgb), 0.04);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

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

.rbm-danger-badge {
  padding: 2px 7px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--danger, #e57373);
  border-radius: 4px;
}

/* The last three seconds. A pulse rather than a brighter colour: the bar is
   already red, and something that MOVES is what gets noticed by someone whose
   eyes are on the text they are writing. */
.rbm-danger-bar.is-critical {
  color: var(--danger, #e57373);
  animation: rbm-danger-pulse 0.6s ease-in-out infinite;
}

@keyframes rbm-danger-pulse {
  50% { background: rgba(229, 115, 115, 0.22); }
}

/* The heat edge: Redline's sidebar colour, reduced to a glow around the card.
   There are no side pads to paint here — the modal is the whole screen and its
   margins belong to the app behind it — so the same signal is carried by the
   card's own outline. `--dm-heat` is set per tick from dangerHeatColor(). */
.rbm-card.is-danger-hot {
  box-shadow: var(--shadow), 0 0 0 3px var(--dm-heat, transparent);
  transition: box-shadow 0.4s;
}

/* ── The session strip: the same two controls, with no modal to sit in ───
   `lock_to_reflect_tab` never mounts the modal, so the bar and the button move
   under the topbar (js/reflection-blocker/danger_mode_strip.js). Same classes,
   same rules above — these only place them.

   🔴 The host is `hidden` whenever the session is not OFFERED, and `[hidden]`
   is restated below because `display: flex` here would otherwise beat the
   browser's own `display: none`. That is load-bearing rather than tidy: this
   element sits above every view in the app, so a band that failed to hide would
   push the whole app down by its own height on every tab, forever, for a
   feature almost nobody has switched on. */
.danger-strip {
  display: flex;
  flex-direction: column;
  /* Pinned under the topbar, which is itself `sticky; top: 0; z-index: 30`.
     The modal's bar is pinned while the reflection scrolls past it for the same
     reason: the number on it is what someone decides whether to keep typing
     from, and one that scrolls away is a number nobody is reading at the moment
     it matters. `--dn-topbar-height` is published by
     js/reflect/reflect_row_state.js, which already measures that bar for the
     Reflect grid's own frozen header — one measurement, two consumers.
     z-index below the topbar's, so a strip can never cover it. */
  position: sticky;
  top: var(--dn-topbar-height, 52px);
  z-index: 29;
  /* OPAQUE, because it is sticky over scrolling content. The modal's bar wears
     a 4% overlay tint and gets away with it — it sits on a solid card. Here the
     grid would slide through it, which on a reddening screen would make the
     readout illegible at exactly the moment it is worth reading. */
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
}

.danger-strip[hidden] {
  display: none;
}

.danger-strip .dns-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  min-height: 38px;
}

/* Takes the width; the button sits at its end. On the modal the bar is a full
   strip too, so this is the same shape rather than a second layout. */
.danger-strip .dns-bar {
  flex: 1 1 auto;
  border-top: 0;
  border-bottom: 0;
}

/* The bar's understudy. Same box, same baseline, so arming changes what the
   band SAYS and never how tall it is — a row that grows by a line the moment a
   countdown starts would shove the grid down under the user's cursor. */
.danger-strip .dns-idle {
  display: flex;
  flex: 1 1 auto;
  gap: 10px;
  align-items: center;
  padding: 8px 22px;
  font-size: 0.85rem;
  color: var(--text-muted, var(--text-secondary));
}

.danger-strip .dns-idle[hidden] {
  display: none;
}

.danger-strip .dns-toggle {
  flex: 0 0 auto;
  align-self: center;
  margin-right: 22px;
}

/* ── The progress rail ───────────────────────────────────────────────────
   How much of the day is done, under the readout of what it costs to stop.
   Deliberately not the danger colour: this is the thing going RIGHT, and two
   red bars stacked on each other would make the one that means "about to
   delete" just another stripe. */
.danger-strip .dns-progress {
  position: relative;
  height: 14px;
  overflow: hidden;
  background: rgba(var(--overlay-rgb), 0.06);
}

.danger-strip .dns-progress-fill {
  width: 0;
  height: 100%;
  background: var(--accent);
  /* Slower than the 1Hz readout beside it on purpose: a requirement being met
     is an event worth watching land, not a number that ticks. */
  transition: width 420ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Legible ON the fill as well as beside it: the count sits at the right end and
   the fill arrives underneath it at exactly the moment the number is worth
   reading. A halo in the band's own background rather than a plate, so it does
   not read as a second control. */
.danger-strip .dns-progress-count {
  position: absolute;
  top: 0;
  right: 22px;
  text-shadow: 0 0 3px var(--bg), 0 0 2px var(--bg);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .danger-strip .dns-progress-fill {
    transition: none;
  }
}

/* The heat edge again, this time as an underline on the strip rather than a
   ring: there is no card here to outline, and a 3px halo across the top of the
   app would read as a broken layout rather than as a warning. */
.danger-strip.is-danger-hot {
  box-shadow: inset 0 -3px 0 0 var(--dm-heat, transparent);
  transition: box-shadow 0.4s;
}

/* ── Redaction ───────────────────────────────────────────────────────────
   The textarea keeps its caret and loses its ink; the overlay above it draws
   the same characters with the letter-runs barred. See danger_mode_effects.js
   for why this is an overlay and not a wrapper. */
textarea.dm-redacted {
  color: transparent !important;
  caret-color: var(--text-primary);
}

textarea.dm-redacted::selection {
  color: transparent;
}

.dm-redact-overlay {
  position: fixed;
  z-index: 9100;   /* above the modal card (9000), below its notices */
  overflow: hidden;
  color: var(--text-primary);
  pointer-events: none;
  background: transparent;
}

.dm-redact-overlay > div {
  will-change: transform;
}

.dm-redact-run {
  color: transparent;
  background: #000;
  border-radius: 7px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ── The notice ──────────────────────────────────────────────────────────
   Over the modal, not instead of it: the checklist behind has just lost every
   tick it had, and covering that for a moment is kinder than watching it
   uncross itself row by row. */
.rbm-danger-notice {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--overlay-rgb), 0.6);
}

.rbm-danger-notice-card {
  max-width: 440px;
  padding: 36px 44px;
  text-align: center;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.rbm-danger-notice-title {
  margin-bottom: 12px;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--danger, #e57373);
}

.rbm-danger-notice-body {
  margin-bottom: 26px;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ── The clock ─────────────────────────────────────────────────────────────
   The countdown rides in the danger bar's existing readout, so it needs no
   box of its own on the popup. What it does need is a state for "this notice
   is not a deletion": the wipe notice is red because something was lost, and
   a session that simply ran out of time did not lose anything. */
.rbm-danger-notice.is-end .rbm-danger-notice-title {
  color: var(--text-primary);
}

/* Locked: the footer keeps its shape with the exits gone, so the submit
   button does not jump across the row when a session arms. */
.rbm-backdrop.is-danger-locked .rbm-foot-actions {
  justify-content: flex-end;
}

/* ── The planning sidebar's clock ──────────────────────────────────────────
   A line under the "It is 14:12…" sentence rather than a badge in the header:
   the header is one row and already holds the title and the ×, and the × is
   the thing a lock takes away. */
.forced-planning-clock {
  margin: 0 0 10px;
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.forced-planning-clock.is-critical {
  color: var(--danger, #e57373);
}

/* No × to reach for, so nothing should look like one. */
.forced-planning-panel.is-danger-locked .forced-planning-header {
  padding-right: 12px;
}