/* ==========================================================================
   Spot The Phish Quiz (/free-phishing-quiz)
   The page's own parts on top of the shared Toybox Calm look (assets/css/toybox-calm.css, loaded first by
   _ToyboxCalmHead): the quiz card (progress, the sticky answer bar, feedback, tips), the mock Outlook inbox the emails
   show in, the result, and the three dialogs. Every class starts with spq-. Views/SEO/SpotPhishingQuiz.cshtml links it
   in its FinalHeader section with a ?v= cache buster from StaticAssetVersion; Scripts/spot-the-phish-quiz/
   spot-the-phish-quiz.js runs the quiz.
   ========================================================================== */

/* ---------- The quiz card ---------- */
.spq-quiz { max-width: 1080px; margin: 0 auto; }
.spq-quiz__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.tc-root .spq-quiz__title { margin: 0; }
.spq-progress { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 6px 14px 5px; border: 2px solid var(--tc-ink); border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--tc-ink); font: 600 1rem/1.2 var(--tc-display); color: var(--tc-ink); white-space: nowrap; }
.spq-progress__label { color: var(--tc-muted); }
.spq-progress b { font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .spq-quiz__body.tc-card__body { padding: 18px 12px 22px; } }

.tc-root .spq-question { margin: 0 0 16px; font: 600 clamp(1.2rem, 1.05rem + .6vw, 1.5rem)/1.3 var(--tc-display); color: var(--tc-ink); text-wrap: balance; }

/* The answer bar: the two answers, the feedback once answered and Next. It stays in view under the site header
   while the email below it scrolls past, so the answers are always to hand. When an explanation makes it more than
   half the screen tall, the script pins it back in place (--static) so it can't cover the email or its own Next */
.spq-dock { position: sticky; top: 86px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px; background: #fff; border: 3px solid var(--tc-ink); border-radius: 22px; box-shadow: 0 4px 0 var(--tc-ink); scroll-margin-top: 96px; }
.spq-dock--static { position: relative; top: auto; }
@media (max-width: 479.98px) { .spq-dock { gap: 10px; padding: 8px; border-radius: 20px; } }
.spq-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; flex: 1 1 420px; min-width: 0; }
.spq-answer { --c: #fff; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 56px; margin: 0; padding: 10px 14px 9px; border: 3px solid var(--tc-ink); border-radius: 16px; background-color: var(--c); background-image: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%); box-shadow: 0 4px 0 var(--tc-ink); font: 700 1.125rem/1.15 var(--tc-display); color: var(--tc-ink); text-align: center; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, opacity .2s ease; -webkit-tap-highlight-color: transparent; }
.spq-answer i { flex: none; font-size: 1.45rem; }
.spq-answer--legit { --c: var(--tc-mint); }
.spq-answer--phish { --c: var(--tc-blush); }
.spq-answer:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--tc-ink); }
.spq-answer--legit:hover { --c: #BFF0D4; }
.spq-answer--phish:hover { --c: #FFCBC2; }
.spq-answer:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tc-ink); }
.spq-answer[disabled] { cursor: default; opacity: .5; transform: none; box-shadow: 0 4px 0 var(--tc-ink); }
/* Once answered: the right answer in green, a wrong pick in coral (the feedback says which in words) */
.spq-answer[disabled].spq-answer--correct { --c: var(--tc-green); opacity: 1; }
.spq-answer[disabled].spq-answer--wrong { --c: var(--tc-coral); opacity: 1; }
@media (max-width: 479.98px) { .spq-answer { flex-direction: column; gap: 2px; min-height: 64px; padding: 8px 8px 7px; font-size: 1rem; } }

.spq-feedback { flex: 1 1 100%; align-items: flex-start; margin: 0; }
.tc-root .spq-feedback p { margin: 0; color: var(--tc-ink); line-height: 1.5; }
.spq-feedback b { font-family: var(--tc-display); }
@media (max-width: 479.98px) { .spq-feedback { padding: 12px; } .spq-feedback > i { display: none; } }
.spq-next { flex: 0 0 auto; margin-left: auto; }
@media (max-width: 575.98px) { .spq-next { flex: 1 1 100%; } }

/* ---------- Tips and Personalize: plain disclosure rows ---------- */
.spq-details { margin: 0 0 18px; border: 2px dashed rgba(47, 42, 79, .35); border-radius: 18px; background: rgba(255, 255, 255, .7); }
.spq-details[open] { border-style: solid; border-color: var(--tc-ink); background: var(--tc-sky-0); }
.spq-details__toggle { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 16px; border-radius: 16px; cursor: pointer; list-style: none; font: 600 1rem/1.25 var(--tc-display); color: var(--tc-ink-2); }
.spq-details__label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: rgba(47, 42, 79, .3); }
.spq-details__toggle::-webkit-details-marker { display: none; }
.spq-details__toggle::marker { content: ""; }
.spq-details__toggle i { font-size: 1.25rem; color: var(--tc-rust); }
.spq-details__toggle::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.spq-details[open] > .spq-details__toggle::after { transform: translateY(2px) rotate(-135deg); }
.spq-details__toggle:hover { color: var(--tc-ink); }
.spq-details__toggle:hover .spq-details__label { text-decoration-color: var(--tc-coral); }
.spq-details__body { padding: 8px 16px 16px; }
.spq-tips__title { margin: 0 0 8px; font: 700 .8125rem/1.25 var(--tc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }
.spq-tips__list { margin: 0; }
.spq-tips__list b { color: var(--tc-ink); }
.spq-mono { padding: 1px 5px; border-radius: 6px; background: #fff; border: 1px solid var(--tc-line); color: var(--tc-ink); overflow-wrap: anywhere; }
/* On the narrowest phones the example domains fit whole on a line (breaking anywhere stays the last resort) */
@media (max-width: 359.98px) { .spq-mono { padding: 1px 3px; font-size: .8125em; } }
.spq-personalize__fields { display: grid; gap: 0 18px; }
@media (min-width: 768px) { .spq-personalize__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- The mock inbox: Outlook's neutral palette, so it reads as a real mail client, in an ink frame ---------- */
.spq-inbox { overflow: hidden; border: 3px solid var(--tc-ink); border-radius: 20px; background: #fff; box-shadow: var(--tc-drop); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; }
.spq-inbox__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px; background: #f3f2f1; border-bottom: 1px solid #d6d6d6; }
.spq-inbox__tool { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; margin: 0; padding: 4px 12px; border: 1px solid #d6d6d6; border-radius: 6px; background: #fff; font: 400 13px/1.2 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; cursor: pointer; }
.spq-inbox__tool i { font-size: 16px; color: #0078d4; }
.spq-inbox__tool:hover { background: #e8e8e8; }
@media (max-width: 379.98px) { .spq-inbox__toolbar { gap: 4px; padding: 6px; } .spq-inbox__tool { gap: 3px; padding: 4px 6px; } .spq-inbox__tool i { font-size: 15px; } }
.spq-inbox__body { display: flex; min-height: 600px; }

.spq-inbox__side { flex: none; width: 190px; padding: 10px 0; background: #faf9f8; border-right: 1px solid #e1dfdd; font-size: 13px; }
@media (max-width: 991.98px) { .spq-inbox__side { display: none; } }
.spq-inbox__heading { margin: 0; padding: 8px 14px 4px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6e6e6e; }
.spq-folders { margin: 0; padding: 0; }
.spq-folder { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; margin: 0; padding: 5px 14px 5px 11px; border: 0; border-left: 3px solid transparent; background: none; font: 400 13px/1.3 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; text-align: left; cursor: pointer; transition: background-color .15s ease; }
@media (pointer: coarse) { .spq-folder { min-height: 44px; } }
.spq-folder i { width: 18px; font-size: 15px; text-align: center; }
.spq-folder:hover { background: #edebe9; }
.spq-folder--active { cursor: default; background: #e8e6e4; border-left-color: #0078d4; font-weight: 600; color: #005a9e; }
.spq-folder--active:hover { background: #e8e6e4; }
.spq-badge { margin-left: auto; padding: 1px 7px; border-radius: 10px; background: #0078d4; font-size: 10px; font-weight: 600; line-height: 1.4; color: #fff; }
.spq-badge--muted { background: #6e6e6e; }
.spq-inbox__divider { margin: 6px 14px; border: 0; border-top: 1px solid #e1dfdd; }

.spq-inbox__pane { display: flex; flex-direction: column; flex: 1; min-width: 0; background: #fff; }
.spq-inbox__subject { padding: 14px 20px 8px; border-bottom: 1px solid #f0f0f0; font-size: 19px; font-weight: 600; line-height: 1.3; color: #1a1a1a; overflow-wrap: anywhere; }
.spq-inbox__subject:empty { min-height: 50px; }
.spq-inbox__sender { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #f0f0f0; }
.tc-root .spq-inbox__avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.spq-inbox__from { display: flex; flex-direction: column; min-width: 0; }
.spq-inbox__name { font-size: 14px; font-weight: 600; line-height: 1.35; color: #1a1a1a; overflow-wrap: anywhere; }
/* A long address breaks anywhere rather than leaving its closing bracket on a line of its own */
.spq-inbox__addr { word-break: break-all; }
.spq-inbox__to { font-size: 12px; line-height: 1.4; color: #6e6e6e; overflow-wrap: anywhere; }
.spq-inbox__mail { flex: 1; padding: 14px 20px; }
.spq-inbox__frame { display: block; width: 100%; height: 480px; border: 0; }
@media (max-width: 575.98px) {
  .spq-inbox__subject { padding: 12px 12px 8px; font-size: 17px; }
  .spq-inbox__sender { padding: 10px 12px; }
  .spq-inbox__mail { padding: 8px 0; }
  .spq-inbox__body { min-height: 0; }
  .spq-inbox__attach { padding: 10px 12px; }
}
.spq-inbox__attach { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-top: 1px solid #e1dfdd; background: #faf9f8; font-size: 13px; }
.spq-inbox__attach > i { font-size: 16px; color: #6e6e6e; }
.spq-inbox__chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 44px; margin: 0; padding: 5px 10px; border: 1px solid #d6d6d6; border-radius: 6px; background: #fff; font: 400 13px/1.2 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #333; text-align: left; overflow-wrap: anywhere; cursor: pointer; transition: background-color .15s ease; }
.spq-inbox__chip:hover { background: #edebe9; }
.tc-root .spq-inbox__chip img { width: auto; height: 18px; }

/* ---------- The result ---------- */
.spq-results { max-width: 44rem; margin: 0 auto; padding: 8px 0 4px; text-align: center; }
.tc-root .spq-results__title { margin: 0 0 8px; font: 700 clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem)/1.1 var(--tc-display); color: var(--tc-ink); }
.spq-results__score { margin: 0 0 16px; font-size: 1.1875rem; color: var(--tc-ink-2); }
.spq-results__score b { font: 700 1.35em/1 var(--tc-display); color: var(--tc-ink); font-variant-numeric: tabular-nums; }
/* One dot per question: green right, coral wrong */
.spq-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 22px; }
.spq-dot { width: 22px; height: 22px; border: 2px solid var(--tc-ink); border-radius: 50%; background: var(--tc-blush); }
.spq-dot--right { background: var(--tc-green); }
.spq-dot--wrong { background: var(--tc-coral); }
.spq-verdict { margin: 0 0 24px; padding: 16px 18px; text-align: left; }
.spq-verdict > i { font-size: 1.8rem; line-height: 1.1; }
.spq-verdict__text { flex: 1; min-width: 0; }
.tc-root .spq-verdict__message { margin: 0 0 4px; font: 700 1.25rem/1.3 var(--tc-display); color: var(--tc-ink); }
.tc-root .spq-verdict__tip { margin: 0; color: var(--tc-ink-2); }
.spq-restart { margin: 0 auto; }

/* ---------- The three dialogs (native <dialog>) ---------- */
.spq-dialog { width: min(560px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); margin: auto; padding: 0; border: 0; background: transparent; color: var(--tc-ink); overflow: visible; }
.spq-dialog::backdrop { background: rgba(15, 12, 44, .6); }
.spq-dialog__box { max-height: calc(100vh - 40px); overflow: auto; background: #fff; border: 3px solid var(--tc-ink); border-radius: 24px; box-shadow: 0 6px 0 var(--tc-ink); }
.spq-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 12px 22px; background: var(--tc-sky-0); border-bottom: 3px solid var(--tc-ink); }
.tc-root .spq-dialog__title { margin: 0; font: 700 1.5rem/1.2 var(--tc-display); color: var(--tc-ink); }
.spq-dialog__x { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0 0 3px; border: 2px solid var(--tc-ink); border-radius: 50%; background: #fff; box-shadow: 0 3px 0 var(--tc-ink); font: 700 1.6rem/1 var(--tc-display); color: var(--tc-ink); cursor: pointer; transition: background-color .2s ease; }
.spq-dialog__x:hover { background: var(--tc-yellow); }
.spq-dialog__body { padding: 20px 22px 6px; font-size: 1.0625rem; color: var(--tc-ink-2); }
.tc-root .spq-dialog__body p { margin: 0 0 .75em; }
.spq-dialog__body b { color: var(--tc-ink); }
.spq-dialog__foot { display: flex; justify-content: flex-end; padding: 8px 22px 24px; }

/* ---------- What you'll learn: icon cards whose text is the old list ---------- */
.tc-root .spq-learn .tc-tile p { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--tc-ink); }

@media (prefers-reduced-motion: reduce) {
  .spq-answer:hover, .spq-answer:active { transform: none; }
  .spq-details__toggle::after { transition: none; }
}