/* =============================================================================
   ENGINEERING GLOSSARY SKIN
   -----------------------------------------------------------------------------
   Applied to every Engineering Implementations page (landing, category pages,
   detail pages). `_layouts/default.html` adds `eng-glossary` to <body> and
   `_includes/head.html` loads this file, both gated on the same condition.

   Look: a hardware-datasheet / terminal feel inspired by Modal's GPU Glossary
   palette — near-black green canvas, a faint 1px blueprint grid, phosphor
   lime accent, hairline-bordered square panels and monospace labels.

     canvas   #0d180a     panel    #121f0f     panel-2  #1d2a19
     lime     #7fee64     lime-dim #569846     edge     #2d4327
     text     #d1d1d1     soft     #bababa     faint    #8b8b8b
     pale     #c8f9b6

   This file only re-tints the typesafe theme: it remaps the --ts-* variables
   and adds texture. It is scoped three classes deep
   (body.theme-typesafe.eng-glossary) so it outranks typesafe.css without
   !important.
   ========================================================================== */

body.theme-typesafe.eng-glossary {
  --eg-canvas: #0d180a;
  --eg-panel: #121f0f;
  --eg-panel-2: #1d2a19;
  --eg-lime: #7fee64;
  --eg-lime-dim: #569846;
  --eg-lime-wash: rgba(127, 238, 100, 0.06);
  --eg-edge: #2d4327;
  --eg-edge-strong: #416e36;
  --eg-pale: #c8f9b6;
  --eg-grid: rgba(255, 255, 255, 0.045);

  --ts-bg: var(--eg-canvas);
  --ts-surface: var(--eg-panel);
  --ts-surface-2: var(--eg-panel-2);
  --ts-fg: #e8e8e8;
  --ts-fg-soft: #d1d1d1;
  --ts-fg-faint: #8b8b8b;
  --ts-line: var(--eg-edge);
  --ts-accent: var(--eg-lime);
  --ts-rule: 1px;

  --ts-term: "Fira Mono", "JetBrains Mono", ui-monospace, Consolas,
    "Courier New", monospace;

  background-color: var(--eg-canvas);
  /* Blueprint grid: two 1px line gradients tiled at 32px. Fixed so the grid
     reads as the page surface rather than scrolling with the content. */
  background-image: linear-gradient(90deg, var(--eg-grid) 1px, transparent 1px),
    linear-gradient(var(--eg-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  background-attachment: fixed;
}

body.theme-typesafe.eng-glossary ::selection {
  background: var(--eg-lime);
  color: var(--eg-canvas);
}

/* -----------------------------------------------------------------------------
   Nav: same canvas, lime marker for the active section
   -------------------------------------------------------------------------- */

body.theme-typesafe.eng-glossary .topnav {
  background: rgba(13, 24, 10, 0.92);
  backdrop-filter: blur(6px);
}

body.theme-typesafe.eng-glossary.dark-mode .topnav-link.active {
  background: transparent;
  color: var(--eg-lime);
  box-shadow: inset 0 -2px 0 var(--eg-lime);
}

body.theme-typesafe.eng-glossary.dark-mode .topnav-link:hover {
  background: var(--eg-lime-wash);
  color: var(--eg-pale);
}

/* -----------------------------------------------------------------------------
   Headings: mono display with a lime prompt glyph on section titles
   -------------------------------------------------------------------------- */

body.theme-typesafe.eng-glossary .section-title,
body.theme-typesafe.eng-glossary .lab-paper-detail-title {
  font-family: var(--ts-term);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ts-fg);
  -webkit-text-stroke: 0;
}

body.theme-typesafe.eng-glossary .lab-section-heading::before,
body.theme-typesafe.eng-glossary .post-content h2::before {
  content: "> ";
  color: var(--eg-lime);
}

body.theme-typesafe.eng-glossary .post-content h2,
body.theme-typesafe.eng-glossary .post-content h3,
body.theme-typesafe.eng-glossary .post-content h4 {
  font-family: var(--ts-term);
  font-weight: 500;
  color: var(--ts-fg);
}

body.theme-typesafe.eng-glossary .post-content h2 {
  border-bottom: 1px solid var(--eg-edge);
  padding-bottom: 0.4rem;
}

body.theme-typesafe.eng-glossary .post-content h3 {
  color: var(--eg-pale);
}

body.theme-typesafe.eng-glossary .post-content a {
  color: var(--eg-lime);
  text-decoration-color: var(--eg-lime-dim);
}

body.theme-typesafe.eng-glossary .post-content a:hover {
  color: var(--eg-pale);
}

body.theme-typesafe.eng-glossary .post-content strong {
  color: var(--ts-fg);
}

/* -----------------------------------------------------------------------------
   Panels: hairline edge, lime corner tick, lime edge on hover
   -------------------------------------------------------------------------- */

body.theme-typesafe.eng-glossary .lab-card,
body.theme-typesafe.eng-glossary .eng-domain-card,
body.theme-typesafe.eng-glossary .lab-coming-soon {
  position: relative;
  background: rgba(18, 31, 15, 0.88);
}

/* Small L-shaped tick in the top-left corner, like a datasheet callout. */
body.theme-typesafe.eng-glossary .lab-card::before,
body.theme-typesafe.eng-glossary .eng-domain-card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--eg-lime);
  border-left: 2px solid var(--eg-lime);
  pointer-events: none;
}

body.theme-typesafe.eng-glossary .lab-card:hover,
body.theme-typesafe.eng-glossary .eng-domain-card:hover {
  background: var(--eg-panel-2);
  border-color: var(--eg-lime);
}

body.theme-typesafe.eng-glossary .eng-domain-title,
body.theme-typesafe.eng-glossary .lab-card-title {
  font-family: var(--ts-term);
  color: var(--ts-fg);
}

body.theme-typesafe.eng-glossary .eng-domain-card:hover .eng-domain-title,
body.theme-typesafe.eng-glossary .lab-card:hover .lab-card-title {
  color: var(--eg-lime);
}

body.theme-typesafe.eng-glossary .eng-domain-count,
body.theme-typesafe.eng-glossary .eng-domain-arrow {
  color: var(--eg-lime);
}

body.theme-typesafe.eng-glossary .eng-domain-keywords {
  color: var(--eg-lime-dim);
  font-family: var(--ts-term);
  font-size: 0.72rem;
}

body.theme-typesafe.eng-glossary .eng-stat {
  border: 1px solid var(--eg-edge);
  background: var(--eg-panel);
  color: var(--ts-fg-soft);
}

body.theme-typesafe.eng-glossary .eng-stat strong {
  color: var(--eg-lime);
}

body.theme-typesafe.eng-glossary .lab-paper-placeholder {
  background: repeating-linear-gradient(
      135deg,
      transparent 0 6px,
      var(--eg-lime-wash) 6px 7px
    ),
    var(--eg-panel-2);
  color: var(--eg-lime-dim);
}

/* -----------------------------------------------------------------------------
   Tags, filters, pagination
   -------------------------------------------------------------------------- */

body.theme-typesafe.eng-glossary .lab-tag-pill {
  border-color: var(--eg-edge-strong);
  color: var(--eg-pale);
  background: var(--eg-lime-wash);
}

body.theme-typesafe.eng-glossary .eng-filter-pill:hover,
body.theme-typesafe.eng-glossary .lab-page-btn:hover {
  border-color: var(--eg-lime-dim);
  background: var(--eg-lime-wash);
}

body.theme-typesafe.eng-glossary .eng-filter-pill.active,
body.theme-typesafe.eng-glossary .lab-page-btn.active {
  color: var(--eg-canvas);
}

/* -----------------------------------------------------------------------------
   Detail-page body: code, tables, quotes, images, diagrams
   -------------------------------------------------------------------------- */

body.theme-typesafe.eng-glossary .post-content pre,
body.theme-typesafe.eng-glossary .post-content .highlight pre {
  background: #081005;
  border-color: var(--eg-edge);
  border-left: 2px solid var(--eg-lime);
}

body.theme-typesafe.eng-glossary .post-content :not(pre) > code {
  background: var(--eg-lime-wash);
  border-color: var(--eg-edge);
  color: var(--eg-pale);
}

/* Rouge tokens retuned toward the green scale. */
body.theme-typesafe.eng-glossary .post-content .highlight .c,
body.theme-typesafe.eng-glossary .post-content .highlight .c1,
body.theme-typesafe.eng-glossary .post-content .highlight .cm {
  color: #677d64;
}
body.theme-typesafe.eng-glossary .post-content .highlight .k,
body.theme-typesafe.eng-glossary .post-content .highlight .kd,
body.theme-typesafe.eng-glossary .post-content .highlight .kt,
body.theme-typesafe.eng-glossary .post-content .highlight .kr {
  color: #7fee64;
}
body.theme-typesafe.eng-glossary .post-content .highlight .s,
body.theme-typesafe.eng-glossary .post-content .highlight .s1,
body.theme-typesafe.eng-glossary .post-content .highlight .s2 {
  color: #c8f9b6;
}
body.theme-typesafe.eng-glossary .post-content .highlight .m,
body.theme-typesafe.eng-glossary .post-content .highlight .mi,
body.theme-typesafe.eng-glossary .post-content .highlight .mf {
  color: #fba922;
}
body.theme-typesafe.eng-glossary .post-content .highlight .nf {
  color: #75d95c;
}

body.theme-typesafe.eng-glossary .post-content table {
  border-color: var(--eg-edge);
}

body.theme-typesafe.eng-glossary .post-content th {
  background: var(--eg-panel-2);
  color: var(--eg-lime);
  font-family: var(--ts-term);
  border-color: var(--eg-edge);
}

body.theme-typesafe.eng-glossary .post-content td {
  border-color: var(--eg-edge);
}

body.theme-typesafe.eng-glossary .post-content tr:nth-child(even) td {
  background: rgba(127, 238, 100, 0.025);
}

body.theme-typesafe.eng-glossary .post-content blockquote {
  border-left: 2px solid var(--eg-lime);
  background: var(--eg-lime-wash);
  color: var(--ts-fg-soft);
}

body.theme-typesafe.eng-glossary .post-content li::marker {
  color: var(--eg-lime);
}

body.theme-typesafe.eng-glossary .post-content hr {
  border: 0;
  border-top: 1px dashed var(--eg-edge-strong);
}

body.theme-typesafe.eng-glossary .post-content img {
  border: 1px solid var(--eg-edge);
}

body.theme-typesafe.eng-glossary .mermaid-diagram {
  background: var(--eg-panel);
  border: 1px solid var(--eg-edge);
}

/* Square off the few elements that inherit rounded pills from style.css. */
body.theme-typesafe.eng-glossary .topnav-link,
body.theme-typesafe.eng-glossary .eng-stat {
  border-radius: 0;
}