/* ===========================================================
   Arqia · Validação Contratual — design system
   Type: Montserrat (Galano Grotesque when licensed)
   Palette: docs/reference/brand/STYLE-GUIDE.md
   Accessibility: every text token clears WCAG AA 4.5:1 on both
   white and Alice blue. Vivid brand colors (--*-ico) are fills
   and dots only, never text: they fail AA as text. Guarded by
   contract_validation/tests/web/test_color_contrast.py
   =========================================================== */
:root{
  --bg:#FFFFFF; --surface:#fff; --sunken:#E9F0F3;

  /* text ramp — all three pass AA on white AND on Alice blue */
  --ink:#3D2F7F; --sec:#5A4E92; --ter:#6E639F;

  /* non-text only: borders, dividers, decorative glyphs */
  --icon-muted:#8E88A3;
  --line:rgba(61,47,127,.12); --line-2:rgba(61,47,127,.07);

  --accent:#662DFF; --accent-soft:#F1ECFE; --accent-soft-2:#E6DBFD;

  /* status: -ico is the vivid brand color (dot/icon), the base is the label */
  --ok:#0B6B41;   --ok-ico:#0AE587;   --ok-bg:#E8FBF3;
  --warn:#7A5B00; --warn-ico:#FFC700; --warn-bg:#FFF6DC;
  --bad:#D90A66;  --bad-ico:#FF0033;  --bad-bg:#FFF2F6;
  --neu:#5F5A70;  --neu-ico:#8E88A3;  --neu-bg:#F1F2F5;

  /* gradient #1 — logo and hero decoration ONLY (its red end is 3.96:1) */
  --grad-brand:linear-gradient(90deg,#FF0033 0%,#D90A66 35%,#662DFF 100%);
  /* hero fill — gradient #1 MIRRORED so text (left-aligned) sits on the indigo/rose
     end (5.02:1+, AA-safe for small text); the red end lands far-right under the
     ring motif, where no text goes. */
  --grad-hero:linear-gradient(90deg,#662DFF 0%,#D90A66 65%,#FF0033 100%);
  /* gradient #2 — nav bar; white text is safe end to end (5.02 → 10.99) */
  --grad-nav:linear-gradient(90deg,#D90A66 0%,#3D2F7F 100%);

  --r:16px;
  --shadow:0 1px 1px rgba(61,47,127,.05),0 8px 28px rgba(61,47,127,.07);
}
*{box-sizing:border-box}
html,body{margin:0}
/* Always reserve the scrollbar gutter so centered content (main{margin:0 auto})
   doesn't shift horizontally between pages that scroll and pages that don't. */
html{scrollbar-gutter:stable}
body{
  font-family:"Galano Grotesque","Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;line-height:1.47;letter-spacing:-.008em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.sp{flex:1}

/* ---- top bar ---- */
.bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:38px;padding:0 40px;height:72px;
  background:var(--grad-nav);
  border-bottom:1px solid rgba(255,255,255,.10)}
.logo-img{height:32px;display:block}
.tabs{display:flex;gap:28px;height:100%}
/* All tabs are solid white: on --grad-nav's rose end even .9-alpha white is only
   4.22:1 (below AA), so neither colour-alpha nor element opacity can dim an inactive
   tab and stay legible. The active state is carried by weight + the underline. */
.tabs a{display:flex;align-items:center;height:100%;font-weight:500;color:#fff;font-size:14px;position:relative;transition:font-weight .18s ease}
.tabs a.on{font-weight:700}
.tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:#fff;border-radius:2px}
.tabs a:hover{color:#fff}
.tabs .n{margin-left:6px;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;min-width:16px;height:16px;padding:0 4px;border-radius:999px;display:grid;place-items:center;align-self:center}
.usr{display:flex;align-items:center;gap:9px;color:rgba(255,255,255,.72);font-size:13px;font-weight:500;transition:transform .18s ease}
.av{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;font-weight:600;font-size:11px;
  transition:transform .25s cubic-bezier(.34,1.4,.5,1)}
.usr:hover .av{transform:scale(1.08)}

/* ---- page header ---- */
main{max-width:1140px;margin:0 auto;padding:40px 40px 76px}
.head{display:flex;align-items:flex-end;gap:13px;margin-bottom:32px}
.head h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.03em;line-height:1.05}
.head .sub{color:var(--ter);font-size:15px;font-weight:500;margin-bottom:4px}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--sec);font-weight:500;font-size:13.5px;margin-bottom:14px;transition:color .18s ease,transform .18s ease}
.back:hover{color:var(--accent);transform:translateX(-2px)}
.section-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ter);margin:0 0 12px}

/* ---- hero (showcase surfaces only: overview, kpis, login) ---- */
.hero-showcase{position:relative;overflow:hidden;border-radius:var(--r);padding:34px 36px;margin-bottom:32px;
  background:var(--grad-hero);color:#fff}
.hero-showcase h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.03em;color:#fff}
.hero-showcase .sub{display:block;color:#fff;font-size:15px;font-weight:500;margin-top:6px}
.hero-showcase .rings{position:absolute;right:-58px;top:-86px;width:280px;opacity:.5;pointer-events:none}

/* ---- login (no nav bar here — centered card on a soft brand wash) ---- */
.login-view{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px 20px}
.login-stack{width:100%;max-width:428px;display:flex;flex-direction:column;align-items:center}
.login-mark{width:150px;height:auto;margin-bottom:26px}
.login-card{position:relative;overflow:hidden;width:100%;background:#fff;border-radius:22px;
  padding:38px 34px 34px;border:1px solid rgba(61,47,127,.05);
  box-shadow:0 1px 2px rgba(61,47,127,.06), 0 24px 60px -20px rgba(61,47,127,.24)}
.login-rings{position:absolute;right:-72px;top:-88px;width:212px;opacity:.14;pointer-events:none}
.login-title{position:relative;margin:0;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.login-sub{position:relative;margin:6px 0 26px;font-size:14px;line-height:1.5;color:var(--sec)}
.login-form{position:relative;display:flex;flex-direction:column}
.login-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ter);margin:0 0 7px}
.login-input{width:100%;padding:13px 14px;font-family:inherit;font-size:14px;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:12px;margin-bottom:18px;transition:border-color .16s ease,box-shadow .16s ease}
.login-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.login-hint{margin:-8px 0 20px;font-size:12px;color:var(--ter)}
.login-error{margin:-8px 0 20px;font-size:12px;font-weight:600;color:var(--bad)}
.login-btn{display:block;width:100%;text-align:center;border:0;border-radius:12px;padding:14px;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.01em;color:#fff;
  background:linear-gradient(90deg,#D90A66 0%,#662DFF 100%);box-shadow:0 8px 20px -8px rgba(102,45,255,.5);
  transition:transform .18s cubic-bezier(.34,1.4,.5,1),filter .18s ease,box-shadow .18s ease}
.login-btn:hover{transform:translateY(-1px);filter:brightness(1.05);box-shadow:0 12px 26px -8px rgba(102,45,255,.55)}
.login-btn:active{transform:scale(.99)}
.login-secure{position:relative;display:flex;align-items:flex-start;gap:9px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--line);font-size:12.5px;line-height:1.45;color:var(--sec)}
.login-secure svg{flex:none;margin-top:1px;color:var(--accent)}
.login-note{position:relative;margin:18px 0 0;font-size:12px;color:var(--ter);text-align:center}
@media (prefers-reduced-motion:reduce){.login-btn{transition:none}}
@media (max-width:480px){.login-card{padding:30px 22px}.login-mark{width:132px}}

/* ---- buttons / controls ---- */
.linkbtn{color:var(--accent);font-weight:500;font-size:14px;padding:9px 6px;transition:color .18s ease}
.btn{background:var(--accent);color:#fff;border:0;border-radius:11px;padding:10px 17px;font-weight:600;font-size:14px;cursor:pointer;font-family:inherit;letter-spacing:-.01em;
  transition:filter .2s ease,transform .25s cubic-bezier(.34,1.4,.5,1),box-shadow .2s ease}
.head .btn,.head .linkbtn{margin-left:12px}
.btn:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 6px 18px rgba(94,46,230,.28)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--accent-soft-2);color:var(--accent);box-shadow:none}
.search{position:relative;width:300px}
.search input{width:100%;padding:10px 13px 10px 36px;border:1px solid var(--line);border-radius:11px;font-family:inherit;font-size:14px;background:var(--surface);letter-spacing:-.01em}
.search input::placeholder{color:var(--icon-muted)}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--icon-muted)}
.filterbtn{display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:9px 14px;font-weight:500;color:var(--ink);font-size:13.5px;cursor:pointer;transition:border-color .18s ease,color .18s ease}
.filterbtn:hover{border-color:var(--accent-soft-2);color:var(--accent)}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent);padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:600;transition:transform .18s ease}
.chip:hover{transform:translateY(-1px)}.chip .x{opacity:.55;font-weight:700;cursor:pointer}
.toolbar{display:flex;align-items:center;gap:14px;margin-bottom:18px}

/* segmented control */
.seg{display:flex;background:#EDEDF0;border-radius:10px;padding:2px;gap:2px;position:relative}
.seg a{padding:7px 15px;font-weight:500;font-size:13px;color:var(--sec);border-radius:8px;letter-spacing:-.01em;position:relative;z-index:1;transition:color .2s ease}
.seg a.on{color:var(--ink);font-weight:600}
.seg-ind{position:absolute;top:2px;height:calc(100% - 4px);left:0;width:0;background:#fff;border-radius:8px;z-index:0;
  box-shadow:0 1px 3px rgba(0,0,0,.10),0 1px 1px rgba(0,0,0,.04);
  transition:transform .42s cubic-bezier(.34,1.45,.5,1),width .42s cubic-bezier(.34,1.45,.5,1)}

/* ---- summary / distribution bar ---- */
.summary{margin-bottom:22px}
.summary .n{font-size:44px;font-weight:700;letter-spacing:-.035em;line-height:1}
.summary .cap{color:var(--ter);font-size:14px;font-weight:500;margin:9px 0 0}
.distbar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--neu-bg);width:100%;box-shadow:inset 0 0 0 1px rgba(20,20,30,.04)}
.distbar span{display:block;height:100%;transition:filter .2s ease}
.distbar:hover span{filter:saturate(1.15)}
.legend{display:flex;gap:28px;margin-top:18px;flex-wrap:wrap}
.legend .it{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--sec);font-weight:500}
.legend .it .dot{width:8px;height:8px;border-radius:50%}
.legend .it b{color:var(--ink);font-weight:600}

/* ---- panel / table ---- */
.panel{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.panel.pad{padding:22px 24px}
table{width:100%;border-collapse:collapse}
thead th{text-align:left;padding:14px 22px;font-size:12px;font-weight:600;color:var(--ter);border-bottom:1px solid var(--line-2)}
tbody td{padding:16px 22px;border-bottom:1px solid var(--line-2);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer;transition:background .15s ease}
tbody tr.clickable:hover{background:#FAFAFC}
.fname{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.sub-cnpj{color:var(--ter);font-size:12.5px;margin-top:3px;font-weight:500;letter-spacing:0}
.type,.when{color:var(--sec);font-size:13.5px}
.motivo{color:var(--ter);font-size:12px;margin-top:6px;font-weight:500;max-width:240px}
.valor{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.flag{display:inline-flex;vertical-align:-1px;margin-right:7px;color:var(--bad)}
tbody tr.risk td:first-child{box-shadow:inset 3px 0 0 var(--bad)}
.chev{color:var(--icon-muted);font-size:19px;text-align:right;width:26px;transition:color .18s ease,transform .18s ease}
tbody tr.clickable:hover .chev{color:var(--accent);transform:translateX(3px)}
.pag{display:flex;align-items:center;gap:20px;padding:16px 22px;color:var(--sec);font-size:13.5px;border-top:1px solid var(--line-2)}
.pag a{color:var(--accent);font-weight:500}.pag a.off{color:var(--ter)}

/* ---- status pill ---- */
.st{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:-.01em}
.st .dot{width:6px;height:6px;border-radius:50%}
.st.ok{background:var(--ok-bg);color:var(--ok)} .st.ok .dot{background:var(--ok-ico)}
.st.warn{background:var(--warn-bg);color:var(--warn)} .st.warn .dot{background:var(--warn-ico)}
.st.bad{background:var(--bad-bg);color:var(--bad)} .st.bad .dot{background:var(--bad-ico)}
.st.neu{background:var(--neu-bg);color:var(--neu)} .st.neu .dot{background:var(--neu-ico)}

/* ---- KPI band (single panel, internal dividers) ---- */
.kpis{display:flex}
.kpi{flex:1;padding:21px 24px;border-left:1px solid var(--line-2);display:flex;flex-direction:column}
.kpi:first-child{border-left:0}
.kpi .l{color:var(--sec);font-size:13px;font-weight:500}
.kpi .top{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:9px}
.kpi .v{font-size:29px;font-weight:700;letter-spacing:-.03em;line-height:.95}
.kpi .d{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;margin-top:9px}
.kpi .d.up{color:var(--ok)} .kpi .d.down{color:var(--bad)} .kpi .d.flat{color:var(--ter)}
.kpi .sub{color:var(--ter);font-size:11.5px;font-weight:500;margin-top:7px;line-height:1.35}
/* per-KPI sparkline */
.spark{width:72px;height:26px;flex:none;overflow:visible;display:block}
.spark .a{opacity:0;animation:fadeUp .6s ease .75s forwards}
.spark .l{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.25s cubic-bezier(.22,1,.36,1) .45s forwards}
.spark .pt{opacity:0;animation:fadeUp .4s ease 1.35s forwards}
.spark.up .l{stroke:var(--ok)} .spark.up .a{fill:rgba(31,164,99,.10)} .spark.up .pt{fill:var(--ok)}
.spark.down .l{stroke:var(--accent)} .spark.down .a{fill:rgba(94,46,230,.10)} .spark.down .pt{fill:var(--accent)}

/* ---- bar chart (execuções por dia) ---- */
.chart{display:flex;align-items:flex-end;gap:6px;height:200px;padding-top:8px}
.chart .col{flex:1;display:flex;flex-direction:column-reverse;height:100%;justify-content:flex-start;gap:2px;
  transform:scaleY(0);transform-origin:bottom;animation:growY .8s cubic-bezier(.22,1,.36,1) forwards}
.chart .col .seg-bar{width:100%;border-radius:3px}
.chart-x{display:flex;gap:6px;margin-top:10px}
.chart-x span{flex:1;text-align:center;font-size:11px;color:var(--ter);font-weight:500}

/* ---- top failing rules (horizontal bars) ---- */
.rule-row{display:grid;grid-template-columns:1fr 46px;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-2)}
.rule-row:last-child{border-bottom:0}
.rule-row .name{font-size:13.5px;font-weight:600}
.rule-row .track{height:10px;border-radius:999px;background:var(--neu-bg);margin-top:8px;overflow:hidden}
.rule-row .fill{height:100%;background:var(--bad);border-radius:999px;width:0;animation:growX .9s cubic-bezier(.22,1,.36,1) forwards}
.rule-row .cnt{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:15px}

/* ---- alerts ---- */
.alert{display:flex;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line-2);align-items:flex-start;transition:background .15s ease}
.alert:last-child{border-bottom:0}
.alert:hover{background:#FAFAFC}
.alert.unread{box-shadow:inset 3px 0 0 var(--accent)}
.alert .ic{width:22px;display:grid;place-items:center;flex:none;margin-top:1px}
.alert .ic svg{width:20px;height:20px}
.alert .ic.crit{color:var(--bad)}
.alert .ic.warn{color:var(--warn)}
.alert .ic.info{color:var(--accent)}
.alert .body{flex:1;min-width:0}
.alert .t{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.alert.unread .t::after{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-left:8px;vertical-align:middle}
.alert .m{color:var(--sec);font-size:13px;margin-top:4px}
.alert .meta{color:var(--ter);font-size:12.5px;margin-top:7px;font-weight:500}
.alert .when{color:var(--ter);font-size:12.5px;font-weight:500;white-space:nowrap;margin-left:8px}
.ack{background:none;border:1px solid var(--line);color:var(--sec);border-radius:9px;padding:7px 12px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:border-color .18s,color .18s}
.ack:hover{border-color:var(--accent-soft-2);color:var(--accent)}

/* ---- home: value-at-risk hero + mini stats ---- */
.hero-risk .n{font-size:46px;font-weight:700;letter-spacing:-.035em;line-height:1}
.hero-risk .cap{color:var(--ter);font-size:14px;font-weight:500;margin:10px 0 0}
.atmini{display:flex;gap:26px;margin-top:18px;flex-wrap:wrap}
.atmini .it{font-size:13.5px;color:var(--sec);font-weight:500;display:flex;gap:8px;align-items:center}
.atmini .it .dot{width:8px;height:8px;border-radius:50%}
.atmini .it b{color:var(--ink);font-weight:700}
.panel-head{display:flex;align-items:center;gap:10px;padding:16px 22px;border-bottom:1px solid var(--line-2)}
.panel-head .ttl{font-size:14px;font-weight:700;letter-spacing:-.01em}
.panel-head .cnt{background:var(--bad-bg);color:var(--bad);font-size:12px;font-weight:700;padding:1px 9px;border-radius:999px}
.panel-head a{margin-left:auto;color:var(--accent);font-weight:500;font-size:13px}
/* activity feed */
.feed-item{display:flex;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.feed-item:last-child{border-bottom:0}
.feed-item .tm{color:var(--ter);font-size:12.5px;width:58px;flex:none;font-variant-numeric:tabular-nums}
.feed-item .nm{flex:1;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.statline{display:flex;gap:30px;margin-top:20px;flex-wrap:wrap}
.statline .s .v{font-size:24px;font-weight:700;letter-spacing:-.02em}
.statline .s .l{color:var(--sec);font-size:12.5px;font-weight:500;margin-top:3px}
/* line / area chart */
.linechart svg{display:block;width:100%;height:auto;overflow:visible}
.linechart .area{transform-origin:bottom;transform:scaleY(0);animation:growY 1s cubic-bezier(.22,1,.36,1) .35s forwards}
.linechart .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.5s cubic-bezier(.22,1,.36,1) .3s forwards}
.linechart .dot{fill:var(--accent);opacity:0;animation:fadeUp .4s ease forwards;animation-delay:1.4s}
.linechart-x{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--ter);font-weight:500}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---- bento grid ---- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:152px;gap:18px}
.tile{background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 24px;overflow:hidden;display:flex;flex-direction:column;min-width:0;position:relative;
  opacity:0;animation:fadeUp .55s cubic-bezier(.22,1,.36,1) forwards}
.tile.flush{padding:0}
.tile .section-label{margin:0 0 14px}
.tile-num{font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1}
.tile-num.lg{font-size:46px}
.tile-lbl{color:var(--sec);font-size:13px;font-weight:500;margin-top:auto;padding-top:10px}
.tile .d{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;margin-top:8px}
.tile .d.up{color:var(--ok)}.tile .d.down{color:var(--bad)}
.tile:nth-child(1){animation-delay:.04s}.tile:nth-child(2){animation-delay:.09s}
.tile:nth-child(3){animation-delay:.14s}.tile:nth-child(4){animation-delay:.19s}
.tile:nth-child(5){animation-delay:.24s}.tile:nth-child(6){animation-delay:.29s}
.tile:nth-child(7){animation-delay:.34s}.tile:nth-child(8){animation-delay:.39s}
.tile:nth-child(9){animation-delay:.44s}.tile:nth-child(10){animation-delay:.49s}
.tile.scroll{overflow-y:auto}
@media(max-width:980px){.bento{grid-template-columns:1fr 1fr}.tile{grid-column:auto!important;grid-row:auto!important;min-height:150px}}

/* ---- open stat band (not boxed) ---- */
.stats-open{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:30px}
.stats-open .st-item{flex:1;padding:18px 26px;border-left:1px solid var(--line-2)}
.stats-open .st-item:first-child{border-left:0;padding-left:2px}
.stats-open .l{color:var(--sec);font-size:12.5px;font-weight:500}
.stats-open .v{font-size:27px;font-weight:700;letter-spacing:-.025em;margin-top:7px;line-height:1}
.stats-open .d{display:inline-flex;gap:4px;font-size:12.5px;font-weight:600;margin-top:8px}
.stats-open .d.up{color:var(--ok)}.stats-open .d.down{color:var(--bad)}.stats-open .d.flat{color:var(--ter)}

/* ---- skeleton loading ---- */
.skel{position:relative;overflow:hidden;background:#E9E9EE;border-radius:8px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer 1.3s infinite}
.sk-line{height:14px;border-radius:6px}
@keyframes shimmer{100%{transform:translateX(100%)}}
body.loading #view{display:none}
body:not(.loading) #skeleton{display:none}

/* ---- hero donut (pizza) ---- */
.hero-flex{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap}
.donut-block{display:flex;align-items:center;gap:28px}
.donut{width:138px;height:138px;flex:none;transform-origin:center;animation:popIn .6s cubic-bezier(.34,1.4,.5,1) .25s both}
@keyframes popIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.dleg{display:flex;flex-direction:column;gap:13px}
.dleg .it{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--sec);font-weight:500}
.dleg .it b{color:var(--ink);font-weight:700;min-width:12px}
.dleg .it .dot{width:9px;height:9px;border-radius:50%}
.resumo-row{display:flex;align-items:center;gap:48px;flex-wrap:wrap}
.resumo-dist{flex:1;min-width:300px}
.resumo-row .statline{margin:0!important;flex:none}
/* waffle / unit chart */
.waffle{display:grid;grid-template-columns:repeat(4,28px);gap:7px;flex:none}
.waffle span{width:28px;height:28px;border-radius:7px;animation:popIn .4s cubic-bezier(.34,1.4,.5,1) both}
.waffle span:nth-child(1){animation-delay:.22s}.waffle span:nth-child(2){animation-delay:.27s}
.waffle span:nth-child(3){animation-delay:.32s}.waffle span:nth-child(4){animation-delay:.37s}
.waffle span:nth-child(5){animation-delay:.42s}.waffle span:nth-child(6){animation-delay:.47s}
.waffle span:nth-child(7){animation-delay:.52s}.waffle span:nth-child(8){animation-delay:.57s}
/* nested mini-cards inside a panel */
.mini-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px;align-items:start}
.mini{background:#F3F3F8;border-radius:14px;padding:20px;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px}
.mini .l{color:var(--sec);font-size:13px;font-weight:600;order:-1}
.mini .v{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.mini .v.cur{font-size:27px}
/* hero breakdown (clean counts, horizontal; number beside the bullet) */
.hbreak{display:flex;flex-direction:row;gap:38px;flex-wrap:wrap}
.hb{display:flex;flex-direction:row;align-items:center;gap:10px}
.hb .dot{width:9px;height:9px;border-radius:50%;flex:none}
.hb .v{font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1}
.hb .lab{color:var(--sec);font-size:14px;font-weight:500}
/* feed that fills available height */
.feed{flex:1;display:flex;flex-direction:column;justify-content:space-between}
/* donut composition (por tipo de documento) */
.donut-wrap{display:flex;flex-direction:column;align-items:center}
.donut-c{position:relative;width:152px;height:152px;animation:popIn .6s cubic-bezier(.34,1.4,.5,1) .3s both}
.donut-c svg{width:152px;height:152px;transform:rotate(-90deg);display:block}
.donut-c circle{fill:none;stroke-width:15}
.donut-c .ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-c .ctr .n{font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1}
.donut-c .ctr .t{color:var(--ter);font-size:11px;font-weight:600;margin-top:3px;text-transform:uppercase;letter-spacing:.04em}
.type-legend{display:flex;flex-direction:column;margin-top:20px;width:100%}
.type-legend .row{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;
  opacity:0;animation:fadeUp .5s cubic-bezier(.22,1,.36,1) forwards}
.type-legend .row:last-child{border-bottom:0}
.type-legend .row:nth-child(1){animation-delay:.45s}.type-legend .row:nth-child(2){animation-delay:.51s}
.type-legend .row:nth-child(3){animation-delay:.57s}.type-legend .row:nth-child(4){animation-delay:.63s}
.type-legend .row:nth-child(5){animation-delay:.69s}.type-legend .row:nth-child(6){animation-delay:.75s}
.type-legend .dot{width:10px;height:10px;border-radius:50%;flex:none}
.type-legend .row.z{cursor:default}
.type-legend .row.z .nm,.type-legend .row.z .ct,.type-legend .row.z .dot{opacity:.5}
.type-legend .row.z:hover{background:transparent}
.type-legend .nm{flex:1;font-weight:500}
.type-legend .ct{font-weight:700;font-variant-numeric:tabular-nums}
.type-legend .pc{color:var(--ter);font-size:12px;width:40px;text-align:right;font-variant-numeric:tabular-nums}
/* compliance data-source rows */
.source-row{display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.source-row:last-child{border-bottom:0}
.source-row .info{flex:1;min-width:0}
.source-row .nm{font-weight:600;font-size:13.5px}
.source-row .meta{color:var(--ter);font-size:12px;margin-top:4px}

/* ---- detail page ---- */
.dhead{display:flex;align-items:flex-start;gap:14px;margin-bottom:26px}
.dhead h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.025em}
.dhead .meta-cnpj{color:var(--ter);font-size:14px;margin-top:5px;font-weight:500}
.banner{border-radius:var(--r);box-shadow:var(--shadow);background:var(--surface);padding:22px 24px;margin-bottom:26px;position:relative;overflow:hidden}
.banner::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.banner.bad::before{background:var(--bad)} .banner.ok::before{background:var(--ok)} .banner.warn::before{background:var(--warn)}
.banner .verdict{display:flex;align-items:center;gap:12px}
.banner .verdict h2{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em}
.banner .just{color:var(--sec);font-size:14px;margin-top:10px}
.banner ul{margin:12px 0 0;padding:0;list-style:none}
.banner li{display:flex;align-items:flex-start;gap:9px;padding:6px 0;color:var(--ink);font-size:13.5px}
.banner li::before{content:"›";color:var(--bad);font-weight:700;margin-top:-1px}
.grid-2{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:stretch}
.grid-2>.panel{display:flex;flex-direction:column}
.block{margin-bottom:24px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:11px 18px}
.kv dt{color:var(--sec);font-size:13px;font-weight:500}
.kv dd{margin:0;font-weight:600;font-size:13.5px;text-align:right}
.rules td{padding:13px 22px;font-size:13.5px}
.rules .rn{font-weight:600}
.rules .rmsg{color:var(--ter);font-size:12px;margin-top:3px}
.stage{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.stage:last-child{border-bottom:0}
.stage .ck{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:11px;font-weight:700}
.stage .ck.ok{background:var(--ok-bg);color:var(--ok)}
.stage .ck.bad{background:var(--bad-bg);color:var(--bad)}
.stage .nm{flex:1}.stage .dur{color:var(--ter);font-size:12.5px;font-variant-numeric:tabular-nums}

/* ---- bold ranking bars (full-width, color-forward) ---- */
.bc{display:flex;flex-direction:column}
.bc-row{padding:9px 0;border-radius:8px;transition:background .15s ease;cursor:default}
.bc-row:hover{background:#FAFAFC}
.bc-row .top{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-bottom:9px}
.bc-row .nm{font-size:13.5px;font-weight:600}
.bc-row .ct{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;flex:none}
.bc-track{height:12px;background:#F1F1F5;border-radius:999px;overflow:hidden}
.bc-fill{display:block;height:100%;border-radius:999px;width:0;animation:growX .95s cubic-bezier(.22,1,.36,1) forwards;transition:filter .18s ease}
.bc-row:hover .bc-fill{filter:brightness(1.06) saturate(1.08)}

/* ---- stacked time-composition bar ---- */
.timebar{display:flex;height:32px;border-radius:11px;overflow:hidden;background:#F1F1F5;margin-top:6px;
  box-shadow:inset 0 0 0 1px rgba(20,20,30,.04);clip-path:inset(0 100% 0 0);animation:barReveal 1s cubic-bezier(.22,1,.36,1) .35s forwards}
.timebar span{display:block;height:100%;cursor:pointer;transition:filter .18s ease}
.timebar:hover span{filter:saturate(.7) brightness(1.05)}
.timebar span:hover{filter:saturate(1.18) brightness(1.06)!important}
.timeleg{display:flex;flex-direction:column;margin-top:20px}
.timeleg .it{display:flex;align-items:center;gap:11px;font-size:13.5px;padding:12px 0;border-bottom:1px solid var(--line-2);
  opacity:0;animation:fadeUp .5s cubic-bezier(.22,1,.36,1) forwards}
.timeleg .it:last-child{border-bottom:0}
.timeleg .it:nth-child(1){animation-delay:.5s}.timeleg .it:nth-child(2){animation-delay:.56s}
.timeleg .it:nth-child(3){animation-delay:.62s}.timeleg .it:nth-child(4){animation-delay:.68s}
.timeleg .it:nth-child(5){animation-delay:.74s}.timeleg .it:nth-child(6){animation-delay:.8s}
.timeleg .it .dot{width:10px;height:10px;border-radius:50%;flex:none}
.timeleg .it .nm{flex:1;color:var(--sec);font-weight:500}
.timeleg .it b{font-weight:700;font-variant-numeric:tabular-nums}

/* ---- "em breve" placeholder states (real layout + stand-in values) ---- */
.ph{color:var(--ter)!important}
.eb-badge{background:var(--neu-bg);color:var(--neu);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:999px;white-space:nowrap}
.summary .topline{display:flex;align-items:center;gap:14px}
.eb-headrow{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.eb-headrow .section-label{margin:0}
.panel-head .eb-badge{margin-left:auto}
.st.placeholder{background:var(--neu-bg);color:var(--neu)} .st.placeholder .dot{background:var(--neu)}
.feed-head{display:flex;align-items:center;gap:13px;padding-bottom:11px;border-bottom:1px solid var(--line);font-size:12px;font-weight:600;color:var(--ter)}
.feed-head .tm{width:58px;flex:none}.feed-head .nm{flex:1}
/* neutral placeholder marks for charts */
.ph-bar{background:var(--neu-bg)!important}
.ph-track .fill{background:var(--neu-bg)!important}
.ph-line{stroke:var(--icon-muted)!important;stroke-dasharray:4 4!important;opacity:.5}

/* ===== interactive: tooltip + hover states ===== */
.tip{position:fixed;z-index:60;pointer-events:none;left:0;top:0;
  background:#16161A;color:#fff;border-radius:11px;padding:10px 13px;font-size:12.5px;font-weight:500;
  box-shadow:0 10px 30px rgba(20,20,30,.22),0 2px 6px rgba(20,20,30,.14);
  opacity:0;transform:translateY(5px) scale(.97);transform-origin:bottom left;
  transition:opacity .14s ease,transform .18s cubic-bezier(.34,1.4,.5,1);white-space:nowrap}
.tip.on{opacity:1;transform:none}
.tip .tt{font-weight:700;font-size:12.5px;margin-bottom:6px;letter-spacing:-.01em}
.tip .rr{display:flex;align-items:center;gap:16px;justify-content:space-between;margin-top:4px;font-size:12px;color:rgba(255,255,255,.78)}
.tip .rr .nm{display:flex;align-items:center;gap:7px}
.tip .rr .dot{width:7px;height:7px;border-radius:50%;flex:none}
.tip .rr b{color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.tip .big{font-size:18px;font-weight:700;letter-spacing:-.02em}

/* daily chart hover */
.chart .col{transition:opacity .2s ease,filter .2s ease;cursor:pointer}
.chart.dim .col:not(.hot){opacity:.3;filter:saturate(.55)}
.chart.dim .col.hot{filter:saturate(1.12)}

/* donut hover */
.donut-c circle{transition:opacity .22s ease,stroke-width .22s cubic-bezier(.34,1.4,.5,1)}
.donut-c.dim circle:not(.hot){opacity:.26}
.donut-c circle.hot{stroke-width:19}
.type-legend .row{cursor:pointer;border-radius:8px;transition:background .15s ease}
.type-legend .row:hover{background:#FAFAFC}

/* rule-row hover */
.rule-row{cursor:default;border-radius:8px;transition:background .15s ease}
.rule-row:hover{background:#FAFAFC}
.rule-row .fill{transition:filter .18s ease}
.rule-row:hover .fill{filter:brightness(1.08) saturate(1.1)}

/* line chart hover */
.linechart{position:relative}
.lc-pts circle{cursor:pointer}
.lc-hot{fill:#fff;stroke:var(--accent);stroke-width:3;opacity:0;transition:opacity .15s ease}
.lc-hot.on{opacity:1}
.lc-guide{stroke:var(--line);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .15s ease}
.lc-guide.on{opacity:1}

/* ===== motion ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes barReveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes growY{to{transform:scaleY(1)}}
@keyframes growX{to{width:var(--w,100%)}}
.head{opacity:0;animation:fadeUp .55s cubic-bezier(.22,1,.36,1) .02s forwards}
.summary{opacity:0;animation:fadeUp .55s cubic-bezier(.22,1,.36,1) .10s forwards}
.toolbar{opacity:0;animation:fadeUp .55s cubic-bezier(.22,1,.36,1) .18s forwards}
.reveal{opacity:0;animation:fadeUp .55s cubic-bezier(.22,1,.36,1) forwards}
.panel:not(.no-anim){opacity:0;animation:fadeUp .55s cubic-bezier(.22,1,.36,1) .24s forwards}
.banner{opacity:0;animation:fadeUp .55s cubic-bezier(.22,1,.36,1) .12s forwards}
.distbar{clip-path:inset(0 100% 0 0);animation:barReveal 1.05s cubic-bezier(.22,1,.36,1) .5s forwards}
.d-1{animation-delay:.10s!important}.d-2{animation-delay:.18s!important}.d-3{animation-delay:.26s!important}
.d-4{animation-delay:.34s!important}.d-5{animation-delay:.42s!important}
/* staggered children */
tbody tr.clickable{opacity:0;animation:fadeUp .5s cubic-bezier(.22,1,.36,1) forwards}
tbody tr:nth-child(1){animation-delay:.30s}tbody tr:nth-child(2){animation-delay:.34s}
tbody tr:nth-child(3){animation-delay:.38s}tbody tr:nth-child(4){animation-delay:.42s}
tbody tr:nth-child(5){animation-delay:.46s}tbody tr:nth-child(6){animation-delay:.50s}
tbody tr:nth-child(7){animation-delay:.54s}tbody tr:nth-child(8){animation-delay:.58s}
.kpi:nth-child(1){animation-delay:.05s}.kpi:nth-child(2){animation-delay:.12s}
.kpi:nth-child(3){animation-delay:.19s}.kpi:nth-child(4){animation-delay:.26s}.kpi:nth-child(5){animation-delay:.33s}
.chart .col:nth-child(n){animation-delay:calc(.4s + (var(--i,0) * .03s))}
.alert{opacity:0;animation:fadeUp .5s cubic-bezier(.22,1,.36,1) forwards}
.alert:nth-child(1){animation-delay:.30s}.alert:nth-child(2){animation-delay:.36s}
.alert:nth-child(3){animation-delay:.42s}.alert:nth-child(4){animation-delay:.48s}
.alert:nth-child(5){animation-delay:.54s}.alert:nth-child(6){animation-delay:.60s}
.rule-row .fill{animation-delay:.5s}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .head,.summary,.toolbar,.panel,.banner,tbody tr,.alert,.reveal,.tile{opacity:1!important}
  .distbar{clip-path:none!important}.chart .col{transform:none!important}.rule-row .fill{width:var(--w)!important}
  .linechart .area{transform:none!important}.linechart .line{stroke-dashoffset:0!important}.linechart .dot{opacity:1!important}
  .spark .l{stroke-dashoffset:0!important}.spark .a,.spark .pt{opacity:1!important}
  .type-legend .row{opacity:1!important}
  .bc-fill{width:var(--w)!important}.timebar{clip-path:none!important}.timeleg .it{opacity:1!important}
}

/* ---- Execução page -------------------------------------------------
   Rows separated by a hairline and whitespace rather than a box each:
   a card per problem plus a strip plus a pill stated the severity three
   times and read as clutter. The dot and the word are one signal.
   Warning uses no coloured outline on purpose: --warn-ico on white is
   invisible at 1px. -------------------------------------------------- */
.exe-meta{font-size:12px;color:var(--ter);margin:-10px 0 14px}
.exe-verdict{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:4px}

.exe-panel{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:8px;background:var(--surface)}
.exe-head{display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--neu-bg);border-bottom:1px solid var(--line-2);font-size:12px;font-weight:600;color:var(--sec)}
.exe-count{margin-left:auto;font-weight:500;color:var(--ter)}
.exe-quiet .exe-head{background:var(--surface)}

.exe-row{border-bottom:1px solid var(--line-2)}
.exe-row:last-child{border-bottom:0}
.exe-row>summary{display:flex;gap:12px;align-items:flex-start;padding:15px 16px;cursor:pointer;list-style:none}
.exe-row>summary::-webkit-details-marker{display:none}
.exe-row>summary:hover{background:var(--accent-soft)}
.exe-row.static{display:flex;gap:12px;align-items:flex-start;padding:15px 16px}
.exe-dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--neu-ico)}
.exe-dot.ok{background:var(--ok-ico)}.exe-dot.warn{background:var(--warn-ico)}
.exe-dot.bad{background:var(--bad-ico)}.exe-dot.neu{background:var(--neu-ico)}
.exe-body{flex:1;display:flex;flex-direction:column;gap:3px}
.exe-title{font-size:14px;font-weight:600;line-height:1.4}
.exe-why{font-size:12.5px;color:var(--sec);line-height:1.5}
.exe-sev{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;flex:none;padding-top:4px;color:var(--neu)}
.exe-sev.bad{color:var(--bad)}.exe-sev.warn{color:var(--warn)}
.exe-chev{color:var(--icon-muted);flex:none;padding-top:2px;transition:transform .15s ease}
.exe-row[open]>summary .exe-chev{transform:rotate(90deg)}

/* The expanded region is more of the same row, not a different surface. A
   slab of grey behind it read as a hole in the page, so it stays white and
   a rail in the dot's column marks how far the disclosure reaches. */
.exe-det{position:relative;padding:2px 16px 18px 40px;background:var(--surface)}
.exe-det::before{content:"";position:absolute;left:19px;top:0;bottom:18px;
  width:2px;border-radius:2px;background:var(--line)}
.exe-dl{display:grid;grid-template-columns:120px 1fr;gap:7px 14px;font-size:12.5px;margin:0}
.exe-dl dt{color:var(--ter)}
.exe-dl dd{margin:0}
.miss{color:var(--bad);font-weight:600}
.exe-quote{background:var(--neu-bg);border:1px solid var(--line-2);border-radius:9px;padding:10px 12px;font-size:12px;color:var(--sec);line-height:1.6;margin-top:10px}
.exe-audit{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10.5px;color:var(--ter);margin-top:12px}
/* One entry per line, the rule named on the left and what it found on the
   right. Reading down a single column of names is how you find the one you
   want; stacking name over message doubled the height and made the
   messages the thing you scanned. The bucket's colour is already on the
   row you opened, so it is not repeated per entry. */
.exe-list{list-style:none;padding:0;margin:2px 0 0}
.exe-list li{display:grid;grid-template-columns:minmax(0,22em) minmax(0,1fr);
  gap:3px 26px;align-items:baseline;padding:9px 0;
  border-top:1px solid var(--line-2);font-size:12.5px}
.exe-list b{font-weight:600;line-height:1.4}
.exe-list span{color:var(--ter);font-size:11.5px;line-height:1.5}
/* Below this the two columns would each be too narrow to hold a phrase, so
   the message goes back under its name. */
@media (max-width:820px){.exe-list li{grid-template-columns:1fr}}

.exe-slices{display:flex;gap:3px;flex:1;margin-left:auto;max-width:200px}
.exe-slices i{height:5px;flex:1;border-radius:3px;background:var(--neu-ico)}
.exe-slices i.ok{background:var(--ok-ico)}.exe-slices i.bad{background:var(--bad-ico)}
.exe-slices i.warn{background:var(--warn-ico)}.exe-slices i.neu{background:var(--neu-ico)}

.exe-kv{display:grid;grid-template-columns:1fr 1fr;gap:0 26px;padding:4px 16px 12px}
.exe-k{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:12.5px}
.exe-k span:first-child{color:var(--ter)}
.exe-k span:last-child{text-align:right;font-weight:500}
@media (max-width:720px){.exe-kv{grid-template-columns:1fr}}

.exe-table{width:100%;border-collapse:collapse;font-size:12.5px}
.exe-table th{text-align:left;font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ter);padding:11px 16px;font-weight:700;background:var(--neu-bg)}
.exe-table td{padding:11px 16px;border-top:1px solid var(--line-2)}

.exe-clause{padding:13px 16px;border-top:1px solid var(--line-2)}
.exe-clause:first-child{border-top:0}

/* Processamento: one row while nothing is broken, the whole trail once
   something is. A stacked time bar and eleven full-width legend rows spent
   half a screen to say "it ran"; on a healthy run this is diagnostics nobody
   reads, and on a failed one the row itself has to name the stage. */
.exe-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:0 26px}
.exe-grid2 .it{display:flex;align-items:center;gap:10px;font-size:12.5px;padding:9px 0;
  border-bottom:1px solid var(--line-2)}
.exe-grid2 .sw{width:9px;height:9px;border-radius:50%;flex:none;background:var(--accent)}
.exe-grid2 .sw.bad{background:var(--bad-ico)}
.exe-grid2 .sw.neu,.exe-grid2 .sw.off{background:var(--neu-ico)}
.exe-grid2 .nm{flex:1;color:var(--sec);font-weight:500}
.exe-grid2 b{font-weight:700;font-variant-numeric:tabular-nums;font-size:11.5px}
.exe-grid2 b.bad{color:var(--bad)}
.exe-grid2 b.off{color:var(--ter);font-weight:500;font-variant-numeric:normal}
@media (max-width:720px){.exe-grid2{grid-template-columns:1fr}}

/* Everything the analyst can already read in the contract, one click away.
   It is the last row OF the Resumo panel, not a pill floating between two
   panels: the page then has one interaction idiom, a row with a dot and a
   chevron, instead of a different one per section. */
.exe-row.inset{border-top:1px solid var(--line-2)}
/* Full-bleed content: the panels inside carry their own borders, so the
   rail would run underneath them instead of beside them. */
.exe-det.wide{padding:14px 16px}
.exe-det.wide::before{display:none}
.exe-det.wide .exe-panel:last-child{margin-bottom:0}

/* ---- page rhythm ------------------------------------------------------
   The page used to be six identical section-label + panel pairs, so nothing
   outranked anything. A section is now one closed object whose title lives
   in its own header bar, which is the idiom the field groups already used;
   the verdict section borrows the blocker colour on that bar alone, and the
   section that never has findings is dimmed until hovered. ------------- */
/* The page title uses the shared .head treatment (30px h1 + 15px sub), so
   this page ranks like every other one. .exe-meta sits under it, which is
   what its negative top margin was always sized for. */
.exe-hero{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:14px;
  background:var(--surface)}
.exe-hero-top{padding:19px 22px 17px;background:var(--neu-bg)}
/* Bold, but at the page title's own size and tracking: what read as
   shouting was 27px at 800, not the weight by itself. */
.exe-hero-word{font-size:24px;font-weight:700;letter-spacing:-.015em;line-height:1;color:var(--neu)}
.exe-hero-why{font-size:13px;font-weight:500;color:var(--sec);margin-top:8px;max-width:640px}
.exe-hero.bad{border-color:rgba(217,10,102,.22)}
.exe-hero.bad .exe-hero-top{background:var(--bad-bg)}
.exe-hero.bad .exe-hero-word{color:var(--bad)}
.exe-hero.warn{border-color:rgba(255,199,0,.4)}
.exe-hero.warn .exe-hero-top{background:var(--warn-bg)}
.exe-hero.warn .exe-hero-word{color:var(--warn)}
.exe-hero.ok{border-color:rgba(11,107,65,.22)}
.exe-hero.ok .exe-hero-top{background:var(--ok-bg)}
.exe-hero.ok .exe-hero-word{color:var(--ok)}
.exe-hero-body{background:var(--surface)}
.exe-hero-label{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ter);padding:14px 22px 3px}
/* A numbered pendência: the count is a position in a to-do list, not a
   severity, so the ring colour carries the severity instead. */
.exe-num{width:20px;height:20px;border-radius:50%;flex:none;margin-top:1px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;border:1.5px solid var(--neu-ico);color:var(--neu)}
.exe-num.bad{border-color:var(--bad);color:var(--bad)}
.exe-num.warn{border-color:var(--warn-ico);color:var(--warn)}
.exe-row.pend>summary{padding:12px 22px}
.exe-row.pend .exe-det{padding-left:56px;padding-right:22px}
.exe-hero-acts{display:flex;align-items:center;gap:9px;padding:14px 22px;
  border-top:1px solid var(--line-2)}
.exe-hero-acts form{margin:0}
.exe-btn{display:inline-flex;align-items:center;background:var(--surface);color:var(--accent);
  border:1px solid var(--accent-soft-2);border-radius:10px;padding:9px 15px;
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  transition:background .15s ease}
.exe-btn:hover{background:var(--accent-soft)}
/* Anchored to the page header, so opening the contract is in the same place
   on every run instead of moving with whatever the hero happens to list. */
.exe-btn.top{margin-left:auto;flex:none;white-space:nowrap;text-decoration:none}

.exe-section{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  margin-bottom:14px;background:var(--surface)}
/* Neutral grey (--neu-bg), not the Alice blue the panels elsewhere sit on
   and not a brand tint: the colour on this page belongs to the verdict,
   so the section bars stay out of the way. All three text tokens clear AA
   on it (--ink 9.81, --sec 6.38, --ter 4.75). */
.exe-sec-head{display:flex;align-items:center;gap:12px;padding:13px 16px;
  background:var(--neu-bg);border-bottom:1px solid var(--line-2)}
.exe-sec-head h2{font-size:13.5px;font-weight:700;letter-spacing:-.012em;margin:0;color:var(--ink)}
/* The count is pushed right by its own margin, or by the strip when a
   section has one: either way the right edge of the bar is where it sits. */
.exe-sec-head .c{margin-left:auto;font-size:11.5px;font-weight:600;
  color:var(--ter);text-align:right;flex:none}
.exe-sec-head .exe-slices~.c{margin-left:0}
.exe-section.lead-bad{border-color:rgba(217,10,102,.22)}
.exe-section.lead-bad .exe-sec-head{background:var(--bad-bg);border-bottom-color:rgba(217,10,102,.14)}
.exe-section.lead-bad .exe-sec-head h2{color:var(--bad)}
.exe-section.quiet{opacity:.74;transition:opacity .2s ease}
.exe-section.quiet:hover,.exe-section.quiet:focus-within{opacity:1}
/* ---- optional side-by-side contract ---------------------------------- */
.exe-layout.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,460px);
  gap:18px;align-items:start}
.exe-layout.split .exe-main{min-width:0}
.exe-pdf{position:sticky;top:88px;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;background:var(--surface)}
.exe-pdf-bar{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--sunken);
  border-bottom:1px solid var(--line-2);font-size:11.5px;font-weight:600;color:var(--sec)}
.exe-pdf-bar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exe-pdf-bar a{flex:none;color:var(--accent);font-size:11px;font-weight:600}
.exe-pdf-frame{display:block;width:100%;height:calc(100vh - 170px);min-height:420px;border:0}
.exe-pdf-fallback{padding:24px;font-size:12.5px;color:var(--sec);text-align:center}
.exe-pdf-fallback a{display:block;margin-top:8px;color:var(--accent);font-weight:600}
@media (max-width:1080px){
  .exe-layout.split{grid-template-columns:1fr}
  .exe-pdf{position:static}
  .exe-pdf-frame{height:70vh}
}

/* ---- Cotação page ----------------------------------------------------
   Shares every .exe-* idiom with the Execução page one level down: same
   hero, same section bars, same rows. Only the facts strip is new. It
   replaces four tiles that rendered their values at title size, so a
   quote number wrapped mid-token and the tallest tile set the height of
   all four. ---------------------------------------------------------- */
.qf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border:1px solid var(--line);border-radius:14px;background:var(--surface);
  overflow:hidden;margin:0 0 14px}
.qf .it{padding:12px 16px;border-left:1px solid var(--line-2);min-width:0}
.qf .it:first-child{border-left:0}
.qf .l{font-size:9.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ter)}
.qf .v{font-size:14px;font-weight:600;margin-top:4px;line-height:1.35;
  overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.qf .s{font-size:11px;font-weight:500;color:var(--ter);margin-top:2px}
.qf .s.bad{color:var(--bad);font-weight:600}
@media (max-width:820px){.qf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qf .it:nth-child(3){border-left:0}}
@media (max-width:560px){.qf{grid-template-columns:1fr}
  .qf .it{border-left:0;border-top:1px solid var(--line-2)}
  .qf .it:first-child{border-top:0}}
/* The "termo esperado" marker on a row title. A real badge (own background,
   own padding), not inline text riding on .exe-title: nested there its
   flex/padding rules were inert and it read as part of the filename. A
   soft accent fill, never --bad-ico/--warn-ico/etc: those are vivid fills
   meant for small dots, not text, and fail AA contrast used as one. */
.qf-badge{display:inline-block;background:var(--accent-soft);color:var(--ter);
  font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;vertical-align:middle}

/* A code, not a word: the h1's -.03em tracking is tuned for names and
   closes up letter pairs that have to be read one character at a time. */
.head h1.mono-title{letter-spacing:-.01em;font-variant-numeric:tabular-nums}
/* The status chip sits at the right edge of a row's summary. Scoped to the
   summary on purpose: .exe-clause on the Execução page also puts a .st
   inside an .exe-row, and a descendant selector would shove it right. */
.exe-row>summary>.st{margin-left:auto;flex:none;align-self:center}

/* Verdict distribution on the Cotações list. The bar covers only the
   quotes that were judged: the never-analysed ones are the ingestion
   backlog, stated above it in words, and folding them in would reduce
   every real verdict to a sliver. */
.qdist{margin:0 0 24px}
.qdist .legend{margin-top:12px;gap:22px}
.qdist .legend .it{font-size:12.5px}