/* OWN Build: sekce 5 karet (v10). Vše pod .ob5, třídy s prefixem ob-, nic nesahá na zbytek stránky.
   Ukázky v kartách jsou vanilla porty komponent z 21st.dev (zdroje v komentářích u každé karty). */
/* Teplé tokeny webu (base.css/style.css) s pojistkou; zelená jen pro úspěch. --k2 = druhý inkoust, --q/--q2 = tiché linky a tečky. */
.ob5{--k:#0B0B0B;--m:var(--muted,#5c5c5c);--m2:var(--label,#66655f);--l:rgba(0,0,0,.08);--y:var(--yellow,#ffd500);--chip:#f4f4f2;--g:#2F9E5B;
  --k2:#3d3c38;--q:#bebcb6;--q2:#c9c7c1;
  --sans:"Inter Tight",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;--ease:cubic-bezier(.2,.7,.2,1);
  color:var(--k);font:400 16px/normal var(--sans);font-feature-settings:"cv11";-webkit-font-smoothing:antialiased;text-align:left}
.ob5 p,.ob5 h3{text-wrap:wrap}
.ob5 button{font-family:inherit;margin:0}
.ob5 *,.ob5 *:before,.ob5 *:after{box-sizing:border-box}
.ob5 *{margin:0}
.ob5 .ob-grid{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--l);border-radius:8px;overflow:hidden}
.ob5 .ob-card{grid-column:span 2;background:#fff;display:flex;flex-direction:column;overflow:hidden}
.ob5 .ob-card.ob-wide{grid-column:span 3}
.ob5 #ob-c1{border-right:1px solid var(--l);border-bottom:1px solid var(--l)}
.ob5 #ob-c2{border-bottom:1px solid var(--l)}
.ob5 #ob-c3,.ob5 #ob-c4{border-right:1px solid var(--l)}
/* text karty = jeden recept pro celý web: štítek 11,5 mono --label · h3 18/1.3 inkoust · p 15/1.55 --muted */
.ob5 .ob-copy{padding:6px 28px 32px}
.ob5 .ob-eyebrow{font:400 11.5px/1 var(--mono);color:var(--label,#66655f);letter-spacing:0}
.ob5 .ob-copy h3{font-size:18px;line-height:1.3;letter-spacing:-.012em;font-weight:500;margin:14px 0 8px;color:var(--k)}
.ob5 .ob-copy p{font-size:15px;line-height:1.55;color:var(--muted,#5c5c5c);max-width:460px;text-wrap:pretty}
/* rám bez tečkové textury (tečky patří jen hero), jen velmi jemný teplý přechod */
.ob5 .ob-frame{position:relative;overflow:hidden;background:#fff linear-gradient(180deg,#faf9f6,#fff 72%)}
/* štítek ukázky: plná barva --label (5,85:1); čtečkám se nečte (alt text "") */
.ob5 .ob-frame:after{content:"Ukázková data";content:"Ukázková data" / "";position:absolute;right:16px;top:14px;font:400 10.5px/1 var(--sans);color:var(--label,#66655f)}
.ob5 .ob-card.ob-wide .ob-frame{height:300px}
.ob5 .ob-card:not(.ob-wide) .ob-frame{height:284px}
.ob5 .ob-stage{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start}
.ob5 button{font-family:inherit;margin:0}
.ob5 button:focus-visible{outline:1px solid var(--k);outline-offset:2px}
/* status pill shared by cards 3–5 */
.ob5 .ob-stt{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border:1px solid var(--l);border-radius:999px;background:var(--chip);font:500 11px/1 var(--sans);color:var(--m)}
.ob5 .ob-stt i{width:6px;height:6px;border-radius:50%;background:var(--q)}
.ob5 .ob-stt.ob-ok{color:#23794A;background:#F1F8F3;border-color:rgba(47,158,91,.18)}
.ob5 .ob-stt.ob-ok i{background:var(--g)}

/* progress row under the phone rail (built in d4/cards.js) */
.ob5 .ob-rp{display:none}
@media (max-width:900px){
  .ob5 .ob-card,.ob5 .ob-card.ob-wide{grid-column:auto}
  .ob5 .ob-card .ob-frame,.ob5 .ob-card.ob-wide .ob-frame,.ob5 .ob-card:not(.ob-wide) .ob-frame{height:276px}
  .ob5 .ob-copy{padding:6px 24px 28px}
}
/* 601–900: two columns, 01|02 · 03|04, 05 spans both (demo left, copy right) */
@media (min-width:601px) and (max-width:900px){
  .ob5 .ob-grid{grid-template-columns:1fr 1fr}
  .ob5 #ob-c3,.ob5 #ob-c4{border-bottom:1px solid var(--l)}
  .ob5 #ob-c4{border-right:0}
  .ob5 #ob-c5{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;align-items:center}
  .ob5 #ob-c5 .ob-vis{border-right:1px solid var(--l)}
  .ob5 #ob-c5 .ob-copy{padding:28px 32px 28px 28px}
  .ob5 #ob-c5 .ob-frame{height:300px}
}
/* ≤600: a swipe rail, the next card peeks in; the rail bleeds to the page edge and snaps on the gutter (as Srovnání) */
@media (max-width:600px){
  .ob5 .ob-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(100% - 36px);gap:12px;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter);border:0;border-radius:0;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .ob5 .ob-grid::-webkit-scrollbar{display:none}
  .ob5 .ob-grid:focus-visible{outline:2px solid var(--k);outline-offset:-2px}
  .ob5 .ob-card{scroll-snap-align:start;scroll-snap-stop:always;border:1px solid var(--l);border-radius:8px}
  /* active card's eyebrow · five blocks (44 px tall tap targets) · 01/05 */
  .ob5 .ob-rp{display:grid;grid-template-columns:104px minmax(0,1fr) auto;align-items:center;height:44px;margin-top:10px}
  .ob5 .ob-rp-lbl{font:400 11.5px/1 var(--mono);color:var(--k);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ob5 .ob-rp-segs{display:flex;height:44px;margin:0 2px 0 6px}
  .ob5 .ob-rp-segs button{flex:1;min-width:0;height:44px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
  .ob5 .ob-rp-segs i{display:block;width:calc(100% - 8px);height:6px;border-radius:2px;background:var(--hl);transition:background-color var(--dur-2) var(--ease-out)}
  .ob5 .ob-rp-segs [aria-current="true"] i{background:var(--k)}
  .ob5 .ob-rp-segs button:focus-visible{outline:2px solid var(--k);outline-offset:-6px;border-radius:6px}
  .ob5 .ob-rp-n{padding-left:8px;font:400 11.5px/1 var(--mono);color:var(--label);font-variant-numeric:tabular-nums}
  .ob5 .ob-rp-n b{font-weight:400;color:var(--k)}
}
@media (prefers-reduced-motion:reduce){.ob5 .ob-rp-segs i{transition:none}}
@media (forced-colors:active){
  .ob5 .ob-rp-segs i{background:GrayText}
  .ob5 .ob-rp-segs [aria-current="true"] i{background:CanvasText}
}

/* ───── 01 Bloky ───── */
/* 01 Bloky (final): plátno s bloky spojenými do systému */
.ob5 #ob-c1 .ob-stage{padding:40px 24px 30px 28px;-webkit-mask-image:none;mask-image:none;container-type:inline-size}
.ob5 #ob-c1 .ob-c1-cv{--ob-c1-dir:h;position:relative;flex:1;width:100%;max-width:600px;margin:0 auto;display:grid;grid-template-columns:180px minmax(28px,1fr) 46px minmax(28px,1fr) 206px;align-items:center;font-family:var(--sans)}
.ob5 #ob-c1 .ob-stage.ob-c1-off *{animation-play-state:paused}

/* dráty: čárkovaná stopa, plná linka po průchodu, kometa = krátký úsek čárkování (pathLength v px) */
.ob5 #ob-c1 .ob-c1-w{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none;fill:none}
.ob5 #ob-c1 .ob-c1-tr{stroke:rgba(0,0,0,.16);stroke-width:1.25;stroke-dasharray:3 4;stroke-linecap:round}
.ob5 #ob-c1 .ob-c1-on{stroke:var(--k);stroke-width:1.25;stroke-linecap:round;opacity:0;transition:opacity .45s var(--ease)}
.ob5 #ob-c1 .ob-c1-on.ob-c1-lit{opacity:.55}
.ob5 #ob-c1 .ob-c1-ct,.ob5 #ob-c1 .ob-c1-cm,.ob5 #ob-c1 .ob-c1-ch{stroke-linecap:round;opacity:0}
.ob5 #ob-c1 .ob-c1-ct{stroke:var(--q);stroke-width:2}
.ob5 #ob-c1 .ob-c1-cm{stroke:var(--m);stroke-width:2}
.ob5 #ob-c1 .ob-c1-ch{stroke:var(--k);stroke-width:6}

/* blok */
.ob5 #ob-c1 .ob-c1-node{position:relative;z-index:3;background:#fff;border:1px solid var(--l);border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 20px -14px rgba(0,0,0,.2)}
.ob5 #ob-c1 .ob-c1-node:after{content:"";position:absolute;inset:-1px;border-radius:10px;border:1px solid var(--k);opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.ob5 #ob-c1 .ob-c1-ic{position:relative;flex:none;width:28px;height:28px;border-radius:7px;background:var(--chip);border:1px solid var(--l);display:grid;place-items:center}
.ob5 #ob-c1 .ob-c1-ic svg{width:15px;height:15px;fill:none;stroke:var(--k);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ob5 #ob-c1 .ob-c1-tx{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;line-height:1.2}
.ob5 #ob-c1 .ob-c1-tx small{font-size:11.5px;color:var(--m);white-space:nowrap}
.ob5 #ob-c1 .ob-c1-tx b{font-size:12.5px;font-weight:500;color:var(--k);letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob5 #ob-c1 .ob-c1-tx em{display:none}
.ob5 #ob-c1 .ob-c1-port{position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#fff;border:1.5px solid var(--q2);z-index:2}
.ob5 #ob-c1 .ob-c1-pr{right:-4.5px}
.ob5 #ob-c1 .ob-c1-pl{left:-4.5px}

/* spouštěč */
.ob5 #ob-c1 .ob-c1-trig{grid-column:1;padding:12px 12px 4px}
.ob5 #ob-c1 .ob-c1-trig.ob-c1-hot:after{opacity:1}
.ob5 #ob-c1 .ob-c1-tag{position:absolute;left:10px;top:-10px;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 8px 0 6px;border:1px solid var(--l);border-radius:999px;background:#fff;font-size:10.5px;color:var(--m);line-height:1;z-index:1}
.ob5 #ob-c1 .ob-c1-tag svg{width:11px;height:11px;fill:none;stroke:var(--k);stroke-width:1.6;stroke-linejoin:round}
.ob5 #ob-c1 .ob-c1-hd{display:flex;align-items:center;gap:10px}
.ob5 #ob-c1 .ob-c1-trig .ob-c1-tx small{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ob5 #ob-c1 .ob-c1-tm{font:400 10.5px/1 var(--mono);color:var(--m2)}
.ob5 #ob-c1 .ob-c1-kv{margin:11px -12px 0;padding:6px 12px 4px;border-top:1px solid var(--l)}
.ob5 #ob-c1 .ob-c1-kv div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;height:22px;line-height:22px}
.ob5 #ob-c1 .ob-c1-kv dt{font-size:11.5px;color:var(--m)}
.ob5 #ob-c1 .ob-c1-kv dd{font-size:12.5px;color:var(--k);white-space:nowrap;font-variant-numeric:tabular-nums}
.ob5 #ob-c1 .ob-c1-kv dd,.ob5 #ob-c1 .ob-c1-tm{transition:opacity .22s ease,transform .22s var(--ease)}
.ob5 #ob-c1 .ob-c1-swap .ob-c1-kv dd,.ob5 #ob-c1 .ob-c1-swap .ob-c1-tm{opacity:0;transform:translateY(-4px)}

/* jádro OWN Build = značka „Čtvrtý blok“ (černé bloky na žluté dlaždici 25 %, žluté oči). Když agent pracuje, čtvrtý blok
   se zvedne (8 ze 120 jednotek SVG); kolem pulzuje žlutý kroužek, od dlaždice ho od začátku dělí bílá mezera */
.ob5 #ob-c1 .ob-c1-hub{grid-column:3;position:relative;z-index:3;width:46px;height:46px}
.ob5 #ob-c1 .ob-c1-mark{position:relative;display:block;width:46px;height:46px;border-radius:25%;background:var(--y);box-shadow:0 1px 2px rgba(0,0,0,.1),0 14px 28px -14px rgba(0,0,0,.55)}
.ob5 #ob-c1 .ob-c1-mark svg{display:block;width:100%;height:100%;overflow:visible}
.ob5 #ob-c1 .ob-c1-ag{transition:transform .4s var(--ease)}
.ob5 #ob-c1 .ob-c1-mark:before{content:"";position:absolute;inset:-6px;z-index:-1;border-radius:17.5px;border:1.5px solid var(--y);opacity:0}
.ob5 #ob-c1 .ob-c1-ping .ob-c1-mark:before{animation:ob-c1-ring 2.4s ease-out}
.ob5 #ob-c1 .ob-c1-busy .ob-c1-ag{transform:translateY(-8px)}
@keyframes ob-c1-ring{0%{transform:scale(.92);opacity:.7}100%{transform:scale(1.15);opacity:0}}
.ob5 #ob-c1 .ob-c1-hub small{position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%);font-size:11px;font-weight:500;color:var(--k);white-space:nowrap}

/* výstupní bloky */
.ob5 #ob-c1 .ob-c1-outs{grid-column:5;display:flex;flex-direction:column;gap:14px}
.ob5 #ob-c1 .ob-c1-out{display:flex;align-items:center;gap:10px;height:54px;padding:0 12px 0 11px}
.ob5 #ob-c1 .ob-c1-ok{position:absolute;right:-5px;bottom:-5px;width:15px;height:15px;border-radius:50%;background:var(--g);border:2px solid #fff;display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .45s var(--ease)}
.ob5 #ob-c1 .ob-c1-ic .ob-c1-ok svg{width:9px;height:9px;stroke:#fff;stroke-width:2.6}
.ob5 #ob-c1 .ob-c1-dt{flex:none;align-self:center;font:400 10.5px/1 var(--mono);color:var(--m2);white-space:nowrap;opacity:0;transition:opacity .3s ease}
.ob5 #ob-c1 .ob-c1-done .ob-c1-ok{opacity:1;transform:none}
.ob5 #ob-c1 .ob-c1-done .ob-c1-dt{opacity:1}
.ob5 #ob-c1 .ob-c1-bd{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.ob5 #ob-c1 .ob-c1-sw{transition:opacity .3s ease,transform .45s var(--ease)}
.ob5 #ob-c1 .ob-c1-ic>.ob-c1-sw{display:grid;place-items:center}
.ob5 #ob-c1 .ob-c1-out-x .ob-c1-ic>.ob-c1-sw{opacity:0;transform:scale(.25)}
.ob5 #ob-c1 .ob-c1-out-x .ob-c1-tx.ob-c1-sw{opacity:0;transform:translateY(5px)}
.ob5 #ob-c1 .ob-c1-out.ob-c1-sel:after{opacity:1}
/* štítek na horní linii bloku, stejně jako „Spouštěč“ */
.ob5 #ob-c1 .ob-c1-pill{position:absolute;right:10px;top:-10px;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:4px;height:20px;padding:0 8px 0 6px;border-radius:999px;background:var(--k);color:#fff;font-size:10.5px;line-height:1;white-space:nowrap;opacity:0;transform:translateY(3px);transition:opacity .25s ease,transform .35s var(--ease)}
.ob5 #ob-c1 .ob-c1-pill svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ob5 #ob-c1 .ob-c1-sel .ob-c1-pill{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .ob5 #ob-c1 .ob-c1-on,.ob5 #ob-c1 .ob-c1-node:after,.ob5 #ob-c1 .ob-c1-sw,.ob5 #ob-c1 .ob-c1-pill,.ob5 #ob-c1 .ob-c1-ag,.ob5 #ob-c1 .ob-c1-ok,.ob5 #ob-c1 .ob-c1-dt,.ob5 #ob-c1 .ob-c1-kv dd,.ob5 #ob-c1 .ob-c1-tm{transition:none}
  .ob5 #ob-c1 .ob-c1-mark:before{animation:none}
  .ob5 #ob-c1 .ob-c1-ct,.ob5 #ob-c1 .ob-c1-cm,.ob5 #ob-c1 .ob-c1-ch{display:none}
}

/* užší plátno (okna ~1180–1270 px): menší bloky, stále vodorovně */
@container (max-width:520px){
  .ob5 #ob-c1 .ob-c1-cv{grid-template-columns:166px minmax(22px,1fr) 46px minmax(22px,1fr) 196px}
}
/* úzké plátno (pod ~1170 px a mobil): tok shora dolů se sběrnicí */
@container (max-width:451px){
  .ob5 #ob-c1 .ob-c1-cv{--ob-c1-dir:v;max-width:none;grid-template-columns:1fr;grid-template-rows:auto minmax(16px,1fr) auto minmax(16px,1fr) auto;align-items:center;justify-items:center}
  .ob5 #ob-c1 .ob-c1-trig{grid-column:1;grid-row:1;width:100%;max-width:316px;padding:11px 12px}
  .ob5 #ob-c1 .ob-c1-kv{display:none}
  .ob5 #ob-c1 .ob-c1-pr{right:auto;top:auto;bottom:-4.5px;left:50%;margin:0 0 0 -4px}
  .ob5 #ob-c1 .ob-c1-hub{grid-column:1;grid-row:3;width:38px;height:38px}
  .ob5 #ob-c1 .ob-c1-mark{width:38px;height:38px}
  .ob5 #ob-c1 .ob-c1-mark:before{border-radius:15.5px}
  .ob5 #ob-c1 .ob-c1-hub small{display:none}
  .ob5 #ob-c1 .ob-c1-outs{grid-column:1;grid-row:5;flex-direction:row;gap:8px;width:100%;max-width:316px}
  .ob5 #ob-c1 .ob-c1-out{flex:1;min-width:0;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:auto;padding:12px 6px 11px;text-align:center}
  .ob5 #ob-c1 .ob-c1-bd{flex-direction:column;gap:8px;flex:none}
  .ob5 #ob-c1 .ob-c1-pill{top:auto;right:auto;bottom:-10px;left:50%;margin-left:-44px;width:88px;padding:0}
  .ob5 #ob-c1 .ob-c1-pl{left:50%;top:-4.5px;margin:0 0 0 -4px}
  .ob5 #ob-c1 .ob-c1-out .ob-c1-tx{align-items:center;flex:none;gap:2px}
  .ob5 #ob-c1 .ob-c1-out .ob-c1-tx small{font-size:12.5px;color:var(--k);font-weight:500}
  .ob5 #ob-c1 .ob-c1-out .ob-c1-tx b{display:none}
  .ob5 #ob-c1 .ob-c1-out .ob-c1-tx em{display:block;font-style:normal;font-size:11px;color:var(--m);white-space:nowrap}
  .ob5 #ob-c1 .ob-c1-dt{display:none}
}
@media (max-width:900px){
  .ob5 #ob-c1 .ob-stage{padding:34px 16px 26px}
}

/* ───── 02 Agent ───── */
/* 02 Agent (B, final): funnel canvas + diff proposal (21st 12387 Edit Tool, 37471 Thinking Prompt Input, 23792 AI Approval) */
.ob5 #ob-c2 .ob-stage{container:ob-c2s/inline-size;justify-content:center;padding:30px 30px 30px 34px;-webkit-mask-image:none;mask-image:none}
.ob5 #ob-c2 .ob-c2-x{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 30px;align-items:center;width:100%;max-width:520px;margin:0 auto;font-family:var(--sans)}
.ob5 #ob-c2 .ob-c2-x svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* canvas: the funnel, built from blocks (node = c1 panel token, tile 28/r7, wires = c1 wire spec) */
.ob5 #ob-c2 .ob-c2-cv{display:flex;flex-direction:column;min-width:0}
.ob5 #ob-c2 .ob-c2-n{position:relative;isolation:isolate;display:flex;align-items:center;gap:9px;height:44px;padding:0 10px 0 8px;border-radius:10px;transition:opacity .4s var(--ease),transform .45s var(--ease)}
.ob5 #ob-c2 .ob-c2-n:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#fff;border:1px solid var(--l);box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.18);transition:opacity .45s var(--ease)}
.ob5 #ob-c2 .ob-c2-gb{position:absolute;inset:0;z-index:-1;width:100%;height:100%;overflow:visible;transition:opacity .45s var(--ease)}
.ob5 #ob-c2 .ob-c2-gb rect{x:.5px;y:.5px;width:calc(100% - 1px);height:calc(100% - 1px);rx:9.5px;fill:rgba(255,255,255,.6);stroke:rgba(0,0,0,.24);stroke-width:1;stroke-dasharray:3 4}
.ob5 #ob-c2 .ob-c2-ni{position:relative;flex:none;width:28px;height:28px;border-radius:7px;background:var(--chip);border:1px solid var(--l);display:grid;place-items:center;color:var(--k);transition:opacity .45s var(--ease)}
.ob5 #ob-c2 .ob-c2-ni>svg{width:15px;height:15px}
.ob5 #ob-c2 .ob-c2-nt{display:flex;flex-direction:column;gap:4px;min-width:0;transition:opacity .45s var(--ease)}
.ob5 #ob-c2 .ob-c2-nt b{font:500 12.5px/1.1 var(--sans);color:var(--k);letter-spacing:-.005em;white-space:nowrap}
.ob5 #ob-c2 .ob-c2-nt small{font:400 11px/1.1 var(--sans);color:var(--m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob5 #ob-c2 .ob-c2-nk{position:absolute;right:-5px;bottom:-5px;width:15px;height:15px;border-radius:50%;background:var(--g);border:2px solid #fff;display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .3s ease,transform .45s var(--ease)}
.ob5 #ob-c2 .ob-c2-nk svg{width:9px;height:9px;stroke:#fff;stroke-width:2.6}
.ob5 #ob-c2 .ob-c2-l{position:relative;z-index:2;display:block;flex:none;width:12px;height:20px;margin:0 auto;transition:opacity .4s var(--ease)}
.ob5 #ob-c2 .ob-c2-l svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ob5 #ob-c2 .ob-c2-l .ob-c2-wt{stroke:rgba(0,0,0,.16);stroke-width:1.25;stroke-dasharray:3 4}
.ob5 #ob-c2 .ob-c2-l .ob-c2-wl{stroke:var(--k);stroke-width:1.25;opacity:0;transition:opacity .5s var(--ease)}
.ob5 #ob-c2 .ob-c2-lit .ob-c2-wl,.ob5 #ob-c2 .ob-c2-l.ob-c2-sol .ob-c2-wl{opacity:.55}
.ob5 #ob-c2 .ob-c2-l .ob-c2-h{display:none}
.ob5 #ob-c2 .ob-c2-l:before,.ob5 #ob-c2 .ob-c2-l:after{content:"";position:absolute;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#fff;border:1.5px solid var(--q2)}
.ob5 #ob-c2 .ob-c2-l:before{top:-4px}
.ob5 #ob-c2 .ob-c2-l:after{bottom:-4px}
/* ghost = proposed, not yet approved; solid = built */
.ob5 #ob-c2 .ob-c2-g{opacity:0}
.ob5 #ob-c2 .ob-c2-n.ob-c2-g{transform:translateY(6px) scale(.97)}
.ob5 #ob-c2 .ob-c2-n.ob-c2-g:before{opacity:0}
.ob5 #ob-c2 .ob-c2-n.ob-c2-g .ob-c2-ni,.ob5 #ob-c2 .ob-c2-n.ob-c2-g .ob-c2-nt{opacity:.65}
.ob5 #ob-c2 .ob-c2-g.ob-c2-on{opacity:1;transform:none}
.ob5 #ob-c2 .ob-c2-n.ob-c2-sol:before,.ob5 #ob-c2 .ob-c2-n.ob-c2-sol .ob-c2-ni,.ob5 #ob-c2 .ob-c2-n.ob-c2-sol .ob-c2-nt{opacity:1}
.ob5 #ob-c2 .ob-c2-n.ob-c2-sol .ob-c2-gb{opacity:0}
.ob5 #ob-c2 .ob-c2-sol .ob-c2-nk{opacity:1;transform:none}

/* proposal card: c3/c5 header pattern */
.ob5 #ob-c2 .ob-c2-pp{container:ob-c2p/inline-size;min-width:0;background:#fff;border:1px solid var(--l);border-radius:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.18)}
.ob5 #ob-c2 .ob-c2-ph{position:relative;display:flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 12px;border-bottom:1px solid var(--l);white-space:nowrap}
.ob5 #ob-c2 .ob-c2-hi{flex:none;display:grid;width:24px;height:24px;border-radius:6px;background:var(--chip);border:1px solid var(--l);color:var(--k)}
.ob5 #ob-c2 .ob-c2-hi>span{grid-area:1/1;display:grid;place-items:center;transition:opacity .3s var(--ease),transform .4s var(--ease)}
.ob5 #ob-c2 .ob-c2-hi svg{width:14px;height:14px}
.ob5 #ob-c2 .ob-c2-hu,.ob5 #ob-c2 [data-s="r"] .ob-c2-ha,.ob5 #ob-c2 .ob-c2-rm .ob-c2-ha{opacity:0;transform:scale(.6)}
.ob5 #ob-c2 [data-s="r"] .ob-c2-hu,.ob5 #ob-c2 .ob-c2-rm .ob-c2-hu{opacity:1;transform:none}
.ob5 #ob-c2 .ob-c2-ht{flex:1;min-width:0;display:grid;transition:opacity .35s var(--ease)}
.ob5 #ob-c2 .ob-c2-ht>span{grid-area:1/1;justify-self:start;max-width:100%;position:relative;overflow:hidden;text-overflow:ellipsis;font:500 13px/1.25 var(--sans);letter-spacing:-.005em;color:var(--k);opacity:0;transform:translateY(4px);transition:opacity .15s var(--ease),transform .4s var(--ease)}
.ob5 #ob-c2 .ob-c2-ht>.ob-c2-sh{color:var(--m)}
.ob5 #ob-c2 .ob-c2-sh:after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:translateX(-100%)}
.ob5 #ob-c2 [data-s="0"] .ob-c2-sh:after{animation:ob-c2-sh 1.5s linear infinite}
@keyframes ob-c2-sh{to{transform:translateX(250%)}}
.ob5 #ob-c2 [data-s="r"] .ob-c2-rq,.ob5 #ob-c2 [data-s="0"] .ob-c2-sh,.ob5 #ob-c2 :is([data-s="1"],[data-s="2"],[data-s="3"]) .ob-c2-pt,
.ob5 #ob-c2 .ob-c2-rm .ob-c2-ht>.ob-c2-rq{opacity:1;transform:none;transition:opacity .3s var(--ease) .12s,transform .4s var(--ease) .12s}
.ob5 #ob-c2 .ob-c2-rm .ob-c2-ht>.ob-c2-pt{opacity:0}
.ob5 #ob-c2 .ob-c2-ps{position:absolute;right:10px;top:calc(50% - 11px);display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--chip);border:1px solid var(--l);font:500 11px/1 var(--sans);color:var(--k2);font-variant-numeric:tabular-nums;opacity:0;transition:opacity .3s var(--ease)}
.ob5 #ob-c2 :is([data-s="1"],[data-s="2"],[data-s="3"]) .ob-c2-ps{opacity:1}
.ob5 #ob-c2 .ob-c2-rm .ob-c2-ps{display:none}

/* diff: context rows grey, added rows with an ink bar; skeletons hold the slots while the agent writes */
.ob5 #ob-c2 .ob-c2-df{padding:6px 0}
.ob5 #ob-c2 .ob-c2-r{position:relative;height:28px}
.ob5 #ob-c2 .ob-c2-rb{position:absolute;inset:0;isolation:isolate;display:grid;grid-template-columns:28px auto minmax(0,1fr);align-items:center;gap:8px;padding-right:12px}
.ob5 #ob-c2 .ob-c2-rb i{font:500 12px/1 var(--mono);font-style:normal;color:var(--k);text-align:center}
.ob5 #ob-c2 .ob-c2-rb b{font:500 12.5px/1.1 var(--sans);letter-spacing:-.005em;color:var(--m);white-space:nowrap}
.ob5 #ob-c2 .ob-c2-rb>span{font:400 11.5px/1.1 var(--sans);color:var(--m);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob5 #ob-c2 .ob-c2-rb em{font-style:normal}
.ob5 #ob-c2 .ob-c2-add .ob-c2-rb{opacity:0;transform:translateY(4px);transition:opacity .35s var(--ease),transform .4s var(--ease)}
.ob5 #ob-c2 .ob-c2-add .ob-c2-rb:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--k)}
.ob5 #ob-c2 .ob-c2-add .ob-c2-rb:after{content:"";position:absolute;inset:0;z-index:-1;background:#f7f6f3;transition:opacity .5s var(--ease)}
.ob5 #ob-c2 .ob-c2-add b{color:var(--k)}
.ob5 #ob-c2 .ob-c2-add .ob-c2-rb>span{color:var(--k2)}
.ob5 #ob-c2 .ob-c2-add.ob-c2-on .ob-c2-rb{opacity:1;transform:none}
.ob5 #ob-c2 :is([data-s="2"],[data-s="3"]) .ob-c2-add .ob-c2-rb:after{opacity:0}
.ob5 #ob-c2 .ob-c2-rk,.ob5 #ob-c2 .ob-c2-fk{position:absolute;inset:0;display:flex;align-items:center;gap:8px;transition:opacity .2s var(--ease)}
.ob5 #ob-c2 .ob-c2-rk{padding-left:36px}
.ob5 #ob-c2 .ob-c2-rk i,.ob5 #ob-c2 .ob-c2-fk i{display:block;height:7px;border-radius:4px;background:var(--paper-2,#efeee9)}
.ob5 #ob-c2 .ob-c2-rk i:first-child{width:46px}
.ob5 #ob-c2 .ob-c2-rk i+i{width:92px}
.ob5 #ob-c2 .ob-c2-on .ob-c2-rk{opacity:0}
.ob5 #ob-c2 [data-s="0"] .ob-c2-rk i,.ob5 #ob-c2 [data-s="0"] .ob-c2-fk i{animation:ob-c2-pl .9s ease-in-out infinite alternate}
@keyframes ob-c2-pl{to{opacity:.4}}

/* footer: skeleton, then the options, then the decision */
.ob5 #ob-c2 .ob-c2-ff{position:relative;height:49px;border-top:1px solid var(--l)}
.ob5 #ob-c2 .ob-c2-fk{padding:0 14px}
.ob5 #ob-c2 .ob-c2-fk i:first-child{width:64px;margin-right:auto}
.ob5 #ob-c2 .ob-c2-fk i:nth-child(2){width:52px}
.ob5 #ob-c2 .ob-c2-fk i:nth-child(3){width:62px;margin-right:10px}
.ob5 #ob-c2 :is([data-s="1"],[data-s="2"],[data-s="3"]) .ob-c2-fk{opacity:0}
.ob5 #ob-c2 .ob-c2-op{position:absolute;inset:0;display:flex;align-items:center;gap:6px;padding:0 9px 0 13px;opacity:0;transform:translateY(4px);transition:opacity .2s var(--ease),transform .35s var(--ease)}
.ob5 #ob-c2 [data-s="1"] .ob-c2-op{opacity:1;transform:none;transition-delay:.1s}
.ob5 #ob-c2 :is([data-s="2"],[data-s="3"]) .ob-c2-op{transform:none;transition-delay:.12s}
.ob5 #ob-c2 .ob-c2-ws{margin-right:auto;display:inline-flex;align-items:center;gap:7px;font:400 11.5px/1 var(--sans);color:var(--m);white-space:nowrap}
.ob5 #ob-c2 .ob-c2-ws:before{content:"";width:6px;height:6px;border-radius:50%;border:1.5px solid var(--m2)}
.ob5 #ob-c2 .ob-c2-bt{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 11px 0 9px;border-radius:7px;font:500 12.5px/1 var(--sans);white-space:nowrap;transition:transform .18s var(--ease)}
.ob5 #ob-c2 .ob-c2-bt svg{width:14px;height:14px}
.ob5 #ob-c2 .ob-c2-b2{background:#fff;border:1px solid rgba(0,0,0,.1);color:var(--k2)}
.ob5 #ob-c2 .ob-c2-b2 svg{width:13px;height:13px;color:var(--m)}
.ob5 #ob-c2 .ob-c2-b1{background:var(--k);color:#fff;border:1px solid var(--k)}
.ob5 #ob-c2 .ob-c2-b1 svg{stroke-width:2}
.ob5 #ob-c2 .ob-c2-b1:before,.ob5 #ob-c2 .ob-c2-b1:after{content:"";position:absolute;inset:-1px;border-radius:inherit;transition:opacity .18s ease}
.ob5 #ob-c2 .ob-c2-b1:before{box-shadow:0 1px 0 rgba(0,0,0,.06),0 0 0 3px rgba(20,20,20,.1)}
.ob5 #ob-c2 .ob-c2-b1:after{z-index:-1;background:rgba(255,255,255,.14);opacity:0}
.ob5 #ob-c2 .ob-c2-b1.ob-c2-pr{transform:scale(.96)}
.ob5 #ob-c2 .ob-c2-b1.ob-c2-pr:before{opacity:0}
.ob5 #ob-c2 .ob-c2-b1.ob-c2-pr:after{opacity:1}
.ob5 #ob-c2 .ob-c2-rs{position:absolute;inset:9px;isolation:isolate;display:flex;align-items:center;gap:8px;padding:0 12px 0 10px;color:#fff;font:500 12.5px/1 var(--sans);white-space:nowrap}
.ob5 #ob-c2 .ob-c2-rs:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:7px;background:var(--k);transform-origin:100% 50%;transform:scaleX(var(--ob-c2-k,.3));opacity:0;transition:transform .5s var(--ease),opacity .06s linear}
.ob5 #ob-c2 .ob-c2-rs>*{opacity:0;transition:opacity .25s var(--ease)}
.ob5 #ob-c2 .ob-c2-rs svg{flex:none;width:14px;height:14px;stroke-width:2}
.ob5 #ob-c2 .ob-c2-rs span{min-width:0;margin-left:auto;font:400 11.5px/1 var(--sans);color:rgba(255,255,255,.72);overflow:hidden;text-overflow:ellipsis}
.ob5 #ob-c2 :is([data-s="2"],[data-s="3"]) .ob-c2-rs:before{opacity:1;transform:none}
.ob5 #ob-c2 :is([data-s="2"],[data-s="3"]) .ob-c2-rs>*{opacity:1;transition-delay:.2s}
.ob5 #ob-c2 [data-s="3"] .ob-c2-rs>*{transition-delay:0s}
.ob5 #ob-c2 .ob-c2-x .ob-c2-rs span.ob-c2-sw{opacity:0;transition-delay:0s}


/* narrow proposal card */
@container ob-c2p (max-width:281px){
  .ob5 #ob-c2 .ob-c2-rqx,.ob5 #ob-c2 .ob-c2-ws{display:none}
  .ob5 #ob-c2 .ob-c2-op{justify-content:flex-end}
}
@container ob-c2p (max-width:249px){
  .ob5 #ob-c2 .ob-c2-ps,.ob5 #ob-c2 .ob-c2-rb em,.ob5 #ob-c2 .ob-c2-b2 svg{display:none}
  .ob5 #ob-c2 .ob-c2-rb{grid-template-columns:22px auto minmax(0,1fr);padding-right:10px}
  .ob5 #ob-c2 .ob-c2-rk{padding-left:30px}
}
/* mid stage (~1100-1200 px): tighter canvas column */
@container ob-c2s (max-width:479px){
  .ob5 #ob-c2 .ob-c2-x{grid-template-columns:132px minmax(0,1fr);gap:0 22px}
}
/* narrow stage (960 px band, phones): the canvas becomes a strip of icon nodes above the card */
@container ob-c2s (max-width:419px){
  .ob5 #ob-c2 .ob-c2-x{grid-template-columns:minmax(0,1fr);gap:10px;max-width:420px;margin:0 auto}
  .ob5 #ob-c2 .ob-c2-cv{flex-direction:row;align-items:center;padding:0 10px;margin-top:8px}
  .ob5 #ob-c2 .ob-c2-n{width:28px;height:28px;padding:0;border-radius:7px;flex:none}
  .ob5 #ob-c2 .ob-c2-gb rect{rx:6.5px}
  .ob5 #ob-c2 .ob-c2-nt{display:none}
  .ob5 #ob-c2 .ob-c2-ni{width:100%;height:100%;border:0;background:none}
  .ob5 #ob-c2 .ob-c2-l{flex:1;width:auto;height:12px;margin:0}
  .ob5 #ob-c2 .ob-c2-l:before,.ob5 #ob-c2 .ob-c2-l:after{top:50%;bottom:auto;margin:-4px 0 0}
  .ob5 #ob-c2 .ob-c2-l:before{left:-4px}
  .ob5 #ob-c2 .ob-c2-l:after{left:auto;right:-4px}
  .ob5 #ob-c2 .ob-c2-l .ob-c2-v{display:none}
  .ob5 #ob-c2 .ob-c2-l .ob-c2-h{display:inline}
  .ob5 #ob-c2 .ob-c2-df{padding:4px 0}
  .ob5 #ob-c2 .ob-c2-r{height:24px}
  .ob5 #ob-c2 .ob-c2-ff{height:45px}
  .ob5 #ob-c2 .ob-c2-rs{inset:7px 9px}
}
@media (prefers-reduced-motion:reduce){
  .ob5 #ob-c2 .ob-c2-sh:after,.ob5 #ob-c2 .ob-c2-rk i,.ob5 #ob-c2 .ob-c2-fk i{animation:none!important}
  .ob5 #ob-c2 .ob-c2-x,.ob5 #ob-c2 .ob-c2-x *,.ob5 #ob-c2 .ob-c2-x *:before,.ob5 #ob-c2 .ob-c2-x *:after{transition:none!important}
}
@media (max-width:900px){
  .ob5 #ob-c2 .ob-stage{padding:24px 24px 16px}
}

/* ───── 03 Provoz ───── */
/* 03 Provoz (A, final): live step history („Historie kroků“) */
.ob5 #ob-c3 .ob-stage{padding:34px 0 0;align-items:center;-webkit-mask-image:none;mask-image:none;container-type:inline-size}
.ob5 #ob-c3 .ob-c3-p{--ob-c3-h:46px;width:86%;max-width:330px;flex:none;background:#fff;border:1px solid var(--l);border-radius:10px;overflow:hidden;
  font-family:var(--sans);color:var(--k);box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.18)}
.ob5 #ob-c3 .ob-c3-p svg{fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* header: shared 40px bar, 24px chip tile, 13/500 title, meta, status pill */
.ob5 #ob-c3 .ob-c3-hd{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 12px;border-bottom:1px solid var(--l);white-space:nowrap}
.ob5 #ob-c3 .ob-c3-ic{flex:none;width:24px;height:24px;border-radius:6px;background:var(--chip);border:1px solid var(--l);display:grid;place-items:center}
.ob5 #ob-c3 .ob-c3-ic svg{width:14px;height:14px;stroke:var(--k)}
.ob5 #ob-c3 .ob-c3-ttl{font:500 13px/1 var(--sans);letter-spacing:-.005em}
.ob5 #ob-c3 .ob-c3-meta{font:400 11.5px/1 var(--sans);color:var(--m)}
.ob5 #ob-c3 .ob-c3-n{display:inline-block;font-weight:500;color:var(--k);font-variant-numeric:tabular-nums}
/* shared .ob-stt.ob-ok pill, spelled out so it renders the same with or without the shared rule */
.ob5 #ob-c3 .ob-stt.ob-ok{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border-radius:999px;
  background:#F1F8F3;border:1px solid rgba(47,158,91,.18);font:500 11px/1 var(--sans);color:#23794A}
.ob5 #ob-c3 .ob-stt.ob-ok i{position:relative;flex:none;width:6px;height:6px;border-radius:50%;background:var(--g)}
.ob5 #ob-c3 .ob-stt.ob-ok i:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--g);opacity:0}
.ob5 #ob-c3 .ob-stt.ob-ok i.ob-c3-ping:after{animation:ob-c3-ping 2.4s ease-out}
@keyframes ob-c3-ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.15);opacity:0}}

/* feed: rows are placed by index, so nothing reflows; only transform and opacity move */
.ob5 #ob-c3 .ob-c3-list{position:relative;height:calc(var(--ob-c3-h) * 4);overflow:hidden}
.ob5 #ob-c3 .ob-c3-row{position:absolute;left:0;right:0;top:0;height:var(--ob-c3-h);display:flex;align-items:center;gap:11px;padding:0 12px;
  transform:translateY(calc(var(--ob-c3-i, 0) * var(--ob-c3-h)));transition:transform .75s var(--ease),opacity .5s var(--ease)}
.ob5 #ob-c3 .ob-c3-row:before{content:"";position:absolute;left:51px;right:0;top:0;height:1px;background:var(--l);transition:opacity .4s ease}
.ob5 #ob-c3 .ob-c3-row.ob-c3-new:before{opacity:0}
.ob5 #ob-c3 .ob-c3-row.ob-c3-in{opacity:0;transform:translateY(-16px) scale(.96);transition:none}
.ob5 #ob-c3 .ob-c3-row.ob-c3-gone{opacity:0}

/* 28px row tile; the newest step wears the set's marker: yellow fill, 1.5px white gap, 1px ink ring */
.ob5 #ob-c3 .ob-c3-tile{position:relative;flex:none;width:28px;height:28px;border-radius:7px;background:var(--chip);border:1px solid var(--l);display:grid;place-items:center}
.ob5 #ob-c3 .ob-c3-tile:after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--y);opacity:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 0 1.5px #fff,0 0 0 2.5px var(--k);transition:opacity .45s var(--ease)}
.ob5 #ob-c3 .ob-c3-new .ob-c3-tile:after{opacity:1}
.ob5 #ob-c3 .ob-c3-tile svg{position:relative;z-index:1;width:15px;height:15px;stroke:var(--k2)}
.ob5 #ob-c3 .ob-c3-new .ob-c3-tile svg{stroke:var(--k)}
/* a person, not a system: round ink avatar (human decisions are ink across the set) */
.ob5 #ob-c3 .ob-c3-av{border-radius:50%;background:var(--k);border-color:var(--k)}
.ob5 #ob-c3 .ob-c3-av b{position:relative;z-index:1;font:500 12px/1 var(--sans);color:#fff}
.ob5 #ob-c3 .ob-c3-new .ob-c3-av b{color:var(--k)}

.ob5 #ob-c3 .ob-c3-bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ob5 #ob-c3 .ob-c3-l1{display:flex;align-items:baseline;gap:8px}
.ob5 #ob-c3 .ob-c3-t,.ob5 #ob-c3 .ob-c3-d{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ob5 #ob-c3 .ob-c3-t{flex:1;min-width:0;font:400 12.5px/1.2 var(--sans);color:var(--k2);letter-spacing:-.003em}
.ob5 #ob-c3 .ob-c3-t b{font-weight:500;color:var(--k)}
.ob5 #ob-c3 .ob-c3-d{font:400 11px/1.2 var(--sans);color:var(--m)}
.ob5 #ob-c3 .ob-c3-tm{flex:none;display:inline-block;font:400 10.5px/1.2 var(--mono);color:var(--m2)}
.ob5 #ob-c3 .ob-c3-new .ob-c3-tm{font-weight:500;color:var(--k)}
.ob5 #ob-c3 .ob-c3-rise{animation:ob-c3-rise .5s var(--ease)}
@keyframes ob-c3-rise{from{opacity:0;transform:translateY(.4em)}to{opacity:1;transform:none}}

/* „Historie kroků“ + počet + pilulka se vejdou až do panelu ~300 px; užší panel (960 px pásmo, telefony) počet vynechá */
@container (max-width:350px){
  .ob5 #ob-c3 .ob-c3-meta{display:none}
}
@container (max-width:300px){
  .ob5 #ob-c3 .ob-c3-p{width:calc(100% - 32px)}
  .ob5 #ob-c3 .ob-c3-hd{gap:6px;padding:0 8px 0 10px}
  .ob5 #ob-c3 .ob-c3-row{gap:9px;padding:0 10px}
  .ob5 #ob-c3 .ob-c3-row:before{left:47px}
}
@media (prefers-reduced-motion:reduce){
  .ob5 #ob-c3 .ob-c3-p *,.ob5 #ob-c3 .ob-c3-p *:before,.ob5 #ob-c3 .ob-c3-p *:after{transition:none!important;animation:none!important}
}
@media (max-width:900px){
  .ob5 #ob-c3 .ob-stage{padding:30px 0 0}
  .ob5 #ob-c3 .ob-c3-p{width:calc(100% - 48px);max-width:340px}
}

/* ───── 04 Výsledky ───── */
/* 04 Výsledky (B, final): report prvních 14 dní. Port: Status Bar 26906 (denní buňky, hover karta), Comparison Section 26826
   (před přeškrtnuté → po zvýrazněné), Animate Digits 20071 (mění se jen změněné číslice), Circular Progress 24462 (kroužek v pilulce). */
.ob5 #ob-c4 .ob-stage{padding:34px 0 0;align-items:center;-webkit-mask-image:none;mask-image:none;container-type:inline-size}
.ob5 #ob-c4 .ob-c4-p{width:86%;max-width:330px;flex:none;background:#fff;border:1px solid var(--l);border-radius:10px;overflow:hidden;
  font-family:var(--sans);color:var(--k);box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.18)}
.ob5 #ob-c4 svg{fill:none;stroke-linecap:round;stroke-linejoin:round}

/* header: shared 40px bar, 24px chip tile, 13/500 title, status pill on the right */
.ob5 #ob-c4 .ob-c4-hd{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 12px;border-bottom:1px solid var(--l);white-space:nowrap}
.ob5 #ob-c4 .ob-c4-ic{flex:none;width:24px;height:24px;border-radius:6px;background:var(--chip);border:1px solid var(--l);display:grid;place-items:center}
.ob5 #ob-c4 .ob-c4-ic svg{width:14px;height:14px;stroke:var(--k);stroke-width:1.5}
.ob5 #ob-c4 .ob-c4-ttl{font:500 13px/1 var(--sans);letter-spacing:-.005em}
/* shared .ob-stt pill (neutral) and .ob-ok (green), spelled out so it renders the same with or without the shared rule */
.ob5 #ob-c4 .ob-stt{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:999px;
  background:var(--chip);border:1px solid var(--l);font:500 11px/1 var(--sans);color:var(--k2);font-variant-numeric:tabular-nums;transition:opacity .35s ease}
.ob5 #ob-c4 .ob-stt.ob-ok{background:#F1F8F3;border-color:rgba(47,158,91,.18);color:#23794A}
.ob5 #ob-c4 .ob-c4-pill{min-width:87px;justify-content:center}
.ob5 #ob-c4 .ob-stt svg{flex:none;width:12px;height:12px}
.ob5 #ob-c4 .ob-c4-rg circle{stroke-width:2;stroke:rgba(0,0,0,.13)}
.ob5 #ob-c4 .ob-c4-rg circle+circle{stroke:var(--k);stroke-dasharray:14;stroke-linecap:butt}
.ob5 #ob-c4 .ob-c4-ck{display:none;stroke:currentColor;stroke-width:2.2}
.ob5 #ob-c4 .ob-ok .ob-c4-rg{display:none}
.ob5 #ob-c4 .ob-ok .ob-c4-ck{display:block}

/* stavový pruh: 14 dní od nasazení, výška výplně = ušetřený čas toho dne */
.ob5 #ob-c4 .ob-c4-bd{padding:14px 12px 1px}
.ob5 #ob-c4 .ob-c4-bar{position:relative;display:flex;gap:3px;height:24px}
.ob5 #ob-c4 .ob-c4-bar>span[data-i]{position:relative;flex:1;border-radius:3px;background:var(--chip);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);cursor:default}
.ob5 #ob-c4 .ob-c4-bar>span[data-i]:after{content:"";position:absolute;inset:0;border-radius:inherit;background:#bab8b2;
  transform:scaleY(0);transform-origin:50% 100%;transition:transform .3s var(--ease),opacity .35s ease}
.ob5 #ob-c4 .ob-c4-bar>span.ob-c4-on:after{transform:scaleY(var(--ob-c4-v))}
/* dnešek: datová značka v inkoustu (1,5px bílá mezera, 1px prstenec; žlutá patří agentovi) na vrstvě, která se nikdy neškáluje */
.ob5 #ob-c4 .ob-c4-bar>span[data-i]:before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:var(--k);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 0 1.5px #fff,0 0 0 2.5px var(--k);opacity:0}
.ob5 #ob-c4 .ob-c4-bar>span.ob-c4-now:before{opacity:1}
.ob5 #ob-c4 .ob-c4-tip{position:absolute;left:0;top:calc(100% + 6px);z-index:3;transform:translateX(var(--ob-c4-tx,0)) translateX(-50%);padding:5px 7px;border-radius:6px;
  background:var(--k);color:#fff;font:400 10.5px/1 var(--mono);white-space:nowrap;opacity:0;transition:opacity .15s ease;pointer-events:none}
.ob5 #ob-c4 .ob-c4-tip.ob-c4-tv{opacity:1}
.ob5 #ob-c4 .ob-c4-ax{display:flex;justify-content:space-between;align-items:baseline;margin-top:9px;height:11px;font:400 10.5px/1 var(--mono);color:var(--m);white-space:nowrap}
.ob5 #ob-c4 .ob-c4-ax em{font:400 11px/1 var(--sans);font-style:normal;margin-right:5px}

/* před → po */
.ob5 #ob-c4 .ob-c4-rows{margin:13px -12px 0;border-top:1px solid var(--l)}
.ob5 #ob-c4 .ob-c4-row{display:flex;align-items:center;gap:8px;height:37px;padding:0 12px;white-space:nowrap}
.ob5 #ob-c4 .ob-c4-row+.ob-c4-row{border-top:1px solid rgba(0,0,0,.05)}
.ob5 #ob-c4 .ob-c4-lb{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;font:400 12.5px/1.2 var(--sans);color:var(--k2);letter-spacing:-.003em}
.ob5 #ob-c4 .ob-c4-bf{flex:none;min-width:30px;text-align:right;font:400 12px/1 var(--sans);color:var(--m);font-variant-numeric:tabular-nums}
.ob5 #ob-c4 .ob-c4-bf i{position:relative;font-style:normal}
.ob5 #ob-c4 .ob-c4-bf i:after{content:"";position:absolute;left:-2px;right:-2px;top:54%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:0 50%;
  transition:transform .3s var(--ease),opacity .35s ease}
.ob5 #ob-c4 .ob-c4-x .ob-c4-bf i:after{transform:none}
.ob5 #ob-c4 .ob-c4-ar{flex:none;width:12px;height:12px;stroke:#b0aea7;stroke-width:1.6}
.ob5 #ob-c4 .ob-c4-num{display:inline-flex;justify-content:flex-end;min-width:44px;font:500 13.5px/1 var(--sans);color:var(--k);font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;transition:opacity .35s ease}

/* Animate Digits: jen změněná číslice odjede a nová přijede ze směru změny; okraje buňky jsou maskou, ne tvrdým ořezem */
.ob5 #ob-c4 .ob-c4-dg{position:relative;display:inline-block;height:20px;line-height:20px}
.ob5 #ob-c4 .ob-c4-dg>span{display:inline-block}
.ob5 #ob-c4 .ob-c4-d{-webkit-mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.ob5 #ob-c4 .ob-c4-o{position:absolute;left:0;top:0;animation:ob-c4-ou .13s ease-in forwards}
.ob5 #ob-c4 .ob-c4-o.ob-c4-dn{animation-name:ob-c4-od}
.ob5 #ob-c4 .ob-c4-n{animation:ob-c4-nu .2s var(--ease) .07s both}
.ob5 #ob-c4 .ob-c4-n.ob-c4-dn{animation-name:ob-c4-nd}
@keyframes ob-c4-ou{to{transform:translateY(-60%) scale(.8);opacity:0}}
@keyframes ob-c4-od{to{transform:translateY(60%) scale(.8);opacity:0}}
@keyframes ob-c4-nu{from{transform:translateY(60%) scale(.8);opacity:0}}
@keyframes ob-c4-nd{from{transform:translateY(-60%) scale(.8);opacity:0}}

/* přetočení na den 1 (mimo pohled nebo na jeho okraji) proběhne bez přechodů */
.ob5 #ob-c4 .ob-c4-nt *,.ob5 #ob-c4 .ob-c4-nt *:before,.ob5 #ob-c4 .ob-c4-nt *:after{transition:none!important}

@container (max-width:300px){
  .ob5 #ob-c4 .ob-c4-p{width:calc(100% - 32px)}
  .ob5 #ob-c4 .ob-c4-hd{gap:6px;padding:0 8px 0 10px}
  .ob5 #ob-c4 .ob-c4-bd{padding:14px 10px 1px}
  .ob5 #ob-c4 .ob-c4-rows{margin:13px -10px 0}
  .ob5 #ob-c4 .ob-c4-row{gap:6px;padding:0 10px}
  .ob5 #ob-c4 .ob-c4-lb{font-size:12px}
  .ob5 #ob-c4 .ob-c4-bf{min-width:0}
  .ob5 #ob-c4 .ob-c4-num{min-width:38px}
  .ob5 #ob-c4 .ob-c4-bar{gap:2px}
}
@container (max-width:276px){
  .ob5 #ob-c4 .ob-c4-pill{min-width:0;padding:0 8px}
  .ob5 #ob-c4 .ob-c4-rg{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ob5 #ob-c4 .ob-c4-p *,.ob5 #ob-c4 .ob-c4-p *:before,.ob5 #ob-c4 .ob-c4-p *:after{transition:none!important;animation:none!important}
}
@media (max-width:900px){
  .ob5 #ob-c4 .ob-stage{padding:30px 0 0}
  .ob5 #ob-c4 .ob-c4-p{width:calc(100% - 48px);max-width:340px}
}

/* ───── 05 Bezpečnost ───── */
/* 05 Bezpečnost (A, final): umístění dat, tečková mapa EU. Port: Aceternity World Map 999, Globe 27474 (pin), Alqemist Security 14889 */
.ob5 #ob-c5 .ob-stage{padding:34px 0 0;align-items:center;-webkit-mask-image:none;mask-image:none;container-type:inline-size}
.ob5 #ob-c5 .ob-c5-p{width:86%;max-width:330px;flex:none;background:#fff;border:1px solid var(--l);border-radius:10px;overflow:hidden;
  font-family:var(--sans);color:var(--k);box-shadow:0 1px 2px rgba(0,0,0,.04),0 12px 32px -16px rgba(0,0,0,.18)}
.ob5 #ob-c5 .ob-c5-p svg{fill:none;stroke-linecap:round;stroke-linejoin:round}

/* header: shared 40px bar, 24px chip tile, 13/500 title; the pill is the map key (ink dot = EU) */
.ob5 #ob-c5 .ob-c5-hd{display:flex;align-items:center;gap:8px;height:40px;padding:0 10px 0 12px;border-bottom:1px solid var(--l);white-space:nowrap}
.ob5 #ob-c5 .ob-c5-ic{flex:none;width:24px;height:24px;border-radius:6px;background:var(--chip);border:1px solid var(--l);display:grid;place-items:center}
.ob5 #ob-c5 .ob-c5-ic svg{width:14px;height:14px;stroke:var(--k);stroke-width:1.5}
.ob5 #ob-c5 .ob-c5-ttl{font:500 13px/1 var(--sans);letter-spacing:-.005em}
/* shared .ob-stt (neutral) pill, spelled out so it renders the same with or without the shared rule */
.ob5 #ob-c5 .ob-stt{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border-radius:999px;background:var(--chip);
  border:1px solid var(--l);font:500 11px/1 var(--sans);color:var(--k2);white-space:nowrap}
.ob5 #ob-c5 .ob-c5-rg{margin-left:auto}
.ob5 #ob-c5 .ob-c5-rg i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--k);opacity:.78}

/* map: dots sit on whole pixels (set in JS). Land = one static path; EU = 8 rings around the pin, each a faint
   underlay path (looks like land) and an ink path. The wave animates only the opacity of those 16 paths. */
.ob5 #ob-c5 .ob-c5-map{position:relative;height:150px;border-bottom:1px solid var(--l);overflow:hidden;background:#fff}
.ob5 #ob-c5 .ob-c5-map>svg{position:absolute;inset:0;width:100%;height:100%;fill:rgba(0,0,0,.13);
  -webkit-mask-image:linear-gradient(90deg,#000 var(--ob-c5-f,70%),rgba(0,0,0,.25) calc(var(--ob-c5-f,70%) + 80px));mask-image:linear-gradient(90deg,#000 var(--ob-c5-f,70%),rgba(0,0,0,.25) calc(var(--ob-c5-f,70%) + 80px))}
.ob5 #ob-c5 .ob-c5-map:not(.ob-c5-b)>span{visibility:hidden}
.ob5 #ob-c5 .ob-c5-e{fill:var(--k);opacity:.78}
.ob5 #ob-c5 .ob-c5-u{fill:var(--k);opacity:0}
.ob5 #ob-c5 .ob-c5-p:not(.ob-c5-in):not(.ob-c5-done) .ob-c5-e{opacity:0}
.ob5 #ob-c5 .ob-c5-p:not(.ob-c5-in):not(.ob-c5-done) .ob-c5-u{opacity:.13}
.ob5 #ob-c5 .ob-c5-in .ob-c5-e{animation:ob-c5-in 1.1s var(--ease) both;animation-delay:var(--ob-c5-d)}
.ob5 #ob-c5 .ob-c5-in .ob-c5-u{animation:ob-c5-u 1.1s var(--ease) both;animation-delay:var(--ob-c5-d)}
@keyframes ob-c5-in{0%{opacity:0}35%{opacity:1}100%{opacity:.78}}
@keyframes ob-c5-u{0%{opacity:.13}35%,100%{opacity:0}}

/* pin: a data marker in ink (1.5px white gap, 1px ink ring; yellow is the agent's) + a white clearing; one stroke ping as the EU colours in */
.ob5 #ob-c5 .ob-c5-pin{position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:var(--k);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 0 0 1.5px #fff,0 0 0 2.5px var(--k),0 0 0 4.5px rgba(255,255,255,.92)}
.ob5 #ob-c5 .ob-c5-pin:before{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--k);opacity:0}
.ob5 #ob-c5 .ob-c5-in .ob-c5-pin:before{animation:ob-c5-ping 2.4s ease-out}
@keyframes ob-c5-ping{0%{transform:scale(.8);opacity:.9}100%{transform:scale(1.6);opacity:0}}
.ob5 #ob-c5 .ob-c5-call{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:7px;
  background:#fff;border:1px solid var(--l);box-shadow:0 1px 2px rgba(0,0,0,.05),0 6px 16px -8px rgba(0,0,0,.22);font:500 11.5px/1 var(--sans);color:var(--k);white-space:nowrap}
.ob5 #ob-c5 .ob-c5-call svg{width:13px;height:13px;stroke:var(--k);stroke-width:1.5}
.ob5 #ob-c5 .ob-c5-p:not(.ob-c5-in):not(.ob-c5-done) .ob-c5-call,.ob5 #ob-c5 .ob-c5-p:not(.ob-c5-in):not(.ob-c5-done) .ob-c5-ft>*{opacity:0}
.ob5 #ob-c5 .ob-c5-in .ob-c5-call{animation:ob-c5-rise .5s var(--ease) .9s both}
@keyframes ob-c5-rise{from{opacity:0;translate:-4px 0}to{opacity:1;translate:none}}

/* footer reads as the card sentence: V souladu s EU AI Act · GDPR (a claim, not a done state: the neutral pill, no green) */
.ob5 #ob-c5 .ob-c5-ft{display:flex;align-items:center;gap:7px;height:34px;padding:0 12px;white-space:nowrap}
.ob5 #ob-c5 .ob-c5-lb{font:400 11.5px/1 var(--sans);color:var(--m)}
.ob5 #ob-c5 .ob-c5-ok{gap:5px}
.ob5 #ob-c5 .ob-c5-ok svg{flex:none;width:12px;height:12px;stroke:currentColor;stroke-width:2.2}
.ob5 #ob-c5 .ob-c5-in .ob-c5-ft>*{animation:ob-c5-up .45s var(--ease) 1.2s both}
.ob5 #ob-c5 .ob-c5-in .ob-c5-ok{animation-delay:1.32s}
@keyframes ob-c5-up{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

@container (max-width:300px){
  .ob5 #ob-c5 .ob-c5-p{width:calc(100% - 32px)}
  .ob5 #ob-c5 .ob-c5-hd{gap:6px;padding:0 8px 0 10px}
  .ob5 #ob-c5 .ob-c5-ft{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  .ob5 #ob-c5 .ob-c5-p *,.ob5 #ob-c5 .ob-c5-p *:before{animation:none!important;transition:none!important}
}
@media (max-width:900px){
  .ob5 #ob-c5 .ob-stage{padding:30px 0 0}
  .ob5 #ob-c5 .ob-c5-p{width:calc(100% - 48px);max-width:340px}
}