/* Maintainer reference: brand RGB swatches → nokia-brand-colors.md (same folder). */
:root>* {
  --md-text-font: "NokiaPureText";
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #f5f5f5;
  --md-primary-fg-color--dark: #e8e8e8;
  --md-primary-bg-color: #2b2b2b;

  --md-typeset-a-color: #005AFF;
  --md-accent-fg-color: #001135;

  --nokia-heading-font-color: #005AFF;

  /* get started home button */
  --nokia-get-started-btn-color: #005AFF;
  --nokia-get-started-text-color: #ffffff;
  --nokia-get-started-hover-text-color: #ffffff;
  --nokia-get-started-hover-btn-color: #23ABB6;

  /* typeset .md-button (Material uses --md-primary-* which is header-themed) */
  --nokia-typeset-button-color: #005AFF;
  --nokia-typeset-button-border: #005AFF;
  --nokia-typeset-button-bg: transparent;
  --nokia-typeset-button-hover-color: #005ADF;
  --nokia-typeset-button-hover-border: #005ADF;
  --nokia-typeset-button-hover-bg: #E4F0FF;

  --nokia-typeset-button-primary-color: #ffffff;
  --nokia-typeset-button-primary-border: #005AFF;
  --nokia-typeset-button-primary-bg: #005AFF;
  --nokia-typeset-button-primary-hover-color: #ffffff;
  --nokia-typeset-button-primary-hover-border: #005ADF;
  --nokia-typeset-button-primary-hover-bg: #005ADF;

  /* wide annotations */
  --md-tooltip-width: 600px;
}

/* set colors for the crd-viewer component */
.md-typeset .crd-viewer {
  --crd-primary: #005AFF;
}

[data-md-color-scheme="slate"] .md-typeset .crd-viewer {
  --crd-primary: #ffffff;
}

[data-md-color-scheme="slate"][data-md-color-primary="indigo"] {
  --md-primary-fg-color: #0C1017;
  --md-primary-fg-color--light: #141a22;
  --md-primary-fg-color--dark: #070b0f;
  --md-primary-bg-color: #ffffff;
  --md-default-bg-color: #0C1017;

  --md-typeset-a-color: #ffffff;
  --md-accent-fg-color: #4092FF;

  --nokia-heading-font-color: #ffffff;
  --nokia-get-started-btn-color: #3D81FF;
  --nokia-get-started-text-color: #ffffff;
  --nokia-get-started-hover-text-color: #ffffff;
  --nokia-get-started-hover-btn-color: #336AD1;

  --nokia-typeset-button-color: #ffffff;
  --nokia-typeset-button-border: #3D81FF;
  --nokia-typeset-button-bg: transparent;
  --nokia-typeset-button-hover-color: #ffffff;
  --nokia-typeset-button-hover-border: #336AD1;
  --nokia-typeset-button-hover-bg: rgba(61, 129, 255, 0.12);

  --nokia-typeset-button-primary-color: #ffffff;
  --nokia-typeset-button-primary-border: #3D81FF;
  --nokia-typeset-button-primary-bg: #3D81FF;
  --nokia-typeset-button-primary-hover-color: #ffffff;
  --nokia-typeset-button-primary-hover-border: #336AD1;
  --nokia-typeset-button-primary-hover-bg: #336AD1;
}

.md-grid {
  /* a slightly increased width for the main content ~1300px */
  max-width: 65rem;
}

.md-post--excerpt {
  /* a slightly increased width for the main content ~1300px */
  max-width: 40rem;
}

body,
input {
  font-weight: 300;
}

/* colors for headings */
.md-typeset h1,
h2,
h3,
h4 {
  font-family: NokiaPureHeadlineLight;
  color: var(--nokia-heading-font-color)
}

/* make logo smaller */
.md-header__button.md-logo svg {
  height: 1rem;
}

/* on firefox strong was getting font weight 400, which was not bold */
strong,
b {
  font-weight: bold;
}

.md-typeset ul {
  list-style-type: square;
}

.md-typeset ul li::marker {
  font-size: 0.9em;
}

/* underline links */
.md-typeset a:not(.footnote-ref, .md-button, .headerlink, .md-tag) {
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  /* text-decoration-style: dotted;
  text-decoration-thickness: 0.08rem; */
  text-underline-offset: 0.2rem;
}

/* do not apply underline for tabbed labels */
.md-typeset .tabbed-labels a {
  text-decoration: none;
}

/* do not apply underline for line numbers in codeblocks */
.md-typeset .linenodiv a {
  text-decoration: none;
}

/* typeset buttons: decouple from header --md-primary-* (swatches: nokia-brand-colors.md) */
.md-typeset .md-button {
  color: var(--nokia-typeset-button-color);
  border-color: var(--nokia-typeset-button-border);
  background-color: var(--nokia-typeset-button-bg);
}

.md-typeset .md-button:hover,
.md-typeset .md-button:focus-visible {
  color: var(--nokia-typeset-button-hover-color);
  border-color: var(--nokia-typeset-button-hover-border);
  background-color: var(--nokia-typeset-button-hover-bg);
}

.md-typeset .md-button--primary {
  color: var(--nokia-typeset-button-primary-color);
  border-color: var(--nokia-typeset-button-primary-border);
  background-color: var(--nokia-typeset-button-primary-bg);
}

.md-typeset .md-button--primary:hover,
.md-typeset .md-button--primary:focus-visible {
  color: var(--nokia-typeset-button-primary-hover-color);
  border-color: var(--nokia-typeset-button-primary-hover-border);
  background-color: var(--nokia-typeset-button-primary-hover-bg);
}

/* setting the code font size a bit smaller. This is commented out now, as it breaks linenumbers in code blocks */
/* .md-typeset code {
  font-size: .8em;
}


@media screen and (max-width: 76.1875em) {
  .md-header__button.md-icon[for=__drawer] {
    order: -1
  }

  .md-header__button.md-logo {
    display: block;
  }
}

.md-container.secondary-section {
  border: 0;
}

/* need to have decide if it is better or not
  making the content width bigger
.md-grid {
  max-width: 1440px;
} */

/* Table styling */
/* we hide the tr with the th.hide-th class 
this is needed when we want to use a table without a header
*/
tr:has(th.hide-th) {
  display: none;
}

/* Color the table header */
/* .md-typeset table:not([class]) th {
  background-color: #9e9e9e;
} 

th {
  color: #FFFFFF !important;
}
*/

/* Pumping heart */
.md-typeset .mdx-heart {
  -webkit-animation: heart 1s infinite;
  animation: heart 1s infinite;
  color: #e91e63
}

/* make announce link color always white */
.md-banner__inner a {
  color: #ffffff
}

/* adjust colors in the "not latest version" banner */
.md-banner--warning a strong {
  color: var(--md-default-fg-color);
}

.md-banner--warning a:hover strong {
  color: var(--nokia-heading-font-color);
}

/* shadow effect for images and divs for video */
.img-shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* styles for inter H1 code <hr> */
.ext-code-divider {
  margin-top: 3em;
  text-align: center;
}

.ext-code-divider a {
  display: inline-block;
  transition: transform 250ms cubic-bezier(0.1, 0.7, 0.1, 1), color 125ms;
}

.ext-code-divider a:focus,
.ext-code-divider a:hover {
  transform: scale(1.2);
}

.ext-code-divider hr {
  display: inline-block;
  width: 40px;
  margin: 16px;
  vertical-align: middle;
  background-color: currentColor;
  border: none;
}

/* vertical alignment for svg in h1 divider element */
.ext-code-divider>.vertical-middle {
  vertical-align: middle;
}

/* make 2nd prompt line of srlinux render bold with srlinux-pygments */
:is(.language-srl, .language-srlmin) :is(.n) {
  font-weight: 900;
}

/* classes to make iframe elements responsive */
.iframe-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* this is for low-height iframe audio containers */
.iframe-audio2-container {
  position: relative;
  width: 100%;
  padding-bottom: 2rem;
}

.iframe-audio2-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* embedded output for code blocks
  use as
  ```
  echo test
  ```
  <div class="embed-result highlight">
  ```
  test
  ```
  </div>
 */
.md-typeset .embed-result {
  margin-top: -1.125em;
}

/* START border for content tabs 
https://github.com/squidfunk/mkdocs-material/discussions/4157#discussioncomment-8270993
*/
.md-typeset .tabbed-set {
  border: 0.5px solid var(--md-typeset-table-color);
}

.md-typeset .tabbed-content {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

/* END border for content tabs */


/* START scrollable code blocks used in code snippets */
div.highlight.code-scroll-lg pre>code {
  max-height: 80vh;
}

div.highlight.code-scroll-sm pre>code {
  max-height: 50vh;
}

/* END scrollable code blocks used in code snippets */

/* START hide code copy and selection icons until on hover */
/* Hide the nav element by default */
div.highlight .md-code__nav {
  display: none;
}

/* Show the nav element with half opacity when the div is hovered over */
div.highlight:hover .md-code__nav {
  display: flex;
  opacity: 0.2;
  transition: opacity 0.3s ease;
}

/* Make the nav element fully visible when hovered directly */
div.highlight:hover .md-code__nav:hover {
  opacity: 1;
}

/* END hide code copy and selection icons until on hover */

/* ── Nokia brand admonition colors ──────────────────────────────────────── */

/* default (untyped admonitions & details) — Blue 500 */
.md-typeset .admonition,
.md-typeset details {
  border-color: #005AFF;
}

.md-typeset .admonition>.admonition-title,
.md-typeset details>summary {
  background-color: #005AFF1a;
}

.md-typeset .admonition>.admonition-title::before,
.md-typeset details>summary::before {
  background-color: #005AFF;
}

.md-typeset .admonition>.admonition-title::after,
.md-typeset details>summary::after {
  background-color: #005AFF;
}

/* danger, error — Red 500 */
.md-typeset .admonition.danger,
.md-typeset details.danger,
.md-typeset .admonition.error,
.md-typeset details.error {
  border-color: #E23B3B;
}

.md-typeset .danger>.admonition-title,
.md-typeset .danger>summary,
.md-typeset .error>.admonition-title,
.md-typeset .error>summary {
  background-color: #E23B3B1a;
}

.md-typeset .danger>.admonition-title::before,
.md-typeset .danger>summary::before,
.md-typeset .error>.admonition-title::before,
.md-typeset .error>summary::before {
  background-color: #E23B3B;
}

.md-typeset .danger>.admonition-title::after,
.md-typeset .danger>summary::after,
.md-typeset .error>.admonition-title::after,
.md-typeset .error>summary::after {
  background-color: #E23B3B;
}

/* failure, fail, missing — Red 400 */
.md-typeset .admonition.failure,
.md-typeset details.failure,
.md-typeset .admonition.fail,
.md-typeset details.fail,
.md-typeset .admonition.missing,
.md-typeset details.missing {
  border-color: #F26C69;
}

.md-typeset .failure>.admonition-title,
.md-typeset .failure>summary,
.md-typeset .fail>.admonition-title,
.md-typeset .fail>summary,
.md-typeset .missing>.admonition-title,
.md-typeset .missing>summary {
  background-color: #F26C691a;
}

.md-typeset .failure>.admonition-title::before,
.md-typeset .failure>summary::before,
.md-typeset .fail>.admonition-title::before,
.md-typeset .fail>summary::before,
.md-typeset .missing>.admonition-title::before,
.md-typeset .missing>summary::before {
  background-color: #F26C69;
}

.md-typeset .failure>.admonition-title::after,
.md-typeset .failure>summary::after,
.md-typeset .fail>.admonition-title::after,
.md-typeset .fail>summary::after,
.md-typeset .missing>.admonition-title::after,
.md-typeset .missing>summary::after {
  background-color: #F26C69;
}

/* bug — Pink 500 */
.md-typeset .admonition.bug,
.md-typeset details.bug {
  border-color: #E03DCD;
}

.md-typeset .bug>.admonition-title,
.md-typeset .bug>summary {
  background-color: #E03DCD1a;
}

.md-typeset .bug>.admonition-title::before,
.md-typeset .bug>summary::before {
  background-color: #E03DCD;
}

.md-typeset .bug>.admonition-title::after,
.md-typeset .bug>summary::after {
  background-color: #E03DCD;
}

/* warning, attention — Orange 500 */
.md-typeset .admonition.warning,
.md-typeset details.warning,
.md-typeset .admonition.attention,
.md-typeset details.attention {
  border-color: #F47F31;
}

.md-typeset .warning>.admonition-title,
.md-typeset .warning>summary,
.md-typeset .attention>.admonition-title,
.md-typeset .attention>summary {
  background-color: #F47F311a;
}

.md-typeset .warning>.admonition-title::before,
.md-typeset .warning>summary::before,
.md-typeset .attention>.admonition-title::before,
.md-typeset .attention>summary::before {
  background-color: #F47F31;
}

.md-typeset .warning>.admonition-title::after,
.md-typeset .warning>summary::after,
.md-typeset .attention>.admonition-title::after,
.md-typeset .attention>summary::after {
  background-color: #F47F31;
}

/* caution — Yellow 600 */
.md-typeset .admonition.caution,
.md-typeset details.caution {
  border-color: #D98C0F;
}

.md-typeset .caution>.admonition-title,
.md-typeset .caution>summary {
  background-color: #D98C0F1a;
}

.md-typeset .caution>.admonition-title::before,
.md-typeset .caution>summary::before {
  background-color: #D98C0F;
}

.md-typeset .caution>.admonition-title::after,
.md-typeset .caution>summary::after {
  background-color: #D98C0F;
}

/* note, seealso — Blue 500 */
.md-typeset .admonition.note,
.md-typeset details.note,
.md-typeset .admonition.seealso,
.md-typeset details.seealso {
  border-color: #005AFF;
}

.md-typeset .note>.admonition-title,
.md-typeset .note>summary,
.md-typeset .seealso>.admonition-title,
.md-typeset .seealso>summary {
  background-color: #005AFF1a;
}

.md-typeset .note>.admonition-title::before,
.md-typeset .note>summary::before,
.md-typeset .seealso>.admonition-title::before,
.md-typeset .seealso>summary::before {
  background-color: #005AFF;
}

.md-typeset .note>.admonition-title::after,
.md-typeset .note>summary::after,
.md-typeset .seealso>.admonition-title::after,
.md-typeset .seealso>summary::after {
  background-color: #005AFF;
}

/* abstract, summary, tldr — Blue 400 */
.md-typeset .admonition.abstract,
.md-typeset details.abstract,
.md-typeset .admonition.summary,
.md-typeset details.summary,
.md-typeset .admonition.tldr,
.md-typeset details.tldr {
  border-color: #4092FF;
}

.md-typeset .abstract>.admonition-title,
.md-typeset .abstract>summary,
.md-typeset .summary>.admonition-title,
.md-typeset .summary>summary,
.md-typeset .tldr>.admonition-title,
.md-typeset .tldr>summary {
  background-color: #4092FF1a;
}

.md-typeset .abstract>.admonition-title::before,
.md-typeset .abstract>summary::before,
.md-typeset .summary>.admonition-title::before,
.md-typeset .summary>summary::before,
.md-typeset .tldr>.admonition-title::before,
.md-typeset .tldr>summary::before {
  background-color: #4092FF;
}

.md-typeset .abstract>.admonition-title::after,
.md-typeset .abstract>summary::after,
.md-typeset .summary>.admonition-title::after,
.md-typeset .summary>summary::after,
.md-typeset .tldr>.admonition-title::after,
.md-typeset .tldr>summary::after {
  background-color: #4092FF;
}

/* info, todo — Teal 500 */
.md-typeset .admonition.info,
.md-typeset details.info,
.md-typeset .admonition.todo,
.md-typeset details.todo {
  border-color: #23ABB6;
}

.md-typeset .info>.admonition-title,
.md-typeset .info>summary,
.md-typeset .todo>.admonition-title,
.md-typeset .todo>summary {
  background-color: #23ABB61a;
}

.md-typeset .info>.admonition-title::before,
.md-typeset .info>summary::before,
.md-typeset .todo>.admonition-title::before,
.md-typeset .todo>summary::before {
  background-color: #23ABB6;
}

.md-typeset .info>.admonition-title::after,
.md-typeset .info>summary::after,
.md-typeset .todo>.admonition-title::after,
.md-typeset .todo>summary::after {
  background-color: #23ABB6;
}

/* tip, hint, important — Green 500 */
.md-typeset .admonition.tip,
.md-typeset details.tip,
.md-typeset .admonition.hint,
.md-typeset details.hint,
.md-typeset .admonition.important,
.md-typeset details.important {
  border-color: #37CC73;
}

.md-typeset .tip>.admonition-title,
.md-typeset .tip>summary,
.md-typeset .hint>.admonition-title,
.md-typeset .hint>summary,
.md-typeset .important>.admonition-title,
.md-typeset .important>summary {
  background-color: #37CC731a;
}

.md-typeset .tip>.admonition-title::before,
.md-typeset .tip>summary::before,
.md-typeset .hint>.admonition-title::before,
.md-typeset .hint>summary::before,
.md-typeset .important>.admonition-title::before,
.md-typeset .important>summary::before {
  background-color: #37CC73;
}

.md-typeset .tip>.admonition-title::after,
.md-typeset .tip>summary::after,
.md-typeset .hint>.admonition-title::after,
.md-typeset .hint>summary::after,
.md-typeset .important>.admonition-title::after,
.md-typeset .important>summary::after {
  background-color: #37CC73;
}

/* success, check, done — Green 600 */
.md-typeset .admonition.success,
.md-typeset details.success,
.md-typeset .admonition.check,
.md-typeset details.check,
.md-typeset .admonition.done,
.md-typeset details.done {
  border-color: #14B949;
}

.md-typeset .success>.admonition-title,
.md-typeset .success>summary,
.md-typeset .check>.admonition-title,
.md-typeset .check>summary,
.md-typeset .done>.admonition-title,
.md-typeset .done>summary {
  background-color: #14B9491a;
}

.md-typeset .success>.admonition-title::before,
.md-typeset .success>summary::before,
.md-typeset .check>.admonition-title::before,
.md-typeset .check>summary::before,
.md-typeset .done>.admonition-title::before,
.md-typeset .done>summary::before {
  background-color: #14B949;
}

.md-typeset .success>.admonition-title::after,
.md-typeset .success>summary::after,
.md-typeset .check>.admonition-title::after,
.md-typeset .check>summary::after,
.md-typeset .done>.admonition-title::after,
.md-typeset .done>summary::after {
  background-color: #14B949;
}

/* question, help, faq — Purple 500 */
.md-typeset .admonition.question,
.md-typeset details.question,
.md-typeset .admonition.help,
.md-typeset details.help,
.md-typeset .admonition.faq,
.md-typeset details.faq {
  border-color: #7D33F2;
}

.md-typeset .question>.admonition-title,
.md-typeset .question>summary,
.md-typeset .help>.admonition-title,
.md-typeset .help>summary,
.md-typeset .faq>.admonition-title,
.md-typeset .faq>summary {
  background-color: #7D33F21a;
}

.md-typeset .question>.admonition-title::before,
.md-typeset .question>summary::before,
.md-typeset .help>.admonition-title::before,
.md-typeset .help>summary::before,
.md-typeset .faq>.admonition-title::before,
.md-typeset .faq>summary::before {
  background-color: #7D33F2;
}

.md-typeset .question>.admonition-title::after,
.md-typeset .question>summary::after,
.md-typeset .help>.admonition-title::after,
.md-typeset .help>summary::after,
.md-typeset .faq>.admonition-title::after,
.md-typeset .faq>summary::after {
  background-color: #7D33F2;
}

/* example — Purple 400 */
.md-typeset .admonition.example,
.md-typeset details.example {
  border-color: #9765FE;
}

.md-typeset .example>.admonition-title,
.md-typeset .example>summary {
  background-color: #9765FE1a;
}

.md-typeset .example>.admonition-title::before,
.md-typeset .example>summary::before {
  background-color: #9765FE;
}

.md-typeset .example>.admonition-title::after,
.md-typeset .example>summary::after {
  background-color: #9765FE;
}

/* quote, cite — Gray 600 */
.md-typeset .admonition.quote,
.md-typeset details.quote,
.md-typeset .admonition.cite,
.md-typeset details.cite {
  border-color: #999999;
}

.md-typeset .quote>.admonition-title,
.md-typeset .quote>summary,
.md-typeset .cite>.admonition-title,
.md-typeset .cite>summary {
  background-color: #9999991a;
}

.md-typeset .quote>.admonition-title::before,
.md-typeset .quote>summary::before,
.md-typeset .cite>.admonition-title::before,
.md-typeset .cite>summary::before {
  background-color: #999999;
}

.md-typeset .quote>.admonition-title::after,
.md-typeset .quote>summary::after,
.md-typeset .cite>.admonition-title::after,
.md-typeset .cite>summary::after {
  background-color: #999999;
}

/* ── END Nokia brand admonition colors ─────────────────────────────────── */

/* START code-example admonition styles */
:root {
  --md-admonition-icon--code-example: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.22 4.97a.75.75 0 0 1 1.06 0l6.5 6.5a.75.75 0 0 1 0 1.06l-6.5 6.5a.749.749 0 0 1-1.275-.326.75.75 0 0 1 .215-.734L21.19 12l-5.97-5.97a.75.75 0 0 1 0-1.06m-6.44 0a.75.75 0 0 1 0 1.06L2.81 12l5.97 5.97a.749.749 0 0 1-.326 1.275.75.75 0 0 1-.734-.215l-6.5-6.5a.75.75 0 0 1 0-1.06l6.5-6.5a.75.75 0 0 1 1.06 0"/></svg>')
}

.md-typeset .admonition.code-example,
.md-typeset details.code-example {
  border-color: #9e9e9e;
}

.md-typeset .code-example>.admonition-title,
.md-typeset .code-example>summary {
  background-color: #9e9e9e1a;
}

.md-typeset .code-example>.admonition-title::before,
.md-typeset .code-example>summary::before {
  background-color: #9e9e9e;
  -webkit-mask-image: var(--md-admonition-icon--code-example);
  mask-image: var(--md-admonition-icon--code-example);
}

.md-typeset .code-example>.admonition-title::after,
.md-typeset .code-example>summary::after {
  background-color: #9e9e9e;
}

/* END code-example admonition styles */

/* START subtle-note admonition styles */
:root {
  --md-admonition-icon--subtle-note: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2m3.1 5.07c.14 0 .28.05.4.16l1.27 1.27c.23.22.23.57 0 .78l-1 1-2.05-2.05 1-1c.1-.11.24-.16.38-.16m-1.97 1.74 2.06 2.06-6.06 6.06H7.07v-2.06z"/></svg>')
}

.md-typeset .admonition.subtle-note,
.md-typeset details.subtle-note {
  border-color: #999999;
}

.md-typeset .subtle-note>.admonition-title,
.md-typeset .subtle-note>summary {
  background-color: #9999991a;
}

.md-typeset .subtle-note>.admonition-title::before,
.md-typeset .subtle-note>summary::before {
  background-color: #999999;
  -webkit-mask-image: var(--md-admonition-icon--subtle-note);
  mask-image: var(--md-admonition-icon--subtle-note);
}

.md-typeset .subtle-note>.admonition-title::after,
.md-typeset .subtle-note>summary::after {
  background-color: #999999;
}

/* END subtle-note admonition styles */

/* START subtle-info admonition styles */
:root {
  --md-admonition-icon--subtle-info: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 9h-2V7h2m0 10h-2v-6h2m-1-9A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2Z"/></svg>')
}

.md-typeset .admonition.subtle-info,
.md-typeset details.subtle-info {
  border-color: #999999;
}

.md-typeset .subtle-info>.admonition-title,
.md-typeset .subtle-info>summary {
  background-color: #9999991a;
}

.md-typeset .subtle-info>.admonition-title::before,
.md-typeset .subtle-info>summary::before {
  background-color: #999999;
  -webkit-mask-image: var(--md-admonition-icon--subtle-info);
  mask-image: var(--md-admonition-icon--subtle-info);
}

.md-typeset .subtle-info>.admonition-title::after,
.md-typeset .subtle-info>summary::after {
  background-color: #999999;
}

/* END subtle-info admonition styles */

/* START subtle-question admonition styles */
:root {
  --md-admonition-icon--subtle-question: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="m15.07 11.25-.9.92C13.45 12.89 13 13.5 13 15h-2v-.5c0-1.11.45-2.11 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41a2 2 0 0 0-2-2 2 2 0 0 0-2 2H8a4 4 0 0 1 4-4 4 4 0 0 1 4 4 3.2 3.2 0 0 1-.93 2.25M13 19h-2v-2h2M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10c0-5.53-4.5-10-10-10Z"/></svg>')
}

.md-typeset .admonition.subtle-question,
.md-typeset details.subtle-question {
  border-color: #999999;
}

.md-typeset .subtle-question>.admonition-title,
.md-typeset .subtle-question>summary {
  background-color: #9999991a;
}

.md-typeset .subtle-question>.admonition-title::before,
.md-typeset .subtle-question>summary::before {
  background-color: #999999;
  -webkit-mask-image: var(--md-admonition-icon--subtle-question);
  mask-image: var(--md-admonition-icon--subtle-question);
}

.md-typeset .subtle-question>.admonition-title::after,
.md-typeset .subtle-question>summary::after {
  background-color: #999999;
}

/* END subtle-question admonition styles */

/* START thin scrollbar styles */
/* First unset all rules that break Chrome styling */
.md-typeset pre>code,
.md-search__scrollwrap,
.md-sidebar__scrollwrap {
  scrollbar-color: unset;
  scrollbar-width: unset;
}

.md-typeset pre>code:hover,
.md-search__scrollwrap:hover,
.md-sidebar__scrollwrap:focus-within,
.md-sidebar__scrollwrap:hover {
  scrollbar-color: unset;
}

.md-tooltip2__inner {
  scrollbar-width: unset;
}

/* Wrap new scrollbar properties in @supports rule for browsers without `::-webkit-scrollbar` support */
/* This way chrome won't override `::-webkit-scrollbar` selectors */
/* https://developer.chrome.com/docs/css-ui/scrollbar-styling */
@supports not selector(::-webkit-scrollbar) {

  .md-typeset pre>code,
  .md-search__scrollwrap,
  .md-sidebar__scrollwrap {
    scrollbar-color: var(--md-default-fg-color--lighter) #0000;
    scrollbar-width: thin;
  }

  .md-typeset pre>code:hover,
  .md-search__scrollwrap:hover,
  .md-sidebar__scrollwrap:focus-within,
  .md-sidebar__scrollwrap:hover {
    scrollbar-color: var(--md-accent-fg-color) #0000;
  }

  .md-tooltip2__inner {
    scrollbar-width: thin;
  }
}

/* Restore hover color for Chrome */
@supports selector(::-webkit-scrollbar) {

  .md-typeset pre>code:hover::-webkit-scrollbar-thumb,
  .md-search__scrollwrap:hover::-webkit-scrollbar-thumb,
  .md-sidebar__scrollwrap:focus-within::-webkit-scrollbar-thumb,
  .md-sidebar__scrollwrap:hover::-webkit-scrollbar-thumb {
    background-color: var(--md-accent-fg-color);
  }
}

/* END thin scrollbar styles */

/* text next to UI EDA icons */
.icon__text {
  /* font-weight: 700; */
  font-family: NokiaPureText;
  font-size: 0.70rem;
  letter-spacing: 0.005rem;
  margin-left: 0.2rem;
}

.circle_icon__text {
  /* font-weight: 700; */
  font-family: NokiaPureText;
  font-size: 0.70rem;
  letter-spacing: 0.005rem;
  margin-left: 0.2rem;
}

.ui__icon {
  --md-icon-size: 1.125em;
  display: inline-flex;
  height: var(--md-icon-size);
  vertical-align: middle;
  margin-bottom: 0.1rem;
}

/* polka dot background */
.polka,
figure.polka {
  background-image:
    radial-gradient(var(--md-steps-border-color) 10%, transparent 10%);
  background-position: 0px 0px;
  background-size: 10px 10px;
}

figure.polka {
  margin: 0;
}

/* quote styling */
[dir="ltr"] .md-typeset blockquote {
  position: relative;
  padding-left: 1rem;
  border: none;
  border-left: none;
  font-size: 90%;
}

[dir="ltr"] .md-typeset blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  bottom: 0.1rem;
  width: 0.1em;
  border-radius: 0.5rem;
  background: linear-gradient(to bottom, var(--md-default-fg-color--lighter), var(--nokia-heading-font-color));
}

/* ── Figma-aligned search input (desktop only — on mobile Material's
   full-screen overlay uses its own sizing) ──────────────────────────────── */
@media screen and (min-width: 60em) {
  .md-search__form {
    position: relative;
    border-radius: 8px;
    border: 1px solid rgba(104, 114, 130, 0.3);
    height: 1.625rem;
    align-items: center;
    background-color: var(--md-default-bg-color);
  }

  .md-search__form::after {
    content: "/";
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding-inline: 0.25rem;
    border: 1px solid rgba(104, 114, 130, 0.45);
    border-radius: 0.25rem;
    background-color: var(--md-default-bg-color);
    color: rgba(43, 43, 43, 0.6);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.15s ease;
  }

  .md-search__form:focus-within::after {
    opacity: 0;
  }

  [data-md-toggle="search"]:checked~.md-header .md-search__form::after {
    opacity: 0;
  }

  .md-search__input {
    font-size: 0.8125rem;
    line-height: 1.25;
    height: 100%;
    min-height: 0;
    padding-block: 0.125rem;
    padding-inline: 0.125rem 2rem;
  }

  .md-search__input::placeholder {
    color: rgba(43, 43, 43, 0.5);
  }

  [data-md-toggle="search"]:checked~.md-header .md-search__form {
    border-radius: 8px 8px 0 0;
  }

  [data-md-toggle="search"]:checked~.md-header .md-search__output {
    border-radius: 0 0 8px 8px;
    overflow: hidden;
  }

  .md-search__form:hover,
  .md-search__form:focus-within {
    border-color: rgba(104, 114, 130, 0.6);
    box-shadow: none;
  }

  [data-md-color-scheme="slate"] .md-search__form {
    border-color: rgba(171, 180, 194, 0.3);
    background-color: var(--md-default-bg-color);
  }

  [data-md-color-scheme="slate"] .md-search__form::after {
    border-color: rgba(171, 180, 194, 0.45);
    color: rgba(255, 255, 255, 0.65);
    background-color: var(--md-default-bg-color);
  }

  [data-md-color-scheme="slate"] .md-search__input::placeholder {
    color: rgba(255, 255, 255, 0.5);
  }
}

/* ── Search icon: dark on the white search background ───────────────────── */
.md-search__form .md-search__icon {
  color: rgba(43, 43, 43, 0.5) !important;
}

[data-md-color-scheme="slate"] .md-search__form .md-search__icon {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ── Search empty-state AI hint keycap (dot trigger) ────────────────────── */
.md-search-result__meta .md-search__ai-keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  margin-inline: 0.2rem;
  padding-inline: 0.25rem;
  border: 1px solid rgba(104, 114, 130, 0.45);
  border-radius: 0.25rem;
  background-color: var(--md-default-bg-color);
  color: rgba(43, 43, 43, 0.65);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
}

[data-md-color-scheme="slate"] .md-search-result__meta .md-search__ai-keycap {
  border-color: rgba(171, 180, 194, 0.45);
  color: rgba(255, 255, 255, 0.7);
  background-color: var(--md-default-bg-color);
}

/* Hide the mobile-only AI source trigger outside drawer context */
.md-source--ai-mobile {
  display: none;
}

/* ── Drawer sidebar: GitHub + Discord + AI search side-by-side ───────────── */
@media screen and (max-width: 76.1875em) {
  .md-nav__source {
    display: flex;
    align-items: center;
    gap: var(--header-icon-cluster-gap);
  }

  .md-header__source .md-source--ai-mobile .md-source__icon svg,
  .md-nav__source .md-source--ai-mobile .md-source__icon svg {
    fill: currentColor;
  }

  .md-header__source .md-source--ai-mobile .md-source__icon path,
  .md-nav__source .md-source--ai-mobile .md-source__icon path {
    fill: currentColor;
    stroke: none;
  }
}

.md-tabs__link {
  font-weight: 700;
}

/* ── Divider between top bar and navigation tabs (full viewport width) ─── */
.md-header {
  border-bottom: 1px solid rgba(171, 180, 194, 0.3);
}

/* Subtler divider on dark header (Figma token on navy) */
[data-md-color-scheme="slate"] .md-header {
  border-bottom-color: rgba(171, 180, 194, 0.2);
}

/* Figma: hairline separator instead of Material elevation shadow */
.md-header.md-header--shadow {
  box-shadow: none;
}

/* ── Version picker (rightmost header element, rendered by mike) ────────── */
.md-header__version {
  flex-shrink: 0;
  margin-left: var(--header-icon-cluster-gap);
  display: flex;
  align-items: center;
}

.md-header__version .md-version {
  position: relative;
  height: auto;
}

.md-header__version .md-version__current {
  margin: 0;
  font-size: 0.8125rem;
}

.md-header__version .md-version__list {
  border: 1px solid rgba(104, 114, 130, 0.3);
  border-radius: 8px;
  box-shadow: none;
  margin: 0.25rem 0 0;
  top: 100%;
  right: 0;
}

[data-md-color-scheme="slate"] .md-header__version .md-version__list {
  border-color: rgba(171, 180, 194, 0.3);
}

/* ── Logo toggle: blue in light mode, white in dark mode ────────────────── */
.logo-light svg path {
  fill: #005AFF;
}

.logo-dark svg path {
  fill: #FFFFFF;
}

.logo-dark {
  display: none;
}

[data-md-color-scheme="slate"] .logo-light {
  display: none;
}

[data-md-color-scheme="slate"] .logo-dark {
  display: inline;
}

.md-nav .md-logo svg path {
  fill: #005AFF;
}

[data-md-color-scheme="slate"] .md-nav .md-logo svg path {
  fill: #FFFFFF;
}

.md-nav__title .md-nav__button.md-logo img,
.md-nav__title .md-nav__button.md-logo svg {
  height: 1.2rem;
}