/* Věřím tomu? — design-system foundation (F1).
   Authority: docs/design/FRONTEND_DESIGN_DIRECTION.md (UX/layout) and
   docs/design/DESIGN_SYSTEM.md (tokens). Contrast values measured with
   scripts/contrast-check.js; see DESIGN_SYSTEM.md for the ratios.
   CSP: style-src 'self', img-src 'self' — no inline styles, no data: URIs. */

:root {
  /* Identity */
  --brand: #6c63ff;          /* decorative identity only (dots, bars, borders); never essential text */
  --brand-action: #3f35b8;   /* buttons (white text 8.70:1), links on cream 8.42:1 */
  --brand-action-hover: #362da3;
  --ink: #0f1b3d;            /* essential text */
  --accent: #38bdf8;         /* Robo blue: decorative only, never the sole carrier of meaning */

  /* Surfaces */
  --cream: #fffce5;          /* canonical page background (FDD §5.3) */
  --surface: #ffffff;
  --cool-background: #f8faff;
  --brand-soft: #f0eeff;
  --blue-soft: #eef8ff;      /* Robo / system information */
  --border: #e5e3f0;         /* decorative card borders */
  --field-border: #7a7596;   /* form-field boundary, >= 3:1 on every surface */
  --muted: #3f4c63;          /* secondary text, >= 7:1 on every surface */
  --muted-reference: #64748b;/* styleboard reference only; not used in UI */
  --disabled: #55506e;       /* disabled button background (white text 7.61:1) */
  --focus-ring: #3730a3;     /* keyboard focus, >= 8.69:1 on every surface */

  /* Outcome families (FDD §10). Families are distinguished by text and icon,
     never by colour alone. Concern is not alarm-red; knowledge is not a "safe" end. */
  --concern-ink: #7c3f0b;        /* text: 7.89:1 cream, 8.16:1 white, 7.29:1 on concern surface */
  --concern-accent: #b45309;     /* icons/borders only (4.48–5.02:1); NOT for essential text */
  --concern-surface: #fdf1d8;
  --knowledge-ink: #3f4f66;      /* text: 8.05:1 cream, 8.33:1 white, 7.41:1 on knowledge surface */
  --knowledge-accent: #56677f;   /* icons/borders only (>= 5.05:1) */
  --knowledge-surface: #eef2f7;
  /* Green is reserved for a COMPLETED SAFE USER ACTION, never for an analysis outcome. */
  --safe-action-ink: #14532d;    /* text: 8.81:1 cream, 9.11:1 white, 8.10:1 on safe-action surface */
  --safe-action-accent: #15803d; /* icons/borders only (>= 4.39:1) */
  --safe-action-surface: #e7f5ec;

  /* Deprecated aliases (kept so existing names resolve; do not use for new work). */
  --success: var(--safe-action-accent);
  --attention: var(--concern-accent);
  --risk: var(--concern-accent);
  --amber-soft: var(--concern-surface);
  --risk-soft: var(--knowledge-surface);
  --mint-soft: var(--knowledge-surface);

  /* Typography and rhythm */
  --text-body: 1rem;         /* 18 px at the default browser font size */
  --text-result: 1.125rem;   /* ~20 px for result-oriented text */
  --measure: 65ch;
  --target-min: 48px;
  --target-primary: 56px;
  --radius-control: 12px;
  --radius-bubble: 20px;
  --radius-card: 28px;
  --shadow-soft: 0 12px 36px rgb(35 27 93 / 7%);

  /* 112.5% = 18 px by default while respecting the user's browser font setting. */
  font-size: 112.5%;
  font-family: ui-rounded, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
}
* { box-sizing: border-box; }
body { margin: 0; font-size: var(--text-body); }
/* Extremely subtle CSS-only paper grain (<= 1.2% ink). Behind all content, never on text ancestors. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 17% 23%, rgb(15 27 61 / 1.2%) 0 1px, transparent 1px 7px),
    repeating-radial-gradient(circle at 71% 64%, rgb(15 27 61 / 0.8%) 0 1px, transparent 1px 11px);
}
@media (prefers-contrast: more), print { body::before { display: none; } }

a { color: var(--brand-action); text-underline-offset: 4px; }
button, input, select, textarea { font: inherit; }
button, a, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
button:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline-width: 4px; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: 16px; top: -120px; z-index: 10;
  display: inline-flex; align-items: center; min-height: var(--target-min);
  background: var(--surface); padding: 12px 20px; border-radius: 12px;
}
.skip-link:focus { top: 12px; }

.site-header, footer {
  max-width: 1184px; margin: auto; padding: 24px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.site-header { border-bottom: 1px solid var(--border); }
.site-header > a:not(.brand), footer a { display: inline-flex; align-items: center; min-height: var(--target-min); }
.brand { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; justify-content: center; min-height: var(--target-min); line-height: 1.2; }
.wordmark { font-size: 2rem; font-weight: 850; letter-spacing: -.055em; white-space: nowrap; }
.wordmark > span { color: var(--brand-action); }
.tagline { font-size: var(--text-body); margin-top: 5px; font-weight: 600; }
nav { display: flex; align-items: center; gap: 28px; font-size: var(--text-body); font-weight: 650; }
nav a { text-decoration: none; min-height: var(--target-min); display: inline-flex; align-items: center; }
.nav-happened { border: 2px solid var(--ink); border-radius: 999px; background: var(--surface); color: var(--ink); padding: 6px 18px; font-weight: 750; white-space: nowrap; }
.nav-happened:hover { background: var(--knowledge-surface); }

main { max-width: 1184px; margin: auto; padding: 0 32px 48px; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.025em; }
h1 { font-size: clamp(2.3rem, 4.6vw, 3.8rem); margin: 20px 0; }
h2 { font-size: 1.6rem; margin: 0 0 14px; }
h3 { font-size: 1.15rem; margin: 0 0 14px; }

/* Readable line length for running text. */
.hero-lead, .panel p, .panel li, .privacy-page p, details p, .steps p, .section-lead, .happened-band p { max-width: var(--measure); }

.eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: var(--text-body); color: var(--muted); font-weight: 750; margin: 0 0 12px; }

.speech-bubble {
  background: var(--surface); border: 1px solid var(--border); border-radius: 24px 24px 24px 6px;
  padding: 20px 24px; box-shadow: var(--shadow-soft); position: relative; z-index: 1; margin: 0 0 -12px 0; max-width: 330px;
}
.speech-bubble > p:last-child { font-size: 1.2rem; font-weight: 650; margin: 8px 0 0; color: var(--brand-action); }
.speaker { font-size: var(--text-body); font-weight: 750; letter-spacing: .01em; margin: 0 0 6px; color: var(--muted); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 32px; margin: 0 0 32px; }
.notice { background: var(--cool-background); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 14px 18px; font-size: var(--text-body); color: var(--muted); }

label { display: block; font-weight: 650; margin: 16px 0 7px; }
select, textarea {
  width: 100%; border: 2px solid var(--field-border); border-radius: var(--radius-control);
  padding: 12px 14px; background: var(--surface); color: var(--ink); min-height: var(--target-min);
}
textarea { min-height: 160px; resize: vertical; }
textarea::placeholder { color: var(--muted); }
button { cursor: pointer; min-height: var(--target-min); padding: 12px 20px; border: 0; border-radius: var(--radius-control); }
button[type=submit] {
  background: var(--brand-action); color: white; width: 100%; min-height: var(--target-primary); font-weight: 750;
  display: flex; align-items: center; justify-content: space-between; box-shadow: 0 5px 14px rgb(63 53 184 / 16%);
}
button[type=submit]:hover { background: var(--brand-action-hover); }
button:disabled { background: var(--disabled); cursor: wait; box-shadow: none; }
.hint { font-size: var(--text-body); color: var(--muted); }
.consent { display: flex; align-items: flex-start; gap: 10px; background: var(--brand-soft); border-radius: 12px; padding: 12px; margin-bottom: 16px; font-size: var(--text-body); font-weight: 400; min-height: var(--target-min); }
input[type=checkbox] { width: 24px; height: 24px; flex-shrink: 0; margin: 4px 0 0; accent-color: var(--brand-action); }
#status { font-size: var(--text-body); color: var(--muted); }
#status:empty { margin: 0; }
/* Technical errors are calm system information, not a concern verdict. */
#error { color: var(--ink); background: var(--knowledge-surface); padding: 16px; border-radius: 12px; border: 1px solid var(--knowledge-accent); }

.system-bubble { display: flex; gap: 14px; padding: 20px; border: 1px solid #cfe5f3; border-radius: 20px; background: var(--blue-soft); margin: 20px 0; }
.system-bubble p:not(.speaker) { margin: 0; font-size: var(--text-body); }
.system-bubble > div { flex: 1; }
.progress-track { height: 7px; overflow: hidden; border-radius: 10px; background: #dde8f7; margin-top: 16px; }
.progress-track span { display: block; width: 36%; height: 100%; border-radius: 10px; background: var(--brand); animation: progress 1.7s ease-in-out infinite alternate; }
@keyframes progress { from { transform: translateX(0); } to { transform: translateX(170%); } }

.examples { border-top: 1px solid var(--border); margin-top: 24px; padding-top: 12px; }
.examples > p { font-size: var(--text-body); color: var(--muted); }
.example-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.example-buttons button { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: var(--text-body); background: var(--cool-background); color: var(--ink); border: 1px solid var(--border); }
.example-buttons button:hover { border-color: var(--brand-action); }
.example-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; }
.violet { background: var(--brand-soft); color: var(--brand-action); }
.rose { background: var(--concern-surface); color: var(--concern-ink); }
/* No green/"safe" colouring for an example message (FDD §10.3). */
.mint { background: var(--knowledge-surface); color: var(--knowledge-ink); }

/* F5a — interim neutral result (FDD §10): no score, no gauge, no outcome family
   until the backend semantic outcome (C4) exists. Action first. */
.result-lead { border: 2px solid var(--border); border-radius: 22px; padding: 20px 24px; background: var(--surface); }
.result-heading { display: flex; align-items: center; gap: 14px; }
.result-takeaway { font-size: var(--text-result); font-weight: 700; margin: 12px 0 0; }
#engine-note { margin: 8px 0 0; }
#next-check { width: 100%; margin-top: 16px; }
.result-heading h2 { margin: 0; }
.result-now h3 { font-size: var(--text-body); color: var(--muted); margin: 16px 0 4px; }
.result-now .primary-action { font-size: 1.25rem; font-weight: 700; line-height: 1.5; margin: 0; }
.result-now .secondary-actions { margin-top: 12px; }
.result-route { margin-top: 16px; min-height: var(--target-primary); background: var(--brand-action); color: #fff; font-weight: 700; }
.result-route:hover { background: var(--brand-action-hover); }
.result-card { border-radius: 20px; padding: 20px 24px; background: var(--cool-background); border: 1px solid var(--border); margin-top: 20px; }
.result-card h3 { margin: 0 0 8px; }
.result-card #summary { margin: 0; font-size: var(--text-result); }
.unknowns-card { background: var(--knowledge-surface); border-color: var(--knowledge-accent); }
.verification-card { background: var(--brand-soft); scroll-margin-top: 16px; }
.verification-card h3:focus { outline-offset: 4px; }
ul, ol { padding-left: 24px; margin-bottom: 0; }
li { padding: 5px 0; font-size: var(--text-body); }
.result li { font-size: var(--text-result); }
li::marker { color: var(--brand-action); font-weight: 700; }
details { border-top: 1px solid var(--border); padding-top: 20px; margin-top: 24px; font-size: var(--text-body); }
summary { font-weight: 700; cursor: pointer; color: var(--brand-action); min-height: var(--target-min); align-content: center; }

.how-it-works { text-align: center; padding: 24px 0 0; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0; }
.steps { list-style: none; padding: 0; }
.steps > li { border: 1px solid var(--border); background: var(--surface); border-radius: 24px; padding: 24px; text-align: left; }
.steps p { font-size: var(--text-body); color: var(--muted); margin-bottom: 0; }
.step-number { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-action); font-weight: 750; margin-bottom: 16px; }
.closing-note { font-size: var(--text-body); color: var(--muted); max-width: var(--measure); margin-inline: auto; }
footer { border-top: 1px solid var(--border); font-size: var(--text-body); color: var(--muted); }

.privacy-page { max-width: 900px; padding-top: 40px; }
.privacy-page h1 { font-size: 2.5rem; }
.privacy-page h2 { font-size: 1.25rem; margin-top: 32px; }
.privacy-page p { font-size: var(--text-body); }

@media (max-width: 800px) {
  .site-header, footer { padding: 20px 24px; }
  main { padding: 0 24px 32px; }
  nav { gap: 16px; }
  .steps { gap: 12px; }
  .steps > li { padding: 20px; }
}
@media (max-width: 600px) {
  .site-header, footer { padding: 12px 16px; gap: 12px; }
  main { padding: 0 16px 32px; }
  .wordmark { font-size: 1.5rem; white-space: nowrap; }
  .site-header .tagline { display: none; }
  .nav-secondary { display: none; }
  nav { gap: 12px; }
  .speech-bubble { padding: 16px; margin: 0; }
  .speech-bubble > p:last-child { font-size: 1.1rem; }
  .panel { padding: 22px 18px; border-radius: 22px; }
  .example-buttons { gap: 8px; }
  .example-buttons button { flex: 1 1 180px; }
  .steps { grid-template-columns: 1fr; }
  .result-lead, .result-card { padding: 16px 18px; }
  .result-route { width: 100%; }
  .steps { gap: 12px; margin: 24px 0; }
  .steps > li { padding: 20px; }
  .privacy-page { padding-top: 24px; }
  .privacy-page h1 { font-size: 2rem; }
  footer { flex-wrap: wrap; }
}
/* Reduced motion: no essential information depends on animation (the status text
   carries the state); decorative motion and transitions are removed. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
  .progress-track span { animation: none; width: 100%; opacity: .6; }
}

/* Approved production character files; scale the whole image without crop or filters. */
.character-avatar { display: block; width: 64px; height: auto; flex-shrink: 0; object-fit: contain; align-self: flex-start; }
.character-heading, .operation-status { display: flex; align-items: center; gap: 14px; }
.character-heading { margin-bottom: 14px; }
.character-heading h3 { margin: 0; }
.operation-status:not(:has(#status:empty)) { margin-top: 12px; }
.operation-status .character-avatar { width: 44px; }
/* Error panel: calm system information (Robo), not alarm red. */
.error-panel { display: flex; align-items: flex-start; gap: 14px; padding: 16px; margin-top: 16px; border: 1px solid var(--knowledge-accent); border-radius: 16px; background: var(--knowledge-surface); }
.error-panel #error { padding: 0; margin: 0; background: none; border: 0; }
.error-panel > div { flex: 1; min-width: 0; }
.error-panel #error p { margin: 0 0 8px; }
.error-panel .error-title { font-weight: 750; }
.error-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.secondary-action { background: #fff; color: var(--brand-action); border: 2px solid var(--brand-action); font-weight: 700; }
.secondary-action:hover { background: var(--cool-background); }
/* F4 loading: the button stays focusable while busy; a repeated submit is ignored. */
button[type=submit][aria-disabled=true] { background: var(--disabled); cursor: progress; box-shadow: none; }
.system-bubble .processing-title { font-weight: 750; }
.operation-status.is-busy:not(:has(#status:empty)) { margin-top: 0; }
.operation-status.is-busy #status { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 400px) {
  .error-panel, .system-bubble { flex-direction: column; gap: 8px; }
}
@media (max-width: 600px) {
  .character-avatar { width: 48px; }
  .character-heading { gap: 10px; }
}


/* F2 — homepage structure: the analysis tool is the hero (FDD §7). */
.hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; gap: 48px; padding: 24px 0 48px; }
.hero-tool { min-width: 0; }
.hero-tool h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); margin: 0 0 12px; }
.hero-lead { font-size: var(--text-result); margin: 0 0 16px; }
.tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 20px 24px; }
.tool-card form > label:first-of-type { margin-top: 0; }
.tool-card button[type=submit] { margin-top: 16px; }
.tool-card .hint { margin: 8px 0 0; }
.tool-card .notice { margin: 16px 0 0; }
.safety-line { margin: 16px 0 0; font-weight: 650; }
.copy-help { margin-top: 8px; padding-top: 0; border-top: 0; }
.copy-help ol { margin-top: 4px; }

/* Loan entry sits below the main button: the first view is unchanged. */
.loan-entry { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; background: var(--cool-background); color: var(--ink); border: 2px solid var(--border); font-weight: 650; text-align: left; }
.loan-entry:hover { border-color: var(--brand-action); }
.loan-followup .secondary-action { margin-top: 4px; }

/* Věrka + Robo: two separate approved assets, each shown whole (no crop, no filter). */
.hero-guides { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }
.hero-guides .speech-bubble { margin: 0; max-width: 340px; }
.hero-guides .speech-bubble > p:last-child { color: var(--ink); }
.hero-duo { display: flex; align-items: flex-end; justify-content: center; gap: 8px; width: 100%; }
.hero-duo img { display: block; height: auto; object-fit: contain; min-width: 0; }
.hero-verka { width: 62%; max-width: 288px; }
.hero-robo { width: 38%; max-width: 176px; }

/* "Už se to stalo?" — first-class entry; damage-control content arrives only after verification (F9). */
.happened-band { background: var(--ink); color: #ffffff; border-radius: var(--radius-card); padding: 28px 32px; margin: 0 0 40px; border-left: 8px solid var(--concern-accent); }
.happened-band h2 { color: #ffffff; margin: 0 0 8px; }
.happened-band p { margin: 0 0 8px; }
.happened-link { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target-min); color: #ffffff; font-weight: 750; text-underline-offset: 4px; }
.happened-link:focus-visible { outline-color: #ffffff; }

.situations, .capabilities { margin: 0 0 40px; }
.section-lead { margin: 0 0 20px; color: var(--muted); }
.situation-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* F5b M3: informational rows, not card-like boxes; nothing here is interactive. */
.situation-list li { border-left: 4px solid var(--knowledge-accent); padding: 4px 0 4px 16px; display: flex; flex-direction: column; gap: 6px; }
.situation-list span { color: var(--muted); }
.situations .examples { border-top: 0; margin-top: 20px; padding-top: 0; }

.how-it-works { padding: 0; margin: 0 0 40px; text-align: left; }
.how-it-works .closing-note { margin-inline: 0; }
.how-it-works h2 { margin-bottom: 0; }
.steps { margin: 20px 0; }

.capability-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.capability-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-bubble); padding: 20px 24px; }
.capability-card h3 { margin-bottom: 6px; }
.capability-card ul { margin-top: 0; }
.inputs-title { margin: 24px 0 8px; }
.input-status { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; max-width: 640px; }
.input-status li { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-control); padding: 10px 16px; }
.input-status span { color: var(--muted); }

footer nav { display: flex; gap: 20px; flex-wrap: wrap; }

@media (max-width: 960px) {
  .situation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .hero { grid-template-columns: 1fr; gap: 24px; padding: 24px 0 32px; }
  .hero-guides { flex-direction: row; justify-content: center; align-items: flex-end; flex-wrap: wrap; }
  .hero-duo { width: auto; flex: 0 1 360px; }
}
@media (max-width: 600px) {
  .hero { padding: 12px 0 24px; gap: 20px; }
  .hero-tool h1 { font-size: 1.75rem; margin-bottom: 6px; }
  .hero-lead { font-size: var(--text-body); margin-bottom: 12px; }
  .tool-card { padding: 16px; border-radius: 20px; }
  .tool-card label { margin: 8px 0 4px; }
  .tool-card textarea { min-height: 6rem; height: 7.5rem; }
  .tool-card button[type=submit] { margin-top: 12px; }
  .hero-guides { flex-direction: column; }
  .hero-duo { flex: none; width: 100%; max-width: 320px; }
  .happened-band { padding: 22px 18px; border-left-width: 6px; }
  .situation-list, .capability-columns { grid-template-columns: 1fr; }
  /* F5b M7: label above status on every row, not only where it happens to wrap. */
  .input-status li { flex-direction: column; gap: 2px; }
}
@media (max-width: 359px) {
  /* F5b M5: keep the header on one line; wrapping stays as an overflow fallback. */
  .site-header { flex-wrap: wrap; gap: 8px; padding-left: 12px; padding-right: 12px; }
  .wordmark { font-size: 1.25rem; }
  .nav-happened { padding: 6px 12px; }
}
@media (max-width: 700px) {
  .nav-secondary { display: none; }
}

/* M9 — „Už se to stalo?“ static guide (/uz-se-to-stalo). No JavaScript; native <details>. */
.guide-page { max-width: 760px; padding-top: 24px; }
.guide-page h1 { font-size: clamp(1.75rem, 5vw, 2.5rem); margin: 0 0 8px; }
.guide-lead { font-size: var(--text-result); margin: 0 0 20px; }
.guide-page h2 { font-size: 1.25rem; margin: 0 0 8px; }
.guide-first, .guide-urgent, .guide-keep { border-radius: var(--radius-card); padding: 20px 24px; margin: 0 0 20px; }
.guide-first { background: var(--surface); border: 1px solid var(--border); border-left: 8px solid var(--concern-accent); }
.guide-first ol { margin: 0; }
.guide-urgent { background: var(--concern-surface); border: 2px solid var(--concern-accent); color: var(--ink); }
.guide-urgent p { margin: 0 0 8px; }
.guide-urgent p:last-child { margin: 0; }
.guide-call { display: inline-flex; align-items: center; justify-content: center; min-height: var(--target-min); min-width: 96px; padding: 8px 20px; margin-left: 4px; border-radius: var(--radius-control); background: var(--brand-action); color: #ffffff; font-weight: 800; font-size: 1.25rem; text-decoration: none; }
.guide-call:hover { background: var(--brand-action-hover); }
.guide-situations { margin: 0 0 20px; }
.guide-situations > p { margin: 0 0 12px; }
.guide-note { background: var(--knowledge-surface); border-left: 4px solid var(--knowledge-accent); border-radius: var(--radius-control); padding: 12px 16px; }
.guide-item { border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); margin: 12px 0 0; padding: 0; }
.guide-item summary { padding: 10px 16px; line-height: 1.4; }
.guide-item[open] summary { border-bottom: 1px solid var(--border); }
.guide-item ul { margin: 0; padding: 12px 20px 16px 40px; }
.guide-keep { background: var(--surface); border: 1px solid var(--border); }
.guide-keep ul { margin: 0 0 12px; }
.guide-keep p { margin: 0; }
.guide-disclaimer { color: var(--muted); }
.guide-back { display: inline-flex; align-items: center; gap: 8px; min-height: var(--target-min); font-weight: 750; }
@media (max-width: 600px) {
  .guide-page { padding-top: 16px; }
  .guide-first, .guide-urgent, .guide-keep { padding: 16px 18px; }
}
@media print {
  body { background: #ffffff; }
  body::before, .site-header > a:not(.brand), .guide-back { display: none; }
  .guide-first, .guide-urgent, .guide-keep, .guide-item { break-inside: avoid; box-shadow: none; }
  .guide-call { background: none; color: var(--ink); padding: 0; min-height: 0; }
  /* Print every situation, also closed ones, where the browser supports it. */
  .guide-item::details-content { content-visibility: visible; display: block; }
}

/* AI P0: who found what, what AI added, and safe steps when a check fails.
   Existing tokens only; meaning never depends on colour alone. */
.signal-group { font-size: var(--text-body); font-weight: 750; color: var(--knowledge-ink); margin: 16px 0 6px; }
.ai-card { border-left: 6px solid var(--knowledge-accent); }
.ai-card.is-uncertain { border-left-color: var(--concern-accent); }
.ai-uncertainty { font-weight: 700; margin: 8px 0; }
.ai-card.is-uncertain .ai-uncertainty { color: var(--concern-ink); }
.error-guidance { margin-top: 16px; padding: 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.error-guidance p { margin: 0 0 8px; }
.error-guidance ul { margin: 0 0 8px; padding-left: 1.2em; }
.error-guidance-title { font-weight: 750; }

/* Welcome with the original combined Verka/Robo artwork. */
.welcome { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:40px; padding:40px 0 32px; }
.welcome-copy { min-width:0; }
.welcome-eyebrow { color:var(--brand-action); font-weight:700; margin:0 0 18px; }
.welcome h1 { font-size:clamp(2.8rem,5.5vw,4.8rem); line-height:1.07; letter-spacing:-.045em; margin:0 0 24px; }
.welcome-intro { font-size:1.2rem; line-height:1.65; max-width:35rem; }
.welcome-team { color:var(--muted); max-width:34rem; }
.welcome-action { display:inline-flex; align-items:center; gap:22px; background:var(--brand-action); color:white; border-radius:14px; padding:16px 22px; font-weight:700; text-decoration:none; margin-top:10px; }
.welcome-action:hover { background:var(--brand-action-hover); }
.welcome-note { color:var(--muted); font-size:.9rem; margin:14px 0 0; }
.welcome-characters img { display:block; width:100%; height:auto; max-width:580px; margin:auto; }
.hero.analysis-section { display:block; max-width:840px; margin:0 auto; padding-top:32px; }
.analysis-section h2 { font-size:clamp(1.8rem,3vw,2.6rem); margin:0 0 12px; }
#analysis-form { scroll-margin-top:24px; }
@media(max-width:760px) {
 .welcome { grid-template-columns:1fr; gap:24px; padding-top:24px; }
 .welcome h1 { font-size:clamp(2.6rem,10vw,4rem); }
 .welcome-characters img { max-width:420px; }
 .welcome-intro { font-size:1.1rem; }
 .welcome-action { width:100%; justify-content:center; box-sizing:border-box; }
 .welcome-note { line-height:1.6; }
}

.check-choice{max-width:1120px;margin:0 auto;padding:48px 24px;scroll-margin-top:24px}.check-choice h2{font-size:clamp(28px,4vw,42px);margin:0 0 16px}.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}.choice-card{display:flex;flex-direction:column;gap:16px;padding:32px;background:#fff;border:2px solid #dedcf0;border-radius:28px;color:#131d41;text-decoration:none;box-shadow:0 8px 24px #29204f09;transition:transform .15s,border-color .15s}.choice-card:hover{transform:translateY(-4px);border-color:#4737bb}.choice-card:focus-visible{outline:3px solid #4737bb;outline-offset:5px}.choice-icon{display:grid;place-items:center;align-self:flex-start;min-width:56px;height:56px;border-radius:16px;background:#eeebff;color:#4737bb;font-size:26px;font-weight:800}.choice-loan .choice-icon{background:#fff1d4;color:#815111}.choice-card h3{font-size:28px;margin:0}.choice-card p{margin:0;line-height:1.65}.choice-explanation{color:#526078}.choice-link{margin-top:auto;padding-top:12px;color:#4737bb;font-weight:800;display:flex;justify-content:space-between;gap:16px}.flow-navigation{max-width:840px;margin:24px auto 0;padding:0 24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}.analysis-section h1{font-size:clamp(30px,5vw,48px);line-height:1.15;margin:0 0 20px}@media(max-width:760px){.choice-grid{grid-template-columns:1fr}.choice-card{padding:24px}.check-choice{padding:32px 20px}.choice-card h3{font-size:25px}}

.brand{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px}.brand-logo{display:block;width:64px;height:64px;object-fit:contain;flex-shrink:0}.brand-text{display:flex;flex-direction:column;justify-content:center;min-width:0}
@media(max-width:760px){.brand-logo{width:48px;height:48px}.brand{gap:10px}.welcome-copy{display:contents}.welcome-eyebrow{grid-row:1}.welcome h1{grid-row:2}.welcome-intro{grid-row:3;margin:0}.welcome-characters{grid-row:4}.welcome-team{grid-row:5;margin:0}.welcome-action{grid-row:6;margin:0}.welcome-note{grid-row:7;margin:0}}

/* UX audit: narrow phone headers must wrap before navigation overflows. */
@media(max-width:600px){.site-header{flex-wrap:wrap;padding:20px 16px;gap:14px}.site-header>.brand{min-width:0;max-width:100%}.site-header nav{width:100%;justify-content:flex-end;flex-wrap:wrap;gap:12px}.site-header .nav-happened{box-sizing:border-box;max-width:100%;white-space:normal;min-height:48px}.site-header .brand-logo{width:40px;height:40px}.site-header .wordmark{font-size:clamp(1.55rem,7vw,1.9rem)}.site-header .tagline{font-size:1rem}main{padding-left:16px;padding-right:16px}}
body[data-flow="loan"] .hint{font-size:1rem;line-height:1.65;color:#3a4664}
.not-found{max-width:760px;margin:32px auto;padding:32px}.not-found .character-avatar{width:120px;height:auto}.not-found-actions{display:flex;flex-wrap:wrap;gap:12px}.not-found-actions a{min-height:48px;padding:12px 18px;border:2px solid var(--brand-action);border-radius:14px;display:inline-flex;align-items:center;text-decoration:none;font-weight:700}

#sender,#offer-ico,#loan-ico,#message-ico{box-sizing:border-box;width:100%;min-height:48px;padding:12px 14px;font:inherit;color:var(--ink);background:var(--surface);border:2px solid #8b87a8;border-radius:12px}#sender:focus-visible,#offer-ico:focus-visible,#loan-ico:focus-visible,#message-ico:focus-visible{outline:3px solid var(--brand-action);outline-offset:3px}.result-now.is-phishing-warning{padding:20px;border:2px solid #bd7300;border-left-width:6px;border-radius:16px;background:#fff4d8}.result-now.is-phishing-warning .primary-action{font-size:1.2rem;font-weight:800;line-height:1.6}

/* The guides lead the result, with a small overlap above their cards. */
.result-lead, .result-card:has(> .character-heading) { overflow: visible; }
.result-lead { margin-top: 40px; }
.result-card:has(> .character-heading) { margin-top: 48px; }
.result-heading, .result-card > .character-heading { gap: 24px; min-height: 112px; }
.result-heading .character-avatar, .result-card > .character-heading .character-avatar {
  width: 144px; align-self: center; margin-top: -56px;
  position: relative; z-index: 1;
}
.result-heading h2, .result-card > .character-heading h3 { min-width: 0; }
@media (max-width: 600px) {
  .result-lead { margin-top: 32px; }
  .result-card:has(> .character-heading) { margin-top: 40px; }
  .result-heading, .result-card > .character-heading { gap: 14px; min-height: 90px; }
  .result-heading .character-avatar, .result-card > .character-heading .character-avatar {
    width: 104px; margin-top: -44px;
  }
}

.function-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.function-grid .choice-card{display:flex;flex-direction:column;min-width:0}.function-grid .choice-link{margin-top:auto;display:block;min-height:48px;padding:12px;border-radius:12px;background:var(--brand-action);color:#fff;text-decoration:none}.coming-soon{background:var(--cool-background);border-style:dashed}.feature-status{display:inline-block;padding:5px 12px;border-radius:20px;background:var(--brand-soft);color:var(--brand-action);font-weight:750}.web-entry{margin:32px 0}.web-entry input{display:block;width:100%;min-height:52px;padding:12px;border:2px solid var(--border);border-radius:12px;font:inherit}.web-entry button{min-height:52px;margin-top:12px}.web-entry label{font-weight:750}#web-domain{overflow-wrap:anywhere}.function-grid .choice-card:focus-within{outline:3px solid var(--brand-action);outline-offset:4px}@media(max-width:900px){.function-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.function-grid{grid-template-columns:1fr}.flow-navigation{flex-wrap:wrap;gap:12px}}

.eshop-source{padding:1rem;margin-top:1rem;border:1px solid #e2e1ef;border-radius:1rem;overflow-wrap:anywhere}.eshop-source a{display:block;margin:.7rem 0;min-height:44px}.eshop-source[data-status="VAROVÁNÍ"]{border:3px solid #be7100;background:#fff4d7}.eshop-source input{max-width:100%;min-height:48px}.eshop-source button{min-height:48px;margin:.5rem 0}

/* Stage 0: logo, wordmark and recovery CTA share one row on phones. */
@media(max-width:600px){
 .site-header{flex-wrap:nowrap;align-items:center;gap:12px;padding:16px}
 .site-header>.brand{flex:1 1 auto;min-width:0;gap:8px}
 .site-header .brand-logo{width:32px;height:32px}
 .site-header .wordmark{font-size:clamp(1.05rem,4.7vw,1.3rem);white-space:nowrap}
 .site-header .tagline{display:none}
 .site-header nav{width:auto;flex:0 0 auto;flex-wrap:nowrap;gap:0}
 .site-header .nav-secondary{display:none}
 .site-header .nav-happened{min-height:48px;padding:8px 10px;font-size:.875rem;white-space:nowrap}
}

/* Compact homepage introduction; existing guides and design tokens retained. */
.welcome { grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:32px; padding:32px 0 28px; }
.welcome-eyebrow { margin-bottom:14px; }
.welcome h1 { font-size:clamp(2.8rem,5.2vw,4.6rem); margin-bottom:20px; }
.welcome-intro { margin:0 0 18px; line-height:1.55; }
.welcome-team { font-size:1rem; line-height:1.6; margin:18px 0 0; }
.welcome-action { min-height:52px; box-sizing:border-box; margin-top:0; }
.welcome-characters { min-width:0; }
@media(max-width:760px) {
 .welcome { grid-template-columns:minmax(0,1fr); grid-template-areas:"eyebrow" "title" "intro" "action" "note" "characters" "team"; gap:16px; padding:24px 0; }
 .welcome-eyebrow { grid-area:eyebrow; margin:0; }
 .welcome h1 { grid-area:title; font-size:clamp(2.3rem,9.5vw,3.4rem); margin:0; }
 .welcome-intro { grid-area:intro; margin:0; }
 .welcome-action { grid-area:action; margin:0; }
 .welcome-note { grid-area:note; margin:0; text-align:center; }
 .welcome-characters { grid-area:characters; }
 .welcome-team { grid-area:team; margin:0; }
}
.context-link a{display:inline-flex;align-items:center;min-height:48px;font-weight:750;overflow-wrap:anywhere}

/* Responsive polish: preserve content instead of clipping oversized labels or links. */
main, .panel, .tool-card, .choice-card, .result-card, .flow-navigation { min-width:0; }
main h1, main h2, main h3, .choice-card p, .notice, .hint, .flow-navigation a { overflow-wrap:anywhere; }
button { max-width:100%; white-space:normal; overflow-wrap:anywhere; }
input[type=text], input[type=number], input[type=email], input[type=tel] { max-width:100%; min-width:0; }
.flow-navigation { padding-inline:0; }
.choice-link { align-items:center; min-height:48px; }
.result-heading > h1, .result-heading > h2, .character-heading > h2, .character-heading > h3 { min-width:0; flex:1; }
fieldset { min-inline-size:0; }
@media(min-width:601px) and (max-width:960px){
 .site-header { flex-wrap:wrap; gap:12px 24px; }
 .site-header nav { flex-wrap:wrap; gap:12px 20px; }
}
@media(max-width:600px){
 .check-choice { padding-inline:0; }
 .choice-card { padding:22px; gap:12px; }
 .choice-card h3 { font-size:1.4rem; }
 .flow-navigation { margin-top:16px; gap:8px 16px; }
 .flow-navigation a { flex:0 1 auto; }
 footer nav { gap:8px 16px; }
}
@media(max-width:359px){
 .site-header { padding-inline:12px; gap:8px; }
 .site-header .brand-logo { width:28px; height:28px; }
 .site-header .nav-happened { padding-inline:8px; font-size:.8rem; }
 .site-header .wordmark { font-size:1.05rem; }
}

/* Stage 7: information pages and shared footer; checker/character styles unchanged. */
.trust-page{max-width:960px;padding-top:28px}
.trust-page h1{font-size:clamp(1.9rem,4vw,3rem);overflow-wrap:anywhere}
.trust-page h2{margin-top:28px}
.trust-mission{font-size:1.2rem;font-weight:700;color:var(--brand-action)}
.trust-checkers{margin:0}.trust-checkers dt{font-weight:750;margin-top:20px}.trust-checkers dd{margin:4px 0 0;max-width:var(--measure)}
.trust-identity{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:16px 24px;align-items:center}.trust-identity dt{font-weight:750}.trust-identity dd{margin:0;overflow-wrap:anywhere}.trust-page .trust-identity a{padding:0;margin:0;min-height:48px;display:flex;align-items:center}.trust-identity dt,.trust-identity dd{min-height:48px;display:flex;align-items:center}
.trust-page a{min-height:48px;display:inline-flex;align-items:center;max-width:100%;overflow-wrap:anywhere}
.trust-footer{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding-block:28px}
.trust-footer-copy p{margin:0 0 8px;max-width:var(--measure)}
.trust-footer nav{flex-wrap:wrap;gap:8px 24px;align-items:flex-start}
.trust-footer a{min-height:48px;max-width:100%;overflow-wrap:anywhere;flex-wrap:wrap;gap:5px}
@media(max-width:600px){.trust-page{padding-top:20px}.trust-identity{grid-template-columns:minmax(0,1fr);gap:0}.trust-identity dt{min-height:0;margin-top:16px}.trust-identity dd{margin:0;min-height:48px}.trust-footer nav{gap:8px 16px}}

/* Stage 9 (SEO-2): static "Na co si dát pozor" sections, situation links and footer checks. No animation. */
.watch-out{max-width:840px;margin:32px auto}.watch-out h2{overflow-wrap:anywhere}.watch-out ul{padding-left:1.25rem}.watch-out li{margin:8px 0;max-width:var(--measure)}.watch-out-note{max-width:var(--measure)}
.watch-out-links p{margin:16px 0 4px;font-weight:750}.watch-out-links ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:4px 24px}.watch-out-links li{margin:0}.watch-out-links a{display:inline-flex;align-items:center;min-height:48px;max-width:100%;overflow-wrap:anywhere}
.situation-link{display:inline-flex;align-items:center;min-height:48px;font-weight:750;overflow-wrap:anywhere}