/* ============================================================================
   SWITCHES + AUTOMATIONS v137 — loaded last.
   ========================================================================== */

/* ── 1. THE SWITCH ────────────────────────────────────────────────────────
   Reported with a screenshot: the toggles look bad. Measured, and there were
   two real faults, not just taste.

   THE TRACK NEVER CHANGED COLOUR. Off and on both computed to
   rgb(243,240,234) — the only difference between a rule that is running and one
   that is not was 18px of knob travel. A switch has to answer "is this on?"
   from across the room; ours answered it with a millimetre of geometry.

   THE KNOB FELL OUT OF THE TRACK WHEN SWITCHED ON. The off state used
   `top:10.83px` corrected by `transform:translateY(-8.5px)`. The on state's
   transform is `translateX(18px)` — with no Y term at all — so switching on
   dropped the knob 8.5px and it overhung the bottom edge of a 23px track. That
   is the lopsided blob in the screenshot.

   Rebuilt so the Y offset can never be lost: the knob is centred with
   `top:50%` and BOTH states carry the same translateY, with only X differing.
   Off is a neutral grey track with a white knob; on is the brand colour. */
body .switch{
  position:relative;flex:0 0 auto;
  width:44px;height:24px;padding:0;border-radius:999px;
  background:var(--line-2);
  border:1px solid color-mix(in srgb,var(--fg) 12%,transparent);
  cursor:pointer;overflow:visible;
  transition:background-color .16s ease,border-color .16s ease}
body .switch .switch-knob{
  position:absolute;left:2px;top:50%;
  width:18px;height:18px;border-radius:50%;
  background:#FFFFFF;border:0;
  box-shadow:0 1px 2px rgba(16,14,10,.28),0 0 0 .5px rgba(16,14,10,.10);
  /* the Y term is present in BOTH states - losing it was the alignment bug */
  transform:translate(0,-50%);
  transition:transform .18s cubic-bezier(.2,.8,.3,1)}
body .switch.on{
  background:var(--tab-active,#D97757);
  border-color:color-mix(in srgb,var(--tab-active,#D97757) 76%,#000)}
/* `left` is pinned in the ON state too, not just the off one. An upstream rule
   moves the knob by setting left:20px, so with a transform ALSO travelling 20px
   the knob went 41px across a 44px track and hung 15px off the right end.
   One mechanism moves it: the transform. Measured target: 18px knob in a 44px
   track with a 1px border sits 3px from each end, so the travel is exactly
   44 - 3 - 18 - 2(left) - 1(border) = 20px. */
body .switch.on .switch-knob{left:2px;transform:translate(20px,-50%)}
@media (hover:hover){
  body .switch:hover{background:color-mix(in srgb,var(--fg) 22%,var(--line-2))}
  body .switch.on:hover{background:color-mix(in srgb,var(--tab-active,#D97757) 88%,#000)}
}
body .switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body .switch[disabled],body .switch[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* ── 2. AUTOMATIONS: A WORKFLOW LIST, NOT A STACK OF CARDS ────────────────
   The page was eight identical cards with a paragraph on top. You could not see
   how many rules were live, or tell a rule that touches money from one that
   watches safety. It now opens with a tally, groups rules by what they watch,
   and every row states its trigger and its action in words before the switch. */
body .auto-bar9{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding:14px 16px;margin-bottom:22px;
  background:var(--surface-2);border:1px solid var(--line-1)}
body .auto-bar-l9{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
body .auto-tally9{
  font-size:15px;font-weight:680;color:var(--fg);white-space:nowrap;
  padding-right:12px;border-right:1px solid var(--line-2)}
body .auto-bar-l9>span{font-size:12.5px;line-height:1.5;color:var(--muted);min-width:0}

body .auto-sec9+.auto-sec9{margin-top:26px}
body .auto-sec-head9{
  display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
body .auto-sec-head9 h3{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-2);margin:0}
body .auto-sec-n9{font-size:12px;color:var(--muted)}
body .auto-sec-body9>.auto-card+.auto-card{border-top:0}

/* the row: art, what it does, state + switch on the trailing edge */
body .auto-card{
  display:grid;grid-template-columns:34px minmax(0,1fr) auto;
  align-items:start;gap:14px;padding:16px 18px;border-radius:0}
body .auto-card.is-on{border-left:3px solid var(--tab-active,#D97757);padding-left:15px}
body .auto-side9{display:flex;align-items:center;gap:10px;padding-top:2px}
body .auto-state9{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
body .auto-state9.on{color:var(--tab-active,#D97757)}

/* When → then: the part that says what the switch will actually do.
   Two rows, label column and value column - not a wrapping flex line. As one
   flex row it broke as "WHEN <trigger> -> THEN" / "<action>", stranding THEN at
   the end of the first line away from the thing it introduces. A grid keeps
   each keyword beside its own clause, which is how the category leaders lay a
   trigger and an action out. */
body .auto-flow9{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;
  align-items:baseline;
  margin-top:10px;padding:10px 12px;
  background:var(--surface-2);border:1px solid var(--line-1);
  font-size:12px;line-height:1.5}
body .auto-flow-k9{
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
body .auto-flow-v9{color:var(--fg-2);min-width:0}
/* the arrow was the join between two halves of one line; with a row each, the
   grid itself carries that relationship */
body .auto-flow-arw9{display:none}

/* ── 3. THE CHANNEL NOTE READS AS A SENTENCE ──────────────────────────────
   It was a flex row, so the trailing "set one up" link became its own flex item
   and got stranded in a second column, breaking mid-phrase. It is a sentence
   with a link in it, so it flows as text: the icon floats, everything else runs
   inline. */
body .auto-chan9{
  display:block;margin-top:10px;padding:9px 11px;
  background:var(--surface-2);border:1px solid var(--line-1);
  font-size:12px;line-height:1.55;color:var(--muted)}
body .auto-chan-ic9{
  float:left;display:inline-flex;margin:2px 7px 0 0;color:var(--fg-2)}
body .auto-chan9>span{display:inline}
body .auto-chan9 .linkish{
  display:inline;font-size:12px;font-weight:640;white-space:nowrap;
  color:var(--tab-active,#D97757);text-decoration:underline;
  text-underline-offset:2px;background:none;border:0;padding:0;cursor:pointer}

/* ── 4. A RULE'S DESCRIPTION IS NOT A TEASER ──────────────────────────────
   .row-sub is clamped to one line elsewhere, which cut the speeding rule at
   "raises an alert n…". On this page the sentence is the whole point of the
   row, so it wraps in full. */
body .auto-card .row-sub{
  display:block;overflow:visible;text-overflow:clip;white-space:normal;
  -webkit-line-clamp:none;max-width:62ch}

@media (max-width:640px){
  body .auto-card{grid-template-columns:28px minmax(0,1fr);gap:10px;padding:14px}
  body .auto-side9{grid-column:2;justify-content:flex-start;margin-top:10px}
  body .auto-flow9{flex-direction:column;align-items:flex-start;gap:3px}
  body .auto-flow-arw9{transform:rotate(90deg)}
  body .auto-tally9{border-right:0;padding-right:0}
}

/* ── 5. NOTIFICATIONS: AN INBOX, NOT A STACK ──────────────────────────────
   It was 16 identical cards in one undifferentiated pile with "16 recent" as
   the only orientation - no unread count, no sense of when anything happened
   beyond a relative time on each row, and no way to open the thing a
   notification was about.

   Now it reads like an inbox: a tally, day groups, and a row that is a real
   button. The unread marker is a dot on the leading edge plus a weight change,
   not a tinted row - a coloured background across a whole list is noise once
   more than two things are unread. */
body .nt-bar9{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:13px 16px;margin-bottom:20px;
  background:var(--surface-2);border:1px solid var(--line-1)}
body .nt-tally9{
  font-size:15px;font-weight:680;color:var(--fg);white-space:nowrap;
  padding-right:12px;border-right:1px solid var(--line-2)}
body .nt-bar-sub9{font-size:12.5px;line-height:1.5;color:var(--muted);flex:1 1 220px;min-width:0}
body .nt-filter9{
  flex:0 0 auto;height:30px;padding:0 12px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--fg-2);
  font-size:12.5px;font-weight:600;cursor:pointer;border-radius:0}
body .nt-filter9.on{
  background:var(--tab-active,#D97757);border-color:var(--tab-active,#D97757);color:#fff}
@media (hover:hover){
  body .nt-filter9:hover{border-color:var(--fg-2);color:var(--fg)}
  body .nt-filter9.on:hover{background:color-mix(in srgb,var(--tab-active,#D97757) 88%,#000)}
}

body .nt-sec9+.nt-sec9{margin-top:22px}
body .nt-sec-head9{display:flex;align-items:baseline;gap:9px;margin:0 0 8px}
body .nt-sec-head9 h3{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--fg-2);margin:0}
body .nt-sec-n9{font-size:12px;color:var(--muted)}
body .nt-sec-body9{border:1px solid var(--line-1);background:var(--panel)}

body .nt-row9{
  display:grid;grid-template-columns:8px 30px minmax(0,1fr) auto;
  align-items:start;gap:11px;width:100%;
  padding:13px 15px;border:0;border-top:1px solid var(--line-1);
  background:none;text-align:left;cursor:pointer;border-radius:0}
body .nt-sec-body9>.nt-row9:first-child{border-top:0}
@media (hover:hover){body .nt-row9:hover{background:var(--hover)}}
body .nt-row9:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* the unread marker: a dot, and the title carries the weight */
body .nt-dot9{
  width:7px;height:7px;margin-top:7px;border-radius:50%;
  background:transparent;justify-self:center}
body .nt-row9.unread .nt-dot9{background:var(--tab-active,#D97757)}
body .nt-ic9{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:0 0 30px;
  background:var(--surface-2);border:1px solid var(--line-1);color:var(--fg-2)}
body .nt-ic9 svg{width:15px;height:15px}
body .nt-ic9.warn{color:#B45309;border-color:color-mix(in srgb,#B45309 34%,transparent)}
body .nt-ic9.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 34%,transparent)}
body .nt-ic9.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 34%,transparent)}
body .nt-main9{display:flex;flex-direction:column;gap:2px;min-width:0}
body .nt-title9{
  font-size:13.5px;font-weight:560;color:var(--fg);line-height:1.35;
  overflow-wrap:anywhere}
body .nt-row9.unread .nt-title9{font-weight:700}
body .nt-body9{
  font-size:12.5px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
body .nt-time9{
  font-size:11.5px;color:var(--muted);white-space:nowrap;padding-top:2px}
@media (max-width:640px){
  body .nt-row9{grid-template-columns:8px 26px minmax(0,1fr);gap:9px;padding:12px}
  body .nt-time9{grid-column:3;padding-top:3px}
  body .nt-ic9{width:26px;height:26px;flex:0 0 26px}
  body .nt-tally9{border-right:0;padding-right:0}
}
/* ── 6. THE SUMMARY STRIP THAT OPENS A LIST PAGE ──────────────────────────
   The list pages already had the right bones — search, filter pills, a
   sortable table with column control, bulk actions. What they lacked is what
   the category leaders lead with: a row of counts telling you where you stand
   before you read a single row. "2 open · 2 total" as grey text under the
   title is the same information carrying none of the weight.

   A tile that filters behaves like a button and says so on hover; a tile that
   is only a number does not pretend to be clickable. */
body .stat-strip9{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  border:1px solid var(--line-1);background:var(--panel);
  margin-bottom:16px;overflow:hidden}
body .ss-tile9{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  padding:13px 16px;min-width:0;
  border:0;border-left:1px solid var(--line-1);
  background:none;text-align:left;border-radius:0}
body .stat-strip9>.ss-tile9:first-child{border-left:0}
body .ss-n9{
  font-size:22px;font-weight:700;line-height:1.1;color:var(--fg);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
body .ss-n9.danger{color:var(--danger)}
body .ss-n9.warn{color:#B45309}
body .ss-n9.ok{color:var(--ok)}
body .ss-l9{
  font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);line-height:1.3;overflow-wrap:anywhere}
body .ss-click9{cursor:pointer}
@media (hover:hover){
  body .ss-click9:hover{background:var(--hover)}
  body .ss-click9:hover .ss-l9{color:var(--fg-2)}
}
body .ss-click9:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* a strip of four tiles will not survive a phone in one row */
@media (max-width:720px){
  body .stat-strip9{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto}
  body .ss-tile9{border-left:1px solid var(--line-1);border-top:1px solid var(--line-1)}
  body .stat-strip9>.ss-tile9:nth-child(-n+2){border-top:0}
  body .stat-strip9>.ss-tile9:nth-child(odd){border-left:0}
  body .ss-n9{font-size:19px}
}
/* ── 7. ONE FORM LANGUAGE ─────────────────────────────────────────────────
   form-v109 made record-form controls outlined-on-white at 42px, because a
   filled 32px control reads as a dense settings row rather than something you
   are meant to fill in. That was scoped to .veh-form-sec / .recordform9, so
   Settings kept the old beige fill — the same product asking for the same kind
   of input in two visibly different ways, one screen apart.

   Settings now uses the same control. Scoped to the settings content pane, so
   toolbar and filter inputs elsewhere keep their own compact treatment. */
body .setx-content .input,
body .setx-content input:not([type=checkbox]):not([type=radio]),
body .setx-content select,
body .setx-content textarea,
body .set-card .input,
body .set-card input:not([type=checkbox]):not([type=radio]),
body .set-card select{
  min-height:40px;height:auto;padding:9px 12px;font-size:14px;line-height:1.4;
  background:var(--panel);border:1px solid var(--line-3);border-radius:0;
  box-sizing:border-box}
body .setx-content textarea{min-height:88px}
@media (hover:hover){
  body .setx-content .input:hover,body .setx-content select:hover,
  body .setx-content input:not([type=checkbox]):hover{border-color:var(--fg-2)}
}
/* the search box in the settings rail is chrome, not a form field */
body .setx-rail .setx-search,body .setx-rail input{border-radius:0}

/* a settings row is label + control on one line; the control should not stretch
   to the full width of the pane when the value is a short one */
body .set-row .set-row-c>select,
body .set-row .set-row-c>.input{max-width:320px}
@media (max-width:640px){
  body .set-row .set-row-c>select,
  body .set-row .set-row-c>.input{max-width:none}
}
/* ── 8. THE RULE BUILDER + THE USER'S OWN RULES ───────────────────────────
   Three sections in the order a person thinks: what happens, which vehicles,
   what to do. The live summary restates the whole rule as a sentence so nobody
   has to hold the form in their head to know what they just built. */
body .rb-sec9{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-1)}
body .rb-sec9:first-of-type{margin-top:14px}
body .rb-sec9>h4{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px}
body .rb-val9{margin-top:10px}
body .rb-vlab9{
  display:inline-flex;align-items:center;gap:9px;
  font-size:13px;font-weight:560;color:var(--fg-2)}
body .rb-unit9{font-size:12.5px;color:var(--muted)}
body .rb-trucks9{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:7px 14px;margin-top:10px;padding:11px 12px;max-height:190px;overflow-y:auto;
  background:var(--surface-2);border:1px solid var(--line-1)}
body .rb-act9+.rb-act9{margin-top:12px}
body .rb-act-hint9{
  font-size:12px;line-height:1.5;color:var(--muted);margin:3px 0 0 25px}
/* the sentence version of the rule */
body .rb-preview9{
  display:flex;flex-direction:column;gap:4px;margin-top:18px;padding:12px 14px;
  background:var(--surface-2);border:1px solid var(--line-2)}
body .rb-plab9{
  font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
body .rb-say9{font-size:13.5px;line-height:1.5;color:var(--fg);font-weight:520}

body .auto-new9{margin-left:auto;flex:0 0 auto}
body .auto-sec-head9{align-items:center}
body .auto-rowacts9{display:flex;gap:14px;margin-top:10px}
body .auto-rowacts9 .linkish{font-size:12.5px;font-weight:600}
body .auto-rowacts9 .linkish.danger{color:var(--danger)}
body .auto-empty9{
  padding:22px 18px;text-align:left;border:1px dashed var(--line-2);background:var(--surface-2)}
body .auto-empty9 p{
  margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--muted);max-width:62ch}
body .auto-presets-head9{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:30px 0 12px;
  padding-top:22px;border-top:1px solid var(--line-1)}
body .auto-presets-head9 h3{
  font-size:15px;font-weight:680;color:var(--fg);margin:0}
body .auto-presets-head9 span{font-size:12.5px;color:var(--muted)}
@media (max-width:640px){
  body .auto-new9{margin-left:0;width:100%;justify-content:center;margin-top:8px}
  body .rb-trucks9{grid-template-columns:1fr;max-height:160px}
}