/* Slice mode: a real prototype page with the app shell taken away (see slice.js).
   Nothing here restyles the product; it only removes chrome and tightens spacing. */

html.slice{scrollbar-gutter:auto;}
html.slice.slice-embedded{overflow:hidden;}
html.slice body{min-height:0;}
html.slice .app-shell,
html.slice .app-main{display:block;min-height:0;}
html.slice .sidebar,
html.slice .sidebar-backdrop,
html.slice .mobile-topbar,
html.slice .app-footer,
html.slice .skip-link{display:none!important;}
html.slice #main{display:block;flex:none;padding:0;margin:0;}
html.slice .sl-hide{display:none!important;}

html.slice .page-head{padding:20px 20px 0;}
html.slice .page-body{padding:20px;}
html.slice .page-head + .page-body{padding-top:16px;}

/* the settings panels are toggled by the side nav; in a slice the kept ones are always shown */
html.slice .settings-layout{display:block;}
html.slice .set-panel.sl-keep,
html.slice .set-panel.sl-path{display:flex!important;flex-direction:column;gap:20px;animation:none;}
html.slice[data-show="thresholds"] .page-head,
html.slice[data-show="completion"] .page-head,
html.slice[data-show="reminders"] .page-head,
html.slice[data-show="review"] .page-head{padding-bottom:0;}
html.slice[data-show="thresholds"] .page-head-row,
html.slice[data-show="completion"] .page-head-row,
html.slice[data-show="reminders"] .page-head-row,
html.slice[data-show="review"] .page-head-row{justify-content:flex-end;}

/* dashboard: brief on top, one month-bound row beneath it */
html.slice .home-grid{grid-template-columns:minmax(0,1fr);}
html.slice .stat-row>*{grid-column:auto!important;}
html.slice[data-show="brief"] .section-head{margin-top:24px;}
@media (min-width:641px){
  html.slice[data-show="brief"] .stat-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;}
}

/* one row of three cards where the prototype would stack them, for the small KPI strips */
@media (min-width:641px){
  html.slice[data-show="strip"] .stat-row,
  html.slice[data-show="review"] .stat-row,
  html.slice[data-show="all"] .stat-row{grid-template-columns:repeat(3,minmax(0,1fr));}
}
html.slice .detail-grid{grid-template-columns:minmax(0,1fr);}
@media (max-width:640px){
  html.slice[data-show="brief"] #calendarCard{display:none;}
}

/* results: a single card, whatever the width */
html.slice .grid-2{grid-template-columns:minmax(0,1fr);}

/* the two notification layers sit side by side so switching one on the left shows on the right */
html.slice[data-show="layers"] .cfg-toggle{display:none;}
@media (max-width:640px){
  html.slice .sl-more{display:none;}
  html.slice[data-show="review"] #dataKpis{display:none;}
}
@media (max-width:720px){
  html.slice[data-show="layers"] .sl-more{display:none;}
}
@media (min-width:721px){
  html.slice[data-show="layers"] #settingsPanels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;}
}

/* completion stage stepper: seven labels cannot sit in one row on a phone, so the stages become a vertical list */
@media (max-width:560px){
  html.slice .status-track{display:none;}
  html.slice .status-list{flex-direction:column;align-items:stretch;gap:2px;}
  html.slice .status-step,
  html.slice .status-step:first-child,
  html.slice .status-step:last-child{flex:none;flex-direction:row;align-items:center;gap:12px;padding:8px 2px;}
  html.slice .status-name,
  html.slice .status-step:first-child .status-name,
  html.slice .status-step:last-child .status-name{font-size:14px;text-align:left;white-space:normal;}
}