/* nodejs.php (added 2026-09-27). The page is told in drawings, not cards: an editorial index of
   what we build, the event loop as a board, PHP and Node as one split server behind Nginx, a
   release as three lanes over six steps, and the server as an annotated file list.
   The diagrams read role tokens so they work in both themes; only the Nginx panel and the file
   paths are code, and code is ink in BOTH themes, with fixed ink/mist hexes inside.
   Copper marks Node (the poll phase, the Node wire, the new release); patina marks what is live. */

.nj-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.nj-actions.is-center { justify-content: center; }

/* ---------- 1. the index ---------- */
.nj-index { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-strong); }
.nj-index li { display: grid; grid-template-columns: 48px minmax(0, 1.05fr) minmax(0, 1.35fr) minmax(0, .6fr); gap: 10px clamp(20px, 3vw, 36px); align-items: baseline; padding: clamp(22px, 3vw, 34px) 0; border-bottom: 1px solid var(--line); }
.nj-index-n { font: 400 13px/1 var(--font-mono); color: var(--text-muted); }
.nj-index-name { margin: 0; font-family: var(--font-display, inherit); font-size: clamp(26px, 3.2vw, 42px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: var(--text-strong); }
html[dir="rtl"] .nj-index-name { letter-spacing: 0; line-height: 1.25; }
.nj-index-text { margin: 0; max-width: 46ch; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.nj-index-kind { justify-self: end; text-align: end; font: 400 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }

/* ---------- 2. the event loop board ---------- */
.nj-loop { margin: 0; }
.nj-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); grid-template-areas: "stack ring micro" "stack ring tasks" "pool pool pool"; gap: 14px; padding: clamp(12px, 2vw, 22px); border: 1px solid var(--line-strong); border-radius: 20px; background: var(--bg); }
.nj-reg { min-width: 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.nj-stack { grid-area: stack; display: flex; flex-direction: column; }
.nj-micro { grid-area: micro; }
.nj-tasks { grid-area: tasks; }
.nj-pool { grid-area: pool; }
.nj-reg-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; }
.nj-n { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--tint-05); font: 600 12px/1 var(--font-mono); color: var(--text-strong); }
.nj-reg-t { font: 600 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-strong); }
.nj-reg-aside { margin-inline-start: auto; font-size: 12.5px; color: var(--text-muted); }
.nj-reg-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.nj-board code { font-family: var(--font-mono); font-size: 12.5px; }

/* the stack grows upward: the frame running now is on top, and the stack sits on the floor of its box */
.nj-frames { display: grid; gap: 6px; margin: auto 0 0; padding: 0; list-style: none; text-align: left; }
.nj-frames li { padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--tint-03); color: var(--text-2); overflow-wrap: anywhere; }
.nj-frames li.is-top { border-color: var(--line-strong); background: var(--tint-05); color: var(--text-strong); }

.nj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.nj-chips code { display: inline-block; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--tint-03); color: var(--text-2); }

/* the ring: five phases as arcs, poll in copper because that is where I/O callbacks come back */
.nj-ring { grid-area: ring; position: relative; display: grid; place-items: center; min-width: 0; padding: 10px; }
.nj-ring svg { display: block; width: 100%; max-width: 300px; height: auto; overflow: visible; }
.nj-ring-bed { fill: none; stroke: var(--tint-05); stroke-width: 22; }
.nj-seg path { fill: none; stroke: var(--text-muted); stroke-width: 2; stroke-linecap: round; }
.nj-seg text { font: 600 12.5px var(--font-mono); fill: var(--text-2); text-anchor: middle; dominant-baseline: middle; }
.nj-seg.is-poll path { stroke: #E85622; stroke-width: 2.5; }
.nj-seg.is-poll text { fill: var(--copper-ink); }
.nj-ring marker path { fill: none; stroke: var(--text-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nj-ring #nj-arrow-c path { stroke: #E85622; }
.nj-ring-dot { fill: #E85622; stroke: var(--bg); stroke-width: 3; }
.nj-ring-c { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; margin: 0; text-align: center; pointer-events: none; }
.nj-ring-c b { font-family: var(--font-display, inherit); font-size: clamp(16px, 1.5vw, 20px); color: var(--text-strong); }
.nj-ring-c code { font-size: 12px; color: var(--text-muted); }
.nj-ring-n { position: absolute; top: 8px; inset-inline-start: 8px; }

/* the pool: four threads as lanes, and the kernel beside them for sockets */
.nj-pool-body { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 12px; }
.nj-threads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; text-align: left; }
.nj-threads li { position: relative; padding: 24px 10px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--tint-03); color: var(--text-2); overflow-wrap: anywhere; }
.nj-threads li::before { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.nj-os { display: grid; align-content: start; gap: 6px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 8px; }
.nj-os code { color: var(--text-strong); }
.nj-os .nj-reg-note { margin: 0; }

.nj-cap { margin: 12px 0 0; text-align: center; font-size: 12.5px; color: var(--text-muted); }

/* the reading of the board, and the one rule */
.nj-loop-read { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; margin-top: clamp(28px, 4vw, 44px); }
.nj-steps-read { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.nj-steps-read li { counter-increment: s; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.nj-steps-read li::before { content: counter(s); display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--tint-05); font: 600 12px/1 var(--font-mono); color: var(--text-strong); transform: translateY(-1px); }
.nj-rule { padding: 22px 24px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); }
.nj-rule h3 { margin: 0 0 10px; font-size: 19px; color: var(--text-strong); }
.nj-rule p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--text-2); }

/* one reveal, once: the phases come in around the ring in order, then the marker */
.nj-seg { transition: opacity 200ms var(--ease-out) calc(var(--i, 0) * 90ms + 250ms); }
.nj-ring-dot { transition: opacity 200ms var(--ease-out) 750ms; }
html.anim-ready .nj-loop:not(.revealed) .nj-seg,
html.anim-ready .nj-loop:not(.revealed) .nj-ring-dot { opacity: 0; }

/* ---------- 3. PHP and Node on one server ---------- */
.nj-split { margin: 0; }
.nj-split-board { display: grid; }
.nj-req { justify-self: center; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 8px; max-width: 100%; padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: 400 13px/1.4 var(--font-mono); }
.nj-req-url { margin-inline-end: 4px; font-weight: 600; color: var(--text-strong); }
.nj-req-path { padding: 2px 8px; border-radius: 999px; background: var(--tint-05); color: var(--text-2); }
.nj-req-path.is-node { background: rgba(232, 86, 34, .12); color: var(--copper-ink); }

.nj-nginx { position: relative; min-width: 0; margin-top: 34px; padding: 18px clamp(14px, 2.4vw, 22px) 20px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: #12101A; box-shadow: var(--shadow-2); }
.nj-nginx::before, .nj-halves::before { content: ''; position: absolute; left: 50%; top: -35px; height: 34px; border-left: 1px solid var(--line-strong); }
/* the panel reads as a routing table beside the config that implements it */
.nj-nginx { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 18px clamp(20px, 3vw, 36px); align-items: start; }
.nj-routes { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; text-align: left; }
.nj-routes li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; }
.nj-routes-from { display: flex; flex-wrap: wrap; gap: 6px; }
.nj-routes-from code { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); font: 400 12.5px/1.5 var(--font-mono); color: #E4DFEE; }
.nj-routes-to { font: 600 12.5px/1.5 var(--font-mono); color: #ADA3C8; }
.nj-routes-to::before { content: '\2192'; margin-right: 8px; color: #807996; }
.nj-routes li.is-node { border-color: rgba(232, 86, 34, .45); }
.nj-routes li.is-node .nj-routes-to { color: #FF7A45; }
.nj-nginx-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 12px; }
.nj-nginx-h b { font-family: var(--font-display, inherit); font-size: 20px; color: #F5F3F9; }
.nj-nginx-h span { font-size: 13.5px; color: #ADA3C8; }
.nj-conf { margin: 0; padding: 14px 16px; overflow-x: auto; border-radius: 10px; background: rgba(255, 255, 255, .04); font: 400 13px/1.65 var(--font-mono); color: #E4DFEE; text-align: left; tab-size: 4; }
.nj-conf code { font: inherit; color: inherit; background: none; padding: 0; }
.nj-conf .k { color: #9891AD; }
.nj-conf b { font-weight: 600; color: #FF7A45; }

.nj-halves { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; border: 1px solid var(--line-strong); border-radius: 18px 18px 0 0; background: var(--surface); }
.nj-halves::before { display: none; }
.nj-half { position: relative; min-width: 0; padding: 26px clamp(18px, 3vw, 32px) 24px; }
.nj-half + .nj-half { border-inline-start: 1px solid var(--line-strong); }
/* the wire from Nginx into each half, named for what it speaks */
.nj-half::before { content: ''; position: absolute; left: 50%; top: -45px; height: 44px; border-left: 1px solid var(--line-strong); }
.nj-half.is-node::before { border-left: 1.5px solid #E85622; }
.nj-wire { position: absolute; top: -32px; left: calc(50% + 10px); padding: 1px 7px; border-radius: 4px; background: var(--bg); font: 400 11.5px/1.4 var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.nj-half.is-node .nj-wire { color: var(--copper-ink); }
.nj-half-k { margin: 0 0 10px; font: 600 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.nj-half.is-node .nj-half-k { color: var(--copper-ink); }
.nj-proc { margin: 0 0 14px; }
.nj-proc code { font: 600 14px/1.4 var(--font-mono); color: var(--text-strong); }
/* PHP: a row of separate workers; Node: one process holding many live connections */
.nj-workers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.nj-workers li { width: 24px; height: 32px; border: 1px solid var(--line-strong); border-radius: 5px; background: var(--tint-05); }
.nj-conns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: max-content; max-width: 100%; min-height: 32px; margin: 0 0 16px; padding: 0 10px; box-sizing: border-box; border: 1.5px solid rgba(232, 86, 34, .55); border-radius: 6px; list-style: none; }
.nj-conns li { width: 8px; height: 8px; border-radius: 50%; background: #35A08F; }
.nj-half-t { margin: 0 0 8px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.nj-half-apps { margin: 0; font: 400 12.5px/1.5 var(--font-mono); color: var(--text-muted); }

.nj-floor { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 16px clamp(18px, 3vw, 32px); border: 1px solid var(--line-strong); border-top: 1px dashed var(--line-strong); border-radius: 0 0 18px 18px; background: var(--tint-03); margin-top: -1px; }
.nj-floor-k { font: 600 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.nj-floor ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.nj-floor li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 13.5px; color: var(--text-strong); }
.nj-floor-sub { color: var(--text-muted); font-size: 12.5px; }

/* which one for which job: two columns on one rule, then the answer that is usually true */
.nj-choose { margin-top: clamp(48px, 7vw, 88px); }
.sp-sec .nj-choose-head { margin-bottom: clamp(20px, 3vw, 32px); }
.nj-choose-head h3 { margin: 0 0 10px; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.015em; color: var(--text-strong); }
html[dir="rtl"] .nj-choose-head h3 { letter-spacing: 0; }
.nj-choose-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); }
.nj-col { padding-top: 22px; }
.nj-col.is-php { padding-inline-end: clamp(20px, 4vw, 48px); }
.nj-col.is-node { padding-inline-start: clamp(20px, 4vw, 48px); border-inline-start: 1px solid var(--line); }
.nj-col h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 18px; color: var(--text-strong); }
.nj-col h4::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--text-muted); }
.nj-col.is-node h4::before { background: #E85622; }
.nj-col ul { margin: 0; padding: 0; list-style: none; }
.nj-col li { position: relative; padding: 10px 0; padding-inline-start: 20px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.nj-col li::before { content: ''; position: absolute; inset-inline-start: 1px; top: 22px; width: 8px; height: 1.5px; background: var(--text-muted); }
.nj-both { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px clamp(24px, 4vw, 48px); align-items: center; margin-top: 28px; padding: 24px clamp(20px, 3vw, 32px); border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); }
.nj-both h4 { grid-column: 1; margin: 0; font-size: 19px; color: var(--text-strong); }
.nj-both p { grid-column: 1; margin: 0; max-width: 62ch; font-size: 15.5px; line-height: 1.7; color: var(--text-2); }
.nj-links { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.nj-links a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-size: 15px; font-weight: 600; color: var(--copper-ink); text-decoration: none; }
.nj-links a::after { content: '\2192'; transition: transform 180ms var(--ease-out); }
html[dir="rtl"] .nj-links a::after { content: '\2190'; }
.nj-links a:hover { text-decoration: underline; text-underline-offset: .2em; }
@media (pointer: coarse) { .nj-links a { min-height: 44px; } }

/* ---------- 4. the release, as lanes ---------- */
.nj-release { margin: 0; }
.nj-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0 0 22px; padding: 0; list-style: none; font-size: 14px; color: var(--text-2); }
.nj-legend li { display: inline-flex; align-items: center; gap: 9px; }
.nj-legend li::before { content: ''; width: 20px; height: 7px; background: var(--lane); }
.l-v { --lane: #35A08F; }
.l-c { --lane: var(--text-muted); }
.l-n { --lane: #E85622; }
.nj-timeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.nj-timeline > li { min-width: 0; }
/* each step carries its own slice of the three lanes; with no gap between steps the slices meet as bars */
.nj-lanes { display: grid; gap: 7px; padding: 4px 0 18px; }
.nj-lanes i { position: relative; display: block; height: 8px; background: var(--tint-03); }
.nj-lanes i::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: var(--a, 0%); inset-inline-end: var(--b, 0%); box-sizing: border-box; background: var(--lane); transform-origin: left center; }
html[dir="rtl"] .nj-lanes i::before { transform-origin: right center; }
.nj-lanes .s-off::before { content: none; }
.nj-lanes .s-end { --b: 50%; }
.nj-lanes .s-boot { --a: 50%; }
.nj-lanes .s-boot::before, .nj-lanes .s-wait::before { background: transparent; border: 1.5px dashed var(--lane); }
.nj-lanes .s-boot::before { border-inline-end: 0; }
.nj-lanes .s-wait::before { border-inline: 0; }
.nj-step { padding: 14px 16px 4px; padding-inline-start: 14px; border-inline-start: 1px solid var(--line); }
.nj-step-n { display: block; font: 400 12px/1 var(--font-mono); color: var(--text-muted); }
.nj-step h3 { margin: 8px 0 10px; font-size: 16.5px; line-height: 1.3; color: var(--text-strong); }
.nj-cmd { display: inline-block; max-width: 100%; margin: 0 0 10px; padding: 3px 7px; box-sizing: border-box; border-radius: 5px; background: var(--well); font: 400 12px/1.45 var(--font-mono); color: var(--text-strong); text-align: left; overflow-wrap: anywhere; }
.nj-step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.nj-release-note { margin: 26px 0 0; padding: 14px 18px; border: 1px dashed var(--line-strong); border-radius: 12px; font-size: 15px; color: var(--text-2); }

/* one reveal, once: the lanes wipe in step by step */
.nj-lanes i::before { transition: transform 240ms var(--ease-out) calc(var(--i, 0) * 90ms + 200ms); }
html.anim-ready .nj-release:not(.revealed) .nj-lanes i::before { transform: scaleX(0); }

/* ---------- 5. the server around the code ---------- */
.nj-tree { margin: 0; padding: 0; list-style: none; }
.nj-tree li { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.nj-path { display: block; padding: 22px clamp(16px, 2.4vw, 24px); background: #12101A; border-inline: 1px solid rgba(255, 255, 255, .08); font: 400 13.5px/1.55 var(--font-mono); color: #F5F3F9; text-align: left; overflow-wrap: anywhere; }
.nj-path span { color: #807996; }
.nj-tree li:first-child .nj-path { border-start-start-radius: 16px; border-start-end-radius: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.nj-tree li:last-child .nj-path { border-end-start-radius: 16px; border-end-end-radius: 16px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.nj-tree li + li .nj-path { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.nj-note { padding: 20px 0; padding-inline-start: clamp(20px, 3vw, 36px); border-top: 1px solid var(--line); }
.nj-tree li:last-child .nj-note { border-bottom: 1px solid var(--line); }
.nj-note h3 { margin: 0 0 6px; font-size: 18px; color: var(--text-strong); }
.nj-note p { margin: 0; max-width: 58ch; font-size: 15px; line-height: 1.65; color: var(--text-2); }

/* hover: colour on a real pointer, and movement only there */
@media (hover: hover) and (pointer: fine) {
    .nj-tree li:hover .nj-path span { color: #ADA3C8; }
    .nj-links a:hover::after { transform: translateX(3px); }
    html[dir="rtl"] .nj-links a:hover::after { transform: translateX(-3px); }
}
.nj-path span { transition: color 160ms var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
    .nj-seg, .nj-ring-dot, .nj-lanes i::before, .nj-links a::after { transition: none; }
    html.anim-ready .nj-loop:not(.revealed) .nj-seg,
    html.anim-ready .nj-loop:not(.revealed) .nj-ring-dot { opacity: 1; }
    html.anim-ready .nj-release:not(.revealed) .nj-lanes i::before { transform: none; }
    .nj-links a:hover::after { transform: none !important; }
}

/* ---------- widths ---------- */
@media (max-width: 960px) {
    .nj-index li { grid-template-columns: 40px minmax(0, 1fr); }
    .nj-index-name, .nj-index-text, .nj-index-kind { grid-column: 2; }
    .nj-index-kind { justify-self: start; text-align: start; }
    .nj-index-n { grid-row: 1; }
}
@media (max-width: 900px) {
    .nj-nginx { grid-template-columns: minmax(0, 1fr); }
    /* on a phone the board reads in the order of its numbers */
    .nj-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stack" "pool" "tasks" "micro" "ring"; }
    .nj-ring svg { max-width: 280px; }
    .nj-pool-body { grid-template-columns: minmax(0, 1fr); }
    .nj-threads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nj-loop-read { grid-template-columns: minmax(0, 1fr); }

    /* the release turns on its side: steps are rows, the lanes run down their start edge */
    .nj-timeline { grid-template-columns: minmax(0, 1fr); }
    .nj-timeline > li { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
    .nj-lanes { grid-template-columns: repeat(3, 8px); gap: 7px; padding: 0; }
    .nj-lanes i { height: auto; }
    .nj-lanes i::before { inset-inline: 0; inset-block-start: var(--a, 0%); inset-block-end: var(--b, 0%); transform-origin: center top; }
    html[dir="rtl"] .nj-lanes i::before { transform-origin: center top; }
    .nj-lanes .s-boot::before { border-inline-end: 1.5px dashed var(--lane); border-block-end: 0; }
    .nj-lanes .s-wait::before { border-inline: 1.5px dashed var(--lane); border-block: 0; }
    html.anim-ready .nj-release:not(.revealed) .nj-lanes i::before { transform: scaleY(0); }
    .nj-step { padding: 14px 0 20px; border-inline-start: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 760px) {
    .nj-halves { grid-template-columns: minmax(0, 1fr); margin-top: 34px; }
    .nj-halves::before { display: block; }
    .nj-half::before { display: none; }
    .nj-half + .nj-half { border-inline-start: 0; border-top: 1px solid var(--line-strong); }
    .nj-wire { position: static; display: inline-block; margin: 0 0 12px; background: var(--tint-05); }
    .nj-choose-cols { grid-template-columns: minmax(0, 1fr); }
    .nj-col.is-php { padding-inline-end: 0; }
    .nj-col.is-node { padding-inline-start: 0; border-inline-start: 0; margin-top: 18px; }
    .nj-both { grid-template-columns: minmax(0, 1fr); }
    .nj-links { grid-column: 1; grid-row: auto; margin-top: 8px; }
    .nj-tree li { grid-template-columns: minmax(0, 1fr); }
    .nj-path, .nj-tree li:first-child .nj-path, .nj-tree li:last-child .nj-path { margin-top: 18px; padding: 11px 14px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; box-shadow: none; font-size: 13px; }
    .nj-tree li:first-child .nj-path { margin-top: 0; }
    .nj-note { padding: 12px 0 4px; padding-inline-start: 0; border-top: 0; }
    .nj-tree li:last-child .nj-note { border-bottom: 0; }
    .nj-reg { padding: 14px; }
}
@media (max-width: 480px) {
    .nj-conf { font-size: 12px; padding: 12px; }
    .nj-req-url { flex-basis: 100%; text-align: center; margin: 0; }
}

/* Arabic words in the mono stack take Plex Mono's fixed-width space and read as gapped; the labels
   below carry words, not code, so under RTL they take the body face with no tracking or capitals. */
html[dir="rtl"] .nj-reg-t, html[dir="rtl"] .nj-index-kind, html[dir="rtl"] .nj-half-k,
html[dir="rtl"] .nj-floor-k {
    font-family: var(--font-body, inherit); letter-spacing: 0; text-transform: none; font-size: 13px;
}