/* When2Overlap — Stage Shift Demo (no build) */
.w2o-ss-root{
  --bg: #f8fafc;
  --panel: rgba(255,255,255,0.9);
  --panel2: rgba(255,255,255,0.65);
  --border: rgba(148,163,184,0.40);
  --text: #0f172a;
  --muted: rgba(15,23,42,0.6);
  --primary: #6366f1;
  --ai: #a855f7;
  --mint: rgba(52,211,153,0.25);
  --slot: rgba(255,255,255,0.95);
  --slot-border: rgba(148,163,184,0.30);
  --shadow: 0 20px 80px rgba(15,23,42,0.10);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial;
}
.w2o-ss-root[data-theme="dark"]{
  --bg: #020617;
  --panel: rgba(2,6,23,0.55);
  --panel2: rgba(2,6,23,0.35);
  --border: rgba(148,163,184,0.22);
  --text: #e2e8f0;
  --muted: rgba(226,232,240,0.62);
  --slot: rgba(2,6,23,0.80);
  --slot-border: rgba(148,163,184,0.18);
  --shadow: 0 20px 90px rgba(0,0,0,0.45);
}

.w2o-ss-shell{
  background: var(--bg);
  padding: 18px 14px 24px;
  border-radius: 18px;
}

.w2o-ss-topnav{
  display:flex; align-items:center; justify-content:space-between;
  gap: 12px;
  padding: 10px 12px;
  border:1px solid var(--border);
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--shadow);
  position: sticky;
  top: 12px;
  z-index: 50;
  backdrop-filter: blur(12px);
}
.w2o-ss-brand{ display:flex; gap: 10px; align-items:center; }
.w2o-ss-logo{ width:38px; height:38px; border-radius: 14px; background: linear-gradient(135deg,#6366f1,#8b5cf6); box-shadow: 0 10px 22px rgba(99,102,241,0.30); }
.w2o-ss-title{ font-weight: 900; line-height: 1; }
.w2o-ss-sub{ font-size: 10px; letter-spacing: .18em; font-weight: 800; color: var(--muted); margin-top: 3px; }

.w2o-ss-nav{ display:flex; gap: 8px; align-items:center; flex-wrap: wrap; justify-content:flex-end; }
.w2o-ss-btn{
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  user-select:none;
  transition: transform .12s ease-out, box-shadow .12s ease-out, background .12s ease-out;
}
.w2o-ss-btn:hover{ transform: translateY(-1px); box-shadow: 0 8px 20px rgba(15,23,42,0.10); }
.w2o-ss-btn-primary{
  background: rgba(99,102,241,0.14);
  border-color: rgba(99,102,241,0.40);
  color: var(--text);
}

.w2o-ss-context{
  margin-top: 14px;
  border: 1px solid var(--border);
  background: var(--panel2);
  border-radius: 16px;
  padding: 10px 12px;
  display:flex; gap: 10px; flex-wrap: wrap;
  align-items:center;
}
.w2o-ss-chip{ display:flex; gap: 8px; align-items:center; font-weight: 800; font-size: 12px; }
.w2o-ss-badge{
  border:1px solid var(--border);
  border-radius:999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 900;
  color: var(--muted);
  background: rgba(255,255,255,0.40);
}
.w2o-ss-root[data-theme="dark"] .w2o-ss-badge{ background: rgba(2,6,23,0.35); }

.w2o-ss-main{
  margin-top: 18px;
  max-width: 1280px;
  margin-left:auto; margin-right:auto;
  display:grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items:start;
}
@media (max-width: 980px){
  .w2o-ss-main{ grid-template-columns: 1fr; }
}

.w2o-ss-stage{
  border: 1px solid var(--border);
  background: var(--panel);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 14px 14px 18px;
  overflow: hidden;
}

.w2o-ss-stagehead{
  display:flex; justify-content:space-between; align-items:center; gap: 10px; flex-wrap: wrap;
}

.w2o-ss-datenav{
  display:flex; align-items:center; gap: 6px;
  border:1px solid var(--border);
  background: var(--panel2);
  border-radius: 999px;
  padding: 6px;
}
.w2o-ss-datenav button{ width: 32px; height: 32px; border-radius: 999px; border:0; background: transparent; color: var(--text); cursor:pointer; font-weight: 900;}
.w2o-ss-datenav .w2o-ss-date{ min-width: 110px; text-align:center; font-weight: 900; font-size: 12px;}
.w2o-ss-today{ padding: 4px 10px; border-radius: 999px; background: rgba(99,102,241,0.14); border:1px solid rgba(99,102,241,0.35); font-size: 11px; font-weight: 900; }

.w2o-ss-toggles{ display:flex; gap: 8px; align-items:center; }
.w2o-ss-toggle{
  border:1px solid var(--border);
  background: var(--panel2);
  border-radius: 999px;
  padding: 4px;
  display:flex; gap: 4px;
}
.w2o-ss-toggle button{
  border:0;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 900;
  cursor:pointer;
  color: var(--muted);
  background: transparent;
}
.w2o-ss-toggle button.is-on{
  background: rgba(15,23,42,0.90);
  color: #fff;
}
.w2o-ss-root[data-theme="dark"] .w2o-ss-toggle button.is-on{ background: rgba(255,255,255,0.92); color: #0f172a; }

.w2o-ss-heat{
  margin-top: 12px;
  border:1px solid var(--border);
  background: var(--panel2);
  border-radius: 999px;
  padding: 10px;
  overflow-x:auto;
  scrollbar-width: none;
}
.w2o-ss-heat::-webkit-scrollbar{ display:none; }
.w2o-ss-heatRow{ display:flex; gap: 8px; min-width: max-content; }
.w2o-ss-heatSeg{
  width: 28px;
  height: 10px;
  border-radius: 999px;
  background: rgba(148,163,184,0.35);
  opacity: .9;
  position: relative;
}
.w2o-ss-heatSeg.is-ai{ background: var(--ai); opacity: 1; }
.w2o-ss-heatSeg:hover{ transform: translateY(-1px); }

.w2o-ss-axis{
  margin-top: 10px;
  overflow-x:auto;
  scrollbar-width:none;
}
.w2o-ss-axis::-webkit-scrollbar{ display:none; }
.w2o-ss-axisRow{ display:flex; gap: 8px; padding: 0 2px; min-width: max-content; }
.w2o-ss-axisLbl{ width: 44px; text-align:center; font-size: 11px; font-weight: 900; color: var(--muted); }

.w2o-ss-gridWrap{
  margin-top: 12px;
  border:1px solid var(--border);
  background: rgba(148,163,184,0.08);
  border-radius: 18px;
  padding: 12px;
  overflow-x:auto;
  scrollbar-width:none;
  position: relative;
}
.w2o-ss-gridWrap::-webkit-scrollbar{ display:none; }
.w2o-ss-rows{ position: relative; min-width: max-content; }
.w2o-ss-row{
  display:grid;
  grid-template-columns: 240px auto;
  gap: 12px;
  align-items:center;
  padding: 10px 0;
}
.w2o-ss-cityMeta{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  align-items:flex-start;
}
.w2o-ss-cityName{ font-size: 14px; font-weight: 900; }
.w2o-ss-cityMeta2{ margin-top: 4px; display:flex; gap: 8px; flex-wrap: wrap; color: var(--muted); font-weight: 800; font-size: 11px; }
.w2o-ss-cityTime{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono"; font-size: 18px; font-weight: 900; }
.w2o-ss-cityTimeSub{ font-size: 10px; font-weight: 900; color: var(--muted); text-align:right; margin-top: 2px; }

.w2o-ss-timeRow{ display:flex; gap: 8px; }
.w2o-ss-slot{
  width: 44px; height: 44px;
  border-radius: 16px;
  border: 1px solid var(--slot-border);
  background: var(--slot);
  font-weight: 900;
  font-size: 11px;
  color: var(--text);
  box-shadow: 0 1px 0 rgba(15,23,42,0.04);
  cursor:pointer;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
  user-select:none;
}
.w2o-ss-slot:hover{ transform: scale(1.03); box-shadow: 0 10px 18px rgba(15,23,42,0.08); }
.w2o-ss-slot.is-work{ background: var(--mint); }
.w2o-ss-slot.is-inRange{ outline: 2px solid rgba(99,102,241,0.60); background: rgba(99,102,241,0.10); }

.w2o-ss-overlay{
  position:absolute;
  top: 12px;
  left: 12px;
  height: calc(100% - 24px);
  pointer-events:none;
  z-index: 10;
}
.w2o-ss-band{
  position:absolute;
  border-radius: 18px;
  border:1px solid rgba(99,102,241,0.55);
  background: rgba(99,102,241,0.22);
  box-shadow: 0 0 0 1px rgba(99,102,241,0.10);
  pointer-events:auto;
}
.w2o-ss-handle{
  position:absolute;
  width: 12px;
  height: 56px;
  margin-top: calc(50% - 28px);
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  border:1px solid rgba(99,102,241,0.65);
  box-shadow: 0 8px 16px rgba(15,23,42,0.10);
  cursor: ew-resize;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
  pointer-events:auto;
}
.w2o-ss-root[data-theme="dark"] .w2o-ss-handle{ background: rgba(2,6,23,0.70); }
.w2o-ss-handle:hover{ transform: scale(1.10); box-shadow: 0 0 0 6px rgba(99,102,241,0.12), 0 12px 20px rgba(15,23,42,0.18); }

.w2o-ss-label{
  margin-top: 14px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  border:1px solid var(--border);
  background: var(--panel2);
  border-radius: 18px;
  padding: 10px 12px;
  font-weight: 900;
}
.w2o-ss-label small{ font-size: 11px; font-weight: 900; color: var(--muted); }
.w2o-ss-pill{
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(168,85,247,0.10);
  color: var(--ai);
  font-size: 11px;
  font-weight: 900;
}

.w2o-ss-insight{
  position: sticky;
  top: 94px;
  border:1px solid var(--border);
  background: var(--panel);
  border-radius: 24px;
  box-shadow: var(--shadow);
  padding: 14px;
  height: fit-content;
}
.w2o-ss-insight h3{ margin: 0; font-size: 13px; font-weight: 900; }
.w2o-ss-card{
  margin-top: 10px;
  border:1px solid var(--border);
  border-radius: 18px;
  padding: 12px;
  background: var(--panel2);
}
.w2o-ss-metrics{ display:grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 10px; }
.w2o-ss-metric{
  border-radius: 14px;
  padding: 10px 8px;
  background: rgba(148,163,184,0.10);
  text-align:center;
  font-weight: 900;
  font-size: 11px;
  color: var(--text);
}
.w2o-ss-metric b{ display:block; font-size: 16px; margin-top: 4px; }

/* Mobile: stack + horizontal pills */
@media (max-width: 680px){
  .w2o-ss-main{ grid-template-columns: 1fr; }
  .w2o-ss-row{ grid-template-columns: 1fr; gap: 10px; }
  .w2o-ss-cityMeta{ padding-right: 4px; }
  .w2o-ss-insight{ position: static; }
  .w2o-ss-gridWrap{ padding: 10px; }
  .w2o-ss-axisLbl{ width: 40px; }
  .w2o-ss-slot{ width: 40px; height: 40px; border-radius: 14px; }
  .w2o-ss-stage{ padding: 12px; }
  .w2o-ss-topnav{ border-radius: 18px; }
}