/* ─────────────────────────────────────────────────────────────
   Școala de Atașament — stiluri
   1. Tokens   2. Bază   3. Componente   4. Ecrane   5. Responsive
   ───────────────────────────────────────────────────────────── */

/* ═══════════════ 1. TOKENS ═══════════════ */
:root {
  --bg:         #FBF7F2;
  --surface:    #FFFFFF;
  --surface-2:  #F6F0E8;
  --ink:        #241E1A;
  --ink-2:      #574C44;
  --muted:      #8C8078;
  --line:       #E8DFD4;
  --line-soft:  #F0E9E0;

  --accent:     #B0563A;
  --accent-dk:  #8E4025;
  --accent-soft: rgba(176, 86, 58, 0.12);
  /* Culoarea textului așezat PE accent. Separată, pentru că în modul
     întunecat accentul e deschis și albul ar coborî la 3,1:1. */
  --on-accent:  #FFFFFF;

  --tone-no:    #6F8794;
  --tone-no-ring: rgba(111, 135, 148, 0.18);
  --tone-mid:   #9C9188;
  --tone-mid-ring: rgba(156, 145, 136, 0.18);
  --tone-yes:   #B0563A;
  --tone-yes-ring: rgba(176, 86, 58, 0.16);

  --r-secure:   #3F7D6B;
  --r-anxious:  #C2842A;
  --r-avoidant: #587BA6;
  --r-fearful:  #97598A;

  --shadow-sm: 0 1px 2px rgba(36, 30, 26, .05);
  --shadow:    0 2px 8px rgba(36, 30, 26, .06), 0 12px 32px -18px rgba(36, 30, 26, .22);
  --shadow-lg: 0 4px 14px rgba(36, 30, 26, .07), 0 24px 56px -28px rgba(36, 30, 26, .30);

  --radius:    18px;
  --radius-sm: 12px;

  --serif: 'Lora', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #17140F;
    --surface:   #201C17;
    --surface-2: #262019;
    --ink:       #F2EBE2;
    --ink-2:     #C6BAAD;
    --muted:     #9A8E83;
    --line:      #362E25;
    --line-soft: #2B2520;

    --accent:     #D9785A;
    --accent-dk:  #E89074;
    --accent-soft: rgba(217, 120, 90, 0.16);
    --on-accent:  #2A1510;

    --tone-no:  #8AA2AE;
    --tone-mid: #A99C91;
    --tone-yes: #D9785A;
    --tone-yes-ring: rgba(217, 120, 90, 0.20);

    --r-secure:   #5FA08B;
    --r-anxious:  #DCA24A;
    --r-avoidant: #7A9BC6;
    --r-fearful:  #B87BA8;

    --shadow:    0 2px 8px rgba(0, 0, 0, .3), 0 12px 32px -18px rgba(0, 0, 0, .6);
    --shadow-lg: 0 4px 14px rgba(0, 0, 0, .35), 0 24px 56px -28px rgba(0, 0, 0, .7);
  }
}

/* ═══════════════ 2. BAZĂ ═══════════════ */
*, *::before, *::after { box-sizing: border-box; }

/* atributul `hidden` bate orice display declarat de componente */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 2.9rem); margin: .2em 0 .5em; }
h1 em { font-style: italic; color: var(--accent); }
h2 { font-size: clamp(1.25rem, 1.1rem + .8vw, 1.55rem); margin: 2em 0 .6em; }
h3 { font-size: 1rem; font-family: var(--sans); font-weight: 600; margin: 0; }
p  { margin: 0 0 1.1em; }
a  { color: var(--accent-dk); text-underline-offset: .18em; }

main { flex: 1 0 auto; display: flex; flex-direction: column; }

.wrap { width: 100%; max-width: 1020px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 32px); }
.wrap-narrow { max-width: 680px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ═══════════════ 3. COMPONENTE ═══════════════ */

/* — antet — */
.site-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px clamp(20px, 5vw, 32px);
  max-width: 1020px; margin-inline: auto; width: 100%;
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand-mark {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 32% 32%, var(--accent), var(--accent-dk));
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.brand-name { font-family: var(--serif); font-size: 1.02rem; letter-spacing: .01em; white-space: nowrap; }
.site-head .btn-sm { white-space: nowrap; }

/* — butoane — */
.btn, .btn-ghost {
  font-family: var(--sans); font-size: 1rem; font-weight: 500;
  border-radius: 999px; cursor: pointer;
  transition: transform .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.btn {
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  padding: 13px 26px; box-shadow: var(--shadow-sm);
}
.btn:hover { background: var(--accent-dk); border-color: var(--accent-dk); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .65; cursor: default; transform: none; }
.btn-lg { padding: 16px 34px; font-size: 1.06rem; }
.btn-block { width: 100%; }

.btn-ghost {
  background: transparent; color: var(--ink); border: 1px solid var(--line);
  padding: 10px 20px;
}
.btn-ghost:hover { border-color: var(--muted); background: var(--surface); }
.btn-ghost:disabled { opacity: .4; cursor: default; }
.btn-sm { font-size: .88rem; padding: 7px 15px; }

.linklike {
  background: none; border: 0; padding: 0; font: inherit; color: var(--accent-dk);
  text-decoration: underline; text-underline-offset: .18em; cursor: pointer;
}

/* — text auxiliar — */
.eyebrow {
  font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 .4em;
}
.lede { font-size: 1.14rem; color: var(--ink-2); }
.microcopy { font-size: .86rem; color: var(--muted); line-height: 1.55; }

.disclaimer {
  font-size: .86rem; color: var(--muted); line-height: 1.6;
  border-left: 2px solid var(--line); padding-left: 14px; margin-top: 2.5em;
}
.disclaimer + .disclaimer { margin-top: 1.2em; }
.disclaimer-siguranta { border-left-color: var(--accent); }
.disclaimer-siguranta strong { color: var(--ink); font-weight: 600; }

.facts {
  list-style: none; display: flex; gap: clamp(18px, 5vw, 40px);
  padding: 20px 0; margin: 1.6em 0; border-block: 1px solid var(--line-soft);
  font-size: .9rem; color: var(--muted);
}
.facts li { display: flex; flex-direction: column; }
.facts-num { font-family: var(--serif); font-size: 1.5rem; color: var(--ink); line-height: 1.2; }

.callout {
  background: var(--surface-2); border-radius: var(--radius);
  padding: clamp(18px, 3vw, 26px); margin: 2em 0;
}
.callout-title { font-size: 1.02rem; font-family: var(--sans); font-weight: 600; margin: 0 0 .6em; }
.callout p:last-child { margin-bottom: 0; }
.callout-hint { font-size: .9rem; color: var(--muted); }
.callout-border { border-left: 3px solid var(--accent); background: var(--accent-soft); }

/* — carduri — */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-sm);
}
.card-title { font-size: 1.05rem; font-family: var(--sans); font-weight: 600; margin: 0 0 1em; }

/* ═══════════════ 4. ECRANE ═══════════════ */
.screen { display: none; }
.screen.is-active { display: block; flex: 1 0 auto; animation: rise .5s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* — intro — */
#screen-intro .wrap { padding-block: clamp(20px, 5vw, 48px) 64px; }
#screen-intro .js-start { margin-top: .5em; }
.js-resume-note { margin-top: 1em; }

/* — test — */
.progress {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  padding: 14px clamp(20px, 5vw, 32px) 10px;
  border-bottom: 1px solid var(--line-soft);
}
.progress-bar {
  max-width: 680px; margin-inline: auto;
  height: 4px; border-radius: 999px; background: var(--line); overflow: hidden;
}
.progress-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dk));
  transition: width .4s var(--ease);
}
.progress-label {
  max-width: 680px; margin: 8px auto 0;
  font-size: .8rem; color: var(--muted); letter-spacing: .02em;
}

/* ecranul de test umple înălțimea, ca afirmația să stea la mijloc */
#screen-quiz.is-active { display: flex; flex-direction: column; }
.quiz-body {
  padding-block: clamp(32px, 8vh, 72px) 48px;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.item-stage { min-height: 260px; display: flex; align-items: center; }
.item { width: 100%; animation: itemIn .32s var(--ease) both; }
.item.from-left { animation-name: itemInBack; }
.item.leave-left  { animation: itemOut .14s ease-in forwards; }
.item.leave-right { animation: itemOutBack .14s ease-in forwards; }

@keyframes itemIn     { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes itemInBack { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes itemOut     { to { opacity: 0; transform: translateX(-22px); } }
@keyframes itemOutBack { to { opacity: 0; transform: translateX(22px); } }

.item-text {
  font-family: var(--serif); font-size: clamp(1.3rem, 1.05rem + 1.3vw, 1.75rem);
  line-height: 1.38; text-align: center; margin: 0 0 clamp(28px, 6vh, 48px);
  outline: none;
}

.scale {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: center; justify-items: center;
  gap: 10px clamp(2px, 1.4vw, 10px);
  max-width: 460px; margin-inline: auto;
}
.scale-anchor { grid-row: 2; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.scale-anchor:first-child { grid-column: 1 / 4; justify-self: start; }
.scale-anchor:last-child  { grid-column: 5 / 8; justify-self: end; }

.opt {
  grid-row: 1;
  background: none; border: 0; cursor: pointer;
  padding: 10px 2px; display: flex; align-items: center; justify-content: center;
  min-height: 60px; width: 100%;
  -webkit-tap-highlight-color: transparent;
}
.opt-dot {
  width: var(--dot); height: var(--dot); border-radius: 50%;
  border: 2px solid var(--tone); opacity: .55; background: transparent;
  transition: transform .18s var(--ease), opacity .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
.opt-1, .opt-7 { --dot: 40px; }
.opt-2, .opt-6 { --dot: 34px; }
.opt-3, .opt-5 { --dot: 28px; }
.opt-4         { --dot: 22px; }

.opt-1, .opt-2, .opt-3 { --tone: var(--tone-no);  --ring: var(--tone-no-ring); }
.opt-4                 { --tone: var(--tone-mid); --ring: var(--tone-mid-ring); }
.opt-5, .opt-6, .opt-7 { --tone: var(--tone-yes); --ring: var(--tone-yes-ring); }

.opt:hover .opt-dot { opacity: .9; transform: scale(1.1); }
.opt.is-selected .opt-dot {
  opacity: 1; background: var(--tone); border-color: var(--tone);
  box-shadow: 0 0 0 6px var(--ring);
}
.opt:focus-visible { outline: none; }
.opt:focus-visible .opt-dot { outline: 2px solid var(--accent); outline-offset: 4px; opacity: 1; }

.scale-readout {
  text-align: center; margin: 22px 0 0; min-height: 1.6em;
  font-size: .92rem; color: var(--ink-2); font-weight: 500;
}

.quiz-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(28px, 6vh, 44px);
}
.quiz-hint { font-size: .82rem; color: var(--muted); }
kbd {
  font: inherit; font-size: .78rem; background: var(--surface); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--ink-2);
}

/* — poarta de email — */
#screen-gate .wrap { padding-block: clamp(20px, 5vw, 44px) 64px; }

.gate-preview {
  position: relative; margin: 2em 0; border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  max-height: 300px;
}
.gate-preview-inner {
  filter: blur(7px); opacity: .75; transform: scale(1.04); padding: 12px;
  display: flex; justify-content: center;
}
.gate-preview-inner .chart { width: auto; max-width: 100%; height: 270px; }
.gate-preview-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 92%, transparent) 78%);
  display: flex; align-items: center; justify-content: center;
}
.lock {
  width: 42px; height: 42px; border-radius: 50%; background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow); position: relative;
}
.lock::before {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 13px; height: 10px; border-radius: 2px; background: var(--accent);
  transform: translateY(3px);
}
.lock::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px; border: 2px solid var(--accent); border-bottom: 0;
  border-radius: 5px 5px 0 0; transform: translateY(-5px);
}

.gate-form { margin-top: 2em; max-width: 460px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 6px; }
.field input[type="text"], .field input[type="email"] {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder { color: var(--muted); opacity: .7; }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

.field-check { display: flex; gap: 11px; align-items: flex-start; margin-bottom: 22px; }
.field-check input { margin-top: 5px; flex: none; width: 17px; height: 17px; accent-color: var(--accent); }
.field-check label { font-size: .88rem; font-weight: 400; color: var(--ink-2); line-height: 1.5; margin: 0; }

.field-error, .form-error { color: #B3261E; font-size: .85rem; margin: 6px 0 0; }
@media (prefers-color-scheme: dark) { .field-error, .form-error { color: #F2B8B5; } }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* — rezultat — */
#screen-result .wrap { padding-block: clamp(20px, 5vw, 44px) 72px; }
.result-head { max-width: 680px; margin-bottom: 2em; }
.result-head h1 { margin-bottom: .35em; }
.result-tag {
  display: inline-block; margin: 0 0 1em;
  padding: 5px 14px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dk);
  font-size: .82rem; font-weight: 600; letter-spacing: .02em;
}

.scores-intro { font-size: .92rem; color: var(--ink-2); margin: -.4em 0 1.6em; }
.scores-outro {
  font-size: .88rem; color: var(--muted); margin: 1.8em 0 0;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}

.result-grid {
  display: grid; grid-template-columns: 1.08fr .92fr; gap: 20px; align-items: start;
}
.chart-holder { margin: -6px -8px 0; display: flex; justify-content: center; }
.chart { width: 100%; max-width: 430px; height: auto; display: block; }
.chart-note { font-size: .85rem; color: var(--muted); margin: 10px 0 0; line-height: 1.55; }

.score + .score { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line-soft); }
.score-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.score-head h3 { line-height: 1.35; }
.score-value { font-family: var(--serif); font-size: 1.6rem; color: var(--ink); white-space: nowrap; }
.score-max { font-size: .8rem; color: var(--muted); }

.meter { position: relative; height: 9px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-dk));
  transition: width .9s var(--ease) .15s;
}
.meter-mid {
  position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px;
  background: var(--surface); opacity: .9;
}
.score-ends {
  display: flex; justify-content: space-between; font-size: .76rem; color: var(--muted); margin-top: 6px;
}
.score-desc { font-size: .95rem; color: var(--ink-2); margin: 10px 0 0; }

.result-text { max-width: 680px; margin-top: 2.5em; }
.prose-block h2:first-child { margin-top: 1.6em; }
.prose-block p { color: var(--ink-2); }

/* întrebarea de închidere a fiecărui profil */
.closing-question {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.5;
  color: var(--ink); border-left: 3px solid var(--accent);
  padding: 4px 0 4px 20px; margin: 2.2em 0 0;
}

/* nota despre continuum — se citește ca o paranteză, nu ca profil */
.continuum {
  background: var(--surface-2); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 28px); margin-top: 2.8em;
}
.continuum h2 { margin-top: 0; font-size: 1.05rem; font-family: var(--sans); font-weight: 600; }
.continuum p:last-child { margin-bottom: 0; }

.reframe { margin-top: 2.2em; }
.reframe p:last-child { margin-bottom: 0; }

/* — celelalte tendințe, în acordeon — */
.card-others { margin-top: 2.5em; max-width: 680px; }
.others-intro { color: var(--ink-2); font-size: .95rem; margin: -.4em 0 1.4em; }

.other { border-top: 1px solid var(--line-soft); }
.other:last-child { border-bottom: 1px solid var(--line-soft); }

.other > summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 18px 30px 18px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.other > summary::-webkit-details-marker { display: none; }
/* săgeata: un colț de pătrat rotit, ca să nu depindem de un font de iconițe */
.other > summary::after {
  content: ''; position: absolute; right: 6px; top: 50%;
  width: 8px; height: 8px; margin-top: -7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.other[open] > summary::after { transform: rotate(-135deg); margin-top: -3px; }
.other > summary:hover::after { border-color: var(--accent-dk); }

/* Aceeași pastilă ca eticheta de sub titlul rezultatului — denumirea
   tendinței se citește ca etichetă, nu ca un supratitlu discret. */
.other-name {
  align-self: flex-start;
  padding: 4px 12px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-dk);
  font-size: .72rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase;
}
.other-title {
  font-family: var(--serif); font-size: 1.06rem; line-height: 1.35; color: var(--ink);
  transition: color .18s var(--ease);
}
.other > summary:hover .other-title { color: var(--accent-dk); }
.other > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

.other-body { padding-bottom: 22px; }
.other-body p { color: var(--ink-2); font-size: .96rem; }
.other-body h3 {
  font-family: var(--sans); font-size: .92rem; font-weight: 600;
  margin: 1.7em 0 .5em; color: var(--ink);
}
.other-body .closing-question { font-size: 1rem; margin: 1.6em 0 0; }

/* — paginile publice pe tendințe — */
.card-cta {
  margin-top: 2.8em; background: var(--accent-soft); border-color: transparent;
}
.card-cta p { color: var(--ink-2); }
.card-altele { margin-top: 1.4em; }
.lista-altele { list-style: none; margin: 0; padding: 0; }
.lista-altele li {
  padding: 12px 0; border-top: 1px solid var(--line-soft);
  font-size: .95rem; color: var(--muted); line-height: 1.5;
}
.lista-altele li:first-child { border-top: 0; padding-top: 0; }
.lista-altele a {
  font-weight: 600; text-decoration: none; display: inline-block;
}
.lista-altele a:hover { text-decoration: underline; }

.card-letters {
  margin-top: 2.5em; max-width: 680px;
  background: var(--accent-soft); border-color: transparent;
}
.card-letters p { color: var(--ink-2); margin-bottom: 0; }

.card-share { margin-top: 1.4em; max-width: 680px; }
.card-share p { color: var(--ink-2); }
.share-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.2em 0 1em; }

/* — grafic (SVG) — */
.chart-bg { fill: var(--surface-2); }
.chart-frame { fill: none; stroke: var(--line); stroke-width: 1; }
.chart-band  { fill: var(--ink); opacity: .035; }
.chart-mid   { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 5; }
.chart-region-label {
  font-family: var(--sans); font-size: 12px; fill: var(--muted);
  letter-spacing: .04em; text-transform: lowercase;
}
.chart-region-label.is-neighbour { fill: var(--ink-2); }
.chart-region-label.is-active { fill: var(--ink); font-weight: 600; }
.chart-axis-title { font-family: var(--sans); font-size: 12.5px; fill: var(--ink-2); font-weight: 500; }
.chart-axis-end   { font-family: var(--sans); font-size: 11px; fill: var(--muted); }
.chart-you        { font-family: var(--sans); font-size: 12px; fill: var(--ink); font-weight: 600; }

.chart-point-dot  { fill: var(--accent); stroke: var(--surface-2); stroke-width: 3; }
.chart-point-halo { fill: var(--accent); opacity: .16; }
.r-secure   .chart-point-dot { fill: var(--r-secure); }
.r-secure   .chart-point-halo { fill: var(--r-secure); }
.r-anxious  .chart-point-dot { fill: var(--r-anxious); }
.r-anxious  .chart-point-halo { fill: var(--r-anxious); }
.r-avoidant .chart-point-dot { fill: var(--r-avoidant); }
.r-avoidant .chart-point-halo { fill: var(--r-avoidant); }
.r-fearful  .chart-point-dot { fill: var(--r-fearful); }
.r-fearful  .chart-point-halo { fill: var(--r-fearful); }

.chart-point.is-animated { animation: pointIn .6s var(--ease) .2s both; transform-origin: center; }
@keyframes pointIn { from { opacity: 0; } to { opacity: 1; } }
.chart-point.is-animated .chart-point-halo { animation: pulse 3.4s ease-in-out 1s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 0%, 100% { opacity: .16; transform: scale(1); } 50% { opacity: .26; transform: scale(1.12); } }

/* — subsol — */
.site-foot {
  border-top: 1px solid var(--line-soft); padding-block: 24px 36px; margin-top: auto;
  font-size: .86rem; color: var(--muted);
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; justify-content: space-between; }
.site-foot p { margin: 0; }
.site-foot nav { display: flex; gap: 20px; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }

/* ═══════════════ 5. RESPONSIVE ═══════════════ */
@media (max-width: 880px) {
  .result-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .site-head { padding-block: 14px; }
  .brand-name { font-size: .94rem; }
  .site-head .btn-sm { font-size: .82rem; padding: 6px 12px; }
  .facts { gap: 16px; }
  .quiz-hint { display: none; }
  .scale { gap: 8px 0; max-width: 100%; }
  .opt-1, .opt-7 { --dot: 36px; }
  .opt-2, .opt-6 { --dot: 30px; }
  .opt-3, .opt-5 { --dot: 25px; }
  .opt-4         { --dot: 20px; }
  .opt.is-selected .opt-dot { box-shadow: 0 0 0 4px var(--ring); }
  .scale-anchor { font-size: .74rem; }
  .score-head { flex-direction: column; gap: 2px; }

  /* graficul se micșorează pe telefon — textul din el are nevoie de mai multe unități */
  .chart-axis-title  { font-size: 16px; }
  .chart-axis-end    { font-size: 13px; }
  .chart-region-label { font-size: 15px; }
  .chart-you         { font-size: 15px; }
}

/* ═══════════════ 6. PRINT / SALVARE CA PDF ═══════════════
   Butonul cheamă window.print(); dialogul browserului are „Salvează ca PDF"
   pe toate platformele. Textul rămâne text: selectabil, căutabil, ușor. */

.print-only { display: none; }

.result-actions { margin-top: 1.4em; }
.keep-note { margin-top: 2.5em; }

@media print {
  /* Tokenii se fixează pe varianta luminoasă: altfel, cine are sistemul
     pe temă întunecată ar tipări o pagină neagră. */
  :root {
    --bg: #FFFFFF;       --surface: #FFFFFF;   --surface-2: #F6F0E8;
    --ink: #241E1A;      --ink-2: #3A322C;     --muted: #6B625B;
    --line: #D8CDC0;     --line-soft: #E8E0D6;
    --accent: #B0563A;   --accent-dk: #8E4025; --on-accent: #FFFFFF;
    --accent-soft: rgba(176, 86, 58, .12);
    --tone-no: #6F8794;  --tone-mid: #9C9188;  --tone-yes: #B0563A;
    --r-secure: #3F7D6B; --r-anxious: #C2842A;
    --r-avoidant: #587BA6; --r-fearful: #97598A;
  }

  /* Proprietate moștenită: o dată pe html, ajunge peste tot. Fără ea,
     browserul aruncă fundalurile — inclusiv regiunile colorate ale hărții. */
  html { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  @page { margin: 16mm 15mm; }

  body { background: #fff; font-size: 10.5pt; line-height: 1.5; display: block; }
  main { display: block; }

  /* Tot ce ține de navigare sau de acțiuni nu are ce căuta pe hârtie. */
  .site-head, .site-foot, .progress, .skip-link,
  .card-share, .card-letters, .card-others, .result-actions, .keep-note,
  .chart-note, .js-resume-note { display: none !important; }

  .print-only { display: block; }
  .print-head {
    display: flex; justify-content: space-between; gap: 16px;
    font-size: 8.5pt; color: var(--muted); letter-spacing: .04em;
    padding-bottom: 6pt; margin-bottom: 14pt; border-bottom: 1px solid var(--line);
  }
  .print-foot {
    margin-top: 14pt; padding-top: 6pt; border-top: 1px solid var(--line);
    font-size: 8.5pt; color: var(--muted); text-align: center;
  }

  .wrap { max-width: none; padding-inline: 0; }
  #screen-result .wrap { padding-block: 0; }
  .screen.is-active { animation: none; }

  /* Cardurile își pierd rama: pe hârtie, spațiul alb separă mai bine. */
  .card { border: 0; box-shadow: none; padding: 0; background: transparent; }
  .result-grid { display: block; }
  .card-chart, .card-scores { break-inside: avoid; margin-bottom: 10mm; }
  .chart { max-width: 105mm; }
  .card-title { font-size: 11pt; margin-bottom: .8em; }

  .result-head { margin-bottom: 8mm; }
  h1 { font-size: 19pt; margin: 0 0 .3em; }
  h2 { font-size: 12pt; margin-top: 7mm; break-after: avoid; }
  .lede { font-size: 11pt; }
  p { orphans: 3; widows: 3; }
  .score + .score { margin-top: 6mm; padding-top: 6mm; }
  .meter-fill { transition: none; }
  .closing-question, .callout-border, .continuum { break-inside: avoid; }
  .continuum { padding: 6mm; }

  a { color: inherit; text-decoration: none; }
  .disclaimer { margin-top: 8mm; font-size: 8.5pt; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}