/* SAB Portal — The overview page, and the ring it is built around.
 *
 * One of the files listed in layers.css; read that first. Every rule below
 * is in the `app` cascade layer, so it beats Pico without needing to be
 * more specific than Pico. Sizes come from tokens.css and nowhere else. */

@layer app {

/* --- The overview -------------------------------------------------------
 *
 * Three figures across the top, the ring beside the alarms, then the
 * companies with the map beside them. Each card ends in the way into what it
 * counted.
 */

.sab-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--sab-gap-loose);
  margin-bottom: var(--sab-gap-loose);
}

.sab-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sab-gap-loose);
  margin: 0;
  padding: var(--sab-block) var(--sab-block);
}

.sab-kpi-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sab-gap);
}

/* Quieter than a panel's title: on a figure card the number is the headline. */
.sab-kpi-label {
  color: var(--pico-muted-color);
  font-size: var(--sab-text-body);
  font-weight: var(--sab-weight-medium);
}

/* The mark in the corner: an outline icon for a thing being counted, a filled
 * dot in the state's own colour for a fault. Decoration over the label beside
 * it and never instead of it — the card is named in words. */
.sab-kpi-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--sab-radius-panel);
  background: var(--sab-action-bg);
  color: var(--sab-action);
}

.sab-kpi-badge .sab-tab-icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* A state dot is not an invitation, so its square is not the accent's. */
.sab-kpi-badge:has(i) {
  background: var(--sab-quiet-bg);
}

.sab-kpi-badge i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

.sab-kpi-value {
  margin: 0;
  color: var(--sab-ink);
  font-size: var(--sab-text-display);
  font-weight: var(--sab-weight-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--sab-tracking-tight);
  line-height: 1;
}

/* What the number is measured against, and the way into it. On one line at
 * the foot of every card, so the cards end the same way. */
.sab-kpi-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sab-gap);
  margin-top: auto;
  color: var(--pico-muted-color);
  font-size: var(--sab-text-meta);
  white-space: nowrap;
}

.sab-kpi-foot span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sab-kpi-foot a {
  flex: none;
  font-weight: var(--sab-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}

.sab-kpi-foot a:hover,
.sab-kpi-foot a:focus-visible {
  text-decoration: underline;
}

/* Something is raised: the number in copper. Tinted, not reddened — a card
 * that shouts cannot say "one". */
.sab-kpi-raised .sab-kpi-value {
  color: var(--sab-silent);
}

.sab-kpi-raised .sab-kpi-badge {
  background: var(--sab-silent-bg);
}

/* The companies and the map: a column of rows, and a square beside it. The
 * map is given a fixed share rather than half the page — *which company* is
 * the question this row is for, and *where* is the one it hands on to. */
.sab-overview-lower {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
  gap: var(--sab-gap-loose);
  align-items: start;
}

.sab-overview-lower .sab-map-canvas {
  height: auto;
  aspect-ratio: 1;
}

@media (max-width: 64rem) {
  /* No room for a square beside a list: the map goes under it, at the height
   * it had when it was the width of the page. */
  .sab-overview-lower {
    grid-template-columns: minmax(0, 1fr);
  }

  .sab-overview-lower .sab-map-canvas {
    aspect-ratio: auto;
    height: 22rem;
  }
}

/* A panel: a titled block on the page's own ground. */
.sab-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: var(--sab-gap-loose);
  margin-bottom: var(--sab-gap-loose);
}

/* No margin: Pico's own on `section` stacked on the grid's gap and doubled
 * the space under one row of panels. */
.sab-panel {
  margin: 0;
  padding: var(--sab-block) var(--sab-block);
}

.sab-panel h3 {
  margin: 0;
  color: var(--sab-ink);
  font-size: var(--sab-text-base);
  font-weight: var(--sab-weight-strong);
  letter-spacing: -0.01em;
}

.sab-panel .sab-section-head {
  margin-bottom: var(--sab-block);
}

/* --- The ring ------------------------------------------------------------
 *
 * The three device states as a proportion — components/state_donut.html. The
 * same three counts the bar draws, drawn as a circle: a bar says the split, a
 * ring says how much of the whole is good, and that is the question a reader
 * glancing at a fleet is actually asking.
 */
.sab-donut {
  position: relative;
  flex: none;
  width: 9rem;
  height: 9rem;
}

/* Rotated so the first segment starts at twelve o'clock. An SVG circle starts
 * at three, and a fleet that reads clockwise from the top is the convention
 * every clock face in the building already taught. */
.sab-donut-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.sab-donut-track,
.sab-donut-arc {
  fill: none;
  /* Thick enough to carry a tint at a glance, thin enough that the ring reads
   * as a measure and not as a pie. */
  stroke-width: 3.5;
}

/* Round ends; the gaps between them are cut in `fleet.owners.state_segments`. */
.sab-donut-arc {
  stroke-linecap: round;
}

.sab-donut-track {
  stroke: var(--sab-quiet-bg-hover);
}

.sab-donut-online {
  stroke: var(--sab-online-vivid);
}

.sab-donut-silent {
  stroke: var(--sab-silent-vivid);
}

.sab-donut-never {
  stroke: var(--sab-never-vivid);
}

/* The number in the hole. Centred over the ring rather than under it: the
 * ring is a frame round one figure, and a figure beside its own frame is two
 * things to look at. */
.sab-donut-centre {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0;
  text-align: center;
}

.sab-donut-centre strong {
  color: var(--sab-ink);
  font-size: var(--sab-text-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--sab-tracking-tight);
  line-height: 1.1;
}

.sab-donut-centre small {
  color: var(--pico-muted-color);
  font-size: var(--sab-text-meta);
}

/* The ring and its words, side by side: the ring is the shape of the answer
 * and the list is the answer. Neither is complete alone — display rule 5. */
.sab-donut-row {
  display: flex;
  align-items: center;
  gap: var(--sab-gap-wide);
  flex-wrap: wrap;
}

/* `min-width: 0`: the legend narrows before it drops under the ring. */
.sab-donut-legend {
  flex: 1 1 10rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sab-donut-legend li {
  list-style: none;
  font-size: var(--sab-text-body);
}

/* The whole row is the link into the listing narrowed to that state. Its
 * hover is the overview's row band, run out to the card's right edge. */
.sab-donut-legend a {
  display: flex;
  align-items: center;
  gap: var(--sab-gap);
  margin-inline: calc(-1 * var(--sab-gap)) calc(-1 * var(--sab-block));
  padding: var(--sab-gap) var(--sab-block) var(--sab-gap) var(--sab-gap);
  border-radius: var(--sab-radius) 0 0 var(--sab-radius);
  text-decoration: none;
  transition: background-color 120ms ease;
}

.sab-donut-legend a:hover,
.sab-donut-legend a:focus-visible {
  background: var(--sab-quiet-bg);
}

.sab-donut-legend a:hover span,
.sab-donut-legend a:focus-visible span {
  color: var(--sab-action);
}

.sab-donut-legend li + li {
  border-top: var(--sab-hairline) solid var(--sab-rule);
}

.sab-donut-legend li:hover,
.sab-donut-legend li:hover + li,
.sab-donut-legend li:has(a:focus-visible),
.sab-donut-legend li:has(a:focus-visible) + li {
  border-top-color: transparent;
}

.sab-donut-legend i {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

.sab-donut-legend span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pico-muted-color);
}

/* The share, muted, pushed to the right beside the count it is a share of. */
.sab-donut-legend small {
  flex: none;
  margin-left: auto;
  color: var(--pico-muted-color);
  font-size: var(--sab-text-meta);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* The count at the end of the row, so the column of figures has one straight
 * edge whatever length the words in front of them are. */
.sab-donut-legend b {
  flex: none;
  min-width: 3.5rem;
  color: var(--sab-ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

}