/* ── Logo SVG ──────────────────────────────────────────────────────────────── */
.logo-svg { display:block; }
.logo-svg .fil3 { fill:#1e293b; }
.dark .logo-svg .fil3 { fill:#FEFEFE; }

/* ── generator.css — component styles for DMARC generator interactive components ──
   Layout and atomic styles use Tailwind utility classes (in dmarc-generator.php).
   This file covers only interactive components that need hover/active states
   and two-column layout that's easier to define once here.
──────────────────────────────────────────────────────────────────────────────── */

/* ── Two-column gen layout ─────────────────────────────────────────────────── */
.gen-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    align-items: start;
}
.gen-preview-col { }
.preview-sticky { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }

/* ── Policy cards ──────────────────────────────────────────────────────────── */
.policy-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.policy-card {
    background: rgb(248 250 252);
    border: 1px solid rgb(226 232 240);
    border-radius: 12px; padding: 14px 10px;
    cursor: pointer; display: flex; flex-direction: column;
    align-items: center; gap: 5px; text-align: center;
    transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.dark .policy-card {
    background: rgb(15 23 42);
    border-color: rgb(30 41 59);
}
.policy-card:hover {
    border-color: rgb(52 211 153);
    background: rgba(52,211,153,.05);
    transform: translateY(-2px);
}
.dark .policy-card:hover {
    background: rgba(52,211,153,.06);
}
.policy-card.active {
    border-color: rgb(52 211 153);
    background: rgba(52,211,153,.07);
    box-shadow: 0 0 0 1px rgba(52,211,153,.2);
}
.dark .policy-card.active {
    border-color: rgb(52 211 153);
    background: rgba(52,211,153,.08);
}
.pc-icon { font-size: 1.3rem !important; }
.pc-name {
    font-family: ui-monospace, monospace;
    font-size: 0.78rem; font-weight: 700;
    color: rgb(16 185 129);
}
.dark .pc-name { color: rgb(52 211 153); }
.pc-desc { font-size: 0.67rem; color: rgb(100 116 139); line-height: 1.3; }
.dark .pc-desc { color: rgb(100 116 139); }

/* ── Toggle group (adkim / aspf) ───────────────────────────────────────────── */
.toggle-group {
    display: flex;
    border: 1px solid rgb(226 232 240);
    border-radius: 10px; overflow: hidden;
}
.dark .toggle-group { border-color: rgb(30 41 59); }

.tgl-btn {
    flex: 1; background: rgb(248 250 252);
    border: none; border-right: 1px solid rgb(226 232 240);
    padding: 10px 14px; font-size: 0.8rem;
    color: rgb(100 116 139); cursor: pointer;
    transition: background 0.15s, color 0.15s;
    text-align: center; font-family: inherit;
}
.dark .tgl-btn {
    background: rgb(15 23 42);
    border-right-color: rgb(30 41 59);
    color: rgb(100 116 139);
}
.tgl-btn:last-child { border-right: none; }
.tgl-btn small { display: block; font-size: 0.68rem; margin-top: 2px; opacity: 0.7; }
.tgl-btn.active {
    background: rgba(79,142,247,.1);
    color: rgb(59 130 246);
    font-weight: 700;
}
.dark .tgl-btn.active {
    background: rgba(96,165,250,.1);
    color: rgb(96 165 250);
}
.tgl-btn:hover:not(.active) { background: rgb(241 245 249); }
.dark .tgl-btn:hover:not(.active) { background: rgb(30 41 59); }

/* ── FO Chips (multi-select) ───────────────────────────────────────────────── */
.fo-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fo-chip {
    background: rgb(248 250 252);
    border: 1px solid rgb(226 232 240);
    border-radius: 99px; padding: 5px 14px;
    font-size: 0.76rem; color: rgb(100 116 139);
    cursor: pointer; font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dark .fo-chip {
    background: rgb(15 23 42);
    border-color: rgb(30 41 59);
    color: rgb(100 116 139);
}
.fo-chip:hover {
    border-color: rgb(96 165 250);
    color: rgb(30 64 175);
}
.dark .fo-chip:hover {
    color: rgb(147 197 253);
}
.fo-chip.active {
    background: rgba(79,142,247,.1);
    border-color: rgb(96 165 250);
    color: rgb(59 130 246);
    font-weight: 600;
}
.dark .fo-chip.active {
    background: rgba(96,165,250,.1);
    color: rgb(147 197 253);
}

/* ── Breakdown rows ────────────────────────────────────────────────────────── */
.bk-row {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px;
    font-size: 0.74rem; padding: 6px 9px; border-radius: 7px;
    background: rgb(248 250 252);
    border: 1px solid rgb(226 232 240);
}
.dark .bk-row {
    background: rgb(15 23 42);
    border-color: rgb(30 41 59);
}
.bk-key {
    font-family: ui-monospace, monospace;
    color: rgb(16 185 129); font-weight: 700;
    word-break: break-all;
}
.dark .bk-key { color: rgb(52 211 153); }
.bk-desc { color: rgb(100 116 139); }
.dark .bk-desc { color: rgb(148 163 184); }

/* ── Policy guidance ───────────────────────────────────────────────────────── */
.gen-guidance { display: none; }
.gen-guidance.guidance-none {
    display: block;
    background: rgb(239 246 255);
    border: 1px solid rgb(191 219 254);
    color: rgb(30 64 175);
}
.dark .gen-guidance.guidance-none {
    background: rgba(59,130,246,.1);
    border-color: rgba(59,130,246,.2);
    color: rgb(147 197 253);
}
.gen-guidance.guidance-quarantine {
    display: block;
    background: rgb(255 251 235);
    border: 1px solid rgb(253 230 138);
    color: rgb(146 64 14);
}
.dark .gen-guidance.guidance-quarantine {
    background: rgba(245,158,11,.1);
    border-color: rgba(245,158,11,.2);
    color: rgb(252 211 77);
}
.gen-guidance.guidance-reject {
    display: block;
    background: rgb(240 253 244);
    border: 1px solid rgb(187 247 208);
    color: rgb(22 101 52);
}
.dark .gen-guidance.guidance-reject {
    background: rgba(34,197,94,.1);
    border-color: rgba(34,197,94,.2);
    color: rgb(134 239 172);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .gen-layout { grid-template-columns: 1fr; }
    .preview-sticky { position: static; }
}
@media (max-width: 480px) {
    .policy-cards { grid-template-columns: 1fr; }
}