/* Base styles for Cloud Footprint. Populated by subsequent user stories. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--evo-page-bg);
  color: var(--evo-text);
  font-family: var(--evo-font);
  font-weight: var(--evo-font-weight-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--evo-font);
  font-weight: var(--evo-font-weight-headline);
}

p,
li,
span,
label {
  font-weight: var(--evo-font-weight-body);
}

code,
pre,
kbd,
.label,
.tag,
.domain {
  font-family: var(--evo-font-mono);
}

button {
  border-radius: 999px; /* pill shape per the brand doc's CTA chips */
}

input,
select,
textarea {
  border-radius: var(--evo-radius-sm);
}

.card {
  border-radius: var(--evo-radius);
}

.badge {
  border-radius: 999px;
}

button {
  font-family: var(--evo-font);
  font-weight: var(--evo-font-weight-subheadline);
  cursor: pointer;
}

/* Emerald -> Skyline -> Cobalt left-to-right accent gradient */
.gradient-accent {
  background-image: var(--evo-gradient);
}

/* Bright-mode passepartout: a Sand container inset from the page edge that
   holds the header and main content, per the brand doc's web layout guidance.
   Dark mode drops the fill so the page reads as full-bleed Obsidian instead -
   geometry (margin/max-width/radius) stays constant across themes so nothing
   reflows on toggle. */
.passepartout {
  max-width: 1000px;
  margin: 24px auto;
  border-radius: var(--evo-radius-lg);
  overflow: hidden;
  background-color: var(--evo-sand);
}

[data-theme='dark'] .passepartout {
  background-color: transparent;
}

.layout {
  padding: 12px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  background-color: var(--evo-surface);
  border-bottom: 1px solid var(--evo-border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Clearspace = the height of the "o" in the wordmark, on all sides (per the
   brand doc's logo usage rules) - measured off the logo SVG's own letterforms
   at ~70% of the mark's total height. Padding on this wrapper (rather than on
   .evoila-logo itself) keeps that clearspace intact on every side regardless
   of where the logo sits in the header, so neighboring header content never
   crowds it. */
.brand-logo {
  display: flex;
  align-items: center;
  padding: 20px;
}

.evoila-logo {
  height: 28px;
  width: auto;
  display: block;
}

.evoila-logo--dark {
  display: none;
}

[data-theme='dark'] .evoila-logo--light {
  display: none;
}

[data-theme='dark'] .evoila-logo--dark {
  display: block;
}

.brand-divider {
  width: 1px;
  height: 20px;
  background-color: var(--evo-clay);
}

.brand h1 {
  margin: 0;
  font-size: 1.2rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.account-display {
  color: var(--evo-text-muted);
  font-size: 0.9rem;
}

.theme-toggle-btn,
.history-toggle-btn,
.sign-out-btn {
  background-color: transparent;
  color: var(--evo-text);
  border: 1px solid var(--evo-border);
  padding: 6px 16px;
}

.theme-toggle-btn:hover,
.history-toggle-btn:hover,
.sign-out-btn:hover {
  background-color: rgba(var(--evo-text-rgb), 0.06);
  border-color: var(--evo-text);
}

.card {
  background-color: var(--evo-surface);
  border: 1px solid var(--evo-border);
  padding: 10px 18px;
}

.mode-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--evo-border);
}

.mode-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--evo-radius-sm) var(--evo-radius-sm) 0 0;
  margin-bottom: -1px;
  padding: 8px 4px;
  color: var(--evo-text-muted);
  font-family: var(--evo-font-mono);
  font-weight: var(--evo-font-weight-body);
}

.mode-tab.is-active {
  color: var(--evo-text);
  /* Emerald fails 3:1 as a UI-indicator border on the bright-mode surface
     (1.87:1 on White) - --evo-link already flips Skyline/Emerald per theme
     to stay AA-safe here. */
  border-bottom-color: var(--evo-link);
  font-weight: var(--evo-font-weight-subheadline);
}

.mode-tab:hover:not(.is-active) {
  color: var(--evo-text);
  border-bottom-color: var(--evo-text-muted);
}

.mode-tab:focus-visible {
  outline: 2px solid var(--evo-link);
  outline-offset: 2px;
}

/* Global Sales/Technical results toggle (US-006) - sits above the badge row
   on every results view (live scan, history detail, batch expanded rows). */
.view-mode-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}

.view-mode-toggle-btn {
  background: none;
  border: 1px solid var(--evo-border);
  border-radius: var(--evo-radius-sm);
  padding: 4px 12px;
  color: var(--evo-text-muted);
  font-family: var(--evo-font-mono);
  font-weight: var(--evo-font-weight-body);
}

.view-mode-toggle-btn[aria-pressed='true'] {
  background-color: var(--evo-link);
  border-color: var(--evo-link);
  color: var(--evo-obsidian);
  font-weight: var(--evo-font-weight-subheadline);
}

.view-mode-toggle-btn:hover:not([aria-pressed='true']) {
  color: var(--evo-text);
  border-color: var(--evo-text-muted);
}

.view-mode-toggle-btn:focus-visible {
  outline: 2px solid var(--evo-link);
  outline-offset: 2px;
}

.input-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.input-row[hidden],
.batch-row[hidden] {
  display: none;
}

#domain-input {
  flex: 1;
  padding: 8px 14px;
  border: 1px solid var(--evo-border);
  background-color: var(--evo-bg);
  color: var(--evo-text);
}

#domain-input:hover {
  border-color: var(--evo-text);
}

#scan-btn,
#email-file-scan-btn {
  background-color: var(--evo-emerald);
  color: var(--evo-obsidian);
  border: none;
  padding: 8px 20px;
}

#new-scan-btn,
#email-file-new-scan-btn {
  background-color: transparent;
  color: var(--evo-text);
  border: 1px solid var(--evo-border);
  padding: 8px 20px;
}

#scan-btn:hover,
#batch-scan-btn:hover,
#email-file-scan-btn:hover,
.pitch-email-copy-btn:hover {
  filter: brightness(0.9);
}

#new-scan-btn:hover,
#batch-new-scan-btn:hover,
#email-file-new-scan-btn:hover {
  background-color: rgba(var(--evo-text-rgb), 0.06);
  border-color: var(--evo-text);
}

#domain-input:focus-visible,
button:focus-visible {
  outline: 2px solid var(--evo-link);
  outline-offset: 2px;
}

.error-message {
  /* Coral fails AA as body text in bright mode (2.58:1 on Sand) - keep the
     readable text at full text contrast and let the icon carry the color cue. */
  color: var(--evo-text);
  font-family: var(--evo-font-mono);
  margin: 8px 0 0;
}

.error-message::before {
  content: '\2716  ';
  color: var(--evo-coral);
}

.results-panel .label,
.results-panel .domain {
  margin: 0;
}

.results-panel .domain {
  font-size: 1.1rem;
  margin-bottom: 4px;
  /* Lead paragraph of the results summary - SemiBold per the brand doc's
     Bold headline / Light subline / SemiBold lead / Light body hierarchy. */
  font-weight: var(--evo-font-weight-subheadline);
}

.batch-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#batch-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--evo-border);
  background-color: var(--evo-bg);
  color: var(--evo-text);
  font-family: var(--evo-font-mono);
  resize: vertical;
}

#batch-input:hover {
  border-color: var(--evo-text);
}

.batch-row .hint {
  margin: 0;
  color: var(--evo-text-muted);
  font-size: 0.85rem;
}

.ip-range-freshness {
  margin: 4px 0 0;
  color: var(--evo-text-muted);
  font-size: 0.8rem;
}

.batch-file-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.batch-file-row .label {
  margin: 0;
}

.batch-actions {
  display: flex;
  gap: 12px;
}

.batch-results-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

#batch-csv-download-btn {
  background-color: transparent;
  color: var(--evo-text);
  border: 1px solid var(--evo-border);
  padding: 8px 16px;
}

#batch-csv-download-btn:hover {
  background-color: rgba(var(--evo-text-rgb), 0.06);
  border-color: var(--evo-text);
}

#batch-scan-btn {
  background-color: var(--evo-emerald);
  color: var(--evo-obsidian);
  border: none;
  padding: 10px 20px;
}

#batch-new-scan-btn {
  background-color: transparent;
  color: var(--evo-text);
  border: 1px solid var(--evo-border);
  padding: 10px 20px;
}

#batch-input:focus-visible {
  outline: 2px solid var(--evo-link);
  outline-offset: 2px;
}

.warning-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.warning-message {
  /* Marigold fails AA as body text in bright mode (1.11:1 on Sand) - same
     text/icon split as .error-message. */
  color: var(--evo-text);
  font-family: var(--evo-font-mono);
  margin: 0;
}

.warning-message::before {
  content: '\26A0  ';
  color: var(--evo-marigold);
}

.batch-table {
  width: 100%;
  margin-top: 8px;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.batch-table th,
.batch-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--evo-border);
}

.batch-table thead th {
  position: relative;
  padding-right: 22px;
  color: var(--evo-text);
  font-family: var(--evo-font-mono);
  font-weight: var(--evo-font-weight-subheadline);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  user-select: none;
  border-bottom: 2px solid var(--evo-border);
}

.batch-table thead th:hover {
  /* Emerald fails AA as text in bright mode (1.87:1 on White) - --evo-link
     is the theme-safe accent for this kind of interactive-text affordance. */
  color: var(--evo-link);
}

.batch-table thead th:focus-visible {
  outline: 2px solid var(--evo-link);
  outline-offset: 2px;
}

.batch-table thead th::after {
  content: '';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

.batch-table thead th[aria-sort='ascending']::after {
  content: '\25B2';
  color: var(--evo-link);
}

.batch-table thead th[aria-sort='descending']::after {
  content: '\25BC';
  color: var(--evo-link);
}

.batch-table .gap-count {
  font-family: var(--evo-font-mono);
}

.batch-row--expandable {
  cursor: pointer;
}

.batch-row--expandable:hover,
.batch-row--expandable:focus-visible {
  background-color: rgba(var(--evo-text-rgb), 0.04);
}

.batch-row--expandable:focus-visible {
  outline: 2px solid var(--evo-link);
  outline-offset: -2px;
}

.batch-row--expandable[aria-expanded='true'] {
  background-color: rgba(var(--evo-text-rgb), 0.06);
}

.batch-row--failed td {
  border-bottom-color: var(--evo-coral);
}

.batch-row--failed .error-message {
  margin: 6px 0 0;
}

.batch-row-detail td {
  padding: 14px 16px;
  background-color: rgba(var(--evo-text-rgb), 0.03);
  border-bottom: 2px solid var(--evo-border);
}

.batch-detail .email-security-panel,
.batch-detail .pitch-email {
  margin-top: 10px;
}

.priority-tag {
  font-family: var(--evo-font-mono);
  font-size: 0.8rem;
  font-weight: var(--evo-font-weight-subheadline);
  padding: 4px 12px;
  border-radius: 999px;
}

.priority-tag--high {
  background-color: var(--evo-coral);
  color: var(--evo-obsidian);
}

.priority-tag--medium {
  background-color: var(--evo-marigold);
  color: var(--evo-obsidian);
}

.priority-tag--low-zt {
  background-color: var(--evo-emerald);
  color: var(--evo-obsidian);
}

.priority-tag--azure-only {
  background-color: var(--evo-skyline);
  color: var(--evo-obsidian);
}

.priority-tag--not-qualified {
  background-color: var(--evo-clay);
  color: var(--evo-obsidian);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-family: var(--evo-font-mono);
  font-size: 0.85rem;
  font-weight: var(--evo-font-weight-subheadline);
}

.badge-success {
  background-color: var(--evo-emerald);
  color: var(--evo-obsidian);
}

.badge-success::before {
  content: '\2713';
}

.badge-gateway {
  background-color: var(--evo-marigold);
  color: var(--evo-obsidian);
}

.badge-gateway::before {
  content: '\26A0';
}

.badge-neutral {
  background-color: var(--evo-clay);
  color: var(--evo-obsidian);
}

.badge-neutral::before {
  content: '\2013';
}

.badge-fail {
  background-color: var(--evo-coral);
  color: var(--evo-obsidian);
}

.badge-fail::before {
  content: '\2716';
}

/* Purely informational badge (e.g. "IP hosted on Azure", US-006) - visually
   distinct from the pass/fail-style success/gateway/neutral/fail badges
   above since it carries no verdict, just an extra signal. */
.badge-info {
  background-color: var(--evo-lagoon);
  color: var(--evo-obsidian);
}

.badge-info::before {
  content: '\2139';
}

.badge-loading {
  background-color: transparent;
  border: 1px solid var(--evo-border);
  color: var(--evo-text-muted);
}

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--evo-border);
  border-top-color: var(--evo-link);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

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

.check-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--evo-text-muted);
  font-family: var(--evo-font-mono);
  font-size: 0.9rem;
}

.badge-has-tooltip {
  cursor: help;
}

.badge-has-tooltip:hover {
  box-shadow: 0 0 0 2px rgba(var(--evo-text-rgb), 0.35);
}

.badge-has-tooltip:focus-visible {
  outline: 2px solid var(--evo-link);
  outline-offset: 2px;
}

.badge-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 280px;
  padding: 8px 12px;
  background-color: var(--evo-obsidian);
  color: var(--evo-white);
  border: 1px solid var(--evo-clay);
  border-radius: var(--evo-radius-sm);
  font-family: var(--evo-font);
  font-weight: var(--evo-font-weight-body);
  font-size: 0.8rem;
  text-align: left;
  white-space: normal;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 10;
  pointer-events: none;
}

.badge-has-tooltip:hover .badge-tooltip,
.badge-has-tooltip:focus-visible .badge-tooltip,
.badge-has-tooltip.is-tooltip-visible .badge-tooltip {
  visibility: visible;
  opacity: 1;
}

.warning-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 16px;
  background-color: rgba(255, 230, 109, 0.12);
  border: 1px solid var(--evo-marigold);
  /* Marigold fails AA as body text in bright mode - text/icon split as above. */
  color: var(--evo-text);
  border-radius: var(--evo-radius);
  font-family: var(--evo-font-mono);
}

.warning-banner::before {
  content: '\26A0';
  color: var(--evo-marigold);
}

.dkim-section {
  margin-top: 6px;
}

.dkim-section h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
}

.dkim-active {
  font-family: var(--evo-font-mono);
  margin: 4px 0 0;
  font-size: 0.85rem;
}

.dkim-unresolved {
  margin-top: 4px;
  font-family: var(--evo-font-mono);
  color: var(--evo-text-muted);
  font-size: 0.85rem;
}

.dkim-unresolved summary {
  cursor: pointer;
}

.dkim-unresolved ul {
  margin: 4px 0 0;
  padding-left: 20px;
}

.dmarc-section {
  margin-top: 6px;
}

.dmarc-section h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
}

.dmarc-maturity {
  font-family: var(--evo-font-mono);
  margin: 0 0 4px;
  font-size: 0.9rem;
}

.spf-section {
  margin-top: 6px;
}

.spf-section h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
}

/* US-017: the panel-level border/background communicates whether SPF/DKIM/
   DMARC gaps below are framed as confirmed M365 misconfiguration findings
   (Coral) or as Azure-only informational posture (Skyline) - distinct at a
   glance, before reading any check text. */
.email-security-panel {
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: var(--evo-radius);
  border: 1px solid;
}

.email-security-panel h2 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.email-security-panel--findings {
  background-color: rgba(255, 94, 134, 0.08);
  border-color: var(--evo-coral);
}

.email-security-panel--informational {
  background-color: rgba(0, 102, 204, 0.08);
  border-color: var(--evo-skyline);
}

/* A passing check is a compact inline pill (icon+color, label only - there's
   nothing to explain); only failing/warning checks need a full line, since
   only they carry explanation text. Keeping passes compact is what lets a
   mostly-healthy domain's full check set render without pushing the page
   past one screen. */
.check-pass-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 14px;
  margin: 4px 0 0;
}

.check-pass-row .check-pill {
  font-size: 0.8rem;
}

.email-check-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.85rem;
}

.email-check {
  padding-left: 20px;
  position: relative;
  line-height: 1.2;
}

.email-check::before {
  position: absolute;
  left: 0;
}

/* Emerald/Coral/Marigold all fail AA as body text in bright mode (per the
   evoila-brand skill's contrast table, none of the six accents pass on light
   backgrounds) - keep the readable finding text at full text contrast and
   let each state's icon carry the color cue. */
.email-check--pass {
  color: var(--evo-text);
}

.email-check--pass::before {
  content: '\2713';
  color: var(--evo-emerald);
}

.email-check--fail {
  color: var(--evo-text);
}

.email-check--fail::before {
  content: '\2716';
  color: var(--evo-coral);
}

.email-check--warn {
  color: var(--evo-text);
}

.email-check--warn::before {
  color: var(--evo-marigold);
  content: '\26A0';
}

/* US-001: one combined line per failing check (plain-language explanation
   plus a parenthetical technical detail) instead of two separate paragraphs. */
.email-check-explanation {
  margin: 0;
}

/* US-011: our own DNS-based verdict side by side with the receiving mail
   server's Authentication-Results verdict for the same check - a neutral row
   normally, called out with the fail color only when the two disagree. */
.auth-results-compare {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: var(--evo-radius-sm);
  border: 1px solid var(--evo-border);
  font-size: 0.8rem;
}

.auth-results-compare--mismatch {
  border-color: var(--evo-coral);
  background-color: rgba(255, 94, 134, 0.08);
}

.auth-results-item {
  font-family: var(--evo-font-mono);
  color: var(--evo-text-muted);
}

.raw-record {
  margin-top: 6px;
  font-family: var(--evo-font-mono);
  color: var(--evo-text-muted);
  font-size: 0.8rem;
}

.raw-record summary {
  cursor: pointer;
}

.raw-record code {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  background-color: var(--evo-obsidian);
  border: 1px solid var(--evo-clay);
  border-radius: var(--evo-radius-sm);
  color: var(--evo-white);
  white-space: pre-wrap;
  word-break: break-all;
}

.badge-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.raw-signals {
  font-family: var(--evo-font-mono);
  color: var(--evo-text-muted);
  font-size: 0.8rem;
}

/* Single "Show technical details" control for a whole badge row in Sales
   view (US-007) - flex-basis: 100% drops it to its own line below the badge
   cells rather than sitting inline with them. */
.reveal-technical-details {
  flex-basis: 100%;
  align-self: flex-start;
  margin-top: 4px;
  background: none;
  border: 1px solid var(--evo-border);
  border-radius: var(--evo-radius-sm);
  padding: 4px 12px;
  color: var(--evo-link);
  font-family: var(--evo-font-mono);
  cursor: pointer;
}

.reveal-technical-details:hover {
  color: var(--evo-text);
  border-color: var(--evo-text-muted);
}

.raw-signals summary {
  cursor: pointer;
}

.raw-signals-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 6px 0 0;
  padding: 8px 10px;
  background-color: var(--evo-obsidian);
  border: 1px solid var(--evo-clay);
  border-radius: var(--evo-radius-sm);
}

.raw-signals-list dt {
  color: var(--evo-white);
}

.raw-signals-list dd {
  margin: 0;
  color: var(--evo-text-muted-on-dark);
  word-break: break-word;
}

.raw-signals-empty {
  margin: 6px 0 0;
  color: var(--evo-text-muted);
}

.raw-signals-checks {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0 0;
  padding: 8px 10px;
  list-style: none;
  background-color: var(--evo-obsidian);
  border: 1px solid var(--evo-clay);
  border-radius: var(--evo-radius-sm);
}

.raw-signals-check {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 4px 8px;
  align-items: baseline;
}

.raw-signals-check-name {
  color: var(--evo-white);
}

.raw-signals-check-detail {
  grid-column: 1 / -1;
  color: var(--evo-text-muted-on-dark);
  word-break: break-word;
}

/* Icon carries the color cue, text stays at full contrast - see the
   .email-check--pass/fail/warn comment above on accent/AA contrast. */
.raw-signals-check--found .raw-signals-check-status {
  color: var(--evo-emerald);
}

.raw-signals-check--not-found .raw-signals-check-status {
  color: var(--evo-text-muted-on-dark);
}

.raw-signals-check--errored .raw-signals-check-status {
  color: var(--evo-coral);
}

.recon-panel {
  margin-top: 24px;
  padding: 16px;
  background-color: var(--evo-surface);
  border: 1px solid var(--evo-border);
  border-radius: var(--evo-radius);
}

.recon-export-json {
  background: none;
  border: 1px solid var(--evo-border);
  border-radius: var(--evo-radius-sm);
  padding: 4px 12px;
  color: var(--evo-link);
  font-family: var(--evo-font-mono);
  cursor: pointer;
}

.recon-category {
  margin-top: 16px;
}

.recon-findings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.recon-finding {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 8px 10px;
  border: 1px solid var(--evo-border);
  border-radius: var(--evo-radius-sm);
}

.recon-finding-why,
.recon-finding-manual-heading {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  color: var(--evo-text-muted);
}

.recon-finding-manual-queries {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding-left: 20px;
  font-family: var(--evo-font-mono);
  color: var(--evo-text-muted);
}

.recon-finding--high .recon-finding-severity {
  color: var(--evo-coral);
}

.recon-finding--medium .recon-finding-severity {
  color: var(--evo-tangerine);
}

.recon-finding--low .recon-finding-severity {
  color: var(--evo-marigold);
}

.recon-finding--informational .recon-finding-severity {
  color: var(--evo-text-muted);
}

.email-security-skipped {
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid var(--evo-border);
  border-radius: var(--evo-radius);
  color: var(--evo-text-muted);
  font-family: var(--evo-font-mono);
}

.pitch-email {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--evo-border);
}

.pitch-email h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.pitch-email-not-qualified {
  margin: 0;
  padding: 10px 16px;
  border: 1px solid var(--evo-border);
  border-radius: var(--evo-radius);
  color: var(--evo-text-muted);
  font-family: var(--evo-font-mono);
}

.pitch-email-lang-toggle {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.pitch-email-lang-btn {
  background: none;
  border: 1px solid var(--evo-border);
  border-radius: var(--evo-radius-sm);
  padding: 4px 10px;
  color: var(--evo-text-muted);
  font-family: var(--evo-font-mono);
  font-size: 0.85rem;
}

.pitch-email-lang-btn.is-active {
  color: var(--evo-text);
  border-color: var(--evo-link);
  font-weight: var(--evo-font-weight-subheadline);
}

.pitch-email-lang-btn:hover:not(.is-active) {
  color: var(--evo-text);
  border-color: var(--evo-text-muted);
}

.pitch-email-lang-btn:focus-visible {
  outline: 2px solid var(--evo-link);
  outline-offset: 2px;
}

.pitch-email-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
}

.pitch-email-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.pitch-email-textarea {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--evo-border);
  background-color: var(--evo-bg);
  color: var(--evo-text);
  font-family: var(--evo-font-mono);
  font-size: 0.9rem;
  resize: vertical;
}

.pitch-email-textarea--subject {
  resize: none;
}

.pitch-email-textarea:hover {
  border-color: var(--evo-text);
}

.pitch-email-textarea:focus-visible {
  outline: 2px solid var(--evo-link);
  outline-offset: 2px;
}

.pitch-email-copy-btn {
  flex-shrink: 0;
  background-color: var(--evo-emerald);
  color: var(--evo-obsidian);
  border: none;
  padding: 8px 16px;
}

.pitch-email-copy-btn.is-copied {
  background-color: var(--evo-skyline);
  color: var(--evo-white);
}

.pitch-email-mailto {
  margin-top: 10px;
}

.pitch-email-mailto-btn {
  background: none;
  border: 1px solid var(--evo-link);
  border-radius: var(--evo-radius-sm);
  padding: 8px 16px;
  color: var(--evo-link);
  font-family: var(--evo-font-mono);
  font-size: 0.9rem;
}

.pitch-email-mailto-btn:hover {
  background-color: var(--evo-link);
  color: var(--evo-white);
}

.pitch-email-mailto-warning {
  margin: 6px 0 0;
  color: var(--evo-text-muted);
  font-family: var(--evo-font-mono);
  font-size: 0.85rem;
}

.pitch-email-download-note {
  margin: 6px 0 0;
  color: var(--evo-link);
  font-family: var(--evo-font-mono);
  font-size: 0.85rem;
}

/* Scan history slide-in drawer (US-026). Stays in the DOM (rather than
   toggling `hidden`) so its slide transition can animate - visibility
   piggybacks on the same transition to keep it out of the tab order and
   non-interactive while closed, without needing the `[hidden]`+`display`
   override this codebase's other toggled panels require (see the
   Codebase Patterns note at the top of progress.md). */
.history-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  z-index: 90;
}

.history-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}

.history-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(360px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background-color: var(--evo-surface);
  border-left: 1px solid var(--evo-border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.25s ease, visibility 0s linear 0.25s;
  z-index: 91;
}

.history-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.25s ease;
}

.history-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.history-drawer-header h2 {
  margin: 0;
  font-size: 1.05rem;
}

.history-close-btn {
  background: none;
  border: none;
  color: var(--evo-text);
  font-size: 1.3rem;
  line-height: 1;
  padding: 4px 8px;
}

.history-close-btn:hover {
  color: var(--evo-link);
}

.history-drawer-actions {
  display: flex;
  justify-content: flex-end;
}

.history-clear-btn {
  /* Coral text/border on a transparent button fails AA in bright mode (2.58-
     2.92:1) - filled Coral + Obsidian text matches the existing badge/
     priority-tag pattern, which is already contrast-safe in both themes. */
  background-color: var(--evo-coral);
  color: var(--evo-obsidian);
  border: none;
  padding: 6px 14px;
  font-size: 0.85rem;
}

.history-clear-btn:hover {
  filter: brightness(0.9);
}

.history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  flex: 1;
}

.history-empty {
  color: var(--evo-text-muted);
  font-family: var(--evo-font-mono);
  font-size: 0.9rem;
}

.history-entry {
  cursor: pointer;
  padding: 10px 12px;
  border: 1px solid var(--evo-border);
  border-radius: var(--evo-radius);
  background-color: rgba(var(--evo-text-rgb), 0.02);
}

.history-entry:hover,
.history-entry:focus-visible {
  background-color: rgba(var(--evo-text-rgb), 0.05);
}

.history-entry:focus-visible {
  outline: 2px solid var(--evo-link);
  outline-offset: 2px;
}

.history-entry-domain {
  margin: 0;
  font-size: 0.95rem;
}

.history-entry-meta {
  margin: 2px 0 0;
  color: var(--evo-text-muted);
  font-family: var(--evo-font-mono);
  font-size: 0.75rem;
}

.history-entry-signals {
  margin: 4px 0 0;
  font-size: 0.85rem;
}

.history-entry-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}

.history-entry-gaps {
  font-family: var(--evo-font-mono);
  font-size: 0.8rem;
  color: var(--evo-text-muted);
}

.history-entry-delete-btn {
  /* Coral text fails AA in bright mode (2.58:1 on Sand) - the button's own
     wording ("Delete") already conveys the destructive action, so it doesn't
     need to be colored text; --evo-text-muted stays theme-safe at rest. */
  background: none;
  border: none;
  color: var(--evo-text-muted);
  font-size: 0.8rem;
  padding: 2px 6px;
}

.history-entry-delete-btn:hover {
  color: var(--evo-text);
  text-decoration: underline;
}

.history-entry-no-detail {
  margin-top: 12px;
  padding: 10px 16px;
  border: 1px solid var(--evo-border);
  border-radius: var(--evo-radius);
  color: var(--evo-text-muted);
  font-family: var(--evo-font-mono);
}

/* US-009: "Changed since last scan" badge sits below the signals line and
   above the gap/priority footer, in its own row so it doesn't crowd either. */
.history-entry-drift-row {
  margin-top: 6px;
}

/* US-010: "Changes since last scan" detail section - reuses the badge fail/
   warn color cues (via each item's border-left) rather than introducing a
   new color, so it stays visually consistent with the pass/fail conventions
   established for SPF/DKIM/DMARC findings. */
.drift-section {
  margin-top: 16px;
  padding: 12px 16px;
  border: 1px solid var(--evo-border);
  border-radius: var(--evo-radius);
  background-color: rgba(var(--evo-text-rgb), 0.02);
}

.drift-section h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.drift-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.drift-finding {
  padding-left: 10px;
  border-left: 3px solid var(--evo-marigold);
}

.drift-finding-heading {
  margin: 0;
  font-weight: var(--evo-font-weight-subheadline);
}

.drift-finding-plain {
  margin: 2px 0 0;
  color: var(--evo-text-muted);
  font-style: italic;
}

.drift-finding-severity-change {
  margin: 2px 0 0;
  font-family: var(--evo-font-mono);
  font-size: 0.8rem;
  color: var(--evo-text-muted);
}

.resources-panel h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.resources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.resources-list a {
  color: var(--evo-link);
  text-decoration: none;
}

.resources-list a:hover {
  text-decoration: underline;
}

.resources-list a:focus-visible {
  outline: 2px solid var(--evo-link);
  outline-offset: 2px;
}