/* ════════════════════════════════════════════════════════════════════════════
   APLICATIA CLIENTULUI v2 (6-Oct-2026) — pielea bos.boostedmode.com, pe mobil.
   Prototipul: Claude Code Folder 1/design/app-univers/v2-mobil/ (PROPUNERE.md).

   Foaia asta se incarca DUPA toate celelalte si face trei lucruri:
   1. intoarce podeaua crem in negru, schimband TOKENII (nu regulile): tot ce citea
      --ch/--chink/--orc... trece singur pe negru;
   2. pune rama de HUD (colturi in paranteza + linii de scanare) pe panouri;
   3. deseneaza harta sistemului (`.dg`) — singurul loc crem ramas, in stilul schemei
      din brandbook (design/schema.html): hartie cu grila mm, bucati ridicate, un
      singur ax de flux. Pe mobil fluxul curge in jos; de la 900px, in rand.

   Culorile literale stau doar in tokenii de mai jos (regula din style.css).
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* podeaua: negrul HUD-ului. Cerneala --chink pe --ch: 17,4:1. */
  --ch: #07080A; --ch0: #101215; --ch2: #141619; --ch3: #1C1F23;
  --chink: #EDEEEA; --chink2: #B9BBB6; --chink3: #8A8C88;   /* 3: 5,6:1 pe --ch0 */
  --chrule: #2E3236; --chrule2: #25282C;
  --muchie: #5E6368;                                         /* 3,1:1 pe --ch0 */
  --stins: #5C5E60;
  /* cerneala de familie: pe negru se iau cele de display (toate >= 5:1 pe --ch0). */
  --cyc: var(--cy); --blc: #5284EE; --yec: var(--ye); --gnc: var(--gn);
  --mgc: #D35CAD; --rdc: #E85842; --orc: #F04E23;
  /* fundal de pastila: 16% familie in negru, opac. */
  --cyf: #0F2A2C; --blf: #141E36; --yef: #2E2410; --gnf: #13261A;
  --mgf: #2C1426; --rdf: #2E1511; --orf: #301710;
  /* Atragere = ROSU (lot17, 6-Oct-2026, decizia lui Ali: in Univers Atragere a trecut pe
     `ro` #EF4444, Ritmul pe roz). Pe negru: 4,9:1 pe --disp2, 5,0:1 pe --ch0 — trece ca
     text. Pe crem (#EF4444 pe --hartie = 2,99:1) NU trece: textul rosu pe hartie ia
     --hartie-ro (5,97:1 pe --hartie, 5,22:1 pe --hartie-ridicata), ca regula --orc. */
  --ro: #EF4444; --rod: #EF4444; --roc: #EF4444; --rof: #2F1313;
  --disp: #0B0C0E; --disp2: #121417;

  /* hartia hartii — singura suprafata crem care ramane (schema din brandbook) */
  --hartie: #E7E5E0; --hartie-ridicata: #D9D7D1; --hartie-ink: #17181A;
  --hartie-ink2: #43474A; --hartie-rule: #B4B2AB; --hartie-or: #922F15; --hartie-ro: #A51D1D;
  --grila-fina: rgba(23, 24, 26, .055); --grila-groasa: rgba(23, 24, 26, .17);
  --scanare: rgba(255, 255, 255, .028);
  --lipsa: #E2705D; --lipsa-f: rgba(232, 88, 66, .08); --lipsa-m: rgba(232, 88, 66, .5);
  --cond: "Barlow Semi Condensed", "Archivo Narrow", var(--sans);
}

body { background: var(--ch); color: var(--chink); }

/* ═══════ RAMA HUD ═══════
   Colturile: patru gradienti de 14px in culoarea zonei (`--fam`, pus pe #acasa de
   arataFila). Scanarea: linii de 1px la 3px, aproape invizibile — textura, nu zgomot. */
.ecran { --fam: var(--or); }
.ecran[data-zona="mg"] { --fam: var(--mgd); }
.ecran[data-zona="ro"] { --fam: var(--rod); }
.ecran[data-zona="ye"] { --fam: var(--ye); }
.ecran[data-zona="gn"] { --fam: var(--gn); }
.ecran[data-zona="cy"] { --fam: var(--cy); }
.ecran[data-zona="bl"] { --fam: var(--bld); }

.wr-panou, .fapt, .card, .continut > section > article {
  --hk: color-mix(in srgb, var(--fam, var(--or)) 70%, transparent);
  background:
    linear-gradient(var(--hk), var(--hk)) top left / 14px 1px no-repeat,
    linear-gradient(var(--hk), var(--hk)) top left / 1px 14px no-repeat,
    linear-gradient(var(--hk), var(--hk)) top right / 14px 1px no-repeat,
    linear-gradient(var(--hk), var(--hk)) top right / 1px 14px no-repeat,
    linear-gradient(var(--hk), var(--hk)) bottom left / 14px 1px no-repeat,
    linear-gradient(var(--hk), var(--hk)) bottom left / 1px 14px no-repeat,
    linear-gradient(var(--hk), var(--hk)) bottom right / 14px 1px no-repeat,
    linear-gradient(var(--hk), var(--hk)) bottom right / 1px 14px no-repeat,
    repeating-linear-gradient(0deg, var(--scanare) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--ch0), var(--disp2));
  border: 1px solid color-mix(in srgb, var(--fam, var(--or)) 24%, var(--chrule2));
}

/* ═══════ BARA DE SUS: marca e buton (duce la Harta) + butonul HARTA ═══════ */
button.bara-marca {
  height: auto; padding: 0; margin: 0; border: 0; background: none; box-shadow: none;
  cursor: pointer; font: inherit;
}
button.bara-marca:hover { background: none; color: var(--or); }
.bara-harta {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--p3);
  border: 1px solid var(--disprule); border-radius: var(--r0); background: none; box-shadow: none;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dispink2); cursor: pointer;
}
.bara-harta:hover { color: var(--dispink); background: rgba(255, 255, 255, .05); }
.bara-harta-i { width: 16px; height: 16px; flex: none; shape-rendering: crispEdges; }
.bara-harta-activ, .bara-harta-activ:hover { color: var(--or); border-color: var(--or); background: rgba(240, 78, 35, .10); }

/* ═══════ ANTETUL ZONEI: seria · zona, titlul, descrierea ═══════ */
.pt-antet-cale { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--p2);
                 font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.pt-antet-cale .pt-antet-serie { margin: 0; }
.pt-antet-zona { color: var(--fam, var(--or)); }
.pt-antet-zona::before { content: "· "; color: var(--chink3); }
.pt-antet-desc { margin: 0; max-width: 60ch; font-size: 15px; line-height: 1.5; color: var(--chink2); }
.pt-antet-desc[hidden] { display: none; }
.pt-antet-ic { box-shadow: inset 0 -3px 0 var(--fam, var(--or)); }

/* ═══════ DOCK: culoarea zonei pe pictograma ═══════
   `.dock-b[data-g]` din pult-acasa.css stie doar cinci grupuri vechi; zonele isi pun
   clasa `wr-f-<fam>` si castiga prin specificitate egala + ordinea foii. */
.dock-b.wr-f-or { --c: var(--ord); }
.dock-b.wr-f-mg { --c: var(--mgd); }
.dock-b.wr-f-ro { --c: var(--rod); }
.dock-b.wr-f-ye { --c: var(--yed); }
.dock-b.wr-f-gn { --c: var(--gnd); }
.dock-b.wr-f-cy { --c: var(--cyd); }
.dock-b.wr-f-bl { --c: var(--bld); }
.dock-b-activ.wr-f-or, .dock-b-activ.wr-f-mg, .dock-b-activ.wr-f-ro, .dock-b-activ.wr-f-ye,
.dock-b-activ.wr-f-gn, .dock-b-activ.wr-f-cy, .dock-b-activ.wr-f-bl {
  color: var(--c); box-shadow: inset 0 2px 0 var(--c);
  background: color-mix(in srgb, var(--c) 10%, transparent);
}
.dock-b-activ .dock-i { color: var(--c, var(--or)); }
.subfile[data-g="60"] { --c: var(--bld); }
/* Dunga de sub sub-file = culoarea ZONEI (ZONE din app.js), nu cheia veche din
   pult-acasa.css (care punea Atragerea pe roz si Fundatia pe turcoaz). */
.subfile[data-g="10"] { --c: var(--ord); }
.subfile[data-g="20"] { --c: var(--rod); }
.subfile[data-g="30"] { --c: var(--yed); }
.subfile[data-g="40"] { --c: var(--gnd); }
.subfile[data-g="50"] { --c: var(--cyd); }
.wr-f-ro { --c: var(--rod); }
.fam-ro { --fam-crem: var(--hartie-ro); --fam-disp: var(--rod); }
/* pe hartia hartii, codul zonei Atragere (BM-D) poarta rosul inchis de text */
.dg-bucata.wr-f-ro .dg-cod { color: var(--hartie-ro); }
/* sase butoane pe 390px: o eticheta lunga (EN „The Foundation") se rupe pe doua randuri
   in loc sa se taie cu „…". */
.dock-t { white-space: normal; text-align: center; overflow-wrap: anywhere;
          display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ═══════ HARTA SISTEMULUI (.dg) — schema din brandbook ═══════ */
.dg {
  margin: 0 0 var(--p6); padding: var(--p6) var(--p4);
  border-radius: var(--r); color: var(--hartie-ink);
  background-color: var(--hartie);
  background-image:
    linear-gradient(var(--grila-groasa) 1px, transparent 1px),
    linear-gradient(90deg, var(--grila-groasa) 1px, transparent 1px),
    linear-gradient(var(--grila-fina) 1px, transparent 1px),
    linear-gradient(90deg, var(--grila-fina) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  background-position: -1px -1px;
}
.dg:empty { display: none; }
.dg-plansa { display: flex; flex-direction: column; gap: var(--p6); max-width: 1040px; margin: 0 auto; }

/* nucleul: singurul display negru — aici e culoarea */
.dg-nucleu {
  display: flex; flex-direction: column; gap: var(--p1); padding: var(--p4);
  background: var(--disp); color: var(--dispink); border-radius: var(--r0);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 10px 22px -12px rgba(0, 0, 0, .55);
}
.dg-nucleu-cap { display: flex; justify-content: space-between; gap: var(--p2);
                 font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--dispink2); }
.dg-nucleu-cap b { color: var(--or); font-weight: 600; }
.dg-nucleu-nume { font-family: var(--cond); font-weight: 600; font-size: 26px; line-height: 1.05; overflow-wrap: anywhere; }
.dg-nucleu-sub { margin: 0; font-size: 14px; line-height: 1.45; color: var(--dispink2); }

/* fluxul: o lista ordonata, un pas = numar patrat + bucata ridicata */
.dg-flux { list-style: none; margin: 0; padding: 0 var(--p8) 0 0; position: relative;
           display: flex; flex-direction: column; gap: var(--p6); }
.dg-pas { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--p2); align-items: start; }
/* sageata in jos, intre pasi */
.dg-pas:not(:last-of-type)::after {
  content: ""; position: absolute; left: calc(28px + var(--p2) + 24px); bottom: calc(-1 * var(--p6));
  width: 1px; height: var(--p6); background: var(--hartie-ink2);
}
.dg-pas:not(:last-of-type)::before {
  content: ""; position: absolute; left: calc(28px + var(--p2) + 21px); bottom: calc(-1 * var(--p6)); z-index: 1;
  border: 4px solid transparent; border-top: 6px solid var(--hartie-ink2); border-bottom: 0;
}
.dg-nr {
  display: grid; place-items: center; width: 28px; height: 28px; margin-top: 2px;
  border: 1px solid var(--hartie-ink); border-radius: 2px; background: var(--hartie);
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--hartie-ink);
}
.dg-bucata {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: 100%;
  height: auto; min-height: 0; padding: var(--p3) var(--p4); margin: 0; text-align: left;
  background: var(--hartie-ridicata); color: var(--hartie-ink);
  border: 1px solid var(--hartie-rule); border-radius: var(--r0);
  box-shadow: 0 1px 0 rgba(23, 24, 26, .12), 0 6px 14px -8px rgba(23, 24, 26, .35);
  white-space: normal;
  font: inherit; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease;
}
.dg-bucata:hover { background: var(--hartie-ridicata); color: var(--hartie-ink); transform: translateY(-1px);
                   box-shadow: 0 1px 0 rgba(23, 24, 26, .12), 0 10px 18px -8px rgba(23, 24, 26, .45); }
.dg-bucata:focus-visible { outline: 2px solid var(--hartie-ink); outline-offset: 3px; }
.dg-bucata-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--p2); }
.dg-ic { width: 26px; height: 26px; padding: 5px; box-sizing: content-box; flex: none; border-radius: 4px;
         background: var(--disp); color: var(--c); shape-rendering: crispEdges; }
.dg-cod { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--hartie-ink2); }
.dg-nume { font-family: var(--cond); font-weight: 600; font-size: 22px; line-height: 1.1; }
.dg-fel { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
          line-height: 1.5; color: var(--hartie-ink2); overflow-wrap: anywhere; }
.dg-insigna { align-self: flex-start; padding: 3px 8px; border-radius: 3px; background: var(--disp);
              font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .1em;
              text-transform: uppercase; color: var(--c); }

/* bucla de intoarcere: Masurare -> Fundatia, o linie pe dreapta fluxului */
.dg-bucla { position: absolute; top: 18px; bottom: 18px; right: var(--p2); width: var(--p4);
            border: 1px dashed var(--hartie-ink2); border-left: 0; border-radius: 0 6px 6px 0; pointer-events: none; }
.dg-bucla::before { content: ""; position: absolute; top: -5px; left: -7px;
                    border: 4px solid transparent; border-right: 7px solid var(--hartie-ink2); border-left: 0; }
.dg-bucla-t { margin: 0; font-family: var(--mono); font-size: 12px; line-height: 1.5; letter-spacing: .04em; color: var(--hartie-ink2); }
.dg-bucla-t::before { content: "↺ "; color: var(--hartie-or); }

@media (min-width: 900px) {
  .dg { padding: var(--p8); }
  .dg-flux { flex-direction: row; gap: var(--p6); padding: 0 0 var(--p8); }
  .dg-pas { flex: 1 1 0; min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .dg-pas:not(:last-of-type)::after { left: auto; right: calc(-1 * var(--p6)); top: 64px; bottom: auto; width: var(--p6); height: 1px; }
  .dg-pas:not(:last-of-type)::before { left: auto; right: calc(-1 * var(--p6)); top: 60px; bottom: auto;
    border: 4px solid transparent; border-left: 6px solid var(--hartie-ink2); border-right: 0; }
  .dg-bucata { min-height: 180px; }
  .dg-bucla { top: auto; bottom: 0; left: 10%; right: 10%; width: auto; height: var(--p4);
              border: 1px dashed var(--hartie-ink2); border-top: 0; border-radius: 0 0 6px 6px; }
  .dg-bucla::before { top: -6px; left: -5px; border: 4px solid transparent; border-bottom: 7px solid var(--hartie-ink2); border-top: 0; }
}

/* ═══════ „IN CURAND": ce nu exista, spus onest, fara buton ═══════ */
.in-curand {
  display: flex; flex-direction: column; gap: var(--p1); margin: var(--p4) 0; padding: var(--p3) var(--p4);
  border: 1px dashed var(--lipsa-m); border-radius: var(--r0); background: var(--lipsa-f); color: var(--chink2);
}
.in-curand[hidden] { display: none; }
.in-curand-tag { align-self: flex-start; font-family: var(--mono); font-size: 12px; font-weight: 600;
                 letter-spacing: .14em; text-transform: uppercase; color: var(--lipsa); }
.in-curand-t { color: var(--chink); font-size: 15px; }
.in-curand p { margin: 0; font-size: 14px; line-height: 1.5; }

/* Profil: „Chestionarul de onboarding" (buton nowrap) iesea cu 9px din ecran la 390px,
   langa textul starii. Pe ecran ingust coboara sub text. (Preexistent, gasit de harnas.) */
@media (max-width: 599px) {
  .profil-stare { flex-wrap: wrap; }
  .profil-text { flex-basis: calc(100% - 18px); }
}