/* Status strip prototype: split-flap tiles, a "business day" road with a delivery truck, week panel. */
.masthead{position:sticky;top:0;z-index:20;transition:transform .32s var(--out)}
.masthead .top{position:relative}
.masthead.tuck{transform:translateY(-65px)}

.strip{position:relative;background:var(--ink);color:#fff;font-variant-numeric:tabular-nums}
.strip-row{display:flex;align-items:center;gap:10px;min-height:40px}
.strip-toggle{display:flex;align-items:center;gap:8px;min-height:40px;margin:0;padding:0 6px 0 0;border:0;background:none;color:inherit;font:inherit;font-size:.95rem;cursor:pointer;text-align:left}
.strip-toggle .chev{width:16px;height:16px;color:#A89F95;transition:transform .3s var(--out)}
.strip[data-open="true"] .strip-toggle .chev{transform:rotate(180deg)}
.strip .dot{position:relative;width:10px;height:10px;border-radius:50%;background:#8C8279;flex:none}
.strip[data-state="open"] .dot{background:var(--live)}
.strip[data-state="soon"] .dot{background:var(--soon)}
.strip[data-state="open"] .dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live);animation:live 2.4s var(--out) 1.8s 4}

/* Split-flap tiles */
.flip{display:inline-block;perspective:320px;transition:width .2s var(--out);white-space:nowrap;vertical-align:middle}
.tile{display:inline-block;padding:1px 9px;border-radius:5px;line-height:1.55;background:#2B2622;
  background-image:linear-gradient(to bottom,transparent calc(50% - .5px),rgba(0,0,0,.42) calc(50% - .5px),rgba(0,0,0,.42) calc(50% + .5px),transparent calc(50% + .5px));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 0 rgba(0,0,0,.5);
  transform-origin:50% 50%;backface-visibility:hidden;transition:transform .17s cubic-bezier(.2,.9,.3,1.18),opacity .17s ease-out}
.tile.out{transform:rotateX(88deg);opacity:.25;transition:transform .1s ease-in,opacity .1s ease-in}
.tile.in{transform:rotateX(-88deg);opacity:.25;transition:none}
.label .tile{font-weight:600}
.strip[data-state="open"] .label .tile{background-color:#17703A}
.strip[data-state="soon"] .label .tile{background-color:var(--soon);color:var(--ink)}
.strip[data-state="closed"] .label .tile,.strip[data-state="early"] .label .tile{background-color:#4A433D}
.strip.rolling .label .tile{background-color:#2B2622;color:#fff}
.strip-msg{margin-left:auto;min-width:0;overflow:hidden;display:flex;align-items:center;gap:6px;min-height:40px;color:#E9E3DC;text-decoration:none;font-size:.93rem}
.strip-msg .tile{background-color:transparent;background-image:none;box-shadow:none;padding:1px 2px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.strip-msg:hover .tile{text-decoration:underline;text-underline-offset:.22em}

/* The road: the business day from opening (left) to closing (right). */
.road{position:relative;height:14px;margin:-5px auto 0;width:min(1180px,100% - 32px)}
.road::before{content:"";position:absolute;left:0;right:0;bottom:4px;height:3px;border-radius:2px;background:#3B352F}
.road-done{position:absolute;left:0;bottom:4px;height:3px;width:0;border-radius:2px;background:var(--orange);transition:width 1.5s cubic-bezier(.3,.7,.15,1)}
.strip[data-state="soon"] .road-done{background:var(--soon)}
.strip[data-state="closed"] .road-done,.strip[data-state="early"] .road-done{background:#6B635A}
.road-lane{position:absolute;left:0;right:0;bottom:5px;height:1px;opacity:.6;
  background:repeating-linear-gradient(to right,rgba(255,255,255,.55) 0 8px,transparent 8px 20px);background-size:20px 1px}
.strip.driving .road-lane{animation:lane .45s linear infinite}
@keyframes lane{to{background-position:-20px 0}}
.truck{position:absolute;left:0;bottom:2px;width:34px;height:18px;transform:translateX(0);transition:transform 1.5s cubic-bezier(.3,.7,.15,1);will-change:transform}
.truck svg{display:block;width:34px;height:18px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.5))}
.strip.driving .truck svg{animation:rumble .18s linear infinite}
@keyframes rumble{50%{transform:translateY(-.6px)}}
.strip[data-state="early"] .truck svg{animation:idle 1.2s ease-in-out 3}
@keyframes idle{50%{transform:translateY(-1px)}}
.road-tick{position:absolute;bottom:2px;width:2px;height:8px;border-radius:1px;background:#5A524A}
.road-tick.start{left:0}.road-tick.end{right:0}

/* Week panel */
.strip-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--out);background:#221E1A}
.strip[data-open="true"] .strip-panel{grid-template-rows:1fr}
.strip-panel>div{overflow:hidden}
.week{width:min(1180px,100% - 32px);margin:0 auto;padding:14px 0 18px;display:grid;gap:14px}
.week h2{font-size:1rem;font-weight:500;color:#CFC6BC;margin:0}
.week-rows{position:relative;display:grid;gap:6px;margin-top:18px}
.week-row{display:grid;grid-template-columns:5.2em 1fr 6.6em;align-items:center;gap:10px;font-size:.92rem;color:#CFC6BC}
.week-row.is-today{color:#fff;font-weight:500}
.bar{position:relative;height:10px;border-radius:5px;background:#332D28}
.bar i{position:absolute;top:0;bottom:0;border-radius:5px;background:#6B5F55;transform-origin:left;transform:scaleX(0);transition:transform .5s var(--out)}
.week-row.is-today .bar i{background:var(--orange)}
.strip[data-open="true"] .bar i{transform:scaleX(1)}
.now-line{position:absolute;top:-4px;bottom:-4px;width:2px;background:#fff;border-radius:1px;opacity:0;transition:opacity .3s .3s}
.now-line::after{content:attr(data-time);position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:.75rem;color:#fff;white-space:nowrap}
.strip[data-open="true"] .now-line{opacity:1}
.week-actions{display:flex;flex-wrap:wrap;gap:8px}
.week-actions .btn{min-height:46px;flex:1 1 150px;white-space:nowrap}
.btn-ghost-light{background:transparent;color:#fff;border:1.5px solid #5A524A}

@media (max-width:379px){.strip-msg{display:none}}
@media (max-width:767px){.week-row{grid-template-columns:3.2em 1fr 6.4em}}
@media (prefers-reduced-motion:reduce){
  .tile,.truck,.road-done,.strip-panel,.bar i,.masthead{transition:none!important}
  .road-lane,.truck svg,.strip .dot::after{animation:none!important}
}


html:not(.js) .strip .road,html:not(.js) .strip .strip-panel,html:not(.js) .strip .chev{display:none}
html:not(.js) .strip-toggle{cursor:default}
@keyframes live{from{transform:scale(1);opacity:.7}to{transform:scale(3.2);opacity:0}}