/* S3 (All stores desktop) owns this file: the All stores grid at 1024 px and wider (Desktop Phase 1 spec, section 8).
   fleet-family.js renders these elements only while (min-width: 1024px) matches; narrower screens keep the phone
   page and never carry these classes. Looks (surface rules): the bar and the store cards are panels; the header,
   avatar, names, figures, stills, strip and the two lines are flat; the store switcher is a raised key; hours still to
   come and hours after today's snapshot are sunken; the ⋯ key stays the flat .store-settings-key of store-overlays.css. */
.rr-fleet-bar{display:flex;align-items:center;gap:12px;height:calc(56px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 16px 0;background:var(--panel);border-bottom:1px solid var(--border);color:var(--text-hi)}
.rr-fleet-bar .rr-brand-lockup{width:148px}
.rr-fleet-switch{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--border);border-radius:12px;background:var(--raised);box-shadow:var(--key);color:var(--text-hi);font:600 15px var(--ui);white-space:nowrap}
.rr-fleet-switch em{font:600 12px var(--mono);font-style:normal;color:var(--text-mid)}
.rr-fleet-switch [data-store-chevron]{color:var(--text-mid)}
.rr-fleet-spacer{flex:1}
/* The avatar is flat (OV1), as on the Overview and Watch: initials in brand ink on no fill, a 44 px target. */
.rr-fleet-avatar{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:transparent;box-shadow:none;color:var(--brand);font:600 13px var(--ui);text-decoration:none}
.rr-fleet-shell main{padding:16px}
/* F0 header row: y 72, 36 px tall; the cards start at y 136. */
.rr-fleet-head{display:flex;align-items:baseline;gap:12px;height:36px;margin:0 0 28px;padding:0 4px}
.rr-fleet-head h1{margin:0;font:700 22px/36px var(--ui);color:var(--text-hi)}
.rr-fleet-head p{margin:0;font-size:13.5px;color:var(--text-mid)}
/* Two columns, (W − 48) / 2 wide with 16 px gaps; 366 px tall at 1440 × 900. */
.rr-fleet-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(280px,calc((100dvh - 168px) / 2),440px);gap:16px}
/* F2 store card: stills on the left, today on the right, 1.2fr : 1fr. */
.rr-fleet-card{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border-radius:18px;box-shadow:var(--lift-outer)}
.rr-fleet-stills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;padding:12px;background:var(--canvas)}
.rr-fleet-still{position:relative;overflow:hidden;border-radius:9px;background:var(--pressed)}
.rr-fleet-still .store-card-still{position:absolute;inset:0}
.rr-fleet-still-name{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 5px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72));color:#FFFFFF;font:600 12px/1.2 var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-fleet-side{display:flex;flex-direction:column;gap:9px;min-width:0;padding:14px 16px}
.rr-fleet-name{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:0 8px}
.rr-fleet-dot{width:8px;height:8px;border-radius:50%;background:var(--text-lo)}
.rr-fleet-dot:is([data-health=online],[data-health=degraded]){background:var(--brand)}
.rr-fleet-dot[data-health=offline]{background:var(--activity)}
/* F6: the name's link covers the whole card; the ⋯ key sits above it. */
.rr-fleet-open{min-width:0;color:inherit;text-decoration:none}
.rr-fleet-open::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit}
.rr-fleet-open h2{margin:0;font:700 17px/1.25 var(--ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rr-fleet-name .store-settings-key{position:relative;z-index:3;grid-row:span 2}
.rr-fleet-name small{grid-column:2;font-size:12px;color:var(--text-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-fleet-figs{display:flex;flex-wrap:wrap;gap:4px 14px}
.rr-fleet-figs span{display:flex;flex-direction:column;gap:1px;min-width:0;font-size:11px;color:var(--text-lo)}
.rr-fleet-figs b{font:700 15px var(--mono);color:var(--text-hi);white-space:nowrap}
.rr-fleet-strip{display:flex;align-items:flex-end;gap:2px;height:30px;flex:none}
.rr-fleet-strip i{flex:1;height:10%;border-radius:2px 2px 0 0;background:color-mix(in srgb,var(--brand) 55%,transparent)}
.rr-fleet-strip i[data-state=now]{background:var(--brand)}
.rr-fleet-strip i:is([data-state=future],[data-state=pending]){background:var(--pressed);box-shadow:var(--inset)}
/* F3 and F4: gray "coming" line (owners) and at most one amber problem line. Never red. */
.rr-fleet-soon,.rr-fleet-problem{display:flex;align-items:center;gap:7px;margin:0;font-size:12.5px;line-height:1.3}
.rr-fleet-soon{font-weight:600;color:var(--text-lo)}
.rr-fleet-soon i{width:7px;height:7px;flex:none;border:1.5px dashed var(--text-lo);border-radius:50%}
.rr-fleet-problem{color:var(--text-hi)}
.rr-fleet-problem i{width:7px;height:7px;flex:none;border-radius:50%;background:var(--activity)}

.rr-fleet-strip[data-state="unavailable"]{align-items:center;color:var(--text-mid);font:500 12px var(--ui)}

.rr-fleet-stills[data-count="1"]{grid-template-columns:1fr;grid-template-rows:1fr}
.rr-fleet-stills[data-count="2"]{grid-template-columns:1fr;grid-template-rows:repeat(2,minmax(0,1fr))}
.rr-fleet-stills[data-count="3"]>:last-child{grid-column:1/-1}

.rr-fleet-stills[data-count="0"]{grid-template-columns:1fr;grid-template-rows:1fr;place-items:center}
.rr-fleet-empty{padding:16px;color:var(--text-mid);font:500 13px/1.5 var(--ui);text-align:center}