:root {
  --md-admonition-icon--wait: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2 21h18v-2H2M20 8h-2V5h2m0-2H4v10a4 4 0 0 0 4 4h6a4 4 0 0 0 4-4v-3h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2Z"/></svg>');
}

/* Admonitions in the classic shape.

   The modern theme variant tints the whole box and drops the border. The
   classic one framed the box in the type's colour and tinted the title alone,
   which keeps a page of admonitions from reading as a wall of colour. The
   rules below restore that: each type sets --gp-admonition-color, and the
   generic rules turn it into the border and the title tint. Spacing follows
   the modern variant (.8rem side padding, .4rem corners), so admonitions
   still sit on the same grid as the rest of the theme. */

[data-md-color-scheme="oslo"] .md-typeset .admonition,
[data-md-color-scheme="oslo"] .md-typeset details {
  /* Note blue, also the fallback for a type the theme doesn't colour. */
  --gp-admonition-color: #448aff;

  background-color: var(--md-admonition-bg-color);
  border: 0.075rem solid var(--gp-admonition-color);
}

/* The per-type colours the theme itself uses. */

[data-md-color-scheme="oslo"] .md-typeset .abstract {
  --gp-admonition-color: #00b0ff;
}

[data-md-color-scheme="oslo"] .md-typeset .info {
  --gp-admonition-color: #00b8d4;
}

[data-md-color-scheme="oslo"] .md-typeset .tip {
  --gp-admonition-color: #00bfa5;
}

[data-md-color-scheme="oslo"] .md-typeset .success {
  --gp-admonition-color: #00c853;
}

[data-md-color-scheme="oslo"] .md-typeset .question {
  --gp-admonition-color: #64dd17;
}

[data-md-color-scheme="oslo"] .md-typeset .warning {
  --gp-admonition-color: #ff9100;
}

[data-md-color-scheme="oslo"] .md-typeset .failure {
  --gp-admonition-color: #ff5252;
}

[data-md-color-scheme="oslo"] .md-typeset .danger {
  --gp-admonition-color: #ff1744;
}

[data-md-color-scheme="oslo"] .md-typeset .bug {
  --gp-admonition-color: #f50057;
}

[data-md-color-scheme="oslo"] .md-typeset .example {
  --gp-admonition-color: #7c4dff;
}

[data-md-color-scheme="oslo"] .md-typeset .quote {
  --gp-admonition-color: #9e9e9e;
}

/* The custom "wait" type, which the theme doesn't know about. */

[data-md-color-scheme="oslo"] .md-typeset .wait {
  --gp-admonition-color: rgb(43, 155, 70);
}

[data-md-color-scheme="oslo"] .md-typeset .wait > .admonition-title::before,
[data-md-color-scheme="oslo"] .md-typeset .wait > summary::before {
  background-color: var(--gp-admonition-color);
  -webkit-mask-image: var(--md-admonition-icon--wait);
  mask-image: var(--md-admonition-icon--wait);
}

/* The title bar carries the tint and spans the full width of the box: the
   negative side margins cancel the box's padding. */

[data-md-color-scheme="oslo"] .md-typeset .admonition-title,
[data-md-color-scheme="oslo"] .md-typeset summary {
  --gp-admonition-pad-y: 0.4rem; /* 8px */
  --gp-admonition-icon-size: 1rem; /* 20px: the box the theme draws in */

  /* Where the icon and the chevron sit, both being out of flow: past the top
     padding, then centred on the title's first line. `1lh` is that line, the
     theme's 1.8 — read rather than restated, so the two can't drift apart. */
  --gp-admonition-icon-y: calc(
    var(--gp-admonition-pad-y) + (1lh - var(--gp-admonition-icon-size)) / 2
  );

  background-color: color-mix(
    in srgb,
    var(--gp-admonition-color) 10%,
    transparent
  );
  border-radius: 0.3rem 0.3rem 0 0; /* the box's radius, less its border */
  margin: 0 -0.8rem 1em;
  padding: var(--gp-admonition-pad-y) 0.8rem var(--gp-admonition-pad-y) 2.4rem;
}

/* Leave room for the expand chevron on a collapsible section. */

[data-md-color-scheme="oslo"] .md-typeset summary {
  padding-right: 2rem;
}

/* A closed section is its title bar, so the tint fills the whole box. */

[data-md-color-scheme="oslo"] .md-typeset details:not([open]) > summary {
  border-radius: 0.3rem;
  margin-bottom: 0;
}

html [data-md-color-scheme="oslo"] .md-typeset .admonition-title:last-child,
html [data-md-color-scheme="oslo"] .md-typeset summary:last-child {
  margin-bottom: 0;
}

/* Centre the type icon and the chevron on the title's first line, by the
   arithmetic above. Placed by eye instead — .625em, against the .4rem padding —
   they sat a pixel and a half above it, high enough to read as unaligned. */

[data-md-color-scheme="oslo"] .md-typeset .admonition-title::before,
[data-md-color-scheme="oslo"] .md-typeset summary::before {
  left: 0.8rem;
  top: var(--gp-admonition-icon-y);
}

[data-md-color-scheme="oslo"] .md-typeset summary::after {
  right: 0.8rem;
  top: var(--gp-admonition-icon-y);
}

/* File trees.

   A stand-in for a screen capture of GitHub's file listing. The reader gets
   text they can select, search, and copy, a screen reader announces the list
   and its nesting, and the names sit in a code font down a single column, so
   a shared prefix reads as a column of its own.

   Write one as a markdown list inside a div, names in backticks:

     <div class="file-tree" markdown>

     - `__gp_config.tf`
     - `bin/`{ .dir }
     - `stacks/`
         - `prod/`

     </div>

   A directory is any item with children below it, or one marked `{ .dir }`
   where the tree stops before showing what is inside. Either way the name
   itself ends in a slash: the icon is decorative, and the slash is what a
   screen reader reads out. Nested lists indent by four spaces.

   Every rule below carries the colour-scheme prefix, and not only for the sake
   of the file it sits in: the theme indents a nested list from
   `[dir="ltr"] .md-typeset ul li ul`, which outranks a plain
   `.md-typeset .file-tree li > ul`. Drop the prefix and each level of the tree
   indents twice.

   The spacing is one scale, in the theme's rem (20px). A row is a line box of
   `--gp-ft-line` between two `--gp-ft-pad-y`, and nothing inside it is free to
   grow: the name inherits the row's line height rather than the taller one the
   theme gives a code span, and the icon is out of flow. So every row is the
   same height, whatever it holds, and the icon centres on the line by
   arithmetic instead of by eye. */

[data-md-color-scheme="oslo"] .md-typeset .file-tree {
  --gp-ft-icon--file: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13,9V3.5L18.5,9M6,2C4.89,2 4,2.89 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6Z"/></svg>');
  --gp-ft-icon--dir: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"/></svg>');

  /* GitHub's folder blue. Decorative — the trailing slash carries the meaning. */
  --gp-ft-dir-color: #54aeff;

  --gp-ft-line: 1rem; /* 20px: the line box of one row */
  --gp-ft-pad-y: 0.5rem; /* 10px above and below it, so a row is 40px */
  --gp-ft-pad-x: 0.8rem; /* 16px */
  --gp-ft-icon-size: 0.8rem; /* 16px */
  --gp-ft-gap: 0.4rem; /* 8px between the icon and the name */
  --gp-ft-indent: 0.8rem; /* 16px per level of nesting */
  --gp-ft-depth: 0;

  /* The frame is an admonition's, so a tree and a box next to it on the page
     read as the same weight of border. The row dividers stay a hairline —
     they separate rows inside the frame rather than draw it. */
  border: 0.075rem solid var(--md-typeset-table-color);
  border-radius: 0.3rem;
  margin: 1em 0;
  overflow: hidden; /* keeps the full-bleed rows inside the rounded corners */
}

/* Nesting depth, as a number the geometry multiplies the indent by. A custom
   property can't add to its own inherited value — that counts as a cycle — so
   each level names its own. Deeper than this the value inherits, and the tree
   stops stepping right. */

[data-md-color-scheme="oslo"] .md-typeset .file-tree li li {
  --gp-ft-depth: 1;
}
[data-md-color-scheme="oslo"] .md-typeset .file-tree li li li {
  --gp-ft-depth: 2;
}
[data-md-color-scheme="oslo"] .md-typeset .file-tree li li li li {
  --gp-ft-depth: 3;
}

[data-md-color-scheme="oslo"] .md-typeset .file-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A row: the icon sits in the left padding, and the divider above it runs the
   full width of the box. The divider is an inset shadow rather than a border,
   so it takes up no space and the first row — which has none — is not a pixel
   shorter than the rest. */

[data-md-color-scheme="oslo"] .md-typeset .file-tree li {
  /* Where this row's name starts. Declared here rather than on the box, so it
     resolves against this row's own depth — a custom property composed higher
     up would carry that element's depth down to every row. */
  --gp-ft-text-x: calc(
    var(--gp-ft-pad-x) + var(--gp-ft-icon-size) + var(--gp-ft-gap) +
      var(--gp-ft-depth) * var(--gp-ft-indent)
  );

  box-shadow: inset 0 0.05rem 0 var(--md-default-fg-color--lightest);
  line-height: var(--gp-ft-line);
  margin: 0;
  padding: var(--gp-ft-pad-y) var(--gp-ft-pad-x) var(--gp-ft-pad-y)
    var(--gp-ft-text-x);
  position: relative;
}

[data-md-color-scheme="oslo"] .md-typeset .file-tree > ul > li:first-child {
  box-shadow: none;
}

/* A nested list backs out of its parent row's padding, so its own rows reach
   both edges of the box. It inherits the parent's depth, so `--gp-ft-text-x`
   here is the parent's text column — exactly what has to be cancelled. The
   indent comes from the padding above, not from here.

   Vertically it takes the parent's bottom padding over: padding falls after
   the nested list, which would leave the parent's own row short by that much
   and pad the wrong end. The top margin puts the space back under the parent's
   name, and the bottom margin cancels where it would otherwise have landed. */

[data-md-color-scheme="oslo"] .md-typeset .file-tree li > ul {
  margin: var(--gp-ft-pad-y) calc(-1 * var(--gp-ft-pad-x))
    calc(-1 * var(--gp-ft-pad-y)) calc(-1 * var(--gp-ft-text-x));
}

[data-md-color-scheme="oslo"] .md-typeset .file-tree li::before {
  background-color: var(--md-default-fg-color--light);
  /* A zero-width space. `list-style: none` above drops the list semantics in
     Safari; generated content on the item puts them back. */
  content: "\200b";
  height: var(--gp-ft-icon-size);
  left: calc(var(--gp-ft-pad-x) + var(--gp-ft-depth) * var(--gp-ft-indent));
  -webkit-mask-image: var(--gp-ft-icon--file);
  mask-image: var(--gp-ft-icon--file);
  -webkit-mask-size: contain;
  mask-size: contain;
  position: absolute;
  /* Centred on the row's first line, below the row's top padding. */
  top: calc(
    var(--gp-ft-pad-y) + (var(--gp-ft-line) - var(--gp-ft-icon-size)) / 2
  );
  width: var(--gp-ft-icon-size);
}

[data-md-color-scheme="oslo"] .md-typeset .file-tree li:has(> ul)::before,
[data-md-color-scheme="oslo"]
  .md-typeset
  .file-tree
  li:has(> code.dir)::before {
  background-color: var(--gp-ft-dir-color);
  -webkit-mask-image: var(--gp-ft-icon--dir);
  mask-image: var(--gp-ft-icon--dir);
}

/* The names keep the code font that lines them up, and lose the chip the theme
   otherwise draws around a code span — including its line height, which would
   make a row taller than the scale above. */

[data-md-color-scheme="oslo"] .md-typeset .file-tree code {
  background-color: transparent;
  box-shadow: none;
  color: inherit;
  font-size: 0.7rem; /* 14px */
  line-height: inherit;
  overflow-wrap: break-word;
  padding: 0;
}

/* Centering the inner content */

[data-md-color-scheme="oslo"] .md-content__inner {
  max-width: 800px;
  margin: auto;
}

/* Fixed padding on small screens */

[data-md-color-scheme="oslo"] .md-main {
  padding: 0 20px;
}

/* Fixed padding on footer */

[data-md-color-scheme="oslo"] .md-footer {
  padding-top: 30px;
}

/* Hiding light/dark mode button */

[data-md-color-scheme="oslo"] .md-header__option {
  visibility: hidden;
}

/* Fixing GitHub icon on small screens */

[data-md-color-scheme="oslo"] .md-nav__source {
  background-color: #ffffff;
}

/* Disabling dropshadow on small screens */
/* Adding the 1px line instead - kind of a hack */
[data-md-color-scheme="oslo"] .md-header--shadow {
  box-shadow: none;
  border-bottom: 1px solid #f2f2f2;
}

/* Styling the text elements */

@font-face {
  font-family: "oslosans";
  src: url("OsloSans-Regular.woff") format("truetype");
  -webkit-font-smoothing: antialiased;
}

:root {
  --md-text-font: "Oslo Sans";
}

[data-md-color-scheme="oslo"] {
  --md-primary-fg-color: #ffffff; /* Navigation background */
  --md-primary-bg-color: #2a2859; /* Navigation text */
  --md-accent-fg-color: #1f42aa; /* Hover */
  --md-accent-bg-color: #8d50b1; /* Unused(?) Hover */
  --md-footer-bg-color: #ffffff; /* Footer */
  --md-footer-fg-color: #2a2859; /* Footer Navigation text */
  --md-footer-bg-color--dark: #2a2859; /* Footer Bottom layer */
}

[data-md-color-scheme="oslo"] .md-typeset h1,
h2,
h3 {
  color: #2a2859;
}

[data-md-color-scheme="oslo"] p,
li {
  font-weight: 300 !important;
}

[data-md-color-scheme="oslo"] .md-header__topic:first-child {
  font-weight: 400 !important;
}

[data-md-color-scheme="oslo"] h1,
h2,
h3,
h4,
h5 {
  font-weight: 400 !important;
}

[data-md-color-scheme="oslo"] .md-content a {
  color: #2a2859;
  text-underline-offset: 3px;
}

[data-md-color-scheme="oslo"] .md-content a:hover {
  color: #1f42aa;
}

[data-md-color-scheme="oslo"] .md-content a,
.md-content a.hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

[data-md-color-scheme="oslo"] .md-typeset kbd {
  margin: 0 0.3em;
}

[data-md-color-scheme="oslo"] .md-typeset__table {
  min-width: 100%;
}

[data-md-color-scheme="oslo"] .md-typeset table:not([class]) {
  display: table;
}

/* The Zensical classic theme renders header search as a button that opens
   an overlay; the overlay itself is in closed shadow DOM and can't be
   styled from here. */

[data-md-color-scheme="oslo"] .md-search__button {
  background-color: #ffffff;
  border: 2px solid #f9c66b;
  color: #666666;
}

[data-md-color-scheme="oslo"] .md-search__button:focus,
[data-md-color-scheme="oslo"] .md-search__button:hover {
  background-color: #ffffff;
}

/* The theme's fixed top offsets on the icon and shortcut hint assume a
   borderless button; our 2px border shrinks the padding box, so center
   them vertically instead. */
[data-md-color-scheme="oslo"] .md-search__button::before,
[data-md-color-scheme="oslo"] .md-search__button::after {
  top: 50%;
  transform: translateY(-50%);
}

[data-md-color-scheme="oslo"] .md-search__button::after {
  background: #f2f2f2;
  color: #666666;
}

[data-md-color-scheme="oslo"] .md-tabs {
  border-bottom: 1px solid #f2f2f2;
}

[data-md-color-scheme="oslo"] .md-source:focus,
.md-source:hover,
.md-nav__source:hover,
.md-tabs__link:focus,
.md-tabs__link:hover,
.md-body__link:focus,
.md-body__link:hover,
.md-footer__link:focus,
.md-footer__link:hover {
  opacity: 1;
  color: #1f42aa;
}

[data-md-color-scheme="oslo"] html .md-footer-meta.md-typeset a:focus,
html .md-footer-meta.md-typeset a:hover {
  opacity: 1;
  color: #b3f5ff;
}

/* Underlining the active menu item (and removing fade) */
[data-md-color-scheme="oslo"] .md-tabs__link {
  opacity: 1;
}

[data-md-color-scheme="oslo"] .md-tabs__item--active {
  text-decoration: underline;
  text-decoration-color: #6fe9ff;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Styling Buttons */

[data-md-color-scheme="oslo"] .md-button {
  border: 2px solid #2a2859;
  color: #2a2859 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

[data-md-color-scheme="oslo"] .md-button:hover {
  background-color: #1f42aa;
  color: #ffffff !important;
  text-decoration-color: #ffffff;
  text-decoration: underline !important;
  text-underline-offset: 4px;
}

[data-md-color-scheme="oslo"] .md-clipboard {
  color: #2a2859;
}

[data-md-color-scheme="oslo"] .md-clipboard:hover {
  color: #1f42aa;
}

/* Styling Abbreviations */

[data-md-color-scheme="oslo"] abbr {
  background-color: #e5fcff;
  border: none;
}

.md-nav--primary .md-nav__title {
  display: none;
}

/* New-window icon for links that open in a new tab. External links get
   target="_blank" from javascripts/external-links.js; don't key this on
   href, because the theme's instant navigation rewrites every href
   (including in-page anchors) to an absolute http(s) URL at runtime. */
a[target="_blank"]:not(.md-social__link):not(.md-source):not(.md-icon):after {
  display: inline-block;
  content: "";
  width: 1em;
  height: 1em;
  --svg: url(https://punkt-cdn.oslo.kommune.no/latest/icons/new-window-small.svg);
  background-image: var(--svg);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: contain;
  vertical-align: baseline;
}