/* ==========================================================================
   Phishing Email Simulator (/email-phishing-simulator, the site header's "Email Inbox Simulator")
   The page's own parts on top of the shared Toybox Calm look (assets/css/toybox-calm.css, loaded first by
   _ToyboxCalmHead): the intro cards, the simulator's pickers and fields, the inbox (rail, folders, conversational
   response choices, the email with its preview frame and attachment), the payload modal and the loading veil. Every
   class starts with eis-. Views/Public/PhishingTestTool.cshtml links it in its FinalHeader section with a ?v= cache
   buster from StaticAssetVersion; Scripts/email-inbox-simulator/email-inbox-simulator.js runs the simulator.
   ========================================================================== */

/* ---------- Header ---------- */
/* The H1 is long: a step smaller on phones so the yellow card wraps to two lines, not three */
@media (max-width: 575.98px) { .tc-root .eis-title { font-size: 1.95rem; } }

/* ---------- What it is and how it works ---------- */
.eis-intro { padding-bottom: 56px; }
@media (min-width: 992px) { .eis-intro { padding-bottom: 72px; } }
.tc-root .eis-tile__title { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.65rem); line-height: 1.2; }

/* ---------- The simulator ---------- */
.eis-sim-section { padding-top: 0; }
.tc-root .eis-field { margin: 0; }
.eis-pickers { display: grid; gap: 16px 22px; }
@media (min-width: 992px) { .eis-pickers { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.eis-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 18px; padding-top: 18px; border-top: 2px dashed rgba(47, 42, 79, .25); }
.eis-field--wide { grid-column: 1 / -1; }
@media (min-width: 768px) { .eis-people { grid-template-columns: repeat(4, minmax(0, 1fr)); } .eis-field--wide { grid-column: span 2; } }
@media (min-width: 1200px) { .eis-people { grid-template-columns: 1fr 1fr 1.7fr 1fr 1fr; } .eis-field--wide { grid-column: auto; } }
.tc-root .eis-controls .tc-select { min-height: 52px; }
.eis-note { margin: 0 0 18px; }
.eis-note > span { min-width: 0; }

/* The inbox: a rail of folders (or the conversational response choices) beside the open email */
.eis-inbox { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; border: 3px solid var(--tc-ink); border-radius: 20px; background: #fff; }
@media (min-width: 992px) { .eis-inbox { grid-template-columns: 290px minmax(0, 1fr); } }
.eis-rail { min-width: 0; padding: 16px; background: var(--tc-sky-0); border-bottom: 3px solid var(--tc-ink); }
@media (min-width: 992px) { .eis-rail { padding: 20px 18px; border-bottom: 0; border-right: 3px solid var(--tc-ink); } }
.tc-root .eis-respond { width: 100%; }
.eis-rail__label { margin: 18px 0 8px; padding: 0; font: 700 .8125rem/1.25 var(--tc-display); letter-spacing: .06em; text-transform: uppercase; color: var(--tc-muted); }

/* Folders and labels: a picture of a mail client's, not links. A list down the rail on wide screens; wrapped rows of
   small pills on narrow ones, so the email isn't pushed a screen down */
.eis-folders__group { min-width: 0; }
.eis-folder-list { display: flex; flex-wrap: wrap; gap: 6px; }
.eis-folder { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 4px 11px; border: 2px solid var(--tc-line); border-radius: 999px; background: #fff; font-weight: 600; font-size: .9375rem; line-height: 1.3; color: var(--tc-ink-2); }
.eis-folder > i { font-size: 1.15rem; color: var(--tc-ink); }
.eis-folder--active { border-color: var(--tc-ink); background: var(--tc-butter); color: var(--tc-ink); }
.eis-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; padding: 1px 7px 0; border: 2px solid var(--tc-ink); border-radius: 999px; font: 700 .75rem/1.35 var(--tc-display); color: var(--tc-ink); }
.eis-badge--green { background: var(--tc-mint); }
.eis-badge--red { background: var(--tc-blush); }
.tc-root .eis-dot { font-size: .8rem; color: var(--dot, var(--tc-sky)); }
@media (max-width: 991.98px) {
  .eis-folders { display: grid; gap: 4px; }
  .eis-folders .eis-rail__label { margin-top: 12px; }
}
@media (min-width: 992px) {
  .eis-folder-list { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
  .eis-folder { display: flex; border-color: transparent; background: none; border-radius: 12px; padding: 7px 10px; }
  .eis-folder--active { border-color: var(--tc-ink); background: #fff; }
  .eis-folder .eis-badge { margin-left: auto; }
  .eis-folder--split { margin-top: 9px; padding-top: 11px; border-radius: 0 0 12px 12px; box-shadow: inset 0 2px 0 var(--tc-line); }
}

/* Conversational emails: the response choices as radio cards, then the information list */
.eis-convo { min-width: 0; }
.eis-choices { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.eis-choices > legend { float: left; width: 100%; }
.eis-choices > legend + * { clear: left; }
.eis-choice { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 12px; border: 2px solid var(--tc-ink); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--tc-ink); cursor: pointer; transition: background-color .2s ease; }
.eis-choice:hover { background: var(--tc-sky-1); }
.eis-choice:has(.eis-choice__input:checked) { background: var(--tc-butter); }
.eis-choice:focus-within { outline: 3px solid var(--tc-ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--tc-yellow); }
.tc-root .eis-choice__input { flex: none; width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--tc-ink); }
.tc-root .eis-choice__input:focus-visible { outline: none; box-shadow: none; }
.eis-choice__text { display: grid; gap: 2px; min-width: 0; font-size: .875rem; line-height: 1.45; color: var(--tc-ink-2); }
.eis-choice__title { font: 700 1rem/1.25 var(--tc-display); color: var(--tc-ink); }
.eis-info .eis-rail__label { margin-top: 14px; }
.tc-root .eis-info__list { gap: 9px; margin: 0; }
.tc-root .eis-info__list li { font-size: .875rem; font-weight: 600; }

/* The open email */
.eis-mail { min-width: 0; padding: 16px 10px 18px; }
@media (min-width: 768px) { .eis-mail { padding: 24px 24px 26px; } }
/* On phones the inbox runs to the card's edges, so the email gets every pixel */
@media (max-width: 767.98px) { .eis-inbox { margin: 0 -18px; border-width: 3px 0; border-radius: 0; } }
/* Reserves its line before the script fills it in, so a link to #emailTitle lands in the same place */
.tc-root .eis-mail__subject { min-height: 1.3em; margin: 0 0 14px; font: 700 clamp(1.2rem, 1.1rem + .4vw, 1.4rem)/1.3 var(--tc-display); color: var(--tc-ink); overflow-wrap: anywhere; }
.eis-mail__paper { overflow: hidden; border: 2px solid var(--tc-ink); border-radius: 16px; background: #fff; }
.eis-mail__from { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 2px solid var(--tc-line); }
.tc-root .eis-mail__avatar { flex: none; width: 45px; height: 45px; border: 2px solid var(--tc-ink); border-radius: 50%; object-fit: cover; }
.tc-root .eis-mail__sender { min-width: 0; margin: 0; line-height: 1.35; overflow-wrap: anywhere; }
.eis-mail__name { font-weight: 700; color: var(--tc-ink); }
.eis-mail__name small { font-size: .875rem; font-weight: 600; color: var(--tc-muted); }
.eis-mail__to { display: block; font-size: .875rem; color: var(--tc-muted); }
@media (max-width: 575.98px) {
  .eis-mail__from { gap: 10px; padding: 10px; }
  .tc-root .eis-mail__avatar { width: 36px; height: 36px; }
  .eis-mail__name small { display: block; }
}
/* The narrowest phones: the sender's address gets the avatar's room */
@media (max-width: 399.98px) {
  .tc-root .eis-mail__avatar { display: none; }
  .eis-mail__name small, .eis-mail__to { font-size: .8125rem; }
}
.eis-mail__frame { font-family: Arial, sans-serif; font-size: 14px; line-height: 20px; }
/* The email as it is: an email body is a ~600px table, so on a phone it scrolls inside the frame */
.tc-root .eis-frame { display: block; width: 100%; height: 500px; border: 0; background: #fff; }
@media (min-width: 1200px) { .tc-root .eis-frame { height: 560px; } }

/* The attachment: the file opens the document payload */
.eis-attach { margin-top: 16px; padding: 14px 16px 16px; border: 2px dashed rgba(47, 42, 79, .35); border-radius: 16px; }
.tc-root .eis-attach__label { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font: 700 1.0625rem/1.3 var(--tc-display); color: var(--tc-ink); }
.eis-attach__label > i { font-size: 1.25rem; }
.eis-attach__file { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; min-height: 56px; padding: 8px 16px 8px 10px; border: 2px solid var(--tc-ink); border-radius: 14px; background: #fff; box-shadow: 0 3px 0 var(--tc-ink); font: 600 .9375rem/1.3 var(--tc-body); color: var(--tc-ink); text-align: left; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.eis-attach__file:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--tc-ink); }
.tc-root .eis-attach__file img { flex: none; width: 40px; height: auto; }
.eis-attach__name { min-width: 0; overflow-wrap: anywhere; }

/* ---------- How CanIPhish helps ---------- */
.tc-root .eis-help { grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 768px) { .tc-root .eis-help { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px; } }
.eis-help__icon { display: grid; place-items: center; width: 72px; height: 72px; border: 3px solid var(--tc-deep); border-radius: 22px; background: var(--tc-yellow); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 5px 0 var(--tc-deep); font-size: 2.2rem; color: var(--tc-ink); }
.eis-help p { max-width: 52rem; margin: 0; font-size: 1.125rem; }

/* ---------- The loading veil ---------- */
.eis-loading { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: rgba(234, 246, 255, .55); }
.eis-loading__ring { width: 64px; height: 64px; border: 7px solid rgba(47, 42, 79, .18); border-top-color: var(--tc-ink); border-radius: 50%; animation: eis-spin .9s linear infinite; }
@keyframes eis-spin { to { transform: rotate(360deg); } }

/* ---------- The payload modal (Bootstrap 5's .modal behaviour, this page's look) ---------- */
.eis-modal { --bs-modal-width: 800px; }
@media (min-width: 576px) { .eis-modal .modal-dialog { max-width: 800px; } }
.eis-modal .modal-dialog { padding: 0 8px; }
.tc-root .eis-modal__content { overflow: hidden; padding: 0; border: 3px solid var(--tc-ink); border-radius: 24px; background: #fff; box-shadow: var(--tc-drop-lg); color: var(--tc-ink); }
.eis-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 14px 20px; background: var(--tc-sky-0); border-bottom: 3px solid var(--tc-ink); }
.tc-root .eis-modal__title { margin: 0; font: 700 1.3rem/1.25 var(--tc-display); color: var(--tc-ink); }
.eis-modal__close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 2px solid var(--tc-ink); border-radius: 50%; background: #fff; box-shadow: 0 3px 0 var(--tc-ink); font-size: 1.6rem; color: var(--tc-ink); cursor: pointer; }
.eis-modal__close:hover { background: var(--tc-yellow); }
.eis-modal__body { padding: 18px 16px 22px; }
@media (min-width: 576px) { .eis-modal__body { padding: 22px 24px 26px; } }
.eis-modal__form { margin: 0; }
/* The two pages a phishing link leads to, as a two-way switch */
.eis-seg { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; padding: 4px; border: 2px solid var(--tc-ink); border-radius: 999px; background: var(--tc-sky-0); }
.eis-seg__opt { position: relative; flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0; padding: 8px 14px; border-radius: 999px; font: 600 1rem/1.2 var(--tc-display); color: var(--tc-ink); text-align: center; cursor: pointer; transition: background-color .2s ease; }
.eis-seg__opt:hover { background: #fff; }
.eis-seg__opt:has(.eis-seg__input:checked) { background: var(--tc-yellow); box-shadow: inset 0 0 0 2px var(--tc-ink); }
.eis-seg__opt:focus-within { outline: 3px solid var(--tc-ink); outline-offset: 2px; }
.tc-root .eis-seg__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
@media (max-width: 399.98px) { .eis-seg { border-radius: 18px; } .eis-seg__opt { flex-basis: 100%; } }
.eis-modal__shot { overflow: hidden; margin: 0 0 18px; border: 2px solid var(--tc-ink); border-radius: 14px; background: var(--tc-sky-0); }
.tc-root .eis-modal__shot img { display: block; width: 100%; height: auto; max-height: 400px; object-fit: contain; }
.eis-modal__ctas { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .eis-attach__file:hover { transform: none; }
  .eis-loading__ring { animation: none; }
}