/* ==========================================================================
   Tech Interview Master - custom theme (green brand + readability polish)
   Layered on top of Material for MkDocs. Uses Material's CSS custom properties.
   ========================================================================== */

/* ---- Brand green palette (hand-tuned, not the stock Material green) ------- */
:root {
  --tim-green:        #2e9e5b;   /* primary */
  --tim-green-dark:   #1f7d45;
  --tim-green-light:  #4cc47e;   /* accent */
  --tim-green-050:    #e9f7ef;

  /* Map Material's primary/accent to our greens */
  --md-primary-fg-color:        var(--tim-green);
  --md-primary-fg-color--light: var(--tim-green-light);
  --md-primary-fg-color--dark:  var(--tim-green-dark);
  --md-accent-fg-color:         var(--tim-green-dark);

  /* Slightly larger base type + comfortable rhythm */
  --md-typeset-font-size: 0.82rem;
}

/* Readable line length + line height for long-form study notes */
.md-typeset {
  line-height: 1.72;
}
.md-content__inner {
  max-width: 62rem;      /* wider than default for code-heavy pages, still capped */
  margin-inline: auto;
}
/* Let the content area use more of the viewport (less dead side-margin) */
@media screen and (min-width: 76.25em) {
  .md-main__inner {
    max-width: 78rem;
  }
}

/* ---- Headings: clearer hierarchy, green H1/H2 rule ------------------------ */
.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--md-default-fg-color);
}
.md-typeset h2 {
  font-weight: 750;
  letter-spacing: -0.01em;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid rgba(46, 158, 91, 0.35);
}
.md-typeset h3 {
  font-weight: 700;
}
[data-md-color-scheme="slate"] .md-typeset h2 {
  border-bottom-color: rgba(76, 196, 126, 0.30);
}

/* ---- Links: green with a subtle underline on hover ------------------------ */
.md-typeset a {
  color: var(--tim-green-dark);
  text-decoration-color: transparent;
  transition: text-decoration-color 120ms ease;
}
.md-typeset a:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}
[data-md-color-scheme="slate"] .md-typeset a {
  color: var(--tim-green-light);
}

/* Buttons are not body links - no underline, keep them crisp */
.md-typeset .md-button,
.md-typeset .md-button:hover {
  text-decoration: none;
}
/* Primary (filled) button - force solid white text in BOTH schemes.
   Material's slate scheme otherwise inherits a muted/translucent foreground,
   which made the resting label near-invisible on the green fill in dark mode. */
.md-typeset .md-button--primary,
.md-typeset .md-button--primary:visited,
[data-md-color-scheme="slate"] .md-typeset .md-button--primary {
  color: #fff;
  border-color: var(--tim-green);
  background-color: var(--tim-green);
}
.md-typeset .md-button--primary:is(:hover, :focus, :active),
[data-md-color-scheme="slate"] .md-typeset .md-button--primary:is(:hover, :focus, :active) {
  background-color: var(--tim-green-dark);
  border-color: var(--tim-green-dark);
  color: #fff;
}

/* Secondary (ghost/outline) button - green text + border at rest, and an
   EXPLICIT hover state. Without the hover rule it fell back to Material's
   default (green text on a green fill = unreadable). On hover we now invert
   to a solid green fill with white text, matching the primary button. */
.md-typeset .md-button:not(.md-button--primary) {
  color: var(--tim-green-dark);
  border-color: var(--tim-green);
}
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary) {
  color: var(--tim-green-light);
}
.md-typeset .md-button:not(.md-button--primary):is(:hover, :focus, :active),
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):is(:hover, :focus, :active) {
  background-color: var(--tim-green);
  border-color: var(--tim-green);
  color: #fff;
}

/* ---- Header + nav tabs: gradient bar, crisp active tab -------------------- */
.md-header {
  background: linear-gradient(90deg, var(--tim-green-dark), var(--tim-green));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.md-tabs {
  background: transparent;
}
.md-tabs__link {
  opacity: 0.85;
  font-weight: 600;
}
.md-tabs__link--active,
.md-tabs__link:hover {
  opacity: 1;
}

/* Active item in the left sidebar */
.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--tim-green-dark);
  font-weight: 700;
}
[data-md-color-scheme="slate"] .md-nav__link--active {
  color: var(--tim-green-light);
}

/* ---- Code blocks: rounded, bordered, monospaced ligatures ----------------- */
.md-typeset pre > code {
  border-radius: 8px;
}
.md-typeset .highlight > pre,
.md-typeset pre {
  border-radius: 10px;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.md-typeset code {
  font-feature-settings: "liga" 1, "calt" 1;
  border-radius: 4px;
}
/* Inline code gets a faint green tint */
.md-typeset :not(pre) > code {
  background-color: var(--tim-green-050);
  color: var(--tim-green-dark);
}
[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
  background-color: rgba(76, 196, 126, 0.12);
  color: var(--tim-green-light);
}

/* ---- Tables: zebra rows, green header, rounded frame ---------------------- */
.md-typeset table:not([class]) {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.md-typeset table:not([class]) th {
  background-color: var(--tim-green);
  color: #fff;
  font-weight: 700;
}
.md-typeset table:not([class]) tr:nth-child(even) {
  background-color: var(--tim-green-050);
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:nth-child(even) {
  background-color: rgba(76, 196, 126, 0.06);
}

/* ---- Blockquotes (pointer callouts) - translucent tint, readable both modes */
.md-typeset blockquote {
  border-left: 4px solid var(--tim-green);
  background: rgba(46, 158, 91, 0.06);
  border-radius: 0 8px 8px 0;
  padding: 0.6rem 1rem;
  color: var(--md-default-fg-color);
}
[data-md-color-scheme="slate"] .md-typeset blockquote {
  background: rgba(76, 196, 126, 0.08);
}

/* ---- Admonitions: readable titles in BOTH light and dark -----------------
   The previous version set a pale-green title background with no text color,
   so in dark mode the (light) title text was invisible. Fix: use a translucent
   green tint that adapts to the surface, and force the title text to the theme's
   default foreground so it's always legible. Icons keep their own color. */

.md-typeset .admonition.note,
.md-typeset .admonition.tip,
.md-typeset .admonition.success,
.md-typeset .admonition.example,
.md-typeset details.note,
.md-typeset details.tip,
.md-typeset details.example {
  border-color: var(--tim-green);
}

/* Title bar: translucent green (works on white AND dark surfaces) + readable text */
.md-typeset .note > .admonition-title,
.md-typeset .tip > .admonition-title,
.md-typeset .success > .admonition-title,
.md-typeset .example > .admonition-title,
.md-typeset details.note > summary,
.md-typeset details.tip > summary,
.md-typeset details.example > summary {
  background-color: rgba(46, 158, 91, 0.12);
  color: var(--md-default-fg-color);
}

/* The icon square before the title keeps the brand green */
.md-typeset .note > .admonition-title::before,
.md-typeset .tip > .admonition-title::before,
.md-typeset .success > .admonition-title::before,
.md-typeset .example > .admonition-title::before,
.md-typeset details.note > summary::before,
.md-typeset details.tip > summary::before,
.md-typeset details.example > summary::before {
  background-color: var(--tim-green);
}

/* Body of the callout: faint tint so the box reads as one unit */
.md-typeset .note,
.md-typeset .tip,
.md-typeset .success,
.md-typeset .example {
  background-color: rgba(46, 158, 91, 0.04);
}
[data-md-color-scheme="slate"] .md-typeset .note,
[data-md-color-scheme="slate"] .md-typeset .tip,
[data-md-color-scheme="slate"] .md-typeset .success,
[data-md-color-scheme="slate"] .md-typeset .example {
  background-color: rgba(76, 196, 126, 0.05);
}

/* ---- Search accent + focus ring ------------------------------------------ */
.md-search__input:focus,
.md-search__input:hover {
  background-color: rgba(255, 255, 255, 0.28);
}

/* ---- Tables of contents: green active marker ------------------------------ */
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--tim-green-dark);
}

/* ---- Footer: subtle green top border -------------------------------------- */
.md-footer-meta {
  border-top: 3px solid var(--tim-green);
}

/* ---- "Copy" button + buttons pick up the accent --------------------------- */
.md-clipboard:hover {
  color: var(--tim-green-light);
}


/* ==========================================================================
   Enhancement pack - hover effects, polish, and micro-interactions
   ========================================================================== */

/* ---- (2) Smooth scroll + headings clear the sticky header ----------------- */
html {
  scroll-behavior: smooth;
}
.md-typeset :is(h1, h2, h3, h4):target,
.md-typeset :is(h1, h2, h3, h4) {
  scroll-margin-top: 4rem;
}

/* ---- (3) Custom green-tinted scrollbar ------------------------------------ */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--tim-green) transparent;
}
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-thumb {
  background: var(--tim-green);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--tim-green-dark);
  background-clip: content-box;
}

/* ---- (1) Landing-page card hover lift + green glow ------------------------ */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  border-top: 3px solid transparent;
}
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-4px);
  border-top-color: var(--tim-green);
  box-shadow: 0 10px 28px rgba(46, 158, 91, 0.20);
}

/* ---- (4) Animated left-to-right underline on body links ------------------- */
.md-typeset a:not(.md-button):not(.md-tag):not(.headerlink) {
  background-image: linear-gradient(var(--tim-green-light), var(--tim-green-light));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 180ms ease;
  text-decoration: none;
}
.md-typeset a:not(.md-button):not(.md-tag):not(.headerlink):hover {
  background-size: 100% 2px;
  text-decoration: none;
}

/* ---- (5) Table row hover highlight ---------------------------------------- */
.md-typeset table:not([class]) tbody tr,
.md-typeset table:not([class]) tbody tr {
  transition: background-color 120ms ease;
}
.md-typeset table:not([class]) tbody tr:hover {
  background-color: rgba(46, 158, 91, 0.14);
}

/* ---- (6) Code block language chip ----------------------------------------
   Requires pymdownx.highlight `pygments_lang_class: true` (already set), which
   adds a `.language-xxx` class to the <code>. Show it as a small corner label. */
.md-typeset .highlight {
  position: relative;
}
.md-typeset .highlight > .filename {
  border-radius: 8px 8px 0 0;
}
/* The language class sits on the SAME wrapper as .highlight
   (e.g. <div class="language-python highlight">), so target that div directly. */
.md-typeset div.language-python::before {
  content: "python";
  position: absolute;
  top: 0.3rem;
  right: 2.2rem;                 /* clear the copy button */
  z-index: 1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tim-green);
  opacity: 0.75;
  pointer-events: none;
}

/* ---- (8) Heading anchor "#" fades in green on hover ----------------------- */
.md-typeset .headerlink {
  color: transparent;
  transition: color 140ms ease;
}
.md-typeset :hover > .headerlink {
  color: var(--tim-green);
}
.md-typeset .headerlink:hover {
  color: var(--tim-green-dark);
}

/* ---- (9) Keyboard keys look like 3D keycaps ------------------------------- */
.md-typeset kbd,
.md-typeset .keys kbd {
  background: linear-gradient(180deg, #fbfbfb, #e9e9e9);
  color: #333;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 0 #bbb, 0 3px 3px rgba(0, 0, 0, 0.15);
  padding: 0.05rem 0.5rem;
  font-weight: 600;
}
[data-md-color-scheme="slate"] .md-typeset kbd,
[data-md-color-scheme="slate"] .md-typeset .keys kbd {
  background: linear-gradient(180deg, #4a4a52, #34343b);
  color: #eee;
  border-color: #222;
  box-shadow: 0 2px 0 #222, 0 3px 3px rgba(0, 0, 0, 0.4);
}

/* ---- (11) Copy-button success pulse --------------------------------------- */
.md-clipboard {
  transition: color 140ms ease, transform 140ms ease;
}
@keyframes tim-copy-pulse {
  0%   { transform: scale(1); color: var(--tim-green); }
  40%  { transform: scale(1.35); color: var(--tim-green-light); }
  100% { transform: scale(1); }
}
.md-clipboard--active {
  animation: tim-copy-pulse 420ms ease;
}

/* ---- (12) Landing hero: soft green gradient backdrop ----------------------
   Applied only where nav+toc are hidden (the landing page uses that front-matter). */
.md-content:has(article > h1:first-child) .md-typeset > h1:first-of-type {
  background: linear-gradient(120deg, var(--tim-green-dark), var(--tim-green) 60%, var(--tim-green-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.1em;
}
/* subtle radial wash behind the top of the landing page */
body[class] .md-main__inner {
  position: relative;
}

/* ---- (10) Section number badge feel (subtle) ------------------------------
   Keeps the emoji numbering but gives h2 a small green tick accent. */
.md-typeset h2::before {
  content: "";
  display: inline-block;
  width: 0.28rem;
  height: 1.05em;
  margin-right: 0.5rem;
  vertical-align: -0.15em;
  background: var(--tim-green);
  border-radius: 3px;
}


/* ---- (7) Q&A difficulty / company tag pills ------------------------------
   The tag classes (tim-tag, tim-tag--easy, ...) are added by assets/extra.js,
   which scans QA-Bank inline-code tokens (Easy/Med/Hard + company names). */
.md-typeset code.tim-tag {
  border-radius: 999px;
  padding: 0.05rem 0.6rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  background: rgba(46, 158, 91, 0.12);
  color: var(--tim-green-dark);
}
[data-md-color-scheme="slate"] .md-typeset code.tim-tag {
  color: var(--tim-green-light);
}
.md-typeset code.tim-tag--easy {
  background: rgba(46, 158, 91, 0.15);
  color: #1f7d45;
  border-color: rgba(46, 158, 91, 0.4);
}
.md-typeset code.tim-tag--med {
  background: rgba(214, 158, 46, 0.15);
  color: #a86b00;
  border-color: rgba(214, 158, 46, 0.4);
}
.md-typeset code.tim-tag--hard {
  background: rgba(214, 69, 69, 0.15);
  color: #b23636;
  border-color: rgba(214, 69, 69, 0.4);
}
[data-md-color-scheme="slate"] .md-typeset code.tim-tag--easy { color: #6fd79a; }
[data-md-color-scheme="slate"] .md-typeset code.tim-tag--med  { color: #e8c06a; }
[data-md-color-scheme="slate"] .md-typeset code.tim-tag--hard { color: #f08a8a; }
.md-typeset code.tim-tag--company {
  background: rgba(80, 120, 200, 0.13);
  color: #3a5ca8;
  border-color: rgba(80, 120, 200, 0.35);
}
[data-md-color-scheme="slate"] .md-typeset code.tim-tag--company { color: #90b0ee; }

/* ---- (13) Fade-in on scroll - CSS half (JS toggles .tim-in) --------------- */
.tim-fade {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms ease, transform 480ms ease;
}
.tim-fade.tim-in {
  opacity: 1;
  transform: none;
}
/* Respect reduced-motion + never hide content if JS is disabled */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tim-fade { opacity: 1; transform: none; transition: none; }
}


/* ---- Line-number gutter (linenums) - clean, dim, non-selectable ----------
   Material renders linenums as a two-column table: `.linenos` gutter + code.
   Give the gutter a subtle divider, readable-but-dim numbers, right alignment,
   comfortable padding, and make it unselectable so copying skips the numbers. */
.md-typeset .highlighttable .linenos,
.md-typeset .highlighttable .linenodiv {
  width: 2.6rem;              /* just enough for 2-3 digit line numbers */
  padding: 0 0.6rem 0 0.3rem;
  border-right: 1px solid var(--md-default-fg-color--lightest);
  background: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.md-typeset .highlighttable .linenodiv pre {
  text-align: right;
  border: 0;
  box-shadow: none;
  background: transparent;
  margin: 0;
}
/* Numbers are <a> links inside .normal - dim them, drop underline/link styling */
.md-typeset .highlighttable .linenos a,
.md-typeset .highlighttable .linenos .normal {
  color: var(--md-default-fg-color--lighter);
  opacity: 0.6;
  background: none;
  background-image: none;
  text-decoration: none;
}

/* the whole table shares the code block's frame - avoid a double border */
.md-typeset .highlighttable {
  border-radius: 10px;
  overflow: hidden;
}
.md-typeset .highlighttable .linenos pre,
.md-typeset .highlighttable .code pre {
  border: 0;
  box-shadow: none;
  border-radius: 0;
}
/* the language chip must not overlap the line numbers - anchor it to the code cell */
.md-typeset .highlighttable .code {
  position: relative;
}


/* ---- .py source modal viewer --------------------------------------------- */
dialog.tim-code-modal[open] {
  /* Force a proper centered top-layer overlay (Material/global CSS can clobber
     the UA defaults, which made the dialog render inline at page bottom). */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(1100px, 94vw);
  max-height: 86vh;
  height: fit-content;
  padding: 0;
  border: 1px solid var(--tim-green);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  overflow: hidden;              /* the inner <pre> scrolls, not the dialog */
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  z-index: 2000;
}
dialog.tim-code-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.tim-code-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.55rem 0.85rem;
  background: linear-gradient(90deg, var(--tim-green-dark), var(--tim-green));
  color: #fff;
}
.tim-code-modal__file {
  font-family: var(--md-code-font-family, monospace);
  font-weight: 700;
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tim-code-modal__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
}
.tim-code-modal__raw {
  color: #fff;
  opacity: 0.9;
  font-size: 0.72rem;
  text-decoration: underline;
}
.tim-code-modal__raw:hover { opacity: 1; }
.tim-code-modal__copy,
.tim-code-modal__close {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-radius: 6px;
  padding: 0.12rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.tim-code-modal__copy:hover,
.tim-code-modal__close:hover {
  background: rgba(255, 255, 255, 0.25);
}
.tim-code-modal__body {
  margin: 0;
  max-height: calc(86vh - 3rem);
  overflow: auto;                /* horizontal + vertical scroll stays inside */
  border-radius: 0;
  border: 0;
  box-shadow: none;
}
.tim-code-modal__body code {
  display: block;
  padding: 1rem 1.1rem;
  font-size: 0.78rem;
  line-height: 1.55;
  white-space: pre;              /* keep long lines; scroll instead of wrap */
}
/* Before hljs runs (or if it fails), match the site's dark code surface */
.tim-code-modal__body code:not(.hljs) {
  background: #282c34;           /* atom-one-dark bg, so pre-highlight looks consistent */
  color: #abb2bf;
}
/* Let the hljs theme own colors/background once applied */
.tim-code-modal__body code.hljs {
  padding: 1rem 1.1rem;
}


/* ---- Interactive task-list checkboxes (progress tracking) ----------------
   JS (interactiveCheckboxes) re-enables these and persists state to
   localStorage. Give them a clickable cursor and dim completed items. */
.md-typeset .task-list-item,
.md-typeset .task-list-item input[type="checkbox"] {
  cursor: pointer;
}
/* subtle hover wash on the whole clickable item */
.md-typeset .task-list-item:hover {
  background: rgba(46, 158, 91, 0.06);
  border-radius: 6px;
}
/* Hover feedback on the custom checkbox control */
.md-typeset .task-list-control {
  transition: transform 120ms ease;
}
.md-typeset .task-list-item:hover .task-list-control .task-list-indicator::before {
  background-color: var(--tim-green);
  opacity: 0.35;
}
.md-typeset .task-list-item:hover .task-list-control {
  transform: scale(1.15);
}
/* Completed items: dim only - no strikethrough */
.md-typeset .task-list-item.tim-task-done {
  opacity: 0.55;
  transition: opacity 150ms ease;
}



/* ==========================================================================
   Mobile responsiveness pack
   Material for MkDocs is responsive by default (hamburger nav, stacked layout).
   These rules fix the issues specific to THIS content: code- and table-heavy
   pages that can overflow the viewport, and type/spacing tuned for phones.
   Breakpoint 44.9375em (~719px) = Material's phone/tablet threshold.
   ========================================================================== */

@media screen and (max-width: 44.9375em) {

  /* ---- Base type: slightly smaller + tighter rhythm on phones ------------- */
  :root {
    --md-typeset-font-size: 0.78rem;
  }
  .md-typeset {
    line-height: 1.62;
  }

  /* ---- Content: full width but keep comfortable edge gutters -------------- */
  .md-content__inner {
    max-width: 100%;
    padding-inline: 0.9rem;      /* breathing room on both edges */
  }
  /* Material pulls the article in with its own margin; make sure the whole
     content column has a consistent gutter and never hugs the screen edge. */
  .md-content {
    padding-inline: 0;
  }

  /* Code blocks / highlight wrappers use negative margins to go edge-to-edge,
     which on a phone makes code touch the screen edge. Neutralize that so code
     lines up with the text gutter, keep rounded corners, and let the <pre>
     itself scroll horizontally for long lines. */
  .md-typeset .highlight,
  .md-typeset .highlighttable,
  .md-typeset pre {
    margin-inline: 0;
  }

  /* ---- Long headings must wrap, not overflow ------------------------------ */
  .md-typeset h1 {
    font-size: 1.55rem;
    line-height: 1.2;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }
  .md-typeset h2 {
    font-size: 1.2rem;
    overflow-wrap: break-word;
  }
  .md-typeset h3 {
    font-size: 1rem;
    overflow-wrap: break-word;
  }
  /* the H2 green tick badge eats horizontal room on tiny screens - shrink it */
  .md-typeset h2::before {
    width: 0.2rem;
    margin-right: 0.35rem;
  }

  /* ---- Tables: let them scroll horizontally instead of breaking layout -----
     Our desktop rule puts border-radius + overflow:hidden on the <table>,
     which clips content and fights Material's horizontal scroll wrapper on
     narrow screens. On phones, drop the clip, allow a sensible min-width so
     columns stay readable, and let Material's .md-typeset__scrollwrap scroll. */
  .md-typeset table:not([class]) {
    overflow: visible;           /* don't clip; the wrapper scrolls */
    border-radius: 8px;
    font-size: 0.72rem;          /* fit more columns before scrolling */
  }
  .md-typeset table:not([class]) th,
  .md-typeset table:not([class]) td {
    padding: 0.4rem 0.5rem;      /* tighter cells */
    min-width: 4.5rem;           /* keep columns tappable/legible when scrolling */
  }
  /* Material's scroll wrapper uses negative side margins to bleed to the edge;
     neutralize so tables align with the text gutter and scroll within it. */
  .md-typeset__scrollwrap {
    margin-inline: 0;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Code blocks: smaller font, keep horizontal scroll contained -------- */
  .md-typeset pre > code {
    font-size: 0.7rem;
    line-height: 1.5;
    padding-inline: 0.8rem;      /* inner gutter so code isn't flush to the border */
  }
  .md-typeset :not(pre) > code {
    font-size: 0.82em;           /* inline code relative to its text */
    overflow-wrap: break-word;   /* long inline tokens wrap instead of pushing width */
    word-break: break-word;
  }
  /* line-number gutter is wasted space on phones - keep it narrow */
  .md-typeset .highlighttable .linenos,
  .md-typeset .highlighttable .linenodiv {
    width: 2rem;
    padding: 0 0.4rem 0 0.2rem;
  }

  /* ---- Landing-page cards + buttons: full width, comfortable tap targets --- */
  .md-typeset .grid.cards > ul > li,
  .md-typeset .grid > .card {
    margin-inline: 0;
  }
  .md-typeset .md-button {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0.4rem 0;
    padding-block: 0.6rem;       /* >=44px tall tap target */
  }

  /* ---- Blockquote / admonition padding trimmed for narrow width ----------- */
  .md-typeset blockquote {
    padding: 0.5rem 0.7rem;
  }
  .md-typeset .admonition,
  .md-typeset details {
    font-size: 0.76rem;
  }

  /* ---- Mermaid diagrams: scroll horizontally rather than shrink to mush ---- */
  .md-typeset .mermaid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- Breadcrumbs (navigation.path): allow wrap, don't force overflow ---- */
  .md-nav__title,
  .md-path__list {
    flex-wrap: wrap;
  }

  /* ---- Guard: nothing should push the page wider than the viewport -------- */
  .md-typeset img,
  .md-typeset svg {
    max-width: 100%;
    height: auto;
  }
}

/* Prevent accidental horizontal page scroll on any small screen. The body
   should never scroll sideways - only designated containers (code, tables,
   diagrams) do. Applied below the desktop sidebar breakpoint. */
@media screen and (max-width: 76.1875em) {
  html,
  body {
    overflow-x: hidden;
  }
}