/* ==========================================
   PUETTGEN CONSULTING — App Styles (2×2)
   ========================================== */

/* ---- Design tokens ---- */
:root{
  /* Brand & semantic */
  --brand: #0072CE;
  --brand-hover:#005ba1;
  --brand-active:#004785;

  --success:#16a34a;        --success-bg:#dcfce7;  --success-text:#15803d;
  --warn:#d97706;           --warn-bg:#fef3c7;     --warn-text:#92400e;
  --danger:#dc2626;         --danger-bg:#fef2f2;   --danger-text:#991b1b;

  /* Chart colours (used in 2×2 / scatter) */
  --blue:#2f80ed;
  --red:#ef4444;

  /* Neutrals */
  --bg:#fafafa; --card:#ffffff;
  --text:#1f2937; --muted:#6b7280; --muter:#9ca3af;
  --line:#e5e7eb; --line-2:#d1d5db;

  /* Radius / Shadow / Timing */
  --r-sm:.375rem; --r-md:.5rem; --r-lg:.75rem; --r-xl:1rem; --r-full:9999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.05);
  --shadow-md:0 4px 10px rgba(0,0,0,.08);
  --focus:0 0 0 3px rgba(59,130,246,.25);

  /* Spacing */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem;
  --s8:2rem; --s10:2.5rem; --s12:3rem;
}

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

html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

img { max-width:100%; height:auto; display:block; }

/* iOS keeps zooming if <16px on inputs; keep >=16px */
input[type="text"], select { font-size:16px; }

/* Focus */
:focus-visible { outline:2px solid #3b82f6; outline-offset:2px; }

/* ---- Layout ---- */
.container { max-width:1200px; margin:0 auto; padding:var(--s4); }
.container--narrow { max-width:960px; }

.header { margin-bottom:var(--s6); }
.header--horizontal {
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
}

.brand__logo { height:56px; width:auto; }

.lang { margin:0; }
.lang select{
  min-width:110px;
  padding:var(--s2) var(--s3);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:#fff;
  color:var(--text);
}
.lang select:focus { box-shadow:var(--focus); border-color:var(--brand); }

.brand__title { margin:.25rem 0 0; font-weight:700; font-size:1.75rem; }

.lead { color:var(--muted); margin:.25rem 0 0; }

/* ---- Forms ---- */

/* Plain form wrapper: no outer card/border */
.form-plain { margin:0 0 var(--s8); }

/* field groups */
.form-group { margin-bottom:var(--s5); }
.form-label { display:block; font-weight:600; margin-bottom:var(--s2); }
.form-label--required::after { content:" *"; color:var(--danger); }

.input {
  width:100%; max-width:720px;
  padding:var(--s3) var(--s4);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:#fff;
}
.input:hover { border-color:var(--line-2); }
.input:focus { border-color:var(--brand); box-shadow:var(--focus); outline:0; }

.form-hint { display:block; color:var(--muted); font-size:.9rem; margin-top:.35rem; }
.form-error { color:var(--danger-text); font-size:.9rem; margin-top:.35rem; }
.form-field--error { border-color:var(--danger) !important; }

/* Questions grid */
.questions { display:grid; gap:var(--s4); margin-top:var(--s4); }

.q{
  display:grid;
  grid-template-columns: 1fr auto;   /* label left, select right */
  gap:var(--s3);
  align-items:center;
  padding:var(--s4);
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--line);
}
.question__label{ margin:0; }
.question__select{
  width:auto; min-width:180px; justify-self:start;
  padding:var(--s3) var(--s4);
  border:1px solid transparent;
  border-radius:var(--r-md);
  background:#fff;
}
.question__select:hover{ border-color:transparent; }
.question__select:focus{
  border-color:transparent;
  box-shadow:none;
  outline:2px solid #3b82f6;
  outline-offset:2px;
}

/* Cross-browser cleanup for the answer <select> + chevron */
select.question__select{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none !important;
  box-shadow: none !important;
  background-color: #fff;
  padding-right: 2.25rem; /* space for chevron */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7l5 5 5-5' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: 16px 16px;
}
select.question__select:hover{
  border: none !important;
  box-shadow: none !important;
}
select.question__select:focus{
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

.scale-reminder { margin-top:var(--s3); }

/* Consent */
.checkbox{ display:flex; gap:var(--s3); align-items:flex-start; margin-top:var(--s4); }
.checkbox__input{ width:18px; height:18px; accent-color:var(--brand); margin-top:.25rem; }
.checkbox__label{ color:var(--muted); }

/* Buttons */
.btn{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:var(--s3) var(--s4);
  border:none; border-radius:var(--r-md);
  background:var(--brand); color:#fff; font-weight:700; cursor:pointer;
  min-height:44px; min-width:44px;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{ background:var(--brand-hover); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn:active{ background:var(--brand-active); transform:none; }
.btn:focus-visible{ box-shadow:var(--focus); }

.btn--secondary{
  background:#fff; color:var(--text); border:1px solid var(--line);
}
.btn--secondary:hover{ background:#f7f7f7; border-color:var(--line-2); }

.btn--ghost{
  background:transparent; color:var(--brand); border:1px solid transparent;
}
.btn--ghost:hover{ background:#eef4fb; }

.btn-group{ display:flex; gap:var(--s2); margin-top:var(--s4); }
.btn-group--end{ justify-content:flex-end; }

/* ---- Tables (used by results/admin) ---- */
.table-container{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; }
.table{ width:100%; border-collapse:collapse; }
.table th, .table td{ padding:var(--s3) var(--s4); border-bottom:1px solid var(--line); text-align:left; }
.table thead th{ background:#f9fafb; font-weight:700; font-size:.85rem; letter-spacing:.02em; }
.table--compact th, .table--compact td{ padding:var(--s2) var(--s3); }

/* Badges */
.badge{ display:inline-flex; align-items:center; padding:.2rem .5rem; border-radius:var(--r-full); font-size:.8rem; font-weight:600; }
.badge--success{ background:var(--success-bg); color:var(--success-text); }
.badge--warning{ background:var(--warn-bg); color:var(--warn-text); }
.badge--danger{ background:var(--danger-bg); color:var(--danger-text); }

/* ---- Chart area (generic) ---- */
.chart-header{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); margin-bottom:var(--s3); }
.chart-actions{ display:flex; gap:var(--s2); }
.chart-container{ position:relative; min-height:360px; height:50vh; max-height:520px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); }
.chart-loading, .chart-error{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--muted); font-weight:600; }

/* Legends (shared; 2×2 uses dot-*; radar uses sw-*) */
.legend { display:flex; gap:16px; align-items:center; color:var(--muted); font-size:.9rem; margin:6px 0 0; flex-wrap:wrap; }
.chip { display:inline-flex; gap:8px; align-items:center; white-space:nowrap; }
.sw-you { width:26px; height:10px; border-radius:3px; background:rgba(47,128,237,.18); box-shadow: inset 0 0 0 2px var(--blue); }
.sw-team { width:26px; height:0; border-top:3px dashed var(--red); }
.dot-blue { width:10px; height:10px; border-radius:50%; background:var(--blue); display:inline-block; box-shadow:0 0 0 2px rgba(47,128,237,.18); }
.dot-red  { width:10px; height:10px; border-radius:50%; background:var(--red);  display:inline-block; box-shadow:0 0 0 2px rgba(239,68,68,.18); }

/* ---- Utility ---- */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.footer{
  margin:var(--s8) 0 var(--s6);
  color:var(--muted);
  text-align:center;
  padding-top:var(--s6);
  border-top:1px solid var(--line);
}

/* ---- Responsive ---- */
@media (max-width: 720px){
  .q{ grid-template-columns:1fr; }
  .question__select{ width:100%; min-width:0; }
  .chart-container{ height:360px; }
}

@media (max-width: 520px){
  .container{ padding:var(--s3); }
  .brand__logo{ height:48px; }
}
/* Remove stray top rule if present */
.section-divider, hr.top, .top-rule { display:none; }

/* Remove frame around question list */
.questionnaire, .question-list, .cards-wrap, .frame {
  border: none !important;
  box-shadow: none !important;
  background: transparent;
}

/* Keep the language switch right-aligned without reflowing other elements */
.lang-switch { float: right; margin-left: 1rem; }

/* --- Print: A4 single page, sticky thead, avoid splits, hide UI noise --- */
@media print {
  @page { size: A4 portrait; margin: 10mm; }
  .no-print { display: none !important; }
  thead { display: table-header-group; }
  tr, img, canvas, .card, .q { break-inside: avoid; }
  a[href]::after { content: none !important; }
}