/* Rotation (js/views/rotation.js, #/rotation), the vendor or trunk group detail
   (js/views/target.js, #/t/<id>), Add (js/views/add.js, #/add) and the switch parts of the
   Overview's Rotation panel (js/views/dashboard.js).
   Shared tokens and components are in /styles.css (docs/ui-notes-v2.md). The rows reuse the
   Overview's .rot pieces and number strip, so a vendor looks the same everywhere. Every class in
   this file starts with "rotation-". Plain ASCII only. */

/* ------------------------------------------------------------------ Rotation */
/* The filter (All, Sippy, PeerEdge) and Add vendor or trunk group, above the panels. */
.rotation-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin: 0 0 16px;
}
@media (min-width: 720px) { .rotation-toolbar { margin-bottom: 24px; } }
@media (max-width: 719px) {
  .rotation-toolbar > .seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .rotation-toolbar > .btn { width: 100%; }
}

/* One panel per kind: Sippy vendors (a part for each switch), then PeerEdge trunk groups. */
.rotation-groups { display: grid; gap: 16px; }
@media (min-width: 720px) { .rotation-groups { gap: 24px; } }
.rotation-groups > .panel + .panel { margin-top: 0; }
.rotation-count { color: var(--slate); font-weight: 400; }
.rotation-group .panel-sub { max-width: 52em; }
.rotation-list { margin: 0; padding: 0; list-style: none; }
.rotation-row:last-child { padding-bottom: 0; }

/* ------------------------------------------------------------------ switches */
/* Rotation, Overview and Add. Each switch opens with a band, like the label on a rack unit: a
   status lamp and its name, then its state in words and a count, at the right on wide screens
   and under the name on phones. Its active rows follow, then the ones not active. */
.rotation-switch + .rotation-switch { margin-top: 24px; }
.rot-group h3 + .rotation-switch { margin-top: 8px; }
.rotation-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 12px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--mist);
}
.rotation-band .lamp { flex: none; }
.rotation-band-name { flex: 0 1 auto; min-width: 0; margin: 0; font-size: 16px; line-height: 1.3; }
.rotation-band-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0 14px;
  margin: 0 0 0 auto;
  font-size: 14px;
}
.rotation-band-state { font-weight: 700; }
.rotation-band-count { color: var(--slate); }
@media (max-width: 719px) {
  .rotation-band-meta { flex-basis: 100%; justify-content: flex-start; margin-left: 22px; }
}
.rotation-band-note { max-width: 52em; margin: 8px 0 0; padding: 0 14px; color: var(--slate); font-size: 14px; }

/* Active, then Not active: a short label with its count; on the first switch of the page, a
   line on what it means. */
.rotation-sub { margin-top: 14px; }
.rotation-sub-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0 0 6px; font-size: 14px; }
.rotation-sub-name { font-weight: 700; }
.rotation-sub-hint { color: var(--slate); }
/* Overview, a switch with only active rows: no label, so no line over the first row. */
.rotation-sub > .rot-list:first-child > .rot:first-child { border-top: 0; padding-top: 6px; }

/* A row that is not active: its name and state, why, and the one thing that fixes it. A problem
   is tinted in its colour. */
.rotation-idle { grid-template-areas: "main" "side"; padding: 12px 0; }
.rotation-idle.bad, .rotation-idle.warn { padding: 12px; border-radius: 6px; background: var(--bad-pale); }
.rotation-idle.warn { background: var(--warn-pale); }
.rotation-idle .rot-actions .btn { flex: none; }
.rotation-why { max-width: 48em; margin: 4px 0 0; font-size: 14px; }
.rotation-why.bad { color: var(--bad); font-weight: 700; }
.rotation-why.warn { color: var(--warn-text); font-weight: 700; }
@media (min-width: 720px) {
  .rotation-idle { grid-template-areas: "main side"; align-items: center; }
}

/* A long Not active part folds behind one button: "Show all 6: 4 not started, 2 paused". */
.rotation-fold-row { margin-top: 12px; border-top: 1px solid var(--rule); }
.rotation-sub-head + .rotation-fold-row { margin-top: 0; }
.rotation-fold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.rotation-fold::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 2px 0 1px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.rotation-fold[aria-expanded="true"]::before { margin-top: -4px; transform: rotate(45deg); }
.rotation-fold:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 0.18em; }
.rotation-fold-what { color: var(--slate); font-weight: 400; }

/* ------------------------------------------------------------------ the table */
/* Rotation at 1024 px and wider: each part of a switch is a table, one compact row per vendor or
   trunk group. The columns have set widths, so the Active and Not active tables of a switch line
   up. A row, the line under it and its number strip are one tbody: one rule under the three. */
.rotation-switch-table { container-type: inline-size; }
.rotation-table-wrap { margin: 0; overflow-x: auto; }
.rotation-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  line-height: 1.35;
}
/* Name takes what the others leave. Every column has room for its heading and for its usual
   value on one line ("1 h 29 min 52 s ago"); a longer value wraps inside its own column and
   never runs into the next one. */
.rotation-col-check { width: 40px; }
.rotation-col-where { width: 120px; }
.rotation-col-state { width: 104px; }
.rotation-col-nums { width: 124px; }
.rotation-col-next { width: 150px; }
.rotation-col-last { width: 142px; }
.rotation-col-checked { width: 112px; }
.rotation-col-act { width: 188px; }
.rotation-table th, .rotation-table td { padding: 8px 12px 8px 0; text-align: left; vertical-align: middle; overflow-wrap: break-word; }
.rotation-table thead th {
  padding-top: 9px;
  padding-bottom: 9px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--mist);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: normal;
}
.rotation-table thead th:first-child { padding-left: 8px; }
.rotation-table thead th.rotation-c-check { padding: 0 4px 0 0; }
.rotation-table .rotation-tr > :first-child, .rotation-table .rotation-tr-note > :first-child,
.rotation-table .rotation-tr-nums > :first-child { padding-left: 8px; }
.rotation-table .rotation-tr > .rotation-c-check, .rotation-table .rotation-tr-note > .rotation-c-check,
.rotation-table .rotation-tr-nums > .rotation-c-check { padding-left: 0; }
.rotation-table .rotation-c-last, .rotation-table .rotation-c-checked { color: var(--slate); white-space: normal; }
.rotation-table .rotation-c-act { padding-right: 0; text-align: right; }
.rotation-unit { border-bottom: 1px solid var(--rule); }
.rotation-sub .rotation-unit:last-child { border-bottom: 0; }
.rotation-unit > tr > * { background: var(--paper); }
.rotation-unit:hover > tr > * { background: var(--hover); }
.rotation-unit.is-ticked > tr > * { background: var(--accent-tint); }
/* A problem's row is tinted in its colour, as in the list. */
.rotation-unit.bad > tr > * { background: var(--bad-pale); }
.rotation-unit.warn > tr > * { background: var(--warn-pale); }

/* The box to tick: the whole cell is the 44 px target. */
.rotation-table .rotation-c-check { padding: 0 4px 0 0; }
.rotation-check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-height: var(--tap);
  cursor: pointer;
}
.rotation-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.rotation-check input:disabled { cursor: not-allowed; }

/* Name: a link to its page. Its padding makes it 44 px tall for a thumb; the margin gives the
   room back, so the row is no taller. */
.rotation-table .rotation-c-name { font-weight: 700; }
.rotation-t-name {
  display: inline-block;
  margin: -12px 0;
  padding: 12px 0;
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
}
.rotation-t-name:hover { color: var(--accent); text-decoration: underline; }
.rotation-c-where, .rotation-c-last { color: var(--slate); }
.rotation-table .rotation-c-where { font-size: 13px; }
.rotation-t-quiet { color: var(--slate); }
.rotation-t-sub { color: var(--slate); }
.rotation-t-bad { color: var(--bad); font-weight: 700; }
/* Where and Last change, under Name and Next change when the table is too narrow for them. */
.rotation-t-in { display: none; color: var(--slate); font-size: 13px; font-weight: 400; }

/* State: a lamp and a word. */
.rotation-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.rotation-state .lamp { width: 13px; height: 13px; }
.rotation-state-word.ok { color: var(--ok); }
.rotation-state-word.test { color: var(--test); }
.rotation-state-word.warn { color: var(--warn-text); }
.rotation-state-word.bad { color: var(--bad); }
.rotation-state-word.off { color: var(--slate); }

/* Numbers in use, and Show numbers, which opens the strip under the row. */
.rotation-t-count { display: block; }
.rotation-t-show {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: -12px 0;
  padding: 12px 0;
  white-space: nowrap;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.rotation-t-show::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  margin: 0 1px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.rotation-t-show[aria-expanded="true"]::before { margin-top: -3px; transform: rotate(45deg); }
.rotation-t-show:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 0.18em; }

/* Rotate now and Pause (or the one fix), with the result line under them. */
.rotation-t-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
.rotation-t-actions .btn { flex: none; padding: 0 12px; }
.rotation-t-actions .btn .glyph { display: none; }
.rotation-table .rotation-c-act .cmd-line { max-width: 190px; margin: 4px 0 0 auto; text-align: right; }

/* The line under a row: why it is not active, or what is wrong. */
.rotation-tr-note > td { padding-top: 0; padding-bottom: 10px; }
.rotation-tr-note .rotation-why { max-width: 60em; margin: -2px 0 0; }
.rotation-why.off { color: var(--slate); }
.rotation-why.test { color: var(--test); }

/* The number strip under a row, with its batch and how many numbers are left. */
.rotation-tr-nums > td { padding-top: 2px; padding-bottom: 14px; }
.rotation-t-strip .strip { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.rotation-tr-nums .rotation-facts { margin-top: 8px; }

/* The fold of a long Not active part, inside its table. */
.rotation-fold-body > tr > td { padding: 2px 0; border-bottom: 1px solid var(--rule); background: var(--paper); }

/* Too narrow for every column, each step keeps the table whole rather than squeezing it. The
   cells that move stay, empty and 0 wide, so the lines under the rows still span the table.
   First Where moves under the name and the other columns slim down (a window of about 1250 px
   to 1420 px). */
@container (max-width: 1139.98px) {
  .rotation-col-where { width: 0; }
  .rotation-col-state { width: 96px; }
  .rotation-col-nums { width: 120px; }
  .rotation-col-next { width: 140px; }
  .rotation-col-last { width: 128px; }
  .rotation-col-checked { width: 100px; }
  .rotation-col-act { width: 172px; }
  .rotation-table .rotation-c-where {
    padding: 0;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
    visibility: hidden;
    border: 0;
  }
  .rotation-table .rotation-t-where-in { display: block; }
  .rotation-t-actions .btn { padding: 0 8px; }
  .rotation-table .rotation-c-act .cmd-line { max-width: 172px; }
}
/* Then Last change and Last check move under Next change: "Changed 4 min 14 s ago",
   "Checked 5 s ago" (a window under about 1250 px). */
@container (max-width: 899.98px) {
  .rotation-col-last, .rotation-col-checked { width: 0; }
  .rotation-col-nums { width: 124px; }
  .rotation-col-next { width: 150px; }
  .rotation-table .rotation-c-last, .rotation-table .rotation-c-checked {
    padding: 0;
    overflow: hidden;
    font-size: 0;
    white-space: nowrap;
    visibility: hidden;
    border: 0;
  }
  .rotation-table .rotation-t-in { display: block; }
}

/* Next change in a column under its heading: "in 4 min or at 1,500 attempts". The lead and the
   lower-case words are for the two short lines below, where there is no heading. */
.rotation-t-lead, .rotation-t-low { display: none; }

/* Overview (dashboard.js) draws the same rows without the box to tick, the number strip and
   Pause. In a narrow column (the status board's third, a phone) each is two short lines: the
   name with Rotate now (or its one fix) beside it, then a lamp and its state with the next
   change ("Next change in 4 min"). Where, the numbers and the last change are on Rotation. */
@container (max-width: 559.98px) {
  .ov-vendors .rotation-table-wrap, .ov-vendors .rotation-table, .ov-vendors .rotation-table .rotation-unit,
  .ov-vendors .rotation-table .rotation-fold-body { display: block; }
  .ov-vendors .rotation-table colgroup, .ov-vendors .rotation-table thead { display: none; }
  .ov-vendors .rotation-table .rotation-tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "name name act" "state next next" "line line line";
    align-items: center;
    gap: 0 10px;
    padding: 7px 0;
  }
  .ov-vendors .rotation-table .rotation-tr > th, .ov-vendors .rotation-table .rotation-tr > td { padding: 0; }
  .ov-vendors .rotation-table .rotation-c-name { grid-area: name; min-width: 0; line-height: 1.3; }
  .ov-vendors .rotation-t-name { font-size: 15px; }
  .ov-vendors .rotation-table .rotation-c-state { grid-area: state; font-size: 13px; }
  .ov-vendors .rotation-state { gap: 6px; }
  .ov-vendors .rotation-state .lamp { width: 13px; height: 13px; }
  .ov-vendors .rotation-table .rotation-c-next { grid-area: next; min-width: 0; color: var(--slate); font-size: 13px; line-height: 1.35; }
  .ov-vendors .rotation-c-next .nowrap { white-space: normal; }
  .ov-vendors .rotation-table .rotation-c-act { display: contents; }
  .ov-vendors .rotation-c-act .rotation-t-actions { grid-area: act; }
  .ov-vendors .rotation-table .rotation-c-act .cmd-line { grid-area: line; max-width: none; margin: 4px 0 0; text-align: left; }
  .ov-vendors .rotation-table .rotation-c-where, .ov-vendors .rotation-table .rotation-c-nums,
  .ov-vendors .rotation-table .rotation-c-last, .ov-vendors .rotation-table .rotation-c-checked,
  .ov-vendors .rotation-table .rotation-t-in { display: none; }
  .ov-vendors .rotation-t-lead, .ov-vendors .rotation-t-low { display: inline; }
  .ov-vendors .rotation-t-cap, .ov-vendors .rotation-t-extra { display: none; }
  .ov-vendors .rotation-table .rotation-tr-note, .ov-vendors .rotation-table .rotation-fold-body tr { display: block; }
  .ov-vendors .rotation-table .rotation-tr-note > td, .ov-vendors .rotation-table .rotation-fold-body td { display: block; padding: 0 0 7px; }
  .ov-vendors .rotation-tr-note .rotation-why { margin: -2px 0 0; font-size: 13px; }
  .ov-vendors .rotation-table .rotation-fold-body td { padding: 2px 0; }
  /* A problem's row and its line are tinted in its colour. */
  .ov-vendors .rotation-table .rotation-unit.bad, .ov-vendors .rotation-table .rotation-unit.warn { padding-left: 12px; padding-right: 12px; border-radius: 6px; background: var(--bad-pale); }
  .ov-vendors .rotation-table .rotation-unit.warn { background: var(--warn-pale); }
}

/* The bar that takes the place of the filter while boxes are ticked: how many, what to do with
   them, and what the last command did. It stays in sight under the top bar. */
.rotation-bulk {
  position: sticky;
  top: var(--rotation-bar-top, 73px);
  z-index: 20;
  justify-content: flex-start;
  gap: 8px 16px;
  margin-right: -1px;
  margin-left: -1px;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--float-shadow);
}
.rotation-bulk-count { margin: 0; font-size: 16px; }
.rotation-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rotation-bulk-actions .btn-link { margin-left: 8px; }
.rotation-bulk-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-left: 2px;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 12px;
}
.rotation-bulk-result { flex: 1 1 100%; margin: 0; color: var(--slate); font-size: 14px; }
.rotation-bulk-result.ok { color: var(--ok); font-weight: 700; }
.rotation-bulk-result.bad { color: var(--bad); font-weight: 700; }

/* A caller ID that copies as digits only: its groups are spaced here, not by spaces. */
.rotation-cli { white-space: nowrap; }
.rotation-cli > span + span { margin-left: 0.3em; }

/* A switch with nothing on it yet: one line and the way to add one. */
.rotation-none {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 10px;
  padding: 0 0 0 14px;
}
.rotation-none p { color: var(--slate); }

/* ------------------------------------------------------------------ detail */
/* One column on phones; at 1200 px and wider, two: the numbers, batches and number list on the
   left, recent changes and settings on the right. */
.rotation-detail { display: grid; gap: 16px; }
.rotation-detail-col { display: grid; gap: 16px; align-content: start; min-width: 0; }
@media (min-width: 720px) {
  .rotation-detail, .rotation-detail-col { gap: 24px; }
}
@media (min-width: 1200px) {
  .rotation-detail { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.rotation-detail-col > .panel + .panel { margin-top: 0; }

/* Numbers in use: the tiles, when it changes next, then Rotate now and Pause with the result
   line under them. */
.rotation-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rotation-now > .cmd-line { max-width: 40em; }
@media (max-width: 719px) {
  .rotation-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The number strip with each number's attempts and answer rate written under it. */
.rotation-tiles { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 8px; }
.rotation-tile {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2px;
  min-height: 60px;
  padding: 9px 12px 12px;
}
.rotation-tile-count, .rotation-tile-asr { color: var(--slate); font-size: 13px; line-height: 1.3; white-space: nowrap; }
.rotation-tile.warn .rotation-tile-count { color: var(--warn-text); font-weight: 700; }
.rotation-tile.bad .rotation-tile-count { color: var(--bad); font-weight: 700; }
.rotation-tile-asr.low { color: var(--warn-text); font-weight: 700; }
.rotation-tile .tile-use { height: 4px; }
.rotation-now .strip-more { margin-top: 4px; }
.rotation-now .rotation-facts { margin-top: 14px; }
.rotation-note { max-width: 48em; margin: 8px 0 0; color: var(--slate); font-size: 14px; }

/* A section that opens and closes with its title: Batches, Its number list, Recent changes,
   Remove. Closed, it is one line. */
.rotation-sec { padding-top: 0; padding-bottom: 0; }
.rotation-sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin: 0 -16px;
  padding: 10px 16px;
  border-radius: 12px;
  list-style: none;
  cursor: pointer;
}
@media (min-width: 720px) { .rotation-sec-head { margin: 0 -20px; padding: 10px 20px; } }
.rotation-sec-head::-webkit-details-marker { display: none; }
.rotation-sec-head::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin: 0 3px 0 2px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.rotation-sec[open] > .rotation-sec-head::before { margin-top: -5px; transform: rotate(45deg); }
.rotation-sec-head:hover { background: var(--hover); }
.rotation-sec-head h2 { margin: 0; font-size: 18px; line-height: 1.3; }
.rotation-sec-body { padding: 4px 0 20px; }
.rotation-sec[open] > .rotation-sec-head { border-radius: 12px 12px 0 0; }
.rotation-sec-line { max-width: 48em; margin: 0 0 14px; color: var(--slate); font-size: 14px; }
.rotation-sec-line:empty { display: none; }

/* Batches: small boxes, several to a row, the one in use outlined. Numbers opens a batch's
   numbers in place, across the whole row; Jump changes to it. */
.rotation-batches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rotation-batch {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--mist);
}
.rotation-batch.now { border-color: var(--accent); background: var(--paper); box-shadow: inset 0 0 0 1px var(--accent); }
.rotation-batch.open { grid-column: 1 / -1; background: var(--paper); }
.rotation-batch-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.3; }
.rotation-batch-name .badge { padding: 0 6px; font-size: 12px; }
.rotation-batch-facts { margin: 0; color: var(--slate); font-size: 12.5px; line-height: 1.35; }
.rotation-batch-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 6px; margin-top: auto; padding-top: 6px; }
.rotation-batch.open .rotation-batch-acts { justify-content: flex-start; gap: 4px 16px; }
.rotation-batch-see {
  min-height: 32px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.rotation-batch-see:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 0.18em; }
.rotation-batch-see:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.rotation-batch .rotation-batch-jump { min-height: 32px; padding: 0 10px; font-size: 13px; background: var(--paper); }
.rotation-batch .rotation-batch-jump:hover { background: var(--hover); }
.rotation-batches + .cmd-line { margin-top: 12px; }
/* An open batch's numbers: each with what it is doing, a tap copies it. */
.rotation-bnums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
  gap: 8px 14px;
  margin: 8px 0 2px;
  padding: 10px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.rotation-bnums[hidden] { display: none; }
.rotation-bnum { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.rotation-bnum .rotation-cli { font-size: 15px; font-weight: 600; text-align: left; }
.rotation-bnum-facts { color: var(--slate); font-size: 12px; line-height: 1.3; }
.rotation-bnum.bad .rotation-cli { color: var(--slate); text-decoration: line-through; text-decoration-thickness: 1px; }
.rotation-bnum.bad .rotation-bnum-facts { color: var(--bad); font-weight: 700; }
.rotation-bnum.here .rotation-bnum-facts { color: var(--ok); font-weight: 700; }
/* On a phone or a touch screen, a thumb gets the full 44 px. */
@media (pointer: coarse), (max-width: 719.98px) {
  .rotation-batch-see, .rotation-batch .rotation-batch-jump { min-height: var(--tap); }
}
@media (max-width: 400px) {
  .rotation-batches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Start again, under the batches (or the number list of a trunk group). */
.rotation-restart { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--rule); }
.rotation-restart .hint { margin: 0; }

/* The number list: a sentence, the way to change it, and every number with its count. */
.rotation-breakdown { max-width: 48em; margin: 0; }
.rotation-list-edit { margin-top: 12px; }
.rotation-all { margin-top: 12px; }
.rotation-all > div { padding-right: 0; }
.rotation-nums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rotation-num {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-areas: "n state" "facts facts" "bar bar";
  align-items: baseline;
  gap: 2px 10px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--rule);
}
.rotation-num-n { grid-area: n; font-family: var(--font-display); font-size: 17px; font-weight: 500; white-space: nowrap; }
.rotation-num-state { grid-area: state; justify-self: end; color: var(--slate); font-size: 13px; font-weight: 700; text-align: right; }
.rotation-num.here .rotation-num-state { color: var(--accent); }
.rotation-num.warn .rotation-num-state { color: var(--warn-text); }
.rotation-num.bad .rotation-num-state { color: var(--bad); }
.rotation-num.bad .rotation-num-n { color: var(--slate); text-decoration: line-through; text-decoration-thickness: 1px; }
.rotation-num-facts { grid-area: facts; color: var(--slate); font-size: 13px; }
.rotation-num-bar { position: relative; grid-area: bar; height: 3px; margin-top: 4px; overflow: hidden; border-radius: 2px; background: var(--off-pale); }
.rotation-num-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--pct, 0%); background: var(--rule-strong); }
.rotation-num.near .rotation-num-fill { background: var(--warn); }
.rotation-num.bad .rotation-num-fill { background: var(--bad); }
.rotation-counts-age { margin: 12px 0 0; font-size: 14px; }

/* Recent changes: when, what (a bold word and a sentence), and who. A problem gets a coloured
   bar at its left edge, as on Activity. */
.rotation-events { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.rotation-event {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-areas: "time who" "what what" "detail detail";
  gap: 2px 12px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--rule);
}
.rotation-event:last-child { border-bottom: 0; }
.rotation-event.warn, .rotation-event.bad { padding-left: 12px; padding-right: 12px; background: var(--warn-pale); }
.rotation-event.bad { background: var(--bad-pale); }
.rotation-event-time { grid-area: time; color: var(--slate); font-size: 14px; }
.rotation-event-what { grid-area: what; min-width: 0; margin: 0; }
.rotation-event-detail { grid-area: detail; min-width: 0; margin: 0; }
.rotation-event-who { grid-area: who; margin: 0; color: var(--slate); font-size: 14px; text-align: right; }
.rotation-event.warn .rotation-event-what b { color: var(--warn-text); }
.rotation-event.bad .rotation-event-what b { color: var(--bad); }
/* Wide enough (a phone in landscape, or the full width): when, what and who side by side. In the
   right-hand column of a wide screen the list keeps the narrow layout. */
.rotation-history .rotation-sec-body { container-type: inline-size; }
@container (min-width: 560px) {
  .rotation-event {
    grid-template-columns: 9.5em minmax(0, 1fr) 8.5em;
    grid-template-areas: "time what who" "time detail who";
    gap: 2px 16px;
  }
  .rotation-event-time { color: var(--ink); font-size: 16px; }
}

/* Settings for this vendor: one line until Change settings opens the form. Then one column of
   fields, each with its one-line explanation, and Stop rotating this vendor at the end. Its own
   numbers show only while "Its own numbers" is chosen. */
.rotation-settings .panel-head { margin-bottom: 14px; }
.rotation-settings .panel-sub { max-width: 46em; color: var(--ink); font-size: 15px; }
.rotation-change > summary { list-style: none; }
.rotation-change > summary::-webkit-details-marker { display: none; }
.rotation-change[open] > summary .rotation-when-closed,
.rotation-change:not([open]) > summary .rotation-when-open { display: none; }
.rotation-change-body { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.rotation-change-intro { margin-bottom: 16px; }
.rotation-form { max-width: 44em; }
.rotation-form fieldset > legend + .hint { margin-top: -4px; }
.rotation-form:has(input[name="poolMode"][value="shared"]:checked) .rotation-own { display: none; }
.rotation-own { margin: 12px 0 0; }
.rotation-form:has(input[name="poolMode"][value="own"]:checked) .rotation-shared-list { display: none; }
.rotation-shared-list { margin: 12px 0 0; }
.rotation-shared-list select { max-width: 28em; }
.rotation-own textarea { max-width: 24em; }
.rotation-own .alert { margin-top: 12px; }
.rotation-more { margin: 0 0 8px; }
.rotation-more > div { padding-top: 12px; padding-bottom: 12px; }
.rotation-stop { max-width: 44em; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rule); }
.rotation-stop .label { margin: 0 0 4px; font-weight: 700; }
.rotation-stop .hint { margin: 0 0 10px; }
.rotation-num-low { color: var(--warn-text); font-weight: 700; }

/* ------------------------------------------------------------------ Add */
/* The search and "Show only the ones not added". */
.rotation-add-search { align-items: flex-end; justify-content: flex-start; }
.rotation-add-search .field { flex: 1 1 320px; max-width: 30em; margin: 0; }
.rotation-add-only { padding: 0; align-items: center; }
/* The Sippy vendors under the band of their switch; why a switch is not listed, in its part. */
.rotation-add-switch > .alert { margin: 12px 0 0; }
.rotation-add-none { margin: 10px 0 0; padding: 0 14px; color: var(--slate); }
.rotation-add-more { margin-top: 12px; }

/* The rows as a table: a box to tick, Name, Switch and connection, Uses now and Added. The rows
   keep the class "row" of the list they were; here they are table rows. */
.rotation-add-wrap { margin-top: 6px; container-type: inline-size; }
.rotation-add-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; line-height: 1.4; }
.rotation-add-table th, .rotation-add-table td { padding: 8px 12px 8px 0; text-align: left; vertical-align: middle; }
.rotation-add-table thead th {
  padding-top: 4px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  color: var(--slate);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.rotation-add-table tr.row { display: table-row; padding: 0; border: 0; }
.rotation-add-table tbody tr { border-bottom: 1px solid var(--rule); }
.rotation-add-table tbody tr:last-child { border-bottom: 0; }
.rotation-add-table tbody tr.is-ticked { background: var(--accent-tint); }
.rotation-add-table .rotation-add-c-check { width: 44px; padding: 0 4px 0 0; }
.rotation-add-table .rotation-add-c-name { width: 22%; font-size: 15px; font-weight: 700; }
.rotation-add-table .rotation-add-c-where { width: 22%; color: var(--slate); }
.rotation-add-table .rotation-add-c-added { width: 230px; padding-right: 0; }
.rotation-add-label { display: none; }
.rotation-add-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rotation-add-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.rotation-add-hint { margin: 6px 0 0; color: var(--slate); font-size: 13px; }
.rotation-add-table .cmd-line { margin-top: 6px; }

/* Too narrow for the table (phones, tablets): each row is a block, its box and name first. */
@container (max-width: 759.98px) {
  .rotation-add-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rotation-add-table, .rotation-add-table tbody { display: block; }
  .rotation-add-table tr.row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "check name" ". where" ". now" ". added";
    gap: 2px 8px;
    padding: 10px 0;
  }
  .rotation-add-table th, .rotation-add-table td { display: block; width: auto; padding: 0; }
  .rotation-add-table .rotation-add-c-check { grid-area: check; width: auto; padding: 0; }
  .rotation-add-table .rotation-add-c-name { grid-area: name; align-self: center; width: auto; }
  .rotation-add-table .rotation-add-c-where { grid-area: where; width: auto; }
  .rotation-add-table .rotation-add-c-now { grid-area: now; }
  .rotation-add-table .rotation-add-c-added { grid-area: added; width: auto; margin-top: 8px; }
  .rotation-add-label { display: inline; color: var(--slate); }
  .rotation-add-acts { margin-left: 0; }
}
@media (max-width: 719px) {
  .rotation-add-c-added > .btn, .rotation-add-acts .btn { flex: 1 1 auto; }
  .rotation-add-acts { flex: 1 1 100%; }
}

/* The bar while boxes are ticked: at the bottom of the window, over the lists, until the end of
   the page; above the tabs on a phone. */
.rotation-add-bulk {
  position: sticky;
  bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--float-shadow);
}
@media (min-width: 960px) { .rotation-add-bulk { bottom: 16px; } }