/* DAX checker - page-specific styles.
   The shell (header, footer, .wrap, .eyebrow, .button, typography) comes from ../css/styles.css.
   The page head matches insights.css; the checker panes follow the report pages' panels. Every
   colour resolves from a token so the light/dark toggle needs no second palette. */

:root{
  --fix:#B3261E;      --fix-bg:rgba(179,38,30,0.09);
  --consider:#8A5A00; --consider-bg:rgba(201,140,0,0.13);
  --style:#3D5A80;    --style-bg:rgba(61,90,128,0.10);
  --ok:#1E6B45;
  --code-bg:#F1F3F8;
  --private:#D11F1F;   /* bright red, 5.35:1 on white */
}
[data-theme="dark"]{
  --fix:#F08A80;      --fix-bg:rgba(240,138,128,0.13);
  --consider:#F2C25B; --consider-bg:rgba(242,194,91,0.13);
  --style:#9DB7DA;    --style-bg:rgba(157,183,218,0.12);
  --ok:#6FD29B;
  --code-bg:#0E0D20;
  --private:#FF5C5C;   /* bright red, 6.52:1 on the dark ground */
}

/* ---------- page head ---------- */
.page-head{padding:var(--s9) 0 var(--s6);}
.page-head .display{margin:var(--s3) 0 var(--s4);max-width:18ch;}
.page-head .lede{max-width:62ch;}
.dx-private{display:inline-flex;align-items:center;gap:8px;margin:var(--s3) 0 0;font:600 0.875rem/1.4 var(--mono);
  color:var(--private);}
.dx-private::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--private);flex:none;}

/* ---------- panes ---------- */
.dx-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);align-items:start;margin-bottom:var(--s8);}
.dx-pane{border:1px solid var(--line);border-radius:var(--r);background:var(--bg);min-width:0;overflow:hidden;}
.dx-pane-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);background:var(--bg-2);}
.dx-pane-head h2{font:600 0.9375rem/1.2 var(--font);color:var(--ink);margin:0;}
.dx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);}
.dx-btn{font:600 0.8125rem/1 var(--font);min-height:36px;padding:0 14px;border-radius:var(--r-sm);cursor:pointer;
  border:1px solid var(--line-2);background:var(--bg);color:var(--ink);}
.dx-btn:hover{border-color:var(--ink-3);}
.dx-btn:focus-visible,.dx-input textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.dx-flag{font:500 0.6875rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);
  background:var(--accent-soft);padding:6px 8px;border-radius:3px;}

.dx-input textarea{display:block;width:100%;min-height:360px;height:56vh;resize:vertical;border:0;
  background:var(--code-bg);color:var(--ink);font:13px/1.6 var(--mono);padding:var(--s4);tab-size:4;
  white-space:pre;overflow-wrap:normal;overflow-x:auto;}
.dx-fmt{margin:0;padding:var(--s2) var(--s4);font-size:0.8125rem;color:var(--ink-2);background:var(--accent-soft);
  border-top:1px solid var(--line);}
.dx-fmt button{border:0;background:none;padding:6px 4px;min-height:28px;font:700 0.8125rem/1 var(--font);
  color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.dx-hint{margin:0;padding:var(--s3) var(--s4);font-size:0.8125rem;color:var(--ink-3);border-top:1px solid var(--line);}

.dx-tally{display:flex;flex-wrap:wrap;gap:6px;}
.dx-tally span{font:500 0.75rem/1 var(--mono);padding:6px 8px;border-radius:3px;background:var(--bg);
  border:1px solid var(--line);color:var(--ink-2);}
.dx-tally b{font-weight:600;margin-right:4px;}
.dx-tally .t-fix b{color:var(--fix);} .dx-tally .t-consider b{color:var(--consider);} .dx-tally .t-style b{color:var(--style);}

/* ---------- findings ---------- */
.dx-measures{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);}
.m{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg);}
.m-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--s4);
  background:var(--bg-2);border-bottom:1px solid var(--line);}
.m-name{font:600 0.9375rem/1.3 var(--font);color:var(--ink);margin:0;overflow-wrap:anywhere;}
.m-meta{font:500 0.6875rem/1 var(--mono);color:var(--ink-3);white-space:nowrap;}
.clean{padding:var(--s3) var(--s4);color:var(--ok);font-weight:600;font-size:0.875rem;}
.f{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--s3);padding:var(--s3) var(--s4);border-top:1px solid var(--line);}
.f:first-of-type{border-top:0;}
.sev{grid-row:span 3;align-self:start;font:500 0.6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  padding:5px 7px;border-radius:3px;min-width:78px;text-align:center;}
.sev.fix{background:var(--fix-bg);color:var(--fix);}
.sev.consider{background:var(--consider-bg);color:var(--consider);}
.sev.style{background:var(--style-bg);color:var(--style);}
.f h3{font:600 0.875rem/1.35 var(--font);color:var(--ink);margin:0;}
.f p{margin:0;font-size:0.84375rem;line-height:1.55;color:var(--ink-2);max-width:70ch;}
.f pre{margin:6px 0 0;}
.dx-grid pre,.dx-grid code,.dx-rules code{font-family:var(--mono);}
.dx-grid pre{background:var(--code-bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;
  font-size:12.5px;line-height:1.55;overflow-x:auto;white-space:pre;color:var(--ink);}
.dx-grid code,.dx-rules code{font-size:.92em;background:var(--code-bg);border:1px solid var(--line);border-radius:3px;padding:0 4px;}
.dx-grid pre code{background:none;border:0;padding:0;font-size:inherit;}
.empty{padding:var(--s6) var(--s4);color:var(--ink-3);text-align:center;margin:0;}
.dx-key{display:flex;flex-wrap:wrap;gap:var(--s4);padding:var(--s3) var(--s4);border-top:1px solid var(--line);
  font-size:0.75rem;color:var(--ink-3);}
.dx-key span{display:inline-flex;align-items:center;gap:6px;}
.dx-key i{display:inline-block;width:9px;height:9px;border-radius:2px;}
.dx-key .k-fix{background:var(--fix);} .dx-key .k-consider{background:var(--consider);} .dx-key .k-style{background:var(--style);}

/* ---------- call to action ---------- */
.dx-cta{margin-top:var(--s5);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r);
  background:var(--bg-2);padding:var(--s5);}
.dx-cta .h3{margin:var(--s2) 0 var(--s3);}
.dx-cta p{margin:0;color:var(--ink-2);font-size:0.9375rem;line-height:1.65;max-width:62ch;}
.dx-cta-links{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s5);margin-top:var(--s5);}

/* ---------- the rules ---------- */
.dx-rules{padding:var(--s6) 0 var(--s9);border-top:1px solid var(--line);}
.dx-rules .h2{margin:var(--s3) 0 var(--s6);max-width:22ch;}
.dx-rule-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5) var(--s6);}
.dx-rule-grid h3{font:600 0.9375rem/1.35 var(--font);color:var(--ink);margin:0 0 4px;}
.dx-rule-grid p{margin:0;font-size:0.875rem;line-height:1.6;color:var(--ink-2);}

@media (min-width:640px){
  .dx-rule-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1000px){
  .dx-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);}
  .dx-input{position:sticky;top:96px;}
  .dx-rule-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:560px){
  .dx-input textarea{height:44vh;min-height:280px;}
  .sev{min-width:0;}
}