/* Term tables carry a list of mappings per cell. Browser defaults for lists and small
   text are tuned for prose, and inside a dense table they waste the width the table
   needs. */

.md-typeset table:not([class]) td {
  vertical-align: top;
}

.md-typeset .mappings {
  margin: 0;
  padding-left: 1em;
  list-style-type: none;
}

.md-typeset .mappings li {
  margin: 0 0 .35em;
  text-indent: -1em;
}

.md-typeset .mappings li:last-child {
  margin-bottom: 0;
}

.md-typeset table:not([class]) small {
  color: var(--md-default-fg-color--light);
  line-height: 1.3;
}

/* An alias row belongs to the property above it: a rule down the left of the cell shows
   the grouping, which plain leading whitespace in a table cell does not. */

.md-typeset .alias {
  display: inline-block;
  margin-left: .3em;
  padding-left: .8em;
  border-left: .1rem solid var(--md-default-fg-color--lighter);
}

.md-typeset .alias .mappings {
  padding-left: .8em;
}

/* Rows that a toggle shows or hides: the permitted values of an enum, and the terms a
   schema inherits. A checkbox plus :has(), because <details> is not a valid table section.
   Without :has() support the rows stay visible, which is the safe direction. */

.md-typeset tbody:has(.section-toggle input:not(:checked)) tr.section-row {
  display: none;
}

.md-typeset tbody:has(.values-toggle input:not(:checked)) tr.values-row {
  display: none;
}

/* Depth carries meaning in this table: everything in an inherited section belongs to that
   section, and a value list belongs to the property above it. Without the indent the two
   toggles read as siblings. */

.md-typeset tr.section-row > td:first-child {
  padding-left: 1.2rem;
}

.md-typeset tr.values-toggle > td {
  padding-left: 1.2rem;
}

.md-typeset tr.section-row.values-toggle > td {
  padding-left: 2.4rem;
}

.md-typeset tr.toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.md-typeset tr.toggle label {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  cursor: pointer;
  color: var(--md-default-fg-color--light);
}

/* A triangle built from borders, so it sits on the text baseline box and the flex
   alignment centres it against the label rather than against the row. */
.md-typeset tr.toggle label::before {
  content: "";
  width: 0;
  height: 0;
  border: .3em solid transparent;
  border-left-color: currentcolor;
  transition: transform 125ms;
}

.md-typeset tr.toggle:has(input:checked) label::before {
  transform: rotate(90deg);
}

.md-typeset tr.toggle input:focus-visible + label {
  outline: .1rem solid var(--md-accent-fg-color);
}

.md-typeset tr.section td {
  background-color: var(--md-default-fg-color--lightest);
}

/* Mapping-set selector for the RDF readings. */

.md-typeset .mapping-select {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.md-typeset .mapping-select label {
  color: var(--md-default-fg-color--light);
}

.md-typeset .mapping-select select {
  padding: .2em .4em;
  border: .05rem solid var(--md-default-fg-color--lighter);
  border-radius: .1rem;
  background-color: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-size: .75rem;
}

.md-typeset .mapping-set[hidden] {
  display: none;
}

/* A tab block wraps raw HTML in a paragraph, and the HTML parser closes that paragraph
   before the table or div that follows. The leftover empty paragraph is what would add
   the stray gap at the top of the Terms and RDF tabs. */

.md-typeset .tabbed-block > p:empty {
  display: none;
}