/* AS-10b — ATS X-Ray dual-pane UI.
   Serif "what you see" (geometry-only section boxes over page cards) | monospace
   "what the machine reads" (per-line stage-A stream + corruption/blank/column flags).
   The server masks the teaser tail (asterisks); the blur + CTA here are cosmetic over it.
   Registered in _asset_version() since AS-01, so these styles never ship stale-cached. */

.xray-overlay{position:fixed;inset:0;z-index:10000;display:flex;align-items:center;justify-content:center;
  background:rgba(26,22,18,.62);padding:24px 16px;}
.xray-box{display:flex;flex-direction:column;background:var(--paper,#faf8f5);border:1px solid #e3ddd0;
  border-radius:14px;box-shadow:0 18px 50px rgba(26,22,18,.30);max-width:980px;width:100%;
  max-height:calc(100vh - 48px);overflow:hidden;}
.xray-head{display:flex;align-items:center;gap:10px;padding:12px 16px;flex:0 0 auto;
  border-bottom:1px solid #ece5d8;background:var(--card,#fff);}
.xray-title{font:700 15px/1.2 var(--sans,sans-serif);color:var(--ink,#1a1a1a);}
.xray-sub{font:500 12px/1.3 var(--sans,sans-serif);color:var(--muted,#6b6b6b);}
.xray-x{margin-left:auto;font:600 15px/1 var(--sans,sans-serif);color:var(--muted,#6b6b6b);
  background:transparent;border:1px solid transparent;border-radius:8px;padding:6px 9px;cursor:pointer;}
.xray-x:hover{background:#f2ece1;color:var(--ink,#1a1a1a);}

/* summary bar — flag counts */
.xray-summary{display:flex;flex-wrap:wrap;gap:6px;padding:10px 16px;flex:0 0 auto;
  border-bottom:1px solid #ece5d8;background:var(--card,#fff);}
.xray-stat{font:600 11px/1 var(--sans,sans-serif);border-radius:999px;padding:5px 10px;border:1px solid transparent;}
.xray-stat.clean{color:#2f7d4f;background:#e7f4ec;border-color:#c7e6d3;}
.xray-stat.corruption{color:#a3352b;background:#fbe9e7;border-color:#f0c8c2;}
.xray-stat.blank{color:#8a5a12;background:#fbf1dd;border-color:#efdcb3;}
.xray-stat.column{color:#2a4a7a;background:#e6edf8;border-color:#c6d4ec;}

/* two panes */
.xray-panes{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:0;flex:1 1 auto;}
.xray-pane{display:flex;flex-direction:column;min-height:0;overflow:hidden;}
.xray-pane + .xray-pane{border-left:1px solid #ece5d8;}
.xray-panehead{font:600 11px/1 var(--sans,sans-serif);letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted,#6b6b6b);padding:9px 14px;flex:0 0 auto;border-bottom:1px solid #f0eadf;background:#f7f3ec;}
.xray-panescroll{position:relative;overflow:auto;padding:14px;min-height:0;flex:1 1 auto;}

/* serif pane — page cards with normalized region boxes */
.xray-serif .xray-panescroll{background:#efe9df;display:flex;flex-direction:column;align-items:center;gap:16px;}
.xray-pagewrap{width:100%;display:flex;flex-direction:column;align-items:center;}
.xray-pagehead{font:600 11px/1 var(--sans,sans-serif);color:var(--muted,#6b6b6b);margin-bottom:6px;}
.xray-page{position:relative;width:300px;max-width:100%;aspect-ratio:1/1.4142;background:#fff;
  border:1px solid #e3ddd0;border-radius:6px;box-shadow:0 3px 12px rgba(26,22,18,.10);cursor:pointer;}
.xray-page.flash{outline:3px solid #3f6f9d;outline-offset:2px;transition:outline-color .2s;}
.xray-page.blankpage{background:repeating-linear-gradient(45deg,#f4efe6,#f4efe6 8px,#ede6d9 8px,#ede6d9 16px);}
.xray-region{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:5px;
  background:rgba(63,111,157,.12);border:1px solid rgba(63,111,157,.45);font:600 10px/1.2 var(--sans,sans-serif);
  color:#2a4a7a;padding:1px 4px;overflow:hidden;text-align:center;text-transform:capitalize;}
.xray-region.hot{background:rgba(63,111,157,.28);border-color:#3f6f9d;}

/* monospace pane — the stage-A stream */
.xray-mono .xray-panescroll{background:#1e1b17;}
.xray-stream{font:12px/1.55 var(--mono,ui-monospace,SFMono-Regular,Menlo,Consolas,monospace);color:#d9d2c6;}
.xray-line{display:flex;align-items:flex-start;gap:8px;padding:1px 6px;border-left:2px solid transparent;
  white-space:pre-wrap;word-break:break-word;cursor:default;}
.xray-line .xray-ln{flex:0 0 auto;width:2.2em;text-align:right;color:#6d665a;user-select:none;-webkit-user-select:none;}
.xray-line .xray-txt{flex:1 1 auto;}
.xray-line.flagged{background:rgba(163,53,43,.16);border-left-color:#d9584c;cursor:pointer;}
.xray-line.flagged:hover{background:rgba(163,53,43,.26);}
.xray-line.masked .xray-txt{color:#514b41;letter-spacing:.06em;}
.xray-chip{flex:0 0 auto;font:600 9px/1.3 var(--sans,sans-serif);border-radius:4px;padding:1px 5px;
  text-transform:uppercase;letter-spacing:.03em;align-self:center;}
.xray-chip.high{color:#fff;background:#c0392b;}
.xray-chip.medium{color:#3a2a06;background:#e6a23c;}
.xray-chip.low{color:#e8e2d6;background:#5a5346;}

/* teaser blur + unlock CTA over the masked tail */
.xray-lock{position:sticky;bottom:0;left:0;right:0;margin-top:-56px;padding:56px 14px 14px;
  background:linear-gradient(to bottom,rgba(30,27,23,0),rgba(30,27,23,.92) 55%);
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;}
.xray-lock-txt{font:600 12px/1.4 var(--sans,sans-serif);color:#e9e2d5;}
.xray-lock-btn{font:700 13px/1 var(--sans,sans-serif);color:#1a1a1a;background:#e9c46a;border:none;
  border-radius:999px;padding:9px 18px;cursor:pointer;}
.xray-lock-btn:hover{background:#efd08a;}

/* empty / message states */
.xray-msg{padding:28px 22px;text-align:center;font:500 13px/1.6 var(--sans,sans-serif);color:var(--muted,#6b6b6b);}
.xray-msg strong{display:block;color:var(--ink,#1a1a1a);font-size:14px;margin-bottom:6px;}

@media (max-width:720px){
  .xray-panes{grid-template-columns:1fr;grid-auto-rows:minmax(160px,1fr);}
  .xray-pane + .xray-pane{border-left:none;border-top:1px solid #ece5d8;}
  .xray-box{max-height:calc(100vh - 24px);}
  .xray-overlay{padding:12px 8px;}
}

@media (prefers-color-scheme:dark){
  .xray-box{background:#211d18;border-color:#3a332a;}
  .xray-head,.xray-summary{background:#2a251e;border-color:#3a332a;}
  .xray-title{color:#f2ece0;} .xray-sub,.xray-panehead{color:#a89f8f;}
  .xray-panehead{background:#26211a;border-color:#3a332a;}
  .xray-pane + .xray-pane{border-color:#3a332a;}
  .xray-serif .xray-panescroll{background:#1a1712;}
  .xray-page{background:#2e2a22;border-color:#413a2f;}
  .xray-x:hover{background:#3a332a;color:#f2ece0;}
  .xray-msg strong{color:#f2ece0;}
}
