/* ══ The Big Red Button ══════════════════════════════════════════════════
   A control, not a decoration: full width of the Live Demand card's foot,
   duration wheel on the left, one red action filling the rest. The wrap
   opens with the 0fr→1fr grid-rows trick while the lift translates up from
   inside the card's clip, with a slight spring overshoot, and the
   THIS MONTH'S PEAK / CURRENT LIMIT readouts collapse in the same beat -
   the control REPLACES that row rather than stacking under it. A breathing
   glow marks it armed. While a shed runs the same button inverts to white
   with red ink and reads End Load Shed, and the wheel becomes the
   countdown. Dark-theme counterparts live in fmc-bp-dark.css. */
.brb-wrap { display: grid; grid-template-rows: 0fr; margin-top: 0;
  transition: grid-template-rows .52s cubic-bezier(.32,1.18,.42,1), margin-top .52s cubic-bezier(.32,1.18,.42,1); }
.brb-wrap.is-up { grid-template-rows: 1fr; margin-top: 8px; }
.brb-wrap[hidden] { display: none; }
.brb-clip { overflow: hidden; min-height: 0; }
/* Open state, settled: the clip did its job during the fold; leaving it on
   afterward slices the keycap's shadow into a hard rectangle on all four
   sides (2026-08-01, John). showWrap adds .is-settled after the .52s fold
   clock; hideWrap removes it before folding shut. */
.brb-wrap.is-settled .brb-clip { overflow: visible; }
.brb-lift { transform: translateY(106%); opacity: 0; padding: 2px 2px 20px;
  transition: transform .52s cubic-bezier(.30,1.32,.44,1), opacity .38s ease; }
.brb-wrap.is-up .brb-lift { transform: translateY(0); opacity: 1; }
/* The readouts' half of the swap: while the button holds their slot they
   fold to nothing on the same clock the wrap opens on, so the card trades
   one row for the other in a single motion. */
.bs-watch--inline .bs-readouts { max-height: 300px;
  transition: max-height .52s cubic-bezier(.32,1,.42,1), opacity .26s ease, margin .52s cubic-bezier(.32,1,.42,1); }
.bs-watch--inline .bs-readouts.brb-swapped { max-height: 0; opacity: 0;
  margin-top: 0; margin-bottom: 0; overflow: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .brb-wrap, .brb-lift, .bs-watch--inline .bs-readouts { transition: none; }
}

/* The DRILL word: an eyebrow-weight amber tag in the confirm modal, the
   ONE place a drill announces itself. No pill, no background - just the
   word, to the right of LOAD SHED. */
.brb-chip {
  font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: #A26A00; }
.brb-modal-eyebrow { display: inline-flex; align-items: center; gap: 8px; }

/* ── The row: duration wheel + the button ── */
.brb-row { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: stretch; }
@media (max-width: 540px) { .brb-row { grid-template-columns: 84px 1fr; gap: 10px; } }

/* ── Duration wheel: one glance, one thumb (2026-07-31, John) ──
   A snap-scrolling column of durations behind a fixed center window; the
   value under the ring is the chosen one. Rows fade toward the wheel's
   edges with a mask so it reads as a drum, not a list. */
.brb-side { position: relative; min-height: 0; border-radius: 14px;
  background: rgba(255,255,255,0.55); border: 0.5px solid rgba(14,42,82,0.16); }
.brb-side::after { /* the center window */
  content: ""; position: absolute; left: 5px; right: 5px; top: 50%; height: 36px;
  transform: translateY(-50%); border-radius: 10px; pointer-events: none;
  border: 1.5px solid var(--bp-red-ring, rgba(192,57,43,0.28));
  background: var(--bp-red-tint, rgba(192,57,43,0.10)); opacity: .55; }
.brb-side.is-timer { background: transparent; border: 0; display: flex; flex-direction: column; }
.brb-side.is-timer::after { display: none; }
.brb-wheel { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column;
  scroll-snap-type: y mandatory; overscroll-behavior: contain; touch-action: pan-y;
  scrollbar-width: none; -ms-overflow-style: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 34%, #000 66%, transparent 97%);
  mask-image: linear-gradient(to bottom, transparent 3%, #000 34%, #000 66%, transparent 97%); }
.brb-wheel::-webkit-scrollbar { display: none; }
.brb-wheel-pad { flex: 0 0 auto; height: calc(50% - 18px); }
.brb-int { appearance: none; flex: 0 0 auto; height: 36px; width: 100%; font: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center; scroll-snap-align: center;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.01em;
  color: rgba(14,42,82,0.45); background: none; border: 0; padding: 0;
  transition: color .18s ease, font-size .18s ease, transform .18s ease;
  -webkit-tap-highlight-color: transparent; }
.brb-int:hover { color: var(--bp-red-deep, #a02a1d); }
.brb-int.is-on { color: var(--bp-red-deep, #a02a1d); font-weight: 800; font-size: 15.5px; }
.brb-int:focus-visible { outline: 2px solid var(--bp-red, #c0392b); outline-offset: -2px; border-radius: 10px; }

/* The side column while a shed runs: the countdown takes the selector's place. */
.brb-timer { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; border-radius: 12px; background: var(--bp-red-tint, rgba(192,57,43,0.10));
  border: 0.5px solid var(--bp-red-ring, rgba(192,57,43,0.28)); padding: 8px 4px; }
.brb-timer-val { font-size: 21px; font-weight: 750; letter-spacing: -.02em;
  color: var(--bp-red-deep, #a02a1d); font-variant-numeric: tabular-nums; }
.brb-timer-lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(160,42,29,0.75); }

/* ── The button itself ──
   A pressed-metal keycap: hard ledge under the face (the 0 6px 0 stop),
   soft throw shadows past it, a top highlight, and a real 6px travel when
   pressed. The lettering wears the LIVE DEMAND eyebrow's grammar - same
   family, 800 weight, uppercase, positive tracking. */
.brb-btn { position: relative; appearance: none; border: 0; cursor: pointer; font: inherit;
  touch-action: pan-y; /* keep horizontal pointer moves for swipe-to-clear (2026-08-01) */
  min-height: 104px; border-radius: 18px; padding: 16px 20px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #E25543 0%, #D0402F 34%, var(--bp-red, #c0392b) 62%, #A32C1C 100%);
  border: 0.5px solid rgba(122,22,12,0.55);
  box-shadow: 0 6px 0 #7E1B0F, 0 20px 38px -14px rgba(160,42,29,0.55), 0 9px 14px -6px rgba(160,42,29,0.40),
              inset 0 1.5px 0 rgba(255,255,255,0.34), inset 0 -3px 8px rgba(90,12,6,0.30);
  transition: transform .13s cubic-bezier(.3,.9,.4,1.4), box-shadow .16s ease,
              background .22s ease, color .22s ease, border-color .22s ease;
  -webkit-tap-highlight-color: transparent; overflow: hidden; }
/* (The one-shot glass sheen came off 2026-08-01, John - it read as a
   shimmer over the keycap. No ::after remains on the button.) */
.brb-btn-text { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.brb-btn-label { color: #fff; font-size: 19.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; line-height: 1.12; text-align: center;
  text-shadow: 0 1px 2px rgba(90,12,6,0.35); }
@media (max-width: 540px) { .brb-btn { min-height: 92px; } .brb-btn-label { font-size: 16.5px; } }
.brb-btn-sub { color: rgba(255,255,255,0.85); font-size: 12px; font-weight: 600; }
/* The running drill's tell (2026-08-01, John): quiet amber DRILL under the
   Ends time, on the button itself - same bare-word grammar as .brb-chip in
   the modal eyebrow, replacing the old foot paragraph. Only rendered while
   a drill runs, over the is-active (light) face, so the amber is the
   chip's legible-on-light value. */
.brb-btn-drill {
  font-size: 10px; font-weight: 800; letter-spacing: 1.4px;
  text-transform: uppercase; color: #A26A00; margin-top: 1px;
}
.brb-btn-drill[hidden] { display: none; }
.brb-btn:hover { box-shadow: 0 6px 0 #7E1B0F, 0 22px 44px -14px rgba(160,42,29,0.62), 0 10px 16px -6px rgba(160,42,29,0.44),
  inset 0 1.5px 0 rgba(255,255,255,0.38), inset 0 -3px 8px rgba(90,12,6,0.30); }
.brb-btn:active { transform: translateY(5px) scale(0.995);
  box-shadow: 0 1px 0 #7E1B0F, 0 8px 16px -8px rgba(160,42,29,0.50), 0 2px 5px -3px rgba(160,42,29,0.4),
  inset 0 2px 0 rgba(255,255,255,0.18), inset 0 4px 10px rgba(90,12,6,0.36); }
.brb-btn:focus-visible { outline: 3px solid rgba(192,57,43,0.5); outline-offset: 4px; }
/* Armed idle: a slow breathing ring so the card says "this matters now"
   without shouting. Motion-reduced users get the static shadow. */
.brb-wrap[data-mode="armed"] .brb-btn, .brb-wrap[data-mode="drill"] .brb-btn:not(.is-active) {
  animation: brbBreathe 3s ease-in-out .9s infinite; }
@keyframes brbBreathe {
  0%, 100% { box-shadow: 0 6px 0 #7E1B0F, 0 20px 38px -14px rgba(160,42,29,0.55), 0 9px 14px -6px rgba(160,42,29,0.40),
             0 0 0 0 rgba(192,57,43,0.30), inset 0 1.5px 0 rgba(255,255,255,0.34), inset 0 -3px 8px rgba(90,12,6,0.30); }
  50% { box-shadow: 0 6px 0 #7E1B0F, 0 22px 42px -13px rgba(160,42,29,0.62), 0 9px 14px -6px rgba(160,42,29,0.44),
        0 0 0 9px rgba(192,57,43,0.07), inset 0 1.5px 0 rgba(255,255,255,0.34), inset 0 -3px 8px rgba(90,12,6,0.30); }
}
@media (prefers-reduced-motion: reduce) {
  .brb-wrap[data-mode="armed"] .brb-btn, .brb-wrap[data-mode="drill"] .brb-btn:not(.is-active) { animation: none; }
}
/* Engaged: the same keycap inverted - white ground, red ink, End Load Shed.
   The ledge cools to a neutral shadow so the white face still sits proud. */
.brb-btn.is-active { background: linear-gradient(180deg, #FFFFFF 0%, #FBF9F4 100%);
  border-color: var(--bp-red-ring, rgba(192,57,43,0.28));
  box-shadow: 0 6px 0 rgba(14,42,82,0.14), 0 18px 32px -16px rgba(160,42,29,0.32), 0 6px 12px -6px rgba(14,42,82,0.16),
              inset 0 0 0 2px var(--bp-red-tint-2, rgba(192,57,43,0.18)); }
.brb-btn.is-active .brb-btn-label { color: var(--bp-red, #c0392b); text-shadow: none; }
.brb-btn.is-active .brb-btn-sub { color: var(--bp-red-deep, #a02a1d); opacity: .85; }
.brb-btn.is-active:active { transform: translateY(5px) scale(0.995);
  box-shadow: 0 1px 0 rgba(14,42,82,0.14), 0 8px 14px -8px rgba(14,42,82,0.22),
              inset 0 0 0 2px var(--bp-red-tint-2, rgba(192,57,43,0.18)); }
.brb-btn .brb-spin { display: none; }
.brb-btn.is-busy .brb-btn-label { opacity: .6; }

/* Under-row status line: drill verdicts + release trouble, honestly worded. */
.brb-foot { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: rgba(14,42,82,0.72); }
.brb-foot[hidden] { display: none; }
.brb-foot.is-warn { color: #8a5a00; }
.brb-foot.is-err { color: var(--bp-red-deep, #a02a1d); }
.brb-foot b { font-weight: 700; }

/* ── Confirm modal (rides the ds-modal frame) ── */
.brb-modal { max-width: 470px; }
.brb-modal-body { padding-top: 4px; }
.brb-modal-line { margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: rgba(14,42,82,0.85); }
.brb-modal-line b { font-weight: 720; }
.brb-modal-points { margin: 0 0 14px; border: 0.5px solid rgba(14,42,82,0.14); border-radius: 12px; overflow: hidden; }
.brb-modal-points[hidden] { display: none; }
.brb-modal-pt { display: flex; align-items: baseline; gap: 10px; padding: 9px 13px; }
.brb-modal-pt + .brb-modal-pt { border-top: 0.5px solid rgba(14,42,82,0.10); }
.brb-modal-pt .k { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(14,42,82,0.55); width: 74px; }
.brb-modal-pt .v { flex: 1; min-width: 0; font-size: 13px; font-weight: 650; color: rgba(14,42,82,0.85);
  overflow-wrap: anywhere; }
.brb-modal-pt .v small { display: block; font-weight: 500; font-size: 11.5px; color: rgba(14,42,82,0.55); }
.brb-modal-note { margin: 0 0 6px; font-size: 12.5px; line-height: 1.55; color: rgba(14,42,82,0.6); }
.brb-modal-note[hidden] { display: none; }
.brb-modal-err { margin: 10px 0 0; padding: 10px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5;
  color: var(--bp-red-deep, #a02a1d); background: var(--bp-red-tint, rgba(192,57,43,0.10));
  border: 0.5px solid var(--bp-red-ring, rgba(192,57,43,0.28)); }
.brb-modal-err[hidden] { display: none; }
/* Two equal halves filling the modal's width: the red-ink decline on the
   left, the red action on the right. */
.brb-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.brb-modal-cancel { appearance: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700;
  color: var(--bp-red, #c0392b); background: transparent;
  border: 0.5px solid var(--bp-red-ring, rgba(192,57,43,0.28));
  border-radius: 12px; padding: 12px 16px; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; min-width: 0; }
.brb-modal-cancel:hover { background: var(--bp-red-tint, rgba(192,57,43,0.10)); }
.brb-modal-go { position: relative; appearance: none; cursor: pointer; font: inherit; font-size: 14px;
  font-weight: 720; color: #fff; border: 0.5px solid rgba(122,22,12,0.55); border-radius: 12px;
  padding: 12px 16px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 0;
  background: linear-gradient(180deg, #DA4A38, var(--bp-red-deep, #a02a1d));
  box-shadow: 0 12px 24px -12px rgba(160,42,29,0.6), inset 0 1px 0 rgba(255,255,255,0.28);
  transition: transform .12s ease, filter .12s ease; }
.brb-modal-go:hover { filter: brightness(1.06); }
.brb-modal-go:active { transform: translateY(1px) scale(0.985); }
.brb-modal-go:disabled { opacity: .65; cursor: progress; }
.brb-modal-go .brb-spin { width: 14px; height: 14px; border-radius: 999px; border: 2px solid rgba(255,255,255,0.85);
  border-top-color: transparent; animation: brbSpin .7s linear infinite; display: none; }
.brb-modal-go.is-busy .brb-spin { display: inline-block; }
@keyframes brbSpin { to { transform: rotate(360deg); } }

/* ── Settings: The Big Red Button section ── */
.brb-set-link { margin: 0; }
.brb-set-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brb-set-pct { position: relative; }
.brb-set-pct input { width: 92px; }
.brb-set-suffix { font-size: 12.5px; font-weight: 650; color: rgba(14,42,82,0.6); }
.brb-set-hint { font-size: 12px; color: rgba(14,42,82,0.55); line-height: 1.5; max-width: 300px; }
.brb-set-ints { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.brb-set-int { display: inline-flex; align-items: center; gap: 7px; padding: 7px 7px 7px 13px;
  border-radius: 999px; border: 0.5px solid rgba(14,42,82,0.18); background: rgba(255,255,255,0.6);
  font-size: 13px; font-weight: 650; color: rgba(14,42,82,0.78); cursor: pointer;
  transition: border-color .14s ease, background .14s ease, color .14s ease; }
.brb-set-int:hover { border-color: var(--bp-red-ring, rgba(192,57,43,0.28)); }
.brb-set-int.is-default { background: var(--bp-red, #c0392b); border-color: var(--bp-red-deep, #a02a1d); color: #fff; }
.brb-set-int.is-default .brb-set-int-tag { color: rgba(255,255,255,0.85); }
.brb-set-int-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: rgba(14,42,82,0.45); }
.brb-set-int-x { appearance: none; border: 0; cursor: pointer; width: 20px; height: 20px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font: inherit;
  background: rgba(14,42,82,0.08); color: inherit; }
.brb-set-int.is-default .brb-set-int-x { background: rgba(255,255,255,0.22); }
.brb-set-int-x:hover { background: var(--bp-red-deep, #a02a1d); color: #fff; }
.brb-set-add { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.brb-set-add input { width: 92px; box-sizing: border-box; padding: 9px 11px; font: inherit; font-size: 13.5px;
  border: 0.5px solid rgba(14,42,82,0.2); border-radius: 10px; background: rgba(255,255,255,0.7);
  color: rgba(14,42,82,0.9); }
.brb-set-addbtn, .brb-drill-btn { appearance: none; cursor: pointer; font: inherit; font-size: 12.5px;
  font-weight: 700; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px;
  border-radius: 999px; border: 0.5px solid var(--bp-red-ring, rgba(192,57,43,0.28));
  background: var(--bp-red-tint, rgba(192,57,43,0.10)); color: var(--bp-red-deep, #a02a1d);
  transition: background .14s ease, color .14s ease; }
.brb-set-addbtn:hover, .brb-drill-btn:hover { background: var(--bp-red, #c0392b); color: #fff; }