/*
 * forge.css - "Geeks Forge" site palette and content styles (dark only).
 *
 * How it is wired (2026-10-08):
 *   - Every section stylesheet (SQLKB/sqlkb.css, Electronics/elec.css, HomeAssistant/ha.css,
 *     Microcontrollers/micro.css, PowerShell/ps.css, Research/research.css) starts with
 *     @import url("../forge.css?v=forge3"); so every shell AND every article that links its section
 *     stylesheet gets this file automatically. New articles inherit it with no extra work.
 *   - Self-styled pages (own <style> palette, no section stylesheet) link ../forge.css after
 *     their own <style> and put a gf-doc-* class on <html> (see "Self-styled page families").
 *   - The banner/menu chrome lives at the end of /nav.css (shells only).
 *   - There is no light mode and no theme switch anywhere.
 *
 * Palette
 *   osmium      #0f1318  page background (deepest metal)
 *   ruthenium   #232b35  menu / panels (lighter step: #27303b..#1f262f)
 *   iridium     #2a323d  raised steel surfaces
 *   gunmetal    #1a2028  code blocks, cards, boxes
 *   blue steel  #4a5a6b  borders, table rules (#3a4552 lighter rules)
 *   polished    #c3ced9  menu link text, secondary text
 *   silver      #e8e4da  body text (warm silver)
 *   brass       #e3c27a  headings (light brass #f6e2a8 highlight)
 *   bronze      #a8743a  edges, rules (#5c4630 dark bronze seams)
 *   copper red  #b4553a  hot edge under the banner
 *   dark copper #5e2b1d -> #4a2217 -> #34170f -> #24100a  banner plate (oxblood copper)
 *   copper glint #d9733a orange sheen, warning accents
 *   molten      #ff8a2a  hover glow (forge fire); link hover #ffa25c
 *   tech teal   #2ec4b6  selected / focus glow; links #5fd4c8
 */
:root,
:root[data-theme] {
  color-scheme: dark;
  --f-osmium: #0f1318;
  --f-ruthenium: #232b35;
  --f-iridium: #2a323d;
  --f-gunmetal: #1a2028;
  --f-steel: #4a5a6b;
  --f-rule: #3a4552;
  --f-polished: #c3ced9;
  --f-silver: #e8e4da;
  --f-muted: #a9b4bf;
  --f-brass: #e3c27a;
  --f-brass-hi: #f6e2a8;
  --f-bronze: #a8743a;
  --f-bronze-dark: #5c4630;
  --f-copper: #b4553a;
  --f-copper-hi: #5e2b1d;
  --f-copper-mid: #4a2217;
  --f-oxblood: #34170f;
  --f-copper-lo: #24100a;
  --f-glint: #d9733a;
  --f-molten: #ff8a2a;
  --f-teal: #2ec4b6;
  --f-link: #5fd4c8;
  --f-link-hover: #ffa25c;
  --f-noise: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="180" height="180"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/%3E%3CfeColorMatrix values="0 0 0 0 0.75  0 0 0 0 0.8  0 0 0 0 0.86  0 0 0 0.05 0"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)"/%3E%3C/svg%3E');

  /* Shared variables used by the section stylesheets, shells and articles */
  --bg: var(--f-osmium);
  --text: var(--f-silver);
  --banner-bg: var(--f-oxblood);
  --banner-fg: var(--f-silver);
  --banner-border: var(--f-bronze);
  --menu-bg: var(--f-ruthenium);
  --menu-border: var(--f-bronze-dark);
  --menu-sec: var(--f-brass);
  --link: var(--f-link);
  --link-hover-bg: #2e3743;
  --link-active-bg: #233a3f;
  --note: #a3adb8;
  --code-bg: var(--f-gunmetal);
  --table-border: var(--f-rule);
  --th-bg: #1f262f;
  --blockquote-border: var(--f-bronze);
  --blockquote-fg: var(--f-polished);
  --meta: var(--f-muted);
  --h1-border: var(--f-bronze-dark);
  --iframe-bg: var(--f-osmium);
  --callout-note-bg: #15222a;
  --callout-note-border: var(--f-teal);
  --callout-warn-bg: #2a1a12;
  --callout-warn-border: var(--f-glint);
}

/* Fine grain noise over the dark metal (shells and articles) */
:root body {
  background-image: var(--f-noise);
  background-size: 180px 180px;
}

/* ---------------------------------------------------------------
 * Article content (pages with body.topic that use the shared vars)
 * --------------------------------------------------------------- */
:root body.topic { color: var(--text); }
:root body.topic h1,
:root body.topic h2 { color: var(--f-brass); }
:root body.topic h3,
:root body.topic h4 { color: #e9cf96; }
:root body.topic a { color: var(--f-link); text-underline-offset: 2px; }
:root body.topic a:hover { color: var(--f-link-hover); }
:root body.topic a:focus-visible { outline: 2px solid var(--f-teal); outline-offset: 2px; border-radius: 2px; }
:root body.topic code { background: var(--code-bg); border: 1px solid #2e3743; color: #f0dcae; }
:root body.topic pre { background: #141920; border: 1px solid #2e3743; border-left: 3px solid var(--f-bronze); color: var(--text); }
:root body.topic pre code { background: none; border: 0; color: inherit; }
:root body.topic th { background: var(--th-bg); color: var(--f-brass); }
:root body.topic td, :root body.topic th { border-color: var(--table-border); }
:root body.topic hr { border: 0; border-top: 1px solid var(--f-bronze-dark); }
:root body.topic ::selection { background: #7a3a1c; color: #fff; }
:root body.topic mark { background: #5a4012; color: #fff4d6; }
:root body.topic kbd { background: var(--f-iridium); border: 1px solid var(--f-steel); border-radius: 3px; color: var(--f-silver); padding: 0 4px; }

/* ---------------------------------------------------------------
 * Self-styled page families: these pages carry their own palette
 * variables; the class on <html> maps them onto the forge palette.
 * (Specificity :root.class beats their own :root / @media blocks.)
 * --------------------------------------------------------------- */
/* Long-form reports (Research deep dives, certificates, records; ESP32 guide) */
:root.gf-doc-report {
  --ink: var(--f-silver);
  --muted: var(--f-muted);
  --accent: var(--f-brass);
  --accent2: var(--f-link);
  --rule: var(--f-rule);
  --bg: var(--f-gunmetal);
  --page: var(--f-osmium);
  --th: #1f262f;
  --zebra: #141920;
  --warnbg: #2a1612;
  --fhbg: #221a2a;
  --notebg: #2a2014;
  --sumbg: #15222a;
  --cap: var(--f-polished);
  --okbg: #14261d;
  --okline: #5dca84;
  --badline: #e8796d;
}
:root.gf-doc-report a:hover { color: var(--f-link-hover); }
:root.gf-doc-report h2 { border-bottom-color: var(--f-bronze); }
/* Fixed light diagram plates (their text stays dark) get a bronze frame */
:root.gf-doc-report figure.diagram svg { border-color: var(--f-bronze-dark); box-shadow: 0 0 0 1px #24100a, 0 6px 18px rgba(0,0,0,0.45); }
/* One amber label color in the AN/TPS-43E focus-coil diagram was 4.18:1 on its white plate; darken it to 6.4:1 */
:root.gf-doc-report figure.diagram svg text[fill="#b36b00"] { fill: #8a5200; }

/* Home Assistant articles (HA-01, HA-02) */
:root.gf-doc-ha {
  --bg: var(--f-osmium);
  --fg: var(--f-silver);
  --muted: var(--f-muted);
  --accent: var(--f-link);
  --accent-soft: #15262a;
  --border: var(--f-rule);
  --card: var(--f-gunmetal);
  --note-bg: #2a2014;
  --note-border: #c9a14a;
  --ok: #5dca84;
}
:root.gf-doc-ha h1, :root.gf-doc-ha h2 { color: var(--f-brass); }
:root.gf-doc-ha h3 { color: #e9cf96; }
:root.gf-doc-ha h2 { border-bottom-color: var(--f-bronze-dark); }
:root.gf-doc-ha a:hover { color: var(--f-link-hover); }

/* PowerShell SQLTool reference page */
:root.gf-doc-ps {
  --bg: var(--f-osmium);
  --surface: var(--f-gunmetal);
  --text: var(--f-silver);
  --muted: var(--f-muted);
  --border: #2e3743;
  --accent: var(--f-brass);
  --accent-soft: #2a2418;
  --code-bg: #0a0d11;
  --code-fg: var(--f-silver);
  --warn-bg: #2a1612;
  --warn-border: var(--f-copper);
}
:root.gf-doc-ps main a { color: var(--f-link); }
:root.gf-doc-ps main a:hover { color: var(--f-link-hover); }

/* Script source viewers (PowerShell *-Source.html): keep the code colors, forge the frame */
:root.gf-doc-src {
  --bg: var(--f-osmium);
  --gutter: #8b96a2;
  --gutter-bg: #12161c;
  --border: #2e3743;
  --header: var(--f-oxblood);
  --accent: var(--f-teal);
  --warn-bg: #3a1610;
  --warn-fg: #f6b08a;
}
:root.gf-doc-src header { border-bottom-color: var(--f-bronze); box-shadow: 0 1px 0 var(--f-copper); }
:root.gf-doc-src header h1 { color: var(--f-brass-hi); }
:root.gf-doc-src header .meta { color: #d8b9a6; }
:root.gf-doc-src td.ln { border-right-color: #2e3743; }

/* ---------------------------------------------------------------
 * Home page only: framed hero image (images/lana-zoey-forge.jpg) and forge glow
 * --------------------------------------------------------------- */
:root.gf-home #Content {
  background-color: transparent;
  background-image:
    radial-gradient(ellipse 70% 45% at 30% 100%, rgba(255, 138, 42, 0.10), rgba(255, 138, 42, 0) 70%),
    radial-gradient(ellipse 50% 40% at 90% 0%, rgba(46, 196, 182, 0.06), rgba(46, 196, 182, 0) 70%);
}
:root.gf-home #Content .page { padding: 28px 32px 40px; box-sizing: border-box; }
.gf-hero {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 0;                       /* left-aligned, never centered */
  padding: 6px;
  box-sizing: border-box;
  border-radius: 6px;
  /* bronze/brass metal frame */
  background: linear-gradient(135deg, #f6e2a8 0%, #c9a14a 18%, #7a5a36 42%, #a8743a 58%, #e3c27a 80%, #8a6234 100%);
  box-shadow:
    0 0 0 1px #24100a,
    inset 0 0 0 1px rgba(255, 240, 200, 0.35),
    0 0 26px rgba(255, 138, 42, 0.28),
    0 10px 30px rgba(0, 0, 0, 0.55);
}
.gf-hero img {
  display: block;
  width: 1280px;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #24100a;
}
@media (max-width: 799.98px) {
  :root.gf-home #Content .page { padding: 12px 12px 28px; }
  .gf-hero { padding: 4px; }
}

/* ------------------------------------------------------------------
 * Section overview "personality" image (2026-10-08).
 * Reusable: in any section overview page put, right after the <h1>,
 *   <figure class="gf-ov-img gold"><img src="../images/NAME.jpg" width="640" height="360" alt="..."></figure>
 * Floats right inside the left-justified article column (text keeps its
 * left edge); stacks full-width (max 320px) on phones. Frame color comes
 * from --gf-ov-* tokens; modifier classes pick a section metal:
 *   .gold (Electronics), .steel (PowerShell), .verdigris (SQLKB), .copper (Research, site copper), or none for the default brass/bronze.
 *   Add .wide for a ~1/3 wider image (e.g. group shots); full width on phones.
 * Add a new metal with one rule:  .gf-ov-img.NAME { --gf-ov-1..4, --gf-ov-glow }
 * ------------------------------------------------------------------ */
.gf-ov-img {
  --gf-ov-1: #f6e2a8; --gf-ov-2: #c9a14a; --gf-ov-3: #7a5a36; --gf-ov-4: #a8743a;
  --gf-ov-glow: rgba(255, 138, 42, 0.22); --gf-ov-line: #24100a;
  float: right;
  width: 300px;
  max-width: 45%;
  margin: 0.2rem 0 0.8rem 1.4rem;
  padding: 4px;
  box-sizing: border-box;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--gf-ov-1) 0%, var(--gf-ov-2) 22%, var(--gf-ov-3) 48%, var(--gf-ov-4) 66%, var(--gf-ov-1) 86%, var(--gf-ov-3) 100%);
  box-shadow:
    0 0 0 1px var(--gf-ov-line),
    inset 0 0 0 1px rgba(255, 240, 200, 0.3),
    0 0 16px var(--gf-ov-glow),
    0 6px 18px rgba(0, 0, 0, 0.5);
}
.gf-ov-img.gold {
  --gf-ov-1: #fff0bf; --gf-ov-2: #e0b84a; --gf-ov-3: #7a5c12; --gf-ov-4: #b8923a;
  --gf-ov-glow: rgba(240, 190, 70, 0.30); --gf-ov-line: #151004;
}
.gf-ov-img.steel {
  --gf-ov-1: #dbe8f5; --gf-ov-2: #8fb3d1; --gf-ov-3: #34506d; --gf-ov-4: #6f8fae;
  --gf-ov-glow: rgba(110, 160, 210, 0.30); --gf-ov-line: #09101a;
}
.gf-ov-img.verdigris {
  --gf-ov-1: #d6f2e6; --gf-ov-2: #7fc8ac; --gf-ov-3: #2b5a4a; --gf-ov-4: #5e9a83;
  --gf-ov-glow: rgba(110, 200, 165, 0.30); --gf-ov-line: #061511;
}
.gf-ov-img.copper {
  --gf-ov-1: #f3c79a; --gf-ov-2: #d9733a; --gf-ov-3: #5e2b1d; --gf-ov-4: #b4553a;
  --gf-ov-glow: rgba(255, 138, 42, 0.32); --gf-ov-line: #24100a;
}
/* .wide: about 1/3 wider than the standard overview image (group shots) */
.gf-ov-img.wide { width: 398px; max-width: 50%; }
.gf-ov-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  box-shadow: 0 0 0 1px var(--gf-ov-line);
}
@media (max-width: 599.98px) {
  .gf-ov-img { float: none; width: 100%; max-width: 320px; margin: 0.4rem 0 1rem; }
  .gf-ov-img.wide { max-width: 100%; }
}