/* =============================================================================
   domainchaos.com/dns/ and /email/ — the C2 sheet
   -----------------------------------------------------------------------------
   Loaded after site.css, toast.css (dark.css on the moon edition) and
   whois.css, and read as an extension of whois.css: the same 4px corner, the
   same 34px control height, the same ink-filled chosen state, the same
   uppercase control labels. Two instruments are added — DC-P1, the
   propagation receiver, and DC-M1, the mail doctor — and they are painted
   entirely from the stage's --wx-* tokens (whois.css) plus the few signal
   tokens below, so a variety switch or an edition switch repaints them with
   no redraw of colour.

   THE SIGNAL TOKENS this sheet adds, per variety (on whatever carries
   data-variety — the console and the results panel):

     --dm-agree / -ink     a lit "agrees" / "pass" key and its legend (>= 4.5:1)
     --dm-differ / -ink    a lit "different" / "partial" key and its legend
     --dm-bad / -ink       a lit "fail" key and its legend
     --dm-m-agree          an "agrees" mark ON THE FACE (the TTL window)
     --dm-m-differ         a "different" mark on the face
     --dm-needle           the needle on the face

   Unlit keys are the variety's own --wx-key with --wx-key-ink: grey, which is
   what "failed" and "not published" look like on a Braun panel. Contrast of
   every legend pair is measured in tests/tools-dnsmail/contrast.py.
   The moon answers are in the marked html[data-dark] block at the end.
   ========================================================================== */

/* ------------------------------------------------------------ the signals */
.wx-console, .wx-panel,
.wx-console[data-variety="t3"], .wx-panel[data-variety="t3"] {
    --dm-agree:      #1E7A3E;
    --dm-agree-ink:  #FFFFFF;
    --dm-differ:     #E8912A;
    --dm-differ-ink: #1F1203;
    --dm-bad:        #B42318;
    --dm-bad-ink:    #FFFFFF;
    --dm-m-agree:    #1E7A3E;
    --dm-m-differ:   #C2410C;
    --dm-needle:     #E0561B;
}
.wx-console[data-variety="et66"], .wx-panel[data-variety="et66"] {
    --dm-agree:      #4FAE45;
    --dm-agree-ink:  #0E1F0A;
    --dm-differ:     #F2C200;
    --dm-differ-ink: #231B00;
    --dm-bad:        #FF7A70;
    --dm-bad-ink:    #2A0603;
    --dm-m-agree:    #1B1F16;
    --dm-m-differ:   #1B1F16;
    --dm-needle:     #1B1F16;
}
.wx-console[data-variety="ab1"], .wx-panel[data-variety="ab1"] {
    --dm-agree:      #4ADE80;
    --dm-agree-ink:  #0A1F10;
    --dm-differ:     #FFB020;
    --dm-differ-ink: #1A1000;
    --dm-bad:        #FF6B6B;
    --dm-bad-ink:    #2A0606;
    --dm-m-agree:    #4ADE80;
    --dm-m-differ:   #FFB020;
    --dm-needle:     #FFD400;
}

/* A type key's short suffix in an example chip ("github.com TXT"). */
.dm-chipt {
    font-size: .6rem; font-weight: 700; letter-spacing: .12em; color: var(--ink-55);
    padding-left: .1rem;
}
.dm-types .wx-seg__b { min-width: 2.9rem; padding: 0 .65rem; }
@media (max-width: 520px) { .dm-types .wx-seg__b { min-width: 0; padding: 0 .55rem; } }

/* =============================================================================
   THE STAGE — the head (instrument + identity), then the cards
   ========================================================================== */
.dm-stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.dm-stage[hidden] { display: none; }
.dm-stage > * { min-width: 0; }
.dm-stage[aria-busy="true"] > * { opacity: .38; transition: opacity .3s var(--ease); pointer-events: none; }

/* The head stacks: the name and the verdict, then the instrument across the
   card. The instrument is the reading at a glance, drawn wide the way the
   real objects were; beside a column of text it came out at a third of the
   card with its legends at seven pixels (measured at 1440). */
.dm-head { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
.dm-inst { margin: 0; min-width: 0; width: 100%; max-width: 65rem; }
.dm-inst > svg { display: block; width: 100%; height: auto; }
@media (max-width: 620px) { .dm-inst { max-width: 26rem; justify-self: center; } }
.dm-id { gap: .75rem; }
.dm-id .wx-name { font-size: clamp(1.6rem, 3.6vw, 2.5rem); }
@media (min-width: 760px) { .dm-reads { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* The verdict line: the one sentence the reading comes down to, with its
   lamp. Light type, like the big readouts: a dial, not a paragraph. */
.dm-big {
    display: flex; align-items: baseline; gap: .6rem;
    margin: 0; font-size: clamp(1.15rem, 2.3vw, 1.55rem); font-weight: 300; letter-spacing: -.025em; line-height: 1.25;
    color: var(--ink);
}
.dm-big::before {
    content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; transform: translateY(-.12em);
    background: var(--ink-55);
}
.dm-big[data-tone="ok"]::before   { background: var(--free); }
.dm-big[data-tone="warn"]::before { background: var(--unsure); }
.dm-big[data-tone="bad"]::before  { background: var(--taken); }
.dm-reads .wx-read__v small { display: block; margin-top: .15rem; font-size: .56em; }
.dm-reads [data-live] { font-variant-numeric: tabular-nums; }

/* The grid keeps whois.css's twelve columns; these two cards pair up. */
.dm-grid { align-items: start; }

/* ------------------------------------------------------------ the truth */
.dm-truthline { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; font-size: .9rem; color: var(--ink); }
.dm-tv {
    display: inline-flex; align-items: center; min-height: 28px; padding: .2rem .6rem;
    font-family: var(--wx-mono); font-size: .8rem; color: var(--ink); overflow-wrap: anywhere;
    border: 1px solid var(--line); border-left: 3px solid var(--free); border-radius: var(--wx-r);
    background: var(--free-wash);
}

/* ------------------------------------------------------------- tables */
.dm-table td { vertical-align: top; }
.dm-table td.dm-ans { max-width: 34rem; }
.dm-a { display: block; overflow-wrap: anywhere; word-break: break-word; }
.dm-a + .dm-a { margin-top: .12rem; }
.dm-a.is-odd { color: var(--unsure); font-weight: 600; }
.dm-a.is-odd::before { content: '≠ '; font-weight: 700; }
.dm-miss {
    display: block; margin-top: .3rem; font-family: inherit; font-size: .6rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--unsure); cursor: help;
}
.dm-more summary { cursor: pointer; font-family: inherit; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); margin-top: .2rem; }
.dm-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dm-who { white-space: nowrap; }
.dm-who b { font-weight: 600; }
.dm-who small { display: block; margin: .1rem 0 0 1.05rem; color: var(--ink-55); }
.dm-where { color: var(--ink-77); font-size: .8rem; min-width: 9rem; }
.dm-ttl { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dm-ttl__l { display: block; font-weight: 600; color: var(--ink); }
.dm-ttl__l[data-out="1"] { color: var(--ink-55); font-weight: 400; font-style: italic; }
.dm-ttl small { display: block; color: var(--ink-55); font-size: .74rem; }
.dm-table--res tbody tr[data-s="differ"] td { background: var(--unsure-wash); }
.dm-table--res tbody tr[data-s="differ"] td:first-child { box-shadow: inset 3px 0 0 var(--unsure); }
.dm-table td .wx-flag + small { display: block; margin-top: .25rem; }
.dm-v { white-space: nowrap; }
.dm-v--fail, .dm-v--unknown { color: var(--ink-55); }

/* The key swatch: the same fills as the instrument's keys, as a small lamp. */
.dm-key {
    display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto;
    background: var(--wx-key); box-shadow: inset 0 0 0 1px var(--ink-55);
    vertical-align: -1px; margin-right: .45rem;
}
.dm-key[data-s="agree"]  { background: var(--dm-agree);  box-shadow: none; }
.dm-key[data-s="differ"] { background: var(--dm-differ); box-shadow: none; }
.dm-key[data-s="unknown"] { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-55); border: 1px dashed transparent; }
.dm-legend {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .2rem; margin: 0;
    font-size: .76rem; color: var(--ink-77);
}
.dm-legend .dm-key { margin: 0 .35rem 0 .8rem; }
.dm-legend .dm-key:first-child { margin-left: 0; }
.dm-legend__n { flex: 1 1 100%; color: var(--ink-55); font-size: .74rem; }

/* ---------------------------------------------------------- the reading */
.dm-notes { list-style: none; margin: 0; padding: 0; }
.dm-notes li { display: flex; gap: .7rem; align-items: flex-start; padding: .6rem 0; border-top: 1px solid var(--line-soft); }
.dm-notes li:first-child { border-top: 0; padding-top: .1rem; }
.dm-notes i { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; margin-top: .42rem; background: var(--ink-55); }
.dm-notes li[data-tone="ok"] i   { background: var(--free); }
.dm-notes li[data-tone="warn"] i { background: var(--unsure); }
.dm-notes li[data-tone="bad"] i  { background: var(--taken); }
.dm-notes li[data-tone="info"] i { background: transparent; box-shadow: inset 0 0 0 1px var(--ink-55); }
.dm-notes p { margin: 0; font-size: .9rem; line-height: 1.62; color: var(--ink-77); max-width: 72ch; }
.dm-notes li:first-child p { color: var(--ink); }

/* -------------------------------------------------- more on this name */
.dm-tools { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dm-tools li + li { border-top: 1px solid var(--line-soft); }
.dm-tool {
    display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: .2rem .8rem; align-items: baseline;
    padding: .5rem 0; text-decoration: none; color: var(--ink-77);
}
.dm-tool b { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.dm-tool span { font-size: .84rem; }
.dm-tool i { font-style: normal; color: var(--ink-55); transition: transform .2s var(--ease); }
.dm-tool:hover b, .dm-tool:hover span { color: var(--ink); }
.dm-tool:hover i { transform: translateX(3px); color: var(--ink); }
@media (max-width: 420px) { .dm-tool { grid-template-columns: minmax(0, 1fr) auto; } .dm-tool span { grid-column: 1; } }

/* =============================================================================
   THE INSTRUMENTS — DC-P1 and DC-M1, inline SVG painted by the tokens
   ========================================================================== */
.dmi { display: block; width: 100%; height: auto; font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.dmi text { font-family: inherit; font-variant-numeric: tabular-nums; }
.dmi-body   { fill: var(--wx-body); stroke: var(--wx-ring); stroke-width: 1; }
.dmi-face   { fill: var(--wx-face); stroke: var(--wx-line); stroke-width: 1; }
.dmi-grille circle { fill: var(--wx-grille); }
.dmi-plate  { font-size: 10px; font-weight: 600; letter-spacing: .16em; fill: var(--wx-body-ink); }
.dmi-plate__b { font-weight: 700; }
.dmi-region { font-size: 8.5px; font-weight: 700; letter-spacing: .18em; fill: var(--wx-body-ink); }
.dmi-rule   { stroke: var(--wx-body-ink); stroke-opacity: .34; stroke-width: 1; }

/* keys: unlit is the variety's key; lit is the signal */
.dmi-key { fill: var(--wx-key); stroke: var(--wx-line); stroke-width: 1; }
.dmi-leg { font-size: 9px; font-weight: 700; letter-spacing: .06em; fill: var(--wx-key-ink); }
.dmi-k[data-s="agree"]  .dmi-key { fill: var(--dm-agree);  stroke: none; }
.dmi-k[data-s="agree"]  .dmi-leg { fill: var(--dm-agree-ink); }
.dmi-k[data-s="differ"] .dmi-key { fill: var(--dm-differ); stroke: none; }
.dmi-k[data-s="differ"] .dmi-leg { fill: var(--dm-differ-ink); }
.dmi-k[data-s="bad"]    .dmi-key { fill: var(--dm-bad);    stroke: none; }
.dmi-k[data-s="bad"]    .dmi-leg { fill: var(--dm-bad-ink); }
.dmi-dash { fill: none; stroke: var(--wx-key-ink); stroke-opacity: .55; stroke-width: 1; stroke-dasharray: 3 2.5; }
.dmi-leg--n { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.dmi-leg--s { font-size: 7px; letter-spacing: .14em; }

/* the tuning-scale window */
.dmi-window  { stroke: var(--wx-line); }
.dmi-wlabel  { font-size: 7.5px; font-weight: 700; letter-spacing: .16em; fill: var(--wx-ink-2); }
.dmi-wread   { font-size: 8.5px; font-weight: 700; letter-spacing: .1em; fill: var(--wx-ink); }
.dmi-scale   { stroke: var(--wx-ink); stroke-width: 1; }
.dmi-tick    { stroke: var(--wx-ink-2); stroke-width: 1; }
.dmi-tick--maj { stroke: var(--wx-ink); }
.dmi-tlabel  { font-size: 7.5px; font-weight: 600; fill: var(--wx-ink-2); }
.dmi-mark    { fill: var(--wx-ink-2); }
.dmi-m[data-s="agree"]  .dmi-mark { fill: var(--dm-m-agree); }
.dmi-m[data-s="differ"] .dmi-mark { fill: var(--dm-m-differ); }
.dmi-m[data-s="unknown"] .dmi-mark, .dmi-m[data-s="fail"] .dmi-mark { fill: none; stroke: var(--wx-ink-2); stroke-width: 1; }
.dmi-needle      { stroke: var(--dm-needle); stroke-width: 2; stroke-linecap: square; }
.dmi-needle-head { fill: var(--dm-needle); }

/* T3: the grille dial */
.dmi-hubface { stroke: var(--wx-line); }
.dmi-count   { font-size: 44px; font-weight: 300; letter-spacing: -.04em; fill: var(--wx-ink); }
.dmi-countl  { font-size: 7.5px; font-weight: 700; letter-spacing: .16em; fill: var(--wx-ink-2); }
.dmi-rtick   { stroke: var(--wx-ink-2); stroke-width: 1.5; }

/* ET66: the LCD */
.dmi-lcd     { stroke: none; }
.dmi-lcd-in  { fill: none; stroke: var(--wx-ink); stroke-opacity: .12; stroke-width: 1; }
.dmi-seg-on  { fill: var(--wx-ink); }
.dmi-seg-off { fill: var(--wx-ink); opacity: .075; }
.dmi-lcdl    { font-size: 7.5px; font-weight: 700; letter-spacing: .16em; fill: var(--wx-ink-2); }

/* AB1: the clock */
.dmi-clock   { fill: var(--wx-face); stroke: var(--wx-ring); stroke-width: 1.5; }
.dmi-ctick   { stroke: var(--wx-ink); stroke-width: 1.2; stroke-linecap: butt; }
.dmi-ctick--b { stroke-width: 2.6; }
.dmi-lamp    { stroke-width: 1; }
.dmi-hand    { stroke: var(--wx-ink); stroke-width: 5; stroke-linecap: round; }
.dmi-hand--2 { stroke: var(--wx-ink-2); stroke-width: 3; }
.dmi-sechand { stroke: var(--wx-accent); stroke-width: 1.8; stroke-linecap: round; }
.dmi-hub     { fill: var(--wx-accent); }
.dmi-clockl  { font-size: 8.5px; font-weight: 700; letter-spacing: .14em; fill: var(--wx-ink-2); }

/* DC-M1's own marks: the gauge's arcs and ticks, the grade window, the
   prescription's hollow marker, the ET66 grade keys, the AB1 letters. */
.dmi-arc      { fill: none; stroke: var(--wx-key); stroke-width: 7; }
.dmi-face .dmi-arc { stroke: var(--wx-line); }
.dmi-k[data-s="agree"]  .dmi-arc { stroke: var(--dm-agree); }
.dmi-k[data-s="differ"] .dmi-arc { stroke: var(--dm-differ); }
.dmi-k[data-s="bad"]    .dmi-arc { stroke: var(--dm-bad); }
.dmi-k[data-s="off"]    .dmi-arc { stroke: var(--wx-line); }
.dmi-gtick    { stroke: var(--wx-ink-2); stroke-width: 1; }
.dmi-gtick--maj { stroke: var(--wx-ink); stroke-width: 1.6; }
.dmi-glabel   { font-size: 8.5px; font-weight: 600; fill: var(--wx-ink-2); }
.dmi-bandl    { font-size: 9px; font-weight: 700; letter-spacing: .06em; fill: var(--wx-ink-2); }
.dmi-bandl.is-on { fill: var(--wx-ink); }
.dmi-gwin     { stroke: var(--wx-line); }
.dmi-gletter  { font-size: 30px; font-weight: 600; letter-spacing: -.02em; fill: var(--wx-ink); }
.dmi-gscore   { font-size: 12px; font-weight: 600; fill: var(--wx-ink-2); }
.dmi-rxmark   { fill: none; stroke: var(--dm-needle); stroke-width: 1.6; stroke-linejoin: round; }
.dmi-rxline   { stroke: var(--dm-needle); stroke-width: 1; stroke-dasharray: 2 3; }
.dmi-leg--p   { font-size: 12px; font-weight: 600; letter-spacing: 0; }
.dmi-seg-rx   { fill: var(--wx-ink); opacity: .3; }
.dmi-band     { stroke: none; }
.dmi-gkey[data-s="lit"]  .dmi-key { fill: var(--wx-key-lit); stroke: none; }
.dmi-gkey[data-s="lit"]  .dmi-leg { fill: var(--wx-key-lit-ink); }
.dmi-gkey[data-s="lit2"] .dmi-key { fill: var(--wx-key-lit-2); stroke: none; }
.dmi-gkey[data-s="lit2"] .dmi-leg { fill: var(--wx-key-lit-2-ink); }
.dmi-abl      { font-size: 14px; font-weight: 700; fill: var(--wx-ink-2); }
.dmi-abl.is-on { fill: var(--wx-accent); }

/* =============================================================================
   THE EMAIL DOCTOR — cards, records, the prescription
   ========================================================================== */
.em-reads { font-size: .78rem; color: var(--ink-55); line-height: 1.4; }
.em-grid { align-items: stretch; }
@media (min-width: 700px) { .em-span { grid-column: span 12; } }
.em-pts {
    font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-55); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 .35rem;
}
.em-pts--nil { font-weight: 600; }
.em-flag[data-s="none"], .em-flag[data-s="na"], .em-flag[data-s="untested"] { color: var(--ink-55); }

/* The verdict: one line in the card's lamp colour, above the reasons. */
.em-verdict {
    display: flex; align-items: baseline; gap: .55rem; margin: 0;
    font-size: 1.08rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: var(--ink);
}
.em-verdict::before {
    content: ''; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; transform: translateY(-.08em);
    background: transparent; box-shadow: inset 0 0 0 1px var(--ink-55);
}
.em-verdict[data-s="pass"]::before    { background: var(--free);   box-shadow: none; }
.em-verdict[data-s="warn"]::before    { background: var(--unsure); box-shadow: none; }
.em-verdict[data-s="fail"]::before    { background: var(--taken);  box-shadow: none; }
.em-verdict[data-s="unknown"]::before { background: var(--unsure); box-shadow: none; opacity: .6; }
.em-card .wx-card__b > p:not([class]) { font-size: .88rem; line-height: 1.6; max-width: 72ch; }
/* A published value can be one unbroken URL (denic.de's BIMI logo and VMC
   addresses pushed the 320px page 33px sideways — review, 11 Sep 2026). Break
   inside a word only when the word cannot fit a line of its own. */
.dm-grid .wx-card__b p, .dm-grid .wx-card__b li { overflow-wrap: anywhere; }
.em-advice { margin: 0; }
.em-tofix { margin: 0; font-size: .8rem; color: var(--ink-55); }

/* A published record: the host it lives at, the value, a Copy key. */
.em-rec { border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--wx-well); min-width: 0; }
.em-rec__h { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .35rem .4rem .35rem .7rem; border-bottom: 1px solid var(--line-soft); }
.em-rec__h .wx-sub { margin: 0; }
.em-rec__host { font-family: var(--wx-mono); font-size: .76rem; color: var(--ink-77); overflow-wrap: anywhere; flex: 1 1 auto; min-width: 0; }
.em-rec__v {
    margin: 0; padding: .6rem .75rem; font-family: var(--wx-mono); font-size: .78rem; line-height: 1.55; color: var(--ink);
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; max-height: 14rem; overflow: auto;
}
.em-rec__v:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dm-copy { height: 28px; padding: 0 .65rem; font-size: .6rem; flex: 0 0 auto; }
@media (pointer: coarse) { .dm-copy { height: 36px; } }

/* ------------------------------------------------------- the prescription */
.em-rx { grid-column: span 12; }
.em-rx__b { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem 1.6rem; align-items: start; }
@media (max-width: 760px) { .em-rx__b { grid-template-columns: minmax(0, 1fr); } }
.em-dials { display: flex; align-items: center; gap: .6rem; position: sticky; top: calc(var(--nav-h) + 1rem); }
@media (max-width: 760px) { .em-dials { position: static; justify-content: flex-start; } }
.em-dial { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 104px; }
.em-dial > svg { width: 104px; height: auto; display: block; }
.em-dial .wx-sub { text-align: center; }
.em-dials__arrow { font-size: 1.1rem; color: var(--ink-55); padding-bottom: 1.4rem; }
.em-steps { display: grid; gap: .7rem; min-width: 0; }
.em-rx__none { margin: 0; font-size: .95rem; color: var(--ink); max-width: 64ch; }

.em-fix {
    min-width: 0; border: 1px solid var(--line); border-radius: var(--wx-r); background: var(--paper);
    display: grid; gap: 0;
}
.em-fix--opt { border-style: dashed; }
.em-fix--note { background: var(--wx-well); }
.em-fix__h {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .45rem .5rem .45rem .5rem; border-bottom: 1px solid var(--line-soft);
}
.em-fix__h b { font-size: .92rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); flex: 1 1 12rem; min-width: 0; }
.em-fix__n {
    display: inline-flex; align-items: center; height: 22px; padding: 0 .5rem;
    font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
    background: var(--ink); color: var(--paper); border-radius: var(--wx-r);
}
.em-fix--opt .em-fix__n { background: transparent; color: var(--ink-77); box-shadow: inset 0 0 0 1px var(--line); }
.em-fix__t {
    font-size: .58rem; font-weight: 700; letter-spacing: .14em; color: var(--ink-55);
    border: 1px solid var(--line); border-radius: var(--wx-r); padding: .2rem .45rem; white-space: nowrap;
}
.em-fix__dl { margin: 0; display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); padding: .15rem .6rem .1rem; }
.em-fix__dl dt {
    padding: .55rem 0; font-size: .58rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55);
    border-top: 1px solid var(--line-soft); line-height: 1.8;
}
.em-fix__dl dd {
    margin: 0; padding: .45rem 0; border-top: 1px solid var(--line-soft); min-width: 0;
    display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem;
}
.em-fix__dl dt:first-of-type, .em-fix__dl dt:first-of-type + dd { border-top: 0; }
.em-fix__v { font-family: var(--wx-mono); font-size: .82rem; color: var(--ink); overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.em-fix__val { font-weight: 600; user-select: all; -webkit-user-select: all; }
.em-fix__hv { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.em-fix__hv small { font-size: .74rem; color: var(--ink-55); }
.em-fix__hv small code { font-family: var(--wx-mono); color: var(--ink); }
.em-fix__ttl { font-size: .74rem; color: var(--ink-55); margin-left: .6rem; }
.em-fix__pre {
    margin: 0; flex: 1 1 auto; min-width: 0; padding: .5rem .6rem;
    font-family: var(--wx-mono); font-size: .76rem; line-height: 1.5; color: var(--ink);
    background: var(--wx-well); border: 1px solid var(--line-soft); border-radius: var(--wx-r);
    white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.em-fix__zone { padding: 0 .6rem .5rem; }
.em-fix__zone summary, .em-opts > summary, .em-tried summary, .em-termsbox > summary {
    cursor: pointer; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-77);
    padding: .35rem 0;
}
.em-fix__zone summary:focus-visible, .em-opts > summary:focus-visible, .em-tried summary:focus-visible, .em-termsbox > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.em-fix__zrow { display: flex; gap: .6rem; align-items: flex-start; }
.em-fix__why { margin: 0; padding: .55rem .7rem .65rem; font-size: .84rem; line-height: 1.55; color: var(--ink-77); border-top: 1px solid var(--line-soft); }
.em-fix--note .em-fix__why { border-top: 0; }
.em-fix__note { margin: 0; padding: .4rem .7rem; font-size: .76rem; color: var(--ink-55); border-top: 1px solid var(--line-soft); }
@media (max-width: 460px) {
    .em-fix__dl { grid-template-columns: minmax(0, 1fr); }
    .em-fix__dl dt { padding-bottom: 0; }
    .em-fix__dl dd { border-top: 0; padding-top: .15rem; }
    .em-fix__zrow { flex-direction: column; }
}
.em-opts { border-top: 1px solid var(--line-soft); padding-top: .3rem; display: grid; gap: .6rem; }

/* ------------------------------------------------ SPF: terms and the tree */
.em-termsbox { border-top: 1px solid var(--line-soft); padding-top: .25rem; }
.em-terms { list-style: none; margin: .3rem 0 0; padding: 0; }
.em-terms li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .1rem 1rem; padding: .35rem 0; border-top: 1px solid var(--line-soft); font-size: .82rem; }
.em-terms li:first-child { border-top: 0; }
.em-terms code { font-family: var(--wx-mono); font-size: .78rem; color: var(--ink); overflow-wrap: anywhere; }
.em-terms span { color: var(--ink-77); }
.em-terms li[data-q="-"] code, .em-terms li[data-q="~"] code { color: var(--ink); font-weight: 600; }
.em-terms li.is-ignored { opacity: .55; }
@media (max-width: 560px) { .em-terms li { grid-template-columns: minmax(0, 1fr); } }

.em-tree { display: grid; gap: .55rem; }
.em-lk__row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.em-lk__row .wx-sub { margin: 0; }
.em-lk__row b { font-size: .8rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.em-lk { display: flex; gap: 3px; flex-wrap: wrap; }
.em-lk i { width: 14px; height: 10px; border-radius: 2px; background: var(--wx-well-2); box-shadow: inset 0 0 0 1px var(--line); }
.em-lk i.is-on { background: var(--ink); box-shadow: none; }
.em-lk i.is-over { background: var(--taken); box-shadow: none; }
.em-lk i:nth-child(10) { margin-right: 5px; }
.em-inc__h { margin: .2rem 0 0; }
.em-inc { list-style: none; margin: 0; padding: 0; }
.em-inc li {
    display: flex; align-items: baseline; gap: .55rem; flex-wrap: wrap;
    padding: .3rem 0 .3rem calc(var(--d, 0) * 1.15rem); border-top: 1px solid var(--line-soft); font-size: .8rem;
    background: linear-gradient(90deg, transparent calc(var(--d, 0) * 1.15rem - .6rem), var(--line) calc(var(--d, 0) * 1.15rem - .6rem), var(--line) calc(var(--d, 0) * 1.15rem - .6rem + 1px), transparent 0) no-repeat;
}
.em-inc li[style*="--d:0"] { background: none; }
.em-inc li:first-child { border-top: 0; }
.em-inc code { font-family: var(--wx-mono); font-size: .78rem; color: var(--ink); overflow-wrap: anywhere; }
.em-inc__m { font-size: .56rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); }
.em-inc__c {
    margin-left: auto; font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.em-inc__c.is-heavy { color: var(--unsure); }

/* DMARC tags, DKIM keys, the MTA-STS policy */
.em-tags td.wx-t { width: 4.5rem; }
.em-tags td.wx-mono { white-space: nowrap; max-width: 16rem; overflow-wrap: anywhere; white-space: normal; }
.em-dkim td small { display: block; color: var(--ink-55); margin-top: .1rem; }
.em-tried { border-top: 1px solid var(--line-soft); padding-top: .2rem; }
.em-sel { display: flex; flex-wrap: wrap; gap: 3px; margin: .3rem 0 0; }
.em-sel code {
    font-family: var(--wx-mono); font-size: .72rem; color: var(--ink-55);
    border: 1px solid var(--line-soft); border-radius: var(--wx-r); padding: .1rem .4rem;
}
.em-sel code.is-found { color: var(--ink); border-color: var(--free); font-weight: 600; }
.em-pats { display: grid; gap: .25rem; }
.em-pat { display: flex; flex-wrap: wrap; gap: .1rem .6rem; align-items: baseline; }
.em-pat code { font-family: var(--wx-mono); font-size: .8rem; color: var(--ink); }
.em-pat small { font-size: .76rem; color: var(--ink-55); }
.em-mx .em-pri { text-align: left; min-width: 2rem; }
.em-caa { margin: 0; font-size: .8rem; color: var(--ink-55); }

/* the rubric */
.em-rubric { grid-column: span 12; }
.em-rtable td:last-child { color: var(--ink-77); font-size: .8rem; line-height: 1.5; }
.em-rtable td.em-here { color: var(--ink); font-weight: 600; }
.em-rtable tr.em-total td { border-top: 1px solid var(--line); padding-top: .6rem; }
.em-rtable tr[data-s="pass"] td.em-here { color: var(--free); }
.em-rtable tr[data-s="fail"] td.em-here { color: var(--taken); }
.em-foot { margin: 0; font-size: .78rem; color: var(--ink-55); max-width: 80ch; }
.dm-more-card { grid-column: span 12; }
@media (min-width: 760px) { .dm-tools--2 { grid-template-columns: 1fr 1fr; column-gap: 2rem; } .dm-tools--2 li:nth-child(2) { border-top: 0; } }

/* =============================================================================
   REDUCED MOTION, PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .dm-tool i { transition: none; }
    .dm-stage[aria-busy="true"] > * { transition: none; }
}
@media print {
    .dm-results { display: block !important; padding: 0 !important; }
    .dm-results .wx-idle, .dm-stage .wx-exp, .dm-more-card, .dm-legend__n { display: none !important; }
    .dm-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); break-inside: avoid; }
    .dm-stage .wx-card, .dm-head { animation: none !important; }
    .dm-table tr, .dm-notes li { break-inside: avoid; }
    .dm-stage .wx-card:has(.dm-table--res) { break-inside: auto; }
    .dmi { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .dm-ttl__l::after { content: ' (at print)'; font-weight: 400; color: var(--ink-55); }
}

/* =============================================================================
   html[data-dark] — THE MOON ANSWERS
   The ET66 and AB1 instruments are dark objects on either page and keep their
   signals; T3's grille dial becomes a charcoal object with its signals lifted.
   ========================================================================== */
html[data-dark] .wx-console, html[data-dark] .wx-panel,
html[data-dark] .wx-console[data-variety="t3"], html[data-dark] .wx-panel[data-variety="t3"] {
    --dm-agree:      #3FB86A;
    --dm-agree-ink:  #06150C;
    --dm-differ:     #F5A524;
    --dm-differ-ink: #1F1203;
    --dm-bad:        #F87171;
    --dm-bad-ink:    #2A0606;
    --dm-m-agree:    #4ADE80;
    --dm-m-differ:   #FBBF24;
    --dm-needle:     #FF7A33;
}
html[data-dark] .wx-console[data-variety="et66"], html[data-dark] .wx-panel[data-variety="et66"] {
    --dm-agree:      #5BBE50;
    --dm-agree-ink:  #0E1F0A;
    --dm-differ:     #F5C518;
    --dm-differ-ink: #231B00;
    --dm-bad:        #FF8A80;
    --dm-bad-ink:    #2A0603;
    --dm-m-agree:    #1B1F16;
    --dm-m-differ:   #1B1F16;
    --dm-needle:     #1B1F16;
}
html[data-dark] .dm-tv { background: rgba(74, 222, 128, .07); }