/* ============================================================
   Nodens Raio-X — REFINE layer (the elevation proposal)
   Loads AFTER nodens.css. Adds nothing the brand isn't already:
   it sharpens the existing system toward "sério/confiável".
   Three moves: (1) numeric rigor, (2) navy proof band,
   (3) controlled data density. Plus shared app chrome.
   ============================================================ */

/* ---- 0. import the existing typeface stack (mockups are standalone) ---- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,380..520;1,9..144,380..520&family=Plus+Jakarta+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   MOVE 1 — Numeric rigor. Every number that can be compared
   gets tabular figures + right alignment. This is the single
   strongest "serious software" signal (Stripe / Linear).
   ============================================================ */
.num,
.cmp td.n, .cmp th.n,
.stat .s-val, .card .val, .card .val-sm,
.voice-stat .vs-val, .funnel .pct,
.dtable td.n, .dtable th.n{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.cmp td.n, .cmp th.n, .dtable td.n, .dtable th.n, .funnel .pct{ text-align:right }
.delta{ font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums }
.delta.up{ color:var(--good) } .delta.down{ color:var(--bad) }
.delta::before{ font-size:11px; margin-right:3px }
.delta.up::before{ content:"▲" } .delta.down::before{ content:"▼" }

/* ============================================================
   MOVE 2 — Navy proof band. The report's first fold is PROOF,
   not document. One commanding number reversed out of navy,
   serif display, editorial. The CSS already had .section.dark;
   this is the report-grade variant.
   ============================================================ */
.proof{
  background:var(--navy); color:#fff; border-radius:16px;
  padding:clamp(28px,4vw,44px) clamp(28px,4vw,48px);
  box-shadow:var(--shadow-lift);
  background-image:
    radial-gradient(120% 140% at 0% 0%, rgba(13,115,119,.20), transparent 55%);
}
.proof .eyebrow{ color:#7fd4d4 }
.proof .lede{
  font-family:var(--serif); font-weight:420;
  font-size:clamp(34px,5vw,60px); line-height:1.04; letter-spacing:-.02em;
  font-variation-settings:"opsz" 144; margin:10px 0 0; max-width:14ch;
}
.proof .lede em{ font-style:italic; color:#7fd4d4 }
.proof-row{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin-top:28px; gap:0 }
.proof-row .p{ padding:0 22px; border-left:1px solid rgba(255,255,255,.14) }
.proof-row .p:first-child{ border-left:none; padding-left:0 }
.proof-row .pv{
  font-family:var(--serif); font-weight:500; font-size:clamp(26px,3vw,38px);
  line-height:1; letter-spacing:-.01em; font-variant-numeric:tabular-nums;
}
.proof-row .pv em{ font-style:italic; color:#7fd4d4 }
.proof-row .pl{ font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy-200); margin-top:9px }
.proof-foot{ font-family:var(--mono); font-size:11px; color:var(--navy-300);
  margin-top:26px; letter-spacing:.04em }

/* ============================================================
   MOVE 3 — Controlled data density. Bloomberg discipline,
   Nodens warmth. Hairlines, mono numerics, zebra so faint it
   reads as rhythm not stripes, zero chrome.
   ============================================================ */
.dtable{ width:100%; border-collapse:collapse; font-size:13px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  overflow:hidden }
.dtable thead th{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--label-ink); font-weight:500;
  padding:11px 14px; text-align:left; background:var(--off);
  border-bottom:1px solid var(--line); position:sticky; top:0;
}
.dtable td{ padding:9px 14px; border-bottom:1px solid var(--line); line-height:1.35 }
.dtable tbody tr:nth-child(even){ background:rgba(248,246,242,.55) }
.dtable tbody tr:hover{ background:var(--teal-light) }
.dtable tr:last-child td{ border-bottom:none }
.dtable td.name{ font-weight:500; color:var(--navy) }
.dtable .muted{ color:var(--muted) }
.dtable .mono{ font-family:var(--mono); font-variant-numeric:tabular-nums }
.dtable tfoot td{ background:var(--off); font-weight:600;
  border-top:2px solid var(--line); padding:11px 14px }

/* tiny inline trend dot */
.tdot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:1px }
.tdot.g{ background:var(--good) } .tdot.w{ background:var(--warn) } .tdot.b{ background:var(--bad) }

/* ============================================================
   Shared app chrome — stepper, sidebar, page shell.
   Lifts every app screen to the polished-wizard bar.
   ============================================================ */
.shell{ display:grid; grid-template-columns:232px 1fr; min-height:100vh }
.side{ background:var(--navy); color:#fff; padding:22px 18px;
  display:flex; flex-direction:column; gap:4px }
.side .mark{ color:#fff; margin-bottom:22px; padding:0 8px }
.side .mark .dot{ color:#7fd4d4 }
.side .nav{ display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:8px; font-size:13.5px; font-weight:500; color:var(--navy-200);
  text-decoration:none; cursor:pointer }
.side .nav:hover{ background:rgba(255,255,255,.05); color:#fff }
.side .nav.on{ background:rgba(127,212,212,.12); color:#fff }
.side .nav .ic{ width:16px; text-align:center; opacity:.85 }
.side .nav.on .ic{ color:#7fd4d4; opacity:1 }
.side .grp{ font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--navy-300);
  padding:14px 12px 6px }
.side .foot{ margin-top:auto; font-family:var(--mono); font-size:11px;
  color:var(--navy-300); padding:8px 12px; letter-spacing:.04em }
.main{ padding:clamp(24px,3.5vw,44px); background:var(--off) }
.page-head{ display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:24px; gap:20px; flex-wrap:wrap }
.page-head h1{ margin:0 }

/* stepper (wizard screens) */
.stepper{ display:flex; align-items:center; gap:0; margin:0 0 8px }
.stepper .st{ display:flex; align-items:center; gap:9px; font-size:12.5px;
  font-weight:600; color:var(--muted) }
.stepper .st .n{ width:22px; height:22px; border-radius:50%; display:grid;
  place-items:center; font-family:var(--mono); font-size:11px;
  border:1px solid var(--line); background:var(--paper); color:var(--muted) }
.stepper .st.done .n{ background:var(--teal); color:#fff; border-color:var(--teal) }
.stepper .st.now .n{ border-color:var(--teal); color:var(--teal-700) }
.stepper .st.now{ color:var(--navy) }
.stepper .bar{ flex:1; height:1px; background:var(--line); margin:0 12px; min-width:24px }
.stepper .st.done + .bar{ background:var(--teal) }

/* index / nav cards for the mockup set */
.mset{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px }
.mcard{ display:block; text-decoration:none; color:var(--navy);
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px; transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease }
.mcard:hover{ box-shadow:var(--shadow-card); border-color:transparent; transform:translateY(-2px) }
.mcard .k{ font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--teal) }
.mcard h3{ font-family:var(--serif); font-weight:500; font-size:19px; margin:8px 0 4px }
.mcard p{ font-size:12.5px; color:var(--muted); margin:0 }

/* swatch / spec helpers for the showcase */
.sw{ height:54px; border-radius:8px; border:1px solid var(--line) }
.specrow{ display:grid; grid-template-columns:160px 1fr; gap:16px; padding:14px 0;
  border-bottom:1px solid var(--line); align-items:center }
.specrow .k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted) }
.tag{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  padding:3px 9px; border-radius:20px; margin:0 4px 4px 0 }
.tag.safe{ background:var(--good-bg); color:var(--good) }
.tag.risk{ background:var(--warn-bg); color:var(--warn) }

/* ============================================================
   Responsive — phones/small tablets. Sidebar shell collapses
   to a horizontal topbar; data tables scroll instead of crush.
   ============================================================ */
@media (max-width:720px){
  .shell{ display:block; min-height:0 }
  .side{ flex-direction:row; align-items:center; gap:6px; padding:12px 14px;
    overflow-x:auto; -webkit-overflow-scrolling:touch }
  .side .mark{ margin-bottom:0; padding:0 6px; white-space:nowrap }
  .side .nav{ padding:7px 10px; white-space:nowrap }
  .side .grp,.side .foot{ display:none }
  .main{ padding:20px 14px 48px }
  .proof-row{ grid-auto-flow:row; gap:16px 0 }
  .proof-row .p{ border-left:none; padding:0 }
  .dtable{ display:block; overflow-x:auto; white-space:nowrap }
  .mset{ grid-template-columns:1fr }
  .specrow{ grid-template-columns:1fr; gap:6px }
}

/* print: chrome off, content flat */
@media print{
  .side,.stepper{ display:none }
  .shell{ display:block }
  .main{ padding:0; background:#fff }
  .dtable thead th{ position:static }
  .proof{ -webkit-print-color-adjust:exact; print-color-adjust:exact }
}