/* Minimalist tuning for the study site — quiet, readable, print-friendly. */

:root {
  --md-text-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --md-code-font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ---- Justify body paragraphs (auto-hyphenation avoids river gaps) --------- */
.md-typeset p {
  text-align: justify;
  hyphens: auto;
}

/* ---- Header logo: white chip so the colour icon reads on the teal bar ----- */
.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  height: 1.7rem;
  width: 1.7rem;
  padding: 0.2rem;
  background: #fff;
  border-radius: 50%;
  box-sizing: content-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ---- docSkimmer colour scheme, ported to Material -------------------------
   Light: teal links (#085f5f), forest-green headings (#1b6a3e), green hovers,
   orange focus outline. Dark: lightened for contrast on the slate scheme.   */

:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #085f5f;   /* header / nav bar */
  --md-primary-fg-color--light: #0a7a7a;
  --md-primary-fg-color--dark:  #064747;
  --md-accent-fg-color:         #008300;   /* hover / interactive */
  --md-accent-fg-color--transparent: #0083001a;
  --md-typeset-a-color:         #085f5f;   /* body links */
}

[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4,
[data-md-color-scheme="default"] .md-typeset h5,
[data-md-color-scheme="default"] .md-typeset h6 {
  color: #1b6a3e;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #0a7a7a;
  --md-primary-fg-color--light: #0f9c9c;
  --md-primary-fg-color--dark:  #085f5f;
  --md-accent-fg-color:         #2ea043;
  --md-accent-fg-color--transparent: #2ea0431a;
  --md-typeset-a-color:         #4fc3b8;   /* lighter teal for dark backgrounds */
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  color: #6fcf97;
}

/* docSkimmer's orange keyboard-focus outline, for accessibility parity. */
.md-typeset a:focus-visible,
.md-nav__link:focus-visible {
  outline: 3px dotted #ff8000;
  outline-offset: 2px;
}

/* Content fills the column between the sidebars. Long-form prose is reined
   back to a comfortable reading measure just below, so only the wide elements
   (tables, diagrams, code) actually use the full width. */
.md-grid {
  max-width: none;
}

/* Prose keeps a comfortable, centred reading measure (~62rem). Block-level text
   elements are capped and centred; wide elements (tables, diagrams, code) are
   left out of this list on purpose and span the full column. */
.md-typeset > p,
.md-typeset > ul,
.md-typeset > ol,
.md-typeset > dl,
.md-typeset > blockquote,
.md-typeset > h1,
.md-typeset > h2,
.md-typeset > h3,
.md-typeset > h4,
.md-typeset > h5,
.md-typeset > h6,
.md-typeset > .admonition,
.md-typeset > details,
.md-typeset > .footnote {
  max-width: 62rem;
  margin-inline: auto;
}

/* Mermaid SVGs: centre, scale to column, never overflow. */
.mermaid-figure {
  margin: 1.5em 0;
  text-align: center;
  overflow-x: auto;
}
.mermaid-figure svg {
  max-width: 100%;
  height: auto;
}

/* Wide tables fill the full column and wrap, instead of scrolling off-screen.
   `table-layout: fixed` stops columns ballooning to their content width, so
   prose cells wrap (table grows down, not sideways). The wrapper keeps
   overflow-x as a last-resort safety net. Because prose is capped above but the
   grid is full-width, tables already span the full column with no bleed hack. */
.md-typeset__table {
  overflow-x: auto;
}
.md-typeset table:not([class]) {
  table-layout: fixed;
  width: 100%;
}
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}

/* Slightly calmer headings. */
.md-typeset h1,
.md-typeset h2 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* ---- Reading mode: hide the left index + right TOC, centre the text ------- */

body.reading-mode .md-sidebar--primary,
body.reading-mode .md-sidebar--secondary {
  display: none;
}
body.reading-mode .md-main__inner {
  justify-content: center;
}
body.reading-mode .md-content {
  max-width: 62rem;
  margin: 0 auto;
}

/* Floating toggle button, bottom-right, unobtrusive and theme-aware. */
#reading-mode-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 50%;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color--light);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.2s, color 0.2s, transform 0.25s ease;
}
#reading-mode-toggle:hover {
  opacity: 1;
  color: var(--md-accent-fg-color);
}
#reading-mode-toggle[aria-pressed="true"] {
  opacity: 1;
  color: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
}

/* "Press r" hint — shown only while navigation is visible (wide screens,
   not in reading mode). Sits just left of the toggle button. */
#reading-mode-hint {
  position: fixed;
  right: 4.1rem;
  bottom: 1rem;
  z-index: 20;
  display: none;                 /* enabled on wide screens below */
  align-items: center;
  height: 2.6rem;
  padding: 0 0.7rem;
  border-radius: 1.3rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  opacity: 0.75;
  pointer-events: none;          /* purely informational */
  transition: transform 0.25s ease;
}
#reading-mode-hint kbd,
#reading-mode-hint code {
  font-weight: 600;
}
@media screen and (min-width: 76.25em) {
  #reading-mode-hint { display: inline-flex; }
}
/* In reading mode the navigation is gone, so the hint is too. */
body.reading-mode #reading-mode-hint {
  display: none;
}
/* On small screens the sidebars are already collapsed or folded inline, so the
   reading-mode toggle has nothing to hide — remove it (the hint is wide-screen
   only already). */
@media screen and (max-width: 59.9375em) {
  #reading-mode-toggle { display: none; }
}

/* ---- Report-link arrow: the ↗ that trails a company name in roster tables.
   The whole "Name ↗" is one link; this class recolours just the arrow glyph
   (SVG fill is currentColor, so setting color is enough). Red by default;
   swap the value for teal (var(--md-typeset-a-color)) if preferred. --------- */
.md-typeset .report-arrow {
  color: #c62828;                /* red */
  vertical-align: baseline;
}
[data-md-color-scheme="slate"] .md-typeset .report-arrow {
  color: #ef5350;                /* lighter red for dark background */
}
.md-typeset .report-arrow svg {
  height: 0.95em;
  width: 0.95em;
}

/* ---- Highlight (pymdownx.mark / critic) ---------------------------------
   One mild colour only. A warm amber wash — the complementary side of the
   teal theme — so ==highlighted== spans catch a scanning eye and pull the
   reader in, without competing with teal links, green headings, or **bold**
   (which is for emphasis, not scanning). Low opacity keeps it calm; the
   dark-scheme value is a touch brighter so it survives the dark background. */
.md-typeset mark {
  background-color: rgba(233, 165, 68, 0.26);   /* warm amber, light mode */
  color: inherit;
  border-radius: 0.15em;
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
[data-md-color-scheme="slate"] .md-typeset mark {
  background-color: rgba(240, 180, 90, 0.28);   /* warm amber, dark mode */
}

/* ---- Footer copyright: underline links so they read as clickable --------- */
.md-copyright a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- Footer: single compact reveal-on-scroll-up bar ---------------------- */
/* One short row:  [<- prev title] ..... til-dfm.anandas.in ..... [next title ->]
   The whole footer is lifted out of flow and pinned to the viewport bottom,
   hidden by default; footer-peek.js slides it in on scroll-up / at page bottom
   and hides it on scroll-down. Material renders prev/next (.md-footer__inner)
   and copyright (.md-footer-meta) as two stacked rows — here we collapse them
   into one line: prev/next hug the edges, copyright is centred over the same
   row as a transparent overlay (so the bar is a single flat colour). */
.md-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  transform: translateY(100%);
  transition: transform 0.25s ease;
  box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.18);
}
body.footer-peek .md-footer {
  transform: translateY(0);
}
.md-main {
  padding-bottom: 3rem;   /* room so page-bottom content clears the bar */
}
/* The peeking bar is fixed to the viewport bottom and spans full width, so it
   also covers the bottom of the sticky sidebars (notably the right-hand ToC).
   Give both sidebar scroll areas matching bottom room, so their last entry can
   scroll up clear of the bar instead of sitting hidden behind it. */
.md-sidebar__scrollwrap {
  padding-bottom: 3rem;
}
@media (prefers-reduced-motion: reduce) {
  .md-footer {
    transition: none;
  }
}

/* A single teal for the whole bar, matching the header. */
:root,
[data-md-color-scheme="default"] { --md-footer-bg-color: #085f5f; }
[data-md-color-scheme="slate"]  { --md-footer-bg-color: #064747; }

/* Prev/next row IS the bar — short, links hugging the edges, centre left open. */
.md-footer__inner {
  position: relative;
  margin: 0 auto;
  padding: 0;
  min-height: 2rem;          /* ~header height */
  align-items: center;
}
.md-footer__link {
  flex: 0 1 34%;              /* don't grow to half — leave the centre free */
  align-items: center;       /* arrow + title on one baseline */
  padding: 0 0.8rem;
  opacity: 0.92;
}
.md-footer__button { display: none; }      /* drop the prev/next arrows — text only */
.md-footer__link--prev { margin-right: auto; }
.md-footer__link--next { margin-left: auto; }
.md-footer__direction { display: none; }   /* arrow already signals direction */
.md-footer__title {
  padding: 0;
  font-size: 0.72rem;
  line-height: 1.2;          /* tight box — flex centring aligns arrow + text */
}
.md-footer__link svg { width: 1rem; height: 1rem; }

/* On small screens the two prev/next titles overlap the centred copyright.
   Drop the titles and show only the direction arrows (← / →). */
@media screen and (max-width: 59.9375em) {
  .md-footer__button { display: inline-flex; }   /* bring the arrow icon back */
  .md-footer__title { display: none; }           /* hide the long title text */
}

/* Copyright: transparent, centred over the same row — no second row. */
.md-footer-meta {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;      /* let prev/next stay hoverable underneath */
}
.md-footer-meta__inner { padding: 0; }
.md-copyright {
  margin: 0;
  max-width: none;
  font-size: 0.72rem;        /* same size as the prev/next titles */
  line-height: 1.2;          /* match the titles; flex centres it in the row */
}
.md-copyright a { pointer-events: auto; }   /* links stay clickable */

/* Lift the reading-mode toggle (and its hint) above the bar while it peeks,
   so they never sit on top of it. */
body.footer-peek #reading-mode-toggle,
body.footer-peek #reading-mode-hint {
  transform: translateY(-3.2rem);   /* clear the bar with a little breathing room */
}

/* ---- Print: strip all chrome, print only this page's article ------------- */
@media print {
  #reading-mode-toggle,
  #reading-mode-hint,
  .md-header,
  .md-tabs,
  .md-sidebar,
  .md-footer,
  .md-content__button,
  .md-nav,
  .md-search {
    display: none !important;
  }
  .md-main__inner,
  .md-content {
    margin: 0 !important;
  }
  .md-grid {
    max-width: none !important;
  }
  .mermaid-figure,
  .md-typeset__table {
    overflow: visible;
  }
}

/* ---------------------------------------------------------------------------
   Capability-matrix qualifier colour-coding
   Used only in 3_dfm_companies/3_4_analysis.md. The (p)/(r)/(t)/(a)
   qualifiers tint their WHOLE cell (via :has); the parenthesised letter stays
   as a small in-cell label. In the legend the same class renders as a swatch
   key. `*` and `†` stay as plain markers (footnoted on that page).
   --------------------------------------------------------------------------- */
/* legend swatch — the span when it is NOT inside a table cell */
.md-typeset .qual {
  display: inline-block;
  font-family: var(--md-code-font-family);
  font-size: 0.72em;
  font-weight: 700;
  line-height: 1.5;
  padding: 0 0.35em;
  margin-left: 0.15em;
  border-radius: 0.4em;
  border: 1px solid var(--md-default-fg-color--lightest);
  vertical-align: baseline;
}
/* inside a matrix cell: no pill — the whole cell is tinted instead */
.md-typeset td .qual {
  background: transparent !important;
  border: none;
  padding: 0;
  font-size: 0.85em;
}

/* light (default) — very pale cell tints; darker label text */
[data-md-color-scheme="default"] .qual.q-p { background: #fff9db; color: #8a6600; } /* preview / not GA        */
[data-md-color-scheme="default"] .qual.q-r { background: #eef7ff; color: #1560a8; } /* research only          */
[data-md-color-scheme="default"] .qual.q-t { background: #fdecef; color: #a2344b; } /* thin, vendor-claimed   */
[data-md-color-scheme="default"] .qual.q-a { background: #f6f2fe; color: #6b4fae; } /* academic collaboration */
[data-md-color-scheme="default"] .md-typeset td:has(.qual.q-p) { background: #fff9db; }
[data-md-color-scheme="default"] .md-typeset td:has(.qual.q-r) { background: #eef7ff; }
[data-md-color-scheme="default"] .md-typeset td:has(.qual.q-t) { background: #fdecef; }
[data-md-color-scheme="default"] .md-typeset td:has(.qual.q-a) { background: #f6f2fe; }

/* dark (slate) — muted deep cell tints; light label text */
[data-md-color-scheme="slate"] .qual.q-p { background: #3a3110; color: #ffe38a; }
[data-md-color-scheme="slate"] .qual.q-r { background: #10293c; color: #8fc4f0; }
[data-md-color-scheme="slate"] .qual.q-t { background: #3d1f27; color: #f0a9b8; }
[data-md-color-scheme="slate"] .qual.q-a { background: #29224a; color: #c6b2f0; }
[data-md-color-scheme="slate"] .md-typeset td:has(.qual.q-p) { background: #3a3110; }
[data-md-color-scheme="slate"] .md-typeset td:has(.qual.q-r) { background: #10293c; }
[data-md-color-scheme="slate"] .md-typeset td:has(.qual.q-t) { background: #3d1f27; }
[data-md-color-scheme="slate"] .md-typeset td:has(.qual.q-a) { background: #29224a; }