/*
 * Resahost — Hosting Diagnostics
 * Brand palette from resahost.net live build (sinipurppura / vihreä / terva / taivas / keltainen / vaalea harmaa)
 * Light mode default (JS asettaa data-theme; fallback "light"), dark via [data-theme="dark"]
 */

/* ─── Google Fonts — Plus Jakarta Sans ──────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── Design tokens — Dark mode (default) ───────────────────────────────────── */
:root {
  /* Resahost.net viralliset brändivärit (poimittu live-buildin CSS-tokeneista 5.8.2026) */
  --brand-sinipurppura: #4f55e2;
  --brand-vihrea: #84eda6;
  --brand-terva: #231f20;
  --brand-taivas: #b0d4ee;
  --brand-keltainen: #f4ea8d;
  --brand-vaalea-harmaa: #f1eeef;

  /* Vanhat aliakset uudelleenmäpätty (muu CSS viittaa näihin) */
  --brand-cream: var(--brand-vaalea-harmaa);
  --brand-ink: var(--brand-terva);
  --brand-navy: var(--brand-sinipurppura);
  --brand-gold: var(--brand-keltainen);
  --brand-amber: var(--brand-vihrea);

  --trust-teal: var(--brand-sinipurppura);
  --trust-teal-hover: var(--brand-amber-light);
  --trust-teal-fg: #ffffff;
  --brand-highlight: var(--brand-vihrea);

  /* Dark mode surface tokens — terva-pohjainen. Harmaasävyt VAIN valkoinen@α
     tervan päällä (Ollin vaatimus: ei uusia hex-värejä edes neutraaleina). */
  --bg: #231f20;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-hover: rgba(255, 255, 255, 0.07);
  --bg-input: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.14);
  --border-focus: #ffffff; /* terva-taustalla valkoinen on ainoa sallittu kontrastiratkaisu */

  /* Text */
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.55);
  --text-on-dark: #ffffff;

  /* Semantic status colors — VAIN 6 virallista Resahost-väriä + terva/valkoinen
     neutraaleina (Ollin vaatimus 3. kerta, Grok-ratkaisu 5.8.2026). Ei
     punaista, ei keksittyjä sävyjä. Kriittinen = käänteinen terva/valkoinen
     -hälytyslaatta (max kontrasti ilman uutta väriä). Muut = brändiväri-
     tintti + terva-teksti, korkeampi opasiteetti tummalla teemalla
     luettavuuden vuoksi (muuten tintti "hukkuu" tummaan pohjaan). */
  --critical: #231f20;
  --critical-bg: #ffffff;
  --high: #231f20;
  --high-bg: rgba(244, 234, 141, 0.55);
  --medium: #231f20;
  --medium-bg: rgba(176, 212, 238, 0.45);
  --low: #ffffff;
  --low-bg: rgba(79, 85, 226, 0.55);
  --safe: #231f20;
  --safe-bg: rgba(132, 237, 166, 0.50);

  /* Accent — brändin sinipurppura (Grok: primary/linkit/napit; vihreä varattu success+hero-CTA-rooliin) */
  --accent: var(--brand-sinipurppura);
  --accent-hover: #ffffff; /* hover tervalla: valkoinen (ei keksittyä sävyä) */
  --accent-fg: #ffffff;

  /* Layout — resahost.net live-tokenit */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;
  --container-max: 1120px;
  --shadow-card: 0 2px 8px rgba(35, 31, 32, 0.25), 0 8px 24px rgba(35, 31, 32, 0.15);

  /* Typography */
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Z-index scale */
  --z-base: 1;
  --z-header: 50;
  --z-theme-toggle: 100;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-toast: 2000;

  /* Header background (with transparency) */
  --header-bg: rgba(35, 31, 32, 0.92);

  /* Card hover border */
  --card-hover-border: rgba(255, 255, 255, 0.14);

  /* Logout btn hover */
  --logout-hover-border: rgba(255, 255, 255, 0.2);
}

/* ─── Light mode tokens — resahost.net live-brändi ──────────────────────────── */
:root[data-theme="light"] {
  --bg: #f1eeef;
  --bg-card: #ffffff;
  --bg-hover: rgba(35, 31, 32, 0.03);
  --bg-input: #ffffff;
  --border: rgba(35, 31, 32, 0.12);
  --border-focus: var(--brand-sinipurppura);

  --text: #231f20;
  --text-muted: rgba(35, 31, 32, 0.55);
  --text-on-dark: #231f20;

  /* Brand-highlight vaaleassa: vihreä (success, hero-CTA-rooli) */
  --signal-zest: var(--brand-vihrea);
  --brand-highlight: var(--brand-vihrea);

  /* Accent — sinipurppura: linkit, napit, CTA:t (Grok-vahvistettu rooli) */
  --accent: #4f55e2;
  --accent-hover: #231f20; /* hover valkoisella: terva (ei keksittyä tummennusta) */
  --accent-fg: #ffffff;

  /* Light mode severity — VAIN 6 virallista väriä + terva/valkoinen. */
  --critical: #ffffff;
  --critical-bg: #231f20;
  --high: #231f20;
  --high-bg: rgba(244, 234, 141, 0.30);
  --medium: #231f20;
  --medium-bg: rgba(176, 212, 238, 0.28);
  --low: #4f55e2;
  --low-bg: rgba(79, 85, 226, 0.14);
  --safe: #231f20;
  --safe-bg: rgba(132, 237, 166, 0.24);

  --shadow-card: 0 2px 8px rgba(35, 31, 32, 0.10), 0 8px 24px rgba(35, 31, 32, 0.08);

  --header-bg: rgba(255, 255, 255, 0.95);
  --card-hover-border: rgba(35, 31, 32, 0.20);
  --logout-hover-border: rgba(35, 31, 32, 0.35);
}

/* ─── Reset & base ──────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Layout helpers ────────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── Theme toggle button ───────────────────────────────────────────────────── */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 20px;
  z-index: var(--z-theme-toggle);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: 1.05rem;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  line-height: 1;
  padding: 0;
  font-family: inherit;
}

.theme-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--card-hover-border);
  color: var(--text);
}

/* ─── Header ────────────────────────────────────────────────────────────────── */
.site-header {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: var(--header-bg);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
a.logo {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.logo-img {
  height: 27px; /* -15% (32px -> 27px) */
  width: auto;
  display: block;
  flex-shrink: 0;
  padding-right: 30px;
}

.logo-tagline {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* ─── Main ──────────────────────────────────────────────────────────────────── */
.site-main {
  flex: 1;
  padding: 56px 0 80px;
}

/* ─── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  text-align: center;
  margin-bottom: 48px;
}

.hero-title {
  font-size: clamp(1.75rem, 3.2vw + 1rem, 2.4rem);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.8px;
  margin-bottom: 16px;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

/* ─── Analyze form ──────────────────────────────────────────────────────────── */
.analyze-form {
  max-width: 640px;
  margin: 0 auto;
}

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

.url-input {
  flex: 1;
  padding: 14px 18px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 400;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* outline: none removed — keyboard focus ring handled by :focus-visible in A11Y block */
}

.url-input::placeholder {
  color: var(--text-muted);
}

.url-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 85, 226, 0.18);
}

/* Kolme analyysitaso-nappia (pika / keskipitkä / laaja) */
.mode-buttons {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.mode-btn {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 14px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease,
    box-shadow 0.15s ease, opacity 0.15s ease;
}
.mode-btn:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(79, 85, 226, 0.12);
}
.mode-btn:disabled {
  opacity: 0.6;
  cursor: default;
}
.mode-name {
  font-size: 0.95rem;
  font-weight: 700;
}
.mode-sec {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.mode-btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
  transition: transform 0.15s cubic-bezier(.16,1,.3,1),
    border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.mode-btn-primary:hover:not(:disabled) { transform: scale(1.03); }
.mode-btn-primary:active:not(:disabled) { transform: scale(.97); }
.mode-btn-primary .mode-sec {
  color: var(--accent-fg);
  opacity: 0.85;
}
.mode-btn.loading .mode-name,
.mode-btn.loading .mode-sec {
  visibility: hidden;
}
.mode-btn.loading .btn-spinner {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.submit-btn {
  padding: 14px 28px;
  background: var(--accent);
  color: var(--accent-fg);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  min-width: 120px;
  justify-content: center;
}

.submit-btn:hover:not(:disabled) {
  background: var(--accent-hover);
}

.submit-btn:active:not(:disabled) {
  opacity: 0.9;
}

.submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-text {
  display: block;
}

/* Button spinner (hidden by default) — käyttää currentColoria trust-teal-taustaa varten */
.btn-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

.submit-btn.loading .btn-spinner {
  display: block;
}

.submit-btn.loading .btn-text {
  display: none;
}

.quick-btn {
  padding: 14px 20px;
  background: var(--bg-input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  min-width: 80px;
  justify-content: center;
}

.quick-btn:hover:not(:disabled) {
  border-color: var(--accent);
  background: rgba(79, 85, 226, 0.08);
}

.quick-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.quick-btn.loading .btn-spinner {
  display: block;
}

.quick-btn.loading .btn-text {
  display: none;
}

.input-error {
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--critical);
  min-height: 20px;
  text-align: left;
}

/* ─── Loading area ──────────────────────────────────────────────────────────── */
.loading-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 64px 0;
}

.spinner-large {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.loading-text {
  color: var(--text-muted);
  font-size: 0.95rem;
}

/* ─── Error card ────────────────────────────────────────────────────────────── */
.error-area {
  animation: fade-in 0.2s ease;
}

.error-card {
  background: var(--critical-bg);
  border: 1px solid rgba(35, 31, 32, 0.3);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.error-title {
  color: var(--critical);
  font-size: 0.95rem;
  font-weight: 600;
}

.error-message {
  color: var(--critical);
  opacity: 0.8;
  font-size: 0.9rem;
}

/* ─── Results area ──────────────────────────────────────────────────────────── */
.results-area {
  animation: fade-in 0.2s ease;
}

/* ─── Results action buttons ────────────────────────────────────────────────── */
.results-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
  min-width: 110px;
  justify-content: center;
}

.action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.action-btn-pdf {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
}

.action-btn-pdf:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--card-hover-border);
}

.action-btn-share {
  background: var(--accent);
  border: 1px solid transparent;
  color: var(--accent-fg);
}

.action-btn-share:hover:not(:disabled) {
  background: var(--accent-hover);
}

.action-btn-reanalyze {
  background: var(--bg-card);
  border: 1px solid var(--accent);
  color: var(--accent);
}

.action-btn-reanalyze:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-fg);
}

.action-btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
  opacity: 0.6;
}

.action-btn.loading .action-btn-text {
  display: none;
}

.action-btn.loading .action-btn-spinner {
  display: block;
}

/* ─── Risk Badge ────────────────────────────────────────────────────────────── */
.risk-badge {
  width: 100%;
  min-height: 140px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 32px;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
}

.risk-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: none;
}

.risk-badge.has-icon .risk-icon { display: block; }

.risk-badge.risk-critical .risk-icon { color: var(--critical); }
.risk-badge.risk-high     .risk-icon { color: var(--high); }
.risk-badge.risk-medium   .risk-icon { color: var(--medium); }
.risk-badge.risk-low      .risk-icon { color: var(--low); }
.risk-badge.risk-safe     .risk-icon { color: var(--safe); }
.risk-badge.risk-unknown  .risk-icon { color: var(--text-muted); }

@media (max-width: 640px) {
  .risk-badge { flex-direction: column; gap: 12px; padding: 24px 18px; }
  .risk-icon { width: 44px; height: 44px; }
}

/* Risk level color classes */
.risk-badge.risk-critical {
  background: linear-gradient(135deg, rgba(35, 31, 32, 0.18) 0%, rgba(35, 31, 32, 0.08) 100%);
  border: 1px solid rgba(35, 31, 32, 0.35);
  box-shadow: 0 0 40px rgba(35, 31, 32, 0.08);
}

.risk-badge.risk-high {
  background: linear-gradient(135deg, rgba(244, 234, 141, 0.18) 0%, rgba(244, 234, 141, 0.08) 100%);
  border: 1px solid rgba(244, 234, 141, 0.35);
  box-shadow: 0 0 40px rgba(244, 234, 141, 0.08);
}

.risk-badge.risk-medium {
  background: linear-gradient(135deg, rgba(176, 212, 238, 0.18) 0%, rgba(176, 212, 238, 0.08) 100%);
  border: 1px solid rgba(176, 212, 238, 0.35);
  box-shadow: 0 0 40px rgba(176, 212, 238, 0.08);
}

.risk-badge.risk-low {
  background: linear-gradient(135deg, rgba(79, 85, 226, 0.18) 0%, rgba(79, 85, 226, 0.08) 100%);
  border: 1px solid rgba(79, 85, 226, 0.35);
  box-shadow: 0 0 40px rgba(79, 85, 226, 0.08);
}

.risk-badge.risk-safe {
  background: linear-gradient(135deg, rgba(132, 237, 166, 0.28) 0%, rgba(132, 237, 166, 0.12) 100%);
  border: 1px solid rgba(132, 237, 166, 0.45);
  box-shadow: 0 0 40px rgba(132, 237, 166, 0.12);
}

/* Tuntematon/määrittämätön riskitaso — neutraali harmaa, EI vihreä/turvallinen */
.risk-badge.risk-unknown {
  background: linear-gradient(135deg, rgba(35, 31, 32, 0.14) 0%, rgba(35, 31, 32, 0.06) 100%);
  border: 1px solid rgba(35, 31, 32, 0.30);
  box-shadow: 0 0 40px rgba(35, 31, 32, 0.06);
}

.risk-badge-inner {
  text-align: center;
}

.risk-level-text {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.risk-badge.risk-critical .risk-level-text { color: var(--critical); }
.risk-badge.risk-high     .risk-level-text { color: var(--high); }
.risk-badge.risk-medium   .risk-level-text { color: var(--medium); }
.risk-badge.risk-low      .risk-level-text { color: var(--low); }
.risk-badge.risk-safe     .risk-level-text { color: var(--safe); }
.risk-badge.risk-unknown  .risk-level-text { color: var(--text-muted); }

.risk-summary {
  display: block;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-muted);
  max-width: 62ch;
  line-height: 1.65;
  text-align: left;
  margin: 0 auto;
}
.risk-summary-p {
  margin: 0;
}
.risk-summary-p + .risk-summary-p {
  margin-top: 0.9em;
}
@media (max-width: 640px) {
  .risk-summary { font-size: 0.95rem; line-height: 1.6; }
}

/* ─── Cards grid ────────────────────────────────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
}

.card-attacker,
.card-diagnostics {
  grid-column: 1 / -1;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease;
}

.card:hover {
  border-color: var(--card-hover-border);
}

/* Overview: asiakkaan kokonaistilannekuva (narratiivi badge- ja liikennevalon välissä) */
.overview-card {
  margin: 16px 0 4px 0;
  border-left: 3px solid var(--accent);
}
.overview-card p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
}

/* ─── Tier hierarchy ────────────────────────────────────────────────────────── */

/* Tier 1 — kriittiset löydökset: vahva vasen reuna + hienovarainen gradientti */
.card-issues {
  border-left: 3px solid var(--critical);
}
.card-recommendations {
  border-left: 3px solid var(--accent);
}

/* Tier 3 — CTA-ryhmä (fix-plan + target-state + ongoing): trust-teal-kehys */
.card-fix-plan,
.card-target-state,
.card-ongoing {
  border: 1px solid rgba(79, 85, 226, 0.35);
  border-left: 4px solid var(--accent);
  background: linear-gradient(180deg, rgba(79, 85, 226, 0.04) 0%, var(--bg-card) 60%);
}
:root[data-theme="light"] .card-fix-plan,
:root[data-theme="light"] .card-target-state,
:root[data-theme="light"] .card-ongoing {
  background: linear-gradient(180deg, rgba(79, 85, 226, 0.06) 0%, var(--bg-card) 60%);
}

/* Fix-plan aina full-width — tyypillisesti 5–10 askelta, ei jätä tyhjää oikealla */
.card-fix-plan {
  grid-column: 1 / -1;
}

/* Tier 4 — diagnostiikka: mykkä, katkoviivainen rajaus */
.card-diagnostics {
  background: transparent;
  border: 1px dashed var(--border);
  box-shadow: none;
}

.card-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* ─── Issues list ───────────────────────────────────────────────────────────── */
.issues-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.issue-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.issue-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.issue-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.issue-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.issue-detail {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  padding-left: 2px;
}

/* ─── Severity badges ───────────────────────────────────────────────────────── */
.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  border: 1px solid currentColor;
}

.severity-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.severity-critical {
  background: var(--critical-bg);
  color: var(--critical);
  border: 1px solid rgba(35, 31, 32, 0.25);
}

.severity-high {
  background: var(--high-bg);
  color: var(--high);
  border: 1px solid rgba(244, 234, 141, 0.25);
}

.severity-medium {
  background: var(--medium-bg);
  color: var(--medium);
  border: 1px solid rgba(176, 212, 238, 0.25);
}

.severity-low {
  background: var(--low-bg);
  color: var(--low);
  border: 1px solid rgba(79, 85, 226, 0.25);
}

.severity-info {
  background: rgba(176, 212, 238, 0.1);
  color: var(--insight-blue);
  border: 1px solid rgba(176, 212, 238, 0.2);
}

/* ─── Recommendations list ──────────────────────────────────────────────────── */
.recommendations-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 0;
  list-style: none;
  counter-reset: rec-counter;
}

.rec-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  counter-increment: rec-counter;
}

.rec-item::before {
  content: counter(rec-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: rgba(79, 85, 226, 0.14);
  border: 1px solid rgba(79, 85, 226, 0.3);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 2px;
}

.rec-text {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ─── Attacker impact card ──────────────────────────────────────────────────── */
.attacker-worst-case {
  border: 1px solid rgba(35, 31, 32, 0.4);
  border-radius: var(--radius-md);
  background: var(--critical-bg);
  padding: 16px 20px;
  margin-bottom: 20px;
}

.attacker-worst-case-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--critical);
  margin-bottom: 6px;
  display: block;
}

.attacker-worst-case-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--critical);
  line-height: 1.5;
  margin-bottom: 8px;
}

.attacker-likelihood {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border-radius: 999px;
}

.likelihood-low    { background: var(--low-bg);    color: var(--low);    border: 1px solid rgba(79,85,226,0.25); }
.likelihood-medium { background: var(--medium-bg); color: var(--medium); border: 1px solid rgba(176,212,238,0.25); }
.likelihood-high   { background: var(--critical-bg); color: var(--critical); border: 1px solid rgba(35,31,32,0.25); }

.attacker-scenarios {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.scenario-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:root[data-theme="light"] .scenario-card {
  background: var(--bg-hover);
}

.scenario-vector {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text);
}

.scenario-access {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 2px 10px;
  background: rgba(79, 85, 226, 0.12);
  color: var(--accent);
  border: 1px solid rgba(79, 85, 226, 0.28);
  border-radius: 999px;
  width: fit-content;
}

.scenario-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.scenario-row-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.scenario-row-value {
  font-size: 0.83rem;
  color: var(--text);
  line-height: 1.45;
}

/* ─── Diagnostics / details ─────────────────────────────────────────────────── */
.diagnostics-details {
  width: 100%;
}

.diagnostics-summary {
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
  transition: color 0.15s ease;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.diagnostics-summary::-webkit-details-marker {
  display: none;
}

.diagnostics-summary::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--text-muted);
  border-bottom: 1.5px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  margin-right: 2px;
}

details[open] .diagnostics-summary::before {
  transform: rotate(45deg);
}

.diagnostics-summary:hover {
  color: var(--text);
}

details[open] .diagnostics-summary {
  color: var(--text);
  margin-bottom: 20px;
}

.diagnostics-dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 24px;
  align-items: start;
}

.diagnostics-dl dt {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  padding-top: 2px;
}

.diagnostics-dl dd {
  font-size: 0.88rem;
  color: var(--text);
  font-family: var(--font-mono);
  word-break: break-word;
}

.diag-missing {
  color: var(--text-muted);
  font-style: italic;
}

.diag-warn {
  color: var(--medium);
}

.diag-ok {
  color: var(--safe);
}

.diag-bad {
  color: var(--critical);
}

/* Neutraali varaus-/huomiorivi (ei vihreä eikä punainen) */
.diag-note {
  color: var(--text-muted);
}

/* ─── Footer ────────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 20px 0;
}

.footer-text {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.02em;
}

/* ─── Share modal ───────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(35, 31, 32, 0.6);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fade-in 0.15s ease;
}

:root[data-theme="light"] .modal-overlay {
  background: rgba(35, 31, 32, 0.45);
}

.modal-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 32px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 8px 40px rgba(35, 31, 32, 0.35);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

:root[data-theme="light"] .modal-box {
  box-shadow: 0 8px 40px rgba(35, 31, 32, 0.15);
}

.modal-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.3px;
}

.modal-label {
  font-size: 0.83rem;
  color: var(--text-muted);
}

.modal-url-row {
  display: flex;
  gap: 8px;
}

.modal-url-input {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 0.82rem;
  padding: 10px 14px;
  /* outline: none removed — keyboard focus ring handled by :focus-visible in A11Y block */
}

.modal-copy-btn {
  padding: 10px 16px;
  background: var(--signal-zest);
  color: var(--accent-fg);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 0.83rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}

.modal-copy-btn:hover {
  opacity: 0.85;
}

.modal-copy-btn.copied {
  background: var(--safe);
  color: #fff;
}

.modal-expires {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.modal-close-btn {
  align-self: flex-end;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.83rem;
  font-weight: 500;
  padding: 8px 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.modal-close-btn:hover {
  border-color: var(--card-hover-border);
  color: var(--text);
}

/* ─── Shared report view ────────────────────────────────────────────────────── */
#shared-view {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.shared-header {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.shared-header .container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.shared-back-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  transition: color 0.15s, background 0.15s;
  margin-right: 4px;
  white-space: nowrap;
}

.shared-back-link:hover {
  color: var(--text);
  background: var(--bg-card);
}

.shared-badge {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--medium-bg);
  color: var(--medium);
  border: 1px solid rgba(176, 212, 238, 0.25);
}

.shared-footer-note {
  margin-top: 32px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
  text-align: center;
}

/* ─── Animations ────────────────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── [hidden] utility ──────────────────────────────────────────────────────── */
[hidden] {
  display: none !important;
}

/* ─── Auth views ─────────────────────────────────────────────────────────────── */

/* Login view — full-page centered layout */
#login-view,
#callback-view {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: var(--z-base);
}

/* App view fills remaining space */
#app-view {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.login-outer,
.callback-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 24px;
}

/* Login card */
.login-container {
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 48px 40px 40px;
  box-shadow: var(--shadow-card), 0 0 80px rgba(132, 237, 166, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: fade-in 0.25s ease;
}

/* Logo block inside login card */
.login-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 36px;
}

.login-logo-img {
  height: 40px;
  width: auto;
  display: block;
  margin-bottom: 4px;
}

.login-logo-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* Login headings */
.login-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.4px;
  margin-bottom: 10px;
}

.login-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 300px;
}

/* Primary CTA button */
.login-btn {
  width: 100%;
  padding: 15px 24px;
  background: var(--signal-zest);
  color: var(--accent-fg);
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}

.login-btn:hover {
  opacity: 0.88;
}

.login-btn:active {
  opacity: 0.8;
}

.login-btn:focus-visible {
  outline: 2px solid var(--signal-zest);
  outline-offset: 3px;
}

/* Hint text under login button */
.login-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  opacity: 0.75;
  letter-spacing: 0.01em;
}

/* ─── Callback / spinner view ────────────────────────────────────────────────── */
.callback-outer {
  gap: 20px;
}

.callback-spinner {
  width: 52px;
  height: 52px;
  border: 3px solid var(--border);
  border-top-color: var(--signal-zest);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.callback-text {
  font-size: 0.95rem;
  color: var(--text-muted);
}

.callback-error {
  font-size: 0.88rem;
  color: var(--critical);
  text-align: center;
  max-width: 360px;
  line-height: 1.5;
}

.callback-retry {
  font-size: 0.85rem;
  color: var(--insight-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.callback-retry:hover {
  opacity: 0.75;
}

/* ─── User bar (shown in app-view) ──────────────────────────────────────────── */
.user-bar {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
}

.user-bar-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
}

.user-info {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.logout-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 4px 12px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.logout-btn:hover {
  border-color: var(--logout-hover-border);
  color: var(--text);
}

/* ─── Session expired inline message ────────────────────────────────────────── */
.session-expired-msg {
  background: var(--medium-bg);
  border: 1px solid rgba(176, 212, 238, 0.3);
  border-radius: var(--radius-md);
  color: var(--medium);
  font-size: 0.85rem;
  padding: 12px 16px;
  margin-bottom: 24px;
  text-align: center;
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .input-row {
    flex-direction: column;
  }

  .submit-btn {
    width: 100%;
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .card-attacker,
  .card-diagnostics {
    grid-column: 1;
  }

  .risk-level-text {
    font-size: 2.2rem;
  }

  .logo {
    flex-direction: column;
    gap: 2px;
  }

  .results-actions {
    justify-content: stretch;
  }

  .action-btn {
    flex: 1;
  }

  .attacker-scenarios {
    grid-template-columns: 1fr;
  }
}

/* ─── PageSpeed toggle ──────────────────────────────────────────────────────── */
.pagespeed-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
}
.pagespeed-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.pagespeed-toggle:hover {
  color: var(--text);
}
.lang-toggle select {
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.9rem;
  cursor: pointer;
}

/* ─── Resaco fix plan card ──────────────────────────────────────────────────── */
.card-fix-plan {
  border: 1px solid var(--accent);
  background: linear-gradient(180deg, var(--bg-card) 0%, color-mix(in srgb, var(--accent) 6%, var(--bg-card)) 100%);
}
.fix-plan-intro {
  color: var(--text-muted);
  margin: 0 0 16px 0;
  font-size: 0.95rem;
}
.fix-plan-actions {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}
.fix-action {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.fix-action-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.fix-action-num {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}
.fix-action-title {
  font-weight: 600;
  color: var(--text);
}
.fix-action-what {
  color: var(--text-muted);
  margin: 4px 0 8px 38px;
  font-size: 0.92rem;
  line-height: 1.45;
}
.fix-action-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: 38px;
}
.fix-action-time,
.fix-action-tier {
  font-size: 0.8rem;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.fix-action-tier {
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  font-weight: 600;
  cursor: help;
}
.fix-tier-legend {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.fix-tier-legend-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}
.fix-tier-legend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fix-tier-legend-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 0.88rem;
}
.fix-tier-legend-tag {
  flex: 0 0 auto;
  min-width: 88px;
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
  font-weight: 600;
  font-size: 0.78rem;
  text-align: center;
}
.fix-tier-legend-desc {
  color: var(--text);
}
.fix-plan-target,
.fix-plan-ongoing {
  background: var(--bg);
  border-left: 3px solid var(--safe, var(--safe));
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.fix-plan-ongoing {
  border-left-color: var(--low, var(--low));
}
.fix-plan-label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.fix-plan-target-text,
.fix-plan-ongoing-text {
  color: var(--text);
  margin: 0;
  line-height: 1.5;
}
.fix-plan-total {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}
.fix-plan-cta {
  margin: 16px 0 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  color: var(--text-muted);
  font-size: 0.92rem;
}
.fix-plan-cta a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}
.fix-plan-cta a:hover {
  text-decoration: underline;
}

/* ─── Infrastructure card ──────────────────────────────────────────────────── */
.infrastructure-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 18px 0;
}

.infrastructure-card .section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 14px 0;
}

.infra-row {
  display: flex;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.infra-row:last-child {
  border-bottom: none;
}

.infra-label {
  flex: 0 0 180px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}

.infra-value {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text);
}

.sp-consolidation-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text);
}

/* ─── Technology profile card ──────────────────────────────────────────────── */
.tech-profile-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  margin: 12px 0 18px 0;
}
.tech-profile-card .section-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 14px 0;
}
.tech-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.tech-group {
  min-width: 140px;
}
.tech-cat-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.tech-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg-hover);
  font-size: 0.78rem;
  color: var(--text);
  border: 1px solid var(--border);
}
.tech-pill-name {
  font-weight: 600;
}
.tech-pill-ver {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 500;
}

/* ─── Costs view ──────────────────────────────────────────────────────────── */
.costs-view { padding: 24px 0; }
.costs-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.costs-title { font-size: 1.4rem; font-weight: 700; color: var(--text); margin: 0; }
.costs-back-btn {
  padding: 8px 16px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--text); font-size: 0.85rem; cursor: pointer;
}
.costs-back-btn:hover { border-color: var(--accent); }
.costs-link {
  color: var(--text-muted); text-decoration: none; font-size: 0.85rem;
  padding: 4px 10px; border-radius: var(--radius-sm); transition: color 0.15s;
}
.costs-link:hover { color: var(--accent); }
.costs-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 28px;
}
.cost-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px; text-align: center;
}
.cost-card-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 6px; }
.cost-card-value { font-size: 1.3rem; font-weight: 700; color: var(--text); font-family: var(--font-mono); }
.costs-section { margin-bottom: 28px; }
.costs-section .section-title { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 12px 0; }
.costs-table {
  width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.costs-table th {
  text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
}
.costs-table td {
  padding: 7px 10px; border-bottom: 1px solid var(--border);
  color: var(--text); font-family: var(--font-mono);
}
.costs-table tbody tr:hover { background: var(--bg-hover); }
.costs-url-cell { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Glossary ─────────────────────────────────────────────────────────────── */
.glossary-intro { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 20px; }
.glossary-section { margin-bottom: 28px; }
.glossary-entry {
  padding: 14px 16px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-card);
}
.glossary-term {
  font-weight: 700; font-size: 0.9rem; color: var(--accent);
  font-family: var(--font-mono); margin-bottom: 4px;
}
.glossary-what {
  font-size: 0.85rem; font-weight: 600; color: var(--text); margin-bottom: 6px;
}
.glossary-how {
  font-size: 0.82rem; color: var(--text-muted); line-height: 1.5;
}

/* ─── Section explanations (inline) ────────────────────────────────────────── */
.section-explanation {
  font-size: 0.8rem; color: var(--text-muted); margin: 4px 0 12px 0;
  font-style: italic; line-height: 1.4;
}

/* ─── Traffic light meter ───────────────────────────────────────────────────── */
.traffic-light {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 24px 0;
}
.tl-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 8px;
  border-radius: 999px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 0.9rem;
  min-height: 44px;
}
/* Mini-liikennevalo — 3 valoa pystyasennossa (punainen–keltainen–vihreä ylhäältä alas, oikean elämän mukaan) */
.tl-signal {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px;
  border-radius: 4px;
  background: var(--brand-terva);
  border: 1px solid rgba(35, 31, 32, 0.25);
  box-shadow: inset 0 1px 2px rgba(35, 31, 32, 0.4);
  flex-shrink: 0;
}
:root[data-theme="light"] .tl-signal {
  background: var(--brand-terva);
  border-color: rgba(35, 31, 32, 0.2);
}
.tl-light {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

/* Aktiivinen valo — täysvärinen + glow */
/* Liikennevalon pallot tarvitsevat aidosti erottuvat värit — VAIN raakoja
   brändivärejä, ei tekstikontrasti-tokeneita (jotka ovat kaikki tervaa
   tummassa teemassa ja tekivät palloista identtisiä). Ei punaista sallittu:
   "punainen" pallo = terva (tumma/hälyttävä), keltainen = keltainen,
   vihreä = vihreä. */
.tl-red    .tl-light-red    { background: #ef4444; box-shadow: 0 0 5px rgba(239, 68, 68, 0.9), 0 0 1px rgba(239, 68, 68, 1); } /* eksplisiittinen poikkeus: Olli halusi oikean punaisen Ongelmat-liikennevaloon */
.tl-yellow .tl-light-yellow { background: var(--brand-keltainen); box-shadow: 0 0 5px rgba(244, 234, 141, 0.9), 0 0 1px rgba(244, 234, 141, 1); }
.tl-green  .tl-light-green  { background: var(--brand-vihrea);    box-shadow: 0 0 5px rgba(132, 237, 166, 0.9), 0 0 1px rgba(132, 237, 166, 1); }
.tl-unknown .tl-light { background: rgba(255, 255, 255, 0.12); }

.tl-label {
  color: var(--text-muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tl-value {
  color: var(--text);
  font-weight: 600;
}

/* Kehyksen sävytys pillin ympärillä säilyy statuksen mukaan */
.tl-green  { border-color: color-mix(in srgb, var(--safe) 40%, var(--border)); }
.tl-yellow { border-color: color-mix(in srgb, var(--medium) 40%, var(--border)); }
.tl-red    { border-color: color-mix(in srgb, var(--critical) 40%, var(--border)); }
.tl-unknown { border-color: var(--border); }
.tl-unknown .tl-label,
.tl-unknown .tl-value { opacity: 0.7; }

/* Pillin sisältö pinottuna (label + value allekkain korteissa) */
.tl-pill-body {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.tl-pill-body .tl-value { font-size: 0.86rem; }

/* ─── Traffic light — ryhmitellyt sarakkeet (OSA A) ─────────────────────────── */
.tl-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: start;
  width: 100%;
}
.tl-column {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}
.tl-column-red    { border-top: 3px solid var(--critical); }
.tl-column-yellow { border-top: 3px solid var(--medium); }
.tl-column-green  { border-top: 3px solid var(--safe); }
.tl-column-unknown { border-top: 3px solid var(--border); }

.tl-column-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tl-column-title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
}
.tl-column-count {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.tl-column-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Korteissa pilli täysleveä, ei pyöreä kapseli */
.tl-column-cards .tl-pill {
  width: 100%;
  border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
  .tl-columns { grid-template-columns: 1fr; }
}

/* Teknologiaprofiili — virhetila */
.tech-error {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

/* "Ei voitu tarkistaa" -tila kortissa (OSA C-2) */
.card-unchecked {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}
.card-unchecked-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border);
}
.card-unchecked-reason {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* CDN-varaus (OSA C-5) */
.cdn-disclaimer {
  margin-top: 10px;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Cache-päiväysbanneri (OSA C-6) */
.cache-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-hover);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.cache-notice-icon { flex-shrink: 0; }

/* Recon — epävarmuusmerkinnät (OSA C-1) */
.recon-uncertain-note {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-muted);
  margin: 8px 0;
}
.recon-uncertain-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-hover);
  border: 1px solid var(--border);
}

/* ─── Layout/Typography/Responsive polish (A2) ──────────────────────────────── */

/* Reduced motion — vaimentaa kaikki animaatiot */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Content-jumping prevention — varaa tila async-alueille */
.loading-area {
  min-height: 240px;
}

.results-area {
  min-height: 400px;
}

.error-area {
  min-height: 80px;
}

/* Prose max-width — rajoittaa rivipituuden 65–75ch korttipohjaisessa sisällössä */
.card .error-message,
.fix-plan-intro,
.fix-plan-cta,
.fix-plan-target-text,
.fix-plan-ongoing-text,
.fix-action-what,
.loading-text,
.hero-subtitle {
  max-width: 70ch;
}

/* 1440px desktop breakpoint — container max-width kasvaa */
@media (min-width: 1440px) {
  .container {
    max-width: 1280px;
  }
}

/* 375px mobile breakpoint — varmistaa ei horizontal scrollia kapealla viewportilla */
@media (max-width: 375px) {
  .container {
    padding: 0 16px;
  }

  .hero-title {
    font-size: 1.55rem;
  }

  .login-container {
    padding: 36px 24px 28px;
  }

  .modal-box {
    padding: 24px 20px;
  }

  .url-input,
  .submit-btn {
    font-size: 1rem;
  }
}

/* 768px tablet breakpoint — kaksipalstainen grid aktivoituu */
@media (min-width: 768px) and (max-width: 1023px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1024px breakpoint — varmistaa leveän layoutin tasaus */
@media (min-width: 1024px) {
  .site-main {
    padding: 64px 0 96px;
  }
}

/* ─── Accessibility — A11Y fixes (Agent A3) ─────────────────────────────────── */

/*
 * Visually hidden — readable by screen readers, invisible on screen.
 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Skip link — hidden off-screen until keyboard focused.
 */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  background: var(--bg-card);
  color: var(--text);
  border: 2px solid var(--border-focus);
  border-radius: var(--radius-md);
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font);
  text-decoration: none;
  white-space: nowrap;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  left: 8px;
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/*
 * Global focus-visible ring.
 * Removes default outline for pointer/touch interaction;
 * shows a clear 2px ring for keyboard navigation.
 */
*:focus:not(:focus-visible) {
  outline: none;
}

*:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* url-input already uses border+box-shadow for focus — keep that, add outline on top */
.url-input:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* Buttons with rounded pill shapes need matching border-radius on focus ring */
.login-btn:focus-visible,
.submit-btn:focus-visible {
  border-radius: var(--radius-md);
}

.modal-copy-btn:focus-visible,
.modal-close-btn:focus-visible {
  border-radius: var(--radius-md);
}

.logout-btn:focus-visible {
  border-radius: var(--radius-sm);
}

.theme-toggle:focus-visible {
  border-radius: var(--radius-md);
}

/*
 * Touch target sizes — minimum 44×44 px for all interactive elements.
 */

/* theme-toggle: was 36×36, expand to 44×44 */
.theme-toggle {
  min-width: 44px;
  min-height: 44px;
}

/* logout-btn: was ~26px tall (4px+4px padding + 16px font), lift to 44px */
.logout-btn {
  min-height: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* action-btn (PDF, Share): was ~36px, lift to 44px */
.action-btn {
  min-height: 44px;
}

/* modal-copy-btn and modal-close-btn: lift to 44px */
.modal-copy-btn,
.modal-close-btn {
  min-height: 44px;
}

/* submit-btn already has 14px+14px = 28px padding + ~19px font = 47px — OK, no change */

/* login-btn already has 15px+15px = 30px padding + ~19px font = 49px — OK, no change */

/* ─── Progress timeline ─────────────────────────────────────────────────────── */
.progress-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  list-style: none;
  margin: 0 auto 24px auto;
  padding: 0;
  max-width: 720px;
  position: relative;
  gap: 16px;
}
.progress-timeline::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  top: 12px;
  height: 2px;
  background: var(--border);
  z-index: 0;
}
.progress-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.progress-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  display: inline-block;
  transition: background-color 200ms ease, border-color 200ms ease;
  position: relative;
}
.progress-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
  transition: color 200ms ease;
}
.progress-step.active .progress-dot {
  border-color: var(--accent);
  background: var(--bg);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
  animation: progress-pulse 1.2s ease-in-out infinite;
}
.progress-step.active .progress-label {
  color: var(--text);
  font-weight: 600;
}
.progress-step.done .progress-dot {
  background: var(--accent);
  border-color: var(--accent);
}
.progress-step.done .progress-dot::after {
  content: "";
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 12px;
  border: solid var(--bg);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.progress-step.done .progress-label { color: var(--text-muted); }

.progress-detail {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  min-height: 1.2em;
  margin-top: 4px;
  font-family: var(--font-mono, var(--font));
  letter-spacing: 0.01em;
}

@keyframes progress-pulse {
  0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
  50%      { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 10%, transparent); }
}
@media (max-width: 760px) {
  .progress-timeline {
    flex-wrap: wrap;
    gap: 18px 12px;
    justify-content: flex-start;
  }
  .progress-timeline::before { display: none; }
  .progress-step {
    flex: 0 0 calc(50% - 6px);
    min-width: 0;
    padding: 0 6px;
  }
  .progress-label {
    font-size: 0.78rem;
    word-break: break-word;
    hyphens: auto;
    padding: 0 4px;
  }
  .progress-dot { width: 20px; height: 20px; }
}
@media (max-width: 420px) {
  .progress-step { flex: 0 0 calc(50% - 6px); }
  .progress-label { font-size: 0.72rem; }
}

/* ─── My analyses log ──────────────────────────────────────────────────────── */
.my-analyses {
  margin-top: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
}
.my-analyses-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.my-analyses-title {
  margin: 0;
  font-size: 1.05rem;
  color: var(--text);
}
.my-analyses-search {
  flex: 1 1 220px;
  min-width: 160px;
  max-width: 360px;
  margin-left: auto;
}
.analyses-search-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.88rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 36px;
}
.analyses-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.analyses-search-input::placeholder { color: var(--text-muted); }
@media (max-width: 640px) {
  .my-analyses-search { flex-basis: 100%; max-width: none; margin-left: 0; }
}
.link-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 8px;
  min-height: 32px;
}
.link-btn:hover { color: var(--accent); }
.my-analyses-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.analysis-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-size: 0.9rem;
}
/* Vaakaskrollaava kontti: sarakkeet eivät rivity vaan skrollaavat kapealla
   leveydellä. Mobiilissa (<=640px) tämä muuttuu korttinäkymäksi alempana. */
.analysis-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.analysis-row-cols {
  grid-template-columns: 70px 92px minmax(150px, 1fr) 92px 92px 110px 92px 78px 70px 116px 56px;
  gap: 8px;
  font-size: 0.82rem;
  min-width: 1040px;
}
.analysis-row-header {
  display: grid;
  grid-template-columns: 70px 92px minmax(150px, 1fr) 92px 92px 110px 92px 78px 70px 116px 56px;
  gap: 8px;
  padding: 6px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  min-width: 1040px;
}
.analysis-hdr-col, .analysis-col {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analysis-hdr-author, .analysis-author {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.analysis-row .analysis-author {
  color: var(--text);
  font-weight: 500;
}
.scan-type {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.4;
}
.scan-type-full {
  background: rgba(79, 85, 226, 0.12);
  color: var(--accent);
}
.scan-type-quick {
  background: rgba(35, 31, 32, 0.10);
  color: var(--brand-terva);
}
.scan-type-medium {
  background: rgba(79, 85, 226, 0.12);
  color: var(--low);
}
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
}
.dot-green  { background: var(--brand-vihrea); }
.dot-yellow { background: var(--brand-keltainen); }
.dot-red    { background: var(--brand-terva); }
.dot-unknown { background: var(--text-muted); }
.analysis-row .risk-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.risk-pill.risk-critical { background: color-mix(in srgb, var(--critical) 15%, transparent); color: var(--critical); }
.risk-pill.risk-high     { background: color-mix(in srgb, var(--high) 15%, transparent); color: var(--high); }
.risk-pill.risk-medium   { background: color-mix(in srgb, var(--medium) 15%, transparent); color: var(--medium); }
.risk-pill.risk-low      { background: color-mix(in srgb, var(--low) 15%, transparent); color: var(--low); }
.risk-pill.risk-safe     { background: color-mix(in srgb, var(--safe) 15%, transparent); color: var(--safe); }
.risk-pill.risk-unknown  { background: var(--bg-hover); color: var(--text-muted); }
.analysis-row .analysis-url {
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.analysis-row .analysis-date {
  color: var(--text-muted);
  font-size: 0.82rem;
  white-space: nowrap;
}
.analysis-row .analysis-open {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
}
.analysis-row .analysis-open:hover { text-decoration: underline; }
.my-analyses-empty {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 16px 0;
}

/* ─── Target state + Ongoing protection (separate cards) ────────────────────── */
/* Reunat ja tausta määritellään tier-3-säännössä ylempänä (trust-teal-yhtenäisyys). */
.target-state-text,
.ongoing-text {
  color: var(--text);
  margin: 8px 0 0 0;
  line-height: 1.55;
  max-width: 70ch;
}
.target-state-total {
  margin: 12px 0 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
}
.target-state-total[hidden] { display: none; }

/* ─── Report TOC ─────────────────────────────────────────────────────────────── */
.report-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 24px 0;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.toc-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  font-weight: 600;
  padding-right: 4px;
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}
.toc-item { margin: 0; }
.toc-link {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: background-color 150ms ease, color 150ms ease;
  min-height: 28px;
}
.toc-link::before {
  content: "→ ";
  opacity: 0.5;
  margin-right: 4px;
}
.toc-link:hover,
.toc-link:focus-visible {
  background: color-mix(in srgb, var(--accent) 15%, var(--bg-hover));
  color: var(--accent);
}
.toc-target-flash {
  animation: toc-flash 900ms ease;
}
@keyframes toc-flash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); }
  30%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 25%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .toc-target-flash { animation: none; }
}
html { scroll-behavior: smooth; }
/* Offset scroll anchors if fixed header covers them */
.cards-grid > .card { scroll-margin-top: 20px; }
@media (max-width: 640px) {
  /* Mobiili: ei vaakaskrollia vaan jokainen analyysi on kortti, jossa kentät
     pinotaan label–arvo-pareiksi. Otsikkorivi piilotetaan. */
  .analysis-scroll { overflow-x: visible; }
  .analysis-row-header { display: none; }

  .analysis-row.analysis-row-cols {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    gap: 6px;
    padding: 12px 14px;
  }
  .analysis-row.analysis-row-cols > .risk-pill {
    align-self: flex-start;
  }
  .analysis-row.analysis-row-cols > [data-label] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    text-align: right;
    white-space: normal;
  }
  .analysis-row.analysis-row-cols > [data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .analysis-row.analysis-row-cols > .analysis-url {
    word-break: break-all;
  }
  .analysis-row.analysis-row-cols > .analysis-open {
    justify-content: flex-start;
    margin-top: 4px;
  }
  .analysis-row.analysis-row-cols > .analysis-open::before {
    content: '';
  }
}

/* ─── Email Security card ───────────────────────────────────────────────────── */
.card-email-security { /* neutraali Tier-2-kortti — status tulee em-risk-pill-sisällöstä */ }
.em-risk-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  border: 1px solid currentColor;
}
.em-risk-green  { background: rgba(35,31,32,0.15); color: var(--safe); }
.em-risk-yellow { background: rgba(176,212,238,0.15);  color: var(--medium); }
.em-risk-red    { background: rgba(35,31,32,0.15);  color: var(--critical); }
.em-risk-unknown{ background: rgba(35,31,32,0.10);color: var(--text-muted); }
.em-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; margin-bottom: 10px; }
.em-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.em-td-label { font-weight: 700; width: 70px; color: var(--text); }
.em-td-detail { color: var(--text-muted); font-size: 0.8rem; word-break: break-all; }
.em-status-ok   { color: var(--safe); font-weight: 600; }
.em-status-bad  { color: var(--critical); font-weight: 600; }
.em-status-warn { color: var(--medium); font-weight: 600; }
.em-issues-list { list-style: none; padding: 0; margin-top: 6px; }
.em-issue { font-size: 0.82rem; color: var(--text-muted); padding: 3px 0 3px 14px; position: relative; }
.em-issue::before { content: '·'; position: absolute; left: 4px; color: var(--text-muted); }

/* ─── WHOIS / Domain card ───────────────────────────────────────────────────── */
.card-whois { /* neutraali — status tulee whois-days-num värillä */ }
.whois-expiry-big { display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; }
.whois-days-num { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.whois-days-label { font-size: 0.85rem; color: var(--text-muted); }
.whois-days-green  .whois-days-num { color: var(--safe); }
.whois-days-yellow .whois-days-num { color: var(--medium); }
.whois-days-red    .whois-days-num { color: var(--critical); }
.whois-days-unknown .whois-days-num { color: var(--text-muted); }
.whois-dl { display: grid; grid-template-columns: 100px 1fr; gap: 4px 12px; font-size: 0.875rem; }
.whois-dt { font-weight: 600; color: var(--text-muted); }
.whois-dd { color: var(--text); }

/* ─── Cookie Audit card ─────────────────────────────────────────────────────── */
.card-cookie { /* neutraali — status tulee cookie-risk-pill sisällöstä */ }
.cookie-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.cookie-count { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.cookie-risk-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.cookie-risk-green  { background: rgba(35,31,32,0.15); color: var(--safe); }
.cookie-risk-yellow { background: rgba(176,212,238,0.15);  color: var(--medium); }
.cookie-risk-red    { background: rgba(35,31,32,0.15);  color: var(--critical); }
.cookie-risk-unknown{ background: rgba(35,31,32,0.10);color: var(--text-muted); }

/* ─── Recon (subdomains + DNS posture) card ─────────────────────────────────── */
.card-recon { /* neutraali tier-2 */ }
.recon-summary {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}
.recon-count {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.recon-count-label {
  font-size: 0.92rem;
  color: var(--text-muted);
}
.recon-warnings {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.recon-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  border: 1px solid currentColor;
}
.recon-warning-icon {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 2px;
}
.recon-warning-icon svg { width: 14px; height: 14px; }
.recon-warning-text { color: var(--text); }
.recon-sev-critical { color: var(--critical); background: var(--critical-bg); }
.recon-sev-high     { color: var(--high);     background: var(--high-bg); }
.recon-sev-medium   { color: var(--medium);   background: var(--medium-bg); }
.recon-sev-low      { color: var(--low);      background: var(--low-bg); }
.recon-sev-info     { color: var(--text-muted); background: var(--bg-hover); }
.recon-posture {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 14px;
  margin-bottom: 14px;
  font-size: 0.88rem;
}
.recon-posture-dt {
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.76rem;
  padding-top: 2px;
}
.recon-posture-dd {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  word-break: break-word;
}
.recon-ok   { color: var(--safe); }
.recon-bad  { color: var(--critical); }
.recon-warn { color: var(--medium); }
.recon-details {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.recon-details-summary {
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px 0;
  list-style: disclosure-closed;
  font-weight: 600;
}
.recon-details[open] .recon-details-summary {
  list-style: disclosure-open;
  color: var(--text);
  margin-bottom: 10px;
}
.recon-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-top: 4px;
}
.recon-table th {
  text-align: left;
  padding: 6px 8px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.72rem;
  border-bottom: 1px solid var(--border);
}
.recon-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.recon-host {
  font-family: var(--font-mono);
  color: var(--text);
  font-size: 0.82rem;
  word-break: break-all;
}
.recon-records {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: 0.78rem;
  word-break: break-all;
}
.recon-note { font-size: 0.78rem; color: var(--text-muted); }
.recon-takeover-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--critical-bg);
  color: var(--critical);
  border: 1px solid currentColor;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ─── Pricing card ──────────────────────────────────────────────────────────── */
.card-pricing { /* neutraali — hinta korostuu pricing-amount-tyylillä */ }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
@media (max-width: 640px) { .pricing-grid { grid-template-columns: 1fr 1fr; } }
.pricing-cell { display: flex; flex-direction: column; gap: 4px; }
.pricing-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.pricing-amount { font-size: 1.8rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.pricing-monthly { font-size: 1.4rem; }
.pricing-package {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(79, 85, 226, 0.14);
  color: var(--accent);
  font-size: 1rem;
  font-weight: 700;
  margin-top: 2px;
  border: 1px solid rgba(79, 85, 226, 0.28);
}
.pricing-explanation { font-size: 0.875rem; color: var(--text-muted); line-height: 1.5; margin-top: 4px; }

/* Light mode overrides for new cards */
[data-theme="light"] .em-risk-green  { background: rgba(35,31,32,0.12); }
[data-theme="light"] .em-risk-yellow { background: rgba(176,212,238,0.12); }
[data-theme="light"] .em-risk-red    { background: rgba(35,31,32,0.12); }
[data-theme="light"] .pricing-amount { color: var(--safe); }
[data-theme="light"] .pricing-monthly { color: var(--safe); }
[data-theme="light"] .pricing-package { background: var(--safe-bg); color: var(--safe); }

/* ─── Security score (aggregate /10) ────────────────────────────────────────── */
.security-score {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-left: auto;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.security-score-label {
  display: block;
  width: 100%;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-right: 4px;
}
.security-score-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
}
.security-score-max {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 500;
}
.security-score.score-good  .security-score-value { color: var(--safe); }
.security-score.score-warn  .security-score-value { color: var(--medium); }
.security-score.score-bad   .security-score-value { color: var(--critical); }
@media (max-width: 640px) {
  .security-score {
    margin-left: 0;
    margin-top: 12px;
    width: 100%;
    justify-content: flex-start;
  }
}

/* ─── Cal.com CTA button (secondary) ────────────────────────────────────────── */
.fix-plan-cta-row {
  margin: 12px 0 0 0;
}
.cta-button-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  border: 1px solid var(--accent);
  transition: background 0.15s ease, transform 0.05s ease;
}
.cta-button-secondary:hover {
  background: var(--accent-hover);
  text-decoration: none;
}
.cta-button-secondary:active {
  transform: translateY(1px);
}

/* ─── Consolidation box (3 toimittajaa → 1 lasku) ───────────────────────────── */
.consolidation-box {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(35,31,32,0.08), rgba(79,85,226,0.06));
  border-left: 3px solid var(--accent);
}
.consolidation-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(35,31,32,0.14);
  color: var(--accent);
}
.consolidation-icon svg {
  width: 22px;
  height: 22px;
}
.consolidation-title {
  margin: 0 0 6px 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.consolidation-text {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* ─── Shared-view PDF download button ───────────────────────────────────────── */
.shared-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 12px 0 18px 0;
}
.download-pdf-btn {
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--bg-card);
  color: var(--text-muted);
  border: 1px solid var(--border);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.download-pdf-btn:hover {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

/* ============================================================
   Mobile responsiveness — kattava mobiili-optimointi (22.5.2026)
   ============================================================ */
@media (max-width: 640px) {
  /* Container & body padding pienemmäksi */
  body {
    font-size: 0.95rem;
  }
  .container {
    padding: 0 12px;
  }

  /* Hero & otsikot */
  .hero-title {
    font-size: 1.6rem;
  }
  .hero-subtitle {
    font-size: 0.95rem;
  }
  .card-title {
    font-size: 1.05rem;
  }

  /* Cards grid — 1 sarake (yliajaa myös aiemmat määritykset) */
  .cards-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .card {
    padding: 14px;
  }

  /* Status-kortit / pricing-grid pinottuna */
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 8px;
  }

  /* Risk-badge keskitetty, ei ylivuotoa */
  .risk-badge {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    flex-wrap: wrap;
    justify-content: center;
  }
  .risk-badge-inner {
    align-items: center;
    text-align: center;
  }
  .risk-summary {
    text-align: center;
  }

  /* Hinta-arviolaatikko keskitetty */
  .card-pricing,
  .pricing-amount,
  .pricing-monthly,
  .pricing-package,
  .pricing-explanation {
    text-align: center;
  }
  .pricing-amount {
    font-size: 1.5rem;
  }

  /* Whois-grid 1-sarakkeinen */
  .whois-dl {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .whois-dt {
    margin-top: 6px;
  }
  .whois-days-num {
    font-size: 1.8rem;
  }

  /* Diagnostics dl */
  .diagnostics-dl {
    grid-template-columns: 1fr;
  }

  /* Taulukot — flex-wrap niin että sisältö ei ylivuoda */
  table.diag-table,
  .diag-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 0.85rem;
  }
  .diag-table th,
  .diag-table td {
    padding: 6px 8px;
  }

  /* Fix-action korjaussuunnitelma */
  .fix-action {
    padding: 12px;
  }
  .fix-action-head {
    flex-wrap: wrap;
    gap: 8px;
  }
  .fix-action-meta {
    flex-wrap: wrap;
    gap: 6px;
  }
  .fix-action-time,
  .fix-action-tier {
    font-size: 0.7rem;
    padding: 2px 6px;
  }
  .fix-action-title {
    font-size: 0.95rem;
  }

  /* Scenario- ja attacker-laatikot */
  .scenario-card {
    padding: 12px;
  }
  .scenario-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  /* Results actions napit täysleveinä */
  .results-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .action-btn {
    width: 100%;
    justify-content: center;
  }

  /* Modal-laatikko ei ylivuoda */
  .modal-box {
    width: calc(100% - 24px);
    padding: 20px 16px;
  }
  .modal-url-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* iPhone SE & erittäin pienet näytöt */
@media (max-width: 380px) {
  body {
    font-size: 0.85rem;
  }
  .container {
    padding-left: 8px;
    padding-right: 8px;
  }
  .hero-title {
    font-size: 1.35rem;
  }
  .hero-subtitle {
    font-size: 0.85rem;
  }
  .card {
    padding: 12px;
  }
  .cards-grid {
    gap: 1px;
  }
  .card-title {
    font-size: 0.95rem;
  }
  .risk-level-text {
    font-size: 1.7rem;
  }
  .pricing-amount {
    font-size: 1.3rem;
  }
  .whois-days-num {
    font-size: 1.5rem;
  }
  .fix-action-num {
    font-size: 0.85rem;
  }
  .fix-action-title {
    font-size: 0.9rem;
  }
  .diag-table {
    font-size: 0.78rem;
  }
}

/* ── Core Web Vitals (CWV) ──────────────────────────────────────────────────── */
.card-cwv .cwv-perf-score {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
  font-weight: 600;
}
.card-cwv .cwv-perf-score-num {
  font-size: 1.4rem;
  font-weight: 800;
}
.card-cwv .cwv-perf-score-label {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.cwv-score-good { background: color-mix(in srgb, var(--safe) 18%, transparent); color: var(--safe); }
.cwv-score-warn { background: color-mix(in srgb, var(--medium) 22%, transparent); color: var(--medium); }
.cwv-score-bad  { background: color-mix(in srgb, var(--critical) 18%, transparent); color: var(--critical); }

.cwv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.cwv-metric {
  padding: 12px 14px;
  border-radius: 10px;
  border-left: 4px solid transparent;
  background: var(--bg);
}
.cwv-metric-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.cwv-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.cwv-metric-threshold {
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.cwv-metric-good { border-left-color: var(--safe); background: color-mix(in srgb, var(--safe) 8%, var(--bg)); }
.cwv-metric-warn { border-left-color: var(--medium); background: color-mix(in srgb, var(--medium) 10%, var(--bg)); }
.cwv-metric-bad  { border-left-color: var(--critical); background: color-mix(in srgb, var(--critical) 8%, var(--bg)); }
.cwv-opportunity {
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--bg-hover);
  border-radius: 6px;
  font-size: 0.9rem;
  color: var(--text);
}

@media (max-width: 640px) {
  .cwv-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cwv-metric { padding: 10px; }
  .cwv-metric-value { font-size: 1.2rem; }
}
@media (max-width: 380px) {
  .cwv-grid { grid-template-columns: 1fr; }
}

/* ─── Versiohistoria-sivu ───────────────────────────────────────────────────── */
.changelog-entry {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: var(--bg-card);
}
.changelog-entry-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 4px;
}
.changelog-version {
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.95rem;
}
.changelog-date { color: var(--text-muted); font-size: 0.85rem; }
.changelog-entry-title { margin: 2px 0 10px; font-size: 1.05rem; color: var(--text); }
.changelog-items { margin: 0; padding-left: 20px; }
.changelog-items li { margin: 5px 0; color: var(--text); font-size: 0.92rem; }

/* ─── "Mitä uutta" -ponnahdusikkuna ─────────────────────────────────────────── */
.whatsnew-box { max-width: 460px; }
.whatsnew-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.whatsnew-version { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 12px; }
.whatsnew-list { margin: 0 0 18px; padding-left: 20px; }
.whatsnew-list li { margin: 7px 0; color: var(--text); font-size: 0.92rem; line-height: 1.4; }
.whatsnew-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.whatsnew-history-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}
.whatsnew-history-link:hover { text-decoration: underline; }

/* ─── Sales insights: Päättäjän yhteenveto ──────────────────────────────────── */
.card-exec-summary {
  border-left: 4px solid var(--accent);
}
.exec-grade-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.exec-grade {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  flex-shrink: 0;
}
.exec-grade-value {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.exec-grade-green  { color: var(--safe); }
.exec-grade-yellow { color: var(--medium); }
.exec-grade-red    { color: var(--critical); }
.exec-grade-max {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-muted);
}
.exec-grade-label {
  font-size: 1.05rem;
  font-weight: 700;
}
.exec-bullets {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0 0 0.75rem;
}
.exec-bullet { margin-bottom: 0.35rem; }
.exec-decision-line {
  font-weight: 700;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  margin-bottom: 0.5rem;
}
.exec-scoring-version {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ─── Sales insights: Sähköpostin väärinkäyttöriski ─────────────────────────── */
.phishing-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.phishing-level-badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.phishing-level-high   { background: var(--critical-bg); color: var(--critical); }
.phishing-level-medium { background: var(--medium-bg);   color: var(--medium); }
.phishing-level-low    { background: var(--safe-bg);     color: var(--safe); }
.phishing-level-na     { background: var(--bg-hover);    color: var(--text-muted); }
.phishing-headline {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0.5rem 0 0.75rem;
}
.phishing-point { margin-bottom: 0.5rem; }
.phishing-evidence {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.5;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  margin-top: 0.75rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ─── Sales insights: Kolme tärkeintä toimenpidettä ─────────────────────────── */
.top-actions-list {
  list-style: none;
  counter-reset: top-action;
  padding: 0;
  margin: 0;
}
.top-action {
  counter-increment: top-action;
  position: relative;
  padding: 0.65rem 0 0.65rem 2.4rem;
  border-bottom: 1px solid var(--border);
}
.top-action:last-child { border-bottom: none; }
.top-action::before {
  content: counter(top-action);
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  font-size: 0.85rem;
}
.top-action-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.top-action-title { font-weight: 700; }
.effort-badge {
  display: inline-block;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.effort-small   { background: var(--safe-bg);     color: var(--safe); }
.effort-medium  { background: var(--medium-bg);   color: var(--medium); }
.effort-expert  { background: var(--critical-bg); color: var(--critical); }
.effort-neutral { background: var(--bg-hover);    color: var(--text-muted); }
.top-action-consequence {
  margin-top: 0.3rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.top-action-consequence-label { color: var(--text); }

/* ─── Sales insights: Suositeltu Resahost-paketti ───────────────────────────── */
.card-package-reco {
  border: 1px solid var(--accent);
  background: linear-gradient(180deg, var(--bg-card) 0%, color-mix(in srgb, var(--accent) 6%, var(--bg-card)) 100%);
}
.package-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.package-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--accent);
}
.package-price {
  font-size: 1.25rem;
  font-weight: 700;
}
.package-price-note {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.package-reasons {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0 0 0.75rem;
}
.package-reason { margin-bottom: 0.35rem; }
.package-addons-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0.75rem 0 0.35rem;
}
.package-addons {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0 0 0.75rem;
}
.package-addon { margin-bottom: 0.3rem; }
.package-cta-row { margin: 0.85rem 0 0.5rem; }
.package-cta-button {
  display: inline-block;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s cubic-bezier(.16,1,.3,1);
}
.package-cta-button:hover {
  background: var(--accent-hover);
  color: var(--accent-fg);
  transform: scale(1.03);
}
.package-cta-button:active { transform: scale(.97); }
.package-followup {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted);
}


/* ─── Executive-friendly report polish (shared + auth) ─────────────────────── */
.metric-role-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.metric-role-value {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.05;
  text-transform: none;
}
.risk-level-text {
  text-transform: none;
}
.metric-role-hint,
.exec-metric-hint {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted);
  max-width: 62ch;
  line-height: 1.45;
}
.exec-grade-label .metric-role-label {
  margin-bottom: 0.15rem;
}
.exec-grade-label .metric-role-value,
.exec-grade-label-text {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0;
}

.overview-card-title {
  margin: 0 0 0.85rem;
}
.overview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px) {
  .overview-grid { grid-template-columns: 1fr; }
}
.overview-mini {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  background: var(--bg-card);
  border-left: 3px solid var(--border);
}
.overview-mini-green  { border-left-color: var(--safe); }
.overview-mini-yellow { border-left-color: var(--medium); }
.overview-mini-red    { border-left-color: var(--critical); }
.overview-mini-unknown { border-left-color: var(--border); opacity: 0.92; }
.overview-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0.4rem;
}
.overview-mini-title {
  font-size: 0.86rem;
  font-weight: 750;
  color: var(--text);
}
.overview-chip {
  display: inline-flex;
  align-items: center;
  max-width: 55%;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text-muted);
}
.overview-chip-green  { background: var(--safe-bg); color: var(--safe); border-color: rgba(132,237,166,0.35); }
.overview-chip-yellow { background: var(--medium-bg); color: var(--medium); border-color: rgba(176,212,238,0.35); }
.overview-chip-red    { background: var(--critical-bg); color: var(--critical); border-color: rgba(35,31,32,0.25); }
.overview-mini-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
}
.overview-bullets {
  margin: 0;
  padding-left: 1.2rem;
}
.overview-bullet { margin-bottom: 0.4rem; line-height: 1.45; }
.overview-fallback { display: none; }

/* Critical findings: bold impact first, higher-contrast detail */
.issue-impact {
  font-size: 0.98rem;
  font-weight: 750;
  color: var(--text);
  line-height: 1.35;
}
.issue-detail {
  font-size: 0.86rem;
  color: var(--text);
  opacity: 0.88;
  line-height: 1.5;
  padding-left: 2px;
}

/* Recommendations groups */
.recommendations-list > .rec-group {
  list-style: none;
  display: block;
  margin: 0 0 0.85rem;
  padding: 0;
}
.recommendations-list > .rec-group::before { display: none; content: none; }
.rec-group-title {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
  color: var(--text);
}
.rec-group-now .rec-group-title { color: var(--critical); }
.rec-group-later .rec-group-title { color: var(--text-muted); }
.rec-group-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: rec-counter;
}
.rec-group-list .rec-item { counter-increment: rec-counter; }
.rec-group-list .rec-item::before {
  content: counter(rec-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 50%;
  background: rgba(79, 85, 226, 0.14);
  border: 1px solid rgba(79, 85, 226, 0.3);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 2px;
}
.rec-text {
  color: var(--text);
}

/* Attacker worst-case bullets */
.attacker-worst-case-bullets {
  margin: 0 0 8px;
  padding-left: 1.15rem;
  color: var(--critical);
}
.attacker-worst-case-bullet {
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.45;
  margin-bottom: 0.35rem;
}

/* Collapse unknown traffic lights */
.tl-unknown-details {
  margin-top: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  background: color-mix(in srgb, var(--bg-hover) 70%, transparent);
  opacity: 0.85;
}
.tl-unknown-summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--text-muted);
}
.tl-unknown-note {
  margin: 0.5rem 0 0.65rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
}
.tl-unknown-cards { margin-top: 6px; }
.exec-scoring-version[hidden] { display: none !important; }

.tl-column-muted { opacity: 0.62; }

/* Hide scoring version from executive surfaces */
.exec-scoring-version { display: none !important; }

/* De-emphasize unchecked diagnostic cards */
.card-unchecked { opacity: 0.78; }

#boot-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#boot-view[hidden] { display: none !important; }