/* ============================================================================
   mds-metodologie-hub.css · pagina „Metodologie” (lot 30)
   Aceleași jetoane și mărimi ca paginile Acțiuni (`.mdsx .xhb`, mds-hub.css):
   13.5/20, 15.5/22, 15.5/24, 20/26, 25/30, 30/36, 34/40 (telefon 21.5/28, 30/36).
   Capitolele nu arată toate la fel: pași, trepte, familii, panouri, tabel, liste, jurnal.
   ============================================================================ */

/* antetul */
.mdsx .xmh .xmh-top{ padding-bottom:0; }
.mdsx .xmh .xhb-ans{ max-width:760px; }
.mdsx .xmh-kp{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:760px; margin:32px 0 0; padding:0; list-style:none; }
.mdsx .xmh-kp li{ display:flex; flex-direction:column; gap:4px; padding:18px 20px; border-radius:20px; background:var(--e-s1); }
.mdsx .xmh-kp b{ color:var(--e-ink); font:600 30px/36px var(--xf); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.mdsx .xmh-kp span{ color:var(--e-ink2); font:400 13.5px/20px var(--xf); }

/* corpul și cuprinsul */
.mdsx .xmh-g{ display:grid; grid-template-columns:minmax(0,760px) 240px; grid-template-areas:"m toc"; justify-content:start; gap:0 64px; margin-top:56px; }
.mdsx .xmh-m{ grid-area:m; min-width:0; }
.mdsx .xmh-toc{ grid-area:toc; position:sticky; top:24px; align-self:start; max-height:calc(100vh - 48px); overflow:auto; scrollbar-width:none; }
.mdsx .xmh-toc::-webkit-scrollbar{ display:none; }
.mdsx .xmh-toc > p{ margin:0 0 10px; color:var(--e-ink3); font:600 13.5px/20px var(--xf); }
.mdsx .xmh-toc ol{ margin:0; padding:0; list-style:none; border-left:1px solid var(--e-hair); }
.mdsx .xmh-toc a{ display:flex; align-items:baseline; gap:10px; margin-left:-1px; padding:6px 0 6px 14px; border-left:1px solid transparent; color:var(--e-ink2); font:400 13.5px/20px var(--xf); text-decoration:none; transition:color .15s, border-color .15s; }
.mdsx .xmh-toc a:hover{ color:var(--e-ink); border-left-color:var(--e-ink2); }
.mdsx .xmh-toc a:focus-visible{ outline:2px solid var(--lk); outline-offset:2px; border-radius:6px; }
.mdsx .xmh-toc i{ flex:none; min-width:18px; color:var(--e-ink3); font:500 11.5px/20px var(--xf); font-style:normal; font-variant-numeric:tabular-nums; }

/* capitolele */
.mdsx .xmh-s{ margin-top:64px; }
.mdsx .xmh-s:first-child{ margin-top:0; }
.mdsx .xmh-s [id]{ scroll-margin-top:24px; }
.mdsx .xmh-sh{ margin-bottom:20px; }
.mdsx .xhb .xmh-sh h2{ margin:0; color:var(--e-ink); font:700 25px/30px var(--xf); letter-spacing:-.02em; text-wrap:balance; }
.mdsx .xmh-sh p{ margin:8px 0 0; color:var(--e-ink2); font:400 15.5px/24px var(--xf); }
.mdsx .xmh-sh p b, .mdsx .xmh-tx b, .mdsx .xmh-note b, .mdsx .xmh-ls b, .mdsx .xmh-pn b, .mdsx .xmh-pr b, .mdsx .xmh-dis b{ color:var(--e-ink); font-weight:600; }

/* 1 · pașii: patru carduri */
.mdsx .xmh-st{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; counter-reset:xmh; }
.mdsx .xmh-st li{ position:relative; display:flex; flex-direction:column; padding:20px; border-radius:20px; background:var(--e-s1); counter-increment:xmh; }
.mdsx .xmh-st li::after{ content:counter(xmh); position:absolute; top:20px; right:20px; color:var(--e-ink3); font:600 13.5px/20px var(--xf); font-variant-numeric:tabular-nums; }
.mdsx .xmh-st__i{ display:grid; place-items:center; width:36px; height:36px; margin-bottom:14px; border-radius:11px; background:rgba(29,155,240,.14); color:#1d9bf0; }
.mdsx .xmh-st li:nth-child(2) .xmh-st__i{ background:rgba(0,186,124,.14); color:#00ba7c; }
.mdsx .xmh-st li:nth-child(3) .xmh-st__i{ background:rgba(125,122,255,.16); color:#9d9aff; }
.mdsx .xmh-st li:nth-child(4) .xmh-st__i{ background:rgba(255,212,0,.14); color:#ffd400; }
.mdsx .xmh-st__i svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.mdsx .xmh-st b{ color:var(--e-ink); font:600 15.5px/22px var(--xf); }
.mdsx .xmh-st p{ margin:6px 0 0; color:var(--e-ink2); font:400 13.5px/20px var(--xf); }

/* 2 · treptele verdictului: un panou cu rânduri, fiecare cu culoarea și numărul de trepte */
.mdsx .xmh-bds{ margin:0; padding:0; list-style:none; overflow:hidden; border-radius:20px; background:var(--e-s1); }
.mdsx .xmh-bd{ --c:#d9b00f; position:relative; display:flex; align-items:flex-start; gap:16px; padding:16px 20px; }
.mdsx .xmh-bd + .xmh-bd::before{ content:""; position:absolute; top:0; left:20px; right:0; height:1px; background:var(--e-hair); }
.mdsx .xmh-bd--5{ --c:#00ba7c; } .mdsx .xmh-bd--4{ --c:#5cc96b; } .mdsx .xmh-bd--3{ --c:#d9b00f; } .mdsx .xmh-bd--2{ --c:#ff6b4a; } .mdsx .xmh-bd--1{ --c:#f4212e; }
.mdsx .xmh-bd__p{ display:flex; gap:3px; flex:none; padding-top:5px; }
.mdsx .xmh-bd__p i{ width:6px; height:14px; border-radius:3px; background:var(--e-s3); }
.mdsx .xmh-bd__p i.on{ background:var(--c); }
.mdsx .xmh-bd b{ display:block; color:var(--c); font:600 15.5px/22px var(--xf); }
.mdsx .xmh-bd p{ margin:2px 0 0; color:var(--e-ink2); font:400 13.5px/20px var(--xf); }
.mdsx .xmh-note{ margin:14px 0 0; color:var(--e-ink2); font:400 15.5px/24px var(--xf); }

/* 3 · familiile: două coloane de rânduri, fără carduri */
.mdsx .xmh-fm{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 32px; margin:0; padding:0; list-style:none; }
.mdsx .xmh-fm li{ padding:16px 0; border-top:1px solid var(--e-hair); }
.mdsx .xmh-fm b{ color:var(--e-ink); font:600 15.5px/22px var(--xf); }
.mdsx .xmh-fm p{ margin:4px 0 0; color:var(--e-ink2); font:400 13.5px/20px var(--xf); }
/* cum se combină / ce nu publicăm / AI: trei panouri cu accent de culoare */
.mdsx .xmh-pr{ display:grid; gap:12px; margin-top:24px; }
.mdsx .xmh-pr > div{ --c:#1d9bf0; padding:20px 24px; border-radius:20px; background:var(--e-s1); box-shadow:inset 3px 0 0 var(--c); }
.mdsx .xmh-pr > div:nth-child(2){ --c:#ffd400; }
.mdsx .xmh-pr > div:nth-child(3){ --c:#9d9aff; }
.mdsx .xhb .xmh-pr h3{ margin:0; color:var(--e-ink); font:600 15.5px/22px var(--xf); }
.mdsx .xmh-pr p{ margin:6px 0 0; color:var(--e-ink2); font:400 15.5px/24px var(--xf); }
.mdsx .xmh-lk{ margin-top:20px; }

/* 4 · sursele: tabel */
.mdsx .xmh-tw{ overflow:hidden; border-radius:20px; background:var(--e-s1); }
.mdsx .xmh-tb{ width:100%; border-collapse:collapse; }
.mdsx .xmh-tb th, .mdsx .xmh-tb td{ padding:14px 16px; border-top:1px solid var(--e-hair); color:var(--e-ink2); font:400 13.5px/20px var(--xf); text-align:left; vertical-align:top; }
.mdsx .xmh-tb thead th{ border-top:0; color:var(--e-ink3); font-weight:600; }
.mdsx .xmh-tb tbody th{ width:28%; color:var(--e-ink); font:600 13.5px/20px var(--xf); }
.mdsx .xmh-tb tbody td:last-child{ width:30%; }

/* 5, 6, 10 · text */
.mdsx .xmh-tx p{ margin:0 0 14px; color:var(--e-ink2); font:400 15.5px/24px var(--xf); }
.mdsx .xmh-tx p:last-child{ margin-bottom:0; }

/* 7, 8 · liste cu semn: atenție (galben) și bifă (verde) */
.mdsx .xmh-ls{ display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.mdsx .xmh-ls li{ position:relative; padding-left:36px; color:var(--e-ink2); font:400 15.5px/24px var(--xf); }
.mdsx .xmh-ls li::before{ content:""; position:absolute; top:1px; left:0; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; }
.mdsx .xmh-ls--w li::before{ content:"!"; background:rgba(255,212,0,.16); color:#ffd400; font:700 13.5px/22px var(--xf); text-align:center; }
.mdsx .xmh-ls--ok li::before{ background:rgba(0,186,124,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%2300ba7c' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }

/* 9 · cine publică: panou */
.mdsx .xmh-pn{ padding:24px; border-radius:20px; background:var(--e-s1); }
.mdsx .xmh-pn p{ margin:0 0 14px; color:var(--e-ink2); font:400 15.5px/24px var(--xf); }
.mdsx .xmh-pn p:last-child{ margin-bottom:0; }

/* 11 · nu e consultanță: panoul care trebuie văzut */
.mdsx .xmh-dis{ padding:28px; border-radius:20px; background:rgba(255,212,0,.06); box-shadow:inset 0 0 0 1px rgba(255,212,0,.2); }
.mdsx .xmh-dis .xmh-sh{ margin-bottom:12px; }
.mdsx .xmh-dis p{ margin:0 0 12px; color:var(--e-ink2); font:400 15.5px/24px var(--xf); }
.mdsx .xmh-dis p:last-child{ margin-bottom:0; }

/* 12 · jurnalul modificărilor */
.mdsx .xmh-log{ margin:0; padding:0; list-style:none; border-left:1px solid var(--e-hair); }
.mdsx .xmh-log li{ position:relative; display:flex; flex-wrap:wrap; gap:4px 16px; padding:0 0 0 20px; }
.mdsx .xmh-log li::before{ content:""; position:absolute; top:7px; left:-4px; width:7px; height:7px; border-radius:50%; background:var(--e-ink2); }
.mdsx .xmh-log time{ color:var(--e-ink3); font:500 13.5px/20px var(--xf); font-variant-numeric:tabular-nums; }
.mdsx .xmh-log span{ color:var(--e-ink); font:400 15.5px/22px var(--xf); }

/* întrebările stau sub capitole, în aceeași coloană */
.mdsx .xmh-m > .xfq{ margin-top:72px; }

/* ── tabletă: cuprinsul urcă deasupra, ca rând care se derulează ── */
@media (max-width:1099px){
  .mdsx .xmh-g{ grid-template-columns:minmax(0,1fr); grid-template-areas:"toc" "m"; margin-top:40px; }
  .mdsx .xmh-toc{ position:static; max-height:none; overflow:visible; margin-bottom:40px; }
  .mdsx .xmh-toc > p{ display:none; }
  .mdsx .xmh-toc ol{ display:flex; gap:8px; margin:0 -24px; padding:0 24px; overflow-x:auto; border-left:0; scrollbar-width:none; overscroll-behavior-x:contain; }
  .mdsx .xmh-toc ol::-webkit-scrollbar{ display:none; }
  .mdsx .xmh-toc li{ flex:none; }
  .mdsx .xmh-toc a{ margin:0; padding:8px 14px; border:0; border-radius:999px; background:var(--e-s1); color:var(--e-ink); font-weight:500; white-space:nowrap; }
  .mdsx .xmh-toc a:hover{ background:var(--e-s2); }
}
/* ── telefon ── */
@media (max-width:720px){
  /* cele trei cifre: un panou cu trei rânduri, cifra în stânga */
  .mdsx .xmh-kp{ grid-template-columns:minmax(0,1fr); gap:0; margin-top:24px; overflow:hidden; border-radius:20px; background:var(--e-s1); }
  .mdsx .xmh-kp li{ position:relative; flex-direction:row; align-items:center; gap:14px; padding:12px 16px; border-radius:0; background:none; }
  .mdsx .xmh-kp li + li::before{ content:""; position:absolute; top:0; left:16px; right:0; height:1px; background:var(--e-hair); }
  .mdsx .xmh-kp b{ flex:none; min-width:84px; font-size:21.5px; line-height:28px; }
  .mdsx .xmh-s{ margin-top:48px; }
  .mdsx .xhb .xmh-sh h2{ font-size:21.5px; line-height:28px; }
  .mdsx .xmh-st{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .mdsx .xmh-st li{ display:grid; grid-template-columns:36px minmax(0,1fr); column-gap:14px; padding:16px; }
  .mdsx .xmh-st__i{ grid-row:span 2; margin:0; }
  .mdsx .xmh-st li::after{ top:16px; right:16px; }
  .mdsx .xmh-bd{ padding:14px 16px; gap:14px; }
  .mdsx .xmh-bd + .xmh-bd::before{ left:16px; }
  .mdsx .xmh-fm{ grid-template-columns:minmax(0,1fr); }
  .mdsx .xmh-pr > div{ padding:18px 20px; }
  .mdsx .xmh-tb thead{ display:none; }
  .mdsx .xmh-tb, .mdsx .xmh-tb tbody, .mdsx .xmh-tb tr, .mdsx .xmh-tb th, .mdsx .xmh-tb td{ display:block; width:auto !important; }
  .mdsx .xmh-tb tr{ padding:14px 16px; border-top:1px solid var(--e-hair); }
  .mdsx .xmh-tb tr:first-child{ border-top:0; }
  .mdsx .xmh-tb th, .mdsx .xmh-tb td{ padding:0; border:0; }
  .mdsx .xmh-tb td{ margin-top:4px; }
  .mdsx .xmh-tb td:last-child{ color:var(--e-ink3); }
  .mdsx .xmh-pn, .mdsx .xmh-dis{ padding:20px; }
}