/*!
 * Global DNS - Tools Design System
 * Shared styling for every public tool page (DNS, IP, e-mail, security).
 * Depends on --gd-primary / --gd-primary-ink being injected by the Blade layout.
 */

:root {
    /* Brand -- overridden inline from app settings */
    --gd-primary: #2563eb;
    --gd-primary-ink: #1d4ed8;
    --gd-primary-soft: rgba(37, 99, 235, .10);
    --gd-primary-tint: rgba(37, 99, 235, .18);

    /* Neutrals */
    --gd-bg: #f8fafc;
    --gd-surface: #ffffff;
    --gd-surface-2: #f1f5f9;
    --gd-border: #e2e8f0;
    --gd-border-strong: #cbd5e1;
    --gd-hairline: #eef2f7;

    /* Text */
    --gd-heading: #1e293b;
    --gd-body: #475569;
    --gd-muted: #64748b;
    --gd-faint: #94a3b8;

    /* Semantic */
    --gd-ok: #15803d;
    --gd-ok-soft: #dcfce7;
    --gd-warn: #b45309;
    --gd-warn-soft: #fef3c7;
    --gd-danger: #b91c1c;
    --gd-danger-soft: #fee2e2;
    --gd-info: #0369a1;
    --gd-info-soft: #e0f2fe;

    /* Type scale */
    --gd-fs-xs: .75rem;
    --gd-fs-sm: .8125rem;
    --gd-fs-md: .9375rem;
    --gd-fs-lg: 1.0625rem;
    --gd-fs-xl: 1.375rem;
    --gd-fs-2xl: 1.75rem;

    /* Spacing */
    --gd-sp-1: 4px;
    --gd-sp-2: 8px;
    --gd-sp-3: 12px;
    --gd-sp-4: 16px;
    --gd-sp-5: 24px;
    --gd-sp-6: 32px;

    /* Radius */
    --gd-r-sm: 6px;
    --gd-r-md: 10px;
    --gd-r-lg: 14px;
    --gd-r-pill: 999px;

    /* Elevation */
    --gd-sh-1: 0 1px 2px rgba(30, 41, 59, .06);
    --gd-sh-2: 0 4px 14px rgba(30, 41, 59, .08);
    --gd-sh-3: 0 10px 28px rgba(30, 41, 59, .12);

    --gd-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ==========================================================================
   Tool shell
   ========================================================================== */

.gd-tool {
    margin-top: var(--gd-sp-5);
}

.gd-tool__head {
    display: flex;
    align-items: flex-start;
    gap: var(--gd-sp-3);
    margin-bottom: var(--gd-sp-4);
}

.gd-tool__badge {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--gd-r-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background: var(--gd-primary-soft);
    color: var(--gd-primary);
}

.gd-tool__title {
    font-size: var(--gd-fs-xl);
    font-weight: 700;
    color: var(--gd-heading);
    margin: 0 0 2px;
    line-height: 1.25;
}

.gd-tool__sub {
    font-size: var(--gd-fs-md);
    color: var(--gd-muted);
    margin: 0;
}

/* Query panel wrapping the existing .input forms */
.gd-panel {
    background: var(--gd-surface);
    border: 1px solid var(--gd-border);
    border-radius: var(--gd-r-lg);
    box-shadow: var(--gd-sh-1);
    padding: var(--gd-sp-5);
}

.gd-panel + .gd-panel {
    margin-top: var(--gd-sp-4);
}

/* ==========================================================================
   Results
   ========================================================================== */

.gd-result {
    margin-top: var(--gd-sp-4);
}

.gd-result__card {
    background: var(--gd-surface);
    border: 1px solid var(--gd-border);
    border-radius: var(--gd-r-lg);
    box-shadow: var(--gd-sh-1);
    overflow: hidden;
}

.gd-result__card + .gd-result__card {
    margin-top: var(--gd-sp-4);
}

.gd-result__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gd-sp-3);
    padding: var(--gd-sp-3) var(--gd-sp-4);
    background: var(--gd-surface-2);
    border-bottom: 1px solid var(--gd-border);
}

.gd-result__head h4 {
    margin: 0;
    font-size: var(--gd-fs-md);
    font-weight: 650;
    color: var(--gd-heading);
    letter-spacing: .01em;
}

.gd-result__body {
    padding: var(--gd-sp-4);
}

.gd-result__body--flush {
    padding: 0;
}

/* Data table */
.gd-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: var(--gd-fs-md);
}

.gd-table th,
.gd-table td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--gd-hairline);
    text-align: left;
    vertical-align: top;
}

.gd-table thead th {
    background: var(--gd-surface-2);
    color: var(--gd-muted);
    font-size: var(--gd-fs-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    border-bottom: 1px solid var(--gd-border);
    white-space: nowrap;
}

.gd-table tbody tr:last-child th,
.gd-table tbody tr:last-child td {
    border-bottom: 0;
}

.gd-table tbody tr:hover {
    background: rgba(148, 163, 184, .07);
}

.gd-table th.gd-key {
    width: 210px;
    color: var(--gd-heading);
    font-weight: 600;
    white-space: nowrap;
}

.gd-table td.gd-val {
    color: var(--gd-body);
    word-break: break-word;
}

.gd-mono {
    font-family: var(--gd-mono);
    font-size: var(--gd-fs-sm);
    color: var(--gd-heading);
}

/* Key/value definition grid for compact summaries */
.gd-kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gd-sp-3);
}

.gd-kv__item {
    background: var(--gd-surface-2);
    border: 1px solid var(--gd-border);
    border-radius: var(--gd-r-md);
    padding: var(--gd-sp-3) var(--gd-sp-4);
}

.gd-kv__label {
    display: block;
    font-size: var(--gd-fs-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gd-muted);
    margin-bottom: 2px;
}

.gd-kv__value {
    font-size: var(--gd-fs-lg);
    font-weight: 650;
    color: var(--gd-heading);
    word-break: break-word;
}

/* ==========================================================================
   Badges & pills
   ========================================================================== */

.gd-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--gd-r-pill);
    font-size: var(--gd-fs-xs);
    font-weight: 650;
    line-height: 1.5;
    white-space: nowrap;
}

.gd-badge--ok      { background: var(--gd-ok-soft);     color: var(--gd-ok); }
.gd-badge--warn    { background: var(--gd-warn-soft);   color: var(--gd-warn); }
.gd-badge--danger  { background: var(--gd-danger-soft); color: var(--gd-danger); }
.gd-badge--info    { background: var(--gd-info-soft);   color: var(--gd-info); }
.gd-badge--muted   { background: var(--gd-surface-2);   color: var(--gd-muted); }

.gd-type-pill {
    display: inline-block;
    min-width: 58px;
    text-align: center;
    padding: 2px 9px;
    border-radius: var(--gd-r-sm);
    background: var(--gd-primary-soft);
    color: var(--gd-primary-ink);
    font-family: var(--gd-mono);
    font-size: var(--gd-fs-xs);
    font-weight: 700;
}

/* ==========================================================================
   Health score
   ========================================================================== */

.gd-score {
    display: flex;
    align-items: center;
    gap: var(--gd-sp-5);
    flex-wrap: wrap;
}

.gd-score__dial {
    position: relative;
    width: 116px;
    height: 116px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
}

.gd-score__dial::after {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--gd-surface);
}

.gd-score__num {
    position: relative;
    z-index: 1;
    font-size: 1.9rem;
    font-weight: 750;
    color: var(--gd-heading);
    line-height: 1;
}

.gd-score__num small {
    display: block;
    font-size: var(--gd-fs-xs);
    font-weight: 600;
    color: var(--gd-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-top: 3px;
}

.gd-score__meta {
    flex: 1 1 240px;
    min-width: 0;
}

.gd-score__meta h5 {
    font-size: var(--gd-fs-lg);
    font-weight: 700;
    color: var(--gd-heading);
    margin: 0 0 4px;
}

.gd-score__meta p {
    margin: 0;
    color: var(--gd-muted);
    font-size: var(--gd-fs-md);
}

/* Check list used by DNS health / security headers */
.gd-checks {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gd-checks li {
    display: flex;
    align-items: flex-start;
    gap: var(--gd-sp-3);
    padding: 11px var(--gd-sp-4);
    border-bottom: 1px solid var(--gd-hairline);
}

.gd-checks li:last-child {
    border-bottom: 0;
}

.gd-checks__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    margin-top: 1px;
}

.gd-checks__icon--ok     { background: var(--gd-ok-soft);     color: var(--gd-ok); }
.gd-checks__icon--warn   { background: var(--gd-warn-soft);   color: var(--gd-warn); }
.gd-checks__icon--fail   { background: var(--gd-danger-soft); color: var(--gd-danger); }

.gd-checks__text {
    min-width: 0;
    flex: 1;
}

.gd-checks__text strong {
    display: block;
    font-size: var(--gd-fs-md);
    font-weight: 600;
    color: var(--gd-heading);
}

.gd-checks__text span {
    display: block;
    font-size: var(--gd-fs-sm);
    color: var(--gd-muted);
    word-break: break-word;
}

/* ==========================================================================
   Copy button, code blocks, empty & loading states
   ========================================================================== */

.gd-copy {
    border: 1px solid var(--gd-border);
    background: var(--gd-surface);
    color: var(--gd-muted);
    border-radius: var(--gd-r-sm);
    font-size: var(--gd-fs-xs);
    font-weight: 600;
    padding: 3px 9px;
    cursor: pointer;
    transition: all .15s ease;
    line-height: 1.6;
}

.gd-copy:hover {
    border-color: var(--gd-primary);
    color: var(--gd-primary);
    background: var(--gd-primary-soft);
}

.gd-copy.is-done {
    border-color: var(--gd-ok);
    color: var(--gd-ok);
    background: var(--gd-ok-soft);
}

.gd-pre {
    margin: 0;
    padding: var(--gd-sp-4);
    background: #0f172a;
    color: #e2e8f0;
    font-family: var(--gd-mono);
    font-size: var(--gd-fs-sm);
    line-height: 1.65;
    border-radius: var(--gd-r-md);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.gd-empty {
    text-align: center;
    padding: var(--gd-sp-6) var(--gd-sp-4);
    color: var(--gd-muted);
}

.gd-empty i {
    display: block;
    font-size: 2rem;
    color: var(--gd-faint);
    margin-bottom: var(--gd-sp-3);
}

.gd-empty strong {
    display: block;
    color: var(--gd-heading);
    font-size: var(--gd-fs-lg);
    margin-bottom: 4px;
}

.gd-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gd-sp-3);
    padding: var(--gd-sp-6) var(--gd-sp-4);
    color: var(--gd-muted);
    font-size: var(--gd-fs-md);
}

.gd-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gd-border);
    border-top-color: var(--gd-primary);
    border-radius: 50%;
    animation: gd-spin .7s linear infinite;
}

@keyframes gd-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Public DNS cards
   ========================================================================== */

.gd-dns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: var(--gd-sp-4);
}

.gd-dns-card {
    background: var(--gd-surface);
    border: 1px solid var(--gd-border);
    border-radius: var(--gd-r-lg);
    padding: var(--gd-sp-4);
    box-shadow: var(--gd-sh-1);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gd-dns-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--gd-sh-2);
    border-color: var(--gd-primary);
}

.gd-dns-card__name {
    font-size: var(--gd-fs-lg);
    font-weight: 700;
    color: var(--gd-heading);
    margin: 0 0 2px;
}

.gd-dns-card__provider {
    font-size: var(--gd-fs-xs);
    color: var(--gd-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: var(--gd-sp-3);
}

.gd-dns-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gd-sp-2);
    padding: 5px 0;
    border-top: 1px solid var(--gd-hairline);
}

.gd-dns-row span:first-child {
    font-size: var(--gd-fs-xs);
    color: var(--gd-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    flex: 0 0 auto;
}

.gd-dns-row code {
    font-family: var(--gd-mono);
    font-size: var(--gd-fs-sm);
    color: var(--gd-heading);
    background: none;
    padding: 0;
    text-align: right;
    word-break: break-all;
}

.gd-dns-card__features {
    margin-top: var(--gd-sp-3);
    padding-top: var(--gd-sp-3);
    border-top: 1px solid var(--gd-hairline);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

/* ==========================================================================
   Home page tool directory
   ========================================================================== */

.gd-tools-section {
    background: var(--gd-bg);
    border: 1px solid var(--gd-border);
    border-radius: var(--gd-r-lg);
    padding: var(--gd-sp-6) var(--gd-sp-5);
    margin-top: var(--gd-sp-6);
}

.gd-section-title {
    font-size: var(--gd-fs-2xl);
    font-weight: 750;
    color: var(--gd-heading);
    margin: 0 0 4px;
}

.gd-section-sub {
    color: var(--gd-muted);
    font-size: var(--gd-fs-md);
    margin: 0;
}

.gd-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--gd-sp-4);
    background: linear-gradient(135deg, var(--gd-primary-ink), var(--gd-primary));
    border-radius: var(--gd-r-lg);
    padding: var(--gd-sp-5);
    color: #fff;
    margin: var(--gd-sp-5) 0;
}

.gd-stats__item {
    text-align: center;
}

.gd-stats__num {
    font-size: 1.7rem;
    font-weight: 750;
    line-height: 1.1;
}

.gd-stats__label {
    font-size: var(--gd-fs-sm);
    opacity: .88;
}

.gd-cat {
    background: var(--gd-surface);
    border: 1px solid var(--gd-border);
    border-radius: var(--gd-r-lg);
    overflow: hidden;
    margin-bottom: var(--gd-sp-3);
}

.gd-cat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gd-sp-3);
    padding: var(--gd-sp-3) var(--gd-sp-4);
    background: var(--gd-surface-2);
    border-bottom: 1px solid var(--gd-border);
    cursor: pointer;
    transition: background .18s ease;
}

.gd-cat__head:hover {
    background: #e8eef6;
}

.gd-cat__head h5 {
    margin: 0;
    font-size: var(--gd-fs-md);
    font-weight: 650;
    color: var(--gd-heading);
    display: flex;
    align-items: center;
    gap: var(--gd-sp-2);
}

.gd-cat__count {
    background: var(--gd-primary);
    color: #fff;
    font-size: var(--gd-fs-xs);
    font-weight: 700;
    padding: 2px 9px;
    border-radius: var(--gd-r-pill);
}

.gd-cat__chev {
    color: var(--gd-muted);
    transition: transform .25s ease;
    margin-left: var(--gd-sp-2);
}

.gd-cat__head[aria-expanded="true"] .gd-cat__chev {
    transform: rotate(180deg);
}

.gd-cat__body {
    padding: var(--gd-sp-4);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: var(--gd-sp-3);
}

.gd-tool-card {
    display: block;
    background: var(--gd-surface);
    border: 1px solid var(--gd-border);
    border-radius: var(--gd-r-md);
    padding: var(--gd-sp-4) var(--gd-sp-3);
    text-align: center;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: var(--gd-sh-1);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.gd-tool-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--gd-sh-2);
    border-color: var(--gd-primary);
}

.gd-tool-card__icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: var(--gd-sp-2);
    background: var(--gd-primary-soft);
    color: var(--gd-primary);
}

.gd-tool-card h6 {
    font-size: var(--gd-fs-md);
    font-weight: 650;
    color: var(--gd-heading);
    margin: 0 0 2px;
}

.gd-tool-card p {
    font-size: var(--gd-fs-xs);
    color: var(--gd-muted);
    margin: 0;
    line-height: 1.45;
}

/* Footer link columns */
.gd-footer-tools {
    border-top: 1px solid var(--gd-border);
    padding-top: var(--gd-sp-5);
    margin-top: var(--gd-sp-5);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--gd-sp-4);
}

.gd-footer-tools h6 {
    color: var(--gd-muted);
    font-size: var(--gd-fs-xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: var(--gd-sp-2);
}

.gd-footer-tools a {
    display: block;
    color: var(--gd-body);
    font-size: var(--gd-fs-sm);
    padding: 3px 0;
    text-decoration: none;
    transition: color .15s ease;
}

.gd-footer-tools a:hover {
    color: var(--gd-primary);
}

/* ==========================================================================
   Related tools strip (cross-linking between tool pages)
   ========================================================================== */

.gd-related {
    margin-top: var(--gd-sp-6);
}

.gd-related h5 {
    font-size: var(--gd-fs-md);
    font-weight: 650;
    color: var(--gd-heading);
    margin-bottom: var(--gd-sp-3);
}

.gd-related__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gd-sp-2);
}

.gd-related__list a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 13px;
    border: 1px solid var(--gd-border);
    border-radius: var(--gd-r-pill);
    background: var(--gd-surface);
    color: var(--gd-body);
    font-size: var(--gd-fs-sm);
    font-weight: 550;
    text-decoration: none;
    transition: all .15s ease;
}

.gd-related__list a:hover {
    border-color: var(--gd-primary);
    color: var(--gd-primary);
    background: var(--gd-primary-soft);
    text-decoration: none;
}

/* ==========================================================================
   Form polish on top of Bootstrap 4
   ========================================================================== */

.input .form-control {
    border-radius: var(--gd-r-md);
    border-color: var(--gd-border-strong);
    font-size: var(--gd-fs-md);
    height: auto;
    padding: 10px 14px;
}

.input .form-control:focus {
    border-color: var(--gd-primary);
    box-shadow: 0 0 0 3px var(--gd-primary-soft);
}

.input input[type=submit] {
    border-radius: var(--gd-r-md);
    font-weight: 650;
    border: 0;
    padding: 10px 14px;
    transition: filter .15s ease, transform .15s ease;
}

.input input[type=submit]:hover:not(:disabled) {
    filter: brightness(.94);
}

.input input[type=submit]:disabled {
    opacity: .6;
    cursor: not-allowed;
}

/* ==========================================================================
   Dark mode (darkmode-js toggles .darkmode--activated on <body>)
   ========================================================================== */

.darkmode--activated {
    --gd-bg: #0f172a;
    --gd-surface: #ffffff;
    --gd-surface-2: #f1f5f9;
}

.darkmode--activated .gd-pre {
    background: #1e293b;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767.98px) {
    .gd-tools-section {
        padding: var(--gd-sp-5) var(--gd-sp-3);
    }

    .gd-table th.gd-key {
        width: auto;
    }

    .gd-table th,
    .gd-table td {
        padding: 9px 12px;
        font-size: var(--gd-fs-sm);
    }

    .gd-score {
        gap: var(--gd-sp-4);
    }

    .gd-score__dial {
        width: 96px;
        height: 96px;
    }

    .gd-cat__body {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}