/* Ticket-stub time pill — the signature element (chosen design direction).
   Notches are punched with two circles colored to match the surface behind
   the stub: set --stub-notch on the containing section (#fff on white,
   #000 on the hero, var(--surface) on surface bands).
   Next upcoming showtime = solid red; all others = outline (spec §2).
   Sized below the design canvas on Mohbs's instruction — see
   mds/design-deviation-log.md. */
.stub{position:relative;display:inline-flex;align-items:center;
  padding:8px 13px;border-radius:var(--radius-stub);
  font-weight:600;font-size:13px;white-space:nowrap;
  border:1.5px solid var(--ink);color:var(--ink)}
.stub::before,.stub::after{content:"";position:absolute;top:50%;
  transform:translateY(-50%);width:9px;height:9px;border-radius:50%;
  background:var(--stub-notch)}
.stub::before{left:-6px}
.stub::after{right:-6px}

.stub--next{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.stub--next::before{left:-5px}
.stub--next::after{right:-5px}

/* On black surfaces (hero) the outline stub is white */
.on-dark .stub{border-color:#fff;color:#fff}

@media (min-width:720px){
  .stub{padding:9px 16px;font-size:14px}
  .stub::before,.stub::after{width:10px;height:10px}
  .stub::before{left:-7px}
  .stub::after{right:-7px}
  .stub--next::before{left:-6px}
  .stub--next::after{right:-6px}
}