:root{
  --bg:#1e1e1e;          /* figma canvas dark */
  --chrome:#2c2c2c;
  --chrome-2:#383838;
  --line:#3a3a3a;
  --panel:#252525;
  --text:#e8e8e8;
  --text-dim:#9a9a9a;
  --text-faint:#6e6e6e;
  --blue:#0d99ff;
  --blue-dim:#0d99ff;
  --frame-bg:#ffffff;
  --grid:#2a2a2a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
html,body{overscroll-behavior:none}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

/* ---------- Toolbar ---------- */
.toolbar{
  position:fixed;top:0;left:0;right:0;height:48px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(28,28,30,.66);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  backdrop-filter:blur(22px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 30px -12px rgba(0,0,0,.6);
  padding:0 10px;
}
.tb-left{display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{display:flex;align-items:center;padding:0 4px;color:var(--text)}
.brand-mark svg{display:block}
.file-meta{min-width:0}
.file-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-name .chev{color:var(--text-faint);font-size:10px;margin-left:2px}
.file-sub{font-size:11px;color:var(--text-faint);white-space:nowrap}

.tb-center{display:flex;gap:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);padding:4px;border-radius:10px}
.seg{
  font:inherit;font-size:12px;font-weight:500;color:var(--text-dim);
  background:transparent;border:0;border-radius:6px;padding:5px 12px;cursor:pointer;
  white-space:nowrap;transition:.15s;
}
.seg:hover{color:var(--text);background:var(--chrome-2)}
.seg.active{color:#fff;background:var(--blue)}
.seg-map{color:#cfe9ff}
.seg-map.active{background:rgba(13,153,255,.22);color:#fff}

.tb-right{display:flex;align-items:center;gap:4px}
.icon-btn{
  width:30px;height:30px;border:0;border-radius:6px;background:transparent;
  color:var(--text-dim);font-size:18px;line-height:1;cursor:pointer;transition:.12s;
}
.icon-btn:hover{background:var(--chrome-2);color:#fff}
.zoom-label{
  font:inherit;font-size:12px;font-weight:500;color:var(--text-dim);
  background:transparent;border:0;border-radius:6px;padding:6px 8px;cursor:pointer;min-width:52px;
}
.zoom-label:hover{background:var(--chrome-2);color:#fff}
.present-btn{
  font:inherit;font-size:12px;font-weight:600;color:#fff;background:var(--blue);
  border:0;border-radius:6px;padding:7px 14px;cursor:pointer;margin-left:4px;transition:.12s;
}
.present-btn:hover{filter:brightness(1.08)}

/* ---------- Layers panel ---------- */
.layers{
  position:fixed;top:48px;left:0;bottom:0;width:248px;z-index:40;
  background:rgba(26,26,28,.62);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;transition:transform .22s ease;
}
.layers.hidden{transform:translateX(-100%)}
.layers-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 10px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-faint);border-bottom:1px solid var(--line);
}
.collapse-toggle{background:transparent;border:0;color:var(--text-dim);font-size:15px;cursor:pointer;padding:2px 6px;border-radius:4px}
.collapse-toggle:hover{background:var(--chrome-2);color:#fff}
.layers-body{flex:1;overflow-y:auto;padding:6px 0}
.layers-foot{padding:12px 14px;border-top:1px solid var(--line)}
.brand-foot{font-size:13px;font-weight:600}
.by{font-size:11px;color:var(--text-faint);margin-top:2px}

.layer-group{margin-bottom:2px}
.layer-group-head{
  display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;border-radius:6px;
  margin:0 6px;
}
.layer-group-head:hover{background:var(--chrome-2)}
.lg-caret{font-size:9px;color:var(--text-faint);transition:transform .15s;width:10px}
.layer-group.collapsed .lg-caret{transform:rotate(-90deg)}
.lg-swatch{width:12px;height:12px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.lg-name{font-size:12.5px;font-weight:600}
.layer-children{padding-left:6px}
.layer-group.collapsed .layer-children{display:none}
.layer-item{
  display:flex;align-items:center;gap:8px;padding:6px 12px 6px 30px;margin:0 6px;
  font-size:12px;color:var(--text-dim);cursor:pointer;border-radius:6px;
}
.layer-item:hover{background:var(--chrome-2);color:var(--text)}
.layer-item.active{background:rgba(13,153,255,.16);color:#fff}
.li-icon{width:12px;height:12px;flex:none;opacity:.7}
.li-dim{color:var(--text-faint);font-weight:400}

/* layers reveal tab when hidden */
.layers-reveal{
  position:fixed;top:58px;left:8px;z-index:41;width:28px;height:28px;border-radius:6px;
  background:var(--panel);border:1px solid var(--line);color:var(--text-dim);
  font-size:15px;cursor:pointer;
}
.layers-reveal:hover{color:#fff}

/* ---------- Canvas ---------- */
.viewport{
  position:fixed;top:48px;left:248px;right:0;bottom:0;
  overflow:hidden;cursor:grab;
  background:
    radial-gradient(var(--grid) 1px, transparent 1px);
  background-size:24px 24px;background-color:var(--bg);
  touch-action:none;
}
.viewport.panning{cursor:grabbing}
.viewport.full{left:0}
.canvas{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.canvas.animate{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.connectors{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.frames{position:absolute;top:0;left:0}

/* ---------- Sitemap band (world-space sizes ~2.2x so it reads at fit zoom) ---------- */
.sm-head{position:absolute;display:flex;flex-direction:column;gap:8px}
.sm-kicker{font-size:24px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.sm-title{font-size:74px;font-weight:700;letter-spacing:-.015em;color:#fff;line-height:1.08}
.sm-sub{font-size:29px;line-height:1.4;color:var(--text-dim)}
.sm-node{
  position:absolute;display:flex;align-items:center;gap:20px;padding:0 28px;
  background:linear-gradient(180deg,#2f2f31,#262627);
  border:2px solid rgba(255,255,255,.12);border-radius:22px;
  box-shadow:0 2px 0 rgba(255,255,255,.05) inset,0 26px 56px -34px rgba(0,0,0,.8);
  transition:.14s;
}
.sm-node:hover{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue) inset,0 30px 64px -30px rgba(13,153,255,.5);transform:translateY(-2px)}
.sm-dot{width:16px;height:16px;border-radius:50%;background:var(--text-faint);flex:none}
.sm-label{font-size:29px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sm-tag{font-size:19px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--blue);padding:5px 13px;border-radius:11px;margin-left:auto;flex:none}
.sm-tag-goal{background:#0aa46a}
.sm-tag-group{background:#6b5bd1}
.sm-entry{background:linear-gradient(180deg,#16465f,#103445);border-color:rgba(26,188,254,.5)}
.sm-entry .sm-dot{background:#1abcfe}
.sm-goal{background:linear-gradient(180deg,#14463a,#0e3a30);border-color:rgba(10,207,131,.45)}
.sm-goal .sm-dot{background:#0acf83}
.sm-group{background:linear-gradient(180deg,#2a2740,#211f33);border-color:rgba(124,108,224,.4)}
.sm-group .sm-dot{background:#a78bfa}
.sm-group .sm-label{color:var(--text-dim)}
.sm-link{fill:none;stroke:rgba(255,255,255,.22);stroke-width:3.8}
.sm-cta{stroke:rgba(10,207,131,.5);stroke-width:3.4;stroke-dasharray:11 11}
.sm-report{stroke:rgba(245,158,66,.55);stroke-width:3.4;stroke-dasharray:11 11}
.sm-arrow{fill:rgba(255,255,255,.3)}
.sm-arrow-cta{fill:rgba(10,207,131,.6)}
.sm-arrow-report{fill:rgba(245,158,66,.7)}

/* row label / direction header */
.row-label{position:absolute;display:flex;flex-direction:column;gap:10px}
.rl-top{display:flex;align-items:baseline;gap:12px}
.rl-badge{
  font-size:13px;font-weight:800;color:#0d0d0d;background:linear-gradient(180deg,#fff,#d7d7d7);
  width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  align-self:center;box-shadow:0 2px 8px -2px rgba(0,0,0,.6);
}
.rl-name{font-size:30px;font-weight:700;letter-spacing:-.01em}
.rl-tag{font-size:14px;color:var(--text-dim)}
.rl-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rl-swatches{display:flex;gap:6px}
.rl-sw{width:22px;height:22px;border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}
.rl-type{font-size:12.5px;color:var(--text-faint)}
.rl-type b{color:var(--text-dim);font-weight:600}

/* cell reference badge (A1, B2 …) to the left of each concept frame */
.cell-ref{
  position:absolute;width:46px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;letter-spacing:.03em;color:#fff;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  box-shadow:0 2px 10px -3px rgba(0,0,0,.6);
}
.cell-ref::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--cr,var(--blue));
}

/* frame */
.frame{position:absolute}
.frame-title{
  position:absolute;top:-26px;left:2px;font-size:12.5px;color:var(--text-dim);
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.frame-title .ft-ico{width:11px;height:11px;opacity:.6}
.frame-title .ft-dim{color:var(--text-faint);font-size:11px}
.frame-shell{
  position:relative;
  background:var(--frame-bg);border-radius:8px;overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.4),0 18px 40px -12px rgba(0,0,0,.55);
  outline:1px solid rgba(255,255,255,.06);
}
.frame-shell img{display:block;width:100%;height:auto}
/* Poster layer: what a frame shows until a live iframe is worth mounting. */
.frame-poster{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  background:var(--frame-bg);
}
/* live coded screens render inside an iframe; pointer-events off so the canvas keeps panning/zooming */
.frame-shell iframe{
  position:absolute;inset:0;                 /* sits over the poster once mounted */
  display:block;border:0;background:#fff;pointer-events:none;
}
/* graceful "building" placeholder shown until the real screen loads (or if it 404s) */
.frame-fallback{
  position:absolute;inset:0;z-index:2;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:#f3f2ee;color:#8b8b86;font-size:14px;text-align:center;padding:20px;
}
.frame-fallback.is-hidden{display:none}
.frame-fallback::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.65) 50%,transparent 80%);
  transform:translateX(-100%);animation:ff-shimmer 1.7s linear infinite;
}
@keyframes ff-shimmer{to{transform:translateX(100%)}}
.frame-fallback .ff-mark{color:#c3c2bc}
.frame-fallback .ff-mark svg{width:26px;height:26px}
.frame-fallback .ff-title{font-weight:700;color:#5a5a55;font-size:15px}
.frame-fallback .ff-sub{font-size:12px;color:#a7a7a1;letter-spacing:.02em}
.frame.start .frame-title::after{
  content:"FLOW START";font-size:9px;font-weight:700;letter-spacing:.06em;
  color:#fff;background:var(--blue);padding:2px 6px;border-radius:4px;
}
.frame:hover .frame-shell{outline:2px solid var(--blue)}

/* per-frame structure caption */
.frame-spec{position:absolute;top:calc(100% + 12px);left:0}
.fs-desc{font-size:12px;line-height:1.45;color:var(--text-dim);margin-bottom:7px}
.fs-sections{list-style:none;display:flex;flex-wrap:wrap;gap:4px 5px}
.fs-sections li{
  font-size:10px;color:var(--text-faint);background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.07);padding:2px 7px;border-radius:11px;white-space:nowrap;
}

/* mobile note (shown only on small screens) */
.mobile-note{
  display:none;position:fixed;top:56px;left:50%;transform:translateX(-50%);z-index:31;
  background:rgba(13,153,255,.16);border:1px solid rgba(13,153,255,.3);
  color:#cfe9ff;font-size:11.5px;font-weight:500;padding:6px 12px;border-radius:20px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);white-space:nowrap;pointer-events:none;
}

/* hint */
.hint{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:30;
  background:rgba(20,20,20,.85);border:1px solid var(--line);backdrop-filter:blur(6px);
  color:var(--text-dim);font-size:12px;padding:8px 14px;border-radius:8px;
  transition:opacity .5s;pointer-events:none;
}
.hint.gone{opacity:0}

/* connectors style */
.conn-path{fill:none;stroke:var(--blue);stroke-width:2.2;opacity:.9}
.conn-path.tabs{stroke:#1abcfe;opacity:.75;stroke-dasharray:2 6;stroke-linecap:round}
.conn-path.report{stroke:#f59e42;stroke-width:2;opacity:.85;stroke-dasharray:8 6}
.conn-dot{fill:var(--blue)}
.conn-arrow{fill:var(--blue)}
.conn-arrow-report{fill:#f59e42}

.frame{position:absolute;cursor:zoom-in}
.frame .frame-open{
  position:absolute;top:6px;right:6px;z-index:3;opacity:0;transform:translateY(-2px);
  background:rgba(20,20,22,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:6px;
  font-size:10px;font-weight:600;letter-spacing:.04em;padding:4px 8px;transition:.16s;
}
.frame:hover .frame-open{opacity:1;transform:none}

/* ---------- Present mode ---------- */
.present{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(10,11,12,.78);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
}
.present.open{display:flex;flex-direction:column;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.present-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px;flex:none;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);
}
.pb-left{display:flex;align-items:center;gap:12px;min-width:0}
.pb-sw{width:14px;height:14px;border-radius:4px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
.pb-title{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-title .pb-dir{color:var(--text-dim);font-weight:500}
.pb-count{font-size:12px;color:var(--text-dim);background:rgba(255,255,255,.06);padding:4px 10px;border-radius:20px}
.pb-close{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:8px;
  background:rgba(255,255,255,.05);color:#fff;font-size:18px;cursor:pointer;flex:none;
}
.pb-close:hover{background:rgba(255,255,255,.12)}
.present-stage{flex:1;position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:center}
.present-scroll{height:100%;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:16px}
/* live interactive iframe, scaled to fit the stage (scale set inline by JS) */
.pb-frame-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pb-scaler{position:relative;transform-origin:center center;animation:rise .35s cubic-bezier(.22,.61,.36,1);flex:none}
.pb-scaler iframe{
  display:block;border:0;background:#fff;border-radius:14px;pointer-events:auto;
  box-shadow:0 50px 110px -34px rgba(0,0,0,.85);outline:1px solid rgba(255,255,255,.1);
}
.pb-fallback{border-radius:14px}
.pb-wrap{display:flex;gap:26px;align-items:flex-start;justify-content:center;width:100%;padding:0 24px}
.pb-render{width:min(620px,86vw);min-height:60vh;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:14px;background:rgba(255,255,255,.04);border-radius:10px}
.pb-spec{
  width:248px;flex:none;position:sticky;top:0;color:var(--text-dim);
  animation:rise .45s cubic-bezier(.22,.61,.36,1);
}
.pb-spec-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:0 0 7px}
.pb-spec p{font-size:13px;line-height:1.5;color:var(--text);margin:0 0 20px}
.pb-spec ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.pb-spec li{font-size:12px;color:var(--text-dim);padding-left:16px;position:relative}
.pb-spec li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.7}
@media (max-width:920px){ .pb-spec{display:none} .pb-wrap{padding:0} }
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
.present-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);color:#fff;font-size:20px;cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.present-nav:hover{background:rgba(255,255,255,.18);transform:translateY(-50%) scale(1.06)}
.present-nav.prev{left:18px}
.present-nav.next{right:18px}
.present-dots{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:7px;padding:8px 12px;border-radius:20px;
  background:rgba(20,20,22,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);flex-wrap:wrap;max-width:90vw;justify-content:center;
}
.present-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:.15s}
.present-dot:hover{background:rgba(255,255,255,.55)}
.present-dot.on{background:#fff;width:18px;border-radius:4px}

/* ---------- Minimap (compact, chrome-dark, thin outlines) ---------- */
.minimap{
  position:fixed;right:16px;bottom:16px;z-index:35;
  width:200px;border-radius:10px;overflow:hidden;cursor:pointer;padding:6px;
  background:rgba(44,44,46,.82);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.09);box-shadow:0 14px 40px -16px rgba(0,0,0,.7);
}
.minimap svg{display:block;width:100%;height:auto;max-height:180px}
.mm-frame{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.32);stroke-width:1;vector-effect:non-scaling-stroke}
.mm-sm{fill:rgba(255,255,255,.04);stroke:rgba(255,255,255,.2);stroke-width:1;vector-effect:non-scaling-stroke}
.mm-view{fill:rgba(13,153,255,.06);stroke:rgba(13,153,255,.75);stroke-width:1.2;vector-effect:non-scaling-stroke}
@media (max-width:760px){ .minimap{display:none} }

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .file-sub{display:none}
  .layers{width:82vw;max-width:300px;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .viewport{left:0;top:96px}
  .present-btn{padding:7px 11px}
  .file-name{font-size:12px}
  .hint{font-size:11px;max-width:90vw;text-align:center;bottom:10px}
  .mobile-note{display:block;top:104px}

  /* the direction tabs are the whole point of the board: never hide them.
     Second row under the toolbar, scrolls sideways. */
  .tb-center{
    display:flex; position:fixed; z-index:49;
    top:48px; left:0; right:0;
    border:0; border-bottom:1px solid var(--line); border-radius:0;
    background:rgba(28,28,30,.94);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    padding:7px 10px; gap:5px;
    overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tb-center::-webkit-scrollbar{display:none}
  .tb-center .seg{flex:none; font-size:12px; padding:7px 10px}
  .tb-lbl{flex:none}
  .tb-div{flex:none}
}

/* ---------- Design-direction lanes (three flows, side by side) ---------- */
.lane-head{
  position:absolute;
  display:flex; align-items:flex-start; gap:20px;
  pointer-events:none;
}
.lane-head .lh-num{
  font-size:64px; font-weight:800; line-height:.86;
  letter-spacing:-.04em; opacity:.9;
}
.lane-head .lh-name{
  font-size:34px; font-weight:700; color:var(--text);
  letter-spacing:-.02em; line-height:1.1;
}
.lane-head .lh-tag{
  margin-top:8px; font-size:17px; color:var(--text-dim); letter-spacing:.01em;
}
.lane-head .lh-rule{
  position:absolute; left:0; bottom:-26px; height:3px; width:100%; opacity:.5;
}

/* band sub-header inside a direction group in the layers panel */
.layer-sub{
  display:flex; align-items:center; gap:8px;
  padding:9px 12px 5px 30px;
  font-size:10.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--text-faint);
}
.layer-sub .ls-dot{ width:6px; height:6px; border-radius:2px; }

/* toolbar: divider + compare group */
.tb-div{ width:1px; height:18px; background:var(--line); margin:0 4px; }
.tb-lbl{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint); padding:0 2px 0 4px;
}
.seg-cmp{ color:var(--text-dim); }
.seg-cmp:hover{ color:var(--text); }

/* ---------- Compare mode: one screen, three directions ---------- */
.compare{
  position:fixed; inset:0; z-index:120;
  background:rgba(12,12,12,.94);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  display:none; flex-direction:column;
}
.compare.open{ display:flex; }
.cmp-bar{
  height:52px; flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px 0 18px;
  border-bottom:1px solid var(--line); background:var(--chrome);
}
.cmp-left,.cmp-right{ display:flex; align-items:center; gap:12px; }
.cmp-tag{
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:#0c0c0c; background:#C4F82A; padding:4px 8px; border-radius:3px; font-weight:700;
}
.cmp-title{ font-size:14px; font-weight:600; color:var(--text); }
.cmp-hint{ font-size:12px; color:var(--text-faint); }
.cmp-stage{
  flex:1; min-height:0;
  display:flex; align-items:flex-start; justify-content:center;
  gap:28px; padding:26px 22px; overflow:auto;
}
.cmp-col{ display:flex; flex-direction:column; align-items:center; gap:12px; flex:none; }
.cmp-head{ display:flex; align-items:center; gap:9px; }
.cmp-num{ font-size:12px; font-weight:800; letter-spacing:.04em; }
.cmp-name{ font-size:13px; color:var(--text-dim); }
.cmp-shell{
  border-radius:12px; overflow:hidden; background:#fff;
  box-shadow:0 18px 50px -18px rgba(0,0,0,.85);
  flex:none;
}
.cmp-shell iframe{ border:0; display:block; }

/* ---------- Direction tabs: only the active flow is on the board ---------- */
/* One direction, so there is no lane to hide. The old rules keyed visibility to
   four hardcoded direction ids (ticket/soft/warm/modern); anything else matched
   nothing and the whole board rendered blank. */
.frames > .frame{ display:block; }
.frames > .row-label{ display:flex; }
.frames > .lane-head{ display:flex; }
.connectors .conn-path{ display:block; }

/* ---------- Direction tabs: label + abbreviation ---------- */
.seg-dir{ display:inline-flex; align-items:baseline; gap:6px; }
.seg-dir b{ font-weight:800; opacity:.65; font-size:11px; letter-spacing:.02em; }
.seg-dir.active b{ opacity:1; }
.seg-abbr{ display:none; }

/* Compare button, floating. Desktop uses the toolbar group instead. */
.cmp-fab{
  position:absolute; z-index:40; right:16px; bottom:74px;
  display:none; align-items:center; gap:8px;
  padding:11px 15px; border-radius:999px;
  background:var(--blue); color:#fff; border:0;
  font-size:14px; font-weight:600; letter-spacing:.01em;
  box-shadow:0 10px 28px -8px rgba(13,153,255,.75);
  cursor:pointer;
}
.cmp-fab svg{ width:17px; height:17px; }

@media (max-width:760px){
  /* Only the three designs live in the tab row. Site map is in the panel,
     Compare is the floating button. */
  .tb-center{ gap:6px; padding:7px 10px; overflow:visible; }
  .tb-center .seg-map,
  .tb-center .tb-div,
  .tb-center .tb-lbl,
  .tb-center .seg-cmp{ display:none; }
  .seg-dir{
    flex:1 1 0; min-width:0; justify-content:center;
    font-size:13px; padding:9px 4px;
  }
  .seg-full{ display:none; }
  .seg-abbr{ display:inline; }
  .cmp-fab{ display:inline-flex; }
  .hint{ display:none; }
}

/* ---------- Mobile design picker ---------- */
.dirbar{ display:none; }
@media (max-width:760px){
  /* the tab row is replaced by a picker that always NAMES the current design */
  .tb-center{ display:none; }

  .dirbar{
    position:fixed; z-index:49; top:48px; left:0; right:0;
    display:flex; align-items:center; gap:10px;
    padding:8px 12px;
    background:rgba(28,28,30,.94);
    -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);
  }
  .dirbar-lbl{
    font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
    color:var(--text-faint); flex:none;
  }
  .dirbar-field{ position:relative; flex:1; min-width:0; }
  .dirbar-field select{
    -webkit-appearance:none; appearance:none;
    width:100%; padding:10px 32px 10px 12px;
    font-family:inherit; font-size:16px;   /* 16px+ so iOS never zooms */
    font-weight:600; color:#fff;
    background:var(--chrome-2); border:1px solid var(--line); border-radius:8px;
  }
  .dirbar-field select:focus{ outline:2px solid var(--blue); outline-offset:1px; }
  .dirbar-chev{
    position:absolute; right:11px; top:50%; transform:translateY(-50%);
    pointer-events:none; color:var(--text-dim); font-size:12px;
  }
  .dirbar-map{
    flex:none; width:40px; height:40px; border-radius:8px;
    background:var(--chrome-2); border:1px solid var(--line);
    color:#cfe9ff; font-size:15px; cursor:pointer;
  }
  .viewport{ top:105px; }
  .mobile-note{ top:113px; }
}

@media (max-width:760px){
  /* compare swipes: one design at a time, at a size you can read */
  .cmp-stage{
    justify-content:flex-start;
    scroll-snap-type:x mandatory;
    gap:20px; padding:20px 16px;
  }
  .cmp-col{ scroll-snap-align:center; }
  .cmp-hint{ display:none; }
  .cmp-title{ font-size:12.5px; }
}