/* ===========================================================================
   HARTA LEGĂTURILOR SOCIALE (harta-sci.js)

   Aceeași componentă în două ambalaje:
     .hs--pagina  Exploratorul, pe tot ecranul: panoul în stânga, harta în rest
     .hs--slide   într-un slide: harta în stânga, panoul îngust în dreapta
   Pe ecran îngust, harta sus și panoul dedesubt.

   Culorile vin din sistem (sistem.css) și din treptele SCI (grafice.css).
   Singura excepție: etichetele comunităților, care sunt categorii, nu trepte.
   =========================================================================== */

/* --- paleta hărții -------------------------------------------------------
   Nouă trepte pentru mărime, de la galben-pal la teal închis, ca pe hărțile
   SCI de la Meta: o hartă de 1.343 de județe are nevoie de mai multe trepte
   decât un grafic. Treapta cea mai slabă e verzuie, ca să nu se confunde cu
   griul cald al zonelor fără date. Șapte trepte divergente pentru reziduuri:
   cărămiziu sub model, neutru, teal peste model. La întuneric scara se
   întoarce: valorile mici se pierd în fundal, cele mari se aprind. */
:root{
  --hs-1:#F1EFC4; --hs-2:#DCE7C0; --hs-3:#BCD7B3; --hs-4:#99C4A8; --hs-5:#76AE9C;
  --hs-6:#55978E; --hs-7:#377F7D; --hs-8:#1F6A69; --hs-9:#11554F;
  --hsd-1:#9A3A22; --hsd-2:#C8694C; --hsd-3:#E8B49E; --hsd-4:#EADDA8;
  --hsd-5:#9FCBBE; --hsd-6:#3E9A87; --hsd-7:#0F6656;
}
@media (prefers-color-scheme: dark){
  :root:not([data-tema="deschis"]){
    --hs-1:#363C2F; --hs-2:#3A4B3A; --hs-3:#3F5E47; --hs-4:#437355; --hs-5:#4B8963;
    --hs-6:#5C9F70; --hs-7:#78B67E; --hs-8:#A3CC8C; --hs-9:#D6E2A0;
    --hsd-1:#E07A60; --hsd-2:#A9533F; --hsd-3:#6E4036; --hsd-4:#5E5940;
    --hsd-5:#3E6B60; --hsd-6:#4F9A86; --hsd-7:#8FD0BC;
  }
}
:root[data-tema="intunecat"]{
  --hs-1:#363C2F; --hs-2:#3A4B3A; --hs-3:#3F5E47; --hs-4:#437355; --hs-5:#4B8963;
  --hs-6:#5C9F70; --hs-7:#78B67E; --hs-8:#A3CC8C; --hs-9:#D6E2A0;
  --hsd-1:#E07A60; --hsd-2:#A9533F; --hsd-3:#6E4036; --hsd-4:#5E5940;
  --hsd-5:#3E6B60; --hsd-6:#4F9A86; --hsd-7:#8FD0BC;
}

.hs{display:grid;min-height:0;background:var(--fundal)}
.hs--pagina{flex:1;grid-template-columns:340px 1fr}
.hs--pagina .hs__panou{order:-1;border-right:1px solid var(--crom-linie)}
.hs--slide{grid-template-columns:1fr 300px;height:min(64vh, 580px);border:1px solid var(--linie);
  border-radius:10px;overflow:hidden}
.hs--slide .hs__panou{border-left:1px solid var(--crom-linie);padding:16px 16px 20px;gap:14px}
.hs-corp{height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:var(--fundal)}

/* în lecții: harta ocupă toată cutia, fără ramă dublă */
.ix[data-ix="harta"] .ix__corp{display:none}
.ix[data-ix="harta"] .hs--slide{border:0;border-radius:0}

/* --- panoul ------------------------------------------------------------- */

.hs__panou{background:var(--crom);overflow-y:auto;padding:20px 20px 28px;display:flex;
  flex-direction:column;gap:18px;min-height:0}
.hs__titlu{font-family:var(--serif);font-size:var(--t6);font-weight:600;line-height:1.2;letter-spacing:-.01em;margin:0}
.hs__sub{font-family:var(--sans);font-size:var(--t2);color:var(--text-2);margin:-8px 0 0;line-height:1.5;max-width:none}
.hs__et{display:block;font-family:var(--sans);font-size:var(--t1);color:var(--text-3)}
.hs__grup{display:flex;flex-direction:column;gap:7px}

.hs__seg{display:flex;border:1px solid var(--linie-2);border-radius:8px;overflow:hidden;background:var(--panza)}
.hs__seg[hidden]{display:none}
.hs__seg button{flex:1;font-family:var(--sans);font-size:var(--t1);padding:7px 4px;white-space:nowrap;border:0;
  background:transparent;color:var(--text-2);cursor:pointer;transition:.12s}
.hs__seg button+button{border-left:1px solid var(--linie-2)}
.hs__seg button:hover{color:var(--text)}
.hs__seg button.on{background:var(--text);color:var(--fundal)}

.hs__povesti{display:flex;flex-wrap:wrap;gap:6px}
.hs__povesti button{font-family:var(--sans);font-size:var(--t1);padding:5px 10px;border-radius:14px;
  border:1px solid var(--linie-2);background:var(--panza);color:var(--text);cursor:pointer;transition:.12s}
.hs__povesti button:hover{border-color:var(--accent);color:var(--accent-text)}
.hs__povesti button.on{background:var(--accent-slab);border-color:var(--accent);color:var(--accent-text)}
.hs__poveste{font-family:var(--sans);font-size:var(--t2);line-height:1.5;color:var(--text);margin:2px 0 0;max-width:none;
  padding:10px 12px;background:var(--panza);border-left:2px solid var(--accent);border-radius:0 6px 6px 0}

.hs__ales{padding:12px 0 0;border-top:1px solid var(--crom-linie)}
.hs__ales .hs__et{margin-bottom:5px}
.hs__nume{font-family:var(--serif);font-size:var(--t5);font-weight:600;line-height:1.2}
.hs__meta{font-family:var(--sans);font-size:var(--t1);color:var(--text-3);margin-top:4px}

.hs__panou .gf__leg{margin:0}
.hs__panou .gf__scara{max-width:none;min-width:0;flex:1 1 auto}
.hs__fara{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:var(--t1);color:var(--text-3);margin-top:6px}
.hs__fara i{display:inline-block;flex:none;width:12px;height:9px;border-radius:2px;background:var(--crom-2);border:1px solid var(--linie-2)}
.hs__chips{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font-family:var(--sans);font-size:var(--t1);color:var(--text-2)}
.hs__chips span{display:inline-flex;align-items:center;gap:5px}
.hs__chips i{display:inline-block;width:14px;height:10px;border-radius:2px;border:1px solid var(--linie-2)}

.hs__lista{list-style:none;margin:0;padding:0;max-width:none;display:flex;flex-direction:column}
.hs__lista li{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:baseline;padding:6px 4px;
  border-bottom:1px solid var(--crom-linie);cursor:pointer;border-radius:4px;font-family:var(--sans);font-size:var(--t2)}
.hs__lista li::before{content:none;display:none}
.hs__lista li:hover{background:var(--panza)}
.hs__lista .nr{font-family:var(--sans);font-size:var(--t1);color:var(--text-3)}
.hs__lista .val{font-family:var(--sans);font-size:var(--t1);color:var(--text-2)}
.hs .hs__lista li.sep{display:block;cursor:default;border:0;padding:10px 4px 2px;font-family:var(--sans);font-size:var(--t1);color:var(--text-3)}
.hs .hs__lista li.sep:first-child{padding-top:0}
.hs .hs__lista li.sep:hover{background:none}
.hs--slide .hs__lista li{font-size:var(--t2);padding:5px 4px}

.hs__note{font-family:var(--sans);font-size:var(--t1);color:var(--text-3);line-height:1.5;margin:auto 0 0;max-width:none}

/* --- harta -------------------------------------------------------------- */

.hs__harta{position:relative;min-height:0;overflow:hidden}
.hs__harta svg{width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.hs__harta svg.trage{cursor:grabbing}
.hs__harta path{stroke:var(--fundal);stroke-width:.7;vector-effect:non-scaling-stroke;transition:fill .18s}
.hs__harta .zona{cursor:pointer}
.hs__harta .zona:hover{stroke:var(--text);stroke-width:1.4}
.hs__harta .ales{stroke:var(--text);stroke-width:2.2}
.hs__harta .fundal{fill:var(--crom-2);cursor:default}

.hs__zoom{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;border:1px solid var(--linie-2);
  border-radius:8px;overflow:hidden;background:var(--panza);box-shadow:var(--umbra)}
.hs__zoom button{width:32px;height:30px;border:0;background:transparent;font-size:var(--t4);color:var(--text-2);cursor:pointer}
.hs__zoom button+button{border-top:1px solid var(--linie)}
.hs__zoom button:hover{color:var(--text);background:var(--panza-2)}

.hs__balon{position:absolute;pointer-events:none;z-index:5;background:var(--panza);border:1px solid var(--linie-2);
  border-radius:7px;box-shadow:var(--umbra-2);padding:7px 10px;font-family:var(--sans);font-size:var(--t1);line-height:1.4;max-width:240px}
.hs__balon b{font-weight:600}
.hs__balon span{display:block;font-family:var(--sans);font-size:var(--t1);color:var(--text-2)}
.hs__incarc{position:absolute;inset:0;display:grid;place-items:center;margin:0;font-family:var(--sans);font-size:var(--t2);color:var(--text-3)}

@media (max-width: 820px){
  .hs-corp{height:auto;overflow:auto}
  .hs--pagina,.hs--slide{grid-template-columns:1fr;grid-template-rows:60vh auto;height:auto}
  .hs--pagina .hs__panou,.hs--slide .hs__panou{order:1;border:0;border-top:1px solid var(--crom-linie);overflow:visible}
}

/* --- linii spre parteneri, căutare, harta mare ------------------------------ */
.hs .zona{transition:fill .35s ease, opacity .2s}
.hs .zona.stins{opacity:.12}
.hs .arce{pointer-events:none}
.hs .arc{fill:none;stroke:var(--ambra);stroke-opacity:.85;stroke-linecap:round;
  stroke-dasharray:1 0;animation:hs-arc .7s ease-out both}
.hs .arc__cap{fill:var(--ambra);stroke:var(--fundal);stroke-width:.4;animation:hs-cap .35s ease-out both}
@keyframes hs-arc{from{stroke-dasharray:0 1}to{stroke-dasharray:1 0}}
@keyframes hs-cap{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion: reduce){.hs .arc,.hs .arc__cap{animation:none}.hs .zona{transition:none}}
.hs__zoom button.on{background:var(--text);color:var(--fundal)}
.hs__cauta{display:flex;flex-direction:column;gap:5px}
.hs__cauta input{font-family:var(--sans);font-size:var(--t2);padding:7px 10px;border:1px solid var(--linie-2);border-radius:8px;background:var(--panza);color:var(--text)}
.hs__cauta input:focus{outline:2px solid var(--accent);outline-offset:1px}
.gf__trepte span[data-k]{cursor:help}
.hs--mare{position:fixed !important;inset:0;z-index:1000;height:100dvh !important;max-height:none !important;border:0 !important;border-radius:0 !important;
  grid-template-columns:1fr 340px !important;box-shadow:none}
.hs--mare .hs__harta{height:100%}
html.hs-deschis, html.hs-deschis body{overflow:hidden}
@media(max-width:760px){.hs--mare{grid-template-columns:1fr !important;grid-template-rows:62dvh 1fr}}

/* lista hărții, cu bare: se citește ca un grafic */
.hs__lista li.cu-bara{background:linear-gradient(to right,color-mix(in srgb,var(--accent) 16%,transparent) var(--w),transparent var(--w));border-radius:4px}
/* pe slide, panoul hărții păstrează doar ce se citește din sală */
.sld .hs--slide .hs__cauta,.sld .hs--slide .hs__meta,.sld .hs--slide .hs__note{display:none}
.sld .hs--slide .hs__panou{gap:10px;overflow-y:auto}
.sld .hs--slide .hs__nume{font-size:var(--t4)}