/* ==========================================================================
   CribDocs — beágyazott termékdemók
   Öt önálló, animált felületrészlet. Mindegyik a saját .cd-piece--<név>
   névterében él: egyetlen szelektor sem hat a névterén kívülre.
   A színek a base.css :root tokenjeiből jönnek.
   ========================================================================== */

/* ==========================================================================
   evidence
   ========================================================================== */
/* ---- Nocturne tokenek (a brief 3. pontja szerint) ---------------------- */
/* ---- Set-piece: minden szelektor a gyökér alól indul ------------------- */
.cd-piece--evidence{
  --cd-ev-mute:#9397ab;
  --cd-ev-mute-2:#9397ab;
  --cd-ev-line:#3f424d;
  --cd-ev-ease:cubic-bezier(.2,.8,.25,1);
  --cd-ev-ease-pop:cubic-bezier(.22,1.15,.32,1);

  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0 auto;
  padding:0;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:15px;
  line-height:1.55;
  color:var(--color-text);
  -webkit-font-smoothing:antialiased;
}
.cd-piece--evidence *,
.cd-piece--evidence *::before,
.cd-piece--evidence *::after{box-sizing:border-box}
.cd-piece--evidence .cd-ev__card{
  position:relative;
  background:var(--color-surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  opacity:0;
  transform:translateY(16px);
  transition:opacity .62s var(--cd-ev-ease), transform .62s var(--cd-ev-ease);
  will-change:opacity,transform;
}
.cd-piece--evidence.is-visible .cd-ev__card{opacity:1;transform:none}
/* ---- Fejléc ----------------------------------------------------------- */
.cd-piece--evidence .cd-ev__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:16px;
  padding:20px 22px 16px;
}
.cd-piece--evidence .cd-ev__head-main{min-width:0;flex:1 1 260px}
.cd-piece--evidence .cd-ev__eyebrow{
  display:flex;align-items:center;gap:8px;
  margin:0 0 6px;
  font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-accent-2);
}
.cd-piece--evidence .cd-ev__eyebrow i{font-size:14px}
.cd-piece--evidence .cd-ev__title{
  margin:0;
  font-size:21px;font-weight:500;letter-spacing:-0.015em;line-height:1.12;
  color:var(--color-text);
}
.cd-piece--evidence .cd-ev__code{
  display:inline-block;
  margin-right:8px;
  padding:2px 7px;
  border-radius:var(--radius-sm);
  background:#2b2741;
  color:#e7e5fe;
  font-size:11px;font-weight:600;letter-spacing:.02em;
  vertical-align:3px;
}
.cd-piece--evidence .cd-ev__sub{
  margin:6px 0 0;
  font-size:13px;
  color:var(--cd-ev-mute);
}
.cd-piece--evidence .cd-ev__head-side{
  flex:0 0 auto;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  min-width:150px;
}
.cd-piece--evidence .cd-ev__counter{
  font-size:12px;color:var(--cd-ev-mute);white-space:nowrap;
}
.cd-piece--evidence .cd-ev__counter b{
  color:var(--color-text);font-weight:600;font-variant-numeric:tabular-nums;
}
.cd-piece--evidence .cd-ev__segs{display:flex;gap:5px;width:132px}
.cd-piece--evidence .cd-ev__seg{
  flex:1 1 0;height:4px;border-radius:999px;
  background:#2f313c;overflow:hidden;
}
.cd-piece--evidence .cd-ev__seg i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--ok),var(--ok-300));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .52s var(--cd-ev-ease);
}
.cd-piece--evidence .cd-ev__seg.is-on i{transform:scaleX(1)}
/* Nocturne szignatúra: a végein átlátszóba fadelő elválasztó */
.cd-piece--evidence .cd-ev__rule{
  height:1px;border:0;margin:0;
  background:linear-gradient(to right,transparent,var(--color-divider) 48px,var(--color-divider) calc(100% - 48px),transparent);
}
/* ---- Sorok ------------------------------------------------------------ */
.cd-piece--evidence .cd-ev__rows{list-style:none;margin:0;padding:6px 10px}
.cd-piece--evidence .cd-ev__row{
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  gap:14px;
  align-items:start;
  padding:14px 12px;
  border-radius:var(--radius-md);
  transition:background .4s var(--cd-ev-ease);
}
.cd-piece--evidence .cd-ev__row + .cd-ev__row{
  box-shadow:inset 0 1px 0 color-mix(in srgb,#e9e9ed 8%,transparent);
}
.cd-piece--evidence .cd-ev__row::after{
  content:"";position:absolute;inset:0;border-radius:var(--radius-md);
  background:radial-gradient(120% 120% at 8% 50%,rgba(63,158,115,.26),rgba(63,158,115,0) 62%);
  opacity:0;pointer-events:none;
}
.cd-piece--evidence .cd-ev__row.is-flash::after{animation:cd-ev-flash .8s ease-out}
@keyframes cd-ev-flash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.cd-piece--evidence .cd-ev__row.is-pending{
  background:color-mix(in srgb,#9184d9 6%,transparent);
}
.cd-piece--evidence .cd-ev__kind{
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-md);
  background:#2b2741;
  color:var(--color-accent-2);
  font-size:18px;
  box-shadow:var(--shadow-sm);
  transition:color .45s var(--cd-ev-ease), background .45s var(--cd-ev-ease), box-shadow .45s var(--cd-ev-ease);
}
.cd-piece--evidence .cd-ev__row.is-done .cd-ev__kind{
  background:color-mix(in srgb,#3f9e73 16%,#232532);
  color:var(--ok-300);
  box-shadow:0 0 0 1px color-mix(in srgb,#3f9e73 46%,transparent);
}
.cd-piece--evidence .cd-ev__name{
  margin:0;font-size:15px;font-weight:500;letter-spacing:-0.01em;line-height:1.3;
}
.cd-piece--evidence .cd-ev__meta{
  margin:3px 0 0;font-size:12.5px;color:var(--cd-ev-mute);
}
.cd-piece--evidence .cd-ev__hint{
  margin:2px 0 0;font-size:12.5px;color:var(--cd-ev-mute-2);font-style:italic;
}
/* bizonyíték-lapkák */
.cd-piece--evidence .cd-ev__tiles{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.cd-piece--evidence .cd-ev__tile{
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  border:1px dashed var(--cd-ev-line);
  color:var(--cd-ev-mute-2);
  font-size:16px;
  background:transparent;
  transform:scale(.94);
  opacity:.65;
  transition:transform .5s var(--cd-ev-ease-pop), opacity .4s var(--cd-ev-ease), border-color .4s var(--cd-ev-ease), background .4s var(--cd-ev-ease), color .4s var(--cd-ev-ease);
}
.cd-piece--evidence .cd-ev__tile.is-filled{
  border-style:solid;
  border-color:color-mix(in srgb,#3f9e73 42%,transparent);
  background:linear-gradient(145deg,#2b2741,#232532 70%);
  color:var(--ok-300);
  opacity:1;
  transform:none;
}
.cd-piece--evidence .cd-ev__tile.is-filled--doc{
  border-color:color-mix(in srgb,#9184d9 46%,transparent);
  color:var(--color-accent-2);
}
/* jobb oldali oszlop */
.cd-piece--evidence .cd-ev__side{
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  min-width:126px;
}
.cd-piece--evidence .cd-ev__pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;
  border-radius:999px;
  font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:var(--cd-ev-mute);
  background:#2f313c;
  box-shadow:var(--shadow-sm);
  transition:color .45s var(--cd-ev-ease), background .45s var(--cd-ev-ease), box-shadow .45s var(--cd-ev-ease);
}
.cd-piece--evidence .cd-ev__row.is-done .cd-ev__pill{
  color:var(--ok-300);
  background:color-mix(in srgb,#3f9e73 15%,#232532);
  box-shadow:0 0 0 1px color-mix(in srgb,#3f9e73 40%,transparent);
}
.cd-piece--evidence .cd-ev__cnt{white-space:nowrap}
.cd-piece--evidence .cd-ev__pill i{
  font-size:14px;
  transform:scale(.3) rotate(-25deg);
  opacity:0;
  width:0;
  transition:transform .5s var(--cd-ev-ease-pop), opacity .3s linear;
}
.cd-piece--evidence .cd-ev__row.is-done .cd-ev__pill i{
  transform:none;opacity:1;width:auto;
}
.cd-piece--evidence .cd-ev__upload{
  position:relative;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;
  border-radius:var(--radius-md);
  border:1px solid color-mix(in srgb,#9184d9 55%,transparent);
  background:transparent;
  color:var(--color-accent-2);
  font:inherit;font-size:12.5px;font-weight:500;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  transition:background .25s var(--cd-ev-ease), color .25s var(--cd-ev-ease), border-color .25s var(--cd-ev-ease), opacity .35s var(--cd-ev-ease), transform .35s var(--cd-ev-ease);
}
.cd-piece--evidence .cd-ev__upload:hover{background:color-mix(in srgb,#9184d9 12%,transparent)}
.cd-piece--evidence .cd-ev__upload:focus-visible{
  outline:2px solid var(--color-accent);outline-offset:2px;
}
.cd-piece--evidence .cd-ev__upload i{font-size:15px}
.cd-piece--evidence .cd-ev__upload .cd-ev__lbl-run{display:none}
.cd-piece--evidence .cd-ev__row.is-pending .cd-ev__upload{
  box-shadow:0 0 0 3px color-mix(in srgb,#9184d9 18%,transparent);
}
.cd-piece--evidence .cd-ev__row.is-uploading .cd-ev__upload{
  color:var(--cd-ev-mute);border-color:var(--cd-ev-line);cursor:default;
}
.cd-piece--evidence .cd-ev__row.is-uploading .cd-ev__upload .cd-ev__lbl-idle{display:none}
.cd-piece--evidence .cd-ev__row.is-uploading .cd-ev__upload .cd-ev__lbl-run{display:inline}
.cd-piece--evidence .cd-ev__row.is-done .cd-ev__upload{
  opacity:0;transform:scale(.96);visibility:hidden;
}
.cd-piece--evidence .cd-ev__prog{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:color-mix(in srgb,#9184d9 22%,transparent);
  opacity:0;
}
.cd-piece--evidence .cd-ev__prog i{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--color-accent),var(--color-accent-2));
  transform:scaleX(0);transform-origin:left center;
}
.cd-piece--evidence .cd-ev__row.is-uploading .cd-ev__prog{opacity:1}
.cd-piece--evidence .cd-ev__row.is-uploading .cd-ev__prog i{animation:cd-ev-prog .92s cubic-bezier(.35,.6,.25,1) forwards}
@keyframes cd-ev-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* ---- Lábléc: figyelmeztetés + lezárás gomb ---------------------------- */
.cd-piece--evidence .cd-ev__foot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 22px 20px;
}
.cd-piece--evidence .cd-ev__states{display:grid;min-width:0;flex:1 1 240px}
.cd-piece--evidence .cd-ev__state{
  grid-area:1/1;
  display:flex;align-items:center;gap:9px;
  margin:0;font-size:13.5px;
  /* A visibility is átmenetet kap, hogy a fade megmaradjon, de az elúsztatott
     mondat a felolvasásból és a találat-tesztelésből is kiessen — enélkül a
     képernyőolvasó egyszerre olvasná fel a két, egymást kizáró állapotot. */
  transition:opacity .38s var(--cd-ev-ease), transform .38s var(--cd-ev-ease),
             visibility 0s linear .38s;
}
.cd-piece--evidence .cd-ev__state i{font-size:17px;flex:0 0 auto}
.cd-piece--evidence .cd-ev__state--warn{color:var(--wait-300)}
.cd-piece--evidence .cd-ev__state--warn i{color:var(--wait)}
.cd-piece--evidence .cd-ev__state--ok{color:var(--ok-300);opacity:0;visibility:hidden;transform:translateY(6px);pointer-events:none}
.cd-piece--evidence .cd-ev__state--ok i{color:var(--ok)}
.cd-piece--evidence.is-complete .cd-ev__state--warn{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none}
.cd-piece--evidence.is-complete .cd-ev__state--ok{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s,0s,0s}
.cd-piece--evidence .cd-ev__n{font-variant-numeric:tabular-nums;font-weight:600}
.cd-piece--evidence .cd-ev__close{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 20px;
  border-radius:var(--radius-md);
  border:1px solid var(--cd-ev-line);
  background:transparent;
  color:var(--cd-ev-mute);
  font:inherit;font-size:14px;font-weight:500;letter-spacing:-0.01em;
  cursor:not-allowed;
  opacity:.62;
  transition:color .45s var(--cd-ev-ease), border-color .45s var(--cd-ev-ease), background .45s var(--cd-ev-ease), opacity .45s var(--cd-ev-ease), transform .45s var(--cd-ev-ease-pop);
}
.cd-piece--evidence .cd-ev__close::before{
  content:"";position:absolute;inset:-8px;border-radius:16px;
  background:radial-gradient(60% 120% at 50% 50%,rgba(63,158,115,.38),rgba(63,158,115,0) 70%);
  opacity:0;pointer-events:none;
  transform:scale(.92);
  transition:opacity .5s var(--cd-ev-ease), transform .6s var(--cd-ev-ease);
}
.cd-piece--evidence .cd-ev__close-ico{
  display:grid;width:18px;height:18px;place-items:center;flex:0 0 auto;
}
.cd-piece--evidence .cd-ev__close-ico i{
  grid-area:1/1;font-size:18px;line-height:1;
  transition:opacity .34s var(--cd-ev-ease), transform .45s var(--cd-ev-ease-pop);
}
.cd-piece--evidence .cd-ev__close-ico .ph-check-circle{opacity:0;transform:scale(.4) rotate(-30deg)}
.cd-piece--evidence .cd-ev__close-lbl{display:grid}
.cd-piece--evidence .cd-ev__close-lbl span{
  grid-area:1/1;white-space:nowrap;
  transition:opacity .3s var(--cd-ev-ease), transform .34s var(--cd-ev-ease);
}
.cd-piece--evidence .cd-ev__close-lbl .cd-ev__lbl-open{opacity:0;transform:translateY(5px)}
.cd-piece--evidence .cd-ev__close.is-open{
  cursor:pointer;
  opacity:1;
  color:var(--ok-300);
  border-color:var(--ok);
  background:color-mix(in srgb,#3f9e73 12%,transparent);
}
.cd-piece--evidence .cd-ev__close.is-open::before{opacity:1;transform:scale(1)}
.cd-piece--evidence .cd-ev__close.is-open .ph-lock{opacity:0;transform:scale(.5) rotate(22deg)}
.cd-piece--evidence .cd-ev__close.is-open .ph-check-circle{opacity:1;transform:none}
.cd-piece--evidence .cd-ev__close.is-open .cd-ev__lbl-locked{opacity:0;transform:translateY(-5px)}
.cd-piece--evidence .cd-ev__close.is-open .cd-ev__lbl-open{opacity:1;transform:none}
.cd-piece--evidence .cd-ev__close.is-open:hover{background:color-mix(in srgb,#3f9e73 20%,transparent)}
.cd-piece--evidence .cd-ev__close:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.cd-piece--evidence .cd-ev__close.is-unlocking{animation:cd-ev-unlock .72s var(--cd-ev-ease-pop)}
@keyframes cd-ev-unlock{
  0%{transform:scale(1)}
  38%{transform:scale(1.045)}
  100%{transform:scale(1)}
}
/* halk visszaállító gomb */
.cd-piece--evidence .cd-ev__replay{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:transparent;
  color:var(--cd-ev-mute-2);
  font:inherit;font-size:11.5px;letter-spacing:.02em;
  cursor:pointer;
  transition:color .25s var(--cd-ev-ease), border-color .25s var(--cd-ev-ease);
}
.cd-piece--evidence .cd-ev__replay:hover{color:var(--color-accent-2);border-color:color-mix(in srgb,#9184d9 40%,transparent)}
.cd-piece--evidence .cd-ev__replay:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.cd-piece--evidence .cd-ev__replay i{font-size:13px}
.cd-piece--evidence .cd-ev__note{
  margin:12px 2px 0;
  font-size:12px;
  color:var(--cd-ev-mute-2);
  text-align:center;
}
/* ---- Reszponzív ------------------------------------------------------- */
@media (max-width:600px){.cd-piece--evidence .cd-ev__head{padding:18px 16px 14px}
.cd-piece--evidence .cd-ev__head-side{align-items:flex-start;min-width:0;flex:1 1 100%}
.cd-piece--evidence .cd-ev__title{font-size:19px}
.cd-piece--evidence .cd-ev__rows{padding:4px 6px}
.cd-piece--evidence .cd-ev__row{grid-template-columns:34px minmax(0,1fr);gap:12px;padding:14px 10px}
.cd-piece--evidence .cd-ev__kind{width:34px;height:34px;font-size:16px}
.cd-piece--evidence .cd-ev__side{
    /* A szövegoszlop alatt marad, nem feszül teljes szélességre: kész sornál
       különben egy magányos „2/2” pötty ült egy üres sor bal szélén. */
    grid-column:2;
    flex-direction:row;align-items:center;justify-content:flex-start;
    gap:12px;width:100%;min-width:0;
  }
.cd-piece--evidence .cd-ev__foot{padding:14px 16px 18px}
.cd-piece--evidence .cd-ev__close{width:100%;justify-content:center}
}
/* ---- Csökkentett mozgás: nincs animáció, végállapot látszik ----------- */
@media (prefers-reduced-motion: reduce){.cd-piece--evidence *,
  .cd-piece--evidence *::before,
  .cd-piece--evidence *::after{
    animation:none !important;
    transition:none !important;
  }
.cd-piece--evidence .cd-ev__card{opacity:1;transform:none}
.cd-piece--evidence .cd-ev__replay{display:none}
}

/* ==========================================================================
   blocked
   ========================================================================== */
/* --- Nocturne tokenek (a fájl önmagában is fusson) --- */
/* Ez a ket sor csak az onallo megnyitashoz kell - beillesztesnel torolheto. */
/* =========================================================
   SET-PIECE — minden szelektor .cd-piece--blocked alól indul
   ========================================================= */
.cd-piece--blocked{
  --cdbl-neutral-600:#9397ab;
  --cdbl-neutral-700:#595d6c;
  --cdbl-neutral-800:#3f424d;
  --cdbl-accent-100:#e7e5fe;
  --cdbl-accent-800:#423a6a;
  --cdbl-ease:cubic-bezier(.22,.61,.36,1);
  --cdbl-ease-soft:cubic-bezier(.33,1,.68,1);

  box-sizing:border-box;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--color-text);
  background:var(--color-bg);
  padding:0;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.cd-piece--blocked *,
.cd-piece--blocked *::before,
.cd-piece--blocked *::after{box-sizing:border-box;}
/* ---------- színpad ---------- */
.cd-piece--blocked .cdbl-stage{
  max-width:none;margin:0;
  display:flex;align-items:center;justify-content:center;gap:0;
}
/* ---------- közös panel ---------- */
.cd-piece--blocked .cdbl-label{
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--cdbl-neutral-600);display:flex;align-items:center;gap:6px;
}
.cd-piece--blocked .cdbl-req{color:var(--wait);font-weight:600;letter-spacing:0;text-transform:none;font-size:11px;}
.cd-piece--blocked .cdbl-cap{font-size:11px;color:var(--cdbl-neutral-600);letter-spacing:.02em;}
/* ---------- TELEFON ---------- */
.cd-piece--blocked .cdbl-phone{
  flex:0 0 auto;width:302px;max-width:100%;margin:0;
  border-radius:26px;padding:9px;
  background:linear-gradient(170deg,#2b2e3d,#1b1d29);
  box-shadow:var(--shadow-lg);
}
.cd-piece--blocked .cdbl-phone-screen{
  background:var(--color-bg);border-radius:19px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--cdbl-neutral-800);
  position:relative;
}
.cd-piece--blocked .cdbl-statusbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 16px 3px;font-size:11px;font-weight:600;color:#9397ab;letter-spacing:.02em;
}
.cd-piece--blocked .cdbl-statusbar i{font-size:12px;}
.cd-piece--blocked .cdbl-appbar{
  display:flex;align-items:center;gap:9px;padding:8px 14px 12px;
}
.cd-piece--blocked .cdbl-logo{
  width:22px;height:22px;border-radius:6px;background:var(--brand);
  display:grid;place-items:center;flex:0 0 auto;
}
.cd-piece--blocked .cdbl-logo i{font-size:14px;color:#fff;}
.cd-piece--blocked .cdbl-appbar-t{font-size:13px;font-weight:600;letter-spacing:-0.01em;}
.cd-piece--blocked .cdbl-appbar-s{font-size:11px;color:var(--cdbl-neutral-600);}
.cd-piece--blocked .cdbl-divider{
  height:1px;
  background:linear-gradient(to right,transparent,var(--color-divider) 22px,var(--color-divider) calc(100% - 22px),transparent);
}
.cd-piece--blocked .cdbl-form{padding:14px 14px 16px;display:flex;flex-direction:column;gap:13px;}
.cd-piece--blocked .cdbl-task{
  display:flex;align-items:flex-start;gap:9px;
  background:var(--color-surface);border-radius:var(--radius-md);
  padding:10px 11px;box-shadow:var(--shadow-sm);
}
.cd-piece--blocked .cdbl-task i{font-size:16px;color:var(--color-accent);margin-top:1px;}
.cd-piece--blocked .cdbl-task-t{font-size:13px;font-weight:600;letter-spacing:-0.01em;line-height:1.3;}
.cd-piece--blocked .cdbl-task-s{font-size:11px;color:var(--cdbl-neutral-600);margin-top:2px;}
.cd-piece--blocked .cdbl-field{display:flex;flex-direction:column;gap:7px;}
/* kategória chipek */
.cd-piece--blocked .cdbl-chips{display:flex;flex-wrap:wrap;gap:6px;}
.cd-piece--blocked .cdbl-chip{
  font:inherit;font-size:11.5px;font-weight:500;letter-spacing:.01em;
  color:#b2b6ca;background:transparent;
  border:1px solid var(--cdbl-neutral-800);border-radius:999px;
  padding:5px 10px;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  opacity:0;transform:translateY(6px) scale(.96);
  transition:opacity .38s var(--cdbl-ease),transform .38s var(--cdbl-ease),
             color .28s ease,border-color .28s ease,background-color .28s ease;
}
.cd-piece--blocked .cdbl-chip i{font-size:12px;}
.cd-piece--blocked .cdbl-chip:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.cd-piece--blocked .cdbl-chip:hover{border-color:var(--cdbl-neutral-700);color:var(--color-text);}
.cd-piece--blocked.is-step-chips .cdbl-chip,
.cd-piece--blocked.is-final .cdbl-chip{opacity:1;transform:none;}
.cd-piece--blocked .cdbl-chip:nth-child(1){transition-delay:0ms;}
.cd-piece--blocked .cdbl-chip:nth-child(2){transition-delay:55ms;}
.cd-piece--blocked .cdbl-chip:nth-child(3){transition-delay:110ms;}
.cd-piece--blocked .cdbl-chip:nth-child(4){transition-delay:165ms;}
.cd-piece--blocked .cdbl-chip:nth-child(5){transition-delay:220ms;}
.cd-piece--blocked .cdbl-chip[aria-pressed="true"],
.cd-piece--blocked .cdbl-chip.is-auto-picked{
  color:var(--wait-300);
  border-color:color-mix(in srgb, var(--wait) 55%, transparent);
  background:color-mix(in srgb, var(--wait) 18%, transparent);
}
/* ok mező */
.cd-piece--blocked .cdbl-textbox{
  min-height:58px;border-radius:var(--radius-md);
  background:var(--color-surface);box-shadow:var(--shadow-sm);
  padding:9px 11px;font-size:12.5px;line-height:1.5;color:var(--color-text);
}
.cd-piece--blocked .cdbl-caret{
  display:inline-block;width:1.5px;height:13px;vertical-align:-2px;margin-left:1px;
  background:var(--color-accent);opacity:0;
}
.cd-piece--blocked.is-typing .cdbl-caret{animation:cdbl-caret 1s steps(1,end) infinite;}
/* kire vár */
.cd-piece--blocked .cdbl-person{
  display:flex;align-items:center;gap:9px;
  background:var(--color-surface);border-radius:var(--radius-md);
  padding:8px 11px;box-shadow:var(--shadow-sm);
  opacity:0;transform:translateY(7px);
  transition:opacity .44s var(--cdbl-ease),transform .44s var(--cdbl-ease);
}
.cd-piece--blocked.is-step-person .cdbl-person,
.cd-piece--blocked.is-final .cdbl-person{opacity:1;transform:none;}
.cd-piece--blocked .cdbl-avatar{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  display:grid;place-items:center;font-size:10.5px;font-weight:600;letter-spacing:.02em;
  background:var(--cdbl-accent-800);color:var(--cdbl-accent-100);
}
.cd-piece--blocked .cdbl-person-t{font-size:12.5px;font-weight:600;}
.cd-piece--blocked .cdbl-person-s{font-size:11px;color:var(--cdbl-neutral-600);}
/* fotó */
.cd-piece--blocked .cdbl-photo{
  position:relative;height:74px;border-radius:var(--radius-md);overflow:hidden;
  background:
    linear-gradient(135deg,#3a3d52 0%,#2a2c3b 42%,#343751 100%),
    var(--color-surface);
  box-shadow:var(--shadow-sm);
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:9px 10px;
  opacity:0;transform:scale(.94);
  transition:opacity .42s var(--cdbl-ease),transform .5s var(--cdbl-ease-soft);
}
.cd-piece--blocked.is-step-photo .cdbl-photo,
.cd-piece--blocked.is-final .cdbl-photo{opacity:1;transform:none;}
.cd-piece--blocked .cdbl-photo::before{
  content:"";position:absolute;inset:0;
  background:
    repeating-linear-gradient(115deg,rgba(255,255,255,.045) 0 2px,transparent 2px 13px),
    radial-gradient(120% 90% at 22% 12%,rgba(145,132,217,.30),transparent 62%);
}
.cd-piece--blocked .cdbl-photo-flash{
  position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;
}
.cd-piece--blocked.is-step-photo .cdbl-photo-flash{animation:cdbl-flash .6s var(--cdbl-ease-soft) 1;}
.cd-piece--blocked .cdbl-photo-meta{
  position:relative;display:flex;align-items:center;gap:6px;
  font-size:10.5px;color:#cfd3e5;letter-spacing:.02em;
  background:rgba(22,24,38,.72);border-radius:999px;padding:3px 9px;
  backdrop-filter:blur(3px);
}
.cd-piece--blocked .cdbl-photo-ok{
  position:relative;width:21px;height:21px;border-radius:50%;
  display:grid;place-items:center;
  background:color-mix(in srgb, var(--ok) 26%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ok) 55%, transparent);
  color:var(--ok-300);font-size:12px;
}
/* beküldés gomb */
.cd-piece--blocked .cdbl-submit{
  position:relative;font:inherit;font-size:13px;font-weight:600;letter-spacing:.01em;
  color:#8b8fa3;background:transparent;
  border:1px solid var(--cdbl-neutral-800);border-radius:var(--radius-md);
  padding:11px 14px;cursor:not-allowed;width:100%;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:color .3s ease,border-color .3s ease,background-color .3s ease,transform .18s var(--cdbl-ease);
}
.cd-piece--blocked .cdbl-submit i{font-size:15px;}
.cd-piece--blocked .cdbl-submit:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.cd-piece--blocked.is-step-ready .cdbl-submit,
.cd-piece--blocked.is-final .cdbl-submit{
  color:var(--wait-300);cursor:pointer;
  border-color:color-mix(in srgb, var(--wait) 58%, transparent);
  background:color-mix(in srgb, var(--wait) 12%, transparent);
}
.cd-piece--blocked.is-pressing .cdbl-submit{transform:scale(.975);}
.cd-piece--blocked .cdbl-submit-hint{
  font-size:10.5px;color:var(--cdbl-neutral-600);text-align:center;margin-top:-6px;
}
/* elküldve pecsét */
.cd-piece--blocked .cdbl-sent{
  position:absolute;left:14px;right:14px;bottom:14px;
  display:flex;align-items:center;gap:8px;
  background:color-mix(in srgb, var(--ok) 20%, #1b2b25);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ok) 48%, transparent),0 8px 22px rgba(0,0,0,.5);
  border-radius:var(--radius-md);padding:10px 12px;
  font-size:12px;font-weight:500;color:var(--ok-300);
  opacity:0;transform:translateY(10px) scale(.98);
  transition:opacity .4s var(--cdbl-ease),transform .5s var(--cdbl-ease-soft);
}
.cd-piece--blocked .cdbl-sent i{font-size:15px;}
.cd-piece--blocked.is-step-sent .cdbl-sent,
.cd-piece--blocked.is-final .cdbl-sent{opacity:1;transform:none;}
/* ---------- ÖSSZEKÖTŐ ÍV ---------- */
.cd-piece--blocked .cdbl-link{position:relative;flex:0 0 auto;}
.cd-piece--blocked .cdbl-link--wide{width:168px;height:196px;margin:0 2px;}
.cd-piece--blocked .cdbl-link--tall{display:none;width:240px;height:116px;margin:2px auto;}
.cd-piece--blocked .cdbl-link svg{position:absolute;inset:0;overflow:visible;}
.cd-piece--blocked .cdbl-arc-bg{fill:none;stroke:var(--cdbl-neutral-800);stroke-width:1.25;stroke-dasharray:3 5;}
.cd-piece--blocked .cdbl-arc-live{
  fill:none;stroke:var(--color-accent);stroke-width:1.75;stroke-linecap:round;
  stroke-dasharray:var(--cdbl-len);stroke-dashoffset:var(--cdbl-len);
  opacity:0;transition:opacity .3s ease;
}
.cd-piece--blocked.is-step-sent .cdbl-arc-live,
.cd-piece--blocked.is-final .cdbl-arc-live{
  opacity:1;animation:cdbl-draw 1.05s var(--cdbl-ease) forwards;
}
.cd-piece--blocked .cdbl-pulse{
  position:absolute;top:0;left:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:50%;background:var(--color-accent-2);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--color-accent) 24%, transparent),
             0 0 16px 3px color-mix(in srgb, var(--color-accent) 45%, transparent);
  opacity:0;offset-distance:0%;offset-rotate:0deg;
}
.cd-piece--blocked .cdbl-link--wide .cdbl-pulse{offset-path:path("M 8 132 C 44 48 124 48 160 132");}
.cd-piece--blocked .cdbl-link--tall .cdbl-pulse{offset-path:path("M 120 6 C 120 42 120 70 120 110");}
.cd-piece--blocked.is-firing .cdbl-pulse{animation:cdbl-pulse 1.05s var(--cdbl-ease) forwards;}
/* számláló */
.cd-piece--blocked .cdbl-timer{
  position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--color-surface);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);padding:8px 13px;white-space:nowrap;
}
.cd-piece--blocked .cdbl-timer-v{
  font-size:19px;font-weight:600;letter-spacing:-0.01em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--color-text);
}
.cd-piece--blocked .cdbl-timer-l{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--cdbl-neutral-600);}
.cd-piece--blocked .cdbl-timer.is-hit .cdbl-timer-v{color:var(--ok-300);}
/* ---------- PROJEKTVEZETŐ GÉPE ---------- */
.cd-piece--blocked .cdbl-desk{
  flex:1 1 400px;min-width:0;max-width:512px;margin:0;position:relative;
  border-radius:var(--radius-lg);background:var(--color-surface);
  box-shadow:var(--shadow-lg);
}
.cd-piece--blocked .cdbl-desk-bar{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
}
.cd-piece--blocked .cdbl-dots{display:flex;gap:5px;}
.cd-piece--blocked .cdbl-dots span{width:8px;height:8px;border-radius:50%;background:var(--cdbl-neutral-800);}
.cd-piece--blocked .cdbl-url{
  flex:1;min-width:0;font-size:11px;color:var(--cdbl-neutral-600);
  background:var(--color-bg);border-radius:999px;padding:4px 11px;
  box-shadow:var(--shadow-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cd-piece--blocked .cdbl-desk-body{padding:4px 16px 18px;}
.cd-piece--blocked .cdbl-proj{display:flex;align-items:center;gap:10px;padding:12px 0 14px;}
.cd-piece--blocked .cdbl-proj-t{font-size:15px;font-weight:600;letter-spacing:-0.012em;}
.cd-piece--blocked .cdbl-proj-s{font-size:11px;color:var(--cdbl-neutral-600);}
.cd-piece--blocked .cdbl-proj-me{margin-left:auto;display:flex;align-items:center;gap:7px;font-size:11.5px;color:#b2b6ca;}
/* elakadás-sáv */
.cd-piece--blocked .cdbl-strip{
  position:relative;border-radius:var(--radius-md);padding:12px 13px;
  background:color-mix(in srgb, var(--wait) 11%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--wait) 34%, transparent);
  display:flex;gap:11px;align-items:flex-start;
  transition:box-shadow .5s ease,background-color .5s ease;
}
.cd-piece--blocked.is-step-land .cdbl-strip,
.cd-piece--blocked.is-final .cdbl-strip{
  background:color-mix(in srgb, var(--wait) 17%, transparent);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--wait) 62%, transparent),
             0 0 26px -6px color-mix(in srgb, var(--wait) 55%, transparent);
}
.cd-piece--blocked .cdbl-strip-ico{
  width:28px;height:28px;flex:0 0 auto;border-radius:var(--radius-sm);
  display:grid;place-items:center;font-size:16px;color:var(--wait-300);
  background:color-mix(in srgb, var(--wait) 20%, transparent);
}
.cd-piece--blocked.is-step-land .cdbl-strip-ico{animation:cdbl-nudge .7s var(--cdbl-ease-soft) 1;}
.cd-piece--blocked .cdbl-strip-t{font-size:13px;font-weight:600;letter-spacing:-0.008em;color:var(--wait-300);}
.cd-piece--blocked .cdbl-strip-s{font-size:11.5px;color:#b2b6ca;margin-top:3px;line-height:1.45;}
.cd-piece--blocked .cdbl-num{display:inline-block;font-variant-numeric:tabular-nums;}
/* elakadás lista */
.cd-piece--blocked .cdbl-list{margin-top:12px;display:flex;flex-direction:column;gap:8px;}
.cd-piece--blocked .cdbl-slot{display:grid;}
.cd-piece--blocked .cdbl-slot > *{grid-area:1 / 1;}
.cd-piece--blocked .cdbl-ghost{
  border-radius:var(--radius-md);border:1px dashed var(--cdbl-neutral-800);
  display:flex;align-items:center;gap:10px;padding:10px 11px;
  opacity:1;transition:opacity .34s var(--cdbl-ease);
}
.cd-piece--blocked .cdbl-ghost b{
  display:block;height:8px;border-radius:999px;background:var(--cdbl-neutral-800);opacity:.7;
}
.cd-piece--blocked .cdbl-ghost b:nth-child(1){width:30px;flex:0 0 auto;}
.cd-piece--blocked .cdbl-ghost b:nth-child(2){flex:1 1 auto;max-width:170px;}
.cd-piece--blocked.is-step-land .cdbl-ghost,
.cd-piece--blocked.is-final .cdbl-ghost{opacity:0;}
.cd-piece--blocked .cdbl-row{
  display:flex;align-items:flex-start;gap:10px;
  border-radius:var(--radius-md);padding:10px 11px;
  background:var(--color-bg);box-shadow:var(--shadow-sm);
}
.cd-piece--blocked .cdbl-row--new{
  opacity:0;transform:translateY(-8px) scale(.985);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--color-accent) 46%, transparent);
  transition:opacity .46s var(--cdbl-ease),transform .56s var(--cdbl-ease-soft);
}
.cd-piece--blocked.is-step-land .cdbl-row--new,
.cd-piece--blocked.is-final .cdbl-row--new{opacity:1;transform:none;}
.cd-piece--blocked .cdbl-row-code{
  font-size:11px;font-weight:600;letter-spacing:.02em;flex:0 0 auto;
  color:var(--cdbl-accent-100);background:var(--cdbl-accent-800);
  border-radius:var(--radius-sm);padding:3px 7px;margin-top:1px;
}
.cd-piece--blocked .cdbl-row-t{font-size:12.5px;font-weight:600;letter-spacing:-0.006em;}
.cd-piece--blocked .cdbl-row-s{font-size:11px;color:var(--cdbl-neutral-600);margin-top:2px;line-height:1.45;}
.cd-piece--blocked .cdbl-row-s em{font-style:normal;color:#b2b6ca;}
.cd-piece--blocked .cdbl-tag{
  font-size:10.5px;letter-spacing:.02em;border-radius:999px;padding:2px 8px;flex:0 0 auto;margin-top:1px;
  color:var(--wait-300);background:color-mix(in srgb, var(--wait) 18%, transparent);
}
.cd-piece--blocked .cdbl-tag--new{color:var(--cdbl-accent-100);background:var(--cdbl-accent-800);}
.cd-piece--blocked .cdbl-row-side{margin-left:auto;display:flex;align-items:center;gap:7px;}
/* fotó-bélyegkép a sorban */
.cd-piece--blocked .cdbl-thumb{
  width:34px;height:34px;flex:0 0 auto;border-radius:var(--radius-sm);
  background:linear-gradient(135deg,#3a3d52,#2a2c3b 55%,#343751);
  box-shadow:var(--shadow-sm);display:grid;place-items:center;
  color:#9397ab;font-size:13px;
}
/* push értesítés */
.cd-piece--blocked .cdbl-push{
  position:absolute;right:-12px;top:-26px;width:min(292px,calc(100% - 24px));
  display:flex;gap:10px;align-items:flex-start;
  border-radius:var(--radius-md);padding:11px 12px;
  background:rgba(35,37,50,.94);backdrop-filter:blur(10px);
  box-shadow:var(--shadow-md);
  opacity:0;transform:translateY(-14px) scale(.97);
  transition:opacity .42s var(--cdbl-ease),transform .58s var(--cdbl-ease-soft);
}
.cd-piece--blocked.is-step-push .cdbl-push,
.cd-piece--blocked.is-final .cdbl-push{opacity:1;transform:none;}
.cd-piece--blocked .cdbl-push-ico{
  width:26px;height:26px;flex:0 0 auto;border-radius:7px;background:var(--brand);
  display:grid;place-items:center;color:#fff;font-size:15px;
}
.cd-piece--blocked .cdbl-push-t{font-size:12px;font-weight:600;letter-spacing:-0.006em;}
.cd-piece--blocked .cdbl-push-s{font-size:11px;color:#b2b6ca;margin-top:2px;line-height:1.42;}
.cd-piece--blocked .cdbl-push-phase{
  display:inline-flex;align-items:center;gap:4px;margin-top:6px;
  font-size:9.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--cdbl-neutral-600);border:1px solid var(--cdbl-neutral-800);
  border-radius:999px;padding:2px 7px;
}
/* ---------- lábléc / vezérlés ---------- */
.cd-piece--blocked .cdbl-foot{
  max-width:none;margin:34px auto 0;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;
}
.cd-piece--blocked .cdbl-claim{
  font-size:13px;color:#b2b6ca;text-align:center;max-width:620px;line-height:1.55;
}
.cd-piece--blocked .cdbl-claim strong{color:var(--color-text);font-weight:600;}
.cd-piece--blocked .cdbl-replay{
  font:inherit;font-size:12px;font-weight:500;letter-spacing:.01em;
  color:var(--color-accent-2);background:transparent;
  border:1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius:var(--radius-md);padding:8px 14px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  transition:background-color .25s ease,color .25s ease;
}
.cd-piece--blocked .cdbl-replay:hover{background:color-mix(in srgb, var(--color-accent) 12%, transparent);color:var(--color-text);}
.cd-piece--blocked .cdbl-replay:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.cd-piece--blocked .cdbl-replay i{font-size:14px;}
/* ---------- keyframes ---------- */
@keyframes cdbl-draw{from{stroke-dashoffset:var(--cdbl-len);}to{stroke-dashoffset:0;}}
@keyframes cdbl-pulse{
  0%{offset-distance:0%;opacity:0;transform:scale(.5);}
  12%{opacity:1;transform:scale(1);}
  84%{opacity:1;transform:scale(1);}
  100%{offset-distance:100%;opacity:0;transform:scale(.6);}
}
@keyframes cdbl-flash{0%{opacity:0;}14%{opacity:.62;}100%{opacity:0;}}
@keyframes cdbl-caret{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@keyframes cdbl-nudge{
  0%{transform:scale(1);}
  38%{transform:scale(1.13);}
  100%{transform:scale(1);}
}
/* ---------- reszponzív ---------- */
@media (max-width:900px){.cd-piece--blocked{padding:44px 16px 52px;}
.cd-piece--blocked .cdbl-stage{flex-direction:column;}
.cd-piece--blocked .cdbl-link--wide{display:none;}
.cd-piece--blocked .cdbl-link--tall{display:block;}
.cd-piece--blocked .cdbl-desk{flex:1 1 auto;width:100%;max-width:520px;margin-top:34px;}
.cd-piece--blocked .cdbl-push{top:-48px;right:-6px;width:min(292px,calc(100% - 12px));}
}
@media (max-width:420px){.cd-piece--blocked{padding:36px 12px 44px;}
.cd-piece--blocked .cdbl-phone{width:100%;padding:7px;}
.cd-piece--blocked .cdbl-link--tall{width:100%;max-width:240px;height:104px;}
.cd-piece--blocked .cdbl-desk-body{padding:4px 12px 16px;}
.cd-piece--blocked .cdbl-push{right:-4px;top:-48px;width:calc(100% - 8px);}
.cd-piece--blocked .cdbl-row-side{margin-left:0;width:100%;}
}
/* ---------- mozgáscsökkentés: végállapot, animáció nélkül ---------- */
@media (prefers-reduced-motion: reduce){.cd-piece--blocked *,
  .cd-piece--blocked *::before,
  .cd-piece--blocked *::after{
    animation:none !important;
    transition:none !important;
  }
.cd-piece--blocked .cdbl-chip,
  .cd-piece--blocked .cdbl-person,
  .cd-piece--blocked .cdbl-photo,
  .cd-piece--blocked .cdbl-sent,
  .cd-piece--blocked .cdbl-row--new,
  .cd-piece--blocked .cdbl-push{opacity:1 !important;transform:none !important;}
.cd-piece--blocked .cdbl-ghost{opacity:0 !important;}
.cd-piece--blocked .cdbl-arc-live{opacity:1 !important;stroke-dashoffset:0 !important;}
.cd-piece--blocked .cdbl-pulse{opacity:0 !important;}
.cd-piece--blocked .cdbl-caret{display:none !important;}
}

/* ==========================================================================
   matrix
   ========================================================================== */
/* ---- Nocturne tokenek (a design doksiból, változatlan értékekkel) ---- */
/* ---- Set-piece: minden szelektor .cd-piece--matrix alól indul ---- */
.cd-piece--matrix{
  --cd-m-cell: clamp(58px, 7.6vw, 104px);
  --cd-m-row: 17px;
  --cd-m-label: 76px;
  --cd-m-padr: 46px;
  --cd-m-head: 96px;
  --cd-m-ease: cubic-bezier(.22,.61,.36,1);

  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}
.cd-piece--matrix *,
.cd-piece--matrix *::before,
.cd-piece--matrix *::after{ box-sizing: border-box; }
.cd-piece--matrix .cd-m__inner{ max-width: none; margin: 0; }
/* ---- fejléc ---- */
.cd-piece--matrix .cd-m__title{
  margin: 0 0 12px;
  font-size: clamp(26px, 4.4vw, 40px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.12;
}
.cd-piece--matrix .cd-m__title b{
  font-weight: 500;
  color: var(--color-accent-2);
}
/* ---- mutatók ---- */
.cd-piece--matrix .cd-m__stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin: 0 0 18px;
}
.cd-piece--matrix .cd-m__stat{
  padding: 13px 14px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .5s var(--cd-m-ease), transform .5s var(--cd-m-ease);
  transition-delay: var(--d, 0s);
}
.cd-piece--matrix.is-live .cd-m__stat{ opacity: 1; transform: none; }
.cd-piece--matrix .cd-m__stat-k{
  display: block;
  font-size: 11px; letter-spacing: .02em;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin-bottom: 3px;
}
.cd-piece--matrix .cd-m__stat-v{
  display: block;
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 600;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}
.cd-piece--matrix .cd-m__stat-v small{
  font-size: .62em; font-weight: 400;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
}
.cd-piece--matrix .cd-m__stat--bad .cd-m__stat-v{ color: var(--brand-300); }
/* ---- panel ---- */
.cd-piece--matrix .cd-m__panel{
  position: relative;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .6s var(--cd-m-ease), transform .6s var(--cd-m-ease);
}
.cd-piece--matrix.is-live .cd-m__panel{ opacity: 1; transform: none; }
.cd-piece--matrix .cd-m__bar{
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 12px 16px;
}
.cd-piece--matrix .cd-m__bar::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent);
}
.cd-piece--matrix .cd-m__project{
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; margin-right: auto;
}
.cd-piece--matrix .cd-m__project i{ font-size: 16px; color: var(--color-accent); }
.cd-piece--matrix .cd-m__project span small{
  display: block; font-weight: 400; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.cd-piece--matrix .cd-m__legend{
  display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 0; padding: 0;
}
.cd-piece--matrix .cd-m__legend li{
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; letter-spacing: .02em;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
.cd-piece--matrix .cd-m__swatch{
  width: 9px; height: 9px; border-radius: 2px; background: var(--color-neutral-600);
}
.cd-piece--matrix .cd-m__swatch--ok{ background: var(--ok); }
.cd-piece--matrix .cd-m__swatch--wip{ background: var(--color-accent); }
.cd-piece--matrix .cd-m__swatch--bad{ background: var(--brand); }
.cd-piece--matrix .cd-m__swatch--todo{ background: color-mix(in srgb, var(--color-text) 14%, transparent); }
/* ---- lebegő oszlopfelirat ---- */
.cd-piece--matrix .cd-m__rail{
  position: relative;
  height: 52px;
  margin: 10px 14px 0;
}
.cd-piece--matrix .cd-m__railhint{
  position: absolute; left: 2px; top: 13px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 42%, transparent);
  opacity: 1;
  transition: opacity .22s ease;
  pointer-events: none;
}
.cd-piece--matrix .cd-m__railhint i{ font-size: 14px; }
.cd-piece--matrix.is-flagged .cd-m__railhint{ opacity: 0; }
.cd-piece--matrix .cd-m__flag{
  position: absolute; left: 0; top: 4px;
  display: flex; align-items: center; gap: 10px;
  max-width: 100%;
  padding: 8px 13px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg) 92%, var(--color-accent));
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(var(--fx, 0px), 7px, 0);
  transition: transform .42s var(--cd-m-ease), opacity .26s ease;
  pointer-events: none;
}
.cd-piece--matrix.is-flagged .cd-m__flag{
  opacity: 1;
  transform: translate3d(var(--fx, 0px), 0, 0);
}
.cd-piece--matrix .cd-m__flag::after{
  content: ""; position: absolute; left: var(--ax, 24px); bottom: -5px;
  width: 9px; height: 9px; border-radius: 1px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.cd-piece--matrix .cd-m__flag-dot{
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--color-accent); flex: none;
}
.cd-piece--matrix .cd-m__flag-text{ font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; }
.cd-piece--matrix .cd-m__flag-text b{ font-weight: 600; }
.cd-piece--matrix .cd-m__flag-text span{ color: color-mix(in srgb, var(--color-text) 66%, transparent); }
.cd-piece--matrix .cd-m__flag-chip{
  flex: none;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-800);
  color: var(--color-accent-100);
  font-size: 11px; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
/* ---- görgetődoboz ---- */
.cd-piece--matrix .cd-m__scroll{
  position: relative;
  margin: 0 14px;
  max-height: 392px;
  overflow: auto;
  overscroll-behavior-x: contain;
  scrollbar-color: var(--color-neutral-600) transparent;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
}
.cd-piece--matrix .cd-m__scroll::-webkit-scrollbar{ width: 9px; height: 9px; }
.cd-piece--matrix .cd-m__scroll::-webkit-scrollbar-track{ background: transparent; }
.cd-piece--matrix .cd-m__scroll::-webkit-scrollbar-thumb{
  background: var(--color-neutral-600);
  border-radius: 999px;
  border: 2px solid var(--color-surface);
}
.cd-piece--matrix .cd-m__scroll::-webkit-scrollbar-thumb:hover{ background: var(--color-neutral-500); }
/* ---- fejlécsor (valódi gombok) ---- */
.cd-piece--matrix .cd-m__cols{
  position: sticky; top: 0; z-index: 4;
  display: grid;
  grid-template-columns: var(--cd-m-label) repeat(8, var(--cd-m-cell));
  padding-right: var(--cd-m-padr);
  width: max-content;
  background: var(--color-surface);
}
.cd-piece--matrix .cd-m__corner{
  position: sticky; left: 0; z-index: 5;
  background: var(--color-surface);
  height: var(--cd-m-head);
  display: flex; align-items: flex-end; padding-bottom: 7px;
  font-size: 10.5px; letter-spacing: .02em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.cd-piece--matrix .cd-m__col{
  position: relative;
  height: var(--cd-m-head);
  padding: 0;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
  font: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color .22s ease, background-color .22s ease;
}
.cd-piece--matrix .cd-m__col > span{
  position: absolute; left: 50%; bottom: 8px;
  transform-origin: 0 100%;
  transform: rotate(-50deg);
  white-space: nowrap;
  font-size: 11px; font-weight: 500; letter-spacing: .01em;
}
.cd-piece--matrix .cd-m__col::after{
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 2px;
  border-radius: 2px;
  background: var(--color-accent);
  opacity: 0;
  transform: scaleX(.3);
  transition: opacity .22s ease, transform .3s var(--cd-m-ease);
}
.cd-piece--matrix .cd-m__col:hover,
.cd-piece--matrix .cd-m__col.is-on{ color: var(--color-text); }
.cd-piece--matrix .cd-m__col.is-on::after{ opacity: 1; transform: scaleX(1); }
.cd-piece--matrix .cd-m__col:focus-visible{
  outline: 2px solid var(--color-accent-2);
  outline-offset: -2px;
}
.cd-piece--matrix .cd-m__scroll:focus-visible{
  outline: 2px solid var(--color-accent-2);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
/* ---- rács ---- */
.cd-piece--matrix .cd-m__grid{
  position: relative;
  width: max-content;
  padding-right: var(--cd-m-padr);
}
.cd-piece--matrix .cd-m__body{
  display: grid;
  grid-template-columns: var(--cd-m-label) repeat(8, var(--cd-m-cell));
  grid-auto-rows: var(--cd-m-row);
}
.cd-piece--matrix .cd-m__unit{
  position: sticky; left: 0; z-index: 2;
  display: flex; align-items: center;
  padding-right: 10px;
  background: var(--color-surface);
  font-size: 10.5px; letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--color-text) 44%, transparent);
  opacity: 0;
  transition: opacity .45s var(--cd-m-ease);
  transition-delay: var(--d, 0s);
}
.cd-piece--matrix .cd-m__unit--tick{ color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.cd-piece--matrix.is-live .cd-m__unit{ opacity: 1; }
.cd-piece--matrix .cd-m__cell{
  display: block;
  margin: 1.5px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-text) 8%, transparent);
  opacity: 0;
  transform: scale(.55);
  transform-origin: 50% 50%;
  transition: opacity .42s var(--cd-m-ease), transform .42s var(--cd-m-ease);
  transition-delay: var(--d, 0s);
}
.cd-piece--matrix.is-live .cd-m__cell{ opacity: 1; transform: none; }
.cd-piece--matrix .cd-m__cell.is-instant{ transition: none; }
.cd-piece--matrix .cd-m__cell--ok{  background: color-mix(in srgb, var(--ok) 88%, #10121d); }
.cd-piece--matrix .cd-m__cell--wip{ background: color-mix(in srgb, var(--color-accent) 84%, #10121d); }
.cd-piece--matrix .cd-m__cell--bad{ background: var(--brand); }
.cd-piece--matrix .cd-m__cell--todo{ background: color-mix(in srgb, var(--color-text) 9%, transparent); }
/* ---- oszlopkiemelő sáv ---- */
.cd-piece--matrix .cd-m__band{
  position: absolute; top: 0; bottom: 0;
  left: var(--cd-m-label);
  width: var(--cd-m-cell);
  z-index: 3;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent) 19%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 78%, transparent),
              0 0 0 4px color-mix(in srgb, var(--color-accent) 9%, transparent);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(calc(var(--c, 0) * var(--cd-m-cell)), 0, 0);
  transition: opacity .24s ease, transform .4s var(--cd-m-ease);
}
.cd-piece--matrix.is-flagged .cd-m__band{ opacity: 1; }
/* ---- lábjegyzetek ---- */
.cd-piece--matrix .cd-m__foot{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px;
  padding: 12px 16px 14px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
}
.cd-piece--matrix .cd-m__foot span{ display: inline-flex; align-items: center; gap: 6px; }
.cd-piece--matrix .cd-m__foot i{ font-size: 14px; }
.cd-piece--matrix .cd-m__foot .cd-m__bad i{ color: var(--brand-300); }
.cd-piece--matrix .cd-m__note{
  margin: 14px 2px 0;
  font-size: 12px;
  color: color-mix(in srgb, var(--color-text) 46%, transparent);
}
.cd-piece--matrix .cd-m__sr{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* ---- reszponzív ---- */
@media (max-width: 720px){.cd-piece--matrix{ --cd-m-cell: 42px; --cd-m-label: 62px; --cd-m-padr: 40px; --cd-m-row: 16px; --cd-m-head: 84px; }
.cd-piece--matrix .cd-m__scroll{ max-height: 320px; }
}
/* Telefonon a nyolc oszlop kiférjen a panelbe. A rendelkezésre álló hely
   ~0,96 * 100vw - 70px (rácsköz + panelbelső + görgetődoboz margója), ebből
   a névoszlop és a jobb szélső forgatott felirat helye levonva marad a
   cellaméret — így nem egy félbevágott oszlop lóg ki a jobb szélen. */
@media (max-width: 520px){.cd-piece--matrix{
  --cd-m-cell: clamp(20px, calc(12vw - 18.25px), 32px);
  --cd-m-label: 48px;
  --cd-m-padr: 24px;
  --cd-m-row: 15px;
  --cd-m-head: 78px;
}
.cd-piece--matrix .cd-m__stats{ grid-template-columns: 1fr 1fr; }
.cd-piece--matrix .cd-m__stat:first-child{ grid-column: 1 / -1; }
.cd-piece--matrix .cd-m__rail{ height: 60px; margin-left: 10px; margin-right: 10px; }
.cd-piece--matrix .cd-m__scroll{ margin: 0 10px; max-height: 286px; }
.cd-piece--matrix .cd-m__flag{ gap: 7px; padding: 7px 10px; }
.cd-piece--matrix .cd-m__flag-text{ font-size: 11.5px; white-space: normal; }
.cd-piece--matrix .cd-m__legend{ gap: 4px 10px; }
}
/* ---- csökkentett mozgás: végállapot, animáció nélkül ---- */
@media (prefers-reduced-motion: reduce){.cd-piece--matrix .cd-m__stat,
  .cd-piece--matrix .cd-m__panel,
  .cd-piece--matrix .cd-m__unit,
  .cd-piece--matrix .cd-m__cell{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
.cd-piece--matrix .cd-m__flag,
  .cd-piece--matrix .cd-m__railhint,
  .cd-piece--matrix .cd-m__band,
  .cd-piece--matrix .cd-m__col,
  .cd-piece--matrix .cd-m__col::after{ transition: none !important; }
.cd-piece--matrix .cd-m__flag{ transform: translate3d(var(--fx, 0px), 0, 0); }
}

/* ==========================================================================
   timeline
   ========================================================================== */
/* ---- Nocturne tokens (a brief 3. pontjából, változatlan értékekkel) ---- */
/* ---- set-piece gyökér ---- */
.cd-piece--timeline {
  --cd-muted:   #9397ab;
  --cd-muted-2: #9397ab;
  --cd-hair:    #3f424d;
  --cd-ink:     var(--color-text);
  --cd-ease:    cubic-bezier(.22,.61,.36,1);

  background: var(--color-bg);
  color: var(--cd-ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding: 0;
  overflow-x: clip;
}
.cd-piece--timeline *, .cd-piece--timeline *::before, .cd-piece--timeline *::after { box-sizing: border-box; }
.cd-piece--timeline p, .cd-piece--timeline h2, .cd-piece--timeline h3,
.cd-piece--timeline ol, .cd-piece--timeline ul, .cd-piece--timeline blockquote { margin: 0; }
.cd-piece--timeline ol, .cd-piece--timeline ul { list-style: none; padding: 0; }
.cd-piece--timeline .cd-tl-wrap { max-width: none; margin: 0; }
/* ---- intro ---- */
.cd-piece--timeline .cd-tl-heading {
  font-size: clamp(24px, 4.4vw, 34px); font-weight: 500;
  letter-spacing: -0.015em; line-height: 1.12; color: var(--cd-ink);
  max-width: 19ch;
}
/* ---- kártya ---- */
.cd-piece--timeline .cd-tl-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 22px 22px 6px;
  opacity: 0;
  transform: translateY(22px) scale(.992);
  transition: opacity .7s var(--cd-ease), transform .7s var(--cd-ease);
}
.cd-piece--timeline.cd-is-revealed .cd-tl-card { opacity: 1; transform: none; }
.cd-piece--timeline .cd-tl-head {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
}
.cd-piece--timeline .cd-tl-task {
  font-size: 18px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.12;
}
.cd-piece--timeline .cd-tl-project { font-size: 13px; color: var(--cd-muted-2); margin-top: 5px; }
.cd-piece--timeline .cd-tl-badge {
  font-size: 11px; letter-spacing: .02em; font-weight: 500;
  color: #e7e5fe; background: #2b2741; border: 1px solid #423a6a;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
/* Nocturne szignatúra: a végein átlátszóba fadelő elválasztó */
.cd-piece--timeline .cd-tl-rule {
  height: 1px; margin: 18px -22px;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent);
}
/* ---- toolbar ---- */
.cd-piece--timeline .cd-tl-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.cd-piece--timeline .cd-tl-toolbar__label {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--cd-muted-2); font-weight: 600;
}
.cd-piece--timeline .cd-tl-seg {
  display: inline-flex; padding: 3px; gap: 3px;
  border: 1px solid var(--cd-hair); border-radius: 999px; background: #1d1f2b;
}
.cd-piece--timeline .cd-tl-seg__btn {
  display: inline-flex; align-items: center; gap: 6px;
  font: 500 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: .01em;
  color: var(--cd-muted); background: transparent;
  border: 1px solid transparent; border-radius: 999px;
  padding: 7px 13px; cursor: pointer;
  transition: color .28s var(--cd-ease), background-color .28s var(--cd-ease), border-color .28s var(--cd-ease);
}
.cd-piece--timeline .cd-tl-seg__btn:hover { color: var(--cd-ink); background: rgba(145,132,217,.12); }
.cd-piece--timeline .cd-tl-seg__btn[aria-pressed="true"] {
  color: #e7e5fe; border-color: var(--color-accent); background: rgba(145,132,217,.14);
}
.cd-piece--timeline .cd-tl-seg__btn i { font-size: 14px; }
.cd-piece--timeline .cd-tl-seg__btn:focus-visible,
.cd-piece--timeline .cd-tl-lockbtn:focus-visible {
  outline: 2px solid var(--color-accent-2); outline-offset: 2px;
}
/* ---- megjegyzés-sor a rendezés alatt ---- */
.cd-piece--timeline .cd-tl-note {
  display: none; align-items: flex-start; gap: 8px;
  font-size: 12.5px; line-height: 1.5; color: var(--cd-muted);
  padding: 9px 11px; border-radius: var(--radius-md);
  background: rgba(145,132,217,.07); border: 1px solid #2b2741;
  margin-bottom: 18px;
}
.cd-piece--timeline .cd-tl-note i { font-size: 15px; line-height: 1.25; flex: none; color: var(--color-accent-2); }
.cd-piece--timeline .cd-tl-note--device { display: flex; }
.cd-piece--timeline[data-cd-sortmode="server"] .cd-tl-note--device { display: none; }
.cd-piece--timeline[data-cd-sortmode="server"] .cd-tl-note--server { display: flex; }
.cd-piece--timeline .cd-tl-note--server { background: rgba(192,138,58,.08); border-color: #4a3a22; }
.cd-piece--timeline .cd-tl-note--server i { color: var(--wait-300); }
/* ---- idővonal ---- */
.cd-piece--timeline .cd-tl-stream { position: relative; padding-bottom: 4px; }
.cd-piece--timeline .cd-tl-line {
  position: absolute; left: 13px; top: 12px; bottom: 22px; width: 2px; border-radius: 2px;
  background: linear-gradient(to bottom, var(--color-accent), #5d5294 62%, rgba(93,82,148,0));
  transform: scaleY(0); transform-origin: top center;
  transition: transform 1.25s var(--cd-ease) .12s;
}
.cd-piece--timeline.cd-is-revealed .cd-tl-line { transform: scaleY(1); }
.cd-piece--timeline .cd-tl-item {
  transition: transform .62s var(--cd-ease);
  will-change: transform;
}
.cd-piece--timeline .cd-tl-item__inner {
  position: relative; padding: 0 0 22px 48px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--cd-ease), transform .6s var(--cd-ease);
  transition-delay: calc(.18s + var(--i) * .11s);
}
.cd-piece--timeline.cd-is-revealed .cd-tl-item__inner { opacity: 1; transform: none; }
.cd-piece--timeline .cd-tl-node {
  position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1d1f2b; border: 1px solid var(--cd-hair); color: var(--cd-muted);
  font-size: 14px;
}
.cd-piece--timeline .cd-tl-node--key  { border-color: #5d5294; color: var(--color-accent-2); background: #23203a; }
.cd-piece--timeline .cd-tl-node--alert{ border-color: #7a2437; color: var(--brand-300);     background: #2b1c23; }
.cd-piece--timeline .cd-tl-node--ok   { border-color: #2f6e52; color: var(--ok-300);        background: #1b2a24; }
.cd-piece--timeline .cd-tl-node--sync { border-color: #5d5294; color: var(--color-accent-2); background: #23203a; }
.cd-piece--timeline .cd-tl-kind {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cd-muted-2); margin-bottom: 3px;
}
.cd-piece--timeline .cd-tl-item--alert .cd-tl-kind { color: var(--brand-300); }
.cd-piece--timeline .cd-tl-title {
  font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--cd-ink); line-height: 1.35;
}
.cd-piece--timeline .cd-tl-quote {
  margin-top: 8px; padding: 9px 12px; font-size: 13.5px; color: #cfd3e5;
  background: rgba(192,65,90,.08); border-left: 2px solid var(--brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.cd-piece--timeline .cd-tl-person {
  margin-top: 7px; font-size: 12.5px; color: var(--cd-muted);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
/* tag: a Nocturne "tagek" szabálya — accent-800 háttér, accent-100 szöveg */
.cd-piece--timeline .cd-tl-role {
  font-size: 11px; letter-spacing: .02em; color: #f5f4ff;
  background: #423a6a; border-radius: var(--radius-sm); padding: 2px 6px;
}
.cd-piece--timeline .cd-tl-chips { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.cd-piece--timeline .cd-tl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; letter-spacing: .01em; color: #cfd3e5;
  background: #1d1f2b; border: 1px solid var(--cd-hair);
  border-radius: 999px; padding: 4px 9px;
}
.cd-piece--timeline .cd-tl-chip i { font-size: 13px; }
.cd-piece--timeline .cd-tl-chip--ok   { color: var(--ok-300);   border-color: #2f6e52; background: #18241f; }
.cd-piece--timeline .cd-tl-chip--wait { color: var(--wait-300); border-color: #6b4d21; background: #241d13; }
/* ---- két időbélyeg ---- */
.cd-piece--timeline .cd-tl-stamps {
  margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.cd-piece--timeline .cd-tl-stamp {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 500; letter-spacing: .01em;
  font-variant-numeric: tabular-nums; color: var(--cd-muted-2);
  transition: color .35s var(--cd-ease), opacity .35s var(--cd-ease);
}
.cd-piece--timeline .cd-tl-stamp i { font-size: 13px; }
.cd-piece--timeline .cd-tl-arrow { font-size: 12px; color: #595d6c; }
.cd-piece--timeline .cd-tl-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; letter-spacing: .02em;
  color: var(--wait-300); background: #241d13; border: 1px solid #6b4d21;
  border-radius: var(--radius-sm); padding: 3px 7px;
}
.cd-piece--timeline .cd-tl-flag i { font-size: 12px; }
.cd-piece--timeline .cd-tl-flag--online { color: #b2b6ca; background: #1d1f2b; border-color: var(--cd-hair); }
/* melyik időbélyeg a hangsúlyos — a rendezéstől függ */
.cd-piece--timeline .cd-tl-stamp--dev { color: var(--color-accent-2); }
.cd-piece--timeline .cd-tl-stamp--srv { opacity: .62; }
.cd-piece--timeline[data-cd-sortmode="server"] .cd-tl-stamp--dev { color: var(--cd-muted-2); opacity: .62; }
.cd-piece--timeline[data-cd-sortmode="server"] .cd-tl-stamp--srv { opacity: 1; }
.cd-piece--timeline[data-cd-sortmode="server"] .cd-tl-stamp--srv { color: var(--color-accent-2); }
.cd-piece--timeline[data-cd-sortmode="server"] .cd-tl-stamp--dev { opacity: .62; }
/* finom, csak nézetben futó jelzés a két kulcs-eseményen */
.cd-piece--timeline.cd-is-live .cd-tl-arrow--live { animation: cd-tl-drift 3.4s var(--cd-ease) infinite; }
.cd-piece--timeline.cd-is-live .cd-tl-node--sync  { animation: cd-tl-breathe 3.4s var(--cd-ease) infinite; }
@keyframes cd-tl-drift {
  0%, 62%, 100% { transform: translateX(0); opacity: .75; }
  28%           { transform: translateX(4px); opacity: 1; }
}
@keyframes cd-tl-breathe {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(145,132,217,.28); }
  45%      { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(145,132,217,0); }
}
/* szinkron-esemény kiemelése */
.cd-piece--timeline .cd-tl-item--sync .cd-tl-title { color: var(--color-accent-2); }
/* ---- lábléc: lezárási bizonyíték ---- */
.cd-piece--timeline .cd-tl-foot { padding: 2px 0 22px; }
.cd-piece--timeline .cd-tl-foot__lead {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13.5px; font-weight: 500; color: var(--wait-300);
}
.cd-piece--timeline .cd-tl-foot__lead i { font-size: 16px; line-height: 1.25; flex: none; }
.cd-piece--timeline .cd-tl-evi { margin: 12px 0 0; display: grid; gap: 7px; }
.cd-piece--timeline .cd-tl-evi__item {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--cd-muted);
}
.cd-piece--timeline .cd-tl-evi__item i { font-size: 15px; color: var(--cd-muted-2); flex: none; }
.cd-piece--timeline .cd-tl-evi__item--ok { color: #cfd3e5; }
.cd-piece--timeline .cd-tl-evi__item--ok i { color: var(--ok-300); }
.cd-piece--timeline .cd-tl-lockbtn {
  margin-top: 16px; display: inline-flex; align-items: center; gap: 8px;
  font: 500 13px/1 Inter, system-ui, sans-serif;
  color: var(--cd-muted-2); background: transparent;
  border: 1px solid var(--cd-hair); border-radius: var(--radius-md);
  padding: 10px 16px; cursor: not-allowed;
}
.cd-piece--timeline .cd-tl-lockbtn i { font-size: 15px; }
/* ---- reszponzív (360px-től vízszintes görgetés nélkül) ---- */
@media (max-width: 560px) {.cd-piece--timeline { padding: 52px 14px 64px; }
.cd-piece--timeline .cd-tl-card { padding: 18px 16px 4px; }
.cd-piece--timeline .cd-tl-rule { margin: 16px -16px; }
.cd-piece--timeline .cd-tl-item__inner { padding-left: 40px; padding-bottom: 20px; }
.cd-piece--timeline .cd-tl-line { left: 11px; }
.cd-piece--timeline .cd-tl-node { width: 24px; height: 24px; font-size: 12px; }
.cd-piece--timeline .cd-tl-stamps { gap: 6px; }
.cd-piece--timeline .cd-tl-arrow { display: none; }
.cd-piece--timeline .cd-tl-heading { max-width: none; }
}
/* ---- csökkentett mozgás: végállapot, animáció nélkül ---- */
@media (prefers-reduced-motion: reduce) {.cd-piece--timeline .cd-tl-card,
  .cd-piece--timeline .cd-tl-item,
  .cd-piece--timeline .cd-tl-item__inner,
  .cd-piece--timeline .cd-tl-line,
  .cd-piece--timeline .cd-tl-seg__btn,
  .cd-piece--timeline .cd-tl-stamp {
    transition: none !important;
    animation: none !important;
  }
.cd-piece--timeline .cd-tl-card,
  .cd-piece--timeline .cd-tl-item__inner { opacity: 1 !important; transform: none !important; }
.cd-piece--timeline .cd-tl-line { transform: scaleY(1) !important; }
.cd-piece--timeline .cd-tl-arrow--live,
  .cd-piece--timeline .cd-tl-node--sync { animation: none !important; }
}

.cd-piece--timeline .cd-tl-flag--phase2{
  border:1px dashed color-mix(in srgb, var(--color-accent) 50%, transparent);
  background:transparent;
}

/* ==========================================================================
   offline
   ========================================================================== */
/* ===== Nocturne tokenek (a nagy oldalon már definiálva lehetnek — ott elhagyhatók) ===== */
/* ===== set-piece gyökér ===== */
.cd-piece--offline{
  --cdo-ease: cubic-bezier(.22,.61,.36,1);
  --cdo-muted: #9397ab;
  --cdo-faint: #9397ab;
  --cdo-line:  #3f424d;
  --cdo-accent-800: #423a6a;
  --cdo-accent-100: #e7e5fe;
  --cdo-row-h: 46px;
  box-sizing: border-box;
  display: block;
  position: relative;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  padding: 0;
  overflow: hidden;
}
.cd-piece--offline *,
.cd-piece--offline *::before,
.cd-piece--offline *::after{ box-sizing: border-box; }
.cd-piece--offline ul{ margin: 0; padding: 0; list-style: none; }
.cd-piece--offline p{ margin: 0; }
.cd-piece--offline .cdo-wrap{
  max-width: none;
  margin: 0;
}
.cd-piece--offline .cdo-sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ===== fejléc ===== */
.cd-piece--offline .cdo-head{ max-width: 46ch; margin: 0 0 clamp(28px, 4vw, 44px); }
.cd-piece--offline .cdo-title{
  margin: 14px 0 12px;
  font-size: clamp(26px, 4.2vw, 40px);
  font-weight: 500; letter-spacing: -0.015em; line-height: 1.12;
  color: var(--color-text);
}
/* ===== elrendezés ===== */
.cd-piece--offline .cdo-stage{
  display: grid;
  grid-template-columns: minmax(0, 402px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 860px){.cd-piece--offline .cdo-stage{ grid-template-columns: minmax(0,1fr); justify-items: center; }
.cd-piece--offline .cdo-head{ margin-bottom: 28px; }
/* Egyoszlopos nézetben a telefon a panel széléig ér: a -18%-os fényfolt
   beleütközne a panel vágásába, és kemény függőleges éle lenne. */
.cd-piece--offline .cdo-phone-shell::after{ inset: 12% -7% -12% -7%; }
}
/* széles nézetben a telefon ne lógjon ki a képernyőből (402/874 = 0.46) */
@media (min-width: 861px){.cd-piece--offline .cdo-phone-shell{ width: clamp(320px, calc(84vh * 0.46), 402px); }
}
/* ===== telefon ===== */
.cd-piece--offline .cdo-phone-shell{
  width: 100%;
  max-width: 402px;
  position: relative;
}
.cd-piece--offline .cdo-phone-shell::after{
  content: "";
  position: absolute; inset: 12% -18% -12% -18%;
  background: radial-gradient(60% 50% at 50% 50%, rgba(145,132,217,.16), transparent 70%);
  filter: blur(6px);
  pointer-events: none;
  z-index: 0;
}
.cd-piece--offline .cdo-phone{
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 34px;
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  isolation: isolate;
}
.cd-piece--offline[data-anim="on"] .cdo-phone{ aspect-ratio: 402 / 874; }
/* státuszsáv */
.cd-piece--offline .cdo-statusbar{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 22px 6px;
  font-size: 12px; font-weight: 600; color: var(--color-text);
}
.cd-piece--offline .cdo-notch{
  width: 78px; height: 20px; border-radius: 999px;
  background: #101220; box-shadow: inset 0 0 0 1px #292b31;
}
.cd-piece--offline .cdo-sigs{ display: inline-flex; gap: 5px; align-items: center; font-size: 14px; color: var(--cdo-muted); }
.cd-piece--offline .cdo-ic-off{ display: none; }
.cd-piece--offline .cdo-phone[data-net="offline"] .cdo-ic-on{ display: none; }
.cd-piece--offline .cdo-phone[data-net="offline"] .cdo-ic-off{ display: inline-block; }
.cd-piece--offline .cdo-phone[data-net="offline"] .cdo-sigs .cdo-ic-off{ color: var(--wait); }
/* app fejléc */
.cd-piece--offline .cdo-appbar{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px 14px;
  position: relative;
}
.cd-piece--offline .cdo-appbar::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent);
}
.cd-piece--offline .cdo-logo{
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--brand); color: #fff; font-size: 16px;
}
.cd-piece--offline .cdo-appbar-txt{ display: flex; flex-direction: column; min-width: 0; }
.cd-piece--offline .cdo-appbar-t{ font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.cd-piece--offline .cdo-appbar-s{
  font-size: 11.5px; color: var(--cdo-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* hálózati sáv */
.cd-piece--offline .cdo-band{
  display: flex; align-items: flex-start; gap: 10px;
  margin: 12px 14px 10px;
  padding: 11px 13px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--ok) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 42%, transparent);
  transition: background .5s var(--cdo-ease), box-shadow .5s var(--cdo-ease);
}
.cd-piece--offline .cdo-phone[data-net="offline"] .cdo-band{
  background: color-mix(in srgb, var(--wait) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wait) 44%, transparent);
}
.cd-piece--offline .cdo-band-ic{ font-size: 18px; line-height: 1; color: var(--ok-300); margin-top: 1px; }
.cd-piece--offline .cdo-phone[data-net="offline"] .cdo-band-ic{ color: var(--wait-300); }
.cd-piece--offline .cdo-band-txt{ display: flex; flex-direction: column; min-width: 0; }
.cd-piece--offline .cdo-band-t{ font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ok-300); }
.cd-piece--offline .cdo-phone[data-net="offline"] .cdo-band-t{ color: var(--wait-300); }
.cd-piece--offline .cdo-band-s{ font-size: 11.5px; color: var(--cdo-muted); font-variant-numeric: tabular-nums; }
/* haladás */
.cd-piece--offline .cdo-prog{ padding: 0 14px 12px; }
.cd-piece--offline .cdo-prog-track{
  display: block; height: 3px; border-radius: 999px;
  background: #292b31; overflow: hidden;
}
.cd-piece--offline .cdo-prog-fill{
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(to right, var(--color-accent), var(--ok));
  transform-origin: left center;
  transform: scaleX(var(--cdo-p, 1));
  transition: transform .6s var(--cdo-ease);
}
/* lista */
.cd-piece--offline .cdo-list-vp{ flex: 1 1 auto; min-height: 0; padding: 0 8px; }
.cd-piece--offline[data-anim="on"] .cdo-list-vp{ overflow: hidden; }
.cd-piece--offline .cdo-list{
  transform: translate3d(0, calc(-1px * var(--cdo-scroll, 0)), 0);
  transition: transform .7s var(--cdo-ease);
}
.cd-piece--offline .cdo-row{
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) 20px;
  align-items: center;
  gap: 9px;
  min-height: var(--cdo-row-h);
  padding: 7px 8px;
  border-radius: var(--radius-md);
}
.cd-piece--offline .cdo-row + .cdo-row::before{
  content: ""; position: absolute; left: 8px; right: 8px; top: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--color-divider) 24px, var(--color-divider) calc(100% - 24px), transparent);
}
.cd-piece--offline .cdo-row-ic{
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  background: #292b31; color: var(--cdo-muted); font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.cd-piece--offline .cdo-row[data-kind="file"] .cdo-row-ic{ color: var(--color-accent-2); }
.cd-piece--offline .cdo-row-txt{ display: flex; flex-direction: column; min-width: 0; }
.cd-piece--offline .cdo-row-t{
  font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cd-piece--offline .cdo-row-s{
  font-size: 11px; color: var(--cdo-faint); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cd-piece--offline .cdo-row-st{
  position: relative; display: grid; place-items: center;
  width: 20px; height: 20px; font-size: 13px;
}
.cd-piece--offline .cdo-row-st > i{
  grid-area: 1 / 1;
  opacity: 0;
  transform: scale(.7);
  transition: opacity .32s var(--cdo-ease), transform .32s var(--cdo-ease);
}
.cd-piece--offline .cdo-st-wait{ color: var(--wait-300); }
.cd-piece--offline .cdo-st-sync{ color: var(--color-accent-2); }
.cd-piece--offline .cdo-st-done{ color: var(--ok-300); }
.cd-piece--offline .cdo-row-bar{
  position: absolute; left: 43px; right: 36px; bottom: 6px; height: 2px;
  border-radius: 999px; background: #292b31;
  opacity: 0; overflow: hidden;
  transition: opacity .3s var(--cdo-ease);
}
.cd-piece--offline .cdo-row-bar > span{
  display: block; height: 100%; border-radius: 999px;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(var(--cdo-rp, 0));
  transition: transform .62s linear;
}
/* alapállapot (nincs JS / reduced motion): minden kész */
.cd-piece--offline .cdo-row .cdo-st-done{ opacity: 1; transform: scale(1); }
/* animált állapotok */
.cd-piece--offline[data-anim="on"] .cdo-row{
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition: opacity .42s var(--cdo-ease), transform .42s var(--cdo-ease), visibility 0s linear .42s, background-color .42s var(--cdo-ease);
}
.cd-piece--offline[data-anim="on"] .cdo-row[data-state="queued"],
.cd-piece--offline[data-anim="on"] .cdo-row[data-state="sync"],
.cd-piece--offline[data-anim="on"] .cdo-row[data-state="done"]{
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition: opacity .42s var(--cdo-ease), transform .42s var(--cdo-ease), visibility 0s, background-color .42s var(--cdo-ease);
}
.cd-piece--offline[data-anim="on"] .cdo-row[data-state="pending"] .cdo-row-st > i{ opacity: 0; }
.cd-piece--offline[data-anim="on"] .cdo-row[data-state="queued"] .cdo-st-wait,
.cd-piece--offline[data-anim="on"] .cdo-row[data-state="sync"] .cdo-st-sync,
.cd-piece--offline[data-anim="on"] .cdo-row[data-state="done"] .cdo-st-done{ opacity: 1; transform: scale(1); }
.cd-piece--offline[data-anim="on"] .cdo-row[data-state="queued"] .cdo-st-done,
.cd-piece--offline[data-anim="on"] .cdo-row[data-state="sync"] .cdo-st-done{ opacity: 0; transform: scale(.7); }
.cd-piece--offline[data-anim="on"] .cdo-row[data-state="sync"]{
  background-color: color-mix(in srgb, var(--color-accent) 9%, transparent);
}
.cd-piece--offline[data-anim="on"] .cdo-row[data-state="sync"] .cdo-st-sync{
  animation: cdo-lift 1.1s var(--cdo-ease) infinite;
}
.cd-piece--offline[data-anim="on"] .cdo-row[data-kind="file"][data-state="sync"] .cdo-row-bar{ opacity: 1; }
@keyframes cdo-lift{
  0%   { transform: translate3d(0, 2px, 0); opacity: .45; }
  45%  { transform: translate3d(0, -2px, 0); opacity: 1; }
  100% { transform: translate3d(0, 2px, 0); opacity: .45; }
}
/* telefon lábléc */
.cd-piece--offline .cdo-foot{
  display: flex; align-items: center; gap: 7px;
  padding: 11px 18px 16px;
  font-size: 11px; color: var(--cdo-faint);
  position: relative;
}
.cd-piece--offline .cdo-foot::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, transparent, var(--color-divider) 48px, var(--color-divider) calc(100% - 48px), transparent);
}
/* ===== oldalsáv ===== */
.cd-piece--offline .cdo-aside{ width: 100%; max-width: 480px; }
.cd-piece--offline .cdo-facts > li{
  display: grid; grid-template-columns: 28px minmax(0,1fr); gap: 13px;
  padding: 16px 0;
  position: relative;
}
.cd-piece--offline .cdo-facts > li + li::before{
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(to right, var(--color-divider), var(--color-divider) calc(100% - 48px), transparent);
}
.cd-piece--offline .cdo-facts i{
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--cdo-accent-800); color: var(--cdo-accent-100);
  font-size: 15px;
}
.cd-piece--offline .cdo-facts strong{
  display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
}
.cd-piece--offline .cdo-facts em{
  display: block; margin-top: 3px;
  font-style: normal; font-size: 13.5px; line-height: 1.5; color: var(--cdo-muted);
}
.cd-piece--offline .cdo-replay{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  padding: 9px 16px;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--color-accent-2);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color .25s var(--cdo-ease), color .25s var(--cdo-ease);
}
.cd-piece--offline .cdo-replay:hover{
  background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  color: var(--cdo-accent-100);
}
.cd-piece--offline .cdo-replay:focus-visible{
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}
.cd-piece--offline[data-anim="on"] .cdo-replay{ visibility: visible; }
.cd-piece--offline:not([data-anim="on"]) .cdo-replay{ display: none; }
/* ===== 360 px ===== */
@media (max-width: 400px){.cd-piece--offline{ padding-left: 16px; padding-right: 16px; }
.cd-piece--offline .cdo-phone{ border-radius: 28px; }
.cd-piece--offline .cdo-notch{ width: 62px; }
.cd-piece--offline{ --cdo-row-h: 44px; }
}
/* ===== csökkentett mozgás: nincs animáció, végállapot látszik ===== */
@media (prefers-reduced-motion: reduce){.cd-piece--offline *,
  .cd-piece--offline *::before,
  .cd-piece--offline *::after{
    animation: none !important;
    transition: none !important;
  }
.cd-piece--offline .cdo-phone{ aspect-ratio: auto !important; }
.cd-piece--offline .cdo-list-vp{ overflow: visible !important; }
.cd-piece--offline .cdo-list{ transform: none !important; }
.cd-piece--offline .cdo-row{
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background-color: transparent !important;
  }
.cd-piece--offline .cdo-row .cdo-row-st > i{ opacity: 0 !important; transform: none !important; }
.cd-piece--offline .cdo-row .cdo-row-st > i.cdo-st-done{ opacity: 1 !important; }
.cd-piece--offline .cdo-row-bar{ opacity: 0 !important; }
.cd-piece--offline .cdo-prog-fill{ transform: scaleX(1) !important; }
.cd-piece--offline .cdo-replay{ display: none !important; }
}

/* ==========================================================================
   Beillesztési igazítások
   Ezek a szabályok nem a set-piece-ek része, hanem az oldalba illesztés
   apró korrekciói. Külön blokkban, hogy a demók bármikor újragenerálhatók
   legyenek anélkül, hogy ezek elvesznének.
   ========================================================================== */

/* Az idővonal nyolc eseménye önmagában 2 200 képpont — a panelen belül
   görgethető, hogy a szekció ne nyomja szét az oldalt. A görgetés a panelen
   belül marad; a lap görgetése nem akad meg rajta (overscroll-behavior). */
.cd-piece--timeline .cd-tl-list {
  max-height: min(70vh, 720px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 10px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
}
.cd-piece--timeline .cd-tl-list::-webkit-scrollbar { width: 8px; }
.cd-piece--timeline .cd-tl-list::-webkit-scrollbar-track { background: transparent; }
.cd-piece--timeline .cd-tl-list::-webkit-scrollbar-thumb {
  background: var(--n-800);
  border-radius: var(--r-pill);
}
@media (max-width: 720px) {
  .cd-piece--timeline .cd-tl-list { max-height: none; overflow: visible;
    -webkit-mask-image: none; mask-image: none; padding-right: 0; }
}

/* A mátrix elforgatott oszlopfeliratának legyen elég hely felül — hosszabb
   angol feliratnál („Doors & windows”) egyébként levágódik a teteje. */
.cd-piece--matrix .cd-m__cols { overflow: visible; }
.cd-piece--matrix .cd-m__colname { overflow: visible; }

/* Az offline telefonkeret a képarányát azonnal kapja meg, ne csak a szekció
   beúszásakor — enélkül belépéskor megnyúlik és visszaugrik. */
.cd-piece--offline .cdo-phone { aspect-ratio: 402 / 874; }

/* A böngészőmakett címsorában a projekt neve férjen ki asztali nézetben */
@media (min-width: 900px) {
  .cd-piece--blocked .cdbl-win__title { white-space: normal; overflow: visible; }
}

/* Széles keretben az idővonal sorai két hasábra bomlanak: balra az esemény,
   jobbra a szerző és a két időbélyeg. Így a 1046 px-es kártya jobb fele nem
   marad üresen, és a „mikor az eszközön / mikor a szerveren” párhuzam
   egymás alatt, egy oszlopban olvasható. */
@media (min-width: 1000px) {
  .cd-piece--timeline .cd-tl-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
    column-gap: 32px;
    align-items: start;
  }
  .cd-piece--timeline .cd-tl-body > * { grid-column: 1; }
  .cd-piece--timeline .cd-tl-body > .cd-tl-person { grid-column: 2; grid-row: 1; margin-top: 1px; }
  .cd-piece--timeline .cd-tl-body > .cd-tl-stamps { grid-column: 2; grid-row: 2; }
}

/* ==========================================================================
   SET-PIECE: LEZÁRT FELADAT BIZONYLATA
   A részletes oldal nyitóképe. A címsor három kérdését — mi készült el, mivel
   bizonyítva, hány órából — egyetlen lezárt feladaton mutatja meg, egymás
   alatt, számozva. A bal oldali gerincvonal a három blokkal együtt telik ki.

   Nem téveszthető össze a 03-as szekció bizonyíték-demójával: az a KAPUT
   mutatja (mi hiányzik még a lezáráshoz), ez az EREDMÉNYT (mi lett belőle).
   ========================================================================== */
.cd-piece--record{
  --cdr-line: color-mix(in srgb, var(--color-text) 10%, transparent);
  --cdr-step: 0ms;
  box-sizing: border-box;
  display: block;
  width: 100%;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}
.cd-piece--record *,
.cd-piece--record *::before,
.cd-piece--record *::after{ box-sizing: border-box; }
.cd-piece--record p, .cd-piece--record h2, .cd-piece--record h3{ margin: 0; }

.cd-piece--record{ position: relative; padding-top: 13px; }
/* „Ebből sok száz van”: két lapél kandikál ki a kártya fölül. Felfelé lóg,
   nem oldalra — a kártya jobb éle így egy vonalban marad a tartalomsávval. */
.cd-piece--record::before,
.cd-piece--record::after{
  content: ''; position: absolute; left: 50%; top: 0;
  height: 14px; transform: translateX(-50%);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: color-mix(in srgb, var(--surface) 72%, var(--bg));
  box-shadow: inset 0 0 0 1px var(--divider);
}
.cd-piece--record::before{ width: calc(100% - 28px); opacity: .5; }
.cd-piece--record::after{ width: calc(100% - 14px); top: 6px; opacity: .8; }

.cd-piece--record .cdr-card{
  position: relative;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 100% at 85% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 58%),
    var(--surface);
  box-shadow: var(--sh-md);
  overflow: hidden;
}

/* ---- fejléc ---- */
.cd-piece--record .cdr-head{
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--divider);
}
.cd-piece--record .cdr-head-main{ min-width: 0; flex: 1 1 auto; }
.cd-piece--record .cdr-eyebrow{
  display: flex; align-items: center; gap: 6px;
  font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--n-500);
}
.cd-piece--record .cdr-eyebrow i{ font-size: 12px; color: var(--ok); }
.cd-piece--record .cdr-task{
  margin-top: 5px;
  font-size: 17px; font-weight: 500; letter-spacing: -.02em; color: var(--n-100);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cd-piece--record .cdr-project{ margin-top: 2px; font-size: 11px; color: var(--n-500); }
.cd-piece--record .cdr-badge{
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: var(--r-pill);
  font-size: 10px; font-weight: 500; white-space: nowrap;
  color: var(--ok-300);
  background: color-mix(in srgb, var(--ok) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 32%, transparent);
}
.cd-piece--record .cdr-badge i{ font-size: 13px; }

/* ---- a három válasz ---- */
.cd-piece--record .cdr-body{ position: relative; padding: 4px 18px 6px 18px; }
/* A gerinc a három sorszám közepén fut végig, és a blokkokkal együtt telik ki. */
.cd-piece--record .cdr-spine{
  position: absolute; left: 31px; top: 30px; bottom: 34px; width: 2px;
  border-radius: 2px; background: var(--cdr-line); overflow: hidden;
}
.cd-piece--record .cdr-spine i{
  display: block; width: 100%; height: 100%;
  transform: scaleY(0); transform-origin: top center;
  background: linear-gradient(to bottom, var(--accent), color-mix(in srgb, var(--ok) 80%, var(--accent)));
  transition: transform 1.8s cubic-bezier(.33,.68,.36,1);
}
.cd-piece--record.is-run .cdr-spine i{ transform: scaleY(1); }

.cd-piece--record .cdr-step{
  position: relative;
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px;
  padding: 14px 0;
  opacity: .42;
  transition: opacity .5s var(--ease);
}
.cd-piece--record .cdr-step + .cdr-step{ border-top: 1px solid color-mix(in srgb, var(--divider) 55%, transparent); }
.cd-piece--record .cdr-step.is-on{ opacity: 1; }
.cd-piece--record .cdr-num{
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 11px; font-weight: 500;
  color: var(--n-400);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--cdr-line);
  transition: color .4s var(--ease), box-shadow .4s var(--ease), background-color .4s var(--ease);
}
.cd-piece--record .cdr-step.is-on .cdr-num{
  color: var(--a-100);
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent);
}
.cd-piece--record .cdr-label{
  font-size: 9.5px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
  color: var(--n-500);
  transition: color .4s var(--ease);
}
.cd-piece--record .cdr-step.is-on .cdr-label{ color: var(--a-300); }
.cd-piece--record .cdr-value{ margin-top: 5px; font-size: 13.5px; color: var(--n-200); line-height: 1.4; }
.cd-piece--record .cdr-meta{ margin-top: 3px; font-size: 10.5px; color: var(--n-500); }

/* ---- bizonyítékok ---- */
.cd-piece--record .cdr-shots{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cd-piece--record .cdr-shot{
  position: relative;
  width: 54px; height: 42px; border-radius: 6px;
  background: linear-gradient(140deg, color-mix(in srgb, var(--ok) 42%, var(--n-700)), var(--n-800) 82%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 34%, transparent);
}
/* A bélyegek alapállapota a LÁTHATÓ. Rejtve csak akkor vannak, amíg a saját
   blokkjuk nem világosodott ki — így a ?static mód és a JS nélküli betöltés is
   a végállapotot mutatja, pedig ott az animáció ki van kapcsolva. */
.cd-piece--record.is-run .cdr-step:not(.is-on) .cdr-shot{
  opacity: 0; transform: scale(.88);
}
.cd-piece--record.is-run .cdr-step.is-on .cdr-shot{
  animation: cdr-pop .42s var(--ease-out) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes cdr-pop{ from{ opacity: 0; transform: scale(.88); } to{ opacity: 1; transform: none; } }
.cd-piece--record .cdr-shot--doc{
  display: grid; place-items: center;
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 38%, var(--n-700)), var(--n-800) 82%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 36%, transparent);
  color: var(--a-200); font-size: 15px;
}

/* ---- óra ---- */
.cd-piece--record .cdr-hours{ display: flex; align-items: baseline; gap: 8px; }
/* A ráfordított óra a becsléshez mérve — a sáv betelt része a tény. Ez az
   egyetlen hely az oldalon, ahol a kettő egymáson látszik. */
.cd-piece--record .cdr-bar{
  display: block; height: 6px; margin-top: 9px;
  border-radius: 3px; overflow: hidden;
  background: color-mix(in srgb, var(--color-text) 9%, transparent);
}
.cd-piece--record .cdr-bar i{
  display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(to right, var(--accent), var(--a-300));
  transition: width 1.1s cubic-bezier(.33,.68,.36,1) .25s;
}
.cd-piece--record.is-run .cdr-step.is-on .cdr-bar i{ width: calc(var(--pct, .75) * 100%); }
@media (prefers-reduced-motion: reduce){
  .cd-piece--record .cdr-bar i{ width: calc(var(--pct, .75) * 100%); transition: none; }
}

.cd-piece--record .cdr-hours b{
  font-size: 22px; font-weight: 500; letter-spacing: -.025em;
  color: var(--a-200); font-variant-numeric: tabular-nums;
}

/* ---- lábléc ---- */
.cd-piece--record .cdr-foot{
  display: flex; align-items: center; gap: 7px;
  padding: 11px 18px;
  border-top: 1px solid var(--divider);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  font-size: 10.5px; color: var(--n-400);
}
.cd-piece--record .cdr-foot i{ font-size: 13px; color: var(--ok); }
.cd-piece--record .cdr-foot b{ color: var(--n-200); font-weight: 500; }

@media (prefers-reduced-motion: reduce){
  .cd-piece--record .cdr-step{ opacity: 1; }
  .cd-piece--record .cdr-shot{ opacity: 1; transform: none; animation: none; }
  .cd-piece--record .cdr-spine i{ transform: scaleY(1); transition: none; }
}
/* ?static: a base.css minden animációt és átmenetet !important-tal kiüt, ezért
   a végállapotot itt kell kiírni — különben üres marad a bizonyítéksor. */
html[data-static] .cd-piece--record .cdr-step{ opacity: 1; }
html[data-static] .cd-piece--record .cdr-shot{ opacity: 1 !important; transform: none !important; }
html[data-static] .cd-piece--record .cdr-spine i{ transform: scaleY(1); }
html[data-static] .cd-piece--record .cdr-bar i{ width: calc(var(--pct, .75) * 100%); }
@media (max-width: 420px){
  .cd-piece--record .cdr-task{ font-size: 15px; }
  .cd-piece--record .cdr-shot{ width: 46px; height: 36px; }
}