/* The broken links report (reports/broken_links/show;
   reporting/reports/broken-links.md), lifted from the page prototype's
   variant d (.scratch/broken-links-report/issues/07).

   The page is the uptime report's frame and draws its shapes as they are:
   .resource-show's column, .resource-header, the shared period bar
   (reports/_period_bar) above the card it governs, and the card's tiles
   and two columns. Their rules are uptime_report.css's and are not restated
   here; this file holds only what the broken links report draws and the
   uptime report does not.

   No finished scan yet. One message in the card, in place of everything
   under the period bar (B-47), its heading at the card's heading size.

   Graph. Uptime's plot, grid, labels, dashed line, tip and legend, with a
   column a scan stacked by change in the series' own colours, not a
   grade's (B-30): broken since an earlier scan the fail tone dimmed, newly
   broken the full tone, and no longer found an outline in the good tone on
   top, gone rather than counted. A scan that did not finish is a hatched
   slot (B-31). Pages checked is the accent's line and dots, its axis
   labels in the accent too (B-32). A slot under the pointer, focused or
   read is tinted, and focus also takes the accent's ring (B-35). Each
   legend key has a background twin of its segment.

   What changed and Still broken. Side by side where uptime's calendar and
   outages sit, stacked on a phone (uptime_report.css's .uptime-report-split).
   What changed is uptime's outage timeline, its dot neutral, since a scan
   is not an outage, and hollow for a scan that did not finish. Its
   addresses are listed small under each count, wrapping anywhere, as a
   long address would otherwise widen the column. Still broken is a list of
   rows, the address beside the day its run began, a hairline between. */

.broken-links-report {
  .broken-links-report-waiting h2 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
  }

  .broken-links-report-waiting p {
    margin: 0.4rem 0 0;
  }

  .broken-links-report-seg--carried {
    fill: var(--color-fail);
    fill-opacity: 0.45;
    background: color-mix(in srgb, var(--color-fail) 45%, transparent);
  }

  .broken-links-report-seg--newly {
    fill: var(--color-fail);
    background: var(--color-fail);
  }

  .broken-links-report-seg--ended {
    fill: var(--color-pass-bg);
    stroke: var(--color-pass);
    stroke-width: 1.5;
    stroke-dasharray: 3 2;
    background: var(--color-pass-bg);
    border: 1.5px dashed var(--color-pass);
  }

  .broken-links-report-hatch {
    stroke: var(--color-text-muted);
    stroke-width: 1.5;
    opacity: 0.45;
  }

  .broken-links-report-pages {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .broken-links-report-page {
    fill: var(--color-surface);
    stroke: var(--color-accent);
    stroke-width: 2;
  }

  .uptime-report-graph-label.broken-links-report-pages-label {
    fill: var(--color-accent);
  }

  .broken-links-report-slot {
    fill: transparent;
    cursor: pointer;
    outline: none;
  }

  .broken-links-report-slot:hover,
  .broken-links-report-slot:focus-visible,
  .broken-links-report-slot--on {
    fill: var(--color-text);
    fill-opacity: 0.06;
  }

  .broken-links-report-slot:focus-visible {
    stroke: var(--color-accent);
    stroke-width: 1.5;
  }

  .broken-links-report-tip-hint {
    margin-top: 0.3rem;
    font-size: 0.75rem;
    color: var(--color-text-muted);
  }

  .broken-links-report-open {
    display: block;
    margin-top: 0.4rem;
    font-weight: 600;
  }

  .broken-links-report-key {
    display: inline-block;
    width: 0.8rem;
    height: 0.8rem;
    margin-right: 0.3rem;
    border-radius: 2px;
    vertical-align: -0.1rem;
  }

  .broken-links-report-key--pages {
    height: 0;
    border-top: 2px solid var(--color-accent);
    vertical-align: middle;
  }

  /* Keyed on both classes: uptime_report.css loads after this file and
     colours every outage's dot at the same specificity otherwise. */
  .uptime-report-outage.broken-links-report-change::before {
    background: var(--color-text-muted);
  }

  .uptime-report-outage.broken-links-report-change--unfinished {
    color: var(--color-text-muted);

    &::before {
      background: var(--color-surface);
      border: 2px solid var(--color-text-muted);
    }
  }

  .broken-links-report-addresses {
    margin: 0.1rem 0 0.4rem;
    padding: 0;
    list-style: none;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    overflow-wrap: anywhere;

    /* Each address is a link, and a short one ("/f") is narrower than
       WCAG 2.2's 24px target, so it passes on the space around it: a 24px
       line apiece. Its own line is that tall only at the 125% root, so this
       holds it there below 1537px, in px since the 24 is CSS px. */
    li {
      min-height: 24px;
    }
  }

  /* A hairline above the first row as well as between them. The day sits
     beside the address while both fit, and under it once they do not, so a
     phone never squeezes the address to a letter. */
  .broken-links-report-still {
    .row-list {
      border-top: 1px solid var(--color-border);
    }

    .row-top {
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0.1rem 0.8rem;
      padding-block: 0.4rem;
      font-size: 0.9rem;
    }

    .row-text {
      flex: 1 1 8rem;
    }

    .row-name {
      font-weight: 400;
    }

    .row-right {
      flex: 0 1 auto;
      width: auto;
      font-size: 0.8rem;
      color: var(--color-text-muted);
    }
  }

  .broken-links-report-still-all {
    margin: 0.4rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
  }

  .broken-links-report-key--unfinished {
    background: repeating-linear-gradient(45deg, var(--color-border) 0 2px, transparent 2px 5px);
    border: 1px solid var(--color-border);
  }
}