/* PLADINUM DNS LOOKUP v1.1.0 */

.pld-dl{
    --dl-radius:10px;
    --dl-field-h:52px;

    --dl-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --dl-size:0.8rem;
    --dl-weight:400;
    --dl-tracking:-0.006em;
    --dl-leading:1.3;

    --dl-form-w:100%;

    --dl-col-cat:104px;
    --dl-col-state:34px;
    --dl-col-name:126px;
    --dl-section-gap:14px;

    --dl-ink:var(--pld-ink,rgb(35,34,34));
    --dl-mut:var(--pld-text-muted,rgb(107,107,111));
    --dl-line:var(--pld-border,rgb(228,228,231));
    --dl-card:var(--pld-white,rgb(255,255,255));
    --dl-fill:var(--pld-fill,rgb(245,245,247));

    --dl-pass:rgb(20,116,78);
    --dl-warn:rgb(150,92,8);
    --dl-warn-row:rgb(255,251,232);
    --dl-fail:var(--pld-red,rgb(208,72,65));
    --dl-fail-row:rgb(254,242,242);
    --dl-note:rgb(70,102,140);
    --dl-note-row:rgb(246,249,252);
    --dl-grey:rgb(120,120,126);

    color:var(--dl-ink);
    font-family:var(--dl-font);
    font-size:var(--dl-size);
    font-weight:var(--dl-weight);
    letter-spacing:var(--dl-tracking);
    line-height:var(--dl-leading);
    /* The page centres its text. A diagnostic read as 35 centred paragraphs is
       unreadable, so the component sets its own alignment. */
    text-align:left;
}

:where(.pld-dl) h2,
:where(.pld-dl) h3,
:where(.pld-dl) p{margin:0}

:where(.pld-dl) *{text-align:left}

:where(.pld-dl) .pld-dl__table,
:where(.pld-dl) .pld-dl__table th,
:where(.pld-dl) .pld-dl__table td,
:where(.pld-dl) .pld-dl__input,
:where(.pld-dl) .pld-dl__submit{
    font-family:var(--dl-font);
    letter-spacing:var(--dl-tracking);
    line-height:var(--dl-leading);
}

/* Form */

.pld-dl__form{
    width:var(--dl-form-w);
    max-width:100%;
}

.pld-dl--center .pld-dl__form{margin-left:auto;margin-right:auto}
.pld-dl--center .pld-dl__label{text-align:center}

.pld-dl__label{
    display:block;
    font-size:13px;
    color:var(--dl-mut);
    margin-bottom:6px;
}

.pld-dl__field{display:flex;gap:8px}

.pld-dl__input{
    flex:1 1 auto;
    min-width:0;
    height:var(--dl-field-h);
    padding:0 16px;
    border:1px solid var(--dl-line);
    border-radius:var(--dl-radius);
    background:var(--dl-card);
    color:var(--dl-ink);
    font-size:16px;
}

.pld-dl__input:focus{outline:none;border-color:var(--dl-ink)}

.pld-dl__submit{
    flex:0 0 auto;
    height:var(--dl-field-h);
    padding:0 26px;
    border:0;
    border-radius:var(--dl-radius);
    background:var(--dl-ink);
    color:var(--pld-white,rgb(255,255,255));
    font-size:15px;
    cursor:pointer;
}

.pld-dl__note{margin-top:8px;font-size:14px;color:var(--dl-fail)}

/* Meta bar */

.pld-dl__meta{
    display:flex;
    align-items:center;
    gap:16px;
    margin-top:26px;
    margin-bottom:10px;
}

.pld-dl__domain{font-size:16px;font-weight:600}

/* The table */

.pld-dl__table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    font-size:var(--dl-size);
    font-weight:var(--dl-weight);
    line-height:var(--dl-leading);
    border:1px solid var(--dl-line);
    border-radius:var(--dl-radius);
    overflow:hidden;
}

.pld-dl__table th{
    padding:9px 12px;
    background:var(--dl-fill);
    border-bottom:1px solid var(--dl-line);
    font-size:12px;
    font-weight:600;
    color:var(--dl-mut);
    letter-spacing:.02em;
}

.pld-dl__table td{
    padding:9px 12px;
    border-bottom:1px solid var(--dl-line);
    vertical-align:top;
    background:var(--dl-card);
}

.pld-dl__table tbody:last-child tr:last-child td{border-bottom:0}

/* Sections breathe from the inside. A real gap would break the vertical
   line down the section column and detach the spanning cell from its rows. */
.pld-dl__table tbody > tr:first-child > td{padding-top:var(--dl-section-gap)}
.pld-dl__table tbody > tr:last-child > td{padding-bottom:var(--dl-section-gap)}

.pld-dl__table tbody + tbody > tr:first-child > td{
    border-top:1px solid var(--dl-line);
}

.pld-dl__col-cat{width:var(--dl-col-cat)}
.pld-dl__col-state{width:var(--dl-col-state)}
.pld-dl__col-name{width:var(--dl-col-name)}

/* Category cell, spanning its rows */

.pld-dl__cat{
    background:var(--dl-card);
    vertical-align:top;
    font-weight:600;
    white-space:nowrap;
}

.pld-dl__cat-count{
    display:block;
    margin-top:3px;
    font-size:11px;
    font-weight:400;
    color:var(--dl-mut);
    white-space:normal;
}

/* Row tinting is what makes a problem findable without reading */

.pld-dl__row--warn td{background:var(--dl-warn-row)}
.pld-dl__row--fail td{background:var(--dl-fail-row)}
.pld-dl__row--records td{background:var(--dl-card)}

.pld-dl__row--warn .pld-dl__cat,
.pld-dl__row--fail .pld-dl__cat,
.pld-dl__row--records .pld-dl__cat{background:var(--dl-card)}

/* The section cell spans its rows, so the divider to its right is drawn on
   every state cell. Continuous down the whole table, including tinted rows. */
.pld-dl__table th.pld-dl__col-state,
.pld-dl__table td.pld-dl__col-state{border-left:1px solid var(--dl-line)}

/* Status mark */

.pld-dl__mark{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    line-height:1;
    color:var(--pld-white,rgb(255,255,255));
    background:var(--dl-grey);
}

.pld-dl__mark--pass{background:var(--dl-pass)}
.pld-dl__mark--warn{background:var(--dl-warn)}
.pld-dl__mark--fail{background:var(--dl-fail)}
.pld-dl__mark--info,
.pld-dl__mark--records{background:var(--dl-note)}
.pld-dl__mark--unknown{background:var(--dl-grey)}

.pld-dl__sr{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}

/* Name column */

.pld-dl__name{font-weight:var(--dl-weight)}

/* Information column */

.pld-dl__msg{font-size:var(--dl-size);line-height:var(--dl-leading)}

.pld-dl__records{
    margin:0;
    background:transparent;
    font-family:var(--dl-font);
    font-size:var(--dl-size);
    font-weight:var(--dl-weight);
    letter-spacing:var(--dl-tracking);
    line-height:var(--dl-leading);
    white-space:pre-wrap;
    word-break:break-word;
}

.pld-dl__data{
    margin-top:7px;
    font-family:var(--dl-font);
    font-size:var(--dl-size);
    font-weight:var(--dl-weight);
    letter-spacing:var(--dl-tracking);
    line-height:var(--dl-leading);
    color:var(--dl-mut);
    white-space:pre-wrap;
    word-break:break-word;
}

.pld-dl__fix{
    margin-top:8px;
    padding-top:7px;
    border-top:1px dashed var(--dl-line);
    font-size:var(--dl-size);
    line-height:var(--dl-leading);
    white-space:pre-wrap;
}

.pld-dl__fix strong{font-weight:600}

/* Loading */

.pld-dl__row--loading td{color:var(--dl-mut);font-style:italic}



/* Narrow */

@media (max-width:820px){
    .pld-dl{--dl-col-cat:88px;--dl-col-name:110px}
    .pld-dl__table td,.pld-dl__table th{padding:8px 9px}
}

@media (max-width:600px){
    .pld-dl__field{flex-direction:column}
    .pld-dl__submit{width:100%}
    .pld-dl__meta{flex-direction:column;align-items:flex-start;gap:10px}

    .pld-dl__table,
    .pld-dl__table tbody,
    .pld-dl__table tr,
    .pld-dl__table td{display:block;width:auto}

    .pld-dl__table thead{display:none}

    .pld-dl__table tr{
        position:relative;
        border-bottom:1px solid var(--dl-line);
        padding:10px 12px 12px 38px;
    }

    .pld-dl__table td{
        border:0;
        padding:0;
        background:none;
    }

    .pld-dl__row--warn{background:var(--dl-warn-row)}
    .pld-dl__row--fail{background:var(--dl-fail-row)}
    .pld-dl__row--records{background:var(--dl-note-row)}

    .pld-dl__cat{
        background:none;
        border:0;
        font-size:11px;
        text-transform:uppercase;
        letter-spacing:.05em;
        color:var(--dl-mut);
        margin-bottom:2px;
    }

    .pld-dl__col-state{position:absolute;left:12px;top:11px}
    .pld-dl__name{margin-bottom:3px}
}

/* Joined field: the button sits inside the input, which reads as one control */

.pld-dl--joined .pld-dl__field{
    gap:0;
    padding:5px;
    border:1px solid var(--dl-line);
    border-radius:999px;
    background:var(--dl-card);
    transition:border-color .15s ease;
}

.pld-dl--joined .pld-dl__field:focus-within{border-color:var(--dl-ink)}

.pld-dl--joined .pld-dl__input{
    height:auto;
    border:0;
    border-radius:999px;
    background:none;
    padding:0 8px 0 18px;
}

.pld-dl--joined .pld-dl__submit{
    height:44px;
    border-radius:999px;
    padding:0 28px;
    font-weight:600;
}

@media (max-width:600px){
    .pld-dl--joined .pld-dl__field{
        flex-direction:row;
        border-radius:999px;
    }
    .pld-dl--joined .pld-dl__submit{
        width:auto;
        padding:0 20px;
    }
}

/* Facts: plain label, emphasised value */

.pld-dl__line{
    display:block;
    word-break:break-word;
}

.pld-dl__k{color:var(--dl-mut);font-weight:400}

.pld-dl__v{
    font-weight:600;
    color:var(--dl-ink);
    font-variant-numeric:tabular-nums;
}

.pld-dl__data .pld-dl__v{font-weight:600}

/* Optional features: switches, so nothing runs unasked */

.pld-dl__switches{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:16px;
}

.pld-dl__switches-label{
    color:var(--dl-mut);
    margin-right:2px;
}

.pld-dl__switch{
    border:1px solid var(--dl-line);
    background:var(--dl-card);
    color:var(--dl-ink);
    font-family:var(--dl-font);
    font-size:var(--dl-size);
    letter-spacing:var(--dl-tracking);
    padding:6px 14px;
    border-radius:999px;
    cursor:pointer;
    transition:border-color .15s ease,background .15s ease;
}

.pld-dl__switch:hover{border-color:var(--dl-ink)}

.pld-dl__switch.is-on{
    background:var(--dl-ink);
    border-color:var(--dl-ink);
    color:var(--pld-white,rgb(255,255,255));
    cursor:default;
}

.pld-dl__switch.is-loading{opacity:.55;cursor:progress}

.pld-dl__switch:disabled:not(.is-on){opacity:.55;cursor:default}