/* Module 14: the kill switch banner, and the autonomy screen.

   A fourth stylesheet rather than more of `screens.css`, which is 457 lines and
   was split once already at the 500-line rule. `tests/app/test_layouts.py`
   discovers the stylesheets with a glob and asserts every one is linked, so
   this file is inside the palette check and the linking check from the moment
   it exists. Every colour below is a token from `beach.css`; there is no hex
   in this file. */

/* --- the switch, on every screen ---------------------------------------- */

.halt-banner {
  margin: 0 var(--pad) var(--gap);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  display: grid;
  gap: 8px;
}
.halt-banner.is-stopped { border-color: var(--danger); background: var(--warn-soft); }
.halt-banner.is-unknown { border-color: var(--warn); background: var(--warn-soft); }
.halt-banner .status-line { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.halt-banner .status-note { font-size: var(--t-small); color: var(--muted); }
.switch-form { display: flex; }
.switch-form .button { flex: 1; min-height: var(--tap); }

/* The desktop rule for this banner lives in `wide.css`, which owns every
   width-conditional rule in the app. A second copy of that breakpoint in a
   second file is how two files end up disagreeing about one number. */

/* --- the autonomy screen ------------------------------------------------ */

.screen-settings .card { padding: 14px 15px; display: grid; gap: 10px; }
.screen-settings .card-accent { background: var(--accent-soft); border-color: var(--accent-soft); }
.screen-settings .card-locked { border-color: var(--line); background: var(--bg); }
.screen-settings .row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.weeks { display: flex; gap: 6px; padding-top: 4px; }
.week-bar { width: 52px; height: 6px; border-radius: 3px; background: var(--surface); }
.week-bar.is-on { background: var(--accent); }