/* Factoryal's look, as in the web UI (web/src/index.css): a dark technical drawing.
   Near-black paper, hairline zinc frames, square corners, monospace labels, a faint dot
   grid, and the logo's orange as the one accent. */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400..700&display=swap");

:root {
  --fy-orange: #ff5800;
  --fy-orange-light: #ff7a33;
  --fy-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --md-primary-fg-color: var(--fy-orange);
  --md-primary-fg-color--light: var(--fy-orange-light);
  --md-primary-fg-color--dark: #e04a00;
  --md-accent-fg-color: var(--fy-orange-light);
  --md-typeset-a-color: #e04a00;
}

[data-md-color-scheme="slate"] {
  --md-hue: 240;
  --md-default-bg-color: #08080a;
  --md-default-fg-color: #e4e4e7;          /* zinc-200 */
  --md-default-fg-color--light: #a1a1aa;   /* zinc-400 */
  --md-default-fg-color--lighter: #71717a; /* zinc-500 */
  --md-default-fg-color--lightest: #27272a;
  --md-typeset-color: #d4d4d8;             /* zinc-300 */
  --md-typeset-a-color: var(--fy-orange-light);
  --md-code-bg-color: #111114;
  --md-code-fg-color: #e4e4e7;
  --md-footer-bg-color: #08080a;
  --md-footer-bg-color--dark: #08080a;
  --fy-line: #27272a;                      /* zinc-800 hairlines */
  --fy-line-strong: #52525b;               /* zinc-600, on hover */
  --fy-active: var(--fy-orange-light);
  --fy-dots: rgb(255 255 255 / 0.05);
  --fy-code-inline: rgb(255 255 255 / 0.06);
  --fy-row-hover: rgb(255 255 255 / 0.025);
}
/* Light: the orange darkens so links and the active page still read on white (4.5:1). */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #b93c03;           /* accent-700 */
  --md-accent-fg-color: #e04a00;
  --md-code-bg-color: #f6f6f7;
  --fy-line: #e4e4e7;
  --fy-line-strong: #a1a1aa;
  --fy-active: #b93c03;
  --fy-dots: rgb(0 0 0 / 0.06);
  --fy-code-inline: rgb(0 0 0 / 0.05);
  --fy-row-hover: rgb(0 0 0 / 0.02);
}

/* Square everything. */
.md-typeset pre > code, .md-typeset code, .md-typeset .admonition, .md-typeset details,
.md-typeset table:not([class]), .md-search__form, .md-search__output, .md-clipboard, .md-code__nav, .md-code__button,
.md-typeset kbd, .md-select__inner, .md-typeset .md-input { border-radius: 0 !important; }

/* --- header and tabs: the paper colour with a hairline, not a coloured bar ------------- */
.md-header, .md-tabs {
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}
.md-header, .md-header--shadow { box-shadow: 0 1px 0 var(--fy-line); }
.md-tabs { border-bottom: 1px solid var(--fy-line); }
.md-header__topic { font-family: var(--fy-display); font-weight: 600; letter-spacing: -0.01em; }
.md-header__button.md-logo svg { height: 1.6rem; width: auto; }

/* Search: a hairline field. Its placeholder and icon default to the primary *background*
   colour (white), which vanishes on the light header, so they follow the text instead. */
.md-search__form { background: transparent; border: 1px solid var(--fy-line); transition: border-color .15s; }
.md-search__form:hover { background: transparent; border-color: var(--fy-line-strong); }
.md-header .md-search__input::placeholder,
.md-header .md-search__input + .md-search__icon { color: var(--md-default-fg-color--lighter); }
.md-header .md-search__input { color: var(--md-default-fg-color); }

/* Monospace uppercase labels, like the UI's [captions]. */
.md-tabs__link, .md-nav__title, .md-nav--secondary .md-nav__title,
.md-nav__item--section > .md-nav__link {
  font-family: var(--md-code-font-family);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.6rem;
}
.md-tabs__link { opacity: 1; color: var(--md-default-fg-color--lighter); transition: color .15s; }
.md-tabs__link:hover { color: var(--md-default-fg-color); }
/* The active tab gets the UI's 2px accent underline. */
.md-tabs__item--active { box-shadow: inset 0 -2px 0 var(--fy-orange); }
.md-tabs__item--active .md-tabs__link { color: var(--md-default-fg-color); }

/* --- navigation: the current page is marked like the UI rail, a short accent bar ------- */
.md-nav__link { transition: color .15s; }
.md-nav__link--active { color: var(--fy-active) !important; font-weight: 500; }
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav__link--active,
  .md-sidebar--secondary .md-nav__link--active { position: relative; }
  .md-sidebar--primary .md-nav__link--active::before,
  .md-sidebar--secondary .md-nav__link--active::before {
    content: "";
    position: absolute; left: -0.6rem; top: 0.15em; bottom: 0.15em;
    width: 2px; background: var(--fy-orange);
  }
}

/* --- page ------------------------------------------------------------------------------ */
/* The dot grid behind the page. */
.md-main {
  background-image: radial-gradient(circle, var(--fy-dots) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
.md-content__inner { background: var(--md-default-bg-color); padding: 0.8rem 1.2rem 1.6rem; }
@media screen and (min-width: 76.25em) {
  .md-content__inner { border-left: 1px solid var(--fy-line); border-right: 1px solid var(--fy-line); }
}

/* Type. */
.md-typeset { font-feature-settings: "kern", "liga"; }
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4 {
  font-family: var(--fy-display);
  color: var(--md-default-fg-color);
  letter-spacing: -0.015em;
}
.md-typeset h1 { font-weight: 600; margin-bottom: 1rem; }
.md-typeset h2 { font-weight: 600; border-top: 1px solid var(--fy-line); padding-top: 1.2rem; margin-top: 2.2rem; }
.md-typeset h3 { font-weight: 500; }
.md-typeset h4 { font-weight: 500; letter-spacing: -0.005em; }
.md-typeset .headerlink { color: var(--md-default-fg-color--lightest); }
.md-typeset .headerlink:hover, .md-typeset [id]:target .headerlink { color: var(--fy-active); }

/* Links: the accent, with an underline that arrives on hover. */
.md-typeset a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color .15s, text-decoration-color .15s;
}
.md-typeset a:hover { text-decoration-color: currentColor; }

/* Lists: the accent marks the bullets, quietly. */
.md-typeset ul li::marker { color: var(--md-default-fg-color--lighter); }
.md-typeset ol li::marker { color: var(--md-default-fg-color--lighter); font-family: var(--md-code-font-family); font-size: .9em; }

/* --- code ------------------------------------------------------------------------------ */
.md-typeset pre > code { border: 1px solid var(--fy-line); }
/* Inline code: a quiet tint rather than a framed box, so dense tables don't turn into grids. */
.md-typeset :not(pre) > code {
  background: var(--fy-code-inline);
  border: 0;
  padding: 0.05em 0.35em;
  color: var(--md-default-fg-color);
  word-break: normal;
  overflow-wrap: break-word;   /* long paths in prose still wrap rather than overflow */
}
.md-typeset a > code { color: inherit; }
/* The copy button: there when you need it, out of the way when you're reading. Material
   draws it in .md-code__nav (newer) or as .md-clipboard (older); both are covered. */
.md-typeset .md-code__nav { background: transparent; border-radius: 0; }
.md-typeset .md-code__button, .md-typeset .md-clipboard { color: var(--md-default-fg-color--lighter); }
.md-typeset .md-code__button:hover, .md-typeset .md-clipboard:hover { color: var(--fy-active); }
@media (hover: hover) {
  .md-typeset .md-code__nav, .md-typeset .md-clipboard { opacity: 0; transition: opacity .15s; }
  .md-typeset .highlight:hover :is(.md-code__nav, .md-clipboard),
  .md-typeset .md-code__nav:focus-within, .md-typeset .md-clipboard:focus-visible { opacity: 1; }
}

/* --- tables in hairline frames --------------------------------------------------------- */
.md-typeset table:not([class]) { border: 1px solid var(--fy-line); font-size: .72rem; }
.md-typeset table:not([class]) th {
  font-family: var(--md-code-font-family);
  text-transform: uppercase; letter-spacing: 0.1em; font-size: .6rem; font-weight: 500;
  color: var(--md-default-fg-color--lighter);
  background: transparent; border-bottom: 1px solid var(--fy-line);
}
.md-typeset table:not([class]) td { border-top: 1px solid var(--fy-line); vertical-align: top; }
.md-typeset table:not([class]) tbody tr { transition: background-color .15s; }
.md-typeset table:not([class]) tbody tr:hover { background: var(--fy-row-hover); box-shadow: none; }
/* A field or key in the first column never breaks mid-word (on_erro|r). */
.md-typeset table:not([class]) td:first-child > code { white-space: nowrap; }

/* --- footer ---------------------------------------------------------------------------- */
.md-footer { border-top: 1px solid var(--fy-line); }
.md-footer__title { font-family: var(--fy-display); }
.md-footer__direction {
  font-family: var(--md-code-font-family);
  text-transform: uppercase; letter-spacing: 0.12em; font-size: .55rem;
}
.md-footer-meta { border-top: 1px solid var(--fy-line); font-family: var(--md-code-font-family); font-size: .6rem; }

::selection { background: rgb(255 88 0 / 0.4); color: inherit; }
[data-md-color-scheme="slate"] ::selection { color: #fff; }