/* ═══════════════════════════════════════════════════════════════
   AVENTRA SECURITY — tools.css
   Shared styles for the free interactive tools:
   security-assessment.html · scoping-calculator.html
   Loads AFTER style.css and reuses its custom properties.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ PAGE HERO (compact dark header) ═════════════════════════ */

.page-hero {
    overflow: hidden; /* clip the decorative glow, like .hero */
    padding: calc(var(--nav-h) + 4rem) 0 calc(1.5rem + var(--hero-fade) * 0.55);
    --grid-fade-top: 0px;
    --grid-fade-bottom: calc(var(--hero-fade) * 1.05);
    background: linear-gradient(180deg,
        var(--night) 0%,
        var(--night) calc(100% - var(--hero-fade)),
        var(--blend-85) calc(100% - var(--hero-fade) * 0.72),
        var(--blend-50) calc(100% - var(--hero-fade) * 0.45),
        var(--blend-15) calc(100% - var(--hero-fade) * 0.2),
        var(--paper) 100%);
}

.page-hero .hero-glow {
    position: absolute;
    top: -40%; right: -10%;
    width: 640px; height: 640px;
    background: radial-gradient(circle, rgba(139, 38, 53, 0.28) 0%, rgba(139, 38, 53, 0.06) 45%, transparent 68%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.page-hero-inner { max-width: 720px; }

.page-hero-kicker {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--crimson-bright);
    display: block;
    margin-bottom: 1.1rem;
}

.page-hero h1 {
    font-size: clamp(2.2rem, 4.4vw, 3.3rem);
    color: var(--night-text);
    margin-bottom: 1.1rem;
}

/* Crimson accent line with underline draw — same treatment as the index hero */
.page-hero h1 .accent {
    color: var(--crimson-bright);
    position: relative;
    white-space: nowrap;
}
.page-hero h1 .accent::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0.04em;
    width: 100%; height: 0.09em;
    background: linear-gradient(90deg, var(--crimson), var(--crimson-bright));
    transform: scaleX(0);
    transform-origin: left;
    animation: underlineDraw 0.9s cubic-bezier(0.6, 0, 0.2, 1) 1s forwards;
}
@media (prefers-reduced-motion: reduce) {
    .page-hero h1 .accent::after { transform: scaleX(1); }
}

.page-hero-lede {
    font-size: 1.08rem;
    color: var(--night-body);
    max-width: 560px;
    margin-bottom: 1.9rem;
}

.page-hero-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--night-line-strong);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.03);
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--night-body);
}
.meta-chip svg { width: 13px; height: 13px; color: var(--crimson-bright); flex-shrink: 0; }

.page-hero-kicker, .page-hero h1, .page-hero-lede, .page-hero-meta {
    animation: heroRise 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.page-hero h1 { animation-delay: 0.08s; }
.page-hero-lede { animation-delay: 0.16s; }
.page-hero-meta { animation-delay: 0.24s; }

/* ═══ SHARED TOOL SHELL ═══════════════════════════════════════ */

.tool-shell { max-width: 860px; margin: 0 auto; }

.tool-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 2.5rem 2.7rem;
}

/* ═══ ASSESSMENT — intro ══════════════════════════════════════ */

.quiz-intro h2 { font-size: 1.7rem; margin-bottom: 0.9rem; }
.quiz-intro > p { margin-bottom: 1.4rem; max-width: 62ch; }

.quiz-domains { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.9rem; }

.quiz-intro-note {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    padding: 0.95rem 1.15rem;
    background: var(--crimson-soft);
    border: 1px solid var(--crimson-line);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
    color: var(--ink-body);
    line-height: 1.6;
    margin-bottom: 1.9rem;
}
.quiz-intro-note svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--crimson); margin-top: 0.12rem; }
.quiz-intro-note strong { color: var(--ink); }

/* ═══ ASSESSMENT — question stage ═════════════════════════════ */

.quiz-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-bottom: 0.7rem;
}
.quiz-counter {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--ink-muted);
}
.quiz-counter b { color: var(--crimson); }
.quiz-domain {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--crimson);
    text-align: right;
}

.quiz-bar {
    height: 4px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 2rem;
}
.quiz-bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--crimson), var(--crimson-bright));
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.quiz-question {
    font-family: var(--font-display);
    font-size: 1.32rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 1.5rem;
    min-height: 3.4em;
}

.quiz-options { display: grid; gap: 0.55rem; }

.quiz-option {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    width: 100%;
    text-align: left;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.05rem;
    font-family: var(--font-body);
    font-size: 0.94rem;
    line-height: 1.5;
    color: var(--ink-body);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.quiz-option:hover {
    border-color: var(--crimson);
    background: #fff;
    transform: translateX(3px);
}
.quiz-option.selected {
    border-color: var(--crimson);
    background: var(--crimson-soft);
    box-shadow: 0 0 0 3px rgba(139, 38, 53, 0.10);
    color: var(--ink);
}

.opt-key {
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 700;
    color: var(--ink-muted);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    padding: 0.18rem 0.42rem;
    flex-shrink: 0;
    margin-top: 0.12rem;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.quiz-option:hover .opt-key,
.quiz-option.selected .opt-key {
    color: #fff;
    background: var(--crimson);
    border-color: var(--crimson);
}

.quiz-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.8rem;
}
.quiz-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: none;
    border: none;
    padding: 0.4rem 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    cursor: pointer;
    transition: color 0.2s ease;
}
.quiz-back:hover { color: var(--crimson); }
.quiz-back svg { width: 14px; height: 14px; }
.quiz-back[disabled] { opacity: 0.35; pointer-events: none; }

.quiz-hint {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
}

/* ═══ ASSESSMENT — report ═════════════════════════════════════ */

.report-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.report-titlebar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.75rem 1.1rem;
    background: var(--night);
    border-bottom: 1px solid var(--night-line);
}
.report-titlebar .term-dot { width: 10px; height: 10px; }
.report-titlebar span:last-child {
    flex: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--night-muted);
}

.report-body { padding: 2.5rem 2.7rem; }

.score-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 2.6rem;
    align-items: center;
    margin-bottom: 2.4rem;
}

.score-dial { position: relative; width: 190px; height: 190px; }
.score-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-dial .dial-track { fill: none; stroke: var(--line); stroke-width: 10; }
.score-dial .dial-fill {
    fill: none;
    stroke: var(--ok);
    stroke-width: 10;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), stroke 0.4s ease;
}
.score-readout {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
}
.score-value {
    font-family: var(--font-mono);
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--ink);
    line-height: 1;
}
.score-outof {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

.grade-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
    border-radius: 4px;
    margin-bottom: 0.9rem;
}
.grade-chip.g-a { background: rgba(22, 163, 74, 0.09); color: var(--ok); border: 1px solid rgba(22, 163, 74, 0.3); }
.grade-chip.g-b { background: rgba(37, 99, 235, 0.08); color: var(--sev-low); border: 1px solid rgba(37, 99, 235, 0.28); }
.grade-chip.g-c { background: rgba(217, 119, 6, 0.09); color: #B45309; border: 1px solid rgba(217, 119, 6, 0.3); }
.grade-chip.g-d { background: rgba(234, 88, 12, 0.09); color: var(--sev-high); border: 1px solid rgba(234, 88, 12, 0.28); }
.grade-chip.g-f { background: rgba(220, 38, 38, 0.09); color: var(--sev-critical); border: 1px solid rgba(220, 38, 38, 0.28); }

.score-headline { font-size: 1.45rem; margin-bottom: 0.6rem; }
.score-summary { font-size: 0.96rem; color: var(--ink-body); max-width: 52ch; }

.report-h {
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1.1rem;
}
.report-h b { color: var(--crimson); }

.domain-bars { display: grid; gap: 0.85rem; margin-bottom: 2.4rem; }
.domain-row {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 44px;
    gap: 1.1rem;
    align-items: center;
}
.domain-label { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.domain-track { height: 7px; background: var(--paper-alt); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.domain-fill {
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--crimson), var(--crimson-bright));
    transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.domain-fill.lvl-good { background: linear-gradient(90deg, #15803D, var(--ok)); }
.domain-fill.lvl-warn { background: linear-gradient(90deg, #B45309, var(--sev-medium)); }
.domain-fill.lvl-bad  { background: linear-gradient(90deg, #B91C1C, var(--sev-high)); }
.domain-pct {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ink-muted);
    text-align: right;
}

.findings-list { display: grid; gap: 0.7rem; margin-bottom: 2.4rem; }
.finding {
    display: flex;
    gap: 0.95rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--paper);
}
.finding .sev-chip { flex-shrink: 0; margin-top: 0.2rem; }
.finding h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 0.2rem; }
.finding p { font-size: 0.86rem; color: var(--ink-muted); line-height: 1.55; }

.findings-clear {
    padding: 1.1rem 1.2rem;
    background: rgba(22, 163, 74, 0.06);
    border: 1px solid rgba(22, 163, 74, 0.22);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    color: var(--ink-body);
    margin-bottom: 2.4rem;
}

.report-cta {
    background: var(--night);
    border-radius: var(--radius-md);
    padding: 1.8rem 1.9rem;
    position: relative;
    overflow: hidden;
}
.report-cta::before {
    content: '';
    position: absolute;
    top: -60%; right: -10%;
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(139, 38, 53, 0.35) 0%, transparent 65%);
    pointer-events: none;
}
.report-cta h3 { color: var(--night-text); font-size: 1.25rem; margin-bottom: 0.5rem; position: relative; }
.report-cta p { color: var(--night-body); font-size: 0.92rem; margin-bottom: 1.4rem; max-width: 56ch; position: relative; }
.report-cta-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; position: relative; }

.report-disclaimer {
    margin-top: 1.6rem;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    line-height: 1.7;
    color: var(--ink-muted);
}

.text-btn {
    background: none;
    border: none;
    padding: 0.4rem 0.2rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--night-body);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
    transition: color 0.2s ease;
}
.text-btn:hover { color: #fff; }

/* ═══ CALCULATOR ══════════════════════════════════════════════ */

.calc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 1.6rem;
    align-items: start;
}

.calc-col-h {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 1rem;
}
.calc-col-h b { color: var(--crimson); }

.calc-services { display: grid; gap: 0.7rem; margin-bottom: 2.2rem; }

.svc-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.svc-card.active {
    border-color: var(--crimson-line);
    box-shadow: var(--shadow-sm);
}

.svc-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 1.15rem 1.3rem;
    cursor: pointer;
    font-family: var(--font-body);
}
.svc-head > span:last-child { flex: 1; min-width: 0; }
.svc-check {
    width: 21px; height: 21px;
    flex-shrink: 0;
    border: 1.5px solid var(--line-strong);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.svc-check svg { width: 12px; height: 12px; stroke: #fff; opacity: 0; transition: opacity 0.2s ease; }
.svc-card.active .svc-check { background: var(--crimson); border-color: var(--crimson); }
.svc-card.active .svc-check svg { opacity: 1; }

.svc-name { display: block; font-size: 0.98rem; font-weight: 600; color: var(--ink); }
.svc-desc { display: block; font-size: 0.8rem; color: var(--ink-muted); margin-top: 0.1rem; line-height: 1.45; }

.svc-days {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ink-muted);
    white-space: nowrap;
}
.svc-card.active .svc-days { color: var(--crimson); }

.svc-body {
    display: none;
    padding: 0 1.3rem 1.25rem calc(1.3rem + 21px + 1rem);
}
.svc-card.active .svc-body { display: block; animation: panelIn 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }

.seg-label {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.55rem;
}
.seg-control { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.seg-pill { position: relative; }
.seg-pill input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.seg-pill span {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    padding: 0.42rem 0.8rem;
    background: var(--paper);
    color: var(--ink-body);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.seg-pill:hover span { border-color: var(--crimson); }
.seg-pill input:checked + span {
    background: var(--crimson);
    color: #fff;
    border-color: var(--crimson);
}
.seg-pill input:focus-visible + span {
    outline: 2px solid var(--crimson-bright);
    outline-offset: 2px;
}

/* Modifiers */
.calc-mods {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 0.5rem 1.3rem;
}
.mod-row {
    position: relative; /* contain the visually-hidden checkbox */
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.95rem 0;
    cursor: pointer;
}
.mod-row + .mod-row { border-top: 1px solid var(--line); }
.mod-row input {
    position: absolute;
    opacity: 0;
    width: 21px; height: 21px;
}
.mod-check {
    width: 21px; height: 21px;
    flex-shrink: 0;
    border: 1.5px solid var(--line-strong);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.mod-check svg { width: 12px; height: 12px; stroke: #fff; opacity: 0; transition: opacity 0.2s ease; }
.mod-row input:checked ~ .mod-check { background: var(--crimson); border-color: var(--crimson); }
.mod-row input:checked ~ .mod-check svg { opacity: 1; }
.mod-row input:focus-visible ~ .mod-check {
    outline: 2px solid var(--crimson-bright);
    outline-offset: 2px;
}
.mod-name { display: block; font-size: 0.93rem; font-weight: 600; color: var(--ink); }
.mod-desc { display: block; font-size: 0.8rem; color: var(--ink-muted); margin-top: 0.1rem; line-height: 1.45; }
.mod-tag {
    margin-left: auto;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    font-weight: 600;
    color: var(--ink-muted);
    white-space: nowrap;
    margin-top: 0.25rem;
}

/* Summary panel */
.calc-summary {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
    background: #171013;
    border: 1px solid var(--night-line-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 18px 48px rgba(0, 0, 0, 0.35), 0 0 70px rgba(139, 38, 53, 0.12);
    overflow: hidden;
}
.calc-summary .report-titlebar { background: rgba(255, 255, 255, 0.035); border-bottom: 1px solid var(--night-line); padding: 0.7rem 1rem; }

.sum-body { padding: 1.4rem 1.5rem 1.6rem; }

.sum-empty {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.9;
    color: var(--night-muted);
}
.sum-empty .t-prompt { color: var(--crimson-bright); font-weight: 700; }

.sum-lines { display: grid; gap: 0.5rem; margin-bottom: 1.2rem; }
.sum-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--night-body);
}
.sum-line .sl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sum-line .sl-val { color: var(--night-text); font-weight: 600; white-space: nowrap; }
.sum-line.sl-mod { color: var(--night-muted); }
.sum-line.sl-mod .sl-val { color: var(--night-body); font-weight: 500; }

.sum-divider { border: none; border-top: 1px dashed var(--night-line-strong); margin: 1.1rem 0; }

.sum-totals { display: grid; gap: 0.9rem; margin-bottom: 1.4rem; }
.sum-total .st-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--night-muted);
    margin-bottom: 0.15rem;
}
.sum-total .st-value {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--night-text);
    letter-spacing: -0.01em;
}
.sum-total .st-value .unit { font-size: 0.72rem; font-weight: 500; color: var(--night-muted); }
.sum-total.st-price .st-value { font-size: 1.35rem; color: var(--crimson-bright); }

.sum-note {
    font-family: var(--font-mono);
    font-size: 0.62rem;
    line-height: 1.7;
    letter-spacing: 0.03em;
    color: var(--night-muted);
    margin-top: 1rem;
}

.calc-summary .btn { width: 100%; }

/* ═══ CLOSING CROSS-PROMO STRIP ═══════════════════════════════ */

.tool-cross {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 2rem 2.4rem;
    box-shadow: var(--shadow-sm);
}
.tool-cross h3 { font-size: 1.3rem; margin-bottom: 0.35rem; }
.tool-cross p { font-size: 0.94rem; color: var(--ink-muted); max-width: 52ch; }

/* ═══ RESPONSIVE ══════════════════════════════════════════════ */

@media (max-width: 1080px) {
    .calc-grid { grid-template-columns: 1fr; }
    .calc-summary { position: static; }
}

@media (max-width: 720px) {
    .tool-card { padding: 1.7rem 1.4rem; }
    .report-body { padding: 1.8rem 1.4rem; }

    .quiz-question { min-height: 0; font-size: 1.18rem; }

    .score-row { grid-template-columns: 1fr; gap: 1.6rem; justify-items: center; text-align: center; }
    .score-summary { max-width: none; }

    .domain-row { grid-template-columns: minmax(0, 1fr) 44px; }
    .domain-label { grid-column: 1 / -1; margin-bottom: -0.4rem; }

    .svc-body { padding-left: 1.3rem; }

    .mod-tag { display: none; }

    .report-cta-actions .btn { width: 100%; }
    .tool-cross { padding: 1.6rem 1.4rem; }
}