/* Inspection report widget. Everything is scoped under .insp-root so it cannot
   collide with the host page. Colours come from CSS variables you can override;
   the defaults follow the light/dark preference. */

.insp-root {
  --insp-card: #fff;
  --insp-bg: #f5f6f7;
  --insp-ink: #1a1d21;
  --insp-mut: #8a9199;
  --insp-line: #e8eaec;
  --insp-ok: #0e8a6a;
  --insp-bad: #e23c3c;
  --insp-shade: #fff;
  --insp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  background: var(--insp-card);
  color: var(--insp-ink);
  line-height: 1.6;
  border: 1px solid var(--insp-line);
  border-radius: 8px;
  overflow: hidden;
}

@media (prefers-color-scheme: dark) {
  .insp-root {
    --insp-card: #161a1e; --insp-bg: #0e1114; --insp-ink: #e7ebee;
    --insp-mut: #8a939c; --insp-line: #232930; --insp-ok: #3fbf9a;
    --insp-bad: #f0685e;
    /* the diagrams are dark line-art on transparency — keep a light plate
       behind them or they vanish on a dark page */
    --insp-shade: #c8ccd2;
  }
}

.insp-head { padding: 1rem; text-align: center; border-bottom: 1px solid var(--insp-line); }
.insp-head h3 { margin: 0; font-size: 1.02rem; font-weight: 700; }
.insp-head p { margin: .15rem 0 0; font-size: .82rem; color: var(--insp-mut); }

.insp-rec { text-align: center; padding: .85rem 1rem; font-size: .86rem;
            color: var(--insp-mut); border-bottom: 1px solid var(--insp-line); }
.insp-rec b { color: var(--insp-ink); font-family: var(--insp-mono); font-variant-numeric: tabular-nums; }

.insp-stage { padding: 1.1rem 1rem .3rem; }
.insp-fig { position: relative; max-width: 330px; margin: 0 auto; }
.insp-fig img { width: 100%; display: block; background: var(--insp-shade); border-radius: 4px; }

.insp-mk { position: absolute; transform: translate(-50%, -50%);
           width: 23px; height: 23px; border-radius: 50%; color: #fff;
           font: 700 12px/23px var(--insp-mono); text-align: center;
           box-shadow: 0 1px 4px rgba(0, 0, 0, .28); }
/* RTL mirrors the box, so shift the marker back onto its anchor */
[dir="rtl"] .insp-mk { transform: translate(50%, -50%); }

.insp-legend { display: flex; flex-wrap: wrap; gap: .45rem .8rem;
               justify-content: center; padding: .9rem 1rem 0; }
.insp-lg { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; }
.insp-lg i { width: 18px; height: 18px; border-radius: 50%; color: #fff;
             font: 700 10px/18px var(--insp-mono); text-align: center; font-style: normal; }

.insp-note { text-align: center; color: var(--insp-mut); font-size: .73rem; padding: .6rem 1rem .2rem; }
.insp-dots { display: flex; gap: .45rem; justify-content: center; align-items: center; padding: .6rem 0 1rem; }
.insp-dot { width: 9px; height: 9px; border-radius: 50%; background: #cfd4d9;
            border: 0; padding: 0; cursor: pointer; }
.insp-dot[aria-current="true"] { background: var(--insp-ink); }
.insp-pgn { font-size: .76rem; color: var(--insp-mut); margin-inline-start: .5rem; }

.insp-band { background: var(--insp-bg); padding: .75rem 1rem; font-size: .8rem;
             color: var(--insp-mut); border-block: 1px solid var(--insp-line); }

.insp-row { display: flex; justify-content: space-between; gap: 1rem;
            padding: .85rem 1rem; border-bottom: 1px solid var(--insp-line); font-size: .9rem; }
.insp-row span { color: var(--insp-mut); }
.insp-row b { font-weight: 600; font-variant-numeric: tabular-nums; }

.insp-root h4 { font-size: .85rem; margin: 0; padding: 1.15rem 1rem .5rem;
                color: var(--insp-mut); font-weight: 700; }
.insp-list { list-style: none; margin: 0; padding: 0; }
.insp-list li { display: flex; align-items: center; gap: .65rem; padding: .72rem 1rem;
                border-bottom: 1px solid var(--insp-line); font-size: .89rem; }
.insp-list li b { margin-inline-start: auto; font-weight: 600; font-size: .82rem; }
.insp-pc { width: 21px; height: 21px; border-radius: 50%; color: #fff;
           font: 700 11px/21px var(--insp-mono); text-align: center; flex: none; }
.insp-ok { color: var(--insp-ok); }
.insp-bad { color: var(--insp-bad); }

.insp-tw { overflow-x: auto; padding: 0 1rem 1rem; }
.insp-root table { width: 100%; border-collapse: collapse; font-size: .82rem; min-width: 400px; }
.insp-root th { color: var(--insp-mut); font-weight: 600; font-size: .72rem;
                padding: .45rem 0; border-bottom: 1px solid var(--insp-line); text-align: start; }
.insp-root td { padding: .5rem 0; border-bottom: 1px solid var(--insp-line);
                font-variant-numeric: tabular-nums; }
.insp-root td:first-child { font-family: var(--insp-mono); }
.insp-n { text-align: end; font-family: var(--insp-mono); }
.insp-root th + th, .insp-root td.insp-n { text-align: end; }

.insp-live { margin: 1rem; padding: .9rem 1rem; border: 1px solid var(--insp-line);
             border-radius: 8px; background: var(--insp-bg); }
.insp-live a { color: inherit; font-weight: 600; font-size: .82rem;
               word-break: break-all; display: inline-block; }
.insp-live p { margin: .35rem 0 0; font-size: .77rem; color: var(--insp-mut); }
.insp-empty { padding: 1.5rem 1rem; text-align: center; color: var(--insp-mut); font-size: .88rem; }

.insp-root a:focus-visible, .insp-root button:focus-visible {
  outline: 2px solid var(--insp-ok); outline-offset: 2px;
}