/* Structally Help Center theme. Colors follow structally_web/static/structally_web/style.css. */
:root {
  --sx-navy-900: #0b2f38;
  --sx-navy-800: #11404a;
  --sx-teal-600: #0b8a86;
  --sx-teal-100: #dff3f1;
  --sx-ink: #1f3338;
  --sx-muted: #5f7478;
  --sx-line: #d9e4e4;
  --sx-canvas: #f4f8f8;
  --sx-callout: #d9480f;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--sx-navy-900);
  --md-primary-fg-color--light: var(--sx-navy-800);
  --md-primary-fg-color--dark: #08232a;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--sx-teal-600);
  --md-accent-fg-color--transparent: rgba(11, 138, 134, .1);
  --md-typeset-a-color: var(--sx-teal-600);
  --md-default-fg-color: var(--sx-ink);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--sx-navy-900);
  --md-primary-fg-color--light: var(--sx-navy-800);
  --md-primary-fg-color--dark: #08232a;
  --md-accent-fg-color: #3cc4be;
  --md-typeset-a-color: #4fd1cb;
  --md-hue: 190;
}

.md-header, .md-tabs { background-color: var(--sx-navy-900); }
.md-header__button.md-logo img { height: 1.6rem; }
.md-typeset h1 { color: var(--sx-navy-900); font-weight: 700; letter-spacing: -.01em; }
[data-md-color-scheme="slate"] .md-typeset h1 { color: #e8f2f2; }
.md-typeset h2 { font-weight: 700; }
.md-typeset table:not([class]) { font-size: .72rem; }
.md-typeset table:not([class]) th { background: var(--sx-teal-100); color: var(--sx-navy-900); }
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th { background: #12343c; color: #e8f2f2; }
.md-typeset td.num, .md-typeset th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Figures ----------------------------------------------------------------------------- */
.md-typeset figure { margin: 1.4em auto; max-width: 100%; }
.md-typeset figure img {
  border: 1px solid var(--sx-line); border-radius: 6px;
  box-shadow: 0 2px 10px rgba(11, 47, 56, .08); background: #fff;
}
.md-typeset figcaption { max-width: 46rem; font-size: .72rem; color: var(--sx-muted); font-style: normal; }
.md-typeset .figure-number { font-weight: 700; color: var(--sx-navy-900); margin-right: .25em; }
[data-md-color-scheme="slate"] .md-typeset .figure-number { color: #e8f2f2; }
.md-typeset figure.narrow img { max-width: 420px; }
.md-typeset figure.medium img { max-width: 720px; }

/* Numbered callout keys: match the orange badges drawn on screenshots. */
.md-typeset .callouts ol { counter-reset: callout; list-style: none; padding-left: 0; margin-left: 0; }
.md-typeset .callouts ol > li { counter-increment: callout; position: relative; padding-left: 2.2em; margin-left: 0; }
.md-typeset .callouts ol > li::before {
  content: counter(callout); position: absolute; left: 0; top: .05em;
  width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--sx-callout); color: #fff;
  font-weight: 700; font-size: .78em; line-height: 1.55em; text-align: center;
}
.md-typeset .callout-n {
  display: inline-block; width: 1.45em; height: 1.45em; border-radius: 50%; background: var(--sx-callout);
  color: #fff; font-weight: 700; font-size: .75em; line-height: 1.45em; text-align: center; vertical-align: .1em;
}

/* Interface terms: buttons, menus and field labels as they appear on screen. */
.md-typeset .ui { font-weight: 600; color: var(--sx-navy-900); }
[data-md-color-scheme="slate"] .md-typeset .ui { color: #e8f2f2; }
.md-typeset .path { font-weight: 600; }

/* Custom admonitions ------------------------------------------------------------------ */
:root {
  --sx-icon-nav: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20m3.5 6.5-2 5-5 2 2-5 5-2Z"/></svg>');
  --sx-icon-prereq: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 2h6a2 2 0 0 1 2 2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2a2 2 0 0 1 2-2m0 2v2h6V4H9m1.5 13.4 6.6-6.6-1.4-1.4-5.2 5.2-2.2-2.2-1.4 1.4 3.6 3.6Z"/></svg>');
  --sx-icon-ledger: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3 2 8l10 5 10-5-10-5m-8 9v5l8 4 8-4v-5l-8 4-8-4Z"/></svg>');
  --sx-icon-gap: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 5v12.2L6.8 3H19a2 2 0 0 1 2 2M2.8 2.5 21.5 21.2l-1.3 1.3-2-2H5a2 2 0 0 1-2-2V5.8l-1.5-1.5 1.3-1.3M5 7.8V19h10.2l-3-3-1.7 2.2L8 15l-3 4h.1V7.8Z"/></svg>');
}
.md-typeset .admonition.nav, .md-typeset details.nav { border-color: var(--sx-teal-600); }
.md-typeset .nav > .admonition-title, .md-typeset .nav > summary { background-color: rgba(11, 138, 134, .1); }
.md-typeset .nav > .admonition-title::before, .md-typeset .nav > summary::before { background-color: var(--sx-teal-600); -webkit-mask-image: var(--sx-icon-nav); mask-image: var(--sx-icon-nav); }
.md-typeset .admonition.prereq, .md-typeset details.prereq { border-color: #5c7cfa; }
.md-typeset .prereq > .admonition-title, .md-typeset .prereq > summary { background-color: rgba(92, 124, 250, .1); }
.md-typeset .prereq > .admonition-title::before, .md-typeset .prereq > summary::before { background-color: #5c7cfa; -webkit-mask-image: var(--sx-icon-prereq); mask-image: var(--sx-icon-prereq); }
.md-typeset .admonition.accounting, .md-typeset details.accounting { border-color: #2f9e44; }
.md-typeset .accounting > .admonition-title, .md-typeset .accounting > summary { background-color: rgba(47, 158, 68, .1); }
.md-typeset .accounting > .admonition-title::before, .md-typeset .accounting > summary::before { background-color: #2f9e44; -webkit-mask-image: var(--sx-icon-ledger); mask-image: var(--sx-icon-ledger); }
.md-typeset .admonition.gap, .md-typeset details.gap { border-color: #868e96; border-style: dashed; }
.md-typeset .gap > .admonition-title, .md-typeset .gap > summary { background-color: rgba(134, 142, 150, .12); }
.md-typeset .gap > .admonition-title::before, .md-typeset .gap > summary::before { background-color: #868e96; -webkit-mask-image: var(--sx-icon-gap); mask-image: var(--sx-icon-gap); }

/* Journal entry tables in worked examples. */
.md-typeset .entry table td:nth-child(n+2), .md-typeset .entry table th:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }
.md-typeset .entry table { min-width: 60%; }

/* Home page tiles. */
.md-typeset .grid.cards > ul > li { border-radius: 8px; }
.help-build { font-size: .62rem; opacity: .8; margin-top: .3em; }
.help-build a { color: inherit; text-decoration: underline; }

/* Print and PDF ----------------------------------------------------------------------- */
.help-cover { display: none; }
@media print {
  .help-cover { display: block; text-align: center; padding-top: 18vh; page-break-after: always; break-after: page; }
  .help-cover-logo { width: 96px; height: 96px; }
  .help-cover-brand { font-size: 1.4rem; font-weight: 700; color: var(--sx-navy-900); margin: .4rem 0 2.5rem; letter-spacing: -.02em; }
  .help-cover h1 { font-size: 2.2rem; color: var(--sx-navy-900); margin: 0 0 .6rem; }
  .help-cover-sub { color: var(--sx-muted); font-size: 1rem; margin-bottom: 3rem; }
  .help-cover-meta { display: inline-grid; grid-template-columns: auto auto; gap: .35rem 1.5rem; text-align: left; font-size: .85rem; }
  .help-cover-meta dt { font-weight: 700; color: var(--sx-navy-900); }
  .help-cover-meta dd { margin: 0; }
  .help-cover-legal { margin-top: 30vh; font-size: .7rem; color: var(--sx-muted); }
  .md-typeset figure { break-inside: avoid; page-break-inside: avoid; }
  .md-typeset figure img { box-shadow: none; max-height: 19cm; object-fit: contain; }
  .md-typeset table { break-inside: auto; }
  .md-typeset tr, .md-typeset .admonition { break-inside: avoid; }
  .md-typeset h2, .md-typeset h3 { break-after: avoid; page-break-after: avoid; }
  .md-typeset a.headerlink { display: none; }
}

/* Wider layout so screenshots of wide forms stay legible. */
@media screen and (min-width: 76.25em) {
  .md-grid { max-width: 82rem; }
}