/*
 * Test Your Knowledge - website UI.
 *
 * Every rule is scoped under .em-tyk and every class is prefixed em-tyk-.
 * The theme's style.css is 7,000+ lines with no build step, and WooCommerce,
 * Tutor LMS and Elementor all render on this site: an unscoped `button {}` or
 * `.card {}` here reaches all of them. Do not add a bare element selector.
 *
 * Sizes and colours follow docs/TEST_YOUR_KNOWLEDGE_WEB_SPEC.md §6, which quotes
 * them from the Flutter screens so the two surfaces match.
 */

.em-tyk {
    --em-tyk-accent: #388E3C;
    --em-tyk-ink: #1a1a1a;
    --em-tyk-muted: rgba(0, 0, 0, .58);
    --em-tyk-line: rgba(0, 0, 0, .12);
    --em-tyk-card: #fff;
    --em-tyk-scaffold: rgba(0, 0, 0, .035);
    --em-tyk-green: #2E7D32;
    --em-tyk-red: #E53935;
    --em-tyk-amber: #FB8C00;

    max-width: 1160px;
    margin: 0 auto;
    /* Negative top margin pulls the wizard up into the gap the theme hero
       leaves below it. The hero (.about-hero) is shared by About, FAQs and
       every interior page and was already tightened once for exactly this
       reason - so it is not ours to shrink again. This claws back our own
       space instead, and step 1 lands on the first screen. */
    padding: 0 16px 64px;
    color: var(--em-tyk-ink);
    font-family: inherit;
}

.em-tyk * { box-sizing: border-box; }

/* Step 1 on one screen.

   The theme hero above this is ~414px of a ~900px viewport before our first
   pixel, which pushed the software tiles below the fold. The hero is shared
   with About/FAQs so it is not ours to change; instead the wizard slides up
   into the padding at the bottom of it, and the tiles get denser. Only from
   840px up: below that the hero is short, the grid is 2 columns and the fold
   is a different question entirely. */
/* The theme wraps page content in .home-section, which carries
   `padding: 72px 24px !important` (style.css ~6988). The theme's own
   `.page-main .page-body { padding-top: 40px }` is meant to soften that after
   the 2026-09-18 hero change, but the !important wins and 72px stays - which is
   the empty band between the banner and step 1 here.

   Collapsed from our side, for this page only, using :has() so nothing outside
   a page actually containing .em-tyk is touched. A page with a long article
   still wants that breathing room; a tool the visitor has to act on does not.

   :has() is unsupported in older Safari/Firefox ESR - those simply keep the
   72px and scroll a little, which is the pre-change behaviour, not a break. */
.em-tyk-page .home-section.page-body {
    padding-top: 18px !important;
    padding-bottom: 28px !important;
}

/* Same job for any context where the body class is not present (an embed of the
   shortcode on another page). :has() is unsupported in older Safari/Firefox ESR;
   there the 72px simply remains, which is the old behaviour, not a break. */
.home-section:has(> .home-container > .page-prose > .em-tyk),
.home-section:has(> .home-container > .em-tyk) {
    padding-top: 18px !important;
    padding-bottom: 28px !important;
}

/* The banner's own lead-out, on this page only. .page-hero gives every interior
   page 34px below the title; with no pill and a one-line subtitle there is
   nothing here that needs it. */
.em-tyk-page .about-hero.page-hero { padding-bottom: 20px; }

@media (min-width: 840px) {
    .em-tyk { margin-top: 0; }
}

/* A short desktop window - a 768px laptop, or any screen giving up a strip to
   the admin bar - tightens the banner further still. */
@media (min-width: 840px) and (max-height: 820px) {
    .em-tyk-page .about-hero.page-hero { padding-top: 104px; padding-bottom: 14px; }
    .em-tyk-page .home-section.page-body { padding-top: 10px !important; }
}

/* Content column caps, mirroring the app's breakpoints (spec §6.5). */
@media (min-width: 600px)  { .em-tyk { max-width: 720px;  padding-left: 20px; padding-right: 20px; } }
@media (min-width: 840px)  { .em-tyk { max-width: 880px;  padding-left: 24px; padding-right: 24px; } }
@media (min-width: 1200px) { .em-tyk { max-width: 1040px; } }
@media (min-width: 1600px) { .em-tyk { max-width: 1160px; } }

.em-tyk [hidden] { display: none !important; }

.em-tyk-sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Buttons ─────────────────────────────────────────────────────────── */

.em-tyk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    padding: 13px 20px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--em-tyk-ink);
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, opacity .15s ease;
}

.em-tyk-btn:disabled,
.em-tyk-btn[disabled] { opacity: .42; cursor: not-allowed; }

.em-tyk-btn-primary {
    background: var(--em-tyk-accent);
    color: #fff;
    border-color: var(--em-tyk-accent);
}

.em-tyk-btn-primary:not(:disabled):hover { filter: brightness(.94); color: #fff; }

.em-tyk-btn-outline { border-color: var(--em-tyk-line); }
.em-tyk-btn-outline:not(:disabled):hover { background: var(--em-tyk-scaffold); }

.em-tyk-btn-text {
    padding: 8px 10px;
    font-size: 12.5px;
    color: var(--em-tyk-muted);
}

.em-tyk-btn-text:not(:disabled):hover { background: var(--em-tyk-scaffold); }

.em-tyk-btn-block { width: 100%; }

.em-tyk-btn-danger { color: var(--em-tyk-red); }

.em-tyk :focus-visible {
    outline: 2px solid var(--em-tyk-accent);
    outline-offset: 2px;
}

/* ─── Empty / noscript ────────────────────────────────────────────────── */

.em-tyk-empty {
    text-align: center;
    padding: 56px 20px;
    border: 1px solid var(--em-tyk-line);
    border-radius: 18px;
    margin-top: 24px;
}

.em-tyk-empty i { font-size: 34px; color: var(--em-tyk-accent); }
.em-tyk-empty h2 { font-size: 20px; font-weight: 800; margin: 14px 0 10px; }
.em-tyk-empty p { font-size: 14px; line-height: 1.7; opacity: .8; max-width: 520px; margin: 0 auto 18px; }

/* ─── Step indicator ──────────────────────────────────────────────────── */

.em-tyk-steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.em-tyk-bars { display: flex; gap: 6px; flex: 1; }

.em-tyk-bar {
    height: 4px;
    flex: 1;
    border-radius: 999px;
    background: var(--em-tyk-line);
    transition: background .2s ease;
}

.em-tyk-bar.is-on { background: var(--em-tyk-accent); }

.em-tyk-step-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--em-tyk-muted);
    white-space: nowrap;
}

/* ─── Panel headers ───────────────────────────────────────────────────── */

.em-tyk-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }

.em-tyk-back {
    flex: none;
    width: 38px; height: 38px;
    border-radius: 12px;
    border: 1px solid var(--em-tyk-line);
    background: transparent;
    color: var(--em-tyk-ink);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.em-tyk-back:disabled { opacity: .4; cursor: not-allowed; }
.em-tyk-back:not(:disabled):hover { background: var(--em-tyk-scaffold); }

/* The theme styles article prose inside .page-prose: h2 gets 46px of top
   margin, 27px type and a green underline bar via ::after. That is right for a
   written page and wrong for a wizard step label, and it was adding ~46px of
   dead space above "Which software?" plus a rule under it. Re-stated here with
   the wrapper in the selector so it wins on specificity, and the ::after is
   switched off. */
.em-tyk-h,
.page-prose .em-tyk .em-tyk-h {
    font-size: 21px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 4px;
    letter-spacing: -.3px;
    color: inherit;
}

.page-prose .em-tyk .em-tyk-h::after { content: none; display: none; }

/* The theme also gives .page-prose p a 20px bottom margin and its h2/h3 large
   top margins. Reset them for UNCLASSED elements only - :not([class]) - because
   a blanket `.page-prose .em-tyk p` would score 0,2,1 and beat every one of our
   own single-class component rules (.em-tyk-foot, .em-tyk-overall, .em-tyk-plan
   and the rest), silently flattening the results screen. */
.page-prose .em-tyk p:not([class]) { margin: 0; }
.page-prose .em-tyk h2:not([class]),
.page-prose .em-tyk h3:not([class]) { margin: 0; font-size: inherit; color: inherit; }
.page-prose .em-tyk h2::after,
.page-prose .em-tyk h3::after { content: none; display: none; }
.em-tyk-subtitle { font-size: 13px; line-height: 1.55; color: var(--em-tyk-muted); margin: 0; }

/* ─── Step 1: software grid ───────────────────────────────────────────── */

.em-tyk-softgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

/* 4 across on a desktop: 8 softwares in two rows, both above the fold. */
@media (min-width: 840px) {
    .em-tyk-softgrid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
    .em-tyk-soft { padding: 12px; }
    .em-tyk-soft.is-on { padding: 11px; }
    .em-tyk-soft-icon { width: 36px; height: 36px; font-size: 17px; margin-bottom: 8px; }
}

.em-tyk-soft {
    text-align: left;
    padding: 14px;
    border-radius: 18px;
    border: 1px solid var(--em-tyk-line);
    background: var(--em-tyk-card);
    cursor: pointer;
    font: inherit;
    color: inherit;
    transition: border-color .15s ease, transform .15s ease;
}

.em-tyk-soft:hover { transform: translateY(-2px); }

/* 2px in the software's own accent, set inline as --em-tyk-tile. */
.em-tyk-soft.is-on {
    border: 2px solid var(--em-tyk-tile, var(--em-tyk-accent));
    padding: 13px;
}

.em-tyk-soft-icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 10px;
}

.em-tyk-soft-name { font-size: 14.5px; font-weight: 800; display: block; }
.em-tyk-soft-tag { font-size: 10.5px; color: var(--em-tyk-muted); display: block; margin-top: 3px; line-height: 1.4; }

/* ─── Step 2: sub-topic list ──────────────────────────────────────────── */

.em-tyk-filter {
    width: 100%;
    font: inherit;
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--em-tyk-line);
    margin-bottom: 12px;
    background: var(--em-tyk-card);
    color: inherit;
}

.em-tyk-list { display: flex; flex-direction: column; gap: 8px; }

.em-tyk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 16px 15px;
    border-radius: 12px;
    border: 1px solid var(--em-tyk-line);
    background: var(--em-tyk-card);
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.em-tyk-row:hover { background: var(--em-tyk-scaffold); }
.em-tyk-row-label { flex: 1; font-size: 14px; font-weight: 600; }
.em-tyk-row > i { color: var(--em-tyk-accent); font-size: 15px; }
.em-tyk-row-chev { color: var(--em-tyk-muted); font-size: 13px; }

.em-tyk-none { font-size: 13px; color: var(--em-tyk-muted); padding: 18px 2px; }

/* ─── Step 3: level ───────────────────────────────────────────────────── */

.em-tyk-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
}

.em-tyk-levels { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.em-tyk-level {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    text-align: left;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid var(--em-tyk-line);
    background: var(--em-tyk-card);
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.em-tyk-level.is-on {
    border: 2px solid var(--em-tyk-tile, var(--em-tyk-accent));
    padding: 15px;
}

.em-tyk-radio {
    flex: none;
    width: 20px; height: 20px;
    margin-top: 1px;
    border-radius: 999px;
    border: 2px solid var(--em-tyk-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.em-tyk-level.is-on .em-tyk-radio { border-color: var(--em-tyk-tile, var(--em-tyk-accent)); }

.em-tyk-radio::after {
    content: '';
    width: 10px; height: 10px;
    border-radius: 999px;
    background: var(--em-tyk-tile, var(--em-tyk-accent));
    transform: scale(0);
    transition: transform .15s ease;
}

.em-tyk-level.is-on .em-tyk-radio::after { transform: scale(1); }

.em-tyk-level-name { font-size: 15px; font-weight: 800; display: block; }
.em-tyk-level-desc { font-size: 12.5px; color: var(--em-tyk-muted); display: block; margin-top: 4px; line-height: 1.5; }

.em-tyk-foot { font-size: 11.5px; color: var(--em-tyk-muted); line-height: 1.6; margin: 0 0 16px; }

/* ─── Loading ─────────────────────────────────────────────────────────── */

.em-tyk-loading { text-align: center; padding: 64px 20px; }

.em-tyk-spin {
    width: 38px; height: 38px;
    border-radius: 999px;
    border: 3px solid var(--em-tyk-line);
    border-top-color: var(--em-tyk-accent);
    margin: 0 auto 18px;
    animation: em-tyk-spin .8s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .em-tyk-spin { animation-duration: 2.4s; }
    .em-tyk-soft:hover { transform: none; }
}

.em-tyk-loading-title { font-size: 16.5px; font-weight: 800; margin: 0 0 6px; }
.em-tyk-loading-meta { font-size: 13px; font-weight: 600; color: var(--em-tyk-accent); margin: 0; }

/* ─── Error banner ────────────────────────────────────────────────────── */

.em-tyk-error {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(239, 83, 80, .10);
    border: 1px solid rgba(239, 83, 80, .35);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 18px;
}

.em-tyk-error > i { color: #EF5350; font-size: 16px; line-height: 1.3; }
.em-tyk-error-msg { flex: 1; font-size: 12.5px; line-height: 1.55; margin: 0; }

.em-tyk-retry {
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #EF5350;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0 2px;
    white-space: nowrap;
}

/* ─── Quiz ────────────────────────────────────────────────────────────── */

.em-tyk-quiz-head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--em-tyk-card);
    padding: 12px 0 0;
    margin-bottom: 18px;
}

.em-tyk-quiz-bar { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; }

.em-tyk-close {
    flex: none;
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 1px solid var(--em-tyk-line);
    background: transparent;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.em-tyk-close:disabled { opacity: .4; cursor: not-allowed; }

.em-tyk-quiz-titles { flex: 1; min-width: 0; }
.em-tyk-quiz-n { font-size: 16px; font-weight: 800; display: block; }

.em-tyk-quiz-meta {
    font-size: 10.5px;
    color: var(--em-tyk-muted);
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.em-tyk-progress { height: 3px; background: var(--em-tyk-line); border-radius: 999px; overflow: hidden; }
.em-tyk-progress-fill { height: 100%; background: var(--em-tyk-accent); transition: width .2s ease; }

/* The question column is capped narrower than the page - it is reading text. */
.em-tyk-qwrap { max-width: 640px; margin: 0 auto; }
@media (min-width: 840px) { .em-tyk-qwrap { max-width: 720px; } }

.em-tyk-qcard {
    border: 1px solid var(--em-tyk-line);
    border-radius: 16px;
    padding: 18px;
    background: var(--em-tyk-card);
    margin-bottom: 14px;
}

.em-tyk-qcard-inner { border: 0; padding: 0; margin: 0; }

.em-tyk-qn { font-size: 15px; font-weight: 800; color: var(--em-tyk-accent); }
.em-tyk-qtext { font-size: 15px; font-weight: 600; line-height: 1.45; }

.em-tyk-opts { display: flex; flex-direction: column; gap: 10px; }

.em-tyk-opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--em-tyk-line);
    background: var(--em-tyk-card);
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.em-tyk-opt:hover { background: var(--em-tyk-scaffold); }

.em-tyk-opt.is-on {
    background: rgba(56, 142, 60, .10);
    border: 2px solid var(--em-tyk-accent);
    padding: 13px;
}

.em-tyk-optbadge {
    flex: none;
    width: 26px; height: 26px;
    border-radius: 999px;
    border: 1.5px solid var(--em-tyk-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.em-tyk-opt.is-on .em-tyk-optbadge {
    background: var(--em-tyk-accent);
    border-color: var(--em-tyk-accent);
    color: #fff;
}

.em-tyk-opt-text { flex: 1; font-size: 14px; line-height: 1.45; padding-top: 3px; }
.em-tyk-opt.is-on .em-tyk-opt-text { font-weight: 700; }

/* Bottom bar */
.em-tyk-bottom { margin-top: 18px; border-top: 1px solid var(--em-tyk-line); padding-top: 14px; }

.em-tyk-bottom-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.em-tyk-count { font-size: 11.5px; font-weight: 600; color: var(--em-tyk-muted); text-align: center; }
.em-tyk-clear { color: #EF5350; }
.em-tyk-bottom-row2 { display: flex; gap: 10px; }
.em-tyk-bottom-row2 .em-tyk-btn { flex: 1; }

/* ─── Modal ───────────────────────────────────────────────────────────── */

.em-tyk-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, .45);
    padding: 0;
}

@media (min-width: 640px) { .em-tyk-modal { align-items: center; padding: 24px; } }

.em-tyk-sheet {
    background: var(--em-tyk-card);
    color: var(--em-tyk-ink);
    width: 100%;
    max-width: 520px;
    max-height: 86vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    padding: 20px;
}

@media (min-width: 640px) { .em-tyk-sheet { border-radius: 20px; } }

.em-tyk-sheet-title { font-size: 17px; font-weight: 800; margin: 0 0 6px; }
.em-tyk-sheet-sub { font-size: 12.5px; color: var(--em-tyk-muted); margin: 0 0 16px; line-height: 1.55; }

.em-tyk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }

.em-tyk-chip {
    width: 42px; height: 42px;
    border-radius: 12px;
    border: 1px solid var(--em-tyk-line);
    background: transparent;
    color: var(--em-tyk-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.em-tyk-chip.is-answered { background: rgba(56, 142, 60, .16); color: var(--em-tyk-accent); border-color: transparent; }
.em-tyk-chip.is-current { border: 2px solid var(--em-tyk-accent); }

.em-tyk-sheet-actions { display: flex; gap: 10px; }
.em-tyk-sheet-actions .em-tyk-btn { flex: 1; }

/* ─── Results ─────────────────────────────────────────────────────────── */

.em-tyk-score {
    text-align: center;
    border: 1px solid var(--em-tyk-line);
    border-radius: 18px;
    padding: 24px 18px;
    margin-bottom: 16px;
}

.em-tyk-score-meta {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--em-tyk-muted);
    margin: 0 0 16px;
}

.em-tyk-ring { position: relative; width: 128px; height: 128px; margin: 0 auto 14px; }
.em-tyk-ring svg { transform: rotate(-90deg); display: block; }

.em-tyk-ring-mid {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.em-tyk-ring-score { font-size: 27px; font-weight: 800; line-height: 1.1; }
.em-tyk-ring-pct { font-size: 13px; font-weight: 700; }

.em-tyk-grade {
    display: inline-block;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 12.5px;
    font-weight: 800;
    margin-bottom: 16px;
}

.em-tyk-tallies { display: flex; justify-content: center; gap: 28px; }
.em-tyk-tally-n { font-size: 20px; font-weight: 800; display: block; }
.em-tyk-tally-l { font-size: 11px; font-weight: 600; color: var(--em-tyk-muted); display: block; margin-top: 2px; }

.em-tyk-warn {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(251, 140, 0, .09);
    border: 1px solid rgba(251, 140, 0, .25);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 16px;
}

.em-tyk-warn > i { color: var(--em-tyk-amber); font-size: 16px; }
.em-tyk-warn p { font-size: 12.5px; line-height: 1.55; margin: 0; }

.em-tyk-eyebrow {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--em-tyk-muted);
    margin: 26px 0 12px;
}

.em-tyk-feedback { margin-bottom: 8px; }

.em-tyk-disclaim {
    font-size: 11.5px;
    font-style: italic;
    line-height: 1.6;
    color: var(--em-tyk-muted);
    margin: 0 0 12px;
}

.em-tyk-overall {
    background: rgba(56, 142, 60, .07);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.6;
    margin: 0 0 16px;
}

.em-tyk-fb-h { font-size: 12.5px; font-weight: 800; margin: 0 0 10px; }
.em-tyk-fb-h.is-good { color: var(--em-tyk-green); }
.em-tyk-fb-h.is-bad { color: var(--em-tyk-red); }

.em-tyk-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }

.em-tyk-tag {
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 6px 13px;
    line-height: 1.4;
}

.em-tyk-tag.is-good { background: rgba(46, 125, 50, .10); border: 1px solid rgba(46, 125, 50, .28); color: var(--em-tyk-green); }
.em-tyk-tag.is-bad { background: rgba(229, 57, 53, .10); border: 1px solid rgba(229, 57, 53, .28); color: var(--em-tyk-red); }

.em-tyk-plan { font-size: 13px; line-height: 1.6; color: var(--em-tyk-muted); margin: 0 0 8px; }

/* Question breakdown */
.em-tyk-q {
    border: 1px solid var(--em-tyk-line);
    border-radius: 14px;
    margin-bottom: 8px;
    overflow: hidden;
}

.em-tyk-q > summary {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 14px;
    cursor: pointer;
    list-style: none;
}

.em-tyk-q > summary::-webkit-details-marker { display: none; }

.em-tyk-q-badge {
    flex: none;
    width: 30px; height: 30px;
    border-radius: 999px;
    background: rgba(56, 142, 60, .14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.em-tyk-q-title {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.em-tyk-q-body { padding: 0 14px 14px; }

.em-tyk-ans { display: flex; gap: 10px; margin-bottom: 8px; font-size: 13px; line-height: 1.5; }
.em-tyk-ans-l { flex: none; width: 104px; font-weight: 600; color: var(--em-tyk-muted); }
.em-tyk-ans-v { flex: 1; }
.em-tyk-ans-v.is-good { color: var(--em-tyk-green); font-weight: 600; }
.em-tyk-ans-v.is-bad { color: var(--em-tyk-red); font-weight: 600; }
.em-tyk-ans-v.is-skip { color: var(--em-tyk-muted); }

.em-tyk-qnote {
    background: var(--em-tyk-scaffold);
    border-radius: 10px;
    padding: 11px 13px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--em-tyk-muted);
    margin-top: 10px;
}

.em-tyk-privacy {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(56, 142, 60, .07);
    border-radius: 14px;
    padding: 15px;
    margin: 22px 0 20px;
}

.em-tyk-privacy > i { color: var(--em-tyk-accent); font-size: 16px; }
.em-tyk-privacy p { font-size: 12.5px; line-height: 1.6; margin: 0; }
.em-tyk-privacy strong { color: var(--em-tyk-accent); font-weight: 800; }

.em-tyk-actions { display: flex; flex-direction: column; gap: 10px; }

.em-tyk-app-card {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid var(--em-tyk-line);
    border-radius: 16px;
    padding: 16px;
    margin-top: 26px;
}

.em-tyk-app-card > i { font-size: 26px; color: var(--em-tyk-accent); }
.em-tyk-app-card div { flex: 1; }
.em-tyk-app-card h3 { font-size: 14.5px; font-weight: 800; margin: 0 0 4px; }
.em-tyk-app-card p { font-size: 12.5px; line-height: 1.55; color: var(--em-tyk-muted); margin: 0; }

@media (max-width: 520px) {
    .em-tyk-app-card { flex-direction: column; align-items: flex-start; }
}

/* ─── Toast ───────────────────────────────────────────────────────────── */

.em-tyk-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 100001;
    background: #222;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    padding: 12px 18px;
    border-radius: 12px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

/* ─── Print: this is the PDF (spec §7) ────────────────────────────────── */

@media print {
    .em-tyk-print-only { display: block !important; }

    /* Everything that is not the report. The page chrome is the theme's, so
       these selectors have to reach outside .em-tyk - they are print-only. */
    body > header,
    body > footer,
    header.site-header,
    footer.site-footer,
    .em-tyk-quiz-head,
    .em-tyk-actions,
    .em-tyk-app-card,
    .em-tyk-modal,
    .em-tyk-toast,
    .em-tyk-steps { display: none !important; }

    .em-tyk { max-width: none; padding: 0; color: #000; }

    .em-tyk-q { break-inside: avoid; page-break-inside: avoid; border-color: #bbb; }
    .em-tyk-q > summary { cursor: default; }
    .em-tyk-score, .em-tyk-privacy, .em-tyk-overall { break-inside: avoid; page-break-inside: avoid; }

    /* <details> collapse on paper otherwise - the report needs every answer. */
    .em-tyk-q[open] .em-tyk-q-body, .em-tyk-q .em-tyk-q-body { display: block !important; }
    .em-tyk-q-title { -webkit-line-clamp: unset; display: block; }
}

.em-tyk-print-only { display: none; }

/* ─── Print report block, built only when the user downloads ──────────── */

.em-tyk-report { font-size: 12px; line-height: 1.5; }
.em-tyk-report-eyebrow { font-size: 9px; font-weight: 800; letter-spacing: 2px; color: #217346; margin: 0 0 4px; }
.em-tyk-report-title { font-size: 19px; font-weight: 800; margin: 0 0 10px; }
.em-tyk-report-rule { border: 0; border-top: 1px solid #217346; margin: 0 0 12px; }

.em-tyk-report-meta { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 16px; }
.em-tyk-report-meta div { min-width: 90px; }
.em-tyk-report-meta dt { font-size: 8px; font-weight: 800; letter-spacing: 1px; color: #666; margin: 0 0 2px; }
.em-tyk-report-meta dd { font-size: 11px; font-weight: 700; margin: 0; }

.em-tyk-report-score { background: #F1F6F2; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; }
.em-tyk-report-score-l { font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #666; margin: 0 0 4px; }
.em-tyk-report-score-n { font-size: 26px; font-weight: 800; color: #217346; margin: 0; }
.em-tyk-report-score-p { font-size: 12px; font-weight: 700; margin: 2px 0 10px; }
.em-tyk-report-score-t { display: flex; gap: 22px; font-size: 11px; }

.em-tyk-report-h { font-size: 11px; font-weight: 800; letter-spacing: 1px; margin: 16px 0 8px; }
.em-tyk-report-pre { font-size: 10.5px; font-style: italic; line-height: 1.55; margin: 0 0 8px; }
.em-tyk-report-cols { display: flex; gap: 22px; margin: 10px 0; }
.em-tyk-report-cols > div { flex: 1; }
.em-tyk-report-cols h4 { font-size: 10px; font-weight: 800; margin: 0 0 5px; }
.em-tyk-report-cols li { font-size: 10.5px; line-height: 1.5; }
.em-tyk-report-legend { font-size: 10px; color: #444; margin: 0 0 10px; }

.em-tyk-report-q { border: 1px solid #ccc; border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; break-inside: avoid; page-break-inside: avoid; }
.em-tyk-report-q-h { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 7px; }
.em-tyk-report-q-t { font-size: 11.5px; font-weight: 700; line-height: 1.45; }

.em-tyk-report-chip { flex: none; font-size: 8.5px; font-weight: 800; letter-spacing: .5px; padding: 3px 8px; border-radius: 999px; }
.em-tyk-report-chip.is-correct { background: #E3F1E4; color: #2E7D32; }
.em-tyk-report-chip.is-incorrect { background: #FBE4E3; color: #E53935; }
.em-tyk-report-chip.is-skipped { background: #EEE; color: #666; }

.em-tyk-report-o { font-size: 10.5px; line-height: 1.6; margin: 0; font-family: inherit; white-space: pre-wrap; }
.em-tyk-report-o .is-correct { color: #2E7D32; font-weight: 700; }
.em-tyk-report-o .is-chosen { color: #E53935; font-weight: 700; }
.em-tyk-report-a { font-size: 10.5px; line-height: 1.6; margin: 6px 0 0; }
.em-tyk-report-n { font-size: 10.5px; line-height: 1.55; color: #444; margin: 5px 0 0; }
.em-tyk-report-foot { font-size: 9.5px; color: #666; margin-top: 18px; border-top: 1px solid #ddd; padding-top: 8px; }