/* Components an author can use from Markdown, in the "blueprint" style: 1px rules, 4px radius, mono labels, no shadows.
   Tokens come from theme.css.
   Callouts   !!! note | warning | tip   (admonition)
   Code       fenced blocks, with Material's copy button
   Tabs       === "Title"                (pymdownx.tabbed)
   Tables     plain Markdown tables
   Cards      <div class="od-cards" markdown> with a list of links, or <a class="od-card"> children
   Steps      <div class="od-steps" markdown> around a numbered list, or { .od-steps } on the list
   See "Page building blocks" in README.md. */

/* ---------------------------------------------------------------- Callouts: note, warning, tip */
/* A white-ish box with a hairline, a 2px rule on top in the colour of its kind, and the title as a mono uppercase label
   (the admonition's own title: "Note", "Warning", "Tip", or the title the author wrote). */

.md-typeset .admonition,
.md-typeset details:not(.od-x) {
  --od-call: #00415d;
  position: relative;
  margin: 1.25rem 0;
  padding: .75rem 1rem .8rem;
  border: 1px solid var(--od-hair) !important;
  border-top: 2px solid var(--od-call) !important;
  border-radius: 4px;
  background: var(--oh-tint);
  color: var(--oh-ink);
  box-shadow: none;
  font-size: .72rem;
  line-height: 1.6;
}
.md-typeset details:not(.od-x) { padding: 0 1rem; }

.md-typeset .admonition.tip,
.md-typeset .admonition.hint,
.md-typeset .admonition.important,
.md-typeset .admonition.success,
.md-typeset .admonition.check,
.md-typeset .admonition.done,
.md-typeset details.tip:not(.od-x),
.md-typeset details.hint:not(.od-x),
.md-typeset details.important:not(.od-x),
.md-typeset details.success:not(.od-x),
.md-typeset details.check:not(.od-x),
.md-typeset details.done:not(.od-x) { --od-call: #0b6b3a; }
.md-typeset .admonition.warning,
.md-typeset .admonition.caution,
.md-typeset .admonition.attention,
.md-typeset .admonition.danger,
.md-typeset .admonition.error,
.md-typeset .admonition.failure,
.md-typeset .admonition.fail,
.md-typeset .admonition.missing,
.md-typeset .admonition.bug,
.md-typeset details.warning:not(.od-x),
.md-typeset details.caution:not(.od-x),
.md-typeset details.attention:not(.od-x),
.md-typeset details.danger:not(.od-x),
.md-typeset details.error:not(.od-x),
.md-typeset details.failure:not(.od-x),
.md-typeset details.fail:not(.od-x),
.md-typeset details.missing:not(.od-x),
.md-typeset details.bug:not(.od-x) { --od-call: #8a4b00; }

[dir] .md-typeset .admonition-title,
[dir] .md-typeset summary:not(.od-x) {
  position: static;
  margin: 0 0 .3rem;
  padding: 0;
  border: 0;
  background: none !important;
  font-family: var(--oh-mono);
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--od-call);
}
:lang(ja) .md-typeset .admonition-title,
:lang(zh) .md-typeset .admonition-title,
:lang(ja) .md-typeset summary,
:lang(zh) .md-typeset summary { letter-spacing: 0; }
[dir] .md-typeset summary:not(.od-x) { margin: 0 -1rem; padding: .7rem 2.4rem .6rem 1rem; }
/* No icons: the label says what it is */
.md-typeset .admonition-title::before,
.md-typeset summary:not(.od-x)::before { display: none !important; }
.md-typeset summary:not(.od-x)::after { top: .55rem; color: var(--od-call) !important; }
.md-typeset details > :last-child { margin-bottom: .8rem; }
.md-typeset .admonition > :last-child { margin-bottom: 0; }
.md-typeset .admonition p,
.md-typeset details p { margin: .3em 0; }
.md-typeset .admonition a,
.md-typeset details a { color: inherit; text-decoration-color: currentColor; }
.md-typeset .admonition code,
.md-typeset details code { background: var(--oh-surface); }

/* ---------------------------------------------------------------- Code blocks */

.md-typeset pre,
.md-typeset .highlight {
  margin: 1.1rem 0;
}
.md-typeset pre {
  border-radius: 4px;
  background: var(--oh-night);
  border: 1px solid var(--od-hair-dark);
}
.md-typeset .highlight pre { margin: 0; }
.md-typeset pre > code {
  background: none;
  box-shadow: none;
  padding: .9rem 1rem;
  color: #d7e5ec;
  font-size: .675rem;
  line-height: 1.75;
  --md-code-hl-color: rgba(95, 208, 232, .16);
  --md-code-hl-keyword-color: #7cc7ff;
  --md-code-hl-string-color: #a7e6b8;
  --md-code-hl-name-color: #d7e5ec;
  --md-code-hl-function-color: #c7b8ff;
  --md-code-hl-number-color: #f4c27a;
  --md-code-hl-constant-color: #f4c27a;
  --md-code-hl-special-color: #ff9d8a;
  --md-code-hl-operator-color: #a9c1cc;
  --md-code-hl-punctuation-color: #a9c1cc;
  --md-code-hl-comment-color: #8fabb8;
  --md-code-hl-generic-color: #a9c1cc;
  --md-code-hl-variable-color: #5fd0e8;
}
.md-typeset pre > code::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, .22); }
/* Material's copy button: a square with a hairline */
.md-typeset .md-clipboard {
  top: .45rem;
  right: .5rem;
  width: 1.6rem;
  height: 1.6rem;
  padding: .25rem;
  border: 1px solid var(--od-hair-dark);
  border-radius: 3px;
  color: #d7e5ec;
  background: var(--oh-night);
}
.md-typeset .md-clipboard::after { margin: 0; }
.md-typeset .md-clipboard:hover,
.md-typeset .md-clipboard:focus { color: var(--oh-signal); border-color: var(--oh-signal); }
.md-typeset .highlight .filename,
.md-typeset .highlight span.filename {
  background: var(--oh-night);
  color: #9fb8c5;
  font-family: var(--oh-mono);
  font-size: .6rem;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid var(--od-hair-dark);
}

/* ---------------------------------------------------------------- Content tabs (=== "Tab") */

.md-typeset .tabbed-set { margin: 1.1rem 0; }
.md-typeset .tabbed-labels { box-shadow: none; border-bottom: 1px solid var(--od-hair); }
.md-typeset .tabbed-labels > label {
  padding: .6rem .7rem .55rem;
  font-size: .675rem;
  font-weight: 600;
  color: var(--oh-ink-2);
}
.md-typeset .tabbed-labels > label:hover { color: var(--oh-brand); }
.md-typeset .tabbed-set > input:checked + label,
.md-typeset .tabbed-alternate.tabbed-set > input:checked + label { color: var(--oh-brand); }
.md-typeset .tabbed-set .tabbed-labels::before,
.md-typeset .tabbed-labels::before { background: var(--oh-brand); height: 2px; }
.md-typeset .tabbed-content .tabbed-block > :first-child { margin-top: .8rem; }

/* Tabs that hold only code: the labels become a ruled header strip on one dark block. Needs :has. A set where any tab has
   anything next to its code blocks (a paragraph, a list) keeps the light tabs above, and so does a browser without :has. */
@supports selector(:has(a)) {
  .md-typeset .tabbed-set:has(> .tabbed-content > .tabbed-block > .highlight):not(:has(> .tabbed-content > .tabbed-block > :not(.highlight))) {
    border-radius: 4px;
    background: var(--oh-night);
    border: 1px solid var(--od-hair-dark);
    overflow: hidden;
  }
  .md-typeset .tabbed-set:has(> .tabbed-content > .tabbed-block > .highlight):not(:has(> .tabbed-content > .tabbed-block > :not(.highlight))) > .tabbed-labels {
    border-bottom: 1px solid var(--od-hair-dark);
    padding: 0 .5rem;
  }
  .md-typeset .tabbed-set:has(> .tabbed-content > .tabbed-block > .highlight):not(:has(> .tabbed-content > .tabbed-block > :not(.highlight))) > .tabbed-labels > label { color: #9fb8c5; }
  .md-typeset .tabbed-set:has(> .tabbed-content > .tabbed-block > .highlight):not(:has(> .tabbed-content > .tabbed-block > :not(.highlight))) > .tabbed-labels > label:hover { color: #fff; }
  .md-typeset .tabbed-set:has(> .tabbed-content > .tabbed-block > .highlight):not(:has(> .tabbed-content > .tabbed-block > :not(.highlight))) > input:checked + label,
  .md-typeset .tabbed-alternate.tabbed-set:has(> .tabbed-content > .tabbed-block > .highlight):not(:has(> .tabbed-content > .tabbed-block > :not(.highlight))) > input:checked + label {
    color: #fff;
    font-weight: 700;
  }
  .md-typeset .tabbed-set:has(> .tabbed-content > .tabbed-block > .highlight):not(:has(> .tabbed-content > .tabbed-block > :not(.highlight))) > .tabbed-labels::before { background: var(--oh-signal); }
  .md-typeset .tabbed-set:has(> .tabbed-content > .tabbed-block > .highlight):not(:has(> .tabbed-content > .tabbed-block > :not(.highlight))) .tabbed-block > .highlight { margin: 0; }
  .md-typeset .tabbed-set:has(> .tabbed-content > .tabbed-block > .highlight):not(:has(> .tabbed-content > .tabbed-block > :not(.highlight))) .tabbed-block > .highlight > pre,
  .md-typeset .tabbed-set:has(> .tabbed-content > .tabbed-block > .highlight):not(:has(> .tabbed-content > .tabbed-block > :not(.highlight))) .tabbed-block > pre {
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .md-typeset .tabbed-set:has(> .tabbed-content > .tabbed-block > .highlight):not(:has(> .tabbed-content > .tabbed-block > :not(.highlight))) .tabbed-block > :first-child { margin-top: 0; }
}

/* ---------------------------------------------------------------- Tables: ruled, a 2px ink rule on top, mono uppercase header */

.md-typeset .md-typeset__scrollwrap { margin: 1.1rem 0; }
.md-typeset .md-typeset__table { display: block; padding: 0; margin: 0; }
.md-typeset .md-typeset__table table:not([class]) { display: table; width: 100%; margin: 0; }
.md-typeset table:not([class]) {
  border: 1px solid var(--od-hair);
  border-top: 2px solid var(--oh-ink);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: .725rem;
  line-height: 1.5;
}
.md-typeset table:not([class]) th {
  padding: .5rem .7rem;
  background: var(--oh-tint);
  color: var(--oh-ink-2);
  font-family: var(--oh-mono);
  font-size: .55rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--od-hair);
}
:lang(ja) .md-typeset table:not([class]) th,
:lang(zh) .md-typeset table:not([class]) th { letter-spacing: 0; }
.md-typeset table:not([class]) td {
  padding: .6rem .7rem;
  border-top: 0;
  border-bottom: 1px solid var(--od-hair);
  vertical-align: top;
}
.md-typeset table:not([class]) tbody tr:last-child td { border-bottom: 0; }
.md-typeset table:not([class]) tr:hover { background: transparent; box-shadow: none; }
.md-typeset table:not([class]) tbody tr:hover td { background: #f9fbfc; }

/* ---------------------------------------------------------------- Cards: .od-cards */
/* A grid of cells on shared hairlines (the row fills its width, so there is never an empty cell).
   <div class="od-cards" markdown>
   - [**Title**<br>One line that says what the page does.](page.md)
   </div>
   or, in plain HTML:  <div class="od-cards"><a class="od-card" href="page.md"><strong>Title</strong><span>Text</span></a></div> */

.md-typeset .od-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin: 1.1rem 0;
  padding: 1px;
  background: var(--od-hair);
  border-radius: 4px;
  overflow: hidden;
}
.md-typeset .od-cards > ul {
  display: contents;
  margin: 0;
  padding: 0;
  list-style: none;
}
.md-typeset .od-cards > ul > li,
.md-typeset .od-cards > a.od-card,
.md-typeset a.od-card {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 15rem;
  gap: .3rem;
  min-width: 0;
  margin: 0;
  padding: .8rem 2rem .8rem 1rem;
  background: var(--oh-surface);
  color: var(--oh-ink-2);
  font-size: .7rem;
  line-height: 1.5;
  text-decoration: none;
  transition: background .15s;
}
.md-typeset .od-cards > ul > li:hover,
.md-typeset .od-cards > ul > li:focus-within,
.md-typeset a.od-card:hover,
.md-typeset a.od-card:focus { background: var(--oh-tint); }
/* A mono arrow, as on the homepage cards */
.md-typeset .od-cards > ul > li::after,
.md-typeset a.od-card::after {
  content: "\2192";
  position: absolute;
  top: .75rem;
  right: .9rem;
  font-family: var(--oh-mono);
  font-size: .65rem;
  color: var(--oh-ink-2);
  pointer-events: none;
}
.md-typeset .od-cards > ul > li > p { margin: 0; }
.md-typeset .od-cards > ul > li > ul,
.md-typeset .od-cards > ul > li > ol { margin: 0; }
.md-typeset .od-cards li > a:first-child,
.md-typeset .od-cards li > p:first-child > a:first-child {
  color: var(--oh-ink-2);
  font-weight: 400;
  text-decoration: none;
}
/* In the link text: **Title** on its own line, then the description */
.md-typeset .od-cards li a > strong {
  display: block;
  margin-bottom: .15rem;
  color: var(--oh-brand);
  font-size: .75rem;
  font-weight: 700;
}
.md-typeset .od-cards li a > br { display: none; }
/* The whole card is the link: the first link stretches over it */
.md-typeset .od-cards li > a:first-child::after,
.md-typeset .od-cards li > p:first-child > a:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* Keyboard focus: the card gets the ring, inside its cell (the grid clips what is outside). Browsers without :has keep the ring on the link itself. */
@supports selector(:has(a)) {
  .md-typeset .od-cards li > a:first-child:focus-visible,
  .md-typeset .od-cards li > p:first-child > a:first-child:focus-visible { outline: 0; }
  .md-typeset .od-cards li:has(> a:first-child:focus-visible),
  .md-typeset .od-cards li:has(> p:first-child > a:first-child:focus-visible) {
    outline: 3px solid var(--oh-signal);
    outline-offset: -3px;
  }
}
.md-typeset a.od-card:focus-visible { outline-offset: -3px; }
.md-typeset a.od-card > strong,
.md-typeset a.od-card > b { color: var(--oh-brand); font-size: .75rem; font-weight: 700; }
.md-typeset a.od-card > span { color: var(--oh-ink-2); }

/* ---------------------------------------------------------------- Steps: .od-steps */
/* Square mono numerals, 01 02 03.
   <div class="od-steps" markdown>
   1. **Start.** What the reader does first.
   2. **Wait.** What happens next.
   </div> */

.md-typeset .od-steps > ol,
.md-typeset ol.od-steps {
  margin: 1.1rem 0;
  padding: 0;
  list-style: none;
}
.md-typeset .od-steps > ol > li,
.md-typeset ol.od-steps > li {
  position: relative;
  min-height: 1.4rem;
  margin: 0;
  padding: .1rem 0 1.1rem 2.2rem;
}
.md-typeset .od-steps > ol > li:last-child,
.md-typeset ol.od-steps > li:last-child { padding-bottom: 0; }
.md-typeset .od-steps > ol > li::marker,
.md-typeset ol.od-steps > li::marker { content: ""; }
.md-typeset .od-steps > ol > li::before,
.md-typeset ol.od-steps > li::before {
  content: counter(list-item, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--oh-brand);
  border-radius: 3px;
  background: var(--oh-surface);
  color: var(--oh-brand);
  font-family: var(--oh-mono);
  font-size: .55rem;
  font-weight: 500;
  line-height: 1;
}
.md-typeset .od-steps > ol > li > p:first-child,
.md-typeset ol.od-steps > li > p:first-child { margin-top: 0; }
.md-typeset .od-steps > ol > li > :last-child,
.md-typeset ol.od-steps > li > :last-child { margin-bottom: 0; }