/* 2026-10-04 — compact workspace: speed-first mobile operations */

body.shell-app #appShell{
  --compact-gap:8px;
  --compact-radius:15px;
}

@media(max-width:680px){
  body.shell-app #appShell .view.active{
    padding-top:0!important;
  }

  /* Page headers: keep the action, remove the lecture. */
  body.shell-app #appShell .view.active>.section-intro{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin:0 0 8px!important;
    min-height:42px!important;
  }
  body.shell-app #appShell .view.active>.section-intro>div{
    min-width:0!important;
  }
  body.shell-app #appShell .view.active>.section-intro .eyebrow{
    display:none!important;
  }
  body.shell-app #appShell .view.active>.section-intro h2{
    margin:0!important;
    font-size:23px!important;
    line-height:1!important;
    letter-spacing:-.04em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  body.shell-app #appShell .view.active>.section-intro p:not(.eyebrow){
    display:none!important;
  }
  body.shell-app #appShell .view.active>.section-intro>.primary-btn,
  body.shell-app #appShell .view.active>.section-intro>.ghost-btn,
  body.shell-app #appShell .view.active>.section-intro .section-actions button{
    min-height:40px!important;
    padding:8px 11px!important;
    border-radius:12px!important;
    font-size:10px!important;
    white-space:nowrap!important;
  }
  body.shell-app #appShell .view.active>.section-intro .section-actions{
    display:flex!important;
    gap:5px!important;
    flex-wrap:nowrap!important;
  }

  /* Generic panels and cards: dense, readable, still finger-friendly. */
  body.shell-app #appShell .view.active .panel{
    border-radius:var(--compact-radius)!important;
  }
  body.shell-app #appShell .view.active .panel-head,
  body.shell-app #appShell .view.active .panel-heading-row{
    gap:8px!important;
    margin-bottom:8px!important;
  }
  body.shell-app #appShell .view.active .panel-head h3,
  body.shell-app #appShell .view.active .panel-heading-row h3{
    margin:0!important;
    font-size:16px!important;
    line-height:1.05!important;
    letter-spacing:-.025em!important;
  }
  body.shell-app #appShell .view.active .panel-head .eyebrow,
  body.shell-app #appShell .view.active .panel-heading-row .eyebrow{
    display:none!important;
  }
  body.shell-app #appShell .view.active .panel-note{
    font-size:9.5px!important;
    line-height:1.3!important;
  }
  body.shell-app #appShell .view.active .pill,
  body.shell-app #appShell .view.active .status{
    min-height:0!important;
    padding:5px 8px!important;
    font-size:8.5px!important;
    line-height:1.05!important;
  }

  /* Compact metrics stay on one horizontal row. */
  body.shell-app #appShell .view.active .metric-grid.compact{
    display:flex!important;
    gap:6px!important;
    margin:0 0 8px!important;
    padding:0 0 2px!important;
    overflow-x:auto!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  body.shell-app #appShell .view.active .metric-grid.compact::-webkit-scrollbar{display:none}
  body.shell-app #appShell .view.active .metric-grid.compact .metric-card{
    flex:0 0 104px!important;
    min-width:104px!important;
    min-height:68px!important;
    padding:9px 10px!important;
    border-radius:13px!important;
    scroll-snap-align:start;
  }
  body.shell-app #appShell .view.active .metric-grid.compact .metric-card span{
    font-size:8px!important;
  }
  body.shell-app #appShell .view.active .metric-grid.compact .metric-card strong{
    margin:4px 0 1px!important;
    font-size:22px!important;
    line-height:1!important;
  }
  body.shell-app #appShell .view.active .metric-grid.compact .metric-card small{
    font-size:8.5px!important;
    line-height:1.15!important;
  }

  /* Booking Center becomes a compact command list; tap a row to open it. */
  body.shell-app #appShell [data-page="booking"] .progressive-booking{
    gap:7px!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-section-label{
    display:none!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-step-panel{
    min-height:0!important;
    padding:12px!important;
    border-left-width:3px!important;
    border-radius:14px!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-step-panel::before{
    display:none!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-step-panel:not(.compact-panel-open){
    padding:0!important;
    min-height:48px!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-step-panel:not(.compact-panel-open)>.panel-head{
    margin:0!important;
    padding:12px 13px!important;
    border-bottom:0!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-step-panel:not(.compact-panel-open)>:not(.panel-head):not(#estimateCalculatorMount){
    display:none!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-estimate-panel:not(.compact-panel-open)>#estimateCalculatorMount>:not(.estimate-panel-head){
    display:none!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-estimate-panel:not(.compact-panel-open)>#estimateCalculatorMount>.estimate-panel-head{
    margin:0!important;
    padding:12px 13px!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-step-panel .panel-head,
  body.shell-app #appShell [data-page="booking"] .booking-estimate-panel .estimate-panel-head{
    position:relative!important;
    cursor:pointer!important;
    padding-right:34px!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-step-panel .panel-head::after,
  body.shell-app #appShell [data-page="booking"] .booking-estimate-panel .estimate-panel-head::after{
    content:"+";
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#F3F0EA;
    color:var(--ink);
    font-size:14px;
    font-weight:900;
  }
  body.shell-app #appShell [data-page="booking"] .booking-step-panel.compact-panel-open .panel-head::after,
  body.shell-app #appShell [data-page="booking"] .booking-estimate-panel.compact-panel-open .estimate-panel-head::after{
    content:"−";
  }
  body.shell-app #appShell [data-page="booking"] .booking-step-panel.compact-panel-open .panel-head{
    padding-bottom:8px!important;
    margin-bottom:8px!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-step-panel .panel-head h3,
  body.shell-app #appShell [data-page="booking"] .booking-step-panel[data-booking-panel="requests"] .panel-head h3,
  body.shell-app #appShell [data-page="booking"] .estimate-panel-head h3{
    font-size:16px!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-service-row{
    padding:8px 0!important;
    gap:7px!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-service-group-head{
    gap:5px!important;
    padding-bottom:7px!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-service-group-head p{
    font-size:9px!important;
    line-height:1.3!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-request-row{
    padding:10px!important;
    gap:8px!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-request-copy small{
    font-size:9px!important;
    line-height:1.25!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-request-actions .booking-action{
    min-height:38px!important;
    padding:8px 9px!important;
    font-size:10px!important;
  }

  /* Estimate calculator: two-column inputs instead of a long form. */
  body.shell-app #appShell [data-page="booking"] .estimate-panel-head{
    margin-bottom:10px!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-panel-head .panel-note{
    display:none!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-layout{
    gap:10px!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-form-grid{
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-form-grid .full{
    grid-column:1/-1!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-form-grid input,
  body.shell-app #appShell [data-page="booking"] .estimate-form-grid select{
    min-height:39px!important;
    padding:8px 9px!important;
    font-size:11px!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-form-grid label{
    font-size:9px!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-addons-block{
    gap:6px!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-field-head small{
    display:none!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-addon-grid{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-addon-choice{
    min-height:44px!important;
    padding:8px!important;
    border-radius:11px!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-result{
    min-height:0!important;
    padding:13px!important;
    border-radius:15px!important;
    gap:6px!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-total{
    font-size:34px!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-breakdown{
    max-height:135px;
    overflow:auto;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-rules{
    margin-top:10px!important;
    padding-top:9px!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-rule-grid{
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  body.shell-app #appShell [data-page="booking"] .estimate-rule-grid input{
    min-height:38px!important;
    padding:8px 9px!important;
  }

  /* Settings: the accordion behavior already exists; make each closed row tiny. */
  body.shell-app #appShell [data-page="settings"] .settings-intro{
    margin-bottom:7px!important;
  }
  body.shell-app #appShell [data-page="settings"] .settings-intro p{
    display:none!important;
  }
  body.shell-app #appShell [data-page="settings"] .settings-simple-grid{
    gap:5px!important;
  }
  body.shell-app #appShell [data-page="settings"] .settings-simple-grid>.settings-section{
    border-radius:13px!important;
  }
  body.shell-app #appShell [data-page="settings"] .settings-simple-grid .panel-head{
    padding:10px 11px!important;
  }
  body.shell-app #appShell [data-page="settings"] .settings-simple-grid .panel-head h3{
    font-size:15px!important;
  }
  body.shell-app #appShell [data-page="settings"] .settings-simple-grid .panel-note{
    display:none!important;
  }
  body.shell-app #appShell [data-page="settings"] .settings-accordion>.settings-section:not(.settings-open){
    min-height:42px!important;
  }
  body.shell-app #appShell [data-page="settings"] .settings-section.settings-open>:not(.panel-head){
    margin-left:10px!important;
    margin-right:10px!important;
  }
  body.shell-app #appShell [data-page="settings"] .settings-section.settings-open>:last-child{
    margin-bottom:10px!important;
  }
  body.shell-app #appShell [data-page="settings"] .settings-summary-grid{
    gap:6px!important;
  }
  body.shell-app #appShell [data-page="settings"] .settings-summary-grid>div{
    padding:8px 9px!important;
    border-radius:10px!important;
  }

  /* Generic optional panels: rules, history, message center, admin/help. */
  body.shell-app #appShell .compact-accordion-panel{
    overflow:hidden!important;
  }
  body.shell-app #appShell .compact-accordion-panel:not(.compact-panel-open){
    min-height:44px!important;
    padding:0!important;
  }
  body.shell-app #appShell .compact-accordion-panel.compact-trigger-head:not(.compact-panel-open)>:not(.panel-head),
  body.shell-app #appShell .compact-accordion-panel.compact-trigger-row:not(.compact-panel-open)>:not(.panel-heading-row),
  body.shell-app #appShell .compact-accordion-panel.compact-trigger-h3:not(.compact-panel-open)>:not(h3){
    display:none!important;
  }
  body.shell-app #appShell .compact-accordion-panel:not(.compact-panel-open)>.panel-head,
  body.shell-app #appShell .compact-accordion-panel:not(.compact-panel-open)>.panel-heading-row{
    margin:0!important;
    padding:11px 12px!important;
  }
  body.shell-app #appShell .compact-accordion-panel.compact-trigger-h3:not(.compact-panel-open)>h3{
    margin:0!important;
    padding:12px!important;
  }
  body.shell-app #appShell .compact-accordion-panel>.panel-head,
  body.shell-app #appShell .compact-accordion-panel>.panel-heading-row,
  body.shell-app #appShell .compact-accordion-panel.compact-trigger-h3>h3{
    position:relative!important;
    cursor:pointer!important;
    padding-right:34px!important;
  }
  body.shell-app #appShell .compact-accordion-panel>.panel-head::after,
  body.shell-app #appShell .compact-accordion-panel>.panel-heading-row::after,
  body.shell-app #appShell .compact-accordion-panel.compact-trigger-h3>h3::after{
    content:"+";
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    font-size:14px;
    font-weight:900;
  }
  body.shell-app #appShell .compact-accordion-panel.compact-panel-open>.panel-head::after,
  body.shell-app #appShell .compact-accordion-panel.compact-panel-open>.panel-heading-row::after,
  body.shell-app #appShell .compact-accordion-panel.compact-panel-open.compact-trigger-h3>h3::after{
    content:"−";
  }

  /* Follow-ups: queue stays visible; rules/history tuck away until needed. */
  body.shell-app #appShell [data-page="followups"] .followup-layout{
    gap:7px!important;
  }
  body.shell-app #appShell [data-page="followups"] .followup-rules-copy{
    display:none!important;
  }
  body.shell-app #appShell [data-page="followups"] .followup-rule{
    padding:8px 0!important;
    gap:7px!important;
  }
  body.shell-app #appShell [data-page="followups"] .followup-rule small{
    font-size:9px!important;
  }
  body.shell-app #appShell [data-page="followups"] .followup-rule-controls{
    gap:5px!important;
  }
  body.shell-app #appShell [data-page="followups"] .followup-rule select,
  body.shell-app #appShell [data-page="followups"] .followup-edit-btn{
    min-height:36px!important;
    padding:7px 8px!important;
    font-size:10px!important;
  }
  body.shell-app #appShell [data-page="followups"] .followup-list{
    gap:7px!important;
    margin-top:8px!important;
  }
  body.shell-app #appShell [data-page="followups"] .followup-card{
    padding:10px!important;
    border-radius:13px!important;
    gap:8px!important;
  }
  body.shell-app #appShell [data-page="followups"] .followup-card-main>strong{
    font-size:14px!important;
  }
  body.shell-app #appShell [data-page="followups"] .followup-card-main>span,
  body.shell-app #appShell [data-page="followups"] .followup-card-main>small{
    font-size:10px!important;
    line-height:1.25!important;
  }
  body.shell-app #appShell [data-page="followups"] .followup-card-actions{
    gap:5px!important;
  }
  body.shell-app #appShell [data-page="followups"] .followup-card-actions button{
    min-height:38px!important;
    padding:8px 9px!important;
    font-size:10px!important;
  }
  body.shell-app #appShell [data-page="followups"] .followup-sent-panel{
    margin-top:7px!important;
  }

  /* Quotes: swipe status columns instead of stacking five full columns vertically. */
  body.shell-app #appShell [data-page="quotes"] #quotesBoard.kanban{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(278px,86vw)!important;
    align-items:start!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 5px!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  body.shell-app #appShell [data-page="quotes"] #quotesBoard.kanban::-webkit-scrollbar{display:none}
  body.shell-app #appShell [data-page="quotes"] .quote-growth-col{
    width:auto!important;
    min-width:0!important;
    max-height:calc(100dvh - 176px)!important;
    padding:9px!important;
    border-radius:14px!important;
    overflow-y:auto!important;
    scroll-snap-align:start;
  }
  body.shell-app #appShell [data-page="quotes"] .quote-growth-col>h3{
    margin:0 0 6px!important;
    padding:3px 1px 7px!important;
    font-size:14px!important;
  }
  body.shell-app #appShell [data-page="quotes"] .quote-growth-card{
    padding:10px!important;
    border-radius:13px!important;
    gap:4px!important;
    margin-top:6px!important;
  }
  body.shell-app #appShell [data-page="quotes"] .quote-next-step{
    padding:7px!important;
  }
  body.shell-app #appShell [data-page="quotes"] .record-card-actions button{
    min-height:36px!important;
    padding:7px 8px!important;
    font-size:10px!important;
  }

  /* Record-heavy grids become one swipeable rail with a peek of the next card. */
  body.shell-app #appShell [data-page="clients"] #clientsGrid,
  body.shell-app #appShell [data-page="services"] #servicesGrid,
  body.shell-app #appShell [data-page="team"] #teamGrid,
  body.shell-app #appShell [data-page="supplies"] #suppliesGrid{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(272px,84vw)!important;
    align-items:start!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 5px!important;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
  }
  body.shell-app #appShell [data-page="clients"] #clientsGrid::-webkit-scrollbar,
  body.shell-app #appShell [data-page="services"] #servicesGrid::-webkit-scrollbar,
  body.shell-app #appShell [data-page="team"] #teamGrid::-webkit-scrollbar,
  body.shell-app #appShell [data-page="supplies"] #suppliesGrid::-webkit-scrollbar{display:none}
  body.shell-app #appShell [data-page="clients"] #clientsGrid>*,
  body.shell-app #appShell [data-page="services"] #servicesGrid>*,
  body.shell-app #appShell [data-page="team"] #teamGrid>*,
  body.shell-app #appShell [data-page="supplies"] #suppliesGrid>*{
    width:100%!important;
    min-width:0!important;
    scroll-snap-align:start;
  }
  body.shell-app #appShell :is([data-page="clients"],[data-page="services"],[data-page="team"],[data-page="supplies"]) :is(.client-card,.service-card,.supply-card,.add-card){
    padding:10px!important;
    border-radius:13px!important;
    gap:5px!important;
  }
  body.shell-app #appShell :is([data-page="clients"],[data-page="services"],[data-page="team"],[data-page="supplies"]) :is(.card-actions,.record-actions){
    margin-top:5px!important;
    gap:5px!important;
  }
  body.shell-app #appShell :is([data-page="clients"],[data-page="services"],[data-page="team"],[data-page="supplies"]) :is(.card-actions,.record-actions) button{
    min-height:36px!important;
    padding:7px 8px!important;
    font-size:10px!important;
  }

  /* Team intro/access card should not consume a screen. */
  body.shell-app #appShell [data-page="team"] .share-access-card{
    padding:10px 11px!important;
    margin-bottom:8px!important;
    border-radius:13px!important;
    gap:8px!important;
  }
  body.shell-app #appShell [data-page="team"] .share-access-card .pill,
  body.shell-app #appShell [data-page="team"] .share-access-card p{
    display:none!important;
  }
  body.shell-app #appShell [data-page="team"] .share-access-card h3{
    margin:0!important;
    font-size:14px!important;
  }
  body.shell-app #appShell [data-page="team"] .share-access-card button{
    min-height:38px!important;
    padding:8px 10px!important;
    font-size:10px!important;
  }
  body.shell-app #appShell [data-page="team"] .team-message-center{
    margin-top:8px!important;
  }

  /* Reports: four KPIs fit as a compact 2x2 block. */
  body.shell-app #appShell [data-page="reports"] .report-grid{
    grid-template-columns:1fr 1fr!important;
    gap:7px!important;
  }
  body.shell-app #appShell [data-page="reports"] .report-grid .panel{
    min-height:108px!important;
    padding:11px!important;
  }
  body.shell-app #appShell [data-page="reports"] .report-grid .panel>strong{
    margin:5px 0!important;
    font-size:27px!important;
  }
  body.shell-app #appShell [data-page="reports"] .report-grid .panel>p{
    margin:0!important;
    font-size:9px!important;
    line-height:1.25!important;
  }

  /* Tables/record lists: tighter rows and fewer wasted gaps. */
  body.shell-app #appShell [data-page="leads"] .table-card,
  body.shell-app #appShell [data-page="invoices"] .table-card,
  body.shell-app #appShell [data-page="mileage"] .table-card,
  body.shell-app #appShell [data-page="time"] .table-card{
    border-radius:14px!important;
  }
  body.shell-app #appShell :is(#leadsTable,#invoicesTable,#mileageTable,#timeEntriesTable){
    gap:5px!important;
  }
  body.shell-app #appShell .mobile-record-card{
    padding:9px!important;
    border-radius:12px!important;
    gap:4px!important;
    margin-bottom:5px!important;
  }
  body.shell-app #appShell .mobile-record-card>.record-primary{
    padding-bottom:4px!important;
  }
  body.shell-app #appShell .mobile-record-card>.record-field{
    min-height:19px!important;
    padding:1px 0!important;
    font-size:10.5px!important;
  }
  body.shell-app #appShell .mobile-record-card .mobile-primary-action{
    min-height:36px!important;
  }

  /* Calendar / route / timers: reduce framing, not the useful content. */
  body.shell-app #appShell [data-page="calendar"] .calendar-layout,
  body.shell-app #appShell [data-page="route"] .route-layout{
    gap:7px!important;
  }
  body.shell-app #appShell [data-page="calendar"] .calendar-panel,
  body.shell-app #appShell [data-page="route"] .panel{
    padding:10px!important;
  }
  body.shell-app #appShell [data-page="time"] .timer-card{
    padding:11px!important;
    margin-bottom:7px!important;
    border-radius:14px!important;
  }
  body.shell-app #appShell [data-page="time"] .timer-card>strong{
    margin:10px!important;
    font-size:37px!important;
  }

  /* Help/Admin panels: show the menu of sections first, details only on tap. */
  body.shell-app #appShell [data-page="admin"] .admin-grid,
  body.shell-app #appShell [data-page="help"] .help-grid{
    gap:6px!important;
  }
}

/* Tablet/desktop also gets less dead space without changing navigation. */
@media(min-width:681px){
  body.shell-app #appShell .view.active>.section-intro{
    margin-bottom:14px!important;
  }
  body.shell-app #appShell .view.active>.section-intro h2{
    margin-bottom:2px!important;
  }
  body.shell-app #appShell [data-page="booking"] .progressive-booking,
  body.shell-app #appShell [data-page="settings"] .settings-grid,
  body.shell-app #appShell [data-page="followups"] .followup-layout{
    gap:12px!important;
  }
  body.shell-app #appShell [data-page="booking"] .booking-step-panel{
    padding-top:18px!important;
    padding-bottom:18px!important;
  }
}


/* 2026-10-04 — Today/Home command-center pass */
@media(max-width:680px){
  body.shell-app #appShell [data-page="today"] #todayHeroCard{
    min-height:0!important;
    margin:0 0 7px!important;
    padding:10px 11px!important;
    border-radius:16px!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .hero-card-topline{
    margin:0 0 7px!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .today-clock{
    min-height:0!important;
    padding:6px 8px!important;
    border-radius:11px!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .today-clock-mark{display:none!important}
  body.shell-app #appShell [data-page="today"] #todayHeroCard .today-clock-copy strong{font-size:12px!important}
  body.shell-app #appShell [data-page="today"] #todayHeroCard .today-clock-copy small{font-size:8px!important}
  body.shell-app #appShell [data-page="today"] #todayHeroCard .hero-sky-badge{
    width:44px!important;
    min-width:44px!important;
    height:36px!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .today-greeting-first{
    gap:3px!important;
    margin:0!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard #todayGreeting{
    margin:0!important;
    font-size:27px!important;
    line-height:.96!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard #todayMomentCopy{
    margin:0!important;
    font-size:9.5px!important;
    line-height:1.25!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard #todayHeroAction{
    min-height:36px!important;
    margin:6px 0!important;
    padding:7px 10px!important;
    border-radius:11px!important;
    font-size:10px!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .hero-weather-compact{
    min-height:0!important;
    padding:8px 9px!important;
    border-radius:12px!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .weather-temp-row>strong{
    font-size:25px!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .weather-condition-stack{
    gap:0!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .weather-condition-stack span{
    font-size:9px!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .weather-condition-stack small{
    font-size:8px!important;
  }
  body.shell-app #appShell [data-page="today"] #todayHeroCard .weather-business-note{
    min-height:0!important;
    margin-top:5px!important;
    padding:7px 8px!important;
    font-size:9px!important;
    line-height:1.25!important;
  }

  body.shell-app #appShell [data-page="today"] .attention-panel{
    padding:9px 10px!important;
    margin-bottom:7px!important;
    border-radius:14px!important;
  }
  body.shell-app #appShell [data-page="today"] .attention-panel .panel-head{
    margin-bottom:5px!important;
  }
  body.shell-app #appShell [data-page="today"] .attention-panel .panel-head h3{
    font-size:14px!important;
  }

  body.shell-app #appShell [data-page="today"] .money-week-head{
    min-height:0!important;
    margin:4px 0 5px!important;
  }
  body.shell-app #appShell [data-page="today"] .money-week-head h3{
    margin:0!important;
    font-size:13px!important;
  }
  body.shell-app #appShell [data-page="today"] .money-week-head .dashboard-section-link{
    font-size:9px!important;
  }

  body.shell-app #appShell [data-page="today"] .business-pulse{
    display:grid!important;
    grid-template-columns:none!important;
    grid-auto-flow:column!important;
    grid-auto-columns:108px!important;
    gap:6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 3px!important;
    margin:0 0 7px!important;
    scroll-snap-type:x proximity!important;
    scrollbar-width:none!important;
  }
  body.shell-app #appShell [data-page="today"] .business-pulse::-webkit-scrollbar{display:none!important}
  body.shell-app #appShell [data-page="today"] .pulse-card{
    min-height:66px!important;
    padding:9px!important;
    border-radius:13px!important;
    scroll-snap-align:start!important;
  }
  body.shell-app #appShell [data-page="today"] .pulse-card>span{
    font-size:8px!important;
    line-height:1.05!important;
  }
  body.shell-app #appShell [data-page="today"] .pulse-card>strong{
    margin:4px 0 0!important;
    font-size:21px!important;
    line-height:1!important;
  }
  body.shell-app #appShell [data-page="today"] .pulse-card>small{display:none!important}

  body.shell-app #appShell [data-page="today"] .dashboard-grid,
  body.shell-app #appShell [data-page="today"] .dashboard-grid.lower{
    gap:7px!important;
    margin-bottom:7px!important;
  }
  body.shell-app #appShell [data-page="today"] .schedule-panel{
    padding:10px!important;
    border-radius:14px!important;
  }
  body.shell-app #appShell [data-page="today"] .schedule-panel .panel-head{
    margin-bottom:6px!important;
  }
  body.shell-app #appShell [data-page="today"] .schedule-panel .panel-head .eyebrow{display:none!important}
  body.shell-app #appShell [data-page="today"] .schedule-panel .panel-head h3{
    font-size:15px!important;
  }
  body.shell-app #appShell [data-page="today"] .schedule-panel .text-btn{
    font-size:9px!important;
    padding:4px!important;
  }
  body.shell-app #appShell [data-page="today"] .timeline{
    max-height:250px!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.shell-app #appShell [data-page="today"] .capacity-card{
    padding:9px 10px!important;
    border-radius:14px!important;
  }
  body.shell-app #appShell [data-page="today"] .capacity-card .capacity-top{
    margin-bottom:5px!important;
  }
  body.shell-app #appShell [data-page="today"] .capacity-card .capacity-top .eyebrow{display:none!important}
  body.shell-app #appShell [data-page="today"] .capacity-card .capacity-top h3{
    margin:0!important;
    font-size:14px!important;
  }
  body.shell-app #appShell [data-page="today"] .capacity-card #capacityPercent{
    font-size:18px!important;
  }
  body.shell-app #appShell [data-page="today"] .capacity-card .capacity-message{
    margin:5px 0!important;
    font-size:9px!important;
    line-height:1.25!important;
  }
  body.shell-app #appShell [data-page="today"] .capacity-card .text-btn{
    font-size:9px!important;
  }

  body.shell-app #appShell [data-page="today"] .next-move-panel{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:8px!important;
    padding:10px!important;
    margin:0 0 7px!important;
    border-radius:14px!important;
  }
  body.shell-app #appShell [data-page="today"] .next-move-panel .eyebrow{display:none!important}
  body.shell-app #appShell [data-page="today"] .next-move-panel h3{
    margin:0!important;
    font-size:14px!important;
    line-height:1.1!important;
  }
  body.shell-app #appShell [data-page="today"] .next-move-panel p:not(.eyebrow){
    display:none!important;
  }
  body.shell-app #appShell [data-page="today"] .next-move-panel button{
    min-height:36px!important;
    padding:7px 9px!important;
    border-radius:11px!important;
    font-size:9px!important;
    white-space:nowrap!important;
  }

  body.shell-app #appShell [data-page="today"] .week-growth-card{
    padding:10px!important;
    border-radius:14px!important;
  }
  body.shell-app #appShell [data-page="today"] .week-growth-card>.eyebrow{display:none!important}
  body.shell-app #appShell [data-page="today"] .week-growth-card>h3{
    margin:0 0 6px!important;
    font-size:16px!important;
  }
  body.shell-app #appShell [data-page="today"] .week-growth-card>p{display:none!important}
  body.shell-app #appShell [data-page="today"] .week-growth-stats{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px!important;
    margin:0 0 7px!important;
  }
  body.shell-app #appShell [data-page="today"] .week-growth-stats>span{
    padding:6px!important;
    border-radius:10px!important;
  }
  body.shell-app #appShell [data-page="today"] .week-growth-stats small{
    font-size:7.5px!important;
  }
  body.shell-app #appShell [data-page="today"] .week-growth-stats b{
    font-size:13px!important;
  }
  body.shell-app #appShell [data-page="today"] .week-growth-card>.dark-btn{
    min-height:36px!important;
    padding:7px 9px!important;
    font-size:9px!important;
  }

  body.shell-app #appShell [data-page="today"] .presence-panel-compact{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
    padding:10px!important;
    margin-top:7px!important;
    border-radius:14px!important;
  }
  body.shell-app #appShell [data-page="today"] .presence-copy .eyebrow,
  body.shell-app #appShell [data-page="today"] .presence-copy p{display:none!important}
  body.shell-app #appShell [data-page="today"] .presence-copy h3{
    margin:0!important;
    font-size:14px!important;
  }
  body.shell-app #appShell [data-page="today"] .presence-actions{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px!important;
  }
  body.shell-app #appShell [data-page="today"] .presence-btn{
    min-width:0!important;
    min-height:48px!important;
    padding:6px!important;
    border-radius:11px!important;
    gap:4px!important;
  }
  body.shell-app #appShell [data-page="today"] .presence-mark{font-size:13px!important}
  body.shell-app #appShell [data-page="today"] .presence-btn strong{
    font-size:8.5px!important;
  }
  body.shell-app #appShell [data-page="today"] .presence-btn small{display:none!important}
}

@media(min-width:681px) and (max-width:1100px){
  body.shell-app #appShell [data-page="today"] .business-pulse{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:8px!important;
  }
  body.shell-app #appShell [data-page="today"] .pulse-card{
    min-height:86px!important;
    padding:11px!important;
  }
  body.shell-app #appShell [data-page="today"] .dashboard-grid,
  body.shell-app #appShell [data-page="today"] .dashboard-grid.lower{
    gap:10px!important;
  }
  body.shell-app #appShell [data-page="today"] .presence-panel-compact{
    padding:14px!important;
  }
}


/* 2026-10-04 — clarity-first correction
   Keep information visible. Reduce duplication, not discoverability. */
.flat-navigation{
  gap:3px!important;
}
.flat-navigation .nav-section-label{
  margin:10px 8px 4px;
  color:var(--muted);
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
}
.flat-navigation .nav-section-label:first-child{margin-top:2px}
.flat-navigation .nav-item{
  min-height:40px;
}
.sidebar .trial-card{
  margin-top:10px!important;
  padding:10px!important;
  border-radius:13px!important;
}
.sidebar .trial-card p{display:none!important}
.sidebar .trial-card strong{font-size:10px!important}

@media(max-width:680px){
  /* The top bar is the page identifier. Do not repeat the page title below it. */
  body.shell-app #appShell .view.active>.section-intro>div:first-child{
    display:none!important;
  }
  body.shell-app #appShell .view.active>.section-intro{
    min-height:0!important;
    margin:0 0 8px!important;
    justify-content:flex-end!important;
  }
  body.shell-app #appShell .view.active>.section-intro:not(:has(>button,>.section-actions,>.pill,>span)){
    display:none!important;
  }
  body.shell-app #appShell [data-page="clients"]>.customer-action-intro{
    display:flex!important;
    justify-content:flex-end!important;
  }
  body.shell-app #appShell [data-page="clients"]>.customer-action-intro>.primary-btn{
    width:auto!important;
    min-height:38px!important;
    padding:8px 11px!important;
    font-size:10px!important;
  }

  /* Records should never be hidden in carousels. */
  body.shell-app #appShell [data-page="clients"] #clientsGrid,
  body.shell-app #appShell [data-page="services"] #servicesGrid,
  body.shell-app #appShell [data-page="team"] #teamGrid,
  body.shell-app #appShell [data-page="supplies"] #suppliesGrid{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    gap:7px!important;
    overflow:visible!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }
  body.shell-app #appShell [data-page="clients"] #clientsGrid>*,
  body.shell-app #appShell [data-page="services"] #servicesGrid>*,
  body.shell-app #appShell [data-page="team"] #teamGrid>*,
  body.shell-app #appShell [data-page="supplies"] #suppliesGrid>*{
    width:100%!important;
    scroll-snap-align:none!important;
  }

  /* Summary numbers stay visible together instead of hiding sideways. */
  body.shell-app #appShell .view.active .metric-grid.compact{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    overflow:visible!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }
  body.shell-app #appShell .view.active .metric-grid.compact .metric-card{
    min-width:0!important;
    width:auto!important;
    min-height:66px!important;
  }
  body.shell-app #appShell [data-page="today"] .business-pulse{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    grid-auto-columns:auto!important;
    gap:6px!important;
    overflow:visible!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }
  body.shell-app #appShell [data-page="today"] .pulse-card{
    width:auto!important;
    min-width:0!important;
  }

  /* Sidebar: all destinations are visible, no generic More drawer. */
  body.shell-app #appShell>.sidebar .nav-list.flat-navigation{
    display:flex!important;
    flex-direction:column!important;
    gap:2px!important;
    overflow:visible!important;
  }
  body.shell-app #appShell>.sidebar .flat-navigation .nav-item{
    min-height:38px!important;
    padding:8px 10px!important;
    border-radius:10px!important;
    font-size:11px!important;
  }
  body.shell-app #appShell>.sidebar .flat-navigation .nav-section-label{
    margin:9px 9px 3px!important;
  }
}


/* 2026-10-04 — mobile socials + footer correction */
@media(max-width:680px){
  /* Social links need room to read: 2×2, not four compressed columns. */
  body.shell-app #appShell [data-page="today"] .presence-panel-compact{
    padding:13px!important;
    gap:10px!important;
    margin-bottom:10px!important;
  }
  body.shell-app #appShell [data-page="today"] .presence-copy h3{
    font-size:16px!important;
    margin:0!important;
  }
  body.shell-app #appShell [data-page="today"] .presence-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    overflow:visible!important;
  }
  body.shell-app #appShell [data-page="today"] .presence-btn{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-width:0!important;
    width:100%!important;
    min-height:58px!important;
    padding:9px 10px!important;
    gap:9px!important;
    border-radius:13px!important;
    overflow:visible!important;
  }
  body.shell-app #appShell [data-page="today"] .presence-mark{
    flex:0 0 34px!important;
    width:34px!important;
    min-width:34px!important;
    height:34px!important;
    border-radius:10px!important;
    font-size:14px!important;
  }
  body.shell-app #appShell [data-page="today"] .presence-btn>span:last-child{
    min-width:0!important;
    display:grid!important;
    gap:2px!important;
    text-align:left!important;
  }
  body.shell-app #appShell [data-page="today"] .presence-btn strong{
    display:block!important;
    font-size:10.5px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  body.shell-app #appShell [data-page="today"] .presence-btn small{
    display:block!important;
    font-size:8.5px!important;
    line-height:1.1!important;
    color:var(--muted)!important;
    white-space:nowrap!important;
  }

  /* Mobile has a persistent bottom nav, so the desktop legal footer should not
     travel through the scroll surface. Legal/support links remain in Help and
     Share app remains in the sidebar. */
  html body.shell-app #appShell:not([hidden])>.main>.app-legal-footer{
    display:none!important;
  }
  html body.shell-app #appShell:not([hidden])>.main{
    padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;
  }
}

/* Reserve a separate lane for disclosure controls across the mobile workspace. */
@media(max-width:680px){
  html body.shell-app #appShell :is(.booking-step-panel .panel-head,.booking-estimate-panel .estimate-panel-head,.compact-accordion-panel>.panel-head,.compact-accordion-panel>.panel-heading-row,.compact-accordion-panel.compact-trigger-h3>h3,.settings-accordion-trigger)[aria-expanded]{
    position:relative!important;
    box-sizing:border-box!important;
    padding:12px 52px 12px 13px!important;
    min-height:48px!important;
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
  }
  html body.shell-app #appShell :is(.booking-step-panel .panel-head,.booking-estimate-panel .estimate-panel-head,.compact-accordion-panel>.panel-head,.compact-accordion-panel>.panel-heading-row,.compact-accordion-panel.compact-trigger-h3>h3,.settings-accordion-trigger)[aria-expanded]::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    right:20px!important;
    top:22px!important;
    width:8px!important;
    height:8px!important;
    border:solid var(--muted,#68665f)!important;
    border-width:0 2px 2px 0!important;
    border-radius:0!important;
    background:transparent!important;
    transform:rotate(45deg)!important;
    pointer-events:none!important;
  }
  html body.shell-app #appShell [aria-expanded="true"]:is(.panel-head,.panel-heading-row,.estimate-panel-head,.settings-accordion-trigger,h3)::after{
    transform:rotate(225deg)!important;
    top:26px!important;
  }
  html body.shell-app #appShell :is(.booking-step-panel,.booking-estimate-panel,.compact-accordion-panel) [aria-expanded]>div{
    flex:1 1 180px!important;
    min-width:0!important;
  }
  html body.shell-app #appShell :is(.booking-step-panel,.booking-estimate-panel,.compact-accordion-panel) [aria-expanded]>:is(button,a,.pill){
    flex:0 1 auto!important;
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    font-size:12px!important;
    line-height:1.35!important;
  }
}

/* Clear sidebar hierarchy: destinations read before group labels and utilities. */
html body.shell-app #appShell>.sidebar .flat-navigation .nav-section-label{
  font-size:10px!important;
  font-weight:600!important;
  letter-spacing:.12em!important;
  margin:16px 12px 5px!important;
}
html body.shell-app #appShell>.sidebar .flat-navigation .nav-item{
  font-size:14px!important;
  line-height:1.3!important;
  min-height:44px!important;
  padding:11px 12px!important;
  gap:10px!important;
}
html body.shell-app #appShell>.sidebar .flat-navigation :is(.nav-primary,[data-view="services"]){
  font-size:16px!important;
  font-weight:800!important;
  min-height:48px!important;
}
html body.shell-app #appShell>.sidebar .flat-navigation .nav-item>span{
  font-size:18px!important;
  flex:0 0 22px!important;
  text-align:center!important;
}
html body.shell-app #appShell>.sidebar .flat-navigation .nav-item.active{
  background:var(--blue-soft,#e8f2ff)!important;
  color:var(--ink,#191919)!important;
  box-shadow:inset 3px 0 0 #1673b8!important;
}