/* =============================================
   Secracy — tools.css
   Security tools directory. Uses the tokens in site-theme.css.
   ============================================= */

.page-shell { padding-top: 0; padding-bottom: clamp(3rem, 6vw, 5rem); }

/* Responsible-use notice */
.use-notice {
    background: var(--danger-soft);
    border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    border-radius: var(--radius);
    padding: 1.1rem 1.3rem;
    display: flex;
    gap: .9rem;
    align-items: flex-start;
}

.use-notice i { color: var(--danger); font-size: 1.3rem; line-height: 1.3; }
.use-notice p { margin-bottom: 0; font-size: .96rem; color: var(--ink-2) !important; }
.use-notice strong { color: var(--danger); }

/* Category heading between tool groups */
.tool-category { margin: 1rem 0 .4rem; }

.tool-category h2 {
    font-family: var(--mono) !important;
    font-size: .78rem !important;
    font-weight: 600 !important;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent) !important;
    margin-bottom: .45rem;
}

.tool-category p { color: var(--muted); font-size: .98rem; margin-bottom: 0; max-width: 70ch; }
.tool-category .cat-divider { height: 1px; background: var(--rule); margin-top: 1rem; }

/* Tool cards */
.tool-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.6rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.tool-card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow); }
.tool-card h2 { font-size: 1.5rem !important; color: var(--ink) !important; margin-bottom: .4rem; }
.tool-card p, .tool-card li { color: var(--ink-2) !important; font-size: .96rem; }

.tool-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }

.tool-tag {
    font-family: var(--mono);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .2rem .5rem;
    border-radius: 4px;
    background: var(--accent-soft);
    border: 1px solid var(--accent);
    color: var(--accent);
}

.tool-tag.tag-neutral { background: var(--surface-2); border-color: var(--rule); color: var(--ink-2); }

.tool-card ul { padding-left: 1.1rem; margin-bottom: 1.2rem; }
.tool-card li { margin-bottom: .35rem; line-height: 1.5; }

.tool-code {
    display: block;
    background: #03050A;
    border: 1px solid var(--rule);
    border-radius: 6px;
    padding: .7rem .9rem;
    font-family: var(--mono);
    font-size: .82rem;
    color: #C9D4E5;
    overflow-x: auto;
    white-space: nowrap;
    margin-bottom: 1.2rem;
}

.tool-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: auto; }

.tool-links a {
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    padding: .45rem .9rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.tool-links a:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Defensive-use callout inside each card */
.defender-note { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--rule); font-size: .9rem; color: var(--ink-2); }
.defender-note strong { color: var(--accent); }

@media (max-width: 575.98px) {
    .tool-card { padding: 1.3rem; }
}