/* ==========================================================================
   Free Email Threat Analyzer (/free-email-threat-analyzer)
   The page's own parts on top of the shared Toybox Calm look (assets/css/toybox-calm.css, loaded first by
   _ToyboxCalmHead): the tool card in the header (drop zone, busy state, examples), the Build EML and Share Results
   dialogs, and the analysis results (Views/Launchpad/_EMLAnalyzerResults.cshtml: the verdict, the panels, tabs,
   tables, code blocks and the HTML preview). Every class starts with eta-.
   Views/Launchpad/EMLAnalyzer.cshtml links it in its FinalHeader section with a ?v= cache buster from
   StaticAssetVersion; Scripts/email-threat-analyzer/email-threat-analyzer.js drives the tool.
   ========================================================================== */

/* ---------- The tool card (in the header) ---------- */
.eta-toolcard { position: relative; overflow: hidden; background: #fff; border: 3px solid var(--tc-ink); border-radius: 28px; box-shadow: var(--tc-drop-lg), 0 30px 60px -24px rgba(33, 28, 90, .4); }
.eta-form { margin: 0; }
/* The card sits in the dark header, whose focus ring is white: on the white card it is the ink ring and yellow halo */
.eta-root .eta-toolcard :focus-visible { outline: 3px solid var(--tc-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--tc-yellow); }
.eta-toolcard__main { padding: 16px; }
@media (min-width: 768px) { .eta-toolcard__main { padding: 26px 28px; } }

/* The drop zone: a dashed panel that turns solid, with a yellow halo, while a file is dragged over it */
.eta-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 16px 26px; border: 3px dashed rgba(47, 42, 79, .38); border-radius: 22px; background: var(--tc-sky-0); text-align: center; cursor: pointer; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
@media (min-width: 768px) { .eta-drop { padding: 38px 28px 34px; } }
.eta-drop:hover { border-color: rgba(47, 42, 79, .6); background: var(--tc-sky-1); }
.eta-drop--over, .eta-drop--over:hover { border-style: solid; border-color: var(--tc-ink); background: var(--tc-sky-1); box-shadow: 0 0 0 6px var(--tc-yellow); }
.eta-drop__icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 0 12px; border: 3px solid var(--tc-ink); border-radius: 22px; background: var(--tc-sky); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 4px 0 var(--tc-ink); font-size: 2.5rem; color: var(--tc-ink); }
.eta-drop--over .eta-drop__icon { background-color: var(--tc-yellow); }
.eta-root .eta-drop__title { margin: 0; font: 700 clamp(1.3rem, 1.12rem + .7vw, 1.65rem)/1.2 var(--tc-display); color: var(--tc-ink); text-wrap: balance; }
.eta-drop__hint { margin: 0 0 18px; font-weight: 600; color: var(--tc-muted); }
.eta-drop__btns { justify-content: center; }
@media (max-width: 479.98px) { .eta-drop__btns { flex-direction: column; align-items: stretch; width: 100%; max-width: 20rem; } }

/* While a request runs: a spinner in the drop zone's place, at the tool's height */
.eta-busy { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-height: 260px; padding: 24px 16px; text-align: center; }
.eta-spinner { display: inline-block; width: 56px; height: 56px; border: 6px solid rgba(47, 42, 79, .18); border-top-color: var(--tc-ink); border-radius: 50%; animation: eta-spin .8s linear infinite; }
@keyframes eta-spin { to { transform: rotate(360deg); } }
.eta-root .eta-busy__text { margin: 0; font: 700 1.25rem/1.3 var(--tc-display); color: var(--tc-ink); }

/* An error notice (the tool's and the builder's); never .alert, which the layout's cookie script shows or removes */
.eta-error { align-items: center; font-weight: 600; }
.eta-error > i { color: #A1242F; }
.eta-toolcard .eta-error { margin-top: 16px; }

/* The examples: a strip under the drop zone (its label says "below") */
.eta-examples { padding: 18px 16px 22px; background: var(--tc-sky-0); border-top: 3px solid var(--tc-ink); text-align: center; }
@media (min-width: 768px) { .eta-examples { padding: 20px 28px 26px; } }
.eta-examples__label { margin: 0 0 12px; font: 600 1rem/1.3 var(--tc-display); color: var(--tc-ink-2); }
.eta-examples__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.eta-example { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 15px 6px; border: 2px solid var(--tc-ink); border-radius: 999px; background: #fff; box-shadow: 0 3px 0 var(--tc-ink); font: 600 .9375rem/1.2 var(--tc-display); color: var(--tc-ink); cursor: pointer; transition: transform .15s ease, background-color .2s ease, box-shadow .15s ease; }
.eta-example:hover { background: var(--tc-yellow); transform: translateY(-2px); box-shadow: 0 5px 0 var(--tc-ink); }
.eta-example:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tc-ink); }

/* ---------- Under the header: the results and the related links ---------- */
.eta-after { padding: 0 0 72px; }
@media (min-width: 992px) { .eta-after { padding-bottom: 96px; } }
.eta-results { padding: 8px 0 0; outline: none; }
.eta-related { margin-top: 0; }
.eta-results:not([hidden]) + .eta-related { margin-top: 48px; }

/* ---------- The results ---------- */
.eta-report { display: grid; gap: 24px; }
.eta-cols { display: grid; gap: 24px; }
@media (min-width: 1200px) { .eta-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }

/* The verdict: the classification and summary, tinted by the classification */
.eta-verdict { --v: var(--tc-sky-1); --va: var(--tc-sky); position: relative; min-width: 0; padding: 18px 16px 24px; background: var(--v); border: 3px solid var(--tc-ink); border-radius: 26px; box-shadow: var(--tc-drop-lg), 0 30px 60px -24px rgba(33, 28, 90, .35); }
@media (min-width: 768px) { .eta-verdict { padding: 22px 28px 30px; } }
.eta-verdict--safe { --v: var(--tc-mint); --va: var(--tc-green); }
.eta-verdict--phish { --v: var(--tc-blush); --va: var(--tc-coral); }
.eta-verdict--spam { --v: var(--tc-butter); --va: var(--tc-yellow); }
.eta-verdict--unknown { --v: var(--tc-sky-1); --va: var(--tc-sky); }
.eta-root .eta-label { margin: 0 0 10px; font: 700 .8125rem/1.25 var(--tc-display); letter-spacing: .08em; text-transform: uppercase; color: var(--tc-ink-2); }
.eta-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 24px; padding: 9px 18px 8px; border: 3px solid var(--tc-ink); border-radius: 16px; background: var(--va); background-image: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 60%); box-shadow: 0 4px 0 var(--tc-ink); font: 700 clamp(1.5rem, 1.3rem + .8vw, 1.9rem)/1.1 var(--tc-display); color: var(--tc-ink); overflow-wrap: anywhere; }
.eta-badge i { font-size: 1.15em; }
.eta-summary { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--tc-ink); }
.eta-recs { margin: 0; }
.eta-recs > li { color: var(--tc-ink); }
@media (min-width: 1200px) { .eta-recs { max-height: 400px; overflow-y: auto; padding-right: 6px; } }

/* Tabs: the family's pill tabs; the HTML preview's Preview/Source switch is a small segmented control */
.eta-tabs { margin-bottom: 20px; }
.eta-tabs .tc-tab { font-weight: 700; }
@media (max-width: 575.98px) { .eta-tabs { gap: 6px; } .eta-tabs .tc-tab { padding: 7px 13px 6px; font-size: .875rem; } }
.eta-seg { display: inline-flex; gap: 4px; margin: 0 0 14px; padding: 3px; border: 2px solid var(--tc-ink); border-radius: 999px; background: #fff; }
.eta-seg__btn { min-height: 44px; padding: 6px 16px 5px; border: 0; border-radius: 999px; background: transparent; font: 600 .9375rem/1.2 var(--tc-display); color: var(--tc-ink-2); cursor: pointer; }
.eta-seg__btn:hover { background: var(--tc-butter); color: var(--tc-ink); }
.eta-seg__btn[aria-selected="true"] { background: var(--tc-ink); color: #fff; }

/* Panels: the headers and the message */
.eta-panel { position: relative; min-width: 0; background: #fff; border: 3px solid var(--tc-ink); border-radius: var(--tc-r); box-shadow: var(--tc-drop); }
.eta-panel__head { display: flex; align-items: center; gap: 12px; padding: 16px 16px 14px; border-bottom: 2px solid var(--tc-line); }
@media (min-width: 768px) { .eta-panel__head { padding: 20px 24px 16px; } }
.eta-panel__ico { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid var(--tc-ink); border-radius: 15px; background: var(--a, var(--tc-sky)); background-image: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 55%); box-shadow: 0 3px 0 var(--tc-ink); font-size: 1.5rem; color: var(--tc-ink); }
.eta-root .eta-panel__title { margin: 0; font: 700 1.375rem/1.2 var(--tc-display); color: var(--tc-ink); }
.eta-panel__body { padding: 16px 16px 20px; }
@media (min-width: 768px) { .eta-panel__body { padding: 22px 24px 26px; } }
.eta-root .eta-subtitle { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font: 700 1.1875rem/1.25 var(--tc-display); color: var(--tc-ink); }
.eta-subtitle i { font-size: 1.3rem; }
.eta-pane > :last-child { margin-bottom: 0; }
.eta-empty { margin: 0 0 16px; color: var(--tc-muted); }

/* Tables: inside a panel, so a lighter frame than .tc-table-wrap */
.eta-table-wrap { margin: 0 0 16px; overflow-x: auto; border: 2px solid var(--tc-ink); border-radius: 14px; background: #fff; -webkit-overflow-scrolling: touch; }
.eta-table-wrap--scroll { max-height: 500px; overflow-y: auto; }
.eta-root .eta-table { min-width: 0; font-size: .9375rem; }
.eta-root .eta-table th, .eta-root .eta-table td { padding: 9px 12px; }
.eta-table td { color: var(--tc-ink); overflow-wrap: anywhere; word-break: break-word; }
.eta-root .eta-table thead th { font-size: .75rem; }
.eta-root .eta-table tbody th { width: 9.5rem; white-space: nowrap; font-family: var(--tc-display); font-weight: 700; }
.eta-table__key { width: 9.5rem; }
.eta-table__num { width: 3rem; }
.eta-table__url { word-break: break-all; }
.eta-root .eta-table--wide { min-width: 520px; }
@media (max-width: 479.98px) { .eta-root .eta-table tbody th { width: auto; white-space: normal; } .eta-table__key { width: auto; } }

.eta-hops { display: flex; align-items: center; gap: 6px; margin: 0 0 14px; font-size: .9375rem; color: var(--tc-ink-2); }
.eta-hops i { font-size: 1.2rem; }
.eta-hops strong { color: var(--tc-ink); }

/* All Headers: a disclosure button over the full header block */
.eta-more { margin: 0; }
.eta-more__toggle { list-style: none; }
.eta-more__toggle::-webkit-details-marker { display: none; }
.eta-more__toggle::marker { content: ""; }
.eta-more[open] .eta-more__toggle { background-color: var(--tc-yellow); }
.eta-more .eta-pre { margin-top: 14px; }

/* Code blocks: the message source, text, raw message and headers */
.eta-root .eta-pre { display: block; margin: 0; max-height: 500px; overflow: auto; padding: 14px 16px; border: 2px solid var(--tc-ink); border-radius: 14px; background: var(--tc-sky-0); font: 500 .875rem/1.6 var(--tc-mono); color: var(--tc-ink); white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.eta-root .eta-pre--headers { max-height: 350px; }

/* The HTML preview: a sandboxed iframe in an ink frame */
.eta-frame { display: block; width: 100%; height: 420px; min-height: 400px; border: 2px solid var(--tc-ink); border-radius: 14px; background: #fff; }
@media (min-width: 992px) { .eta-frame { height: 520px; } }

/* The failure notice and the buttons under the results */
.eta-fail { align-items: center; font-weight: 600; font-size: 1.0625rem; }
.eta-fail > i { color: #A1242F; }
.eta-fail p { margin: 0; }
.eta-actions { justify-content: center; }

/* ---------- Dialogs: Build EML, and Share Results ---------- */
.eta-dialog { width: calc(100% - 24px); max-width: 760px; max-height: calc(100% - 24px); margin: auto; padding: 0; overflow: hidden; border: 3px solid var(--tc-ink); border-radius: 24px; background: #fff; box-shadow: var(--tc-drop-lg), 0 30px 70px -20px rgba(15, 12, 44, .55); color: var(--tc-ink); font-family: var(--tc-body); }
.eta-dialog[open] { display: flex; flex-direction: column; }
.eta-dialog::backdrop { background: rgba(15, 12, 44, .6); }
.eta-dialog--share { max-width: 560px; }
.eta-dialog__box { display: flex; flex-direction: column; min-height: 0; max-height: 100%; flex: 1 1 auto; }
.eta-dialog__head { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 20px; background: var(--tc-sky-0); border-bottom: 3px solid var(--tc-ink); }
@media (min-width: 768px) { .eta-dialog__head { padding: 14px 14px 14px 26px; } }
.eta-root .eta-dialog__title { margin: 0; font: 700 1.5rem/1.2 var(--tc-display); color: var(--tc-ink); }
.eta-dialog__info { display: inline-grid; place-items: center; font-size: 1.35rem; color: var(--tc-muted); cursor: help; }
.eta-dialog__close { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; 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; transition: background-color .2s ease; }
.eta-dialog__close:hover { background: var(--tc-yellow); }
.eta-dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 16px 8px; overscroll-behavior: contain; }
@media (min-width: 768px) { .eta-dialog__body { padding: 22px 26px 10px; } }
.eta-dialog--share .eta-dialog__body { padding-bottom: 22px; }
.eta-dialog__foot { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; padding: 14px 16px 18px; border-top: 2px solid var(--tc-line); }
@media (min-width: 768px) { .eta-dialog__foot { padding: 16px 26px 20px; } }
.eta-dialog .eta-error { margin: 0 0 16px; }

/* The builder's fields: two columns from 768px, the long ones across both */
.eta-builder { display: grid; gap: 0 18px; margin: 0; }
@media (min-width: 768px) { .eta-builder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .eta-builder__wide { grid-column: 1 / -1; } }
.eta-root .eta-builder .tc-label { font-size: .9375rem; letter-spacing: 0; text-transform: none; color: var(--tc-ink); }
.eta-root .eta-builder .tc-textarea { min-height: 112px; }
.eta-root .eta-builder .eta-builder__headers { min-height: 92px; }
.eta-addrow { display: flex; gap: 10px; align-items: center; }
.eta-addrow .tc-input { flex: 1 1 auto; min-width: 0; }
.eta-addrow .tc-btn { flex: none; }
.eta-attachrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* max-content rows: in a height-capped grid, auto rows would shrink to the rows' min-height and squash them */
.eta-list { display: grid; grid-auto-rows: max-content; gap: 6px; max-height: 150px; overflow-y: auto; }
.eta-list:empty { display: none; }
.eta-list__item { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 2px 2px 2px 16px; border: 2px solid var(--tc-ink); border-radius: 26px; background: var(--tc-sky-1); }
/* A pill on one line; a long address that wraps gets a rounded box (not an oval) with room above and below */
.eta-list__text { flex: 1 1 auto; min-width: 0; padding: 6px 0; font-weight: 600; overflow-wrap: anywhere; }
.eta-list__remove { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; font-size: 1.5rem; color: var(--tc-ink); cursor: pointer; }
.eta-list__remove:hover { background: var(--tc-blush); }
/* The list scrolls (overflow clips), so the focus ring sits inside the button rather than around it */
.eta-root .eta-list__remove:focus-visible { outline: 3px solid var(--tc-ink); outline-offset: -3px; box-shadow: none; background: var(--tc-yellow); }

/* The share link and its Copy button */
.eta-copyrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.eta-root .eta-copyrow__input { flex: 1 1 260px; min-width: 0; font-family: var(--tc-body); font-size: .9375rem; }
.eta-copyrow .tc-btn { flex: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .eta-example:hover, .eta-example:active { transform: none; }
  .eta-spinner { animation-duration: 2.4s !important; animation-iteration-count: infinite !important; }
}