/* ==========================================================================
   harnesstech.css — the engineer-facing Harness page.
   Scoped to .tech* selectors so it cannot disturb the eight live pages that
   share style.css. Loaded after style.css; borrows its custom properties only.
   ========================================================================== */

:root {
  --tech-bg:      #14120F;
  --tech-panel:   #1C1917;
  --tech-panel-2: #232019;
  --tech-line:    #34302A;
  --tech-text:    #E9E5DC;
  --tech-dim:     #A19B8E;
  --tech-faint:   #6E6A60;
  --tech-accent:  #FE5E2D;
  --tech-green:   #7FBF7A;
  --tech-red:     #E4756B;
  --tech-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- shell ---------- */

body.tech {
  background: var(--tech-bg);
  color: var(--tech-text);
}

.tech .container { max-width: 1120px; }

/* Masthead replaces the marketing hero: a header line, not a banner. */
.techhead {
  border-bottom: 1px solid var(--tech-line);
  padding: 64px 0 40px;
}
.techhead__meta {
  font-family: var(--tech-mono);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tech-faint);
  margin-bottom: 18px;
}
.techhead__meta .on { color: var(--tech-green); }
.techhead h1 {
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  max-width: 20ch;
}
.techhead h1 .accent { color: var(--tech-accent); }
.techhead__sub {
  font-size: clamp(16px, 1.9vw, 19px);
  line-height: 1.55;
  color: var(--tech-dim);
  max-width: 62ch;
  margin: 0 0 26px;
}
.techhead__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-family: var(--tech-mono);
  font-size: 13px;
  color: var(--tech-faint);
  margin: 0;
  padding: 0;
  list-style: none;
}
.techhead__facts b { color: var(--tech-text); font-weight: 600; }

/* ---------- sections ---------- */

.techsec { padding: 56px 0; border-bottom: 1px solid var(--tech-line); }
.techsec__label {
  font-family: var(--tech-mono);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tech-accent);
  margin: 0 0 12px;
}
.techsec h2 {
  font-size: clamp(21px, 2.6vw, 28px);
  line-height: 1.25;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}
.techsec__lede {
  color: var(--tech-dim);
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 68ch;
  margin: 0 0 28px;
}
.techsec p { line-height: 1.62; }
.techsec a { color: var(--tech-accent); }

/* ---------- code ---------- */

.code {
  background: var(--tech-panel);
  border: 1px solid var(--tech-line);
  border-radius: 8px;
  overflow: hidden;
  margin: 0 0 22px;
}
.code__bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding: 9px 14px;
  border-bottom: 1px solid var(--tech-line);
  font-family: var(--tech-mono);
  font-size: 12px;
  color: var(--tech-faint);
}
.code__bar b { color: var(--tech-dim); font-weight: 500; }
.code pre {
  margin: 0;
  padding: 16px 14px;
  overflow-x: auto;          /* the code scrolls, never the page */
  font-family: var(--tech-mono);
  font-size: 13px;
  line-height: 1.65;
  -webkit-overflow-scrolling: touch;
}
.code code { white-space: pre; }
.c-key { color: #C9B8FF; }
.c-str { color: var(--tech-green); }
.c-com { color: var(--tech-faint); font-style: italic; }
.c-fn  { color: var(--tech-accent); }
.c-num { color: #E7C46B; }

/* ---------- layer table ---------- */

.layers { display: grid; gap: 1px; background: var(--tech-line); border: 1px solid var(--tech-line); border-radius: 8px; overflow: hidden; }
.layer { background: var(--tech-panel); padding: 18px 18px; display: grid; grid-template-columns: 150px 1fr; gap: 4px 22px; }
.layer__name { font-family: var(--tech-mono); font-size: 13px; color: var(--tech-accent); word-break: break-word; }
.layer__body { min-width: 0; }
.layer h3 { margin: 0 0 5px; font-size: 16px; letter-spacing: -.01em; }
.layer p { margin: 0; color: var(--tech-dim); font-size: 15px; line-height: 1.55; }

/* ---------- ordered pipeline ---------- */

.steps { counter-reset: s; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
/* Deliberately NOT a grid.
   Under `display:grid` every child *element* becomes its own grid item — not
   just block-level ones. A list item like `<b>Claim.</b> text <code>x</code>`
   therefore produced five items in a two-column grid, and everything past the
   second wrapped into the 30px counter column: one word per line.
   Absolute-positioning the counter keeps the body a single normal flow that
   cannot be broken by whatever inline markup a step happens to contain. */
.steps li {
  counter-increment: s;
  position: relative;
  background: var(--tech-panel);
  border: 1px solid var(--tech-line);
  border-radius: 7px;
  padding: 13px 15px 13px 57px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--tech-dim);
  min-width: 0;
}
.steps li::before {
  content: counter(s);
  position: absolute;
  left: 15px;
  top: 13px;
  width: 28px;
  box-sizing: border-box;
  font-family: var(--tech-mono);
  font-size: 12px;
  color: var(--tech-accent);
  border: 1px solid var(--tech-line);
  border-radius: 5px;
  text-align: center;
  padding: 3px 0;
}
.steps b { color: var(--tech-text); font-weight: 600; }
.steps code, .techsec p code, .layer p code, .note code, .tbl code {
  font-family: var(--tech-mono);
  font-size: .89em;
  background: var(--tech-panel-2);
  border: 1px solid var(--tech-line);
  border-radius: 4px;
  padding: 1px 5px;
  word-break: break-word;
}

/* ---------- table ---------- */

.tblwrap { overflow-x: auto; border: 1px solid var(--tech-line); border-radius: 8px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.tbl th, .tbl td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--tech-line); vertical-align: top; }
.tbl th { font-family: var(--tech-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--tech-faint); font-weight: 500; background: var(--tech-panel); }
.tbl td { color: var(--tech-dim); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .yes { color: var(--tech-green); font-family: var(--tech-mono); font-size: 13px; }
.tbl .no  { color: var(--tech-red);   font-family: var(--tech-mono); font-size: 13px; }

/* ---------- honesty note ---------- */

.note {
  background: var(--tech-panel-2);
  border: 1px solid var(--tech-line);
  border-left: 3px solid var(--tech-accent);
  border-radius: 0 8px 8px 0;
  padding: 18px 20px;
  color: var(--tech-dim);
  font-size: 15.5px;
  line-height: 1.6;
}
.note h3 { margin: 0 0 8px; font-size: 16px; color: var(--tech-text); }
.note ul { margin: 10px 0 0; padding-left: 20px; }
.note li { margin-bottom: 7px; }
.note li:last-child { margin-bottom: 0; }

/* ---------- closing ---------- */

.techend { padding: 60px 0 76px; }
.techend h2 { font-size: clamp(22px, 3vw, 30px); margin: 0 0 12px; letter-spacing: -.01em; }
.techend p { color: var(--tech-dim); max-width: 60ch; margin: 0 0 24px; line-height: 1.6; }
.techend .btn { margin-right: 10px; margin-bottom: 10px; }

.tech .foot { background: var(--tech-bg); border-top: 1px solid var(--tech-line); color: var(--tech-faint); }
.tech .foot a, .tech .foot__link { color: var(--tech-dim); }

/* ---------- nav on dark ---------- */

.tech .nav { background: rgba(20,18,15,.92); border-bottom: 1px solid var(--tech-line); }
.tech .nav__links a { color: var(--tech-dim); font-family: var(--tech-mono); font-size: 13px; }
.tech .nav__links a:hover { color: var(--tech-text); }

/* ---------- narrow screens ---------- */

@media (max-width: 720px) {
  .techhead { padding: 44px 0 32px; }
  .techsec { padding: 42px 0; }
  .layer { grid-template-columns: 1fr; gap: 6px; }
  .layer__name { font-size: 12px; }
  .code pre { font-size: 12px; }
  .techend { padding: 46px 0 60px; }
}

/* Every grid child must be allowed to shrink, or a wide code block drags the
   whole column past the viewport and the page scrolls sideways. */
.layers, .layer, .steps, .steps li, .techsec, .techhead { min-width: 0; }
.tech, .tech body { overflow-x: hidden; }

/* ---------- brand mark ----------
   The shared wordmark PNG is dark ink for a cream page; on this background the
   "100" disappears. Set it as text so it reads on dark and stays on-brand. */
.techbrand {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--tech-text);
  text-decoration: none;
  line-height: 1;
}
.techbrand span { color: var(--tech-accent); }
.techbrand:hover { opacity: .75; }

/* Clear the sticky nav when an anchor jumps, or the section label lands behind it. */
.techsec, .techhead { scroll-margin-top: 88px; }

/* ---------- send-path diagram ----------
   Inline SVG rather than an image: it scales without blurring, inherits the
   page's palette, and stays legible at 390px where a raster would not. The
   figure scrolls inside its own box on narrow screens; the page never does. */
.fig { margin: 0 0 26px; }
.fig__svg {
  display: block;
  width: 100%;
  max-width: 680px;
  height: auto;
  margin: 0 auto;
}
.fig__cap {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tech-faint);
  text-align: center;
}

/* boxes */
.d-box rect, .d-gate rect, .d-fail rect, .d-rec rect { fill: var(--tech-panel); stroke: var(--tech-line); }
.d-gate rect { stroke: var(--tech-accent); stroke-width: 1.6; }
.d-box--ok rect { stroke: var(--tech-green); }
.d-fail rect { stroke: var(--tech-red); stroke-dasharray: 4 3; }
.d-rec rect { fill: var(--tech-panel-2); stroke: var(--tech-line); }

/* type */
.d-t { fill: var(--tech-text); font-family: var(--tech-mono); font-size: 14px; }
.d-s { fill: var(--tech-dim);  font-family: var(--tech-mono); font-size: 11.5px; }
.d-n { fill: var(--tech-faint); font-family: var(--tech-mono); font-size: 12px; }
.d-n--a  { fill: var(--tech-accent); }
.d-n--ok { fill: var(--tech-green); }
.d-e { fill: var(--tech-red); font-family: var(--tech-mono); font-size: 10.5px; }
.d-e--ok { fill: var(--tech-green); }
.d-e--q  { fill: var(--tech-faint); }

/* connectors */
.d-l { stroke: var(--tech-faint); stroke-width: 1.3; fill: none; }
.d-ok { stroke: var(--tech-green); stroke-width: 1.4; fill: none; }
.d-f { stroke: var(--tech-red); stroke-width: 1.2; fill: none; stroke-dasharray: 4 3; }
.d-loop { stroke: var(--tech-faint); stroke-width: 1.2; fill: none; }

/* At phone widths the diagram is the one thing that must not shrink into
   illegibility, so it keeps its width and the figure scrolls instead. */
@media (max-width: 560px) {
  .fig { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fig__svg { width: 560px; max-width: none; }
  .fig__cap { text-align: left; }
}

/* The arrow into the escalation box is only 64px long, so a label set from its
   left ran under the box and printed on top of the text inside it. Anchored to
   the arrow head and stacked instead. */
.d-e--r { text-anchor: end; }