/* ==========================================================================
   Titanite Documentation — visual identity
   --------------------------------------------------------------------------
   The audience is people running Roblox communities, not developers, and they
   arrive here because something is not doing what they expected. Two decisions
   follow from that and everything else is in service of them:

   1. The palette comes from the Titanite crest — orange, indigo, signal red on
      graphite — rather than a generic docs accent, so the site is recognisably
      part of the network rather than a bolted-on manual.

   2. The "It's not working" section on every page is styled as the loudest
      thing on it. That inverts the usual documentation hierarchy, where the
      happy path is emphasised and troubleshooting is a footnote. It is
      deliberate: almost nobody reads a reference cover to cover, they scroll to
      the bit that matches their problem, and that bit should be impossible to
      miss.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&display=swap");

:root {
  /* Straight off the crest. Orange is the mark, indigo is its counterweight. */
  --tn-orange: #e07b23;
  --tn-orange-deep: #a4550f;   /* passes contrast as link text on paper */
  --tn-orange-lift: #f5a65c;   /* the dark-mode equivalent */
  --tn-indigo: #3a3f8f;
  --tn-indigo-lift: #8f95e8;
  --tn-signal: #b23a34;
  --tn-graphite: #15171b;
  --tn-paper: #faf8f5;

  --tn-display: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
}

/* ── Palette ──────────────────────────────────────────────────────────────
   Layered onto Material's own `default` and `slate` schemes rather than
   declared as new scheme names. slate alone sets 139 variables — code blocks,
   footer, admonition fills — and a scheme Material does not recognise inherits
   none of them, so a custom name renders dark mode with light chrome.

   The header is graphite in both schemes rather than the accent colour. A
   full-width band of saturated orange would be the loudest thing on every
   page, and that job is already taken.                                      */

[data-md-color-scheme="default"] {
  --md-primary-fg-color:        var(--tn-graphite);
  --md-primary-fg-color--light: #2a2e36;
  --md-primary-fg-color--dark:  #0d0f12;
  --md-primary-bg-color:        #f7f5f2;
  --md-primary-bg-color--light: #cfcbc4;

  --md-accent-fg-color:         var(--tn-orange-deep);
  --md-typeset-a-color:         var(--tn-orange-deep);

  --md-default-bg-color:        var(--tn-paper);
  --md-default-fg-color:        #1c1f24;
  --md-default-fg-color--light: #4a505a;
  --md-default-fg-color--lighter: #767d88;
  --md-code-bg-color:           #f0ece6;
  --md-code-fg-color:           #33383f;

  --tn-rule:    #e2ddd4;
  --tn-panel:   #ffffff;
  --tn-fault-bg: #fdf6ef;
  /* The crest orange sits at 2.82:1 on paper — under the 3:1 floor for a focus
     ring or a structural rule. Darkened just enough to clear it while staying
     the same hue. */
  --tn-edge:    #d77621;
  --tn-focus:   #a4550f;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #0d0f12;
  --md-primary-fg-color--light: #2a2e36;
  --md-primary-fg-color--dark:  #08090b;
  --md-primary-bg-color:        #f2efe9;

  --md-accent-fg-color:         var(--tn-orange-lift);
  --md-typeset-a-color:         var(--tn-orange-lift);

  --md-default-bg-color:        var(--tn-graphite);
  --md-default-fg-color:        #d9dbe0;
  --md-default-fg-color--light: #a4a9b3;
  --md-default-fg-color--lighter: #767d88;
  --md-code-bg-color:           #1e2127;
  --md-code-fg-color:           #d2d5db;

  --md-footer-bg-color:         #0d0f12;

  --tn-rule:    #2a2e36;
  --tn-panel:   #191c21;
  --tn-fault-bg: #1d1a17;
  /* On graphite the crest orange is already 6:1, so it is used unmodified. */
  --tn-edge:    #e07b23;
  --tn-focus:   #f5a65c;
}

/* ── Type ─────────────────────────────────────────────────────────────────
   Archivo for headings: a signage grotesque, slightly narrow, which reads as
   institutional without tipping into stencil-and-hazard-tape cosplay. Plex
   Sans underneath it for long-form reading; Plex Mono for anything you type.  */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--tn-display);
  letter-spacing: -0.018em;
  font-weight: 600;
}

.md-typeset h1 {
  font-weight: 700;
  font-size: 2.05rem;
  line-height: 1.15;
  color: var(--md-default-fg-color);
  margin-bottom: 0.4em;
}

.md-typeset h2 {
  font-size: 1.42rem;
  margin-top: 2.4em;
  padding-top: 0.9em;
  border-top: 1px solid var(--tn-rule);
}

.md-typeset h3 {
  font-size: 1.1rem;
  margin-top: 1.9em;
}

.md-nav__title,
.md-header__topic:first-child {
  font-family: var(--tn-display);
  font-weight: 600;
}

/* The site title should read as a mark, not as running text. */
.md-header__topic .md-ellipsis {
  letter-spacing: 0.02em;
}

/* ── Header ─────────────────────────────────────────────────────────────── */

.md-header {
  border-bottom: 1px solid rgba(224, 123, 35, 0.35);
  box-shadow: none;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.5rem;
  width: 1.5rem;
}

.md-tabs {
  border-bottom: 1px solid var(--tn-rule);
}

.md-tabs__link--active {
  /* An underline the colour of the mark, rather than a difference in opacity
     that is easy to miss on a dark bar. */
  box-shadow: inset 0 -2px 0 var(--tn-edge);
  opacity: 1;
}

/* ── Links and code ─────────────────────────────────────────────────────── */

.md-typeset a {
  text-decoration-color: rgba(224, 123, 35, 0.4);
  text-underline-offset: 0.16em;
}

.md-typeset a:hover {
  text-decoration-color: currentcolor;
}

.md-typeset code {
  border: 1px solid var(--tn-rule);
  border-radius: 4px;
  padding: 0.12em 0.38em;
  font-size: 0.86em;
}

.md-typeset pre > code {
  border: none;
}

.md-typeset .highlight {
  border: 1px solid var(--tn-rule);
  border-radius: 8px;
  overflow: hidden;
}

/* ── Tables ───────────────────────────────────────────────────────────────
   Most of this site's real content is tables — which command, which module,
   which setting. They should look authoritative rather than incidental.      */

.md-typeset table:not([class]) {
  border: 1px solid var(--tn-rule);
  border-radius: 8px;
  font-size: 0.76rem;
  box-shadow: none;
}

.md-typeset table:not([class]) th {
  background: var(--md-code-bg-color);
  font-family: var(--tn-display);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.md-typeset table:not([class]) td {
  border-top: 1px solid var(--tn-rule);
}

/* ── Home page cards ────────────────────────────────────────────────────── */

.md-typeset .grid.cards > ul > li {
  border: 1px solid var(--tn-rule);
  border-radius: 10px;
  background: var(--tn-panel);
  transition: border-color 120ms, transform 120ms;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--tn-edge);
  transform: translateY(-2px);
  box-shadow: none;
}

.md-typeset .grid.cards > ul > li > hr {
  border-color: var(--tn-rule);
}

/* ── The signature: "It's not working" ────────────────────────────────────
   Every page ends with one of these, and it is the section most readers came
   for. It is set as a panel, in the crest's orange, with each fault as a
   labelled row — so it is recognisable at a glance from anywhere on the page
   and cannot be mistaken for more prose.

   The `~ dl` selector is safe because this section is always last: nothing
   follows it that a definition list could belong to.                        */

.md-typeset h2#its-not-working {
  border-top: 2px solid var(--tn-edge);
  font-family: var(--tn-display);
  color: var(--md-default-fg-color);
}

.md-typeset h2#its-not-working::before {
  content: "When you are stuck";
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tn-orange-deep);
  margin-bottom: 0.55em;
}

[data-md-color-scheme="slate"] .md-typeset h2#its-not-working::before {
  color: var(--tn-orange-lift);
}

.md-typeset h2#its-not-working ~ dl {
  background: var(--tn-fault-bg);
  border: 1px solid var(--tn-rule);
  border-left: 3px solid var(--tn-edge);
  border-radius: 8px;
  padding: 1.1rem 1.25rem 0.35rem;
  margin-top: 1.2rem;
}

/* The symptom — usually the literal text the bot showed them. */
.md-typeset h2#its-not-working ~ dl dt {
  font-family: var(--tn-display);
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.4;
  margin-top: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--tn-rule);
}

.md-typeset h2#its-not-working ~ dl dt:first-child {
  border-top: none;
  padding-top: 0;
}

/* The fix. */
.md-typeset h2#its-not-working ~ dl dd {
  margin: 0.35rem 0 0.9rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.78rem;
}

/* ── Admonitions ────────────────────────────────────────────────────────── */

.md-typeset .admonition,
.md-typeset details {
  border-width: 1px;
  border-left-width: 3px;
  border-radius: 8px;
  box-shadow: none;
  font-size: 0.76rem;
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-color: var(--tn-indigo);
}

.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  background: rgba(58, 63, 143, 0.09);
}

.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  background-color: var(--tn-indigo);
}

[data-md-color-scheme="slate"] .md-typeset .note > .admonition-title::before,
[data-md-color-scheme="slate"] .md-typeset .note > summary::before {
  background-color: var(--tn-indigo-lift);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--tn-signal);
}

.md-typeset .warning > .admonition-title,
.md-typeset .warning > summary {
  background: rgba(178, 58, 52, 0.1);
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: var(--tn-signal);
}

/* ── Navigation ─────────────────────────────────────────────────────────── */

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--md-accent-fg-color);
}

.md-sidebar--secondary .md-nav__link--active {
  font-weight: 600;
}

/* ── Accessibility floor ────────────────────────────────────────────────── */

.md-typeset a:focus-visible,
.md-nav__link:focus-visible,
.md-header__button:focus-visible,
.md-tabs__link:focus-visible {
  outline: 2px solid var(--tn-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > ul > li,
  .md-typeset .grid.cards > ul > li:hover {
    transition: none;
    transform: none;
  }
}

/* ── Small screens ──────────────────────────────────────────────────────── */

@media screen and (max-width: 44.9375em) {
  .md-typeset h1 { font-size: 1.62rem; }
  .md-typeset h2 { font-size: 1.22rem; margin-top: 1.9em; }
  .md-typeset h2#its-not-working ~ dl { padding: 0.9rem 1rem 0.25rem; }
  /* Wide command tables must scroll in their own box, never the page. */
  .md-typeset table:not([class]) { display: block; overflow-x: auto; }
}