/* ============================================================
   fg-hulpvraag.css  -  De hulpvraag-pop-up.
   Gebouwd 18/10/2026. Patrick: "als er problemen zijn, moet de code via een
   pop up bv, de mens moeten kunnen laten helpen."

   HUISREGEL DIE HIER GELDT (Patrick 16/10/2026: "er is overal nog veel orange
   aanwezig"): het accent staat op DRIE plaatsen en nergens anders:
     1. de hoofdknop (Zet vast)
     2. het streepje links bij een vraag die op jou wacht
     3. het belletje zelf, want dat MOET opvallen
   Al de rest is neutraal. Rood is betekenis (weg), geen huisstijl.

   Tokenlaag naar het voorbeeld van fg2-postbus.css: de ENIGE plek met waarden.
   De pop-up hangt aan de PAGINA en niet in een tegel (les van 17/10: een
   hertekening van de schil veegde het opstelvenster weg), dus hij moet zijn
   kleuren zelf meedragen.
   ============================================================ */

.fg-hv, .fg-hv-bel{
  --hv-vlak:        #ffffff;
  --hv-grond:       #f6f7f9;
  --hv-inkt:        #000000;
  --hv-inkt-zacht:  #42474f;
  --hv-inkt-flets:  #5a616b;
  --hv-lijn:        #e3e6ea;
  --hv-lijn-hard:   #c9ced6;
  --hv-zweef:       #f1f3f5;
  --hv-accent:      var(--fg-oranje, #D9861E);
  --hv-op-accent:   #ffffff;
  --hv-gevaar:      var(--danger, #b3261e);
  --hv-sluier:      rgba(10,12,16,.46);
  --hv-schaduw:     0 1px 2px rgba(10,12,16,.10), 0 18px 48px rgba(10,12,16,.26);
  --hv-rond:        12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .fg-hv,
  :root:not([data-theme="light"]) .fg-hv-bel{
    --hv-vlak:#1b1f28; --hv-grond:#15181f; --hv-inkt:#f3f5f8;
    --hv-inkt-zacht:#c3cad5; --hv-inkt-flets:#a7b0bf;
    --hv-lijn:rgba(255,255,255,.10); --hv-lijn-hard:rgba(255,255,255,.20);
    --hv-zweef:rgba(255,255,255,.07);
    --hv-sluier:rgba(0,0,0,.62);
    --hv-schaduw:0 1px 2px rgba(0,0,0,.5), 0 20px 56px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] .fg-hv,
:root[data-theme="dark"] .fg-hv-bel{
  --hv-vlak:#1b1f28; --hv-grond:#15181f; --hv-inkt:#f3f5f8;
  --hv-inkt-zacht:#c3cad5; --hv-inkt-flets:#a7b0bf;
  --hv-lijn:rgba(255,255,255,.10); --hv-lijn-hard:rgba(255,255,255,.20);
  --hv-zweef:rgba(255,255,255,.07);
  --hv-sluier:rgba(0,0,0,.62);
  --hv-schaduw:0 1px 2px rgba(0,0,0,.5), 0 20px 56px rgba(0,0,0,.6);
}

/* ---------- het belletje ---------- */
.fg-hv-bel{
  position:fixed; right:18px; bottom:18px; z-index:9140;
  display:none; align-items:center; gap:8px;
  padding:9px 14px 9px 11px; border-radius:999px;
  background:var(--hv-accent); color:var(--hv-op-accent);
  border:0; cursor:pointer; font:600 13.5px/1 inherit;
  box-shadow:0 2px 6px rgba(10,12,16,.22), 0 10px 28px rgba(10,12,16,.22);
}
.fg-hv-bel[data-open="ja"]{ display:inline-flex; }
.fg-hv-bel:hover{ filter:brightness(1.06); }
.fg-hv-bel:focus-visible{ outline:2px solid var(--hv-inkt); outline-offset:2px; }
.fg-hv-bel b{
  background:rgba(255,255,255,.22); border-radius:999px;
  min-width:21px; height:21px; display:grid; place-items:center;
  font-size:12px; font-variant-numeric:tabular-nums;
}

/* ---------- de sluier + het venster ---------- */
.fg-hv{ position:fixed; inset:0; z-index:9150; display:none; }
.fg-hv[data-open="ja"]{ display:block; }
.fg-hv-sluier{ position:absolute; inset:0; background:var(--hv-sluier); }
.fg-hv-venster{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--hv-vlak); color:var(--hv-inkt);
  border:1px solid var(--hv-lijn); border-radius:var(--hv-rond);
  box-shadow:var(--hv-schaduw);
}

/* ---------- kop ---------- */
.fg-hv-kop{
  display:flex; gap:12px; align-items:flex-start;
  padding:15px 17px 13px; border-bottom:1px solid var(--hv-lijn);
}
.fg-hv-kop .hv-streep{
  flex:0 0 3px; align-self:stretch; min-height:34px;
  background:var(--hv-accent); border-radius:2px;
}
.fg-hv-kop h2{ margin:0; font-size:16px; letter-spacing:-.01em; }
.fg-hv-kop p{ margin:2px 0 0; font-size:13px; color:var(--hv-inkt-zacht); }
.fg-hv-teller{
  margin-left:auto; padding-top:2px; white-space:nowrap;
  font-size:12px; color:var(--hv-inkt-flets); font-variant-numeric:tabular-nums;
}
.fg-hv-x{
  background:none; border:0; cursor:pointer; color:var(--hv-inkt-flets);
  font-size:20px; line-height:1; padding:0 2px; margin:-2px -4px 0 6px;
}
.fg-hv-x:hover{ color:var(--hv-inkt); }

/* ---------- lijf ---------- */
.fg-hv-lijf{ padding:15px 17px; overflow:auto; }
.fg-hv-vraag{ margin:0 0 13px; font-size:14.5px; }
.fg-hv-bewijs{
  background:var(--hv-grond); border:1px solid var(--hv-lijn);
  border-radius:10px; padding:11px 13px; margin:0 0 15px;
}
.fg-hv-bewijs dl{
  display:grid; grid-template-columns:auto 1fr; gap:5px 12px; margin:0; font-size:12.5px;
}
.fg-hv-bewijs dt{ color:var(--hv-inkt-flets); }
.fg-hv-bewijs dd{ margin:0; color:var(--hv-inkt); min-width:0; overflow-wrap:anywhere; }
.fg-hv-bewijs code{
  font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--hv-gevaar); overflow-wrap:anywhere;
}
.fg-hv-label{
  display:block; margin:0 0 6px; font-size:12.5px;
  font-weight:600; color:var(--hv-inkt-zacht);
}
.fg-hv-invoer{ display:flex; gap:8px; flex-wrap:wrap; }
.fg-hv-invoer input{
  flex:1 1 240px; min-width:0; padding:9px 11px; font-size:14px;
  border:1px solid var(--hv-lijn-hard); border-radius:9px;
  background:var(--hv-grond); color:var(--hv-inkt);
}
.fg-hv-invoer input:focus{ outline:2px solid var(--hv-accent); outline-offset:1px; }
.fg-hv-scheiding{ height:1px; background:var(--hv-lijn); margin:15px -17px; }
.fg-hv-andere{ display:flex; gap:8px; flex-wrap:wrap; }

.fg-hv-knop{
  padding:9px 15px; border-radius:9px; cursor:pointer; white-space:nowrap;
  font:600 13.5px/1.2 inherit;
  border:1px solid var(--hv-lijn-hard); background:var(--hv-vlak); color:var(--hv-inkt);
}
.fg-hv-knop:hover{ background:var(--hv-zweef); }
.fg-hv-knop:focus-visible{ outline:2px solid var(--hv-accent); outline-offset:1px; }
.fg-hv-knop[disabled]{ opacity:.5; cursor:default; }
.fg-hv-knop.hoofd{
  background:var(--hv-accent); border-color:var(--hv-accent); color:var(--hv-op-accent);
}
.fg-hv-knop.hoofd:hover{ filter:brightness(1.06); background:var(--hv-accent); }
.fg-hv-knop.weg{ color:var(--hv-gevaar); }

/* ---------- voet ---------- */
.fg-hv-voet{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  padding:11px 17px; background:var(--hv-grond);
  border-top:1px solid var(--hv-lijn);
  font-size:12.5px; color:var(--hv-inkt-flets);
}
.fg-hv-voet .hv-rechts{ margin-left:auto; display:flex; gap:8px; }
.fg-hv-melding{ margin:0; font-size:12.5px; }
.fg-hv-melding.fout{ color:var(--hv-gevaar); font-weight:600; }
.fg-hv-melding.goed{ color:var(--hv-inkt-zacht); }
/* 18/10/2026 - EIGEN NAAM VOOR DE HINT. Hij droeg eerst ook .fg-hv-melding, en toen
   las mijn eigen proef het verkeerde element: twee elementen, een naam. Dezelfde
   regel als bij variabelen - een nieuwe naam leen je niet van een bestaande. */
.fg-hv-hint{
  margin:7px 0 0; font-size:12.5px; color:var(--hv-inkt-flets);
}
.fg-hv-hint code{
  font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--hv-grond); border:1px solid var(--hv-lijn);
  border-radius:5px; padding:1px 4px; color:var(--hv-inkt-zacht);
}

/* ---------- leeg ---------- */
.fg-hv-leeg{ padding:26px 17px; text-align:center; color:var(--hv-inkt-zacht); font-size:13.5px; }

@media (max-width:520px){
  .fg-hv-venster{
    width:100vw; max-height:100vh; inset:0; left:0; top:0; transform:none;
    border-radius:0; border-left:0; border-right:0;
  }
  .fg-hv-bel{ right:14px; bottom:14px; }
}
@media (prefers-reduced-motion: reduce){
  .fg-hv-knop, .fg-hv-bel{ transition:none; }
}

/* ---------- 19/10/2026 · de bel rinkelt zolang er vragen openstaan ----------
   Patrick: "kan je die niet vervangen door een belletje dat bewegend verschijnt".
   Niet doorlopend zwaaien - dat wordt behang dat je na een dag niet meer ziet.
   Een korte rinkel van nog geen seconde, daarna ruim anderhalve seconde stil.
   Zo vangt hij het oog telkens opnieuw, zonder het scherm onrustig te maken. */
.fg-hv-klepel{ display:inline-block; transform-origin:50% 12%; }
.fg-hv-rinkelt .fg-hv-klepel{ animation:fg-hv-rinkel 2.4s ease-in-out infinite; }
@keyframes fg-hv-rinkel{
  0%, 58%, 100%{ transform:rotate(0deg); }
  61%{ transform:rotate(15deg); }  65%{ transform:rotate(-13deg); }
  69%{ transform:rotate(10deg); }  73%{ transform:rotate(-8deg); }
  77%{ transform:rotate(5deg); }   81%{ transform:rotate(-3deg); }
  85%{ transform:rotate(1deg); }
}
@media (prefers-reduced-motion: reduce){
  .fg-hv-rinkelt .fg-hv-klepel{ animation:none; }
}