/* Phone/tablet composition. Loaded after the desktop design layers. */
@media screen {
 body .app>.top{background:linear-gradient(112deg,#0b5d5a,#0e4f4f)}
 .project-gate{padding-top:calc(var(--sc-toolbar-height,96px) + 24px);padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));padding-bottom:max(24px,env(safe-area-inset-bottom))}
}
@media screen and (max-width:999px){
 #dashboard .cc-layout-main,#dashboard .cc-layout-half{grid-template-columns:minmax(0,1fr)!important;align-items:start}
 #dashboard .cc-layout-main>*,#dashboard .cc-layout-half>*{grid-column:auto!important}
 #dashboard .cc-panel{padding:16px}
 #dashboard .cc-filter-top{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #dashboard .cc-filter-group.period{grid-column:1/-1!important}
 main .sc-responsive-table{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
 main .sc-responsive-table>table{min-width:640px;table-layout:auto}
 main .sc-responsive-table th{overflow-wrap:normal;word-break:normal;white-space:nowrap}
 main .sc-responsive-table td{overflow-wrap:normal;word-break:normal}
 #intelligence-control .ic-table-wrap{max-width:100%;overflow-x:auto}
 #intelligence-control table{min-width:680px;table-layout:auto}
 #intelligence-control th{overflow-wrap:normal;word-break:normal;white-space:nowrap}
}
@media screen and (max-width:600px){
 body .private-online-toolbar{padding:6px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left));gap:5px}
 body .private-online-toolbar>div:first-child{font-size:12px;line-height:1.3}
 body .private-online-toolbar small{font-size:10px;line-height:1.3}
 body .private-online-actions button{min-height:36px;padding:6px 8px;font-size:11px}
 body .private-online-actions #sc-app-update-open{font-size:11px;padding:6px}
 body .app>.top{padding:9px 12px}
 .app>.top .toprow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:12px}
 .app>.top .top-project-branding{width:auto;max-width:100%}
 .app>.top h1{font-size:16px;line-height:1.2}
 .app>.top p{font-size:11px;margin:3px 0 0}
 .app>.top #top-project-name{font-size:13px;line-height:1.25;overflow-wrap:normal}
 .app>.top .top-project-indicator{text-align:right}
 .app>.top .top-project-indicator small{font-size:9px}
 .app>.top .desktop-section-context{display:none}
 #dashboard .cc-heading h2{font-size:22px}
 #dashboard .cc-panel-head h3{font-size:17px;overflow-wrap:normal;word-break:normal;line-height:1.3}
 #dashboard .cc-panel-head{gap:8px;flex-wrap:wrap}
 #dashboard .cc-layout-main,#dashboard .cc-layout-half{gap:14px}
 #dashboard .cc-filter-top{grid-template-columns:minmax(0,1fr)!important}
 #dashboard .cc-filter-group.period{grid-column:auto!important}
 #dashboard .cc-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px}
 #dashboard .cc-kpi{grid-template-columns:minmax(0,1fr);grid-template-areas:"icon" "value" "label" "note";padding:12px;gap:4px;min-height:140px;align-content:start}
 #dashboard .cc-kpi-icon{width:32px;height:32px}
 #dashboard .cc-kpi-icon svg{width:18px;height:18px}
 #dashboard .cc-kpi-value{font-size:23px}
 #dashboard .cc-kpi-label{font-size:12px;overflow-wrap:normal}
 #dashboard .cc-kpi-note{font-size:10px;overflow-wrap:normal;margin-top:3px}
 #dashboard .cc-risk-indicator{grid-template-columns:minmax(0,1fr)!important;gap:8px}
 #dashboard .cc-risk-card{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"code number" "label number";align-items:center;min-height:76px;padding:12px 14px}
 #dashboard .cc-risk-card span{grid-area:code;font-size:11px}
 #dashboard .cc-risk-card strong{grid-area:number;margin:0;font-size:30px}
 #dashboard .cc-risk-card small{grid-area:label;font-size:12px}
 #dashboard .cc-panel-wide{min-height:0}
 #dashboard .cc-trend-chart{min-height:200px;padding-top:18px}
 #dashboard .cc-trend-bucket{height:180px}
 #dashboard .cc-trend-bars{height:125px}
 #dashboard .cc-trend-bar{min-height:0!important;min-width:2px;padding:0!important}
 #dashboard .cc-trend-bar span{font-size:7px}
 #dashboard .cc-trend-totals{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #dashboard .cc-trend-totals>*{grid-column:auto!important}
 #dashboard .cc-trend-totals button{min-height:78px;padding:10px}
 #dashboard .cc-trend-totals span{font-size:11px;overflow-wrap:normal}
 #dashboard .cc-donut-layout,#dashboard .cc-unsafe-layout{grid-template-columns:minmax(0,1fr)!important}
 .project-gate-brand{margin-bottom:18px}
 .project-gate-brand img{width:min(230px,70vw)}
 .project-gate-heading{align-items:start;flex-wrap:wrap}
 .project-gate-heading h1{font-size:27px}
 .project-gate-heading p{font-size:14px}
 .project-card .project-card-main{grid-template-columns:minmax(0,1fr);gap:12px}
 .project-card .project-card-side{min-height:0;grid-template-rows:auto}
 .project-card .project-card-logos{justify-content:flex-start;max-height:60px}
 .project-card .project-card-logos>span{height:54px;max-width:140px}
 .project-card h2{font-size:21px;line-height:1.3;overflow-wrap:normal}
}
@media screen and (max-height:500px) and (max-width:999px){
 body .private-online-toolbar{flex-wrap:nowrap;gap:10px;padding:5px max(10px,env(safe-area-inset-right)) 5px max(10px,env(safe-area-inset-left))}
 body .private-online-toolbar>div:first-child{flex:1 1 auto;font-size:11px}
 body .private-online-toolbar small{font-size:9px}
 body .private-online-actions{width:auto;display:flex;flex-wrap:nowrap;gap:5px}
 body .private-online-actions button,body .private-online-actions #sc-app-update-open{min-height:34px;font-size:11px;padding:6px 8px}
 body .app>.top{padding:6px 12px}
 .app>.top .toprow{display:flex;flex-direction:row;gap:18px;align-items:center}
 .app>.top .toprow>div{flex:1 1 0;min-width:0}
 .app>.top h1{font-size:15px}
 .app>.top p,.app>.top .desktop-section-context{display:none}
 .app>.top #top-project-name{font-size:12px}
 .app>.top .top-project-indicator{text-align:right}
}

@media screen{#dashboard .cc-trend-bar{min-height:0!important;padding:0!important}}