/* A broken-links Scan's body (sites/scans/_broken_links), one root:
   .broken-links. Folded in from prototype/broken-links-refresh's variant B2
   (2026-10-26, issue 14).

   ALMOST EVERYTHING HERE IS SOMEONE ELSE'S SHAPE. The verdict is the Action
   Card's band (action_card.css), the readings are the tab card
   (application.css .resource-tabs), the rows and their drawers are the Site
   page's (.row-stack, .row, rows.css .row-drawer and .row-bar), the
   status is the row's pill, and a link's evidence and steps are the Scan
   pages' own (.scan-evidence, .scan-steps). What is left below is what only
   this page draws: a drawer's findings listed beside the one picked, the
   numbers that key them to their steps, and the steps' rhythm.

   THIS FILENAME SORTS BEFORE application.css, and Propshaft serves one <link>
   per file in that order with no @layer, so a rule here that ties a shared
   one on specificity loses. Every rule is therefore scoped under the root,
   which outranks the single-class rules it sits beside. */

/* The verdict card and the tab card stacked as the Site page stacks its own
   (.resource-show's gap), under the Scan's header at the old verdict band's
   distance from it. */
.broken-links {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

/* ---------- A drawer's findings beside the one picked ----------

   The list is narrow and the panel takes the rest: the panel is the column
   a Screenshot of the page fills, with the evidence under it. On a phone the
   two stack, list first, since it is what a pick is made from. */
.broken-links .broken-links-findings {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(0, 1.6fr);
  gap: 1rem 1.5rem;
  align-items: start;

  @media (max-width: 52rem) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.broken-links .broken-links-findings-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

/* A heading over a list, a page's picture or the steps, at one distance from
   what it heads. */
.broken-links :is(.broken-links-findings-list, .broken-links-screenshot, .broken-links-steps) > .row-drawer-head {
  margin: 0 0 0.3rem;
}

/* One finding, a page carrying the address, or (when there is only one) the
   panel's heading. The picked one wears its Confidence's tint and edge, as
   the Action Card's open to-do item does. */
.broken-links .broken-links-findings-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.broken-links button.broken-links-findings-item,
.broken-links a.broken-links-findings-item {
  cursor: pointer;

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

.broken-links .broken-links-findings-item[aria-selected="true"] {
  border-left-color: var(--tone);
  background: var(--tone-bg);
}

.broken-links .broken-links-findings-text {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.broken-links .broken-links-findings-name {
  font-weight: 600;
}

/* What happened, and how the link showed on the page's picture: beside a
   finding, a page, or a Link row's pill (B-27). */
.broken-links :is(.broken-links-findings-why, .broken-links-visibility) {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.broken-links .broken-links-findings-panel {
  min-width: 0;

  &[hidden] {
    display: none;
  }

  > .scan-evidence {
    margin-top: 0;
  }
}

/* ---------- A page's picture, over a finding's evidence ----------

   The panel's own column (B-28, spec §6.2). The frame is never taller than
   70vh and scrolls, so a long page does not push the evidence out of the
   drawer; the canvas takes the picture's proportions, so a mark is placed
   before the lazily loaded picture arrives. A mark is a box over the
   picture, in the fail tone; only the picked finding's show until the
   toggle shows every one on the page. */
.broken-links .broken-links-screenshot {
  margin: 0 0 1rem;
}

.broken-links .broken-links-screenshot-line {
  margin: 0 0 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

.broken-links .broken-links-screenshot-frame {
  max-height: 70vh;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
}

.broken-links .broken-links-screenshot-canvas {
  position: relative;
  width: 100%;

  > img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* The box stands clear of the link rather than tracing its edge: a link is
   often a few pixels across once a 1440px page is drawn at the drawer's
   width. Content-box sizing keeps the inline width and height the link's
   own, the padding opens the space, and the negative margin (padding plus
   border) keeps the box centered on the link. The 0.25rem is off the spacing
   scale on purpose: it was set by eye against a real capture (an exception
   in scales_spec). */
.broken-links .broken-links-mark {
  position: absolute;
  box-sizing: content-box;
  margin: calc(-0.25rem - 2px) 0 0 calc(-0.25rem - 2px);
  padding: 0.25rem;
  border: 2px solid var(--color-fail);
  border-radius: var(--radius-lg);

  &:not(.broken-links-mark--picked) {
    display: none;
    border-style: dashed;
  }
}

.broken-links .broken-links-screenshot--all .broken-links-mark {
  display: block;
}

.broken-links .broken-links-screenshot-toggle {
  margin-top: 0.5rem;
}

/* The number that keys a finding to the steps about it ("What to do about
   1 and 2"), in its Confidence's colour. */
.broken-links .broken-links-number {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--tone);
  color: var(--color-surface);
  font-size: 0.75rem;
  font-weight: 700;
}

/* ---------- The steps under the findings ---------- */
.broken-links .broken-links-steps > .scan-steps + .row-drawer-head {
  margin-top: 0.8rem;
}

/* The counts line under a row's address, which can run long on a phone. */
.broken-links .broken-links-row-counts {
  overflow-wrap: anywhere;
}