/* Home tiles, final layout (Eitan 2026-10-06). Loaded after grove.css so these values are the ones that apply.
   One set of sizes per width keeps every divider line clear of the tile photo and its round arrow button.
   Rule: the first divider sits below the photo + arrow (photo bottom + 20px). --hero-h is that distance minus the title. */
.studio-grid{--pad:18px;--ph-top:18px;--ph-w:110px;--ph-h:118px;--h2:30px;--hero-h:108px}
@media(max-width:1100px){.studio-grid{--pad:20px;--ph-top:20px;--ph-w:116px;--ph-h:130px;--h2:30px;--hero-h:112px}}
@media(max-width:640px){.studio-grid{--pad:22px;--ph-top:22px;--ph-w:122px;--ph-h:140px;--h2:58px;--hero-h:92px}}

.studio-grid .studio-card .studio-card-body{padding:var(--pad)}
.studio-grid .studio-card .studio-card-photo{top:var(--ph-top);right:var(--pad);width:var(--ph-w);height:var(--ph-h)}
.studio-grid .studio-card .grove-door{top:calc(var(--ph-top) + var(--ph-h) - 34px);right:calc(var(--pad) - 6px)}
.studio-grid .studio-card h2{min-height:var(--h2);margin:0 0 10px;max-width:calc(100% - var(--ph-w) - 16px)}
.studio-food .studio-card-photo{object-position:50% 55%}
.studio-food{background:#fff;color:#1C3A2D}

/* First row of every tile: the big number. It stops short of the photo and its divider clears the arrow button. */
.studio-grid .studio-sales .grove-hero,
.studio-grid .studio-labor #labor-premium-hero,
.studio-grid .studio-schedule .schedule-metrics>.grove-hero,
.studio-grid .studio-food .grove-hero,
.studio-grid .studio-people .people-heroes>.grove-hero,
.studio-grid .studio-loyalty .loyalty-metrics>.grove-hero,
.studio-grid .studio-people .recruiting-counts>.grove-hero{min-height:var(--hero-h);margin:0;padding:0 calc(var(--ph-w) + 12px) 12px 0;justify-content:flex-start;align-items:flex-start;gap:4px}
.studio-grid .studio-labor #labor-premium-hero,
.studio-grid .studio-schedule .schedule-metrics>.grove-hero,
.studio-grid .studio-loyalty .loyalty-metrics>.grove-hero,
.studio-grid .studio-people .recruiting-counts>.grove-hero{border-bottom:1px solid #1c3a2d26}
.studio-grid .studio-food .grove-hero{border-bottom:1px solid #1c3a2d26}
.studio-grid .studio-sales .grove-hero{border-bottom:1px solid #faf8f333}
.studio-grid .studio-sales .grove-growth{margin-top:0;padding-top:12px}
.studio-grid .studio-sales .grove-growth .studio-metrics{border-top:0;margin-top:0}

/* Labels are a little larger than before and read the same on every tile. */
.studio-grid .studio-metric .metric-label,
.studio-grid .metric-cell .metric-label{font-size:11.5px;letter-spacing:.05em;line-height:1.3;font-weight:700}
.studio-grid .studio-sales .grove-growth .metric-label{font-size:12px}

/* Labor (D12, UX P0 item 3): Premiums is the hero, then three equal small numbers like Loyalty. */
.studio-grid .labor-smalls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;margin:0;padding-top:12px;border-top:0}
.studio-grid .labor-smalls #operating-labor-summary{display:contents}
.studio-grid .labor-smalls>.studio-metric,.studio-grid .labor-smalls .grove-labor-splh>.studio-metric{grid-column:auto;min-height:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:5px;width:auto;border:0;border-radius:0;padding:2px 0 0;margin:0;background:none;box-shadow:none;color:inherit;text-align:left}
.studio-grid .labor-smalls .metric-value{font:700 17px/1.2 var(--font)}
.studio-grid .labor-smalls p{margin:0;font-size:12px;line-height:1.3}
.studio-grid .labor-smalls [hidden]{display:none}

/* Loyalty: week-to-date registrations, then three small numbers. */
.studio-grid .loyalty-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;border-top:0;padding-top:0;margin:0}
.studio-grid .loyalty-metrics>.grove-hero{grid-column:1/-1}
.studio-grid .loyalty-metrics>.studio-metric:not(.grove-hero){padding:2px 0 0}
.metric-soon{font-size:13px!important;font-weight:600!important;opacity:.7;letter-spacing:0}

/* Footer: status pill, the little clock, About this data on the right. */
.studio-grid .grove-footer{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:auto;padding-top:12px}
.studio-grid .grove-footer .about-data-link{margin-left:auto}
.grove-clock{display:flex;align-items:center;min-width:0;flex:1 1 auto}
.grove-clock:empty{display:none}
.clock-stamp{display:inline-flex;align-items:center;gap:2px;min-width:0}
.clock-button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;margin:0;border:0;border-radius:50%;background:none;color:inherit;opacity:.75;cursor:pointer}
.clock-button:hover,.clock-button[aria-expanded=true]{opacity:1}
.clock-button:focus-visible{outline:2px solid currentColor;outline-offset:-4px}
.clock-time{font-size:12px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.clock-time[hidden]{display:none}

/* Small numbers line up along the bottom even when one label wraps to two lines. */
.studio-grid .studio-metrics>.studio-metric:not(.grove-hero),
.studio-grid .schedule-metrics>.studio-metric:not(.grove-hero){justify-content:space-between}
.page-clock{margin:0 0 4px}.page-clock .clock-button{width:36px;height:36px;min-height:36px;margin-left:-8px}
.feed .clock-stamp{vertical-align:middle}
.vital-note .clock-stamp{margin-left:-10px}
.clock-button:hover,.clock-button:active,.clock-button:focus{background:none!important}

/* People: the tile body fills the card like the other five (short labels no longer stretch it). */
.studio-grid .studio-people .studio-card-body{width:100%;box-sizing:border-box}

/* People & HR (Eitan 2026-10-07): two big numbers side by side, then three small numbers like Loyalty. */
.studio-grid .studio-people .people-heroes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;width:calc(100% - var(--ph-w) - 12px);min-height:calc(var(--hero-h) + 1px);border-bottom:1px solid #1c3a2d26;margin:0;padding:0}
.studio-grid .studio-people .people-heroes>.grove-hero{min-height:0;border-bottom:0;padding:0 0 12px;margin:0}
.studio-grid .studio-people .people-heroes>.grove-hero{gap:2px}
.studio-grid .studio-people .people-heroes .grove-hero .metric-value{font-size:30px;line-height:1.05}
.studio-grid .studio-people .people-smalls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;margin:0;padding-top:12px;border-top:0}
.studio-grid .studio-people .people-smalls>.studio-metric{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:5px;width:auto;min-height:0;border:0;border-radius:0;padding:2px 0 0;margin:0;background:none;box-shadow:none;color:inherit;text-align:left}
.studio-grid .studio-people .recruiting-freshness{margin:8px 0 0;font-size:12px}
.studio-grid .studio-food .food-soon{margin:12px 0 0;font-size:14px;font-weight:600;opacity:.8}

/* One size for every small number in every tile (Eitan 2026-10-07). "Not available yet" words keep their smaller size. */
.studio-grid .studio-card .studio-metric:not(.grove-hero) .metric-value:not(.metric-soon),
.studio-grid .studio-card .grove-growth .metric-value:not(.metric-soon){font:700 17px/1.2 var(--font)!important;letter-spacing:-.03em!important}
@media(min-width:1101px) and (max-width:1380px){.studio-grid .studio-food h2{font-size:21px}}
@media(max-width:640px){.studio-grid .studio-people .people-heroes .metric-label{font-size:10px;letter-spacing:0;white-space:nowrap}}
/* P5: Sales & growth tile. No "Vs last year" heading; SST / SSS / SSC sit right under the divider, each with a tiny circled "i". */
.studio-grid .studio-sales .grove-growth{margin-top:4px}
.studio-grid .studio-sales .growth-label-row{display:inline-flex;align-items:center;gap:5px}
.metric-info-i{all:unset;box-sizing:border-box;display:inline-grid;place-items:center;width:15px;height:15px;border:1.5px solid currentColor;border-radius:50%;font:700 9px/1 var(--font,inherit);letter-spacing:0;text-transform:none;cursor:pointer;opacity:.85;flex:none;position:relative}
.metric-info-i::after{content:'';position:absolute;inset:-8px}
.metric-info-i:hover{opacity:1}
.metric-info-i:focus-visible{outline:2px solid currentColor;outline-offset:2px;opacity:1}