/* Chat Detective — homepage balance and readable mode selector.
   Geometry is shared by the header and hero; the animated mist is untouched. */
body[data-view="home"] .site-header{
  width:min(100%,1280px);
  max-width:1280px;
  height:68px;
  padding:0 18px;
}
body[data-view="home"] .desktop-nav{
  gap:clamp(22px,2.2vw,32px);
}
body[data-view="home"] .account-controls{
  gap:10px;
}

/* The 18px inner header gutter matches half the hero width difference. */
body[data-view="home"] .cde-layout{
  width:min(100%,1244px);
  grid-template-columns:minmax(0,1fr) minmax(0,620px);
  gap:clamp(44px,4.9vw,70px);
}
body[data-view="home"] .cde-copy{padding:7px 0}
body[data-view="home"] .cde-preview{
  width:100%;
  max-width:620px;
  justify-self:end;
}

/* A small, functional segmented mode picker; upcoming modes stay non-clickable. */
body[data-view="home"] .cde-mode-picker{
  width:max-content;
  max-width:100%;
  margin-top:28px;
  scroll-margin-top:105px;
}
body[data-view="home"] .cde-mode-picker-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  min-height:15px;
  margin:0 1px 9px;
  color:#d7bbc9;
  font:750 10px/1.3 Inter,'Segoe UI',system-ui,sans-serif;
  letter-spacing:.19em;
}
body[data-view="home"] .cde-mode-picker-label small{
  color:rgba(185,181,206,.76);
  font-size:11px;
  font-weight:500;
  letter-spacing:0;
}
body[data-view="home"] .cde-mode-picker .cde-mode-links{
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:4px;
  margin:0;
  padding:5px;
  width:max-content;
  max-width:100%;
  min-height:53px;
  border:1px solid rgba(243,209,236,.31);
  border-radius:14px;
  background:
    radial-gradient(ellipse 72% 120% at 10% 0%,rgba(255,228,247,.13),transparent 78%),
    linear-gradient(114deg,rgba(35,29,52,.54),rgba(20,24,48,.46) 52%,rgba(99,36,74,.23));
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
  box-shadow:
    0 10px 28px rgba(4,4,20,.18),
    inset 0 1px rgba(255,252,255,.11),
    inset 0 -1px rgba(233,111,162,.10);
}
body[data-view="home"] .cde-mode-picker .cde-mode-links>*{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  gap:7px;
  min-height:41px;
  margin:0;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:#b9b8c9;
  font:650 12px/1.2 Inter,'Segoe UI',system-ui,sans-serif;
  white-space:nowrap;
  text-decoration:none;
  transition:color .25s ease,background .25s ease,border-color .25s ease,box-shadow .26s ease,transform .26s ease;
}
body[data-view="home"] .cde-mode-picker .cde-mode-links>*:not(:last-child)::after{
  content:none;
}
body[data-view="home"] .cde-mode-picker .cde-mode-links svg{
  width:15px;
  height:15px;
  flex:none;
  color:#a8a5bb;
}
body[data-view="home"] .cde-mode-picker .cde-mode-links a.is-current{
  color:#fff;
  border-color:rgba(255,182,220,.53);
  background:linear-gradient(122deg,rgba(254,168,213,.22),rgba(176,54,103,.22) 65%,rgba(245,102,170,.17));
  box-shadow:inset 0 1px rgba(255,248,255,.21),0 3px 12px rgba(226,62,130,.17);
}
body[data-view="home"] .cde-mode-picker .cde-mode-links a.is-current::before{
  content:none;
}
body[data-view="home"] .cde-mode-picker .cde-mode-links a svg{color:#ff95b9}
body[data-view="home"] .cde-mode-picker .cde-mode-links a:hover{
  border-color:rgba(255,208,233,.71);
  background:linear-gradient(122deg,rgba(255,195,226,.27),rgba(195,63,127,.28));
  box-shadow:inset 0 1px rgba(255,250,255,.26),0 4px 17px rgba(233,61,124,.24);
  color:#fff;
  transform:translateY(-1px);
}
body[data-view="home"] .cde-mode-picker .cde-mode-unavailable{
  color:#a4a5b7;
  cursor:help;
}
body[data-view="home"] .cde-mode-picker .cde-mode-unavailable:hover{
  color:#ccc3d6;
  background:rgba(211,167,211,.08);
}
body[data-view="home"] .cde-mode-picker .cde-mode-unavailable small{
  padding:3px 5px;
  border:1px solid rgba(202,177,210,.15);
  border-radius:5px;
  background:rgba(196,159,212,.075);
  color:#b2a7bd;
  font:550 9px/1 Inter,'Segoe UI',system-ui,sans-serif;
}

@media(max-width:1200px){
  body[data-view="home"] .cde-mode-picker .cde-mode-unavailable small{display:none}
  body[data-view="home"] .cde-mode-picker .cde-mode-links>*{padding:0 10px}
}
@media(max-width:1100px){
  body[data-view="home"] .cde-layout{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:clamp(26px,3.6vw,42px);
  }
  body[data-view="home"] .cde-mode-picker-label small{display:none}
  body[data-view="home"] .cde-mode-picker .cde-mode-links{
    gap:2px;
    padding:4px;
  }
  body[data-view="home"] .cde-mode-picker .cde-mode-links>*{
    padding:0 8px;
    gap:5px;
    font-size:11px;
  }
  body[data-view="home"] .cde-mode-picker .cde-mode-links svg{width:13px;height:13px}
}
@media(max-width:780px){
  body[data-view="home"] .site-header{
    height:58px;
    padding:0 10px;
  }
  body[data-view="home"] .cde-layout{
    grid-template-columns:minmax(0,1fr);
    max-width:650px;
    gap:35px;
  }
  body[data-view="home"] .cde-copy{padding:0}
  body[data-view="home"] .cde-preview{
    justify-self:center;
    max-width:620px;
  }
  body[data-view="home"] .cde-mode-picker{margin-top:25px}
  body[data-view="home"] .cde-mode-picker-label small{display:inline}
}
@media(max-width:520px){
  body[data-view="home"] .site-header{padding:0 5px}
  body[data-view="home"] .cde-mode-picker{width:100%;margin-top:24px}
  body[data-view="home"] .cde-mode-picker-label{margin-bottom:8px}
  body[data-view="home"] .cde-mode-picker-label small{display:none}
  body[data-view="home"] .cde-mode-picker .cde-mode-links{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    width:100%;
    gap:3px;
  }
  body[data-view="home"] .cde-mode-picker .cde-mode-links>*{
    min-width:0;
    padding:0 4px;
    font-size:10.5px;
    line-height:1.15;
  }
  body[data-view="home"] .cde-mode-picker .cde-mode-links svg{display:none}
}
@media(prefers-reduced-motion:reduce){
  body[data-view="home"] .cde-mode-picker .cde-mode-links>*{transition:none!important}
}