/* =========================================================================
   tools.css — Nexavorix Pro free business tools
   =========================================================================
   Two zones, on purpose:

     CHROME  (header/footer)  — mothership: deep space, chrome, ice-blue.
                                Carries the Nexavorix identity.
     TOOL    (editor/preview) — light. These tools author printed documents;
                                the preview IS a sheet of paper, and the form
                                beside it has to stay comfortable to work in
                                for a long stretch. A dark editor would fight
                                both. This split is deliberate, not an oversight.

   The tool block below is ported from testrightacademy.com, which supplied the
   eight custom properties from its global stylesheet. Those are redefined here
   (ice-blue accent instead of TRA navy/red) so this file is self-contained —
   nothing depends on TRA's style.css.

   Strict CSP on this vhost: script-src 'self', style-src 'self'. No inline
   styles or scripts, no CDNs. Vendor libraries are self-hosted.
   ========================================================================= */

:root {
    /* --- mothership chrome --- */
    --void:      #06080f;
    --void-2:    #090d17;
    --hull:      #0d1320;
    --line-dk:   #1c2434;
    --chrome:    #cdd6e3;
    --steel:     #838f9f;
    --steel-dim: #5a6576;
    --star:      #7cc4ff;

    /* --- tool surface (the eight properties the ported CSS expects) --- */
    --primary:    #14243a;
    --accent:     #1b6fb8;   /* ice-blue, deep enough for text on white */
    --text:       #1a2433;
    --text-muted: #5a6576;
    --border:     #dfe4ec;
    --light-bg:   #f5f7fa;
    --radius:     6px;
    --shadow:     0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.07);
}

* { box-sizing: border-box; }
body {
    margin: 0; background: #fff; color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.55;
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 22px; }

/* ---- chrome: header ---------------------------------------------------- */
.nx-top {
    background: linear-gradient(180deg, var(--void-2), var(--void));
    border-bottom: 1px solid var(--line-dk); color: var(--chrome);
}
.nx-top-in { display: flex; align-items: center; gap: 16px; padding: 14px 0; flex-wrap: wrap; }
.nx-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--chrome); }
.nx-brand img { height: 30px; width: auto; display: block; }
.nx-brand b { font-weight: 600; letter-spacing: .2em; text-transform: uppercase; font-size: 12px; }
/* Brand mark matches the mothership's: NEXAVORIX // PRO, with both words in
   chrome and only the separator dimmed (see nexavorix.cloud .topbar .brandline). */
.nx-brand .nx-sep {
    color: var(--steel-dim); letter-spacing: .2em; font-size: 12px;
    margin: 0 6px 0 8px;
}
.nx-brand .nx-unit {
    color: var(--chrome); letter-spacing: .2em; text-transform: uppercase;
    font-size: 12px; font-weight: 600;
}
.nx-brand span { color: var(--steel-dim); letter-spacing: .2em; text-transform: uppercase; font-size: 12px; }
.nx-top nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.nx-top nav a {
    color: var(--steel); text-decoration: none; font-size: 11px;
    letter-spacing: .14em; text-transform: uppercase;
}
.nx-top nav a:hover { color: var(--star); }

/* ---- tool hero --------------------------------------------------------- */
.nx-hero { background: var(--void); color: var(--chrome); padding: 40px 0 44px; border-bottom: 1px solid var(--line-dk); }
.nx-eyebrow { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--star); margin: 0 0 10px; }
.nx-hero h1 { margin: 0 0 12px; font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 500; letter-spacing: .01em; }
.nx-hero p { margin: 0; color: var(--steel); max-width: 62ch; }

/* ---- provenance strip: the trust signal -------------------------------- */
.nx-origin {
    background: var(--hull); border-bottom: 1px solid var(--line-dk);
    color: var(--steel); font-size: .88rem;
}
/* was `padding: 12px 0`, which overrode .wrap's 0 22px and left this band's
   text flush against both screen edges on phones. 22px matches .wrap. */
.nx-origin-in { display: flex; align-items: center; gap: 12px; padding: 12px 22px; flex-wrap: wrap; }
.nx-origin i { color: var(--star); }
.nx-origin a { color: var(--star); text-decoration: none; }
.nx-origin a:hover { text-decoration: underline; }

/* ---- licensing CTA ----------------------------------------------------- */
.nx-offer { background: var(--void); color: var(--chrome); padding: 46px 0; border-top: 1px solid var(--line-dk); }
.nx-offer h2 { margin: 0 0 10px; font-weight: 500; font-size: 1.5rem; }
.nx-offer p { color: var(--steel); max-width: 60ch; margin: 0 0 20px; }
.nx-cta {
    display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
    background: var(--star); color: var(--void); font-weight: 700;
    padding: 12px 22px; border-radius: 2px; letter-spacing: .04em;
}
.nx-cta:hover { background: #9ad2ff; }

/* ---- chrome: footer ---------------------------------------------------- */
.nx-foot {
    background: var(--void-2); border-top: 1px solid var(--line-dk);
    color: var(--steel-dim); padding: 26px 0; font-size: 11px;
    letter-spacing: .12em; text-transform: uppercase; text-align: center;
}
.nx-foot a { color: var(--steel); text-decoration: none; }
.nx-foot a:hover { color: var(--star); }

/* =========================================================================
   TOOL — ported verbatim from testrightacademy.com/invoice-generator
   ========================================================================= */
    /* ===== Invoice Generator — page-specific ===== */
    .csg-toolbar {
      position: sticky; top: 70px; z-index: 50;
      background: var(--primary); color: #fff;
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      padding: 10px 24px; flex-wrap: wrap;
    }
    .csg-toolbar .tb-label { font-size: 0.85rem; color: #cbd5e1; max-width: 560px; line-height: 1.4; }
    .csg-toolbar .tb-label strong { color: #fff; }
    .csg-toolbar .tb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .csg-btn {
      display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
      font-family: inherit; font-size: 0.85rem; font-weight: 600;
      padding: 9px 15px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,0.35);
      background: transparent; color: #fff; transition: 0.2s;
    }
    .csg-btn:hover { background: rgba(255,255,255,0.12); }
    .csg-btn.primary { background: #b3271e; border-color: #b3271e; }
    .csg-btn.primary:hover { background: #d94d3f; }

    .csg-info { background: #ecfdf5; border-bottom: 1px solid #a7f3d0; color: #065f46;
      font-size: 0.85rem; padding: 10px 24px; text-align: center; line-height: 1.5; }
    .csg-info i { margin-right: 6px; }

    .csg-wrap { max-width: 1500px; margin: 0 auto; padding: 24px;
      display: grid; grid-template-columns: minmax(340px, 1fr) auto; gap: 26px; align-items: start; }

    /* ---- Editor ---- */
    .csg-editor { min-width: 0; }
    .csg-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
      box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; }
    .csg-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 11px;
      padding: 14px 18px; font-weight: 700; color: var(--primary); font-size: 0.98rem; user-select: none; }
    .csg-card > summary::-webkit-details-marker { display: none; }
    .csg-card > summary .ci { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 6px;
      background: var(--light-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-size: 0.9rem; }
    .csg-card > summary .chev { margin-left: auto; color: var(--text-muted); transition: 0.2s; }
    .csg-card[open] > summary .chev { transform: rotate(90deg); }
    .csg-card .body { padding: 4px 18px 18px; }
    .csg-field { margin-bottom: 13px; }
    .csg-field:last-child { margin-bottom: 0; }
    .csg-field label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 5px; }
    .csg-field input[type=text], .csg-field input[type=email], .csg-field input[type=url],
    .csg-field input[type=tel], .csg-field input[type=number], .csg-field input[type=date],
    .csg-field textarea, .csg-field select {
      width: 100%; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 6px;
      padding: 9px 12px; font-family: inherit; font-size: 0.92rem; color: var(--text); background: #fff; }
    .csg-field input:focus, .csg-field textarea:focus, .csg-field select:focus { outline: none; border-color: var(--accent); }
    .csg-field textarea { resize: vertical; min-height: 60px; line-height: 1.5; }
    .csg-hint { font-size: 0.76rem; color: var(--text-muted); margin-top: 5px; line-height: 1.45; font-style: italic; }
    .csg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .csg-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
    .swatches { display: flex; gap: 6px; margin-top: 7px; }
    .swatches span { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); }
    .seg { display: inline-flex; border: 1.5px solid var(--border); border-radius: 7px; overflow: hidden; }
    .seg button { border: none; background: #fff; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--text-muted); }
    .seg button.on { background: var(--accent); color: #fff; }
    .logo-thumb { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
    .logo-thumb img { max-height: 44px; max-width: 130px; border: 1px solid var(--border); border-radius: 4px; padding: 3px; background: #fff; }
    .csg-mini { padding: 8px 13px; font-size: 0.82rem; border: 1.5px solid var(--accent); background: var(--accent);
      color: #fff; border-radius: 6px; cursor: pointer; font-weight: 600; white-space: nowrap; }
    .csg-mini.ghost { background: #fff; color: var(--accent); }

    /* chips (payment methods) */
    .csg-chips { display: flex; flex-wrap: wrap; gap: 7px; }
    .csg-chip { cursor: pointer; font-size: 0.8rem; padding: 6px 11px; border-radius: 50px;
      border: 1.5px solid var(--border); background: #fff; color: var(--text); transition: 0.15s; user-select: none; }
    .csg-chip:hover { border-color: var(--accent); }
    .csg-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
    .csg-chip.on::before { content: "\2713  "; font-weight: 700; }

    /* line item rows */
    .item-head, .item-row { display: grid; grid-template-columns: 1fr 64px 92px 92px 34px; gap: 7px; align-items: center; }
    .item-head { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
      color: var(--text-muted); margin-bottom: 6px; }
    .item-row { margin-bottom: 7px; }
    .item-row input { box-sizing: border-box; width: 100%; border: 1.5px solid var(--border); border-radius: 6px;
      padding: 8px 10px; font-family: inherit; font-size: 0.9rem; color: var(--text); }
    .item-row input:focus { outline: none; border-color: var(--accent); }
    .item-row .amt { font-size: 0.88rem; font-weight: 700; color: var(--primary); text-align: right; padding-right: 2px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .csg-del { flex: 0 0 auto; width: 34px; height: 34px; border: 1.5px solid var(--border); background: #fff;
      color: #b3271e; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
    .csg-del:hover { border-color: #b3271e; background: #fef2f2; }
    .csg-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
    .csg-quick button { font-size: 0.76rem; padding: 5px 10px; border-radius: 50px; border: 1px dashed var(--accent);
      background: #fff; color: var(--accent); cursor: pointer; }
    .csg-quick button:hover { background: var(--light-bg); }
    .ed-totals { margin-top: 12px; border-top: 1.5px dashed var(--border); padding-top: 10px;
      display: flex; justify-content: flex-end; font-size: 0.92rem; font-weight: 700; color: var(--primary); gap: 8px; }

    /* ---- Preview ---- */
    .csg-preview { position: sticky; top: 132px; width: 816px; }
    .csg-scaler { transform-origin: top left; }
    .page-meter { margin-top: 12px; padding: 9px 14px; border-radius: 7px; font-size: 0.82rem; font-weight: 600; text-align: center; }
    .page-meter.ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
    .page-meter.warn { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
    .page-meter.over { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

    /* ===== The invoice sheet (Letter) ===== */
    .sheet { --accent: #0d2e4e; width: 8.5in; min-height: 11in; box-sizing: border-box;
      background: #fff; color: #1f2937; padding: 0.55in 0.6in 0.5in; box-shadow: 0 6px 30px rgba(13,46,78,0.18);
      font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 10pt; display: flex; flex-direction: column;
      border-top: 6px solid var(--accent); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .sheet * { box-sizing: border-box; }
    .inv-fs { font-size: var(--fs, 10pt); flex: 1; display: flex; flex-direction: column; }
    .st-ghost { color: #b6c0cc !important; }

    .inv-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 18px; }
    .inv-biz { display: flex; gap: 16px; align-items: flex-start; min-width: 0; }
    .inv-logo { max-height: 0.8in; max-width: 2.1in; flex: 0 0 auto; }
    .inv-bizname { font-size: 1.45em; font-weight: 800; color: var(--accent); line-height: 1.15; letter-spacing: 0.01em; }
    .inv-bizdet { font-size: 0.84em; color: #6b7280; line-height: 1.55; margin-top: 5px; white-space: pre-line; }
    .inv-badge { text-align: right; flex: 0 0 auto; }
    .inv-title { font-size: 1.85em; font-weight: 700; letter-spacing: 0.3em; margin-right: -0.3em; color: #334155; line-height: 1; }
    .inv-num { font-size: 0.88em; color: #6b7280; font-weight: 600; letter-spacing: 0.04em; margin-top: 6px; }
    .inv-due-panel { margin-top: 12px; display: inline-block; background: #f5f8fb; border: 1px solid #e2e8f0;
      border-radius: 6px; padding: 8px 14px 9px; text-align: right; }
    .inv-due-panel .lbl { font-size: 0.66em; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #6b7280; }
    .inv-due-panel .val { font-size: 1.5em; font-weight: 800; color: var(--accent); line-height: 1.2; font-variant-numeric: tabular-nums; }
    .inv-due-panel .sub { font-size: 0.72em; color: #6b7280; margin-top: 1px; }
    .inv-rule { height: 1px; background: #e2e8f0; margin: 0 0 18px; }

    .inv-mid { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
    .inv-billto { min-width: 0; }
    .inv-h { font-size: 0.72em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: #94a3b8; margin-bottom: 5px; }
    .inv-billto .who { font-size: 1.05em; font-weight: 700; color: #1f2937; }
    .inv-billto .det { font-size: 0.86em; color: #4b5563; line-height: 1.5; white-space: pre-line; margin-top: 2px; }
    .inv-meta { flex: 0 0 auto; }
    .inv-meta table { border-collapse: collapse; }
    .inv-meta td { font-size: 0.86em; padding: 3px 0 3px 26px; text-align: right; color: #1f2937; font-variant-numeric: tabular-nums; }
    .inv-meta td.k { font-weight: 700; color: #94a3b8; text-transform: uppercase; font-size: 0.7em; letter-spacing: 0.08em; }
    .inv-meta tr.due-row td { font-weight: 800; color: var(--accent); }
    .inv-meta tr.due-row td.k { color: var(--accent); }

    .inv-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
    .inv-table th { color: var(--accent); font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.08em;
      font-weight: 800; padding: 0 10px 7px; text-align: left; border-bottom: 2px solid var(--accent); }
    .inv-table th.r, .inv-table td.r { text-align: right; font-variant-numeric: tabular-nums; }
    .inv-table td { font-size: 0.9em; padding: 8px 10px; border-bottom: 1px solid #eef2f6; color: #374151; vertical-align: top; }
    .inv-table th:first-child, .inv-table td:first-child { padding-left: 2px; }
    .inv-table th:last-child, .inv-table td:last-child { padding-right: 2px; }
    .inv-table td.amt-col { font-weight: 600; color: #1f2937; }
    .inv-table td .idesc { line-height: 1.4; }

    .inv-bottom { display: flex; justify-content: space-between; gap: 30px; align-items: flex-start; }
    .inv-notes { flex: 1; min-width: 0; }
    .inv-notes .blk { margin-bottom: 12px; }
    .inv-notes .blk p { font-size: 0.84em; color: #4b5563; line-height: 1.5; margin: 0; white-space: pre-line; }
    .inv-pills { display: flex; flex-wrap: wrap; gap: 4px; }
    .inv-pill { font-size: 0.74em; padding: 2px 9px; border-radius: 50px; border: 1px solid #cbd5e1; color: #475569; }
    .inv-totals { flex: 0 0 2.8in; }
    .inv-totals table { width: 100%; border-collapse: collapse; }
    .inv-totals td { font-size: 0.88em; padding: 5px 2px; color: #6b7280; }
    .inv-totals td.v { text-align: right; font-weight: 600; color: #1f2937; font-variant-numeric: tabular-nums; }
    .inv-totals tr.total td { border-top: 2px solid var(--accent); font-weight: 800; color: var(--accent); font-size: 1.04em; padding-top: 8px; }
    .inv-totals tr.due td { background: var(--accent); color: #fff; font-weight: 800; padding: 8px 10px; font-size: 1.02em; }
    .inv-totals tr.due td:first-child { border-radius: 5px 0 0 5px; }
    .inv-totals tr.due td:last-child { border-radius: 0 5px 5px 0; }

    .inv-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid #e2e8f0;
      display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.8em; color: #94a3b8; }
    .inv-foot .thanks { font-weight: 700; color: var(--accent); }

    /* Modern template */
    .sheet.tpl-modern { border-top: none; }
    .sheet.tpl-modern .inv-top { background: var(--accent); margin: -0.55in -0.6in 0; padding: 0.34in 0.6in; align-items: center; }
    .sheet.tpl-modern .inv-bizname, .sheet.tpl-modern .inv-title { color: #fff; }
    .sheet.tpl-modern .inv-bizdet, .sheet.tpl-modern .inv-num { color: rgba(255,255,255,0.78); }
    .sheet.tpl-modern .inv-logo { background: #fff; border-radius: 6px; padding: 5px; }
    .sheet.tpl-modern .inv-due-panel { background: rgba(255,255,255,0.14); border-color: transparent; }
    .sheet.tpl-modern .inv-due-panel .lbl, .sheet.tpl-modern .inv-due-panel .sub { color: rgba(255,255,255,0.85); }
    .sheet.tpl-modern .inv-due-panel .val { color: #fff; }
    .sheet.tpl-modern .inv-rule { display: none; }
    .sheet.tpl-modern .inv-mid { margin-top: 22px; }
    .sheet.tpl-modern .inv-table th { background: var(--accent); color: #fff; border-bottom: none; padding: 7px 10px; }
    .sheet.tpl-modern .inv-table th:first-child { padding-left: 10px; border-radius: 4px 0 0 4px; }
    .sheet.tpl-modern .inv-table th:last-child { padding-right: 10px; border-radius: 0 4px 4px 0; }
    .sheet.tpl-modern .inv-table td:first-child { padding-left: 10px; }
    .sheet.tpl-modern .inv-table td:last-child { padding-right: 10px; }

    /* ===== Print ===== */
    @page { size: letter; margin: 0; }
    @media print {
      .nav, .csg-toolbar, .csg-info, .csg-editor, .page-meter, .page-hero, footer, .fb-band, .csg-foot-note, .csg-mobile-bar { display: none !important; }
      body { padding: 0 !important; background: #fff !important; }
      .csg-wrap { display: block !important; padding: 0 !important; max-width: none !important; }
      .csg-preview { position: static !important; width: auto !important; top: 0 !important; }
      .csg-scaler { transform: none !important; height: auto !important; }
      .sheet { box-shadow: none !important; margin: 0 !important; width: 8.5in !important; min-height: 0 !important; }
      .st-ghost { display: none !important; }
    }

    /* ===== Responsive ===== */
    @media (max-width: 1180px) {
      .csg-wrap { grid-template-columns: 1fr; }
      .csg-preview { position: static; width: 100%; overflow: hidden; }
    }
    @media (max-width: 700px) {
      .csg-toolbar { top: 60px; }
      .csg-preview { top: 0; }
      .csg-grid2, .csg-grid3 { grid-template-columns: 1fr; }
      .csg-mobile-bar { display: flex !important; }
      .item-head { display: none; }
      .item-row { grid-template-columns: 1fr 54px 80px 34px; }
      .item-row .amt { display: none; }
    }
    .csg-mobile-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
      background: var(--primary); padding: 10px 14px; gap: 10px; box-shadow: 0 -4px 18px rgba(0,0,0,0.25); }
    .csg-mobile-bar .csg-btn { flex: 1; justify-content: center; }
    .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: #0d2e4e; color: #fff;
      padding: 11px 20px; border-radius: 8px; font-size: 0.9rem; z-index: 200; opacity: 0; transition: 0.3s; pointer-events: none; }
    .toast.show { opacity: 1; }
    #pdfOverlay { position: fixed; inset: 0; z-index: 300; background: rgba(13,46,78,0.9); color: #fff;
      display: none; flex-direction: column; align-items: center; justify-content: center; gap: 16px; font-size: 1rem; font-weight: 600; }
    #pdfOverlay.show { display: flex; }
    .pdf-spin { width: 44px; height: 44px; border: 4px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: pdfspin 0.8s linear infinite; }
    @keyframes pdfspin { to { transform: rotate(360deg); } }
    .pdf-capturing .st-ghost { display: none !important; }
    .pdf-capturing .sheet { box-shadow: none !important; }
/* working area between the dark chrome bands */
.nx-toolarea { padding: 28px 22px 40px; }

/* =========================================================================
   STATION 04  —  the substation treatment
   =========================================================================
   nexavorix.cloud is the mothership: bridge view, dense starfield, aurora,
   crest. This is an outpost of the same fleet, so it shares the palette and
   the sky but carries a working, technical character instead of a ceremonial
   one:

     - a persistent station strip (designation, network, live clock)
     - a faint blueprint grid the mothership does not have
     - corner ticks on panels, like plated hardware
     - a sparser, slower starfield (see station.js)

   Same star system, smaller place. Painted by assets/js/station.js — external,
   because script-src is 'self' here.
   ========================================================================= */

/* ---- sky ---------------------------------------------------------------- *
   z-index:-1 for the same reason the mothership's is: these are body-level
   siblings of in-flow content, and a positioned element at 0 paints ABOVE it. */
#stars {
    position: fixed; inset: 0; z-index: -2;
    display: block; pointer-events: none;
}
.stn-grid {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .45;
    background-image:
        repeating-linear-gradient(0deg,   rgba(124,196,255,.05) 0 1px, transparent 1px 68px),
        repeating-linear-gradient(90deg,  rgba(124,196,255,.05) 0 1px, transparent 1px 68px);
    mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
    -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 78%);
}
.stn-vignette {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    box-shadow: inset 0 0 200px 36px rgba(0,0,0,.7);
}

/* ---- station strip ------------------------------------------------------ */
.stn-bar {
    position: relative; z-index: 4;
    background: linear-gradient(180deg, rgba(9,13,23,.94), rgba(6,8,15,.94));
    border-bottom: 1px solid var(--line-dk);
}
.stn-bar-in {
    display: flex; align-items: center; gap: 12px; padding: 7px 22px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--steel-dim);
}
.stn-id { color: var(--star); }
.stn-id::before {
    content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--star); box-shadow: 0 0 7px var(--star); margin-right: 8px;
    vertical-align: middle; animation: stnpulse 3.2s ease-in-out infinite;
}
.stn-sep { opacity: .4; }
.stn-clock { margin-left: auto; color: var(--steel); font-variant-numeric: tabular-nums; }
@keyframes stnpulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .stn-id::before { animation: none; } }
@media (max-width: 640px) { .stn-net { display: none; } }

/* ---- plated panels: corner ticks ---------------------------------------- */
.tool-card, .wsnode { position: relative; }
.tool-card::after {
    content: ""; position: absolute; right: 10px; bottom: 10px;
    width: 12px; height: 12px; pointer-events: none;
    border-right: 1px solid rgba(124,196,255,.28);
    border-bottom: 1px solid rgba(124,196,255,.28);
}
/* the chrome sits above the sky */
.nx-top, .nx-hero, .lp-hero, .nx-origin, .lp-band, .nx-toolarea, .nx-offer, .nx-foot { position: relative; z-index: 1; }
/* the hero bands are translucent so the grid + stars read through them */
.lp-hero, .nx-hero { background: rgba(6,8,15,.72); }
.lp-band { background: rgba(9,13,23,.82); }

/* =========================================================================
   STATION 04 — pushed further: own accent, heavier grid, scanlines
   =========================================================================
   The outpost gets its own beacon hue instead of borrowing the mothership's
   ice-blue. #9d8cff was chosen by measurement, not taste: it sits 43.7 deg
   from the nearest existing fleet accent in OKLCH hue (studio #7cc4ff 244.6,
   TestRight #7de0c6 174.8, Intel #ffb173 58.5) and clears 7.27:1 on the void.
   Every amber candidate tested collided with Intel's orange inside 17 deg.

   Redefining --star here re-tints every accent at once — buttons, focus rings,
   card rails, ticks — so the station is consistently its own colour without
   touching the shared structural tokens.
   ========================================================================= */

:root {
    --star: #9d8cff;          /* Station 04 beacon (was the mothership's #7cc4ff) */
    --star-dim: #7d6ce0;
    --beacon-glow: rgba(157,140,255,.42);
}

/* ---- heavier blueprint grid -------------------------------------------- */
.stn-grid {
    opacity: .85;
    background-image:
        /* minor rules */
        repeating-linear-gradient(0deg,  rgba(157,140,255,.055) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(90deg, rgba(157,140,255,.055) 0 1px, transparent 1px 34px),
        /* major rules every 5th cell, so the grid reads as a drawing not a texture */
        repeating-linear-gradient(0deg,  rgba(157,140,255,.11) 0 1px, transparent 1px 170px),
        repeating-linear-gradient(90deg, rgba(157,140,255,.11) 0 1px, transparent 1px 170px);
    mask-image: radial-gradient(130% 100% at 50% 0%, #000 42%, transparent 88%);
    -webkit-mask-image: radial-gradient(130% 100% at 50% 0%, #000 42%, transparent 88%);
}

/* ---- scanlines ---------------------------------------------------------- *
   Fixed, non-animated and very low contrast. A moving or heavy scanline is a
   nausea and readability problem over dense forms, so this is texture only. */
.stn-scan {
    position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
    background: repeating-linear-gradient(180deg,
        rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}
@media (prefers-reduced-motion: reduce) { .stn-scan { opacity: .3; } }

/* ---- beacon accents ----------------------------------------------------- */
.stn-id::before { box-shadow: 0 0 8px var(--star); }
.stn-bar { border-bottom-color: rgba(157,140,255,.22); }
.tool-card::after {
    border-right-color: rgba(157,140,255,.34);
    border-bottom-color: rgba(157,140,255,.34);
}
.reticle { border-color: rgba(157,140,255,.20); }
.nx-cta { color: #0b0714; }
.nx-cta:hover { background: #b7a9ff; color: #0b0714; }

/* the working surface keeps its readable ice-blue link colour: violet on white
   is noticeably harder to read at body size, and the tools are for long sessions */
.nx-toolarea { --accent: #1b6fb8; }

/* =========================================================================
   Brand mark positioned like the mothership's
   =========================================================================
   nexavorix.cloud puts its brandline in a .topbar with NO max-width and
   padding 20px 34px, so it sits against the viewport edge. Pro's header was
   inside .wrap (max-width 1180px, auto margins), which inset the mark on any
   wide screen — same markup, visibly different position. This matches cloud:
   full-bleed bar, brand hard left, nav hard right, same type treatment.
   ========================================================================= */
.nx-top .wrap { max-width: none; margin: 0; padding: 0; }
.nx-top-in { padding: 20px 34px; justify-content: space-between; gap: 16px; }
.nx-brand { gap: 12px; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; }
.nx-brand b       { font-weight: 400; letter-spacing: .28em; font-size: 11px; color: var(--chrome); }
.nx-brand .nx-sep { color: var(--steel-dim); letter-spacing: .28em; font-size: 11px; margin: 0 2px; }
.nx-brand .nx-unit{ font-weight: 400; letter-spacing: .28em; font-size: 11px; color: var(--chrome); }
.nx-top nav { margin-left: 0; }
@media (max-width: 700px) { .nx-top-in { padding: 16px 20px; } .nx-brand { letter-spacing: .18em; } }

/* ==========================================================================
   SHIP STATUS RAIL — every page, one source. All pages already load this sheet
   and station.js, which drives #stnClock.
   ========================================================================== */
.stn-rail {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; justify-content: center; gap: 8px 26px; flex-wrap: wrap;
  padding: 7px 16px;
  background: linear-gradient(180deg, rgba(6,8,15,0), rgba(6,8,15,.92) 42%);
  border-top: 1px solid rgba(157,140,255,.14);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: #7d88a0; pointer-events: none;
}
.stn-rail b { color: #b9aaff; font-weight: 500; }
.stn-rail .lamp {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: #6ee7a5; box-shadow: 0 0 7px #6ee7a5; margin-right: 7px;
  animation: stn-pulse 3.2s ease-in-out infinite;
}
@keyframes stn-pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
/* Content must be able to clear the fixed rail on every page. */
body { padding-bottom: 44px; }
@media (max-width: 720px) {
  .stn-rail { gap: 6px 14px; font-size: .56rem; letter-spacing: .14em; padding: 6px 10px; }
  .stn-rail span:nth-child(3) { display: none; }
}
/* Seven generator pages show a fixed action bar (.csg-mobile-bar, z-index 60)
   at <=700px carrying Preview / Download PDF. The rail is decorative and
   pointer-events:none, so it never blocked those buttons, but it should not
   sit behind them either — and those pages need no extra bottom clearance. */
@media (max-width: 700px) {
  body:has(.csg-mobile-bar) .stn-rail { display: none; }
  body:has(.csg-mobile-bar) { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .stn-rail .lamp { animation: none !important; } }