/* ============================================================
   Lux Replay — replay.css
   Additive styles for the player, inspector, heatmaps, funnels,
   auth, and project switcher. Loaded AFTER lux.css. On-brand:
   fine #ececec borders, serif headings, mono details, restrained
   150–300ms motion. Does not redefine lux.css.
   ============================================================ */

/* ---------- Generic empty / error / loading ---------- */
.lux-empty{
  border:1px dashed #e2e2e2;background:#fff;
  padding:40px 28px;text-align:center;color:#7a7a7a;
}
.lux-empty-title{
  font-family:'Cormorant Garamond',Georgia,serif;
  font-weight:600;font-size:22px;color:#0a0a0a;letter-spacing:-.01em;margin-bottom:6px;
}
.lux-empty-body{font-size:13px;color:#7a7a7a;max-width:48ch;margin:0 auto}
.lux-error-state{border-color:#e6c4b8}

/* ---------- Toast ---------- */
.lux-toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#0a0a0a;color:#fff;padding:10px 18px;font-size:12px;
  letter-spacing:.06em;z-index:100;opacity:0;
  transition:opacity .2s,transform .2s;pointer-events:none;
}
.lux-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Auth (login / signup) ---------- */
.auth-wrap{
  position:relative;z-index:2;min-height:100vh;
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.auth-card{
  width:100%;max-width:400px;background:#fff;border:1px solid #ececec;
  padding:36px 34px;
}
.auth-card .auth-logo{display:flex;justify-content:center;margin-bottom:22px}
.auth-card .auth-logo img{height:46px;width:auto}
.auth-card h1{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:30px;letter-spacing:-.015em;text-align:center;margin-bottom:6px;
}
.auth-card h1 em{font-style:italic;font-weight:500}
.auth-card .auth-sub{text-align:center;color:#7a7a7a;font-size:13px;margin-bottom:24px}
.auth-field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.auth-field label{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7a7a7a}
.auth-field input{
  border:1px solid #e2e2e2;background:#fff;padding:10px 12px;
  font:inherit;font-size:13px;
}
.auth-field input:focus{outline:0;border-color:#0a0a0a}
.auth-card .btn{width:100%;justify-content:center;margin-top:6px}
.auth-toggle{text-align:center;font-size:12px;color:#7a7a7a;margin-top:18px}
.auth-toggle button{
  background:none;border:0;color:#0a0a0a;cursor:pointer;font:inherit;
  border-bottom:1px solid #0a0a0a;padding:0;
}
.auth-msg{
  font-size:12px;padding:8px 12px;margin-bottom:14px;border:1px solid #e6c4b8;
  color:#b03a2a;background:#fdf6f3;
}

/* ---------- Sidebar: project switcher ---------- */
.proj-switch{padding:0 12px 16px;border-bottom:1px solid #ececec;margin-bottom:14px}
.proj-switch-label{
  padding:0 12px 6px;font-size:10px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:#9a9a9a;
}
.proj-select{
  width:100%;border:1px solid #e2e2e2;background:#fff;padding:8px 10px;
  font:inherit;font-size:13px;color:#0a0a0a;cursor:pointer;
}
.proj-select:focus{outline:0;border-color:#0a0a0a}
.proj-key{
  margin-top:8px;display:flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#5a5a5a;
}
.proj-key .key-val{
  flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border:1px solid #f1f1f1;background:#fafafa;padding:4px 6px;
}
.proj-key .copy-btn{
  border:1px solid #e2e2e2;background:#fff;cursor:pointer;
  padding:4px 7px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#3a3a3a;
}
.proj-key .copy-btn:hover{border-color:#0a0a0a;color:#0a0a0a}
.proj-actions{margin-top:8px;display:flex;gap:6px}
.proj-actions .proj-action{
  flex:1;border:1px solid #e2e2e2;background:#fff;cursor:pointer;
  padding:5px 7px;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#5a5a5a;
}
.proj-actions .proj-action:hover{border-color:#0a0a0a;color:#0a0a0a}
.proj-new{
  margin-top:8px;width:100%;border:1px dashed #d2d2d2;background:transparent;
  padding:7px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#5a5a5a;cursor:pointer;
}
.proj-new:hover{border-color:#0a0a0a;color:#0a0a0a}

/* ---------- Filters bar ---------- */
.filters-bar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px;
}
.filters-bar .search{width:auto;flex:1;min-width:200px}
.filters-bar .field-date{
  border:1px solid #e2e2e2;background:#fff;padding:7px 10px;font:inherit;font-size:12px;color:#3a3a3a;
}
.filters-bar .field-date:focus{outline:0;border-color:#0a0a0a}
.filters-bar .field-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a}

/* pagination */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;font-size:12px;color:#7a7a7a;
}
.pager .pager-btns{display:flex;gap:6px}
.pager button{
  border:1px solid #e2e2e2;background:#fff;cursor:pointer;
  padding:6px 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#3a3a3a;font-family:inherit;
}
.pager button:hover:not(:disabled){border-color:#0a0a0a;color:#0a0a0a}
.pager button:disabled{opacity:.4;cursor:not-allowed}

/* ---------- Replay player ---------- */
.player-grid{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
@media (max-width:1100px){.player-grid{grid-template-columns:1fr}}

.player-frame{
  background:#fff;border:1px solid #ececec;padding:14px;overflow:hidden;
}
.player-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:12px;padding:9px 12px;
  border:1px solid #e3c4ad;background:#fbf2ea;color:#9a4a22;
  font-size:12px;letter-spacing:.01em;
}
.player-banner[hidden]{display:none}
.player-banner-x{
  border:1px solid currentColor;background:transparent;color:inherit;
  padding:3px 9px;font:inherit;font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;
}
.player-banner-x:hover{background:#9a4a22;color:#fff}
.player-stage{
  background:#0a0a0a;min-height:300px;display:flex;align-items:center;justify-content:center;
}
.player-stage .rr-player{margin:0 auto}

.player-meta{
  display:flex;flex-wrap:wrap;gap:18px;margin-bottom:16px;
  font-size:12px;color:#5a5a5a;
}
.player-meta .pm-k{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9a9a9a;margin-right:6px}
.player-meta .mono{color:#3a3a3a}

/* ---------- Side panel (inspector / console / network) ---------- */
.side-panel{
  background:#fff;border:1px solid #ececec;display:flex;flex-direction:column;
  height:560px;max-height:78vh;
}
.panel-tabs{display:flex;border-bottom:1px solid #ececec}
.panel-tab{
  flex:1;background:transparent;border:0;border-bottom:2px solid transparent;
  padding:11px 8px;cursor:pointer;font-family:inherit;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#7a7a7a;
  transition:color .15s,border-color .15s;
}
.panel-tab:hover{color:#0a0a0a}
.panel-tab.active{color:#0a0a0a;border-bottom-color:#d8613c}
.panel-tab .cnt{color:#9a9a9a;margin-left:5px;font-family:'JetBrains Mono',monospace}
.panel-body{flex:1;overflow-y:auto;padding:4px 0}

.evt-row{
  display:grid;grid-template-columns:54px 78px 1fr;gap:8px;align-items:start;
  padding:7px 14px;border-bottom:1px solid #f5f5f5;cursor:pointer;
  font-size:12px;transition:background .12s;
}
.evt-row:hover{background:#fafafa}
.evt-row.is-past{opacity:1}
.evt-row.is-future{opacity:.42}
.evt-row .evt-t{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#9a9a9a;padding-top:1px}
.evt-row .evt-kind{
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  padding:2px 6px;border:1px solid #e2e2e2;color:#5a5a5a;justify-self:start;white-space:nowrap;
}
.evt-row .evt-kind.k-click{color:#d8613c;border-color:#e6c4b8}
.evt-row .evt-kind.k-nav{color:#2a6a3a;border-color:#bcd6c2}
.evt-row .evt-kind.k-input{color:#3a6aaa;border-color:#bccde0}
.evt-row .evt-kind.k-error{color:#b03a2a;border-color:#e6c4b8}
.evt-row .evt-kind.k-mutation{color:#7a7a7a}
.evt-row .evt-desc{color:#3a3a3a;word-break:break-word;line-height:1.45}
.evt-row .evt-desc .mono{color:#5a5a5a}

.con-row{
  display:grid;grid-template-columns:54px 1fr;gap:8px;align-items:start;
  padding:7px 14px;border-bottom:1px solid #f5f5f5;font-size:12px;
}
.con-row.is-future{opacity:.42}
.con-row .con-t{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#9a9a9a;padding-top:1px}
.con-row .con-msg{font-family:'JetBrains Mono',monospace;font-size:11px;word-break:break-word;line-height:1.5;color:#3a3a3a}
.con-row.lvl-error .con-msg{color:#b03a2a}
.con-row.lvl-warn .con-msg{color:#b07a2a}
.con-row.lvl-info .con-msg{color:#3a6aaa}

.net-row{
  display:grid;grid-template-columns:54px 46px 1fr 56px;gap:8px;align-items:start;
  padding:7px 14px;border-bottom:1px solid #f5f5f5;font-size:11.5px;
}
.net-row.is-future{opacity:.42}
.net-row .net-t{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#9a9a9a;padding-top:1px}
.net-row .net-method{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#5a5a5a}
.net-row .net-url{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#3a3a3a;word-break:break-all}
.net-row .net-status{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-align:right}
.net-row .net-status.ok{color:#2a6a3a}
.net-row .net-status.bad{color:#b03a2a}

/* ---------- Heatmaps ---------- */
.heat-stage{position:relative;background:#fff;border:1px solid #ececec;overflow:hidden}
.heat-canvas{display:block;width:100%}
.scroll-chart{display:flex;flex-direction:column;gap:6px}
.scroll-bucket{display:grid;grid-template-columns:54px 1fr 52px;gap:10px;align-items:center;font-size:12px}
.scroll-bucket .sb-depth{font-family:'JetBrains Mono',monospace;font-size:11px;color:#7a7a7a;text-align:right}
.scroll-bucket .sb-bar{height:14px;background:#f1f1f1;position:relative;overflow:hidden}
.scroll-bucket .sb-bar i{position:absolute;left:0;top:0;bottom:0;background:#d8613c;display:block}
.scroll-bucket .sb-val{font-family:'JetBrains Mono',monospace;font-size:11px;color:#5a5a5a}
.heat-legend{display:flex;align-items:center;gap:10px;font-size:11px;color:#7a7a7a;letter-spacing:.06em}
.heat-legend .grad{width:120px;height:10px;background:linear-gradient(90deg,rgba(216,97,60,.15),#d8613c)}

/* ---------- Funnels ---------- */
.funnel-steps{display:flex;flex-direction:column;gap:14px}
.funnel-step{display:grid;grid-template-columns:1fr;gap:6px}
.funnel-step .fs-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.funnel-step .fs-label{font-weight:500;font-size:13.5px}
.funnel-step .fs-reached{font-family:'JetBrains Mono',monospace;font-size:12px;color:#3a3a3a}
.funnel-step .fs-bar{height:22px;background:#f1f1f1;position:relative;overflow:hidden}
.funnel-step .fs-bar i{position:absolute;left:0;top:0;bottom:0;background:#0a0a0a;display:block;transition:width .3s}
.funnel-step .fs-drop{font-size:11px;color:#b03a2a;letter-spacing:.04em}
.funnel-step .fs-samples{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.funnel-step .fs-samples a{
  font-family:'JetBrains Mono',monospace;font-size:10px;color:#3a3a3a;
  border:1px solid #e2e2e2;padding:2px 7px;text-decoration:none;
}
.funnel-step .fs-samples a:hover{border-color:#0a0a0a}
.funnel-step .fs-samples .fs-sample::before{content:'\25B6';font-size:7px;margin-right:5px;color:#9a9a9a;vertical-align:middle}
.funnel-step .fs-samples .fs-sample:hover::before{color:#d8613c}

.step-editor{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.step-editor .se-row{display:grid;grid-template-columns:1fr 90px 1.4fr 32px;gap:8px;align-items:center}
.step-editor .se-row input,.step-editor .se-row select{
  border:1px solid #e2e2e2;background:#fff;padding:7px 9px;font:inherit;font-size:12px;
}
.step-editor .se-row input:focus,.step-editor .se-row select:focus{outline:0;border-color:#0a0a0a}
.step-editor .se-del{
  border:1px solid #e2e2e2;background:#fff;cursor:pointer;color:#b03a2a;font-size:14px;line-height:1;padding:6px;
}
.step-editor .se-del:hover{border-color:#b03a2a}
.step-add{
  align-self:flex-start;border:1px dashed #d2d2d2;background:transparent;cursor:pointer;
  padding:7px 12px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#5a5a5a;
}
.step-add:hover{border-color:#0a0a0a;color:#0a0a0a}

/* generic inline form field */
.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.inline-form input{border:1px solid #e2e2e2;background:#fff;padding:9px 11px;font:inherit;font-size:13px;min-width:200px}
.inline-form input:focus{outline:0;border-color:#0a0a0a}

/* masking docs list */
.mask-docs{list-style:none;display:flex;flex-direction:column;gap:0}
.mask-docs li{display:grid;grid-template-columns:140px 1fr;gap:14px;padding:12px 0;border-bottom:1px solid #f1f1f1;font-size:13px;align-items:baseline}
.mask-docs li:last-child{border-bottom:0}
.mask-docs code{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#d8613c}

.copy-block{position:relative}
.copy-block .copy-btn{
  position:absolute;top:10px;right:10px;
  border:1px solid #3a3a3a;background:#0a0a0a;color:#e8e8e8;cursor:pointer;
  padding:4px 10px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
}
.copy-block .copy-btn:hover{border-color:#d8613c;color:#fff}

/* ---------- Modal (dialogs) ---------- */
.lux-modal-backdrop{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:flex-start;justify-content:center;
  padding:24px;
  background:rgba(15,15,15,.42);
  backdrop-filter:saturate(120%) blur(3px);
  -webkit-backdrop-filter:saturate(120%) blur(3px);
  opacity:0;transition:opacity .16s ease;
}
.lux-modal-backdrop.show{opacity:1}
.lux-modal{
  width:100%;max-width:420px;margin-top:14vh;
  background:#fff;border:1px solid #ececec;
  box-shadow:0 24px 60px -28px rgba(15,15,15,.45);
  padding:30px 30px 26px;
  transform:translateY(-8px) scale(.985);
  transition:transform .16s ease;
}
.lux-modal-backdrop.show .lux-modal{transform:translateY(0) scale(1)}
.lux-modal h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;
  font-size:26px;letter-spacing:-.015em;margin-bottom:4px;
}
.lux-modal h2 em{font-style:italic;font-weight:500}
.lux-modal .modal-sub{color:#7a7a7a;font-size:13px;margin-bottom:22px}
.lux-modal .modal-field{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.lux-modal .modal-field label{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#7a7a7a;
}
.lux-modal .modal-field input{
  border:1px solid #e2e2e2;background:#fff;padding:10px 12px;font:inherit;font-size:13px;
}
.lux-modal .modal-field input:focus{outline:0;border-color:#0a0a0a}
/* Base error/validation message — also used inline in views (heatmaps, funnels). */
.modal-msg{
  font-size:12px;padding:8px 12px;border:1px solid #e6c4b8;
  color:#b03a2a;background:#fdf6f3;
}
.lux-modal .modal-msg{margin-top:12px}
.lux-modal .modal-actions{
  display:flex;justify-content:flex-end;gap:10px;margin-top:24px;
}
.lux-modal .modal-actions .btn{min-width:96px;justify-content:center}

/* ---------- Skeleton loading rows ---------- */
.tbl-skltn td{padding:14px 12px}
.skltn{
  display:block;height:11px;border-radius:2px;
  background:linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%);
  background-size:400% 100%;animation:skltn 1.3s ease infinite;
}
@keyframes skltn{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.skltn{animation:none}}

/* ---------- Clear-filters chip ---------- */
.chip-clear{border-style:dashed;color:#7a7a7a}

/* ---------- Copy button confirmed state ---------- */
.copy-btn.ok,.proj-key .copy-btn.ok{border-color:#2a6a3a;color:#2a6a3a}