/* [cc 19.10] verificari-a.css · secțiunea NOUĂ #verificari („Verifici firma înainte să lucrezi cu ea”), direcția A „Un desen văzut de sus + o apăsare” (câștigătoarea juratului 19.10, cu grafturile lui).
   Fișa unei firme noi, pe birou, văzută de sus: CIF scris, Denumirea și Adresa goale. Butonul albastru „ANAF” (ca în program) întreabă ANAF (clădirea),
   răspunsul vine în caseta a doua, iar în fișă se completează singure câmpurile goale. Firma din UE: drapelul VIES, calea de rezervă (săgeată întreruptă).
   Licența de transport: data ei, pe care o treci tu; zilele le numără programul. O singură apăsare; a doua readuce desenul la început.
   Fără JS (sau înainte să se încarce) se vede starea de după apăsare: desenul întreg, nimic ascuns.
   Creionul = cel din Service / Referat / e-Factura (--vf-pen, --vf-mark), scrisul de mână = „Cmd Hand” (Caveat), hârtia = --vf-paper.
   Lățimea o dă figura (container „vf”), nu ecranul: ≥ 860 px scena lată (clădirea și drapelul sus, fișa jos), mai îngust scena de telefon.
   Totul sub .sx-vf; spațiere din scara Fibonacci (3 5 8 13 21 34 55 89). */

.sx-vf {
  --vf-pen: hsl(40 13% 23% / .66); --vf-mark: hsl(40 13% 20% / .9);
  --vf-hand: "Cmd Hand", "Caveat", "Segoe Print", cursive;
  --vf-paper: #fffdf8;
  --vf-ok: #2f8a3e; --vf-ok-tint: rgba(120, 190, 100, .26); --vf-pop: rgba(120, 190, 100, .3);
  --vf-eu: rgba(52, 104, 190, .2); --vf-gold: rgba(240, 190, 50, .62);
  --vf-btn-top: #8bd3ea; --vf-btn-bot: #54bddb; --vf-btn-ink: #052a35; --vf-btn-edge: rgba(5, 42, 53, .5); --vf-btn-low: rgba(5, 42, 53, .34);
}
html[data-theme="dark"] .sx-vf {
  --vf-pen: rgba(232, 228, 217, .62); --vf-mark: rgba(240, 236, 226, .92);
  --vf-paper: rgba(255, 255, 255, .055);
  --vf-ok: #7cc96c; --vf-ok-tint: rgba(124, 201, 108, .2); --vf-pop: rgba(124, 201, 108, .24);
  --vf-eu: rgba(110, 160, 235, .24); --vf-gold: rgba(244, 204, 90, .62);
  --vf-btn-top: #86cfe6; --vf-btn-bot: #49b0cf; --vf-btn-ink: #03222b; --vf-btn-edge: rgba(0, 0, 0, .55); --vf-btn-low: rgba(0, 0, 0, .55);
}

/* ---------- capul ---------- */
.sx-vf .sx-head.sx-vf-head { margin-bottom: 34px; }

/* ---------- figura ---------- */
.sx-vf .sx-vf-fig { margin: 0; container: vf / inline-size; }
.sx-vf .sx-vf-scene { position: relative; }
.sx-vf .vf-n { display: none; }
@container vf (max-width: 859px) {
  .sx-vf .vf-w { display: none; }
  .sx-vf .vf-n { display: block; }
}

/* ---------- creionul ---------- */
.sx-vf svg { overflow: visible; }
.sx-vf .k, .sx-vf .k2 { fill: none; stroke: var(--vf-pen); stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sx-vf .k { stroke-width: 1.5px; }
.sx-vf .k2 { stroke-width: 1.3px; opacity: .4; }
.sx-vf .k.f { opacity: .5; }
.sx-vf .k2.f { opacity: .18; }
.sx-vf .k.ar, .sx-vf .k2.ar { stroke: var(--vf-mark); }
.sx-vf .k.ar { stroke-width: 2px; }
.sx-vf .vf-vs.ds .k, .sx-vf .vf-vs.ds .k2, .sx-vf .vf-hs.ds .k, .sx-vf .vf-hs.ds .k2 { stroke-dasharray: 5 6; }
.sx-vf .pp { fill: var(--vf-paper); stroke: none; }
.sx-vf .fw { fill: var(--vf-eu); stroke: none; }
.sx-vf .sg { fill: var(--vf-gold); stroke: none; }
.sx-vf .k.st, .sx-vf .k2.st { stroke-width: 1.1px; }
.sx-vf .h { font-family: var(--vf-hand); fill: var(--vf-mark); letter-spacing: 0; word-spacing: 0; }
.sx-vf .hb { font-size: 22px; font-weight: 700; }
.sx-vf .vf-flag .hb { font-size: 21px; paint-order: stroke; stroke: var(--vf-paper); stroke-width: 4px; stroke-linejoin: round; }

/* scrisul de mână din HTML */
.sx-vf .hn, .sx-vf .lb { margin: 0; font-family: var(--vf-hand); letter-spacing: 0; word-spacing: 0; color: var(--vf-mark); text-transform: none; }
.sx-vf .hn { font-size: 23px; line-height: 24px; font-weight: 500; }
.sx-vf .lb { font-size: 25px; line-height: 24px; font-weight: 700; margin-bottom: 2px; }

/* ---------- clădirea, drapelul, săgețile ---------- */
.sx-vf .vf-bld { display: block; width: 117px; height: 88px; margin: 0 auto; }
.sx-vf .vf-flag { display: block; width: 109px; height: 72px; margin: 0 auto; }
.sx-vf .vf-i { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sx-vf .vf-ink { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sx-vf .vf-paper { position: absolute; inset: 0; background: var(--vf-paper); border-radius: 3px; }
.sx-vf .vf-head--r { display: block; width: 14px; height: 16px; }
.sx-vf .vf-head--d { display: block; width: 16px; height: 14px; }
.sx-vf .vf-vs { display: block; width: 24px; }
.sx-vf .vf-hs { display: block; height: 24px; flex: 0 0 auto; }
.sx-vf .vf-arc { display: block; width: 100%; height: 100%; }
.sx-vf .vf-src-n { margin-top: 3px; text-align: center; white-space: nowrap; }
.sx-vf .vf-hint { display: inline-block; width: 18px; height: 22px; vertical-align: -9px; margin-left: 2px; }

/* ---------- starea desenului: înainte / după apăsare ---------- */
.sx-vf .sx-vf-fig[data-vf="idle"] [data-s="done"],
.sx-vf .sx-vf-fig[data-vf="done"] [data-s="idle"] { display: none; }
.sx-vf .sx-vf-fig [data-s] { animation: vf-in .32s ease both; }
@keyframes vf-in { from { opacity: 0; } to { opacity: 1; } }

/* răspunsul: săgeata ANAF -> casetă; stinsă până la apăsare, apoi plină. Calea VIES rămâne mereu întreruptă și mai stinsă. */
.sx-vf .vf-ans-ar, .sx-vf .vf-ask-ar, .sx-vf .vf-w-a1 .vf-head--d, .sx-vf .vf-n-a1 .vf-head--d { transition: opacity .32s ease; }
.sx-vf .sx-vf-fig[data-vf="idle"] .vf-ans-ar,
.sx-vf .sx-vf-fig[data-vf="idle"] .vf-w-a1 .vf-head--d,
.sx-vf .sx-vf-fig[data-vf="idle"] .vf-n-a1 .vf-head--d { opacity: .22; }
.sx-vf .vf-w-via, .sx-vf .vf-n-a2 { opacity: .8; }

/* ---------- casetele fișei ---------- */
.sx-vf .vf-row { position: relative; display: grid; }
.sx-vf .vf-row > .c { position: relative; min-width: 0; padding: 10px 14px 8px 16px; }
.sx-vf .vf-row > .c > * { position: relative; z-index: 1; }
.sx-vf .vf-row .v { margin: 0; font: 500 16px/24px var(--sx-f-sans); letter-spacing: -.005em; word-spacing: 0; color: var(--ink); }
.sx-vf .vf-row .v b { font-weight: 600; font-size: 17px; color: inherit; }
.sx-vf .vf-row .v .mt { color: var(--sx-ink2); }
.sx-vf .vf-row .hn { margin-top: 3px; }

/* rândurile fișei: etichetă + valoare pe linie (ca un formular scris pe hârtie) */
.sx-vf .fr { display: grid; grid-template-columns: 82px minmax(0, 1fr); column-gap: 6px; align-items: center; min-height: 30px; }
.sx-vf .fr--cif { grid-template-columns: 82px minmax(0, 1fr) auto; min-height: 44px; }
.sx-vf .fl { font: 500 16px/24px var(--sx-f-sans); letter-spacing: -.005em; word-spacing: 0; color: var(--sx-ink2); }
.sx-vf .fv { display: block; min-width: 0; min-height: 28px; padding: 2px 6px 0; font: 600 17px/24px var(--sx-f-sans); letter-spacing: -.005em; word-spacing: 0; color: var(--ink); border-bottom: 1.5px solid var(--vf-pen); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.sx-vf .fv--empty { border-bottom-style: dashed; opacity: .6; }
.sx-vf .fv--pop { background: var(--vf-pop); border-bottom-color: var(--vf-ok); border-radius: 3px 3px 0 0; }

/* caseta a doua: răspunsul ANAF (bandă verde ca „zona verde” din program) */
.sx-vf .c-an::before { content: ""; position: absolute; z-index: 0; inset: 6px 6px 6px 6px; border-radius: 6px; background: transparent; transition: background-color .32s ease; }
.sx-vf .sx-vf-fig[data-vf="done"] .c-an::before { background: var(--vf-ok-tint); }
.sx-vf .c-an .ans { margin-top: 3px; min-height: 100px; }
.sx-vf .c-an .slot { margin: 0; height: 96px; max-width: 220px; border: 1.5px dashed var(--vf-pen); border-radius: 6px; opacity: .55; }
.sx-vf .kv { list-style: none; margin: 0; padding: 0; max-width: 204px; }
.sx-vf .kv li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; font: 500 16px/24px var(--sx-f-sans); letter-spacing: -.005em; word-spacing: 0; color: var(--ink); }
.sx-vf .kv b { font-weight: 600; font-size: 17px; color: var(--ink); }
.sx-vf .kv b.ok { color: var(--vf-ok); }

/* caseta a treia: licența de transport (nu depinde de apăsare) */
.sx-vf .c-li .v { margin-top: 3px; }
.sx-vf .c-li .v + .v { margin-top: 0; }

/* ---------- butonul albastru „ANAF” (ca în program, dar ridicat) ---------- */
.sx-vf .sx-vf-btn {
  appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 88px; margin: 0; padding: 0 17px 0 14px;
  border-radius: 9px; border: 1px solid var(--vf-btn-edge); background: linear-gradient(var(--vf-btn-top), var(--vf-btn-bot)); color: var(--vf-btn-ink);
  font: 700 16px/1 var(--sx-f-sans); letter-spacing: .01em; word-spacing: 0; text-transform: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 3px 0 var(--vf-btn-low), 0 9px 14px -8px rgba(5, 42, 53, .5);
  transition: transform .12s ease, box-shadow .12s ease; max-width: 100%; white-space: nowrap;
}
.sx-vf .sx-vf-btn:hover { filter: brightness(1.04); }
.sx-vf .sx-vf-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.sx-vf .sx-vf-btn:active, .sx-vf .sx-vf-fig[data-vf="done"] .sx-vf-btn { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 0 var(--vf-btn-low); }

/* ================= scena lată (figura ≥ 860 px) ================= */
.sx-vf .vf-w { position: relative; padding-top: 152px; }
.sx-vf .vf-w > div { position: absolute; }
.sx-vf .vf-w > .vf-row--w { position: relative; }
/* clădirea (firma din România) și drapelul (firma din UE), deasupra casetei „Răspunsul ANAF” */
.sx-vf .vf-w-ro { left: calc(47% - 80px); width: 160px; top: 0; }
.sx-vf .vf-w-eu { left: calc(66% - 80px); width: 160px; top: 16px; }
.sx-vf .vf-w-a1 { left: calc(47% - 12px); top: 116px; width: 24px; height: 36px; }
/* firma din UE: săgeata întreruptă pleacă din drapel și se oprește la notița ei („răspunsul vine din VIES”), nu în caseta ANAF */
.sx-vf .vf-w-via { left: calc(66% + 58px); right: 0; top: 40px; display: flex; align-items: center; }
.sx-vf .vf-w-via .vf-head--r { margin-left: -14px; }
.sx-vf .vf-w-via .hn { margin: 0 0 0 6px; flex: 1 1 0; min-width: 0; }
.sx-vf .vf-w-a1 .vf-vs { position: absolute; left: 0; top: 0; }
.sx-vf .vf-w-a1 .vf-head--d { position: absolute; left: 4px; bottom: 0; }
/* arcul „apeși ANAF”: de deasupra butonului în peretele clădirii */
.sx-vf .vf-w-arc { left: calc(41% - 62px); width: calc(6% - 4px); top: 58px; height: 128px; z-index: 2; }
.sx-vf .vf-w-arch { left: calc(47% - 72px); top: 50px; width: 14px; height: 16px; z-index: 2; }
.sx-vf .vf-w-ask { right: calc(59% + 82px); max-width: calc(41% - 96px); top: 92px; height: 48px; display: flex; align-items: flex-end; justify-content: flex-end; text-align: right; }
.sx-vf .vf-row--w { min-height: 148px; grid-template-columns: 41% 33% 26%; }

/* ================= scena de telefon (figura < 860 px) ================= */
.sx-vf .vf-row--a > .c { padding: 10px 14px 6px 14px; }
.sx-vf .vf-row--b { display: block; }
.sx-vf .vf-row--b > .c { padding: 8px 14px 8px 14px; }
.sx-vf .vf-row--b > .c-li { padding-top: 10px; }
.sx-vf .vf-n .c-li .v { line-height: 22px; }
.sx-vf .vf-row--b > .c-li .vf-ink-h { position: absolute; z-index: 1; left: 0; right: 0; top: -3px; width: 100%; height: 6px; }
.sx-vf .vf-n-src { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "ask1 ask2" "ro eu" "a1 a2"; }
.sx-vf .vf-n-ask1 { grid-area: ask1; }
.sx-vf .vf-n-ask2 { grid-area: ask2; align-self: start; padding-left: 4px; margin-bottom: -8px; }
.sx-vf .vf-n-ro { grid-area: ro; }
.sx-vf .vf-n-eu { grid-area: eu; }
.sx-vf .vf-n-a1 { grid-area: a1; }
.sx-vf .vf-n-a2 { grid-area: a2; display: flex; flex-direction: column; align-items: center; }
.sx-vf .vf-n-arr { position: relative; width: 24px; height: 36px; margin: 0 auto; }
.sx-vf .vf-n .vf-bld { width: 106px; height: 80px; }
.sx-vf .vf-n .vf-flag { width: 99px; height: 66px; }
.sx-vf .vf-n-eu { padding-top: 14px; }
.sx-vf .vf-n .kv li { line-height: 22px; }
.sx-vf .vf-n .c-an .ans { min-height: 92px; }
.sx-vf .vf-n .c-an .slot { height: 92px; }
.sx-vf .vf-row--a .fr { min-height: 28px; }
.sx-vf .vf-n-arr--s { height: 22px; }
.sx-vf .vf-via-n { margin: 3px 0 0; text-align: center; }
.sx-vf .vf-rule-n { text-align: left; }
/* telefon: „apeși ANAF” stă în fișă, în dreapta titlului, chiar deasupra butonului, cu săgeata ei spre el */
.sx-vf .vf-n .c-fi > .vf-ask-n { position: absolute; top: 10px; right: 14px; margin: 0; text-align: right; white-space: nowrap; }
.sx-vf .vf-n-arr .vf-vs { position: absolute; left: 0; top: 0; }
.sx-vf .vf-n-arr .vf-head--d { position: absolute; left: 4px; bottom: 0; }
.sx-vf .vf-n .vf-src-n { white-space: normal; }
.sx-vf .vf-n .fr, .sx-vf .vf-n .fr--cif { column-gap: 6px; }

/* ---------- sub desen ---------- */
.sx-vf .sx-vf-cap { margin-top: 21px; max-width: none; font: 400 16px/24px var(--sx-f-sans); letter-spacing: -.005em; word-spacing: 0; color: var(--sx-ink2); text-wrap: pretty; }
.sx-vf .sx-vf-cap-l { display: block; font: inherit; letter-spacing: inherit; }
.sx-vf .sx-vf-cap .sx-vf-inv { color: var(--mute); font: inherit; }

@container vf (max-width: 559px) {
  .sx-vf .sx-vf-cap { margin-top: 13px; }
  .sx-vf .sx-vf-cap-l + .sx-vf-cap-l { margin-top: 8px; }
}
@media (max-width: 600px) {
  .sx-vf .sx-head.sx-vf-head { margin-bottom: 21px; }
}
@container vf (max-width: 339px) {
  .sx-vf .fr, .sx-vf .fr--cif { grid-template-columns: 76px minmax(0, 1fr); }
  .sx-vf .fr--cif { grid-template-columns: 76px minmax(0, 1fr) auto; }
  .sx-vf .fl { font-size: 16px; }
  .sx-vf .fv { padding-inline: 4px; }
  .sx-vf .sx-vf-btn { min-width: 0; padding: 0 12px 0 11px; gap: 6px; }
  .sx-vf .vf-n-src { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container vf (max-width: 299px) {
  .sx-vf .lb { font-size: 22px; }
  .sx-vf .fv { font-size: 16px; letter-spacing: -.03em; padding-inline: 3px; }
  .sx-vf .fr, .sx-vf .fr--cif { grid-template-columns: 74px minmax(0, 1fr); column-gap: 3px; }
  .sx-vf .fr--cif { grid-template-columns: 74px minmax(0, 1fr) auto; }
  .sx-vf .hn { font-size: 21px; line-height: 22px; }
  .sx-vf .vf-row--a > .c, .sx-vf .vf-row--b > .c { padding-inline: 8px; }
  .sx-vf .vf-n .c-fi > .vf-ask-n { right: 8px; }
  .sx-vf .sx-vf-btn .vf-i { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-vf .sx-vf-fig [data-s] { animation: none; }
  .sx-vf .vf-ans-ar, .sx-vf .vf-ask-ar, .sx-vf .vf-head--d, .sx-vf .c-an::before, .sx-vf .sx-vf-btn { transition: none; }
}