/* ============================================================
   R29C — Full-site PRE/POSLE comparison (Dejan case study)
   Dual lockstep-scroll reels (desktop) + PRE|POSLE tabs (mobile).
   Native to BIRO 404 system: graphite + amber, mono utility type.
   ============================================================ */

.pf{--pf-h:clamp(420px,74vh,860px);--pf-label-h:46px}

/* ---- intro meta strip ---- */
.pf-meta{display:flex;flex-wrap:wrap;gap:.5rem .55rem;margin-top:1.4rem}
.pf-chip{display:inline-flex;align-items:center;gap:.45rem;max-width:100%;font-family:var(--font-mono);font-size:.68rem;font-weight:600;
  letter-spacing:.03em;color:var(--text-2);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:.4rem .62rem}
.pf-chip b{color:var(--text);font-weight:700}
.pf-chip .pd{width:6px;height:6px;border-radius:50%;background:var(--accent)}

/* ---- toolbar ---- */
.pf-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin:0 0 1rem}
.pf-bar__hint{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin-left:auto}

/* sync switch (desktop control) */
.pf-sync{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font-mono);font-size:.74rem;font-weight:600;
  letter-spacing:.02em;color:var(--text-2);background:var(--panel);border:1px solid var(--line-2);border-radius:8px;padding:.5rem .7rem;
  transition:border-color .25s,color .25s}
.pf-sync:hover{border-color:var(--accent);color:var(--text)}
.pf-switch{position:relative;width:40px;height:22px;border-radius:22px;background:var(--panel-3);border:1px solid var(--line-2);
  flex:none;transition:background .25s,border-color .25s}
.pf-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text-2);
  transition:transform .25s var(--ease-out),background .25s}
.pf-sync[aria-checked="true"] .pf-switch{background:var(--accent);border-color:var(--accent)}
.pf-sync[aria-checked="true"] .pf-switch::after{transform:translateX(18px);background:var(--accent-deep)}

/* mobile PRE|POSLE segmented tabs */
.pf-tabs{display:none;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;padding:4px;gap:4px}
.pf-tab{flex:1;font-family:var(--font-mono);font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-2);padding:.6rem .5rem;border-radius:7px;transition:background .22s,color .22s;min-height:44px}
.pf-tab[aria-selected="true"]{background:var(--accent);color:var(--accent-deep)}

/* ---- comparison grid ---- */
.pf-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,1.6vw,1.3rem)}
.pf-col{position:relative;min-width:0;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--bg-2)}

.pf-col__label{display:flex;align-items:center;gap:.55rem;height:var(--pf-label-h);padding:0 .9rem;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:var(--panel);border-bottom:1px solid var(--line)}
.pf-col--before .pf-col__label{color:var(--text-2)}
.pf-col--after .pf-col__label{color:var(--accent-hi)}
.pf-col__label .pd{width:7px;height:7px;border-radius:50%;flex:none}
.pf-col--before .pf-col__label .pd{background:var(--muted)}
.pf-col--after .pf-col__label .pd{background:var(--accent)}
.pf-col__hgt{margin-left:auto;font-weight:600;color:var(--muted);letter-spacing:.02em}

/* scroll pane holding the full-page shot */
.pf-scroll{position:relative;height:var(--pf-h);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:none;background:#0C0F14}
.pf-scroll::-webkit-scrollbar{width:0;height:0;display:none}
.pf-scroll img{display:block;width:100%;height:auto}

/* progress rail on each pane */
.pf-col__rail{position:absolute;top:var(--pf-label-h);right:6px;bottom:6px;width:3px;border-radius:3px;
  background:var(--line);z-index:2;pointer-events:none}
.pf-col__bar{position:absolute;left:0;right:0;top:0;height:22%;border-radius:3px;background:var(--accent);opacity:.55;
  transition:top .05s linear}

/* ---- footer note under the reels ---- */
.pf-underline{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin-top:1rem}
.pf-underline p{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);margin:0}

/* ============ MOBILE: tabs, single reel ============ */
@media (max-width:767px){
  .pf{--pf-h:clamp(440px,68vh,720px)}
  .pf-tabs{display:flex}
  .pf-sync{display:none}
  .pf-bar__hint{margin-left:0;width:100%;order:3}
  .pf-cols{grid-template-columns:1fr}
  .pf-col{display:none}
  .pf-col.is-active{display:block}
}

/* no-JS / reduced-motion safety: show both stacked, no sync needed */
.no-js .pf-sync,.no-js .pf-tabs{display:none}
@media (max-width:767px){
  .no-js .pf-col{display:block;margin-bottom:1rem}
}

@media (prefers-reduced-motion:reduce){
  .pf-scroll{scroll-behavior:auto}
  .pf-col__bar{transition:none}
}