/* ==========================================================================
   Diagnostix360 — Data Insight page (v1)
   Loaded only by /data-insight/. Extends styles.v206.css; defines nothing that
   any existing page uses.

   Why this file exists: the site's Content-Security-Policy is style-src 'self',
   so the page carries no inline styles. Everything the new page needs lives
   here, built on the same tokens as the rest of the site.
   ========================================================================== */

/* ---------- 1. The app's own palette, used only inside device screens ----- */

.di-scope{
  --di-ink:#0B1020;      /* app background */
  --di-card:#131A33;
  --di-line:#222B4D;
  --di-paper:#E8ECF6;
  --di-muted:#8E9CBC;
  --di-cyan:#22D3EE;     /* mobile data */
  --di-indigo:#8B8CF8;   /* overnight */
  --di-rose:#F472B6;     /* wasted data */
  --di-mint:#5BE6B0;     /* privacy, savings */
}

/* ---------- 2. Device frame ---------------------------------------------- */

.di-device{
  width:100%;max-width:320px;margin:0 auto;
  background:linear-gradient(180deg,#0E1428,#080C1A);
  border:1px solid #2A3157;border-radius:26px;padding:10px;
  box-shadow:0 18px 40px -24px rgba(16,22,28,.55);
}
.di-screen{background:var(--di-ink);border-radius:18px;padding:14px 12px 8px;color:var(--di-paper);
  font-family:var(--body);overflow:hidden}
.di-screen *{box-sizing:border-box}
/* The site stylesheet colours and spaces <p> globally; inside a device screen
   the app's own palette has to win. */
.di-screen :where(p){margin:0;color:var(--di-paper);line-height:1.35}

.di-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.di-head b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.di-head span{font-size:11px;color:var(--di-mint)}
.di-head span.di-dim{color:var(--di-muted)}

.di-card{background:var(--di-card);border:1px solid var(--di-line);border-radius:16px;padding:12px;margin-bottom:8px}
.di-card--night{background:linear-gradient(180deg,#1B1B49,#141A33)}
.di-card--today{background:linear-gradient(180deg,#0E2B3D,#131A33)}
.di-card--save{background:linear-gradient(180deg,#39132C,#141A33)}

.di-label{font-size:11px;color:var(--di-muted);margin:0 0 4px}
.di-big{color:var(--di-paper);font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;margin:0}
.di-big i{font-style:normal;font-size:14px;font-weight:600;color:#9FB0D0;margin-left:4px}
.di-sub{display:block;font-size:11px;color:var(--di-muted);margin:4px 0 0}
.di-row-main .di-sub{margin:0}

.di-bar{height:7px;border-radius:99px;background:#0A0E1E;display:flex;overflow:hidden;margin:10px 0 8px}
.di-bar i{display:block;height:100%}
.di-bar .di-seg-mobile{background:var(--di-cyan)}
.di-bar .di-seg-wifi{background:var(--di-indigo)}
.di-bar .di-seg-rest{background:#3B4470}
.di-w9{width:9%}.di-w91{width:91%}.di-w88{width:88%}.di-w12{width:12%}

.di-line{display:flex;justify-content:space-between;font-size:11.5px;color:#AFBBD6;margin-top:4px}
.di-line b{color:var(--di-paper);font-weight:600}
.di-line--muted,.di-line--muted b{color:var(--di-muted)}

.di-row{display:flex;align-items:center;gap:9px;margin-top:10px}
.di-glyph{width:28px;height:28px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#0A0E1E}
.di-g1{background:var(--di-mint)}
.di-g2{background:#7FB2F0}
.di-g3{background:#F2A3C0}
.di-g4{background:#C9D3E8}
.di-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.di-name{display:block;font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.di-val{font-size:12.5px;font-weight:700;white-space:nowrap}
.di-val--night{color:var(--di-indigo)}
.di-val--save{color:var(--di-rose)}

.di-actions{display:flex;gap:7px;margin-top:10px}
.di-act{flex:1;text-align:center;border:1px solid #2C3566;border-radius:10px;padding:7px 0;font-size:11px;color:var(--di-paper)}
.di-act--primary{background:var(--di-rose);color:#200713;border-color:transparent;font-weight:700}

.di-tabs{display:flex;justify-content:space-between;border-top:1px solid var(--di-line);margin-top:6px;padding:8px 4px 2px;
  font-size:10px;color:#7C89AB}
.di-tabs span{flex:1;text-align:center}
.di-tabs .di-on{color:var(--di-cyan)}
.di-tabs .di-on-night{color:var(--di-indigo)}
.di-tabs .di-on-save{color:var(--di-rose)}

.di-why{font-size:11px;color:var(--di-indigo);margin:8px 0 0}
.di-note{font-size:12px;color:#C7D0E6;margin:0 0 8px}
.di-note:last-child{margin-bottom:0}

/* ---------- 3. Page blocks ------------------------------------------------ */

.di-figure{margin:0}
.di-figure figcaption{font-size:12.5px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5}

.di-beta{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink-soft);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600}
.di-beta i{width:7px;height:7px;border-radius:50%;background:var(--signal-mid);display:inline-block}

.di-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:44px;align-items:center}
.di-split--flip .di-figure{order:-1}
@media(max-width:860px){
  .di-split{grid-template-columns:1fr;gap:30px}
  .di-split--flip .di-figure{order:0}
}

.di-points{list-style:none;margin:20px 0 0;padding:0}
.di-points li{position:relative;padding-left:22px;margin-bottom:11px;color:var(--ink-soft)}
.di-points li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px;border-radius:2px;background:var(--signal)}
.di-points--night li::before{background:var(--violet)}
.di-points--save li::before{background:var(--issue)}

.di-steps{list-style:none;counter-reset:di;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.di-steps li{counter-increment:di;border-left:2px solid var(--signal);padding-left:14px}
.di-steps li::before{content:counter(di);display:block;font-family:var(--mono);font-size:12px;color:var(--signal);margin-bottom:4px}
.di-steps b{display:block;margin-bottom:3px}
.di-steps p{margin:0;color:var(--ink-soft);font-size:15px}

.di-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px}
.di-compare .card p:last-child{margin-bottom:0}
.di-compare .card b{display:block;margin-bottom:6px}

[dir="rtl"] .di-points li{padding-left:0;padding-right:22px}
[dir="rtl"] .di-points li::before{left:auto;right:0}