/* Shark info card and styled informational sections. Same visual language as recipe.css; tokens can be overridden per site. */
/* Icons: Tabler Icons 3.19.0 (MIT), https://tabler.io/icons */
.sag-info-card, .sag-info-section {
    --sag-info-accent: var(--sag-recipe-accent, #c2410c);
    --sag-info-accent-strong: #9a3412;
    --sag-info-accent-soft: #fff1e6;
    --sag-info-ink: #2a1f1a;
    --sag-info-text: #4a3d35;
    --sag-info-muted: #7a6a60;
    --sag-info-border: #efe4da;
    --sag-info-surface: #fbf6f0;
    --sag-info-easy: #15803d;
    --sag-info-easy-bg: #ecfdf3;
    --sag-info-medium: #b45309;
    --sag-info-medium-bg: #fffbeb;
    --sag-info-pro: #b91c1c;
    --sag-info-pro-bg: #fef2f2;
}

/* ---------- Card ---------- */
.sag-info-card {
    container-type: inline-size;
    position: relative;
    margin: 36px 0;
    padding: clamp(18px, 3vw, 28px);
    background: #fff;
    border: 1px solid var(--sag-info-border);
    border-radius: 22px;
    color: var(--sag-info-ink);
    font-family: inherit;
    line-height: 1.55;
    overflow-wrap: break-word;
    box-sizing: border-box;
}
.sag-info-card *, .sag-info-card *::before, .sag-info-card *::after { box-sizing: border-box; }
.sag-info-card p { margin: 0; }
.sag-info-card ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.sag-info-card li { margin: 0; }
.sag-info-card li::marker { content: none; }
.sag-info-card li::before { content: none; }
.sag-info-card dl, .sag-info-card dd { margin: 0; padding: 0; }
.sag-info-card dt, .sag-info-card dd { text-decoration: none; border: 0; }
.sag-info-card figure { margin: 0 0 18px; }
.sag-info-card img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 0; border-radius: 16px; box-shadow: none; }
.sag-info-card .sag-info-card__eyebrow {
    display: inline-block; margin: 0 0 14px !important; padding: 5px 12px; border-radius: 999px;
    background: var(--sag-info-accent-soft); color: var(--sag-info-accent-strong);
    font-size: .74em; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase;
}
.sag-info-card__title { margin: 22px 0 12px !important; font-size: 1.12em; font-weight: 700; line-height: 1.3; color: var(--sag-info-ink); }

/* Shared icon helper: a masked square painted with currentColor. */
.sag-info-chip dt::before, .sag-info-card__checklist li::before, .sag-info-card__profile::before, .sag-info-card__notice::before, .sag-info-card__warning-title::before,
.sag-info--troubleshooting.sag-info-section h2:first-of-type::before {
    content: ""; display: inline-block; flex: none; background: currentColor;
    -webkit-mask: var(--sag-info-icon) center / contain no-repeat; mask: var(--sag-info-icon) center / contain no-repeat;
}

/* Chips (guide, procedure) */
.sag-info-card__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
.sag-info-card--procedure .sag-info-card__chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sag-info-chip { flex: 1 1 auto; min-width: 120px; padding: 11px 14px; border: 1px solid var(--sag-info-border); border-radius: 14px; background: var(--sag-info-surface); }
.sag-info-chip dt { display: flex; align-items: center; gap: 6px; font-size: .7em; font-weight: 600; line-height: 1.3; letter-spacing: .06em; text-transform: uppercase; color: var(--sag-info-muted); white-space: nowrap; }
.sag-info-chip dt::before { width: 14px; height: 14px; color: var(--sag-info-accent); }
.sag-info-chip dd { margin-top: 3px; font-size: 1.05em; font-weight: 700; line-height: 1.3; color: var(--sag-info-ink); }
.sag-info-chip.is-unverified dd { font-size: .9em; font-weight: 500; font-style: italic; color: var(--sag-info-muted); }
.sag-info-chip--difficulty[data-level="easy"] dd { color: var(--sag-info-easy); }
.sag-info-chip--difficulty[data-level="medium"] dd { color: var(--sag-info-medium); }
.sag-info-chip--difficulty[data-level="hard"] dd { color: var(--sag-info-pro); }
.sag-info-chip--difficulty { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z'/%3E%3Cpath d='M15 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z'/%3E%3Cpath d='M9 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z'/%3E%3Cpath d='M4 20h14'/%3E%3C/svg%3E"); }
.sag-info-chip--time { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); }
.sag-info-chip--steps { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11 6h9'/%3E%3Cpath d='M11 12h9'/%3E%3Cpath d='M12 18h8'/%3E%3Cpath d='M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4'/%3E%3Cpath d='M6 10v-6l-2 2'/%3E%3C/svg%3E"); }
.sag-info-chip--where { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0'/%3E%3Cpath d='M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z'/%3E%3C/svg%3E"); }
.sag-info-chip--cost { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M7 9m0 2a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2z'/%3E%3Cpath d='M14 14m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0'/%3E%3Cpath d='M17 9v-2a2 2 0 0 0 -2 -2h-10a2 2 0 0 0 -2 2v6a2 2 0 0 0 2 2h2'/%3E%3C/svg%3E"); }
.sag-info-chip--deadline { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12z'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M4 11h16'/%3E%3Cpath d='M11 15h1'/%3E%3Cpath d='M12 15v3'/%3E%3C/svg%3E"); }
.sag-info-chip--mode { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 5a1 1 0 0 1 1 -1h16a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-16a1 1 0 0 1 -1 -1v-10z'/%3E%3Cpath d='M7 20h10'/%3E%3Cpath d='M9 16v4'/%3E%3Cpath d='M15 16v4'/%3E%3C/svg%3E"); }

/* Checklists (guide needs, procedure documents) */
.sag-info-card .sag-info-card__checklist { display: grid; gap: 8px 22px; padding: 14px 16px !important; border-radius: 16px; background: var(--sag-info-surface); }
.sag-info-card__checklist li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.45; color: var(--sag-info-text); }
.sag-info-card__checklist li::before {
    width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; background: var(--sag-info-accent);
    --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
    -webkit-mask: none; mask: none; background: var(--sag-info-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.sag-info-card__checklist--documents li::before {
    border-radius: 5px; background: var(--sag-info-accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z'/%3E%3Cpath d='M9 9l1 0'/%3E%3Cpath d='M9 13l6 0'/%3E%3Cpath d='M9 17l6 0'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* Comparison */
.sag-info-card__options { display: flex; align-items: stretch; gap: 12px; }
.sag-info-card__option {
    flex: 1 1 0; min-width: 0; padding: 18px 16px; text-align: center;
    border: 1px solid var(--sag-info-border); border-radius: 18px; background: var(--sag-info-surface);
}
.sag-info-card__name { font-size: 1.2em; font-weight: 800; line-height: 1.25; color: var(--sag-info-ink); }
.sag-info-card__tagline { margin-top: 6px !important; font-size: .88em; line-height: 1.45; color: var(--sag-info-muted); }
.sag-info-card__vs {
    flex: none; align-self: center; display: flex; align-items: center; justify-content: center;
    /* min-width + padding: a translated label ("versus", "contra") grows into a pill instead of overflowing */
    min-width: 46px; height: 46px; padding: 0 10px; border-radius: 999px; background: var(--sag-info-accent); color: #fff;
    font-size: .85em; font-weight: 800; letter-spacing: .04em; box-shadow: 0 0 0 6px var(--sag-info-accent-soft);
}
.sag-info-card .sag-info-card__profiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.sag-info-card__profile { position: relative; padding: 16px 16px 16px 64px; padding-inline: 64px 16px; border: 1px solid var(--sag-info-border); border-radius: 16px; background: #fff; }
.sag-info-card .sag-info-card__profile::before {
    content: ""; position: absolute; top: 16px; inset-inline-start: 16px; width: 36px; height: 36px; border-radius: 50%;
    background: var(--sag-info-accent-soft) var(--sag-info-icon) center / 20px no-repeat; -webkit-mask: none; mask: none;
}
.sag-info-card__profile-title { font-weight: 700; line-height: 1.35; color: var(--sag-info-ink); }
.sag-info-card__profile-text { margin-top: 4px !important; font-size: .92em; line-height: 1.5; color: var(--sag-info-text); }
.sag-info-icon--generic { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M8 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0'/%3E%3Cpath d='M6 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3C/svg%3E"); }
.sag-info-icon--budget { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M17 8v-3a1 1 0 0 0 -1 -1h-10a2 2 0 0 0 0 4h12a1 1 0 0 1 1 1v3m0 4v3a1 1 0 0 1 -1 1h-12a2 2 0 0 1 -2 -2v-12'/%3E%3Cpath d='M20 12v4h-4a2 2 0 0 1 0 -4h4'/%3E%3C/svg%3E"); }
.sag-info-icon--performance { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M13 3l0 7l6 0l-8 11l0 -7l-6 0l8 -11'/%3E%3C/svg%3E"); }
.sag-info-icon--beginner { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M2 9a10 10 0 1 0 20 0'/%3E%3Cpath d='M12 19a10 10 0 0 1 10 -10'/%3E%3Cpath d='M2 9a10 10 0 0 1 10 10'/%3E%3Cpath d='M12 4a9.7 9.7 0 0 1 2.99 7.5'/%3E%3Cpath d='M9.01 11.5a9.7 9.7 0 0 1 2.99 -7.5'/%3E%3C/svg%3E"); }
.sag-info-icon--expert { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z'/%3E%3C/svg%3E"); }
.sag-info-icon--family { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0'/%3E%3Cpath d='M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0'/%3E%3Cpath d='M17 10h2a2 2 0 0 1 2 2v1'/%3E%3Cpath d='M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0'/%3E%3Cpath d='M3 13v-1a2 2 0 0 1 2 -2h2'/%3E%3C/svg%3E"); }
.sag-info-icon--time { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); }
.sag-info-icon--quality { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 9m-6 0a6 6 0 1 0 12 0a6 6 0 1 0 -12 0'/%3E%3Cpath d='M12 15l3.4 5.89l1.598 -3.233l3.598 .232l-3.4 -5.889'/%3E%3Cpath d='M6.802 12l-3.4 5.89l3.598 -.233l1.598 3.232l3.4 -5.889'/%3E%3C/svg%3E"); }
.sag-info-icon--travel { --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M16 10h4a2 2 0 0 1 0 4h-4l-4 7h-3l2 -7h-4l-2 2h-3l2 -4l-2 -4h3l2 2h4l-2 -7h3z'/%3E%3C/svg%3E"); }

/* Troubleshooting diagnosis */
.sag-info-card__diagnosis { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; border: 1px solid var(--sag-info-border); border-radius: 16px; overflow: hidden; font-size: .95em; }
.sag-info-card__diagnosis th, .sag-info-card__diagnosis td { padding: 11px 14px; border: 0; text-align: start; vertical-align: middle; background: none; }
.sag-info-card__diagnosis thead th { background: var(--sag-info-surface); color: var(--sag-info-ink); font-size: .78em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.sag-info-card__diagnosis tbody td { border-top: 1px dashed #e6d6c7; color: var(--sag-info-text); }
.sag-info-card__diagnosis tbody td:first-child { font-weight: 700; color: var(--sag-info-ink); }
.sag-info-card__diagnosis td:last-child, .sag-info-card__diagnosis th:last-child { width: 1%; white-space: nowrap; }
.sag-info-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: .8em; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.sag-info-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sag-info-badge--easy { background: var(--sag-info-easy-bg); color: var(--sag-info-easy); }
.sag-info-badge--medium { background: var(--sag-info-medium-bg); color: var(--sag-info-medium); }
.sag-info-badge--pro { background: var(--sag-info-pro-bg); color: var(--sag-info-pro); }
.sag-info-card__warning { margin-top: 16px; padding: 14px 16px; border: 1px solid #fecaca; border-inline-start: 4px solid var(--sag-info-pro); border-radius: 0; border-start-end-radius: 14px; border-end-end-radius: 14px; background: var(--sag-info-pro-bg); color: #7f1d1d; }
.sag-info-card__warning-title { display: flex; align-items: center; gap: 8px; margin-bottom: 4px !important; font-weight: 700; color: var(--sag-info-pro); }
.sag-info-card__warning-title::before { width: 18px; height: 18px; --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E"); }

/* Procedure notice */
.sag-info-card__notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px !important; padding: 13px 16px; border: 1px solid #fde3c8; border-radius: 14px; background: #fff7ed; font-size: .9em; line-height: 1.5; color: #7a4a2a; }
.sag-info-card__notice::before { width: 20px; height: 20px; margin-top: 1px; color: var(--sag-info-accent); --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M11.46 20.846a12 12 0 0 1 -7.96 -14.846a12 12 0 0 0 8.5 -3a12 12 0 0 0 8.5 3a12 12 0 0 1 -.09 7.06'/%3E%3Cpath d='M15 19l2 2l4 -4'/%3E%3C/svg%3E"); }

@container (min-width: 560px) {
    .sag-info-card__checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 359.98px) {
    .sag-info-card--procedure .sag-info-card__chips { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 519.98px) {
    .sag-info-card__options { flex-direction: column; }
    .sag-info-card__vs { margin: -4px 0; }
}
@container (max-width: 439.98px) {
    .sag-info-card__diagnosis, .sag-info-card__diagnosis tbody, .sag-info-card__diagnosis tr, .sag-info-card__diagnosis td { display: block; width: 100%; }
    .sag-info-card__diagnosis { border: 0; border-radius: 0; overflow: visible; }
    .sag-info-card__diagnosis thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .sag-info-card__diagnosis tr { margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--sag-info-border); border-radius: 14px; }
    .sag-info-card__diagnosis tbody td { padding: 3px 0; border: 0; }
    .sag-info-card__diagnosis td::before { content: attr(data-label); display: block; font-size: .7em; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sag-info-muted); }
    .sag-info-card__diagnosis td:last-child { width: auto; padding-top: 8px; }
    .sag-info-card__diagnosis td:last-child::before { display: none; }
}

/* ---------- Comparison extras: pros and cons, scoreboard, picks, verdict ---------- */
/* Pros and cons inside each option card: plain rows, not the boxed checklist */
.sag-info-card .sag-info-card__option .sag-info-card__checklist { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 10px !important; padding: 0 !important; background: none; text-align: start; font-size: .88em; }
.sag-info-card .sag-info-card__option .sag-info-card__checklist li::before { width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background-size: 11px; }
.sag-info-card .sag-info-card__checklist--pros li::before { background-color: var(--sag-info-easy); }
.sag-info-card .sag-info-card__checklist--cons li::before {
    background: var(--sag-info-pro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M18 6l-12 12'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}
/* One colour per option, the same in the scoreboard and the profile picks */
.sag-info-win { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .82em; font-weight: 700; line-height: 1.5; white-space: normal; }
.sag-info-win--0 { background: var(--sag-info-accent-soft); color: var(--sag-info-accent-strong); }
.sag-info-win--1 { background: #e1f5ee; color: #085041; }
.sag-info-win--2 { background: #eeedfe; color: #3c3489; }
.sag-info-win--3 { background: var(--sag-info-medium-bg); color: #854f0b; }
.sag-info-win--tie { background: #f1efe8; color: #5f5e5a; }
.sag-info-card .sag-info-card__scores { margin: 0 !important; border: 1px solid var(--sag-info-border); border-radius: 14px; overflow: hidden; }
.sag-info-card__scores > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 14px; border-top: 1px solid var(--sag-info-border); }
.sag-info-card__scores > div:first-child { border-top: 0; }
.sag-info-card__scores dt { font-weight: 600; color: var(--sag-info-text); }
.sag-info-card__scores dd { flex: none; max-width: 55%; text-align: end; }
.sag-info-card__profile .sag-info-win { margin-top: 8px; }
.sag-info-card .sag-info-card__verdict { margin-top: 18px; padding: 12px 14px; border-radius: 14px; background: #f1efe8; line-height: 1.55; color: var(--sag-info-ink); }
.sag-info-card__verdict strong { color: var(--sag-info-ink); }

/* ---------- Guide extras: outcome, roadmap, key tip, audience, button ---------- */
.sag-info-card .sag-info-card__outcome { margin: 0 0 16px !important; font-size: 1.08em; line-height: 1.55; color: var(--sag-info-ink); }
/* Two columns in reading order (1-3 | 4-6) */
.sag-info-card .sag-info-card__roadmap { columns: 2; column-gap: 22px; margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: sag-info-road; }
.sag-info-card .sag-info-card__roadmap li { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; break-inside: avoid; counter-increment: sag-info-road; line-height: 1.4; color: var(--sag-info-text); }
.sag-info-card__roadmap li::marker { content: none; }
.sag-info-card .sag-info-card__roadmap li::before {
    content: counter(sag-info-road); display: flex; flex: none; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: -1px;
    border-radius: 50%; background: var(--sag-info-accent); color: #fff; font-size: .78em; font-weight: 700; line-height: 1;
}
.sag-info-card__tip { display: flex; flex-direction: column; gap: 2px; margin-top: 18px; padding: 12px 14px; padding-inline-start: 46px; position: relative; border-radius: 14px; background: var(--sag-info-medium-bg); color: #7c3f0a; line-height: 1.5; }
.sag-info-card__tip::before {
    content: ""; position: absolute; top: 13px; inset-inline-start: 14px; width: 20px; height: 20px; background: var(--sag-info-medium);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7'/%3E%3Cpath d='M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3'/%3E%3Cpath d='M9.7 17l4.6 0'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7'/%3E%3Cpath d='M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3'/%3E%3Cpath d='M9.7 17l4.6 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sag-info-card .sag-info-card__tip-title { font-weight: 700; color: var(--sag-info-medium); }
.sag-info-card .sag-info-card__audience { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px !important; font-size: .95em; line-height: 1.5; color: var(--sag-info-muted); }
.sag-info-card__audience::before {
    content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: var(--sag-info-accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0'/%3E%3Cpath d='M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3Cpath d='M21 21v-2a4 4 0 0 0 -3 -3.85'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M9 7m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0'/%3E%3Cpath d='M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3Cpath d='M21 21v-2a4 4 0 0 0 -3 -3.85'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sag-info-card a.sag-info-card__cta {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; padding: 9px 18px; border-radius: 999px;
    background: var(--sag-info-accent); color: #fff !important; font-size: .92em; font-weight: 700; line-height: 1.3; text-decoration: none !important; box-shadow: none;
}
.sag-info-card a.sag-info-card__cta::after { content: "↓"; }
.sag-info-card a.sag-info-card__cta:hover, .sag-info-card a.sag-info-card__cta:focus-visible { background: var(--sag-info-accent-strong); }
@container (max-width: 479.98px) {
    .sag-info-card .sag-info-card__roadmap { columns: 1; }
}
/* The button's jump leaves room for a sticky theme header */
#sag-guide-steps, #sag-compare-table { scroll-margin-top: 90px; }

/* ---------- Sections generated by the plugin (core/group wrappers) ---------- */
.sag-info-section { container-type: inline-size; }
/* Subheadings: a short accent bar before the text */
/* Block, not flex: with flex every bold or italic word of the title became a separate item with a gap */
.sag-info-section h3 { margin: 1.6em 0 .55em; font-size: 1.15em; line-height: 1.35; }
.sag-info-section h3::before { content: ""; display: inline-block; width: 4px; height: .95em; margin-inline-end: 10px; border-radius: 2px; background: var(--sag-info-accent); vertical-align: -0.1em; }
/* Callout cards (tip, warning, fact): soft background, round icon, first <strong> as the title. The theme's quote
   styles (italics, borders, quote marks) are reset. */
.sag-info-section blockquote[data-kind] {
    --sag-box-bg: #eaf3de; --sag-box-ink: #27500a; --sag-box-strong: #3b6d11;
    --sag-box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7'/%3E%3Cpath d='M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3'/%3E%3Cpath d='M9.7 17l4.6 0'/%3E%3C/svg%3E");
    position: relative; margin: 1.5em 0 !important; padding: 14px 16px 14px 62px !important; padding-inline: 62px 16px !important;
    border: 0 !important; border-radius: 14px; background: var(--sag-box-bg) !important; color: var(--sag-box-ink);
    font-style: normal !important; font-size: .97em; line-height: 1.6; quotes: none; box-shadow: none;
}
.sag-info-section blockquote[data-kind]::before {
    content: "" !important; position: absolute; top: 14px; inset-inline-start: 16px; width: 32px; height: 32px; border-radius: 50%;
    background: var(--sag-box-strong) !important; font-size: 0; line-height: 0;
}
.sag-info-section blockquote[data-kind]::after {
    content: "" !important; position: absolute; top: 21px; inset-inline-start: 23px; width: 18px; height: 18px; background: #fff;
    -webkit-mask: var(--sag-box-icon) center / contain no-repeat; mask: var(--sag-box-icon) center / contain no-repeat;
}
.sag-info-section blockquote[data-kind] p { margin: 0 !important; color: inherit; font-size: inherit; font-style: normal; }
.sag-info-section blockquote[data-kind] p + p { margin-top: 6px !important; }
.sag-info-section blockquote[data-kind] p > strong:first-child { display: block; margin-bottom: 2px; color: var(--sag-box-strong); }
.sag-info-section blockquote[data-kind="warning"] {
    --sag-box-bg: #faeeda; --sag-box-ink: #633806; --sag-box-strong: #ba7517;
    --sag-box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M10.363 3.591l-8.106 13.534a1.914 1.914 0 0 0 1.636 2.871h16.214a1.914 1.914 0 0 0 1.636 -2.87l-8.106 -13.536a1.914 1.914 0 0 0 -3.274 0z'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E");
}
.sag-info-section blockquote[data-kind="warning"] p > strong:first-child { color: #854f0b; }
.sag-info-section blockquote[data-kind="fact"] {
    --sag-box-bg: #e6f1fb; --sag-box-ink: #0c447c; --sag-box-strong: #185fa5;
    --sag-box-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0'/%3E%3Cpath d='M12 9h.01'/%3E%3Cpath d='M11 12h1v4h1'/%3E%3C/svg%3E");
}
/* Pull quote: the main idea, centred and large, between thin rules */
.sag-info-section blockquote[data-kind="quote"] {
    margin: 2em 0 !important; padding: 18px 12px 16px !important; padding-inline: 12px !important; border-radius: 0; background: none !important;
    border-top: 1px solid var(--sag-info-border) !important; border-bottom: 1px solid var(--sag-info-border) !important;
    color: var(--sag-info-ink); text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 1.25em; line-height: 1.5;
}
.sag-info-section blockquote[data-kind="quote"]::before {
    content: "\201C" !important; position: static; display: block; width: auto; height: auto; margin: 0 auto 4px; border-radius: 0;
    background: none !important; color: var(--sag-info-accent); font-size: 2.4em; line-height: .8; font-family: Georgia, serif;
}
.sag-info-section blockquote[data-kind="quote"]::after { content: none !important; }
@media (max-width: 480px) {
    .sag-info-section blockquote[data-kind] { padding: 12px 14px 12px 54px !important; padding-inline: 54px 14px !important; }
    .sag-info-section blockquote[data-kind]::before { top: 12px; inset-inline-start: 14px; width: 28px; height: 28px; }
    .sag-info-section blockquote[data-kind]::after { top: 18px; inset-inline-start: 20px; width: 16px; height: 16px; }
    .sag-info-section blockquote[data-kind="quote"] { padding: 14px 6px !important; padding-inline: 6px !important; font-size: 1.12em; }
}
/* Numbered steps (guide and any steps layout) */
.sag-info-layout--steps ol { list-style: none !important; counter-reset: sag-info-step; margin: 18px 0 !important; padding: 0 !important; }
.sag-info-layout--steps ol > li { position: relative; counter-increment: sag-info-step; margin: 0; padding-inline-start: 54px; padding-bottom: 22px; line-height: 1.65; }
.sag-info-layout--steps ol > li::marker { content: none; }
.sag-info-layout--steps ol > li::before {
    content: counter(sag-info-step); position: absolute; top: -2px; inset-inline-start: 0;
    display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--sag-info-accent); color: #fff; font-size: .92em; font-weight: 700; line-height: 1;
    box-shadow: 0 0 0 5px var(--sag-info-accent-soft);
}
.sag-info-layout--steps ol > li::after { content: ""; position: absolute; top: 42px; bottom: 6px; inset-inline-start: 17px; border-inline-start: 2px dotted #f0cdb5; }
.sag-info-layout--steps ol > li:last-child { padding-bottom: 0; }
.sag-info-layout--steps ol > li:last-child::after { content: none; }
/* Procedure steps read as a timeline of cards */
.sag-info--procedure.sag-info-layout--steps ol > li { padding: 14px 16px; padding-inline-start: 58px; margin-bottom: 12px; border: 1px solid var(--sag-info-border); border-radius: 16px; background: #fff; }
.sag-info--procedure.sag-info-layout--steps ol > li::before { top: 14px; inset-inline-start: 14px; width: 30px; height: 30px; font-size: .82em; box-shadow: none; }
.sag-info--procedure.sag-info-layout--steps ol > li::after { top: calc(100% - 2px); bottom: auto; height: 14px; inset-inline-start: 28px; border-inline-start: 2px solid var(--sag-info-accent); }
/* Procedure lists (requirements, documents) read as checklists */
.sag-info--procedure.sag-info-layout--list ul { list-style: none !important; margin: 16px 0 !important; padding: 14px 16px !important; border-radius: 16px; background: var(--sag-info-surface); }
.sag-info--procedure.sag-info-layout--list ul > li { position: relative; margin: 0; padding: 4px 0; padding-inline-start: 30px; }
.sag-info--procedure.sag-info-layout--list ul > li::before {
    content: ""; position: absolute; top: 7px; inset-inline-start: 0; width: 20px; height: 20px; border-radius: 6px;
    background: var(--sag-info-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / 14px no-repeat;
}
/* Other plugin lists: accent bullets (a mistakes list must not look ticked) */
.sag-info-section:not(.sag-info--procedure) ul.wp-block-list > li::marker, .sag-info-section:not(.sag-info--procedure) > ul > li::marker { color: var(--sag-info-accent); }
/* Tables (comparison and any table layout) */
.sag-info-layout--table .wp-block-table, .sag-info-layout--table > table { margin: 18px 0; overflow-x: auto; }
.sag-info-layout--table table { width: 100%; border-collapse: separate !important; border-spacing: 0; border: 1px solid var(--sag-info-border) !important; border-radius: 16px; overflow: hidden; font-size: .95em; }
.sag-info-layout--table th, .sag-info-layout--table td { padding: 12px 14px; border: 0 !important; border-top: 1px solid var(--sag-info-border) !important; text-align: start; vertical-align: top; }
.sag-info-layout--table thead th { border-top: 0 !important; background: var(--sag-info-accent); color: #fff; font-weight: 700; }
.sag-info-layout--table tbody tr:nth-child(even) td { background: var(--sag-info-surface); }
.sag-info-layout--table tbody td:first-child { font-weight: 700; color: var(--sag-info-ink); }
.sag-info-layout--table thead tr:first-child th:first-child { border-start-start-radius: 15px; }
.sag-info-layout--table thead tr:first-child th:last-child { border-start-end-radius: 15px; }
@container (max-width: 599.98px) {
    .sag-info-layout--table table { min-width: 520px; }
}
/* Troubleshooting sections become diagnosis cards */
.sag-info--troubleshooting.sag-info-section { margin: 26px 0; padding: 20px 22px; border: 1px solid var(--sag-info-border); border-inline-start: 4px solid var(--sag-info-accent); border-radius: 18px; background: #fff; }
.sag-info--troubleshooting.sag-info-section h2:first-of-type { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.sag-info--troubleshooting.sag-info-section h2:first-of-type::before {
    width: 26px; height: 26px; color: var(--sag-info-accent);
    --sag-info-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E%3Cpath d='M7 10h3v-3l-3.5 -3.5a6 6 0 0 1 8 8l6 6a2 2 0 0 1 -3 3l-6 -6a6 6 0 0 1 -8 -8l3.5 3.5'/%3E%3C/svg%3E");
}
.sag-info--troubleshooting.sag-info-section > :last-child { margin-bottom: 0; }

@media (max-width: 480px) {
    .sag-info-card { padding: 18px 14px; border-radius: 18px; margin: 28px 0; }
    .sag-info-card__profile { padding-inline: 58px 14px; }
    .sag-info-layout--steps ol > li { padding-inline-start: 46px; }
    .sag-info-layout--steps ol > li::before { width: 30px; height: 30px; }
    .sag-info-layout--steps ol > li::after { top: 36px; inset-inline-start: 14px; }
    .sag-info--troubleshooting.sag-info-section { padding: 16px; }
}

@media print {
    .sag-info-card { border: 1px solid #ddd; padding: 12px; margin: 12px 0; break-inside: avoid; }
    .sag-info-card *, .sag-info-section * { box-shadow: none !important; }
    .sag-info-chip, .sag-info-card__checklist, .sag-info-card__option, .sag-info-card__profile { background: none; }
    .sag-info-card__diagnosis tr, .sag-info-layout--steps ol > li { break-inside: avoid; }
    .sag-info-badge, .sag-info-card__vs, .sag-info-layout--steps ol > li::before, .sag-info-card__checklist li::before { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .sag-info-layout--table table { min-width: 0; }
}