/* The console is Pico CSS plus this file, and this file may hold two things:
 * assignments to Pico's own custom properties, and layout Pico has no answer
 * for at all. It may not hold a second theme. A test enforces that boundary --
 * every selector must be :root or name one of the handful of classes listed
 * there, and no declaration may set a colour, a font family or a border --
 * because the earlier version of this file grew rules that existed only to
 * fight Pico's defaults, which is what made the console read as half one thing
 * and half another.
 *
 * The rule before this one was "no rules of our own, ever". It was too strict
 * to keep: Pico has no way to size a table column and one button size tuned for
 * a form, so under that rule the fleet table's columns were sized by whichever
 * word in them happened to be longest and its buttons were as tall as the
 * search box. Both are layout, neither is theming.
 */

:root {
  /* Pico scales the root font size UP with the viewport, 100% at phone width to
   * 131.25% past 1536px, which is right for reading prose and wrong for an ops
   * console: on a 1920px screen it put the base font at ~21px and pushed every
   * table cell into wrapping. Pin it to Pico's own base instead. */
  --pico-font-size: 100%;
}

/* --- the fleet table -------------------------------------------------------
 * Auto table layout sizes a column by its widest unbreakable word, which bears
 * no relation to how much a column has to hold: Guest Android carried a version
 * string, a dropdown and two buttons in less width than Phone took for a
 * hostname, so its button labels wrapped onto three lines and every row in the
 * table grew to match the tallest cell. Fixed layout is what makes a <col>
 * width binding, and fleet.html generates the <colgroup> from COLUMNS.
 */
.fleet-table { table-layout: fixed; }
.fleet-table th, .fleet-table td {
  vertical-align: top;
  padding: 0.5rem;
  overflow-wrap: anywhere;
}

.col-phone { width: 18%; }
.col-agents { width: 14%; }
.col-channel { width: 17%; }
.col-activity { width: 17%; }
.col-actions { width: 17%; }

/* Pico sizes its controls for a form, where one sits under the next with room
 * to spare. A table cell stacks four of them and has none. The label goes down
 * with them: at Pico's size the word "Target" was the largest thing in a cell
 * whose subject was a version string, which is the wrong thing to shout. */
.fleet-table button, .fleet-table select, .fleet-table label {
  font-size: 0.8125rem;
}
.fleet-table button { padding: 0.4rem 0.6rem; }

/* --- stacked cell contents -------------------------------------------------
 * Pico separates block children by a full --pico-spacing, so a cell holding a
 * version, a labelled dropdown and two buttons spent more height on gaps than
 * on content.
 */
.stack > * { margin-bottom: 0.4rem; }
.stack > :last-child { margin-bottom: 0; }
.stack label { margin-bottom: 0; }
.stack select, .stack button { width: 100%; margin-bottom: 0; }

/* Retire, and anything else that has to sit beside text rather than own a row
 * of its own. Listed after .stack so it wins the width. */
button.inline { width: auto; margin: 0; padding: 0.1rem 0.5rem; font-size: 0.75rem; }

/* One entry in the Activity column: NOW or LAST, with its state and detail. */
.entry { margin-bottom: 0.5rem; }
.entry:last-child { margin-bottom: 0; }

/* --- tooltips --------------------------------------------------------------
 * Pico's bubble is `white-space: nowrap` with no max-width, so a sentence in it
 * runs off the viewport. That is why the console used to pick between Pico's
 * bubble and abbr[title] by string length, which meant a chip could change
 * hover behaviour depending on how long a version label was. Letting the bubble
 * wrap costs these four declarations and buys one mechanism for every word the
 * console explains. `pre-line` because the column headings put a blank line
 * between what the column is and how its sorting works.
 */
.hint[data-tooltip]::before {
  width: max-content;
  max-width: 18rem;
  white-space: pre-line;
  text-align: left;
}

/* Pico centres the bubble on the word it explains, which puts half of an 18rem
 * bubble to the left of the first column's heading and off the side of the
 * page. Headings anchor theirs to their own left edge instead; the arrow stays
 * centred on the word, so it still reads as pointing at it. */
th .hint[data-tooltip]::before { left: 0; transform: translate(0, 0.25rem); }