/*
 * Component-level overrides: grid cards, tables, code, admonitions, icons.
 * Pure type scale (headings, paragraph rhythm, body color) lives in
 * typography.css. Colors/tokens come from bridge.css.
 */

/* ------------------------------------------------------------------ */
/* Secondary text — de-emphasize specific UI elements for hierarchy.   */
/* ------------------------------------------------------------------ */

/* Grid card descriptions and action-link paragraphs (all paragraphs
   except the first, which carries the title + icon). */
.md-typeset .grid.cards > ul > li > p:nth-of-type(n + 2),
.md-typeset .grid.cards > ol > li > p:nth-of-type(n + 2) {
  color: var(--color-text-secondary);
}

/* Sidebar navigation — mirror console ProjectSidebar treatment.
   Primary nav contains both page links ([href]) and section-label
   toggles ([for] controls the expand-collapse checkbox). Page links
   get the full brand hover/active treatment; section labels only get
   a neutral bg tint — their job is structural, not navigational. */
.md-sidebar .md-nav__link {
  color: var(--color-text-secondary);
}

/* Page links — brand hover */
.md-sidebar .md-nav__link[href]:hover:not(.md-nav__link--active) {
  background-color: var(--color-surface-hover);
  color: var(--color-text-brand);
}

/* Section-label toggles — neutral hover (keeps text color) */
.md-sidebar .md-nav__link[for]:hover:not(.md-nav__link--active) {
  background-color: var(--color-surface-hover);
}

/* Active state only meaningful for the current page link */
.md-sidebar .md-nav__link--active {
  color: var(--color-text-primary);
  background-color: var(--color-surface-brand);
}

.md-sidebar .md-nav__link:focus-visible {
  outline: 2px solid var(--color-border-focused);
  outline-offset: -2px;
}

/* ------------------------------------------------------------------ */
/* Icons (:shortcodes: via twemoji span)                               */
/* ------------------------------------------------------------------ */
/* Material's default `vertical-align: text-top` leaves the icon above
   cap-height; `middle` centers it with the text. Size stays at
   Material's 1.125em — SVGs have internal padding, a 1em icon reads
   undersized next to bold text. */
.md-typeset .twemoji {
  vertical-align: middle;
}

/* ------------------------------------------------------------------ */
/* Code — inline mirrors the console Code component (chip: brand-      */
/* tinted bg, border, body color, nowrap, absolute 13px). Block uses   */
/* the same bg but drops the border and allows wrapping.               */
/* ------------------------------------------------------------------ */
.md-typeset code {
  font-size: var(--font-size-2xs);
  line-height: 1;
  font-weight: var(--font-weight-normal);
  font-family: var(--font-family-monospace), monospace;
  color: var(--color-text-body);
  background-color: var(--color-surface-brand);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radii-sm);
  padding: 0.25em;
  white-space: nowrap;
}

.md-typeset pre {
  margin: var(--spacing-lg) 0;
}

.md-typeset pre > code {
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-sm);
  color: var(--color-text-body);
  background-color: var(--color-surface-brand);
  border: 0;
  border-radius: var(--radii-md);
  padding: var(--spacing-sm);
  white-space: pre;
}

/* ------------------------------------------------------------------ */
/* Tables — XS cell text, secondary body color, semibold headers.      */
/* ------------------------------------------------------------------ */
.md-typeset table:not([class]) {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  border-radius: var(--radii-md);
}

.md-typeset table:not([class]) :is(th, td) {
  padding: var(--spacing-sm) var(--spacing-sm);
}

.md-typeset table:not([class]) th {
  font-weight: var(--font-weight-semibold);
}

.md-typeset table:not([class]) td {
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------------ */
/* Admonitions — mirror the console Alert component.                   */
/*   Container: surface tint bg + 1px border in severity border token  */
/*   Title: severity text token, semibold                              */
/*   Icon: severity icon token, custom SVG via mask-image              */
/*   Body: --color-text-primary (console Alert convention)             */
/*                                                                      */
/* SVG icons inlined as data URLs — mask-image: url() to a file path   */
/* proved unreliable across browsers. Data URLs match how Material     */
/* ships its own admonition icons and always render the mask correctly.*/
/* ------------------------------------------------------------------ */
:root {
  --md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox=%220%200%2024%2024%22%20fill=%22black%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg%3E%3Cpath%20d=%22M12.0117%201.99951C6.48672%201.99951%202.01172%206.47451%202.01172%2011.9995C2.01172%2017.5245%206.48672%2021.9995%2012.0117%2021.9995C17.5367%2021.9995%2022.0117%2017.5245%2022.0117%2011.9995C22.0117%206.47451%2017.5367%201.99951%2012.0117%201.99951ZM12.6367%2016.9995H11.3867V10.7495H12.6367V16.9995ZM12.0117%209.49951C11.3242%209.49951%2010.7617%208.93701%2010.7617%208.24951C10.7617%207.56201%2011.3242%206.99951%2012.0117%206.99951C12.6992%206.99951%2013.2617%207.56201%2013.2617%208.24951C13.2617%208.93701%2012.6992%209.49951%2012.0117%209.49951Z%22/%3E%3C/g%3E%3C/svg%3E');
  --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox=%220%200%2024%2024%22%20fill=%22black%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg%3E%3Cpath%20d=%22M12.0039%202.00293C6.47891%202.00293%202.00391%206.47793%202.00391%2012.0029C2.00391%2017.5279%206.47891%2022.0029%2012.0039%2022.0029C17.5289%2022.0029%2022.0039%2017.5279%2022.0039%2012.0029C22.0039%206.47793%2017.5289%202.00293%2012.0039%202.00293ZM12.1164%2016.0029C11.8164%2016.4904%2011.3164%2016.8029%2010.7414%2016.8779C10.6664%2016.8779%2010.5914%2016.8779%2010.5289%2016.8779C10.0289%2016.8779%209.56641%2016.6779%209.20391%2016.3279L6.56641%2013.6904L7.45391%2012.8029L10.0914%2015.4404C10.2289%2015.5779%2010.4164%2015.6529%2010.6039%2015.6154C10.7914%2015.5904%2010.9664%2015.4904%2011.0664%2015.3279L16.4789%206.66543L17.5414%207.32793L12.1289%2015.9904L12.1164%2016.0029Z%22/%3E%3C/g%3E%3C/svg%3E');
  --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox=%220%200%2024%2024%22%20fill=%22black%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg%3E%3Cpath%20d=%22M12.0063%201.99951C6.48135%201.99951%202.00635%206.47451%202.00635%2011.9995C2.00635%2017.5245%206.48135%2021.9995%2012.0063%2021.9995C17.5313%2021.9995%2022.0063%2017.5245%2022.0063%2011.9995C22.0063%206.47451%2017.5313%201.99951%2012.0063%201.99951ZM11.3813%206.99951H12.6313V13.2495H11.3813V6.99951ZM12.0063%2016.9995C11.3188%2016.9995%2010.7563%2016.437%2010.7563%2015.7495C10.7563%2015.062%2011.3188%2014.4995%2012.0063%2014.4995C12.6938%2014.4995%2013.2563%2015.062%2013.2563%2015.7495C13.2563%2016.437%2012.6938%2016.9995%2012.0063%2016.9995Z%22/%3E%3C/g%3E%3C/svg%3E');
  --md-admonition-icon--danger: url('data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox=%220%200%2024%2024%22%20fill=%22black%22%20xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cg%3E%3Cpath%20d=%22M21.8512%2019.2387L13.2149%203.67427C12.7149%202.77459%2011.2901%202.77459%2010.7902%203.67427L2.1539%2019.2387C1.70397%2020.0484%202.35388%2020.9995%203.36624%2020.9995H20.6513C21.6637%2020.9995%2022.3136%2020.0484%2021.8637%2019.2387H21.8512ZM11.3776%208.14696H12.6275V14.5732H11.3776V8.14696ZM12.0025%2018.429C11.3151%2018.429%2010.7527%2017.8506%2010.7527%2017.1437C10.7527%2016.4369%2011.3151%2015.8585%2012.0025%2015.8585C12.6899%2015.8585%2013.2524%2016.4369%2013.2524%2017.1437C13.2524%2017.8506%2012.6899%2018.429%2012.0025%2018.429Z%22/%3E%3C/g%3E%3C/svg%3E');
}

.md-typeset .admonition,
.md-typeset details {
  font-size: var(--font-size-2xs);
  line-height: var(--line-height-sm);
  border-radius: var(--radii-md);
  border: 1px solid var(--color-border-subtle);
  padding: var(--spacing-sm) var(--spacing-sm) 0;
  margin: var(--spacing-lg) 0;
}

.md-typeset .admonition-title,
.md-typeset summary {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--spacing-sm);
}

/* Match Material's `[dir=ltr]`-prefixed selector so our padding-left
   wins over its 1.6rem default. Icon is `height: 1rem` absolute-
   positioned at left:0; a 4px gap after the icon box reads as ~8px
   visually (SVGs have internal padding). */
[dir="ltr"] .md-typeset .admonition-title,
[dir="ltr"] .md-typeset summary {
  padding: 0 var(--spacing-xs) 0 calc(1rem + 4px);
}

[dir="rtl"] .md-typeset .admonition-title,
[dir="rtl"] .md-typeset summary {
  padding: 0 calc(1rem + 4px) 0 var(--spacing-xs);
}

/* Admonition body stays primary even though prose <p> is softened to
   --color-text-body elsewhere. */
.md-typeset .admonition p,
.md-typeset details p {
  color: var(--color-text-primary);
}

/* Prevent child margins from compounding the container's padding. */
.md-typeset .admonition > :first-child,
.md-typeset details > :first-child {
  margin-top: 0;
}
.md-typeset .admonition > :last-child,
.md-typeset details > :last-child {
  margin-bottom: 0;
}

/* Per-severity: container + title + icon + expand chevron. */
.md-typeset .admonition.info,
.md-typeset details.info {
  background-color: var(--color-surface-info);
  border-color: var(--color-border-info);
}
.md-typeset .info > .admonition-title,
.md-typeset .info > summary {
  color: var(--color-text-info);
}
.md-typeset .info > .admonition-title::before,
.md-typeset .info > summary::before {
  background-color: var(--color-icon-info);
}
.md-typeset .info > .admonition-title::after,
.md-typeset .info > summary::after {
  color: var(--color-icon-info);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  background-color: var(--color-surface-success);
  border-color: var(--color-border-success);
}
.md-typeset .tip > .admonition-title,
.md-typeset .tip > summary {
  color: var(--color-text-success);
}
.md-typeset .tip > .admonition-title::before,
.md-typeset .tip > summary::before {
  background-color: var(--color-icon-success);
}
.md-typeset .tip > .admonition-title::after,
.md-typeset .tip > summary::after {
  color: var(--color-icon-success);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  background-color: var(--color-surface-warning);
  border-color: var(--color-border-warning);
}
.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  color: var(--color-text-warning);
}
.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: var(--color-icon-warning);
}
.md-typeset .warning > .admonition-title::after,
.md-typeset .warning > summary::after {
  color: var(--color-icon-warning);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  background-color: var(--color-surface-critical);
  border-color: var(--color-border-critical);
}
.md-typeset .danger > .admonition-title,
.md-typeset .danger > summary {
  color: var(--color-text-critical);
}
.md-typeset .danger > .admonition-title::before,
.md-typeset .danger > summary::before {
  background-color: var(--color-icon-critical);
}
.md-typeset .danger > .admonition-title::after,
.md-typeset .danger > summary::after {
  color: var(--color-icon-critical);
}