/* The stylesheet that rel-inspector.html loads with <link rel="stylesheet">.
   It styles the table, so the demo shows a stylesheet doing real work. */
@layer base, lab;

@layer lab {
  section {
    margin-block-end: 1.5rem;

    & h2 { font-size: 1.05rem; margin-block: 0 0.5rem; }
  }
  nav, blockquote p { margin-block: 0.5rem; }
  blockquote {
    margin-inline: 0;
    padding-inline-start: 0.75rem;
    border-inline-start: 0.25rem solid var(--rule);
  }
  figure {
    margin: 0;
    overflow-x: auto;
  }
  table {
    border-collapse: collapse;
    inline-size: 100%;
    font-size: 0.875rem;
  }
  th, td {
    text-align: start;
    vertical-align: top;
    padding: 0.4rem 0.5rem;
    border-block-end: 1px solid var(--rule);
  }
  thead th { background: var(--code-bg); }
  td:nth-child(3) { overflow-wrap: anywhere; min-inline-size: 12ch; }
  td:last-child { color: var(--muted); white-space: nowrap; }
  [data-supported="yes"] { color: var(--accent); font-weight: 600; }
  p[aria-live] { color: var(--muted); }
}