/* ═══════════════════════════════════════════════════════════════════════════
   AI WORKFLOW X-RAY — page-specific styles
   ───────────────────────────────────────────────────────────────────────────
   Loaded by ai-workflow-xray.html only, after dv-style.css. Everything here is
   namespaced .xr-*, so no other page can be affected by a change in this file
   (same convention as .hv-* on the homepage, .pd-* on the product pages).

   Site chrome (nav, page-hero, eyebrow, buttons, form-*, cases-grid, footer)
   is reused straight from dv-style.css — nothing is redeclared here. The only
   genuinely new tokens are the five-mode taxonomy colours, because that
   palette does not exist anywhere else on the site (spec §4.10):
   CODE / AUTOMATION / AI / AGENT / HUMAN. AUTOMATION reuses --cyan and AGENT
   reuses --amber — both already live on the site; CODE (indigo) and AI
   (purple) and HUMAN (green) are new, chosen to sit apart from --cyan,
   --amber, --rose and --emerald so none of the five are ever confused with
   an existing status colour.

   Design source: D:\datavoris Website\_concepts\2026-09-28-ai-workflow-xray\index.html
   Spec: docs/ai-workflow-xray.md
   ═══════════════════════════════════════════════════════════════════════════ */

.xr-page {
  --xr-m-human: #0f7a4f;      --xr-m-human-dim: rgba(15,122,79,.09);
  --xr-m-code:  #3b4fa8;      --xr-m-code-dim:  rgba(59,79,168,.08);
  --xr-m-auto:  var(--cyan);  --xr-m-auto-dim:  var(--cyan-dim);
  --xr-m-ai:    #7a3fa0;      --xr-m-ai-dim:    rgba(122,63,160,.08);
  --xr-m-agent: var(--amber); --xr-m-agent-dim: var(--amber-dim);
}

/* ── shared bits ── */
.xr-page :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }
.xr-hidden { display: none !important; }
.xr-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── hero extras (the hero itself is .page-hero, reused as-is) ── */
.xr-hero-cta { display: flex; align-items: center; gap: 1.1rem; margin-top: 1.7rem; flex-wrap: wrap; }
.xr-hero-trust { font-size: 0.82rem; color: var(--text-500); display: flex; align-items: center; gap: 0.45rem; }
.xr-hero-trust svg { width: 15px; height: 15px; stroke: var(--cyan-bright); fill: none; stroke-width: 1.8; flex: none; }
.xr-hero-tiles { display: flex; gap: 1.6rem; margin-top: 2.4rem; flex-wrap: wrap; }
.xr-hero-tile b { display: block; font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.xr-hero-tile span { font-size: 0.78rem; color: var(--text-500); }

/* ── tool shell — the light app surface every non-hero phase sits in ── */
.xr-tool { background: var(--surface-off); min-height: 60vh; padding: 2.4rem 0 4rem; }
.xr-tool-card { max-width: 640px; margin: 0 auto; background: var(--surface-card); border: 1px solid var(--border-white); border-radius: var(--r-lg); box-shadow: var(--shadow-white); padding: clamp(1.5rem,4vw,2.4rem); }
.xr-tool-card.xr-wide { max-width: 900px; }
.xr-tool-bar { max-width: 640px; margin: 0 auto 1rem; display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: var(--on-white-300); }
.xr-tool-bar svg { width: 15px; height: 15px; stroke: var(--cyan); fill: none; stroke-width: 1.8; flex: none; }

/* ── journey rail — five steps, persistent from question 1 to confirmation ── */
.xr-rail { position: sticky; top: 62px; z-index: 150; background: var(--surface-card); border-bottom: 1px solid var(--border-white); }
.xr-rail[hidden] { display: none; }
.xr-rail-in { display: flex; align-items: center; gap: 0.5rem; min-height: 56px; }
.xr-rail-list { display: flex; list-style: none; padding: 0; margin: 0; flex: 1; min-width: 0; }
.xr-rail-list li { display: flex; align-items: center; flex: 1; min-width: 0; }
.xr-rail-list li:last-child { flex: 0 0 auto; }
.xr-rs { display: flex; align-items: center; gap: 0.55rem; color: var(--on-white-500); font-size: 0.82rem; font-weight: 500; padding: 0.3rem 0.2rem; text-decoration: none; white-space: nowrap; }
.xr-rs-n { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-white); display: grid; place-items: center; font-family: var(--font-mono); font-size: 0.72rem; flex: none; background: var(--surface-card); }
.xr-rs-n svg { width: 13px; height: 13px; }
.xr-rs.done { color: var(--on-white-700); }
.xr-rs.done .xr-rs-n { background: var(--xr-m-human); border-color: var(--xr-m-human); color: #fff; }
a.xr-rs:hover { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px; }
.xr-rs.now { color: var(--on-white-900); font-weight: 700; }
.xr-rs.now .xr-rs-n { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.xr-rs.next .xr-rs-n { border-style: dashed; }
.xr-rline { height: 1.5px; background: var(--border-white); flex: 1; margin: 0 0.6rem; min-width: 12px; }
.xr-rline.done { background: var(--xr-m-human); }
.xr-rail-m { display: none; }
.xr-rail-tools { flex: none; }
.xr-rail-save { display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-size: 0.8rem; color: var(--on-white-700); background: var(--surface-card); border: 1px solid var(--border-white); border-radius: 6px; padding: 0.4rem 0.7rem; cursor: pointer; white-space: nowrap; }
.xr-rail-save:hover { border-color: var(--cyan); color: var(--cyan); }
.xr-btn-ic { width: 16px; height: 16px; flex: none; }
@media (max-width: 820px) {
  .xr-rail-list, .xr-rail-save .xr-cl-label { display: none; }
  .xr-rail-m { display: flex; align-items: center; gap: 0.7rem; flex: 1; min-width: 0; font-size: 0.85rem; color: var(--on-white-700); }
  .xr-rail-m b { color: var(--on-white-900); }
  .xr-rdots { display: flex; gap: 4px; flex: none; }
  .xr-rdots i { width: 16px; height: 5px; border-radius: 3px; background: var(--border-white); }
  .xr-rdots i.d { background: var(--xr-m-human); }
  .xr-rdots i.c { background: var(--navy-800); }
  .xr-rail-save { padding: 0.5rem; }
}
@media (max-width: 400px) { .xr-rdots i { width: 12px; } }

/* ── question card ── */
.xr-qx-top { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.xr-qx-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--cyan-dim); display: grid; place-items: center; flex: none; }
.xr-qx-ic svg { width: 18px; height: 18px; stroke: var(--cyan); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.xr-qx-cat { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); font-weight: 600; }
.xr-qx-count { margin-left: auto; font-family: var(--font-mono); font-size: 0.76rem; color: var(--on-white-300); }
.xr-qx-text { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.32; color: var(--on-white-900); margin-bottom: 0.5rem; }
.xr-qx-sub { font-size: 0.86rem; color: var(--on-white-500); margin-bottom: 1.3rem; }
.xr-qx-why { margin-bottom: 1.2rem; }
.xr-qx-why-btn { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--on-white-300); background: none; border: 0; cursor: pointer; padding: 0; font: inherit; }
.xr-qx-why-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.xr-qx-why-body { font-size: 0.83rem; color: var(--on-white-500); background: var(--surface-off); border: 1px solid var(--border-white); border-radius: var(--r-sm); padding: 0.7rem 0.85rem; margin-top: 0.55rem; line-height: 1.55; }
.xr-qx-error { font-size: 0.82rem; color: #b3344a; margin: -0.6rem 0 1rem; }

/* ── question progress (seven segments) ── */
.xr-qprog { display: flex; gap: 5px; margin-bottom: 0.7rem; }
.xr-qprog i { flex: 1; height: 5px; border-radius: 3px; background: var(--border-white); }
.xr-qprog i.d { background: var(--xr-m-human); }
.xr-qprog i.c { background: var(--navy-800); }
.xr-qmeta { display: flex; justify-content: space-between; align-items: center; gap: 0.4rem 1rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.72rem; color: var(--on-white-300); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1.3rem; }
.xr-saved { display: inline-flex; align-items: center; gap: 0.35rem; text-transform: none; letter-spacing: 0; }
.xr-saved svg { width: 13px; height: 13px; stroke: var(--xr-m-human); }

/* ── multi-select option cards, one icon each ── */
.xr-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 1rem; }
.xr-opt { display: flex; gap: 0.7rem; align-items: center; min-height: 54px; font: inherit; font-size: 0.93rem; color: var(--on-white-900); text-align: left; background: var(--surface-card); border: 1.5px solid var(--border-white); border-radius: var(--r-md); padding: 0.7rem 0.9rem; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.xr-opt:hover { border-color: rgba(0,110,140,.5); }
.xr-opt-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--surface-off); color: var(--on-white-500); display: grid; place-items: center; flex: none; }
.xr-opt-ic svg { width: 19px; height: 19px; }
.xr-opt-label { flex: 1; min-width: 0; }
.xr-opt-tick { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--border-white); display: grid; place-items: center; flex: none; color: #fff; }
.xr-opt-tick svg { width: 12px; height: 12px; opacity: 0; }
.xr-opt.is-on { border-color: var(--cyan); background: var(--cyan-dim); font-weight: 600; }
.xr-opt.is-on .xr-opt-ic { background: var(--cyan); color: #fff; }
.xr-opt.is-on .xr-opt-tick { background: var(--cyan); border-color: var(--cyan); }
.xr-opt.is-on .xr-opt-tick svg { opacity: 1; }
@media (max-width: 520px) { .xr-opts { grid-template-columns: 1fr; } }

/* ── radio-card ── */
/* ── radio-card + segmented ── */
.xr-radio-cards { display: flex; flex-direction: column; gap: 0.5rem; }
.xr-rcard { display: flex; gap: 0.6rem; align-items: flex-start; border: 1px solid var(--border-white); border-radius: var(--r-sm); padding: 0.65rem 0.8rem; font-size: 0.86rem; width: 100%; text-align: left; background: var(--surface-card); cursor: pointer; font: inherit; color: inherit; }
.xr-rcard .xr-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-white); flex: none; margin-top: 1px; }
.xr-rcard.is-on { border-color: var(--cyan); background: var(--cyan-dim); }
.xr-rcard.is-on .xr-dot { border-color: var(--cyan); background: radial-gradient(circle,var(--cyan) 0 40%,transparent 42%); }
.xr-rcard b { display: block; color: var(--on-white-900); font-weight: 600; }
.xr-rcard span.xr-d { color: var(--on-white-500); }

/* ── conditional signoff field ── */
.xr-cond-field { border: 1px dashed var(--cyan); border-radius: var(--r-sm); padding: 0.8rem 0.9rem; background: var(--cyan-dim); margin-bottom: 1rem; }
.xr-cond-field .form-label { color: var(--cyan); }

.xr-nav-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; }
.xr-nav-row .xr-link { margin-right: auto; }
.xr-nav-row .btn { margin-left: auto; }
.xr-nav-row .btn[disabled] { background: #c9d3e3; color: #fff; cursor: not-allowed; transform: none; }
.xr-link { color: var(--cyan); font-weight: 600; display: inline-flex; gap: 0.35rem; align-items: center; font-size: 0.9rem; background: none; border: 0; cursor: pointer; font-family: inherit; padding: 0; }
.xr-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.xr-hint { font-size: 0.78rem; color: var(--on-white-300); text-align: right; margin-top: 0.55rem; }
.xr-hint.has-enter::after { content: " · press Enter to continue"; }
.xr-hint.is-need { color: var(--on-white-500); }
@media (hover: none) { .xr-hint.has-enter::after { content: ""; } }

/* ══════════════════════════════════════════════════════════════════════
   SCORES — three deliberately different visual grammars, so the autonomy
   ceiling never reads as "a fourth score of the same kind" (spec §4.8).
   ══════════════════════════════════════════════════════════════════════ */
.xr-class-badge { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--cyan-dim); border: 1px solid var(--border-accent); border-radius: 999px; padding: 0.5rem 0.5rem 0.5rem 1rem; margin-bottom: 1rem; }
.xr-class-badge .xr-dots { display: flex; gap: 3px; }
.xr-class-badge .xr-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--border-white); }
.xr-class-badge .xr-dots i.is-on { background: var(--cyan); }
.xr-class-badge.xr-warn .xr-dots i.is-on { background: var(--amber); }
.xr-class-badge.xr-human .xr-dots i.is-on { background: var(--xr-m-human); }
.xr-class-badge b { font-size: 0.86rem; color: var(--on-white-900); font-weight: 700; }
.xr-class-badge b em { font-style: normal; font-weight: 600; color: var(--on-white-300); margin-left: 0.35rem; font-size: 0.78rem; }
.xr-result-h { font-size: clamp(1.4rem,3vw,1.8rem); margin-bottom: 0.5rem; }
.xr-result-lede { font-size: 0.94rem; color: var(--on-white-500); max-width: 62ch; margin-bottom: 1.6rem; line-height: 1.65; }

.xr-cls-legend { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1.8rem; padding: 0.9rem; background: var(--surface-off); border: 1px solid var(--border-white); border-radius: var(--r-md); }
.xr-cls-item { flex: 1; min-width: 96px; text-align: center; padding: 0.5rem 0.3rem; border-radius: 7px; font-size: 0.66rem; color: var(--on-white-300); border: 1px solid transparent; }
.xr-cls-item b { display: block; font-size: 0.72rem; color: var(--on-white-500); margin-bottom: 0.15rem; }
.xr-cls-item.is-on { background: var(--surface-card); border-color: var(--cyan); box-shadow: var(--shadow-white); }
.xr-cls-item.is-on b { color: var(--cyan); }
.xr-cls-item.xr-warn.is-on { border-color: var(--amber); }
.xr-cls-item.xr-warn.is-on b { color: var(--amber); }

/* classification line + three rings: the free score's first screen */
.xr-res-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.4rem; align-items: center; }
.xr-cls { display: inline-flex; gap: 0.6rem; align-items: center; font-size: 0.8rem; font-weight: 600; color: var(--cyan); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; }
.xr-cls .xr-dots { display: flex; gap: 3px; }
.xr-cls .xr-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-white); }
.xr-cls .xr-dots i.is-on { background: var(--cyan); }
.xr-cls.xr-warn { color: var(--amber); } .xr-cls.xr-warn .xr-dots i.is-on { background: var(--amber); }
.xr-cls.xr-human { color: var(--xr-m-human); } .xr-cls.xr-human .xr-dots i.is-on { background: var(--xr-m-human); }
.xr-res-top .xr-result-h { margin: 0.4rem 0 0.6rem; font-size: clamp(1.5rem, 3.6vw, 2rem); }
.xr-res-take { font-size: 1.02rem; color: var(--on-white-700); max-width: 52ch; line-height: 1.6; }
.xr-minis { display: flex; gap: 1rem; }
.xr-mini-r { text-align: center; font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--on-white-500); }
.xr-mini-r .xr-ring { width: 64px; height: 64px; margin: 0 auto 0.35rem; position: relative; }
.xr-mini-r .xr-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.xr-mini-r .xr-ring circle { fill: none; stroke-width: 8; }
.xr-mini-r .xr-trk { stroke: var(--border-white); }
.xr-mini-r .xr-num { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--on-white-900); }
.xr-mini-r.xr-p-auto .xr-fg { stroke: var(--xr-m-auto); }
.xr-mini-r.xr-p-ai .xr-fg { stroke: var(--xr-m-ai); }
.xr-mini-r.xr-p-agent .xr-fg { stroke: var(--xr-m-agent); }
@media (max-width: 640px) { .xr-res-top { grid-template-columns: 1fr; } }

.xr-detail-lede { font-size: 0.9rem; color: var(--on-white-500); margin-bottom: 1rem; }
.xr-detail { margin-top: 1.4rem; }
.xr-how { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border-white); }
.xr-how[hidden] { display: none; }

.xr-hc-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: var(--xr-m-human-dim); border: 1px solid rgba(15,122,79,.28); border-radius: var(--r-md); padding: 0.9rem 1.1rem; margin-bottom: 1.4rem; }
.xr-hc-row .xr-ic { width: 34px; height: 34px; border-radius: 8px; background: var(--surface-card); display: grid; place-items: center; flex: none; border: 1px solid rgba(15,122,79,.3); }
.xr-hc-row .xr-ic svg { width: 18px; height: 18px; stroke: var(--xr-m-human); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.xr-hc-row b { display: block; font-size: 0.88rem; color: var(--on-white-900); }
.xr-hc-row .xr-lvl { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--xr-m-human); text-transform: uppercase; background: var(--surface-card); border: 1px solid rgba(15,122,79,.3); border-radius: 999px; padding: 0.18rem 0.6rem; margin-left: 0.5rem; }
.xr-hc-row .xr-bar { flex: 1; height: 6px; background: var(--surface-card); border: 1px solid rgba(15,122,79,.25); border-radius: 99px; overflow: hidden; max-width: 160px; margin-left: auto; }
.xr-hc-row .xr-bar i { display: block; height: 100%; background: var(--xr-m-human); border-radius: 99px; }
.xr-hc-row .xr-num { font-family: var(--font-mono); font-weight: 700; color: var(--xr-m-human); font-size: 0.9rem; min-width: 2.2ch; text-align: right; }

.xr-ceil-block { border: 1.5px solid var(--navy-700); background: linear-gradient(180deg,var(--navy-800),var(--navy-900)); border-radius: var(--r-md); padding: 1.4rem 1.4rem 1.3rem; margin-bottom: 1rem; position: relative; overflow: hidden; }
.xr-ceil-block::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 100% at 100% 0%,rgba(77,216,245,.14),transparent 70%); }
.xr-ceil-top { display: flex; align-items: baseline; justify-content: space-between; position: relative; margin-bottom: 0.9rem; }
.xr-ceil-top b { color: #fff; font-size: 0.92rem; font-weight: 700; }
.xr-ceil-top span { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-500); text-transform: uppercase; letter-spacing: 0.08em; }
.xr-ceil-track { position: relative; height: 16px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: visible; margin-bottom: 0.5rem; }
.xr-ceil-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg,var(--cyan-bright),#8ff0ff); position: relative; transition: width 0.6s var(--ease-out); }
.xr-ceil-cap { position: absolute; top: -6px; bottom: -6px; width: 3px; background: #fff; border-radius: 2px; box-shadow: 0 0 0 3px rgba(255,255,255,.18); transition: left 0.6s var(--ease-out); }
.xr-ceil-cap-lbl { position: absolute; top: -26px; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; color: #fff; white-space: nowrap; }
.xr-ceil-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-700); margin-bottom: 1rem; }
.xr-ceil-note { font-size: 0.85rem; color: var(--text-300); line-height: 1.6; position: relative; }
.xr-ceil-note strong { color: #fff; }

/* Plain-English takeaway — a bigger, bordered, differently-shaped card than
   .xr-why-block, so it reads as THE headline for a non-technical owner and
   never as one more explanatory paragraph (spec §4.8). */
.xr-takeaway-block { background: var(--surface-card); border: 1.5px solid var(--border-accent); border-radius: var(--r-md); padding: 1.1rem 1.3rem; margin-bottom: 1.4rem; box-shadow: var(--shadow-white); }
.xr-takeaway-block .xr-tk-eyebrow { display: block; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.5rem; }
.xr-takeaway-block p { font-size: 1.08rem; font-weight: 600; color: var(--on-white-900); line-height: 1.5; }

.xr-why-block { background: var(--surface-off); border: 1px solid var(--border-white); border-left: 3px solid var(--cyan); border-radius: var(--r-sm); padding: 1rem 1.1rem; font-size: 0.88rem; color: var(--on-white-700); line-height: 1.65; margin-bottom: 1.8rem; }
.xr-why-block b { color: var(--on-white-900); }
.xr-why-block ul { margin: 0.4rem 0 0 1.1rem; list-style: disc; }
.xr-why-block li { margin-bottom: 0.2rem; }

/* ── free result: what the report adds, the one gate, the quiet links ── */
.xr-tease { margin-top: 1.6rem; border-top: 1px solid var(--border-white); padding-top: 1.4rem; }
.xr-tease h2 { font-size: 1.05rem; margin-bottom: 0.9rem; }
.xr-peek { position: relative; border: 1px solid var(--border-white); border-radius: var(--r-md); overflow: hidden; background: var(--surface-white); }
.xr-peek-row { display: flex; gap: 0.7rem; align-items: center; padding: 0.65rem 0.9rem; border-bottom: 1px solid var(--border-white); font-size: 0.86rem; filter: blur(3.2px); user-select: none; }
.xr-peek-row:last-of-type { border-bottom: 0; }
.xr-peek-row i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); flex: none; }
.xr-peek-row span { margin-left: auto; background: var(--c); color: #fff; border-radius: 999px; font-size: 0.7rem; padding: 0.1rem 0.6rem; }
.xr-peek-cover { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 0.6rem; background: linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.75)); }
.xr-peek-cover div { background: var(--surface-card); border: 1px solid var(--border-white); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.82rem; font-weight: 600; display: flex; gap: 0.5rem; align-items: center; box-shadow: var(--shadow-white); color: var(--on-white-900); max-width: 100%; }
.xr-peek-cover svg { width: 16px; height: 16px; flex: none; }
.xr-code { --c: var(--xr-m-code); } .xr-auto { --c: var(--xr-m-auto); } .xr-ai { --c: var(--xr-m-ai); } .xr-agent { --c: var(--xr-m-agent); } .xr-human { --c: var(--xr-m-human); }
.xr-gate { margin-top: 1.2rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; justify-content: space-between; background: var(--navy-800); color: var(--text-300); border-radius: var(--r-md); padding: 1.2rem 1.4rem; }
.xr-gate b { display: block; color: #fff; font-size: 1.02rem; }
.xr-gate span { font-size: 0.84rem; }
.xr-gate :focus-visible { outline-color: #fff; }
.xr-redo { display: flex; gap: 0.6rem 1.4rem; flex-wrap: wrap; margin-top: 1rem; }
.xr-redo .xr-link { font-weight: 500; font-size: 0.84rem; text-decoration: underline; text-underline-offset: 3px; }
.xr-review-back { margin-bottom: 1.2rem; }
.xr-recap { display: grid; gap: 0; border: 1px solid var(--border-white); border-radius: var(--r-md); overflow: hidden; }
.xr-recap > div { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 1rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-white); font-size: 0.9rem; }
.xr-recap > div:last-child { border-bottom: 0; }
.xr-recap dt { color: var(--on-white-500); }
.xr-recap dd { margin: 0; color: var(--on-white-900); font-weight: 500; overflow-wrap: anywhere; }
@media (max-width: 560px) { .xr-recap > div { grid-template-columns: 1fr; gap: 0.15rem; } }
.xr-calm-note { background: var(--surface-off); border: 1px solid var(--border-white); border-radius: var(--r-md); padding: 1.2rem 1.3rem; font-size: 0.88rem; color: var(--on-white-700); line-height: 1.6; }

/* ── email / otp ── */
.xr-center { text-align: center; }
.xr-otp-row { display: flex; gap: 0.6rem; justify-content: center; margin: 1.4rem 0; }
.xr-otp-box { width: 44px; height: 54px; border: 1.5px solid var(--border-white); border-radius: var(--r-sm); display: grid; place-items: center; font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--on-white-900); background: var(--surface-card); }
.xr-otp-box:focus-within, .xr-otp-box.is-filled { border-color: var(--cyan); }
.xr-otp-input { width: 100%; height: 100%; border: 0; background: none; text-align: center; font: inherit; color: inherit; }
.xr-otp-input:focus { outline: none; }
.xr-trust-line { font-size: 0.78rem; color: var(--on-white-300); text-align: center; margin-top: 1.1rem; }
.xr-status-ic { width: 56px; height: 56px; border-radius: 14px; background: var(--surface-off); display: grid; place-items: center; margin: 0 auto 1.1rem; }
.xr-status-ic svg { width: 27px; height: 27px; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.xr-status-ic.xr-amber { background: var(--amber-dim); } .xr-status-ic.xr-amber svg { stroke: var(--amber); }
.xr-status-ic.xr-cyan { background: var(--cyan-dim); } .xr-status-ic.xr-cyan svg { stroke: var(--cyan); }

/* ── report generating ── */
.xr-gen-steps { display: flex; flex-direction: column; gap: 0.15rem; margin: 1.6rem 0; }
.xr-gen-step { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0; font-size: 0.9rem; color: var(--on-white-300); }
.xr-gen-step .xr-gs-ic { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-white); display: grid; place-items: center; flex: none; }
.xr-gen-step .xr-gs-ic svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2.4; opacity: 0; }
.xr-gen-step.is-done { color: var(--on-white-900); }
.xr-gen-step.is-done .xr-gs-ic { background: var(--cyan); border-color: var(--cyan); }
.xr-gen-step.is-done .xr-gs-ic svg { opacity: 1; }
.xr-gen-step.is-active { color: var(--on-white-900); font-weight: 600; }
.xr-gen-step.is-active .xr-gs-ic { border-color: var(--cyan); }
.xr-gen-step .xr-spin { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--cyan-dim); border-top-color: var(--cyan); animation: xr-spin 0.8s linear infinite; }
@keyframes xr-spin { to { transform: rotate(360deg); } }
.xr-gen-bar { height: 5px; background: var(--border-white); border-radius: 99px; overflow: hidden; margin-top: 0.4rem; }
.xr-gen-bar i { display: block; height: 100%; width: 40%; background: var(--cyan); border-radius: 99px; animation: xr-ind 1.6s ease-in-out infinite; }
@keyframes xr-ind { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) { .xr-spin { animation: none; } .xr-gen-bar i { animation: none; width: 60%; } }
.xr-gen-steps { text-align: left; }
.xr-safe { display: flex; gap: 0.7rem; text-align: left; margin-top: 1.4rem; font-size: 0.86rem; color: var(--on-white-700); background: var(--surface-off); border-radius: var(--r-sm); padding: 0.85rem 1rem; line-height: 1.55; }
.xr-safe-ic svg { width: 18px; height: 18px; stroke: var(--xr-m-human); margin-top: 2px; flex: none; }
.xr-safe b { color: var(--on-white-900); }
.xr-safe-act { margin-top: 0.7rem; }
.xr-copy-btn { padding: 0.5rem 1rem; font-size: 0.84rem; }
.xr-use { margin-top: 1.2rem; text-align: left; border: 1px solid var(--border-white); border-radius: var(--r-md); padding: 1rem; background: var(--surface-card); }
.xr-use b { font-size: 0.9rem; display: block; margin-bottom: 0.2rem; color: var(--on-white-900); }
.xr-use p { font-size: 0.82rem; color: var(--on-white-500); margin-bottom: 0.6rem; }
.xr-use .xr-website-note:empty { display: none; }
.xr-use-row { display: flex; gap: 0.5rem; }
.xr-use-row input { flex: 1; min-width: 0; }
.xr-use-row .btn { padding: 0.6rem 1rem; }

/* ══════════════════════════════════════════════════════════════════════
   DETAILED REPORT
   ══════════════════════════════════════════════════════════════════════ */
/* ── hero: classification, takeaway, rings, human-control bar, ceiling ── */
.xr-rpt-band { background: var(--navy-900); color: var(--text-300); padding: 2.4rem 0 2.2rem; position: relative; overflow: hidden; }
.xr-rpt-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 90% at 85% 0%,rgba(77,216,245,.14),transparent 70%); }
.xr-rpt-band .container { position: relative; }
.xr-rpt-band h1 { color: #fff; font-size: clamp(1.6rem,3.4vw,2.4rem); margin: 0.7rem 0 0.9rem; outline: none; }
.xr-rpt-band :focus-visible { outline-color: #fff; }
.xr-rpt-band .eyebrow { color: var(--cyan-bright); }
.xr-class-badge.xr-on-dark { background: rgba(77,216,245,.1); border-color: rgba(77,216,245,.3); margin-bottom: 0; padding: 0.4rem 1rem 0.4rem 0.8rem; }
.xr-class-badge.xr-on-dark b { color: #fff; }
.xr-class-badge.xr-on-dark b em { color: var(--text-500); }
.xr-class-badge.xr-on-dark .xr-dots i { background: rgba(255,255,255,.25); }
.xr-class-badge.xr-on-dark .xr-dots i.is-on { background: var(--cyan-bright); }
.xr-class-badge.xr-on-dark.xr-warn .xr-dots i.is-on { background: #f0a94a; }
.xr-class-badge.xr-on-dark.xr-human .xr-dots i.is-on { background: #5fd7a0; }
.xr-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.4rem; margin-top: 1.6rem; align-items: start; }
.xr-take { font-size: 1.15rem; line-height: 1.55; color: #e6eefb; max-width: 40ch; }
.xr-take small { display: block; font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-500); margin-bottom: 0.6rem; }
.xr-hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; align-items: center; }
.xr-btn-ghost { background: transparent; border: 1.5px solid rgba(255,255,255,.28); color: #fff; }
.xr-btn-ghost:hover { border-color: var(--cyan-bright); }
.xr-scores { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-md); padding: 1.2rem; min-width: 0; }
.xr-scores .xr-minis { justify-content: space-around; gap: 0.6rem; }
.xr-scores .xr-mini-r { color: var(--text-300); }
.xr-scores .xr-mini-r .xr-trk { stroke: rgba(255,255,255,.12); }
.xr-scores .xr-mini-r .xr-num { color: #fff; }
.xr-scores .xr-p-auto .xr-fg { stroke: var(--cyan-bright); }
.xr-scores .xr-p-ai .xr-fg { stroke: #c79aea; }
.xr-scores .xr-p-agent .xr-fg { stroke: #f0a94a; }
.xr-scores .xr-hc-row { background: none; border: 0; padding: 0; margin: 1rem 0 0; gap: 0.7rem; }
.xr-scores .xr-hc-row .xr-ic { background: none; border: 0; width: 22px; height: 22px; }
.xr-scores .xr-hc-row .xr-ic svg { stroke: #5fd7a0; }
.xr-scores .xr-hc-row b { color: #fff; font-size: 0.82rem; }
.xr-scores .xr-hc-row .xr-lvl { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #5fd7a0; }
.xr-scores .xr-hc-row .xr-bar { background: rgba(255,255,255,.12); border: 0; max-width: none; margin-left: 0; flex: 1 1 80px; }
.xr-scores .xr-hc-row .xr-bar i { background: #5fd7a0; }
.xr-scores .xr-hc-row .xr-num { color: #5fd7a0; }
.xr-scores .xr-ceil-block { background: none; border: 0; border-top: 1px solid rgba(255,255,255,.1); border-radius: 0; padding: 1rem 0 0; margin: 1.1rem 0 0; overflow: visible; }
.xr-scores .xr-ceil-block::before { display: none; }
.xr-scores .xr-ceil-top { margin-bottom: 1.5rem; }
.xr-scores .xr-ceil-scale { display: none; }
.xr-scores .xr-ceil-track { margin-bottom: 0.8rem; }
@media (max-width: 900px) { .xr-hero-grid { grid-template-columns: 1fr; gap: 1.4rem; } .xr-take { max-width: none; } }

/* ── layout: sticky contents (desktop) / chips (mobile) ── */
.xr-rpt-body { background: var(--surface-off); padding: 2.2rem 0 5rem; }
.xr-rpt-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 2.6rem; align-items: start; }
.xr-rpt-main { min-width: 0; }
.xr-toc { position: sticky; top: 132px; font-size: 0.84rem; }
.xr-toc h4 { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-white-300); margin-bottom: 0.6rem; font-weight: 500; }
.xr-toc a { display: block; color: var(--on-white-500); text-decoration: none; padding: 0.32rem 0.8rem; border-left: 2px solid var(--border-white); }
.xr-toc a:hover { color: var(--on-white-900); }
.xr-toc a.on { color: var(--on-white-900); font-weight: 600; border-left-color: var(--cyan); }
.xr-toc-mini { margin-top: 1.2rem; background: var(--navy-800); color: var(--text-300); border-radius: var(--r-md); padding: 1rem; font-size: 0.8rem; line-height: 1.45; }
.xr-toc-mini b { display: block; color: #fff; margin-bottom: 0.3rem; font-size: 0.86rem; }
.xr-toc-mini-btn { display: block; width: 100%; margin-top: 0.7rem; border: 0; background: var(--cyan); color: #fff; text-align: center; border-radius: var(--r-sm); padding: 0.55rem; font: inherit; font-weight: 600; cursor: pointer; }
.xr-toc-mini-btn:hover { background: #005871; }
.xr-toc-mini :focus-visible { outline-color: #fff; }
.xr-chipnav { display: none; }
.xr-rpt-sec { margin-bottom: 2.6rem; scroll-margin-top: 140px; outline: none; }
.xr-rpt-sec > .eyebrow { margin-bottom: 0.5rem; }
.xr-rpt-sec h2 { font-size: 1.4rem; margin-bottom: 1rem; }
.xr-rpt-sec p { font-size: 0.92rem; color: var(--on-white-500); line-height: 1.7; }
.xr-card { background: var(--surface-card); border: 1px solid var(--border-white); border-radius: var(--r-md); box-shadow: var(--shadow-white); }
@media (max-width: 900px) {
  .xr-rpt-grid { grid-template-columns: 1fr; gap: 0; }
  .xr-toc { display: none; }
  .xr-chipnav { display: flex; gap: 0.4rem; overflow-x: auto; position: sticky; top: 112px; z-index: 100; background: var(--surface-off); padding: 0.6rem 0; margin-bottom: 0.6rem; scrollbar-width: none; }
  .xr-chipnav::-webkit-scrollbar { display: none; }
  .xr-chipnav a { white-space: nowrap; font-size: 0.8rem; text-decoration: none; color: var(--on-white-700); background: var(--surface-card); border: 1px solid var(--border-white); border-radius: 999px; padding: 0.35rem 0.8rem; flex: none; }
  .xr-chipnav a.on { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
  .xr-rpt-sec, .xr-bp-cta { scroll-margin-top: 170px; }
}

/* ── summary ── */
.xr-lede { font-size: 1.02rem !important; color: var(--on-white-700) !important; line-height: 1.7; padding: 1.3rem 1.5rem; margin: 0; }
.xr-glance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border-white); border-top: 1px solid var(--border-white); border-radius: 0 0 var(--r-md) var(--r-md); overflow: hidden; }
.xr-glance > div { background: var(--surface-white); padding: 1rem 1.2rem; }
.xr-glance b { font-family: var(--font-mono); font-size: 1.5rem; display: block; line-height: 1.1; color: var(--on-white-900); }
.xr-glance span { font-size: 0.78rem; color: var(--on-white-500); }
.xr-mix { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 0.55rem 0 0.4rem; gap: 2px; }
.xr-mix i { display: block; height: 100%; }
.xr-mixkey { display: flex; flex-wrap: wrap; gap: 0.2rem 0.8rem; }
.xr-mixkey span { font-size: 0.72rem; }
.xr-mixkey s { display: inline-block; width: 8px; height: 8px; border-radius: 2px; text-decoration: none; margin-right: 0.3rem; }
@media (max-width: 600px) { .xr-glance { grid-template-columns: 1fr; } }

/* ── what should stay human ── */
.xr-human-callout { display: flex; gap: 1.1rem; background: var(--xr-m-human-dim); border: 1px solid rgba(15,122,79,.28); border-left: 4px solid var(--xr-m-human); border-radius: var(--r-md); padding: 1.3rem 1.5rem; }
.xr-hc-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--xr-m-human); color: #fff; display: grid; place-items: center; flex: none; }
.xr-hc-ic svg { width: 20px; height: 20px; }
.xr-human-callout h2 { font-size: 1.1rem; margin-bottom: 0.2rem; }
.xr-human-callout .xr-sub { font-size: 0.86rem; margin-bottom: 0.8rem; }
.xr-human-callout ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; }
.xr-human-callout li { font-size: 0.9rem; color: var(--on-white-700); padding-left: 1.4rem; position: relative; line-height: 1.5; }
.xr-human-callout li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--xr-m-human); }
.xr-human-callout li b { display: block; color: var(--on-white-900); font-weight: 600; }
@media (max-width: 560px) { .xr-human-callout { flex-direction: column; padding: 1.2rem; } }

/* ── mode chips (kept from the original taxonomy) ── */
.xr-mode-chip { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.28rem 0.55rem; border-radius: 6px; flex: none; white-space: nowrap; border: 1px solid transparent; }
.xr-mode-chip svg { width: 12px; height: 12px; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xr-mode-chip.xr-human { background: var(--xr-m-human-dim); color: var(--xr-m-human); border-color: rgba(15,122,79,.25); } .xr-mode-chip.xr-human svg { stroke: var(--xr-m-human); }
.xr-mode-chip.xr-code { background: var(--xr-m-code-dim); color: var(--xr-m-code); border-color: rgba(59,79,168,.22); } .xr-mode-chip.xr-code svg { stroke: var(--xr-m-code); }
.xr-mode-chip.xr-auto { background: var(--xr-m-auto-dim); color: var(--xr-m-auto); border-color: rgba(0,110,140,.22); } .xr-mode-chip.xr-auto svg { stroke: var(--xr-m-auto); }
.xr-mode-chip.xr-ai { background: var(--xr-m-ai-dim); color: var(--xr-m-ai); border-color: rgba(122,63,160,.22); } .xr-mode-chip.xr-ai svg { stroke: var(--xr-m-ai); }
.xr-mode-chip.xr-agent { background: var(--xr-m-agent-dim); color: var(--xr-m-agent); border-color: rgba(151,89,10,.22); } .xr-mode-chip.xr-agent svg { stroke: var(--xr-m-agent); }

/* ── one merged step-by-step map ── */
.xr-modefilter { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.xr-mf { font: inherit; border: 1px solid var(--border-white); background: var(--surface-card); border-radius: 999px; padding: 0.32rem 0.8rem; font-size: 0.8rem; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--on-white-700); cursor: pointer; }
.xr-mf:hover { border-color: var(--cyan); }
.xr-mf-ic { color: var(--c); display: inline-flex; }
.xr-mf-ic svg { width: 14px; height: 14px; }
.xr-mf[aria-pressed="true"] { background: var(--on-white-900); color: #fff; border-color: var(--on-white-900); }
.xr-mf[aria-pressed="true"] .xr-mf-ic { color: #fff; }
.xr-mf .xr-ct { font-family: var(--font-mono); font-size: 0.7rem; opacity: 0.7; }
.xr-steps { list-style: none; padding: 0; margin: 0; }
.xr-step { display: grid; grid-template-columns: 44px minmax(0, 1fr) 7.6rem; gap: 0 1rem; padding: 0 0 1.1rem; position: relative; transition: opacity 0.2s; }
.xr-step::before { content: ""; position: absolute; left: 21px; top: 40px; bottom: -2px; width: 2px; background: var(--border-white); }
.xr-step:last-child { padding-bottom: 0; }
.xr-step:last-child::before { display: none; }
.xr-step-num { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--c); position: relative; z-index: 1; }
.xr-step-num svg { width: 20px; height: 20px; }
.xr-step-body { background: var(--surface-card); border: 1px solid var(--border-white); border-radius: var(--r-md); padding: 0.85rem 1.1rem; box-shadow: var(--shadow-white); min-width: 0; }
.xr-st { font-weight: 600; font-size: 0.98rem; line-height: 1.3; color: var(--on-white-900); }
.xr-st .xr-sn { font-family: var(--font-mono); font-size: 0.72rem; color: var(--on-white-300); margin-right: 0.5rem; font-weight: 400; }
.xr-sr { font-size: 0.84rem; color: var(--on-white-500); margin-top: 0.25rem; line-height: 1.55; }
.xr-tag { align-self: start; justify-self: end; margin-top: 0.7rem; }
.xr-step.is-human .xr-step-body { border-left: 4px solid var(--xr-m-human); background: #f7fcf9; }
.xr-decides { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-family: var(--font-mono); color: var(--xr-m-human); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.45rem; }
.xr-decides svg { width: 13px; height: 13px; }
.xr-steps.is-filtering .xr-step:not(.is-hit) { opacity: 0.28; }
@media (max-width: 560px) {
  .xr-step { grid-template-columns: 36px minmax(0, 1fr); gap: 0 0.7rem; }
  .xr-step-num { width: 36px; height: 36px; } .xr-step-num svg { width: 17px; height: 17px; }
  .xr-step::before { left: 17px; top: 34px; }
  .xr-step-body { grid-column: 2; grid-row: 1; }
  .xr-tag { grid-column: 2; margin: 0.5rem 0 0; justify-self: start; }
}

/* ── today vs future ── */
.xr-after-sum { max-width: 70ch; margin-bottom: 1rem; }
.xr-ba { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1rem; align-items: stretch; }
.xr-col { padding: 1.2rem 1.3rem; }
.xr-col h3 { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-white-300); font-weight: 500; margin-bottom: 0.8rem; }
.xr-col.xr-after { border-color: rgba(0,110,140,.4); box-shadow: 0 0 0 3px var(--cyan-dim), var(--shadow-white); }
.xr-col.xr-after h3 { color: var(--cyan); }
.xr-arr { align-self: center; color: var(--on-white-300); }
.xr-arr svg { width: 28px; height: 28px; display: block; }
.xr-ba ol { padding: 0; margin: 0; list-style: none; display: grid; gap: 0.45rem; counter-reset: s; }
.xr-ba li { counter-increment: s; font-size: 0.86rem; color: var(--on-white-700); display: flex; gap: 0.6rem; line-height: 1.4; }
.xr-ba li::before { content: counter(s); font-family: var(--font-mono); font-size: 0.68rem; width: 20px; height: 20px; border-radius: 50%; background: var(--surface-off); display: grid; place-items: center; flex: none; color: var(--on-white-500); margin-top: 1px; }
.xr-after li::before { background: var(--cyan-dim); color: var(--cyan); }
.xr-after li.is-h::before { background: var(--xr-m-human); color: #fff; }
.xr-after li.is-h { color: var(--xr-m-human); font-weight: 600; }
@media (max-width: 760px) { .xr-ba { grid-template-columns: 1fr; } .xr-arr { transform: rotate(90deg); justify-self: center; } }

/* ── opportunity ── */
.xr-opp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.xr-tile { padding: 1.2rem; }
.xr-tile-ic { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--cyan-dim); color: var(--cyan); margin-bottom: 0.8rem; }
.xr-tile-ic svg { width: 18px; height: 18px; }
.xr-tile.is-q .xr-tile-ic { background: var(--xr-m-human-dim); color: var(--xr-m-human); }
.xr-tile small { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--on-white-300); }
.xr-tile p { font-size: 0.92rem !important; margin-top: 0.3rem; color: var(--on-white-900) !important; font-weight: 500; line-height: 1.45 !important; }
.xr-rpt-sec p.xr-fine { font-size: 0.76rem; color: var(--on-white-300); margin-top: 0.8rem; }
@media (max-width: 760px) { .xr-opp { grid-template-columns: 1fr; } }

/* ── recommended first build ── */
.xr-build { padding: 1.5rem; border-color: rgba(0,110,140,.35); }
.xr-build h3 { font-size: 1.15rem; margin: 0.1rem 0 0.5rem; }
.xr-rpt-sec .xr-build p { color: var(--on-white-700); max-width: 62ch; }
.xr-blocks { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem; margin: 1.1rem 0; }
.xr-blocks div { display: flex; gap: 0.6rem; align-items: center; background: var(--surface-off); border-radius: var(--r-sm); padding: 0.6rem 0.8rem; font-size: 0.84rem; color: var(--on-white-700); min-width: 0; }
.xr-blocks svg { color: var(--cyan); width: 16px; height: 16px; flex: none; }

/* ── collapsed extras ── */
.xr-acc { border: 1px solid var(--border-white); border-radius: var(--r-md); background: var(--surface-card); }
.xr-acc summary { padding: 1rem 1.3rem; cursor: pointer; font-weight: 600; font-size: 0.95rem; list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--on-white-900); }
.xr-acc summary::-webkit-details-marker { display: none; }
.xr-acc summary::after { content: "+"; font-family: var(--font-mono); color: var(--on-white-500); font-size: 1.2rem; }
.xr-acc[open] summary::after { content: "\2212"; }
.xr-acc ul { padding: 0 1.3rem 1.2rem; margin: 0; list-style: none; display: grid; gap: 0.5rem; }
.xr-acc li { font-size: 0.88rem; color: var(--on-white-700); padding-left: 1.2rem; position: relative; line-height: 1.55; }
.xr-acc li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; background: var(--on-white-300); border-radius: 50%; }
.xr-acc li b { color: var(--on-white-900); }

/* ── free blueprint panel ── */
.xr-bp-cta { background: var(--navy-900); border-radius: var(--r-xl); padding: clamp(1.5rem, 4vw, 2.4rem); position: relative; overflow: hidden; scroll-margin-top: 140px; }
.xr-bp-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%,rgba(77,216,245,.14),transparent 70%); }
.xr-bp-cta h3 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: 0.5rem; position: relative; outline: none; }
.xr-bp-cta p { color: var(--text-300); font-size: 0.92rem; margin-bottom: 1rem; position: relative; max-width: 60ch; }
.xr-bp-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; position: relative; margin: 1.3rem 0 1.5rem; }
.xr-bp-groups h4 { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--cyan-bright); font-weight: 500; margin-bottom: 0.6rem; }
.xr-bp-groups ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.xr-bp-groups li { font-size: 0.84rem; display: flex; gap: 0.5rem; color: #e0e9f8; line-height: 1.4; }
.xr-bp-groups li svg { width: 15px; height: 15px; stroke: var(--cyan-bright); flex: none; margin-top: 2px; }
.xr-bp-actions { position: relative; display: flex; gap: 0.6rem; flex-wrap: wrap; }
@media (max-width: 760px) { .xr-bp-groups { grid-template-columns: 1fr; gap: 1rem; } }
.xr-bp-confirm { position: relative; }
.xr-bp-confirm h4 { color: #fff; font-size: 1rem; margin-bottom: 0.5rem; }
.xr-bp-confirm p { color: var(--text-300); font-size: 0.86rem; }
.xr-next3-wrap { position: relative; margin: 1.3rem 0 1.2rem; }
.xr-bp-cta .xr-next-h { color: #fff; font-size: 1rem; margin-bottom: 0.7rem; }
.xr-next3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.xr-next3 > div { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-md); padding: 1rem; }
.xr-next3 b { font-family: var(--font-mono); color: var(--cyan-bright); font-size: 0.72rem; letter-spacing: 0.06em; }
.xr-bp-cta .xr-next3 h5 { color: #fff; font-size: 0.95rem; margin: 0.3rem 0; }
.xr-bp-cta .xr-next3 p { font-size: 0.82rem; color: var(--text-300); margin: 0; }
@media (max-width: 760px) { .xr-next3 { grid-template-columns: 1fr; } }
.xr-confirm-actions { position: relative; display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 0.4rem; }

/* ── mobile floating blueprint bar ── */
.xr-fab { display: none; }
@media (max-width: 900px) {
  .xr-fab { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 140; background: var(--surface-card); border-top: 1px solid var(--border-white); padding: 0.6rem 16px; gap: 0.7rem; align-items: center; box-shadow: 0 -6px 20px rgba(16,27,55,.08); transition: transform 0.25s, visibility 0s; }
  .xr-fab.is-hidden { transform: translateY(110%); visibility: hidden; transition: transform 0.25s, visibility 0s 0.25s; }
  .xr-fab span { font-size: 0.78rem; color: var(--on-white-500); flex: 1; line-height: 1.3; }
  .xr-fab .btn { width: auto; padding: 0.65rem 1rem; white-space: nowrap; }
  body.xr-has-fab { padding-bottom: 70px; }
}
@media (prefers-reduced-motion: reduce) { .xr-fab, .xr-fab.is-hidden, .xr-step, .xr-opt { transition: none; } }

/* Optional company-website note */
.xr-website-note { font-size: 0.78rem; color: var(--on-white-300); margin-top: 0.4rem; }

/* ══════════════════════════════════════════════════════════════════════
   CAPACITY / FAILED / UNAVAILABLE states
   ══════════════════════════════════════════════════════════════════════ */
.xr-status-card { max-width: 520px; margin: 0 auto; text-align: center; background: var(--surface-card); border: 1px solid var(--border-white); border-radius: var(--r-lg); box-shadow: var(--shadow-white); padding: 2.2rem 2rem; }
.xr-status-card h2 { font-size: 1.3rem; margin-bottom: 0.6rem; }
.xr-status-card p { font-size: 0.9rem; color: var(--on-white-500); line-height: 1.65; margin-bottom: 0.5rem; }
.xr-status-meter { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 1.2rem 0; font-family: var(--font-mono); font-size: 0.82rem; color: var(--on-white-500); }
.xr-status-meter .xr-mdots { display: flex; gap: 4px; }
.xr-status-meter .xr-mdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--border-white); }
.xr-status-meter .xr-mdots i.is-on { background: var(--amber); }
.xr-status-actions { display: flex; gap: 0.7rem; justify-content: center; margin-top: 1.3rem; flex-wrap: wrap; }
.xr-ref-code { font-family: var(--font-mono); font-size: 0.76rem; color: var(--on-white-300); margin: 0.9rem 0 0; }

/* ── inline banner errors ── */
.xr-banner-error { background: rgba(179,52,74,.08); border: 1px solid rgba(179,52,74,.28); color: #8a2439; border-radius: var(--r-sm); padding: 0.75rem 0.95rem; font-size: 0.86rem; margin-bottom: 1rem; }

/* ── phase visibility ── */
.xr-phase { display: none; }
.xr-phase.is-on { display: block; }

/* ── Free blueprint: panel, form, confirmation ───────────────────── */
.xr-bp-jump { margin-top: 1rem; font-size: 0.88rem; color: var(--on-white-500); }
.xr-bp-eyebrow { position: relative; display: block; font: 600 0.7rem/1 var(--mono, "IBM Plex Mono", monospace); letter-spacing: .14em; text-transform: uppercase; color: var(--cyan-bright); margin-bottom: 0.6rem; }
.xr-bp-cta h3 { font-size: 1.35rem; }
.xr-bp-primary { font-size: 1rem; padding: 0.9rem 1.5rem; }
.xr-bp-fine { position: relative; margin: 0.7rem 0 0 !important; font-size: 0.8rem !important; color: var(--text-300); }
.xr-bp-disc { position: relative; margin: 0.6rem 0 0 !important; font-size: 0.82rem !important; }
.xr-bp-cta .xr-link { color: var(--cyan-bright); }
.xr-bp-form { position: relative; display: grid; gap: 0.7rem; margin-top: 0.4rem; }
.xr-bp-form fieldset { border: 0; padding: 0; margin: 0; }
.xr-bp-form legend { color: #fff; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.6rem; }
.xr-bp-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.xr-bp-opt { display: flex; gap: 0.6rem; align-items: flex-start; text-align: left; font: inherit; font-size: 0.86rem; color: #fff; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--r-sm); padding: 0.7rem 0.8rem; cursor: pointer; }
.xr-bp-opt .xr-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.45); flex: none; margin-top: 1px; }
.xr-bp-opt.is-on { border-color: var(--cyan-bright); background: rgba(77,216,245,0.10); }
.xr-bp-opt.is-on .xr-dot { border-color: var(--cyan-bright); background: radial-gradient(circle,var(--cyan-bright) 0 40%,transparent 42%); }
.xr-bp-opt:focus-visible, .xr-bp-note:focus-visible, .xr-bp-cta .xr-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.xr-bp-label { color: var(--text-300); font-size: 0.84rem; }
.xr-bp-note { width: 100%; font: inherit; font-size: 0.9rem; color: #fff; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--r-sm); padding: 0.6rem 0.7rem; resize: vertical; }
.xr-bp-note::placeholder { color: rgba(255,255,255,0.45); }
.xr-bp-uses { font-size: 0.8rem !important; margin: 0 !important; color: var(--text-300); }
.xr-bp-uses strong { color: #fff; }
.xr-bp-err { margin: 0 !important; color: #ffb4bf !important; font-size: 0.84rem !important; min-height: 0; }
.xr-bp-err:empty { display: none; }
.xr-bp-form .xr-bp-primary { justify-self: start; }
.xr-bp-confirm h3 { color: #fff; font-size: 1.2rem; margin-bottom: 0.5rem; outline: none; }
@media (max-width: 560px) { .xr-bp-opts { grid-template-columns: 1fr; } .xr-bp-form .xr-bp-primary, .xr-bp-actions .xr-bp-primary { width: 100%; justify-self: stretch; } }

/* Blueprint panel inside the capacity / failed / unavailable cards */
.xr-status-card .xr-bp-cta { text-align: left; }
.xr-status-card .xr-bp-cta p { color: var(--text-300); margin-bottom: 1rem; }
.xr-status-card .xr-bp-cta h3 { color: #fff; }
.xr-status-card .xr-bp-cta .xr-bp-confirm p { margin-bottom: 0.5rem; }
.xr-status-card .xr-bp-groups { grid-template-columns: 1fr; }

/* Long unbroken strings from a visitor or the AI must never push the page sideways. */
.xr-phase { overflow-wrap: anywhere; }