/*
 * Safe-Desk IT docs (/docs/*.html): page navigation, code, pending markers,
 * step lists and the architecture diagram, on top of site.css.
 * No inline styles anywhere in these pages; everything visual lives here.
 *
 * @author Thomas G. and Sophia, SOPHIA XT LLC (sophiaxt.com)
 */

/* Page navigation across the docs: a flat strip of angular tabs. */
.dx-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 40px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dx-nav a { font: 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-decoration: none; padding: 6px 10px; border: 1px solid transparent; }
.dx-nav a:hover { color: var(--text); border-color: var(--line); }
.dx-nav a[aria-current="page"] { color: var(--cyan); border-color: rgba(0,212,255,0.45); }

.dx h3 { margin-top: 30px; font-size: 1.15rem; }
.dx p, .dx li { max-width: 72ch; }
.dx ol, .dx ul { padding-left: 1.3em; }
.dx li { margin: 6px 0; }

/* Code blocks and inline code, the same look as the Gate API page. */
.dx pre { background: rgba(4,10,20,0.92); border: 1px solid rgba(255,255,255,0.09); border-left: 2px solid #00d4ff; padding: 14px 16px; overflow-x: auto; margin: 14px 0 0; max-width: 100%; }
.dx pre code { font: 13px/1.6 "JetBrains Mono", ui-monospace, Consolas, monospace; color: #cfe3ee; background: none; padding: 0; white-space: pre; }
.dx code { font: 0.9em "JetBrains Mono", ui-monospace, Consolas, monospace; color: #8fe9ff; background: rgba(0,212,255,0.08); padding: 1px 5px; overflow-wrap: anywhere; }
.dx td code { overflow-wrap: anywhere; }

/* Something that is not live yet. The words "Available after launch" are always in the text itself. */
.pending { border-left: 2px solid #ffc857; padding-left: 12px; }
.dx .tag-pending { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #ffc857; border: 1px solid rgba(255,200,87,0.4); padding: 1px 6px; white-space: nowrap; }
span.pending, code.pending { border-left: 0; padding-left: 0; }

/* Setup order on the hub page. */
.dx-order { counter-reset: dx; list-style: none; padding-left: 0; }
.dx-order > li { counter-increment: dx; position: relative; padding: 14px 0 14px 52px; border-bottom: 1px solid var(--line); max-width: none; }
.dx-order > li::before { content: counter(dx, decimal-leading-zero); position: absolute; left: 0; top: 14px; font: 600 14px var(--mono); color: var(--cyan); border: 1px solid rgba(0,212,255,0.45); padding: 3px 7px; }
.dx-time { font: 12px var(--mono); color: var(--muted); margin-left: 8px; display: inline-block; max-width: 100%; }
.dx-who { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); margin-left: 8px; }

/* Notes that matter. */
.dx-note { border: 1px solid var(--line); border-left: 2px solid var(--cyan); padding: 12px 16px; margin-top: 18px; }
.dx-warn { border-left-color: #ff9f43; }
.dx-src { font-size: 14px; color: var(--muted); }

/* The architecture diagram: drawn in SVG, coloured here. */
.dx-diagram { margin: 22px 0 6px; border: 1px solid var(--line); padding: 10px; background: rgba(4,10,20,0.6); }
.dx-diagram svg { display: block; width: 100%; height: auto; }
.dx-diagram .box { fill: rgba(0,212,255,0.06); stroke: rgba(0,212,255,0.55); stroke-width: 1.2; }
.dx-diagram .box-ours { fill: rgba(102,255,224,0.08); stroke: rgba(102,255,224,0.7); }
.dx-diagram .box-ext { fill: rgba(255,255,255,0.03); stroke: rgba(255,255,255,0.3); stroke-dasharray: 4 3; }
.dx-diagram .lbl { fill: #e6f0f7; font: 600 13px "JetBrains Mono", ui-monospace, Consolas, monospace; }
.dx-diagram .sub { fill: #9fb2c3; font: 11px "JetBrains Mono", ui-monospace, Consolas, monospace; }
.dx-diagram .flow { stroke: #00d4ff; stroke-width: 1.4; fill: none; }
.dx-diagram .flow-real { stroke: #66ffe0; }
.dx-diagram .arrow { fill: #00d4ff; }
.dx-diagram .arrow-real { fill: #66ffe0; }
.dx-diagram figcaption, .dx figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }

/* Troubleshooting entries. */
.dx-trouble { border: 1px solid var(--line); margin-top: 10px; padding: 0 14px; }
.dx-trouble summary { cursor: pointer; padding: 12px 0; font-weight: 600; }
.dx-trouble dl { margin: 0 0 12px; }
.dx-trouble dt { font: 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); margin-top: 10px; }
.dx-trouble dd { margin: 4px 0 0; }

@media (max-width: 640px) {
  .dx-nav a { padding: 5px 7px; font-size: 11px; }
  .dx-order > li { padding-left: 44px; }
  .dx pre code { font-size: 12px; }
}