/* Predictive Modeling slices: the real prototype UI with the app shell taken away (see slice.js).
   Nothing here restyles the product. It removes chrome, tightens spacing and lays out the carved pieces. */

html.slice{scrollbar-gutter:auto;overflow-y:auto;scroll-behavior:auto;}
html.slice.slice-embedded{overflow:hidden;}
html.slice:not(.sl-ready) body{opacity:0;}
html.slice body{min-height:0;transition:opacity .18s ease;}
html.slice .app-shell{display:block;min-height:0;}
html.slice .app-main{display:block;}
html.slice .sidebar,
html.slice .sidebar-backdrop,
html.slice .mobile-topbar,
html.slice footer.app-footer,
html.slice #settingsPanel,
html.slice #cmdkBg,
html.slice #pageHome,
html.slice .page-head,
html.slice #mapView{display:none!important;}
html.slice .page.active{animation:none;}
html.slice .page-body{padding:20px;}
html.slice .stat-row{margin-top:0;}
html.slice .stat-row>.card{grid-column:auto!important;}

/* what the page body keeps: the widgets always, the lines list only for the dashboard piece */
html.slice #upsellBanner,
html.slice:not([data-show="dash"]) #listView{display:none!important;}

/* the three widgets: each piece keeps the ones its story needs */
html.slice:is([data-show="dq"],[data-show="street"],[data-show="year"],[data-show="geo"],[data-show="geodup"],[data-show="plan"],[data-show="progress"]) .sl-mat,
html.slice:is([data-show="plan"],[data-show="progress"],[data-show="dash"]) .sl-dq{display:none!important;}
/* two cards side by side only where each has room for its table (the prototype itself stacks them below 960px) */
html.slice .stat-row{grid-template-columns:minmax(0,1fr)!important;}
@media (min-width:961px){
  html.slice:is([data-show="dq"],[data-show="street"],[data-show="year"],[data-show="geo"],[data-show="geodup"],[data-show="dash"]) .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
html.slice:is([data-show="plan"],[data-show="progress"]) .stat-row{grid-template-columns:minmax(0,1fr)!important;max-width:440px;}

/* plan switch (dashboard piece): the prototype's own segmented control */
html.slice .sl-plan{display:none;align-items:center;gap:12px;margin-bottom:16px;}
html.slice[data-show="dash"] .sl-plan{display:flex;}
html.slice .sl-plan-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--n800);}
html.slice .sl-plan .seg-tabs{width:220px;margin-bottom:0;}

/* dashboard list: a few rows and the columns the story reads, so the filter effect is visible without scrolling */
html.slice[data-show="dash"] #listView{margin-top:20px;}
html.slice[data-show="dash"] .toolbar,
html.slice[data-show="dash"] .filter-panel,
html.slice[data-show="dash"] .bulk-bar,
html.slice[data-show="dash"] .tbl-foot{display:none!important;}
html.slice[data-show="dash"] .filter-indicator{border:1px solid var(--n700);border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:none;}
html.slice[data-show="dash"] .filter-indicator.on+.toolbar+.filter-panel+.table-card{border-top-left-radius:0;border-top-right-radius:0;}
html.slice[data-show="dash"] .table-card{margin-top:0;}
html.slice[data-show="dash"] .data-table :is(th,td):nth-child(3),
html.slice[data-show="dash"] .data-table :is(th,td):nth-child(n+7){display:none;}
html.slice[data-show="dash"] #tblBody tr:nth-child(n+4){display:none;}

/* flyouts fill the frame instead of sliding over a page that is not there */
html.slice .slide-panel.xwide,
html.slice .slide-panel.full{width:100%;max-width:none;}

/* geocode: a frame is narrower than the columns need beside a map, so the map sits above the list */
html.slice #geoFlyoutBg .split-body{flex-direction:column;}
html.slice #geoFlyoutBg .split-map{width:100%;height:190px;isolation:isolate;}
html.slice #geoFlyoutBg .map-legend-box{white-space:nowrap;}
html.slice #geoFlyoutBg .split-list{min-height:0;}
html.slice #geoFlyoutBg .geo-cluster-panel{width:100%;}
/* the 78-line cluster: from the prototype's own 640px up, its layout comes back (the map on the left, the cluster panel over the right); the prototype stacks them below 640px.
   Under 896px the panel keeps 70% because its columns (ID, address, two coordinates) need about 540px. */
@media (min-width:40rem){
  html.slice[data-show="geodup"] #geoFlyoutBg .split-body{flex-direction:row;}
  html.slice[data-show="geodup"] #geoFlyoutBg .split-map{width:30%;height:auto;}
  html.slice[data-show="geodup"] #geoFlyoutBg .geo-cluster-panel{width:70%;}
}
@media (min-width:56rem){
  html.slice[data-show="geodup"] #geoFlyoutBg .split-map{width:40%;}
  html.slice[data-show="geodup"] #geoFlyoutBg .geo-cluster-panel{width:60%;}
}

/* program summary: the prototype clips this body, so at frame height the map and list would be squeezed away */
html.slice #vpFlyoutBody{overflow-y:auto!important;}
html.slice #vpFlyoutBody>.split-body{flex:0 0 auto;}

/* the prototype is a desktop app: its table rows need about 700px, so below that they wrap into cards */
@media (max-width:760px){
  html.slice .chk-row,
  html.slice .dr-item-row{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px 14px;}
  html.slice .chk-col-head,
  html.slice .dr-col-head{display:none!important;}
}

/* a phone: the Data Quality rows keep the name and the Review button together, with status and count beneath */
@media (max-width:520px){
  html.slice .dq-head-row{display:none;}
  html.slice .dq-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;}
  html.slice .dq-row::after{content:'';flex-basis:100%;height:0;order:2;}
  html.slice .dq-row>:nth-child(1){order:1;flex:1 1 100px;min-width:100px;}
  html.slice .dq-row>:nth-child(4){order:2;flex:0 0 auto;}
  html.slice .dq-row>:nth-child(2){order:3;flex:0 0 auto;}
  html.slice .dq-row>:nth-child(3){order:4;flex:0 0 auto;}
  html.slice .dq-row>:nth-child(4) .btn{width:auto!important;min-width:72px;padding:0 14px;}
  html.slice .dq-flag-val::after{content:' flagged';font-size:12px;font-weight:600;color:var(--n800);}
}

@media (max-width:640px){
  html.slice .page-body{padding:16px;}
  html.slice[data-show] .stat-row{grid-template-columns:minmax(0,1fr)!important;max-width:none;}
  /* on a phone the flyout pieces start from the checks alone, and the dashboard piece from the plan widget */
  html.slice[data-show="dash"] .sl-mat{display:none!important;}
  html.slice:not(.sl-full):is([data-show="dq"],[data-show="street"],[data-show="year"],[data-show="geo"],[data-show="geodup"]) .sl-planner{display:none!important;}
  html.slice #vpFlyoutBody [style*="repeat(4,1fr)"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  /* geocode on a phone: the list is the point, so the map and the long note step aside and the footer wraps */
  html.slice #geoFlyoutBg .split-map,
  html.slice #geoFlyoutBg #geoContext{display:none!important;}
  html.slice #geoFlyoutBg .slide-foot{flex-wrap:wrap;}
  html.slice #geoFlyoutBg .slide-foot>.tbl-count-txt{flex:1 1 100%;}
  html.slice #geoClusterFoot,
  html.slice #geoClusterFoot>div{flex-wrap:wrap;}
  html.slice[data-show="dash"] .data-table :is(th,td):nth-child(n+6){display:none;}
  html.slice[data-show="dash"] #tblBody tr:nth-child(n+3){display:none;}
}

/* iOS zooms the page when a field under 16px takes focus, and a visitor on a phone would find the whole page enlarged: fields are 16px on a phone (round 16) */
@media (max-width:640px){
  html.slice input,html.slice select,html.slice textarea{font-size:16px!important;}
}