/* ============================================================
   Businessily — /engineering.html
   The technical deep-dive section: diagram figures + spec tables.
   Diagram colours are tokens so the inline SVGs follow the theme.
   ============================================================ */

/* ---------- diagram palette (light) ---------- */
:root {
  --d-font: var(--font);
  --d-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --d-ink:          #0B1F1A;
  --d-muted:        #5A736B;
  --d-accent:       var(--accent);
  --d-bright:       var(--accent-2);
  --d-card:         #FFFFFF;
  --d-line:         #CFE0DA;
  --d-on-accent:    #FFFFFF;

  --d-accent-tint:  #E8F7F1;
  --d-accent-ink:   #2C5E52;

  --d-panel:        #0B1F1A;
  --d-panel-ink:    #EAF6F1;
  --d-panel-accent: #8FD9C2;
  --d-panel-sub:    #7FA99C;

  --d-danger:       #C2453B;
  --d-danger-tint:  #FBEDEC;
  --d-danger-line:  #E4B5B0;
  --d-danger-ink:   #8E4A44;
  --d-strike:       #D97B72;

  --d-chip-bg:      #16332B;
  --d-chip-line:    #2A5A4B;
  --d-chip-ink:     #6FBFA5;
}

/* ---------- diagram palette (dark) ----------
   The inverted "code" panel has to invert again in dark mode, or it
   disappears into the page. Everything else lifts off the dark ground. */
[data-theme="dark"] {
  --d-ink:          #EAF3EF;
  --d-muted:        #9DBBB0;
  --d-card:         #1B2A24;
  --d-line:         rgb(255 255 255 / 0.14);
  --d-accent:       #45D5A8;
  --d-bright:       #7BE7C6;
  --d-on-accent:    #06261D;

  --d-accent-tint:  #14322A;
  --d-accent-ink:   #A5D8C6;

  --d-panel:        #05100D;
  --d-panel-ink:    #EAF6F1;
  --d-panel-accent: #6FE0BB;
  --d-panel-sub:    #7FA99C;

  --d-danger:       #F08A80;
  --d-danger-tint:  #33201E;
  --d-danger-line:  #7A3B36;
  --d-danger-ink:   #E0A9A3;
  --d-strike:       #C9645B;

  --d-chip-bg:      #12241E;
  --d-chip-line:    #2A5A4B;
  --d-chip-ink:     #6FBFA5;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --d-ink:#EAF3EF; --d-muted:#9DBBB0; --d-card:#1B2A24; --d-line:rgb(255 255 255 / 0.14);
    --d-accent:#45D5A8; --d-bright:#7BE7C6; --d-on-accent:#06261D;
    --d-accent-tint:#14322A; --d-accent-ink:#A5D8C6;
    --d-panel:#05100D; --d-panel-ink:#EAF6F1; --d-panel-accent:#6FE0BB; --d-panel-sub:#7FA99C;
    --d-danger:#F08A80; --d-danger-tint:#33201E; --d-danger-line:#7A3B36; --d-danger-ink:#E0A9A3;
    --d-strike:#C9645B;
    --d-chip-bg:#12241E; --d-chip-line:#2A5A4B; --d-chip-ink:#6FBFA5;
  }
}

/* ---------- hero ---------- */
.eng-hero { padding-bottom: clamp(26px, 4vw, 44px); overflow: hidden; }
.eng-hero h1 { max-width: 18ch; }
.eng-hero .lead { font-size: clamp(1.05rem, 1.7vw, 1.24rem); color: var(--text-2); max-width: 58ch; }
.eng-layout { display: grid; grid-template-columns: 1.35fr .9fr; gap: clamp(26px, 4vw, 52px); align-items: start; }
@media (max-width: 860px) { .eng-layout { grid-template-columns: 1fr; } }

.eng-toc { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-xl);
  padding: 22px 24px; box-shadow: var(--shadow-sm); }
.eng-toc.sticky { position: sticky; top: 86px; }
@media (max-width: 860px) { .eng-toc.sticky { position: static; } }
.eng-toc ol { margin: 0; padding-left: 0; list-style: none; color: var(--text-2); font-size: .95rem; }
.eng-toc li { margin: 9px 0; display: flex; gap: 10px; align-items: baseline; }
.eng-toc li a { color: var(--text); font-weight: 600; }
.eng-toc li a:hover { color: var(--accent); opacity: 1; }
.eng-toc .tnum { font-family: var(--d-mono); color: var(--accent); font-size: .82rem; flex: 0 0 1.6em; }

/* stat strip under the hero */
.eng-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }
@media (max-width: 720px) { .eng-stats { grid-template-columns: repeat(2, 1fr); } }
.eng-stat { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-lg); padding: 16px 18px; }
.eng-stat b { display: block; font-family: var(--font); font-size: 1.5rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; }
.eng-stat span { font-size: .85rem; color: var(--text-2); }

/* ---------- a diagram chapter ---------- */
.chapter { border-top: 1px solid var(--hairline); padding: clamp(46px, 7vw, 84px) 0; }
.chapter:first-of-type { border-top: none; }
.chapter-head { max-width: 68ch; }
.chapter-num {
  display: inline-block; font-family: var(--d-mono); font-size: .82rem; font-weight: 700;
  letter-spacing: .16em; color: var(--accent); margin-bottom: 10px;
}
.chapter h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); margin-bottom: .35em; }
.chapter .standfirst { font-size: clamp(1rem, 1.5vw, 1.12rem); color: var(--text-2); max-width: 62ch; }

/* the figure */
.dgm {
  margin: clamp(24px, 3.5vw, 40px) 0 clamp(18px, 2.5vw, 26px);
  background: var(--card); border: 1px solid var(--hairline);
  border-radius: var(--r-xl); box-shadow: var(--shadow-sm);
  padding: clamp(10px, 2vw, 20px);
}
.dgm-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dgm-svg { display: block; width: 100%; height: auto; min-width: 620px; }
.dgm figcaption {
  margin-top: 10px; padding: 0 6px; font-size: .9rem; color: var(--text-2);
  border-top: 1px solid var(--hairline-2); padding-top: 12px;
}
.dgm figcaption b { color: var(--text); font-family: var(--font); }
.dgm-hint { display: none; font-size: .8rem; color: var(--text-2); padding: 0 6px 8px; }
@media (max-width: 700px) { .dgm-hint { display: block; } }

/* body prose */
.chapter-body { max-width: 68ch; }
.chapter-body h3 { font-size: 1.08rem; margin-top: 1.6em; }
.chapter-body p { color: var(--text-2); }
.chapter-body strong { color: var(--text); }
.chapter-body code {
  font-family: var(--d-mono); font-size: .88em; background: var(--bg-2);
  border: 1px solid var(--hairline-2); border-radius: 6px; padding: 1px 6px; color: var(--text);
}

/* the "what this costs us" honesty note */
.tradeoff {
  margin-top: 22px; border-left: 3px solid var(--warn); background: color-mix(in srgb, var(--warn) 7%, transparent);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 14px 18px; max-width: 68ch;
}
.tradeoff b { font-family: var(--font); color: var(--text); }
.tradeoff p { margin: 4px 0 0; font-size: .95rem; color: var(--text-2); }

/* source-of-truth file list */
.srcfiles { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.srcfiles li {
  font-family: var(--d-mono); font-size: .8rem; color: var(--text-2);
  background: var(--bg-2); border: 1px solid var(--hairline-2);
  border-radius: var(--r-pill); padding: 5px 12px;
  /* long paths have no natural break opportunity — let them break rather than
     push the page wider than the viewport */
  max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
}
@media (max-width: 420px) { .srcfiles li { font-size: .74rem; border-radius: var(--r-md); } }

/* ---------- principles ---------- */
.principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
@media (max-width: 900px) { .principles { grid-template-columns: 1fr; } }
.principle { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 24px; }
.principle h3 { font-size: 1.05rem; }
.principle p { font-size: .93rem; color: var(--text-2); margin: 0; }
.principle .pnum { font-family: var(--d-mono); font-size: .78rem; color: var(--accent); letter-spacing: .12em; }

/* ---------- stack table ---------- */
.stack { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: .94rem; }
.stack th, .stack td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--hairline-2); vertical-align: top; }
.stack th { font-family: var(--font); font-weight: 800; color: var(--text); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.stack td:first-child { font-family: var(--font); font-weight: 700; color: var(--text); white-space: nowrap; }
.stack td { color: var(--text-2); }
.stack-wrap { overflow-x: auto; }