/* 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;
}

/* An identifier is one long unbreakable token, and a table cell holding several of them
   pushes the table past the page and squeezes the term column to nothing. Breaking inside
   an identifier costs a reader nothing here: the full IRI is the link target. */

.md-typeset table:not([class]) code {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.md-typeset table:not([class]) {
  table-layout: fixed;
  width: 100%;
}

.md-typeset table:not([class]) th:first-child,
.md-typeset table:not([class]) td:first-child {
  width: 30%;
}

.md-typeset table:not([class]) th:nth-child(2),
.md-typeset table:not([class]) td:nth-child(2) {
  width: 16%;
}

.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;
}

/* Which rows a toggle hides is generated with the table, because a rule has to name the
   checkbox by id: a row belongs to every group it sits inside, so closing a section closes
   the sections nested in it. Without :has() support the rows stay visible, which is the
   safe direction. */

/* Depth carries meaning in this table: a term belongs to the section above it, and a
   section belongs to the term that reaches it. One indent per level, and a section header
   sits at the level of the term it opens, so the terms it brings are one step further in.
   Without the indent the two read as siblings. */

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

.md-typeset tr.level-2 > td:first-child {
  padding-left: 2.4rem;
}

.md-typeset tr.level-3 > td:first-child {
  padding-left: 3.6rem;
}

.md-typeset tr.level-4 > td:first-child {
  padding-left: 4.8rem;
}

.md-typeset tr.level-5 > td:first-child {
  padding-left: 6rem;
}

.md-typeset tr.level-6 > td:first-child {
  padding-left: 7.2rem;
}

.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;
}

/* An embedded object is a schema of its own, so its header reads as a link into that
   schema rather than as a heading of this one. */

.md-typeset tr.toggle.embedded label {
  color: var(--md-default-fg-color--light);
}

/* A term that opens a schema stays a term: the marker sits in the text flow of the first
   cell instead of turning the row into a heading, so the description below it keeps its
   own line. */

.md-typeset tr.term-toggle label {
  display: block;
  position: relative;
  padding-left: 1em;
  color: inherit;
}

.md-typeset tr.term-toggle label::before {
  position: absolute;
  left: 0;
  top: .45em;
}

/* A layer whose every term is refined further out: the lineage still belongs in the table,
   but there is nothing behind it to open. */

.md-typeset tr.section-note > td {
  color: var(--md-default-fg-color--light);
}