/* UI2 Home (package U3). Everything is scoped to html.ui2 so ?ui2=0 keeps the legacy look. Palette from HOME_UI_GUIDE section 3. */
html.ui2 .page-heading .studio-heading-crop{display:none}
/* The sales headline no longer shows under the greeting (2026-10-22); the page title stays for screen readers only. */
html.ui2 #dashboard:has(#home-view:not([hidden])) #dashboard-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
html.ui2 #dashboard:has(#home-view:not([hidden])) .page-heading{min-height:0;margin:0;padding:0}
/* ---------- Greeting + pills ---------- */
html.ui2 .home-welcome{max-width:1320px;margin:0 auto;padding:8px 0 4px;background:none;border:0;box-shadow:none}
.u3-greet h2{margin:0;font:500 clamp(32px,4vw,44px)/1.1 var(--display-font,Roboto,Arial,sans-serif);letter-spacing:-.02em;color:var(--ink,#000)}
.u3-greet p{margin:8px 0 18px;color:#565C65;font-size:16px}
.u3-pills{display:flex;gap:10px;flex-wrap:wrap;position:relative;align-items:center}
.u3-pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;border:1px solid #A8ABB0;background:#fff;color:#000;font:600 14px/1 inherit;cursor:pointer;white-space:nowrap}
.u3-pill:hover{border-color:#000}
.u3-pill .u3-chev{transition:transform .15s;font-size:12px}
.u3-pill[aria-expanded=true] .u3-chev{transform:rotate(180deg)}
.u3-pill[data-tone=attn]{background:#FFF1D6;border-color:#F2C46B;color:#5C3B00}
.u3-pill[data-tone=clear],.u3-pill[data-tone=dismissed]{color:#3B4048}
.u3-dot{width:8px;height:8px;border-radius:50%;background:#FEB634;box-shadow:0 0 0 4px #feb63455;animation:m-halo 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.u3-dot{animation:none}}
.u3-drop{position:absolute;top:46px;left:0;z-index:40;width:min(460px,100%);padding:8px;border:1px solid #D9D9D9;border-radius:16px;background:#fff;box-shadow:0 1px 2px #0000000D,0 16px 32px -24px #00000033}
.u3-drop[hidden]{display:none}
.u3-drop ol{list-style:none;margin:0;padding:0}
.u3-item{display:flex;gap:12px;align-items:flex-start;width:100%;padding:12px;border:0;border-radius:11px;background:none;text-align:left;cursor:pointer;color:#000}
.u3-item:hover{background:#F2F2F2}
.u3-rank{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#D30202;color:#fff;font-size:12px;font-weight:700}
.u3-item b{display:block;font-size:14px}.u3-item span.u3-detail{display:block;font-size:13px;color:#565C65;font-weight:400}
.u3-foot{display:flex;justify-content:space-between;align-items:center;padding:8px 12px 4px;border-top:1px solid #D9D9D9;margin-top:4px}
.u3-foot button{border:0;background:none;color:#565C65;font-size:13px;cursor:pointer;padding:6px 0}
.u3-foot button.u3-go{background:#000;color:#fff;border-radius:999px;padding:7px 14px;font-weight:600}
.u3-fav-slot{display:inline-flex}
@media (max-width:640px){
.u3-greet h2{font-size:28px}.u3-greet p{font-size:15px;margin:6px 0 14px}
.u3-pills{flex-wrap:nowrap;gap:8px}.u3-pill{height:36px;padding:0 12px;font-size:13px}
.u3-drop{position:fixed;left:12px;right:12px;top:auto;width:auto;max-height:70vh;overflow:auto}
}
/* ---------- Tiles ---------- */
html.ui2 #operating-areas .studio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;max-width:1320px;margin:0 auto}
@media (max-width:1300px){html.ui2 #operating-areas .studio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}html.ui2 #operating-areas .studio-card[data-tile-last]{grid-column:1/-1}} /* GM basics: an odd tile count (3) -> the last tile fills its row, no empty cell */
@media (max-width:900px){html.ui2 #operating-areas .studio-grid{grid-template-columns:1fr}}
html.ui2 #operating-areas .studio-card{--c:#B6C86D;--fg:#272C33;--sub:#1F242A;--rule:#272C333D;display:flex;flex-direction:column;position:relative;padding:0;border-radius:16px;overflow:hidden;color:var(--fg);background:var(--c);border:1px solid #A4AF48;box-shadow:0 1px 2px #0000000D,0 16px 32px -24px #00000033;transform:none}
html.ui2 #operating-areas .studio-card:hover{transform:none}
html.ui2 #operating-areas .studio-labor,html.ui2 #operating-areas .studio-schedule{--c:#E3EEFC;--rule:#004AB526;border-color:#B1C9EB}
html.ui2 #operating-areas .studio-loyalty{--c:#E5C1E2;--fg:#413067;--sub:#2E2148;--rule:#4130672E;border-color:#C8A1C5}
html.ui2 #operating-areas .studio-food{--c:#F7EDE6;--rule:#272C3324;border-color:#DFCFC4}
html.ui2 #operating-areas .studio-people{--c:#FEB634;--rule:#272C333D;border-color:#C68B1F}
html.ui2 #operating-areas .studio-card>.studio-card-photo{display:none}
/* U9 (triage): the Act-now tile keeps its dark-red ring under ui2 (each tile's border colour above would hide it). */
html.ui2 #operating-areas .studio-card.priority-critical{border:3px solid #8E1B14;box-shadow:0 0 0 2px #8E1B1433,0 16px 32px -24px #00000033}
.u3-band{position:relative;height:118px;width:100%;align-self:stretch;box-sizing:border-box;overflow:hidden;flex:none;display:flex;justify-content:space-between;align-items:flex-start;padding:16px 18px}
.u3-band::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,#000000b3,#00000040 45%,#00000008);pointer-events:none}
html.ui2 #operating-areas .u3-band>.studio-card-photo{position:absolute;inset:0;display:block!important;width:100%!important;height:100%!important;max-width:none;object-fit:cover;object-position:center 35%;border-radius:0;margin:0;float:none}
.u3-band>*:not(img){position:relative;z-index:1}
html.ui2 #operating-areas .u3-band .u3-kicker{margin:0;padding:4px 10px;border-radius:999px;background:#000000b3;color:#fff;font-size:11px!important;font-weight:600;line-height:1.4;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(6px);white-space:nowrap}
html.ui2 #operating-areas .u3-open{position:relative;inset:auto;width:auto;height:auto;min-height:0;padding:5px 12px;border-radius:999px;background:#000;color:#fff;border:0;font:600 13px/1.4 inherit;cursor:pointer}
html.ui2 #operating-areas .u3-open span{font-size:13px}
html.ui2 #operating-areas .studio-card-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:0;align-content:start;padding:16px 22px 20px;flex:1}
html.ui2 #operating-areas .studio-card-body>*{grid-column:1/-1;min-width:0}
html.ui2 #operating-areas p.home-period-update{display:block!important;margin:0 0 10px;padding:6px 9px;border-radius:8px;background:#fff4cf;color:#5b4512;font-size:12px;line-height:1.35}
html.ui2 #operating-areas p.home-snapshot-label{display:block!important;margin:0 0 6px;color:#3B4048;font-size:11px;font-weight:650;line-height:1.25;letter-spacing:.03em;text-transform:uppercase}
html.ui2 #operating-areas .growth-open.growth-unavailable .metric-value{font-size:14px;line-height:1.15;white-space:normal}
/* Flatten the loader-owned wrappers so every metric becomes a grid item of the card body. */
html.ui2 #operating-areas :is(.studio-growth,.grove-growth,#operating-sales-summary,.studio-metrics,#schedule-summary,#recruiting-summary,.people-heroes,.people-smalls,.labor-smalls,#operating-labor-summary,.grove-labor-splh,.loyalty-metrics,details.grove-source-detail){display:contents}
html.ui2 #operating-areas details.grove-source-detail>summary{display:none}
html.ui2 #operating-areas :is(.grove-priority-label,.priority-reason,.grove-footer,.studio-open,.grove-source,.snapshot-coverage,.history-note,.grove-goal-line,.recruiting-freshness,.studio-note,.metric-info-i,p.metric-info-source,.loyalty-sub,.sr-only,[data-metric-info],.food-soon+*){display:none!important}
html.ui2 #operating-areas .food-soon{margin:10px 0 0;font-size:13px;color:var(--sub)}
/* hero */
html.ui2 #operating-areas .studio-metric{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:6px;min-width:0;cursor:pointer;color:inherit}
html.ui2 #operating-areas .studio-metric:focus-visible{outline:2px solid #004AB5;outline-offset:2px;border-radius:6px}
html.ui2 #operating-areas .studio-metric>*{order:3;grid-column:1/-1}
html.ui2 #operating-areas .studio-metric>.metric-label,html.ui2 #operating-areas .studio-metric>.growth-label-row{order:0;display:block;color:var(--sub);font-weight:650;min-width:0}
html.ui2 #operating-areas .studio-metric>.growth-label-row .metric-label{display:inline}
html.ui2 #operating-areas .studio-metric>:is(.metric-value,.growth-open){order:1;grid-column:1/2;font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em;color:inherit}
html.ui2 #operating-areas .growth-open{all:unset;cursor:pointer}
html.ui2 #operating-areas .studio-metric .metric-value,html.ui2 #operating-areas .growth-open .metric-value{color:inherit;font-weight:700;font-variant-numeric:tabular-nums}
html.ui2 #operating-areas .studio-metric>.u3-clock{order:2;grid-column:2/3;justify-self:start;align-self:end}
html.ui2 #operating-areas [data-u3=hero]{grid-column:1/-1;margin-bottom:0}
html.ui2 #operating-areas [data-u3=hero]>.metric-label{font-size:15.5px;line-height:1.3}
html.ui2 #operating-areas [data-u3=hero] .metric-value{font-size:40px;line-height:1.05;margin:2px 0 6px}
html.ui2 #operating-areas [data-u3=hero]>.u3-clock{margin-bottom:8px}
/* rule + smalls: three per row, equal columns, thin dividers, values aligned across the row */
html.ui2 #operating-areas [data-u3=small]{align-content:start;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;padding:14px 8px 8px 12px;border-left:1px solid var(--rule);column-gap:6px}
html.ui2 #operating-areas [data-u3=small]>.metric-label{font-size:12.5px;line-height:1.25;white-space:normal;}
html.ui2 #operating-areas [data-u3=small]>.metric-label{grid-row:1}
html.ui2 #operating-areas [data-u3=small]>:is(.metric-value,.growth-open){grid-row:2;align-self:end}
html.ui2 #operating-areas [data-u3=small]>.u3-clock{grid-row:2}
html.ui2 #operating-areas .metric-soon{font-size:13px!important;font-weight:600;line-height:1.25}
html.ui2 #operating-areas .studio-metric .metric-label{text-transform:none;letter-spacing:0;font-weight:650}
html.ui2 #operating-areas [data-u3=small] :is(.u3-chip,.u3-peer){font-size:11px;padding:2px 6px}
html.ui2 #operating-areas [data-u3=small] .metric-value{font-size:20px;line-height:1.1}
html.ui2 #operating-areas [data-u3=small][data-u3-col="0"]{border-left:0;padding-left:0}
/* Rule above the first row of smalls */
html.ui2 #operating-areas [data-u3=hero]{padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:0}
html.ui2 #operating-areas .studio-card[data-u3-smalls="0"] [data-u3=hero]{border-bottom:0;padding-bottom:0}
/* info + clock */
.u3-info,.u3-clock{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;color:inherit;opacity:.8;cursor:pointer;flex:none}
.u3-info{vertical-align:-5px;margin-left:3px}
.u3-last{white-space:nowrap}
.u3-info:hover,.u3-clock:hover,.u3-info[aria-expanded=true],.u3-clock[aria-expanded=true]{opacity:1;background:var(--rule,#0000001a)}
.u3-info:focus-visible,.u3-clock:focus-visible,.u3-chip:focus-visible,.u3-peer:focus-visible{outline:2px solid #004AB5;outline-offset:1px}
.u3-info svg,.u3-clock svg{width:15px;height:15px}
/* chips never wrap */
html.ui2 #operating-areas .u3-chip,html.ui2 #operating-areas .u3-peer{display:inline-block;justify-self:start;max-width:100%;padding:2px 7px;margin-top:4px;border-radius:999px;font:600 11.5px/1.4 inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help;background:#ffffffcc;color:#3B4048}
html.ui2 #operating-areas .u3-chip[data-tone=up]{color:#12402A}
html.ui2 #operating-areas .u3-chip[data-tone=down]{color:#8E1B14}
html.ui2 #operating-areas .u3-chip[data-tone=flat]{background:#ffffffaa}
html.ui2 #operating-areas .u3-peer .comp-tip{display:none}
html.ui2 #operating-areas .u3-peer .sr-only{display:none!important}
/* popovers */
.u3-pop{position:fixed;z-index:90;width:max-content;max-width:300px;padding:11px 13px;border-radius:12px;font-size:13px;line-height:1.45;box-shadow:0 1px 2px #0000000D,0 16px 32px -24px #00000066}
.u3-pop[hidden]{display:none}
.u3-pop b{display:block;margin-bottom:2px}
.u3-pop-dark{background:#272C33;color:#fff;max-width:260px}
.u3-pop-light{background:#fff;color:#000;border:1px solid #A8ABB0}
.u3-pop-light b{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#565C65;margin-bottom:4px}
.u3-pop-light span{display:block;font-size:13.5px}
.u3-pop small{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:#565C65;white-space:pre-line}
.u3-pop-dark small{color:#C9CDD2}
@media (max-width:640px){.u3-pop{max-width:calc(100vw - 24px)}}
/* ---------- Phone ---------- */
@media (max-width:640px){
html.ui2 #operating-areas .studio-grid{gap:14px}
html.ui2 #operating-areas .studio-card{border-radius:16px}
.u3-band{height:84px;padding:12px 14px}
html.ui2 #operating-areas .studio-card-body{display:block;padding:14px 16px 8px}
html.ui2 #operating-areas [data-u3=hero] .metric-value{font-size:34px}
html.ui2 #operating-areas [data-u3=hero]>.metric-label{font-size:14.5px}
/* small metrics become rows: name left; value, clock and chip right */
html.ui2 #operating-areas :is(.studio-growth,.grove-growth,#operating-sales-summary,.studio-metrics,#schedule-summary,#recruiting-summary,.people-heroes,.people-smalls,.labor-smalls,#operating-labor-summary,.grove-labor-splh,.loyalty-metrics,details.grove-source-detail){display:block}
html.ui2 #operating-areas [data-u3=small]{display:grid;grid-template-columns:1fr auto auto;grid-template-rows:auto;align-items:center;padding:10px 0!important;border-left:0!important;border-top:1px solid var(--rule);column-gap:8px;width:100%}
html.ui2 #operating-areas [data-u3=small]>:is(.metric-label,.growth-label-row){grid-column:1;grid-row:1/3;min-height:0;font-size:13.5px}
html.ui2 #operating-areas [data-u3=small]>:is(.metric-value,.growth-open){grid-column:2;grid-row:1;justify-self:end}
html.ui2 #operating-areas [data-u3=small]>.u3-clock{grid-column:3;grid-row:1;align-self:center}
html.ui2 #operating-areas [data-u3=small]>:is(.u3-chip,.u3-peer){grid-column:2/4;grid-row:2;justify-self:end;margin-top:0}
html.ui2 #operating-areas [data-u3=small] .metric-value{font-size:18px}
html.ui2 #operating-areas [data-u3=hero]{padding-bottom:6px;border-bottom:0}
}
html.ui2 #operating-areas .growth-label-row .metric-label{font-size:inherit;text-transform:none;letter-spacing:0}
html.ui2 #operating-areas [data-u3=small]>.growth-label-row{font-size:12.5px;line-height:1.25}
@media (max-width:640px){html.ui2 #operating-areas [data-u3=small]>.growth-label-row{font-size:13.5px}}
.u3-fav-host{margin:0!important}
/* ================= F2 (Eitan feedback 2): Home ================= */
/* H1: the Attention and Favorites pills are exactly the same height */
.u3-pills :is(.u3-pill,.u2-pill){box-sizing:border-box;height:36px;min-height:36px;line-height:1;padding:0 14px;font-size:14px;font-weight:600;display:inline-flex;align-items:center}
.u3-pills .u3-pill{font-family:inherit}
.u3-pills .u3-pill>span:not(.u3-dot):not(.u3-chev){overflow:hidden;text-overflow:ellipsis}
/* H2: filters + reload are small icon buttons at the right of the same row */
.u3-tools{display:inline-flex;gap:8px;align-items:center;margin-left:auto;position:relative}
.u3-tools #refresh,.u3-tools #home-filters>summary{box-sizing:border-box;width:36px;height:36px;min-height:36px;padding:0;display:inline-grid;place-items:center;border-radius:999px;border:1px solid #A8ABB0;background:#fff;color:#000;cursor:pointer;list-style:none;margin:0;font-size:0;line-height:1}
.u3-tools #home-filters>summary::-webkit-details-marker{display:none}
.u3-tools #home-filters>summary>span:last-child{display:none}
.u3-tools #home-filters>summary>span:first-child{font-size:17px}
/* FB5-3: SVG mask icon in a square grid cell so it centers exactly (a font glyph sits on the text baseline). */
.u3-tools #refresh{display:grid;place-items:center;grid-template:1fr/1fr;grid-auto-rows:0;aspect-ratio:1/1;overflow:hidden}
.u3-tools #refresh::before{content:"";display:block;grid-area:1/1;width:18px;height:18px;margin:0;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.u3-tools #refresh:hover,.u3-tools #home-filters>summary:hover,.u3-tools #home-filters[open]>summary{border-color:#000}
.u3-tools #home-filters{position:static;margin:0;border:0;background:none;box-shadow:none;padding:0;min-width:0;width:auto}
.u3-tools #home-filters .filter-content{position:absolute;top:44px;right:0;z-index:40;width:min(360px,calc(100vw - 32px));max-height:70vh;overflow:auto;padding:14px;border:1px solid #D9D9D9;border-radius:16px;background:#fff;box-shadow:0 1px 2px #0000000D,0 16px 32px -24px #00000033}
.u3-tools #home-filters .filter-content :is(label[for=home-week],#home-week){display:none}
.grove-controls:not(:has(*)){display:none}
@media (max-width:640px){.u3-pills .u3-pill,html.ui2 .u3-pills .u2-pill{padding:0 9px;gap:5px;font-size:12.5px}html.ui2 .u3-pills .u2-pill .u2-ic{width:10px;height:10px}.u3-pills{gap:6px}.u3-seg{padding:0 9px;font-size:12.5px}.u3-seg-wrap{width:100%}.u3-seg{flex:1 1 auto}.u3-tools{gap:6px}.u3-pills .u3-pill{flex:0 1 auto;min-width:0}.u3-pills .u3-fav-slot{flex:0 0 auto}}
/* H3: period toggle */
.u3-period{position:relative;margin:12px 0 14px}
.u3-seg-wrap{display:flex;gap:4px;padding:3px;border-radius:999px;background:#EDEDED;width:max-content;max-width:100%;overflow-x:auto;scrollbar-width:none}
.u3-seg-wrap::-webkit-scrollbar{display:none}
.u3-seg{box-sizing:border-box;height:32px;padding:0 12px;border:0;border-radius:999px;background:none;color:#3B4048;font-weight:600;font-size:13px;line-height:1;font-family:inherit;white-space:nowrap;cursor:pointer;flex:none}
.u3-seg:hover{color:#000}.u3-seg.on:hover{color:#fff}
.u3-seg.on{background:#111;color:#fff;box-shadow:none}
.u3-seg-wrap{position:relative}
.u3-ind{display:none;position:absolute;top:3px;left:0;height:32px;border-radius:999px;background:#111;box-shadow:none;pointer-events:none;will-change:transform,width}
.u3-seg-wrap.has-ind .u3-ind{display:block}
.u3-seg-wrap.has-ind .u3-seg{position:relative;z-index:1}
.u3-seg-wrap.has-ind .u3-seg.on{background:none;box-shadow:none}
/* POL-MOTION: the indicator slide is always on (reduced motion zeroes it globally); it can't animate its first placement because it goes display:none -> block. */
.u3-ind{transition:transform 150ms var(--ease-out),width 150ms var(--ease-out)}
.u3-seg:active{transform:none}
.u3-seg[data-mode=week]::after{content:"\2304";margin-left:6px;font-size:12px}
.u3-weekmenu{position:absolute;left:0;top:44px;z-index:40;min-width:220px;padding:6px;border:1px solid #D9D9D9;border-radius:14px;background:#fff;box-shadow:0 1px 2px #0000000D,0 16px 32px -24px #00000033}
.u3-weekmenu[hidden]{display:none}
.u3-weekopt{display:block;width:100%;padding:10px 12px;border:0;border-radius:9px;background:none;text-align:left;font-weight:500;font-size:14px;line-height:1.3;font-family:inherit;color:#000;cursor:pointer}
.u3-weekopt:hover{background:#F2F2F2}
@media (max-width:640px){.u3-weekmenu{position:fixed;left:12px;right:12px;top:auto;bottom:84px}}
/* H5: nothing to compare against = no pill */
html.ui2 #operating-areas .comp-line[data-u3-na]{display:none!important}
/* H6: phone tile rows. Label (+ pill underneath) on the left; value and clock sit in two fixed right columns so every row lines up */
@media (max-width:640px){
html.ui2 #operating-areas [data-u3=small]{grid-template-columns:minmax(0,1fr) minmax(64px,auto) 22px;grid-template-rows:auto auto;row-gap:4px;align-items:center}
html.ui2 #operating-areas [data-u3=small]>:is(.metric-label,.growth-label-row){grid-column:1;grid-row:1}
html.ui2 #operating-areas [data-u3=small]>:is(.u3-chip,.u3-peer){grid-column:1;grid-row:2;justify-self:start;margin-top:0}
html.ui2 #operating-areas [data-u3=small]>:is(.metric-value,.growth-open){grid-column:2;grid-row:1/3;justify-self:end;align-self:center;text-align:right}
html.ui2 #operating-areas [data-u3=small]>.u3-clock{grid-column:3;grid-row:1/3;align-self:center;justify-self:end}
}
@media (max-width:640px){.u3-pills .u3-pill .u3-chev{display:none}.u3-pills{gap:5px}.u3-tools #refresh,.u3-tools #home-filters>summary{width:34px;height:34px;min-height:34px}}
/* ================= F2 AL1: alignment pass (desktop 1280 / 1440 / 1920) ================= */
html.ui2 .u3-pills .u2-pill,html.ui2 .u3-pills .u3-pill{height:36px;min-height:36px;box-sizing:border-box;max-width:100%}
html.ui2 #operating-areas [data-u3=small]>:is(.metric-label,.growth-label-row){overflow-wrap:anywhere}
@media (min-width:641px){html.ui2 #operating-areas [data-u3=small]>:is(.metric-label,.growth-label-row){min-height:2.5em}}
html.ui2 #operating-areas .u3-open{z-index:2}
.today-stats{display:flex;gap:16px;align-items:flex-end}
/* FB5-4: a period switch keeps the page; only the numbers fade and pulse while the new ones load. */
.studio-metric .metric-value{transition:opacity var(--m-base) var(--ease-out)}
/* FB5-12: a switch answered from cache finishes inside ~80ms, so the dim waits that long and never flashes; a slow one dims at once after it. */
#dashboard.home-soft .studio-metric .metric-value{opacity:.4;transition:opacity var(--m-fast) var(--ease-out) 80ms}
@media (prefers-reduced-motion:no-preference){#dashboard.home-soft .studio-metric .metric-value{animation:m-blink 1.2s ease-in-out 200ms infinite}
#dashboard.home-swap .studio-metric .metric-value{animation:home-swap .12s ease-out}}
@keyframes home-swap{from{opacity:.3}to{opacity:1}}
html.ui2 #operating-areas .growth-window{display:block;font-size:11px;font-weight:600;letter-spacing:0;line-height:1.25;opacity:.72}
/* ================= POL-HOME (polish review HOME-1..35) ================= */
/* HOME-3/5: the selected pill slides with a calm ease; the control never overflows a phone. */
@media (prefers-reduced-motion:reduce){.u3-ind,.u3-dot{animation:none!important;transition:none!important}}
.u3-seg{min-height:32px}
@media (max-width:640px){
.u3-seg-wrap{width:100%;box-sizing:border-box}
.u3-seg{flex:1 1 auto;min-width:0;padding:0 6px;font-size:13px}
.u3-seg[data-mode=week]::after{margin-left:3px}
/* FB6-4 (phone only): the control's box, the buttons and the sliding pill are all centred on one axis, so the pill has an equal inset above and below and nothing clips. */
.u3-seg-wrap{align-items:center;height:38px;padding:0 3px;overflow-y:hidden;-webkit-appearance:none;appearance:none}
.u3-seg{align-self:center;height:32px;min-height:32px;margin:0;-webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center}
.u3-ind{top:50%;margin-top:-16px}
}
/* HOME-7: date line under the control, sentence case */
.u3-period .u3-range{margin:6px 0 0 4px;font-size:12.5px;line-height:1.3;letter-spacing:0;text-transform:none;font-weight:500;color:#565C65}
.u3-period .u3-range:empty{display:none}
html.ui2 #home-view ~ .page-heading,html.ui2 .page-heading{display:none}
/* HOME-6: pending cue. Old numbers dim and shimmer, and the date line dims with them, until the new ones land. */
#dashboard.home-soft .studio-metric .metric-value,#dashboard.home-soft .today-value{animation:home-dim 0s linear 60ms forwards}
@media (prefers-reduced-motion:no-preference){
#dashboard.home-soft .studio-metric .metric-value,#dashboard.home-soft .today-value{animation:home-dim 0s linear 60ms forwards,home-soft-pulse 1.1s ease-in-out 60ms infinite}
}
.u3-period[data-pending=true] .u3-range{opacity:.5;transition:opacity .12s}
/* HOME-13/14/12: one value size, unavailable = a muted dash with its reason in the (i) popover, labels reserve three lines on desktop */
html.ui2 #operating-areas [data-u3=small] .metric-value{font-size:20px!important;line-height:1.1;font-weight:700;white-space:nowrap}
html.ui2 #operating-areas [data-u3][data-u3-unavail] .metric-value{font-size:0!important;color:var(--sub);line-height:1}
html.ui2 #operating-areas [data-u3][data-u3-unavail] .metric-value::after{content:"\2014";font-size:20px;font-weight:700;opacity:.6}
html.ui2 #operating-areas [data-u3=small] .growth-open.growth-unavailable .metric-value{min-width:0;font-size:14px!important;line-height:1.15!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important}
html.ui2 #operating-areas [data-u3=hero][data-u3-unavail] .metric-value::after{font-size:40px}
html.ui2 #operating-areas [data-u3=hero][data-u3-unavail]::after{content:attr(data-u3-reason);grid-column:1/-1;order:5;font-size:13px;line-height:1.35;color:var(--sub);opacity:.85;margin-top:2px}
html.ui2 #operating-areas [data-u3=hero][data-u3-null] .metric-value{font-size:0!important}
html.ui2 #operating-areas [data-u3=hero][data-u3-null] .metric-value::after{content:"All clear";font-size:28px;font-weight:600;opacity:.75}
html.ui2 #operating-areas div.studio-metric,html.ui2 #operating-areas [data-u3-unavail]{cursor:default}
/* HOME-15: readable negatives */
html.ui2 #operating-areas .metric-value.negative{color:#7A1410}
/* HOME-17: four smalls sit 2x2 */
@media (min-width:641px){html.ui2 #operating-areas .studio-card[data-u3-cols="2"] .studio-card-body{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* HOME-16: the Food tile's one small metric sits at the bottom with a rule, not floating */
@media (min-width:641px){
html.ui2 #operating-areas .studio-food .studio-card-body{display:flex;flex-direction:column}
html.ui2 #operating-areas .studio-food #food-cost-slot{margin-top:auto}
html.ui2 #operating-areas .studio-food #food-cost-slot>.studio-metric{width:100%;padding:14px 0 6px;border-top:1px solid var(--rule)}
}
html.ui2 #operating-areas .studio-food #food-cost-slot>.studio-metric{cursor:pointer}
/* HOME-28 / HOME-30 */
html.ui2 #operating-areas .studio-sales .u3-band>.studio-card-photo{object-position:50% 70%!important}
.u3-greet p{text-wrap:balance}
/* HOME-18/19: hit areas of at least 40px without growing the glyphs */
.u3-info,.u3-clock,.u3-chip,.u3-peer,html.ui2 #operating-areas .u3-open{position:relative}
.u3-info::after,.u3-clock::after{content:"";position:absolute;inset:-10px}
.u3-chip::after,.u3-peer::after{content:"";position:absolute;inset:-10px 0}
html.ui2 #operating-areas .u3-open::after{content:"";position:absolute;inset:-6px -2px}
html.ui2 #operating-areas .u3-chip,html.ui2 #operating-areas .u3-peer{overflow:visible}
@media (max-width:640px){
.u3-tools #refresh,.u3-tools #home-filters>summary{width:40px;height:40px;min-height:40px}
.u3-tools{gap:4px}
/* HOME-2: the P4W chip and the peer chip get their own rows, never one origin */
html.ui2 #operating-areas [data-u3=small]{grid-template-rows:auto;row-gap:0}
html.ui2 #operating-areas [data-u3=small]>.u3-chip{grid-column:1;grid-row:2;justify-self:start;margin-top:4px}
html.ui2 #operating-areas [data-u3=small]>.u3-peer{grid-column:1;grid-row:3;justify-self:start;margin-top:4px}
html.ui2 #operating-areas [data-u3=small]>:is(.metric-value,.growth-open){grid-row:1/span 3}
html.ui2 #operating-areas [data-u3=small]>.u3-clock{grid-row:1/span 3}
}
.u3-tools #refresh[data-busy=true]::before{animation:u3spin .9s linear infinite}
@keyframes u3spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.u3-tools #refresh[data-busy=true]::before{animation:u3fade 1.2s ease-in-out infinite}@keyframes u3fade{50%{opacity:.35}}}
/* HOME-34: clock aligns with the value baseline */
html.ui2 #operating-areas [data-u3=hero]>.u3-clock{align-self:end;margin-bottom:10px}
/* HOME-22: error = one calm card with a primary retry; the stray Favorites/Filters/Overview disappear */
.u3-err{display:grid;gap:8px;justify-items:start;max-width:560px;margin:24px auto;padding:22px;border-radius:16px;background:#fff;border:1px solid #D9D9D9}
.u3-err b{font-size:18px}.u3-err span{color:#565C65;font-size:14px}
.u3-err-retry{height:44px;padding:0 22px;border:0;border-radius:999px;background:#000;color:#fff;font:600 14px/1 inherit;cursor:pointer}
html.ui2 #dashboard[data-u3-err="1"] :is(#dashboard-message,#u2-pills,.grove-controls,#refresh,.page-heading,#u3-period){display:none!important}
/* HOME-23 / HOME-24: one empty-scope card and muted tiles; the load message has a reserved slot so the controls never move */
.u3-empty{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;margin:0 0 14px;padding:12px 16px;border-radius:14px;background:#fff;border:1px solid #D9D9D9;font-size:14px}
.u3-empty button{height:40px;padding:0 16px;border:0;border-radius:999px;background:#000;color:#fff;font:600 13px/1 inherit;cursor:pointer}
html.ui2 #operating-areas[data-u3-empty="1"] .studio-card{opacity:.55}
html.ui2 #operating-areas[data-u3-empty="1"] [data-u3-unavail]::after{display:none}
html.ui2 #dashboard:has(#home-view:not([hidden])) #dashboard-message{min-height:20px;margin:0 0 4px;font-size:13px}
.u3-pill[data-u3-done]{cursor:pointer}
html.ui2 #period-label.u3-range{text-transform:none;letter-spacing:0;font-size:12.5px}
.u3-info,.u3-clock{z-index:2}.u3-chip,.u3-peer{z-index:1}
.u3-seg-wrap.u3-jump .u3-ind{transition:none!important}
/* Share tracks across each visible row of cards: band, status, hero, then two
groups of label/value/comparison tracks. Content sizes the tracks, including
wrapped labels and unavailable values; the next card row sizes independently. */
@media (min-width:641px){
html.ui2 #operating-areas .studio-grid{row-gap:0}
/* Legacy card container queries imply layout containment, which breaks subgrid. */
html.ui2 #operating-areas .studio-card{container-type:normal;display:grid;grid-row:span 11;grid-template-rows:subgrid;row-gap:0;margin-bottom:16px}
html.ui2 #operating-areas .studio-card>.u3-band{grid-row:1;margin:0}
html.ui2 #operating-areas .studio-card .studio-card-body{display:grid;grid-row:2/span 10;grid-template-rows:subgrid;row-gap:0}
html.ui2 #operating-areas .home-period-update,html.ui2 #operating-areas .home-snapshot-label{grid-row:1}
html.ui2 #operating-areas [data-u3=hero]{grid-row:2;align-content:start}
html.ui2 #operating-areas [data-u3=small]{grid-row:3/span 4;margin-top:14px;padding-top:0}
html.ui2 #operating-areas [data-u3=small][data-u3-row="1"]{grid-row:7/span 4}
html.ui2 #operating-areas [data-u3=small]>:is(.metric-label,.growth-label-row){align-self:start}
/* The booked-period metric participates in the same first small-metric row. */
html.ui2 #operating-areas .studio-food #food-cost-slot{display:contents}
html.ui2 #operating-areas .studio-food [data-u3=small]{grid-column:1/-1}
html.ui2 #operating-areas .studio-food #food-cost-slot>[data-u3=small]{width:auto;border-top:0;padding:0 8px 8px 0}
}
/* GM "master the basics" LOCKS (gm-locks.js, tour v3 2026-10-22): the Food cost, Loyalty and People/HR tiles stay in place for a pure GM, washed
white (~70%) with a lock icon and a small "Advanced" label; a tap shows the quiet toast. Pointer events land on the tile, never its controls. */
html.ui2 #operating-areas .studio-card[data-gm-locked]{cursor:pointer}
html.ui2 #operating-areas .studio-card[data-gm-locked]::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.7);z-index:2;border-radius:inherit}
html.ui2 #operating-areas .studio-card[data-gm-locked]>.gm-lock{position:absolute;inset:0;z-index:3;display:grid;place-items:center;text-align:center;color:#2A2D31;pointer-events:none}
html.ui2 #operating-areas .studio-card[data-gm-locked]>.gm-lock>div{display:grid;gap:4px;justify-items:center}
html.ui2 #operating-areas .studio-card[data-gm-locked]>.gm-lock svg{width:26px;height:26px}
html.ui2 #operating-areas .studio-card[data-gm-locked]>.gm-lock small{font:600 11px var(--font,system-ui,sans-serif);letter-spacing:.1em;text-transform:uppercase;color:#5F646B}
html.ui2 #operating-areas .studio-card[data-gm-locked]:focus-visible{outline:3px solid #004AB5;outline-offset:2px}
/* POL-PAINT (2026-10-22): reserve each tile's settled height so data landing never moves the page (CLS). Heights measured on the fixture at the
two breakpoints that matter most (3-up desktop, 1-up phone); min-height only, so a taller tile still grows. */
@media (min-width:1301px){
html.ui2 #operating-areas .studio-card[data-priority-area=sales],html.ui2 #operating-areas .studio-card[data-priority-area=labor],html.ui2 #operating-areas .studio-card[data-priority-area=schedule]{min-height:373px}
html.ui2 #operating-areas .studio-card[data-priority-area=food],html.ui2 #operating-areas .studio-card[data-priority-area=loyalty],html.ui2 #operating-areas .studio-card[data-priority-area=people]{min-height:436px}
}
@media (max-width:640px){
html.ui2 #operating-areas .studio-card[data-priority-area=sales]{min-height:396px}
html.ui2 #operating-areas .studio-card[data-priority-area=labor]{min-height:376px}
html.ui2 #operating-areas .studio-card[data-priority-area=schedule]{min-height:352px}
html.ui2 #operating-areas .studio-card[data-priority-area=food]{min-height:256px}
html.ui2 #operating-areas .studio-card[data-priority-area=loyalty]{min-height:413px}
html.ui2 #operating-areas .studio-card[data-priority-area=people]{min-height:371px}
}
/* POL-PAINT: ui2/home.js moves Filters/Reload and the Favorites pills into the u3 period bar after first render. Until then keep them out of
flow and hold the bar's 58px, so the tiles never jump up by ~27px when it lands. */
html.ui2 .grove-controls:has(#home-filters),html.ui2 #home-view>#u2-pills{display:none}
html.ui2 #home-view:not(:has(#u3-period))::before{content:"";display:block;height:58px;margin:12px 0 14px}
/* POL-PAINT: decorateCard() adds the 118px (84px phone) colour band after first render; hold its height until then. */
html.ui2 #operating-areas .studio-card:not(:has(.u3-band))::before{content:"";display:block;flex:none;height:118px}
html.ui2 #operating-areas .studio-card:not(:has(.u3-band))>:is(.studio-card-photo,h2,.studio-open){display:none}
@media (max-width:640px){html.ui2 #operating-areas .studio-card:not(:has(.u3-band))::before{height:84px}}
/* ---------- Needs you strip (replaces the attention pill dropdown) ---------- */
.u3-needs{margin:14px 0;max-width:720px;padding:14px 14px 10px;border:2px solid #E0A23A;border-radius:16px;background:#FFFBF2}
.u3-needs-title{margin:0 0 6px;padding:0 4px;font:600 16px/1.3 var(--display-font,Roboto,Arial,sans-serif);color:#5C3B00}
.u3-needs.is-clear{border:1px solid #CFE0D2;background:#F7FBF8}.u3-needs.is-clear .u3-needs-title{color:#2F6B3F}.u3-needs-clear{margin:0;padding:0 4px 4px;color:#3B4048;font-size:14px}
.u3-needs.is-pending{border-color:#E6D2A8}.u3-needs.is-pending .u3-needs-title{visibility:hidden}
.u3-needs-list{list-style:none;margin:0;padding:0}
.u3-need{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:12px;background:none;text-align:left;cursor:pointer;color:#111;font:500 14px/1.3 inherit}
.u3-need:hover{background:#F2F2F2}
.u3-need-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#B8740A}
.u3-need-dot[data-sev=crit]{background:#D30202}
.u3-need-text{flex:1;min-width:0}
.u3-need-open{flex:none;font-weight:600;color:#3B4048}
.u3-needs-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 12px 4px;border-top:1px solid #ECECEC;font-size:13px}
.u3-needs-ok{color:#2F6B3F}
.u3-needs-foot button,.u3-needs.is-dismissed button{border:0;background:none;color:#565C65;font-size:13px;cursor:pointer;min-height:32px;padding:4px 0}
.u3-needs.is-dismissed{border:1px solid #D9D9D9;background:#fff;display:flex;justify-content:space-between;align-items:center;padding:6px 14px;color:#565C65;font-size:13px}
.u3-needs.is-dismissed .u3-needs-ok{color:#565C65}
@media (max-width:640px){.u3-needs{max-width:none}}
/* Integration (2026-10-22): pending Needs-you strip keeps the one-row footprint without looking interactive; the pills row holds its
36px even before Favorites/Filters move in, so neither landing shifts the tiles. */
.u3-needs.is-pending .u3-need{cursor:default;color:#565C65}.u3-needs.is-pending .u3-need:hover{background:none}
.u3-need-dot[data-sev=pending]{background:#D9D9D9}
html.ui2 .u3-pills{min-height:36px}
.u3-needs.is-pending .u3-needs-foot{box-sizing:border-box;min-height:46px}
@media (max-width:640px){.u3-needs{padding:12px 10px 8px;border-radius:14px}.u3-needs.is-pending .u3-need{min-height:61px}} /* phone item titles usually wrap to two lines beside Open › */