/* The uptime report (reports/uptimes/show; reporting/reports/uptime.md),
   lifted from prototype O (.scratch/uptime-report/issues/08, variant I as
   rounds 9 and 10 left it).

   The page is a resource page's frame: .resource-show's column, Site#show's
   .resource-header with the website's name, address and "Watching since", and
   under it the period bar sitting just above the card it governs, so the
   two read as one (.uptime-report-group). The card holds the figures, the
   calendar, the outages and the load-time graph.

   Heading. "Uptime:" is the h1 and stays still; with more than one website
   only the name beside it is the control, drawn at the h1's size so the
   two read as one heading. With one, the h1 says the whole of it.

   Period bar. The dates lead and say what the bar is about, so its
   "Period" label is for screen readers only, which also buys the room to
   keep the controls on one line. Every period button looks the same, the
   segments and the calendar alike: white, so they read as buttons on the
   page's background; grey under the pointer, accent tint while pressed,
   accent when it is the period on show. On a phone the segments take the
   whole row.

   Figures. The Dashboard's .resource-stats tiles, four abreast where the
   card has room for four at the Dashboard's narrowest tile, and otherwise
   two by two, never three with one left over; on a phone boxes rather
   than its strip of pills (.resource-stats--boxes, application.css). The
   card is the container the tiles measure, as the rail beside it takes a
   different width at different screen sizes. A tile takes its
   grade's status tone (good pass, fair degraded, poor fail) and the tone's
   ✓ ! ✕ sits in its corner as a small button named by the grade's word
   (reporting/report.md B-18). Its tip, the word and the rule, opens on
   hover, keyboard focus or a press, hangs under the figure across the
   tile's width so it never leaves the screen whichever column the tile is
   in, and keeps itself open while the pointer moves onto it; Escape closes
   it (tip controller). A tile with no figure has no grade's tone, only the
   neutral one, and its "No figure" is the button whose tip says why
   (reporting/report.md B-19). Durations are drawn smaller than the counts,
   as prototype O drew them, so "2 days 3 h 5 min" fits a tile.

   Calendar. Under the tiles the card splits in two, prototype O's: the
   calendar on the left and the outage list beside it on the right, one
   above the other on a phone. Days sit in a Monday-first grid of seven
   that fills its column, each cell its state's colour with the day's
   number on it; on 24 hours the hours make one unbroken strip instead,
   labelled every six hours, its ends rounded. The colours are the app's
   status tones (pass, degraded, fail), not the prototype's lighter amber,
   so a day's white number keeps AA contrast; a day not watched is grey
   stripes with a muted
   number, and the days of the current month still to come are dashed
   outlines. The state is said in words too, hidden for screen readers and
   as the tip (accessibility.md B-04). A cell that opens History is
   outlined under the pointer or keyboard, an hour lifted over its
   neighbours in the strip so its outline shows whole, and while one is
   pointed at the rest dim to 75%, enough to single it out without
   reading as disabled.

   Section headings. Each part of the card, the calendar, the outages and
   the load-time graph, is headed by an h2 under the page's h1.

   Outages. Prototype O's timeline beside the calendar: a rule down the
   left with a red dot on it for each outage, newest at the top, its "seen
   down" time small and muted above how long and why, the pages and the
   recovery muted under them; one still going says "Still down." and why
   in red, its time and pages muted like the rest. "See more", when there
   is more, follows the list, a link with no dot.
   Beside the calendar the column takes the calendar's height, at least
   seven days' and at most 90 days', so the list's own length never sets
   the row (contain: size) and it scrolls inside; stacked on a phone it
   scrolls past 22rem. The "seen down" time is said as "Seen down …" to
   assistive technology, the bare time drawn.

   Load-time graph. Prototype O's, across the card under the split: one
   plot the server draws as SVG, 900 wide and scaled to the card, a line
   a page in fixed categorical hues, a grid line each second and 3 s
   dashed in the fail tone. A run of readings is a line and a reading on
   its own a dot, so a day with none is a gap. Pointing along it shows a
   muted crosshair and a tip beside it, on whichever side has the room,
   that the pointer cannot catch; the nearest line thickens and the rest
   recede to 18%. The table under it keys each page to its line by a short
   bar of its colour, so a line is never told by colour alone, and a row
   under the pointer is tinted with the accent while its line is picked
   out, on whichever plot is showing, and a reading on either plot tints
   its row. Every reading is also in a table only screen readers are
   given. On a phone the table loses its column headings and each row wraps
   its figures two by two under the page's name, each with its column's
   heading small above it (copy.md § Legend table).

   Load-time graph on a phone. Prototype Q: at 40rem and under the wide
   plot gives way to a plot of its own, 360 wide and 250 tall,
   so its 11-unit labels draw near their written size rather than the wide
   plot's shrinking to about 4px. Its reading is the tip's content in a
   box the plot's width floating just above it, over the heading and
   whatever sits there, so the plot never moves under the finger; it is
   hidden until the first touch. A muted hint under the plot says how to
   read it, and the note on the dashed line follows, as under the wide
   one.

   Sizing note: media queries resolve rem against 16px whatever the root
   font-size, which steps from 16px to 20px, so 40rem in a query is 640px
   (application.css's note). */

.uptime-report {
  /* The load-time graph's hues, prototype O's categorical ones, a page each
     in the table's order (Reports::UptimesHelper::LOAD_COLORS). */
  --uptime-report-load-1: #2a78d6;
  --uptime-report-load-2: #eb6834;
  --uptime-report-load-3: #1baf7a;
  --uptime-report-load-4: #eda100;
  --uptime-report-load-5: #e87ba4;
  --uptime-report-load-6: #008300;
  --uptime-report-load-7: #4a3aa7;
  --uptime-report-load-8: #e34948;

  /* The shapes the report draws more than once, each in one place. */

  /* A tip: the figures' and the graph's, and the graph's reading on a
     phone. */
  .uptime-report-tip,
  .uptime-report-graph-tip,
  .uptime-report-graph-reading {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
  }

  /* A muted note under a part of the card. */
  .uptime-report-hint,
  .uptime-report-graph-hint,
  .uptime-report-graph-note {
    margin: 0.4rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
  }

  /* A page's key to its line, a short bar of its colour. */
  .uptime-report-key,
  .uptime-report-graph-tip-key {
    display: inline-block;
    flex: none;
    width: 0.9rem;
    height: 3px;
    border-radius: 2px;
    vertical-align: middle;
  }

  .uptime-report-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* em, not a step: a word space at the heading's own size. */
    column-gap: 0.25em;
    font-size: 1.6rem;

    h1 {
      margin: 0;
    }
  }

  /* The address is a link with the website menu closer than 24px to it, so
     it needs WCAG 2.2's 24px target of its own: an inline link is as tall as
     its text, 21px at the 112.5% root. In px since the 24 is CSS px. Not on
     a phone, where the open menu lies over the address and the taller box
     would put more of it under the menu. */
  @media (width > 40rem) {
    .resource-header-address a {
      display: inline-block;
      min-height: 24px;
    }
  }

  .uptime-report-site {
    position: relative;
  }

  .uptime-report-site-trigger {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: -0.1rem -0.4rem;
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-sm);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;

    &::-webkit-details-marker {
      display: none;
    }
  }

  .uptime-report-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--color-accent-bg);
    color: var(--color-accent-dark);
    transition: transform 0.12s ease, background 0.12s ease;

    svg {
      stroke-width: 2.5;
    }
  }

  .uptime-report-site-trigger:hover,
  .uptime-report-site[open] > .uptime-report-site-trigger {
    background: var(--color-accent-bg);
    color: var(--color-accent-dark);

    .uptime-report-chevron {
      background: var(--color-accent);
      color: var(--color-on-accent);
    }
  }

  .uptime-report-site[open] .uptime-report-chevron {
    transform: rotate(180deg);
  }

  /* Opening rightward from the name is the menu's own modifier,
     .popover-menu-items--start (popover_menu.css). */
  .uptime-report-site-items {
    min-width: 18rem;
    padding: 0.3rem;
  }

  .uptime-report-corner {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    flex-shrink: 0;
  }

  /* A menu's rows, the websites' and the months' alike. */
  .uptime-report-choices {
    list-style: none;
    padding: 0;
    margin: 0.4rem 0;
    display: grid;
    gap: 0.2rem;
  }

  .uptime-report-choice {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    /* The sides are .uptime-report-group-name's side margin, so a choice's
       text starts under its group's heading. */
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem;

    &:hover {
      background: var(--color-bg);
    }
  }

  .uptime-report-choice--on {
    background: var(--color-accent-bg);
    font-weight: 600;
  }

  .uptime-report-choice-figure {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
  }

  .uptime-report-choice-down {
    color: var(--color-fail);
    font-weight: 700;
  }

  .uptime-report-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .uptime-report-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem 1rem;
  }

  .uptime-report-dates {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
  }

  .uptime-report-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .uptime-report-seg {
    display: inline-flex;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
  }

  .uptime-report-seg-item,
  .uptime-report-month-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.85rem;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;

    &:hover {
      background: var(--color-bg);
    }

    &:active {
      background: var(--color-accent-bg);
    }
  }

  .uptime-report-seg-item + .uptime-report-seg-item {
    border-left: 1px solid var(--color-border);
  }

  .uptime-report-month-trigger {
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);

    &::-webkit-details-marker {
      display: none;
    }

    svg {
      display: block;
      height: 1.5em;
      width: 1.1em;
    }
  }

  .uptime-report-months[open] > .uptime-report-month-trigger {
    background: var(--color-bg);
  }

  .uptime-report-seg-item--on,
  .uptime-report-seg-item--on:hover,
  .uptime-report-seg-item--on:active,
  .uptime-report-month-trigger--on,
  .uptime-report-month-trigger--on:hover,
  .uptime-report-month-trigger--on:active,
  .uptime-report-months[open] > .uptime-report-month-trigger--on {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: 600;
  }

  /* The bar's controls sit at its right end, so the months open leftward,
     as .popover-menu-items does. */
  .uptime-report-month-items {
    min-width: 16rem;
    padding: 0.3rem;
    max-height: 70vh;
    overflow-y: auto;
  }

  .uptime-report-group-name {
    margin: 0.4rem 0.6rem 0;
  }

  .card {
    container-type: inline-size;
  }

  .uptime-report-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
  }

  /* Four of the Dashboard's narrowest tiles (9rem) and their three gaps
     (0.7rem), at the largest root, 20px; under the smaller steps four
     would fit sooner, but this one width holds them at every root. */
  @container (min-width: 762px) {
    .uptime-report-tiles {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  /* No figure, or a figure no grade applies to (the broken links
     report's changes): the neutral tone, no grade's. */
  .uptime-report-tile--no-figure,
  .uptime-report-tile--ungraded {
    --tone: var(--color-unknown);
    --tone-bg: var(--color-unknown-bg);
  }

  /* A line under a tile's label, such as what broken now changed by, and
     the way on from it, such as to the scan it was read from. */
  .uptime-report-tile-note {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;
  }

  .uptime-report-tile-link {
    margin-top: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
  }

  /* The figure and the mark (or the "No figure" that carries the why),
     with the tip hung under them. */
  .uptime-report-tile-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .uptime-report-duration {
    font-size: 1.1rem;
    line-height: 1.75;
  }

  .uptime-report-tip-trigger {
    cursor: help;
  }

  .uptime-report-mark {
    padding: 0;
    background: none;
  }

  .uptime-report-no-figure {
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    text-align: left;
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
  }

  .uptime-report-tip {
    display: none;
    position: absolute;
    z-index: 2;
    top: calc(100% + 0.3rem);
    left: 0;
    right: 0;
    padding: 0.5rem 0.7rem;
    color: var(--color-text);
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.4;

    strong {
      display: block;
    }

    /* Covers the way down from the mark, so the pointer can reach the tip
       without it closing. */
    &::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 100%;
      height: 1rem;
    }
  }

  .uptime-report-tip-trigger:focus-visible ~ .uptime-report-tip,
  .uptime-report-tile-head--open > .uptime-report-tip {
    display: block;
  }

  /* Pointing opens it only where there is a pointer that hovers: a tap
     opens it through the tip controller, and a hover a phone leaves behind
     would hold it open after a second tap closed it. */
  @media (hover: hover) {
    .uptime-report-tip-trigger:hover ~ .uptime-report-tip,
    .uptime-report-tip:hover {
      display: block;
    }
  }

  .uptime-report-tile-head--dismissed > .uptime-report-tip {
    display: none !important;
  }

  .uptime-report-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
    margin-top: 1rem;
  }

  .uptime-report-split,
  .uptime-report-load {
    h2 {
      margin: 0.5rem 0;
      font-size: 1rem;
    }
  }

  .uptime-report-weekdays,
  .uptime-report-cells--days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.2rem;
  }

  .uptime-report-weekdays {
    margin-bottom: 0.2rem;
  }

  .uptime-report-weekday {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    text-align: center;
  }

  .uptime-report-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-on-accent);
    text-decoration: none;
    transition: opacity 0.12s;
  }

  .uptime-report-cells--days .uptime-report-cell {
    height: 2rem;
    border-radius: 4px;
    font-size: 0.7rem;
  }

  /* Its ends rounded on the first and last hours rather than clipped by
     the strip, which would clip an hour's outline too. */
  .uptime-report-cells--hours {
    display: flex;

    .uptime-report-cell {
      flex: 1 1 0;
      min-width: 2px;
      height: 2.5rem;
    }

    .uptime-report-cell:first-child {
      border-radius: 6px 0 0 6px;
    }

    .uptime-report-cell:last-child {
      border-radius: 0 6px 6px 0;
    }

    /* Over its neighbours, which a dimmed hour would otherwise paint
       across its outline. */
    .uptime-report-cell--opens:hover,
    .uptime-report-cell--opens:focus-visible {
      position: relative;
      z-index: 1;
    }
  }

  .uptime-report-cell--up {
    background: var(--color-pass);
  }

  .uptime-report-cell--degraded {
    background: var(--color-degraded);
  }

  .uptime-report-cell--down {
    background: var(--color-fail);
  }

  .uptime-report-cell--not_watched {
    background: repeating-linear-gradient(45deg, var(--color-unknown-bg), var(--color-unknown-bg) 3px, var(--uptime-report-stripe) 3px, var(--uptime-report-stripe) 6px);
    --uptime-report-stripe: color-mix(in srgb, var(--color-unknown-bg), var(--color-surface));
    color: var(--color-text-muted);
  }

  .uptime-report-cell--to_come {
    border: 1px dashed var(--color-border);
    color: var(--color-text-muted);
  }

  .uptime-report-cell--opens {
    cursor: pointer;

    /* Focus takes this outline rather than the global ring: in the strip an
       hour's outline falls on its neighbours, whose status tones hide the
       accent at its sides. */
    &:hover,
    &:focus-visible {
      outline: 2px solid var(--color-text);
      outline-offset: 1px;
    }
  }

  .uptime-report-cells:has(.uptime-report-cell--opens:hover) .uptime-report-cell:not(:hover) {
    opacity: 0.75;
  }

  .uptime-report-hour-labels {
    display: flex;
    margin-top: 0.2rem;
    font-size: 0.7rem;
    color: var(--color-text-muted);

    span {
      flex: 1 1 0;
      min-width: 0;
      white-space: nowrap;
    }
  }

  .uptime-report-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.9rem;
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);

    li {
      display: flex;
      align-items: center;
      gap: 0.4rem;
    }
  }

  .uptime-report-swatch {
    flex: none;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 2px;
  }

  .uptime-report-none {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
  }

  /* Room for the dots, which sit half over the rule and would otherwise be
     clipped by the scroll, as prototype O's were. */
  .uptime-report-outage-scroll {
    max-height: 22rem;
    overflow-y: auto;
    padding-left: 5px;
  }

  .uptime-report-outage-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 2px solid var(--color-border);
  }

  .uptime-report-outage {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 0 0.9rem 1rem;
    font-size: 0.9rem;

    &::before {
      content: "";
      position: absolute;
      left: -6px;
      top: 0.4rem;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--color-fail);
    }
  }

  .uptime-report-outage--going {
    color: var(--color-fail);
  }

  .uptime-report-outage-when {
    font-size: 0.75rem;
    color: var(--color-text-muted);
  }

  .uptime-report-outage-after {
    font-size: 0.85rem;
    color: var(--color-text-muted);
  }

  /* Outside the list, so the 2px is its rule: the line starts under the
     entries' text, not 2px short of it. */
  .uptime-report-outage-more {
    margin: 0;
    padding: 0 0 0.3rem calc(1rem + 2px);
    font-size: 0.9rem;
    font-weight: 600;
  }

  .uptime-report-load {
    margin-top: 1rem;
  }

  .uptime-report-plot {
    position: relative;

    svg {
      display: block;
      width: 100%;
      height: auto;
      touch-action: pan-y;
    }
  }

  .uptime-report-graph-grid {
    stroke: var(--color-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }

  .uptime-report-graph-slow {
    stroke: var(--color-fail);
    stroke-width: 1;
    stroke-dasharray: 4 4;
    vector-effect: non-scaling-stroke;
  }

  /* px, not a step: these are the SVG's own viewBox units, which the plot
     scales with its width (Reports::UptimesHelper places the labels in them). */
  .uptime-report-graph-label {
    font-size: 10px;
    fill: var(--color-text-muted);
  }

  .uptime-report-line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    transition: opacity 0.12s;
  }

  .uptime-report-line--dim {
    opacity: 0.18;
  }

  .uptime-report-line--on {
    stroke-width: 3;
  }

  .uptime-report-cross {
    stroke: var(--color-text-muted);
    stroke-width: 1;
    opacity: 0;
  }

  .uptime-report-cross--on {
    opacity: 0.6;
  }

  .uptime-report-graph-tip {
    position: absolute;
    top: 0.5rem;
    z-index: 5;
    min-width: 12rem;
    padding: 0.5rem 0.7rem;
    font-size: 0.8rem;
    pointer-events: none;
  }

  .uptime-report-graph-tip-when {
    margin-bottom: 0.3rem;
    color: var(--color-text-muted);
  }

  .uptime-report-graph-tip-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text-muted);

    strong {
      min-width: 3rem;
      color: var(--color-text);
    }
  }

  .uptime-report-graph-tip-row--on {
    color: var(--color-text);
    font-weight: 600;
  }

  .uptime-report-graph-tip-summary {
    margin: 0.1rem 0 0.3rem 1.25rem;
    color: var(--color-text-muted);
  }

  .uptime-report-graph-phone {
    display: none;

    .uptime-report-graph-label {
      font-size: 11px;
    }
  }

  .uptime-report-graph-reading {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 0.25rem);
    z-index: 5;
    padding: 0.5rem 0.7rem;
    font-size: 0.85rem;

    .uptime-report-graph-tip-row {
      padding: 0.1rem 0;
    }
  }

  .uptime-report-urls {
    width: 100%;
    margin-top: 0.8rem;
    border-collapse: collapse;
    font-size: 0.85rem;

    th,
    td {
      padding: 0.4rem 0.5rem;
      border-top: 1px solid var(--color-border);
      text-align: left;
    }

    thead th {
      border-top: 0;
      color: var(--color-text-muted);
      font-size: 0.75rem;
      font-weight: 600;
    }

    tbody th {
      font-weight: 600;
    }
  }

  .uptime-report-url--on {
    background: var(--color-accent-bg);
  }

  .uptime-report-url-address,
  .uptime-report-url-outages {
    color: var(--color-text-muted);
    font-weight: 400;
  }
}

/* Beside the calendar, the outages' column is the calendar's height, never
   shorter than seven days' (12.5rem) nor taller than 90 days' (39rem), and
   the list scrolls inside it. */
@media (min-width: 40.0625rem) {
  .uptime-report {
    .uptime-report-outages {
      align-self: stretch;
      contain: size;
      display: flex;
      flex-direction: column;
      min-height: 12.5rem;
      max-height: 39rem;
    }

    .uptime-report-outage-scroll {
      flex: 1 1 0;
      min-height: 0;
      max-height: none;
    }
  }
}

@media (max-width: 40rem) {
  .uptime-report {
    /* Wrapped under the heading, the corner reads from the left. */
    .uptime-report-corner {
      align-items: flex-start;
    }

    /* A short name stays beside "Uptime:", where its menu would run off
       the right edge (mobile.md B-01), so the menu opens from the title's
       start instead, no wider than the screen. */
    .uptime-report-title {
      position: relative;
    }

    .uptime-report-site {
      position: static;
    }

    .uptime-report-site-items {
      min-width: min(18rem, calc(100vw - (var(--app-gutter) * 2)));
    }

    .uptime-report-seg {
      width: 100%;
    }

    .uptime-report-seg-item {
      flex: 1;
      justify-content: center;
      padding: 0.4rem 0.3rem;
    }

    /* The segments fill the row, so the calendar wraps under them at the
       left, and its months open rightward from there: the menu says so
       itself (.popover-menu-items--start-on-phone, popover_menu.css). */

    /* The tiles stay boxes two by two, not the Dashboard's strip of pills:
       .resource-stats--boxes, whose rules live with the tiles' own in
       application.css's phone block. */
    .uptime-report-tile .uptime-report-duration {
      font-size: 1rem;
    }

    .uptime-report-split {
      grid-template-columns: 1fr;
    }

    .uptime-report-graph-wide {
      display: none;
    }

    .uptime-report-graph-phone {
      display: block;
    }

    .uptime-report-urls {
      thead {
        display: none;
      }

      tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      tbody th {
        grid-column: 1 / -1;
      }

      /* Each figure under its column's heading, which the table has lost. */
      td::before {
        content: attr(data-label);
        display: block;
        color: var(--color-text-muted);
        font-size: 0.7rem;
      }
    }
  }
}