/* diagnostics.css — the little this page needs on top of translink.css.
 *
 * The analyser's stylesheet already carries the palette, the panel, the stat
 * row, the chips, the segmented control and the data table. Everything here is
 * layout for controls the analyser has no equivalent of, plus the map and the
 * table density a developer view wants and a reader's view does not. */

.diagnostics {
  padding: 2rem 0 4rem;
}

.diagnostics-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  margin: 0 0 0.4rem;
}

.diagnostics-lede {
  color: var(--muted);
  max-width: 70ch;
  margin: 0 0 1.6rem;
}

.diag-filters {
  margin: 1.2rem 0;
}

/* Table and detail side by side above 1000px, mirroring the analyser's own
 * filter-rail/content split (translink.css, .app / .rail-inner) — same
 * breakpoint, same grid + sticky pattern, so the two pages feel like one
 * system. Below it, detail stacks under the table exactly as before. */
.diag-split {
  display: grid;
  /* `minmax(0, 1fr)`, not bare `1fr`: a grid item's default min-width is
   * auto (its content's min-content size), so without this the priority
   * table's un-scrolled width — nineteen `white-space: nowrap` columns —
   * leaks past `.table-wrap`'s own `overflow-x: auto` and widens the whole
   * page instead of just scrolling inside its own box. */
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1000px) {
  .diag-split {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }

  #detail {
    position: sticky;
    top: 68px;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
  }
}

.diag-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem 1.4rem;
}

.diag-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.diag-input {
  background: var(--surface-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: 0.9rem;
  min-width: 0;
}

.diag-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.diag-reset {
  margin-top: 1rem;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.8rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.diag-reset:hover {
  color: var(--ink);
  border-color: var(--line-strong);
}

.diag-subhead {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  margin: 1.4rem 0 0.5rem;
}

.diag-note,
.diag-hint {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 80ch;
}

/* The derived reading of a failure. Set apart so it is plainly an
 * interpretation, with the measurements it rests on in the table beneath. */
.diag-hint {
  color: var(--ink);
  border-left: 3px solid var(--accent);
  padding: 0.5rem 0 0.5rem 0.8rem;
  margin: 0 0 1rem;
}

.diag-details {
  border-top: 1px solid var(--line);
  margin-top: 1.2rem;
  padding-top: 0.6rem;
}

.diag-details > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.3rem 0;
}

.diag-reason-class {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.diag-reason-class.is-inherent {
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  color: var(--muted);
}

.diag-reason-class.is-fixable {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.diag-model-badge {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn);
}

.diag-map {
  height: 460px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--line);
}

.diag-map-holder,
.diag-chart {
  margin-top: 1.2rem;
}

/* A priority table is nineteen columns wide. It scrolls rather than wraps —
 * the analyser's tables already do this through .table-wrap — but at this
 * density the default cell padding pushes half of it off the screen. */
.diagnostics .data-table {
  font-size: 0.85rem;
}

.diagnostics .data-table th,
.diagnostics .data-table td {
  padding: 0.35rem 0.6rem;
  white-space: nowrap;
}