/* Functions share the Verticals workspace, selector, title and KPI components. */
#stage .functions-view{position:relative;z-index:2;max-width:none;width:100%;margin:0;text-align:left}
.functions-view[hidden]{display:none!important}
#stage.is-functions>.skyline,#stage.is-functions>.ambient{display:none}
.function-list{overflow:auto;min-height:0;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;scrollbar-color:#16684666 transparent;padding:2px;flex:1}
.function-list .function-card{position:relative!important;inset:auto!important;transform:none!important;flex-shrink:0;width:100%!important;max-width:none!important;min-height:58px!important;margin:0!important;padding:0!important}
.function-list .vertical-row{width:100%;min-height:58px!important}
.function-list .node-copy{min-width:0;flex:1}.function-list .node-copy>span{white-space:normal!important;line-height:1.35!important}.function-list .node-copy small{display:block!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.function-card:focus-visible{outline:2px solid #166846;outline-offset:1px}
.fn-panel .realty-panel-heading p{white-space:normal!important}
.fn-progress{margin:10px 0}.fn-progress>div:first-child{display:flex;justify-content:space-between;gap:12px;font:400 14px/1.4 Roboto,sans-serif;margin-bottom:8px;color:#1b1d4d}.fn-progress .completion-track{height:9px;background:#edf0f4;overflow:hidden;border-radius:8px}.fn-progress .completion-track span{display:block;height:100%;border-radius:8px}
.fn-action{display:flex;align-items:flex-start;gap:10px;padding:14px 0;border-bottom:1px solid #edf0f5}.fn-action:last-of-type{border-bottom:0}.fn-action h5{font:500 14px/1.4 Roboto,sans-serif;margin:0;color:#1b1d4d}.fn-action p{font:400 14px/1.5 Roboto,sans-serif;color:#64748b;margin:4px 0 0}.fn-action>small{font-size:12px;white-space:nowrap;margin-left:auto;color:#52647b}.fn-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;margin-top:5px}.fn-dot.green{background:#166846}.fn-dot.amber{background:#b86b08}.fn-note{font-size:11px;color:#64748b;grid-column:1/-1}
.function-kpis small>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.function-expanded .detail-top{padding:18px 22px}.function-expanded .realty-dashboard{display:grid;gap:16px}.function-expanded .realty-panels{align-items:stretch}
@media(max-width:760px){.function-list{max-height:260px}.function-workspace{display:grid;grid-template-columns:1fr!important}.function-detail{min-height:0!important}.function-selector{display:flex;flex-direction:column}.function-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.function-expanded .realty-panels{grid-template-columns:1fr}}

#stage.is-functions .vertical-selector .function-list{display:flex;flex-direction:column;flex:1;overflow:auto;min-height:0}
#stage.is-functions .function-list .function-card{border-radius:10px!important;box-shadow:none!important;background:white!important;border:1px solid #e1e6ed!important}
#stage.is-functions .function-list .function-card[aria-selected=true]{background:var(--sector-gradient)!important;border-color:transparent!important;box-shadow:0 4px 12px #1b1d4d15!important}
#stage.is-functions .function-list .function-card .vertical-row{display:flex;align-items:center;gap:8px;text-align:left;padding:8px 9px}
#stage.is-functions .function-list .function-card .node-copy>span{color:var(--navy);text-shadow:none}
#stage.is-functions .function-list .function-card[aria-selected=true] .node-copy>span{color:white}
#stage.is-functions .function-list .node-copy small{white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important}

/* Reuse the vertical KPI dimensions and fit function content to the desktop workspace. */
.function-kpis .kpi-target{min-width:0}
.function-kpis .kpi-target>span,.function-kpis .kpi-target>b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.function-kpis .kpi small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(min-width:761px){
 #stage.is-functions .workspace>.function-detail>.fn-content{min-height:0;grid-template-rows:auto minmax(0,1fr);gap:10px}
 .function-detail .realty-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
 .function-detail .realty-panels{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0;gap:12px}
 #stage.is-functions .workspace .fn-panel{min-height:0;gap:0;padding:12px;display:flex;flex-direction:column}
 .function-detail .realty-panel-heading h4{font-size:18px;line-height:1.25}
 .function-detail .realty-panel-heading p{font-size:12px;line-height:1.4}
 .function-detail .fn-progress{margin:6px 0}
 .function-detail .fn-progress>div:first-child{font-size:13px;margin-bottom:5px}
 .function-detail .fn-action{padding:8px 0;gap:7px}
 .function-detail .fn-action>div{min-width:0}
 .function-detail .fn-action h5{font-size:13px;line-height:1.3}
 .function-detail .fn-action p{font-size:12px;line-height:1.35;margin-top:3px}
 .function-detail .fn-action>small{font-size:10px}
 #stage.is-functions .workspace .realty-panel-footer{font-size:11px;line-height:1.35;min-height:0;padding-top:6px}
}
@media(min-width:761px) and (max-height:800px){
 #stage.is-functions .workspace>.function-detail>.fn-content{padding:8px;gap:8px}
 .function-detail .realty-stat{padding:9px 11px;grid-template-rows:minmax(32px,auto) 30px auto;gap:2px}
 .function-detail .realty-stat h4{font-size:12px;line-height:1.3}
 .function-detail .realty-stat>p{font-size:11px;line-height:1.3}
 #stage.is-functions .workspace .fn-panel{padding:9px}
 .function-detail .realty-panel-heading{padding-bottom:6px;gap:4px}
 .function-detail .realty-panel-heading h4{font-size:16px}
 .function-detail .fn-action{padding:5px 0}
 .function-detail .fn-progress{margin:4px 0}
}
/* Narrow screens keep natural scrolling rather than hiding dashboard content. */
@media(max-width:760px){
 .function-workspace>.function-selector,.function-workspace>.function-detail{grid-column:1/-1!important}
 .function-detail>.fn-content{grid-template-rows:auto auto}
}
#stage .functions-view{padding-left:3.4%;padding-right:3.4%}


/* Pending action status uses the shared red accent. */
.fn-dot.red{background:#d60039}